@charset "utf-8";

html,body {
	height: 100%;
	margin: 0;
	font-family: "jaf-facitweb",sans-serif;
}
h1 {
	color: #3bb3c3;
	font-size: 4em;
	font-weight: 700;
	text-align: center;
}
h2 {
	color: #3bb3c3;
	font-size: 2em;
	font-weight: 700;
	text-align: center;
}
h3 {
	color: #3bb3c3;
	font-weight: 700;
	font-size: 1.5em;
	text-align: center;
}
h6.micro-text {
	color: #3bb3c3;
	font-weight: 700;
	font-size: .85em;
	text-align: center;
}
hr.basic {
	width: 85%;
	margin: 10px auto;
	border: 1px solid #3bb3c3;
}
.no-selection {
	user-select: none;
  		-webkit-user-select: none;
   		-moz-user-select: none;
    	-ms-user-select: none;
}
.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}
a {
	outline: none;
	color: #333;
	text-decoration: none;
}
a:active {
	outline: none;
	color: #333;
	text-decoration: none;
}
a:focus {
	outline: none;
	color: #333;
	text-decoration: none;
}
a:hover {
	cursor: pointer;
	outline: none;
	color: #333;
	text-decoration: none;
}
nav {
	position: fixed;
	right: 0%;
	top: 50%;
	z-index: 1000;
	transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
}
#navLogo {
	display: none;
}
nav ul {
	padding: 0;
	margin: 0;
	background-color: rgba(255,255,255,0.7);
}
nav ul li {
	border-left: 2px solid #3bb3c3;
	border-right: 2px solid #3bb3c3;
	border-bottom: 2px solid #3bb3c3;
}
nav ul li:first-child {
	border-top: 2px solid #3bb3c3;
}
nav ul li a {
	display: block;
	font-weight: 700;
	padding: 20px 60px;
	text-align: center;
	transition: all ease .3s;
		-webkit-transition: all ease .3s;
}
nav ul li a:hover {
	background-color: #3bb3c3;
	color: #FFF;
}
nav ul li.sel {
	background-color: #3bb3c3;
	color: #FFF;
}
nav ul li.sel a {
	color: #FFF;
}
.mobile-nav-button {
	display: none;
}
#homeMainScene {
	position: relative;
	overflow: hidden;
}
#homeMainScene h1 {
	position: absolute;
	font-size: 3em;
	color: #F3F4F4;
	z-index: 100;
	left: 0;
	right: 0;
	top: 20%;
	text-shadow: 2px 2px #000;
	transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
}
#homeMainScene h3 {
	position: absolute;
	color: #F3F4F4;
	z-index: 100;
	bottom: 0;
	left: 0;
	right: 0;
	text-shadow: 1px 1px #000;
}
#homeLogo {
	position: absolute;
	bottom: 0;
	right: 1000px;
	height: 400px;
	width: auto;
	z-index: 100;
}
#homeSceneBg {
    background-color: #3bb3c3;
    position: absolute;
    height: 100%;
    width: 100%; 
}
#homeSceneSunMoon {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 5;
}
#homeSceneMountains {
	position: absolute;
	bottom: 40%;
	width: 100%;
	height: 200px;
	background: url(../_images/mountains-scene.png) repeat-x;
	z-index: 11;
}
#homeSceneGround {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 40%;
	background-color: #2c6325;
	z-index: 10;
}
#homeSceneDirt {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 200px;
	background-color: #b09460;
	z-index: 11;
}
#homeSceneTreeLeft {
	position: absolute;
	bottom: 100px;
	left: 50px;
	z-index: 25;
}
#homeSceneTreeRight {
	position: absolute;
	bottom: 80px;
	right: 50px;
	z-index: 25;
	width: 150px;
	height: 400px;
}
.house-scene {
	position: absolute;
	right: 200px;
	bottom: 0;
	width: 900px;
	height: 600px;
	z-index: 20;
}
#nightHouse {
	z-index: 19;
}
#sceneSmokeStack {
	position: absolute;
	z-index: 18;
	width: 1px;
	height: 160px;
	right: 590px;
	bottom: 567px;
}
#sceneSmokeStack span { 
	display: block;
	position: absolute;
	bottom: -35px;
	left: 50%;
	margin-left:-20px;
	height: 0px;
	width: 0px;
	border: 55px solid #c4c4c4;
	border-radius: 55px;
	left: -14px;
	opacity: 1;
	transform: scale(0.2);
		-webkit-transform: scale(0.2);
}
#homeSceneClouds {
	position: absolute;
	top: 10%;
	width: 100%;
	height: 40%;
	z-index: 10;
}
.cloud-scene {
	position: absolute;
}
#sceneCloud0 {
	left: 10%;
}
#sceneCloud1 {
	left: 25%;
}
#sceneCloud2 {
	top: 10%;
	left: 42%;
}
#sceneCloud3 {
	top: 30%;
	left: 58%;
}
#sceneCloud4 {
	left: 71%;
}
#sceneCloud5 {
	top: 5%;
	left: 89%;
}
#homeSceneStarField {
	position: absolute;
	top: 0;
	width: 100%;
	height: 60%;
}
.bg-star {
	position: absolute;
	z-index: 1;
	opacity: 0;
}
#homeStar0 {top: 3%; left: 2%; width: 20px; height: 20px;}
#homeStar1 {top: 4%; left: 52%; width: 10px; height: 10px;}
#homeStar2 {top: 6%; left: 10%; width: 16px; height: 16px;}
#homeStar3 {top: 15%; left: 20%; width: 20px; height: 20px;}
#homeStar4 {top: 45%; left: 7%; width: 12px; height: 12px;}
#homeStar5 {top: 35%; left: 25%; width: 18px; height: 18px;}
#homeStar6 {top: 42%; left: 65%; width: 20px; height: 20px;}
#homeStar7 {top: 75%; left: 20%; width: 14px; height: 14px;}
#homeStar8 {top: 30%; left: 84%; width: 19px; height: 19px;}
#homeStar9 {top: 62%; left: 43%; width: 20px; height: 20px;}
#homeStar10 {top: 46%; left: 44%; width: 12px; height: 12px;}
#homeStar11 {top: 29%; left: 36%; width: 17px; height: 17px;}
#homeStar12 {top: 85%; left: 92%; width: 15px; height: 15px;}
#homeStar13 {top: 55%; left: 77%; width: 20px; height: 20px;}
#homeStar14 {top: 12%; left: 69%; width: 16px; height: 16px;}
#homeStar15 {top: 18%; left: 54%; width: 12px; height: 12px;}
#homeStar16 {top: 6%; left: 34%; width: 12px; height: 12px;}
#homeStar17 {top: 53%; left: 17%; width: 14px; height: 14px;}
#homeStar18 {top: 48%; left: 94%; width: 13px; height: 13px;}
#homeStar19 {top: 3%; left: 91%; width: 16px; height: 16px;}
#homeStar20 {top: 51%; left: 54%; width: 8px; height: 8px;}
#homeStar21 {top: 54%; left: 32%; width: 6px; height: 6px;}

#aboutSection {
	position: relative;
	display: block;
	padding: 150px 0px;
}
#aboutContent {
	position: relative;
	width: 90%;
	max-width: 1200px;
	margin: 0px auto;
}
#servicesSection {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: #333;
}
#servicesSection h3 {
	z-index: 100;
}
#servicesSection p {
	z-index: 100;
}
.service-wrap {
	position: relative;
	opacity: .3;
	width: 100%;
	height: 400px;
	transition: all .3s ease;
		-webkit-transition: all .3s ease;
}
.service-wrap h3 {
	position: absolute;
	color: #F3F4F4;
	bottom: 0;
	left: 50px;
}
#heatingService {
	background-color: #0a1d20;
}
#servicesSection #heatingService:hover {
	opacity: 1;
}
#airConditionService {
	background-color: #3bb3c3;
}
#servicesSection #airConditionService:hover {
	opacity: 1;
}
#exhaustService {
	background-color: #3bb3c3;
}
#servicesSection #exhaustService:hover {
	opacity: 1;
}
.service-scene-house {
	position: absolute;
	left: 400px;
	bottom: 0;
	width: 300px;
	height: 200px;
	z-index: 20;
}
#exhaustHouseWrapper {
	position: absolute;
	left: 400px;
	bottom: 1px;
	width: 300px;
	height: 200px;
	z-index: 20;
}
.service-scene-house-blueprint {
	position: absolute;
	width: 100%;
	height: 100%;
}
.blueprint-arrow {
	position: absolute;
}
.blueprint-arrow-0 {
	left: 89px;
	top: 95px;
}
#exhaustService:hover .blueprint-arrow-0 {
	animation: blueprint-arrow-anim-0 1.5s linear infinite;
		-webkit-animation: blueprint-arrow-anim-0 1.5s linear infinite;
		-o-animation: blueprint-arrow-anim-0 1.5s linear infinite;
}
@keyframes blueprint-arrow-anim-0 {
	0% {top: 95px;}
	100% {top: 82px;}
}
@-webkit-keyframes blueprint-arrow-0 {
	0% {top: 95px;}
	100% {top: 82px;}
}
.blueprint-arrow-1 {
	transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
	left: 101px;
	top: 67px;
}
#exhaustService:hover .blueprint-arrow-1 {
	animation: blueprint-arrow-anim-1 1.5s linear infinite;
		-webkit-animation: blueprint-arrow-anim-1 1.5s linear infinite;
		-o-animation: blueprint-arrow-anim-1 1.5s linear infinite;
}
@keyframes blueprint-arrow-anim-1 {
	0% {left: 101px;}
	100% {left: 112px;}
}
@-webkit-keyframes blueprint-arrow-1 {
	0% {left: 101px;}
	100% {left: 112px;}
}
.blueprint-arrow-2 {
	left: 126px;
	top: 40px;
}
#exhaustService:hover .blueprint-arrow-2 {
	animation: blueprint-arrow-anim-2 1.5s linear infinite;
		-webkit-animation: blueprint-arrow-anim-2 1.5s linear infinite;
		-o-animation: blueprint-arrow-anim-2 1.5s linear infinite;
}
@keyframes blueprint-arrow-anim-2 {
	0% {top: 40px;}
	100% {top: 20px;}
}
@-webkit-keyframes blueprint-arrow-2 {
	0% {top: 40px;}
	100% {top: 20px;}
}
.blueprint-arrow-3 {
	right: 88px;
	top: 95px;
}
#exhaustService:hover .blueprint-arrow-3 {
	animation: blueprint-arrow-anim-3 1.5s linear infinite;
		-webkit-animation: blueprint-arrow-anim-3 1.5s linear infinite;
		-o-animation: blueprint-arrow-anim-3 1.5s linear infinite;
}
@keyframes blueprint-arrow-anim-3 {
	0% {top: 95px;}
	100% {top: 82px;}
}
@-webkit-keyframes blueprint-arrow-3 {
	0% {top: 95px;}
	100% {top: 82px;}
}
.blueprint-arrow-4 {
	transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
	right: 110px;
	top: 67px;
}
#exhaustService:hover .blueprint-arrow-4 {
	animation: blueprint-arrow-anim-4 1.5s linear infinite;
		-webkit-animation: blueprint-arrow-anim-4 1.5s linear infinite;
		-o-animation: blueprint-arrow-anim-4 1.5s linear infinite;
}
@keyframes blueprint-arrow-anim-4 {
	0% {right: 110px;}
	100% {right: 125px;}
}
@-webkit-keyframes blueprint-arrow-4 {
	0% {right: 110px;}
	100% {right: 125px;}
}

.service-scene-mountains {
	position: absolute;
	bottom: 40%;
	width: 100%;
	height: 66px;
	background: url(../_images/mountains-scene.png) repeat-x;
	background-size: 400px 66px;
	z-index: 11;
}
.service-scene-mountains-blueprint {
	position: absolute;
	bottom: 40%;
	width: 100%;
	height: 66px;
	background: url(../_images/mountains-scene-blueprint.png) repeat-x;
	background-size: 400px 66px;
	z-index: 11;
}
.service-scene-ground {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 40%;
	background-color: #2c6325;
	z-index: 10;
}
.service-scene-dirt {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 66px;
	background-color: #b09460;
	z-index: 11;
}
.service-scene-dirt-blueprint {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 66px;
	border-top: 1px solid #FFF;
	z-index: 11;
}
#serviceSceneClouds {
	position: absolute;
	top: 10%;
	width: 100%;
	height: 40%;
	z-index: 10;	
}
.service-cloud-scene {
	position: absolute;
}
#serviceSceneCloud0 {
	left: 10%;
}
#serviceSceneCloud1 {
	left: 25%;
}
#serviceSceneCloud2 {
	top: 10%;
	left: 42%;
}
#serviceSceneCloud3 {
	top: 30%;
	left: 58%;
}
#serviceSceneCloud4 {
	left: 71%;
}
#serviceSceneCloud5 {
	top: 5%;
	left: 89%;
}
#serviceSceneStarField {
	position: absolute;
	top: 0;
	width: 100%;
	height: 60%;
}
#serviceSceneStarField .bg-star {
	opacity: 1;
}
#serviceStar0 {top: 3%; left: 2%; width: 10px; height: 10px;}
#serviceStar1 {top: 4%; left: 52%; width: 5px; height: 5px;}
#serviceStar2 {top: 6%; left: 10%; width: 8px; height: 8px;}
#serviceStar3 {top: 15%; left: 20%; width: 10px; height: 10px;}
#serviceStar4 {top: 45%; left: 7%; width: 6px; height: 6px;}
#serviceStar5 {top: 35%; left: 25%; width: 9px; height: 9px;}
#serviceStar6 {top: 42%; left: 65%; width: 10px; height: 10px;}
#serviceStar7 {top: 75%; left: 20%; width: 7px; height: 7px;}
#serviceStar8 {top: 30%; left: 84%; width: 10px; height: 10px;}
#serviceStar9 {top: 62%; left: 43%; width: 10px; height: 10px;}
#serviceStar10 {top: 46%; left: 44%; width: 6px; height: 6px;}
#serviceStar11 {top: 29%; left: 36%; width: 8px; height: 8px;}
#serviceStar12 {top: 85%; left: 92%; width: 7px; height: 7px;}
#serviceStar13 {top: 55%; left: 77%; width: 10px; height: 10px;}
#serviceStar14 {top: 12%; left: 69%; width: 8px; height: 8px;}
#serviceStar15 {top: 18%; left: 54%; width: 6px; height: 6px;}
#serviceStar16 {top: 6%; left: 34%; width: 6px; height: 6px;}
#serviceStar17 {top: 53%; left: 17%; width: 7px; height: 7px;}
#serviceStar18 {top: 48%; left: 94%; width: 6px; height: 6px;}
#serviceStar19 {top: 3%; left: 91%; width: 8px; height: 8px;}
#serviceStar20 {top: 51%; left: 54%; width: 4px; height: 4px;}
#serviceStar21 {top: 54%; left: 32%; width: 3px; height: 3px;}

#servSmokeStack {
	position: absolute;
	z-index: 18;
	width: 1px;
	height: 160px;
	left: 575px;
	bottom: 193px;
}
#servSmokeStack span { 
	display: block;
	position: absolute;
	bottom: -35px;
	left: 50%;
	margin-left:-20px;
	height: 0px;
	width: 0px;
	border: 35px solid #c4c4c4;
	border-radius: 35px;
	left: -14px;
	opacity: 1;
	transform: scale(0.2);
		-webkit-transform: scale(0.2);
}
.service-text-box {
	position: absolute;
	right: 20%;
	width: 25%;
	top: 50%;
	z-index: 100;
	padding: 10px 25px;
	background-color: rgba(243,244,244,0.7);
	border-radius: 5px;
	transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
}
.service-text-box p {
	margin: 0;
}
#contactSection {
	position: relative;
	width: 100%;
	margin: 125px 0;
}
#contactSectionWrap {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 90%;
	max-width: 1200px;
}
#contactSectionWrap h1 {
	float: left;
	width: 30%;
}
#contactInfo {
	float: right;
	width: 60%;
}
#contactInfo p {
	text-align: center;
}
/***************** Media Queries **************/
@media (max-width: 62.5em) {
	#homeLogo {
		display: none;
	}
	#sceneCloud0 {
		left: 1%;
	}
	#serviceSceneCloud0 {
		left: 1%;
	}
	#sceneSmokeStack {
		display: none;
	}
	#servSmokeStack {
		display: none;
	}
	.service-wrap {
		opacity: 1;
	}
	.mobile-nav-fix {
		position: relative;
		height: 5em;
		width: 100%;
	}
	.service-text-box {
		right: 10%;
	}
	.mobile-nav-button {
		position: absolute;
		display: block;
		color: #333;
		right: 20px;
		font-size: 1.25em;
		cursor: pointer;
		height: 70px;
		padding: 26.25px 15px;
		z-index: 1000;
		top: 50%;
		transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
	}
	#navLogo {
		position: absolute;
		display: block;
		left: 50%;
		transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
	}
	nav {
		width: 100%;
		top: 0;
		height: 5em;
		margin-top: 0px;
		background-color: rgb(255,255,255);
		transform: none;
			-webkit-transform: none;
	}
	nav ul {
		position: fixed;
		margin-top: 5em;
		background-color: rgb(255,255,255);
		z-index: 900;
		width: 250px;
		height: 100%;
		right: -250px;
		transition: all 0.3s ease 0s;
			-webkit-transition: all 0.3s ease 0s;
	}
	nav ul.mobile-active {
		right: 0;
	}
	nav ul li {
		position: relative;
		display: block;
		list-style: none outside none;
		margin: 0;
		padding: 0;
	}
	nav ul li a {
		position: relative;
		outline: none;
		display: block;
		z-index: 5;
		text-align: center;
		padding: 1em 2em;
		text-decoration: none;
		cursor: pointer;
		color: #333;
		transition: all 0.15s ease 0s;
			-webkit-transition: all 0.15s ease 0s;
	}
	nav ul li a:active {
		outline: none;
		text-decoration: none;
		color: #F3F3F3;
	}
	nav ul li a:focus {
		outline: none;
		text-decoration: none;
		color: #F3F3F3;
	}
	nav ul li a:hover {
		background-color: #3bb3c3;
		color: #FFF;
		text-decoration: none;
	}
	nav ul li.sel a {
		background-color: #3bb3c3;
		color: #FFF;
		text-decoration: none;
	}
	#exhaustService:hover .blueprint-arrow-0 {
		animation: none;
			-webkit-animation: none;
			-o-animation: none;
	}
	#exhaustService:hover .blueprint-arrow-1 {
		animation: none;
			-webkit-animation: none;
			-o-animation: none;
	}
	#exhaustService:hover .blueprint-arrow-2 {
		animation: none;
			-webkit-animation: none;
			-o-animation: none;
	}
	#exhaustService:hover .blueprint-arrow-3 {
		animation: none;
			-webkit-animation: none;
			-o-animation: none;
	}
	#exhaustService:hover .blueprint-arrow-4 {
		animation: none;
			-webkit-animation: none;
			-o-animation: none;
	}
}
@media (max-width: 102em) {
	.service-scene-house {
		left: 10px;
	}
	#exhaustHouseWrapper {
		left: 10px;
	}
	#servSmokeStack {
		left: 185px;
	}
}
@media (max-width: 93em) {
	#homeLogo {
		height: 300px;
		right: auto;
		left: 20px;
	}
	.house-scene {
		right: 50%;
		transform: translateX(50%);
			-webkit-transform: translateX(50%);
	}
	#sceneSmokeStack {
		position: absolute;
		z-index: 18;
		width: 1px;
		height: 160px;
		right: 45%;
		bottom: 567px;
		transform: translateX(50%);
			-webkit-transform: translateX(50%);
	}
}
@media (max-width: 87em) {
	#homeSceneTreeLeft {
		display: none;
	}
}
@media (max-width: 61em) {
	#homeSceneTreeRight {
		display: none;
	}
}
@media (max-width: 51.25em) {
	.house-scene {
		width: 600px;
		height: 400px;
	}
	#homeSceneDirt {
		height: 150px;
	}
}
@media (max-width: 39em) {
	.service-text-box {
		right: 0;
		width: 100%;
		height: 100%;
		top: 0;
		background-color: rgba(243,244,244,0.7);
		border-radius: 0;
		transform: translateY(0);
			-webkit-transform: translateY(0);
	}
	.service-text-box p {
		padding-top: 53px;
	}
	.service-wrap h3 {
		top: 0;
		bottom: auto;
		color: #3bb3c3;
		z-index: 110;
	}
	#contactSectionWrap h1 {
		display: block;
		float: none;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		width: auto;
	}
	#contactInfo {
		display: block;
		float: none;
		margin: 0 auto;
		width: auto;
	}
}
@media (max-width: 32.5em) {
	#navLogo {
		width: 150px;
		top: 50%;
		left: 10px;
		transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
	}
	#contactSectionWrap h1 {
		font-size: 3em;
	}
}
@media (max-width: 26em) {
	#homeMainScene h1 {
		position: absolute;
		font-size: 2em;
		color: #F3F4F4;
		z-index: 100;
		left: 0;
		right: 0;
		top: 40%;
		text-shadow: 2px 2px #000;
		transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
	}
	.house-scene {
		width: 300px;
		height: 200px;
	}
	#homeSceneDirt {
		height: 70px;
	}
	#contactSectionWrap h1 {
		font-size: 2.5em;
	}
}
/**********************************************/