/***** 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;}
img{max-width: 100%; height: auto;}

@font-face {
    font-family: 'icon-worksregular';
    src:url(../fonts/icon-works-webfont.eot);
    src: url(../fonts/icon-works-webfont.eot?#iefix) format('embedded-opentype'),
         url(../fonts/icon-works-webfont.woff) format('woff'),
         url(../fonts/icon-works-webfont.ttf) format('truetype'),
         url(../fonts/icon-works-webfont.svg#icon-worksregular) format('svg');
    font-weight: normal;
    font-style: normal;

}


/*-- colors - fonts
red: d93430
light gray: f6f6f6
med gray: 
dark gray: 212221

font-family: 'Montserrat', sans-serif;
font-family: 'Teko', sans-serif
*/
/***** END RESET *****/

body{
	font-family: 'Montserrat', sans-serif !important;
	font-size: 16px;
	line-height: 26px;
	color: #000;
	overflow-x: hidden;
	width: 100%;
}

::-moz-selection {
    background: #ededed; 
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #ededed;
    color: #fff;
    text-shadow: none;
}

a{
	color: inherit;
	transition: all .6s ease-in-out; 
	-moz-transition: all .6s ease-in-out; 
	-webkit-transition: all .6s ease-in-out;
	text-decoration: none;
}
a:hover, :hover{	transition: all .6s ease-in-out; 
	-moz-transition: all .6s ease-in-out; 
	-webkit-transition: all .6s ease-in-out;}

.clear{clear:both;}	


.shadow{box-shadow: 0px 6px 14px -7px rgba(0,0,0,.25);}

h1{font-size: 32px; color: inherit; font-weight: 700; line-height: 42px; font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; font-style: italic}
h2{font-size: 28px; color: inherit; font-weight: 700; line-height: 30px; font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; letter-spacing: .25px; font-style: italic; margin-bottom: 4px}
h3{font-size: 22px; color: inherit; letter-spacing: 1px; font-weight: 700; line-height: 30px; font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; font-style: italic; margin-bottom: 4px;}
h4{font-size: 16px; color: inherit; letter-spacing: 1.5px; font-weight: 600; line-height: 30px;}
h5{font-size: 16px; color: inherit;  font-weight: 700; line-height: 30px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 1.25px}

h1#large{color: #404040; font-size: 45px; line-height: 55px; letter-spacing: 3px; margin-bottom: 8px;}

.red-text{color: #d93430;}

/*---BASIC STYLES -----------------------------------*/
#pad{padding: 25px 0;}
#l-pad{padding: 50px 0;}
#xl-pad{padding: 90px 0;}

.black-bg{background: #000}
.dark-gray{background: #212221; color: #fff}
.med-gray {background:#dadada;}
.light-gray{background: #ededed;color: #000;}
.wheel-bg{background: url(../siteart/wheel-bg.jpg) no-repeat center bottom fixed}
.wheel-bg.top{background: url(../siteart/wheel-bg.jpg) no-repeat center top fixed; padding: 100px 0}


#pageimage{display: block; width: 100%;}

.width90{width: 90%; margin: 0 auto;}

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


#black-btn{background: #000; color: #fff; letter-spacing: .25px; font-size: 16px; padding:12px 20px; font-family: 'Montserrat', sans-serif; font-weight: 400; }
#black-btn:hover{background: #d93430;}

#red-btn{background: #d93430; color: #fff; letter-spacing: .25px; font-size: 16px; padding:12px 20px; font-family: 'Montserrat', sans-serif; font-weight: 400; margin: 5px; border-radius: 5px;}
#red-btn:hover{background: #000;}
#red-btn .fa{margin-right: 10px;}

/*---HEADER-----------------------------------*/
.top-header{background: #ebebeb; width: 100%;}
.top-header .wrapper-inner{padding: 10px 0; width: 90%; display: flex; align-items: center}

.top-contact{justify-content: flex-start; width: 60%;}
.top-contact p{display: inline-block; margin: 0 30px 0 0px;}
.top-contact .fa, .top-contact .fab{font-size: 18px; color: #d93430; display: inline-block;}
.top-contact .fa:hover, .top-contact .fab:hover{color: #000; ;}

.top-search{justify-content: flex-start; width: 40%; text-align: right}

.top-search #red-btn{display: inline-block; margin: 0; font-size: 15px; padding:10px 20px;}


.header{width:100%; background: #fff; position: relative; z-index: 999;}
.header .wrapper-inner{padding: 5px 0; width: 90%; display: flex; align-items: center}

.header-left{justify-content: flex-start; text-align: left; width: 25%} 
.header-left img{width: 100%; max-width: 180px}

.header-right{justify-content: flex-start; text-align: right; width: 75%;} 





/*---HOME PAGE ----------------------------------*/
/*--slider--*/

.hero img{width: 100%; position: relative; display: block}

.hero-overlay{	
	position: absolute;
	z-index: 998; 
	float: left;
	text-align: left;
	width:35%;
    top: 18vw;
    left: 5%;
	transform: translateX(-100px);
	animation: loadIn 2.50s ease 0s forwards;
}

.hero-overlay h4{font-size: 22px; color:#d4d3d1; letter-spacing: .25px; font-weight: 700; line-height: 30px; font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; font-style: italic; margin-bottom: 4px;}
.hero-overlay h1{font-size: 55px; line-height: 95%; margin: 10px 0 15px 0; color: #fff}

@keyframes loadIn {
  0% {transform: translateX(-120px);} 
  100% {transform: translateY(0px);}
}

/*--quick links--*/
.ql{display: flex; height: 100%; align-items: center}
.ql-text{width: 50%; justify-content: flex-start; margin-right: 30px;}
.ql-box{width: 25%; justify-content: flex-start;  margin: 0 0 0 18px; background: #f4f4f4; height: 100%; min-height: 530px; position: relative}
.ql-box img{width: 100%; margin-bottom: 10px;}
.ql-box #red-btn{display: block; width: 100%; padding: 10px 0; position: absolute; bottom: 0; margin: 0 auto; text-align: center; border-radius: 0 0 5px 5px}

/**brands container**/
.brands-inner{background:#dadada; display: flex; align-content: center; width: 90%; margin: 0 auto;}

.brands-box {justify-content: flex-start; width:16.6%;}
.brands-box img {width:80%; margin: 0 auto;}



/*-- contact feature --*/
.contact-feat{display: flex; align-items: center; margin: 0 auto 40px auto; background: rgba(0,0,0,.8);}
.contact-feat .left{justify-content: flex-start; width: 65%;}
.contact-feat .left .wrapper-inner, .contact-feat .right .wrapper-inner{width: 90%;}
.contact-feat .right{justify-content: flex-start; width: 35%; color: #fff;}
.contact-feat .right p{margin-bottom: 12px;}
.contact-feat .right p a:hover{text-decoration: underline}
.contact-feat iframe{height: 400px;}


/*--- CONTACT ------------------------------*/
.contact{display: flex; align-items: center;}

.contact .leftside{justify-content: flex-start; width: 50%;}

.contact-card{display: block; width: 100%; border: 2px solid #ccc; margin: 10px 0; padding: 10px 0}
.contact-card .left{display: inline-block; width: 10%; vertical-align: middle; text-align: center}
.contact-card .left .fa{text-align: center; font-size: 25px; color: #d93430}
.contact-card .right{display: inline-block; width: 85%; vertical-align: middle;}

.contact-card a:hover{color: #d93430;}


.contact .rightside{justify-content: flex-start; width: 50%;}
.contact .rightside iframe{width: 90%; height: 450px; float: right}


/*-- service--*/
.service{display: flex; margin: 0 auto; box-sizing: border-box; }
.service .box{justify-content: flex-start;width:50%; margin: 5px; border: 1px solid #ccc; padding: 20px 0}

.service .box .wrapper-inner{width: 90%;}


.flex {
	display: flex;
	gap: 50px;
}
.flex-img,.flex span {
    flex-basis: 50%;
}


.bottom-txt {
    color: #fff;
	    margin-bottom: 20px;
}

.flex-txt p {
    line-height: 1.5;
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: .25px;
    font-style: italic;
    margin-bottom: 4px;
    color: #fff;
    font-size: 18px;
}

.flex-container {
    display: flex;
    align-items: center;
	gap: 40px;
}

.flex-img img {
	width: 100%;
}
/*-- FOOTER ------------------------------------*/
.foot-logo{ text-align: center;}
.foot-logo img{text-align: center; margin: -30px auto 15px auto; position: relative;}

.footer{display: flex; margin: 0 auto; align-items: center; font-size: 13.5px; padding: 12px 0}
.footer .left{justify-content: flex-start; width:70%;}
.footer .left ul li{display: inline-block; margin-right: 20px;}
.footer .right{justify-content: flex-start; width: 30%; text-align: right}



/*---FORMS -----------------------------------*/
.form-row{display: flex;}
.formfield{flex: 1; font-family: 'Montserrat', sans-serif; position: relative; padding: 5px 0; margin: 5px 5px 5px 0; font-size:13px;}

.thin-border {padding: 20px; margin: 25px 0;  border: 1px solid #ccc;}

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

.formfield input, .formfield select  {
	width: 100%;
	padding: 10px 0;
	border:1px solid #134773;
	background:#fff;	
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	-webkit-appearance:none;
	-webkit-border-radius: 0px !important;
	border-radius: 0 !important
}



.form-row  textarea {
	width: 100%;
	padding: 10px 0;
	border:1px solid #134773;
	font-weight: 700;
	color:#000;
	background:#fff;
	font-family: 'Montserrat', sans-serif !important;
    height:85px;	
	-webkit-appearance:none;
	-webkit-border-radius: 0px !important;
	border-radius: 0 !important;
} 

form input.button,
form input.button:focus {
	float: none;
    width:160px;
	font-family: 'Roboto Condensed', sans-serif;
    margin:15px auto 0 auto;
    background: #000; /* For browsers that do not support gradients */
    line-height:18px;
    color:#fff;
	font-size:15px;
	padding: 10px 20px;
	font-weight: 700;
	font-style: italic;
	letter-spacing:.25px;
	text-align: center;
	display: block;
	border: none;
	-webkit-appearance:none;
	border-radius: 5px ;
	-webkit-border-radius: 0px !important;
}
form input.button:hover { background: #d93430;}

/*control the Captcha */

.CaptchaPanel {margin: 0 auto !important;padding:0 0 0 0 !important;line-height:normal !important;color:#000 !important;width: 100%;  text-align:left;}
.CaptchaPanel input{width: 100% !important; max-width: 300px;}
.CaptchaImagePanel {
	
margin-top: 10px;
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;
text-align: center;
	color: #000 !important
}

.CaptchaAnswerPanel {
margin:0 0 0 0;
padding:2px 0px 2px 0px !important;
}

.CaptchaWhatsThisPanel {
	line-height:0;
	margin:0 auto;
	padding:10px 0 10px 0 !important;
	width: 100%;
	float: right;
	display: block;
}
.CaptchaWhatsThisPanel a {color:#000;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;} 

.service-banner {
	color: #000;
    text-align: center;
}

.service-banner h2 {
	font-size: 32px;
}

/*---RESPONSIVE STYLES ------------------------------*/
@media screen and (max-width: 1350px){
	.hero-overlay{	
	width:38%;
    top: 22vw;
    left: 3%;
}

.hero-overlay h4{font-size: 18px;}
.hero-overlay h1{font-size: 40px; line-height: 95%; }

}

@media screen and (max-width: 1250px){
	
.wrapper-inner, .wrapper-center{width: 90%;}

	
}

@media screen and (max-width: 1200px){
.header-left{width: 50%} 
.header-right{width: 50%;} 
	

}

@media screen and (max-width: 1050px){
.hero-overlay{width:38%; top: 25vw;}

.hero-overlay h4{font-size: 18px;}
.hero-overlay h1{font-size: 35px; line-height: 95%; }
	
	
/*--quick links--*/
.ql{display: block; height: 100%; align-items: center}
.ql-text{width: 100%; justify-content: flex-end; margin: 0 0 30px 0; display: block}
.ql-box{width: 100%; justify-content: flex-end; display: inline-block; margin: 20px auto; min-height: auto; }
.ql-box img{margin-bottom: 20px;}
.ql-box #red-btn{ position: relative;}	

}



@media screen and (max-width: 950px) {	
#pad{padding: 20px 0;}
#l-pad{padding: 35px 0;}
#xl-pad{padding: 60px 0;}

.flex {
    flex-wrap: wrap;
	gap: 20px;
}
	
	.flex-img, .flex span {
		flex-basis: 100%;
	}


	
/*--- CONTACT ------------------------------*/
.contact{display: block;}

.contact .leftside{justify-content: flex-end; width: 100%;}

.contact-card{display: block; width: 100%; }
.contact-card .left{display: inline-block; width: 10%; vertical-align: middle; text-align: center}
.contact-card .left .fa{text-align: center; font-size: 25px; color: #d93430}
.contact-card .right{display: inline-block; width: 85%; vertical-align: middle;}

.contact .rightside{justify-content: flex-end; width: 90%; margin: 30px auto 0 auto}
.contact .rightside iframe{width: 100%; height: 350px; float: none; }



/*-- FOOTER ------------------------------------*/
.foot-logo img{ width: 100%; max-width: 150px;}

.footer{display: block; margin: 0 auto; align-items: center; width: 92%; padding-bottom: 40px; text-align: center}

.footer .left{justify-content: flex-end; width: 100%; margin: 15px auto;}
.footer .right{justify-content: flex-end; width: 100%; text-align: center}
	
	
}


@media screen and (max-width: 850px) {
.top-header .wrapper-inner{ width: 92%; display: block;}

.top-contact{justify-content: flex-end; width: 100%; text-align: center;}
.top-contact p{display: inline-block; margin: 0 20px 0 0px; font-size: 14px;}
.top-contact .fa, .top-contact .fab{font-size: 18px; color: #d93430; display: inline-block;}

.top-search{justify-content: flex-end; width: 100%; text-align: center}

.top-search #red-btn{display: inline-block; margin:10px auto 5px auto ; font-size: 13px; padding:8px 15px;}

	
	
.form-row{display: block;}
.formfield{flex: 0; width: 100%; margin: 5px auto;}

.hero{width: 100%;}
.hero img{ filter: grayscale(.5); opacity: .4;}
	.hero-overlay{width: 100%; transform: none; animation: none; left: 0;}
.hero-overlay .inner{width: 95%; margin: 0 auto !important; padding: 60px 0; height: 100%;}
.hero-overlay h4{font-size: 16px; color: #000}
.hero-overlay h1{font-size: 28px; line-height: 95%;  color: #000}

	
/*-- contact feature --*/
.contact-feat{display: block;}
.contact-feat .left{justify-content: flex-end; width: 100%; display: block; margin-bottom: 20px;}
.contact-feat .right{justify-content: flex-end; width: 100%;}
.contact-feat iframe{height: 250px;}
	
	
/*-- service--*/
.service{display: block; margin: 0 auto; box-sizing: border-box}
.service .box{justify-content: flex-end;width:100%; margin: 5px auto;}
	.service .box .fa{font-size: 13px;}

}

@media screen and (max-width: 710px) {
.hero{width: 100%;}
.hero img{ filter: none; opacity: .99;}
	.hero-overlay{position: relative; top: 0;}
.hero-overlay .inner{wipadding: 10px 0;}
		

}



@media screen and (max-width: 400px) {
/*--parts--*/
.partspage #red-btn{display: block; text-align: center}	
}