@charset "utf-8";
/* ================================================================ 
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-smartphone-mini-menu.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.
=================================================================== */

html, body {background: #f0f0f0 url('../img/bg.gif') fixed; width:100%;}
.outerPanel {position:relative; left:0; top:0; background: #f0f0f0 url('../img/bg.gif') ; min-width:1125px;
/*box-shadow: -5px 0 5px rgba(0,0,0,0.7);*/
-webkit-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}

input.hidden {display:none;}

.menuTrigger {width:30px; height:15px; border-top:5px solid #000; border-bottom:5px solid #000; position:relative; margin:50px 10px;}
.menuTrigger:before {content:""; display:block; width:30px; height:5px; background:#000; position:absolute; left:0; top:5px;}
.menuTrigger:after {content:""; display:block; width:30px; height:5px; background:#000; position:absolute; left:0; top:5px;}
.menuTrigger label {display:block; width:30px; height:25px; background:url(trans.gif); position:absolute; left:0; top:-5px; cursor:pointer; z-index:100;
-webkit-tap-highlight-color:rgba(0,0,0,0);
tap-highlight-color:rgba(0,0,0,0);
}

.menuTrigger label span {position:absolute; left:-9999px;}

.menu {width:250px; height:1200px; position:fixed; left:-500px; top:0; text-align:left; background: #222;
-webkit-transition:0s 0.5s;
-o-transition:0s 0.5s;
transition:0s 0.5s;
}

#menuopen:checked ~ .outerPanel {left:240px; margin-right:240px; overflow-x:hidden;}
#menuopen:checked ~ .menu {left:0;
-webkit-transition:0s;
-o-transition:0s;
transition:0s;
}
#menuopen:checked ~ .outerPanel .topopen {display:none;}



.menu ul {position:absolute; left:250px; top:0; padding:0; margin:0; list-style:none; opacity:0.25;
-webkit-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.menu ul.sub1 {left:0; opacity:1;}


.menu ul label {display:block; color:#ffdfea; width:220px; padding-left:30px; font:400 14px/30px 'Noto Sans', arial, sans-serif; cursor:pointer; border-bottom:1px solid #d2517e;}
.menu ul label.right {background: #e76794 url(../img/right-arrow.png) no-repeat 210px center; border-top:1px solid #f07ca5;}
.menu ul label.left {background: #ee0f5d url(../img/left-arrow.png) no-repeat 5px center; border-top:1px solid #f94383;}
.menu ul a {display:block; color:#ddd; width:220px; padding-left:30px; outline:0; text-decoration:none; font:400 14px/30px 'Noto Sans', arial, sans-serif; background:#333; border-top:1px solid #444; border-bottom:1px solid #222;}

.menu ul label:hover {color:#fff;}
.menu ul a:hover {color:#fff;}


#sub2-1open:checked ~ .sub1 {left:-250px; opacity:0.25;}
#sub2-1open:checked ~ .sub2.pos1 {left:0px; opacity:1;}
#sub2-2open:checked ~ .sub1 {left:-250px; opacity:0.25;}
#sub2-2open:checked ~ .sub2.pos2 {left:0px; opacity:1;}
#sub2-3open:checked ~ .sub1 {left:-250px; opacity:0.25;}
#sub2-3open:checked ~ .sub2.pos3 {left:0px; opacity:1;}
#sub2-4open:checked ~ .sub1 {left:-250px; opacity:0.25;}
#sub2-4open:checked ~ .sub2.pos4 {left:0px; opacity:1;}

#sub3-1open:checked ~ .sub1 {left:-250px; opacity:0.25;}
#sub3-1open:checked ~ .sub2.pos2 {left:-250px; opacity:0.25;}
#sub3-1open:checked ~ .sub3.pos1 {left:0px; opacity:1;}
#sub3-2open:checked ~ .sub1 {left:-250px; opacity:0.25;}
#sub3-2open:checked ~ .sub2.pos2 {left:-250px; opacity:0.25;}
#sub3-2open:checked ~ .sub3.pos2 {left:0px; opacity:1;}
#sub3-3open:checked ~ .sub1 {left:-250px; opacity:0.25;}
#sub3-3open:checked ~ .sub2.pos2 {left:-250px; opacity:0.25;}
#sub3-3open:checked ~ .sub3.pos3 {left:0px; opacity:1;}
#sub3-4open:checked ~ .sub1 {left:-250px; opacity:0.25;}
#sub3-4open:checked ~ .sub2.pos4 {left:-250px; opacity:0.25;}
#sub3-4open:checked ~ .sub3.pos4 {left:0px; opacity:1;}
#sub3-5open:checked ~ .sub1 {left:-250px; opacity:0.25;}
#sub3-5open:checked ~ .sub2.pos4 {left:-250px; opacity:0.25;}
#sub3-5open:checked ~ .sub3.pos5 {left:0px; opacity:1;}

#sub4-1open:checked ~ .sub1 {left:-250px; opacity:0.25;}
#sub4-1open:checked ~ .sub3.pos1 {left:-250px; opacity:0.25;}
#sub4-1open:checked ~ .sub4.pos1 {left:0px; opacity:1;}
#sub4-2open:checked ~ .sub1 {left:-250px; opacity:0.25;}
#sub4-2open:checked ~ .sub3.pos4 {left:-250px; opacity:0.25;}
#sub4-2open:checked ~ .sub4.pos2 {left:0px; opacity:1;}