/* Theme by IO200 CMS (https://www.IO200.com) */

/*#########################################################*/
/*##########LAYOUT#########################################*/
/*#########################################################*/
:root{--website-background:#fff;}
@media (min-width:1000px){html{scroll-behavior:smooth;scroll-padding-top:1rem;}}
@media (max-width:999px){html{scroll-behavior:smooth;scroll-padding-top:0.25rem;}}
@media (min-width:1000px){
  html:not(.glightbox-open){scrollbar-gutter:stable;}
  body.glightbox-open:not(.gscrollbar-fixer){scrollbar-gutter:stable;margin-right:0;}
}
body{font-size:16px;font-family:sans-serif;color:#464646;background:var(--website-background);}
main h1,main h2,main h3,main h4,main h5,main h6{color:#222222;}

/*----------DESKTOP----------------------------------------*/
@media (min-width:1000px){
/*
  html, body{height:100%;width:100%;}
  div#container{width:100%;max-width:80rem;height:100%;max-height:100%;box-sizing:border-box;}
  header, main, footer{margin:2rem;box-sizing:border-box;}
  header{position:fixed;top:0;left:0;width:16rem;height:calc(100% - 4rem - 16% - 6em - 1em);}
  main{width:calc(100% - 24rem);max-width:72rem;position:absolute;left:18rem;padding-bottom:2em;}
  footer{position:fixed;bottom:0;left:0;width:16rem;max-height:calc(16%);overflow-y:auto;}
  header nav{overflow-y:auto;height:100%;}
  header nav::-webkit-scrollbar, footer::-webkit-scrollbar{width:0.4em;height:0.4em;}
  header nav::-webkit-scrollbar-track, footer::-webkit-scrollbar-track {background-color:rgba(0, 0, 0, 0.05);}
  header nav::-webkit-scrollbar-thumb, footer::-webkit-scrollbar-thumb {background-color:rgba(0, 0, 0, 0.15);}
  header nav::-webkit-scrollbar-thumb:hover, footer::-webkit-scrollbar-thumb:hover {background-color:rgba(0, 0, 0, 0.2);}
  header nav{overflow:auto;}
  header nav:hover{overflow-y:auto;}
*/
  html, body{height:100%;width:100%;}
  div#container{display:grid;grid-template-columns:18rem calc(100% - 18rem);grid-template-rows:min-content 1fr;min-height:100%;box-sizing:border-box;}
  header, main, footer{margin:2rem 2rem 0 2rem;height:min-content;box-sizing:border-box;}
  header{grid-column-start:1;grid-row-start:1;}
  main{padding:1rem 0;margin-top:1rem;grid-column-start:2;grid-row-start:1;grid-row-end:3;}
  footer{margin-bottom:1rem;grid-column-start:1;grid-row-start:2;align-self:start;}
  @media (max-height: 720px) {footer {margin-top:1.5rem;}}
  @media (min-height: 720px) {
     div#container{grid-template-rows:1fr min-content;}
     header, main, footer{padding-bottom:2rem;}   
     header {position:sticky;top:2rem;}   
     footer {position:sticky;bottom:0;margin-bottom:0;padding-top:2rem;background:var(--website-background);} 
     header:hover{z-index:1;background:var(--website-background);}
  }
  @media (min-height: 720px) {
	 .glightbox-open header{position:fixed;top:0;width:18rem;}
	 .glightbox-open footer{position:fixed;bottom:0;width:18rem;}
  }
  main{max-width:90rem;}
  main.template-page:not(.page-fullwidth), main.template-contact{max-width:60rem;}
  main.template-set, main.template-album, main.template-albums, main.template-phototags, main.template-photosearch, main.template-photo{max-width:100rem;}
  main.template-photoshowcase{max-width:120rem;}
  main.template-blog {max-width:90rem;}
  main.template-blog .sectioncontainer.blog-article {max-width:64rem;justify-content:flex-start;}  
} 
/*header*/
@media (min-width:1000px){
  header span.website-title{color:#222222;font-size:2.3em;display:inline-block;}
  header span.website-title:hover{cursor:pointer;}
  header span.website-tagline{margin-top:0.1rem;font-size:0.92em;display:block;}
}
/*nav*/
@media (min-width:1000px){
  header nav ul, footer nav ul{list-style:none;}
  header nav ul li{padding:0.2em 0;}
  header nav ul ul{margin-top:0.2em;margin-bottom:-0.2em;}
  header nav ul li .nav-item-title{font-size:0.92em;font-weight:300;text-decoration:none;text-transform:uppercase;letter-spacing:1px;}
  header nav ul li:not(.active) a:hover, footer nav ul li:not(.active) a:hover{color:#b4b4b4;}
  header nav ul li.active:not(.active-sublink) > a, footer nav ul li.active > a{font-weight:600!important;}
  header nav ul ul{margin-left:0.75em;}
  header nav > ul > li{margin-bottom:0.25em;}
}
/*footer*/
@media (min-width:1000px){
  footer{gap:1em;}
  footer nav ul.secondary li{width:100%;line-height:1.6em;}
  footer nav ul.secondary li:last-child{line-height:initial;}
  footer nav ul.secondary li:after{display:none;}
  footer nav ul.secondary li a, footer nav ul.secondary li span{font-size:0.8em;font-weight:300;text-decoration:none;text-transform:uppercase;letter-spacing:0.5px;}
}


/*----------MOBILE----------------------------------------*/
@media (max-width:999px){
  div#container{padding:0 1rem;width:100%;box-sizing:border-box;}
  header, main, footer{width:100%;box-sizing:border-box;}
  header{margin-top:0.2em;padding:1.2rem 36px 1.2rem 0;background-image:url(../img/menu_light.png);background-position:center right;background-repeat:no-repeat;background-size:16px 12px;}
  header.shownav{background-image:url(../img/menu-close_light.png);background-size:16px 16px;}
  body::after{position:absolute;width:0;height:0;overflow:hidden;z-index:-1;content:url(../img/menu-close_light.png);} /*preload image*/
  main{margin-top:1rem;margin-bottom:1rem;}
  footer{margin-bottom:2rem;}
}
/*header*/
@media (max-width:999px){
  header div.title-container{display:flex;align-items:center;justify-content:space-between;}
  header span.website-title{font-size:6vw;color:#222222;line-height:1em;display:inline-block;word-break:break-word;}
  header span.website-title:hover{cursor:pointer;}
  header span.website-title a{vertical-align:bottom;}
  header span.website-tagline{display:none;}
}
/*nav (modern)*/
@media (max-width:999px){
  header nav {position:static;}
  header nav ul {line-height:1.6em;list-style:none;}
  header nav > ul{margin-top:1.2rem;text-align:center;z-index:1000;display:none;position:absolute;left:0;width:100%;border:0;background:var(--website-background);box-shadow:0 6px 8px rgba(0, 0, 0, 0.2);border-top:1px solid #f4f4f4;}
  header.js-nav.shownav nav > ul, header:not(.js-nav):hover nav > ul, header:not(.js-nav):active nav > ul{display:block;}
  header nav > ul > li{padding:0.3rem;}
  header nav > ul li{width:100%;box-sizing:border-box;}
  header nav > ul li > .nav-item-title{color:#222222;font-size:1.1em;font-weight:700;padding:0.4rem 0.6rem;width:100%;display:inline-block;box-sizing:border-box;text-align:left;text-decoration:none;letter-spacing:0.04em;}
  header nav ul li a:hover, header nav ul li a:active{text-decoration:underline;text-underline-offset:0.2em;}
  header nav > ul ul{margin-top:-0.4rem;}
  header nav > ul ul li .nav-item-title{font-size:0.96em;font-weight:600;padding:0.3rem 0.6rem 0.3rem 1.6rem;}
}
@media (max-width:999px){ /*hide nav icon when no links*/
  header:not(:has(nav ul li)) nav {display:none;}
  header:not(:has(nav ul li)){background-image:none!important;}
}
@media (max-width:999px){ /*full height*/
  body.shownav header nav > ul {height:calc(100dvh - 1.2rem - 2.6rem - 1rem + 1rem);overflow:auto;}
  body.shownav header nav > ul > *:last-child{padding-bottom:2rem;}
  body.shownav{overflow:hidden;}
}
@media (max-width:999px){ /*effect*/
  header.js-nav nav > ul{display:block;} /*reset*/
  body header nav > ul {height:calc(100dvh - 1.2rem - 2.6rem - 1rem + 1rem);} /*reset*/
  header.js-nav nav ul {opacity:0;max-height:0;overflow:hidden;transition:max-height 0.25s ease-out;}
  header.js-nav.shownav nav ul{opacity:1;max-height:100vh;transition:max-height 0.25s ease-out;}
  header.js-nav nav > ul > li{opacity:0;transition:opacity 0.25s ease-out;}
  header.js-nav.shownav nav > ul > li{opacity:1;transition:opacity 0.8s 0.1s ease-out;}
}
/*footer*/
@media (max-width:999px){
  footer, footer *{justify-content:center;text-align:center;}
  footer ul.secondary{font-size:0.96em;}
}


/*#########################################################*/
/*##########CUSTOM#########################################*/
/*#########################################################*/
@media (min-width:1000px){header span.website-title{max-width:100%;object-fit:contain;object-position:0 0;}}/*logo*/
@media (min-width:1000px){
  header span.website-title{font-size:2em;line-height:1em;}  
  header span.website-tagline{margin-top:0.2rem;color:#4f4f4f;}
  header nav{margin-top:1rem;}
  main h1{font-size:1.8em;line-height:1em;}
}
/*logo height*/
@media (min-width: 1000px){header span.website-title {height:auto!important;}}

@media (min-width:1000px){ /*collection-description max width*/
  main.template-set p.collection-description, main.template-album p.collection-description, main.template-albums p.collection-description{max-width:60rem;}
}

/*---Flavor:MOBILE_TOP_WHEN_PHOTO_OR_ARTICLE---*/
@media (max-width:999px){
  main.template-photo div.photo-image img.photo{margin-top:-1rem;}
  main.template-blog article.style-article .header .article-image.image-available{margin-top:-1rem;}
}
/*---Flavor:MOBILE_TOP_WHEN_NOHEADING---*/
@media (max-width:999px){
  main{margin-top:0;}
  main:has(h1.mobile:first-child), main.template-photo{margin-top:1rem;}
}

/*---Flavor:TEXT_JUSTIFY2---*/
@media (min-width:1000px){main p, main blockquote{text-align:justify;}}
@media (min-width:1000px){main.template-set .collection-description, main.template-album .collection-description, main.template-albums .collection-description{text-align:left;}}

/*---Flavor:GALLERY_SET_LAYOUT_GRID-LEFT---*/
@media (min-width:1000px){
  ul.gallery.gallery-set.layout-grid li span {text-align:left;}
  ul.gallery.gallery-set.layout-grid li div.photo-wrapper.photo-portrait{margin-left:0;}
}
/*---Flavor:GALLERY_SET_LAYOUT_WALL-LEFT---*/
@media (min-width:1000px){
  ul.gallery.gallery-set.layout-wall li span {text-align:left;}
}


/*---Flavor:SET/ALBUMS/ALBUM---*/
/*slideshow max height*/
@media (min-width:1000px){ 
  main.template-album, main.template-albums, main.template-set{ul.gallery.layout-slideshow{margin-bottom:0;}}
  main.template-album, main.template-albums, main.template-set{ul.gallery.layout-slideshow ul.slideshow{max-height:calc(100vh - 4rem);}}
  main.template-album:has(h1.desktop), main.template-albums:has(h1.desktop), main.template-set:has(h1.desktop){ul.gallery.layout-slideshow ul.slideshow{max-height:calc(100vh - 4rem - 3em);}}
}
/*---Flavor:PHOTOSITE---*/
/*photo max height*/
@media (min-width:1000px){main.template-photo div.photo-image img.photo{max-height:calc(100vh - 5.5em);}}
/*max width:left*/
@media (min-width:1000px){
  main.template-photo section.sectionaside-photo > *:not(.photo-image){max-width:64rem;}
  main.template-photo aside.sectionaside-photo{width:auto!important;max-width:64rem!important;}
}
/*photo left*/
main.template-photo section.sectionaside-photo img.photo{object-position:0 0!important;}

/*---Flavor:PHOTOSHOWCASE---*/
/*show complete slideshow photo in browser (depends on header height) */
@media (min-width:1000px){
  main.template-photoshowcase ul.gallery.layout-slideshow.gallery-mounted:not(.fullscreen) ul.slideshow,
  main.template-photoshowcase ul.gallery.layout-slideshow.gallery-mounted:not(.fullscreen) ul.slideshow img{height:calc(100vh - 4rem);}
  main.template-photoshowcase ul.gallery.layout-slideshow.gallery-mounted:not(.fullscreen):has(.slideshow-navigation.dots) ul.slideshow,
  main.template-photoshowcase ul.gallery.layout-slideshow.gallery-mounted:not(.fullscreen):has(.slideshow-navigation.dots) ul.slideshow img{max-height:calc(100vh - 6rem);}
  main.template-photoshowcase ul.gallery.layout-slideshow.gallery-mounted:not(.fullscreen):has(.slideshow-navigation.thumbs) ul.slideshow,
  main.template-photoshowcase ul.gallery.layout-slideshow.gallery-mounted:not(.fullscreen):has(.slideshow-navigation.thumbs) ul.slideshow img{max-height:calc(100vh - 9rem);}
}
/*mobile fullsize*/
@media (max-width:999px){  
  main.template-photoshowcase{margin-top:0;}
  body.template-photoshowcase footer{margin-bottom:0.5rem;}
  main.template-photoshowcase div.start-singlephoto,
  main.template-photoshowcase div.start-slideshow{width:calc(100% + 2rem);margin-left:-1rem;}
  main.template-photoshowcase ul.slideshow{height:calc(var(--viewport-initialheight, 2rem) - 0.2rem - var(--header-height, 2rem) - 1rem - var(--footer-height, 2rem));}
}