/*
	Site developed by Karoline Dassie
	
	Color information
	- Light Gray: #7a7a7a, #656565
	- Dark Gray: #2f2f2f, #474747
	- Red: #e50e14
*/

/*===================== 
	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%;}


.dealer-name {color: black !important; text-align: right !important;}
.detail__title {color: black !important;}

/*===================== 
	base styles 
=======================*/
	
	body {
		font-family: 'Montserrat', sans-serif!important;
		-webkit-text-size-adjust: none;
		padding:0;
		margin: 0;
		background:#fff;
		font-size:13px;
		font-weight:normal;
		
		}
	
	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:#f1f1f1;
		margin:2em auto;
		} 
	
	img { border: 0;} 
	.center{text-align:center}
	

	.column1 {width:100%;}
	.column2 {width:47%; *width: 47%; float:left; margin-right:6%; box-sizing: border-box;}
	.column3 {width:33.33333%; *width: 30%; float:left; padding-right: 20px; 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:64%; *width: 64%; float:left; padding-right: 30px; box-sizing: border-box;}
	.onethird{width:36%; *width: 36%; float:left; box-sizing: border-box; text-align:right}
	.last{padding-right:0}
	
	
	.sitewidth{max-width:1150px; margin:0 auto}
	
/*===================== 
	typography 
=======================*/

	::-moz-selection {
		background:#656565;
		color: #fff;
		text-shadow: none;
	}
	
	::selection {
		background:#656565;
		color: #fff;
		text-shadow: none;
	}
	
	strong,b { font-weight:900;}
	
	.myh1 {
		font-size:25px;
		color:#fff;
		font-weight:900;
		line-height:normal;
		text-transform:uppercase;
		font-family: 'Oswald', sans-serif!important;
	}
	
	.myh2 {
		font-size:28px;
		color:#656565!important;
		background:#f8f8f8!important;
		font-weight:900;
		padding:0.5em 0!important;
		text-align:center;
		border:1px solid #d4d4d4!important;
		-webkit-border-radius: 5px!important;
		-moz-border-radius: 5px!important;
		border-radius: 5px!important;
		}
		
	h3 {
		font-size:17px;
		text-transform:uppercase;
		color:#e50e14;
		font-weight:bold;
		margin-bottom:1em;
		}
	
	h4{
		font-size:15px;
		color:#fff;
		text-align:center;
	}
	
	h5{
		font-size:15px;
		color:#fff;
		font-weight:300;
		margin-bottom:20px;
		text-transform:uppercase;
		}

	h6{
		font-size:18px;
		color:#000;
		font-weight:600;
		margin-bottom:10px;
		text-transform:uppercase;
		
	}
	
	p {
		font-size:14px;
		font-weight:normal;
		line-height:1.7em;
		margin: 0;
		color:#777777;
	}
	
	.hosted-content #listings-title {
		font-size: 1.8rem;
		color:#000!important
	}
/*===================== 
	link styles 
=======================*/

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

	a,
	a:link, 
	a:visited, 
	a:active {
		outline: 0;/*reset*/
		color:inherit; 
		text-decoration:underline;
		}
		a:hover  {
			outline: 0;/*reset*/
			text-decoration: none;
			color: #e50e14;
			}
			

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

	header {
		padding:1.5em 0;
		text-align:center;
		background:#fff;
		margin:0 auto;
		box-shadow: 0 0 30px #5F5F5F; 
		position:relative;
		z-index:9999;
	}
	
	.logo{float:left; width:20%}
	.logo img{
		width:100%;
		max-width:177px;
		margin:0 auto;
		display:block;
	}
	.head-right{
		float:right;
		width:80%;
		text-align:right;
		}
	.head-right p{ 
		display:inline-block;
		color:#000;
		font-size:14px;
		font-family: 'Oswald', sans-serif!important;
		text-transform:uppercase;
		margin-left:3%;
		
		}
	.head-right p .fa{
		font-size:22px;
		padding:0 10px 0 0;
		}
	.title-bg{
		background:#e50e14 url(../siteart/redbg.jpg) repeat;
		padding:2em 0;
		}
/*===================== 
	header social links 
=======================*/
	
	.sociallinks{
		text-align:center; 
		line-height:0;
		background:#8f979d; 
		padding:0.66em 0;
	}
	.sociallinks p{ 
		display:inline; 
		color:#fff; 
		line-height:0;
		margin:0 1.4%;
	}
	.sociallinks a{ 
		display:inline; 
		color:#fff; 
		line-height:0;
		text-decoration:none;
		transition:background-color 300ms ease, background-color 300ms ease, all 300ms ease;
		}
		.sociallinks a:hover{ 
			text-decoration:none;
			color: #c5cace
		}
	.sociallinks i{
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		border:2px solid #fff;
		width:22px;
		height:22px;
		line-height:22px;
		margin-right:5px;
	}
	
/*===================== 
	nav styles 
=======================*/

/* See menumaker.css */



/*===================== 
	Product Lines Section
=======================*/

	.black{background:#000}
	.half{float:left; width:46.8%}
	.margin-it-right{margin-right:5%}
	
	#border-it{border:1px solid #545454;}
	
	.lista{width:36%; float:left; margin:2% 0 2% 14%}
	.lista li{
		font-size:13px;
		font-weight:normal;
		list-style:disc;
		line-height:1.7em;
		color:#b9b9b9;
		padding-left:1em
		}
	

/*===================== 
	Parts Page
=======================*/
	
	#product td{border:1px solid #dbdbdb; padding:10px; text-align:center; margin:0 auto}
		#product p{text-align:left;}

	
/*===================== 
	Manufacturer Section 
=======================*/
	
	.manu{text-align:left}
	.manu img{margin:1.3% 0.4%; vertical-align:middle}
	.manu img a{text-decoration:none;}
	.manu a:hover{text-decoration:none;}
	
/*===================== 
	layout styles 
=======================*/
	article{background:#fff}
	
	#pad{padding:4em 0}
	.left{float:left;}
	.right{float:right;}
	.txtleft{text-align:left}
	.txtright{text-align:right}
	
	.green{color:#28947c}
	.red{color:#ff0101}
	.lightgraywrap{background:#c5cace; padding:1.5em 0;}
	.ltgbluewrap{background:#25c1f0;}
	
	.banner-home {text-align:center}
	.banner-home img {max-width:430px; margin: 0 auto; display:block}
/*===================== 
	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;}


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

/***** DETAILED SEARCH *****/

.detailed-form {
	position: relative;
	color: #000;
	background: #c5cace;
	padding: 2%;
	box-sizing: border-box;
	margin-bottom:4em;
}
.detailed-row{
	margin: 10px 0;
	font-size: 14px;
}
.detailed-search input {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #ccc;
	box-sizing: border-box;
}
.detailed-search input:focus {
	outline:none;
}
.detailed-search input[type="submit"] {
    font-size: 15px;
	font-weight:900;
	padding:8px 0;
    line-height:normal;
    background:#2f2f2f;
    width: 100%;
    color: #fff;
    display: inline-block;
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    outline: none;
    border: none;
	transition: all .2s ease-in-out; 
	-moz-transition: all .2s ease-in-out; 
	-webkit-transition: all .2s ease-in-out;
	cursor: pointer;
	position: relative;
}
.detailed-search input[type="submit"]:hover {
	background: #fff;
	color:#2f2f2f;
	outline:none;
}
.search-divide{ width: 100%; height: 1px; background: #ccc; margin: 25px auto;}


/*============================== 
	FORM
==============================*/
.form-half {
	width:50%;
	float:left;
}

#formpage{
	background:#f5f5f5; 
	border:1px #ccc solid;
	padding:1%;
	margin:2em auto;
	}

#formpage input {
	padding:8px 0;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #8e8d8d;
	color:#8e8d8d;
	font-size:12px;
	margin: 0 0 1em 0;
}

#formpage textarea {
	padding:8px 0;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #8e8d8d;
	 width:90%;
	color:#8e8d8d;
	font-size:12px;
	margin: 0 0 1em 0;
}

/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #8e8d8d;
	color:#8e8d8d;
	 width:90%;
	vertical-align:middle;
	font-size:12px;
	line-height:normal;
	padding:7px 0;
	margin: 0 0 1em 0;
}
   
#formpage input  {
    width:90%;
}

#formpage textarea {
    width:90%;
    height:80px;
}

#formpage input.checkbox {
    padding:0; 
    border:0;
    margin:0 5px 0 0;
    width:13px;
    height:13px;
    display:inline;
    background-color:#fff;
 }

#formpage input.radio {
    padding:0; 
    border:0;
    margin:0 5px 0 0;
    width:15px;
    height:15px;
    display:inline;
 }

/* focus states of various types of fields */

#formpage input:focus,
#formpage textarea:focus,
#formpage select:focus {
	background:#fff; 
	color:#000;
	border:1px solid #e50e14;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
	outline-style:none;
}
#formpage input.radio:focus,
#formpage input.checkbox:focus {
	background:none; 
	border:0;
	outline-style:none;
}
 
#formpage input.button,
#formpage input.button:focus {
	display:block;
    width:200px; 
    margin:0 auto;
    padding:7px 0;
    background:#e50e14;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
    font-size:16px;
	line-height:16px;
	font-weight:bold;
    color:#fff;
	text-transform:uppercase;
	border:1px solid #e50e14;
	transition:background-color 300ms ease, background-color 300ms ease, all 300ms ease;
}
#formpage input.button:hover {
	background:#fff;
	color:#e50e14;
	cursor:pointer
}
 
/* for plain text next to an input field, if not using a table structure */
#formpage label.basic {
	color:#212121;
	font-size:13px;
	text-align:left;
}
#formpage label.checkbox {
	/*  color:#212121;*/
	font-size:13px;
	text-align:left;
	display:inline;
	padding:0;
}
 

/*control the Captcha */

.CaptchaPanel {
	margin:1em 0 !important;
	padding:0 0 0 0 !important;
	text-align: center;
	line-height:normal !important;
}

.CaptchaImagePanel {
	margin:0 0 0 0;
	padding:0 0 0 0;
}

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

.CaptchaAnswerPanel {
	margin:0 auto;
	width:50%;
	padding:2px 0px 2px 0px !important;
}

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

/*===================== 
	LINKBOXES
=======================*/
	.container{padding:0 4%}
	
	.searchbg{
		background:#e50e14 url(../siteart/redbg.jpg) repeat;
		padding:2em 0;
		display:block;}
	
	.searchboxcontainer{
		box-shadow: 0px 2px 5px 1px rgba(0,0,0,.75); 
		margin:0 auto 2em auto;
		background: #6b0000}
	
	.invlinkbox{
		font-family: 'Oswald', sans-serif;
		float:left;
		width:14.28%;
		height:235px;
		margin:0;
		background:#6b0000;
		position:relative;
		overflow:hidden;/* Only the -webkit- prefix is required these days */
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		z-index:100;
		background-repeat:no-repeat; background-position:center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
	}
	.invlinkbox p{color:#fff; font-size:15px; }
	.invlinkbox a{color:#fff; text-decoration:none}
	.invlinkbox a:hover {color:#e50e14;}
	.invlinkbox p a {text-decoration:none}
	
	.invlinkbox::before {
		content: ' ';
		position: absolute;
		top: 200px;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.7);
	}
	
	.invlinkbox:hover::before {
		background: rgba(0, 0, 0, 0.7);
		top:0;
	}
	
	.caption__media {
		display: block;
		min-width: 100%;
		max-width: 100%;
		height: auto;
	}
	
	.caption__overlay {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		padding: 4px 10px;
		color: white;
	
		-webkit-transform: translateY(205px);
				transform: translateY(205px);
	
		transition: -webkit-transform .35s ease-out;
		transition:         transform .35s ease-out;
	}
	
	.invlinkbox:hover .caption__overlay {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
	
	.caption__overlay__title {
		transition: -webkit-transform .35s ease-out;
		transition:         transform .35s ease-out;
	}
	
	.invlinkbox:hover .caption__overlay__title {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}

/*===================== 
	About pages
=======================*/

	.staff{float:right; width:40%; text-align:center; margin:0 0 0 20px}
		.staff img{ width:100%; max-width:440px; }

	.map{width:60%; float:right;}
	
	
/*===================== 
	Financing pages
=======================*/

	.financing {
		text-align:center;
		font-size:16px;	
	}
	
	.financing a {
		text-decoration:none;	
		font-weight:bold;
	}
	
/*===================== 
	footer styles 
=======================*/
	footer {
		width: 100%;
		text-align:center;
		color:#000;
		font-weight:900;
		background:#474747 url(../siteart/gray.jpg) repeat;
		line-height:1.5em;
		padding:2em 0;
		}
	
	.bottom {
		background:#2f2f2f url(../siteart/darkgray.jpg) repeat;
		font-size: 13px;
		line-height: 24px;
		color:#bababa;
		padding:2em 0;
		}
		.bottom a{
			font-size: 13px;
			line-height: 24px;
			color: #bababa;
			text-decoration:none;
			transition:background-color 300ms ease, background-color 300ms ease, all 300ms ease;
			}
			.bottom a:hover{color: #fff; font-weight:700 }
	
	a.fb, a.lkdin{
		position: relative;
		font-size: 40px;
		margin: 0 10px 0 0;
	}
	a.fb:hover{color: #fff; }
	a.lkdin:hover{color: #fff;}
		
	a.footerlink:link,
	a.footerlink:visited, 
	a.footerlink:active {
		text-decoration: none; 
		font-size:12px;
		color:#000;
		}
		a.footerlink:hover {
			text-decoration:underline; 
			font-size:12px;
			color:#000;
			}
	
	.footertext {
		font-size:12px; 
		color:#000;
		}
	
	.smallfootertext {
		font-size:11px; 
		color:#000;
		}
	
	.divfooter {
		max-width:730px; 
		text-align:center; 
		margin:0 auto;
		color:#000;
		}
	
/*===================== 
   Responsive styles 
=======================*/

@media screen and (max-width:1150px) {
	#pad{padding:4em 1.5em}
	.container{padding:0 1.5em}
}

@media screen and (max-width:1222px) {
    .invlinkbox{
        float:left;
        width:50%;
        height:235px;
    }
    .searchboxcontainer {background: #dc0304;}
}

@media screen and (max-width:1024px) {
	.half {width:49%}
	.margin-it-right{margin-right:1%}
	.lista{width:45%; margin:2% 0 2% 5%}
	.invlinkbox p{font-size:15px}
}

@media screen and (max-width:900px) {
	header{padding:0;}
	
	.myh1, .myh2{font-size:20px; margin-bottom:8px}
	.column4 {
		width:50%;
		padding-left:0;
		margin:0 auto 15px auto;
	}
	.bottom {text-align:center;	}
	.detailed-form {padding: 1%; }
	.lista li{margin-left:7%}
	.invlinkbox{ width:50%}
}

@media screen and (max-width:880px) {
	.head-right{width:100%; float:none; text-align:center}
	.logo{float:none; text-align:center; width:100%; }
		.logo img{padding:1em 0 }
		
	.staff{float:none; width:100%; margin:0 0 20px 0 }
}

@media screen and (max-width:800px) {
	h1{font-size:16px}
	
	#pad{padding:2em 1.5em}
	.half {width:100%}
	.margin-it-right{margin-right:0; margin-bottom:3%}
	.lista{width:36%; margin:2% 0 2% 14%}
	
	.column5{width:100%; float:none; padding-right:0}
	#email.input-email {
		width: 98%;
		padding: 8px 1%;
		float: none;
		}
	#author.input-name, #lastname.input-name {
		width: 98%;
		padding: 8px 1%;
		float: none;
		margin:0 auto 1% auto;	
		}
	
}


@media screen and (max-width:650px) {
	.column2 {
		width:100%; 
		*width: 100%; 
		float:none; 
		margin:0 auto; 
		text-align:center;
	}
	
	.left, .right{float:none;}
	.txtright, .txtleft{text-align:center}
	
	.searchbg{padding:0;}
	.cycle-slideshow{display:none}
	.container{padding:1.5em}
	.searchboxcontainer{margin:0 auto 2em auto}
	
	.map{width:100%; float:none; margin:0 auto 1em auto}
	
	.form-half{float:none ; width:100%; margin:0 auto 2em auto}
	#formpage input, #formpage textarea{width:100%}
}

@media screen and (max-width:585px) {
	.twothird{
		width:100%; 
		*width:100%; 
		float:none; 
		text-align:center;
		margin-bottom:2em;
		padding-right:0;
	}
	.onethird{
		width:100%; 
		*width:100%; 
		float:none; 
		text-align:center
		}
		
}

@media screen and (max-width:500px) {
    h5{margin: 0}
	.column4 {
		width:100%;
		margin:2em auto;
		float:none;
	}
	.lista li{margin-left:10%}
	.smalllogo{display:none}
    
    .invlinkbox{
        float:none;
        width:100%;
        height:235px;
    }
    .searchboxcontainer {background: #dc0304;}
}

@media screen and (max-width:480px) {
	
	.invlinkbox{ width:100%}
}

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