@charset "utf-8";
/* CSS Document */




html, body {
	font-family: 'Open Sans', sans-serif;
	width:100%;
	margin:0 auto;
	position:relative;
}

a, img {
	outline:none;
	border:none;
}

.darkBlue {
	color:#1d2945;
}

.mediumBlue {
	color:#28396d;
}

.lightBlue {
	color:#354b92;
}

.greyText {
	color:#757575;
}

.greyBackground {
	background-color:#f2f2f2;
}
.whiteBackground {
	background-color:white;
}

.alignRight {
	text-align: right;
}

.alignLeft {
	text-align: left;
}
.white {
	color:white;
}

.button {
	background-color:#979899;
	color:white;
	cursor: pointer;
	padding: 10px 20px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 24px;
	display: inline-block;
}

.button:hover {
	background-color:#354b92;
}


.button.white {
	background-color: white;
	color:#757575;
}

.button.white:hover {
	background-color: #979899;
	color:white;
}

h1 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 70px;
}
h2 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 36px;
	margin: 10px 30px;

}

h3 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 36px;
	margin: 0;
	text-align: center;
	margin-bottom: 25px;

}

.innerContent {
	width:100%; 
	max-width: 1600px;
	margin:0 auto;
}

.phantom {
	width:100%;
	background-color: white;
	-webkit-box-shadow: 0px 10px 14px -11px rgba(138,133,138,1);
-moz-box-shadow: 0px 10px 14px -11px rgba(138,133,138,1);
box-shadow: 0px 10px 14px -11px rgba(138,133,138,1);
	    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
	z-index: 10;
	height:120px;
	display: flex;
	align-items: center;
	position: fixed;
	top:0;
	visibility: hidden;
}

.header {
	width:100%;
	background-color: white;
	-webkit-box-shadow: 0px 10px 14px -11px rgba(138,133,138,1);
-moz-box-shadow: 0px 10px 14px -11px rgba(138,133,138,1);
box-shadow: 0px 10px 14px -11px rgba(138,133,138,1);
	    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
	z-index: 10;
	height:120px;
	display: flex;
	align-items: center;
	position: fixed;
	top:0;
}

main {
	margin-top: 120px;
}

.header.sticky {
	height:80px;
}

.headerContent {
	max-height: 120px;
}

.header.sticky .logo {
	max-width: 450px;
}

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
}

.colThird {
	display: flex;
	flex-basis: 33.33%;
	align-items: center;
	justify-content: center;
}
.colHalf {
	display: flex;
	flex-basis: 50%;
	align-items: center;
	justify-content: center;
}

.colFull {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	justify-content: center;
}

.headerCol1 {
	display: flex;
	flex-basis: 32%;
	align-items: center;

	justify-content: center;
}

.headerCol2 {
	display: flex;
	flex-basis: 36%;
	align-items: center;
	justify-content: center;
}

.colTwoThirds {
	display: flex;
	flex-basis: 66.66%;
	
}


a {
	color:#1d2945;
	text-decoration: none;
}
a:hover {
	color:#757575;
}
.menu-item a {
	padding: 0 40px;
	font-size: 24px;
}

.menu-item.current a {
	color:#757575;
}

.menu-item {
	display: inline-block;
	
}


.phoneNumber a {
	font-size: 36px;
	padding: 0 40px;
}

.logo {
	width:100%; 
	max-width: 647px;
	position: fixed;
	top:0;
	z-index: 15;
	
		    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	.logo {
	width:100%; 
	max-width: 647px;
	z-index: 15;
	position: static;
		    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}
	.headerCol1 {
	display: flex;
	flex-basis: 32%;
	align-items: center;
	height:120px;
	justify-content: center;
}
#about .innerSpace {
	margin: 0 35px;
	width:100%;

}
}

.headerTextOverlay {
	position: absolute;
	width:100%; 
	max-width: 330px;
	z-index: 9;
	right:8%;
	top:22%;
	text-align: right;
}


.valueCol1 {
	display: flex;
	flex-basis: 40%;
	align-items: center;
	justify-content: flex-start;
	padding: 15px 0;
}

.valueCol1:nth-child(1) {
	justify-content: flex-end;
}


.valueCol2 {
	display: flex;
	flex-basis: 20%;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

.valueIcon {
	width:100%;
	max-width: 65px;
	display: inline-block;
}

.spaceLeft {
	padding-left: 25px;
}

.spaceRight {
	padding-right: 30px;
}

.spacing {
	padding-top: 100px;
	padding-bottom: 100px;
}

.innerSpace {
	margin: 0 35px;

}

ul {
	list-style: disc;
	color:#1d2945;
	font-weight: bold;
	padding-top: 50px;
	font-size: 18px;
	padding-left: 0;
}

li {
	margin-bottom: 20px;
}

.stepsBackground {
	background-image: url(../images/123bg-image-l.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
}

#steps .row {
	padding-top: 50px;
}

.paragraphHeading {
	font-size: 20px;
	font-weight: bold;
}

p {
	font-size: 18px;
	margin: 0;
	text-align: center;
	margin-top: 15px;
}

.spaceBottom {
	padding-bottom: 50px;
	margin-right: 40px;
}

.imageRow {
	display: flex;
	width:100%;
}

.copywrite {
	padding: 10px 0;
}

.innerFooter a {
	color:white;
}

.innerFooter a:hover {
	color:white;
}

.tabletImages {
	display: none;
}
#about ul {
		padding-top: 0px;
	}

#menuToggle {
	display: none;
}

.mobile_menu {
	display: none;
	background-color: #354b92;
	text-align: center;
	z-index: 5;
		-webkit-box-shadow: 0px 10px 14px -11px rgba(138,133,138,1);
-moz-box-shadow: 0px 10px 14px -11px rgba(138,133,138,1);
box-shadow: 0px 10px 14px -11px rgba(138,133,138,1);
	padding-top: 30px;
	position: fixed;
	top:100px;
	width:100%;
}

#contactPopup {
	width:100%;
	max-width: 1200px;
	margin: 0 auto;
	background-color: white;
	position: relative;
}


input, select, textarea {

	border:1px solid #757575;
	padding: 15px;
	    margin: 5px 3px;
    width: 90%;
	 line-height: normal;
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

input:focus {
	border:1px solid #757575;
	outline:none;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #757575;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #757575;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #757575;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
}
:-moz-placeholder { /* Firefox 18- */
  color: #757575;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
}

.popupLrgImage {
	display: block;
}

.popupMedImage {
	display: none;
}

.popupSmImage {
	display: none;
}

.tabletContent {
	display: none;
}

.desktopHeaderImage {
		display: block;
	}
	
	.mobileHeaderImage {
		display: none;
	}

.desktopLogo {
	display: block;
}
.mobileLogo {
	display: none;
}

.scroll {
	position: fixed;
	bottom:5%;
	right:5%;
}

@media all and (max-width:1650px) {
	
.valueCol1 {
	display: flex;
	flex-basis: 33.33%;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

.valueCol1:nth-child(1) {
	justify-content: center;
}


.valueCol2 {
	display: flex;
	flex-basis: 33.33%;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}
	
	h1 {
	
	font-size: 55px;
}
h2 {
	
	font-size: 34px;
	margin: 10px 30px;

}

h3 {
	
	font-size: 30px;	

}
	.menu-item a {
		padding: 0 25px;
	}
	.phoneNumber a {
		padding: 0 25px;
		font-size: 32px;
	}
	
	.logo {
		max-width: 575px;
	}
	.spaceBottom {
	padding-bottom: 40px;
	margin-right: 10px;
}
	
	
}


@media all and (max-width:1400px) {
	.logo {
		max-width: 500px;
	}
	
	.valueIcon {
		max-width: 80px;
	}
	
}


@media all and (max-width:1280px) {
	.logo {
		max-width: 380px;
	}
	
	.header.sticky .logo {
	max-width: 380px;
}
	
	.headerCol1 {
		flex-basis: 34%;
	}
	
	.headerCol2 {
		flex-basis: 32%;
	}
	
	.spacing {
		padding: 50px 0;
	}
	
	.header {
		height:100px;
	}
	main {
	margin-top: 100px;
}
	
	#aboutContent.row {
		flex-wrap: wrap-reverse;
	}
	
	#aboutContent .colHalf {
		flex-basis: 100%;
	}
	
	#aboutContent .innerSpace {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	#decks {
		display: flex;
		flex-basis: 45%;
		flex-direction: column;
	}
	#pergolas {
		display: flex;
		flex-basis: 45%;
		flex-direction: column;
	}
	
	#cabanas {
		display: flex;
		flex-basis: 45%;
		flex-direction: column;
	}
	
	#privacyScreens {
		display: flex;
		flex-basis: 45%;
		flex-direction: column;
	}
	
	.desktopImages {
		display: none;
	}
	
	.tabletImages {
		display: flex;
	}
	
	.spaceBottom {
		margin-right: 30px;
	}
	
	.spaceRight{
		padding-right: 0;
	}
	
	p {
		font-size: 16px;
	}
	
	.menu-item a {
		font-size: 18px;
	}
	
	.phoneNumber a {
		font-size: 22px;
	}
	
	.button {
		font-size: 20px;
	}
	ul {
		font-size: 16px;
	}
	
	.stepsBackground {
	background-image: url(../images/123bg-image-m.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
}

	
#steps .row {
	padding-top: 10px;
}
	.paragraphHeading {
		font-size: 18px;
	}
	
}


@media all and (max-width:1000px) {
	.logo {
		max-width: 300px;
	}
	
	.header.sticky .logo {
	max-width: 300px;
}
	
	h1 {
		font-size: 46px;
	}
	h2 {
		font-size: 26px;
	}
	.menu-item a {
		padding: 0 15px;
	}
	
	h3 {
		font-size: 25px;
		margin-bottom: 15px;
	}
	
	.phoneNumber a {
		padding: 0 15px;
	}
	
	.valueCol1 {
		padding: 0;
	}
	.valueCol2 {
		padding: 0;
	}
	.header {
		height: 80px;
	}
	main {
	margin-top: 80px;
}
}

@media all and (max-width:905px) {
	.logo {
		max-width: 250px;
	}
	.header.sticky .logo {
	max-width: 250px;
}
	
	.headerCol1 {
		flex-basis: 36%;
	}
	
	.headerCol2 {
		flex-basis: 28%;
	}
	
	.header {
		height:70px;
	}
	main {
	margin-top: 70px;
}
	
}

@media all and (max-width:850px) {
	.logo {
		max-width: 200px;
	}
	.header.sticky .logo {
	max-width: 200px;
}
	.headerCol1 {
		flex-basis: 42%;
	}
	.headerCol1:nth-child(1) {
		flex-basis: 36%;
	}
	
	.headerCol2 {
		flex-basis: 20%;
	}
	.menu-item a {
		padding: 0 10px;
	}
	
	.phoneNumber a {
		padding: 0 10px;
	}
	
	.header {
		height:60px;
	}
	main {
	margin-top: 60px;
}

}

@media all and (max-width:768px) {
	.header {
		height:100px;
	}
	
	main {
	margin-top: 100px;
}
	.logo {
		max-width: 250px;
	}
	.header.sticky .logo {
	max-width: 250px;
}
	
	.phoneNumber {
		position: absolute;
		top:5px;
	}
	.phoneNumber a {
		font-size: 18px;
	}
	
	.headerCol1 {
		flex-basis: 36%;
	}
	.headerCol1:nth-child(1) {
		flex-basis: 36%;
	}
	
	.headerCol2 {
		flex-basis: 28%;
	}
	.button {
		padding:5px 10px;
		font-size: 18px;
	}
	
	.headerTextOverlay {
		
	}
	
	.menu-item a {
		font-size: 16px;
	}
	
	h1 {
		font-size: 40px;
	}
	
	#valueExplanation h3 {
		margin-bottom: 35px;
	}
	
	.headerTextOverlay {
		max-width:220px;
		top:5%;
		right:2%;
	}
	
	.valueIcon {
		max-width: 65px;
	}
	
	h2 {
		font-size:24px;
		margin: 5px 10px;
	}
	
	#steps .colThird {
		flex-basis: 100%;
	}
	
		.stepsBackground {
	background-image: url(../images/123bg-image-s.jpg);

}
	
	.desktopContent {
		display: none;
	}
	
	.tabletContent {
		display: block;
	}
	
	#stepsTable p {
		text-align: left;
	}
	
	
	#stepsTable h3 {
		font-size: 40px;
	}
	#decks {
		flex-basis: 100%;
	}
	#pergolas {
		flex-basis: 100%;
	}
	
	#cabanas {
		flex-basis: 100%;
	}
	
	#privacyScreens {
		flex-basis: 100%;
	}
	.colHalf {
		flex-basis: 100%;
		justify-content: flex-start;
	}
	ul {
		padding-top: 0;
		margin:0;
	}
	
	#about ul {
		padding-top: 25px;
	}
	
	
	
}

@media all and (max-width:700px) {
	
	.desktopLogo {
	display: none;
}
.mobileLogo {
	display: block;
}
	
	.valueCol1 {
		flex-basis: 100%;
		padding: 15px 0;
		justify-content: flex-start;
		padding-left: 25%;
	}
	.valueCol1:nth-child(1) {
		justify-content: flex-start;
	}
	
	.valueCol2 {
		flex-basis: 100%;
		padding: 15px 0;
		justify-content: flex-start;
		padding-left: 25%;
	}
	.spaceLeft {
		padding: 0;
	}
	
	.headerCol1:nth-child(1) {
		display:none;
	}
	.headerCol1 {
		flex-basis: 31%;
	}
	
	.headerCol2 {
		flex-basis: 61%;
	}
	.logo {
		max-width: 330px;
		position: relative;
	}
	.header.sticky .logo {
	max-width: 330px;
}
	#menuToggle {
		display: block;
	}
		#menuToggle
{
  display: block;
  position: absolute;
     float: right;
   right:20px;
  z-index: 1;
	top:38%;
  
  -webkit-user-select: none;
  user-select: none;
}	
	
	#menuToggle  input
	{
	  display: block;
	  width: 38px;
	  height: 32px;
	  position: absolute;
	  top: -7px;
	  left: -5px;

	  cursor: pointer;

	  opacity: 0; /* hide this */
	  z-index: 2; /* and place it over the hamburger */

	  -webkit-touch-callout: none;
	}

	/*
	 * Just a quick hamburger
	 */
	#menuToggle span
	{
	  display: block;
	  width: 33px;
	  height: 4px;
	  margin-bottom: 5px;
	  position: relative;

	  background: #757575;
	  border-radius: 3px;

	  z-index: 1;

	 transform-origin: 23px 0px;

	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  opacity 0.55s ease;
	}

	#menuToggle span:first-child
	{
	  transform-origin: 0% 0%;
	}

	#menuToggle span:nth-last-child(2)
	{
	      transform-origin: 57% 100%;
	}

	/* 
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
	#menuToggle input:checked ~ span
	{
	  opacity: 1;
	  transform: rotate(45deg) translate(-2px, -1px);
	  background: #757575;
	}

	#menuToggle input:checked ~ span:nth-last-child(3)
	{
	  opacity: 0;
	  transform: rotate(0deg) scale(0.2, 0.2);
	}

	/*
	 * Ohyeah and the last one should go the other direction
	 */
	#menuToggle input:checked ~ span:nth-last-child(2)
	{
	  transform: rotate(-45deg) translate(0, -1px);
	}
	.menu-item {
		display: block;
	}
	
	h3 {
		margin-left:10px;
		margin-right: 10px;
	}
	
	#about h3 {
		margin-right:0;
		margin-left: 0;
	}
	
	.popupLrgImage {
	display: none;
}

.popupMedImage {
	display: block;
}

.popupSmImage {
	display: none;
}

	input, textarea, select {
		padding: 10px;
	}

	.menu-item a {
		color:white;
		padding: 0px;
		font-size:18px;
	}
	
	.menu-item {
		padding: 10px 0;
	}
	
	.menu-item:hover {
		background-color: white;
	}
	
	.menu-item:hover a {
		color:#1d2945;
	}
	
	.menu-item.current {
		background-color: white;
	}
	
	.menu-item.current a {
		color:#1d2945;
	}
	
}

@media all and (max-width:650px) {
	.tabletImages {
		display: none;
	}
	
	.desktopImages {
		display: flex;
	}
	.imageRow .colHalf {
		flex-basis: 50%!important;
	}
}
@media all and (max-width:500px) {
	
	p {
		font-size: 14px;
		margin-top: 5px;
	}
	
	.paragraphHeading {
		font-size: 16px;
		
	}
	h1 {
		font-size: 30px;
		margin: 0;
		margin-bottom: 10px;
		line-height: 1.2em;
	}
	
	ul {
		font-size: 14px;
		margin: 0 20px;
	}
	
	.headerTextOverlay {
		
		max-width: 180px;
	}
	.logo {
		max-width: 250px;
	}
	.header.sticky .logo {
	max-width: 250px;
}
	#menuToggle {
		right:10px;
		top:35%;
	}
	
	.desktopHeaderImage {
		display: none;
	}
	
	.mobileHeaderImage {
		display: block;
	}
	
	.headerTextOverlay {
		
		max-width: none;
		text-align: center;
		top:68%;
		right:inherit;
		
	}
	.alignRight {
		text-align: center;
	}
	#stepsTable {
		width:95%;
		margin:0 auto;
	}
	td {
		padding-bottom: 10px;
	}
	
	.innerSpace {
		margin:0 20px;
	}
	.spaceBottom {
		margin-right:0;
	}
	
	.header.sticky {
		height:100px;
	}
		
}

@media all and (max-width:480px) {
	.valueCol1 {
		padding-left: 10%;
	}
	
	.valueCol2 {
		padding-left: 10%;
	}
	.stepsBackground {
	background-image: url(../images/123bg-image-xs.jpg);

}
	
	.popupLrgImage {
	display: none;
}

.popupMedImage {
	display: none;
}

.popupSmImage {
	display: block;
}

}


@media all and (max-width:400px) {
	.logo {
		max-width: 150px;
	}
	.header.sticky .logo {
	max-width: 150px;
}
	
	.headerCol1 {
		flex-basis: 49%;
	}
	
	.headerCol2 {
		flex-basis: 42%;
	}
	.button {
		font-size: 14px;
	}
	
	.phoneNumber a {
		font-size: 16px;
	}
	
	h2 {
		font-size: 20px;
	}
	
	.valueIcon {
		max-width: 50px;
	}
	
	.valueCol1 {
		padding-left: 10%;
	}
	
	.valueCol2 {
		padding-left: 10%;
	}
	
	.header.sticky {
		height:85px;
	}
	
	.header {
		height:85px;
	}
	
	main {
	margin-top: 85px;
}
	
	.headerTextOverlay {
		
	
		top:68%;
		
		
	}
}

@media all and (max-width:320px) {
	.headerTextOverlay {
		
	
		top:62%;
		
		
	}
}