﻿/***** 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 --------
yellow: fbaf3e

*/

/***** END RESET *****/

/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

@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;

}
/*-------- BODY STYLES --------*/

body {
	width: 100%;
	font-family: 'Open Sans', sans-serif;
	font-size:15px; 
	line-height: 22px; 
	-webkit-text-size-adjust:none; 
	background: #000;
	color: #fff;
	font-weight:400;
	overflow-x:hidden;
}

h1 { font-size: 30px; font-weight:700; color:#fbaf3e; text-align:inherit; text-transform:uppercase;line-height: 35px; padding-bottom: 8px; letter-spacing: 1px; font-family: 'Open Sans', sans-serif;}
h1 span{font-size: 25px; font-weight: 700; color: #fff;}
h2 {font-size: 22px; text-align:inherit;color:#fbaf3e; font-weight:700; letter-spacing: 1px; text-transform: uppercase; font-family: 'Open Sans', sans-serif;}
h3 {font-size:18px; color: #fbaf3e; font-weight: 700; letter-spacing: 1px;  text-transform: uppercase; font-family: 'Open Sans', sans-serif;}
h4{color:#767575; font-size: 20px; font-weight:700; text-align:left; letter-spacing: 1px; font-family: 'Open Sans', sans-serif; text-transform: uppercase; padding-bottom: 5px;}

a{color:#b3b3b3; text-decoration: none;}
a:hover {
	transition: all .8s ease;}
strong {font-weight: 700;}

#pad{padding: 3% 0;}
#l-pad{padding: 5% 0;}
.clear{clear:both;}

.black-bg{background: #000; color: #fff;}
.light-gray{background: #f4f4f4;}

#pageimage{width:100%; display: block; border-bottom: 3px solid #fbaf3e;}


/*--- HEADER STYLES --------------------------*/
/*--header top--*/
.header-top{background: #fff;}

.header-top p{display: inline-block; font-weight: 700; margin-right: 30px;}
.header-top p a{color: #000;}

.header-top .fa{font-size: 20px; margin-right: 10px;}

.top-left{float: left; display: inline-block;width: 45%; background: #fff;}
.top-left p a:hover{color: #fbaf3e;}

.top-right {
	width:60%;
	position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
    z-index: 9999;
    transform-origin: bottom right;
    -ms-transform: skew(-20deg, 0deg);
    -webkit-transform: skew(-20deg, 0deg);
    transform: skew(-20deg, 0deg);
	background:#fbaf3e;
	text-align: right;
	float: right;
}
.top-right p{
	margin-left: 10%;
	-ms-transform: skew(20deg, 0deg);
    -webkit-transform: skew(20deg, 0deg);
    transform: skew(20deg, 0deg);
	display: inline-block;
}
.top-right p a:hover{color: #fff;}

/*--header--*/
.header {background: #000; margin: 0 auto;}
.header-inner {padding:10px 0; width: 90%; margin: 0 auto; display: flex; align-items: center}

.logo {justify-content: flex-start; width: 20%; text-align: left}
.logo img{width: 100%; text-align: left}

.header-right{justify-content: flex-start; width: 80%; text-align: right}
.header-right img{width: 100%; max-width: 150px; display: inline-block; margin: 0 10px; vertical-align: middle;}


/*---BODY--------------------------------*/
.wrapper-inner { width: 70%; margin: 0 auto;}
.wrapper-center {width: 70%; margin: 0 auto; text-align: center;}


#yellow-button{display: inline-block; background: #fbaf3e; color: #000; padding:5px 15px; margin: 5px 0; letter-spacing: 1px; font-size: 14px; font-weight: 800}
#yellow-button:hover{background: #fff; transition: all .8s ease;}

.yellow-border{border-top: 4px solid #fbaf3e;}

/*---SLIDESHOW--------------------------*/
.cycle-slideshow img{width: 100%;}

.hero-overlay{ 	text-align:center;
	position:absolute;
	top:25vw;
	color:#fff;
	width:100%;
	z-index:99999;
	overflow: hidden;
	display: block;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
        /* Opera/IE 8+ */;
}

.hero-overlay h1 {font-size: 42px; font-weight:800; color:#fbaf3e; text-transform:uppercase;line-height: 50px;}

.slider-divider {
    background-image: url(/siteart/yellow-divider.png);
    background-size: 100% 159px;
    bottom: 0;
    height: 160px;
    z-index: 999;
	margin-top: -82px; 
	position: relative;
}

/*---HOME --------------------------------*/
.welcome-left{width: 50%; display: inline-block; float: left;}
.welcome-right{width: 50%; display: inline-block;}
.welcome-right img{width: 100%; margin-top: -78px;}


/*---CATEGORIES----------------------------*/
.category-wrapper{border-top: 2px solid #fff; border-bottom: 2px solid #fff;}
.zoom-container {
	width: 25%;
	position: relative;
	overflow: hidden;
	float:left;
	vertical-align: top;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-right: 1px solid #fff;

}
.zoom-container img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}
.zoom-container .zoom-caption {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	background: rgba(255,164,0,.65);
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
	padding: 20px 0;
}
.zoom-container .zoom-caption img{width:100px; margin: 0 auto; text-align:center; }


.zoom-container .zoom-caption h3 {
	display: block;
	text-align: center;
	font-size: 25px;
	font-weight:bold;
	padding: 5px 0;
	text-transform: uppercase;
	color: #fff;
	margin: 22% 0;

}


.zoom-container:hover img {
	-webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
	 
}
.zoom-container:hover .zoom-caption {
}


/*--- HOME PAGE KEYWORD SEARCH---------------------------*/
.search{width: 100%; margin: 10px auto; background:#000; }
.search-inner {padding: 10px 0px; width: 80%; margin: 0 auto;}
.search-inner h2{color:#fcb025;  text-align:left; display: inline-block; padding:18px 0;}

.keyword-search{
	display:inline-block;
	border: 1px solid #b3b3b3;
	float:right;
	width:60%;
}

.keyword-search input{
	padding-left:30px; 
	vertical-align:middle;
	border:none;
	background: none;
	font-size: 18px;
	letter-spacing: .5px;
	color:#fff;
	width:100%;
	height:60px;
}

.keyword-search .search-input{
	display:inline-block;
	vertical-align:middle;
	margin:0;
	width:90%;
}

.keyword-search .submit-btn{
	display:inline-block;
	vertical-align:middle;
	background:none;
	float: right;
}


input[type='submit']{
	font-family: 'icon-worksregular';
	-webkit-appearance: none;
	font-size:30px;
	color:#fbaf3e;
	background: none;
	padding: 15px; 
	vertical-align:middle;
	border:none;
	font-weight:700;
	float:right;
	text-align: right;

}
input[type='submit']:hover{color: #b3b3b3;}


/*---INVENTORY PAGES----------------------*/
/*--construction--*/
.cat-box{display: inline-block; background: #fff; border: 2px solid #fbaf3e; width: 100%; max-width: 23%; margin: 5px; text-align: center;}
.cat-box h2:hover{background: #000; color:#fbaf3e;}
.cat-box h2{background: #fbaf3e; color: #000; text-align: center; padding: 10px 0; font-size: 16px;}
.cat-box img{text-align: center; padding: 10px 0; margin: 0 auto; max-width: 200px;}
.cat-box img:hover{opacity: .8;}


/*-- LISTINGS--*/
.hosted-content .listings-wrapper .sort-box select, .hosted-content .listings-wrapper .sort-box label{color: #000 !important;}

.hosted-content .listings-wrapper, .hosted-content .listings-detail-wrapper, .hosted-content .listings-drilldown-wrapper, .hosted-content .listings-wrapper, .hosted-content .listings-detail-wrapper, .hosted-content .listings-drilldown-wrapper, .hosted-content h3, .hosted-content .fixed-column6 a{color: #fff !important;}
.hosted-content .listings-wrapper .listings-list .category-banner h3{color: #fff !important;}
.listings-wrapper .listing-boxed .listing-boxed-details h2 a{color: #fbaf3e !important;}

.currency-capital-price-container a, .hosted-content .mobile-calculator span{color:  #fff !important;}

.hosted-content .listings-detail-wrapper .information-box h3{color: #fbaf3e !important;}

.hosted-content .listings-detail-wrapper .information-box .row{background: #fff; color: #000;}

.hosted-content .listings-wrapper .listings-list .thumb img{background: #fff !important;}

/*--attachments--*/
.hosted-content .attachment-search .search-subheader, .attachment-search .search-checkboxes{color: #000 !important;}
.hosted-content input[type='submit'], .hosted-content button[type='submit'], .hosted-content .btn, .hosted-content .button{text-align: center !important;}

/*--rentals--*/
.hosted-content .listings-wrapper .listings-list .listing-name a{color:#fbaf3e !important}
.hosted-content .listings-wrapper, .hosted-content .listings-detail-wrapper, .hosted-content .listings-drilldown-wrapper, .mobile-dealer-info a, .compare-link a{color: #fff !important;}


/*---LOCATIONS---------------------------*/
.location{display: inline-block; border: 1px solid #fbaf3e; padding: 20px; width: 44.5%; margin: 5px;}
.location #yellow-button{margin-top: 20px;}
.location-map {
    width: 100%;
    height: 340px;
    display: block;
    overflow: hidden;
}

.location-map iframe {
    position: relative;
    top: -59px;
    border: none;
}
/*---FOOTER------------------------------*/
.footer-col{display: inline-block; vertical-align: top; width: 20%; margin-right: 5px; color: #b3b3b3;}
.footer-col li{list-style: none; text-transform: uppercase; font-size: 14px;}
.footer-col li a, .footer-col a{color: #b3b3b3 !important;}

.footer-logo{float: right; display: inline-block;}
.footer-logo img{width: 100%; max-width: 250px;}


/*---FORM STYLES-------------------------*/
#formpage {  margin: 0 auto;  }
#formpage div {
	vertical-align:top;
	padding:5px 5px;
	color: #fff;
}

#formpage input {
	padding:6px 5px 10px;
	border:1px solid #134773;
	font-size:13px;
	background:#fff;
}

#formpage textarea {
	padding:6px 0px;
	border:1px solid #134773;
	font-weight: 700;
	color:#000;
	font-size:12px;
	background:#fff;
	margin-top: 5px;
}

/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {
	border:1px solid #134773;
	color:#202e3b;
	vertical-align:middle;
	font-size:12px;
	line-height:normal;
	padding:8px 10px;
	width:100%;
}

.formfield {
	width:47%; 
	display:inline-block; 
	margin-right: 12px; 
	margin-top: 10px;
	color: #000;
	text-align:left;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.message {font-weight: bold;}
#formpage input  {
    width:100%;
	margin-top: 5px;
}
 
#formpage input.larger  {
    width:100%;
}

#formpage textarea {
    width:98%;
    height:85px;
}

#formpage input.radio {
    padding:0; 
    border:0;
    margin:0 5px 0 0;
    width:15px;
    height:15px;
    display:inline;
	
 }
/* focus states of various types of fields */
#formpage input:focus,
#formpage textarea:focus,
#formpage select:focus {
	background:rgba(233,233,233,1.00); 
	color:#000;
	border:1px solid #134773;
	outline-style:none;
}
#formpage input.radio:focus,
#formpage input.checkbox:focus {
	background:none; 
	border:0;
	outline-style:none;
}

#formpage input.button,
#formpage input.button:focus {
    width:200px;
	font-family: 'Open Sans', sans-serif;
    margin:0 auto;
    background: #fbaf3e; /* For browsers that do not support gradients */
    line-height:18px;
    color:#000;
	font-size:14px;
	padding: 10px 20px;
	font-weight: 800;
	letter-spacing:1px;
	text-align: center;
	display: block;
	border: none;
	float: none;
}
#formpage input.button:hover {
    margin:0;
    padding:10px 0px;
    background: #fff; /* For browsers that do not support gradients */
    line-height:18px;
	margin: 0 auto;
	text-align: center;
	display: block;
	transition: all .8s ease
}

/* for plain text next to an input field, if not using a table structure */
#formpage label.basic {
    color:#212121;
    font-size:13px;
    text-align:left;
	padding:10px 10px;
} 

.checkbox {text-align: left;}
#formpage input[type="checkbox" ] {
	width:25px; 
	text-align: left;
}

#formpage a#red-border-button  {color:#134773; background:#fff; padding:10px; border:1px solid #134773; transition:.2s ease;}
#formpage a#red-border-button:hover  {color:#fff; background:#134773; padding:10px; border:1px solid #134773;}
/*control the Captcha */

.CaptchaPanel {margin: 0 auto !important;padding:0 0 0 0 !important;line-height:normal !important;color:#000;width: 70%; text-align:left;}

.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;
}

.CaptchaAnswerPanel {
margin:0 0 0 0;
padding:2px 0px 2px 0px !important;
}

.CaptchaWhatsThisPanel {
	line-height:0;
	margin:0 0 10px 0;
	padding:10px 0 10px 0 !important;
}
.CaptchaWhatsThisPanel a {color:#fff;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;} 
.location h2 {
    margin-bottom: 5px;
}
/*-------- INVENTORY STYLES --------*/

.option-count, .option-name, .selected-header, .faceted-header{color:#000!important;}
.show-all-modal-title, .show-all-modal-content .option-name, .show-all-modal-content .option-count, .form-main-content .form-el label, .consent-text, .consent-text a, .iti__selected-dial-code{color:#000!important;}
.detail-wrapper .fin-stacked{background:#000!important;}
.faceted-search-content .mobile-done-button-container .mobile-done-button{background-color:#fbaf3e!important;}


/*-------- RESPONSIVE STYLES --------*/
@media screen and (max-width:1500px){
.zoom-container .zoom-caption h3{margin: 18% 0;}
}

@media screen and (max-width:1300px){
.keyword-search .search-input{width: 80%;}
.wrapper-center, .wrapper-inner, .header-inner{width: 90%;}

.welcome-left{width: 100%;}
.welcome-right{display: none;}

.hero-overlay{top: 30vw;}
	
.top-right p{margin-left: 5%;}

}

@media screen and (max-width:1024px){
.top-left{width: 60%}
.top-right{width: 50%;}	
	
.header-inner{display: block; width: 95%}
.logo { justify-content: flex-start; width: 100%; text-align: center; margin: 0 auto} 
 .logo img{text-align: center; margin: 0 auto; max-width: 300px;}
.header-right { justify-content: flex-start; width: 100%; text-align: center;}
.header-right img{max-width: 100px;}


.location{width: 95%; margin: 5px auto; padding: 20px 5px;}

.zoom-container .zoom-caption h3{margin: 15% 0; font-size: 20px;}

.cat-box{max-width: 47%;}

.footer-col{width: 32%; margin-right: 0;}
.footer-logo{float: none; text-align: center; margin:20px auto 0 auto; display: block; }	
	
.formfield{width: 96%;}
}


@media screen and (max-width:830px){
.top-left{width: 100%; float: none; text-align: center; margin: 0 auto;}
.top-right{width: 100%; transform: none; position: relative; float: none; text-align: center;}
.top-right p{transform: none; text-align: center; margin-left: 0;}

	
.hero-overlay{top: 40vw;}	
.hero-overlay h1 {font-size: 35px;line-height: 40px;}

.zoom-container{width:50%;border-bottom: 1px solid #fff;}
	
.search-inner h2 {text-align: center;display: block;padding: 15px 0;}
.keyword-search{float: none; width: 100%;}
}

@media screen and (max-width:649px){


.header-top p{font-size: 13px; margin-right:15px}	
.header-top .fa{font-size: 16px}
	
.header-right img{max-width: 80px; display: inline-block; margin: 0; }
	
	
	
.hero-overlay{top: 60vw;}	
.hero-overlay h1 {font-size: 30px;line-height: 32px;}
.hero-overlay span{font-size: 20px;}

.slider-divider{display: none;}	
	
.footer-col{width: 100%; display: block; text-align: center; margin: 10px auto;}

.cat-box{max-width: 100%; margin: 10px auto;}
}

@media screen and (max-width:490px){
	
.hero-overlay{display: none;}
	
.zoom-container{width:100%;border-bottom: 2px solid #fff; border-right: none;}
.zoom-container .zoom-caption h3{margin: 18% 0; font-size: 24px;}

.formfield{width: 93%;}
}
@media screen and (max-width:450px){
	.header-right img{max-width: 60px;}

	
}
