/*CABECERA*/

header{
    position: sticky;
    top: 0;
    margin-top: 0;
    z-index: 5;
}

#header-container{
    background-color: rgb(0, 59, 113);
    display:grid;
    grid-template-columns: repeat(14, 1fr);
}

/*---->LOGO CABECERA*/

#header-container a#header-logo{
    height: 8.6vw;
}

#header-container #header-logo img{
    width: 5vw;
    height: auto;
    margin: 2vw 0 2vw 2vw;
    grid-column: 1/7;
}

/*---->ENLACES CABECERA*/

#icono-flecha-abajo{
    width: 10px;
    height: auto;
}

#links-container{
    grid-column: 8/-1;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    font-size: 1vw;
    margin-right: 2vw;
}

div#links-container a#productos{
    position: relative;
}

div#links-container a#b2b{
    color: rgba(0, 59, 113);
        background-color: rgba(255, 94, 0);
        padding: 0.5vw;
        border-radius: 10%;
    /*margin-right: 2vw;*/
}

div#links-container a#b2b:hover{
    color: #ffffff;
}

/*---->DESPLEGABLE CABECERA*/

#productos-container> ul#products-links-list{
    display: block;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    margin-top: 1px;
    width: auto;
    background-color:  rgba(0, 59, 113, 0.9);
    padding: 15px;
    margin-left: -15px;
    z-index: 5;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

#productos-container:hover> ul#products-links-list{
    display: block;
    opacity: 100%;
    visibility: visible;
    position: absolute;
    margin-top: 1px;
    width: auto;
    background-color:  rgba(0, 59, 113, 0.9);
    padding: 15px;
    margin-left: -15px;
    z-index: 5;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

ul#products-links-list li{
    display: block;
    list-style: none;
}

#header-container a:hover{
    color: rgba(255, 94, 0, 0.8);
}

/*SUBLISTA*/

li.product-page#transmision-potencia{
    position: relative;
}

ul#products-links-sublist li{
    display: block;
    list-style: none;
}

li.product-page#transmision-potencia div#productos-sublist-container> ul#products-links-sublist{
    display: block;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    margin-top: -2.4vw;
    width: 20vw;
    background-color:  rgba(0, 59, 113, 0.9);
    padding: 15px 15px 2.4vw 15px;
    margin-left: 15.82vw;
    z-index: 5;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

li.product-page#transmision-potencia:hover div#productos-sublist-container> ul#products-links-sublist{
    display: block;
    opacity: 100%;
    visibility: visible;
    position: absolute;
    margin-top: -2.4vw;
    width: 20vw;
    background-color:  rgba(0, 59, 113, 0.9);
    padding: 15px 15px 2.4vw 15px;
    margin-left: 15.82vw;
    z-index: 5;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

@media screen and (max-width: 480px), screen and (orientation:portrait){
    #header-container.activo{
        position: relative;
        background-color: rgb(0, 59, 113);
        display:grid;
        grid-template-columns: 1.85fr 1fr;
        grid-template-rows: 20vh 80vh;
        overflow: hidden;
        transition: all 1s linear;
    }
    #header-container{
        position: relative;
        background-color: rgb(0, 59, 113);
        display:grid;
        grid-template-columns: 1.85fr 1fr;
        overflow: hidden;
        transition: all 1s linear;
    }
    #header-container #header-logo img{
        width: 30vw;
        height: auto;
        grid-column: 1/2;
        margin: 6vw 0 3vw 0;
    }
    #header-container a#header-logo{
        align-self: center;
        justify-self: end;
        height:auto;
    }
    div#links-container0{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 6vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container0.activo{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 6vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container0 a#b2b{
        background:none;
        color: #ffffff;
    }
    div#links-container0 a{
        color: #ffffff;
    }
    img#icono-hamburguesa{
        display:none;
        width: 10vw;
        align-self: center;
        justify-self: end;
        margin-right: 5vw;
    }
    img#icono-hamburguesa.activo{
        display:block;
        width: 10vw;
        align-self: center;
        justify-self: end;
        margin-right: 5vw;
    }
    img#icono-cruz{
        display: none;
        width: 8vw;
        align-self: center;
        justify-self: end;
        margin-right: 5vw;
        margin-top: -8vw;
    }
    img#icono-cruz.activo{
        display: block;
        width: 8vw;
        align-self: center;
        justify-self: end;
        margin-right: 5vw;
        margin-top: -8vw;
    }
    div#header-container a.enlace{
        display: block;
        margin-left: 5vw;
        width: 100%;
    }
    div#header-container div#productos-container{
        display: flex;
        flex-direction: row;
        margin-left: 5vw;
        width: 100%;
        align-items: center;
        gap: 5vw;
    }
    div#links-container0 div#boton-atras{
        display: none;
        flex-direction: row;
        margin-left: 5vw;
        gap: 5vw;
    }
    div#links-container0 div#boton-atras.activo{
        display: flex;
        flex-direction: row;
        margin-left: 5vw;
        gap: 5vw;
        align-items: center;
    }
    div#links-container0 div#boton-atras img#flecha-atras{
        display: block;
        width: 5vw;
        height: auto;
    }
    div#links-container0 img#flecha-adelante0{
        display: block;
        width: 5vw;
        height: auto;
    }

    div#links-container1 div#boton-atras1{
        display: none;
        flex-direction: row;
        margin-left: 5vw;
        gap: 5vw;
    }
    div#links-container1 div#boton-atras1.activo{
        display: flex;
        flex-direction: row;
        margin-left: 5vw;
        gap: 5vw;
        align-items: center;
    }
    div#links-container1 div#boton-atras1 img#flecha-atras{
        display: block;
        width: 5vw;
        height: auto;
    }
    div#links-container1 img#flecha-adelante1{
        display: block;
        width: 5vw;
        height: auto;
    }
    div#links-container1{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 6vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container1.activo{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 6vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container2{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 6vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container2.activo{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 6vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container2 div#boton-atras2{
        display: none;
        flex-direction: row;
        margin-left: 5vw;
        gap: 5vw;
    }
    div#links-container2 div#boton-atras2.activo{
        display: flex;
        flex-direction: row;
        margin-left: 5vw;
        gap: 5vw;
        align-items: center;
    }
    div#links-container2 div#boton-atras2 img#flecha-atras{
        display: block;
        width: 5vw;
        height: auto;
    }
    p#fecha-origen{
        margin: 0 0 0 5vw;
        align-self: center;
        font-size: 3vw;
        font-family: "Berkshire Swash";
    }
}

@media screen and (min-width:480px) and (max-width:1200px) and (orientation:landscape){
    #header-container.activo{
        position: relative;
        background-color: rgb(0, 59, 113);
        display:grid;
        grid-template-columns: 1.35fr 1fr;
        grid-template-rows: 30vh 70vh;
        overflow: hidden;
        transition: all 1s linear;
    }
    #header-container{
        position: relative;
        background-color: rgb(0, 59, 113);
        display:grid;
        grid-template-columns: 1.35fr 1fr;
        overflow: hidden;
        transition: all 1s linear;
    }
    #header-container #header-logo img{
        width: 10vw;
        height: auto;
        grid-column: 1/2;
        margin: 2vw 0 1vw -12.5vw;
    }
    #header-container a#header-logo{
        align-self: center;
        justify-self: end;
        height: auto;
    }
    div#links-container0{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 3vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container0.activo{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 3vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container0 a#b2b{
        background:none;
        color: #ffffff;
    }
    div#links-container0 a{
        color: #ffffff;
    }
    img#icono-hamburguesa{
        display:none;
        width: 5vw;
        align-self: center;
        justify-self: end;
        margin-right: 5vw;
    }
    img#icono-hamburguesa.activo{
        display:block;
        width: 5vw;
        align-self: center;
        justify-self: end;
        margin-right: 5vw;
    }
    img#icono-cruz{
        display: none;
        width: 4vw;
        align-self: center;
        justify-self: end;
        margin-right: 5vw;
        margin-top: 0;
    }
    img#icono-cruz.activo{
        display: block;
        width: 4vw;
        align-self: center;
        justify-self: end;
        margin-right: 5vw;
        margin-top: 0;
    }
    div#header-container a.enlace{
        display: block;
        margin-left: 5vw;
        width: 100%;
    }
    div#header-container div#productos-container{
        display: flex;
        flex-direction: row;
        margin-left: 5vw;
        width: 100%;
        align-items: center;
        gap: 5vw;
    }
    div#links-container0 div#boton-atras{
        display: none;
        flex-direction: row;
        margin-left: 5vw;
        gap: 2vw;
    }
    div#links-container0 div#boton-atras.activo{
        display: flex;
        flex-direction: row;
        margin-left: 5vw;
        gap: 2vw;
        align-items: center;
    }
    div#links-container0 div#boton-atras img#flecha-atras{
        display: block;
        width: 3vw;
        height: auto;
    }
    div#links-container0 img#flecha-adelante0{
        display: block;
        width: 3vw;
        height: auto;
    }

    div#links-container1 div#boton-atras1{
        display: none;
        flex-direction: row;
        margin-left: 5vw;
        gap: 2vw;
    }
    div#links-container1 div#boton-atras1.activo{
        display: flex;
        flex-direction: row;
        margin-left: 5vw;
        gap: 2vw;
        align-items: center;
    }
    div#links-container1 div#boton-atras1 img#flecha-atras{
        display: block;
        width: 3vw;
        height: auto;
    }
    div#links-container1 img#flecha-adelante1{
        display: block;
        width: 3vw;
        height: auto;
    }
    div#links-container1{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 3vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container1.activo{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 3vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container2{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 3vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container2.activo{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 3vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container2 div#boton-atras2{
        display: none;
        flex-direction: row;
        margin-left: 5vw;
        gap: 2vw;
    }
    div#links-container2 div#boton-atras2.activo{
        display: flex;
        flex-direction: row;
        margin-left: 5vw;
        gap: 2vw;
        align-items: center;
    }
    div#links-container2 div#boton-atras2 img#flecha-atras{
        display: block;
        width: 3vw;
        height: auto;
    }
    p#fecha-origen{
        margin: 0 0 0 -0.5vw;
        align-self: center;
        font-size: 1.5vw;
        font-family: "Berkshire Swash";
    }

}

/*@media screen and (min-width: 480px) and (max-width: 1200px){
    #header-container.activo{
        position: relative;
        background-color: rgb(0, 59, 113);
        display:grid;
        grid-template-columns: 1.85fr 1fr;
        grid-template-rows: 20vh 80vh;
        overflow: hidden;
    }
    #header-container{
        position: relative;
        background-color: rgb(0, 59, 113);
        display:grid;
        grid-template-columns: 1.85fr 1fr;
        overflow: hidden;
    }
    #header-container #header-logo img{
        width: 30vw;
        height: auto;
        grid-column: 1/2;
        margin-left: 0;
    }
    #header-container a#header-logo{
        align-self: center;
        justify-self: end;
    }
    div#links-container0{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 6vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container0.activo{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 6vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container0 a#b2b{
        background:none;
        color: #ffffff;
    }
    div#links-container0 a{
        color: #ffffff;
    }
    img#icono-hamburguesa{
        display:none;
        width: 10vw;
        align-self: center;
        justify-self: end;
        margin-right: 5vw;
    }
    img#icono-hamburguesa.activo{
        display:block;
        width: 10vw;
        align-self: center;
        justify-self: end;
        margin-right: 5vw;
    }
    img#icono-cruz{
        display: none;
        width: 8vw;
        align-self: center;
        justify-self: end;
        margin-right: 5vw;
        margin-top: -8vw;
    }
    img#icono-cruz.activo{
        display: block;
        width: 8vw;
        align-self: center;
        justify-self: end;
        margin-right: 5vw;
        margin-top: -8vw;
    }
    div#header-container a.enlace{
        display: block;
        margin-left: 5vw;
        width: 100%;
    }
    div#header-container div#productos-container{
        display: flex;
        flex-direction: row;
        margin-left: 5vw;
        width: 100%;
        align-items: center;
        gap: 5vw;
    }
    div#links-container0 div#boton-atras{
        display: none;
        flex-direction: row;
        margin-left: 5vw;
        gap: 5vw;
    }
    div#links-container0 div#boton-atras.activo{
        display: flex;
        flex-direction: row;
        margin-left: 5vw;
        gap: 5vw;
        align-items: center;
    }
    div#links-container0 div#boton-atras img#flecha-atras{
        display: block;
        width: 5vw;
        height: auto;
    }
    div#links-container0 img#flecha-adelante0{
        display: block;
        width: 5vw;
        height: auto;
    }

    div#links-container1 div#boton-atras1{
        display: none;
        flex-direction: row;
        margin-left: 5vw;
        gap: 5vw;
    }
    div#links-container1 div#boton-atras1.activo{
        display: flex;
        flex-direction: row;
        margin-left: 5vw;
        gap: 5vw;
        align-items: center;
    }
    div#links-container1 div#boton-atras1 img#flecha-atras{
        display: block;
        width: 5vw;
        height: auto;
    }
    div#links-container1 img#flecha-adelante1{
        display: block;
        width: 5vw;
        height: auto;
    }
    div#links-container1{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 6vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container1.activo{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 6vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container2{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: none;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 6vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container2.activo{
        grid-column: 1/-1;
        grid-row: 2/-1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        font-size: 6vw;
        z-index: 5;
        color: #ffffff;
    }
    div#links-container2 div#boton-atras2{
        display: none;
        flex-direction: row;
        margin-left: 5vw;
        gap: 5vw;
    }
    div#links-container2 div#boton-atras2.activo{
        display: flex;
        flex-direction: row;
        margin-left: 5vw;
        gap: 5vw;
        align-items: center;
    }
    div#links-container2 div#boton-atras2 img#flecha-atras{
        display: block;
        width: 5vw;
        height: auto;
    }
    p#fecha-origen{
        margin: 0 0 0 5vw;
        align-self: center;
        font-size: 3vw;
        font-family: "Berkshire Swash";
    }
}*/