@charset "utf-8";
/* CSS Document */

#smartphone_nav{background:#E21513;margin:0 auto;width:100%;}
nav.topmenu { 
    height: auto; 
    max-height:0; 
    overflow: hidden; 
    transition: all 0.5s;
}
#hamburg:checked + .hamburg  + nav.topmenu { 
    max-height: 600px; 
}


label.hamburg { 
   display: block;
   background: #E21513; width: 75px; height: 50px; 
   position: relative; 
   margin-left: auto; margin-right: auto;
   border-radius: 4px; 
   transition: border-radius .25s;
}

input#hamburg {display:none}




.line { 
   position: absolute; 
   left:10px;
   height: 4px; width: 55px; 
   background: #fff; border-radius: 2px;
   display: block; 
   transition: 0.25s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}

.topmenu li:first-child{border-top:1px solid #444;}
.topmenu li a,.topmenu li a:visited{display:block;text-align:center;font-size:15px;padding:8px;text-decoration:none;border-bottom:1px solid #333;color:white;}
.topmenu li a:hover,.topmenu li a:focus,.topmenu li a:active{background-color: #444;}