﻿#automotivelist {/* width: 100%; */}

.banner-header { position: relative; }
.banner-header-title { position: absolute; bottom: 0;z-index: 5; width: 100%;margin-bottom: -40px;background: #252525;}
    .banner-header-title > div.title { padding: 25px 35px;font-size: 28px; color: #fff; font-weight: bold; position: relative;}
        .banner-header-title > div.title > span { position: absolute; bottom: 20px; right: 35px; color: #E2A307;font-size: 24px; }

.automotive #autoheader {text-align: center;padding: 35px 0 15px 0;font-size: 22px;color: #252525;border-bottom: 1px #0F366D solid;}
.automotive #autofilter { text-align: center; padding: 0; position: relative; }
    .automotive #autofilter > div.styled-select { width: 332px; background: transparent url(/images/custom/select-arrow.jpg) no-repeat right 12px; margin: auto; }
    .automotive #autofilter > div.styled-select > select { /*font-size: 28px; width: 360px; font-weight: bold; text-transform: uppercase; background: transparent; padding: 5px; line-height: 1; border: 0; border-radius: 0; -webkit-appearance: none;  outline: 0; margin: 0;*/ }
    .automotive #autofilter > div.styled-select select>option:hover { background-color: red; }


    .automotive #autofilter span { position: absolute; right: 0; bottom: 0; font-size: 14px; font-weight: bold; }
    .automotive #autofilter span > .styled-select { width: 82px; background: transparent url(/images/custom/select-orderby.png) no-repeat right 2px; display: inline-block; vertical-align: middle; }
    .automotive #autofilter span > .styled-select > select { font-size: 14px; width: 110px; font-weight: bold; text-transform: uppercase; background: transparent; padding: 5px; line-height: 1; border: 0; border-radius: 0; -webkit-appearance: none;  outline: 0; margin: 0; }

    .automotive #autofilter > div { display: inline-block; width: 80px; height: 80px; }
        .automotive #autofilter > div img { max-height: 100%; max-width: 100%; opacity: 0.3; filter: alpha(opacity=30); cursor: pointer; }
            .automotive #autofilter > div img:hover, .automotive #autofilter > div img.active { opacity: 1; filter: alpha(opacity=100) }


.automotive .vehicle { display: inline-block; width: 33.33%; vertical-align: top; }
.automotive .vehicle > div { padding: 16px 8px ;}
    .automotive .vehicle > div > div img { width: 100%; }
    .automotive .vehicle > div > div { position: relative; cursor: pointer; }
        .automotive .vehicle > div > div > div { position: absolute;bottom: -41px; background: #252525;height: 43px;width: 100%;}
            .automotive .vehicle > div > div > div > div { color: #fff; padding: 1px 10px; position: relative; font-size: 14px; font-weight: bold; }
                .automotive .vehicle > div > div > div > div div {max-width: 75%;}
                .automotive .vehicle > div > div > div > div span { position: absolute; right: 10px; top: 14px; font-size: 16px; text-align: right; color: #F4A900;}

.automotive-detail h2 { font-size: 18px; }
.automotive-detail .form > .row > div { padding: 4px 5px 2px 5px; display: inline-block; }
.automotive-detail .form .caption { width: 150px;  }

.automotive-detail .options .form > .row > div { padding: 2px 5px; }

.automotive-detail .photos > div > div {display: inline-block;padding: 0 10px 10px 0;position: relative;width: 49%;}
    .automotive-detail .photos > div > div:hover a img { opacity: 0.45; }
    .automotive-detail .photos > div > div:hover span { display: block; width: 100%; height: 100%; background: transparent url('/images/custom/zoom.png') no-repeat center center; top: 0; left: 0; }
.automotive-detail .photos img {cursor: pointer;/* max-width: 150px; */}
    .automotive-detail .photos span { position: absolute; display: none; }

.automotive-detail .auto-option { display: inline-block; width: 40%; padding-left: 10px; padding-top: 4px; }
.automotive-detail .options-space { height: 20px; }
.automotive-detail .form textarea { font-size: 10px; border: none; -webkit-box-shadow: none; box-shadow: none; border-bottom: #ccc 1px solid; border-radius: 0; }
    .automotive-detail .form textarea.invalid { border-bottom: red 1px solid; }

.select2-container { display: block; }
    .select2-container .select2-choice { border: none; background-color: transparent; text-align: right; background-image: none; }
.automotive #autofilter span { border: none; background-color: transparent; }
    .select2-container .select2-choice .select2-arrow b { background: transparent url(/images/custom/select-arrow.jpg) no-repeat right 12px; }
.automotive #autofilter span.select2-chosen { right: auto; left: 0; font-size: 28px; font-weight: bold; text-transform: uppercase; color: #000; }
.select2-container, .select2-drop, .select2-search, .select2-search input { border: none; }
    .select2-container .select2-choice .select2-arrow { background-image: none; }
    .select2-container .select2-choice .select2-arrow b { background-image: none; }
.select2-results .select2-highlighted { background-color: #C49009; }

.select2-drop.select2-drop-above, .select2-container-active .select2-choice,
.select2-container-active .select2-choices, .select2-dropdown-open .select2-choice,
.select2-container-multi.select2-container-active .select2-choices,
.select2-container-multi .select2-choices .select2-search-field input,
.select2-container-multi .select2-choices .select2-search-choice { box-shadow: none; }

.automotive #autofilter span > .styled-select span.select2-chosen { font-size: 16px; }

.banner-header { cursor: pointer; }

.swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url("/images/automotive/arrow.png") !important; }
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url("/images/automotive/arrow-right.png") !important; }

#vehiclecontactform {margin-top: 30px;background-color: #365f91;padding: 8px;}
    #vehiclecontactform h2 { color: #E2A307; }
    #vehiclecontactform input[type=submit], 
    #vehiclecontactform .flexbutton,
    #share input[type=submit] { background-color: #E2A307; color: #252525; }
    #vehiclecontactform .caption { color: #fff; }
#share { color: #fff; display: none; }
    #share > div:first-child {/* background-color: #252525; */}
        #share > div:first-child > div { padding: 8px; }

.automotive-detail .socialmedialist { margin-top: 30px; margin-bottom: 15px; }
    .automotive-detail .socialmedialist a.socialmedia { margin-right: 15px; cursor: pointer; }

.automotive-detail input[type=text], #share input[type=text] { padding: 2px 8px; }

.popup { -webkit-box-shadow: 3px 5px 10px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 3px 5px 10px 0px rgba(50, 50, 50, 0.75); box-shadow: 3px 5px 10px 0px rgba(50, 50, 50, 0.75); }

@media (max-width: 5000px) and (min-width: 1600px) {
    .banner-header-title > div.title { font-size: 28px; padding: 24px 35px; }

    /* list = 5 in a row */
    .automotive .vehicle {display: inline-block;width: 33.3%;vertical-align: top;}
    .automotive .vehicle > div {padding: 16px 8px;}

}

@media (max-width: 1600px) and (min-width: 1200px) {
    /* list = 4 in a row */
    .automotive .vehicle {display: inline-block;width: 33.33%;vertical-align: top;}
  .automotive .vehicle > div { padding: 16px 8px 16px 8px; }
    .banner-header-title {margin-bottom:-45px;}
}

@media (max-width: 1200px) and (min-width: 979px) {
    .banner-header-title > div.title { font-size: 20px; padding: 22px 35px; }

    /* list = 4 in a row */
    .automotive .vehicle {display: inline-block;width: 50%;vertical-align: top;}
    .automotive .vehicle > div { padding: 16px 8px 16px 8px; }
     .banner-header-title {margin-bottom:-46px;}
}

@media (max-width: 979px) and (min-width: 768px) {
    .banner-header-title > div.title {font-size: 16px;padding: 20px 35px;margin-top: AUTO;}
    .banner-header-title > div.title > span { font-size: 18px; }
    .automotive .vehicle > div > div > div > div { font-size: 20px; }
        .automotive .vehicle > div > div > div > div span { font-size: 14px; }

    .automotive .vehicle { display: inline-block; width: 50%; vertical-align: top; }
    .banner-header-title {margin-bottom:-46px;}

    /* list = 3 in a row */
}

@media (max-width: 767px) {
    .banner-header {/* display: none; */}
    .banner-header-title > div.title {font-size: 15px;height: 70px;padding: 10px 20px;}
    .automotive-detail h2 { padding-left: 10px; }
    .automotive .vehicle { width: 100%; }
    .automotive .vehicle:nth-child(n) > div { padding-left: 0; padding-right: 0;padding-top: 30px;padding-bottom: 30px;}
    .automotive #autofilter span { position: relative; }
    .automotive-detail .photos > div > div { display: block; padding: 5px 0; }
    .automotive-detail .photos img { cursor: pointer; max-width: 100%; }
    .automotive-detail .photos > div > div:hover a img { opacity: 1; }
    .automotive-detail .photos > div > div:hover span { background-image: none; }
    .banner-header-title {margin-bottom: -70px;}
    .swiper-slide {width:100% !important;}
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev{display:none !important;}
    .swiper-button-prev, .swiper-container-rtl .swiper-button-prev{display:none !important;}
    /* list = 1 in a row */
}

@media (max-width: 420px) 
{
    .automotive-detail .form > .row > div {/* max-width: 150px; */}
}