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



#HeadWrapper { border-bottom:#000 solid 2px; text-align:center; margin:0; padding:15px 0; min-height: 125px; background-color:#3e013e; color:#FFF; }

#HeadWrapper .menus { float:right; width:20%; display:block; }

#topMenuMobile { clear:both; text-align:right; width:100%; background-color:#3e013e; display:block; }

#topMenu { display:none; }

.topnav { overflow: hidden; background-color: transparent; }
.topnav a, .topnav a:visited { float: right; display: block; color: #ddd197; text-align: center; padding: 8px 16px; text-decoration: none; font-size: 17px; }
.active { background-color: #4CAF50; color: #ddd197; }
.topnav .icon { display: none; }
.dropdown { float: right; overflow: hidden; }
.dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: #ddd197; padding: 8px 16px; background-color: inherit; font-family: inherit; margin: 0; }
.dropdown-content { display: none; position: absolute; background-color: #300030; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 5; }
.dropdown-content a { float: none; color: #ddd197; padding: 12px 16px; text-decoration: none; display: block; text-align: left; border-bottom:1px solid #000; }
.topnav a:hover, .dropdown:hover .dropbtn { background-color:  transparent; color: white; }
.dropdown-content a:hover { background-color: #ddd; color: black; }
.dropdown:hover .dropdown-content { display: block; }

@media screen and (max-width: 769px) {
.topnav a:not(:first-child), .dropdown .dropbtn { display: none; }
.topnav a.icon { float: right; display: block; }
}

@media screen and (max-width: 769px) {
.topnav.responsive { position: relative; }
.topnav.responsive .icon { position: absolute; right: 0; top: 0; }
.topnav.responsive a { float: none; text-align: left; display: block; }
.topnav.responsive .dropdown { float: none; }
.topnav.responsive .dropdown-content { position: relative; }
.topnav.responsive .dropdown .dropbtn { width: 100%; text-align: left; display: block; }
}

#mySidepanel { display:block; }
.sidepanel  {
    width: 0;
    position: fixed;
    z-index: 20;
    height: 100%;
    top: 0;
    right: 0;
    background-color: #555;
    /* overflow-x: hidden; */
	overflow: scroll;
    transition: 0.5s;
    -webkit-transition: .5s;
    padding-top: 60px;
}

.sidepanel a, .sidepanel a:visited {
    padding: 8px 8px 8px 32px;
	border-bottom:#333 solid 1px;
    text-decoration: none;
    font-size: 25px;
    color: #ddd197;
    display: block;
    transition: 0.3s;
}

.sidepanel a:hover {
    color: #0f0;
}

.sidepanel .closebtn {
    position: absolute;
    background-color: #555;
    color: #ddd197;
    top: 0;
    right: 25px;
    font-size: 36px;
	border:none;
}
.sidepanel .closebtn:hover { color: #f00; }

.sidepanel .mysidepanel1 {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
}


.openbtn {
    font-size: 40px;
    cursor: pointer;
    background-color: #3e013e;
    color: #ddd197;
    padding: 10px 15px;
    border: none;
}
.openbtn:hover { color: #0F0; }

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
#HeadWrapper .menus { width:30%; }

#topMenuMobile { clear:both; width:100%; background-color:#3e013e; display:block; }
#mySidepanel { display:block; }
#topMenu { display:none; }
#myTopnav { width:60%; margin-left:40%; }
    
}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */ 

@media only screen and (min-width: 769px) {
#HeadWrapper .menus { width:69%; }

#topMenuMobile { display:none; }
#mySidepanel { display:none; }
#topMenu { position: absolute; right: 0px; top: 42px; z-index: 5; width:70%; display:block; }
#myTopnav { width:99%; margin:0 1% 0 0; }
    
}