@import 'https://fonts.googleapis.com/css?family=Lato:300,400|Roboto:300,400|Cairo';


.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}


.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

body { padding-top: 50px;}

.btn{ background: #0080cb; color: white; text-transform: uppercase; text-decoration: none;outline: 0}
.btn:hover{ text-decoration: none; color: white}




h1, h2, h3, h4{ font-family: 'Roboto', sans-serif; font-weight: 300; text-transform: uppercase;}

#quick-nav { background: #eee; padding: 15px 0 }
#quick-nav a{ color: #666; text-align: center; text-transform: uppercase; text-decoration: none; font-size: 12px; position: relative; top: 0;
    -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;}
#quick-nav i{ font-size: 40px; }
#quick-nav a:hover{ color:#ff001e; top: -10px}
#quick-nav a.active{color:#ff001e}



/*layout*/
/*sections*/
.section{ padding: 40px 0; position: relative; }
.section h2{ margin-bottom: 20px}
.section{padding: 60px 0}
.section-header { position: relative; }
.section-header h2{ margin-top: 10px; text-transform: uppercase; }
.section-header i{ font-size: 50px; color: #ff001e;}

.section .bgimage{background-position: 5% center; position: absolute; height: 80%; width: 50%; top: 10%; left: 50%; background-repeat: no-repeat;  background-size: contain;  }
.section.right .bgimage{background-position: 90% center; left: 0}


.section.iconleft .container > .row > div:first-child{ padding-left: 66px }
.section.iconleft  .section-header i{ position: absolute; left: -60px; top: -10px;}


.center-block{ float: none; margin:auto; }

.section ul{ padding: 0; margin: 0; list-style: none; }
.section li{ padding-left: 40px; padding-bottom: 18px; position: relative;}
.section li:before{content: '\e80b'; font-family: "dealersonline";font-style: normal;font-weight: normal;speak: none; display: inline-block;text-decoration:inherit;width: 1em;margin-right: .2em;text-align: center;font-variant: normal;text-transform: none;line-height: 1em;margin-left: .2em; position: absolute;
left: 0px;font-size: 22px;top:-2px;color: #0080cb}



.logos{ margin-top: 40px }
.logos table{ width: 100% }
.logos table td{ vertical-align: middle; text-align: center; }
.logos table td img{ max-width: 90%; }


/*services*/
.services > .section:nth-child(even){ background-color: #f3f3f3 }
.services .section{padding: 100px 0}


#valuation .bgimage{background-image: url(../images/services/valuation.png)}
#auctions .bgimage{background-image: url(../images/services/auction.png); }
#ownauction .bgimage{background-image: url(../images/services/ownauction.png); }
#customer .bgimage{background-image: url(../images/services/customer.png); }
#csi .bgimage{background-image: url(../images/services/csi.png); }
#keys .bgimage{background-image: url(../images/services/keys.png)}
#vehicle .bgimage{background-image: url(../images/services/vehicle.png); background-size: auto; background-position: left center}
#webdesign .bgimage{background-image: url(../images/services/webdesign.png)}
#inspections .bgimage{background-image: url(../images/services/inspections.png);}
#testdrives .bgimage{background-image: url(../images/services/testdrive.png);}
#selfinspect .bgimage{background-image: url(../images/services/selfinspect.png);}


/*form*/
form{ margin-top: 20px }

/*features*/
#features{ background:url(../images/sections/features2.jpg) no-repeat; color: white}
#features .section-heading{ color:white }
#features .section-header i{ color: #68a2e7 }
#features li{ color: #aac7ea}
#features li:before{ color: #68a2e7 }
#features li span{ font-size: 16px; color: white }

/*calltoaction*/
#contact { background:#ddd; padding: 40px 0 }
#contact .section-header{  }
#contact .section-header i{ position: static; color: #0080cb }
#contact form button{ margin-top: 20px }


/*login*/
#login .noaccount{ margin-top: 20px }

#intro{ padding-bottom: 0 }
#intro .logos { border-bottom: 1px solid #ddd ; padding-bottom: 60px}


/*mainslider*/
.mainslider .item{ height: 100%; background-size: cover;}

#footer{ background: #333; color: #bbb; padding: 20px 0 }
#footer i{ color: #ddd }

.copyright{ border-top: 1px solid #555; margin-top: 10px ; padding-top: 10px}



.slidetails { position: relative; display: inline-block; padding: 10px; color: white; top: 300px;}
.slidetails h1, .slidetails h2, .slidetails h3{ margin-top: 0; text-shadow: 0 0px 20px rgba(0,0,0,0.2)}
.slidetails h1{ margin-bottom: 5px }
.slidetails .container{ position: relative; }
.slidetails .cta{ margin-top: 20px }
.slidetails .cta button{ background: #0080cb; color: white; text-transform: uppercase;}

.slidetails h2, .slidetails h1 {  animation-delay: 1s;}
.slidetails a {  animation-delay: 2s;}



.nav li:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }

.navbar-nav>li>a{ margin: 14px 0; padding: 5px 20px; -webkit-transition: all 300ms ease-in-out; border:1px solid #222; text-transform: uppercase; font-size: 12px; margin-right: 5px; cursor: pointer; text-shadow: none;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;}

.navbar-inverse .navbar-nav>li>a{ color: #bbb }
.navbar-nav>li.active > a, .navbar-nav>li:hover > a{ border:1px solid#337ab7; color: #ddd }
.navbar-brand{font-family: 'Cairo', sans-serif;}
.navbar-brand a{color: #ff001e!important; text-decoration: none; font-size: 24px; margin:5px 20px 0 0; display: inline-block;text-shadow: none;}
.navbar-brand a span{ color: #50a4df  }


.dropdown-menu{ background:#101010; border:none; }
.dropdown-menu>li>a{ color: #bbb }
.dropdown-menu>li>a:hover{ background: none; color: #fff }

.usermenu{ background: #000; position: relative; padding-left: 20px }
.usermenu:before{ content: ""; position: absolute; left: 0; top: 0; height: 60px; width: 10000px; background: black }
.usermenu>li>a{ border-color: black; color: red }



/*responsive*/
@media (min-width: 850px){
    .container {  width: 850px;}
}

@media (min-width: 1200px){
.container {    width: 1170px;}
}


@media (max-width: 1024px){
    .mainslider .item{ height: 100%; }
    .services .section, .section{ padding: 50px 0 }

    form{ padding: 0 20px }
}

@media (max-width: 768px){
    .animated {font-size:15px;}
    .mainslider .item{ height: 100% ;}
    .navbar-brand a { font-size: 25px; margin:0px 20px 0px 10px;; }
    .navbar-brand { padding: 15px 0px; }
    .services .section{ padding: 50px 0 }
    .logos table tr:first-child td{ padding-bottom: 20px }
}


@media (max-width: 450px){
    .mainslider .item{ height: 100%;background-size: contain;}
    .carousel-caption {height:100px; display: none;}
    .navbar-brand a { font-size: 20px;margin: 2px 20px 0 0; }
    .navbar-brand { padding: 15px 15px; }

    /*.slidetails{ top: 10px }*/
    .address, .contact{ text-align: center; }
    .contact{ margin-top: 10px }


    h1, h2{ font-size: 20px }

    .navbar-nav>li>a{ margin: 0; border:none; }
    .navbar-nav>li.active > a, .navbar-nav>li:hover > a{ border:none; color: #ddd }

    .usermenu{ padding-left: 0;  }
    .usermenu:before{ display:none; }

    .navbox-text{ font-size: 10px }

    .section-header i{ font-size: 40px }

    .section.iconleft .container > .row > div:first-child{ padding-left: 56px; }
    .section.iconleft  .section-header i{ left: -47px }


}

.valign{ display: inline-block;; vertical-align: middle; float: none }


#LoginForm_username {
    height:inherit;
}

.error {
    color:red !important;
}

/******** Carousel *********/
header .subbar {
    background: #DDDCE2 url(../images/body_bg.jpg) repeat left top;
    font-size: 1.2em;
    font-weight: 700;
    min-height: 122px;
    position: relative;
    text-transform: uppercase;
}
header .subbar #carousel-top .carousel-inner {
    margin: 20px 105px;
    width: 90%;
}
header .subbar #carousel-top .offer {
    position: relative;
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e7e8e7;
    border-radius: 0;
    background: #f1f1f1;
    border: 1px solid #eee;
    float: left;
    margin: 0 10px;
    width: 260px;
    margin-bottom: 25px;
    border: none;
    box-shadow: 0 6px 20px -5px rgba(0,0,0,.55);
}
header .subbar #carousel-top .offer:hover  {
    background: #0080cb;
}
header .subbar #carousel-top .offer:hover span  {
    background: #0080cb;
    color: #fff;
}
header .subbar #carousel-top .offer:hover span strong {
    color: #fff;
}
header .subbar #carousel-top .offer img {
    float: left;
    height: 143px !important;
    object-fit: cover;
}
header .subbar #carousel-top .offer span {
    float: left;
    font-size: 0.6em;
    font-weight: 400;
    margin: 0;
    padding: 20px 5px 12px 5px;
    text-transform: none;
    color: #d3163d;
    font-size: 27px;
    font-weight: 300;
    line-height: 25px;
    text-align: center;
    margin-bottom: 0;
    height:200px
}
header .subbar #carousel-top .offer span strong {
    color: black;
    font-size: 16px;
}
header .subbar #carousel-top .offer span year {
    background-color: #f5f6f5;
    border-radius: 24px;
    color: #939393;
    font-weight: 700;
    font-size: 9px;
    font-size: .5625rem;
    flex-grow: 1;
    margin: 0 2px 12px;
    line-height: 24px;
    text-align: center;
}
header .subbar #carousel-top .carousel-control {
    background: none;
    font-size: 45px;
    color: #8e8e8e;
    left: -10px;
    margin: 19px 0 0 0;
    position: absolute;
    top: 0px;
    z-index: 3;
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
    transition: 0.3s all ease;
    border:none;
}
header .subbar #carousel-top .carousel-control:hover {
    color: #009ddb;
}
header .subbar #carousel-top .carousel-control.next {
    left: 100%;
    margin-left: -32px;
}
.page-header {
    border-bottom: 0px;
    display: table;
    margin: 20px 0px;
    padding: 0px;
    width: 100%;
}
.page-header {
    padding-bottom: 0px !important;
    margin: 0px 0 0px !important;
}
.page-header .page-header-inner .heading {
    display: table-cell;
    width: 1px;
    white-space: nowrap;
}
.page-header .page-header-inner {
    display: table-row;
}
.page-header .page-header-inner .line {
    display: table-cell;
    vertical-align: middle;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
@media handheld, only screen and (max-width: 1200px) {
    header .subbar {
        background: #DDDCE2 url(../images/body_bg.jpg) repeat left top;
        font-size: 1.2em;
        font-weight: 700;
        min-height: 122px;
        position: relative;
        text-transform: uppercase;
    }
    header .subbar #carousel-top .carousel-inner {
        margin: 20px 105px;
        width: 90%;
    }
    header .subbar #carousel-top .offer {
        position: relative;
        display: flex !important;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid #e7e8e7;
        border-radius: 0;
        background: #f1f1f1;
        border: 1px solid #eee;
        float: left;
        margin: 0 30px;
        width: 254px;
        margin-left: auto;
        margin-bottom: 25px;
        border: none;
        box-shadow: 0 6px 20px -5px rgba(0,0,0,.55);
    }
    header .subbar #carousel-top .offer:hover  {
        background: #0080cb;
    }
    header .subbar #carousel-top .offer:hover span  {
        background: #0080cb;
        color: #fff;
    }
    header .subbar #carousel-top .offer:hover span strong {
        color: #fff;
    }
    header .subbar #carousel-top .offer img {
        float: left;
        max-height: 143px;
    }
    header .subbar #carousel-top .offer span {
        color: #292d30;
        float: left;
        font-size: 0.6em;
        font-weight: 400;
        margin: 0;
        padding: 20px 5px 12px 5px;
        text-transform: none;
        color: #d3163d;
        font-size: 27px;
        font-weight: 300;
        text-align: center;
        margin-bottom: 0;
    }
    header .subbar #carousel-top .offer span strong {
        color: black;
        font-size: 16px;
    }
    header .subbar #carousel-top .offer span year {
        background-color: #f5f6f5;
        border-radius: 24px;
        color: #939393;
        font-weight: 700;
        font-size: 9px;
        font-size: .5625rem;
        flex-grow: 1;
        margin: 0 2px 12px;
        line-height: 24px;
        text-align: center;
    }
    header .subbar #carousel-top .carousel-control {
        background: none;
        font-size: 45px;
        color: #8e8e8e;
        left: -10px;
        margin: 19px 0 0 0;
        position: absolute;
        top: 0px;
        z-index: 3;
        -webkit-transition: 0.3s all ease;
        -moz-transition: 0.3s all ease;
        -o-transition: 0.3s all ease;
        -ms-transition: 0.3s all ease;
        transition: 0.3s all ease;
        border:none;
    }
    header .subbar #carousel-top .carousel-control:hover {
        color: #009ddb;
    }
    header .subbar #carousel-top .carousel-control.next {
        left: 100%;
        margin-left: -32px;
    }
}

@media (max-width: 979px) and (min-width: 768px) {
    .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
        width: 729px;
        /* padding-left: 160px; */

    }
}

@media (max-width: 767px){
    .container {
        padding-left: 35px;
    }
}

@media handheld, only screen and (max-width: 992px) {
    header .subbar #carousel-top .offer img {
        float: left;
        max-height: 125px;
    }
    header .subbar #carousel-top .offer {
        width: 223px;
        margin: 10px 10px;
    }
    header .subbar #carousel-top .carousel-inner {
      padding: 0 0px;
      width: 525px;
    }
    header .subbar #carousel-top .carousel-control {
      margin: 70px 0 0 0;
    }
  }

@media handheld, only screen and (max-width: 600px) {
    header .subbar #carousel-top .carousel-inner {
        width: 210px;
    }
}
#footer .credits .copyright {
    color: #000000;
    font-style: italic;
    text-align: center;
    margin-top: 30px;
}

a {
    color: #0088cc;
    text-decoration: none !important;
}

@media (min-width: 1200px) {
    .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
        width: 1170px;
    }
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}