<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900%7COverpass:300,400,600,700,800,900" rel="stylesheet">
<div class="menu-holder">
<div class="menu-wrap flex-row">
<div class="nav-item">
<!-- - - - - - - - - - - - - - Navigation - - - - - - - - - - - - - - - - -->
<button id="responsive-nav-button" class="responsive-nav-button"></button><nav id="main-navigation" class="main-navigation">
<ul id="menu" class="clearfix">
<li class="current dropdown"><a href="#">Home</a>
<!--sub menu-->
<div class="sub-menu-wrap">
<ul>
<li class="current sub"><a href="#">Home Page Layouts</a>
<!--sub menu-->
<div class="sub-menu-wrap sub-menu-inner">
<ul>
<li class="current"><a href="index.html">Auto Dealer 1</a></li>
<li><a href="home_2.html">Auto Dealer 2</a></li>
<li><a href="home_3.html">Auto Directory 1</a></li>
<li><a href="home_4.html">Auto Directory 2</a></li>
</ul>
</div>
</li>
<li class="sub"><a href="#">Header Layouts</a>
<!--sub menu-->
<div class="sub-menu-wrap sub-menu-inner">
<ul>
<li><a href="index.html">Header 1</a></li>
<li><a href="home_2.html">Header 2</a></li>
<li><a href="home_3.html">Header 3</a></li>
<li><a href="home_4.html">Header 4</a></li>
</ul>
</div>
</li>
<li class="sub"><a href="#">Footer Layouts</a>
<!--sub menu-->
<div class="sub-menu-wrap sub-menu-inner">
<ul>
<li><a href="index.html">Footer 1</a></li>
<li><a href="home_2.html">Footer 2</a></li>
<li><a href="home_3.html">Footer 3</a></li>
<li><a href="home_4.html">Footer 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="dropdown has-megamenu"><a href="#">Inventory</a>
<!--sub menu-->
<div class="sub-menu-wrap mega-menu full-width-menu">
<div class="mega-submenu">
<h5>Inventory</h5>
<ul>
<li><a href="cars_grid.html">Grid View</a></li>
<li><a href="cars_list.html">List View</a></li>
<li><a href="cars_single.html">Single Car Page<br>(Classified)</a></li>
<li><a href="cars_single_dealer.html">Single Car Page<br>(Dealership)</a></li>
</ul>
</div>
<div class="mega-submenu">
<h5>By Body Style</h5>
<ul>
<li><a href="#">All</a></li>
<li><a href="#">Sedans</a></li>
<li><a href="#">Coupes</a></li>
<li><a href="#">SUVs</a></li>
<li><a href="#">Crossovers</a></li>
<li><a href="#">Hatchbacks</a></li>
</ul>
</div>
<div class="mega-submenu">
<ul>
<li><a href="#">Hybrids</a></li>
<li><a href="#">Convertibles</a></li>
<li><a href="#">Sports Cars</a></li>
<li><a href="#">Minivan</a></li>
<li><a href="#">Vans</a></li>
<li><a href="#">Luxury Cars</a></li>
</ul>
</div>
<div class="mega-submenu">
<h5>By Make</h5>
<ul>
<li><a href="#">All</a></li>
<li><a href="#">Acura</a></li>
<li><a href="#">Alfa Romeo</a></li>
<li><a href="#">Aston Martin</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">Bentley</a></li>
</ul>
</div>
<div class="mega-submenu">
<ul>
<li><a href="#">BMW</a></li>
<li><a href="#">Buick</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Chevrolet</a></li>
<li><a href="#">Chrysler</a></li>
<li><a href="#">Dodge</a></li>
</ul>
</div>
<div class="mega-submenu">
<ul>
<li><a href="#">Ferrari</a></li>
<li><a href="#">FIAT</a></li>
<li><a href="#">Ford</a></li>
<li><a href="#">Genesis</a></li>
<li><a href="#">GMC</a></li>
<li><a href="#">Honda</a></li>
</ul>
</div>
</div>
</li>
<li class="dropdown has-megamenu"><a href="#">Pages</a>
<!--sub menu-->
<div class="sub-menu-wrap mega-menu">
<div class="mega-submenu">
<h5>Main Pages</h5>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="our_staff.html">Our Staff</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="pricing.html">Pricing</a></li>
</ul>
</div>
<div class="mega-submenu">
<h5>Special Pages</h5>
<ul>
<li><a href="sell_vehicle.html">Sell Your Vehicle</a></li>
<li><a href="compare_vehicle.html">Compare Vehicles</a></li>
<li><a href="car_calculation.html">Car Finance Calculator</a></li>
<li><a href="find_dealer.html">Find a Dealer</a></li>
<li><a href="dealer_page.html">Dealer Page</a></li>
<li><a href="page_404.html">404 Page</a></li>
<li><a href="coming_soon.html">Coming Soon Page</a></li>
</ul>
</div>
<div class="mega-submenu">
<h5>Other Features</h5>
<ul>
<li><a href="shortcodes.html">Shortcodes</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="columns.html">Columns</a></li>
</ul>
</div>
</div>
</li>
<li class="dropdown"><a href="#">Reviews</a>
<!--sub menu-->
<div class="sub-menu-wrap">
<ul>
<li><a href="review_list.html">List View</a></li>
<li><a href="review_single.html">Single Review Post</a></li>
</ul>
</div>
</li>
<li class="dropdown"><a href="elements.html">Gallery</a>
<!--sub menu-->
<div class="sub-menu-wrap">
<ul>
<li><a href="gallery_2_columns.html">2 Columns With Details</a></li>
<li><a href="gallery_3_columns.html">3 Columns</a></li>
</ul>
</div>
</li>
<li class="dropdown"><a href="#">Blog</a>
<!--sub menu-->
<div class="sub-menu-wrap">
<ul>
<li><a href="blog_big_img.html">With Big Images</a></li>
<li><a href="blog_masonry.html">Masonry View</a></li>
<li><a href="blog_single.html">Single Blog Post</a></li>
</ul>
</div>
</li>
<li class="dropdown"><a href="#">Shop</a>
<!--sub menu-->
<div class="sub-menu-wrap">
<ul>
<li class="sub"><a href="#">Category Page</a>
<!--sub menu-->
<div class="sub-menu-wrap sub-menu-inner">
<ul>
<li><a href="shop_front_grid.html">Grid View</a></li>
<li><a href="shop_front_list.html">List View</a></li>
</ul>
</div>
</li>
<li><a href="shop_product_page.html">Product Page</a></li>
<li><a href="shop_cart.html">Cart</a></li>
<li><a href="shop_checkout.html">Checkout</a></li>
<li><a href="shop_account.html">My Account</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<!-- - - - - - - - - - - - - end Navigation - - - - - - - - - - - - - - - -->
</div>
<div class="contact-info-menu">
<div class="contact-info-item">
<div class="flex-row flex-center">
<i class="licon-telephone"></i>
<div class="item-inner">
<span>Call Us Today</span>
<a href="callto:#"><b>800-987-65-43</b></a>
</div>
</div>
</div>
<div class="contact-info-item lang-button">
<div class="flex-row flex-center">
<i class="licon-earth"></i>
<div class="item-inner">
<a href="#">Language</a>
<ul class="dropdown-list">
<li><a href="#">English</a></li>
<li><a href="#">German</a></li>
<li><a href="#">Spanish</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
[class*="flex-row"]{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
[class*="flex-row"]:after{
display: none;
}
[class*="flex-row"] > *{
float: none;
}
[class*="flex-row"].flex-justify{
justify-content: space-between;
}
[class*="flex-row"].flex-center{
align-items: center;
}
.responsive-iframe{
position: relative;
z-index: 1;
height: 0px;
padding-bottom: 56.2%;
}
.responsive-iframe > iframe{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.responsive-iframe.fix-size > iframe{
top: -45%;
height: 180%!important;
}
/* Flex box collumns */
.fx-col-2 > *{
-webkit-flex-basis: 50%;
flex-basis: 50%;
}
.fx-col-3 > *{
-webkit-flex-basis: 33.33333%;
flex-basis: 33.33333%;
}
.fx-col-4 > *{
-webkit-flex-basis: 25%;
flex-basis: 25%;
}
.fx-col-5 > *{
-webkit-flex-basis: 20%;
flex-basis: 20%;
}
.fx-col-6 > *{
-webkit-flex-basis: 16.66666%;
flex-basis: 16.66666%;
}
/* -----------------------------------
5. Header
------------------------------------- */
#header{
position: relative;
top: 0;
z-index: 99;
width: 100%;
background: #fff;
transition: all .35s;
}
#header.header-fixed{
position: absolute;
top: 0;
left: 0;
right: 0;
background: transparent;
}
#header .menu-holder > .menu-wrap{
justify-content: space-between;
}
#header.header-fixed .top-header,
#header.header-fixed .contact-info-menu > *{
border-color: rgba(255,255,255,0.1)!important;
}
#header.header-fixed #main-navigation > ul > li > a{
color: #fff;
}
#header.header-fixed .contact-info-menu .item-inner > a,
#header.header-fixed .contact-info-menu > *.lang-button i{
color: #fff;
font-weight: bold;
letter-spacing: 0.5px;
}
#header.header-fixed .contact-info-menu > * span{
color: #d5d7d8;
font-weight: bold;
}
#header.header-fixed .logo-wrap .logo > img:last-child{
display: none;
}
#header:not(.header-2) .top-header{
padding: 0 0 0 50px;
border-bottom: 2px solid #e2e5e5;
}
#header .top-header{
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.logo{
display: inline-block;
}
.login-btn{
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
background-color: #f2f3f3;
color: #31353c;
font-size: 20px;
line-height: 50px;
border-radius: 50%;
font-family: 'linearicons';
}
.login-btn:hover{
color: #ed1c24;
}
.login-btn:before{
content: "\e71e";
}
/* Lang button */
.lang-button{
position: relative;
}
.lang-button .item-inner > a:after{
font-family: 'fontello';
content: '\f107';
margin-left: 10px;
font-size: 12px;
display: inline-block;
vertical-align: 0;
}
.contact-info-menu > *.lang-button i{
margin-right: 12px;
color: #31353c;
font-size: 16px;
}
.lang-button:hover .item-inner > a{
color: #ed1c24;
}
.lang-button .dropdown-list{
font-family: 'Overpass', sans-serif;
padding-top: 2px;
margin-bottom: -2px;
padding: 15px 0;
background-color: #f2f3f3;
}
.lang-button .dropdown-list > li > a{
display: block;
padding: 8px 40px;
font-size: 15px;
text-transform: none;
}
.lang-button .dropdown-list > li:hover > a{background: #fff;}
.lang-button:hover .dropdown-list,
.lang-button:active .dropdown-list{
visibility: visible;
opacity: 1;
}
.contact-info-menu.type-2 > *.lang-button i{
font-size: 14px;
margin-right: 10px;
}
.contact-info-menu.type-2 > *.lang-button .item-inner > a{
letter-spacing: 0.3px;
font-size: 13px;
}
.dropdown-list,
.dropdown-window{
position: absolute;
top: 100%;
right: 0;
left: 0;
padding: 0;
min-width: 100px;
opacity: 0;
visibility: hidden;
z-index: 999;
overflow: hidden;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
.dropdown-window{
left: auto;
right: 0;
}
.dropdown-window{
-webkit-transform: scale3d(.85, .85, .85);
-ms-transform: scale3d(.85, .85, .85);
transform: scale3d(.85, .85, .85);
}
.dropdown-window.opened{
opacity: 1;
visibility: visible;
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
/*----------- Header style-2 --------------*/
#header.header-2{
background: #fff;
}
.header-2 .top-header{
background-color: #272a30;
padding: 30px 0;
}
.header-2 #main-navigation > ul,
.header-3 #main-navigation > ul{
margin: 0;
}
.header-2 #main-navigation > ul > li > a,
.header-3 #main-navigation > ul > li > a,
.header-4 #main-navigation > ul > li > a{
padding: 19px 20px 17px;
margin-bottom: 0;
}
.header-2 .our-info-list,
.header-2 .social-icons{
display: inline-block;
}
.header-2 .social-icons > li{
font-size: 18px;
}
.header-2 .our-info-list:not(:last-child){
margin-right: 35px;
}
.header-2 .menu-holder{
position: relative;
background-color: #e4e6e6;
}
.header-2 .menu-wrap{
position: relative;
}
.header-2 .search-holder{
position: absolute;
right: 0;
top: calc(50% - 13px);
}
/*----------- Header style-3 --------------*/
.header-3 .top-bar{
padding: 8px 0;
background-color: #f2f3f3;
font-size: 13px;
}
#header.header-3 .top-header{
padding: 20px 0;
border-bottom: none;
}
.header-3 .menu-holder{
background-color: #3054c6;
}
.header-3 #main-navigation > ul > li > a,
.header-4 #main-navigation > ul > li > a{
text-transform: uppercase;
color: #fff;
font-weight: 600;
font-size: 17px;
}
.header-3 #main-navigation > ul > li.current > a,
.header-3 #main-navigation > ul > li:hover > a{
color: #fff;
}
/*----------- Header style-3 --------------*/
.header-4 .top-bar{
padding: 8px 20px;
background-color: #272a30;
font-size: 13px;
}
.header-4 .top-bar .slash-list > a:not(:hover),
.header-4 .top-bar .contact-info-menu > *.lang-button i,
.header-4 .top-bar .contact-info-menu > *.lang-button .item-inner > a{
color: #fff;
}
.header-4 .top-bar .slash-list > a:not(:last-child):after{
color: #d5d7d8;
}
#header.header-4 .top-header{
padding: 35px 20px;
border-bottom: none;
}
.header-4 #main-navigation > ul > li > a{
color: #31353c;
}
/*----------- Contact info --------------*/
.contact-info-menu{
font-size: 0;
text-align: left;
}
.contact-info-menu > *{
display: inline-block;
vertical-align: middle;
text-transform: uppercase;
font-size: 12px;
border-left: 2px solid #e2e5e5;
padding: 26px 40px 22px;
height: 100%;
position: relative;
font-family: 'Overpass', sans-serif;
}
.contact-info-menu > *.lang-button{
padding-top: 36px;
padding-bottom: 32px;
cursor: pointer;
}
.contact-info-menu > * span{
display: block;
letter-spacing: 0.5px;
}
.contact-info-menu .contact-info-item > a:hover{
text-decoration: underline;
}
.contact-info-menu > * i{
font-size: 20px;
color: #ed1c24;
text-align: left;
margin-right: 17px;
}
.contact-info-menu > * > a{
font-family: 'Overpass', sans-serif;
font-weight: bold;
}
.contact-info-menu > * a > b{
font-size: 18px;
color: #ed1c24;
font-weight: 900!important;
}
.contact-info-menu.type-2 > *.lang-button{
padding: 0;
border: none;
}
.contact-info-menu.type-2 .lang-button .dropdown-list > li > a{
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
.contact-info-menu.type-2 > *{
text-transform: none;
}
/* Main Navigation */
#wrapper{
overflow: hidden;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#main-navigation > ul{
font-size: 0;
margin: 0 20px;
position: relative;
}
#main-navigation > ul > li{
display: inline-block;
position: relative;
font-family: 'Overpass', sans-serif;
}
#main-navigation > ul > li > a{
color: #31353c;
font-weight: 600;
display: block;
position: relative;
padding: 43px 20px 31px;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
font-size: 17px;
}
.searchform-wrap.opened,
.main-navigation > li:hover > .sub-menu-wrap{
width: 355px;
opacity: 1;
visibility: visible;
}
#main-navigation > ul > li.current > a,
#main-navigation > ul > li:hover > a{
color: #ed1c24;
border-color: #ed1c24;
}
.sub-menu-wrap ul li{
position: relative;
}
.sub-menu-wrap ul li:hover > a,
.sub-menu-wrap ul li.current > a{
color: #ed1c24;
background: #fff;
}
#main-navigation > ul > li.dropdown > a:after{
font-family: 'fontello';
content: '\f107';
margin-left: 10px;
font-size: 12px;
display: inline-block;
vertical-align: top;
font-weight: normal;
}
.sub-menu-wrap{
position: absolute;
left: 0;
top: 100%;
min-width: 200px;
background: #f2f3f3;
padding: 15px 0;
opacity: 0;
visibility: hidden;
z-index: 999;
-webkit-transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
-webkit-transform: translate3d(-15px, 15px, 0);
-moz-transform: translate3d(-15px, 15px, 0);
-o-transform: translate3d(-15px, 15px, 0);
-ms-transform: translate3d(-15px, 15px, 0);
transform: translate3d(-15px, 15px, 0);
box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.1);
}
.sub-menu-wrap:before{
content: '';
bottom: 100%;
width: 100%;
left: 0;
height: 2px;
display: block;
position: absolute;
background: transparent;
}
.sub-menu-wrap .sub-menu-wrap.sub-menu-inner{
left: 100%;
background: #f2f3f6;
top: 0;
margin-left: 2px;
margin-top: -15px;
-webkit-transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
-webkit-transform: translate3d(-15px, 15px, 0);
-moz-transform: translate3d(-15px, 15px, 0);
-o-transform: translate3d(-15px, 15px, 0);
-ms-transform: translate3d(-15px, 15px, 0);
transform: translate3d(-15px, 15px, 0);
}
.sub-menu-wrap .sub-menu-wrap.sub-menu-inner:before{
right: 100%;
left: auto;
width: 2px;
top: 0;
bottom: auto;
height: 100%;
}
#main-navigation > ul > li:hover > .sub-menu-wrap:not(.sub-menu-inner),
.sub-menu-wrap ul li:hover .sub-menu-wrap.sub-menu-inner{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
}
.sub-menu-wrap ul li a{
font-family: 'Overpass', sans-serif;
display: block;
white-space: pre;
position: relative;
font-size: 15px;
line-height: 22px;
padding: 10px 35px 8px 20px;
color: #2a2c32;
}
.sub-menu-wrap ul li.sub > a:after{
font-family: 'fontello';
content: '\f105';
position: absolute;
right: 20px;
}
#main-navigation > ul > li.with-label > a{
padding-right: 45px;
}
#main-navigation > ul > li.with-label > a .label{
top: 12px;
right: 0;
padding: 4px 5px 3px;
font-size: 10px;
}
#main-navigation > ul > li.with-label > a .label:before{
border-width: 0 8px 18px 0;
border-color: transparent #ed1c24 transparent transparent;
}
.responsive-nav-button{
display: none;
text-align: center;
color: #31353c;
font-size: 30px;
height: 100%;
padding: 0 20px;
border-right: 2px solid #e2e5e5;
z-index: 2;
border-radius: 0;
background: transparent;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
header:not([class*="header"]) .responsive-nav-button{
height: 73px;
}
.responsive-nav-button:hover{color: #ed1c24;}
.responsive-nav-button:before{
font-family: 'fontello';
content: "\e895";
}
.header-2 .responsive-nav-button,
.header-3 .responsive-nav-button,
.header-4 .responsive-nav-button{
border-right: none;
margin: 20px 0;
padding: 0;
}
.header-4 .responsive-nav-button{
margin: 0;
}
.header-3 .responsive-nav-button{
color: #fff;
}
#header.header-fixed .responsive-nav-button{
border-color: rgba(255,255,255,0.1)!important;
color: #fff;
height: 73px;
}
#header.header-fixed .responsive-nav-button:hover,
.header-3 .responsive-nav-button:hover{
color: #ed1c24;
}
#wrapper #advanced-menu-hide{
visibility: hidden;
pointer-events: none;
-webkit-transform: translateX(200%);
transform: translateX(200%);
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.menu-button-wrap{
text-align: right;
padding: 10px 0;
}
.mobile-advanced{display: none;}
#main-navigation > ul > li.has-megamenu{
position: static;
}
.sub-menu-wrap.mega-menu{
white-space: nowrap;
left: 0;
vertical-align: top;
padding: 25px 0;
min-width: 625px;
overflow: hidden;
}
.full-width-menu.sub-menu-wrap.mega-menu{
min-width: 100%;
}
.header-2 .sub-menu-wrap.mega-menu{
left: 0;
}
.header-3 .sub-menu-wrap.mega-menu,
.header-4 .sub-menu-wrap.mega-menu{
left: auto;
right: 0;
}
.mega-menu > * h5{
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
padding-left: 20px;
}
/*==================================RESPONSIVE LAYOUTS===============================================*/
@media only screen and (max-width: 1499px){
.contact-info-menu > *{
padding-left: 30px;
padding-right: 30px;
}
.copyright-section{
text-align: center;
}
#footer:not(.footer-2) > .btn,
#footer:not(.footer-2) .copyright-section > .btn{
position: relative;
right: auto;
top: 10px;
}
.sub-menu-wrap.mega-menu{
left: 0;
}
#header:not(.header-2):not(.header-3):not(.header-4) .top-header .logo-wrap{
text-align: center;
padding: 20px;
border-bottom: 2px solid #e2e5e5;
}
#header:not(.header-4) .top-header.flex-row{
display: block;
padding: 0;
}
#header.header-fixed .top-header .logo-wrap{
border-color: rgba(255,255,255,0.1)!important;
}
}
@media only screen and (max-width: 1281px){
#header.header-2 .menu-holder .container:not(:only-child){
padding-right: 80px;
}
#main-navigation > ul{
margin: 0 10px;
}
#main-navigation > ul > li > a{
padding-left: 15px;
padding-right: 15px;
}
}
@media only screen and (min-width: 1281px){
#header.sticky{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#header.sticky.header-fixed{
background: #fff;
}
#header.sticky.header-2 .top-header,
#header.sticky.header-3 .top-header,
#header.sticky.header-3 .top-bar,
#header.sticky.header-4 .top-bar{
margin: 0;
padding: 0;
opacity: 0;
overflow: hidden;
height: 0;
font-size: 0;
display: block;
}
#header.sticky.header-4 .top-header{
padding: 20px 20px;
}
#header.sticky.header-4 .top-header,
#header.sticky{
box-shadow: 0 -5px 30px rgba(78, 82, 99, 0.3);
}
.container.type-2{width: 970px;}
#header.header-fixed.sticky .logo-wrap .logo > img:first-child{
display: none;
}
#header.header-fixed.sticky .logo-wrap .logo > img:last-child{
display: block;
}
#header.header-fixed.sticky #main-navigation > ul > li > a{
color: #31353c;
}
#header.header-fixed.sticky .top-header,
#header.header-fixed.sticky .contact-info-menu > *{
border-color: rgba(0,0,0,0.1)!important;
}
#header.header-fixed.sticky .contact-info-menu .item-inner > a,
#header.header-fixed.sticky .contact-info-menu > *.lang-button i{
color: #31353c;
}
#header.header-fixed.sticky .top-header .logo-wrap{
border-color: rgba(0,0,0,0.1)!important;
}
}
@media only screen and (max-width: 1199px){
.tabs .tabs-nav > li > a{
padding-left: 20px;
padding-right: 20px;
}
#header.header-4 .top-header.flex-row{
display: block;
padding: 0 20px;
}
.contact-info-menu > *{
padding: 12px 15px;
}
.contact-info-menu > *.lang-button{
padding: 24px 15px;
}
#main-navigation > ul > li > a{
padding: 25px 10px;
font-size: 16px;
}
#header .top-header{
padding-left: 20px;
}
#header.header-4 .top-header{
padding: 0 20px;
}
#header.header-4 .top-header .logo-wrap{
padding: 15px;
text-align: center;
}
#header.header-4 .top-header.flex-row #main-navigation > ul{
margin: 0;
}
.car-carousel .owl-carousel.container{
width: 970px;
}
.header-2 .align-right,
.header-2 .logo-wrap{
text-align: center;
}
.header-2 .logo-wrap{
margin-bottom: 20px;
}
.header-3 #main-navigation > ul > li:not(.with-label) > a{
padding: 17px 15px;
}
.header-3 #main-navigation > ul > li > a{
font-size: 14px;
}
.car-carousel .carousel-type-3 .owl-carousel .owl-next{
right: -10px;
}
.car-carousel .carousel-type-3 .owl-carousel .owl-prev{
left: -10px;
}
.shop-cart-form tr th.product-col{
width: auto;
}
.carousel-type-3 .owl-carousel .owl-prev{
left: -30px;
}
.carousel-type-3 .owl-carousel .owl-next{
right: -30px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.widget .entry .thumbnail-attachment{
display: inline-block;
float: none;
margin-right: 0;
margin-bottom: 10px;
}
.dealers-wrap .dealer-item .contact-item .link-text2{
display: block;
}
}
@media only screen and (max-width: 992px){
/* Mobile Menu
/* -------------------------------------------------- */
#header.header.header-main .menu-holder{
position: relative;
background-color: rgba(0,0,0,.8);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#main-navigation{display: none!important;}
.responsive-nav-button { display: inline-block; }
.mobile-advanced {
position: absolute;
top: 0;
right: -100%;
z-index: 995;
overflow: hidden;
display: block;
width: 100%;
height: 100%;
background-color: #fff;
pointer-events: none;
-webkit-backface-visibility: hidden;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: -webkit-transform .35s ease;
transition: transform .35s ease;
-webkit-transform: translateX(0);
transform: translateX(0);
}
#wrapper.active .mobile-advanced {
pointer-events: auto;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.no-cssanimations.no-csstransforms3d #wrapper.active .mobile-advanced {
right: 0;
}
.mobile-advanced > ul {
padding-top: 80px;
}
.mobile-advanced li {
display: block;
list-style: none;
}
.mobile-advanced li > span {
display: block;
padding: 10px 15px;
color: #31353c;
font-weight: 400;
}
.mobile-advanced li a {
display: block;
padding: 10px 20px;
border-bottom: 1px solid #e2e5e5;
line-height: 1.15em;
}
.mobile-advanced > ul > li.current > a,
.mobile-advanced > ul > li:hover > a{
background-color: #ed1c24;
}
.mobile-advanced ul ul li.current > a,
.sub-menu-wrap > ul > li:hover > a{
color: #ed1c24;
}
.mobile-advanced > ul > li > a{
background-color: #31353c;
color: #fff!important;
font-weight: 400;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-weight: normal;
position: relative;
}
.mobile-advanced ul ul li > a {padding-left: 30px;}
.mobile-advanced ul ul li > a:before{
display: inline-block;
position: relative;
margin-right: 5px;
font-size: 10px;
font-family: 'fontello';
content: "\f105";
}
.mobile-advanced ul ul ul li > a { padding-left: 55px; }
#advanced-menu-hide{
position: fixed;
top: 20px;
right: 30px;
z-index: 999;
display: block;
text-align: center;
color: #222;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.logged-in.admin-bar #advanced-menu-hide{top: 55px;}
#wrapper.active #advanced-menu-hide{
visibility: visible;
pointer-events: auto;
-webkit-transform: translateX(0);
transform: translateX(0);
}
#advanced-menu-hide:after{
content: '\e92a';
vertical-align: middle;
text-align: center;
font-size: 30px;
font-family: 'linearicons';
line-height: 38px;
}
#advanced-menu-hide:hover{color: #ed1c24;}
.mobile-advanced > ul > li.dropdown .sub-menu-wrap,
.mobile-advanced > ul > li.dropdown .sub-menu-wrap.sub-menu-inner{
position: relative;
width: 100%;
opacity: 1;
visibility: visible;
left: 0;
right: 0;
border: none;
padding: 0;
margin: 0;
box-shadow: none;
-webkit-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.sub-menu-wrap ul li:hover{background: transparent!important;}
.sub-menu-wrap ul li{padding: 0;}
.sub-menu-wrap ul li.current-menu-item{background: none!important;}
.toggle-menu,
.mega-menu > *{
display: block;
}
.header-3 .nav-item{
text-align: center;
}
#header.header-4 .top-header{
padding-bottom: 15px;
}
/* ------------------------------------------------------------------------------ */
/* tables change*/
.responsive-table{
border-left: 2px solid #f2f3f6;
border-right: 2px solid #f2f3f6;
}
.responsive-table,
.responsive-table tbody,
.responsive-table thead,
.responsive-table tfoot,
.responsive-table th,
.responsive-table tr,
.responsive-table td{
display:block;
}
.table-type-2.compare-table.responsive-table table tr > th{
width: 100%;
}
.table-type-2.compare-table table tr.title > th{
padding: 10px 15px;
}
.responsive-table thead tr{
position:absolute;
top:-9999px;
left:-9999px;
}
.responsive-table td{
position:relative;
padding-left:50% !important;
border-left:none !important;
border-right:none !important;
}
.responsive-table td:not([colspan]):not(.close-product):after{
content:"";
display:block;
border-left:2px solid #f2f3f6;
position:absolute;
left:47%;
top:0;
height:100%;
}
.responsive-table tr:last-child td[colspan]:last-child,
.responsive-table tr:last-child td:not(:first-child){
border-top: none!important;
}
.responsive-table td[colspan],
.responsive-table td.close-product{
width:100%;
text-align:center;
padding: 10px !important;
}
.responsive-table td.close-product{
text-align: left;
}
.responsive-table td[colspan]:before,
.responsive-table td.close-product:before{
display: none;
}
.responsive-table.table_type_1.var5 td[colspan] table tr td{
padding: 0!important;
}
.responsive-table.table_type_1.var5 td[colspan] table tr td .button,
.responsive-table.table_type_1.var5 td[colspan] table tr td input{
margin-top: 10px;
}
.table_type_1.var5 tr:last-child td table tr td:last-child{
text-align: center;
}
.responsive-table td[colspan]:after{
display: none;
}
.responsive-table.table_type_1.var5 td[colspan] table tr td{
width: 100%;
}
.responsive-table td[colspan] table tr td:after{
display: none;
}
.responsive-table td[colspan] table tr td:before{
display: none;
}
.responsive-table td[colspan] .align-right{
text-align: center;
}
.responsive-table td:before{
content:attr(data-title);
position:absolute;
top:50%;
left:15px;
width:45%;
padding-right:10px;
-webkit-transform:translateY(-50%) translateZ(0);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}
.mega-menu > * h5{
padding-top: 20px;
}
/* ------------------------------------------------------------------------------ */
[class*="table-type"] table tr > td, [class*="table-type"] table tr > th{
padding: 10px 15px;
}
.flex-row [class*="col-md"]:not([class*="col-sm"]):not([class*="col-xs"]){
width: 100%;
}
[class*="col-md-12"]:not(:last-child),
[class*="col-md-"].col-sm-12:not(:last-child){
margin-bottom: 45px;
}
.footer-4 .pre-footer [class*="col-md-"].col-sm-12:not(:last-child){
margin-bottom: 20px;
}
.footer-4 [class*="col-md-"].col-sm-12:not(:last-child){
margin-bottom: 0;
}
.copyright-section .flex-row{
display: block;
}
.counters-holder-bg .counter{
margin: 20px 0;
}
.counters-holder-bg .counter,
.pricing-tables-holder.cols-4 .pricing-table{
-webkit-flex-basis: 50%;
flex-basis: 50%;
}
.custom-list{
margin: 10px 0;
}
[class*="footer"] .widget{
margin: 20px 0;
}
.tabs .tabs-nav > li > a{
padding-left: 25px;
padding-right: 25px;
}
.tabs.style-2 .tabs-nav > li > a{
padding: 8px 15px 6px;
}
[class*="footer"] .top-footer{
padding: 55px 0;
}
.media-holder h1{
font-size: 60px;
}
.media-holder span{
font-size: 40px;
}
.tabs.type-2 .tabs-content .select-area:not([class*="tab-col"]) > *:not(.col-extra){
width: 33.3333%;
}
.car-carousel .owl-carousel.container{
width: auto;
}
.car-carousel .carousel-type-3 .owl-carousel .owl-prev{
left: -10px;
}
.car-carousel .carousel-type-3 .owl-carousel .owl-next{
right: -10px;
}
.header-2 .our-info-list:not(:last-child){
margin-right: 0;
}
.call-out [class*="col-md"] .align-right,
.call-out [class*="col-md"]{
text-align: center;
}
.call-out [class*="col-md"]:not(:last-child){
margin-bottom: 20px;
}
.flex-col-5{
width: 33.333%;
}
.review-section [class*="col-md"]:not(:last-child){
margin-bottom: 30px;
}
.half-bg-col:not(.call-out) [class*="img-col"]{
padding-bottom: 40%;
margin-bottom: 45px;
position: relative;
}
[class*="img-col"]{
width: 100%;
}
.half-bg-col [class*="page-section"].half-bg-col{
padding: 0 0 45px;
}
.call-out [class*="img-col"]{
height: 50%;
}
.call-out .img-col-left{
top: 0;
}
.call-out .img-col-right{
top: auto;
bottom: 0;
}
.half-bg-col.call-out [class*="col-md"]:not(:last-child){
margin-bottom: 100px;
}
.map-section.full-size{
position: static;
width: auto;
}
.map-section.full-size #googleMap2{
padding-bottom: 30%;
height: auto;
min-height: 250px;
}
.coming-soon h1{
font-size: 70px;
line-height: 100px;
}
#sidebar{
padding-top: 45px;
}
#sidebar.sbr:before,
#sidebar.sbl:before{
left: -5000px;
top: 0;
right: -5000px;
}
#sidebar.sbl:before{
bottom: 0;
top: -50000px;
}
#sidebar.sbl{
padding-top: 0;
padding-bottom: 45px;
}
.popup-holder .popup{
width: 80%;
}
.page-nav span{
padding: 0 30px;
}
[class*="page-section"].half-bg-col{
padding: 0 0 45px;
}
.carousel-type-3 .owl-carousel .owl-prev{
left: -15px;
}
.carousel-type-3 .owl-carousel .owl-next{
right: -15px;
}
#header.header-4 .top-header.flex-row{
display: flex;
}
#header.header-4 .top-header.flex-row{
padding: 10px 20px;
}
#header.header-4 .top-header{
position: relative;
}
#header.header-4 .top-header .menu-holder .responsive-nav-button{
position: absolute;
left: 50%;
top: 0;
}
#header.header-4 .top-header .logo-wrap{
padding: 0;
}
.tabs.type-2 .tabs-nav > li > a, .tabs.type-2 .tabs-nav.no-tab > *{
padding-left: 25px;
padding-right: 25px;
}
/* .select-area.tab-col-auto > *:not([class*="col-"]) form{
max-width: inherit;
} */
#sidebar.sbr .widget,
#sidebar.sbl .widget{
padding: 0;
}
}
@media (min-width: 992px){
.dealers-page .col-md-3{
width: 23%;
}
.dealers-page .col-md-6{
width: 54%;
}
.btns-set > .row:not(:last-child){
margin-bottom: 30px;
}
.sub-menu-wrap{
box-shadow: 0px 10px 17px 0px rgba(0, 0, 0, 0.1);
}
.mega-menu > *{
display: inline-block;
vertical-align: top;
width: 33.3333%;
}
.mega-menu.full-width-menu > *{
width: 14.48%;
}
.mega-menu.full-width-menu > *:not(:last-child){
margin-right: 30px;
}
.mega-menu > * h5 + ul{
padding-top: 0;
}
.mega-menu > * ul{
padding-top: 33px;
}
}
@media (max-width:769px){
.tabs.type-2 .tabs-nav > li > a, .tabs.type-2 .tabs-nav.no-tab > *{
padding-left: 15px;
padding-right: 15px;
}
.flex-row [class*="col-sm-"]:not([class*="col-xs"]){
width: 100%;
}
[class*="col-sm-"]:not(:last-child):not(.col-no-space){
margin-bottom: 45px;
}
.question-form [class*="col-sm-"]:not(:last-child):not(.col-no-space){
margin-bottom: 20px;
}
.popup-holder [class*="col-sm-"]:not(:last-child):not(.col-no-space){
margin-bottom: 20px;
}
.products-holder [class*="col-"]:not(:last-child){
margin-bottom: 0;
}
.products-holder.view-list [class*="col-"]:not(:last-child){
margin-bottom: 20px;
}
.header-3 .top-header [class*="col-sm-"]:not(:last-child){
margin-bottom: 20px;
}
.map-direction [class*="col-sm-"]:not(:last-child){
margin-bottom: 20px;
}
.btns-set [class*="col-sm-"]:not(:last-child),
.icons-box [class*="col-sm-"]:not(:last-child),
.brend-section [class*="col-sm-"]:not(:last-child){
margin-bottom: 0;
}
.owl-prev{
left: -15px;
}
.owl-next{
right: -15px;
}
.map-direction,
.header-3 .top-header .logo-wrap,
.header-4 .top-bar,
.header-4 .top-bar .contact-info-menu{
text-align: center;
}
.header-4 .top-bar > .flex-row{
display: block;
}
.footer-4 .pre-footer form > p{
float: none;
padding-right: 0;
padding-bottom: 10px;
text-align: left;
}
.footer-4 .pre-footer form > p br{
display: none;
}
.footer-4 [class*="col-sm-"]:not(:last-child){
margin-bottom: 0;
}
.instagram-feed > li{
width: 33.3333%;
}
[class*="message-container"]{
top: 100%;
bottom: auto;
margin-top: 10px;
}
.isotope-nav{
display: block;
}
.isotope-nav > button{
display: block;
width: 100%;
}
.isotope-nav > button:not(:last-child){
border-bottom: none;
}
.isotope-nav > button:first-child{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 0;
}
.isotope-nav > button:last-child{
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.isotope.three-collumn .item{
width: 50%;
}
.review-section.list-type .entry-attachment {
float: none;
margin-right: 0;
margin-bottom: 30px;
}
.review-sum .rev-desc{
padding: 15px;
}
.review-section > .row .col-sm-4{
margin: 0 -15px;
font-size: 0;
}
.review-section > .row .col-sm-4 .review-item{
width: 45%;
margin-left: 15px;
margin-right: 15px;
}
.car-detail-list > .flex-row{
display: block;
}
.car-detail-list .detail-col{
width: 100%;
padding: 5px 0;
}
.car-detail-list li .detail-col:not(:last-child){
border-bottom: 1px solid #e2e5e5;
}
.tabs .tabs-nav > li > a{
padding-left: 15px;
padding-right: 15px;
}
#progressbar,
#progressbar > li{
display: block;
}
#progressbar > li:after,
#progressbar > li:before{
display: none;
}
#progressbar > li{
padding-top: 20px;
padding-bottom: 20px;
}
#progressbar > li:not(:last-child){
border-bottom: none;
}
#progressbar > li br{
display: none;
}
#progressbar > li:first-child{
border-radius: 3px 3px 0 0;
}
#progressbar > li:last-child{
border-radius: 0 0 3px 3px;
}
.qustion-tooltip .tooltip{
left: auto;
right: 25px;
}
.qustion-tooltip.right-tooltip .tooltip:after{
right: auto;
left: 100%;
border-top: 7px solid transparent;
border-left: 5px solid #365ddd;
border-bottom: 7px solid transparent;
border-right: 0!important;
}
.dealers-wrap .products-holder.view-list .product-image{
float: none;
max-width: 100%;
margin: 0;
}
#sidebar .products-holder.view-list .product-image{
float: left;
margin-right: 20px;
}
#sidebar .products-holder.view-list .product-image img{
width: auto;
}
.widget .products-holder.view-list .product-image{
float: left;
max-width: 360px;
margin: 0 30px 0 0;
}
.products-holder.view-list .product-description{
padding: 20px;
}
.tabs.type-2 .tabs-content .select-area.tab-col-auto > *:nth-child(1) .custom-select, .tabs.type-2:not(.style-3) .tabs-content .select-area.tab-col-auto > *:nth-child(2) .custom-select,
.select-area.tab-col-auto > *:not([class*="col-"]) form{
min-width: auto;
max-width: 100%;
}
.tabs.type-2.style-3 .select-area.tab-col-auto > *:not([class*="col-"]) form{
max-width: 108px;
}
.products-holder.view-grid .product .product-name{
min-height: auto;
}
.popup-holder{
text-align: center;
}
.popup-holder .popup{
text-align: left;
top: auto;
left: auto;
margin: 50px 0;
transform: translate(0, 0);
position: relative;
display: inline-block;
}
.image-preview{
display: block;
}
.calculation-form form [class*="col-sm-"]:not(:last-child):not(.col-no-space){
margin-bottom: 20px;
}
.select-area[class*="tab-col-"] > .col-extra2{
width: auto;
}
.media-holder.type-3{
height: auto;
min-height: 550px;
}
.products-holder.view-list .product-image{
margin: 0;
}
}
@media (min-width:769px){
.services{
margin-bottom: -30px;
}
.services .service-item{
padding-bottom: 30px;
}
.isotope-nav > button:not(:last-child){
border-right: none;
}
.reviews-section .rev-item .row .col-sm-4{
width: 30%;
}
.reviews-section .rev-item .row .col-sm-8{
width: 70%;
}
#progressbar > li:not(:last-child){
border-right: none;
}
#progressbar > li:not(:first-child){
border-left: none;
}
}
@media (min-width: 769px) and (max-width: 992px){
#progressbar > li{
padding: 10px 15px 10px 55px;
}
#progressbar > li span:before{
left: 15px;
}
}
@media only screen and (max-width:480px){
.tabs.type-2.style-3 .select-area.tab-col-auto > *:not([class*="col-"]) form{
max-width: 100%;
width: 100%;
}
#header.header-4 .top-header.flex-row{
display: block;
}
#header.header-4 .top-header .menu-holder .responsive-nav-button{
position: relative;
}
#header.header-4 .top-header .logo-wrap{
padding: 10px;
}
.searchform-wrap .vc-child{
width: auto;
}
[class*="col-xs-"]{
float: none;
width: 100%;
}
[class*="col-xs-"]:not(:last-child){
margin-bottom: 15px;
}
.tabs .align-center .tabs-nav{
display: block;
}
.tabs:not(.vertical) .tabs-nav li a{
padding-left: 30px;
padding-right: 30px;
}
.tabs:not(.vertical) .tabs-nav li:first-child a{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.tabs:not(.vertical) .tabs-nav li:last-child a{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.tabs:not(.vertical):not(.style-2) .tabs-nav > li:not(:last-child) > a {
border-right: 2px solid #22252a;
}
.tabs:not(.vertical):not(.style-2) .tabs-nav li:not(:last-child) a{
border-bottom: none;
}
.counters-holder-bg .counter,
.pricing-tables-holder.cols-4 .pricing-table {
-webkit-flex-basis: 100%;
flex-basis: 100%;
}
.tabs .tabs-nav > li > a,
.tabs.style-2 .tabs-nav > li > a{
padding: 7px 25px 5px;
}
.tabs.style-2 .tabs-nav > li > a span{
margin-right: 5px;
}
.tabs.type-2 .tabs-content .select-area > *{
width: 100%!important;
}
.media-holder h1{
font-size: 40px;
}
.media-holder span{
font-size: 30px;
}
.media-holder h4{
font-size: 18px;
}
.contact-info-menu > *{
width: 100%;
}
#header:not(.header-4) .menu-wrap{
display: block;
}
.review-section .review-item{
display: block;
}
.review-item .thumbnail-attachment img{
width: 100%;
}
#header:not(.header-2):not(.header-3):not(.header-4) .responsive-nav-button{
display: block;
width: 100%;
padding: 20px;
border-right: none;
border-bottom: 2px solid #e2e5e5;
}
.contact-info-menu > *{
border-left: none;
}
.contact-info-menu > *:not(:last-child){
border-bottom: 2px solid #e2e5e5;
}
.contact-info-menu .contact-info-item > .flex-row{
justify-content: center;
}
.tabs.type-2 .tabs-nav li{
float: none;
}
.contact-info-menu .contact-info-item .dropdown-list{
text-align: center;
}
.instagram-feed > li{
width: 50%;
}
.flex-col-5,
.our-services > li,
.our-services.flex-col-3 > li{
width: 100%;
}
.dealer-item .dealer-title img{
float: none;
margin-right: 0;
margin-bottom: 10px;
}
.page-404-section .inner-404 h1{
font-size: 120px;
line-height: 130px;
}
.coming-soon h1{
font-size: 38px;
line-height: 60px;
}
.coming-soon .lineform,
.page-404-section .inner-404 form.lineform{
width: auto;
}
.isotope.two-collumn .item,
.isotope.three-collumn .item{
width: 100%;
}
.entries-nav > * .alignleft,
.entries-nav > * .alignright{
float: none;
margin: 0 0 10px;
}
.popup-holder .popup{
padding: 20px;
}
.popup-holder form.lineform .btn{
float: none;
margin-left: 0;
margin-bottom: 2px;
padding: 10px 15px;
font-size: 12px;
}
.shop-cart-form.order-type tr th.product-col,
.shop-cart-form.order-type tr th.total-col{
width: 50%;
}
.review-sum .rev-label{
width: 100%;
float: none;
}
.review-section > .row .col-sm-4{
margin: 0;
}
.review-section > .row .col-sm-4 .review-item{
width: 100%;
margin-left: 0;
margin-right: 0;
}
.tabs.type-2 .tabs-nav.no-tab > *{
display: block;
}
.single-product-title .product-price:not(:last-child){
margin-bottom: 15px;
}
.single-product-title .product-price{
font-size: 24px;
}
.tabs .tabs-nav li{
float: none;
}
.car-detail-list .detail-col span:first-child{
width: 50%;
}
.tabs.vertical{
display: block;
}
.tabs.vertical .tabs-nav,
.single-product-section .tabs.vertical .tabs-nav{
max-width: 100%;
-webkit-flex-basis: 100%;
flex-basis: 100%;
max-width: 100%;
margin-bottom: 2px;
margin-right: 0;
}
.tabs.vertical .tabs-content{
max-width: 100%;
-webkit-flex-basis: 100%;
flex-basis: 100%;
max-width: 100%;
}
.single-product-section .tabs.vertical .tabs-content{
-webkit-flex-basis: 100%;
flex-basis: 100%;
max-width: 100%;
}
.dealer-item .dealer-desc .contact-item .contact-title,
.dealer-item .dealer-desc .contact-section .contact-item{
display: block;
}
.dealer-item .dealer-desc .contact-section .contact-item:not(:last-child){
margin-right: 0;
margin-bottom: 10px;
}
.review-section:not(.list-type) .review-item .entry-body{
position: relative;
padding: 30px 0 0;
}
.review-section:not(.list-type) .review-item .entry-title a{
color: #31353c;
}
.review-section:not(.list-type) .review-item .entry-content{
color: #6d6f73;
}
.shop-cart-form .product .product-image{
float: none;
margin-right: 0;
margin-bottom: 10px;
}
.shop-cart-form .product-image,
.shop-cart-form .product-description,
.shop-cart-form .product{
display: block;
}
.shopping-cart{
width: 300px;
padding: 20px 10px;
}
.products-holder.view-list .product-image{
float: none;
max-width: 100%;
margin: 0;
}
.car-carousel .tabs .tabs-nav{
width: 100%;
}
.car-carousel .tabs .tabs-nav:not(:last-child){
margin-bottom: 20px;
}
.calculation-form form .btn{
margin-top: 10px;
}
.dealers-wrap{
padding: 40px 15px;
}
.dealer-item .dealer-desc .contact-item .contact-title i{
float: left;
}
.dealer-item .dealer-desc .contact-item .contact-desc{
line-height: 18px;
display: inherit;
}
.dealer-item .dealer-desc .contact-item:not(:last-child){
margin-bottom: 10px;
}
.carousel-type-4 .type-small{
display: none;
}
}
@media only screen and (max-width:320px){
.tabs.style-2 .tabs-nav > li > a span{
font-size: 14px;
margin-right: 5px;
}
.media-holder h1{
font-size: 30px;
}
.media-holder span{
font-size: 20px;
}
.media-holder h4{
font-size: 14px;
}
.widget .entry .thumbnail-attachment{
float: none;
margin-right: 0;
margin-bottom: 10px;
}
.coming-soon h1{
font-size: 36px;
line-height: 50px;
}
.direction-area .direction-mark{
float: none;
margin-right: 0;
margin-bottom: 10px;
}
}
/*!
* Theia Sticky Sidebar v1.7.0
* https://github.com/WeCodePixels/theia-sticky-sidebar
*
* Glues your website's sidebars, making them permanently visible while scrolling.
*
* Copyright 2013-2016 WeCodePixels and other contributors
* Released under the MIT license
*/
(function ($) {
$.fn.theiaStickySidebar = function (options) {
var defaults = {
'containerSelector': '',
'additionalMarginTop': 0,
'additionalMarginBottom': 0,
'updateSidebarHeight': true,
'minWidth': 0,
'disableOnResponsiveLayouts': true,
'sidebarBehavior': 'modern',
'defaultPosition': 'relative',
'namespace': 'TSS'
};
options = $.extend(defaults, options);
// Validate options
options.additionalMarginTop = parseInt(options.additionalMarginTop) || 0;
options.additionalMarginBottom = parseInt(options.additionalMarginBottom) || 0;
tryInitOrHookIntoEvents(options, this);
// Try doing init, otherwise hook into window.resize and document.scroll and try again then.
function tryInitOrHookIntoEvents(options, $that) {
var success = tryInit(options, $that);
if (!success) {
console.log('TSS: Body width smaller than options.minWidth. Init is delayed.');
$(document).on('scroll.' + options.namespace, function (options, $that) {
return function (evt) {
var success = tryInit(options, $that);
if (success) {
$(this).unbind(evt);
}
};
}(options, $that));
$(window).on('resize.' + options.namespace, function (options, $that) {
return function (evt) {
var success = tryInit(options, $that);
if (success) {
$(this).unbind(evt);
}
};
}(options, $that))
}
}
// Try doing init if proper conditions are met.
function tryInit(options, $that) {
if (options.initialized === true) {
return true;
}
if ($('body').width() < options.minWidth) {
return false;
}
init(options, $that);
return true;
}
// Init the sticky sidebar(s).
function init(options, $that) {
options.initialized = true;
// Add CSS
var existingStylesheet = $('#theia-sticky-sidebar-stylesheet-' + options.namespace);
if (existingStylesheet.length === 0) {
$('head').append($('<style id="theia-sticky-sidebar-stylesheet-' + options.namespace + '">.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>'));
}
$that.each(function () {
var o = {};
o.sidebar = $(this);
// Save options
o.options = options || {};
// Get container
o.container = $(o.options.containerSelector);
if (o.container.length == 0) {
o.container = o.sidebar.parent();
}
// Create sticky sidebar
o.sidebar.parents().css('-webkit-transform', 'none'); // Fix for WebKit bug - https://code.google.com/p/chromium/issues/detail?id=20574
o.sidebar.css({
'position': o.options.defaultPosition,
'overflow': 'visible',
// The "box-sizing" must be set to "content-box" because we set a fixed height to this element when the sticky sidebar has a fixed position.
'-webkit-box-sizing': 'border-box',
'-moz-box-sizing': 'border-box',
'box-sizing': 'border-box'
});
// Get the sticky sidebar element. If none has been found, then create one.
o.stickySidebar = o.sidebar.find('.theiaStickySidebar');
if (o.stickySidebar.length == 0) {
// Remove <script> tags, otherwise they will be run again when added to the stickySidebar.
var javaScriptMIMETypes = /(?:text|application)\/(?:x-)?(?:javascript|ecmascript)/i;
o.sidebar.find('script').filter(function (index, script) {
return script.type.length === 0 || script.type.match(javaScriptMIMETypes);
}).remove();
o.stickySidebar = $('<div>').addClass('theiaStickySidebar').append(o.sidebar.children());
o.sidebar.append(o.stickySidebar);
}
// Get existing top and bottom margins and paddings
o.marginBottom = parseInt(o.sidebar.css('margin-bottom'));
o.paddingTop = parseInt(o.sidebar.css('padding-top'));
o.paddingBottom = parseInt(o.sidebar.css('padding-bottom'));
// Add a temporary padding rule to check for collapsable margins.
var collapsedTopHeight = o.stickySidebar.offset().top;
var collapsedBottomHeight = o.stickySidebar.outerHeight();
o.stickySidebar.css('padding-top', 1);
o.stickySidebar.css('padding-bottom', 1);
collapsedTopHeight -= o.stickySidebar.offset().top;
collapsedBottomHeight = o.stickySidebar.outerHeight() - collapsedBottomHeight - collapsedTopHeight;
if (collapsedTopHeight == 0) {
o.stickySidebar.css('padding-top', 0);
o.stickySidebarPaddingTop = 0;
}
else {
o.stickySidebarPaddingTop = 1;
}
if (collapsedBottomHeight == 0) {
o.stickySidebar.css('padding-bottom', 0);
o.stickySidebarPaddingBottom = 0;
}
else {
o.stickySidebarPaddingBottom = 1;
}
// We use this to know whether the user is scrolling up or down.
o.previousScrollTop = null;
// Scroll top (value) when the sidebar has fixed position.
o.fixedScrollTop = 0;
// Set sidebar to default values.
resetSidebar();
o.onScroll = function (o) {
// Stop if the sidebar isn't visible.
if (!o.stickySidebar.is(":visible")) {
return;
}
// Stop if the window is too small.
if ($('body').width() < o.options.minWidth) {
resetSidebar();
return;
}
// Stop if the sidebar width is larger than the container width (e.g. the theme is responsive and the sidebar is now below the content)
if (o.options.disableOnResponsiveLayouts) {
var sidebarWidth = o.sidebar.outerWidth(o.sidebar.css('float') == 'none');
if (sidebarWidth + 50 > o.container.width()) {
resetSidebar();
return;
}
}
var scrollTop = $(document).scrollTop();
var position = 'static';
// If the user has scrolled down enough for the sidebar to be clipped at the top, then we can consider changing its position.
if (scrollTop >= o.sidebar.offset().top + (o.paddingTop - o.options.additionalMarginTop)) {
// The top and bottom offsets, used in various calculations.
var offsetTop = o.paddingTop + options.additionalMarginTop;
var offsetBottom = o.paddingBottom + o.marginBottom + options.additionalMarginBottom;
// All top and bottom positions are relative to the window, not to the parent elemnts.
var containerTop = o.sidebar.offset().top;
var containerBottom = o.sidebar.offset().top + getClearedHeight(o.container);
// The top and bottom offsets relative to the window screen top (zero) and bottom (window height).
var windowOffsetTop = 0 + options.additionalMarginTop;
var windowOffsetBottom;
var sidebarSmallerThanWindow = (o.stickySidebar.outerHeight() + offsetTop + offsetBottom) < $(window).height();
if (sidebarSmallerThanWindow) {
windowOffsetBottom = windowOffsetTop + o.stickySidebar.outerHeight();
}
else {
windowOffsetBottom = $(window).height() - o.marginBottom - o.paddingBottom - options.additionalMarginBottom;
}
var staticLimitTop = containerTop - scrollTop + o.paddingTop;
var staticLimitBottom = containerBottom - scrollTop - o.paddingBottom - o.marginBottom;
var top = o.stickySidebar.offset().top - scrollTop;
var scrollTopDiff = o.previousScrollTop - scrollTop;
// If the sidebar position is fixed, then it won't move up or down by itself. So, we manually adjust the top coordinate.
if (o.stickySidebar.css('position') == 'fixed') {
if (o.options.sidebarBehavior == 'modern') {
top += scrollTopDiff;
}
}
if (o.options.sidebarBehavior == 'stick-to-top') {
top = options.additionalMarginTop;
}
if (o.options.sidebarBehavior == 'stick-to-bottom') {
top = windowOffsetBottom - o.stickySidebar.outerHeight();
}
if (scrollTopDiff > 0) { // If the user is scrolling up.
top = Math.min(top, windowOffsetTop);
}
else { // If the user is scrolling down.
top = Math.max(top, windowOffsetBottom - o.stickySidebar.outerHeight());
}
top = Math.max(top, staticLimitTop);
top = Math.min(top, staticLimitBottom - o.stickySidebar.outerHeight());
// If the sidebar is the same height as the container, we won't use fixed positioning.
var sidebarSameHeightAsContainer = o.container.height() == o.stickySidebar.outerHeight();
if (!sidebarSameHeightAsContainer && top == windowOffsetTop) {
position = 'fixed';
}
else if (!sidebarSameHeightAsContainer && top == windowOffsetBottom - o.stickySidebar.outerHeight()) {
position = 'fixed';
}
else if (scrollTop + top - o.sidebar.offset().top - o.paddingTop <= options.additionalMarginTop) {
// Stuck to the top of the page. No special behavior.
position = 'static';
}
else {
// Stuck to the bottom of the page.
position = 'absolute';
}
}
/*
* Performance notice: It's OK to set these CSS values at each resize/scroll, even if they don't change.
* It's way slower to first check if the values have changed.
*/
if (position == 'fixed') {
var scrollLeft = $(document).scrollLeft();
o.stickySidebar.css({
'position': 'fixed',
'width': getWidthForObject(o.stickySidebar) + 'px',
'transform': 'translateY(' + top + 'px)',
'left': (o.sidebar.offset().left + parseInt(o.sidebar.css('padding-left')) - scrollLeft) + 'px',
'top': '0px'
});
}
else if (position == 'absolute') {
var css = {};
if (o.stickySidebar.css('position') != 'absolute') {
css.position = 'absolute';
css.transform = 'translateY(' + (scrollTop + top - o.sidebar.offset().top - o.stickySidebarPaddingTop - o.stickySidebarPaddingBottom) + 'px)';
css.top = '0px';
}
css.width = getWidthForObject(o.stickySidebar) + 'px';
css.left = '';
o.stickySidebar.css(css);
}
else if (position == 'static') {
resetSidebar();
}
if (position != 'static') {
if (o.options.updateSidebarHeight == true) {
o.sidebar.css({
'min-height': o.stickySidebar.outerHeight() + o.stickySidebar.offset().top - o.sidebar.offset().top + o.paddingBottom
});
}
}
o.previousScrollTop = scrollTop;
};
// Initialize the sidebar's position.
o.onScroll(o);
// Recalculate the sidebar's position on every scroll and resize.
$(document).on('scroll.' + o.options.namespace, function (o) {
return function () {
o.onScroll(o);
};
}(o));
$(window).on('resize.' + o.options.namespace, function (o) {
return function () {
o.stickySidebar.css({'position': 'static'});
o.onScroll(o);
};
}(o));
// Recalculate the sidebar's position every time the sidebar changes its size.
if (typeof ResizeSensor !== 'undefined') {
new ResizeSensor(o.stickySidebar[0], function (o) {
return function () {
o.onScroll(o);
};
}(o));
}
// Reset the sidebar to its default state
function resetSidebar() {
o.fixedScrollTop = 0;
o.sidebar.css({
'min-height': '1px'
});
o.stickySidebar.css({
'position': 'static',
'width': '',
'transform': 'none'
});
}
// Get the height of a div as if its floated children were cleared. Note that this function fails if the floats are more than one level deep.
function getClearedHeight(e) {
var height = e.height();
e.children().each(function () {
height = Math.max(height, $(this).height());
});
return height;
}
});
}
function getWidthForObject(object) {
var width;
try {
width = object[0].getBoundingClientRect().width;
}
catch (err) {
}
if (typeof width === "undefined") {
width = object.width();
}
return width;
}
return this;
}
})(jQuery);
