html, body {height: 100%;}
main {padding: 0 50px; max-width: 1400px; margin: 50px auto; text-align: center;}
.post, .page {margin: 0;}
.page-content, .entry-content, .entry-summary {margin: 1.5em 0 5em;}
#page {flex: 1 0 auto;}

/* Typography
--------------------------------------------- */
body {font-family: "Nunito", sans-serif; display: flex; flex-direction: column;}
a, a:visited {color:#333333; transition: all 0.5s; letter-spacing:0px; font-weight: normal;}
footer a:hover {font-weight: bold; letter-spacing: 1px;}
h1,h2 {font-weight:100;}
blockquote {font-size: larger; font-style: italic;}

/* Header
--------------------------------------------- */
#masthead {text-align: center; margin-top:50px;}
.custom-logo-link {max-width: 140px;}
#primary-menu {display: flex; justify-content: center;}
.main-navigation ul {margin:20px;}
.main-navigation ul li {margin: 0 30px;}

/* Home page
--------------------------------------------- */

.fancybox__container {--fancybox-bg: rgba(255,255,255, 0.95) !important;}
#buttons {display:flex;flex-direction:row;max-width:1400px;margin:40px auto;}
#buttons a {width: 44%;height: 0;padding: 22% 0;text-align: center;background-repeat: no-repeat;background-size: 105%;border-radius: 100%;background-position: center; margin:0 3%; text-decoration: none; font-weight: 100; background-blend-mode: multiply; color:transparent; transition: all 0.5s; display: flex; align-items: center; justify-content: center;}
#buttons a:hover {background-color: rgba(85,150,175, 0.8); color: white;}
#buttons a h2 {transition: all 0.3s;}
#buttons a:hover h2 {font-size: 2em;}
.divider {width: 100%; height: 0; padding-bottom: 6%; background-size: 100%;}
.divider.first {background-image: url("img/line1.png");}
.divider.second {background-image: url("img/line2.png"); padding-bottom: 8%;}
#profile, #sieraden {display: flex; flex-direction: row;margin-top: 80px;padding: 0 100px;}
#profilepic, #sieradenpic {width: 30%; height: 0; background-size: 100%; background-repeat: no-repeat; margin-top: 22px;}
#profilepic {padding-bottom: 26%;}
#sieradenpic {padding-bottom: 36%;}
#profiletext, #sieradentext {width: 70%; margin-left: 50px;}

/* Footer
--------------------------------------------- */
.site-footer {background-color: #dbb24b; flex-shrink:0;}
.site-footer {padding: 0; color: white;}
.site-footer a, .site-info a:visited {color: #ffffff;}
#praktische-info {display: flex; padding: 30px 0;}
.footer-area {width:33.3333%; margin-left: 10%;}
.footer-area p {margin: 5px 0;}
:where(.wp-block-columns.is-layout-flex) {gap: 1em;}
.footer-area ul{margin-left:0; padding-left:0;list-style:none;}
.site-info {text-align:center; background-color: rgb(215, 170, 50); padding: 5px 0 1px;}

html body .modula .modula-items .modula-item.effect-pufrobo .jtg-title {opacity: 0;}
html body .modula .modula-item.effect-pufrobo:hover .jtg-title {opacity:1;}
html body .modula .modula-item.effect-pufrobo .figc {background-color: transparent; transition: all 0.5s;}
html body .modula .modula-item.effect-pufrobo:hover .figc {background-color: rgba(85,150,175, 0.8);}
html body main .modula .modula-item.effect-pufrobo:hover .jtg-title::after, html body .modula .modula-item.effect-pufrobo:hover p {margin-top: 10px; margin-bottom: 5px; opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.modula-item .figc {display: flex; align-items: center; justify-content: center;}
html body main .modula .modula-item.effect-pufrobo .figc {text-align: center;}
html body main .modula .modula-items .modula-item.effect-pufrobo .jtg-title {font-size: 1.3em; font-weight: lighter;}
.modula-fancybox-container .f-button {color: rgba(17,87,130, 0.8); background: transparent;}
.modula-fancybox-container .f-button:hover:not([disabled]) {color: rgba(85,150,175, 1); background: transparent;}
.modula-fancybox-container.modula-lightbox-jtg-7 .fancybox__caption, .modula-fancybox-container.modula-lightbox-jtg-10 .fancybox__caption {align-self: center!important; color:#333333;}
html body .modula-gallery .modula-item.effect-pufrobo .jtg-title {text-align: center!important;}
@media (hover: hover) {
.modula-fancybox-container .f-button:hover {color: rgba(17,87,130, 1); background: transparent;}
}


@media screen and (max-width: 1200px) {
#profile, #sieraden {padding: 0 0;}
}

@media screen and (max-width: 993px) {
}


@media screen and (max-width: 900px) {
#profile, #sieraden {flex-direction: column;}
#profilepic {width: 100%; padding-bottom: 91%;}
#sieradenpic {width: 100%; padding-bottom: 124%;}
#profiletext, #sieradentext {width: 100%; margin-left:0; margin-top: 30px;}
	
  /*-- Hamburger Main Menu  --------------------------------------------------------------*/

  .nav{-webkit-transition: right 0.5s ease; -moz-transition: right 0.5s ease; -ms-transition: right 0.5s ease; -o-transition: right 0.5s ease; transition: right 0.5s ease; background-color: rgba(17,87,130, 0.8); color: white; cursor: pointer; height: 100vh;
  right: -100vw; padding: 15rem 2rem 2rem 3rem; position: fixed; top: 0; width: 100vw; z-index: 2; justify-content: flex-start;}
  .nav.expanded {right: 0;}
  .nav ul {display: block;}
  #nav-toggle-wrapper {position: relative; display: flex; justify-content: center; padding: 12px 30px; height: 70px;}
  .nav-toggle { -webkit-user-select: none; -moz-user-select: none; position: relative; user-select: none; cursor: pointer; height: 3rem; width: 2.5rem; z-index: 3;}
  .nav-toggle:hover {opacity: 0.8;}
  .nav-toggle .nav-toggle-bar,  .nav-toggle .nav-toggle-bar::after,  .nav-toggle .nav-toggle-bar::before {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; background: #404040; content: ''; height: 2px; width: 100%; border-radius: 4px; text-align: left;}
  .nav-toggle .nav-toggle-bar {margin-top: 0;}
  .nav-toggle .nav-toggle-bar::after {margin-top: 0.8rem;}
  .nav-toggle .nav-toggle-bar::before {margin-top: -0.8rem;}
  .nav-toggle.expanded .nav-toggle-bar {background: transparent;}
  .nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {background: white; margin-top: 0;}
  .nav-toggle.expanded .nav-toggle-bar::after {-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
  .nav-toggle.expanded .nav-toggle-bar::before  {-ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
  .main-navigation.expanded li a {color: white; font-size: 1.4em;}
  .main-navigation.expanded a {font-weight: lighter;}
  .main-navigation.expanded .current-menu-item a {font-weight: bolder;}
	#primary-menu {flex-direction: column;}
}	

@media screen and (max-width: 768px) {
main {padding: 0 20px; text-align: left;}
#praktische-info {flex-direction: column; padding: 0 20px;}
.footer-area {width: 100%; margin-left: 0;}
.site-info {text-align: left; padding: 7px 20px 1px; margin-top:20px;}
#buttons a h2 {font-size:1.2em;}
#buttons a:hover h2 {font-size:1.2em;}
.divider.first {background-image: url(img/line1-mob.png);}
.divider.second {background-image: url(img/line2-mob.png);}
}