/***** 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
yellow: f8c712
light gray: f6f6f6
dark gray: 212221

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

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

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

::selection {
    background: #ededed;
    color: #000;
    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,.2);}

h1,h2,h3,h4{color: inherit; font-family: 'Barlow', sans-serif !important; text-transform: uppercase; font-weight: 900; font-style: italic;}

h1{font-size: 32px;}
h2{font-size: 28px;}
h3{font-size: 22px;}
h4{font-size: 16px;}
h5{font-size: 18px;}

.gray-text{color: #ccc;}
.yellow-text{color: #f8c712;}

/*---POP-UP -----------------------------------*/

*, *:after, *:before {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
}
.box {
                width: 50%;
                margin: 0 auto;
                background: rgba(0,0,0,0.2);
                padding: 35px;
                border-radius: 20px/50px;
                background-clip: padding-box;
                text-align: center;
}
.popup .close {
    position: absolute;
    top: 10px;
    right: 15px;
                transition: all 0.2s;
                font-size: 30px;
                font-weight: bold;
                text-decoration: none;
                color: #fff;
                border: 1px solid #fff;
                padding:0 5px 5px 5px;
}
.popup .close:hover {
  background: #000;
}
.popup .content {
  max-height: 60%;
  overflow: auto;
}

/*Let's make it appear when the page loads*/
.overlay:target:before {
    display: none;
}
.overlay:before {
                content:"";
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                display: block;
                background: rgba(0, 0, 0, 0.7);
                position: fixed;
                z-index: 99999;
}
.overlay .popup {
                background:#F8C712;
                border:3px solid #ffffff;
                border-radius: 5px;
                width: 100%;
                max-width: 1000px;
                position: absolute;
                top: 6vw;
                left: 0;
                right: 0;
                float:none;
                padding: 40px 0;
                margin: 0 auto;
                text-align:left;
                z-index: 99999999;
                -webkit-transition: all 0.6s ease-in-out;
                -moz-transition: all 0.6s ease-in-out;
                transition: all 0.6s ease-in-out;
                color:#000;
                font-size: 16px;font-weight: 400;
}
.popup img {
	margin-top: 15px;
	 display: block;
  margin-left: auto;
  margin-right: auto;
}
.popup h1 {
	color:white;
	text-align:center;
}
.popup h2 {
	color:white;
	text-align:center;
}
.popup p {
	color:white;
	text-align:center;
}
.popup {
	line-height: 33px;
}
.overlay:target .popup {
    top: -180%;
    left: -100%;
}


/*---BASIC STYLES -----------------------------------*/
#pad{padding: 25px 0;}
#sm-pad{padding: 5px 0;}
#m-pad{padding: 15px 0;}
#l-pad{padding: 50px 0;}
#xl-pad{padding: 100px 0;}

.dark-gray-bg{background: #212221; color: #fff}
.yellow-bg{background: #f8c712;} .yellow-transparent{background: rgba(248,199,18,.8);}
.lightgray-bg{background: #ededed;}
.black-bg{background: #000}
.ex-bg{background: url(../siteart/ex-bg.jpg) no-repeat center fixed; background-size: cover}
.about-bg{background: url(../siteart/about-bg.jpg) no-repeat center fixed; background-size: cover}

.skew{z-index: 99; position: relative}
.yellow-skew{ transform-origin: top right;
    -ms-transform: skew(-20deg, 0deg);
    -webkit-transform: skew(-20deg, 0deg);
    transform: skew(-20deg, 0deg);
    background: #f8c712;
    width: 40%;
    height: 12px;
    display: inline-block;
	top: -10px;
	position: relative; 
}
.white-skew{ transform-origin: top right;
    -ms-transform: skew(-20deg, 0deg);
    -webkit-transform: skew(-20deg, 0deg);
    transform: skew(-20deg, 0deg);
    background: #fff;
    width: 40%;
    height: 12px;
    display: inline-block;
	top: -10px;
	position: relative;
}

.yellow-transparent .white-skew{width: 10%;}

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

.wrapper-inner{width: 80%; margin: 0 auto;}
.wrapper90{width: 90%; 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: 'Barlow', sans-serif; font-weight: 900; font-style:italic; }
#black-btn:hover{background: #f8c712;}

#white-btn{background: #fff; color: #000; letter-spacing: 1px; font-size: 15px; padding:10px 30px; font-family: 'Barlow', sans-serif; font-weight: 900; font-style:italic; }
#white-btn:hover{background: #000; color: #fff}

#yellow-btn{background: #f8c712; color: #fff; letter-spacing: 1px; font-size: 15px; padding:10px 30px; font-family: 'Barlow', sans-serif; font-weight: 900; font-style:italic; margin: 5px;}
#yellow-btn:hover{background: #c0111b;}



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

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

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

.top-header{background: #f8c712; color: #000; text-align: right; padding: 5px 0}

#top-social{display: inline-block}
#top-social .fa, #top-social .fab{font-size: 22px; color: #000; display: inline-block; padding: 5px 12px;}
#top-social .fa:hover, #top-social .fab:hover{color: #000}

#top-phone{display: inline-block; margin-left: 50px;}
#top-phone .fa{font-size: 22px; color: #000; display: inline-block; margin-right: 10px;}

#top-search{ margin-left: 50px; display: inline-block; color: #000}
#top-search a {cursor:pointer; }
#top-search .fa{font-size: 22px; color: #000; display: inline-block; margin-right: 10px;}
#top-search .fa:hover{color: #000}

#searchbar {
	position: absolute;
    display: none;
    float: left;
    width: 100%;
    height: 62px;
    z-index: 9999;
	box-sizing: border-box;
	height: 100px;
	background: #fff;
	margin-top: 5px;
}
#searchbar #searchform #searchsubmit {
    background: url(/siteart/search.png) no-repeat right;
	float: left !important;
    width: 40% !important;
    height: 26px !important;
	padding: 50px 0 !important;
    color: #000 !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: 20px !important;
    line-height: 28px !important;
	color: #000 !important;
	background: none !important;
	font-family: 'Barlow', sans-serif!important;
	height: auto !important
}
#searchbar ::-webkit-input-placeholder{color: #000;}
#searchbar :-moz-placeholder{color: #000;}
#searchbar ::-moz-placeholder{color: #000;}
#searchbar :-ms-input-placeholder{color: #000;}




/*---HOME PAGE ----------------------------------*/
/*--slider--*/
.cycle-slideshow {width: 100%; position: relative;  border-bottom: 25px solid transparent;
  -webkit-border-image: url(/siteart/angle-border.jpg) 30 round; /* Safari 3.1-5 */
  -o-border-image: url(/siteart/angle-border.jpg) 30 round; /* Opera 11-12.1 */
  border-image: url(/siteart/angle-border.jpg) 30 round;} 
.cycle-slideshow img{width: 100%;}

/*-- welcome --*/
.welcome{display: flex; align-items: center; padding: 100px  0 180px 0;}
.welcome .left{justify-content: flex-start; width: 40%;} .welcome .left h2{max-width: 70%;}
.welcome .right{justify-content: flex-start; width: 60%;}

/*----RokBak Dealer Promo---*/

.cycle-slideshow-rokbak-dealer{
	width: fit-content;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
	-webkit-border-image: none; /* Safari 3.1-5 */
	-o-border-image: none; /* Opera 11-12.1 */
	border-image: none;
	position: relative;
	overflow: hidden;            
	background: transparent;
	gap: 24px;
	margin: 0 auto;
}

.rokbak-dealer{
	display: flex; 
	justify-content: space-between;
	align-items: center;  
	padding: 24px 0px;
	column-gap:24px;
}

.rokbak-dealer .left{
	justify-content: flex-end; 
	flex: 66;
} 

.rokbak-dealer .left h2{
	max-width: 50%;
}

.rokbak-dealer .right{
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 33;
}

.cycle-slideshow-rokbak-dealer img {
	max-width: 100%;
	max-height: 400px;
	height: auto;
	width: auto;
	object-fit: contain;          /* keep full image visible */
	display: block;
	margin: 0;
}

.logo{
	max-height: 80px;
}

.promo-banner{
	width: 100%;
}


/*--manu --*/
.manu-title h1{font-size: 4em; line-height: 100%; top: -35px; position: relative}

.manu{float: right; display: block; text-align: right}
.manu img{display: inline-block; max-width: 250px; margin: 0 10px; text-align: right}

/*-- categories --*/
.category-bg{background: url(/siteart/cat-bg.jpg) no-repeat fixed center; background-size: cover; border-bottom: 2px solid #f8c712}
.cat-wrap{text-align: center; padding: 150px 0}
.cat-row{display: flex; align-content: center;}
.cat-row .cat-box{flex: 1; background: rgba(0,0,0,.0); color: #000; text-transform: uppercase; text-align: center; padding: 20px 5px; border: 2px solid #000; font-weight: 800; letter-spacing: .5px; margin: 5px;}
.cat-row .cat-box:hover{background: rgba(0,0,0,.9); color: #fff;}

.category-bg .yellow-skew{width: 20%}

/*-- contact feature --*/
.loc-feature{margin: 100px auto;}

.loc-feature .white-skew{width: 10%;}


.locations section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #fff;
}

.locations label {
  display: inline-block;
  padding: 15px 0;
  font-weight: 600;
  text-align: center;
  color: #000;
	width: 160px;
	margin: 0 10px 0 0;
}

.locations label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

/*label[for*='1']:before { content: '\f1cb'; }
label[for*='2']:before { content: '\f17d'; }
label[for*='3']:before { content: '\f16b'; }
label[for*='4']:before { content: '\f1a9'; }*/

.locations label:hover {
  color: #f8c712;
	background: #fff;
  cursor: pointer;
}

.locations input:checked +  label {
  color: #f8c712;
background: #111;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3{
  display: block;
}

@media screen and (max-width: 650px) {

 .locations label:before {
    margin: 0;
    font-size: 18px;
  }
}

@media screen and (max-width: 400px) {
  .locations label {
    padding: 15px;
  }
}

.loc{display: flex; width: 100%; align-items: center; margin-top: 10px}
.loc .col1{justify-content: flex-start; width: 30%; margin-right: 20px;}
.loc .col1 .fa{font-size: 22px; margin-right: 10px;}
.loc .col2{justify-content: flex-start; width: 70%; height: 100% !important;}
.loc .col2 iframe{height: 400px !important; display: block;}




/*-- FOOTER ------------------------------------*/
.footer{display: flex; margin: 0 auto; align-items: center; width: 80%; color: #fff}
.footer a{color: #fff;}

.footer .left{justify-content: flex-start; width: 65%; text-align: left; text-transform: uppercase}
.footer .left .col-1{display: inline-block; width: 45%; vertical-align: top;}
.footer .left .col-1 ul{display: inline-block; vertical-align: top; width: 43%}
.footer .left .col-1 ul li a{font-size: 14px; margin-right: 30px;}

.footer .right{justify-content: flex-start; width: 35%; text-align: right;}
.footer .right a{color: #fff !important}
.footer .right h2 .fa{font-size: 30px; margin-right: 10px;}

.footer .fa, .footer .fab {font-size: 18px; color: #000; background: #fcba16; padding: 5px 2px; width: 25px; border-radius: 6px; text-align: center;  margin: 0 5px;}
.footer .fa:hover,.footer .fab:hover{background: #fff}


/*---scrolling inventory---*/
.scrolling-bg{background:url(/siteart/scrolling-bg.jpg) no-repeat right; background-size: cover; height: 104px; width: 100%; padding-top: 10px}
.scrolling-wrap {overflow:hidden; height: 90px;}
 
.scrolling{
    width:100%;
    height:auto;
}

/*---FORMS -----------------------------------*/
.form-row{display: flex;}
.formfield{flex: 1; font-family: 'Barlow', 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: 'Barlow', 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: 'Barlow', 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: 'Barlow', sans-serif;
    margin: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;
	letter-spacing:2px;
	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: #f8c712; /* For browsers that do not support gradients */
	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;} 





/*---RESPONSIVE STYLES ------------------------------*/
@media screen and (max-width: 1500px){

}

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

	
/*--contact feature --*/	
.loc{display: block;}
.loc .col1{justify-content: flex-end; width: 100%; margin-right: 0;}
.loc .col2{justify-content: flex-end; width: 100%; height: 100% !important; margin-top: 30px;}
.loc .col2 iframe{height: 250px !important; display: block;}
	
}



@media screen and (max-width: 1030px) {	
	.footer{display: block}
.footer .left{justify-content: flex-end; width: 100%; text-align: center; text-transform: uppercase}
.footer .left .col-1{display: block; width: 100%; vertical-align: top;}
.footer .left .col-1 ul{display: block; vertical-align: top; width: 100%; margin-bottom: 20px;}
.footer .left .col-1 ul li a{font-size: 14px; margin-right: 00px;}

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

}
	
@media screen and (max-width: 800px) {	
#pad{padding: 20px 0;}
#l-pad{padding: 40px 0;}
#xl-pad{padding: 80px 0;}

/*--header--*/
.header .wrapper90{display: flex; align-items: center; width: 95%;}

.header-left{width:60%; padding: 5px 0} 
.header-left img{margin-top: 0; max-width: 90%;}

.header-right{width: 40%;} 

.top-header{text-align: center; }
	


/*-- welcome --*/
.welcome{display: block; padding: 100px  0 150px 0;}
.welcome .left{justify-content: flex-end; width: 100%;} .welcome .left h2{max-width: 70%;}
.welcome .right{justify-content: flex-end; width: 100%;}
	
.rokbak-dealer{
	display: block;
}
	
.rokbak-dealer .left{
	justify-content: flex-end; 
	width: 100%;
} 
	
.rokbak-dealer .left h2{
	max-width: 70%;
}
	
.rokbak-dealer .right{
	justify-content: flex-end; 
	width: 100%;
}


/*--manu --*/
.manu-title h1{font-size: 3em; line-height: 100%; top: -43px; position: relative}

.manu{float: none; display: block; text-align: center}
.manu img{display: inline-block; max-width: 250px; margin: 0 10px; text-align: center}

/*-- categories --*/
.cat-wrap{text-align: center; padding: 100px 0}
.cat-row{display: block; align-content: center;}
.cat-row .cat-box{display: block; width: 90%; padding: 18px 0; margin: 8px auto}

.category-bg .yellow-skew{width: 20%}	
	
}


@media screen and (max-width: 700px) {
.ex-bg{background: url(../siteart/ex-bg.jpg) no-repeat center; background-size: cover}
.about-bg{background: url(../siteart/about-bg.jpg) no-repeat center; background-size: cover}
.category-bg{background: url(/siteart/cat-bg.jpg) no-repeat center; background-size: cover; border-bottom: 2px solid #f8c712}

.yellow-transparent .white-skew {width: 20%;}
	
/*--header--*/	
.hide-mobile{display: none}
#top-phone{display: inline-block; margin-left: 20px;}

	
/*-- contact feature --*/
.loc-feature{margin: 80px auto;}
.loc-feature .white-skew{width: 20%;}

.locations label{width: 100%; padding: 20px 0; display:block}
.locations input:checked + label{border-bottom:1px solid #ddd}
	
	
/*--forms --*/
.form-row{display: block;}
.formfield{flex: 1; margin: 5px auto; width: 100%;}


}

@media screen and (max-width: 480px) {
	#searchbar #searchform #searchsubmit {width: 20% !important;}

.scrolling-bg{background: #f8c712; height: 104px; width: 100%; padding-top: 15px}
	
/*--slider--*/
	.cycle-slideshow {width: 100%; position: relative;  border-bottom: 25px solid #000}
.cycle-slideshow img{width: 100%;}
	
	.cycle-slideshow-rokbak-dealer{
		border-bottom: none;
	}
	
	 .welcome .left h2{max-width: 90%;}
	
	.manu-title h1{font-size: 2em;  top: -29px;}

/*--contact feature --*/
	.locations label{width: 100%; display: block; padding: 20px 0}

	.loc .col1 h1{font-size: 35px; line-height: 45px;}

		
}