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

xbody{margin:0;font-family:Arial,sans-serif;}
.mobile-wrapper{display:none;}

@media(max-width:846px){
.mobile-wrapper{display:block; font-family:Arial,sans-serif;  font-weight:700;}

/* HAMBURGER */
.menu-icon{position:fixed; top:15px; left:0px; width:35px; height:30px; cursor:pointer; z-index:2000;}
.menu-icon span{ position:absolute; width:100%; height:4px; background:#000; xborder-radius:3px; transition:.4s;}

.menu-icon span:nth-child(1){ top:0; }
.menu-icon span:nth-child(2){ top:12px; }
.menu-icon span:nth-child(3){ top:24px; }

/* Transform to X */
.menu-icon.active span:nth-child(1){ transform: rotate(45deg); top:12px; }
.menu-icon.active span:nth-child(2){ opacity:0;}
.menu-icon.active span:nth-child(3){ transform: rotate(-45deg); top:12px; }

/* Overlay */
.overlay{position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,.55); visibility:hidden; opacity:0; transition: opacity .5s ease; z-index:998; }
.overlay.active{ visibility:visible; opacity:1;}

/* MENU */
.mobile-nav{ position:fixed; left:-420px; width:min(400px,90vw); height:100vh; background:#fff; overflow-y:auto; transition: left .55s cubic-bezier(.25,.8,.25,1); z-index:999; box-shadow: 3px 0 15px rgba(0,0,0,.25); text-align:left; }
.mobile-nav.active{left:0;}

/* BUTTONS */
.mobile-nav a,
.dropdown-btn{display:block;  width:100%; height:60px;  line-height:60px; text-decoration:none; color:#333; padding-left:20px; border-bottom:1px solid #ddd; box-sizing:border-box; cursor:pointer; background:#fff; transition: background .3s, padding-left .3s; color:#009;}
.mobile-nav a:hover,
.dropdown-btn:hover{ background:#f4f4f4;  padding-left:28px; color:#09F; }

.red{ color:#C03;}
.red a:link{ color:#C03;}
.red a:visited{color:#C03;}
.red a:hover{color:#F6F;}

#red{ color:#C03;}
#red a:link{ color:#C03;}
#red a:visited{color:#C03;}
#red a:hover{color:#F6F;}


/* SMOOTH DROPDOWN */
.dropdown-container{  max-height:0; overflow:hidden; transition: max-height .55s ease; background:#fafafa; }
.dropdown-container.show{  max-height:420px; }
.dropdown-container a{  padding-left:45px; }

/* nice scrollbar */
.mobile-nav::-webkit-scrollbar{  width:5px; }
.mobile-nav::-webkit-scrollbar-thumb{background:#ccc; }
