/* Carlos Klein Photography Hamburger Subnav */

/* Subheader */
.subheader {-webkit-tap-highlight-color:rgba(0,0,0,0)!important;}
.subheader {position:-webkit-sticky; position:sticky; top:60px; left:0; width:100%; height:60px; margin:0; padding:0; background-color:#F4EAEA; border:none; z-index:9999 !important; -webkit-transition: ease-in .5s; -moz-transition:ease-in .5s; -o-transition:ease-in .5s; transition:ease-in .5s;}

/* Smooth fading in and out for hiding subnavigation when scrolling*/
.down .subheader {transform:translateY(-240px);}/* um px nach oben verschieben */

/* Subnav Menu */
.subnav {position:relative; display:block; width:100%; height:258px; max-height:0; transition:max-height .3s ease-out; font-size:16px; text-align:center; text-transform:uppercase; background-color:#333; overflow:hidden; z-index:9998}
.subnav ul {width:100%; display:block; padding:9px 0 15px 0; top:0;}
.subnav ul button {padding:5px 0 5px 0; color:#777;}
.subnav ul button:hover {color:#FFF;}

/* Subnav Icon */
.subicon-text {line-height:0.1; padding:0 8px 0 0; font-size:15px;}
.subicon {cursor:pointer; display:flex; align-content:center; justify-content:center; width:100%; height:20px; padding:30px 0 0 0; -moz-user-select:none; -webkit-user-select:none; -o-user-select:none; -ms-user-select:none; user-select:none;}

.subicon-line {background:transparent; display:block; height:1px; position:relative; width:18px;}
.subicon-line::before, .subicon-line::after {background:#000; content:''; display:block; width:100%; height:100%; position:absolute; transition:all .5s ease-out;}
.subicon-line::before {transform:rotate(35deg); top:0px; width:8px;}
.subicon-line::after {transform:rotate(-35deg); top:0px; left:5px; width:8px;}
.subside-submenu {display:none;}

/* Toggle Subnav Icon */
.subside-submenu:checked ~ nav {max-height:258px;}
.subside-submenu:checked ~ .subicon .subicon-line {background:transparent;}
.subside-submenu:checked ~ .subicon .subicon-line::before {transform:rotate(-35deg); top:0;}
.subside-submenu:checked ~ .subicon .subicon-line::after {transform:rotate(35deg); left:5px; top:0;}

/*.subicon-line {background:#000; display:block; height:1px; position:relative; width:18px;}

.subicon-line::before, .subicon-line::after {background:#000; content:''; display:block; width:100%; height:100%; position:absolute; transition:all .3s ease-out;}
.subicon-line::before {top:4px;}
.subicon-line::after {top:-4px;}
.subside-submenu {display:none;}*/

/* Toggle Subnav Icon */
/*.subside-submenu:checked ~ nav {max-height:225px;}
.subside-submenu:checked ~ .subicon .subicon-line {background:transparent;}
.subside-submenu:checked ~ .subicon .subicon-line::before {transform:rotate(-135deg); top:0;}
.subside-submenu:checked ~ .subicon .subicon-line::after {transform:rotate(135deg); top:0;}*/

/* Responsiveness */
@media (min-width:1024px) {
  .subnav {clear:none; display:inline; width:100%; height:60px; left:0; font-size:17px; background-color:#F4EAEA;}
  .subnav ul {display:flex; justify-content:center; vertical-align:middle; padding-top:17px; margin:0;}
  .subnav ul button {padding:10px 20px 10px 20px; color:#666;}
  .subnav ul button:hover {color:#000}
  .subicon {display:none !important;}
  hr.menu {display:none;}
}