@media screen and (min-width: 769px) {
#responsive_menu, .responsive_menu { display: none; }
}
@media screen and (max-width: 768px) {
#responsive_menu, .responsive_menu { display: block; z-index:500;}
}


/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-responsive-universal-droplist.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.menu {width:200px; background:#000; height:100%; overflow:auto; position:fixed; left:-200px; z-index:500;
-webkit-transition:0.5s;
transition:0.5s; 
text-transform:uppercase; /*webado*/
}
.menu ul li a {display:block; font:bold 12px/30px arial, sans-serif; color:#ddd; text-decoration:none; border-bottom:1px solid #666; text-align:right;}
.menu ul li a:hover {color:#fff; text-decoration:underline;}
.menu ul li label {display:block; font:bold 12px/30px arial, sans-serif; color:#ddd; cursor:pointer; background:#333; border-bottom:1px solid #666; text-transform:uppercase; text-align:right;
-webkit-transition:0.5s;
transition:0.5s;
}
.menu ul li label:after {content:""; display:block; width:6px; height:6px; border:3px solid #888; border-color:transparent transparent #888 #888; float:left; margin-top:9px;
-webkit-transform:rotate(-45deg);
transform:rotate(-135deg);
-webkit-transition:0.5s;
transition:0.5s;
}
.menu ul li label:hover {color:#fff; background:#444;}

.menu input {position:absolute; left:-9999px; display:none;}

.menu ul > li > a {padding:0 10px; padding: 10px;} /*webado*/
.menu ul ul > li > a {padding:0 10px 0 20px; padding: 10px 10px 10px 20px;} /*webado*/
.menu ul ul ul > li > a {padding:0 10px 0 30px; padding: 10px 10px 10px 30px;} /*webado*/
.menu ul ul ul ul > li > a {padding:0 10px 0 40px; padding: 10px 10px 10px 40px;} /*webado*/

.menu ul > li > label {padding:0 10px; padding: 10px;} /*webado*/
.menu ul ul > li > label {padding:0 10px 0 20px; padding: 10px 10px 10px 20px;}  /*webado*/
.menu ul ul ul > li > label {padding:0 10px 0 30px; padding: 10px 10px 10px 30px;} /*webado*/
.menu ul ul ul ul > li > label {padding:0 10px 0 40px; padding: 10px 10px 10px 40px;} /*webado*/

.menu ul {padding:0; margin:0; list-style:none;}
.menu ul ul {position:relative; max-height:0; overflow:hidden;
-webkit-transition:0.4s;
transition:0.4s;
}
.menu ul input:checked ~ ul {max-height:750px; /* make this heigher than the highest sub menu */
transition:1s;
-webkit-transition:1s;
}

.menu ul input:checked + label {background:#555; padding-left:20px;}
.menu ul ul input:checked + label {background:#666; padding-left:30px;}
.menu ul ul ul input:checked + label {background:#777; padding-left:40px;}

.menu ul input:checked + label:after {border-color:transparent transparent #eee #eee;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}

.menu ul:after {content:""; display:block; width:1px; height:100%; background:#666; position:absolute; top:0; left:0;}
.menu ul ul:after {width:10px; background:#555; box-shadow:5px 0 5px -2px rgba(0,0,0,0.4);} 
.menu ul ul ul:after {width:20px; background:#666;}
.menu ul ul ul ul:after {width:30px; background:#777;}

#menuopenclose {position:absolute; left:-9999px; display:none;}
.menuopenclose span {position:absolute; left:-9999px;}
.menuopenclose {display:block; width:30px; height:25px; border:5px solid #F65B59; border-width:5px 0; position:fixed; left:10px; top:10px; cursor:pointer; z-index:500;
-webkit-transition:0.5s;
transition:0.5s;
}
.menuopenclose:before,
.menuopenclose:after {content:""; display:block; width:30px; height:5px; background:#F65B59; position:absolute; left:0; top:5px;} 

#menuopenclose:checked ~ .menu {left:0;}
#menuopenclose:checked ~ .menuopenclose {left:210px; border-color:transparent; background:#c00; border-radius:30px; background-color: #F65B59;} /* webado */

#menuopenclose:checked ~ .menuopenclose:before {background:#fff;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
#menuopenclose:checked ~ .menuopenclose:after {background:#fff;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}