@charset "utf-8";
/* General */

body {
	font-size: 100%;	
}

section {
	text-align: center; 
	color: white;
}

.boxShadow {
	display: block; 
	box-shadow: 0 0 10px 2px #222222;
}


/* Bricks Introduction - brick0.html */

#aboutWrapper {
	background-image: url(images/Brick/brick1.png); 
	background-position: center 2px;
	height: 92vh;
}@media screen and (max-width: 1350px) { #aboutWrapper {height: auto;}}

#howWrapper {
	background-image: url(images/Brick/brick2.png); 
	height: 100vh;
}@media screen and (max-width: 1350px) { #howWrapper {height: auto;}}

#featuresWrapper {
	background-image: url(images/Brick/brick3.png); 
	height: 100vh;
}@media screen and (max-width: 1350px) { #featuresWrapper {height: auto;}}

#benefitWrapper {
	background-image: url(images/Brick/brick4.png); 
	height: 100vh;	
}@media screen and (max-width: 1350px) { #benefitWrapper {height: auto;}}




/* About IB - brick1.html */

#compressedSoil {
	background-image: url(images/Brick/about1.png); 
	position: relative; 
	
	height: 92vh;

}@media screen and (max-width: 1350px) {#compressedSoil {
		height: 40.5vmax;
		background-position: center -8vmax;
		}}


#compressedSoil p {
	font-family: "CircBook";
	font-size: 3.4vmax;	
	letter-spacing: 2px;
	padding-top: 30%;

}@media screen and (max-width: 1350px) {#compressedSoil p {padding-top: 30%;}}

#compressedSoil span {
	font-family: "CircBold";
	font-size: 4vmax;	
	position: relative;
	top: -8px;
}

#standardWrapper {
	height: 100vh;
	padding: 4vw 0;
	box-sizing: border-box;
	background-image:url(images/Brick/about2.png);
	background-position: center 10vw;
	background-size: 70%;
	box-sizing: border-box; 
}@media screen and (max-width: 1350px) {#standardWrapper {height: 44vw;}}

#standardWrapper p {
	font-family: "CircBold";
	font-size: 4.0vmax;	
	color: #f05a26; 
}@media screen and (max-width: 600px) {#standardWrapper p { margin-top: -8vw;}}

#standardWrapper span {
	font-family: "CircBook";
	font-size: 2.2vmax;	
	color: #58595b; 
	letter-spacing: 8px;
	position: relative;
	top: -8px;
}

#typesWrapper {background: #f1f1f3; height: 100vh;}
@media screen and (max-width: 1350px) {#typesWrapper {height: auto;}}


#typesHeader {
	font-family: "CircBold";
	font-size: 4.2vmax;	
	color: #f05a26;
	padding-top: 60px;	
}

#typesContent {
	height: auto; 
	margin-top: 18px;
	
}

.typesDiv {
	width: 22vmax; 
	height: 15vmax; 
	border-radius: 15px; 
	border: 2px solid #808184; 
	background-color: #fff;
	display: inline-block; 
	margin: 1.0vmax 2.2vmax;
	background-position: center -1vmax;
	
}



.typesDiv p {
	font-family: "CircBook";
	font-size: 1.8vmax;	
	color: #58595b;
	position: relative; 
	top: 12vmax;
}

.typesDiv span {
	font-family: "CircMedium";
	color: #f05a26;
}

#typesBrick1 {background-image: url(images/Brick/about3a.png); }
#typesBrick2 {background-image: url(images/Brick/about3b.png); }
#typesBrick3 {background-image: url(images/Brick/about3c.png); }
#typesBrick4 {background-image: url(images/Brick/about3d.png); }
#typesBrick5 {background-image: url(images/Brick/about3e.png); }
#typesBrick6 {background-image: url(images/Brick/about3f.png); }

#sqmWrapper {
	height: 100vh;
	background-image: url(images/Brick/about4.png);

	background-position: center center;
}@media screen and (max-width: 1350px) {#sqmWrapper {height: 44vw;}}

#sqmWrapper p {
	font-family: "RoboBlack";
	font-size: 3.2vmax;	
	padding-top: 18vw;
}

#sqmWrapper span {
	font-family: "RoboBlack";
	font-size: 2.0vmax;	
	width: 28vw; 
	height: 5vw;
	display: block;
	border: 3px solid #fff;
	border-radius: 8px; 
	margin: 10px auto;
	line-height: 5vw;
}


/* How It's Made - brick2.html */

#madeWrapper {height: 92vh}
@media screen and (max-width: 1350px) {#madeWrapper {height:auto;}}

.brick2Header {
	font-family: "CircBlack"; 
	font-size: 3.7vmax;
	color: #f05a26;	
	text-align: center;
	padding-top: 2vmax;
}

.madeHr {
	width: 67.6%;
	margin: 2.4vmax 0; 
	border: 1px solid #d0d2d3;
	float: right;
}
#madeContent {
	display: 85vmax; 
	height: 30vmax;
	clear: right;
	background-position: center;
	background-image: url(images/Brick/how1.png);
	margin-bottom: 4vmax;
}

#soilWrapper {	height: 100vh;	background: #f1f1f2;		border-radius: 15px;
}@media screen and (max-width: 1350px) {#soilWrapper {height:auto;}}

#soilContent {
	width: 80vw; 
	height: auto; 
	margin: 4vmax auto; 
}

#soilImage {
	width: 35vmax;
	height: 25vmax; 
	background-image: url(images/Brick/how2.png);	
	display: inline-block;
}
#soilText {
	width: 40%;
	font-family: "RoboLight"; 
	font-size: 1.4vmax; 
	color: #404041;
	text-align: left;
	display: inline-block;  
	position: relative; 
	left: 2vmax;
	top: -7vmax;
}
@media screen and (max-width: 800px) {
	#soilText {
		width: 75%;
		margin: 12vmax auto; 
		display: block;
	
	}
	#soilImage {
		margin: 7vmax auto;
		display: block;
}
}


/* Main Features - brick3.html */

#mainFeaturesWrapper {background: #f1f1f2; border-radius: 15px; height: 100vh;}
@media screen and (max-width: 1350px) {#mainFeaturesWrapper {height:auto;}}

#mainFeaturesText {
	text-align: left;
	width: 35vmax; 
	height: 9vmax;
	margin: 0 auto;	
	padding-top: 4vmax;
	line-height: 4vmax;
}

#mainFeaturesWrapper hr {
	width: 73.68%;
	margin-top: 3.3vmax;
	margin-bottom: 3.3vmax;
	border: 1px solid #d0d2d3;
	float: right;
}

#mainFeaturesImg {
	width: 36vmax; 	
	height: 25vmax;
	margin: 45px auto 0;
	background-image: url(images/Brick/features1.png); 
}

.featureHr {
	width: 67.5%;
	margin-top: 45px;
	margin-bottom: 48px;
	border: 1px solid #d0d2d3;
	float: right;
}
/*
.subNav {
	width: 100%;
	height: auto;
	background-color: #ec1c24;
	position: absolute;
	top: 720px;
	box-shadow: 0 3px 10px -3px black;
	-webkit-transition: background-color 0.25s linear 0s, border-color 0.2568s linear 0s;
	-moz-transition: background-color 0.25s linear 0s, border-color 0.2568s linear 0s;
	-ms-transition: background-color 0.25s linear 0s, border-color 0.2568s linear 0s;
	-o-transition: background-color 0.25s linear 0s, border-color 0.2568s linear 0s;
	transition: background-color 0.25s linear 0s;
}@media screen and (max-width: 1400px) {.subNav {
		top: 40.4vw;
	}
}@media screen and (max-width: 500px) {.subNav {
		display: none;
	}
}

.subNav ul {
	width: 55%;
	margin: 0 auto; 
}

.subNav ul li {
	display: inline-block;
	padding: 1.0vw 0;
}

.subNav ul li a {
	width: auto;
	height: auto; 
	text-decoration: none; 
	color: #fff; 
	font-family: "RoboLight"; 
	font-size: 1.7vmax; 
	display: block;
	text-align: center;
	padding: 0.67vw;
	border-radius: 8px; 
	margin: 0 1vw;
	opacity: 0.75;
	border: 1px solid #ec1c24;
	box-sizing: border-box;
	background: none;
}


.subNav ul li a:hover {
	opacity: 1;	
}


.subNav ul li a.subNavActive {
	opacity: 1;	
	background: rgba(100, 100, 100, .25)
}

*/
.mainFeaturesNumber {
	font-family: "MontRegular"; 
	font-size: 6vmax; 
	letter-spacing: -6px;
}

.mainFeaturesHeader {
	font-family: "CircBold"; 
	font-size: 3vmax;
	padding-top: 15px;
	letter-spacing: -0.4px;
}

.mainFeaturesSubtitle {
	font-family: "CircBook"; 
	font-size: 2.4vmax;
	margin-top: -5px;
	letter-spacing: -0.5px;
}

.mainFeaturesParagraph {
	font-family: "RoboLight"; 
	font-size: 1.4vmax;
	color: #404041;
	line-height: 1.7vmax;

}

.mainfeaturesHr {
	width: 99.0%; 
	margin: 1.2vmax 0;
}

#strongerWrapper {height: 100vh; padding-top: 3vmax; box-sizing: border-box;}
@media screen and (max-width: 1350px) {#strongerWrapper {height:auto;}}

#strongerImg {
	width: 40vmax; 
	height: 20vmax; 
	background-image: url(images/Brick/features2.png); 
	margin: 5vmax auto 0;	
}

#strongerNumber {
	color: #c3161c; 
	float: left;
	margin-left: 48px;
}

#strongerTextBox {	
	text-align: left; 
	margin-left: 18vmax;
	padding-bottom: 4vmax;
}

#strongerHeader {color: #ec1c24;}

#strongerSubtitle {color:  #c3161c;}

#strongerWrapper hr {border: 1px solid #ec1c24;}


#fasterWrapper {background: #f1f1f2; padding-top: 3vmax;  box-sizing: border-box; border-radius: 15px; height: 100vh;}
@media screen and (max-width: 1350px) {#fasterWrapper {height:auto;}}

#fasterImg {
	width: 53vmax; 
	height: 28vmax; 
	background-image: url(images/Brick/features3.png);
	background-position: center 3vw;
	margin: 20px auto 0;	
}

#fasterNumber {
	color: #005a96; 
	float: left;
	margin-left: 48px;
}

#fasterTextBox {	
	text-align: left; 
	margin-left: 18vmax;
	padding-bottom: 4vmax;
}

#fasterHeader {color: #005a96;}

#fasterSubtitle {color:  #005a96;}

#fasterWrapper hr {border: 1px solid #005a96;}


#easierWrapper {height: 100vh; padding-top: 3vmax;  box-sizing: border-box; box-sizing: border-box;}
@media screen and (max-width: 1350px) {#easierWrapper {height:auto;}}

#easierTextDiv {
	text-align: left; 
	margin-left: 2.4vmax;
}

#easierNumber {color: #f36f21; float: left; margin-left: 25px;}

#easierHeader {color: #f6921e;  margin-top: 4vmax; margin-left: 15vmax;}

#easierSubtitle {color:  #f36f21; margin-left: 15vmax;}

#easierWrapper hr {
	border: 1px solid #f36f21; 
	margin-left: 1vmax;
	width: 98.0%;
}

#easierSubContent {
	margin-top: 37px;	
	width: 95%; 
	margin: 4vmax auto;
	height: auto;

}

#easierImg {
	width: 29vmax; 
	height: 20vmax; 
	background-image: url(images/Brick/features4.png); 
	border-radius: 10px;
	margin-left: 1vmax;
	display: inline-block;
}

#easierParagraph { 
	width: 38vw;
	text-align: left;	
	margin-left: 47px;
	display: inline-block;

}@media screen and (max-width: 1350px) {#easierParagraph {
	padding-bottom: 5vmax;
	width: 80vw;
	margin-left: 15px;
	margin-top: 8px;
	}
}


#fairWrapper {
	background: #f1f1f2; 
	padding-top: 8vmax; 
	box-sizing: border-box;
	border-radius: 15px;
	height: 100vh; 
}@media screen and (max-width: 1350px) {#fairWrapper {height:auto;}}

#fairImg {
	width: 80vw; 
	height: 20vw; 
	background-image: url(images/Brick/features5.png) ;
	margin: 2vmax auto 4vmax;	
}

#fairNumber {
	color: #27ae60; 
	float: left;
	margin-left: 48px;
}

#fairTextBox {	
	text-align: left; 
	margin-left: 18vmax;
	padding-bottom: 4vmax;
}

#fairHeader {color: #27ae60;}

#fairWrapper hr {
	border: 1px solid #27ae60; 
	margin-top: 1vmax;
}


/* 		IB Benefits 		-			 brick4.html */

#brick4Title {margin-bottom: 4.9vw;}

#brick4Title p {
	font-family: "CircBold";
	font-size: 4.2vmax;
	color: #f05a28;	
	padding-top: 2vmax;
	text-align: center;
}

#brick4Title hr {
	width: 61%;
	float: right;	
	margin: 0.7vmax auto 0;
}

.brick4HeaderDiv {
	width: 91.5%; 
	height: auto; 
	margin: 0 auto;	
	text-align: left;
	margin-bottom: 0.5vmax;
}

.brick4Header {
	font-family: "CircBold";
	font-size: 3.3vmax;
	letter-spacing: -0.1vmax;
	width: 82%;
}

.brick4SubHeader {
	font-family: "CircMedium";
	font-size: 2.1vmax;
	letter-spacing: -0.03vmax;
	margin-top: -0.4vmax;
	width: 82%;
}

.brick4Number {
	font-family: "MontRegular";
	font-size: 6.5vmax;
	letter-spacing: -0.8vw;
	float: right;
	margin-top: -7.5vmax;
	margin-right: 1vmax;
}

#lowWrapper {
	height: 91vh;
	background: linear-gradient(#ffffff ,#f5f5f5);
	border-radius: 1vw;	
}@media screen and (max-width: 1350px) {#lowWrapper {height:auto;}}

#lowWrapper p.brick4Header 		{color: #af2a22;	}
#lowWrapper p.brick4SubHeader 	{color: #58595b;	}
#lowWrapper p.brick4Number 		{color: #c3161c;	}

#lowHeaderDiv {
	margin-top: -3vmax;
}

#lowText {
	width: 93%;
	text-align: left;
	font-family: "RoboLight";  
	font-size: 1.2vmax;
	letter-spacing: 0.025vw;
	color: #6d6e70;
	margin-left: 4.1vw;
}

#lowPanelDiv {
	width: 85%;
	height: auto;
	padding-left: 0;
	margin: 0.4vmax auto;
	padding-bottom: 1vw;
}

.lowBox {
	width: 22vmax;
	height: 10vmax;
	display: inline-block; 	
	margin-left: 0.5vw;
	margin-top: 0.4vw;
	background-repeat: no-repeat no-repeat;
	background-size: contain;
}

#lowPanel1 { background-image: url(images/Brick/benefit1a.png);}
#lowPanel2 { background-image: url(images/Brick/benefit1b.png);}
#lowPanel3 { background-image: url(images/Brick/benefit1c.png);}
#lowPanel4 { background-image: url(images/Brick/benefit1d.png);}
#lowPanel5 { background-image: url(images/Brick/benefit1e.png);}
#lowPanel6 { background-image: url(images/Brick/benefit1f.png);}

#eyeWrapper {
	margin-top: 2vw;
	background: linear-gradient(#ffffff ,#f5f5f5);
	border-radius: 1vw;
	height: 100vh
}@media screen and (max-width: 1350px) {#eyeWrapper {height:auto;}}

#eyeWrapper p.brick4Header 		{color: #28af61;	}
#eyeWrapper p.brick4SubHeader 	{color: #006838;	}
#eyeWrapper p.brick4Number 		{color: #28af61;	}

#eyeText {
	width: 93%;
	text-align: left;
	font-family: "RoboLight";  
	font-size: 1.4vmax;
	letter-spacing: 0.025vw;
	color: #6d6e70;
	margin-left: 4.1vw;
	margin-bottom: 2vw;
}

#eyePic {
	width: 85vw;
	height: 33.53vw;
	margin: 0 auto;
	background-image: url(images/Brick/benefit2.png);
	background-repeat: no-repeat no-repeat;
	background-size: contain;
}


#speedyWrapper {
	border-radius: 1vw;
	background-image: url(images/Brick/benefit3.png);
	background-size: cover;
	height: 100vh
}@media screen and (max-width: 1350px) {#speedyWrapper {height:auto;}}


#speedyHeaderDiv {
	padding-top: 2vw;	
}

#speedyWrapper p.brick4Header 		{color: #26a9e0; font-style: italic; padding: 2vmax 0 0;	}
#speedyWrapper p.brick4SubHeader, #speedyWrapper p.brick4Number 	 	{color: #ffffff;	}

#speedyText {
	width: 93%;
	text-align: left;
	font-family: "RoboLight";  
	font-size: 1.4vmax;
	letter-spacing: 0.025vw;
	color: #ffffff;
	margin-left: 4.1vw;
	margin-bottom: 2vw;
}

#speedyVideoDiv {	
	width: 80%;
	height: auto;
	margin: 5vw auto 0;
}

#speedyVideoDiv div {
	display: inline-block;
}

#speedyVideoDiv div iframe {
	width: 40vmax; 
	height: 22.41vmax; 
	margin-bottom: 2vw;	
}

#speedyVideoText {
	width: 45%;	
	margin-left: 2vw;
	float: right;
	text-align: left;
	margin-bottom: 3vw;
}

#speedyVideoPlay {
	width: 3vmax;
	height: 3vmax;
	background-image: url(images/Brick/videoPlay.png);
	background-size: contain;
}

#speedyVideoText p {
	font-family: "CircMedium";  
	font-size: 2.4vmax;
	letter-spacing: 0.02vw;
	color: #ffffff;
	margin-top: 1.7vw;
}

#speedyVideoText hr {
	width: 12%;
	margin: 0.9vw 0;	
}

#speedyVideoText span {
	font-family: "RoboLight";  
	font-size: 1.7vmax;
	letter-spacing: 0.025vw;	
	margin-top: 0.7vw;
	line-height: 1.7vw;
}

#speedyWrapper p.paddingBottom {padding-bottom: 2.0vw;}

@media screen and (max-width: 900px) {
	#speedyVideoText {	float: none;	}
}


#coolerWrapper {
	padding-top: 2vw;
	background: linear-gradient(#ffffff ,#f5f5f5);
	border-radius: 1vw;
	height: 100vh;
	box-sizing: border-box;
}@media screen and (max-width: 1350px) {#coolerWrapper {height:auto;}}

#coolerWrapper p.brick4Header 		{color: #d5a099;	padding: 2vmax 0 0 }
#coolerWrapper p.brick4SubHeader, #coolerWrapper p.brick4Number 	 	{color: #745460;	}

.coolerFacts {
	display: inline-block;
	margin-bottom: 0.7vw;
}

.coolerFacts p {
	font-family: "RoboLight"; 
	font-size: 1.7vmax;
	color: #d5a099;
	float: left;
	margin-left: 4vw;
}

.coolerFacts span {
	font-family: "RoboLight"; 
	font-size: 1.4vmax;
	color: #58595b;
	text-align: left;
	width: 84%;
	display: inline-block;
}

#coolerResult {
	font-family: "CircMedium";
	font-size: 1.7vmax;
	color: #745460; 
	text-align: left;
	border-top: 2px solid #666;
	border-bottom: 2px solid #666;
	padding: 2vw 0;
	width: 65vw;
	box-sizing: border-box;
	margin-top: 2vw;
	margin-left: 4vw;
	padding-left: 1vw;
	letter-spacing: -0.02vw;
}

#coolerPic {
	width: 50vmax; 
	height: 27vmax;
	background-image: url(images/Brick/benefit4.png);
	background-repeat: no-repeat no-repeat;
	background-size: contain;
	margin-left: 42vw;	
	margin-top: -13vw;
	padding-bottom: 3vw;
}

@media screen and (max-width: 640px) {
	#coolerPic {
		margin: 2vw auto;
	}
	
	#coolerResult {
		margin: 0 auto;
	}
}


#greenWrapper {
	padding-top: 2vw;
	background: linear-gradient(#ffffff ,#f5f5f5);
	border-radius: 1vw;	
	height: 100vh;
	box-sizing: border-box;
}@media screen and (max-width: 1350px) {#greenWrapper {height:auto;}}

#greenWrapper p.brick4Header 		{color: #a6d063;	}
#greenWrapper p.brick4SubHeader, #greenWrapper p.brick4Number 	 	{color: #27ae60;	}

#greenText {
	width: 93%;
	text-align: left;
	font-family: "RoboLight";  
	font-size: 1.4vmax;
	letter-spacing: 0.025vw;
	color: #6d6e70;
	margin-left: 4.1vw;
	margin-bottom: 2vw;
}

#greenCompare {
	width: 92%;
	margin: -0.2vw auto 0; 	
}

#greenCompareTitle {
	font-family: "CircMedium"; 
	font-size: 1.8vmax; 
	color: #27ae60; 
	text-align: left;	
	line-height: 1.7vmax;
	
}

.greenCompareBox {
	text-align: left;
	display: inline-block;
	border: 2px solid #27ae60;
	width: 50%;
	box-sizing: border-box;
	margin: 1vw -1vw 0 0;
}

#greenCompareBoxLeft {
	padding: 1vw 0 1vw 11%;
	border-right: none; 
	border-top-left-radius: 1vw; 
	border-bottom-left-radius: 1vw; 
}

#greenCompareBoxRight {
	padding: 1vw 2% 1vw 1%;
	border-top-right-radius: 1vw; 
	border-bottom-right-radius: 1vw; 
}

@media screen and (max-width: 640px) {
	.greenCompareBox {
		width: 100%;
		display: block;	
	}
	#greenCompareBoxLeft {
		padding: 2% 0 4% 20%;
		border-bottom: none; 
		border-right: 2px solid #27ae60; 
		border-top-left-radius: 1vw; 
		border-top-right-radius: 1vw; 
		border-bottom-right-radius: 0; 
		border-bottom-left-radius: 0; 
	}
	#greenCompareBoxRight {
		padding: 2% 0 4% 20%;
		border-bottom-left-radius: 1vw; 
		border-bottom-right-radius: 1vw; 
		border-top-left-radius: 0; 
		border-top-right-radius: 0;
		margin-top: -1vw; 
}
}

.compareHeader {
	font-family: "RoboBold"; 
	font-size: 1.5vmax;
	color: #a6d063;	
}

.compareValues {
	font-family: "RoboLight";
	font-size: 1.3vmax;	
	color: #231f20;	
}

.compareValues p {
	display: inline-block; 	
	line-height: 1.9vw;
	margin-right: 3vw;
}

.compareValues span {
	display: inline-block; 	
	text-align: right;
}

#greenPanelDiv {
	width: 100%;
	height: auto;
	padding-left: 0;
	margin-top: 1vmax;
	padding-bottom: 1vw; 
	
}

.greenPanel {
	width: 16vmax;
	height: 16vmax;
	display: inline-block; 
	margin-left: 1vw; 
	margin-top: 0.2vw;
	background-repeat: no-repeat no-repeat;
	background-size: contain;
}

#greenPanel1 {background-image: url(images/Brick/benefit5a.png);}
#greenPanel2 {background-image: url(images/Brick/benefit5b.png);}
#greenPanel3 {background-image: url(images/Brick/benefit5c.png);}
#greenPanel4 {background-image: url(images/Brick/benefit5d.png);}
#greenPanel5 {background-image: url(images/Brick/benefit5e.png);}


#additionWrapper {
	padding-top: 2vw;
	background: linear-gradient(#ffffff ,#f5f5f5);
	border-radius: 1vw;
	height: 100vh;
	box-sizing: border-box;
}@media screen and (max-width: 1350px) {#additionWrapper {height:auto;}}

#additionWrapper p.brick4Header 		{color: #faaf40;	}
#additionWrapper p.brick4SubHeader, #additionWrapper p.brick4Number 	 	{color: #f16623;	}

#additionPanelDiv {
	width: 100%;
	height: auto;
	padding-left: 0;
	margin-top: 1vmax;
	padding-bottom: 1vw; 
}

.additionPanelA {
	width: 44vmax;
	height: 20vmax;
	display: inline-block; 
	margin-left: 1vw; 
	background-repeat: no-repeat no-repeat;
	background-size: contain;	
}

.additionPanelB {
	width: 29vmax;
	height: 19vmax;
	display: inline-block; 
	margin-left: 1vw; 
	background-repeat: no-repeat no-repeat;
	background-size: contain;	
}

#additionPanel1 {background-image: url(images/Brick/benefit6a.png);}
#additionPanel2 {background-image: url(images/Brick/benefit6b.png);}
#additionPanel3 {background-image: url(images/Brick/benefit6c.png);}
#additionPanel4 {background-image: url(images/Brick/benefit6d.png);}
#additionPanel5 {background-image: url(images/Brick/benefit6e.png);}
	
	
/* 	IB Vs Others	-	compare.html */

.compareDiv {
	width: 100%;
	height: 100vh; 
	background-repeat: no-repeat no-repeat;
	background-size: contain;	
	background-position: center bottom; 
}

#compare1 {	background-image: url(images/Brick/compare1.png); padding-top: 2vmax; box-sizing: border-box; height: 100vh; background-size: contain;	background-position: center bottom; }
#compare2 {	background-image: url(images/Brick/compare2.png);}
#compare3 {	background-image: url(images/Brick/compare3.png); }
#compare4 {	background-image: url(images/Brick/compare4.png);}
#compare5 {	background-image: url(images/Brick/compare5.png);}
#compare6 {	background-image: url(images/Brick/compare6.png); }
#compare7 {	background-image: url(images/Brick/compare7.png);}
#compare8 {	background-image: url(images/Brick/compare8.png);}

@media screen and (max-width: 1350px) {.compareDiv, #compare1 {height:55vw;}}


#compareVideoWrapper {
	
	
}

#compareVid {
	margin: 0 0 -0.24vw 0vw; 
}



/*	Cost Savings  	- 	costsaving.html */

.costHeaderDiv { 
	font-size: 2.5vmax;
	margin-left: 8vw;
	text-align: left;
	line-height: 2.7vmax;
}

.costHeaderDiv p {
	font-family: "RoboBlack";
	color: #8bc53f;
}

.costHeaderDiv span {
	font-family: "RoboLight";
	color: #58595b;
}

#costSpeed {padding-top: 2vw; box-sizing: border-box; height: 92vh;}
@media screen and (max-width: 1350px) {#costSpeed {height:auto;}}


#costSpeedHeader { line-height: 2vmax;}

#costSpeedMoney {
	width: 25vmax;
	height: 4.8vmax;
	background-color: #f7f7f9;
	float: right;
	margin-top: -5vmax;
	line-height: 5.1vmax;
	margin-right: 8vmax;
	border-radius: 0.667vmax;
}

#costSpeedMoney p {
	font-family: "CircBlack"; 
	font-size: 2.4vmax;	
	color: #37b34a;
}

.costPic1 {
	width: 62vmax;
	height: 32vmax; 
	margin: 3vw auto;
	background-repeat: no-repeat no-repeat;
	background-size: contain;	
	position: relative; 
	left: 2vmax;
}

#cost1 {background-image: url(images/Brick/cost1.png);}
#cost2 {background-image: url(images/Brick/cost2.png);}
#cost3 {background-image: url(images/Brick/cost3.png);}
#cost4 {background-image: url(images/Brick/cost4.png);}
#cost5 {background-image: url(images/Brick/cost5.png);}

#costCement {background-color: #f2f2f2; padding: 2vmax 0; box-sizing: border-box; height: 100vh;}

#costBeam {padding: 2vmax 0; box-sizing: border-box; height: 100vh;}

#costColumn {background-color: #f2f2f2; padding: 2vmax 0; box-sizing: border-box; height: 100vh;}

#costHouse {background-color: #f2f2f2; padding-top: 0; box-sizing: border-box; height: 100vh;}

#costCorner {padding: 2vmax 0; box-sizing: border-box; height: 100vh;}

@media screen and (max-width: 1350px) {#costCement, #costBeam, #costColumn, #costCorner   {height:auto;}}

#OrangeBar {
	width: 100%;
	height: 6vmax; 
	line-height: 6.5vmax;
	background-color: #f05a28;	
}

#OrangeBar p {
	font-family: "CircBold";
	font-size: 2.2vmax;
	color: white;
	text-align: left;	
	margin-left: 5vw;
	letter-spacing: 0.2vmax;
}

#costHouseHeader {
	width: 28.5%; 
	font-family: "CircBlack"; 
	font-size: 4vmax;
	color: #37b34a; 
	line-height: 4vmax;
	text-align: left;
	margin: 2vmax 0 0 0;
	border-bottom: 2px solid #37b34a;
	padding: 0 0 1.5vmax 4.1vw;	
}

.costHouseSubHeaderDiv p {;
	font-family: "CircBook"; 
	font-size: 1.5vmax;
	color: #58595b; 
	margin: 2vmax 0 0 4.1vw;
	text-align: left;
	letter-spacing: 0.35vmax;
}



.costHouseSubHeaderDiv span {
	color: #f05a28; 	
}

.costHouseSubHeaderDiv hr {
	width: 15%;
	margin-top: 1.4vmax;	
}

#costLegend1 {
	width: 15vmax;
	height: 23vmax; 
	margin: 3vw 0 0 4.1vw;
	background-repeat: no-repeat no-repeat;
	background-size: contain;	
	background-image: url(images/Brick/costLegend1.png);
}

#costHousePic {
	width: 35vmax;
	height: 42vmax; 
	margin: -14.8vmax 0 0 18vmax;
	display: inline-block;
	background-repeat: no-repeat no-repeat;
	background-size: contain;	
	background-image: url(images/Brick/costHouse.png);	
}

#costElements, #costConventional, #costTime {
	height: 100vh;
}
@media screen and (max-width: 500px) {
	#costElements, #costConventional, #costTime, #costHouse {
		height: auto;
	}
	
}


#costElements div.costHouseSubHeaderDiv {
	margin-top: 9vw;	
}

#costLegend2 {
	width: 15vmax;
	height: 23vmax; 
	margin: 5vw 0 0 4.1vw;
	background-repeat: no-repeat no-repeat;
	background-size: contain;	
	background-image: url(images/Brick/costLegend2.png);
}

#costPie {
	width: 55vmax;
	height: 45vmax; 
	margin: -2vmax 0 0 15vmax;
	display: inline-block;
	background-repeat: no-repeat no-repeat;
	background-size: contain;	
	background-image: url(images/Brick/costPie.png);	
}

#costConventional {
	background-color: #f2f2f2; 
	padding: 2vmax 0;
	box-sizing: border-box;
	
}

#costConventionalContent {
	width: 73.5vw;
	height: 45vw;
	margin: 0 auto;
	background-repeat: no-repeat no-repeat;
	background-size: contain;	
	background-image: url(images/Brick/costConventional.png); 
}

#costTime {	padding: 2vmax 0; box-sizing: border-box; }

#costTimeContent {
	width: 65vw;
	height: 45vw;
	margin: 0 auto;
	background-repeat: no-repeat no-repeat;
	background-size: contain;	
	background-image: url(images/Brick/costTime.png); 
}

@media screen and (max-width: 500px) { 
	#costSpeedMoney {
		float: none;	
		margin: 1vmax auto 0;
	}
	.costPic1 {
		width: 40vmax;
		height: 20vmax; 
	}
	#costHouseHeader {
		width: 100%; 
		font-family: "CircBlack"; 
		text-align: center;
		margin: 2vmax 0 0 0;
	}
	#costHousePic {
		width: 22vmax;
		height: 25vmax; 
		margin: 0;
	}
	#costPie {
		width: 27vmax;
		height: 25vmax; 
		margin: 0;	
	}
}

/* Building System Menu - building0.html */

#generalWrapper {background-image: url(images/Brick/building1.jpg); height: 92vh}
#compareWrapper {background-image: url(images/Brick/building2.jpg); height: 100vh}
#concernWrapper {background-image: url(images/Brick/building3.jpg); height: 100vh}
@media screen and (max-width: 1350px) {#generalWrapper, #compareWrapper,  #concernWrapper {height: auto;}}


/* General Connection	-	building1.html */

.generalTitle {
	font-family: "CircBold"; 
	font-size: 3.5vmax;
	color: #f05a27;	
}

.generalTitleHr {
	margin: 1vmax 0 1vmax 10vmax;	
}

.generalHeader {
	font-family: "CircBold"; 
	font-size: 2.5vmax;
	color: #f05a27;
}

.generalHeader span{
	font-family: "CircBook"; 
	color: #58595b;
}

.generalHr {
	width: 65%; 
	margin: 2vmax auto;
}


#general2Wrapper {padding-top: 2vmax; box-sizing: border-box;  border-radius: 0.67vw; height: 92vh;}
@media screen and (max-width: 1350px) {#general2Wrapper {height: auto;}}

#generalImg { 
	width: 50vmax; 
	height: 30vmax;
	margin: -0.6vw auto;
	background-image: url(images/Brick/general1.png);
}

#general2Text {
	margin: 2vw 0;
	font-family: "CircMedium"; 
	font-size: 2.4vmax;
	color: #58595b;
}


#differentWrapper {padding-top: 3vmax; box-sizing: border-box; border-radius: 0.67vw; background-color: #f1f1f2; height: 100vh; position: relative;}
@media screen and (max-width: 1350px) {#differentWrapper {height: auto;}}

#differentImg { 
	width: 55vmax; 
	height: 30vmax;
	margin: -0.6vw auto;
	background-image: url(images/Brick/general2.png);
}

#differentTextDiv {
	width: 45vmax; 
	height: 5.3vmax; 
	font-size: 1.8vmax; 
	background-color: white; 
	position: absolute;
	bottom: 0;
	left: 27vw;
	padding-top: 2vmax;
	box-sizing: border-box;
	border-top-left-radius: 0.66vmax;
	border-top-right-radius: 0.66vmax;
	border-left: 1px solid #d0d2d4; 
	border-top: 1px solid #d0d2d4;
	border-right: 1px solid #d0d2d4;
} @media screen and (max-width: 500px) {#differentTextDiv {left: 8vw;}}

#differentTextDiv span { 
	font-family: "CircBook"; 
	font-size: 1.8vmax; 
	display: inline-block;	 
	color: #58595b;
	position:relative; 
	top: -0.5vw;
	margin-right: 1vmax;
}

#differentDiv1 {
	width: 2.5vw; 
	height: 2.5vw; 
	background-color: #92291e; 
	border-radius: 0.333vmax;	
	display: inline-block;
	margin-right: 0.75vmax;
}

#differentDiv2 {
	width: 2.5vw; 
	height: 2.5vw; 
	background-color: #553b75; 
	border-radius: 0.333vmax;	
	display: inline-block;
	margin-right: 0.75vmax;
}

#differentDiv3 {
	width: 2.5vw; 
	height: 2.5vw; 
	background-color: #c07e2d; 
	border-radius: 0.333vmax;	
	display: inline-block;
	margin-right: 0.75vmax;
}


#floorWrapper {padding-top: 3vmax; border-radius: 0.67vw;  height: 100vh;}
@media screen and (max-width: 1350px) {#floorWrapper {height: auto;}}

#floorImg { 
	width: 68vmax; 
	height: 40vmax;
	margin: -0.6vw auto;
	background-image: url(images/Brick/general3.png);
}


#ringWrapper {padding-top: 3vmax; border-radius: 0.67vw;  box-sizing: border-box; background-color: #f1f1f2;  height: 100vh;}
@media screen and (max-width: 1350px) {#ringWrapper {height: auto;}}

#ringImg { 
	width: 40vmax; 
	height: 39.5vmax;
	margin: 2vw auto 0;
	background-image: url(images/Brick/general4.png);
}


#loadWrapper {padding-top: 3vmax; border-radius: 0.67vw; height: 100vh;}
@media screen and (max-width: 1350px) {#loadWrapper {height: auto;}}

#loadImg { 
	width: 40vmax; 
	height: 38.5vmax;
	margin: 2vw auto 0;
	background-image: url(images/Brick/general5.png);
}


#overhangWrapper {padding-top: 3vmax; border-radius: 0.67vw; box-sizing: border-box; background-color: #f1f1f2; height: 100vh;}
@media screen and (max-width: 1350px) {#overhangWrapper {height: auto;}}

#overhangImg { 
	width: 38vmax; 
	height: 34.9vmax;
	margin: 2vw auto 0; 
	background-image: url(images/Brick/general6.png);
}

#sillWrapper { padding-top: 3vmax; border-radius: 0.67vw; background-image: url(images/Brick/general7.png); box-sizing: border-box;height: 100vh
;}@media screen and (max-width: 1350px) {#sillWrapper {height: 55.4vw;}}

#sillWrapper p { 
	font-family: "CircBold"; 
	font-size: 3.5vmax; 
	width: 14.5vmax;
	padding: 0 1vw 2.4vmax;
	border-bottom: 1px solid white; 
	margin: 2vmax 0 0 7vmax;
}


#patternsWrapper {padding-top: 3vmax; border-radius: 0.67vw; box-sizing: border-box; background-color: #f1f1f2; height: 100vh;}
@media screen and (max-width: 1350px) {#patternsWrapper {height: auto;}}

.patternsPanel {
	width: 24vmax; 
	height: 16vmax;
	display: inline-block; 
	margin-bottom: 1.7vw; 
	margin-left: 1.7vw;	
}

#patternsPanel1 {background-image: url(images/Brick/general8a.png);}
#patternsPanel2 {background-image: url(images/Brick/general8b.png);}
#patternsPanel3 {background-image: url(images/Brick/general8c.png);}
#patternsPanel4 {background-image: url(images/Brick/general8d.png);}
#patternsPanel5 {background-image: url(images/Brick/general8e.png);}
	

#roundWrapper {padding-top: 3vmax; border-radius: 0.67vw; box-sizing: border-box; height: 100vh;}
@media screen and (max-width: 1350px) {#roundWrapper {height: auto;}}

#roundWrapper p.generalHeader span {
	letter-spacing: 0.6vmax; 
	font-size: 2.1vmax;	
}

#roundImg1 {
	width: 17vw; 
	height: 43vw;
	margin: -5vw 0 0 19vw;
	background-image: url(images/Brick/general9a.jpg);
}

#roundImg2 {
	width: 17vw; 
	height: 32vw;
	margin: -32vw 0 0 59vw;
	background-image: url(images/Brick/general9b.jpg);
}


#curvedWrapper {padding-top: 3vmax; border-radius: 0.67vw; box-sizing: border-box; background-color: #f1f1f2;  height: 100vh;}
@media screen and (max-width: 1350px) {#curvedWrapper {height: auto;}}

#curvedImg1 {
	width: 27vw; 
	height: 35vw;
	margin: 0 0 0 12vw;
	background-image: url(images/Brick/general10a.png);
}

#curvedImg2 {
	width: 25vw; 
	height: 35vw;
	margin: -34vw 0 0 60vw;
	background-image: url(images/Brick/general10b.png);
}


#curvedWallWrapper {padding-top: 3vmax; border-radius: 0.67vw; box-sizing: border-box; height: 100vh;}
@media screen and (max-width: 1350px) {#curvedWallWrapper {height: auto;}}

#curvedWallImg {
	width: 70vw; 
	height: 35vw;
	margin: 0 auto;
	background-image: url(images/Brick/general11.png);
}


#curvyWrapper {padding-top: 3vmax; border-radius: 0.67vw; background-color: #f1f1f2; box-sizing: border-box; height: 100vh;}
@media screen and (max-width: 1350px) {#curvyWrapper {height: auto;}}

#curvyImg {
	width: 70vw; 
	height: 35vw;
	margin: 0 auto;
	background-image: url(images/Brick/general12.png);
}


@media screen and (max-width: 400px ) {
	#generalImg, #overhangImg, #loadImg, #floorImg, #differentImg {
		width: 40vmax; 
	}

}


/* 	 Connection Comparison		-		building2.html 	*/ 

.connectTextDiv {
	text-align: left; 
	font-size: 2.4vmax; 	
	margin-left: 9vw; 
	margin-bottom: 2vw;
	line-height: 2.5vmax;
}

.connectTextDiv p {font-family: "RoboBold"; color: #f05a27;}
.connectTextDiv span {font-family: "RoboLight"; color: #58595b;}

.connectPic  {
	width: 56.3vw; 
	height: 27vw;
	margin: 5vmax auto;
	background-position: center;
	border: 2px solid #27ae60;
	border-radius: 0.667vmax;	
}
@media screen and (max-width: 500px) {.connectPic {
		width: 80vw; 
		height: 40vw;
		}}


#cornerWrapper { padding: 2vmax; border-radius: 0.67vw; box-sizing: border-box; height: 92vh;}
@media screen and (max-width: 1350px) {#cornerWrapper {height: auto;}}

#cornerImg {background-image: url(images/Brick/connect1.png); margin: 0 auto;} 


#columnWrapper { padding: 3vmax; border-radius: 0.67vw; background-color: #f1f1f2; box-sizing: border-box; height: 100vh;}
@media screen and (max-width: 1350px) {#columnWrapper {height: auto;}}

#columnImg {	background-image: url(images/Brick/connect2.png);}


#foundationWrapper { padding: 3vmax; border-radius: 0.67vw; box-sizing: border-box; height: 100vh;}
@media screen and (max-width: 1350px) {#foundationWrapper {height: auto;}}

#foundationImg {	background-image: url(images/Brick/connect3.png);}


#beamWrapper { padding: 3vmax; border-radius: 0.67vw; background-color: #f1f1f2;box-sizing: border-box; height: 100vh;}
@media screen and (max-width: 1350px) {#beamWrapper {height: auto;}}

#beamImg {	background-image: url(images/Brick/connect4.png);}


#column2Wrapper { padding: 3vmax; border-radius: 0.67vw;box-sizing: border-box; height: 100vh;}
@media screen and (max-width: 1350px) {#column2Wrapper {height: auto;}}

#column2Img {	background-image: url(images/Brick/connect5.png);}


#lastWrapper { padding: 3vmax; border-radius: 0.67vw; background-color: #f1f1f2;box-sizing: border-box; height: 100vh;}
@media screen and (max-width: 1350px) {#lastWrapper {height: auto;}}

#lastImg {	background-image: url(images/Brick/connect6.png);}


#finalWrapper { padding: 3vmax; border-radius: 0.67vw;box-sizing: border-box; height: 100vh;}
@media screen and (max-width: 1350px) {#finalWrapper {height: auto;}}

#finalImg {	background-image: url(images/Brick/connect7.png);} 


#mechanical1Wrapper { padding: 3vmax; border-radius: 0.67vw; background-color: #f1f1f2;box-sizing: border-box; height: 100vh;}
@media screen and (max-width: 1350px) {#mechanical1Wrapper {height: auto;}}

#mechanical1Img { background-image: url(images/Brick/connect8.png); }


#mechanical2Wrapper { padding: 3vmax; border-radius: 0.67vw;box-sizing: border-box; height: 100vh;}
@media screen and (max-width: 1350px) {#mechanical2Wrapper {height: auto;}}

#mechanical2Img {	background-image: url(images/Brick/connect9.png);}


#mechanical3Wrapper { padding: 3vmax; border-radius: 0.67vw; background-color: #f1f1f2; box-sizing: border-box; height: 100vh;}
@media screen and (max-width: 1350px) {#mechanical3Wrapper {height: auto;}}

#mechanical3Img {	background-image: url(images/Brick/connect10.png);}


#foundation2Wrapper { padding: 3vmax; border-radius: 0.67vw;box-sizing: border-box; height: 100vh;}
@media screen and (max-width: 1350px) {#foundation2Wrapper {height: auto;}}

#foundation2Img {	background-image: url(images/Brick/connect11.png);}


/*			Concern		- 			building3.html */

#concern2Wrapper { padding: 3vmax; border-radius: 0.67vw; box-sizing: border-box; height: 92vh;}
@media screen and (max-width: 1350px) {#concern2Wrapper {height: auto;  padding: 4vmax;}}

#concern1a {
	width: 33vmax;
	height: 20.5vmax;
	margin-left: 45vw;
	display:inline-block;
	background-image: url(images/Brick/concern1a.png);
}
#concern1b {
	width: 33vmax;
	height: 24vmax;
	position: relative; 
	top: -17vw;
	left: -6vw;
	margin-top: 0;
	display:inline-block;
	background-image: url(images/Brick/concern1b.png);
}
#concern1c {
	width: 33vmax;
	height: 20vmax;
	display:inline-block;
	position: relative; 
	top: -13vw;
	left: -10vw;
	background-image: url(images/Brick/concern1c.png);
	background-position: right center;
}

@media screen and (max-width: 600px ) {
	#concern1a, #concern1b, #concern1c {
		position: relative; 
		top: 0; 
		left: 0; 
		margin: 0;
	}

}

#textWrapper { padding-top: 2vmax; box-sizing: border-box; border-radius: 0.67vw;  background-color: #f1f1f2;  height: 100vh;} 
@media screen and (max-width: 1350px) {#textWrapper {height: auto;  padding: 4vmax 0;}}
@media screen and (max-width: 400px ) { #textWrapper {margin-top: 0;} }

.textLight {
	font-family: "RoboLight";
	font-size: 2vmax;
	color: #6d6e70;	
}

.textMedium {
	font-family: "RoboMedium";
	font-size: 2vmax;
	color: #58595b;	
}

.textRegular {
	font-family: "RoboRegular";
	font-size: 2vmax;
	color: #58595b;	
}

.textRegular span {
	font-family: "RoboMedium";
	font-size: 2vmax;
	color: #f05a28;	
}

#textParagraph1 {margin-top: 4vmax;}
#textParagraph2 {margin-top: 3vmax;}

#textParagraph3 {
	width: 55vmax;
	margin-top: 3vmax;
	padding: 1.4vmax 0;
	line-height: 2.2vmax;
	background-color: #fff; 
	margin: 2vmax auto;
	border: 1px solid #808184;
	border-radius: 0.667vmax;
}
@media screen and (max-width: 400px ) { #textParagraph3 {width: 90%;} }

#textParagraph4 {
	margin-top: 3vmax; 
	padding-bottom: 8.2vmax; 
	width: 65%; 
	margin: 0 auto; 
}
@media screen and (max-width: 400px ) { #textParagraph4 p {width: 100%;} }


#hackingConventionalWrapper { padding-top: 3vmax; border-radius: 0.67vw; } 
#hackingConventionalWrapper p.generalTitle {color: #58595b;}

.concernContent {
	width: 95%; 

	margin: 1vw auto; 
	border-radius: 0.667vmax; 
	padding-bottom: 3vmax;	
	background-color: #f1f1f2; 
	color: #58595b;
	padding-top: 2vmax;
	box-sizing: border-box;
	}

.concernContent p {
	font-family: "RoboBold"; 
	font-size: 2.2vmax;
	
}

.concernContent p span {
	font-family: "RoboLight"; 
}

.concernPic {
	width: 43vw; 
	height: 35vw; 
	margin: 1vmax auto; 
	background-position: center;
}

#hackableWrapper, #hybrid1Wrapper, #hybrid2Wrapper,  #infillWrapper, #infill2Wrapper {
	height: 100vh;
}@media screen and (max-width: 1350px) {
	#hackableWrapper, #hybrid1Wrapper, #hybrid2Wrapper,  #infillWrapper, #infill2Wrapper {
	height: auto;
}
	
}

#nonLoadWrapper .concernPic, #hackingConventionalWrapper .concernPic {	height: 30vw; }

#nonLoadWrapper .concernContent, #hackingConventionalWrapper .concernContent {
	margin: 1vw auto 3vmax; 
}

#concern2 {	background-image: url(images/Brick/concern2.png); }

#concern3 {	background-image: url(images/Brick/concern3.png); }

#concern4 {	background-image: url(images/Brick/concern4.png); }

#concern5 {	background-image: url(images/Brick/concern5.png); }

#concern6 {	background-image: url(images/Brick/concern6.png); }

#concern7 {	background-image: url(images/Brick/concern7.png); }

#concern8 {	background-image: url(images/Brick/concern8.png);}


#conclusionWrapper { padding-top: 3vmax; color: #58595b; } 

#conclusionHeader {
	font-family: "CircBold"; 
	font-size: 2.9vmax;
}

#conclusionSubHeader {
	font-family: "CircBook"; 
	font-size: 2.9vmax;
}

#conclusionHr {width: 80%; border: 1px solid #58595b; margin: 1.3vmax auto;}

#conclusionContent {
	font-family: "RoboLight"; 
	font-size: 1.7vmax;
	text-align: left; 
	width: 80%; 
	margin: 2vmax auto;
	padding-bottom: 0vw;
}

@media screen and (max-width: 400px ) { #conclusionContent, #conclusionHr {width: 85%;} }

#conclusionContent span {color: #f05a27; font-family: "RoboRegular";}
#conclusionContent p {
	display: inline-block;
	margin-left: 2.2vmax;}

.conclusionTick {
	width: 1.5vmax; 
	height: 1.5vmax; 
	display: inline-block; 
	background-image: url(images/Brick/concernTick.png);
}

.conclusionRow {
	padding: 0.5vmax 0;	
}



/*		Completed Projects		- 		projects.html		*/


.projectHeader {	/*display: none*/
	font-family: "CircBold";
	font-size: 3vmax;
	color: #58595b;
	opacity: 1;
	position: relative; 
	top: 2vmax;
}

#projectTextWrapper {height: 100vh; padding: 8vmax 0 2vmax; box-sizing: border-box; }
@media screen and (max-width: 1350px) {#projectTextWrapper{ height: auto;}}

.projectTinyText {
	font-family: "CircBold";
	font-size: 5vmax; 
	color: #58595b; 
	letter-spacing: 0.27vmax;
	text-align: center; 
}

.projectMainTitle {
	font-family: "CircBold";
	font-size: 3.2vmax;
	width: 55%; 
	margin: 3vmax auto; 
	color: #6e6d71; 
	text-align: left;
	line-height: 3.5vmax;
}
.projectMainTitle span {color: #f05a26;}

#projectTextWrapper #textNote {
	margin-top: 8vw;
	
}

#textNote {
	font-family: "RoboLight";
	font-size: 1.1vmax;
	margin: 12vmax 0 0 0vmax;
	color: #6d6e70;
}

#textNote * {
	display: inline-block; 
	vertical-align: top;
}

#textNote p {
	width: 40%;
	height: 15vw;
	text-align: left;
	margin-left: 2vmax;
	padding-left: 2vmax;
	border-left: 1px solid #d0d2d3;
}



#projectNav.subNav ul {
	width: 80%;
}



#projectGovernmentWrapper {height: 100vh; padding: 2vmax 0 0; box-sizing: border-box;}
@media screen and (max-width: 1350px) {#projectGovernmentWrapper{ height: auto;}}

.projectContent {
	margin: 5vmax 0;
}

.projectPanel {
	width: 18vmax;
	height: 10vmax; 
	display: inline-block; 
	border-radius: 0.0667vmax; 
	margin: 0.3vmax;
	background-color: #fff; 	
	background-size: contain; 
	background-position: center;
	background-repeat: no-repeat; 
}@media screen and (max-width: 1350px) {.projectPanel { 
		width: 50vmax;
		height: 28vmax;
	}
}

#completedGovernment1 {background-image: url(images/Projects/GovtComplete/1.jpg);}
#completedGovernment2 {background-image: url(images/Projects/GovtComplete/2.jpg);}
#completedGovernment3 {background-image: url(images/Projects/GovtComplete/3.jpg);}
#completedGovernment4 {background-image: url(images/Projects/GovtComplete/4.jpg);}
#completedGovernment5 {background-image: url(images/Projects/GovtComplete/5.jpg);}
#completedGovernment6 {background-image: url(images/Projects/GovtComplete/6.jpg);}
#completedGovernment7 {background-image: url(images/Projects/GovtComplete/7.jpg);}
#completedGovernment8 {background-image: url(images/Projects/GovtComplete/8.jpg);}
#completedGovernment9 {background-image: url(images/Projects/GovtComplete/9.jpg);}
#completedGovernment10 {background-image: url(images/Projects/GovtComplete/10.jpg);}
#completedGovernment11 {background-image: url(images/Projects/GovtComplete/11.jpg);}
#completedGovernment12 {background-image: url(images/Projects/GovtComplete/12.jpg);}
#completedGovernment13 {background-image: url(images/Projects/GovtComplete/13.jpg);}
#completedGovernment14 {background-image: url(images/Projects/GovtComplete/14.jpg);}
#completedGovernment15 {background-image: url(images/Projects/GovtComplete/15.jpg);}


#projectPrivateWrapper {height: 100vh; background-color: #f1f1f2; padding: 5vmax 0 0; box-sizing: border-box;}
@media screen and (max-width: 1350px) {#projectPrivateWrapper{ height: auto;}}

#completedPrivate1 {background-image: url(images/Projects/PrivateComplete/1.jpg);}
#completedPrivate2 {background-image: url(images/Projects/PrivateComplete/2.jpg);}
#completedPrivate3 {background-image: url(images/Projects/PrivateComplete/3.jpg);}
#completedPrivate4 {background-image: url(images/Projects/PrivateComplete/4.jpg);}
#completedPrivate5 {background-image: url(images/Projects/PrivateComplete/5.jpg);}
#completedPrivate6 {background-image: url(images/Projects/PrivateComplete/6.jpg);}
#completedPrivate7 {background-image: url(images/Projects/PrivateComplete/7.jpg);}
#completedPrivate8 {background-image: url(images/Projects/PrivateComplete/8.jpg);}
#completedPrivate9 {background-image: url(images/Projects/PrivateComplete/9.jpg);}
#completedPrivate10 {background-image: url(images/Projects/PrivateComplete/10.jpg);}
#completedPrivate11 {background-image: url(images/Projects/PrivateComplete/11.jpg);}
#completedPrivate12 {background-image: url(images/Projects/PrivateComplete/12.jpg);}
#completedPrivate13 {background-image: url(images/Projects/PrivateComplete/13.jpg);}
#completedPrivate14 {background-image: url(images/Projects/PrivateComplete/14.jpg);}
#completedPrivate15 {background-image: url(images/Projects/PrivateComplete/15.jpg);}


#projectIndividualWrapper {height: 100vh; padding: 5vmax 0 0; box-sizing: border-box;}
@media screen and (max-width: 1350px) {#projectIndividualWrapper{ height: auto;}}

#completedIndividual1 {background-image: url(images/Projects/IndividualComplete/ic1.jpg);}
#completedIndividual2 {background-image: url(images/Projects/IndividualComplete/ic2.jpg);}
#completedIndividual3 {background-image: url(images/Projects/IndividualComplete/ic3.jpg);}
#completedIndividual4 {background-image: url(images/Projects/IndividualComplete/ic4.jpg);}
#completedIndividual5 {background-image: url(images/Projects/IndividualComplete/ic5.jpg);}
#completedIndividual6 {background-image: url(images/Projects/IndividualComplete/ic6.jpg);}
#completedIndividual7 {background-image: url(images/Projects/IndividualComplete/ic7.jpg);}
#completedIndividual8 {background-image: url(images/Projects/IndividualComplete/ic8.jpg);}
#completedIndividual9 {background-image: url(images/Projects/IndividualComplete/ic9.jpg);}
#completedIndividual10 {background-image: url(images/Projects/IndividualComplete/ic10.jpg);}
#completedIndividual11 {background-image: url(images/Projects/IndividualComplete/ic11.jpg);}
#completedIndividual12 {background-image: url(images/Projects/IndividualComplete/ic12.jpg);}
#completedIndividual13 {background-image: url(images/Projects/IndividualComplete/ic13.jpg);}
#completedIndividual14 {background-image: url(images/Projects/IndividualComplete/ic14.jpg);}
#completedIndividual15 {background-image: url(images/Projects/IndividualComplete/ic15.jpg);}


#projectNgoWrapper {height: 100vh; background-color: #f1f1f2; padding: 5.5vmax 0 0; box-sizing: border-box;}
@media screen and (max-width: 1350px) {#projectNgoWrapper{ height: auto;}}

#projectNgoContent {width: 80%;
margin: 7vmax auto;}

#completedNgo1 {background-image: url(images/Projects/NGOComplete/nc1.jpg);} 
#completedNgo2 {background-image: url(images/Projects/NGOComplete/nc2.jpg);}
#completedNgo3 {background-image: url(images/Projects/NGOComplete/nc3.jpg);}
#completedNgo4 {background-image: url(images/Projects/NGOComplete/nc4.jpg);}
#completedNgo5 {background-image: url(images/Projects/NGOComplete/nc5.jpg);}
#completedNgo6 {background-image: url(images/Projects/NGOComplete/nc6.jpg);}
#completedNgo7 {background-image: url(images/Projects/NGOComplete/nc7.jpg);}
#completedNgo8 {background-image: url(images/Projects/NGOComplete/nc8.jpg);}
#completedNgo9 {background-image: url(images/Projects/NGOComplete/nc9.jpg);}
#completedNgo10 {background-image: url(images/Projects/NGOComplete/nc10.jpg);}
#completedNgo11 {background-image: url(images/Projects/NGOComplete/nc11.jpg);}
	
@media screen and (max-width: 600px) {
	#completedNgo12, #completedNgo13, #completedNgo14, #completedNgo15 {
		display: none;
	}
}


/*	Upcoming Projects		- 		projects2.html		*/

#upcomingTextWrapper {height: 100vh; padding: 6vmax 0 2vmax; box-sizing: border-box; }
@media screen and (max-width: 1350px) {#upcomingTextWrapper{ height: auto;}}


#upcomingNav.subNav ul {width: 50%;}/* ul resized as NGO is gone in this page */




#upcomingTextWrapper p.projectMainTitle {
	width: 100%;
	font-size: 5vmax;
	color: #58595b; 
	text-align: center; 
	letter-spacing: 6px;
}

#upcomingTime {
	font-family: "CircBold"; 
	font-size: 4.8vmax; 
	color: #fff; 
	padding: 1vmax 0vmax; 
	border-radius: 0.667vmax; 
	background-color: #f05a26;
	width: 40%;
	margin: 0 auto;	
}


#upcomingGovernmentWrapper {height: 100vh; padding: 5vmax 0 0; box-sizing: border-box;}
@media screen and (max-width: 1350px) {#upcomingGovernmentWrapper{ height: auto;}} 

#upcomingGovernment1 {background-image: url(images/Projects/GovernmentUpcoming/1.jpg);}
#upcomingGovernment2 {background-image: url(images/Projects/GovernmentUpcoming/2.jpg);}
#upcomingGovernment3 {background-image: url(images/Projects/GovernmentUpcoming/3.jpg);}
#upcomingGovernment4 {background-image: url(images/Projects/GovernmentUpcoming/4.jpg);}
#upcomingGovernment5 {background-image: url(images/Projects/GovernmentUpcoming/5.jpg);}
#upcomingGovernment6 {background-image: url(images/Projects/GovernmentUpcoming/6.jpg);}
#upcomingGovernment7 {background-image: url(images/Projects/GovernmentUpcoming/7.jpg);}
#upcomingGovernment8 {background-image: url(images/Projects/GovernmentUpcoming/8.jpg);}
#upcomingGovernment9 {background-image: url(images/Projects/GovernmentUpcoming/9.jpg);}
#upcomingGovernment10 {background-image: url(images/Projects/GovernmentUpcoming/10.jpg);}
#upcomingGovernment11 {background-image: url(images/Projects/GovernmentUpcoming/11.jpg);}
#upcomingGovernment12 {background-image: url(images/Projects/GovernmentUpcoming/12.jpg);}
#upcomingGovernment13 {background-image: url(images/Projects/GovernmentUpcoming/13.jpg);}
#upcomingGovernment14 {background-image: url(images/Projects/GovernmentUpcoming/14.jpg);}
#upcomingGovernment15 {background-image: url(images/Projects/GovernmentUpcoming/15.jpg);}


#upcomingPrivateWrapper {height: 100vh; background-color: #f1f1f2; padding: 6vmax 0 0; box-sizing: border-box;}
@media screen and (max-width: 1350px) {#upcomingPrivateWrapper{ height: auto;}}

#upcomingPrivate1 {background-image: url(images/Projects/PrivateUpcoming/1.jpg);}
#upcomingPrivate2 {background-image: url(images/Projects/PrivateUpcoming/2.jpg);}
#upcomingPrivate3 {background-image: url(images/Projects/PrivateUpcoming/3.jpg);}
#upcomingPrivate4 {background-image: url(images/Projects/PrivateUpcoming/4.jpg);}
#upcomingPrivate5 {background-image: url(images/Projects/PrivateUpcoming/5.jpg);}
#upcomingPrivate6 {background-image: url(images/Projects/PrivateUpcoming/6.jpg);}
#upcomingPrivate7 {background-image: url(images/Projects/PrivateUpcoming/7.jpg);}
#upcomingPrivate8 {background-image: url(images/Projects/PrivateUpcoming/8.jpg);}
#upcomingPrivate9 {background-image: url(images/Projects/PrivateUpcoming/9.jpg);}
#upcomingPrivate10 {background-image: url(images/Projects/PrivateUpcoming/10.jpg);}
#upcomingPrivate11 {background-image: url(images/Projects/PrivateUpcoming/11.jpg);}
#upcomingPrivate12 {background-image: url(images/Projects/PrivateUpcoming/12.jpg);}
#upcomingPrivate13 {background-image: url(images/Projects/PrivateUpcoming/13.jpg);}
#upcomingPrivate14 {background-image: url(images/Projects/PrivateUpcoming/14.jpg);}
#upcomingPrivate15 {background-image: url(images/Projects/PrivateUpcoming/15.jpg);}


#upcomingIndividualWrapper {height: 100vh; padding: 6vmax 0 0; box-sizing: border-box;}
@media screen and (max-width: 1350px) {#upcomingIndividualWrapper{ height: auto;}}

#upcomingIndividual1 {background-image: url(images/Projects/IndividualUpcoming/1.jpg);}
#upcomingIndividual2 {background-image: url(images/Projects/IndividualUpcoming/2.jpg);}
#upcomingIndividual3 {background-image: url(images/Projects/IndividualUpcoming/3.jpg);}
#upcomingIndividual4 {background-image: url(images/Projects/IndividualUpcoming/4.jpg);}
#upcomingIndividual5 {background-image: url(images/Projects/IndividualUpcoming/5.jpg);}
#upcomingIndividual6 {background-image: url(images/Projects/IndividualUpcoming/6.jpg);}
#upcomingIndividual7 {background-image: url(images/Projects/IndividualUpcoming/7.jpg);}
#upcomingIndividual8 {background-image: url(images/Projects/IndividualUpcoming/8.jpg);}
#upcomingIndividual9 {background-image: url(images/Projects/IndividualUpcoming/9.jpg);}
#upcomingIndividual10 {background-image: url(images/Projects/IndividualUpcoming/10.jpg);}
#upcomingIndividual11 {background-image: url(images/Projects/IndividualUpcoming/11.jpg);}
#upcomingIndividual12 {background-image: url(images/Projects/IndividualUpcoming/12.jpg);}
#upcomingIndividual13 {background-image: url(images/Projects/IndividualUpcoming/13.jpg);}
#upcomingIndividual14 {background-image: url(images/Projects/IndividualUpcoming/14.jpg);}
#upcomingIndividual15 {background-image: url(images/Projects/IndividualUpcoming/15.jpg);}

@media screen and (max-width: 600px) {
	#upcomingIndividual9, #upcomingIndividual10, #upcomingIndividual11, #upcomingIndividual12, #upcomingIndividual13, #upcomingIndividual14, #upcomingIndividual15 { display: none;}  
	
}

#upcomingIndividualContent {
	width: 80%; 
	margin: 7vmax auto;
}

#upcomingNgoWrapper {height: 100vh; background-color: #f1f1f2; padding: 2vmax 0 0; box-sizing: border-box;}
@media screen and (max-width: 1350px) {#upcomingNgoWrapper{ height: auto;}}




/*	SubNav for Tracking Menu	*/

.subNavWrapper {
  background: none;
  height: 70px;
  position: relative;
  text-align: center;
  }



.subNav {
	width: 100%;
	height: auto;
	background-color: #ec1c24;
	position: absolute;
	z-index: 100;
	top: 0;
	box-shadow: 0 3px 10px -3px black;
	-webkit-transition: background-color 0.25s linear 0s, border-color 0.2568s linear 0s;
	-moz-transition: background-color 0.25s linear 0s, border-color 0.2568s linear 0s;
	-ms-transition: background-color 0.25s linear 0s, border-color 0.2568s linear 0s;
	-o-transition: background-color 0.25s linear 0s, border-color 0.2568s linear 0s;
	transition: background-color 0.25s linear 0s;
}@media screen and (max-width: 1400px) {.subNav {
		top: 0;
	}
}@media screen and (max-width: 500px) {.subNav {
		display: none;
	}
}

.subNav ul {
	width: 55%;
	margin: 0 auto; 
}

.subNav ul li {
	display: inline-block;
	padding: 1.0vw 0;
}

.subNav ul li a {
	width: auto;
	height: auto; 
	text-decoration: none; 
	color: #fff; 
	font-family: "RoboLight"; 
	font-size: 1.7vmax; 
	display: block;
	text-align: center;
	padding: 0.67vw;
	border-radius: 8px; 
	margin: 0 1vw;
	opacity: 0.75;
	box-sizing: border-box;
	background: none;
}

.subNav ul li a:hover {
	opacity: 1;	
}

.subNav ul li a.subNavActive {
	opacity: 1;	
	background: rgba(100, 100, 100, .25)
}


.fixedNav {
	position: fixed; 
}

.subNavBlue {
	background : #005a96;
}

.subNavOrange {
	background : #f36f21;
}

.subNavGreen {
	background : #27ae60;
}

.subNavDarkOrange {
	background : #f05a26;
}

.subNavPurple {
	background : #5b297c;
}

.subNavRed {
	background : #971a28;
}