/*
Site developed by Karoline Dassie

Color information
- Yellow: #ffc700
- Black: #000000
- Dark Gray: #343434

*/

/*===================== 
CSS reset/normalize 
=======================*/

/**Correct `block` display not defined in IE 8/9.**/
article,aside,details,figcaption,figure,footer,header,hgroup,
main,nav,section,summary {display: block;}
pre {white-space: pre-wrap;}
small { font-size: 80%;}



/*===================== 
base styles 
=======================*/

/*font-family: 'Oswald', sans-serif;
font-family: 'Open Sans', sans-serif;*/

body {
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
-webkit-text-size-adjust: none;
padding:0;
margin: 0;
background:#000;
/*background:url(../siteart/gallery/VolvoA40FpackageSouthAfricaOPT.jpg) no-repeat center center;*/
background:url(../siteart/metaltextureLite.jpg);
font-size:16px;
font-weight:normal;
line-height:2em;
}

svg:not(:root) {overflow: hidden;/*reset*/}

/* CLEAR floats */ 
.group:before,
.group:after {content: ""; display: table;} 
.group:after {clear: both;}
.group {zoom: 1;}	

.clear { clear: both;}

/*image replacement*/
.hide-text {
text-indent:  100%;
white-space:  nowrap;
overflow:  hidden;
}	

hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
border-style: solid;
height: 0;
color:#e4e4e4;
margin:2em auto;
} 

img { border: 0;} 
.center{text-align:center}

.wrap{max-width:1150px; margin:0 auto}
.wrap-small{max-width:800px; margin:0 auto}

.column1 {width:100%;}
.column2 {   
width: 48.2%;
float: left;
box-sizing: border-box;
background: #000;
border: 1px solid #ffc700;
margin: 10px;
}

.column3 {width:25%; *width: 25%; float:left;box-sizing: border-box;}
.column4 {width:25%; *width: 25%; float:left;  box-sizing: border-box;}
.column5 {width:20%; float:left; padding-right:1%; box-sizing: border-box;}
.column6 {width:16.66666%; *width: 14%; float:left; padding-right: 20px; box-sizing: border-box; margin: 0 0 20px 0;}
.twothird{width:65%; *width: 65%; float:left;  box-sizing: border-box;}
.onethird{width:35%; *width: 35%; float:left; box-sizing: border-box; text-align:right}
.last{padding-right:0}

/*===================== 
typography 
=======================*/

::-moz-selection {
background: #2c2d2e ;
color: #fff;
text-shadow: none;
}

::selection {
background: #2c2d2e ;
color: #fff;
text-shadow: none;
}

strong,b { font-weight:900;}

h1 {
font-size:40px;
color:#fff;
font-weight:400;
text-transform:uppercase;
font-family: 'Oswald', sans-serif;
text-align:center;
line-height:1.2em;
}
.yellow{color:#ffc700!important;}

h2 {
color:#fff;
font-weight:400;
font-size:30px;
font-family: 'Oswald', sans-serif;
}

h3 {
color:#ffc700;
font-size:19px;
font-weight:900;
margin:0 0 0.5em 0
}

h4 {
font-size:17px;
font-weight:600;
line-height:1.7em;
color:#fff;
}

h5 {
font-size:25px;
font-weight:600;
line-height:1.7em;
color:#fff;
}

p {
font-size:16px;
font-weight:normal;
line-height:1.8em;
margin: 0;
color:#ffffff;
}

/*===================== 
base styles 
=======================*/

.wrapper {
max-width:1200px;
margin:0 auto;
}

/*===================== 
link styles 
=======================*/

a:focus {outline: thin dotted;/*reset*/}

a,
a:link, 
a:visited, 
a:active {
outline: 0;/*reset*/
color:inherit; 
text-decoration:none;
transition:background-color 300ms ease, background-color 300ms ease, all 300ms ease;
}
a:hover {
outline: 0;/*reset*/
text-decoration: none!important;
color: #000;
}

.icons-parts {
border: 2px solid #ffc700;
width: 100%;
background: #ffc700;
margin: 0 0 30px 0;
padding: 5px 2%;
text-align: center;
font-weight: 700;
font-size: 27px;
text-transform: uppercase;
}

.fa-cogs {color:#FFBD19;}

.icons-parts .fa {
color:#000;  
font-size:30px;
}

.icons-parts:hover{
	font-weight:900;
	border: 2px solid #000;
	background:#fff;
	}

.center a:hover {
	color:#ffc700;
	}

/*===================== 
header styles 
=======================*/

header {
text-align:center;
background: #ffc700;
margin:0 auto;
border-bottom:2px solid #fff;;
}

.logo{
background:#ffc700; 
width:100%;
}

.logo img{
float: left;
width:30%;
margin:0 auto;
padding:10px 0;
display:block;
transition:background-color 200ms ease, background-color 200ms ease, all 200ms ease;
}
.logo img:hover{opacity:0.6; border:none; outline:none;}

.header-right{ background:#343434; width:100%;}

a .fa-envelope { color:#fff; margin:0 0 0 5px; }
a .fa-envelope:hover{ color:#000;}

a.email-btn{ 
background:#ffc700; 
color:#000; 
text-align:center; 
font-size:20px; 
font-weight:700; 
padding:5px 20px 5px 20px; 
margin:0 0 0 20px;
}
a.email-btn:hover{ background:#fff; color:#000!important}

#top-info{
background:#343434; 
padding:7px 0; 
color:#a4a4a4; 
text-align:center; 
font-weight:600;
}

#top-info p{
display:inline-block; 
font-size:20px; 
color:#fff;
font-family: 'Oswald', sans-serif;
}

.strapline {
color: #333;
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 20px;
float: right;
padding: 39px 10px 0 0;
line-height: 1.4;
font-style: italic;
}

.hero {
	max-width: 100%;
border-bottom:2px solid #fff;
}

/* Style the links inside the sidenav */
#mySidenav a {
position:fixed; /* Position them relative to the browser window */
left: -70px; /* Position them outside of the screen */
transition: 0.3s; /* Add transition on hover */
padding: 15px; /* 15px padding */
width: 100px; /* Set a specific width */
text-decoration: none; /* Remove underline */
font-size: 20px; /* Increase font size */
color: white; /* White text color */
border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
z-index: 4;
	box-sizing:content-box; 
}
  
#mySidenav a:hover {
left: 0; /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
#call {
top: 300px;
background-color: #333;
border-top: 1px solid #ffc700; 
border-right: 1px solid #ffc700; 
border-bottom: 1px solid #ffc700; 
box-shadow: #333 4px 3px 9px 0px;
}

#email {
top: 370px;
background-color: #333;
border-top: 1px solid #ffc700; 
border-right: 1px solid #ffc700; 
border-bottom: 1px solid #ffc700; 
box-shadow: #333 4px 3px 9px 0px;
}

#inventory {
top: 440px;
background-color: #333;
border-top: 1px solid #ffc700; 
border-right: 1px solid #ffc700; 
border-bottom: 1px solid #ffc700; 
box-shadow: #333 4px 3px 9px 0px; 
}

#inventory p {
margin-right:-64px;
padding: 6px 0;
}

#call i, #email i, #inventory i {float: right;}

.disclaimer {color:#000 !important}

.show-closest-first {line-height: 0 !important;}

.list-redesign .specs-container .specs-button {background:#333 !important; color:#fff;}

div.media-buttons {line-height: 0 !important;}

/*===================== 
nav styles 
=======================*/

/* See menumaker.css */


/*===================== 
Layout
=======================*/

article{background:url(../siteart/metaltextureLite.jpg) repeat;
padding:50px 0; 
}

#mainphoto{
padding:20px 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#icons{background:#343434; padding:6% 0; border-top:2px solid #fff; text-align:center}
#icons .fa{ color:#ffc700;  font-size:90px; margin:0 auto 40px auto}
a #icons:hover{opacity:0.6}
#icons a:hover{opacity:0.6}
#icons a .column3:hover{opacity:0.6}

.inventorybackground {
background-color:#f9f9f9;
width:100%;
height:100%;
padding:35px 0;
/*margin-top:-50px;*/
}

/*.cf {background-color:#e2e2e2;}
*/
.cta-btn {
max-width: 94.6%;
background: #ffc700;
border:1px solid #ffc700; 
padding: 30px;
color: #333;
font-size:40px;
font-family: 'Oswald', sans-serif;
font-weight: 700;
text-align: center;
margin:0 0 20px 0;
}

.cta-btn:hover {
background: #fff;
border:1px solid #ffc700; 
color: #333;
}

.box-up {
background: #333;
max-width: 97.2%;
padding: 10px 15px;
font-size:27px;
font-weight: 500;
font-family: 'Oswald', sans-serif;
text-align: center;
margin-top: 10px;
}

.mainP {
margin: 10px 0;
background: #333;
padding: 10px;
max-width: 98%;
}

.zoom-container a:hover h3  {color:#000 !important; background:rgba(255, 255, 255, 0.68)!important;}

.CaptchaPanel div.CaptchaMessagePanel {color: #fff !important;}

/*===================== 
slideshow styles 
=======================*/

.cycle-slideshow img{
width:100%;
}
.cycle-pager { 
text-align:right; width: 100%; z-index: 500; position: absolute; bottom: 10px; right:40px; overflow: hidden;
}
.cycle-pager span { 
font-family: arial; font-size: 50px; width: 16px; height: 16px; 
color: #ddd; padding:3px; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #c5cace;}

.cycle-pager > * { cursor: pointer;}

/*===================== 
scrolling inventory
=======================*/

.scrolling-wrap {
height:90px;
overflow:hidden;
background:#fff;
}

.scrolling{
width:100%;
height:90px;
background:#fff;
}

/*===================== 
FORM styles 
=======================*/

form.search{
display:block; 
zoom:1; 
*display:inline;
width:505px;
margin:6% auto 0 auto;
}

form.search input{
display:inline-block; 
*display:inline;
border-top:6px solid #ffc700;}
form.search input.text{
width:76%;
padding:10px;
float:left;
margin:0 2% 0 0 
}

form.search input:focus {
border-top:6px solid #8C8C8C;
}
form.search input.text:focus{ outline : none; }

button.search-btn{
border:none;
margin:0 !important;
color:#ffc700;
opacity:1;
background:none;
}
i.fa.fa-chevron-circle-right{color:#ffc700; font-size:46px;}

button.search-btn:hover{
cursor:pointer;
opacity:0.8;
}
button.search-btn:focus{outline : none; }



.CaptchaPanel {
margin:0 0 0 0 !important;
padding:0 0 0 0 !important;
width:83%
}

.CaptchaAnswerPanel{
margin:0 0 0 0 !important;
padding:0 0 0 0 !important;
}

.CaptchaAnswerPanel input {
width: 200px !important;
border: 1px solid #d2d2d2;
-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 5px rgba(0,0,0,0.1);
padding: 8px 0;
margin:5px auto;
}
.CaptchaAnswerPanel input:focus{outline-color:#0049e5;}

.CaptchaImagePanel {
margin:5px 0 0 0;
padding:0 0 0 0!important;
line-height:normal;
}

.CaptchaMessagePanel {
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
font-weight:normal !important;
font-size:12px;
line-height:14px;
color:#8f979d
}

.CaptchaWhatsThisPanel {
line-height:0;
margin:0 0 0 0;
padding:8px 0 8px 0 !important;
}
.CaptchaWhatsThisPanel a {color:#ffc700;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;} 

/*===================== 
footer styles 
=======================*/

.hosted-content  h1{color:#ffc700; text-align:left}
.hosted-content  h5{color:#000; font-size:25px }


/*===================== 
frameless inventory
=======================*/

.hosted-content .listings-wrapper .listings-list .listing-banner h2{ background:#fa6a41;font-family: 'Oswald', sans-serif; font-weight:900;font-size:20px;}

.listings-wrapper .listing-boxed .listing-boxed-details h2 a {color: #0049e5}

.hosted-content .listings-wrapper .listings-list .category-banner h3 {font-size:22px; text-transform:uppercase}

.hosted-content .options li a{min-height:auto!important}


.list-top-section .list-title {color:#222 !important;}


.list-top-section .list-title .list-listings-count,
.list-content .price-container .price,
.list-content .listing-portion-title,
h2.no-listings-found,
.dealer-contact__heading, .detail-shipping__heading,
.detail__specs-heading,
.detail__title{color:#353535 !important;}


.view-listing-details-link ,
.faceted-search-content .selected-facets-container .selected-facet,
.list-content .list-error-container .info button {color:#353535 !important; background: #ffc700 !important;}

/*===================== 
gallery
=======================*/

#gal_container {
width:18%;
margin:1% 2% 1% 0 ;
float:left;
text-align:center
}
#gal_container img {  /*Style to make the thumbnail image style on the gallery page.*/
width:100%;
border:1px #ffc700 solid;
}

/*===================== 
categories
=======================*/

.zoom-container {
float: left;
width: 33.3%;
position: relative;
overflow: hidden;
display: inline-block;
font-size: 15px;
font-size: 1rem;
border: 1px solid #343434;
vertical-align: top;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
height: auto;
background-color:#fff;
}

.zoom-container .zoom-caption {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
background: rgba(0, 0, 0, .5);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

.zoom-container:hover .zoom-caption {
background: none;
}

.zoom-button {
display: block;
background:url(../siteart/arrow.png) no-repeat;
position: absolute;
z-index: 99999;
bottom: 0;
right: 0;
height: 20px;
width: 20px;
margin: 15px;
background-size: cover;
}

.zoom-container .zoom-caption h3 {
display: block;
text-align: center;
font-size: 14px;
line-height: 20px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
margin: 52% 0 0;
background: rgba(255, 255, 255, 0.34);
background: #000 \9;
padding:10px 0;
}

.zoom-container img {
display: block;
width: 100%;
height: 100%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

.zoom-container:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

/*===================== 
footer styles 
=======================*/
.footer {
background: #ffc700;
color: #333;
line-height: 1.5em;
border-top: 2px solid #fff;
padding-bottom: 20px;
}

.footer p {
color: #333;
font-weight: 700;
}

.footer a:hover{color:#868686;}		
a.footerlink:link,
a.footerlink:visited, 
a.footerlink:active {
text-decoration: none; 
font-size:11px;
color: #868686;
}
a.footerlink:hover {
text-decoration:underline; 
font-size:11px;
color:rgba(203,203,203,1.00);
}

.footertext {
font-size:11px; 
color:#868686;
}

.smallfootertext {
font-size:11px; 
color:#868686;
}

.divfooter {
text-align:center; 
margin:0 auto;
color:#868686;
max-width:850px
}

.ftr-logo-surround {
float: right;
text-align: center;
}

.ftr-logo-surround img, .ftr-logo-surround p {max-width:400px;}

.ftr-top-line {
background:#333;
text-align:center;
margin-bottom: 10px;
}

.ftr-top-line p {
color: #fff;
padding: 5px 0;
}

a.ftr-email-btn, a.ftr-phone-btn  { 
background:#333; 
color:#fff; 
text-align:center; 
font-weight: 700;
font-size:16px; 
padding:5px 20px 5px 20px; 
margin:3px 3px 3px 0;
display: inline-block;
}

a.ftr-email-btn:hover, a.ftr-phone-btn:hover {
background:#fff; 
color:#333;
}

.ftr-email, .ftr-phone {
display: inline-block;
width: 12%;
}

/*===================== 
Responsive styles 
=======================*/

@media screen and (max-width:1280px) {
#top-info {margin:0 0 3% 0}
.wrap {width:95%}
h1 {font-size:40px}
.logo {max-width:100%; float:none}
.logo img {max-width:400px}
.header-right {width:100%; float:none; margin:0 auto; box-sizing:content-box; }
#top-info {margin:0 auto}
.wrap {width:90%}
.zoom-container {width:50%}
#gal_container {width:23%;}
	#mySidenav {display:none; }
}

@media screen and (max-width:1170px) {

}

@media screen and (max-width:800px) {
.divfooter{width:80%}
}

@media screen and (max-width:768px) {
.logo {max-width:400px;margin:0 auto;}
.logo img {width:100%;max-width:100%;}
.strapline {float:none;padding:0 0 20px 0;}
.cta-btn {font-size:36px;}
.ftr-logo-surround, .ftr-logo-surround img {max-width:100%;}
.ftr-email, .ftr-phone {width:49%;}
.footer {text-align:center;}
}

@media screen and (max-width:768px) {}

@media screen and (max-width:650px) {
h3 {font-size:15px;}
.column3 {
width:100%;
float:none;
margin:0 auto
}
.midcol{margin:4em auto}
#icons .fa{margin:0 auto 20px auto}
form.search{width:100%;}
.wrap-small{width:90%; margin:0 auto}
#gal_container {width:31%;}
#top-info p {font-size:15px;}
#top-info {font-size:15px;}
}

@media screen and (max-width:500px) {
.zoom-container{width:100%}
#gal_container {width:100%;}
}


@media screen and (max-width:320px) {
.logo img {width:100%;max-width:100%;}
.strapline, .sidenav {display:none;}
.cta-btn {font-size:36px;}
.ftr-logo-surround, .ftr-logo-surround img {max-width:100%;}
.ftr-email, .ftr-phone {width:49%;}
.footer {text-align:center;}
}