/*===================== 
	Color information
	
	- Yellowish/orangish color: #F2A32D;
		 
=======================*/

/*============================ 
	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 
==============================*/
* {
	box-sizing: border-box;
}

html {
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
	}

body {
    font-family: 'Roboto', sans-serif;
	font-weight: 300;
    margin: 0;
	padding:0;
	  background-image:url("../siteart/background-color.jpg");
	  background-attachment: fixed;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	color:#000;
	overflow-x: hidden;
	line-height: 1.6;
}

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;
}
.center {
	text-align: center;
}
	
/*===== 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;
} 

img { 
	border: 0; 
	max-width:100%;
} 
	
/*============================ 
		TYPOGRAPHY
=============================*/

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto';
	font-weight: 700;
	margin: 0;
	padding:0 0 2% 0;
	line-height:1.3em;
	color:#F2A32D !important;
}
	h1 {
		font-size: 36px;
	}
	h2 {
		font-size:30px;
	}
	h3 {
		font-size: 24px;
	}
	h4 {
		font-size: 20px;
	}
	h5 {
		font-size: 18px;
	}

p {
    font-family: 'Roboto'!important;
	padding: 0 0 2% 0;
	font-size:16px;
	line-height:1.5em;
	margin: 0;
	color: white;
}

strong{
	font-family: 'Roboto'!important;
	font-weight: 700;
}
.text-black{
	color: #000000!important;
}
/*============================ 
		LINK STYLES
=============================*/

a.link:focus {
	outline: thin dotted;/*reset*/
}
	
a {
    text-decoration:none;
	color: #F2A32D;
}

a:hover  {
	text-decoration: none;
	color: #FFC46C;
} 
		
.appbutton{}

.appbutton a{
	background:#38b749; 
	padding:5px 10px;
	color:#fff; 
	border-radius:3px;
}

.appbutton a:hover{
	background:#262626;
	padding:5px 10px;
	color:#fff; 
	border-radius:3px;
}

/*============================
		HEADER STYLES 
=============================*/

header{
	width:100%;
	margin:0;
	padding:0;
	background:#fff;
	text-align:center;
	border-bottom: 6px solid #F2A32D;
}

.headerwrap{
	background-color:white;
}

.header-left {
	display: inline-block;
	position: relative;
	float: left;
	height: 150px;
	padding: 0;
	margin: 0;
	width: 32%;
}

.header-right {
	display: inline-block;
	position: relative;
	float: left;
	height: 250px;
	padding: 0;
	margin: 0;
	width: 65%;
	background-color: #000;
}

.header-row {
	margin: 0;
	padding: 0;
	display: block;
	position: relative;
	top: 0;
	width: 100%;
}

.headerwrap .row a { color: #000000; }
	.header-text {
    color: #F2A32D;
    line-height: 24px;
    letter-spacing: .15em;
	padding-top:25px;
	font-weight:600;
}

.header-pic {
	background-image: url(../siteart/header-pic-update.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: absolute;
    left: 0;
}

.nav-logo, .nav-top-right {
	display: inline-block;
	height: 140px;
}

.nav-logo {
	float:right;
	padding: 0 10px 0 0
}

.nav-top-right {
	width: 60%;
}

.small-logos, .small-logos-2 {
	height: 65px;
	background-color: black;
	position: relative;
	padding: 15px;
	top: 40px;
	margin: 0 auto;
}

.small-logos {
	width: 260px;
}

.small-logos-2 {
	width: 174px;
}

.small-logos img {
	min-height: 15px;
	margin: 0 5px 0 0;
	display: inline-block;
	float: left;
}

.small-logos-2 {
	display: none;
}

.header-text {
	color: #000000;
	line-height: 22px;
	letter-spacing: .15em;
}

/* Fix problem with link turning black on inventory pages */
#no-black a {
	color: #F2A32D !important;
}
#no-black a:hover {
	color: #FFC46C !important;
}

/*============================
		NAV STYLES 
=============================*/

/* see menu.css for nav styles */


/*============================
		CONTENT STYLES
=============================*/
.hosted-content .columns.small-12 {
    width: 25%;
    float: left;
    padding: 0;
}
.attachment-search { width: 100% !important; }
.wrapper{
	width:100%;
	margin:0 auto;
	padding:0;
	max-width: 80em;
}
.wrapper2{
	width:75%;
	margin:0 auto;
	padding:0;
	max-width: 80em;
}
.container{
	width:100%;
	max-width:1230px;
	margin:0 auto;
}

.text-col {
	padding: 10px 10%;
	z-index: 2000;
	display: block;
}
.feature-logo-bg{
	padding: 30px 0;
	background-color: #FFFFFF;
}
.feature-logo-bg a{
	padding: 0 30px;
}
/* Spinner that displays on Error Code Lookup page */
.loading-spinner {
	width: 200px;
	height: 200px;
	display: block;
	position: absolute;
	top: 360px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
}
/*============================
	Zoom container
============================*/
/* ---------- Zoom container ---------- */
.image-zoom-container {
	list-style: none;
	padding:0 7px;
}
.zoom-container {
	position: relative;
	overflow: hidden;
	display: inline-block;
	width: calc(33.33% - 1em);
	font-size: 16px;
	font-size: 1rem;
	vertical-align: top;
	box-sizing: border-box;
	float:left;
	margin:.5em;
}
.zoom-container img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}
.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; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}
.zoom-container .zoom-caption h3 {
	display:block;
	text-align:center;
	font-family:'Roboto', sans-serif;
	font-weight:700;
	font-size:22px;
	text-transform: uppercase;
	color: #fff;
	margin:55% 0 0;
	padding:10px 0;
	background:rgba(0,0,0,0.6);
	background:#000\9;
}
.zoom-container .zoom-caption .parts-options a h3 {
	display:block;
	text-align:center;
	font-family:'Roboto', sans-serif;
	font-weight:700;
	font-size:22px;
	line-height: 22px;
	text-transform: uppercase;
	color: #fff;
	margin:0 0 0;
	padding:10px 0;


}
.parts-options {
	margin: 36% 0 0 0;

}



.zoom-container:hover img {
	-webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}
.zoom-container:hover .zoom-caption {
	background: none;
}

/*============================
	SOCIAL MEDIA STYLES
============================*/

.social-dash {
	position: absolute;
	top: 90px;
	width: 60px;
	margin: 0;
	padding: 2px;
}

	.social-dash.facebook {
		z-index: 999;
		right: 1%;	
	}
	
	.social-dash.youtube {
		right: 5%;
		z-index: 999;
	}

.social-toggle {
	width: 40px;
	height: 40px;
	display: block; *zoom: 1; 
	position: relative;
	top: 2px;
	left: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

	.social-toggle.facebook {
		background-image: url(../siteart/facebook-icon.png);
	}
	
	.social-toggle.youtube {
		background-image: url(../siteart/youtube-icon.png);
	}
	

.social-window {
	width: 300px;
	position: absolute;
	right: 0;
	background-color: #fff;
	display: none;
}
 
.social-dash.facebook:hover > .social-window {
	display: block;
}

.social-window:hover > .facebook {display:block;}

.social

.social-dash.youtube:hover > .social-window {
	display: inline-block;
}

.social-window iframe:hover {
	display: inline-block;
}
 
.social-mobile {
	display: none;
	background-color: #333;
	width: 100%;
	height: 50px;
	margin: 0;
	padding-top: 15px;
	text-align: center;
	color: #fff;
}

/*============================
		TILE LINK STYLES
============================*/

.tile-links {
	width: 25%;
	margin: 0;
	padding: 0;
	position: relative;
	height: 230px;
	
	font-weight: 700;
	text-align: center;
	padding-top: 100px;
	color: white;
}

.hidden-link {
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 230px;
	display: none !important;
	font-weight: 300;
	text-align: center;
	padding-top: 40px;
	background-color: rgba(0,0,0,0.4);
	
}

.hidden-link a {
	text-transform: uppercase;
	color: #fff;
}

.hidden-link a:hover {
	color: #F2A32D;
}

.hidden-link h3 {
	color:#F2A32D;
	font-size: 20px;
}

.show-it {
	display: block !important;
}

.mobile-links {
	display: none;
}

.half-tile {
	width: 50%;
	height: 230px;
	margin: 0;
}

.half-tile.dark {
	background-color: rgba(0,0,0,0.6);
}

.half-tile.light {
	background-color: rgba(0,0,0,0.3);
}

.full-tile-bg {
	width: 100%;
	height: 230px;
	margin: 0;
	padding: 0;
	display: block;
}

.show-links-new, .show-links-pre {
	margin: 0;
	padding:0;
	float: left;
	height: 230px;
}

#new-equip {
	background: url(../siteart/tile-links/new-equip.jpg) no-repeat center center;
	background-size: cover;
}

#pre-owned-equip {
	background: url(../siteart/tile-links/pre-owned-equip.jpg) no-repeat center center;
	background-size: cover;
}

#parts {
	background: url(../siteart/tile-links/parts.jpg) no-repeat center center;
	background-size: cover;
}

#service {
	background: url(../siteart/tile-links/service.jpg) no-repeat center center;
	background-size: cover;
}
	
#parts:hover, #service:hover {
	font-size: 22px;
}

.with-hover {
	display: block;
}

.without-hover {
	display: none;
}

.hover-tile {
	overflow: hidden;
}

/*============================
	MAP/CONTACT FORM STYLES
============================*/

.map-hidden {
	display: none;
}

.show-map-1, .show-map-2 {
	background-color: #F2A32D;
	font-weight: 700;
	height: 20px;
	border-radius: 4px;
	padding: 3px;
	margin: 1px;
}

.show-map-1:hover, .show-map-2:hover {
	cursor: pointer;
	background-color: #FFC46C;
}



/*============================
	INVENTORY PAGE STYLES
============================*/

.inventory-buttons {
	height: 40px;
	width: 100%;
}

#inactive-inv {
	display: none;
}

.button {
	background-color: #F2A32D;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	width: 295px;
	display: inline-block;
	vertical-align: top;
	height: 60px;
	padding: 10px;
	font-weight: 700;
	text-align: center;
	margin: none;
	margin-bottom: 1px;
}

.button:first-child {
	margin-right: 15px;
}

.button:hover {
	cursor: pointer;
	background-color: #FFC46C;
}

.selected-btn {
	background-color: #FFC46C;
}


/*============================ 
		LAYOUT STYLES
============================*/

.sitemap{
	background:url(../siteart/escheresque_ste.png) repeat;
	color:#fff;
}

.sitemap p{
	line-height:2em;
}

.sitemap i{
	font-size:
	42px;
	margin-right:20px;
}

.thank-you {
	text-align: center;
	padding-top: 20px;
}

.thank-you h1 {
	font-size: 46px;
}

.thank-you h4 {
	color: white;
}
	
/*============================
	SCROLLING INVENTORY
============================*/

.mobilecontainer { 
	overflow:hidden; /* must have this property for mobile phones and tablet display! */
	width:100%; 
	margin:0 auto;
	height:92px; 
	padding:0;
	background:#000;
}

iframe.banner {
	width:100%;
	height:92px;
	background:#000
}

.scrolling-wrap {
    width:100%;
    height:90px;
    overflow:hidden;
}
 
.scrolling{
    width:100%;
    height:92px;
}

/*============================
		GRID LAYOUT
============================*/

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
	background-color:black;
	margin-left: 15px;
    margin-right: 15px;
}
.inven .section{background-color:white;}
/*=====  COLUMN SETUP  =====*/

.col {
	display: block;
	float:left;
	margin: 0;
}

.col:first-child { 
	margin-left: 0;
}

.hosted-content .col{
	margin:0 0 0 0 !important;
} 

/*=====  GROUPING  =====*/

.group:before,
.group:after { 
	content:""; 
	display:table; 
}

.group:after { 
	clear:both;
}

.group { 
	zoom:1; /* For IE 6/7 */ 
}

/*=====  GRID OF TWELVE  =====*/

.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
  	width: 91.5%;
}
.span_10_of_12 {
  	width: 83%;
}

.span_9_of_12 {
  	width: 75%;
}

.span_8_of_12 {
  	width: 66%;
}

.span_7_of_12 {
  	width: 57.5%;
}

.span_6_of_12 {
  	width: 50%;
}

.span_5_of_12 {
  	width: 40.5%;
}

.span_4_of_12 {
  	width: 33%;
}

.span_3_of_12 {
  	width: 25%;
}

.span_2_of_12 {
  	width: 15%;
}

.span_1_of_12 {
  	width: 6.5%;
}


/*=====  GRID OF FOUR  =====*/
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 75%;
}
.span_2_of_4 {
	width: 50%;
}
.span_1_of_4 {
	width: 25%;
}

/*=====  GRID OF THREE  =====*/

.span_3_of_3 { 
	width: 100%; 
}

.span_2_of_3 { 
	width: 66.66%; 
}

.span_1_of_3 { 
	width: 33.33%; 
}

/*============================
		FOOTER STYLES
============================*/

.pagebottom{
	background:#000;
	padding:50px 0;
	border-top:#474747 4px solid;
}

.pagebottom p{
	color:#fff;
	font-size:14px;
}

.pagebottom a{
	color:#fff;
}

.pagebottom a:hover{
	color:#ffcd07;
}

footer {
	margin: 0 auto;
	width: 100%;
}
	
a.footerlink:link,
a.footerlink:visited, 
a.footerlink:active {
	text-decoration: none; 
	font-size:11px;
	color: #fff;
	border-bottom:none;
}
	
a.footerlink:hover {
	text-decoration:none; 
	font-size:11px;
	color: #fff;
}

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

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

.divfooter {
	text-align:center; 
	margin:0 auto;
}

.footerlogo img {
	float: none;
	margin: 20px;
}

.hostedfooter {padding-left: 7%;}
.footerlogo {padding-right: 5%;}

#quickinvlinks{
text-align:center;
}
#quickinvlinks li{
display:block !important;
float:left;
padding:5px;
padding-left:15px;
padding-right:15px;
    line-height: 50px;
}
#quickinvlinks li a{
color:black;
background-color: #F2A32D;
padding:15px;
font-weight:700;
border-radius:10px;
}
#quickinvlinks li a:hover{
color:black;
background-color:rgba(255,195,45,1.00);
padding:15px;
border-radius:10px;
}
.span_9_of_122 {
  	width: 100%;
}

.pagebottom .section{background-color: black !important;}
/*============================
	  RESPONSIVE STYLE
============================*/
@media all and (max-width: 1430px) {
	nav.primary ul li a {padding: 13px 13px 11px !important;}
	.header-left, .header-pic{display:none;}
	.headerwrap .medium-4 {
    width: 33.33333%;
	}
	.headerwrap .medium-8 {
    width: 66.66667%;
	}
	header, .headerwrap{height: none !important;}
}
@media all and (max-width: 1250px) {
	.parts-options {margin: 34% 0 0 0;}	
	
}
@media all and (max-width: 1150px) {
	.zoom-container .zoom-caption .parts-options a h3 {
	display:block;
	text-align:center;
	font-family:'Roboto', sans-serif;
	font-weight:700;
	font-size:22px;
	line-height: 20px;
	text-transform: uppercase;
	color: #fff;
	margin:0 0 0;
	padding:10px 0;
}
	.parts-options {
	margin: 32% 0 0 0;
	}	
	
}
@media all and (max-width: 1000px) {
	.hide-small {
		display: none;
	}
	.button {
		width: 155px;
		font-size: 12px;
		font-weight: 400;
		padding: 14px;
	}
	.button:first-child {
		margin-right: 5px;
	}
	.button:nth-child(2) {
		width: 110px;
	}
	.zoom-container {
    width: calc(50% - 1em);
	}
	.zoom-container .zoom-caption h3 {
    margin: 40% 0 0;
	}
	.parts-options {
	margin: 22% 0 0 0;
	}
}
@media all and (max-width: 900px) {
	.headerwrap .small-12 {
    width: 100%;
	}
	.header-text {
    padding-top:0px;
}
.social-dash.youtube {right: 9%;}


	.span_3_of_12.tile-links, .span_3_of_12.show-links-new, .span_3_of_12.show-links-pre {
		width: 50%;
	}
	
	.span_2_of_4.map-contact {
		width: 100%;
	}
	.map-contact iframe {
		height: 333px;
	}
.wrapper2{
	width:100%;
}
}
@media all and (max-width: 800px) {
.logo{
	float:none;
	text-align:center;
}

.address{
	text-align:center;
	padding-top:20px;
}

h1 {
	font-size: 36px;
}

h2 {
	font-size:30px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 18px;
}

h5 {
	font-size: 16px;
}

p {
	font-size:14px;
}

	.loading-spinner {
		display: none;
	}

	
}
@media all and (max-width: 600px) {
	.zoom-container {float: none; width: calc(100% - 1em); margin: .5em 8px;}
	.zoom-container iframe {margin: 0 auto; display: block;}
	
.arrowdown{
	display:
	none;
}	

.header-text {
	size: 14px;
	line-height: 20px;
	letter-spacing: 0.08em;
}

.small-logos {
	display: none;
}
	
.small-logos-2 {
	display: block;
}

}

@media all and (max-width: 480px) {
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { 
	width: 100%; 
}

.span_3_of_3, .span_2_of_3, .span_1_of_3 { 
	width: 100%; 
}

.span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
	width: 100%; 
}		

.small-logos-2 {
	display: none;
}

.footerlogo img {
	margin: auto;
	width: 100%;
	max-width: 250px;
	margin-left: 25px;
}
	
	.footerlogo {padding-right: 0;}
	.hostedfooter {padding-left: 10%; padding-bottom: 15px;}
	
}

@media all and (max-width: 447px){
	
	body {background-attachment: inherit;}

.address h2{
	font-size:24px;
}

.pagebottom{
	padding:20px 40px;
}

.show-links-new {
	display: none;
}

.show-links-pre {
	display: none;
}

.mobile-links {
	display: block;
	margin: 0;
	float: left;
}

.mobile-links a div {
	margin: 0;
	padding: 0;
	position: relative;
	height: 230px;
	
	font-weight: 500;
	text-align: center;
	padding-top: 100px;
	color: #fff;
}

.span_3_of_12.tile-links {
	width: 100%;
}

.with-hover {
	display: none;
}

.without-hover {
	display: block;
}
	
	.button {
		font-size: 10px;
		width: 110px;
	}

}