/* Estilos en linea de test-drive.php (original) */


@font-face {
            font-family: "MBCorpo Text";
            src: url("/fonts/MBCorpoSText-Regular-Web.woff2");
        }

        @font-face {
            font-family: "MBCorpo Title";
            src: url("/fonts/mbcorpoatitlecond-regular-webfont.woff2");
        }



        .item-bg-wrapper {
            height: calc(100vh - 200px);
            background-repeat: no-repeat;
            background-position: top center;
            background-size: cover;
        }

        @media (max-width: 600px) {
            .item-bg-wrapper {
                height: 185px;
            }
        }
    

            .container-our-models2 {
                margin: 0 125px;
            }

            .content-models {
                display: flex;
            }

            .model-vehicle {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                max-width: 355px;
                gap: 45px;

            }

            .row-card-model {
                display: flex;
                flex-wrap: wrap;
                margin-top: 15px;
                gap: 30px;
            }

            .row-card-model h2 {            
                font-family: 'MBCorpo Title';
                font-size: 28px;
                margin-top: 2px;
                margin-bottom: 2px;
                color: #000;
                font-style: normal;
                font-weight: 400;
            }

            .row-card-model img {
                width: 100%;
                max-width: 300px;
                height: auto;
                margin: auto;
            }

            .box-models {
                flex: 0 0 75%;
                max-width: 75%;
                padding-left: 25px;
            }

            .bar-models-filters {
                padding-top: 33px;
                flex: 0 0 25%;
                max-width: 25%;
                border-right: 1px solid #E7E8E7;
            }

            .icono-filtro-modelos{
                width: 40px!important;
                margin-inline-end: 10px;
                fill: #333;
            }      

            .select-hatchback:hover {
                color: #696969;
            }

            .select-hatchback:hover .icono-filtro-modelos path, .select-sedan:hover .icono-filtro-modelos path, .select-suv:hover .icono-filtro-modelos path,.select-coupe:hover .icono-filtro-modelos path{
                fill: #696969;
            }
            .select-hatchback.active:hover .icono-filtro-modelos path, .select-sedan.active:hover .icono-filtro-modelos path, .select-suv.active:hover .icono-filtro-modelos path,.select-coupe.active:hover .icono-filtro-modelos path{
                fill: #0078d6 !important;
            }

            .bar-models-filters li {
                list-style: none;
                padding: 12px 2px;
                cursor: pointer;
                font-family: 'MBCorpo Text';
            }

            .bar-models-filters li.active{
                color: #0078d6!important;
            }

            .bar-models-filters li.active{
                color: #0078d6!important;
            }

            .bar-models-filters li.active .icono-filtro-modelos{
                fill: #0078d6!important;
            }


            .title-model {
                border-bottom: 1px solid #E7E8E7;
            }

            .title-model h2 {
                font-family: 'MBCorpo Title';
                padding: 16px 0;
                margin: 0px;
                color: #767676;
                font-size: 20px;
                font-style: normal;
                font-weight: 400;
                line-height: 1.5rem;                
            }

            .button-action {
                display: none;
                background-color: #0078d6;
                border: 1px solid #0078d6;
                color: #fff;
                outline: none;
                -webkit-font-smoothing: antialiased;
                border-radius: 2px;
                font-style: normal;
                font-weight: 700;
                letter-spacing: .025em;
                line-height: 1;
                width: 95%;
                padding: 10px;
                transition: background-color .3s ease-in-out;
                font-family: 'MBCorpo Text';
            }

            .button-action:hover {
                background: #014880 !important;
            }

            .size-space-button {
                display: flex;
                width: 100%;
                height: 45px;
                justify-content: center;
                align-items: center;
            }

            .box-models>div {
                display: none;
            }

            .box-models>div.active {
                display: block;
            }

            .bottons-filters {
                display: flex;
            }

            .bottons-filters button {
                background: #fff;
                color: #000;
                padding: 12px 20px;
                border: 1px solid #bbb;
                font-family: 'MBCorpo Title';
                font-size: 16px;
                padding: 18px 20px;
                margin: 0px;
            }

            .bottons-filters-top-active {
                background: #000 !important;
                color: #fff;
            }

            .selected {
                background-color: #262626 !important;
                color: #fff !important;
            }

            .title-models h1 {
                font-family: 'MBCorpo Title';
                font-style: normal;
                font-weight: 400;
                line-height: 3.75rem;
                color: #333;
                font-size: 48px;
            }
            .img-default{
                display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                transition: opacity .3s ease-out;
                opacity: 1;
                text-align: center;
            }
            .img-hover{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                transition: opacity .3s ease-out;
                opacity: 0;
                text-align: center;
            }
            .model-vehicle:hover .img-default {
            opacity: 0;}

            .model-vehicle:hover .img-hover {
                opacity: 1;
            }
            .imagen-container{
                max-width: 100%;
                min-width: 100%;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                max-height: 160px;
                min-height: 160px;
                overflow: hidden;
                margin-top: auto;
            }
            .container-step{
                display: flex;                
                justify-content: center;
                margin-top: 50px;
                margin-bottom: 30px;
            }
            .row-step{
                display: flex;
                 align-items: center;
                 padding-right: 25px;
                 padding-bottom: 10px;
                 border-bottom: 5px solid #B8BABD;
            }
            .row-step h2{
                color: #323232 !important;
                font-family: 'MBCorpo Text';
                font-size: 18px;
                margin: 0;
            }
            .active-step{
            border-bottom: 5px solid #0078D6;
            }
            .vehicle{
                padding: 0px !important;
            }

            .navporid {
                border-bottom: none!important;
            }
            .form-check .text-justify{
                    margin-left: 25px;
            }

            .bottons-filters-mobile{
                display: none;
            }
            .bottons-filters-mobile select{                
                padding: 12px 16px;
                color: #333;
                font-family: 'MBCorpo Text';
                font-size: 18px;
                height: 49px;
            }

            @media (max-width: 600px) {
                .navporid {
                    width: 100% !important;
                }
            }
        
            @media only screen and (max-width: 986px) {

                .bottons-filters{
                    display: none !important;
                }

                .bottons-filters-mobile{
                    display: block !important;
                }

                .container-our-models2{
                    margin: 0 20px;
                } 
                .bar-models-filters{
                    display: none;
                }

                .box-models{
                    flex:auto;
                    max-width: fit-content;
                    padding-left: initial;
                }
                .row-step{
                    width: 33.333%;
                    flex-direction: column;   
                    text-align: center;
                    padding-right: initial;
                }
                .row-step h2{
                    font-size: 14px;                   
                }
                .content-models{
                    display: block;
                }
                .box-models{
                    width: 100% !important;
                    max-width: initial;
                }
            }
        
.row-size { max-width: 70.5rem !important; }