.headers {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: white;
    width: 100%;
    height: 0;
    padding-top: 30.9%; /* (img-height / img-width * container-width) */
}


.commercial-header-img {
    max-height: 125px;
}

.header-movil-arrow {
    max-width: 25px;
}

@media (min-width: 1257px) {
    .commercial-headers-img-container {
        margin-top: 20px;
    }    
}

@media (min-width: 1345px) {
    .commercial-headers-img-container {
        margin-top: 20px;
    }    
}

@media (min-width: 1526px) {
    .commercial-headers-img-container {
        margin-top: 50px;
    }    
    .commercial-headers-titles {
        margin-top:20px;
    }

    .commercial-headers-button {
        margin-top: 20px;
    }
}

@media (max-width: 1257px) {
    .titleHeaderCommercial {
        font-size: 1.9rem !important;
    }

    .subtitleHeaderCommercial {
        font-size: 1.4rem !important;
    }
}

@media (max-width: 1112px) {
    .titleHeaderCommercial {
        font-size: 1.6rem !important;
    }

    .subtitleHeaderCommercial {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 1010px) {
    .titleHeaderCommercial {
        font-size: 1.4rem !important;
    }

    .subtitleHeaderCommercial {
        font-size: 1.0rem !important;
    }

    .commercial-header-img {
        max-height: 98px;
    }

    .commercial-headers-img-container {
        margin-top: 9px;
    }  
}

@media (max-width: 896px) {
    .commercial-headers-img-container {
        margin-top: 0;
        max-height: 80px;
    }

    .titleHeaderCommercial {
        font-size: 1.2rem !important;
    }

    .subtitleHeaderCommercial {
        font-size: 0.8rem !important;
    }

    .commercial-headers-titles {
        margin-top:18px;
    }

}

@media (max-width: 810px) {
    .commercial-header-img {
            max-height: 85px;
        }
    
        .commercial-headers-titles {
            margin-top: 6px;
        }
    }
    
    /* Headers no comerciales */
    
    .header-info {
        position: absolute;
        top: 80px;
        left: 45px;
        width: 100%
    }
    
    
    @media screen and (max-width: 1030px) {
        .header-info {
            top: 40px;
        }
    }
    
    @media screen and (max-width: 800px) {
        .header-info {
            top: 20px;
        }
    }
    
    @media screen and (max-width: 766px) {
    
    
        .text-box-header {
            margin-top: 10% !important;
        }

        .commercial-headers-titles {
            padding-left:8%;
            padding-right:14%
        }
    
    
        #subcategory_header {
            min-height: 40vh;
        }
    
        .header-info {
            position: absolute;
            width: 100%;
            left: 0;
            right: 0;
            margin-left: auto;
            margin-right: auto;
        }
    
        .big-screen {
            display: none;
            }
            
            .small-screen {
                display: flex;
            }
            }
            
            .header-movil {
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                background-color: white;
                width: 100%;
                height: 0;
                padding-top: 95%;
                position: relative
            }

            .movil-arrow-right {
                position: absolute; 
                min-height: 50px; 
                right: 5px;
                top: 32%;
            }

            .movil-arrow-left {
                position: absolute;
                min-height: 50px;
                left: 5px;
                top: 32%;
            }