@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

 * {
    box-sizing: border-box;
}

 body {
    margin:0;
}

.header-dos{
    background: transparent !important;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0) !important;
    -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0) !important;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0) !important;
}

.borde-verde{
    border-bottom: 1px solid #cfff00;
}

.nav{
    float: right;
    position: relative;
    top: 15px;
}

.carrito{
    border: 1px solid #00bbb6;
    border-radius: 30px;
    width: 100px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    font-size: 17px;
    position: relative;
    bottom: 10px;
}

.cart-move{
    margin-left: 10px;
}

 nav.navbar{
    height: 100%;
    width: 100%;
    float: left;
    padding: 10px;
    background: #242424;
    color: #cfff00;
    z-index: 9;
    font-family: 'Questrial', sans-serif;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
}

 .navbar .nav-container{
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
}

 .navbar .nav-header{
    float: left;
    padding: 10px 0;
}

 .navbar .logo{
    width: 100%;
    max-width: 140px;
}

 .navbar .logo a{
    font-weight:700;
    text-decoration:none;
    color:#fff;
    font-size:19px
}
 .navbar .logo img{
    max-width: 100%;
}

 .navbar .nav-links{
    margin: 0;
    float: right;
}

 .navbar .nav-links .nav-item{
    position: relative;
    list-style: none;
    float: left;
}

 .navbar .nav-links .nav-item .nav-link{
    padding: 15px 13px;
    text-transform: uppercase;
    display: block;
    text-decoration: none;
    color: #cfff00;
    font-size: 15px;
    font-weight: 900;
}

 .navbar .nav-links .nav-item .nav-link:hover{
    color: #00bbb6;
}

 .navbar .nav-links .nav-item .nav-link{
    padding: 15px 13px;
    text-transform: uppercase;
    display: block;
    text-decoration: none;
    color: #cfff00;
    font-size: 15px;
    font-weight: 900;
}

 .navbar .nav-links .nav-item .nav-link:hover{
    color: #00bbb6;
}

 .navbar .menu-show,
 .menu-hide{
    transition: .4s;
    font-size: 30px;
    cursor: pointer;
    display: none;
}

 .navbar .menu-show{
    margin: 0;
    float: right;
}

 .navbar .nav-link:hover,
 .menu-show:hover,
 .menu-hide:hover{
    color: gray;
}

 .navbar #menu-toggle{
    position: absolute;
    visibility: hidden;
    z-index: -1;
}

 @media (min-width: 768px){
     .navbar .has-dropdown ul {
        position: absolute;
        left: inherit;
        top: 98%;
        width: 250px;
        padding: 0;
        border: unset;
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        background-color: #fff;
        -moz-transform: translateY(30px);
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
        -webkit-box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05), -2px 0 5px 1px rgba(0,0,0,.05);
        -ms-box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05),-2px 0 5px 1px rgba(0,0,0,.05);
        -o-box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05),-2px 0 5px 1px rgba(0,0,0,.05);
        -moz-box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05),-2px 0 5px 1px rgba(0,0,0,.05);
        box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05), -2px 0 5px 1px rgba(0,0,0,.05);
        -webkit-transform-origin: top;
        -ms-transform-origin: top;
        transform-origin: top;
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        transition: all 500ms ease;
    }

     .navbar .has-dropdown:hover ul {
        visibility: visible;
        opacity: 1;
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        display: block !important;
    }

     .navbar .has-dropdown ul li {
        width: 100%;
        position: relative;
        display: block;
        line-height: 24px;
        font-weight: 500;
        font-size: 12px;
        text-transform: capitalize;
        color: #222;
        border-bottom: 0px solid rgba(34,34,34,.1);
        text-align: left;
        transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
    }

     .navbar .has-dropdown ul li a {
        position: relative;
        display: block;
        padding: 15px 15px !important;
        line-height: 15px;
        font-weight: 500;
        font-size: 13px !important;
        text-transform: capitalize;
        background-color: #00bbb6;
        color: #fff !important;
        border-bottom: 0px solid rgba(34,34,34,.1);
        text-align: left;
        transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
    }

     .navbar .has-dropdown ul li a:hover{
        background-color: #00bbb6;
        color: #fff !important;
    }
}

 @media (max-width:768px) {
     .navbar .menu-show,
     .menu-hide{
        display: block;
        position: relative;
        top: 15px;
        right: 10px;
    }
     .navbar .nav-links{
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: -100%;
        padding: 50px 0;
        transition: 1s;
        background: #242424;
    }

     .navbar .nav-links .nav-item{
        width: 100%;
    }

     .navbar .nav-links .nav-item .nav-link{
        padding: 15px;
        text-align: center;
    }

     .navbar .menu-hide{
        position: absolute;
        top: 15px;
        right: 20px;
    }

     .navbar #menu-toggle:checked ~ .nav .nav-links{
        left: 0;
        z-index: 9;
    }

     .navbar .has-dropdown ul{
        display: none;
    }

     .navbar .dropdown-menu{
        margin: 0;
        padding: 0;
        border: 1px solid #0000001c;
        flex-direction: column;
    }

     .navbar .dropdown-menu li:not(:last-child){
        border-bottom: 1px solid #0000001c;
    }

     .navbar .nav-links .has-dropdown .dropdown-menu .nav-link{
        font-size: 12px;
        color: #fff;
        background-color: #00bbb6;        
    }
}