@media screen and ( max-width : 1205px ) {
    .serviciosLista .servicio { width: 29%; }
    .serviciosLista { justify-content: center; }
}
@media screen and ( max-width : 1150px ) {
    header nav ul li a { font-size: 16px; }
    header nav ul li.hasMenu ul li a { font-size: 14px; }
}
@media screen and ( max-width : 1085px ) {
    .serviceBanner .info .blindTitle { font-size: 45px; }
}
@media screen and ( max-width : 1020px ) {
    header nav ul li { margin-left: 0; }
}
@media screen and ( max-width : 1000px ) {
    .copyright li { width: 31%; margin: 1% }
    .mexicoStats .mexTxt h2 { font-size: 70px; }
    .mexicoStats .mexTxt h2.braile { font-size: 80px; }
    .mexicoStats .mexTxt h2.texto { font-size: 90px; }
    .mexicoStats .info { padding-left: 30px; }
    #trato { background-image: none; padding: 0; }
    #trato .container { flex-direction: column-reverse; }
    #trato .container div { width: 100%;  padding: 0; }
    #trato .container div.title { text-align: center; }
}
@media screen and ( max-width : 950px ) {
    header nav ul { display: none; }
    .mobileMenu { display: block; }
    header img { width: 250px; }
    .boxes .container .recuadros, .boxes .container .txt { width: 100%; }
    .boxes .container { flex-direction: column-reverse; }
    .boxes .container .txt { margin-bottom: 40px; }
    #homeBanner .container .txt a { margin: 50px auto 0; }
    .contacto .info { width: 220px; }
    .contacto form { width: calc(100% - 220px); }
    .serviceBanner .posicion { font-size: 500px; width: 350px; }
    .serviceBanner .info { width: calc(100% - 350px); }
    header nav ul li a { display: block; width: 100%; box-sizing: border-box; }
    .nav {
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 2rem;
    }
    .nav.mobile-menu-open{
        position: absolute;
        top: 0;
        right: 0px;
        background-color: #fff;
        bottom: 0;
        padding: 2rem 0;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
        height: 100%;
        width: 500px;
        max-width: 60%;
        z-index: 11;    }
    .nav ul.mobile-menu-open{
        display: block;
        width: 100%;
    }
    .nav ul.mobile-menu-open li { width: 100%; text-align: center; }
    header nav ul li ul { width: 100%; display: block; }
    .selectores { margin-left: 0; }

    
}
@media screen and ( max-width : 850px ) {
    .serviceBanner .posicion { font-size: 400px; width: 280px; }
    .serviceBanner .info { width: calc(100% - 280px); }
    #listaEstadistica .items .item { width: 500px; font-size: 20px; }
    #listaEstadistica p { text-align: center; }
    .mexicoStats .mexTxt h2 { font-size: 60px; }
    .mexicoStats .mexTxt h2.braile { font-size: 65px; }
    .mexicoStats .mexTxt h2.texto { font-size: 75px; }
}
@media screen and ( max-width : 770px ) {
    .copyright li { width: 48%; margin: 1% }
    #homeBanner .container .txt { text-align: center; }
    .container { padding: 0 15px; box-sizing: border-box; }
    .serviceBanner .posicion { font-size: 180px; width: 125px; line-height: 150px; }
    .serviceBanner .info { width: calc(100% - 125px); }
    .mexicoStats .container { display: block; }
    .mexicoStats .mexTxt h2 { text-align: center; }
    .mexicoStats .info { padding-left: 0; }
    .legislaciones .item { padding: 40px 20px; }

    .navigationContent {
        flex-direction: column;
    }
}
@media screen and ( max-width : 680px ) {
    .serviciosLista .servicio { width: 46%; }
    .contacto .container { display: block; }
    .contacto .info, .contacto form { width: 100%; }
    #homeBanner .container .txt h1, .pageBanner .container .txt h1 { font-size: 40px; }
    #homeBanner .container .txt p, .pageBanner .container .txt p { font-size: 25px; }
    #homeBanner .container .txt a { font-size: 18px; width: 180px; }
    .serviceBanner { position: relative; }
    .serviceBanner .container { display: block; }
    .serviceBanner .posicion { position: absolute; top: 20px; }
    .serviceBanner .info { width: 100%; }
    .serviceBanner .info .blindTitle { padding-left: 100px; box-sizing: border-box; }
    .serviceBanner[posicion="1"], .serviceBanner[posicion="3"], .serviceBanner[posicion="5"] { background-size: cover; }
    .serviceBanner .info .blindTitle { font-size: 30px; min-height: 115px; }
    #listaEstadistica .items .item { width: 400px; font-size: 18px; }
    #listaEstadistica p { font-size: 25px; }
    .mexicoStats .info p { font-size: 20px; }
    #estadisticasBanner h1 .braile { letter-spacing: -10px; }
    #trato { font-size: 20px; }
    #trato .container div.title { font-size: 25px; }
}
@media screen and ( max-width : 580px ) {
    .sociales li a i { font-size: 20px; }
    .sociales li a span { font-size: 14px; }
    .boxes .container .recuadros .cuadro { width: 98%; }
    #estadisticasBanner .worldTxt h2 { font-size: 45px; }
    #estadisticasBanner .worldTxt h2.texto { font-size: 60px; }
    #estadisticasBanner .worldTxt h2.braile { letter-spacing: -3px; }
    .legislaciones .item { padding: 20px 10px; }
}
@media screen and ( max-width : 550px ) {
    .copyright li { width: 98%; }
    .serviceBanner .info .blindTitle { font-size: 20px; min-height: 52px; }
    .serviceBanner .posicion { font-size: 100px; width: 70px; line-height: 85px; }
    #listaEstadistica .items .item { width: 100%; max-width: initial; }
}
@media screen and ( max-width : 450px ) {
    .sociales li a span { font-size: 12px; }
    .serviciosLista .servicio { width: 96%; }
    #estadisticasBanner .worldTxt h2 { font-size: 35px; }
    #estadisticasBanner .worldTxt h2.texto { font-size: 50px; }
    #estadisticasBanner .worldTxt h2.braile { letter-spacing: -1px; }
    .mexicoStats .mexTxt h2 { font-size: 50px; }
    .mexicoStats .mexTxt h2.braile { font-size: 55px; }
    .mexicoStats .mexTxt h2.texto { font-size: 60px; }
}
@media screen and ( max-width : 370px ) {
    #estadisticasBanner .worldTxt h2 { font-size: 30px; }
    #estadisticasBanner .worldTxt h2.texto { font-size: 45px; }
    #estadisticasBanner .worldTxt h2.braile { letter-spacing: 0; }
}
