/* ANCHO DE LA CONTENEDORA */
body .a .a_c .hr-container {
    width: calc(100% + 40px);
    margin-left: -20px;
}

/* en movil efecto tik tok */
@media screen and (min-width: 320px) and (max-width: 767px) {

    .hr_scroller-wrapper {
        background-color: #E54949;
    }

    .hr_scroller-slides {
        position: relative;
    }

    .hr_scroller-slides {
        width: 100%;
        top: 0;
      /*  overflow: scroll;
        scroll-snap-type: y proximity;    */    

    }

    .hr_scroller-slide {
        height:  100%;
        font-size: 16px;
        color: #000;
        white-space: normal;
        height:  auto;
        margin-bottom: 20px;
       /* scroll-snap-align:  center;*/
    }

    .hr_scroller-slide.mes {
        height:  50vh;
    }

    body .hr_scroller-slide:last-child {
        margin-right: 0;
    }

}



.scroller-slide-item {
    width: 100%;
    height: 100%;
}

.hr_scroller-slide .scroller-slide-item {
    background-color: #E54949 ;
    color: #fff;
    box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.3);
}

/*
.hr_scroller-slide:nth-child(even) .scroller-slide-item {
    background-color: lightcoral;
}

.hr_scroller-slide:nth-child(odd) .scroller-slide-item {
    background-color: burlywood;
}
*/

.hr_scroller-slide:last-child {
    margin-right: 60px;
}

@media screen and (min-width: 768px) {

    /* contenedores principales */
    .bl-hr_scroller {
        display: block;
        margin: 0 auto;
        min-height: 100vh;
    }

    .hr_scroller-wrapper {
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background-color: red;
    }

    .hr_scroller-slides {
        width: 100%;
        height: 100vh;
        white-space: nowrap;
        font-size: 0;
        transform: translateX(0px);
        position: relative;
    }

    .hr_scroller-slide {
        /*width: 100%;*/
        height: 100vh;
        display: block;
        font-size: 16px;
        color: #000;
        white-space: normal;
    }


    /* SOBRESCRITURA CONTENIDO PARA IMÁGENES A TODO EL ANCHO */
    body .a .a_c {
        grid-column: 2/12;
        width: 715px;
        margin: 0 auto;
    }
    
    body .a .a_c .hr-container {
        margin-left: calc(-100vw / 2 + 715px / 2);
        margin-right: calc(-100vw / 2 + 715px / 2);
        width: 100vw;
    }

    /* Aquí cambiamos los tamaños */
    .hr_scroller-slide {
        display: inline-flex; /* para que funcione */
        width: 640px;
        position: relative;
    }

    .hr_scroller-slide .scroller-slide-item {
        width: calc(100% - 32px);
        height: 440px;

        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
    }

    .hr_scroller-slide:first-child {
        margin-left: calc(50vw - 320px);
    }
    .hr_scroller-slide.large {
        width: 860px;
    }
    .hr_scroller-slide:last-child {
        margin-right: calc(50vw - 310px);
    }
}

@media screen and (min-width: 1001px) {
    /* SOBRESCRITURA CONTENIDO PARA IMÁGENES A TODO EL ANCHO */
    body .a .a_c {
        grid-column: 2/12;
        width: 790px;
        margin: 0 auto;
    }

    body .a .a_c .hr-container {
        margin-left: calc(-100vw / 2 + 790px / 2);
        margin-right: calc(-100vw / 2 + 790px / 2);
        width: 100vw;
    }
}

@media screen and (min-width: 1199px) {
    /* SOBRESCRITURA CONTENIDO PARA IMÁGENES A TODO EL ANCHO */
    body .a .a_c {
        grid-column: 2/12;
        width: 957px; /* width: auto > No funciona correctamente en Firefox */
        margin: initial;
    }
    
    /* IMÁGENES A TODO EL ANCHO */
    body .a .a_c .hr-container {
        margin-left: calc(-100vw / 2 + 957px / 2);
        margin-right: calc(-100vw / 2 + 957px / 2);
    }
}