/***** BEGIN 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;	
	/*font-family: 'Roboto', sans-serif;	*/
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 

/*Smooth transistions*/
a, button, .button, a:hover, button:hover, .button:hover, button.mobile_btn::after, #head-nav ul a, #head-nav ul a:hover, .header-right a, .header-right a:hover, .social a i, .social a i:hover, .cta-bg, .cta-bg, .cta-bg:hover, .brand-box img, .brand-box img:hover, .topnav a, .topnav a:hover, #myLinks {
    -webkit-transition:all .45s ease;
    -moz-transition:all .45s ease;
    -ms-transition:all .45s ease;
    -o-transition:all .45s ease;
    transition:all .45s ease;
} 

/*-------- COLORS --------*/

.red {
	color: #ff3600;
}

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/
a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}

/*--- HEADER STYLES ---------------------*/
header {
	background: url(../siteart/patterns/clean-gray-paper.png) #f1f1f1;
}

header .wrapper-90 {
	padding: 1.25% 0;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}

.header-left {
	width: 29%;
	text-align: left;
	font-family: 'Roboto Condensed', sans-serif;	
}

.header-center {
	width: 37%;
	text-align: center;
	padding: 0 2.5%;
}

.logo {
	width: 100%;
	margin: 0 auto;
}

.logo p{
	text-transform: capitalize;
	font-family: 'Roboto', sans-serif;	
	font-size: 14pt;
	color: #272727;
}

.logo img {
	width: 85%;
	margin: 0 auto;
}

.header-right {
	width: 29%;
	text-align: right;
	font-family: 'Roboto Condensed', sans-serif;	
}

.header-right a {
	color: #222222;
}

.header-right a:hover {
	color: #ff3600;
}

.social a {
	color: #ff3600!important;
	font-size: 17pt!important;
}

.social a:hover {
	color: #222222!important;
}

.header-left ul li, .header-right ul li {
	line-height: 1.5;
	font-weight: 700;
	font-size: 13.25pt;
}

#head-nav {
	width: 100%;
	background: #222222;
	margin: 0 auto;
	padding: .5% 0;
	font-family: 'Roboto Condensed', sans-serif;	
	text-transform: uppercase;
	font-size: 22pt;
	font-weight: 700;
	letter-spacing: .75px;
}

#head-nav ul {
	display: flex;
	justify-content: space-between;
}

#head-nav ul a {
	color: #fff;
	opacity: 1;
}

#head-nav ul a:hover {
	opacity: .7;
}

#head-nav .wrapper-80 .desktop {
	display: flex;
	}
	
	
#head-nav .wrapper-80 .mobile {
	display: none;
	}

/*---BODY--------------------------------*/
.wrapper-80 {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}

.wrapper-90 {
	width: 90%; 
	margin: 0 auto;
	text-align: center;
}

.wrapper-96 {
	width: 96%; 
	margin: 0 auto;
	text-align: center;	
}

.left-50 {
	display: inline-block;
	width: 47.4%;
	margin: 0 auto;
	text-align: left;
	padding-right: 1.5%;
}

.right-50 {
	display: inline-block;
	width: 47.4%;
	margin: 0 auto;
	text-align: right;
	padding-left: 1.5%;
}

.main-bg {
	width: 100%;
	margin: 0 auto;
	background: #fff;
}

.pg-headline {
	width: 100%;
	margin: 0 auto;
	text-align: left;
	text-transform: uppercase;
	color: #000;;
	padding: 2% 0 .5% 0;
	font-size: 1.25rem;
	border-bottom: 2px solid #ff3600;
	font-family: 'Roboto Condensed', sans-serif;	
}

.pg-content-container {
	width: 100%;
	margin: 0 auto;
	padding: 1.5% 0 2% 0;
	font-family: 'Roboto', sans-serif;	
    text-align: left;
	line-height: 1.5;
}

/*--- HOME PAGE STYLES ---------------------*/

/* ===== HERO SLIDES =====*/
#hero {
	width: 100%; 
	margin: 0 auto;
}

.hero_slider {
	width: 100%;
	margin: 0 auto;
}

.slide {
	width: 100%;
	margin: 0 auto;
}

.slide img{
	width: 100%;
	margin: 0 auto;
}

/* ===== QUICK BUTTONS =====*/
#quick-buttons {
	padding: 1.5% 0;
	background:url(../siteart/patterns/cross-stripes.png) #f1f1f1;
	width: 100%;
	margin: 0 auto;
}

#quick-buttons .wrapper-90 {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	flex-wrap: wrap;
}

.cta-bg {
	width: 100%;
	margin: 0 auto;
	opacity: .5;
	margin-bottom: -1.2%;
}

.cta-bg:hover {
	opacity: 1;
}

.cta-bg img {
	width: 100%;
	margin: 0 auto;
	-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);	
}

.cta-button {
	width: 23%;
	text-align: center;
	text-transform: uppercase;
	background: #222222;
	margin: 0 1%;
	position: relative;
}

.cta-text {
	font-size: 16pt;
	letter-spacing: .75px;
	padding: 1.5% 0;
	width: 100%;
	background: #ff3600;
	color: #ffffff;
	font-family: 'Roboto Condensed', sans-serif;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);	
	position: absolute;
	top: 40%;
}

/* ===== WELCOME =====*/
#welcome {
	width: 100%;
	background: #f1f1f1;
	padding: 2% 0;
}

.thin {
	font-weight: 300;
}

.welcome-headline {
	width: 100%;
	text-align: left;
	text-transform: uppercase;
	color: #ff3600;
	font-family: 'Roboto Condensed', sans-serif;	
	padding-bottom: 1.5%;
	font-size: 20pt;
}

.welcome-text {
	color: #222222;
	text-align: left;
	font-family: 'Roboto', sans-serif;	
	line-height: 1.25;
}

.welcome-text a {
	color: #222222;
}

/* ===== Brands =====*/
#brands {
	width: 100%;
	margin: 0 auto;
	background: #ff3300;
	padding: .5% 0;
}

#brands .wrapper-80 {
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
}

.brand-box {
	margin: 0 auto;
	padding: 5%;
}

.brand-box img {
	width: 100%;
	margin: 0 auto;
	opacity: 1;
}

.brand-box img:hover {
	opacity: .85;
}

/*-------- CONTACT STYLES ----------------*/
#service, #contact {
	background: #f1f1f1;
}

#contact .pg-content-container {
	text-align: left;
	line-height: 1.5;
}

.map {
	width: 100%;
	margin: 0 auto;
	-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
}

.map iframe {
	width: 100%; 
	margin: 0 auto;
}

.form-wrapper {
	width: 75%;
	margin: 0 auto;
}

/*-------- FOOTER STYLES ----------------*/
footer{
	background: #222222;
	color: #ffffff;
	padding: 2% 0;
	font-family: 'Roboto Condensed', sans-serif;	
}

footer a {
	color: #fff;
	opacity: 1;
}

footer a:hover {
	opacity: .7;
}

footer .wrapper-90 {
	display: flex;
	justify-content: space-between;
	vertical-align: bottom;
}

.foot-contact {
	text-align: left;
	width: 40%;
	align-self: flex-end;	
}

.footer-logo {
	width: 50%;
}

.footer-logo img {
	width: 100%;
	margin-left: -4%;
}

.foot-contact ul li {
	line-height: 1.75;
	font-size: 14pt;
}

.foot-links ul li {
	line-height: 1.5;
	font-size: 14pt;
	font-weight: 700;
}

.foot-links h6 {
	font-size: 14pt;
	text-transform: uppercase;
	color: #ff3600;
}

.foot-links {
	text-align: left;
	width: 40%;
	display: flex;
	justify-content: flex-start;
	align-self: flex-end;
}

.foot-links-left {
	width: 50%;
}

.foot-links-right {
	width: 50%;
}

.pub-foot {
	text-align: right;
	width: 20%;
	font-size: 10pt;
	align-self: flex-end;
}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/

.cf{background:#fff;}
.hosted-content .listings-wrapper .listings-list .listing-banner {

}
.hosted-content input[type='submit'], .hosted-content button[type='submit'], .hosted-content .btn, .hosted-content .button{
	background:#ff3600 !important;
}
.hosted-content h1{
	font-size:20px;
	color:#000;
	text-transform:none;
	padding-bottom:0 !important;
	font-weight:bold;
}
	
.hosted-content h3{
	text-transform:none !important;
}
.hosted-content .listings-wrapper .listings-list .listing-banner h2{
	text-transform:none !important;
}

.inventory-background {
	width: 100%; 
	margin: 0 auto;
}

.inventory-width {
	width: 90%;
	margin: 0 auto;
	padding: 2% 0 !important;
	height: auto;
}

.hs-btn.hs-highlighted {
	background-color: #f03300!important;
	color: #fff!important;
}



/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width: 1485px) {
.cta-text {
    font-size: 14pt;
    letter-spacing: 0.5px;
}
}

@media only screen and (max-width: 1370px) {
.wrapper-80 {
    width: 90%;
}	
	
.wrapper-90 {
    width: 96%;
}
	
.wrapper-96 {
    width: 98%;
}
	
#head-nav {
    padding: .75% 0;
    font-size: 20pt;
    letter-spacing: 0.5px;
}	
	
.cta-text {
    font-size: 14pt;
    letter-spacing: 0.5px;
}
}

@media only screen and (max-width: 1235px) {
.cta-button {
    width: 31%;
}

.cta-button:last-of-type {
	margin-top: 1.5%;
}	
	
#quick-buttons .wrapper-90 {
    justify-content: space-around;
}
	
}


@media only screen and (max-width: 1145px) {
footer .wrapper-90 {
    flex-wrap: wrap;
	justify-content: space-between;
}
	
.foot-contact {
	width: 50%;
}

.footer-logo {
	width: 60%;
}

.footer-logo img {
	width: 100%;
	margin-left: -4%;
}

.foot-links {
	width: 50%;
}

.foot-links-left {
	width: 50%;
}

.foot-links-right {
	width: 50%;
}

.pub-foot {
	text-align: center;
	width: 100%;
	padding-top: 3%;
}	
}

@media only screen and (max-width: 1080px) {
.header-left ul li, .header-right ul li {
    line-height: 1.25;
    font-size: 12pt;
}	
	
#head-nav {
    font-size: 20px;
    letter-spacing: 0.25px;
}	
}

/*==== MOBILE HEADER BREAKPOINT: 985px ====*/
@media only screen and (max-width: 985px) {
header .wrapper-90 {
    flex-direction: column;
}
	
.header-left, .header-center, .header-right {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}	
	
.header-right {
	margin-top: -1%;
	}	
	
.header-center {
	padding: 0%;
}	
	
.logo img {
    width: 40%;
	padding: 1% 0;
}
	
.logo p {
    margin-top: -1.25%;
    padding-bottom: 2%;
}
	
	
#head-nav {
    font-size: 15px;
    letter-spacing: 0.25px;
}	

.cta-button {
    width: 45%;
}

.cta-button:nth-of-type(3) {
	margin-top: 1.5%;
}		
}

@media only screen and (max-width: 780px) {
.logo img {
    width: 55%;
}
	
#head-nav {
    font-size: 13px;
    letter-spacing: 0px;
}		
	
.foot-contact {
	width: 100%;
	text-align: center;
}

.footer-logo {
	width: 40%;
	margin: 0 auto;
}

.footer-logo img {
	width: 100%;
	margin-left: 0%;
}

.foot-links {
	width: 100%;
	text-align: center;
	padding-top: 2.5%;
}

.foot-links-left {
	width: 50%;
}	
	
.foot-links-right {
	width: 50%;
}	
	
	.mb-hide {
		display: none;
	}	
	
.form-wrapper {
	width: 92%;
	margin: 0 auto;
}	
}

/*==== MOBILE NAV BREAKPOINT: 665px ====*/

@media all and (max-width: 665px) {
	.hider {
		display: none;
	}	

#head-nav .wrapper-80 .desktop {
	display: none;
	}
	
#head-nav .wrapper-80 .mobile {
	display: block;
	}
	
#head-nav .wrapper-80 .mobile li {
	padding: 1% 0;
	}
	
.mobile-container {
  margin: auto;
  background-color: #555;
  color: white;
}

.topnav {
  overflow: hidden;
  /*background-color: #333;*/
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  /*background: black;*/
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  /*background-color: #ddd;*/
  color: black;
}

.active {
  /*background-color: #4CAF50;*/
  color: white;
}
	
	
	
	
	
.left {
    width: 100%;
    padding-right: 0px;
    text-align: center;
	padding-bottom: 2%;
}
	
.right {
	width: 100%;
	padding-left: 0;
	text-align: center;
}	

.cta-button {
    width: 70%;
}
	
.cta-button:nth-of-type(2) {
	margin-top: 1.5%;
}	
	
#quick-buttons .wrapper-90 {
    padding: 2% 0;
}
	
.brand-box {
    padding: 2%;
}
	
#brands .wrapper-80 {
    flex-wrap: wrap;
}

.brand-box img {
    width: 80%;
}
	
	
.inventory-width {
	width: 96%;
}		
}

@media only screen and (max-width: 545px) {
.logo img {
    width: 65%;
}

.cta-button {
    width: 75%;
}

.cta-text {
    font-size: 13pt;
    letter-spacing: 0.25px;
}
	
}

@media only screen and (max-width: 515px) {
.footer-logo {
    width: 55%;
    margin: 0 auto;
		padding-top: 3.5%;
}

}


@media only screen and (max-width: 415px) {
.logo img {
    width: 75%;
}
	
.cta-button {
    width: 80%;
}

.cta-text {
    font-size: 12pt;
    letter-spacing: 0px;
}	
}