/* Carlos Klein Photography Hamburger Nav */

/* Header */
.header {-webkit-tap-highlight-color:rgba(0,0,0,0)!important;}
.header {position:-webkit-sticky; position:sticky; top:0; left:0; width:100%; height:60px; margin:0; padding:0; background-color:#222; border:none; z-index:10000;}

/* Nav menu */
.nav {position:relative; display:block; width:100%; height:225px; max-height:0; transition:max-height .4s ease-out; text-align:center; text-transform:uppercase; background-color:#111; overflow:hidden; font-size:16px;}
.nav ul {width:100%; display:block; padding:15px 0 20px 0; top:0;}
.nav ul li {padding:0;}
.nav ul li a {display:block; padding:9px 0 9px 0; color:#888;}
.nav ul li a:hover {color:#FFF;}

/* Menu Icon */
.icon {cursor:pointer; float:right; padding:29px 36px; 
  -moz-user-select:none;
  -webkit-user-select:none;
  -o-user-select:none;
  -ms-user-select:none;
  user-select:none;}
.icon-line {background:#FFF; display:block; height:2px; position:relative; width:24px;}
.icon-line::before, .icon-line::after {background:#FFF; content:''; display:block; height:100%; position:absolute; transition:all .2s ease-out; width:100%;}
.icon-line::before {top:6px;}
.icon-line::after {top:-6px;}
.side-menu {display:none;}

/* Toggle menu icon */
.side-menu:checked ~ nav {max-height:225px;}
.side-menu:checked ~ .icon .icon-line {background:transparent;}
.side-menu:checked ~ .icon .icon-line::before {transform:rotate(-135deg); top:0;}
.side-menu:checked ~ .icon .icon-line::after {transform:rotate(135deg); top:0;}

/* Responsiveness */
@media (min-width:1024px) {
  .nav {
  clear:none;
  display:inline;
  width:100%;
  height:60px;
  left:0;
  font-size:17px;
  background-color:#222;
}
  .nav ul {display:flex; justify-content:center; vertical-align:middle; padding:0; margin:0;}
  .nav ul li {padding:10px 30px 10px 30px;}
  .nav ul li a {color:#888}
  .nav ul li a:hover {color:#FFFFFF}
  .nav li.active a {color:#FFFFFF}
  .icon {display:none;}
  hr.menu {display:none;}
}