@media only screen and (max-width: 1536px) {

    * {
        margin: 0;
        padding: 0;
        font-family: montserrat;
        box-sizing: border-box;
    }

    body {

        background-color: #1F2124;
        background-size: cover;
        background-position: center;
        color: #fff;

        display: flex;

        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
    }

    .wrapper {
        padding: 10px 10%;
        max-width: 800px;
        /* Establece un ancho máximo para el contenido */
        text-align: center;
        /* Centra el texto dentro del contenedor */
        display: flex;
        /* Usamos flexbox */
        justify-content: center;
        /* Centramos horizontalmente */
        align-items: center;
        /* Centramos verticalmente */
        height: 100vh;
        /* Establecemos la altura al 100% de la ventana */
    }


    .card-area {
        padding: 0% 10%;
    }

    .box-area {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        /* grid-gap: 0%; */
        margin-top: 0px;
        display: flex;
        justify-content: space-between;
        margin-top: 13%;
        margin-right: 0%;
    }

    .box img {
        width: 100%;
        /* La imagen ocupará el ancho completo del contenedor .box */
        height: 100%;
        /* La altura ocupará todo el espacio disponible manteniendo la proporción de aspecto */
        border-radius: 10px;
        display: block;
        transition: transform 0.5s;
        object-fit: cover;
        /* La imagen se ajustará para cubrir el contenedor sin distorsionar su proporción */
    }

    .box {
        flex: 0 0 calc(30% - 20px);
        position: relative;
        overflow: hidden;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
        width: 478px;
        height: 620px;
        margin-bottom: 20px;
        /* Agrega espacio entre las cajas */
    }

    .overlay {
        height: 0px;
        width: 100%;
        background: linear-gradient(transparent, #1c1c1c 58%);
        border-radius: 10px;
        position: absolute;
        left: 0;
        bottom: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0 40px;
        text-align: center;
        font-size: 14px;
        transition: height 0.5s;
    }

    .overlay h3 {
        font-weight: 500;
        margin-bottom: 5px;
        margin-top: 80%;
        font-family: bebas neue;
        font-size: 30px;
        letter-spacing: 2px;
        font-family: montserrat;

    }

    .overlay button {
        margin-top: 10px;
        color: #00708C;
        font-size: 40px;
        /* Tamaño del signo "+" */
        background: #FFFFFF;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        /* Cambia el cursor al pasar por encima del botón */
    }

    .boxLhover img {
        transform: scale(1.2);
    }

    .box:hover .overlay {
        height: 100%;
    }


    /* Estilos para el modal */
    .modal {
        display: none;
        position: fixed;
        z-index: 5000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.7);
    }

    /* Contenido del modal */
    .modal-content {
        background-image: url(../images/fondo1.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 10px;
        width: 917px;
        height: 525px;
        flex-shrink: 0;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .modal-imagen .modal-content div {
        margin-bottom: 30px;
        /* Añade un poco de espacio debajo de la imagen */
    }

    .modal-imagen .modal-content .texto {
        text-align: center;
        padding: 20px;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 740px;
        height: 169px;
        margin-left: 95px;
    }

    .modal-imagen .modal-content .titulo {
        background-image: url(../images/sobrenafin/1.webp);
        background-size: 100% 263px;
        background-position: center;
        width: 100%;
        height: 263px;
        border-radius: 10px 10px 0 0;

    }

    .modal-imagen .modal-content .titulo .t2 {
        color: #fff;
        text-align: center;
        font-family: Montserrat;
        font-size: 70px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: capitalize;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .modal-imagen .modal-content .texto p {
        color: #000;
        font-size: 23px;
        text-align: justify;
    }

    .modal-content .texto p b {
        color: #00708C;
        /* Cambia el color del texto dentro de las etiquetas <b> a rojo */
    }

    .botones {
        display: flex;
        justify-content: flex-end;
        /* Alinea los elementos al extremo derecho */
        align-items: flex-end;
        /* Alinea los elementos en la parte inferior */
        position: absolute;
        /* Posición absoluta para estar en la esquina */
        bottom: -10px;
        /* Alinea la parte inferior del contenedor con el borde inferior del padre con un margen de 20px */
        right: 20px;
        /* Alinea la parte derecha del contenedor con el borde derecho del padre con un margen de 20px */
    }

    .botones button {
        width: 40px;
        /* Establece el ancho del botón */
        height: 40px;
        /* Establece la altura del botón */
        background-color: transparent;
        /* Establece el fondo transparente */
        border: none;
        /* Quita el borde */
        border-radius: 50%;
        /* Hace que el botón tenga forma circular */
        cursor: pointer;
        /* Cambia el cursor al pasar sobre el botón */
        outline: none;
        /* Quita el contorno al hacer clic */
        padding: 0;
        /* Quita el relleno */
        background-repeat: no-repeat;
        /* Evita que la imagen de fondo se repita */
        background-position: center;
        /* Centra la imagen de fondo dentro del botón */
        margin-left: 30px;
    }

    .botones button.left {
        background-image: url('../iconos/ui/vector-verde.svg');
        /* Establece la imagen como fondo del botón */
        background-size: 40px 40px;
    }

    .botones button.right {
        background-image: url('../iconos/ui/vector-verde.svg');
        background-size: 40px 40px;
        transform: rotate(180deg);
    }


    .close {

        float: right;
        font-size: 28px;
        font-weight: bold;
        /* border-radius: 50%; */

        padding: 5px 10px;

        /* background-image: url('iconos/ui/close-circle.svg'); */
        width: 30px;
        height: 30px;
        margin-right: 10px;
        margin-top: 10px;

        float: right !important;
        /* Otras propiedades */

    }

    .close.close1 {
        background-image: url('../iconos/ui/tache.svg');
        background-size: cover;

    }

    .close.close2 {
        background-image: url('../iconos/ui/close-circle-verde.svg');
        z-index: 100;
        background-size: cover;

        margin-right: -39px;
        margin-top: -21px;
    }

    .close.close3 {
        background-image: url('../iconos/ui/close-circle-verde.svg');

        margin-right: 21px;
        margin-top: 10px;
        background-size: cover;

        float: right;
        padding: 5px 10px;



    }

    .close.close-av {
        background-image: url('../iconos/ui/close-circle-verde.svg');
        z-index: 100;
        background-size: cover;
        width: 36px;
        height: 35px;
        margin-right: -39px;
        margin-top: -21px;
    }

    .close.close-ef {
        background-image: url('../iconos/ui/close-circle-verde.svg');
        z-index: 100;
        background-size: cover;
        width: 36px;
        height: 35px;
        margin-right: -39px;
        margin-top: -21px;
    }


    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }



    /* modal sobre nafin 2 */

    .modal-imagen-2 .modal-content {
        background-color: #fefefe;
        border-radius: 10px;
        /* Redondea las esquinas del modal */
        width: 917px;
        height: 525px;
        /* Establece la altura deseada del modal */
        flex-shrink: 0;
        /* Evita que el modal se encoja para adaptarse a su contenido */
        position: fixed;
        /* Establece la posición fija */
        top: 50%;
        /* Coloca el borde superior del modal en el 50% de la altura de la ventana */
        left: 50%;
        /* Coloca el borde izquierdo del modal en el 50% del ancho de la ventana */
        transform: translate(-50%, -50%);
        /* Translada el modal hacia arriba y hacia la izquierda en la mitad de su propio ancho y alto */
    }

    .modal-imagen-2 .modal-content {
        display: flex;
        /* Utiliza flexbox para posicionar los elementos en fila */
    }

    .modal-imagen-2 .modal-content .titulo {
        /* Establece la imagen de fondo */
        background-image: url('../images/sobrenafin/popupfechas.webp');
        /* Ajusta el tamaño de la imagen para que se ajuste dentro del contenedor */
        background-size: cover;
        /* Elimina el ancho establecido para el contenedor para que se ajuste al tamaño de la imagen */
        width: 100%;
        /* Establece la altura del contenedor para que coincida con la altura de la imagen */
        height: 100%;
        /* Redondea las esquinas superiores del contenedor */
        border-radius: 2% 0 0 2%;
        /* Mueve el contenedor hacia la derecha */
        margin-left: -35px;
    }

    .modal-imagen-2 .modal-content .texto {
        flex: 1;
        /* Que ocupe el 50% del espacio disponible horizontalmente */
        padding: 20px;
        /* Ajusta el espacio alrededor del texto */
        margin-top: 10%;
    }

    .modal-imagen-2 .modal-content .texto .fecha {
        color: #007393;
        text-align: justify;
        text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
        font-family: Montserrat;
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        width: 230px;
        height: 54px;
        margin-top: -9%;

    }

    .modal-imagen-2 .modal-content .texto .descripcion {
        color: #000;
        text-align: justify;
        font-family: Montserrat;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        width: 626px;
        height: 113px;
        flex-shrink: 0
    }

    .modal-imagen-2 .botones {
        display: flex;
        justify-content: flex-end;
        /* Alinea los elementos al extremo derecho */
        align-items: flex-end;
        /* Alinea los elementos en la parte inferior */
        position: absolute;
        /* Posición absoluta para estar en la esquina */
        bottom: 10px;
        /* Alinea la parte inferior del contenedor con el borde inferior del padre con un margen de 20px */
        right: 20px;
        /* Alinea la parte derecha del contenedor con el borde derecho del padre con un margen de 20px */
    }

    .modal-imagen-2 .botones button {
        width: 40px;
        /* Establece el ancho del botón */
        height: 40px;
        /* Establece la altura del botón */
        background-color: transparent;
        /* Establece el fondo transparente */
        border: none;
        /* Quita el borde */
        border-radius: 50%;
        /* Hace que el botón tenga forma circular */
        cursor: pointer;
        /* Cambia el cursor al pasar sobre el botón */
        outline: none;
        /* Quita el contorno al hacer clic */
        padding: 0;
        /* Quita el relleno */
        background-repeat: no-repeat;
        /* Evita que la imagen de fondo se repita */
        background-position: center;
        /* Centra la imagen de fondo dentro del botón */
        margin-left: 30px;
    }

    .modal-imagen-2 .botones button.left {
        background-image: url('../iconos/ui/vector-verde.svg');
        /* Establece la imagen como fondo del botón */
        background-size: 40px 40px;
    }

    .modal-imagen-2 .botones button.right {
        background-image: url('../iconos/ui/vector-verde.svg');
        background-size: 40px 40px;
        transform: rotate(180deg);
    }

    .modal-imagen-2 .modal-content .close2 {
        float: right !important;
        /* Otras propiedades */
    }

    .modal-imagen-2 .modal-content .bclose {
        position: absolute;
        z-index: 1000;
        right: 50px;
        top: 30px;
    }

    /* modal 3 sobre nafin */
    .modal-imagen-3 .modal-content .texto {
        text-align: center;
        /* Centra horizontalmente el texto */
        padding: 0px;
        /* Ajusta el espacio alrededor del texto */
        flex: 1;
        /* Permite que el texto ocupe todo el espacio disponible verticalmente */
        display: flex;
        /* Utiliza flexbox para centrar verticalmente el texto */
        justify-content: center;
        /* Centra verticalmente el texto */
        align-items: center;
        /* Centra verticalmente el texto */

        width: 782px;
        height: 181px;

        margin-left: 75px;
        margin-top: -4%;
    }

    .modal-imagen-3 .modal-content .titulo {
        background-image: url('../images/sobrenafin/popupultimo.webp');
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 350px;
        border-radius: 2% 2% 0 0;

    }

    .modal-imagen-3 .modal-content .texto p {
        color: #000;

        text-align: justify;
        font-family: Montserrat;
        font-size: 19px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .modal-content .texto p b {
        color: #00708C;
        /* Cambia el color del texto dentro de las etiquetas <b> a rojo */
    }

    .modal-imagen-3 .botones {
        display: flex;
        justify-content: flex-end;
        /* Alinea los elementos al extremo derecho */
        align-items: flex-end;
        /* Alinea los elementos en la parte inferior */
        position: absolute;
        /* Posición absoluta para estar en la esquina */
        bottom: -20px;
        /* Alinea la parte inferior del contenedor con el borde inferior del padre con un margen de 20px */
        right: 20px;
        /* Alinea la parte derecha del contenedor con el borde derecho del padre con un margen de 20px */
    }

    .modal-imagen-3 .botones {
        display: flex;
        justify-content: flex-end;
        /* Alinea los elementos al extremo derecho */
        align-items: flex-end;
        /* Alinea los elementos en la parte inferior */
        position: absolute;
        /* Posición absoluta para estar en la esquina */
        bottom: 10px;
        /* Alinea la parte inferior del contenedor con el borde inferior del padre con un margen de 20px */
        right: 20px;
        /* Alinea la parte derecha del contenedor con el borde derecho del padre con un margen de 20px */
    }

    .modal-imagen-3 .botones button {
        width: 40px;
        /* Establece el ancho del botón */
        height: 40px;
        /* Establece la altura del botón */
        background-color: transparent;
        /* Establece el fondo transparente */
        border: none;
        /* Quita el borde */
        border-radius: 50%;
        /* Hace que el botón tenga forma circular */
        cursor: pointer;
        /* Cambia el cursor al pasar sobre el botón */
        outline: none;
        /* Quita el contorno al hacer clic */
        padding: 0;
        /* Quita el relleno */
        background-repeat: no-repeat;
        /* Evita que la imagen de fondo se repita */
        background-position: center;
        /* Centra la imagen de fondo dentro del botón */
        margin-left: 30px;
        margin-top: -50px;
    }

    .modal-imagen-3 .botones button.left {
        background-image: url('../iconos/ui/vector-verde.svg');
        /* Establece la imagen como fondo del botón */
        background-size: 40px 40px;
    }

    .modal-imagen-3 .botones button.right {
        background-image: url('../iconos/ui/vector-verde.svg');
        background-size: 40px 40px;
    }

    /* Estilos para el modal seguimos avanzando */

    /* Contenido del modal */

    #myModal2.modal {
        /* Define la altura deseada del modal */
        /* Otros estilos para el modal */

        display: none;
        /* Oculta el modal por defecto */
        position: fixed;
        /* Posición fija */
        z-index: 5000;
        /* Asegúrate de que el modal esté encima de otros elementos */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        /* Agrega desplazamiento si el contenido es demasiado grande para caber en el viewport */
        background-color: rgba(0, 0, 0, 0.7);
        /* Fondo oscuro semi-transparente */


    }

    #myModal2 .modal-content {
        background-color: #fff;
        background-image: url(../images/sobrenafin/modal2.webp);
        background-size: 119% 108%;
        background-repeat: no-repeat;
        background-position: center;
        padding: 9px;
        display: flex;
        align-items: center;
        position: relative;
        width: 917px;
        height: 525px;
    }


    #myModal2 .modal-content .left-column .titulo {
        color: #007393;
        /* text-align: justify; */
        text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
        font-family: Montserrat;
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        width: 317px;
        height: 67px;
        flex-shrink: 0;
        margin-bottom: 6%;
        margin-top: 34%;
    }

    #myModal2 .modal-content .left-column .parrafo {
        color: #000;
        text-align: justify;
        font-family: Montserrat;
        font-size: 18px;
        font-style: normal;
        font-weight: 380;
        line-height: normal;
        letter-spacing: -1.15px;
        width: 350px;
        height: 475px;
    }



    #myModal2 .modal-content .right-column {
        width: 160px;
        height: 45px;
        margin-right: -109%;
        margin-left: -30%;
        margin-block-end: -31%;
    }

    #myModal2 .modal-content .left-column {
        margin-left: 5%;
    }

    #myModal2 .modal-content .right-column .mav {
        border: none;
        border-radius: 50px;
        background: #00708C;
        color: #FFF;
        text-align: center;
        font-family: Montserrat;
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        margin-left: auto;
        height: 59px;
        width: 115px;
        line-height: 60px;
        cursor: pointer;
    }



    #myModal2 .modal-content .right-column .mav img {
        margin-top: 0%;
        position: relative;
        transform: translateY(26%);
        margin-bottom: -3%;
    }

    #myModal2 .modal-content .left-column,
    #myModal2 .modal-content .right-column {
        flex: 0;
        /* Hace que ambas columnas ocupen el espacio disponible */
    }

    #myModal2 .modal-content .bcloseav {
        position: absolute;
        z-index: 1000;
        right: 50px;
        top: 30px;
    }

    /* Estilos para el modal gracias esfuerzo */

    .modal-esfuerzo .modal-content {
        background-image: url('../images/fondo1.jpg');
        background-size: 100% 688px;
        background-repeat: no-repeat;

        border-radius: 10px;
        width: 917px;
        height: 525px;
        flex-shrink: 0;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
    }

    .modal-esfuerzo .modal-content .imagen {
        background-image: url('../images/sobrenafin/gracias.webp');
        background-size: cover;
        width: 100%;
        height: 100%;
        border-radius: 2% 0 0 2%;
        margin-left: 0;
    }

    .modal-esfuerzo .modal-content .texto {
        flex: 1;
        padding: 20px;
        margin-top: 16%;
        margin-left: -1%;
        margin-right: -10%;
    }

    .modal-esfuerzo .modal-content .texto .titulo {
        color: #007393;
        /* text-align: justify; */
        text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
        font-family: Montserrat;
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        width: 640px;
        height: 108px;
        flex-shrink: 0;
        margin-top: -10%;
        margin-bottom: 0%;
        margin-left: 6%;
    }

    .modal-esfuerzo .modal-content .texto .descripcion {
        color: #000;
        text-align: justify;
        font-family: Montserrat;
        font-size: 23px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        width: 454px;
        height: 361px;
        flex-shrink: 0;
        margin-top: -5%;
        margin-left: 8%;
    }

    .modal-esfuerzo .modal-content .texto .descripcion b {
        color: #00708C;
    }

    .modal-esfuerzo .modal-content .bclose-ef {
        position: absolute;
        z-index: 1000;
        right: 50px;
        top: 30px;
    }


}

@media only screen and (max-width: 1440px) {

    .box {
        width: 450px;
        height: 600px;
    }

}

@media only screen and (max-width: 1366px) {

    .box {
        width: 380px;
        height: 450px;
    }
    
}


@media only screen and (max-width: 1280px){

    .box {
        width: 380px;
        height: 450px;
    }

}




@media (max-width: 430px) {

    .box-area {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        /* grid-gap: 0%; */
        margin-top: 0px;
        display: grid;
        justify-content: space-between;
        margin-top: 249%;
        margin-left: -19%;
    }



    .close.close1 {
        background-image: url(../iconos/ui/tache.svg);
        background-size: cover;
        margin-right: 0px;
        margin-top: 0px;
    }

    .close.close3 {
        background-image: url(../iconos/ui/close-circle-verde.svg);
        margin-right: 0px;
        margin-top: 0px;
        background-size: cover;
        float: right;
        padding: 5px 10px;
    }



    .modal-content {
        width: 90%;
        height: auto;
        padding: 10px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .modal-imagen .modal-content .titulo {
        background-size: cover;
        height: 140px;
        width: 106%;
        margin-bottom: 0;
        margin-top: -3%;
        margin-left: -3%;
    }

    .modal-imagen .modal-content .titulo .t2 {
        color: #fff;
        text-align: center;
        font-family: Montserrat;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: capitalize;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-imagen .modal-content .texto {
        width: 100%;
        height: auto;
        margin-left: 0;
    }

    .modal-imagen .modal-content .texto p {
        color: #000;
        font-size: 15px;
        text-align: justify;
    }



    .modal-imagen-2 .modal-content {
        width: 90%;
        height: auto;
    }

    .modal-imagen-2 .modal-content .titulo {
        background-size: cover;
        height: auto;
        /* width: auto; */
        margin-left: -11px;
        margin-top: -2.6%;
        margin-bottom: -3%;
    }

    .modal-imagen-2 .modal-content .texto {
        margin-top: 5%;
        padding: 10px;
    }

    .modal-imagen-2 .modal-content .texto .fecha {
        font-size: 20px;
        margin-top: -4%;
        /* width: auto; */
        height: auto;
    }

    .modal-imagen-2 .modal-content .texto .descripcion {
        font-size: 12px;
        width: auto;
        height: 80px;
    }

    .modal-imagen-3 .modal-content .texto {
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-top: -2%;
        margin-bottom: 8%;
    }

    .modal-imagen-3 .modal-content .titulo {
        background-size: cover;
        height: 200px;
        margin-left: -3%;
        margin-top: -2.8%;
        width: 106%;
    }

    .modal-imagen-3 .modal-content .texto p {
        font-size: 15px;
    }

    #myModal2 .modal-content {
        width: 90%;
        height: 500px;
        padding: 10px;
        background-position: 81% 60%;
        background-size: 102% 104%;
        background-image: url(../images/sobrenafin/mav-movil.webp);
    }

    #myModal2 .modal-content .left-column {
        margin-left: 2%;
    }

    #myModal2 .modal-content .left-column .titulo {
        font-size: 20px;
        margin-top: -70%;
        width: 288px;
        height: 27px;
        margin-left: 10%;
    }

    #myModal2 .modal-content .left-column .parrafo {
        font-size: 13px;
        width: 272px;
        height: 156px;
        margin-top: 6%;
        margin-left: 10%;
    }

    #myModal2 .modal-content .right-column {
        width: 160px;
        height: 45px;
        margin-right: -109%;
        margin-left: -53%;
        margin-block-end: -13%;
    }

    .modal-esfuerzo .modal-content {
        width: 90%;
        height: 298px;
    }

    /* .modal-esfuerzo .modal-content .imagen {
        height: 300px;
        margin-left: -10px;
        margin-top: -3%;
    } */

    .modal-esfuerzo .modal-content .imagen {
        height: 300px;
        margin-left: -10px;
        margin-top: -3%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-position-x: 30%;
    }

    .modal-esfuerzo .modal-content .texto {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .modal-esfuerzo .modal-content .texto .titulo {
        font-size: 15px;
        margin-top: 5%;
        width: 132px;
        height: 50px;
        margin-left: 0%;
    }

    .modal-esfuerzo .modal-content .texto .descripcion {
        font-size: 12px;
        margin-top: 5%;
        width: 169px;
        margin-left: 0%;
        height: 186px;
    }
}