﻿
/***** 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 --------
red: ed1c24
gray: 3c3c3c
*/

/***** END RESET *****/

/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {
	font-family: 'Montserrat', sans-serif !important;
	font-size:16px; 
	line-height: 26px; 
	color: #000; 
	font-weight:400;
	overflow-x:hidden;
	width:100%;
	overflow-x:hidden;
}
/*--
h1 {font-family: 'Bebas Neue', cursive !important; font-size: 35px; color: inherit; text-transform:uppercase; letter-spacing: 3px; padding: 10px 0; line-height: 40px;}
h2 {font-family: 'Bebas Neue', cursive !important; font-size: 25px; color: #ed1c24; text-transform:uppercase; letter-spacing: 3px; padding: 5px 0;}
h3 {font-family: 'Bebas Neue', cursive !important; font-size: 20px; color: #ed1c24; text-transform:uppercase; letter-spacing: 3px; padding: 5px 0;}
h4 {font-family: 'Bebas Neue', cursive !important; font-size: 18px; color: #ed1c24; text-transform:uppercase; letter-spacing: 3px;}
--*/
p{letter-spacing: .5px}

a:link, a:visited, a:active {text-decoration:none; color:#000;}
a:hover{transition: all .8s ease;}
strong{font-weight:700;}

.fine-print{font-size: 13px;}

#pad{padding:2% 0;}
#l-pad{padding:3% 0;}
#space{padding: 50px 0;}

.clear{clear: both;}

/*--- HEADER STYLES --------------------------*/
.header-top{background: #3c3c3c; padding: 8px 0;}
.header-top a{display: inline-block; color: #fff; margin: 0 20px; letter-spacing: 1.5px; text-transform: uppercase;}

.header {
	width:100%;
	box-shadow: 0px 6px 13px -4px rgba(0,0,0,0.4);
	background: #000;
	height: 100px;
}


#topleft {
	width:25%;
    content: " ";
    display: inline-block;
    top: 0;
    left: 0;
    z-index: 9999999;
    transform-origin: top right;
    -ms-transform: skew(-20deg, 0deg);
    -webkit-transform: skew(-20deg, 0deg);
    transform: skew(-20deg, 0deg);
	background:#fff;
	vertical-align: top;
	padding: 4.5px 0;
}
.header-border{display: inline-block; margin-left: -45px;}

#logo{width:100%; max-width: 180px;
	-ms-transform: skew(20deg, 0deg);
    -webkit-transform: skew(20deg, 0deg);
    transform: skew(20deg, 0deg);
	display: inline-block;
padding-top: 6px;}

#topright {
	background:#000; 
	width:65%;
	text-align: right;
	display:inline-block;
	margin-top: 28px;
	float: right;
	margin-right: 30px;
}

/*---BODY--------------------------------*/

.gray-bg{background:#3c3c3c;}
.black-bg{background: #000; color: #fff;}
.dark-gray{background: #212121; color: #fff;}

.wrapper-inner {width: 75%; margin: 0 auto;}
.wrapper-center {width: 75%; margin: 0 auto; text-align: center;}

#pageimage{display: block; width: 100%;}

#red-btn{display: inline-block; background: #ed1c24; color: #fff; padding:10px 25px; margin: 5px 0; letter-spacing: 2px; font-size: 14px; font-weight: 700; font-style: italic;}
#red-btn:hover{background: #3c3c3c;}


/*---HOME PAGE--------------------------*/
/*--SLIDER --*/
.slider-back{width:100%;}
.cycle-slideshow{overflow:hidden;}
.cycle-slideshow img{width:100%;}
.hero-overlay{	
	width: 800px;
	position:absolute;
	color:#fff;
	z-index:999999;
	right:0px;
	bottom:10px;
	overflow: hidden;
	background-color: rgba(0,0,0, .75);
	-moz-opacity: 0.9;
	filter:alpha(opacity=9);
	display: inline-block;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box; 
	 transform-origin: bottom right;
    -ms-transform: skew(-20deg, 0deg);
    -webkit-transform: skew(-20deg, 0deg);
    transform: skew(-20deg, 0deg);
}
.hero-overlay .inner{width:80%; margin:  0 auto; padding: 50px 0; transform: skew(20deg, 0deg);}
.hero-overlay h1{font-family: 'Bebas Neue', cursive !important; font-size: 35px; color: inherit; text-transform:uppercase; letter-spacing: 3px; padding: 10px 0; line-height: 40px;}

/*-- CATEGORIES--*/
.cat-wrapper{width: 75%; margin: 0 auto; text-align: center; position: relative; z-index: 99; margin-top: 70px;}

.cat{display: inline-block; margin: 0 5px; width:30%; box-shadow: 0px 6px 13px -4px rgba(0,0,0,0.4);}
.cat img{width: 100%; display: block;}

.cat-button { display: flex; overflow: hidden; width: 100%;}

.button-text{
  background-color: #000;
  width: 304px;
  text-align: left;
    content: " ";
    display: block;
    top: 0;
    left: 0;
    z-index: 9999999;
	padding: 10px 0 3px 30px;
    transform-origin: top right;
    -ms-transform: skew(-20deg, 0deg);
    -webkit-transform: skew(-20deg, 0deg);
    transform: skew(-20deg, 0deg);
	 
}
.button-text h2, .button-text p{ 
	text-transform: uppercase;
	font-family: 'Bebas Neue', cursive; 
	font-size: 25px;
	letter-spacing: 3px;
	color:#fff;
	-ms-transform: skew(20deg, 0deg);
    -webkit-transform: skew(20deg, 0deg);
    transform: skew(20deg, 0deg);
}

 .button-go {
	background: #fff;
	padding: 8px 0;
	text-align: center;
	 width: 114px;
	 margin-left:-20px;
}
.button-go .fa{
	color:#000; 
	font-size: 25px;
}

.cat-button:hover .button-text{background:#ed1c24; color:#000;}
.cat-button:hover .button-go{background: #000;}
.cat-button:hover .button-go .fa{color:#fff;}


.gray-block{background: #3c3c3c; height: 180px; position: relative; margin-top: -110px;}

/*---HOME - LOCATIONS----------------------------------*/
.location-box{align-items: center; display: flex; flex-direction: row; width: 100%;}

.location-left{align-items: center; width: 40%; padding: 40px 0; text-align: left;}
.location-left h3{color: #000; font-size: 4em;letter-spacing: 6px; line-height:55px;}

.location-left #title{display: inline-block; vertical-align: top}
.location-left #title p{}

.location-left #info{display: inline-block; text-align: left; vertical-align: top; padding-left:15px;}
.location-left #info p{}

#location-border{max-width: 100%; display: inline-block; margin-left: -60px;}


.location-right{align-items: center; width: 60%;}
.location-right iframe{box-shadow: 0px 2px 2px rgba(0,0,0,0.2); width: 100%; height: 350px; display: block;}

.loc-left-wrapper{display:flex; flex-direction:row; justify-content: space-between; width:100%;}

/*---CONTACT PAGE------------------------------------*/
#map-contact{width: 100%; height: 350px; display: block;}

.contact-cols{display: flex;}
.contact-cols .cols{display: inline-block; width:30%; vertical-align: top; margin: 10px 20px 10px 0;}


/*---INVENTORY PAGES ------------------------------------*/
.hosted-content #listings-title, .hosted-content .listings-wrapper .listings-list .category-banner h3{font-family: 'Bebas Neue', cursive !important;}
.hosted-content h1{font-size: 30px !important; font-family: 'Bebas Neue', cursive !important;}
.hosted-content h3{font-size: 25px !important; color:#ed1c24!important;}

.container .cf{font-family: 'Montserrat', sans-serif !important;}
.hosted-content .listings-wrapper .listings-list .listing-banner{font-family: 'Montserrat', sans-serif !important;}
.view-listing-details-link{color:#fff!important;}


/*--FOOTER------------------------------*/
.footer{background: #3c3c3c; width: 100%; color: #fff;}

.footer .left{display: inline-block; float: left;}
.footer .left a{color: #fff; line-height: 20px; font-size: 14px;}
.footer .left a:hover{text-decoration: underline;}
.footer .left p{color: #fff; font-weight:600;}


.footer .right{display: inline-block; float: right; margin-top: 20px;}
.footer .right img{width:100%; max-width:200px; text-align: right;}


.copyright{text-align: center; padding: 10px 0; color: #fff; letter-spacing: 1px; text-transform: uppercase; font-size: 14px;}
.copyright a{color: #fff;}




/*--- RESPONSIVE STYLES ---------------------------*/
@media screen and (max-width:1500px){

}

@media screen and (max-width:1300px){
.location-left{width: 100%;}
.location-right{align-items: center; width: 100%;}


}

@media screen and (max-width:1200px){
.formfield{width: 97%;}
#formpage input{padding: 10px 0;}

	
.wrapper-inner, .wrapper-center{width: 90%;}	
	
	
}
@media screen and (max-width:1100px){

.hero-overlay{	
	width: 100%;
	position:relative;
	background-color: rgba(0,0,0, .99);
    transform: none;
}
.hero-overlay .inner{width:90%; padding: 40px 0; transform:none;}
	
	
	.button-text h2, .button-text p{font-size: 20px;}
.button-go .fa{font-size: 20px;}		
}

@media screen and (max-width:1024px){
.location-box{align-items: center; display: flex; flex-direction: row; width: 100%; padding: 40px 0;}

.location-left{align-items: center; width: 100%; text-align: left;}
.location-left h3{color: #000; font-size: 35px;letter-spacing: 3px;}

#location-border{display: none;}

.location-right{align-items: center; width: 100%;}
.location-right iframe{height: 300px;}
.contact-cols{display: block;}
.contact-cols .cols{display: block; width:100%; margin: 10px 0;}

}


@media screen and (max-width:840px){	
.header-top a{ margin: 0 10px; font-size: 14px; letter-spacing: 1px; }

#topleft {width:100%; position:relative; text-align: center; transform: none; margin-bottom: -20px;}

#logo {padding-left: 0%;transform: none;}
#logo img{max-width: 250px; transform: none; display: inline-block;}
	
.header-border{display: none;}

#topright { background: #000; float: none; padding: 0; text-align: center}
#topright p{text-align: center; font-size: 15px;}

#map-contact{height: 280px;}	


.cat{width:60%; margin: 10px auto;}	
	
.location-box{ display: block;  padding:0; margin-bottom: 30px;}	
	
}

@media screen and (max-width:700px){
.header-top p{margin: 5px auto; display: block; width: 72%;}

	
.footer{padding: 20px 0;}	
.footer .left{display: inline-block; float: left;}

.footer .right{display: inline-block; float: right;}
.footer .right img{width:100%; max-width:200px; text-align: right;}

	
}

@media screen and (max-width:450px){
.cat{width:100%;}	
	
.footer .left{display: block; float: left; width: 100%;}

.footer .right{display: block; float: none; width: 100%;}
.footer .right img{width:100%; max-width:200px; text-align: left;  margin-top: 40px;}
	
}