.nav {position: absolute; top: 0px; z-index: 5; width: 100%; background-color: transparent; border-bottom: solid 1px #DDD;
    
    
background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.mbile_topbar {display: none;}

.topnavHolder {width: 90%; margin: 0 5%; transition: 0.4s;}

a.logo_holder {width: auto; height: 100px; float: left; padding: 10px 0;}
a.logo_holder img {width: auto; height: 100px;}


ul.topnav {width: auto; float: right; margin: 40px 0 0 0;}
ul.topnav li {float: left; margin: 0 3px;}
ul.topnav li a {display: block; padding: 10px 20px; text-align: center; transition: .5s linear; color: #FFF;}
ul.topnav li a:hover {color: #FFF;}





.nav_hamburguer {width: 50px; height: 50px; float: right; display: none; position: relative; z-index: 200; margin: 95px 10px 0 0;}
.nav_hamburguer a.icon {display: block; height: 50px; width: 50px; color: #004D58; text-align: center; margin: 0; font-size: 1.5em;}
.nav_hamburguer a.icon::before {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0c9";}  
.nav_hamburguer a.icon:hover {}
.nav_hamburguer a.add_x::before {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f057";} 

.user_menu_mobile {display: none;}
.user_menu_mobile_active a {color: #004D58;}


.search_menu_mobile a:hover, .user_menu_mobile a:hover {color: #004D58}


ul.responsive {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: block; background-color: #FFF;}
ul.responsive li {width: 100%;}
ul.responsive li a {display: block; padding: 20px 0; transition: .5s linear; width: 100%;}
ul.responsive li a:hover, ul.responsive li a.active, ul.topnav li a.active {background-color: #FFF; color: #333;}


/* SEARCH */
.searchDiv {width: 100vw; height: 0; position: absolute; top: 0; left: 0; transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); z-index: 200; background-color: #FFF; overflow: hidden;}

.searchDiv form {}
.searchDiv form div {width: 75%; margin: 0 12.5%;}
.searchDiv form div input {float: left; border: 0; border-bottom: solid 1px #DDD;}
.searchDiv form div button {float: left; width: auto; border: 0; background-color: transparent;}

.search_toggle {background-color: transparent; border: 0; border-radius: 0; color: #FFF; padding: 5px 10px; display: block;}
.search_toggle:hover {background-color: transparent;}
.dark_toggle {color: #000; border: 0;}

.opened { 
    /* visible */
    height: 200px;
}
.closed { 
    /* completely offscreen */
    height: 0px;
}

@media screen and (max-width: 900px) {
    .nav {height: 100px;}
    
    .mbile_topbar {display: block; height: 30px; background-color: #EEE; border-bottom: solid 1px #CCC;}
    
    a.logo_holder {width: 50%; margin: 0 auto; height: auto;}
    a.logo_holder img {padding: 5%; height: auto; width: 100%;}
    
    ul.topnav {display: none; border-bottom: solid 1px #CCC; box-shadow: 0px 0px 0px #CCC; top: 85px; width: 90%; left: 5%;}
    
    ul.responsive {display: block; height: auto;}
    
    .nav_hamburguer {display: block; margin: 15px 10px 0 0;}
    
    ul.topnav li.search_menu,
    ul.topnav li.shopping_bag,
    ul.topnav li.user_menu {display: none;}
    
    .search_menu_mobile {display: block; width: auto; float: right; margin-left: 20px;}
    .shopping_bag_mobile {display: block; width: auto; float: right; margin-left: 20px;}
    .user_menu_mobile {display: block; width: auto; float: right; margin-left: 20px;}
    
    .nav_phone {display: none;}
    .nav_email {display: none;}
}