/* CMS and Theme by IO200 CMS (https://www.io200.com) */
@import "_base.css?v=2.8.6";


/*#########################################################*/
/*##########LAYOUT#########################################*/
/*#########################################################*/
body{--website-background:#fff;} 
@media screen and (min-width:1000px){html{margin-left:calc(100vw - 100%);}}
body {font-size:15.2px;font-family:'Open Sans', sans-serif;color:#464646;background:var(--website-background);}

/*----------DESKTOP----------------------------------------*/
@media screen and (min-width:1000px){
  div#container{width:100%;max-width:1360px;margin:0 auto;padding:1.5rem 3rem;box-sizing:border-box;}
  header, main, footer{width:100%;}
  header{margin-bottom:1em;display:flex;justify-content:space-between;align-items:flex-end;}
  footer{clear:both;margin-top:1rem;padding-top:0.5rem;}
}
/*header*/
@media screen and (min-width:1000px){
  header span.title{margin:0.15em 0;color:#383838;font-size:2.3em;font-weight:300;font-family:'Lato', sans-serif;display:inline-block;}
  header span.title:hover{cursor:pointer;}
  header span.tagline{margin-bottom:1rem;font-size:0.92em;display:block;}
}
/*nav*/
@media screen and (min-width:1000px){  
  header nav {font-size:1.1em;line-height:2em;}
  header nav ul li{display:inline-block;padding-right:1.5em;}
  header nav ul li a, header nav ul li span{display:block;color:#343434;text-decoration:none;letter-spacing:0.025em;font-weight:300;}
  header nav li a:hover, header nav li.active > a{color:#aaaaaa;}
  header nav > ul > li{position:relative;}
  header nav > ul > li > ul {font-size:0.96em;z-index:100;display:none;min-width:calc(100%);position:absolute;top:2em;margin-left:-0.4em;padding:0.4em;background:var(--website-background);box-shadow:0 0 0.25em 0 rgba(0,0,0,0.1);box-sizing:border-box;}
  header nav > ul > li:hover ul{display:block;text-align:left;}
  header nav > ul > li > ul li{padding:0 0.2em 0.2em 0.2em;white-space:nowrap;display:block;}
  header nav > ul > li > ul li:last-child{padding-bottom:0;}
}
/*footer*/
@media screen and (min-width:1000px){
  footer nav ul.secondary {font-size:0.95em;}
  footer nav ul.secondary li{display:inline-block;}
  footer nav ul.secondary li:after, footer nav ul.secondary ul:before{content:"\00a0/\00a0";color:#383838;}
  footer nav ul.secondary li:last-child:after{content:"";}
}

/*----------MOBILE----------------------------------------*/
@media screen and (max-width:999px){
  div#container{padding:0 1em;width:100%;box-sizing:border-box;}
  header, main, footer{width:100%;box-sizing:border-box;}
  header{padding-right:25px;margin-bottom:1em;background-image:url(../img/menu_light.png);background-position:center right;background-repeat:no-repeat;background-size:16px 12px;}
  footer{margin-bottom:1.2em;margin-top:0.6em;}
}
/*header*/
@media screen and (max-width:999px){
  header span.title{margin:0.5em 0;color:#383838;font-weight:300;font-family:'Roboto', sans-serif;display:inline-block;}
  header span.title:hover{cursor:pointer;}
  header span.tagline{display:none;}
}
/*nav*/
@media screen and (max-width:999px){header span.title{font-size:2.6em;}header nav ul{top:5.6em;}} 
@media screen and (max-width:680px){header span.title{font-size:2.4em;}header nav ul{top:5.2em;}}
@media screen and (max-width:600px){header span.title{font-size:2.1em;}header nav ul{top:4.4em;}}
@media screen and (max-width:535px){header span.title{font-size:1.9em;}header nav ul{top:4.1em;}}
@media screen and (max-width:490px){header span.title{font-size:1.7em;}header nav ul{top:3.6em;}}
@media screen and (max-width:440px){header span.title{font-size:1.5em;}header nav ul{top:3.3em;}}
@media screen and (max-width:400px){header span.title{font-size:1.3em;}header nav ul{top:2.9em;}}
@media screen and (max-width:350px){header span.title{font-size:1.2em;}header nav ul{top:2.7em;}} 
@media screen and (max-width:999px){
  header nav {position:absolute;top:0;left:0;right:0;padding:0;border:0;}
  header nav ul {line-height:2em;list-style:none;}
  header nav > ul{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;margin-top:-0.5px;}
  header nav > ul > li{padding:0.3rem;border-bottom:1px solid #f4f4f4;}
  header nav > ul li{border-right:0;width:100%;box-sizing:border-box;}
  header nav > ul li:first-child{border-left:none;margin-left:0;}
  header nav > ul li a, header nav > ul li span{font-size:1.1em;font-weight:300;padding:0.6rem;width:100%;display:inline-block;box-sizing:border-box;text-decoration:none;text-transform:uppercase;letter-spacing:0.08em;}
  header nav > ul li a:hover{color:#fff;background:#222222;}
  header nav > ul ul{display:none;}
}
/*footer*/
@media screen and (max-width:999px){
  footer nav ul.secondary{line-height:1.8em;font-size:0.9em;display:block;text-align:center;}
  footer nav ul.secondary li{display:inline-block;}
  footer nav ul.secondary li:after, footer nav ul.secondary ul:before{content:"\00a0\00a0\2022\00a0\00a0";}
  footer nav ul.secondary li:last-child:after{content:"";}
  footer p.footer-link{text-align:center;}
}




/*#########################################################*/
/*##########CUSTOM#########################################*/
/*#########################################################*/
@media screen and (min-width:1000px){  
  footer nav ul.secondary li a, footer nav ul.secondary li span{color:#767676;}
  footer nav ul.secondary li:after, footer nav ul.secondary ul:before{color:#767676;}
}
@media screen and (max-width:999px){main.template-photo {margin-top:-2em;padding-top:1em;}}
/*gallery.layout-wall*/ 
ul.gallery.layout-wall{width:calc(100% + 6px);margin-left:-3px;margin-top:-3px;}
ul.gallery.layout-wall li{margin:3px;}


/*---Flavor:LAYOUT_RIGHT---*/
@media screen and (min-width:1000px){
  header{display:flex;justify-content:space-between;align-items:flex-end;}
  header span.tagline{margin-bottom:0.4rem;}
}
@media screen and (min-width:1000px){  
  header nav {float:right;}
  header nav ul li{padding-left:1.5em;padding-right:0;}
}
@media screen and (min-width:1000px) and (max-width:1600px){  /*dropdown nav*/
  header nav > ul > li:last-child > ul {right:-0.5em;}
  header nav > ul > li:last-child  > ul li{text-align:right;}
}
@media screen and (min-width:1000px){
   main.template-photoshowcase div.start-singlephoto img.photo{max-width:unset!important;}
}
@media screen and (min-width:1000px){ 
  footer nav{display:flex;justify-content:space-between;}
  footer nav ul.socialmedia img{margin-left:1em;margin-right:0;}
  footer nav ul.socialmedia li:first-child img{margin-left:0;}
}


/*---Flavor:LAYOUT_FULLWIDTH---*/
@media screen and (min-width:1000px){ /*full width*/
  html{margin-left:0;}
  div#container{padding:1rem 2rem;margin-left:0;max-width:calc(100vw - 24px);}
  header span.title{margin:0;}
}
@media screen and (min-width:1000px){ /*nav*/
  header nav > ul > li{padding-left:2em!important;}
}
@media screen and (min-width:1000px){ /*dropdown nav*/
  header nav > ul > li:last-child > ul {right:-0.5em;}
  header nav > ul > li:last-child > ul li{text-align:right;}
}
@media screen and (min-width:1000px){ /*footer bottom*/
  div#container{padding-bottom:0;display:flex;flex-direction:column;min-height:100vh;justify-content:space-between;}
  footer{padding-bottom:1.5rem;}
  footer nav ul{margin-bottom:0!important;}
  footer p.footer-link{margin-top:1em;} 
  /* sticky footer: footer{padding-top:1rem;position:sticky;bottom:0;background:#fff;} */
}
@media screen and (min-width:1000px){ /*site width, centering*/ 
  div#container main:not(.template-page):not(.template-contact){flex:1;}
  div#container main.template-page,
  div#container main.template-contact{margin-top:1em;max-width:56em;margin-left:auto;margin-right:auto;}
  div#container main.template-blog section.blog-article:not(.style-classic){margin-top:1em;max-width:64em;margin-left:auto;margin-right:auto;}
}
@media screen and (min-width:1000px){ /*photoshowcase*/
  body, html, div#container{height:100%;}
  body.template-photoshowcase footer{padding-top:0;}
  body.template-photoshowcase footer:has(nav ul), body.template-photoshowcase footer:has(p){padding-top:0.5rem;}
  main.template-photoshowcase, main.template-photoshowcase:has(div.start-slideshow), main.template-photoshowcase:has(div.start-singlephoto){display:flex;flex:1;}
  main.template-photoshowcase > div.start-singlephoto {display:flex;}
  main.template-photoshowcase > div.start-singlephoto > div {flex:1;}  
  main.template-photoshowcase div.start-singlephoto img{object-fit:cover;height:100%!important;}
  main.template-photoshowcase div.start-slideshow ul.gallery.layout-slideshow,
  main.template-photoshowcase div.start-slideshow li.slideshow-content,
  main.template-photoshowcase div.start-slideshow ul.slideshow{height:100%!important;}
  main.template-photoshowcase div.start-slideshow li.slideshow-info{display:none;}
}
@media screen and (min-width:1000px){ /*phototimeline*/
 main.template-phototimeline ul.gallery.gallery-album.layout-timeline{max-width:90em;}
}



/*---Flavor:TITLE_ROBOTO---*/
@media screen and (min-width:1000px){
  header span.title a{font-family:'Roboto', sans-serif;font-size:0.9em;font-weight:300;}
}


/*---Flavor:NAV_UNDERLINE---*/
@media screen and (min-width:1000px){
  header nav ul li{padding-left:1.5em;}
}
@media screen and (min-width:1000px){
  header nav > ul > li > a, header nav > ul > li > span{font-size:0.86em;font-weight:400;line-height:1.8em;text-transform:uppercase;letter-spacing:1.5px;border-bottom:1px solid rgb(0 0 0 / 0%);}
  header nav > ul > li.active > a, header nav > ul > li.active > span{color:#000;border-bottom:1px solid #000;}
  header nav > ul > li:hover > a, header nav > ul > li:hover > span{color:#000;}
  header nav > ul > li > a:hover{border-bottom:1px solid #000;}
  header nav > ul > li > ul {position:absolute;top:1.6em;}
  header nav > ul ul li{text-transform:uppercase;font-size:0.92em;}
  header nav > ul ul a{letter-spacing:1.5px}
}


