/* MAQUETACION 'FIRST MOBIL' */

/* tabletas */
@media (min-width: 768px) and (max-width: 1199px)  {

    .max-w,
    .top-bar {

    }

    /***************************************************
    * fonts MBL - H1 H2 H3 - textos
    ***************************************************/
   


 

    /***************************************************
    * botones 
    ***************************************************/
    .mbl-btn-primario {}

    a.mbl-btn-secundario {}

    a.mbl-btn-secundario label {}
    
    /***************************************************
    * HEADER
    ***************************************************/
   
    header .seccionIcons{
        display: flex !important;
    }
/* 
    header .offcanvas {
        position: fixed;
        bottom: 0;
        z-index: var(--bs-offcanvas-zindex);
        display: flex;
        flex-direction: column;
        max-width: 100%;
        color: var(--bs-offcanvas-color);
        visibility: hidden;
        background-color: var(--bs-offcanvas-bg);
        background-clip: padding-box;
        outline: 0;
        transition: var(--bs-offcanvas-transition);
    }

    header .offcanvas.offcanvas-end {
        top: 0;
        right: 0;
        width: var(--bs-offcanvas-width);
        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateX(100%);
    } */

    header .seccionIcons #mbl-menu-mv {
        /* display: none;  */
    }

    header #navbarsMBL{
        display: none !important;
    }

    #header {
        /* height: 80px;
        margin: 0 auto; */
    }

    header #navbarsMBL {
        /* display: none !important; */
    }
    header #open-menu {
        /* display: block !important; */
    }

    header #offcanvasDarkNavbar{
        /* display: none !important; */
    }
    /***************************************************
    * HOME - MOBILITY CENTRO 
    ***************************************************/
    #home-mobility-centro .contenedorDatos {
        /* max-width: 640px; */
    }

    #home-mobility-centro .contButton {
        /* padding-top: 100px;
        width: 241px; */
    }

   
    /***************************************************
    * HOME - ( DESTACADOS  ) 
    **************************************************/
    #home-destacados .contSecciones {

        padding-bottom: 32px;
    }

    #home-destacados .contSecciones .seccion1 {
        /* width: 70%; */
    }

    #home-destacados .contSecciones .seccion2 {
        /* width: 30%; */
    }

    #home-destacados .contSecciones .seccion2 #verTodosDetacados {
        /* width: 200px;
        height: 58px;
        float: right; */
    }
   
    .contSeccionSwiper .mySwiper .swiper-button-next,
    .contSeccionSwiper .mySwiper .swiper-button-prev {
        /* background-color: white;
        background-color: rgba(255, 255, 255, 0.5);
        right: 10px;
        padding: 20px;
        color: grey !important;
        fill: grey !important;
        stroke: grey !important;
        border-radius: 50%;
        box-shadow: 0 0 10px 5px #48529944; */
    }

    .swiper-button-prev:after,
    .swiper-button-next:after {
        /* font-size: 24px !important;
        display: block !important; */
    }

    /***************************************************
    * HOME - ENCUENTRA VEHICULO 
    ***************************************************/


    /***************************************************
    * HOME - VENDER 
    ***************************************************/


    /**************************************************
    * HOME - ASI HABLAN DE MBL  
    ***************************************************/


    /***************************************************
    * HOME - ( POPULAREs  ) 
    **************************************************/


    /***************************************************
    * HOME - SOBRE NOSOTROS CIFRAS 
    ***************************************************/



    /***************************************************
    * HOME - SOBRE NOSOTROS  
    ***************************************************/
    .seccion2 img{
        /* display: none; */
    }


    /***************************************************
    * FOOTER 
    ***************************************************/



    /***************************************************
    * CONTACTO  
    ***************************************************/
    .container-contacto form .col-md-6 {padding: 0 28px;}
    .container-contacto form .col-md-6.odd {padding-left: 0;}
    .container-contacto form .col-md-6.even {padding-right: 0;}
    .container-contacto .mbl-text-subtitulo {width: 100%; max-width: 800px;}
    .container-contacto .container-desplegable .container-texto {display: flex; cursor: pointer;}
    .container-contacto .container-desplegable .container-texto .texto {margin: auto 0;}
    .container-contacto form {display: flex; flex-wrap: wrap;}
    .container-contacto .max-w {padding: 0px 64px;}
    .container-contacto .max-w.padding-mbl {padding-bottom: 0;}
    
    .container-vender form .col-md-6 {padding: 0 28px;}
    .container-vender form .col-md-6.odd {padding-left: 0;}
    .container-vender form .col-md-6.even {padding-right: 0;}
    .container-vender form .col-md-6.cambio-container .col-md-6 {padding: 0;}
    .container-vender .mbl-text-subtitulo {width: 100%; max-width: 800px;}
    .container-vender .container-desplegable .container-texto {display: flex; cursor: pointer;}
    .container-vender .container-desplegable .container-texto .texto {margin: auto 0;}
    .container-vender form {display: flex; flex-wrap: wrap;}
    .container-vender .max-w {padding: 0px 64px;}
    .container-vender .max-w.padding-mbl {padding-bottom: 0;}

    
    .container-nosotros .container-part-3 .container-img {height: 375px;}

    /* modal me interesa */
    #modalMeInteresa form .container-form {
        display: flex;
        flex-wrap: wrap;
    }
    #modalMeInteresa form .col-xs-12.col-sm-12.col-md-6.col-xl-6,
    #modalMeInteresa form .col-xs-12.textarea-container,
    #modalMeInteresa form .col-xs-12.checkbox-container, 
    #modalMeInteresa form .col-xs-12.sumbit-container {
        padding: 0 1rem;
    }
    #modalMeInteresa .modal-body {
        padding: 1rem 0;
    }
    #modalMeInteresa .modal-dialog {
        width: 100%;
        max-width: 750px;
    }
    #modalMeInteresa .modal-header .btn-close {right: 32px;}

    .max-w {padding: 0 65px;}

    #ficha-prestaciones #container_velociad_maxima, 
    #ficha-prestaciones #container_km_segundos, 
    #ficha-prestaciones #container_consumo_medio, 
    #ficha-prestaciones #container_potencia {width: calc(25% - 30px);}
    #ficha-prestaciones .grafica .cont_texto {width: 100%;}
    #ficha-prestaciones .semi-circulo {height: 85px;}
    #ficha-beneficios {margin-top: 100px;}
    #ficha-beneficios .card {width: calc(50% - 30px);}
    #ficha-beneficios .content-cards {justify-content: space-between;}
    #home-encuentra-vehiculo .contBloques div {max-width: unset;}
    #ficha-relacionados {position: relative;}
    #ficha-relacionados .seccion2 {
        width: fit-content;
        position: absolute;
        top: 45px;
        right: 65px;
    }
    #ficha-relacionados .seccion2 button {
        padding: 0 40px;
    }
    #home-encuentra-vehiculo .container {padding: 64px 65px;}
    .footer1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    footer .seccion {
        padding-top: 50px;
        width: calc(50% - 20px);
    }
    .listado {justify-content: space-between;} /* esto */
    #contenedor-listado-coches .contenedor-resultados .listado.resultados .card {
        width: calc(50% - 10px);
    }
}

@media (min-width: 800px) {    
    .container-aviso-legal .container-table {overflow-x: hidden;}
    .container-cookies .container-table {overflow-x: hidden;}
    .container-privacidad .container-table {overflow-x: hidden;}
}

@media(min-width: 992px) and (max-width: 1200px) {
    footer .seccion {
        padding-top: 50px;
        width: calc(33% - 50px);
    }
    #contenedor-listado-coches .contenedor-resultados .listado.resultados .card {
        width: calc(33% - 10px);
    }
}
@media(min-width: 992px) and (max-width: 1680px) {
    #ficha-coche .contenedor-informacion {
        width: 100%;
        height: fit-content;
        display: flex;
    }

    #ficha-envio-vehiculos .swiper-button-prev {
        left: unset !important;
        right: 94px;
        width: 40px !important;
        height: 40px !important;
    }
    .mbl-swiper-button-estilo:after {font-size: 17px !important;}
    #ficha-envio-vehiculos .swiper-button-next {
        left: unset !important;
        right: 30px;
        width: 40px !important;
        height: 40px !important;
    }
    #ficha-envio-vehiculos .contenedor-carousel {height: fit-content;}
    #ficha-envio-vehiculos .contenedor-img {margin-top: 20px;}
    #ficha-envio-vehiculos .contenedor-texto p {margin-bottom: 65px;}
    #home-encuentra-vehiculo .contBloques div {max-width: 100%;}
    #ficha-equipamiento-tecnico .contenedor-equipamientoTecnico ul {column-count: 2;}
    #ficha-envio-vehiculos .swiper-slide {display: flex; flex-wrap: wrap;}
    #ficha-envio-vehiculos .swiper-pagination {
        width: fit-content;
        left: unset;
        right: calc(50% - 160px);
    }
    #ficha-envio-vehiculos .contenedor-carousel .contenedorImagen,
    #ficha-envio-vehiculos .contenedor-carousel .contenedor-txt {width: calc(50% - 30px)}
    #ficha-envio-vehiculos .swiper-button-prev, #ficha-envio-vehiculos .swiper-button-next {
        top: unset !important;
        bottom: 7px;
    }
    #ficha-envio-vehiculos .swiper {margin-bottom: 100px;}
    #ficha-beneficios .content-cards {justify-content: space-around !important;}
    #ficha-beneficios .card {width: calc(50% - 30px);}
}




/* EXCEPTION destacados y populares home */
@media (min-width: 1024px) and (max-width: 1199px)  {
    #home-destacados .contSecciones,
    #home-populares .contSecciones {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding-bottom: 48px;
    }

    #home-destacados .contSecciones .seccion1,
    #home-populares .contSecciones .seccion1 {
        width: 70%;
    }

    #home-destacados .contSecciones .seccion2,
    #home-populares .contSecciones .seccion2 {
        width: 30%;
    }
    

    #home-destacados .contSecciones .seccion2 #verTodosDetacados,
    #home-populares .contSecciones .seccion2 #saberMasPopulares {
        width: 241px;
        height: 58px;
        float: right;
    }

    #home-destacados h2 ,
    #home-populares h2, 
    #home-relacionados h2 
    {
        font-size: 40px;
        letter-spacing: 0;
        line-height: 40px;
    }

    /***************************************************
    * CONTACTO  
    ***************************************************/
    .container-contacto .max-w {padding: 0px 64px;}
    .container-contacto .max-w.padding-mbl {padding-bottom: 0;}
    .container-contacto form .col-md-6 {padding: 0 28px;}
    .container-contacto form .col-md-6.odd {padding-left: 0;}
    .container-contacto form .col-md-6.even {padding-right: 0;}
    .container-contacto .mbl-text-subtitulo {width: 100%; max-width: 800px;}
    .container-contacto form .mbl-btn-primario {width: 100%; max-width: 241px;}
    .container-contacto .container-desplegable .container-texto {display: flex; cursor: pointer;}
    .container-contacto .container-desplegable .container-texto .texto {margin: auto 0;}
    .container-contacto .container-otros-medios {padding: 0 30px;}
    .container-contacto form {display: flex; flex-wrap: wrap;}
    /***************************************************
    * VENDER  
    ***************************************************/
    .container-vender .max-w {padding: 0px 64px;}
    .container-vender .max-w.padding-mbl {padding-bottom: 0;}
    .container-vender form .col-md-6 {padding: 0 28px;}
    .container-vender form .col-md-6.odd {padding-left: 0;}
    .container-vender form .col-md-6.even {padding-right: 0;}
    .container-vender form .col-md-6.cambio-container .col-md-6 {padding: 0;}
    .container-vender .mbl-text-subtitulo {width: 100%; max-width: 800px;}
    .container-vender form .mbl-btn-primario {width: 100%; max-width: 241px;}
    .container-vender .container-desplegable .container-texto {display: flex; cursor: pointer;}
    .container-vender .container-desplegable .container-texto .texto {margin: auto 0;}
    .container-vender .container-otros-medios {padding: 0 30px;}
    .container-vender form {display: flex; flex-wrap: wrap;}
    /***************************************************
    * SOBRE NOSOTROS  
    ***************************************************/
    .container-nosotros .container-part-1 {justify-content: space-between;}
    .container-nosotros .container-part-1 .container-img {
        width: calc(50% - 25px);
        margin: 0;
        height: auto;
    }
    .container-nosotros .container-part-1 .container-part-1-1 {
        order: 1;
        width: calc(50% - 25px);
    }
    .container-nosotros .container-part-2 {padding-top: 80px;}
    .container-nosotros .container-part-2 > .col-xs-12 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .container-nosotros .container-part-2 .casillas {width: calc(50% - 8px);}
    .container-nosotros .container-part-3 .container-img {height: 435px;}
    #ficha-prestaciones .semi-circulo {height: 110px;}
}

@media (min-width: 1100px) {
    #contenedor-listado-coches .contenedor-resultados .listado.resultados {
        /* column-gap: 45px !important; */
    }
    #modalMeInteresa .modal-header .btn-close {right: 32px;}
}
@media(min-width: 768px) {
    .swiperUbicaciones .swiper-wrapper {flex-wrap: wrap;}
    .swiperUbicaciones .swiper-wrapper .swiper-slide {width: 25%; padding: 15px;}
    .swiperUbicaciones .swiper-button-prev,
    .swiperUbicaciones .swiper-button-next {display: none;}
    #home-mobility-centro.cabecera-dk {display: block;}
    #home-mobility-centro.cabecera-mbl {display: none;}
}
@media(max-width: 1500px) {
    .swiperUbicaciones .swiper-wrapper .swiper-slide {width: 33%; padding: 15px;}
}
@media(max-width: 992px) {
    .swiperUbicaciones .swiper-wrapper .swiper-slide {width: 50%; padding: 15px;}
}
@media(max-width: 767px) {
    .swiperUbicaciones .swiper-wrapper .swiper-slide {width: 100%;}
}