/* The wrapper div should be wrapped around the page content and be at least 100% page height for the iPad, iPhone and iPod Touch */
html, body {padding:0; margin:0; overflow-x:hidden; font-family: Helvetica; line-height:1.4em}
.wrapper {height:100%; left:0; top:0; position:relative; min-height: 420px; min-width:320px; background:#fff;
-webkit-transition: 0.5s;
-o-transition:  0.5s;
-moz-transition:  0.5s;
transition:  0.5s;
}
.content {width:80%; margin:0 auto; background:#fff; padding:0px 10px}
.content img.banner {width:100%;}
.logo {padding:20px 0;; width:230px;}
.logo img {display:block; float:left; padding-right:10px;}
.logo h1 {color:#000; padding:0; margin:0; font:bold 40px/62px 'times new roman', serif;}
.logo h1 span {font-weight:normal; color:#666;}

.content p {padding:0; margin:0; font:normal 15px/25px arial, sans-serif; color:#333;}
.content h3 {padding: 0; margin: 30px 0 15px 0px; font:normal 20px/24px arial, sans-serif; color:#151;}
.content ol li {padding:0; margin:0; font:normal 14px/22px arial, sans-serif; color:#333;}
.content ol li a {color:#069;}

@media only screen and (max-width: 1024px) {
.content {width:95%; max-width:auto;}
}

.trigger {width:40px; height:40px; position:fixed; left:0; top: 15px; background: transparent; color:#fff; border-radius:0 5px 5px 0;
-webkit-transition: 0.5s;
-o-transition:  0.5s;
-moz-transition:  0.5s;
transition:  0.5s;
z-index: 1000;
}
.trigger label {display:block; width:40px; height:40px; position:fixed; left: 25px; bottom: 20px; background:url(/css/menu-icon.png) no-repeat center center; cursor:pointer;} 
.trigger label span {position:absolute; left:-9999px;}

input.submenus,
input#toggle {position:absolute; display:none;}
.menuHolder {width:100%; position:fixed; right:0; top:0; background:#444; z-index:400;}
.menu {float:left; 
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
}

.menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}

.menu li {display:block; position:relative;}

.menu ul ul {position:absolute; left:-9999px; top:50px; padding:10px 0; z-index:0; border-radius:0 0 5px 5px;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.menu ul ul ul {left:100%; top:auto; margin-top:-35px; border-radius:5px;}
.menu ul li.left > ul {left:auto; right:0; top:50px;}
.menu ul li.left ul li > ul {left:auto; right:100%; top:auto; margin-top:-35px;}

.menu > ul {margin:0 auto;}
.menu > ul > li {float:left; position:relative;}

.menu ul {background:#444;}

.menu a {display:block; text-transform:uppercase; font:normal 13px/25px 'texgyreadventorbold', 'lucida sans', arial, sans-serif; color:#fff; text-decoration:none; padding:0 40px 0 20px; position:relative; z-index:10;}
.menu > ul > li > a {line-height:50px;}
.menu > ul > li > label {display:block; position:relative; width:100%; margin-top:-50px; height:50px; background: url(trans.gif); z-index:100;
-webkit-transition:0s 0.5s;
-o-transition:0s 0.5s;
-moz-transition:0s 0.5s;
transition:0s 0.5s;
}
.menu ul ul > li > label {display:block; position:relative; margin-top:-25px; width:100%; height:25px; background: url(trans.gif)); z-index:100;
-webkit-transition:0s 0.5s;
-o-transition:0s 0.5s;
-moz-transition:0s 0.5s;
transition:0s 0.5s;
}
.menu ul li.back {display:none;}

.menu li:hover > label {width:0;}
.menu li.left ul a {text-align:right; padding:0 20px 0 40px;}

.menu li:hover > a,
.menu ul li:hover > a {color:#fff; background:#555; text-decoration:none;}

.menu ul li a.hassub { background: url(/css/arrow-down.png) no-repeat right center;}
.menu li ul li a.hassub { background: url(/css/arrow-right.png) no-repeat right center;}
.menu li.left ul li a.hassub {background: url(/css/arrow-left.png) no-repeat left center;}
.menu ul li:hover > a.hassub {color:#fff; background-color:#555; text-decoration:none;}
.menu li.left ul li:hover > a.hassub {color:#fff; background-color:#555; text-decoration:none;}

.menu > ul {*display:inline;}

.menu ul ul,
.menu ul ul ul,
.menu ul li.left > ul,
.menu ul li.left ul li > ul {left:-9999px; right:auto; opacity:0;}

.menu ul li:hover > ul {left:0; opacity:1;}
.menu ul ul li:hover > ul {left:100%; opacity:1;}
.menu ul li.left:hover > ul {left:auto; right:0; opacity:1;}
.menu ul li.left ul li:hover > ul {left:auto; right:100%; opacity:1;}


/* for narrow screns, tablets and smartphones */

@media only screen and (max-width: 1024px) {
.menuHolder {position:fixed; left:-280px; width:262px; top:0; bottom:0; height:auto; overflow-x:hidden; background:#eee;
-webkit-transition: left 0.5s;
-o-transition: left 0.5s;
-moz-transition: left 0.5s;
transition: left 0.5s;
}
.menu {width:260px; text-align:center; position:absolute; z-index:100; background:#eee; left:0; top:0; border-right: 0px solid #888;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
-webkit-transition:0.5s;
-o-transition:0.5s;
-moz-transition:0.5s;
transition:0.5s;
}

.menu ul {margin:0; padding:0; width:260px; list-style:none; white-space:nowrap; text-align:left; border-radius:0; background:#eee; border-right: 0px solid #888;}

.menu li {display:block; position:static; width:260px; height:50px; border-top:1px solid #fff; border-bottom:1px solid #888;}
.menu ul li.back {display:block;}

.menu ul ul {position:absolute; left:280px; top:-5000px; padding:0; z-index:0; opacity:1; background:#eee;
-webkit-transition:0s 0.5s;
-o-transition:0s 0.5s;
-moz-transition:0s 0.5s;
transition:0s 0.5s;
}
.menu ul ul ul {left:300px; top:-5000px; margin-top:0; opacity:1;}


.menu ul li.left > ul {left:280px; right:auto; top:-5000px;}
.menu ul li.left ul li > ul {left:280px; right:auto; top:-5000px; margin-top:0;}

.menu > ul {margin:0;}
.menu > ul > li {float:left; position:static;}

.menu ul {background:#bbb;}

.menu a {display:block; font:normal 14px/50px  'lucida sans', arial, sans-serif; color:#333; border-radius:0 5px 5px 0; text-decoration:none; padding:0 0 0 10px; margin-right:50px; position:relative; z-index:10; background:transparent;}
.menu > ul > li > a {line-height:50px;}
.menu > ul > li > label,
.menu ul ul > li > label {display:block; position:relative; margin-top:-46px; margin-right:4px; width:40px; height:40px; border:0px solid #fff; border-radius:4px; float:right; background: #aaa url(/css/arrow-right.png) no-repeat center center; z-index:100; cursor:pointer;
-webkit-transition:0s;
-o-transition:0s;
-moz-transition:0s;
transition:0s;
}

.menu li:hover > label {width:40px;}
.menu li.left ul a {text-align:left; padding:0 40px 0 20px;}

.menu ul li:hover > a {color:#333; background:#eee; text-decoration:none;}
.menu ul li a:hover,
.menu ul li a.hassub:hover {color:#000; background:#eee; text-decoration:none;}

.menu ul li a.hassub,
.menu li.left ul li a.hassub,
.menu li ul li a.hassub {background:none;}

.menu ul li.back label {display:block; width:40px; height:40px; margin-top:4px; border-radius:4px; float:right; background: #9b9 url(/css/arrow-left.png) no-repeat center center; z-index:100; cursor:pointer;}
.menu ul li.back span {display:block; height:18px; font:normal 14px/18px 'lucida sans', arial, sans-serif; color:#333; width:180px; padding:5px 0 0 10px; white-space:normal; float:left; text-transform:uppercase;}

.menu ul ul,
.menu ul ul ul,
.menu ul li.left > ul,
.menu ul li.left ul li > ul {left:280px; top:-5000px; right:auto; opacity:1;}


.menu ul li:hover > ul,
.menu ul ul li:hover > ul,
.menu ul li.left:hover > ul,
.menu ul li.left ul li:hover > ul {left:280px; right:auto; opacity:1;}

.menu ul li:hover > a.hassub,
.menu li.left ul li:hover > a.hassub {background:none; color:#333; text-decoration:none;}
.menu ul li a.hassub:hover,
.menu ul ul li a.hassub:hover,
.menu li.left ul li a.hassub:hover {color:#000; background:#eee; text-decoration:none;}


#submenu1:checked ~ .menu #p1,
#submenu2:checked ~ .menu #p2,
#submenu3:checked ~ .menu #p3,
#submenu4:checked ~ .menu #p4,
#submenu5:checked ~ .menu #p5,
#submenu6:checked ~ .menu #p6,
#submenu7:checked ~ .menu #p7,
#submenu8:checked ~ .menu #p8,
#submenu9:checked ~ .menu #p9,
#submenu10:checked ~ .menu #p10,
#submenu11:checked ~ .menu #p11,
#submenu12:checked ~ .menu #p12,
#submenu13:checked ~ .menu #p13,
#submenu14:checked ~ .menu #p14,
#submenu15:checked ~ .menu #p15,
#submenu16:checked ~ .menu #p16,
#submenu17:checked ~ .menu #p17,
#submenu18:checked ~ .menu #p18,
#submenu19:checked ~ .menu #p19,
#submenu20:checked ~ .menu #p20,
#submenu21:checked ~ .menu #p21,
#submenu22:checked ~ .menu #p22,
#submenu23:checked ~ .menu #p23,
#submenu24:checked ~ .menu #p24,
#submenu25:checked ~ .menu #p25,
#submenu26:checked ~ .menu #p26,
#submenu27:checked ~ .menu #p27,
#submenu28:checked ~ .menu #p28,
#submenu29:checked ~ .menu #p29,
#submenu30:checked ~ .menu #p30,
#submenu31:checked ~ .menu #p31,
#submenu32:checked ~ .menu #p32,
#submenu33:checked ~ .menu #p33,
#submenu34:checked ~ .menu #p34,
#submenu35:checked ~ .menu #p35

{top:0;
-webkit-transition:0s;
-o-transition:0s;
-moz-transition:0s;
transition:0s;
padding-bottom: 50px;
}

#submenu1:checked ~ .menu,
#submenu2:checked ~ .menu,
#submenu9:checked ~ .menu,
#submenu17:checked ~ .menu,
#submenu24:checked ~ .menu
{left:-280px;}


#submenu3:checked ~ .menu,
#submenu4:checked ~ .menu,
#submenu5:checked ~ .menu,
#submenu6:checked ~ .menu,
#submenu7:checked ~ .menu,
#submenu8:checked ~ .menu,
#submenu10:checked ~ .menu,
#submenu11:checked ~ .menu,
#submenu12:checked ~ .menu,
#submenu13:checked ~ .menu,
#submenu14:checked ~ .menu,
#submenu15:checked ~ .menu,
#submenu16:checked ~ .menu,
#submenu18:checked ~ .menu,
#submenu19:checked ~ .menu,
#submenu20:checked ~ .menu,
#submenu21:checked ~ .menu,
#submenu22:checked ~ .menu,
#submenu23:checked ~ .menu,
#submenu25:checked ~ .menu,
#submenu26:checked ~ .menu,
#submenu27:checked ~ .menu,
#submenu28:checked ~ .menu,
#submenu29:checked ~ .menu,
#submenu30:checked ~ .menu,
#submenu31:checked ~ .menu,
#submenu32:checked ~ .menu,
#submenu33:checked ~ .menu,
#submenu34:checked ~ .menu,
#submenu35:checked ~ .menu

{
left:-560px;
padding-bottom: 50px;
}


#toggle:checked ~ .wrapper {left:280px;} 
#toggle:checked ~ .wrapper .menuHolder {left:0;} 
#toggle:checked ~ .wrapper .trigger {left:280px;} 
}