@font-face {
    font-family: 'Arial';
    src: url('../fonts/arial.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: 'Arial';
    src: url('../fonts/arial_bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
	font-display: swap;
}

/* -- Detalles generales a todas las paginas -- */
body{
    background-color: white;
    color: black;
    font-family: 'Arial';
}
body.overlaid,
body.menu-overlaid{
    overflow: clip;
}
@-moz-document url-prefix() { 
    body.overlaid,
    body.menu-overlaid{
        overflow: hidden;
    }
}
body #wrapper{
    padding: 0px;
    background-color: white;
}
body .mobile{
    display: none;
}

a{
    font-size: 14px;
    line-height: 20px;
    color: black;
}
a:hover{
    text-decoration: underline;
    color: black;
}

p, li{
    font-size: 14px;
    line-height: 20px;
    color: black;
    margin-bottom: 10px;
}

/* Headers */
h1{
    font-size: 32px;
    line-height: 38px;
    font-weight: normal;
    margin-bottom: 15px;
}
h2{
    font-size: 22px;
    line-height: 27px;
    font-weight: normal;
    margin-bottom: 15px;
}

/* Botones */
.btn{
    border-radius: 30px;
    text-transform: initial;
    font-weight: normal;
    font-size: 14px;
    padding: 10px 40px;
}
.btn:disabled{
    opacity: 0.8;
    cursor: not-allowed;
}
.btn.circle{
    border-radius: 100%;
}
.btn.btn-primary{
    color: black;
    background-color: #f4cd24;
    padding: 10px 40px;
}
.btn.btn-primary:hover{
    background-color: #f6d750;
}
.btn.btn-primary:disabled{
    background-color: #f4cd24;
}
.btn.btn-secondary{
    background-color: white;
    color: black;
    padding: 10px;
}
.btn.btn-secondary:hover{
    background-color: #e6e6e6;
}
.btn.btn-secondary:disabled{
    background-color: white;
}
.btn.btn-terciary{
    background-color: #182430;
    color: white;
}
.btn.btn-terciary:hover{
    background-color: #465059;
}
.btn.btn-terciary:disabled{
    background-color: #182430;
}

/* Inputs */
input, textarea{
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 30px;
    line-height: 1;
    border: none;
    color: black;
    background-color: #e6e6e6;
}
textarea{
    padding: 15px 20px;
}
input.not-valid, textarea.not-valid,
input.not-valid:focus-visible, textarea.not-valid:focus-visible{
    outline: 1px solid #ff1d24;
}
input:focus-visible,
textarea:focus-visible{
    outline: none;
}
input::placeholder,
input:active::placeholder,
textarea::placeholder,
textarea:active::placeholder{
    color: #666666;
    opacity: 1;
}

/* Campos de contraseña */
label span.password-box{
    position: relative;
    display: block;
}
label span.password-box span.icon{
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
}
label span.password-box span.icon img{
    cursor: pointer;
}
label span.password-box span.icon img:last-child,
label span.password-box span.icon.showing img:first-child{
    display: none;
}
label span.password-box span.icon.showing img:last-child{
    display: initial;
}
label span.password-box + span.password-tips{
    display: none;
    margin-top: 10px;
}
label span.password-box + span.password-tips.showing{
    display: block;
}
label span.password-box + span.password-tips span.password-meter{
    display: block;
    height: 8px;
    background-color: #f3f3f3;
    position: relative;
}
label span.password-box + span.password-tips span.password-meter:after{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color: #f4cd24;
}
label span.password-box + span.password-tips span.password-meter[data-score="1"]:after{
    width: 25%;
}
label span.password-box + span.password-tips span.password-meter[data-score="2"]:after{
    width: 50%;
}
label span.password-box + span.password-tips span.password-meter[data-score="3"]:after{
    width: 75%;
}
label span.password-box + span.password-tips span.password-meter[data-score="4"]:after{
    width: 100%;
}
label span.password-box + span.password-tips ul{
    list-style: initial;
    padding-left: 20px;
    margin-bottom: 0px;
    margin-top: 8px;
}
label span.password-box + span.password-tips ul li{
    margin-bottom: 0px;
    font-size: 14px;
}

/* Checkboxes */
label.checkbox{
    display: flex;
    margin-bottom: 15px;
    align-items: center;
}
label.checkbox input{
    display: none;
}
label.checkbox span.custom-checkbox{
    width: 16px;
    height: 16px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    cursor: pointer;
}
label.checkbox input.not-valid + span.custom-checkbox{
    border: 1px solid #ff1d24;
}
label.checkbox span.custom-checkbox img{
    width: 16px;
    display: none;
}
label.checkbox input:checked + span.custom-checkbox img{
    display: initial;
}
label.checkbox span.text{
    font-size: 12px;
    line-height: 14px;
    color: black;
    text-align: left;
    width: calc(100% - 21px);
}
label.checkbox span.text a{
    color: black;
    font-size: 12px;
    line-height: 14px;
    text-decoration: underline;
}
label.checkbox span.text a:hover{
    text-decoration: none;
}

/* Dropdowns (JS metido en el custom.js del tema) */
div.dropdown div.dropdown-opener{
    color: black;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
}
div.dropdown div.dropdown-opener img{
    width: 20px;
}
div.dropdown.open div.dropdown-opener img{
    transform: rotate(180deg);
}
div.dropdown div.options{
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 4px);
    left: 0px;
}
div.dropdown.open div.options{
    display: inline-flex;
    z-index: 1;
}
div.dropdown div.options .option{
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: white;
    border: 1px solid #e6e6e6;
    border-top: none;
    cursor: pointer;
    z-index: 1;
    font-size: 14px;
    color: black;
}
div.dropdown div.options .option:first-child{
    border-top: 1px solid #e6e6e6;
}
div.dropdown div.options .option:hover,
div.dropdown div.options .option.active{
    background-color: #182430;
    border-color: #182430;
    border-bottom-color: white;
    text-decoration: none;
    color: white;
}
div.dropdown div.options .option span.custom-checkbox{
    width: 16px;
    height: 16px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    cursor: pointer;
}
div.dropdown div.options .option:hover span.custom-checkbox,
div.dropdown div.options .option.active span.custom-checkbox{
    border-color: white;
}
div.dropdown div.options .option span.custom-checkbox + span.text{
    width: calc(100% - 16px);
    line-height: 1;
}
div.dropdown div.options .option span.custom-checkbox img{
    width: 16px;
    display: none;
}
div.dropdown div.options .option.active span.custom-checkbox img{
    display: initial;
}
div.dropdown div.options .option.active span.custom-checkbox img{
    filter: invert(1);
}

/* Formularios */
form label{
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
}
form label span.input-tag{
    font-size: 14px;
    line-height: 15px;
    margin-bottom: 8px;
    display: inline-block;
}
form > input{
    margin-bottom: 20px;
}
form label input{
    margin-bottom: 0px;
}
form input:not([type='submit']):not([type='file']){
    width: 100%;
}
form textarea{
    width: 100%;
    height: 120px;
}
form div.half{
    gap: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
form div.half > label,
form div.half > input:not([type='submit']):not([type='file']){
    width: calc(50% - 10px);
}
form.submit input[type="submit"]{
    opacity: 0.5;
}

#overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(34,34,34,.7);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: all 0.25s;
    cursor: pointer;
}
body.overlaid #overlay{
    opacity: 1;
    pointer-events: initial;
}

/* -- HEADER -- */
#header{
    z-index: 2;
    box-shadow: none;
    position: sticky;
    top: 0px;
}

/* Banda superior */
div.header-top{
    padding: 8px 0px;
    background-color: #f4cd24;
    display: flex;
    gap: 100px;
    align-items: center;
    justify-content: center;
}
div.header-top span{
    color: black;
    font-size: 14px;
}
div.header-top span a{
    color: black;
}
div.header-top span a:hover{
    font-weight: bold;
}

/* Menu */
#header div.header-nav,
body#checkout #header .header-nav{
    max-height: none;
    background-color: #182430;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 60px;
    height: 85px;
    border-bottom: none;
}
#header div.header-nav div.logo img{
    width: 170px;
}
#header div.header-nav div.menu{
    display: inline-flex;
}
#header div.header-nav div.background{
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s;
}
#header div.header-nav div.links{
    display: flex;
    align-items: center;
    gap: 40px;
    margin-right: 50px;
}
#header div.header-nav div.links a{
    color: white;
    font-size: 15px;
    position: relative;
}
#header div.header-nav div.links a:after{
    content: '';
    width: 0%;
    height: 1px;
    background-color: white;
    display: block;
    transition: all 0.25s ease-out;
    position: absolute;
    bottom: -2px;
}
#header div.header-nav div.links a:hover{
    font-weight: normal;
}
#header div.header-nav div.links a:hover:after{
    width: 100%;
}
#header div.header-nav div.icons{
    display: flex;
    align-items: center;
    gap: 18px;
}
#header div.header-nav div.icons a,
#header div.header-nav div.icons span{
    position: relative;
    cursor: pointer;
}
#header div.header-nav div.icons a img,
#header div.header-nav div.icons span img{
    width: 25px;
}
#header div.header-nav div.icons span.mini-cart span.product-count{
    position: absolute;
    background-color: #f4cd24;
    color: black;
    border-radius: 100%;
    font-size: 11px;
    line-height: 11px;
    padding: 2px 4px;
    top: -4px;
    right: -6px;
}

/* Mini Carrito */
#mini-cart{
    position: fixed;
    top: 0px;
    right: -600px;
    height: 100%;
    width: 600px;
    background-color: #182430;
    z-index: 3;
    padding: 60px 50px;
    transition: all 0.25s;
    overflow-y: auto;
}
@-moz-document url-prefix() { 
    #mini-cart{
        scrollbar-color: white #c8c8c8;
        scrollbar-width: thin;
    }
}
#mini-cart::-webkit-scrollbar{
    width: 8px;
}
#mini-cart::-webkit-scrollbar-track{
    background: #182430;
}
#mini-cart::-webkit-scrollbar-thumb{
    background: white;
}
#mini-cart::-webkit-scrollbar-thumb:hover{
    background: white;
}
#mini-cart.show{
    right: 0px;
}
#mini-cart div.title{
    color: white;
    border-bottom: 1px solid #c4c7ca;
    font-size: 25px;
    padding-bottom: 25px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#mini-cart div.title span img{
    filter: invert(1);
    width: 30px;
    cursor: pointer;
}
#mini-cart div.products div.product{
    margin-bottom: 20px;
}
#mini-cart div.products div.product:last-child{
    margin-bottom: 0px;
}
#mini-cart div.products div.product div.base{
    display: flex;
}
#mini-cart div.products div.product div.base div.image{
    width: 30%;
}
#mini-cart div.products div.product div.base div.image img{
    width: 100%;
}
#mini-cart div.products div.product div.base div.information{
    width: 70%;
    border: 1px solid #c4c7ca;
    border-left: none;
    padding: 20px;
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
#mini-cart div.products div.product div.base div.information p.name a{
    color: white;
    font-size: 15px;
    line-height: 20px;
}
#mini-cart div.products div.product div.base div.information p.name b{
    color: white;
    font-size: 15px;
}
#mini-cart div.products div.product div.base div.information p.price{
    color: #f4cd24;
    margin-bottom: 0px;
    font-size: 15px;
}
#mini-cart div.products div.product div.base div.information span.remove-product{
    position: absolute;
    background-color: red;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    cursor: pointer;
    bottom: 10px;
    right: 10px;
    padding: 3px;
}
#mini-cart div.products div.product div.base div.information span.remove-product img{
    filter: invert(1);
    width: 18px;
}
#mini-cart div.products div.product div.configuration{
    border: 1px solid #c4c7ca;
    border-top: none;
    padding: 5px 20px;
    padding-top: 0px;
    text-align: center;
}
#mini-cart div.products div.product div.configuration div.information{
    padding-top: 10px;
    padding-bottom: 10px;
    display: none;
}
#mini-cart div.products div.product div.configuration div.information p{
    color: white;
    font-size: 14px;
    margin-bottom: 3px;
}
#mini-cart div.products div.product div.configuration div.information a{
    padding: 6px 25px;
    margin-top: 5px;
    width: 100%;
}
#mini-cart div.products div.product div.configuration div.msg{
    display: block;
    text-align: center;
    width: 100%;
    font-size: 12px;
    line-height: 14px;
    padding-top: 5px;
    cursor: pointer;
}
#mini-cart div.products div.product div.configuration div.msg.open{
    border-top: 1px solid #c4c7ca;
}
#mini-cart div.products div.product div.configuration div.msg span{
    color: white;
    font-style: italic;
}
#mini-cart div.products div.product div.configuration div.msg span:last-child,
#mini-cart div.products div.product div.configuration div.msg.open span:first-child{
    display: none;
}
#mini-cart div.products div.product div.configuration div.msg.open span:last-child{
    display: initial;
}
#mini-cart div.products span.empty{
    text-align: center;
    color: white;
    font-weight: 600;
    width: 100%;
    display: block;
}
#mini-cart div.totals{
    border-top: 1px solid #c4c7ca;
    margin-top: 40px;
    padding-top: 30px;
}
#mini-cart div.totals p.total{
    color: white;
    font-size: 25px;
    font-weight: bold;
}
#mini-cart div.totals div.links{
    margin-top: 30px;
    display: flex;
    gap: 20px;
}
#mini-cart div.totals div.links a{
    width: calc(50% - 10px);
}
#mini-cart div.totals div.links a.btn-terciary{
    border: 1px solid white;
}
#mini-cart div.totals div.links a.disabled{
    opacity: 0.7;
}
/* -- -- */

/* -- FOOTER -- */
#footer,
body#checkout #footer{
    padding: 0px 60px;
    padding-top: 40px;
    margin-top: 60px;
    background-color: #182430;
}

/* Enlaces */
#footer div.footer-main{
    display: flex;
}
#footer div.footer-main div.links{
    width: 60%;
    display: flex;
    justify-content: space-between;
}
#footer div.footer-main div.links div.column{
    display: flex;
    flex-direction: column;
}
#footer div.footer-main div.links div.column p.title,
#footer div.footer-main div.newsletter p.title{
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-size: 14px;
    border-bottom: none;
    padding: 0px;
    cursor: default;
}
#footer div.footer-main div.newsletter p.title{
    text-align: center;
}
#footer div.footer-main div.links div.column a{
    margin-bottom: 10px;
    color: #c4c7ca;
    font-size: 14px;
}
#footer div.footer-main div.links div.column a:last-child{
    margin-bottom: 0px;
}
#footer div.footer-main div.links div.column a:hover{
    text-decoration: underline;
}

/* Newsletter */
#footer div.footer-main div.newsletter{
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: end;
}
#footer div.footer-main div.newsletter div.form{
    width: 100%;
    position: relative;
    text-align: right;
    margin-bottom: 10px;
}
#footer div.footer-main div.newsletter div.form input{
    background-color: transparent;
    color: white;
    border: 1px solid white;
    width: 100%;
    max-width: 400px;
    border-right: none;
    font-size: 12px;
}
#footer div.footer-main div.newsletter div.form input::placeholder{
    color: #b3b3b3;
}
#footer div.footer-main div.newsletter div.form button{
    position: absolute;
    right: 0px;
    top: 0px;
    border: 2px solid white;
}
#footer div.footer-main div.newsletter p.rgpd{
    margin-bottom: 0px;
}
#footer div.footer-main div.newsletter p.rgpd label.checkbox{
    margin-bottom: 0px;
}
#footer div.footer-main div.newsletter p.rgpd label.checkbox span.custom-checkbox{
    border-color: white;
}
#footer div.footer-main div.newsletter p.rgpd label.checkbox span.custom-checkbox img{
    filter: invert(1);
}
#footer div.footer-main div.newsletter p.rgpd label.checkbox span.text,
#footer div.footer-main div.newsletter p.rgpd label.checkbox span.text a{
    color: #c4c7ca;
}
#footer div.footer-main div.newsletter div.language-selector{
    margin-top: 20px;
}
#footer div.footer-main div.newsletter div.language-selector span.current,
#header div.header-nav div.menu div.links div.language-selector span.current{
    color: white;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
}
#footer div.footer-main div.newsletter div.language-selector span.current img,
#header div.header-nav div.menu div.links div.language-selector span.current img{
    filter: invert(1);
}
#footer div.footer-main div.newsletter div.language-selector.showing span.current img,
#header div.header-nav div.menu div.links div.language-selector.showing span.current img{
    transform: rotate(180deg);
}
#footer div.footer-main div.newsletter div.language-selector div.others,
#header div.header-nav div.menu div.links div.language-selector div.others{
    display: none;
    background-color: #f4cd24;
    text-align: center;
    padding: 1px 0px;
}
#footer div.footer-main div.newsletter div.language-selector.showing div.others,
#header div.header-nav div.menu div.links div.language-selector.showing div.others{
    display: block;
}
#footer div.footer-main div.newsletter div.language-selector div.others a,
#header div.header-nav div.menu div.links div.language-selector div.others a{
    color: black;
    font-size: 14px;
}
#footer div.footer-main div.newsletter div.language-selector div.others a:hover{
    text-decoration: underline;
}
#footer div.icons{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #c4c7ca;
    border-bottom: 1px solid #c4c7ca;
    padding: 15px 0px;
    margin-top: 50px;
}
#footer div.icons div{
    display: flex;
    align-items: center;
    gap: 10px;
}
#footer div.icons div.rrss a img{
    width: 35px;
    height: auto;
}
#footer div.icons div.payment img{
    height: 30px;
    width: auto;
}
#footer div.footer-end{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0px;
}
#footer div.footer-end p.copyright{
    font-size: 12px;
    color: white;
    margin-bottom: 0px;
}
#footer div.footer-end div.policies{
    display: flex;
    gap: 30px;
}
#footer div.footer-end div.policies a{
    color: white;
    font-size: 12px;
}
#footer div.footer-end div.policies a:hover{
    text-decoration: underline;
}
/* -- -- */

/* Notificaciones mediante el plugin Growl JS */
#growls div.growl{
    width: 500px;
    padding: 15px;
    padding-left: 25px;
    border-radius: 8px;
}
.growl{
    opacity: 1;
}
.growl.growl-notice{
    background-color: #92c646;
}
.growl.growl-error{
    background-color: #ff1d24;
}
.growl div.growl-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    line-height: 18px;
}
.growl div.growl-title:after{
    content: url('../../../../img/web/icons/check.svg');
    background: #572d95;
    filter: invert(1);
    display: inline-flex;
    border-radius: 100%;
    padding: 5px;
    margin-left: 10px;
    height: 35px;
    width: 35px;
}
.growl.growl-error div.growl-title:after{
    content: url('../../../../img/web/icons/close.svg');
    background: #00b5b1;
    filter: invert(1);
    display: inline-flex;
    border-radius: 100%;
    padding: 5px;
}
.growl div.growl-close{
    color: transparent;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 8px;
    background: transparent;
}
.growl div.growl-message{
    display: none;
}
/* -- -- */

@media(max-width: 1200px){
    /* FOOTER */
    #footer div.footer-main{
        flex-direction: column;
    }
    #footer div.footer-main div.links{
        width: 100%;
    }
    #footer div.footer-main div.newsletter{
        align-items: center;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid white;
        width: 100%;
    }
    #footer div.footer-main div.newsletter div.form{
        width: 400px;
    }
    #footer div.footer-main div.newsletter div.form input{
        max-width: 100%;
    }
    #footer div.icons{
        margin-top: 30px;
    }
}

@media(max-width: 1000px){
    h1{
        font-size: 28px;
        line-height: 35px;
    }
    h2{
        font-size: 20px;
        line-height: 25px;
    }

    /* HEADER  */
    div.header-top{
        gap: 50px;
    }
    #header div.header-nav,
    body#checkout #header .header-nav{
        padding: 0px 30px;
    }
    #header div.header-nav div.logo img{
        display: none;
        width: 60px;
    }
    #header div.header-nav div.logo img.mobile{
        display: block;
    }
    #header div.header-nav div.links{
        gap: 25px;
        margin-right: 30px;
    }

    /* FOOTER */
    #footer{
        padding: 0px 30px;
        padding-top: 30px;
        margin-top: 50px;
    }
}

/* Animacion para transicion de los mensajes de la banda superior del menu en movil */
@keyframes header_top_msg_transition {
    0%, 35%, 100% { opacity: 0; }
    5%, 30% {opacity: 1;}
}

@media(max-width: 800px){
    /* Banda superior del HEADER */
    div.header-top{
        flex-direction: column;
        gap: 0px;
        overflow: hidden;
        position: relative;
        padding: 0px;
        height: 30px;
    }
    div.header-top span{
        opacity: 0;
        position: absolute;
        animation: header_top_msg_transition 9s infinite;
    }
    div.header-top span:nth-child(2){
        animation-delay: 3s;
    }
    div.header-top span:nth-child(3){
        animation-delay: 6s;
    }
    
    /* Menu del HEADER */
    #header div.header-nav div.logo{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #header div.header-nav div.logo img{
        display: block;
        width: 160px;
    }
    #header div.header-nav div.logo img.mobile{
        display: none;
    }
    #header div.header-nav div.logo span.open-menu{
        display: block;
        margin-right: 20px;
    }
    #header div.header-nav div.logo span.open-menu img{
        display: block;
        filter: invert(1);
        width: 30px;
    }
    #header div.header-nav div.background{
        width: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        height: 100%;
        background: rgba(34,34,34,.7);
        z-index: 1;
    }
    body.menu-overlaid #header div.header-nav div.background{
        opacity: 1;
        pointer-events: initial;
    }
    #header div.header-nav div.links{
        position: fixed;
        height: 100%;
        top: 0px;
        left: -75%;
        background-color: #182430;
        flex-direction: column;
        margin-right: 0px;
        padding: 20px;
        gap: 0px;
        z-index: 2;
        width: 75%;
        transition: all 0.25s;
    }
    #header div.header-nav div.menu.show-menu div.links{
        left: 0px;
    }
    #header div.header-nav div.links:after{
        content: '';
    }
    #header div.header-nav div.links a.mobile{
        display: block;
        margin-bottom: 0px;
    }
    #header div.header-nav div.links a.mobile img{
        width: 140px;
    }
    #header div.header-nav div.links hr{
        display: block;
        border: 1px solid white;
        width: calc(100% + 38px);
        margin: 25px -20px;
    }
    #header div.header-nav div.links a{
        font-size: 18px;
        align-self: flex-start;
        margin-bottom: 15px;
    }
    #header div.header-nav div.links a:last-of-type{
        margin-bottom: 0px;
    }
    #header div.header-nav div.links a:hover:after{
        width: 0%;
    }
    #header div.header-nav div.links span.close-menu{
        position: absolute;
        top: 0px;
        right: 0px;
        display: block;
        opacity: 1;
        height: 110px;
        width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: default;
    }
    #header div.header-nav div.links span.close-menu img{
        filter: invert(1);
        width: 25px;
    }
    #header div.header-nav div.links div.language-selector{
        margin-top: 0px;
        display: block;
    }
    #header div.header-nav div.menu div.links div.language-selector span.current,
    #header div.header-nav div.menu div.links div.language-selector div.others a{
        font-size: 16px;
    }
    #header div.header-nav div.menu div.links div.language-selector div.others{
        padding: 3px 0px;
    }

    /* Mini carrito */
    #mini-cart{
        width: 400px;
        right: -400px;
        padding: 20px;
    }
    #mini-cart::-webkit-scrollbar{
        width: 6px;
    }
    #mini-cart div.title {
        padding-bottom: 15px;
        margin-bottom: 20px;
    }
    #mini-cart div.products div.product {
        margin-bottom: 10px;
    }
    #mini-cart div.products div.product div.base div.image {
        width: 35%;
    }
    #mini-cart div.products div.product div.base div.information {
        padding: 10px 20px;
        width: 65%;
    }
    #mini-cart div.products div.product div.base div.information p.name b,
    #mini-cart div.products div.product div.base div.information p.name a{
        font-size: 14px;
    }
    #mini-cart div.products div.product div.configuration div.information p {
        font-size: 12px;
        margin-bottom: 0px;
    }
    #mini-cart div.products div.product div.configuration div.information a {
        margin-top: 10px;
    }
    #mini-cart div.totals{
        margin-top: 20px;
    }
    #mini-cart div.totals div.links{
        flex-wrap: wrap;
        gap: 10px;
    }
    #mini-cart div.totals div.links a{
        width: 100%;
    }

    /* FOOTER */
    #footer{
        margin-top: 40px;
    }
    #footer div.footer-main div.links{
        flex-wrap: wrap;
    }
    #footer div.footer-main div.links div.column{
        width: 50%;
        margin-bottom: 30px;
        align-items: flex-start;
    }
    #footer div.footer-main div.newsletter{
        margin-top: 0px;
    }
    #footer div.footer-main div.newsletter div.language-selector{
        display: none;
    }
    #footer div.footer-end div.policies {
        gap: 20px;
    }
}

@media(max-width: 600px){
    h1{
        font-size: 24px;
        line-height: 28px;
    }
    h2{
        font-size: 18px;
        line-height: 23px;
    }

    label span.password-box span.icon{
        width: 60px;
    }

    /* HEADER */
    #header div.header-nav {
        padding: 0px 20px;
        height: 70px;
    }
    #header div.header-nav div.logo img{
        width: 120px;
    }
    #header div.header-nav div.logo span.open-menu{
        margin-right: 10px;
    }
    #header div.header-nav div.links a.mobile img {
        width: 120px;
    }

    /* Mini carrito */
    #mini-cart{
        width: 75%;
        right: -75%;
        padding: 20px;
    }
    #mini-cart::-webkit-scrollbar{
        width: 3px;
    }
    #mini-cart div.title{
        font-size: 20px;
    }
    #mini-cart div.products div.product div.base{
        flex-wrap: wrap;
    }
    #mini-cart div.products div.product div.base div.image,
    #mini-cart div.products div.product div.base div.information{
        width: 100%;
    }
    #mini-cart div.products div.product div.base div.information{
        border-left: 1px solid #c4c7ca;
        padding: 10px;
    }
    #mini-cart div.totals{
        padding-top: 20px;
    }
    #mini-cart div.totals p.total{
        font-size: 18px;
    }
    #mini-cart div.totals div.links{
        margin-top: 20px;
    }
    #mini-cart div.products div.product div.configuration{
        padding: 10px;
        padding-top: 0px;
    }
    #mini-cart div.products div.product div.configuration div.msg{
        padding-top: 10px;
    }

    /* FOOTER */
    #footer{
        padding: 0px 20px;
        padding-top: 20px;
        margin-top: 30px;
    }
    #footer div.footer-main div.links div.column{
        margin-bottom: 20px;
    }
    #footer div.footer-main div.newsletter{
        padding-top: 20px;
    }
    #footer div.icons{
        margin-top: 20px;
    }
    #footer div.footer-end{
        padding: 20px 0px;
    }
    #footer div.footer-end div.policies {
        gap: 2px;
        flex-direction: column;
        align-items: flex-end;
    }

    #growls div.growl{
        width: 450px;
    }
}

@media(max-width: 500px){
    /* FOOTER */
    #footer div.footer-main div.links div.column{
        width: 100%;
        align-items: center;
        margin-bottom: 15px;
    }
    #footer div.footer-main div.links div.column p.title{
        display: flex;
        align-items: center;
        margin-bottom: 6px;
    }
    #footer div.footer-main div.links div.column p.title img{
        display: block;
        filter: invert(1);
    }
    #footer div.footer-main div.links div.column p.title.showing img{
        transform: rotate(180deg);
    }
    #footer div.footer-main div.links div.column a{
        margin-bottom: 6px;
        display: none;
    }
    #footer div.footer-main div.newsletter div.form{
        width: 100%;
    }
    #footer div.icons div.payment{
        flex-wrap: wrap;
        width: 150px;
    }

    #growls div.growl{
        width: 350px;
    }
}

@media(max-width: 400px){
    /* HEADER */
    #header div.header-nav div.logo img{
        display: none;
        width: 40px;
    }
    #header div.header-nav div.logo img.mobile{
        display: block;
    }

    /* FOOTER */
    #footer div.footer-end{
        flex-direction: column-reverse;
    }
    #footer div.footer-end p.copyright{
        width: 100%;
        text-align: center;
        border-top: 1px solid white;
        margin-top: 20px;
        padding-top: 20px;
    }
    #footer div.footer-end div.policies{
        align-items: center;
    }
    
    #growls div.growl{
        width: 250px;
    }
}

@media(max-width: 300px){
    #growls div.growl{
        width: 200px;
    }
}