@charset "UTF-8";

/*GENERAL ELEMENTS*/
body{
    font-family: 'Saira', sans-serif;
}
a:hover{
    text-decoration: none;
    color: #676767;
}
.CTA{
    background-color: #FFCB04;
    color: #262626;
    padding: 10px 25px;
    transition: background ease-out .2s;
    border:none;
}
.CTA:hover{
    background-color: #e4b500;
}
.CTA-btn{
    background-color: #FFCB04;
    color: #262626;
    padding: 10px 25px;
    transition: background ease-out .2s;
    width: 100%;
        border:none;
}
.CTA-btn:hover{
    background-color: #e4b500;
}
.grey{
    background-color: #d5d5d5;
}
.grey:hover{
    background-color: #c1c1c1;
}
.m-width{
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
}
/*HEADER*/
header{
    -webkit-box-shadow: 4px 4px 10px 2px rgba(148,148,148,0.52);
    -moz-box-shadow: 4px 4px 10px 2px rgba(148,148,148,0.52);
    box-shadow: 4px 4px 10px 2px rgba(148,148,148,0.52);
    background-color: #fff;

}
header a{
    color: #262626;
    font-weight: 500;
}
header a:hover{
    color: #e4b500;

}
/*FILTER*/
#filter{
    padding-top: 120px;
    background-color: #fff;
       border-right: solid 1px #dedede;
    height: 100%;
    position: fixed;
    width:inherit;
    max-width:400px;
}
#filter .form-control {
    margin-bottom: 15px;
}
.form-outline .form-control~.form-notch .form-notch-leading{
    border-radius: 0;
    border-left: none;
    border-top: none;
}
.form-outline .form-control.active~.form-notch .form-notch-middle, .form-outline .form-control:focus~.form-notch .form-notch-middle{
    border-top: none;
}
.form-outline .form-control~.form-notch .form-notch-trailing{
    border-right: none;
    border-top: none;
        border-radius: 0;
}
.form-outline .form-control:focus~.form-notch .form-notch-leading,.form-outline .form-control:focus~.form-notch .form-notch-middle,.form-outline .form-control:focus~.form-notch .form-notch-trailing{
      border-color: #e4b500;
      border-top: none;
      border-left: none;
      border-right: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.select-arrow{
    color: #8d8d8d;
}
.select-input.focused~.select-arrow{
    color: #e4b500;
}
.range .thumb:after{
    display: none;
   
}
.thumb-active, .range .thumb{
display: none;
}
input[type=range]::-webkit-slider-thumb {
    background: #e4b500;
}
input[type=range]::-moz-range-thumb {
    background: #e4b500;
}
input[type=range]::-ms-thumb {
    background: #e4b500;
}
.range .thumb .thumb-value{
    display: none;
}
#pricevalue{
    position: absolute;
    right: 15px;
    top: 0px;
}
/*OVERVIEW*/
#overview{
    padding-top: 70px;
}
#overview-header{
    margin-top: 50px;
   border-bottom: solid 1px #707070;
   padding-bottom: 10px;
}
#overview-header span{
    font-weight: 600;
}
#overview-header p{
    margin-bottom: 0;
}
.vehicle-inner{
      -webkit-box-shadow: 2px 2px 2px 1px rgba(148,148,148,0.2);
    -moz-box-shadow: 2px 2px 2px 1px rgba(148,148,148,0.2);
    box-shadow: 2px 2px 2px 1px rgba(148,148,148,0.2);
    transition: all ease-out .2s;
}
.vehicle a:hover .vehicle-inner{
     -webkit-box-shadow: 2px 2px 4px 1px rgba(148,148,148,0.3);
    -moz-box-shadow: 2px 2px 4px 1px rgba(148,148,148,0.3);
    box-shadow: 2px 2px 4px 1px rgba(148,148,148,0.3);
}
.vehicle h4{
    margin-bottom:0;
    font-size: 1rem;
    font-weight: 400;
     color: #262626;
}

.vehicle h3{
    font-weight: 600;
     color: #262626;
}

.vehicle-title p{
    margin-bottom: 15px;
    height: 2.2rem;
    font-weight: 400;
    color: #8d8d8d;
}
.vehicle .details{
    border-bottom: solid 1px #d5d5d5;
    border-top: solid 1px #d5d5d5;
    padding-top: 15px;
}
.details p{
        color: #676767;
    font-weight: 500;
}
.vehicle .location{
    border-bottom: solid 1px #d5d5d5;
    padding-top: 15px;
}
.location p{
    color: #676767;
    font-size: 14px;
}
.vehicle .price h4{
    font-size: 30px;
    color: #262626;
    font-weight: 500;
}
.vehicle .price p{
    font-weight: 400;
    color: #676767;
    height: 30px;
    margin-bottom: 0;
    font-weight: 500;
}
/*DETAIL*/
#detail-wrap{
    margin-top: 85px;
}
.button-wrapper p{ 
    margin-bottom: 0;
}
#detail-tabs{
    -webkit-box-shadow: 2px 2px 2px 1px rgba(148,148,148,0.2);
    -moz-box-shadow: 2px 2px 2px 1px rgba(148,148,148,0.2);
    box-shadow: 2px 2px 2px 1px rgba(148,148,148,0.2);
    padding: 30px;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    color: #676767;
    border-bottom-color: #FFCB04;
}
#optionslist{
    column-count: 3;
}
#optionslist li{
    list-style: "- ";
}
.technical i{
    color: #FFCB04;
    font-size: 2.1rem;
}
.technical p{
    margin-bottom: 0;
    font-size: 0.7rem;
    color: #676767;
}
.technical span{
    font-size: 1rem;
    font-weight: 600;
    color: #262626;
}
#cp_logo{
    max-width: 200px;
}
#cp-wrapper{
    -webkit-box-shadow: 2px 2px 2px 1px rgba(148,148,148,0.2);
    -moz-box-shadow: 2px 2px 2px 1px rgba(148,148,148,0.2);
    box-shadow: 2px 2px 2px 1px rgba(148,148,148,0.2);
}
/*BUY SLIDEOUT*/
#buy-slideout{
    position: fixed;
    left: -600px;
    top: 0;
    z-index: 10000;
   height: 100vh;
    max-width: 600px;
    width: 30vw;
    background-color: #fff;  
    transition: all ease-out .5s;
  
}
.active{
    left: 0!important;

}
#buy-close{
    position: absolute;
    right: 20px;
    top: 20px;
    color: #777;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 100001;
    transition: all ease-out .2s;
}
#buy-close:hover{
    color: #fff;

}
#buy-details{
    background-color: #dedede;
    color: #333;
}
#buy-details h3{
font-weight: 400;
    margin-bottom: 0;
}
#buy-details h2{

    margin-bottom: 0;
}
#buy-details p{
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 0;
}
.form-subtitle{
    color: #000;
    margin-top: 15px;
    border-bottom: solid 1px #999;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
#buy-form{
    max-height: 85vh;

}
.form-outline{
    margin-bottom: 10px; 
    margin-top: 10px;
}
.form-check-input[type=checkbox]:checked, .form-check-input[type=checkbox]:checked:focus{
    background-color: #e4b500;
}
.form-check-input:checked, .form-check-input:checked:focus{
    border-color: #e4b500;
}
.form-check-label{
    color: #000;
}
.form-outline .form-control:focus~.form-notch .form-notch-leading, .form-outline .form-control:focus~.form-notch .form-notch-middle, .form-outline .form-control:focus~.form-notch .form-notch-trailing{
    border-color: #e4b500!important;
}
.form-outline .form-control:focus~.form-label{
    color: #e4b500!important;
}
.form-outline .form-control~.form-notch div{
    border-top: none;
}
/*END BUY SLIDEOUT*/

@media only screen and (max-width: 1200px) {
    /*FILTER*/
    #filter{
        max-width:370px;
    }
}
@media only screen and (max-width: 990px) {
#optionslist{
    column-count: 2;
}
}
@media only screen and (max-width: 767.88px) {
    #overview{
        padding-top: 15px;
    }
    #overview-header{
        margin-top: 0;
    }
    #filter-wrap{
        padding: 2rem;
        margin-top: 90px;
    }
#filter{
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #fff;
       border-right: none;
       border-bottom: solid 1px #676767;

    position: relative;
    width:100%;
    max-width: 100%;
   
}
#optionslist{
    column-count: 1;
}
}
@media only screen and (max-width: 575.88px) {

}
@media screen and (orientation:portrait) {

}
@media (hover: none) {

}

@media (pointer: coarse) and (hover: none) {

}
@media print {

}