@charset "UTF-8";
/* ---------- GENERAL ---------- */

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
 }
 
html, body, h1, h2, h3, h4, h5, p, ul, li {
	 margin: 0;
	 padding: 0;
	 font-weight: normal;
}
h3 { color: #046b9f; margin-bottom: 15px; }
h4 { color: #fff; text-transform: uppercase; font-size: 16px; margin-bottom: 12px;}
ul { list-style-type: none; }
p, li { font-size: 14px; }
a { text-decoration: none; transition: all .3s ease-in-out; }
.flexc { display: flex; align-items: center; justify-content: center; }
.flexs { display: flex; align-items: center; justify-content: flex-start; }
.flexe { display: flex; align-items: center; justify-content: flex-end; }
.flexcecol { display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; }

body {
	height: 100%;
	margin: 0;
	padding: 0;
}
.oneQuarter-sm {
	width: 23.5%;
	padding: 1.5%;
	float: left;
	margin-right: 2%;
	text-align: center;
}
.oneQuarter-sm:nth-child(4) {
	margin-right: 0;
}
.oneQuarter-sm h4 { color: #024263; }
.oneQuarter-sm img { margin-top: 5px; }

.oneQuarter {
	width: 23.5%;
	height: 298px;
	padding: 1.5%;
	float: left;
	margin-right: 2%;
	text-align: left;
}
.oneQuarter:nth-child(4) {
	margin-right: 0;
}
.oneQuarter:nth-child(3), .oneQuarter:nth-child(4) { text-align: center; }
.oneQuarter p, .oneQuarter ul, .oneQuarter li { font-size: 13px; }
.oneQuarter i { color: #046b9f; font-size: 10px; margin-right: 10px; }
.oneQuarter h3 { text-align: center; border-bottom: 1px solid #CCC; }
.oneQuarter img { margin-top: 20px; margin-bottom: 0 !important; margin-left: 0 !important; float: none !important; }

.fullButton { margin-top: 30px; }
a.fullButton { color: #fff; display: block; width: 100%; height: 40px; bottom: 0; font-size:14px; background-color:#D54444; text-align: center; line-height: 40px; border-bottom: 3px solid #C23032; transition: all 1s ease-in-out; }
a.fullButton:hover { background-color: #C23032; color: #E7E7E7; }



/* ---------- ELEMENTS ---------- */
#header {
	width: 100%;
	height: 75px;
	position: fixed;
	background-color: #FFF;
	-webkit-box-shadow: 0px 4px 25px -4px rgba(0,0,0,0.73);
	-moz-box-shadow: 0px 4px 25px -4px rgba(0,0,0,0.73);
	box-shadow: 0px 4px 25px -4px rgba(0,0,0,0.73);
}

#headerLeft {
	width: 30%;
	height: 75PX;
	float: left;
	padding-left: 10%;
}
#headerLeft img {
	height: 60px;
	width: auto;
}
#headerRight {
	width: 70%;
	height: 75PX;
	float: left;
}
#nav {
	color: #000;
	font-family: 'Open Sans', sans-serif;
	width: 100%;
}
#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#nav ul li a {
	line-height: 75px;
	padding: 0 20px;
	text-decoration: none;
	color: #333;
	display: block;
	float: right;
	font-size: 12px;
	-webkit-transition: background-color 0.7s, color 0.7s;
    transition: background-color 0.7s, color 0.7s;
}
#nav ul li a:hover, #nav ul li a.active {
	background-color: #2662af;
	color: #FFF;
}
#nav ul li .active {
	background-color: #2662af;
	color: #FFF;
}
#nav .mobile { display: none; }
#hiddenPanel { width: 40%; height: 100%; position: fixed; top: 0; right: 0; background:rgba(0,0,0,0.9); color: #fff; display: none; padding: 2%; }
#hiddenPanel .close { display: block; position: fixed; top: 2%; right: 2%; }
#hiddenPanel a { color: #fff; text-decoration: none; }
#hiddenPanel ul { margin: 0; padding: 0; width: 100%; }
#hiddenPanel ul li { padding: 15px 1%; border-bottom: 1px solid #3C3C3C; color: #fff; }

#sub-header { width: 100%; height: 250px; background-attachment: fixed; background: url(img/front4.jpg) center center; }
#sub-header-contact { width: 100%; height: 250px; background-attachment: fixed; background: url(img/contactBanner.jpg) center center; }
#slideshow { min-height: 330px; height: 475px; width: 100%; background-attachment: fixed; }

#content { width: 100%; min-height: 350px; padding: 2% 10%; } 
#content h1 { color: #046b9f; font-size: 22px; margin-bottom: 5px; }
#content h2 { color: #848484; font-size: 16px; margin-bottom: 15px; }
#content p { margin-bottom: 20px; }
#content .lmLogo { float: right; margin-left: 15px; margin-bottom: 15px; }
#content .clip { float: none; margin-right: 10px; margin-bottom: 10px; margin-left: 0; }
.offerings { border: 1px solid #ccc; }
.sideBtn { display: block; width: 100%; padding: 10px 0; color: #fff; border: 1px solid #fff; text-align: center; font-size: 16px; margin-bottom: 20px; transition: all .3s ease-in; }
.sideBtn:hover { color: #046b9f; background-color: #fff; }

#contentLeft { float: left; width: 70%; }
#contentLeft a { text-decoration: none; color: #D14E50; transition: all .3s linear; }
#contentLeft .oneHalf { width: 49%; min-height: 200px; transition: all .3s linear; float: left; margin-top: 20px; }
#contentLeft .oneHalf { cursor: pointer; }
#contentLeft .resi { background: linear-gradient( rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url(img/legacy-preview.jpg) center center; }
#contentLeft .resi:hover { background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(img/legacy-preview.jpg) center center; color: #fff; }
#contentLeft .comm { background: linear-gradient( rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url(img/commercial-preview.jpg) center center; }
#contentLeft .comm:hover { background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(img/commercial-preview.jpg) center center; color: #fff; }
#contentRight { float: left; display: block; width: 28%; margin-left: 2%; padding: 15px; background-color: #046b9f; color: #fff; }
#contentRight i { margin-right: 10px; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; }
#contentRight a.spin { color: #fff; } 
#contentRight i:hover { -webkit-transform: rotate(360deg); transform: rotate(360deg); }

#operators { width: 100%; border-top: 3px solid #CCC; padding-top: 15px; }
#operators .opBox { width: 49%; float: left; min-height: 200px; margin-bottom: 15px; }
#operators .opBox:nth-child(odd) { margin-right: 2%; }
#operators .thumb { text-align: center; }

.doorStyles { width: 24%; height: 200px; float: left; margin-right: 1.3%; transition: all .3s ease-in; background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)); font-size: 26px; } 
.doorStyles:hover { cursor: pointer; }
.doorStyles a { color: inherit; transition: all .3s ease-in; }
.doorStyles a:hover { text-decoration: underline; color: inherit; }
.doorStyles p { margin-bottom: 5px !important; }

#doorStyleContainer { margin-bottom: 20px; }
#doorStyleContainer .doorStyles:nth-child(1) { background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(img/legacy-preview.jpg) center center; }
#doorStyleContainer .doorStyles:nth-child(1):hover { background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/legacy-preview.jpg) center center; color: #fff; }
#doorStyleContainer .doorStyles:nth-child(2) { background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(img/carriage-preview.jpg) center center; }
#doorStyleContainer .doorStyles:nth-child(2):hover { background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/carriage-preview.jpg) center center; color: #fff; }
#doorStyleContainer .doorStyles:nth-child(3) { background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(img/homestead-preview.jpg) center center; }
#doorStyleContainer .doorStyles:nth-child(3):hover { background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/homestead-preview.jpg) center center; color: #fff; }
#doorStyleContainer .doorStyles:nth-child(4) { margin-right: 0; background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(img/premium-preview.jpg) center center; }
#doorStyleContainer .doorStyles:nth-child(4):hover { background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/premium-preview.jpg) center center; color: #fff; }


.comStyles { width: 32%; height: 200px; float: left; margin-right: 2%; transition: all .3s ease-in; background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)); font-size: 26px; } 
.comStyles:hover { cursor: pointer; }
.comStyles a { color: inherit; transition: all .3s ease-in; }
.comStyles a:hover { text-decoration: underline; color: inherit; }
.comStyles p { margin-bottom: 5px !important; }

#doorStyleContainer .comStyles:nth-child(1) { background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(img/commercial-preview.jpg) center center; }
#doorStyleContainer .comStyles:nth-child(1):hover { background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/commercial-preview.jpg) center center; color: #fff; }
#doorStyleContainer .comStyles:nth-child(2) { background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(img/commercialFlush.jpg) center center; }
#doorStyleContainer .comStyles:nth-child(2):hover { background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/commercialFlush.jpg) center center; color: #fff; }
#doorStyleContainer .comStyles:nth-child(3) { margin-right: 0; background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(img/commercialPremium.jpg) center center; }
#doorStyleContainer .comStyles:nth-child(3):hover { background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/commercialPremium.jpg) center center; color: #fff; }

#designer { width: 130px; height: 40px; line-height: 40px; position: fixed; top: 100px; right: 0; font-size: 10px; color: #fff; background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); transition: background .5s ease; }
#designer:hover { background: linear-gradient( rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)); cursor: pointer; }
#designer img { margin-right: 5px; } 

#footer { width: 100%; }
#comInfo { color: #fff; width: 100%; padding: 5% 10%; background: #046b9f; /* Old browsers */ background: -moz-linear-gradient(-45deg,  #046b9f 0%, #207cca 51%, #0277b2 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg,  #046b9f 0%,#207cca 51%,#0277b2 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg,  #046b9f 0%,#207cca 51%,#0277b2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#046b9f', endColorstr='#0277b2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 }
#comInfoScaled { display: none; }
#footerBar { width: 100%; height: 140px; padding: 0% 10%; background: #3f4d59; border-top: 1px solid #334656; text-align: center; color: #fff; font-size: 12px; text-align: center; }
#footerBar img { width: 100%; max-width: 167px; height: auto; margin-top: 10px; } 


@media screen and (max-width: 1000px) {
	#nav .full { display: none; }
	#nav .mobile { display: block; }
	#hiddenPanel { width: 70%; }
	.oneQuarter { width: 48%; text-align: center; }
	.oneQuarter:nth-child(3), .oneQuarter:nth-child(4) { margin-top: 15px; } 
	.oneQuarter i { display: none; }
	a.fullButton { width: 80%; margin: 15px auto 0 auto; }
	#comInfo { display: none; } 
	#comInfoScaled { display: block; width: 100%; padding: 5% 10%; background: #046b9f; /* Old browsers */ background: -moz-linear-gradient(-45deg,  #046b9f 0%, #207cca 51%, #0277b2 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg,  #046b9f 0%,#207cca 51%,#0277b2 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg,  #046b9f 0%,#207cca 51%,#0277b2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#046b9f', endColorstr='#0277b2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
	#comInfoScaled a.fullLink { width: 100%; display: block; padding: 15px 0; background-color: #3f4d59; color: #fff; margin-bottom: 5px; text-align: center; }
	#comInfoScaled a.fullLink:last-child { margin-bottom: 0; }
}

@media screen and (max-width: 450px) {
	#hiddenPanel { width: 70%; }
	.oneQuarter { width: 100%; margin-right: 0; margin-top: 15px; text-align: center; }
	.oneQuarter:nth-child(4) { margin-bottom: 13px; }
	.oneQuarter i { display: none; }
	a.fullButton { width: 80%; margin: 15px auto 0 auto; }
	#slideshow { min-hight: 100px; height: 150px !important; width: 100%; background-attachment: scroll; background-size: auto 100%; background-position: center center; }
	#content { width: 100%; min-height: 350px; padding: 5% 0; text-align: center; } 
	#content img { float: none ; margin-left: 0px; margin-bottom: 20px; width: 90%; height: auto; }
	.doorStyles { width: 100%; float: none; margin-right: 0; }
	.comStyles { width: 100%; float: none; margin-right: 0; }
	#contentLeft { float: none; width: 100%; }
    #contentRight { float: none; width: 100%; margin-left: 2%; padding: 15px; background-color: #046b9f; color: #fff; }
	#operators .opBox { width: 100%; float: none; min-height: 200px; margin-bottom: 15px; }
	#contentRight { display: none; } 
	#content .lmLogo { float: none; margin-left: 0px; margin-bottom: 15px; margin-top: 15px; }
}