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

/***** 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: #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;
}
:hover{	transition: all .5s ease-in-out; 
	-moz-transition: all .5s ease-in-out; 
	-webkit-transition: all .5s ease-in-out;}

.clear{clear:both;}	
.clear-margin{clear: both; margin: 30px 0;}


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

h1,h2,h3,h4{font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase}
h1{font-size: 40px; color: inherit; line-height:42px;}
h2{font-size: 35px; color: inherit; line-height: 38px;}
h3{font-size: 30px; color: inherit; line-height: 30px;}
h4{font-size: 20px; color: inherit; line-height: 30px;}


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

.black-bg{background: #000; color: #fff;} .gray-bg{background: #333333; color: #fff;} .yellow-bg{background: #f6bc10; color: #fff;} .white-bg{background: #fff;} .dark-yellow{background: #d39e00;}

.white-txt{color: #fff} .yellow-txt{color: #f6bc10} .gray-txt{color: #333}

.pageimage{display: block; width: 100%; filter: brightness(.5)}

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

.flex-box{display: flex; align-items: center}
.flex-box .col-2{justify-content: flex-start; width: 50%; margin: 0 3px 0 0} 
.flex-box .col-2:last-of-type{margin: 0 0 0 0} 

.flex-row{display: flex;}


/*---HEADER-----------------------------------*/
.header{display: flex; align-items: center; background: #f6bc10; box-shadow: 0px 6px 14px -7px rgba(0,0,0,.1); position: relative; z-index: 111; padding-bottom: 0;}
.header .left{justify-content: flex-start; width: 22%; background: #333; padding: 5px 0}
.header .left img{width: 100%; max-width: 225px; margin: 0 auto;}
.header .right{justify-content: flex-start; width: 80%; text-align: right}
.header .right p, .header .right p a{color: #333; font-weight: 700;}
.header .right p:hover, .header .right p a:hover{color: #333}

/*--slider--*/
.cycle-slideshow {width: 100%; display: block; background-color:#000;}
.cycle-slideshow img{width: 100%; display: block;}

.hero-overlay{position: absolute; z-index: 111; top: 10vw; width: 90%; max-width: 650px; left: 5%; color: #fff}

.img-gradient{ position:relative;}
.img-gradient:after {
  content:'';
  position:absolute;
  left:0; top:0;
  width:90%; height:100%;
  display:inline-block;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.0) 0%, rgba(37, 37, 37, 0.8) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.img-gradient img{ display:block;}

.hide-desktop{display: none;}
.hide-desktop h1{font-size: 32px;}

/*-- cat buttons --*/
.categories{display: flex; align-items: center; margin-top: -120px; z-index: 110; position: relative}
.cat-btns{justify-content: flex-start; text-align: center; padding: 20px 0; width: 50%;}
.cat-btns img{display: block; max-width: 150px; margin:0 auto 15px auto}
.cat-btns h4{font-weight: 600; margin-bottom: 4px}
.cat-btns:hover img{transform: scale(1.10); transition: all .6s ease-in-out}
.cat-btns:hover{background: #d39e00}

/*--seppi feature --*/
.seppi{display: flex; align-items: center; margin-bottom: 150px}
.seppi .left{justify-content: flex-start;width: 30%; text-align: left}
.seppi .left img{width: 100%; margin-bottom: -70px;}
.seppi .right{justify-content: flex-start;width: 70%; text-align: center; font-size: 22px; line-height: 30px; padding: 10px 0}



/*-- locations page --*/
.cont-box{justify-content: flex-start; width: 50%; text-align: center; padding: 30px 0}


/*-- inv--*/
.inv-btn{flex:1;background: #333; color: #fff; text-align: center; padding: 10px; margin: 5px; text-transform: uppercase; font-weight: 400; letter-spacing: 2px;}
.inv-btn:hover{background: #d39e00}

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

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

.footer{display: flex;}
.footer p a{color: #fff}
.footer .left{width: 70%; justify-content: flex-start}
.footer .left .col2{display: inline-block; vertical-align: top; margin-right: 20px; width: 40%; line-height: 32px} 
.footer .left .col2 a:hover{text-decoration: underline} .footer .left .col2 h4{font-weight: 400; font-size: 20px; margin-bottom: 5px;}

.footer .right{width: 30%; justify-content: flex-start; text-align: center}
.footer .right img{width: 100%; max-width: 300px; text-align: center}





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


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

.hero-overlay{top: 5vw;}
.hero-overlay h1{font-size: 30px; line-height: 35px;}
	
.seppi{display: flex; align-items: stretch}
	
	
}


@media screen and (max-width: 800px) {	
.xl-pad{padding: 65px 0;}	

.header .left{justify-content: flex-start; width: 50%; background: #333; padding: 5px 0}
.header .right{justify-content: flex-start; width: 50%; text-align: right}	
.header .right p a{display: inline-block;} .header .right .fa{font-size: 30px; display: inline-block; margin: 0 10px 10px 0;}

.header .hide-mobile{display: none}	
	
.flex-box{display: block;}
.flex-row{display: block;}
	
.hero-overlay{display: none}
.hide-desktop{display: block;} 
	
.inv-btn{display: none;}
	
.categories{display: block; margin-top: -20px}
.cat-btns{display: block; justify-content: flex-end; width: 100%;}	
.cat-btns img{max-width: 100px;}
	
	
/*--seppi feature --*/
.seppi{display: block; margin-bottom: 80px}
.seppi .left{justify-content: flex-end;width: 50%; text-align: left}
.seppi .left img{width: 100%; margin-bottom: 0;}
.seppi .right{justify-content: flex-end;width: 100%; text-align: left; font-size: 22px; line-height: 30px; padding: 10px 0 30px 0; display: block}
.seppi .right .wrapper-center{text-align: left; width: 100%;}	
	
/*--footer--*/	
	.footer{display: block;}
	.footer .left{justify-content: flex-end; width: 100%; text-align: center}
	.footer .left .col2{display: block; width: 100%; margin: 10px auto; text-align: center}
	.footer .right{justify-content: flex-end; width: 100%; margin: 30px auto 0 auto; text-align: center}
	.footer .right img{width: 100%; max-width: 200px; text-align: center}

	
	
}


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


	.header{display: block}
	.header .left{justify-content: flex-end; width: 100%;}
	.header .right{justify-content: flex-end; width: 100%; text-align: center; padding-top: 5px}
	
}


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

.seppi .left{justify-content: flex-end;width: 100%; text-align: left}
	
	
}