/*  DS  */
/*!
 * Base Bootstrap 
 * Componente Nombre: DS
 * Autor: DEX360
 * Copyright: DEX360
 */

/*  DS - INDICE  */

/*  00. general                                               */
/*  01. .selector-autos-ds                                    */
/*  02. #botones-container                                    */
/*  03. .home-links                                           */
/*  04. .dexctzusd_menu_header                                */
/*  05. .page-autos-ds                                        */
/*  10. RESPONSIVE                                            */


/* 00. general  
--------------------------------------------------------------*/
.ds .ds-title-model {
    display: block !important;
    position: relative;
}

.ds .ds-title-model:after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 1px;
    width: 10%;
    height: 2px;
    background-color: #000;
}

.ds #versiones-carousel-container .minititle-separator.mt-0,
.ds .auto-model-title,
.ds #versiones-carousel-container .minititle-separator:before,
.ds .page-vermodelo--titulo,
.ds #botones-container a .fas {
    display: none !important;
}

.ds .ds-model-details-header {
    display: flex !important;
    flex-direction: column-reverse;
}

.ds #botones-fixed {
    max-width: 100% !important;
    min-width: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding-right: 30px !important;
    padding-left: 30px !important;
    padding-bottom: .2rem !important;
    padding-top: .2rem !important;
}


.ds .ds-selector-section-title-link {
    display: block !important;
}



/* 01. .selector-autos-ds  
--------------------------------------------------------------*/
.selector-autos-ds {
    background-color: #000 !important;
    display: block !important;
}

.selector-autos-ds .slick-arrow,
.selector-autos-ds .slick-arrow:focus,
.selector-autos-ds .slick-arrow:focus-visible,
.selector-autos-ds .slick-arrow:hover,
.selector-autos-ds .slick-arrow:active,
.selector-autos-ds .slick-arrow:hover,
.selector-autos-ds .slick-arrow:active {
    color: #fff !important;
    font-size: 1.5rem !important;
}

.selector-autos-ds .card-vehicle {
    background: #222222 !important;
    position: relative;
    border: 1px solid #4f4f4f;

}

.selector-autos-ds .section-title {
    color: white !important;
}

.selector-autos-ds .slick-next {
    right: -20px;
    left: auto;
}

.selector-autos-ds .slick-prev {
    left: -20px;
    right: auto;
}

.selector-autos-ds .model-container {
    position: absolute;
    top: 10%;
    text-align: center;
    z-index: 1;
    width: 91%;
}

.selector-autos-ds .card-vehicle .card-vehicle--model {
    color: #d7d7d7;
    margin: 0;
    line-height: 1;
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 800;
    opacity: .3;
    filter: blur(1.1px);
    transition: filter 0.3s ease;
}

.selector-autos-ds .card-vehicle:hover .card-vehicle--model {
    filter: blur(0px);
}

.selector-autos-ds .card-vehicle .card-vehicle--title {
    text-align: center;
    text-transform: uppercase;
    position: relative;
    letter-spacing: -.042em;
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.4em;
    font-weight: 400;
}

.selector-autos-ds .card-vehicle .card-vehicle--figure {
    position: relative;
    z-index: 10;
    margin-top: 2rem;
}

.selector-autos-ds .card-vehicle .card-vehicle--figure img {
    transform: scale(1.4);
    transform-origin: center center;
}

.selector-autos-ds .section-separator .section-separator--left,
.selector-autos-ds .section-separator .section-separator--right {
    border-bottom: 1px solid #4f4f4f;
    border-top: 1px solid #4f4f4f;
}


/* 02. #botones-container  
--------------------------------------------------------------*/
.ds #botones-container {
    background: #000 !important;
    top: 0px !important;
}

.ds #botones-container h3 {
    font-size: 2em !important;
    margin-left: 30px !important;
}

.ds #botones-container a {
    border: none;
    font-size: 1.2em;
    text-transform: inherit;
    font-weight: 600;
    padding: 4px 8px 4px 6px !important;
}

.ds .line-separate {
    display: block !important;
    margin: 0px 0px;
    font-size: 1.4rem;
}


/* 03. home-links  
--------------------------------------------------------------*/
.ds .home-links .card-link {
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0;
}

.ds .home-links .card-link img {
    width: 75%;
    height: auto;
    margin-bottom: 21px;
}

.ds .home-links .card-link h2 {
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 36px;
    line-height: 26px;
    text-transform: uppercase;
}

.ds .home-links .ds-info-card h2 {
    text-align: right;
}

.ds .home-links .ds-info-card p {
    color: #767676;
    font-size: 14px;
    margin: 5px 0px 20px;
    font-weight: 500;
    display: block !important;
    text-align: right;
}

.ds .card-link {
    display: none !important;
}

.ds .ds-info-card {
    display: flex !important;
}

.ds .home-links .row>.col-12:nth-child(2) .card-link-container .ds-info-card {
    flex-direction: row-reverse !important;
}

.ds .home-links .row>.col-12:nth-child(2) .card-link-container .ds-info-card p {
    text-align: left;
}

.ds .home-links .ds-info-card-text {
    padding-top: 0px;
    align-items: end;
    display: flex;
    flex-direction: column !important;
    padding: 0 10%;
}

.ds .home-links .row>.col-12:nth-child(2) .card-link-container .ds-info-card .ds-info-card-text {
    padding-top: 0px;
    align-items: start;
}

/* 04. menu-ds  
--------------------------------------------------------------*/
.dexctzusd_menu_header {
    display: none !important;
}

/* 05. content_autos 
--------------------------------------------------------------*/
.content_autos h2 {
    text-align: left;
    border-bottom: 1px solid #ccc;
    margin: 0px !important;
    padding: 0px 0px 10px;
}



/* 10. RESPONSIVE */
/* - - - - - - - - - - - - - - - - - - - - - - - - */

@media (max-width: 870px) {
    .page-home .selector-autos-ds .card-vehicle .card-vehicle--figure {
        padding: 2rem !important;
    }
}

@media (max-width: 768px) {
    .ds #botones-container h3 {
        margin-left: 0px !important;
    }

    .ds .selector-autos-ds .slick-arrow.slick-next {
        right: -5px;
    }

    .ds .selector-autos-ds .slick-arrow.slick-prev {
        left: -5px;
    }

    .ds .selector-autos-ds h1 {
        padding: 0px 1rem;
    }

    .ds .ds-info-card-text h2 {
        text-align: center !important;
        font-size: 1.4rem;
        width: 100%;
        margin: 1rem 0rem .2rem;
        padding: 0 !important;
    }

    .ds .home-links .ds-info-card p,
    .ds .home-links .row>.col-12:nth-child(2) .card-link-container .ds-info-card p {
        text-align: center !important;
    }

    .ds .home-links .ds-info-card-text {
        align-items: center !important;
        margin-bottom: 2rem;
    }

}