/*
	Site Developed by Karoline Dassie

	Main Colors:
	- White #fff
	- Black #141312
	- Blue #254bb6
	- Green #75d020
*/

/* ============================ 

	Reset

==============================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}
ol, ul {
	list-style: none;
}

html, body{
	 -webkit-text-size-adjust: none;
	font-size: 16px;
	line-height:1.5em;   
	background: #141312;
	font-family: 'Open Sans', sans-serif;
}
.clear{clear:both;}

/* ============================ 

	Typography
	
==============================*/

	h1{
		font-family: 'Oswald', sans-serif;
		font-size: 27px;
		text-transform:uppercase;
		font-weight:900;
		margin-bottom:15px;
		color:#75d020;
		line-height:normal;
	}
	
	h2{
		color:#254bb6;
		font-size: 20px;
		text-transform:uppercase;
		font-weight:600;
		margin-top:10px;
		color:#141312;
	}
	
	.blue h3, footer h3, #top h3{
		color:#fff;
		font-size: 15px;
		font-weight:600;
	}
	
	h4{
		color:#737373;
		font-size: 15px;
		font-weight:600;
		text-align:right;
	}
	
	.pattern p, .blue p, footer p{
		font-size: 15px;
		line-height: 1.7em;    
		color: #FFF;
	}
	
	.blue h3 a, footer h3 a, #top a {color:#fff; text-decoration: none;}
	
	footer a[href^="tel:"] { 
		color: #fff; 
		text-decoration:none;
		transition: all .2s ease-in-out; 
		-moz-transition: all .2s ease-in-out; 
		-webkit-transition: all .2s ease-in-out;
	}
	
	footer a[href^="tel:"]:hover, a:hover {color:#b7b7b7;}
	
	::-moz-selection {
		background: #686867;
		color: #fff;
		text-shadow: none;
	}
	
	::selection {
		background: #686867;
		color: #fff;
		text-shadow: none;
	}
	

/* ============================ 

	Header
	
==============================*/

	#top{background:#141312; padding:10px;}
	.top-left{float:left; text-align:left}
	.top-right{float:right; text-align:right}
	
	header{
		padding:0 10px;
		background:url(../siteart/bg.jpg) repeat-x;
		position: relative;
		z-index: 999999999999;
		background-color: #fff;
	}
	
	#logo{
		float:left;
		margin:0 0 -40px 0
	}
	
	#logo img{
		width:100%;
		max-width:380px;
	}
	
	#logo img:hover{
		transition:background-color 300ms ease, background-color 300ms ease, all 300ms ease;
		opacity:0.8
	}
	
	#contact {
		float: right;
		text-align: right;
		margin:0
	}

/* ============================ 

	Site Framework

==============================*/
	
	.wrapper{
		max-width: 1100px;
		margin: 0 auto;
	}
	
	.pad{padding:3em 0;}
	
	#right{float: right;}
	
	#two-third{
		float: left;
		width: 68%;
	}
	
	#one-third{
		float: left;
		width: 30%;
		margin-right: 15px;
	}

	.centertext {text-align:center;}
	
	.half{width:47%; *width: 47%; float:left; margin-right:6%; box-sizing: border-box;}
	.last{margin:0}
	
	.pattern{background:#000 url(../siteart/pattern.jpg) repeat}
	.green{background:#75d020; padding:3%}
	.nav-footer {color:#75d020!important}
	
	.column2 {width:47%; *width: 47%; float:right; margin-right: 6%; box-sizing: border-box; }
	.column3 {width:40%; align-content: center; box-sizing: border-box; margin:2em auto; float:none;}
	.column4 {width:23%; align-content: center; box-sizing: border-box; margin:0 auto; float:none; text-align:center;}
	.column5 {width:20%; float:left; padding-right:1%; box-sizing: border-box;}
	.column6 {width:50%; *width: 100%; 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; margin-right:0!important} 
	
/* ============================ 

	Navigation
	
==============================*/

	/*see Menu.css*/
	

/* ============================

	Scrolling Inventory
	
==============================*/
	
	.scrolling-wrap {
		height:90px;
		overflow:hidden;
		width:100%;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	 
	.scrolling{
		width:100%;
		height:92px;
	}

/* ============================  

	Content
	
==============================*/

	.cycle-slideshow{
		width: 100%;
		height: auto;
	}
	
	.cycle-slideshow img{
		width: 100%;
		height: auto;
	}
	
	#image{
		text-align: center;
		margin: 25px auto;
	}

	article{margin: 0 auto;}
	
	.white{background:#fff}
	.blue{background:#254bb6; padding:15px;}
	.blue-left{float:left;}
	.blue-right{float:right;}
	
	#divider{border-top:3px solid #222222;border-bottom:4px solid #000; }
	
	.fina img { max-height:55px; margin:0 auto; text-align:center; vertical-align:middle;}
	.fina .half{border:1px solid #254bb6; vertical-align:middle; margin:0 auto; text-align:center; padding:20px 0}
	
	
/* ============================  

	Table
	
==============================*/
	#mesa{color:#fff!important; width:100%; }
	#mesa td{ border:1px solid #494949; background:#000;padding:5px 30px; }
	#mesa p, #mesa a{color:#fff!important; text-decoration: none;}
	#mesa a:hover{color:#75d020!important}

/* ============================ 

	Form

==============================*/
	
	#formpage {vertical-align:top; text-align:center; width:100%; margin:0 auto}
	
	#formpage input {
		padding:6px 2%;
		border:1px solid #ccc;
		color:#8e8d8d;
		font-size:12px;
		margin-top:6px;
		width:95%;
		text-align:center;
	}
	
	#formpage textarea {
		padding:6px 2%;
		margin-top:6px;
		border:1px solid #ccc;
		color:#8e8d8d;
		font-size:12px;
		width:95%;
		text-align:center;
	}
	 
	/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
	#formpage select {
		border:1px solid #ccc;
		color:#8e8d8d;
		vertical-align:middle;
		font-size:12px;
		line-height:normal;
		padding:5px;
	}
	 
	#formpage textarea {height:85px;}
	
	#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:#686867;
		border:1px solid #ccc;
		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 {
		cursor:pointer;
		margin:15px auto;
		width:99%;
		border:2px #fff solid;
		background:#254bb6;
		box-shadow: 0 0 3px #ccc;
		text-transform:uppercase;
		font-size: 18px;
		font-weight: normal;
		color:#fff;
		line-height:2em;
		text-align:center;
		padding:0 2%;
	}
	
	#formpage input .button:hover, #formpage input.button:hover {
		background:#fff;
		border: #254bb6 2px solid!important;
		color:#141312;
	}
	
	/* 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 {
		font-size:13px;
		text-align:left;
		display:inline;
		padding:0;
	}
	
	/*control the Captcha */
	
	.CaptchaPanel {
	margin:0 0 0 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 0 0 0;
	padding:2px 0px 2px 0px !important;
	}
	
	.CaptchaWhatsThisPanel {
		line-height:0;
		margin:0 0 0 0;
		padding:8px 0 8px 0 !important;
	}
	.CaptchaWhatsThisPanel a {color:#141312;}
	.CaptchaWhatsThisPanel a:hover {text-decoration:none;}  

	#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.radio:focus,
	#formpage input.checkbox:focus {
		background:none; 
		border:0;
		outline-style:none;
	}
	 
	
	
	/* 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;
	}
	 
 
 
        
 /* ============================ 

	Frameless Inventory
	
==============================*/
	
	.hosted-content h1{color:#254bb6}
	
	.hosted-content h5{font-size:17px; color:#8E8E8E; text-align:left}
	.hosted-content h5 a{font-size:20px; color:#8E8E8E}
	body .full .has-quote-forms #listing-bottom-information{width:100%!important;}
	.hosted-content .p-tb-10{padding:0!important}
	.hosted-content h3 { font-size: 20px!important}
	

        
 /* ============================ 

	Footer
	
==============================*/

	a.footerlink:link, a.footerlink:visited, a.footerlink:active{text-decoration:underline;font-size:11px; color:#737373}
	a.footerlink:hover {text-decoration:none;font-size:11px;}
	.footertext{font-size:11px; color:#737373;}
	.smallfootertext{font-size:11px; color:#737373;}
	
	.divfooter {width:100%; text-align:left; margin:0 auto;line-height:1.1em; color:#737373;}
	
	.menu-bottom{padding:10px 0; text-align:right; text-transform:uppercase}


/* ============================

	Responsive Styles

==============================*/

@media screen and (max-width: 1280px) {
	.wrapper{width:90%; margin:0 auto}
}

@media screen and (max-width: 1025px) {
	header{padding:0; background:#75d020}
	#logo img {margin:0 auto; display:block;max-width:220px;}
	#logo{
		float: none;
		width: 100%;
		margin: 0 auto;
		z-index:99999;
		position:relative;
	}
	#contact{margin: 0 0 0}
	.top-right{display:none}
}

@media screen and (max-width: 910px){
	
	#two-third{
		float: none;
		width: 100%;
		margin: 0 auto;
		border-right: none;
	}
	
	#one-third{
		float: none;
		width: 100%;
		margin: 0 auto 10px auto;
		border-right: none;
	}
	
	#footer-fourth{
		float: none;
		margin-top: 25px;
		margin-left: 0;
		width: 100%;
	}
	.pad{padding:2em 0}
	.top-left{float:none; margin:0 auto; text-align:center}
	.top-right{float:none; margin:0 auto; text-align:center}
}


@media screen and (max-width: 795px) {
	h4{text-align:center; margin:0 auto 15px auto}
	h1{text-align:center}
	p{text-align:center}
	header{padding:0; background:#75d020}
	
	
	#contact a:hover{color:#b7b7b7!important}
	#contact h1{font-size:21px}

	
	#one-fourth{
		float: none;
		width: 213px;
		margin: 0 auto;
	}
	
	.equipment-gallery .gallery-item{width:33.33%;}
	.equipment-gallery .gallery-item img { height: 80px;}
	
	.yellow{padding:2em 3%;}
	a.featbtn {display:block; width:94%;  font-size:21px; padding:15px 0}
	
	.half{width:100%; *width: 100%; float:none; margin:0 auto}
	.last{margin:0 auto}
	
	.column2{float:none; margin:0 auto; text-align:center; width:100%}
	.divfooter {margin:0 auto; text-align:center; }
	.menu-bottom{ text-align:center}
	
	.blue-left{float:none; margin:0 auto; text-align:center}
	.blue-right{float:none; margin:0 auto; text-align:center}
	#mesa td{ border:1px solid #434343; padding:5px 0; display:block; width:98%}
}
 
 
@media screen and (max-width: 520px){
	.equipment-gallery .gallery-item{width:100%;}
	.equipment-gallery .gallery-item img { height: 60px;}
	h3 a{font-size:13px;}
	h3{font-size:13px;}
	#top{display:none}
	header{padding:0;}
		#logo img {width:100%; max-width:100%;margin:0 auto; display:block;}
		.fina img { max-height:none;height:auto; width:90%; max-width:100%}
}

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