﻿/***** 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;  
} 


@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 --------
gray 7a7a7a
red: db1920

font-family: 'Barlow', sans-serif;

*/

/***** END RESET *****/
::-moz-selection {
    background: #edeceb; 
    color: #000;
    text-shadow: none;
}
::selection {
    background: #edeceb;
    color: #000;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {
	font-family: 'Barlow', sans-serif !important;
	font-size:16px; 
	line-height: 30px;  
	background:#fff;
	color: #7a7a7a; 
	font-weight:400;
	overflow-x:hidden;
	
}
h1 { font-size: 25px; color:#db1920; line-height: 40px; text-align:left; text-transform:uppercase;  font-weight: 700;}
h2 {font-size: 22px; text-align: left; color:#fff; font-weight:700;text-transform:uppercase; padding: 5px 0;}
h3 {font-size:22px; color: #db1920; font-weight: 700; text-align: center; text-transform:uppercase;}
h4{font-size: 20px; color:#db1920; text-align:left; text-transform:uppercase; line-height: 30px; font-weight:700;}

a{color:#7a7a7a; 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;}


strong {font-weight: 700;}

.clear{clear:both;}

.fa{font-size: 20px;}

/*--- HEADER STYLES --------------------------*/
.header {width:100%; background:#000; color: #fff; padding: 10px 0}

#logo{width: 100%; max-width: 200px;}
#logo:hover{opacity: .7}

#logo-mobile{text-align: center; margin: 0 auto; padding: 10px 0; display: none;}
#logo-mobile img{width: 100%; max-width: 200px; text-align: center; margin: 0 auto; }
#logo-mobile:hover{opacity: .7}

.head-search{background: #3E3E3E; color: #fff; padding: 8px 0;}


#top-search{width: 90%; margin: 0 auto; text-align: right}

#top-search a .fa{color: #fff; font-size: 20px;}
#top-search a:hover{color: #BFBFBF; transition: all .1s ease-in-out; 
	-moz-transition: all .1s ease-in-out; 
	-webkit-transition: all .1s ease-in-out;}


#searchbar {
	position: absolute;
    display: none;
    float: left;
    width: 100%;
    height: 62px;
    z-index: 9999;
	box-sizing: border-box;
	height: 100px;
	border-bottom: 1px #e5e5e5 solid;
	background: #000;
}
#searchbar #searchform #searchsubmit {
    background: url(../siteart/search.png) no-repeat right;
	float: left !important;
    width: 40% !important;
    height: 25px !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: 20px !important;
    line-height: 28px !important;
	color: #fff !important;
	background: #000 !important;
	font-family:  'Barlow', 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;}



/*---BODY--------------------------------*/
.wrapper { width: 100%; margin: 0 auto;}
.wrapper-inner {padding: 15px 0px; width:75%; margin: 0 auto; text-align: center;}
.wrapper-inner p { margin: 0 auto; padding: 5px 0px; text-align: left;}

.gray{background: #7a7a7a;}
.black{background: #000; color:#fff;}
.black a{color:#fff;}

.hex{background: url(/siteart/box-bg-img.jpg) repeat;width: 100%;}
#s-pad{padding: 2% 0;}
#pad{padding: 4% 0;}
#l-pad{padding:5% 0;}
#buttons{
	width: 220px;
	color:#fff !important; 
	background: #db1920; 
	border:2px solid #db1920; 
	padding: 18px 20px; 
	font-weight: 700;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	display: inline-block;
	text-align: left;
}
#buttons:hover{
	background:none; 
	border:2px solid #db1920;
color:#db1920 !important;}

#buttons .fa{float: right; font-size:25px; vertical-align: middle;}


#page-image{width:100%;}


.light-gray {background: #fcfafa; width: 100%; display:inline-block; overflow-x: hidden;}
.text-container {width:100%; margin-left:22%;text-align: center;}

.about-home {
	background:#fff; 
	width: 80%; 
	padding:3% 0; 
	vertical-align: top; 
	transform-origin: top left;
    -ms-transform: skew(-20deg, 0deg);
    -webkit-transform: skew(-20deg, 0deg);
    transform: skew(-20deg, 0deg);
}

.about-home h1 { 
	transform-origin: bottom left;
    -ms-transform: skew(20deg, 0deg);
    -webkit-transform: skew(20deg, 0deg);
    transform: skew(20deg, 0deg);
	margin-left: -10px ;
	text-align: center;
}
.about-home p{
    -ms-transform: skew(20deg, 0deg);
    -webkit-transform: skew(20deg, 0deg);
	transform: skew(20deg, 0deg);
text-align:center;}


.home-wrapper{width: 100%; height:605px;}


/*--------SEARCH FORM -----------------------*/
.mobile-search{display: none;}
#searchwrap {
	color:#fff; 
	line-height:20px;
	position: absolute; 
	z-index: 999; 
	right:0;
	background: rgba(0,0,0, .65);
	font-family:'Barlow', Sans-Serif;
	height: 609px;
	padding: 0 20px;
}

#search-container{
	font-size: 13px;
	padding: 8% 0;
	margin: 0 auto;
	width: 500px;
}
.search-form{
	color: #fff;
	padding: 15px 25px;
	box-sizing: border-box;
	font-family:'Barlow', Sans-Serif;
}
.search-form input {
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    background: #fff;
	box-sizing: border-box;
	margin-bottom: 10px;
	border: none;
}
.search-form select {
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    background: #fff;
	box-sizing: border-box;
	margin-bottom: 10px;
	font-family:'Barlow', Sans-Serif;
}
.search-form input[type="submit"] {
    font-size: 12px;
    color: #fff;
	background: #7a7a7a;
	width: 100%;
	padding: 5px 0;
	border: 1px #7a7a7a solid;
	border-radius: none;
	margin: 0 !important;
	box-sizing: border-box;
	font-family:'Barlow', Sans-Serif;
}
.search-form input[type="submit"]:hover {background: #db1920; 
	border: 1px #db1920 solid;}

.noUi-connect {
    background: #db1920 !important;
}
#slider-snap {
    margin: 5px 0 20px;
}








/*-------- FOOTER STYLES --------*/
.locator-bar{background:#212121; padding: 20px 0;}
#locator-button{
	width: 95%;
	max-width: 300px;
	color:#fff; 
	background: #db1920; 
	border:2px solid #db1920; 
	padding: 18px 0; 
	font-weight: 700;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	display: inline-block;
	text-align: center;
}
#locator-button .fa{font-size:20px; margin-left: 50px}

#locator-button:hover{
	background:none; 
	border:2px solid #db1920;
}


/*--black footer --*/
.red, a.red{color: #db1920 !important}
.footer{background: #000; color: #fff; width: 100%; padding: 60px 0; }

.footer .inner{display: flex; width: 80%; margin: 0 auto}
.footer .inner .left{justify-content: flex-start; width: 40%; font-size: 14px;}
.footer .inner .left img{ width: 100%; max-width: 300px; margin-bottom: 10px;}

.footer .inner .right{justify-content: flex-start; width: 30%;}
.footer .inner .right a{color: #fff}


.footer .fa, .footer .fab{color: #000; background: #fff; border-radius: 8px; width: 25px; text-align: center; font-size: 18px; padding: 8px; margin: 5px;}



/*-------- RESPONSIVE STYLES --------*/

@media screen and (max-width:1024px){
	#logo-mobile{display: block}
	
	
.desktop-search{display:block;}
#searchwrap {width: 100%; height: auto; position: relative; background:#212121; padding: 0;}
#detailedsearch{height: 100%; padding:1% 0; width: 95%; margin: 0 auto;}
#search-container{width: 90%;}
.search-form{padding:0;}


.cycle-slideshow {display: none;}
.home-wrapper{height: 100%;}

#contact-button{width: 150px;}

.wrapper-inner{width:90%;}


	
.footer .inner{display: flex; width: 90%; margin: 0 auto}
	
}

@media screen and (max-width:800px){
.footer .inner{display: block;}
.footer .inner .left{justify-content: flex-end; width: 100%; display: block; margin-bottom: 30px}
.footer .inner .left img{ width: 100%; max-width: 200px; margin-bottom: 10px;}

.footer .inner .right{justify-content: flex-end; width: 100%;}
.footer .fa, .footer .fab{width: 15px; text-align: center; font-size: 15px; padding: 10px; margin: 5px;}

	
	
.about-home{width:70%;}
.text-container{margin-left: 27%;}
}

@media screen and (max-width:649px){

.about-home{width:82%;}
.about-home h1{margin-left: -21px;}
.text-container{margin-left: 27%;}


#detailedsearch{width: 98%;}

#about-button{width:85%; padding:10px 20px;}
#contact-button{width: 85%; padding: 10px 20px; margin: 5px 0;}



}

@media screen and (max-width:400px){
.about-home{width:82%;}
.about-home h1{margin-left: -35px;}
.text-container{margin-left: 40%;}

}

@media screen and (max-width:320px){
.about-home{width:88%;}
.about-home h1{margin-left: -35px;}
.text-container{margin-left: 40%;}
}


