/***** 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.ttf) format('truetype'),
         url(../fonts/icon-works-webfont.svg#icon-worksregular) format('svg');
    font-weight: normal;
    font-style: normal;

}
/*-- colors - fonts
red: a20000
light gray: eee
dark gray: 212221

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

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

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

::selection {
    background: #eee;
    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: 36px; color: inherit; font-weight: 700; line-height: 42px; font-family: 'Roboto Condensed', sans-serif; font-style: italic; text-transform: uppercase}
h1 span{font-size: 22px; color: inherit; font-weight: 700; line-height: 30px; letter-spacing: .25px;}

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

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

.gray-text{color: #ccc;}
.red-text{color: #a20000;}

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

.dark-gray-bg{background: #212221; color: #fff}
.lightgray-bg{background: #eee;}
.black-bg{background: #000}

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

.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: 1px; font-size: 15px; padding:10px 30px; font-family: 'Roboto Condensed', sans-serif;  font-style: italic; tfont-weight: 700; }
#black-btn:hover{background: #a20000;}

#red-btn{background: #a20000; color: #fff; letter-spacing: 1px; font-size: 15px; padding:10px 30px; font-family: 'Roboto Condensed', sans-serif;  font-style: italic; tfont-weight: 700; margin: 5px;}
#red-btn:hover{background: #fff; color: #a20000}

#white-btn{background: #fff; color: #000; letter-spacing: 1px; font-size: 15px; padding:10px 30px; font-family: 'Roboto Condensed', sans-serif;  font-style: italic; tfont-weight: 700; margin: 5px;}
#white-btn:hover{background: #a20000; color: #fff;}


/*---HEADER-----------------------------------*/
.header{width:100%; background: #a20000; position: relative; z-index: 999;}
.header .wrapper-inner{width: 95%; display: flex; align-items: center}

.header-left{justify-content: flex-start; text-align: left; width:30%} 
.header-left img{width: 100%; max-width: 420px; position: relative; margin-top: -40px}

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

.top-header{background: #212121; color: #fff; text-align: right;}
.top-header .black-bg{width: auto; right: 0; padding: 10px 10px; text-align: center; display: inline-block;}

#top-search{display: inline-block;}
#top-search .fa{font-size: 25px; color: #fff; display: inline-block; padding: 5px 18px;}
#top-search .fa:hover{color: #a20000}

#top-contact{display: inline-block;}
#top-contact .bi, #top-contact .fa, #top-contact .fab{font-size: 25px; color: #fff !important; display: inline-block; padding: 5px 18px;}
#top-contact .bi:hover, #top-contact .fa:hover, #top-contact .fab:hover{color: #a20000 !important}



#searchbar {
	position: absolute;
    display: none;
    float: left;
    width: 100%;
    height: 62px;
    z-index: 9999;
	box-sizing: border-box;
	height: 100px;
	background: rgba(0,0,0,.85);
	margin-top: 0px;
}
#searchbar #searchform #searchsubmit {
    background: url(../siteart/search.png) no-repeat right;
	float: left !important;
    width: 20% !important;
    height: 26px !important;
	padding: 50px 0 !important;
    color: #d73c09 !important;
    border: 0 !important;
    outline: none !important;
    cursor: pointer !important;
}
#searchbar #searchform  .keywords {
	float: left !important;
	width: 60% !important;
    border: 0 !important;
    outline: none !important;
	padding: 34px 25px !important;
	box-sizing: border-box !important;
    font-size: 18px !important;
    line-height: 28px !important;
	color: #fff !important;
	background: none !important;
	font-family: 'Montserrat', sans-serif!important;
	height: auto !important
}
#searchbar ::-webkit-input-placeholder{color: #fff;}
#searchbar :-moz-placeholder{color: #fff;}
#searchbar ::-moz-placeholder{color: #fff;}
#searchbar :-ms-input-placeholder{color: #fff;}




/*---HOME PAGE ----------------------------------*/
/*--slider--*/
.cycle-slideshow {width: 100%; position: relative;}
.cycle-slideshow img{width: 100%; background-color: black;}


.hero-overlay{	
	position: absolute;
	z-index: 998; 
	float: right;
	text-align: right;
	width:100%;
    top: 10vw;
    right: 5%;
	color: #fff;
}

.hero-overlay h1{font-size: 55px; font-weight: 700;  line-height: 95%; margin: 10px 0;}
.hero-overlay p{font-weight: 400; text-transform: uppercase; text-align: right; letter-spacing: 2px}

.welcome{display: flex; align-items: center;  position: relative; margin-top: -70px; margin-bottom: 60px; z-index: 111; height: 430px;}
.welcome .left{justify-content: flex-start; width: 65%; background: #eee; height: 100%; background-size: contain}
.welcome .left .wrapper-inner{margin-top: 5%;}
.welcome .left h1 span{color: #000}
.welcome .right{justify-content: flex-start; width: 35%; background: #fff; margin-left: 20px}


.ql-box{width: 100%; display: block; text-align: left; padding: 10px 0; border-bottom: 2px solid #eee}
.ql-box img{display: inline-block; text-align: left; margin-right: 10px; vertical-align: middle; margin-left: 20px; max-width: 115px;}
.ql-box h2{display: inline-block; text-align: left; vertical-align: middle; margin-left: 40px; font-size: 22px;}
.ql-box:hover{background: #eee;}



/*--SCROLLING MANU BAR ----------------------------*/
.brandbar{
	margin: 0 auto;
	text-align: center;
	width:100%;
	background: #eee;
}
.brandbar .inner{width:80%; text-align: center; margin: 0 auto}

.manu-slider{margin: 0 20px;}
.manu-slider img{width:70%;}


/*-- contact feature --*/
.contact-feat{display: flex; align-content: center; margin: 0 auto;}
.contact-feat .left{justify-content: flex-start; width: 50%;}
.contact-feat .left iframe{width: 90%;}
.contact-feat .right{justify-content: flex-start; width: 50%; color: #fff;}




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


/*--inv --*/
.prec-box{display: inline-block; width: 100%; max-width: 30%; background: #fff; padding: 10px 0; text-align: center; margin: 5px;}
.prec-box img{max-width: 80%}



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

.contact .left{justify-content: flex-start; width: 30%;}
.contact .left img{width:100%; max-width: 200px}

.contact .right{justify-content: flex-start; width: 70%;}
.contact-card{display: block; width: 100%; border: 2px solid #ccc; margin: 10px 0;}
.contact-card .left{display: inline-block; width: 20%; vertical-align: middle;}
.contact-card .left img{width:60px; padding: 20px 30px 0 10px;}
.contact-card .right{display: inline-block; width: 75%; vertical-align: middle;}

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




/*-- FOOTER ------------------------------------*/

.footer{display: flex; margin: 0 auto; align-items: center; width: 80%;padding-bottom: 30px; color: #fff}

.footer .left{justify-content: flex-start; width: 50%;}
.footer .left .foot-col{display: inline-block; vertical-align: top; width: 45%;}
.footer .left .foot-col p{margin-bottom: 10px;}
.footer .right{justify-content: flex-start; width: 50%; text-align: right}

.foot-logo img{ text-align: right;}

.footer p a{color: #fff}
.footer a:hover{text-decoration: underline}



/*---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;}


.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;
	border-radius: 0 !important;
	-webkit-border-radius: 0px !important;
}

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

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

/*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;} 


.black-bg .CaptchaPanel, .black-bg .CaptchaMessagePanel, .black-bg .CaptchaWhatsThisPanel a{color: #fff !important}


/*---RESPONSIVE STYLES ------------------------------*/

@media screen and (max-width: 1300px){
.welcome .left .wrapper-inner{margin-top: 0%;}
	
	
.ql-box img{display: inline-block; text-align: left; margin-right: 0px; margin-left: 10px; max-width: 115px;}
.ql-box h2{ margin-left: 20px; font-size: 18px;}


}



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

.hero-overlay{width:50%; top: 5vw;}
	
.header-left{width: 50%} 
.header-right{width: 50%;} 



.hero-overlay{width:100%; top: 8vw;}
.hero-overlay h1{font-size: 35px; font-weight: 700;  line-height: 95%; margin: 10px 0;}
	
}




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

.header h2{font-size: 20px;}	
	
.hero-overlay{width:60%; top: 3vw;}
.hero-overlay h1{font-size: 30px; line-height: 90%; margin: 5px 0}	

.hero-overlay #red-btn{ font-size: 13px; padding:10px 18px;}
.hero-overlay #white-btn{ font-size: 13px; padding:10px 18px;}

	
/*--welcome--*/
.welcome{display: block; height: auto; margin-bottom: 15px;}
.welcome .left{justify-content: flex-end; width: 100%;}	
.welcome .right{justify-content: flex-end; width: 100%; margin-left: 0}	
	

/*--contact feature ---*/
.contact-feat{display: block; padding: 80px 0}
.contact-feat .left{justify-content: flex-end; width: 100%; display: block; margin-bottom: 30px;}
.contact-feat .left iframe{width: 100%; height: 250px !important}
.contact-feat .right{justify-content: flex-end; width: 100%;}
	

/*-- FOOTER ------------------------------------*/

.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-bottom: 15px;}
.footer .left .foot-col{display: block; vertical-align: top; width: 100%; margin-bottom: 30px}
.footer .right{justify-content: flex-end; width: 100%; text-align: center}
	
.foot-logo img{ text-align: center; max-width: 100px}	
	
}


@media screen and (max-width: 700px) {
	
.header-left img{ margin-top: 0px}
	
#searchbar #searchform  .keywords {width:70%; font-size: 15px}
	
.form-row{display: block;}
.formfield{flex: 0; width: 100%; margin: 5px auto;}

	
.hero-overlay{position: relative; top: 0; color: #fff; background: #000; float: none; width: 100%; max-width: 100%; padding: 20px 0 40px 0; right: 0; z-index: 9; text-align: left}	
.hero-overlay h1, .hero-overlay p{width: 100%; margin: 0 auto; text-align: left}
.hero-overlay .inner{width: 90%; margin: 0 auto;}

.welcome{margin-top: 0}

.prec-box{display: inline-block; width: 100%; max-width: 45%;}
.prec-box img{max-width: 90%}
	

}

@media screen and (max-width: 480px) {
#top-contact .bi, #top-contact .fa, #top-contact .fab{font-size: 18px;}
#top-search .fa{font-size: 18px;}

.prec-box{display: block; width: 100%; max-width: 90%; margin: 10px auto; padding: 5px 0}	
.prec-box img{max-width: 150px}
	
	.hero-overlay h1 br{display: none;}
.hero-overlay #red-btn, .hero-overlay #white-btn{display: block; text-align: center; margin: 5px auto;}

}