
/*Gris claro: #ebebeb
Gris oscuro: #707070
Naranja: #d59c49*/
:root {
    --naranja: #ffa539;
    --amarillo: #ffefa8;
    --gris-claro: #f7f7f7;
    --gris-oscuro: #383838;
    --gris-medio: #5b5b5b;
    --naranja-claro:#f2e1c7;
    --primary-text:#6F6F6F;
}

footer{
    background-color: var(--gris-claro);
}

.maintenance-img{
    background-size: 100%;
    width: 100%;
    height: 400px;
    font-size: 16px;
    background-repeat: no-repeat;
}

.ver-mas{
    color: var(--naranja);
    text-decoration: underline;
}

.ver-mas:hover{
    color: var(--naranja);
}

.add-cart{
    background-color: var(--naranja);
    width: 40px;
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
}

#map {
    height: 600px;
}

.round-arrow{
    cursor: pointer;
    background-color: var(--gris-oscuro);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    border-color: #fff;
    bottom: -10%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-linear-orange{
    background: linear-gradient(180deg, var(--amarillo) , var(--naranja));
    border: none;
}

.bg-linear-orange-90{
    background: linear-gradient(90deg, var(--amarillo) , var(--naranja));
    border: none;
}

.error{
    color: #f44556;
}

.remove-item{
    color: var(--gris-oscuro);
    font-size: 1.2rem;
    cursor: pointer;
}

.text-model{
    color: #333;
    text-decoration: none !important;
    cursor: pointer;
    display: block;
}

.uppercase{
    text-transform: uppercase;
}

.spinnerModal{
    display: flex;
    height: 70vh;
    width: 100%;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.spinner-border{
    font-size: 1.4rem;
    width: 50px;
    height: 50px;
    color: var(--naranja);
}

.text-model:hover{
    color: var(--gris-oscuro);
}

.noUi-connect{
    background-color: var(--naranja) !important;
}

.page-item.active .page-link{
    background-color: var(--naranja) !important;
    border-color: var(--naranja) !important;
    color: var(--gris-claro) !important;
}

.page-link{
    color: var(--gris-oscuro) !important;
}

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
  }

  .wrap    {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

.filter{
    cursor: pointer;
}

.icon-close{
    display: none;
}

.main-title{
    font-size: 2.5rem;
    color: var(--gris-oscuro);
    font-weight: bold;
}

.main-timeline{
    font-family: 'Roboto', sans-serif;
    padding: 20px 0;
    position: relative;
    width: 95%;
}

.main-timeline:after{
    top: auto;
    bottom:15px;
}
.main-timeline .timeline{
    padding: 150px 0;
    margin-top: -30px;
    position: relative;
    width: 100%;
    z-index: -1;
}
.main-timeline .timeline:nth-child(2),
.main-timeline .timeline:nth-child(5){
    padding: 100px 0;
}
.main-timeline .timeline:nth-child(3){
    padding: 110px 0;
}
.main-timeline .timeline:nth-child(4),
.main-timeline .timeline.more-p:nth-child(2){
    padding: 130px 0;
}
.main-timeline .timeline:nth-child(2),
.main-timeline .timeline:nth-child(4){
    width: 70%;
}
.main-timeline .timeline:after{
    content: '';
    height: 100%;
    width: 75%;
    border-radius: 0 100px 100px 0;
    border: 15px solid var(--naranja);
    border-left: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}
.main-timeline .timeline:after{
    right: 12px;
    top: 15px;
}
.main-timeline .timeline-content{
    display:inline-block;
    width: 100%;
}
.main-timeline .timeline:nth-child(2) .timeline-content,
.main-timeline .timeline:nth-child(4) .timeline-content{
    top: -65px;
    position: absolute;
    height: 200px;
    background: #fff;
}
.main-timeline .timeline:nth-child(3) .timeline-content,
.main-timeline .timeline:nth-child(5) .timeline-content{
    top: -65px;
    position: absolute;
    height: 200px;
    background: #fff;
    width: 90%;
    right: -94px;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-year{
    color: var(--gris-oscuro);
    font-size: 2.5rem;
    font-weight: 600;
    display: inline-block;
    transform:translateY(-50%);
    position: absolute;
    top: 50%;
    left: 40%;
}
.main-timeline .timeline:nth-child(2) .timeline-year{
    right: 20%;
    left: auto;
}
.main-timeline .timeline:nth-child(4) .timeline-year{
    right: 0%;
}
.main-timeline .timeline.more-p:nth-child(5) .timeline-year{
    left: 25%;
}
.main-timeline .timeline:nth-child(3) .timeline-year,
.main-timeline .timeline:nth-child(5) .timeline-year{
    left: 26%;
    right: auto;
}

.main-timeline .timeline.more-p:nth-child(3) .timeline-year{
    left: 22%;
}

.main-timeline .content{
    color: var(--gris-oscuro);
    width: 30%;
    padding: 20px;
    display: inline-block;
    float: right;
    background-color: #fff;
    position: absolute;
    top: 27%;
    right: -10%;
}

.main-timeline .timeline:nth-child(2) .content,
.main-timeline .timeline:nth-child(4) .content{
    width: 40%;
}
.main-timeline .timeline:nth-child(3) .content,
.main-timeline .timeline:nth-child(5) .content{
    width: 40%;
}

.main-timeline .timeline:nth-child(2) .content .description,
.main-timeline .timeline:nth-child(4) .content .description{
    text-align: end;
}
.main-timeline .timeline:nth-child(3) .content .description,
.main-timeline .timeline:nth-child(5) .content .description{
    text-align: start;
}
.main-timeline .timeline:nth-child(2) .content .timeline-icon,
.main-timeline .timeline:nth-child(4) .content .timeline-icon{
    text-align: end;
}
.main-timeline .timeline:nth-child(3) .content .timeline-icon,
.main-timeline .timeline:nth-child(5) .content .timeline-icon{
    text-align: start;
}

.main-title.time{
    position: absolute;
    top: -2px;
    left: 13px;
    font-size: 1.5rem !important;
}

.main-timeline .timeline:nth-child(2) .content,
.main-timeline .timeline:nth-child(4) .content{
    left: -10%;
    top: 30px;
    right: auto !important;
}

.main-timeline .title{
    color: var(--gris-oscuro);
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 5px 0;
}
.main-timeline .description{
    font-size: 18px;
    letter-spacing: 1px;
    margin: 0;
}

.main-timeline .timeline:nth-child(even):after{
    left: auto;
    left: 12px;
    border: 15px solid var(--naranja);
    border-right: none;
    border-radius: 100px 0 0 100px;
}

.main-timeline .timeline:nth-child(even) .content{ float: left; }
.main-timeline .timeline:nth-child(3) .content, .main-timeline .timeline:nth-child(5) .content{
    right: -8%;
}
.main-timeline .timeline:nth-child(5n+2):after{ border-color: var(--naranja); }
.main-timeline .timeline:nth-child(5n+3):after{ border-color: var(--naranja); }
.main-timeline .timeline:nth-child(5n+4):after{ border-color: var(--naranja); }
.main-timeline .timeline.b-white:nth-child(5n+4):after{ border-color: #fff !important; }
.main-timeline .timeline:nth-child(5n+5):after{ border-color: #fff; }

.timeline-icon i{
    font-size: 1.6rem;
}
.text-placa{
    background-color: var(--naranja);
    font-weight: bold;
    padding: 10px;
}

.w-md-100{
    width: auto;
}
.contenedor_info{
    position: relative;
}

.cars_container{
    margin-top: 20px;
    margin-bottom: 100px;
    display: flex;
    justify-content: center;
}

.info_check{
    height: 65%;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: -35%;
}

.your-inventory{
    position: relative;
}

.count-inventory{
    right: -4px;
    background-color: #f44556;
    color: #fff;
    padding: 2px 3px 2px 3px ;
    border-radius: 50%;
    font-size: xx-small;
    width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-ver-sm{
    width: 100px;
}

.carousel-control-prev.card-car-interes,
.carousel-control-next.card-car-interes {
    background-color: #e1e1e1;
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}


.whitout-radius{
    border-radius: 0 !important;
}

.fas, .fa-phone{
    color: var(--gris-oscuro);
}

.navbar-light .navbar-toggler {
     color: var(--gris-oscuro);
     border-color: transparent;
}

/*
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='%23FF0000' d='M 0,10 H 20 L 10,0 Z' /></svg>")  repeat-x;
*/
.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    color: var(--gris-oscuro);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23d59c49' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}

.logo-navbar{
    width: 230px;
    height: auto;
}

.logo-footer{
    max-width: 80%;
    width: 200px;
    height: auto;
}
/*h5, h4{
    color: var(--gris-oscuro);
    font-weight: bold;
}*/
label{
    color: var(--primary-text);
    font-size: 1.0em;
    font-weight: bolder;
    letter-spacing: 2px;
}
a[href^='tel']{
    color: var(--gris-oscuro);
}
a[href^='mailto:']{
    color: var(--gris-oscuro);
    font-weight: 400;
}
.redes_sociales{
    color: var(--gris-oscuro);
    font-weight: 700;
}
.fab.fa-whatsapp{
    color: var(--gris-oscuro);
}
.fab.fa-facebook-square{
    color: var(--gris-oscuro);
}
.fab.fa-instagram{
    color: var(--gris-oscuro);
}

.contenedor_info{
    background-color: var(--naranja-claro);
    height: 100%;
}
#filterMenu{
    background-color: var(--gris-medio  );
}
.contenedor_info h5, .contenedor_info h4{
    color: var(--primary-text);
    font-weight: bold;
}

.title_form{
    color: var(--gris-claro);
}
.title{
    color: var(--gris-oscuro);
}

.btn_form{
    background-color: var(--naranja) !important;
}

.btn_form{
    width: 10em;
}
.fa-arrow-right{
    color: var(--gris-claro);
}

.fa-arrow-left{
    color: var(--gris-claro);
}
.nav-link {
    color: var(--primary-text) !important;
}
.navbar ul li{
    padding-right: 50px;
}
.cars_container .align-items-center h5{
    color: var(--gris-oscuro);
    font-weight: bolder !important;

}
.carousel-inner{
    max-width: 100%;
    max-height: 30em
    /*max-height: 50em;
    max-width: 100%;*/
}
.carousel-item img{
    object-fit: cover;
    object-position: 50% 45%;
}
.carousel_title{
    color: var(--gris-claro);
    text-shadow: 2px 4px 3px rgba(0,0,0,0.5);
}
h4.carousel_title{
    font-size:1.5em;
    text-transform: uppercase;
}
h1.carousel_title{
    font-size: 3.0em;
}

.carousel-caption {
    position: absolute;
    right: 15%;
    top: 40%;
    left: 15%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
}

/*
.carousel-item img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 100%;
    max-height: 100%;
}*/

.container-navbar {
    width: 100%;
    margin: 0 auto;
    margin-top: 0px;
    background-color: var(--gris-claro);
    padding: 15px 0 25px 0;
 }

.navbar-items{
    width: 100% !important;
    padding-bottom: 0.7rem;
}

.navbar-content{
    align-items: flex-end;
    display: flex;
    width: 100%;
}

.nav-link.active{
    border-bottom: 2px solid var(--primary-text) !important;
}

.bg-orange{
    background-color: var(--naranja) !important;
}

.bg-black{
    background-color: var(--gris-oscuro) !important;
}

.form-search-home{

}

@media (min-width: 300px) and (max-width: 575px)  {
    .politicas, span{
        font-size: smaller !important;
    }
}

/* No greater than 900px, no less than 400px */
/*@media (max-width:900px) and (min-width:400px) {
    .foo {
        display:none;
    }
}*/

/*BREAKPOINTS BOOSTRAP 5*/

/*X-Small devices (portrait phones, less than 576px)*/

@media (max-width: 575.98px) {
    .info_check{
        height: 37% !important;
        position: absolute !important;
        top: 50% !important;
        left: 0% !important;
        transform: translateY(-50%);
        margin-right: auto !important;
        margin-left: 5%;

    }
    .title_check{
        margin-left: 10%;
    }
    .logo-navbar{
        max-width: none !important;
        height: auto;
    }

    .politicas, span{
        font-size: small;
    }

    .politicas .separador{
       padding: 5px;
    }

    .card-car{
        width: 100% !important;
    }

    .image-card-car{
        width: 200px !important;
        height: 150px !important;
    }

    .pagination{
        font-size: 8px;
    }

    .main-timeline .timeline-icon{
        width: 80px;
        transform:translateY(0);
    }

    .main-timeline .timeline-year{
        font-size: 25px;
        transform:translateY(0);
        top: 65%;
        left: 9%;
    }
    .main-timeline .content{
        width: 68%;
        padding: 10px;
    }
    .main-timeline .title{ font-size: 18px; }
    .main-timeline .timeline:nth-child(even) .timeline-year{
        right: 9%;
    }

    .link-header{
        font-size: 10px;
    }

    .main-timeline {
        width: 100% !important;
    }

    .main-timeline .timeline{
        padding: 125px 0;
    }

    .main-timeline .content{
        width: 40%;
    }

    .main-timeline .timeline-year{
        font-size: 1rem !important;
    }

    .main-timeline .timeline:nth-child(1) .timeline-year{
        top: 30% !important;
        left: 0 !important;
    }

    .main-timeline .timeline:nth-child(2) .timeline-year{
        right: -40% !important;
    }

    .main-timeline .timeline:nth-child(3) .timeline-year, .main-timeline .timeline:nth-child(5) .timeline-year{
        left: -29% !important;
    }

    .main-timeline .timeline:nth-child(4) .timeline-year {
        right: -105%;
    }

    .main-timeline .timeline.more-p:nth-child(5) .timeline-year{
        left: -26% !important;
    }

    .main-timeline .timeline:nth-child(2) .content, .main-timeline .timeline:nth-child(4) .content {
        width: 85% !important;
    }

    .main-timeline .timeline:nth-child(3) .content, .main-timeline .timeline:nth-child(5) .content {
        right: 81px !important;
        width: 53% !important;
    }

    .main-timeline .timeline.more-p:nth-child(3) .timeline-year, .main-timeline .timeline.more-p:nth-child(5) .timeline-year {
        left: -31% !important;
    }

    .main-timeline .timeline:nth-child(4) .timeline-year {
        right: -109% !important;
    }
    .btn-contact{
        width: 100%;
    }
}



/*Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {

    .text-placa{
        margin-top: 30px;
    }

    .main-timeline .timeline{ margin-top: -19px; }
    .main-timeline .timeline:before {
        border-radius: 50px 0 0 50px;
        border-width: 10px;
    }
    .main-timeline .timeline:after {
        height: calc(100% - 18px);
        width: calc(50% - 9px);
        border-width:10px;
    }
    .main-timeline .timeline:nth-child(even):before {
        border-width: 10px;
    }
    .main-timeline .timeline:nth-child(even):after {
        height: calc(100% - 18px);
        width: calc(50% - 9px);
        border-width: 10px;
        top: 9px;
        right: 9px;
    }
    .main-timeline .timeline-year{ font-size: 40px; }
    .maintenance-img div img{
        height: 30px ;
    }
    .maintenance-img div{
        height: 150px !important;
    }

    .maintenance-img div h6{
        font-size: 0.7rem !important;
    }

    .maintenance-img{
        height: 150px !important;
    }

    .main-timeline .timeline:nth-child(3) .timeline-year, .main-timeline .timeline:nth-child(5) .timeline-year {
        left: 19%;
    }

    .main-timeline .timeline:nth-child(3) .content, .main-timeline .timeline:nth-child(5) .content{
        right: 64px !important;
    }

    .main-timeline .timeline:nth-child(3) .timeline-content, .main-timeline .timeline:nth-child(5) .timeline-content {
        width: 90% !important;
        right: -53px !important;
    }

    .main-timeline .timeline:nth-child(3){
        padding: 140px 0;
    }

    .main-timeline .description{
        font-size: 10px;
    }

    .main-timeline .timeline .content .timeline-icon img{
        height: 20px !important;
    }

    .img-car-inventory{
        width: 200px !important;
    }
}

@media (max-width: 901.98px) {
    .main-timeline .timeline.more-p:nth-child(3) .timeline-year, .main-timeline .timeline.more-p:nth-child(5) .timeline-year {
        left: 17%;
    }
}
/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {

    .w-md-100{
        width: 100%;
    }

    .info_check{

    }
    .logo-navbar{
        width: 20vh;
    }
    .info_grupo div{
        text-align: center !important;
    }

    .filter{
        display: block !important;
        cursor: pointer;
    }

    .card-car{
        width: 100%;
    }

    .description-card-car{
        font-size: smaller;
    }

    .cont-inventario{
        padding-left: 0px;
    }

    .filter-menu{
        position: absolute;
        visibility: hidden;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 9999;
        min-width: 100vw;
        min-height: 100vh;
        padding: 0px;
        margin: 0px;
        transition: all 0.5s ease-in-out;
    }

    .filter-menu.active{
        visibility: visible;
        animation: fade 0.7s;
    }

    .filter-menu.inactive{
        animation: fade-out 0.7s;
    }

    @keyframes fade {
        from{transform: translateY(100px); opacity: 0;}
        to {transform: translateY(0px); opacity: 1;}
    }

    @keyframes fade-out {
        from{visibility: visible;opacity: 1;transform: translateY(0px);}
        to {visibility: hidden;opacity: 0;transform: translateY(150px); }
    }

    .form_container{
        min-height: 100vh;
    }

    .overflow-h{
        overflow: hidden;
        position: relative;
    }

    .title-filter{
        position: relative;
    }

    .icon-close{
        display: block;
        color: var(--gris-oscuro);
        position: absolute;
        top: 0;
        left: 0;
        font-size: x-large;
        cursor: pointer;
    }

    .img-car-interes{
        height: auto !important;
    }

    .btn-ver-sm{
        width: 80px;
    }

    #carouselCardDark{
        height: 400px !important;
    }

    .buttons-car-details{
        position: relative !important;
        width: 100% !important;
    }

    .main-timeline{
        width: 90%;
    }

    .main-title.time {
        left: 26px !important;
    }

    .main-timeline .timeline-year{
        font-size: 1.4rem !important;
    }

    #carouselCardDark{
        height: 200px !important;
    }
}

/*Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
    .content-timeline .timeline{
        margin-top: -76px;
    }

    .content-timeline .timeline-desc:before{
        left: -18%;
    }

    .content-timeline .timeline:nth-child(2n) .timeline-desc:before{
        right: -18%;
    }

    .more{
        bottom: 44% !important;
    }

    .navbar-content{
        align-items: start;
    }

    .link-header{
        font-size: 12px;
    }

    .maintenance-img{
        height: 200px;
    }
    .maintenance-img div img{
        height: 30px;
    }

    .main-timeline .timeline:nth-child(2) .content, .main-timeline .timeline:nth-child(4) .content{
        width: 60%;
    }

    .main-timeline .timeline.more-p:nth-child(3) .timeline-year, .main-timeline .timeline.more-p:nth-child(5) .timeline-year {
        left: 25%;
    }

    .main-timeline .content {
        right: 1% !important;
    }

    .main-title.time {
        left: 67px;
    }

    .main-timeline .timeline:nth-child(2) .timeline-year{
        right: 14%;
    }

    .main-timeline .timeline:nth-child(4) .timeline-year {
        right: -9%;
    }

    .main-timeline .timeline:nth-child(3) .timeline-year, .main-timeline .timeline:nth-child(5) .timeline-year{
        left: 22%;
    }

    .main-timeline .timeline:nth-child(3) .timeline-content, .main-timeline .timeline:nth-child(5) .timeline-content{
        width: 85%;
    }

    .title-card-car{
        font-size: 0.7rem !important;
    }

    .sub-title{
        font-size: 0.6rem;
    }

    .img-car-inventory{
        width: 250px;
    }

    .title-inventory{
        font-size: 1.2rem;
    }
    .subtitle-inventory{
        font-size: 1rem;
    }
}

/*X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {
    .maintenance-img{
        height: 300px;
    }
    .maintenance-img div h6{
        font-size: 1rem;
    }

    .main-timeline{
        width: 80%;
    }

    .main-title.time{
        left: 103px;
    }

    .main-timeline .content{
        right: -8%;
    }

    .main-timeline .timeline-year{
        font-size: 1.8rem;
    }

    .main-title.time{
        font-size: 1rem !important;
    }

    .main-timeline .description{
        font-size: 12px !important;
    }
}

@media (max-width: 1399.98px) {
    .carousel-item .img-car-interes {
        height: 16vh;
    }

    .title-card-car{
        font-size: 1rem;
    }

    .img-car-interes{
        width: 150px;
        height: 100px !important;
    }

    .ver-mas{
        font-size: 0.6rem;
    }
}

/*MORE AND UP*/


/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

    .image-card-car{
        width: 300px !important;
        height: 230px !important;
    }
}

@media (min-width: 650px) {

    .image-card-car{
        width: 200px !important;
        height: 150px !important;
    }

    .card-car{
        width: 45% !important;
        margin-bottom: 2rem;
    }

    .container-cards{
        justify-content: space-between;
    }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .card-car{
        width: 100% !important;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
    .card-car{
        width: 420px !important;
    }

    .container-cards{
        justify-content: space-between;
    }
}

@media (min-width: 1800px) {
    .card-car{
        width: 380px !important;
    }

    .container-cards{
        justify-content: space-between;
    }
}


