/* font-family: 'Josefin Sans', sans-serif; */

* {
	font-family: 'Oswald', sans-serif;
}


@media only screen and (min-width: 768px) {
.collapse {
	display: block !important;
}
}


/*******************************************************************
 *
 * HOME
 *
 *******************************************************************/
 
 .hero-home {
	 background:url('/img/hero-home.jpg');
	 background-size:cover;
	 background-position: center center;
	 background-attachment: fixed;
	 min-height:75vh;
 }
 
 .header {
	 padding:20px;
	 background:rgba(255,255,255,.4);
	 color:#000;
	 font-size:20px;
	 letter-spacing: 1px;
 }
 
 .logo-wrap {
	 padding:20px;
	 background:#fff;
	 text-align: center;
 }
 
 .logo-wrap img {
	 max-width: 300px;
 }
 
 .home-hero-msg h1 {
	 color:rgba(255,255,255,.7);
	 font-size: 80px;
	 font-weight: 700;
	 padding-top:8vh;

 }

 .home-hero-msg h2 {
	 color:rgba(255,255,255,.7);
	 font-size: 80px;
	 letter-spacing: 1px;
 }
 
 .home-hero-msg a {
	 background:#c12329;
	 color:#fff;
	 display: inline-block;
	 text-align: center;
	 padding:14px 60px;
	 letter-spacing: 2px;
	 font-weight: 300;
	 font-size:40px;
	 transition:all .8s;
 }
 
.home-hero-msg a:hover {
     text-decoration: none;
	 background:#e00;
}

.gcnav {
	background:#000;
	text-align: center;
	
}

.gcnav li {
	margin:0 auto;
	list-style-type: none;
	display: inline-block;
	overflow: hidden;
	
}

.gcnav li a {
	padding:10px 30px 6px 30px;
	color:#fff;
	font-size:18px;
	font-family: 'Josefin Sans', sans-serif;
	display: block;
	transition:all .8s;
}

.gcnav li a:hover {
	text-decoration: none;
	background:#c12329;
} 

.btn-menu {
	background:#000;
	border-radius: 0px;
	border:0px;
	color:#fff;
	font-size:24px;
}




/*******************************************************************
 *
 * HOME BOXES
 *
 *******************************************************************/

@media only screen and (min-width: 768px) { 
	.row-height {
	  display: table;
	  table-layout: fixed;
	  height: 100%;
	  width: 100%;
	}
	.col-height {
	  display: table-cell;
	  float: none;
	  height: 100%;
	   vertical-align: top;
	}
}
.home-box {
	background:#212121;
	padding:50px;
	text-align: center;
	border-left:3px solid #fff;
	border-right:3px solid #fff;
	border-top:6px solid #fff;
	height:100%;
	color:#fff;
}

.home-box img {
	height:50px;
}

.home-box h4 {
	letter-spacing: 2px;
	text-transform: uppercase;
	display: block;
	width:90%;
	max-width:290px;

	margin:0 auto;
	margin-top:20px;
	line-height: 1.6;
}

.home-box p {
	font-family: 'Josefin Sans', sans-serif;
	line-height: 1.6;
	display: block;
	width:90%;
	
	max-width: 400px;
	margin:0 auto;
	margin-top:20px;
}





/*******************************************************************
 *
 * HOME BUILDER
 *
 *******************************************************************/
 
 .home-builder {
	 padding:50px 0px 0px 0px;
 }

.home-builder h1 {
	letter-spacing: 1px;
	text-transform: uppercase;
}

.home-builder h1 span {
	font-weight: 700;
}




/*******************************************************************
 *
 * HOME CTA
 *
 *******************************************************************/

.home-cta {
	background:#212121;
	padding:50px 0px;
}

.home-cta h1 {
	letter-spacing: 1px;
	text-transform: uppercase;
	color:#fff;
}

.home-cta h1 span {
	font-weight: 700;
}

.home-cta a {
	display: inline-block;
	padding:14px 32px;
	color:#fff;
	transition: all .8s;
	text-align: center;
	font-weight: 300;
	letter-spacing: 2px;
	margin:0 auto;
	background:#3f3f3f;
	font-size:22px;
}

.home-cta a:hover {
	text-decoration: none;
	background:#c12329;
}



/*******************************************************************
 *
 * HOME BLOCKS
 *
 *******************************************************************/

.home-block {
	  vertical-align: middle !important;
	  text-align: center;
}

.home-block h4 {
	letter-spacing: 1px;
	text-transform: uppercase;

	font-size: 30px;
}

.home-block h4 span {
	font-weight: 700;
}

.home-block p {
	font-family: 'Josefin Sans', sans-serif;
	line-height: 1.6;
	display: block;
	width:90%;
	max-width: 500px;
	margin:0 auto;
	margin-top:20px;
	font-size:18px;
}

.home-block img {
	width:80%;
	max-width: 550px;
	display: block;
	margin:0 auto;
}

.home-block-img {
	margin:0px !important;
	padding:0px !important;
}




/*******************************************************************
 *
 * FOOTER
 *
 *******************************************************************/

.footer {
	background:#f2f2f2;
	padding:20px;
}

.footer-logo {
	max-height:100px
}

.footer-txt p {
	text-align: right;
	font-family: 'Josefin Sans', sans-serif;
	line-height: 1.6;
	font-size:20px;
}




/*******************************************************************
 *
 * SUB-HERO
 *
 *******************************************************************/
 
 .sub-hero {
	 background-size:auto 100%;
	 background-position: center center;
	 background-attachment: fixed;
	 height:55vh;
	 min-height: 450px;
	 background-repeat: no-repeat;
 }
 
 .sub-page-title {
	margin-top: 50px;
    text-align: right;
    padding: 20px 30px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 60px;
	background: linear-gradient(90deg,rgba(0,0,0,0.0), rgba(0,0,0,.7));
    color: rgba(255,255,255,.4);
}

.sub-page-title h1 {
	font-size:60px;
	margin-top:0px;
	margin-bottom:0px;
}

 
 
 
 /*******************************************************************
 *
 * METAL BUILDINGS
 *
 *******************************************************************/

.metal-buildings-hero {
	background-image:url('/img/metal-building-hero.jpg');
}



 /*******************************************************************
 *
 * ROOFING
 *
 *******************************************************************/
 
 
 .roofing-hero {
	background-image:url('/img/hero-roofing.jpg');
}

.roofing-hdr {
	padding:26px 0px;
	text-align: center;
	background:#f2f2f2;
	margin-bottom:28px;
}


.roofing-hdr h1 {
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size:32px;
	
}

.roofing-hdr h1 span {
	font-weight: 700;
}

.roof-type-hdr {
	background:#494948;
	color:#fff;
	padding:14px 0px;
}

.roof-type-hdr div {
	text-align: center;
	
}

.roof-type-hdr div h4 {
	letter-spacing: 1px;
}

.roof-type {
	background:#e0e0e0;
	height:200px !important;
	border-bottom:1px solid #fff !important;
	border-right:1px solid #fff !important;
	transition:all .5s;
}

.roofing-type-wrap .row-height:hover {
	background:#e0e0e0;
	transition:all .8s;
}


.roofing-type-wrap .row-height:hover > #decra {
	background:url("/img/Decra.png") !important;
	background-size:cover !important;
	color:#fff;
	transition:all .5s;
}

.roofing-type-wrap .row-height:hover > #gaf {
	background:url("/img/Gaf.png") !important;
	background-size:cover !important;
	transition:all .5s;
}

.roofing-type-wrap .row-height:hover > #tamko {
	background:url("/img/Tamko.png") !important;
	background-size:cover !important;
	color:#fff;
	transition:all .5s;
}

.roofing-type-wrap .row-height:hover > #steel {
	background:url("/img/Metal.png") !important;
	background-size:cover !important;
	color:#fff;
	transition:all .5s;
}

.roofing-type-wrap {
	margin:80px 0px 80px 0px;
}

.roofing-type-wrap .col-height {
	vertical-align: middle !important;
	text-align: center;
	border-bottom:1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	    word-wrap: break-word;
}

.roofing-type-wrap .col-height h4, .roofing-type-wrap .col-height p {
	font-size:22px;
	letter-spacing: 1px;
}

.roofing-cta {
	background:#212121;
	padding:50px 0px;
	text-align: center;
}

.roofing-cta a {
	display: inline-block;
	padding:14px 32px;
	color:#fff;
	transition: all .8s;
	text-align: center;
	font-weight: 300;
	letter-spacing: 2px;
	margin:0 auto;
	background:#c12329;
	font-size:22px;
}

.roofing-cta a:hover {
	text-decoration: none;
	background:#e00;
}


 /*******************************************************************
 *
 * OUR WORK
 *
 *******************************************************************/

.work-footer {
	padding:50px 0px;
	text-align: center;
	font-size:24px;
	text-transform: uppercase;
	font-weight: 300;
}

.work-footer span {
	color:#c12329;
	font-weight: 700;
}

.project-wrap {
	height:300px;
	background:#e0e0e0;
	background-size:cover;
	background-position: center center;
	margin-bottom:30px;
	
}

.project-wrap h4 {
	padding-top:120px;
	text-align: center;
	font-size:24px;
	display: block;
}

 /*******************************************************************
 *
 * QUOTE
 *
 *******************************************************************/
 
 
 .quote-hero {
	background-image:url('/img/hero-quote.jpg');
}

.quote-left, .quote-right {
		padding:26px 0px;
	text-align: center;
	
	margin-bottom:0px;
}

.quote-left {
	background:#f2f2f2;
}

.quote-right {
	background:#212121;
	color:#fff;
}

#map {
	width:100%;
	height:600px
}

.col-quote {
	padding:0px !important;
}

.quote-form {
	display: block;
	width:90%;
	margin:0 auto;
	padding-top:30px;
}

.form-control {
	font-family: 'Josefin Sans', sans-serif;
	border-radius: 0px;
	margin-bottom:30px;
	padding: 20px 10px !important;
}

label {
	font-weight: 300;
	letter-spacing: 1px;
	
}

.quote-form-btn {
	background:#C12329;
	padding:20px;
	margin:0 auto;
	margin-top:-10px;
	color:#fff;
	border-radius: 0px;
	border:0px;
	width:100%;
	text-align: center;
}

#form-msg {
	display: block;
	width:90%;
	margin: 0 auto
}


/*******************************************************************
 *
 * CUSTOM BUILDER
 *
 *******************************************************************/



#vb_wrapper {
	width: 100%;
	position: relative;
	z-index: 500;
	text-align: center;
	background: #fff;
}

#vb_wrapper img, #vb_walls img, #vb_trim img, #vb_roof img {
	text-align: center;
	margin:0 auto;
}

#vb_controls {
    padding:0px;
}

#vb_controls a {
	font-size:24px;
	background:#424242;
	color:#fff;
	display: block;
	padding:10px;
	letter-spacing: 2px;
	font-weight: 300;
	cursor: pointer;
	transition:all .8s;
}

#vb_controls a:hover {
	text-decoration: none;
	background:#111;
}

.activeTab {
	background:#c12329 !important;
}

.activeColor {
	border:2px solid #111 !important;
	border-radius: 0px !important;
	transition:all .8s;
}

.start-wrap, .roof-wrap, .trim-wrap, .walls-wrap {
	padding-top:20px;
}

#vb_controls h3 {
	font-family:"industry-inc-base";
	font-size:30px;
	color:#fff;
	    margin-top: 10px;
}
	#vb_color_picker { 

		width: 100%;
		border: 1px solid #ccc;
		background: #fff;
		z-index: 501;
		padding: 25px;
		overflow: hidden;
		text-align: center;
	}
		#vb_color_picker li {
			list-style: none;
			margin:0 auto;
			display: inline-block;
			width: 35px;
			height: 35px;
			margin: 4px !important;
			position: relative;
		}
			#vb_color_picker li a {
				display: block;
				width: 30px;
				height: 30px !important;
				display: block;
				height: 0;
				color: #666;
				text-align: center;
				text-indent: 0;
				text-decoration:none;
				border-radius: 50%;
			}
				#vb_color_picker li a#color_polar_white { background: #dfe5ed; }
				#vb_color_picker li a#color_sahara_tan { background: #cba778; }
				#vb_color_picker li a#color_burnished_slate { background: #40413e; }
				#vb_color_picker li a#color_hawaiian_blue { background: #587992; }
				#vb_color_picker li a#color_rustic_red { background: #852c19; }
				#vb_color_picker li a#color_charcoal_gray { background: #57595b; }
				#vb_color_picker li a#color_light_stone { background: #d6d0c1; }
				#vb_color_picker li a#color_crimson_red { background: #b32526; }
				#vb_color_picker li a#color_koko_brown { background: #524124; }
				#vb_color_picker li a#color_fern_green { background: #004135; }
				#vb_color_picker li a#color_ash_gray { background: #a7acb1; }
				#vb_color_picker li a#color_colony_green { background: #708577; }
				#vb_color_picker li a#color_burgundy { background: #38251f; }
				#vb_color_picker li a#color_aztec_gold { background: #d2ca7f; }
				#vb_color_picker li a#color_kelly_green { background: #05634c; }
				#vb_color_picker li a#color_desert_beige { background: #a59e90; }
				#vb_color_picker li a#color_deep_blue { background: #1e315f; }
				
				#vb_color_picker li a#color_orange { background: #fe7338; }
				#vb_color_picker li a#color_harbor_blue { background: #123e6b; }
				#vb_color_picker li a#color_black { background: #000000; }
				#vb_color_picker li a#color_copper { background: #ae7852; }
				#vb_color_picker li a#color_galvalume { background: #ccc url(/img/builder/galvalume.jpg) no-repeat; }
	


#vb_canvas {
	width: 100%;
	min-height:600px;
	max-height:600px;
	background: url(/img/builder/background.jpg) no-repeat center top;
	position: relative;
}

	#vb_loading_box {
		position: absolute;
		top: 250px;
		left: 420px;
		width: 150px;
		height: 50px;
		text-align: center;
	}
	
	#vb_active_canvas {
		display: none;
		max-height:600px !important;
		height:600px !important;
	}
	
		#vb_active_canvas .vb_canvas_section img {
			position: absolute;
			top: 0;
			left: 0;
			right:0;
			display: none;
		}


.rtype {
	font-family: 'Josefin Sans', sans-serif;
	font-size:14px !important;
	padding-top:14px;
}

@media only screen and (max-width: 767px) {
	.home-hero-msg h1, .home-hero-msg h2 {
		font-size:36px;
	}
	 .home-hero-msg a {
		 font-size:20px;
	 }
	 
	 .home-boxes, .home-block-img {
		 overflow: hidden;
	 }
	 
	#vb_canvas {
		background:inherit !important;
		min-height: inherit !important;
	}
	
	.home-cta h1 {
		padding-left:10px;
		padding-right:10px;
		font-size: 28px;
	}
	
	.home-block {
		border-bottom:2px dashed #e2e2e2;
		padding-bottom:18px;
		padding-top:20px;
	}
	
	.roof-type {
		height:inherit;
	}
	
	.footer-logo {
		max-height: inherit;
		width:90%;
		display: block;
		margin:0 auto;
	}
	
	.footer-txt p {
		text-align: center;
	}
	
#decra {
	background:url("/img/Decra.png") !important;
	background-size:cover !important;
	color:#fff;
	transition:all .5s;
}

#gaf {
	background:url("/img/Gaf.png") !important;
	background-size:cover !important;
	transition:all .5s;
	color:#fff !important;
}

#tamko {
	background:url("/img/Tamko.png") !important;
	background-size:cover !important;
	color:#fff;
	transition:all .5s;
}

#steel {
	background:url("/img/Metal.png") !important;
	background-size:cover !important;
	color:#fff;
	transition:all .5s;
}

.quote-left h1 {
	font-size:26px;
}

.gcnav li {
	margin:0 auto;
	list-style-type: none;
	display: block;
	overflow: hidden;
	width:100%;
	margin-left:-20px;
	
}

#vb_active_canvas {
	height: inherit !important;
}

#vb_color_picker {
	border:0px;
}

}


/* WEST BUSINES PARK */

.west-business-hero {
	background-image: url('/img/west-business-park-hero.png');
	background-position: bottom;
	background-size: cover;
	background-attachment: initial;
}


.west-business-park h2 {
	font-size: 42px;
	line-height: 1.2;
	color: black;
	margin-bottom: 22px;
}

.wrapper {
	width: 80%;
	margin: 0 auto;
	max-width: 1200px;
}

@media(max-width: 767px) {
	.wrapper {
		width: 92.5%;
	}
}

.text-text-split {
	padding: 115px 0;
}

.text-text-split .wrapper {
	display: flex;
	align-items: baseline;
	gap: 51px;
}

.text-text-split__left, .text-text-split__right {
	width: 50%;
}


.text-text-split__right h3 {
	font-size: 16px;
	font-weight: bold;
	font-family: 'Josefin Sans', sans-serif;
	color: black;
	margin-top: 32px;
}

.text-text-split p, .text-text-split ul li {
	font-family: 'Josefin Sans', sans-serif;
	color: black;
	font-size: 16px;
}

@media(max-width: 768px) {
	.text-text-split {
		padding: 50px 0;
	}

	.text-text-split .wrapper {
		flex-direction: column;
		align-items: start;
		gap: 0;
	}

	.text-text-split__left, .text-text-split__right {
		width: 100%;
	}

	.text-text-split__right h2 {
		display: none;
	}
}

.plans {
	background: #F2F2F2;
	padding-top: 129px;
	padding-bottom: 115px;
}

.plans__sites__sites {
	display: flex;
	gap: 28px;
	padding-bottom: 114px;
}

.plans__sites__sites a {
	display: block;
	aspect-ratio: 339 / 231;
}

.plans__sites__sites a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.plans__colors__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.plan__colors__options {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.colors-options {
	display: flex;
	gap: 8px;
	align-items: center;
	padding-right: 22px;
	margin-right: 22px;
	border-right: 1px solid rgba(112, 112, 112, 0.24);
}

.colors-options p {
	margin: 0;
	padding-right: 7px;
	font-family: 'Josefin Sans', sans-serif;
	color: black;
}

.colors-options:last-child {
	border-right: none;
	padding-right: 0;
	margin-right: 0;
}

.colors-options__color {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	transform: rotate(-45deg);
	--red: #712727;
	--tan: #AD9A97;
	--grey: #52504F;
	--blue: #485167;
	cursor: pointer;
	flex-shrink: 0;
	transition: 0.3s ease;
}

.colors-options__color.active {
	transform: rotate(0deg);
}



.tan-grey {
	background: linear-gradient(180deg, var(--tan) 50%, var(--grey) 50%);
}

.tan-red {
	background: linear-gradient(180deg, var(--tan) 50%, var(--red) 50%);
}

.tan-blue {
	background: linear-gradient(180deg, var(--tan) 50%, var(--blue) 50%);
}

.blue-grey {
	background: linear-gradient(180deg, var(--blue) 50%, var(--grey) 50%);
}

.red-grey {
	background: linear-gradient(180deg, var(--red) 50%, var(--grey) 50%);
}

.color-options-image {
	width: 100%;
	aspect-ratio: 1047 / 589;
}

.color-options-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media(max-width: 1024px) {
	.plans__sites__sites {
		flex-direction: column;
	}

	.plans__sites__sites a {
		max-width: 500px;
		margin: 0 auto;
	}

	.plans__colors__heading {
		flex-direction: column;
	}
}

@media(max-width: 768px) {
	.plans {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.plans__sites__sites {
		padding-bottom: 50px;
	}
	.plan__colors__options {
		flex-direction: column;
		align-items: flex-start;
	}

	.plan__colors__options .colors-options {
		margin-bottom: 10px;
		padding-right: 0;
		margin-right: 0;
		padding-bottom: 10px;
		border-right: none;
		border-bottom: 1px solid rgba(112, 112, 112, 0.24);
	}

	.plan__colors__options .colors-options:last-child {
		border-bottom: none;
	}
}

.west-business-park-location {
	padding-top: 87px;
	padding-bottom: 115px;
}

.location-map {
	aspect-ratio: 1047 / 589;
	width: 100%;
}

.location-map iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media(max-width: 768px) {
	.west-business-park-location {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

.park-cta {
	background-color: black;
	padding: 50px 0;
}

.park-cta .wrapper {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	align-items: center;
}

.park-cta h2 {
	color: white;
}

.park-cta button {
	background: #B03431;
	color: white;
	padding: 15px 27px;
	border: none;
	font-size: 22px;
	transition: 0.3s ease;
}

.park-cta button:hover {
	background: #712727;
}

@media(max-width: 767px) {
	.park-cta .wrapper {
		flex-direction: column;
	}

	.park-cta h2 {
		margin-bottom: 20px;
	}
}