.wrap {background:url(../main_images/blur.png) no-repeat center center; background-size:cover; position:fixed; left:-9999px; top:0; width:100%; height:101%; overflow:auto; opacity:0; font-size:100%; z-index:500;
-webkit-transition:opacity 0.4s, left 0s 0.4s;
transition:opacity 0.4s, left 0s 0.4s;
}
.menu {position:relative; text-align:center; width:100%; height:100%; display:table;}
.wrap input {position:absolute; left:-9999px; display:none;}
#menuopenclose {position:absolute; left:-9999px; display:none;}
.menuopenclose {position:fixed; left:0; background:#000; padding:10px 10px 10px 20px; border-radius:0 10px 10px 0; top:20px; z-index:100; font:600 16px/22px 'Open Sans', arial, sans-serif; text-decoration:none; color:#fff; z-index:600; cursor:pointer;}


.menu ul {padding:0; margin:0; list-style:none; text-transform:uppercase;}
.menu > ul {display:table-cell; vertical-align:middle;}
.menu > ul > li {position:relative;}
.menu > ul > li > a {font:600 200%/150% 'Open Sans', arial, sans-serif; text-decoration:none; color:#fff; position:relative;
-webkit-transition:0.5s;
transition:0.5s;
}
.menu ul ul li a {font:300 150%/150% 'Open Sans', arial, sans-serif; text-decoration:none; color:#fff;}
.menu ul li label {font:600 200%/150% 'Open Sans', arial, sans-serif; color:#fff; cursor:pointer; position:relative;}
.menu ul li span.closesubmenu {position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; display:none;}
.menu ul li span.closesubmenu label {color:transparent;}

.menu ul ul {max-height:0; overflow:hidden; position:relative; z-index:100;
-webkit-transition:0.7s;
transition:0.7s;
}
.menu > ul > li > a:hover:before {content:""; display:block; height:2px; width:50px; position:absolute; bottom:0; background:#fff; left:50%; margin-left:-25px;}
.menu > ul > li > label:hover:before {content:""; display:block; height:0; width:0; border:8px solid transparent; border-top-color:#fff; border-bottom:0;  position:absolute; bottom:-2px;left:50%; margin-left:-8px;}

.menu input:checked ~ ul {max-height:180px; padding:10px 0;
-webkit-transition:1s;
transition:1s;
}
.menu input:checked ~ span.closesubmenu {display:block;}

.menu > ul > li > label:hover:before,
.menu input:checked + label:before {content:""; display:block; height:0; width:0; border:8px solid transparent; border-top-color:#fff; border-bottom:0;  position:absolute; bottom:-4px;left:50%; margin-left:-8px;}

.menu ul ul li a:hover:before {content:"- ";}
.menu ul ul li a:hover:after {content:" -";}

#menuopenclose:checked ~ .menuopenclose {}
#menuopenclose:checked ~ .wrap {left:0; opacity:1;
-webkit-transition:opacity 0.4s, left 0s;
transition:opacity 0.4s, left 0s;
}



.accordion {
    background-color: #7e7e7e;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    color:#fff; text-decoration:none;
    font-family: 'Droid Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-top:2px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion.active, .accordion:hover {
    background-color: #e3e3e3;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: #eee;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

.panel.show {
    opacity: 1;
    max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}


@media only screen and (max-width: 768px) {
.menuopenclose {top:20px;}
.wrap {font-size:95%;}

}
@media only screen and (max-width: 480px) {
.wrap {font-size:90%;}
.menu > ul > li > label:hover:before,


}
@media only screen and (max-width: 320px) {
.wrap {font-size:90%;}


}