﻿/***** 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;	
}

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;  
} 

/*-------- COLORS --------

*/

/***** 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 --------*/

html {
  scroll-behavior: smooth;
}

body {}

h1{font-family: 'Teko', sans-serif; font-size: 50px;}
h2{font-family: 'Teko', sans-serif; font-size: 30px;}
h3{font-family: 'Teko', sans-serif; font-size: 25px;}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}

/*--- HEADER STYLES ---------------------*/
header {}
.mobile{display:none;}
#menu-button{display:none;}
nav.primary-menu{padding:0;
	margin:0;
	z-index: 500;
	position:relative;}

.tosch-header{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
	padding: 20px 60px;
	max-height: 120px;
}

.grey-bg-header{background-color: #1e1a1b;}
.logo img{max-height: 58px;}

nav ul li a{
	color: white;
    font-size: 20px;
    padding-left: 30px;
	font-family: 'Teko', sans-serif;
	font-weight: 600;
	-webkit-transition:.4s ease-in;  
	-moz-transition:.2s ease-in;  
	-o-transition:.2s ease-in;  
	transition:.2s ease-in;
}

nav ul li a:hover{color: #cccccc;}

.horizontal-menu{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}

	/* Appearance of the sub-level links */
			nav.primary-menu ul li li a { 
				font-size:19px;
				line-height:16px;
				padding:10px;
				color:#fff;
				text-align:left;
				border-right:none;
				border-left:none;
			}
			/* Appearance of the sub-level links on hover */
			nav.primary-menu ul li li a:hover { 
			}
/* This controls the Primary nav dropdowns for sublinks. Should not have to edit this too muuch */
nav.primary-menu ul ul {
    display: none;
    position: absolute; 
}
nav.primary-menu ul ul ul {
    position: absolute; 
    left: 100%;
    top:0; 
}
nav.primary-menu ul li:hover > ul {  
    display: block;
    line-height:18px; 
    z-index: 100;
	    padding-left: 23px;
    padding-top: 36px;
}
nav.primary-menu ul ul li {
    float: none; 
	width: 270px;
    position: relative;
    margin:0;
	display: block;
	background: #1e1a1b;
	padding: 5%;
	border-bottom: #303030 solid 1px;
	-webkit-transition:.4s ease-in;  
	-moz-transition:.2s ease-in;  
	-o-transition:.2s ease-in;  
	transition:.2s ease-in;
}
nav.primary-menu ul ul li:hover{
	background:  #ee1c24;
}

/*---BODY--------------------------------*/

	/*==============================
		     	HOME PAGE			
	================================*/
.hero{
	text-align: center; 
	background: url("../siteart/img/hero.jpg"); 
	background-color:#000;
	background-attachment: fixed; 
	height: 590px;
	position: relative;
	background-position: 50% 82%;
    background-repeat: no-repeat;
   background-size: cover;

}
.hero-title{
	position: relative;
    color: white;
    text-align: center;
	letter-spacing: 5px;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*********   browse our product categories   *********/
.product-category{background: #ee1c24; padding: 2.5% 3%;  }
.product-category h2{ color: white; padding: 0% 0% 1% 6%; letter-spacing: 2px;}
.product-wrap{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
    width: 100%;
}
.product{
	display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
    width: 11%;
    padding: 0px 7%;
    border-right: 1px white solid;
}
.product img{width: 100%;-webkit-transition:.4s ease-in;  
	-moz-transition:.3s ease-in;  
	-o-transition:.3s ease-in;  
	transition:.3s ease-in;}
.product img:hover{transform: scale3d(1.1,1.1,1); cursor: pointer;}
.product p{font-family: 'Teko', sans-serif; color: white; font-size: 22px;letter-spacing: 3px; text-align: center; line-height: 24px;}

/*********   welcome to tosch's equipment sales   *********/
.welcome{
	height: 700px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
    width: 100%;
}
.welcome-left{
	width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: baseline;
    align-content: stretch;
}
.shape{
	width: 35vw;
    height: 27vw;
    transform: skew(-24deg);
    background: #1e1a1b;
    position: absolute;
    left: -14%;
    z-index: -1;
/*	top: -19%;*/
}
.welcome-left img{
	width: 58%;
	height: 100%;
    z-index: 0;
    padding-left: 18%;
}
.welcome-right{width: 50%;}
.welcome-right h2{
	color: #ee1c24;
    line-height: 32px;
	letter-spacing: 2px;
}
.welcome-right p{
	font-family: 'Montserrat';
    padding-right: 18%;
    line-height: 23px;
    font-size: 18px;
	padding-bottom: 1%;
}
.welcome-right a{
	color: #C80B12;
	font-family: 'Teko';
    font-size: 21px;
	letter-spacing: 2px;
    border: 2px solid #C80B12;
    padding: 0.3% 3%;
    border-radius: 10px;
	-webkit-transition:.4s ease-in;  
	-moz-transition:.2s ease-in;  
	-o-transition:.2s ease-in;  
	transition:.2s ease-in;
}
.welcome-right a:hover{background:#ee1c24; color:white; }

/*********   brands we work with   *********/
.brands{
	background: #cccccc;
    height: 400px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    align-content: stretch;
    padding: 0 9%;}
.brands h2{ letter-spacing: 2px; padding-bottom: 1%;}
.brands-wrap{background: white; width: 100%; box-shadow: 0px 10px 16px #aaaaaa; }
.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: stretch;}
.slick-slide img{width:100%;}

/*********   map section   *********/
.map{border-top: 5px solid #ee1c24; border-bottom: 5px solid #ee1c24; width: 100%; }
.i4ewOd-pzNkMb-haAclf { background-color: #ee1c24!important;}


	/*==============================
			SUB PAGE HEADER		
	================================*/

.page-top-img{
	text-align: center; 
	background: url("../siteart/img/hero.jpg"); 
	background-color:#000!important;
	background-attachment: fixed; 
	height: 400px;
	position: relative;
	background-position: 50% 114%;
    background-repeat: no-repeat;
   background-size: cover;
}
.page-title{
position: relative;
    color: white;
    text-align: center;
	letter-spacing: 5px;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);}

.page-title h1 {color: white;  letter-spacing: 5px; }

	/*==============================
			   STORE PAGE			
	================================*/


	/*==============================
			  ABOUT US PAGE			
	================================*/
.about-info{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
	width: 90%;
    background: white;
    padding: 5%;
}
.about-info img{width: 30%; height:100%;}
.about-info p{width: 50%; padding: 5%; font-size: 17px; font-family: 'Montserrat'; line-height: 24px;}
.team{background: #ee1c24; padding: 5%;}
.team h2{text-align: left; color: white;  letter-spacing: 3px; padding: 3% 4%; padding-top: 0;}
.team-content{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 92%;
    padding: 0% 4%;
}
.member{
	text-align: left;  
	color: white;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
	width: 45%;
    background: #cccccc;
	margin-bottom: 5%;
}
.member img{ width: 19vw; height: 100%;}
.member-content{width:42%; padding:4.5% 5%;}
.member-content h3{font-size: 2vw!important;letter-spacing: 1px; color:#000;}
.member-content p{font-family: 'Montserrat';  font-size: 1.1vw; color:#000;}
.member-content a{color: white; color:#000;}
.member-content a:hover{cursor: pointer;}

	/*==============================
			  SERVICES PAGE			
	================================*/

.service-wrap{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	align-content: stretch;
	padding: 5% 9%;
}
.service-button{padding: 3%;}
.service-wrap a{background-color: white; font-family: 'Teko'; color: black; font-size: 26px; letter-spacing: 3px; padding: 3px 24px; border: 1px solid black; border-radius: 10px; -webkit-transition:.4s ease-in;  -moz-transition:.2s ease-in; -o-transition:.2s ease-in; transition:.2s ease-in;}
.service-button a:hover{color: white; background: #ee1c24; border: 1px solid #ee1c24;}
.consign-form{ background: #cccccc; padding: 3% 5%; }

	/*==============================
			 CONTACT US PAGE			
	================================*/

.contact{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #ee1c24;
}

.map-left{
	width: 50%;
    height: 450px;
}
.contact-info{width: 50%;}
.contact-contents{padding: 8%; color: white; text-align: center;}
.contact-contents h2{letter-spacing: 2px;}
.contact-contents p{font-size: 18px; font-family: 'Montserrat';}
.contact-contents a{color: white;}
.contact-contents a:hover{cursor: pointer; }

	/*==============================
			 THANK YOU PAGE			
	================================*/
.thank-you{background: white;}
.ty-wrapper{padding: 5%;}
.ty-wrapper h2{letter-spacing: 2px;}
.ty-wrapper p{font-size: 18px; font-family: 'Montserrat';}
.ty-wrapper a{color:black; }
.ty-wrapper a:hover{color:#ee1c24;  cursor:pointer;}

/*--------FORM STYLES--------------------*/
.form-bg{background: white; padding: 3% 5%;}
.form-text h2{font-size: 30px !important; color: black; letter-spacing: 2px; line-height: 28px;}
.form-text p{font-size: 19px ; color: black; font-family: 'Montserrat';}
.form-text a{color: black; -webkit-transition:.4s ease-in; -moz-transition:.2s ease-in; -o-transition:.2s ease-in;transition:.2s ease-in;}
.form-text a:hover{color: #ee1c24;}
.contact-form-wrap{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    align-content: stretch;
    padding: 4%;
}
.form-text{width: 30%; color: black;}
.form-main{ width: 70%; padding-left: 5%; padding-right: 1.5%; color: black;}
.form-row{font-family: 'Montserrat'; font-size: 12px;}
.form-row input{width:100%; margin-bottom: 15px; padding: 7px;font-family: 'Montserrat';}
.form-row h4{padding-bottom: 8px;}
input.radio{width: auto; font-family: 'Montserrat'; }
textarea{width:100%; font-family: 'Montserrat'; padding: 7px;  margin-bottom: 15px;}
input.bttn-base, .bttn-green {
	padding: 0.5% 0%;
    font-family: 'Teko';
    background: white;
    text-decoration: none;
    border: black solid 1px;
	width:100%;
	font-size: 18px;
	letter-spacing: 2px;
	text-transform:uppercase;
}
.CaptchaPanel {
    margin: 10px 0px 10px 0px;
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0 !important;
}
.CaptchaMessagePanel {
    padding: 5px 5px 10px 5px;
    font-weight: 400;
    font-size: 14px;
    font-family: 'Montserrat';
	text-align: left;
}
.CaptchaWhatsThisPanel a {
    padding: 5px 5px 10px 5px;
    font-size: 12px;
	font-family: 'Montserrat'!important;
    color: black !important;
}

@media only screen and (max-width: 968px){
	.form-text h2{font-size: 26px !important; line-height: 24px;} 
	.form-text p{font-size: 16px ;}
}
@media only screen and (max-width: 768px){
	.contact-form-wrap{
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: baseline;
		align-content: stretch;
	}
	.form-text {width: 100%; padding-bottom: 5%;}
	.form-main {width: 100%; padding-left: 0;}
	.form-row input {width: -webkit-fill-available;}
	textarea {width: -webkit-fill-available;}
	input.bttn-base, .bttn-green {width: -webkit-fill-available;}
}
@media only screen and (max-width: 425px){
	.form-bg { padding: 4% 2%;}
	.contact-form-wrap{padding: 8%;}
	.form-text {padding-bottom: 11%;}
	.form-text h2 { font-size: 23px !important; line-height: 21px;}
	.form-text p { font-size: 14px;}
	.CaptchaMessagePanel { font-size: 3.6vw;}
	.CaptchaWhatsThisPanel a { font-size: 2.7vw;}
}

/*-------- FOOTER STYLES ----------------*/
footer{}
.footer{padding: 60px;}
.grey-bg-footer{background-color: #1e1a1b;}

.column-wrap{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	align-content: stretch;
	width: 100%;
}

.column{width: 20%;color: white;}
.column h3{letter-spacing: 1px;}
.column p{font-size: 14px; font-family: 'Montserrat', sans-serif;} 
.column ul li {padding-bottom: 5px; font-family: 'Montserrat', sans-serif;}

.column ul li a{
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	color: white;
	padding-bottom: 5px;
	-webkit-transition:.4s ease-in;  
	-moz-transition:.2s ease-in;  
	-o-transition:.2s ease-in;  
	transition:.2s ease-in;
}

.column ul li a:hover{color: #87949a;}

.column a {
	font-family: 'Montserrat', sans-serif;
	color: white;
	-webkit-transition:.4s ease-in;  
	-moz-transition:.2s ease-in;  
	-o-transition:.2s ease-in;  
	transition:.2s ease-in;
}
.fa {font-size: 21px!important;}
.column a:hover {color: #87949a;}
.column img{max-width: 80%;}






/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/

.hosted-content .attachment-search .search-checkboxes label .row {margin-left:0 !important;margin-right:0 !important;margin-bottom:0px !important;}

.list-content .list-main-section .list-container .list-listing .listing-top-right .view-listing-details-link, .faceted-search-content .selected-facets-container .selected-facet, .list-content .list-listing-mobile .view-listing-details-link, .list-content .list-listing-mobile .buy-now-link, .list-content .list-listing-mobile .check-availability-link, .list-content .list-listing-mobile .email-seller-link, .detail-content .detail-main-body .main-detail-data .offer-btn, .detail-content .detail-main-body .main-detail-data .buy-btn, .detail-content-mobile .detail-main-body .main-detail-data .dealer-phone-mobile-container .dealer-phone-mobile, .detail-content-mobile .detail-main-body .main-detail-data .offer-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .send-email-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .send-wholesale-email-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .fin-calc-btn-mobile, .list-container-flexrow .view-listing-details-link {background:#ee1c24!important; }
.list-content .list-title .list-title-text, .detail-content-mobile .detail-main-body .detail-mobile-top .detail-title {font-size: 22px; line-height: 26px;}

.detail-content .detail-additional-data .data-row .data-label, .detail-content-mobile .detail-additional-data .data-row .data-label {background: #ee1c24 !important;text-transform: uppercase; letter-spacing: 1px;}
.detail-content-mobile .detail-contact-bar .contact-bar-btn, .faceted-search-content .mobile-done-button-container .mobile-done-button {background: #000 !important;}

.detail-content .detail-main-body .main-detail-data .offer-btn, .detail-content .detail-main-body .main-detail-data .buy-btn {float:none;}
.list-content .list-title .list-listings-count{color:#ee1c24!important; }
.list-content .list-main-section .list-container .list-listing .listing-top .listing-top-left .listing-main-stats .price{color:#ee1c24!important; }
.detail-content .search-results{color:#ee1c24!important; }
.detail-content .dealer-info .phone-and-email .send-email-btn{ color:#ee1c24!important; border: 1px solid #ee1c24!important; }
.body-wrapz {padding: 5%;}
.list-content .list-title .list-title-text {font-family: 'Teko',sans-serif !important; text-transform: uppercase;}

@media only screen and (max-width: 874px){ .body-wrapz {padding: 15% 5% 10% 5%;} }
@media only screen and (max-width: 500px){ .body-wrapz {padding: 20% 5% 10% 5%;} }
@media only screen and (max-width: 425px){ .body-wrapz {padding: 25% 7% 10% 7%;} }
@media only screen and (max-width: 320px){ .body-wrapz {padding: 30% 7% 10% 7%;} }

/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 2560px) {
	.welcome{ height: 850px;}
	.page-top-img{
		text-align: center; 
		background: url("../siteart/img/hero.jpg"); 
		background-attachment: fixed; 
		height: 400px;
		position: relative;
		background-position: bottom;
		background-repeat: no-repeat;
	   background-size: cover;
	}
}

@media only screen and (max-width: 2250px) {
	.welcome{ height: 700px;}
}

@media only screen and (max-width: 2000px) {
	.welcome{ height: 700px;}
	
}

@media only screen and (max-width: 1880px) {
	.welcome{ height: 700px;}
	.page-top-img{
		height: 300px;
		background-position: bottom;
	   background-size:auto;
	}
}

@media only screen and (max-width: 1440px) {
	.hero{background-repeat: no-repeat; background-position: 50% 82%; background-size: auto;}

	.welcome{ height: 600px;}
	.shape{width: 35vw; height: 31vw;}
	.welcome-left img {width: 65%; height: 100%;}
	.welcome-right p{font-size: 16px;line-height: 21px;}
	
	.brands{height: 300px;}
	
}

@media only screen and (max-width: 1230px){
	.page-title h1{font-size: 40px!important;}
}

@media only screen and (max-width: 1085px) {
	.logo img{max-height: 38px;}
	nav ul li a{font-size: 17px;}
	nav.primary-menu ul li:hover > ul {padding-top: 29px;}
	nav.primary-menu ul ul li {width: 121px; padding: 8% 7%;}
	nav.primary-menu ul li li a {font-size: 16px;}
	
	.hero-title h3{font-size: 22px!important;}
	.hero-title h1{font-size: 45px!important;}
	
	.product-category h2{font-size: 25px!important;}
	.product p{font-size: 17px; line-height: 20px;}
	
	.welcome{ height: 500px;}
	.shape{width: 37vw; height: 35vw;left: -18%;}
	.welcome-left img {width: 73%; height:100%;}
	.welcome-right h2{line-height: 24px; font-size: 24px!important;}
	.welcome-right p {font-size: 14px;line-height: 20px;}
	.welcome-right a{font-size: 17px;}
	
	.brands{height: 265px;}
	.brands h2{font-size:25px!important;}
	
	/********	sub pages css  ********/
	
	/*	about page   */
	.about-info img { width: 36%;}
	.about-info p {font-size: 16px; line-height: 21px;}
	.member{flex-direction: column;}
	.member img {width: 100%;}
	.member-content {  width: 80%; padding: 9.5% 10%;}
	.member-content h3 { font-size: 2.5vw!important;  letter-spacing: 2px;}
	.member-content p { font-size: 1.5vw;}
}

@media only screen and (max-width: 968px){
	.column h3{font-size:21px!important;}
	.column a {font-size: 11px;}
	.column p{font-size: 11px;}
	
	.welcome-right p { font-size: 13px;line-height: 16px;}
}

@media only screen and (max-width: 940px) {
	
	.primary-menu{display:none;}
	/*==============================
			Mobile Nav Styles			
	================================*/	
	.tosch-header{position: absolute; z-index: 1; padding: 20px;}
	.grey-bg-header{background: transparent;}
	#menu-button{ /* initially will need to be hidden */
		display: block;
		font-size: 32px;
		z-index: 9;/* needs to be lower than nav.mobile, adjust as needed */
		padding-top: 3%;
		background:transparent;
		text-align: center;
		text-align: right;
		position: absolute;
		width: 100%;
	}
	#menu-button a{color:black;text-decoration: none; padding: 5%;}
	#menu-button a:hover{color:#6d8392;}
	
	nav.mobile {
		display:block;
		position: fixed;
		top: 0;
		left: -250px;
		width: 250px;
		height: 100%;
		background: #1e1a1b;
		z-index: 9999999999; /* needs to be higher than #menu-button, adjust as needed */
		overflow:auto;
	}
	nav.mobile h3 { /* Menu header styles */
		position: relative;
		padding: 12px 10px;
		color: #fff;
		font-size: 22px;
		font-weight: normal;
		border-bottom: 4px solid #222;
		letter-spacing:1px;
	}
	nav.mobile .menu-toggle { /* Menu close button */
		position: absolute;
		top: 12px;
		right: 10px;
		display: inline-block;
		padding: 6px 9px 5px;
		font-family: Arial, sans-serif;
		font-weight: bold;
		line-height: 1;
		background:  #1e1a1b;
		color: #cccccc;
		text-decoration: none;
		vertical-align: top;
	}
	nav.mobile .menu-toggle:hover { /* Menu close button on hoveer */
		color: white;
	}
	nav.mobile ul {
		list-style: none;
		font-weight: 300;
		margin:0;
		padding:0;
	}
	nav.mobile ul li {
/*
		border-top: 1px solid #454545;
		border-bottom: 1px solid #151515;
*/
	}
	nav.mobile ul li a {
		position: relative;
		display: block;
		padding: 15px;
		text-decoration: none;
		font-size: 17px;
    	letter-spacing: 1px;
	}
	nav.mobile ul li a:hover {
		background:  #ee1c24;
		color: white;
	}
	nav.mobile ul li li a { /* appearance of the sub-level links */
		background: #444;
		position: relative;
		display: block;
		padding: 10px 10px 10px 15px;
		color: #ccc;
		text-decoration: none;
	}
	nav.mobile ul li li li a { /* appearance of third level sub-level links if needed */
		background: #666;
		position: relative;
		display: block;
		padding: 10px 10px 10px 25px;
		color: #000;
		text-decoration: none;
	}
/*
	nav.mobile ul li span.click{ dropdown menu idicator arrow be sure to include this image with your image files  
		background:url(../siteart/arrow.png) 10px 12px no-repeat;
		background-size:55%;
		position:relative;
		display:block;
		float:right;
		margin:-44px 0 0 0;
		cursor:pointer;
		z-index: 12399994;
		width:44px;
		height:44px;
		-webkit-transition:background-size .3s ease-in-out;
		-moz-transition:background-size .3s ease-in-out;
		transition:background-size .3s ease-in-out;
	}
	nav.mobile ul li span.click:hover{
		background-size:60%;
	}
	
*/
	.nav-footer{
		font-family: 'Teko', sans-serif;
		font-weight: 400;
		color: #87949a;
		padding: 15px;
		text-align: center;
		font-size: 14px;
		letter-spacing: 1px;
	}
	
	/*  	end of Mobile Nav Styles    */
	.hero{background-repeat: no-repeat; background-position: bottom; background-size: auto;}
	.hero-title{padding-top: 5%;}
	.hero-title h3{font-size: 2.5vw!important;}
	.hero-title h1{font-size: 5vw!important;}
	
	.product-category {padding: 4.5% 2%;}
	
	.welcome{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		align-content: stretch;
		    height: 96vw;
	}
	.welcome-left{width: 60%; padding: 10% 0; height:100%;}
	.shape {
		width: 51vw;
		height: 39vw;
		left: -49%;
		padding-bottom: 0;
	}
	.welcome-left img { width: 73%; padding-left: 0; height: 100%; object-fit: contain;}
	.welcome-right{padding-left: 50%; padding-bottom: 0%; height:100%;}
	.welcome-right h2 {line-height: 3vw; font-size: 3.2vw!important;}
	.welcome-right p {font-size: 1.7vw; line-height: 2vw;}
	.welcome-right a {font-size: 2vw; border-radius: 6px;}
	
	/********	sub pages css  ********/
	.page-top-img{height: 450px; }
	.page-title h1{padding-top: 5%;}
	
	/*	about us page  */
	.about-info{align-items: flex-start;}
	.about-info img{padding-top: 5%;}
	.about-info p{padding-right: 0;}
	
	/*	service page   */
	.service-wrap{padding: 8% 9%;}
	.service-button { padding: 5%;}
	
	/*	auction page  */
	.auction-wrap{padding-top: 10%;}
	
	/*	contact us page  */
	.contact-contents{padding: 17%;}
}
	
@media only screen and (max-width: 768px) {
	.product-category {padding: 4.5% 2%;}
	.product-category h2{font-size: 19px!important; padding: 0% 0% 2% 6%;}
	.product p{font-size: 14px; line-height: 15px;}
	
	.welcome-right{ padding-bottom: 3%;}
	
	.brands {height: 220px;}
	.brands h2{font-size:19px!important;}
	
	/********	sub pages css  ********/
	
	/*	thank you page  */
	.ty-wrapper{padding: 7%;}
	
	/*	auction page  */
	.auction-wrap{padding-top: 10%;}
	
	/*	footer styles   */
	.footer { padding: 12%;  padding-bottom: 1px;}
	.column-wrap{ flex-direction: row;flex-wrap: wrap; justify-content: space-between;  align-items: flex-start; align-content: center;}
	.column{width: 42%;padding-bottom: 19%; text-align: center;}
	.column ul li { text-align: center;}
	.column a { text-align: center;}
	.column p { text-align: center;}
	/*	end of footer styles   */	
}

@media only screen and (max-width: 650px){
	.welcome{height:100vw;}
	.brands {height: 200px;}
	
	.page-title h1 {padding-top: 10%;}
	
	/*	contact us page  */
	.contact{flex-direction:column-reverse; }
	.map-left{width: 100%;}
	.contact-info { width: 100%;}
	.contact-contents{padding: 10%; text-align: left;}
	.contact-contents h2{font-size: 25px!important;}
	.contact-contents p{font-size: 15px;}
	
	/*	about us page  */
	.team h2{ font-size: 5.5vw!important; text-align: center; padding-top: 4%; padding: 4%;}
	.team-content{flex-direction: column; width: 92%;}
	.member{margin-bottom: 8%; width: 75%; height:100%;}
	.member-content h3 {font-size: 4vw!important;}
	.member-content p { font-size: 2.5vw;}
	
	/*	services page  */
	.service-wrap{text-align: center; flex-direction: column; align-content: stretch; align-items: center;}
	.service-button a{border: none; background: transparent; padding: 0 3%;}
	.service-button a:hover{border: none; padding: 0 3%; background: transparent; }
	.service-button{padding: 0; margin: 3%; border: 1px solid black; border-radius: 10px; width: 86%; -webkit-transition:.4s ease-in;  -moz-transition:.2s ease-in; -o-transition:.2s ease-in; transition:.2s ease-in;}
	.service-button:hover{background: #ee1c24; color: white; border: 1px solid #ee1c24;}
}

@media only screen and (max-width: 500px){
	nav.mobile { left: -100%; width: 100%;}
	.hero{height: 565px;}
	
	.product-category h2 {font-size: 4vw!important; padding: 3%;text-align: center;}
	.product-wrap {flex-direction: column;}
	.product{width: 40%; padding: 5%;border-right: 0px; height:100%;}
	
	.welcome {height: 141vw;}
	.shape { height: 46vw; left: -52%;}
	.welcome-left img { width: 84%; padding-left: 8%; height:auto; min-height: 30%;}
	.welcome-right {padding-left: 43%;padding-right: 7%; padding-bottom: 10%;}
	.welcome-right h2 {line-height: 18px;font-size: 20px!important;}
	.welcome-right p {font-size: 13px;line-height: 14px;}
	.welcome-right a {font-size: 14px;}
	
	.page-title { width: 45%;}
	
	.about-info{flex-direction: column; align-items: center;}
	.about-info img { width: 80%;}
	.team{padding: 5% 3%;}
	.about-info p { width: 80%; padding-right: 5%; text-align: center;}
	.team h2{ font-size: 6.5vw!important; text-align: center; padding-top: 4%; padding: 4%;}
	.team-content{flex-direction: column; width: 92%;}
	.member{margin-bottom: 8%; width: 75%; height:100%;}
	.member-content h3 {font-size: 4.5vw!important;}
	.member-content p { font-size: 2.5vw;}
}

@media only screen and (max-width: 479px){
/*
	.welcome {height: 135vw;}
	.welcome-right{padding-bottom: 13%;}
*/
	
	.welcome { height: 100%;}
	.welcome-left { width: 80%; padding: 20% 0;}
	.shape { width: 88vw; height: 62vw; left: -53%;}
	.welcome-left img { width: 84%; padding-left: 8%; height:auto; min-height: 30%;}
	.welcome-right { padding-left: 19%; padding-bottom: 16%; width: 60%;}
	.welcome-right h2 {
		line-height: 23px;
    	font-size: 24px!important;
	}
	.welcome-right p {
		font-size: 13px;
		line-height: 16px;
	}
	.welcome-right a {font-size: 15px; border-radius: 4px;}
	
	.brands{height: 300px;}
}

@media only screen and (max-width: 425px){
	.hero-title h3 {
		font-size: 3.5vw!important;
		padding-bottom: 1%;
	}
	.hero-title h1 {
		font-size: 8vw!important;
		line-height: 8vw;
		padding: 0px 9%;
	}
	
	.product-category h2 { font-size: 22px!important; padding: 5%; line-height: 24px; }
	.brands{height: 280px;}
	
	/********	sub pages css  ********/
	.page-title { width: 48%;}
	.page-title h1 {  font-size: 35px!important;}
	
	/*	about us page  */
	.about-info p {  font-size: 14px; line-height: 18px; }
	.member-content h3 {font-size: 5.5vw!important;}
	.member-content p { font-size: 3.7vw;}
	
	/*	auction page  */
	.auction-wrap{padding-top: 14%;}
	
	/*	contact us page  */
	.contact-contents h2{font-size: 23px!important;}
	.contact-contents p{font-size: 14px;}
	
	/*	thank you page  */
	.ty-wrapper{padding: 11%;}
	.ty-wrapper h2{font-size: 25px!important;}
	.ty-wrapper p{font-size: 15px;}
	
	/*	footer styles   */
	.footer { padding: 14%; padding-bottom: 10%;}
	.column-wrap{ flex-direction: column; flex-wrap: wrap; justify-content: flex-start;  align-items: center; align-content: center;  text-align: center; width: 100%;}
	.column {  width: 78%; padding-bottom: 17%; height: 100%;}	
	/*	end of footer styles   */
}

@media only screen and (max-width: 375px){
	.welcome-right {padding-left: 15%;}
	
	.brands{height: 250px;}
	
	.page-title h1 {font-size: 9vw!important;}
}

@media only screen and (max-width: 320px){
	.hero-title h1 {padding: 0px 8%;}
	.welcome-right {width: 73%; padding-bottom: 20%;}
	.brands{height: 220px;}

	
	.team h2{font-size: 7vw!important;}
	.member-content h3 {font-size: 6vw!important;}
	.member-content p { font-size: 4.2vw;}
	
	/*	auction page  */
	.auction-wrap{padding-top: 19%;}
}




