*{
	box-sizing: border-box;
}
.cf:after {
    content:" ";
    display:block;
    clear:both;
}
body{
	font-family: 'Exo','Ubuntu', sans-serif;
	line-height: 1.5em;
	width: 100%;
	transition: .5s ease-in-out; 
	position: relative;
	right:0;
	box-shadow: 15px 15px 25px rgba(0,0,0,.2);
}
main{
	background: #e8eee8;
}
html{
	background: url("../images/background.png");
}

/*Colors

logoGreen: #9abb3b
darkGreen: #7aa35b
logoBlue: #3e5688
darkBlue: #1c3144
grey: #414042

Colors End*/
/* General Styles*/



/* Header Start*/

.backHeader{
	background: #FFF;
	box-shadow: 0 5px 15px rgba(0,0,0,.3);
	position: fixed;
	width: 100%;
	z-index: 10;
	height: 3.5em;
}
header{
	width: 100%;
	position: relative;
}
header h1{
	float: left;
}
header h1 a{
	height: 55px;
	display: block;
	width: 100px;
	line-height: 55px;
	background: url("../images/logo/pureLogo1.svg") no-repeat center;
	background-size: 90%;
	
}
.telHeader{
	background: #9aba36;
	display: block;
	color: #FFF;
	text-decoration: none;
	font-weight: 500;
	padding: 2px 5px 0 5px;
	position: absolute;
	transform: translateX(-50%);
	left:50%;
	top:1em;
	font-size:.7em;
	transition: .2s ease-in-out;
	border-radius: 2px;
}
.telHeader:hover{
	background: #1c3144;
}
.getStartedNav{
	display: none;
}

/* Global Nav Start */

#menuButton{
	background-size: 80%;
	height: 55px;
	width: 55px;
	display: block;
	float: right;
	padding-right: 1em;
}
#menuButton:hover{
	cursor: pointer;
}
#globalNav{
	clear: both;
	position: absolute;
	width: 100vw;
	right: -100vw;
}
.gNavItem a{
	background: #1c3144;
	transition: .3s ease-in-out;
	text-decoration: none;
	color: #FFF;
	display: block;
	text-transform: uppercase;
}
#globalNav li a:hover{
	background: #7aa35b;
	border-bottom: solid 2px #1c3144;
}
.gNavItem a{
	border-bottom: solid 2px #7aa35b;
	line-height: 55px;
	padding-left: 1em;
}
#globalSubNav{
	width: 100vw;
	position: relative;
}
.gsubNav a{
	text-indent: 2.5em;
	font-size: .8em;
	line-height: 2.5em;
	border-bottom: solid 1px #7aa35b;
	height: 35px;
}
.nsmart a{
	border-bottom: solid 2px #7aa35b;
}
.home .nhome > a,
.services .nservices > a,
	.solar .nsolar > a,
	.lawncare .nlawncare > a,
	.aqua .naqua > a,
	.smart .nsmart > a,
.about .nabout > a,
.contact .ncontact > a,
.getstarted .ngetstarted > a{
	background: #7aa35b;
	border-bottom: solid 2px #1c3144;
}

/* Global Nav End*/
/* BreadCrumb Nav Start*/
.breadCrumbs li{
	display: inline-block;
	font-size: .7em;
}
.breadCrumbs li a{
	display: inline-block;
	line-height: 3em;
	font-weight: 500;
	text-decoration: none;
	color: rgba(65,64,66,.7);
}
.breadCrumbs li a:hover{
	color: #3e5688;
}
.eachService .heroHome div,
.getstarted .heroHome div{
	background: #1c3144;
}
.eachService .breadCrumbs,
.getstarted .breadCrumbs{
	color: #FFF;
}
.eachService .breadCrumbs a,
.getstarted .breadCrumbs a{
	color: #FFF;
}
.home .bhome > a,
.services .bservices > a,
	.solar .bsolar > a,
	.lawncare .blawncare > a,
	.aqua .baqua > a,
	.smart .bsmart > a,
.about .aboutUs .babout a,
.contact .bcontact > a,
.getstarted .bgetstarted > a{
	color: #7aa35b;
}

/* BreadCrumb Nav End*/
/* Hero Images Start */

.home .heroHome{
	background: url("../images/hero/heroHomeSmall.jpg") no-repeat center bottom;
	background-size: cover;
	height: 285px;
}
.services .heroHome{
	background: url("../images/hero/heroServicesSmall.jpg") no-repeat center;
	background-size: cover;
	height: 350px;
}
.about .heroHome{
	background: url("../images/hero/heroAboutSmall.jpg") no-repeat center;
	background-size: cover;
	height: 285px;
}
.contact .heroHome{
	background: url("../images/hero/heroContactSmall.jpg") no-repeat center 2em;
	background-size: cover;
	height: 285px;
}
/* Hero Images End */
/* Home Header Start */

.heroHome{
	color: #FFF;
	padding: 6em 0 1.25em 0;
}
.heroHome div{
	background: rgba(0,0,0,.6);
}
.heroHome h2{
	font-size: 1.6em;
	padding: .3em 0 .1em 10%;
}
.heroHome h3{
	font-size: 1em;
	line-height: 1.7em;
	padding: 0 0 .2em 10%;
}
.heroHome button{
	border: none;
	background: #7aa35b;
	font-family: 'Ubuntu';
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.1em;
	border-radius: 3px;
	margin: 1em auto 0;
	display: block;
	transition: .2s ease-in-out;
}
.heroHome button:hover{
	cursor: pointer;
	background: #1c3144;
}

/* Home Header End */
/* Header End*/

/* Home Page Start*/

.heroHome button a{
	padding: .5em 1em;
	display: inline-block;
	color: #FFF;
	text-decoration: none;
}
.buildProject button:hover{
	cursor: pointer;
	background: #1c3144;
}
.homeAbout{
	background: #1c3144;
	color: #FFF;
	padding: 10%;
}
.homeAbout h2{
	font-size: 2em;
	padding-bottom: .5em;
}
.homeAbout a{
	margin-top:.5em;
}
.homeServices a, .homeAbout a{
	text-decoration: none;
	display: inline-block;
	background: #7aa35b;
	color: #FFF;
	padding: .3em 1em .2em 1em;
	border-radius: 4px;
	font-size: 1em;
	text-transform: uppercase;
	transition: .3s ease-in-out;
}
.homeServices section{
	position: relative;
}
.homeServices a{
	position: absolute;
	transform: translateX(-50%);
	bottom: 0;
	left: 50%;
	margin-bottom: 2em;
}
.homeServices a:hover, .homeAbout a:hover{
	background: #3e5688; 
}
.homeServices h2{
	font-size: 2em;
	color: #1c3144;
	font-weight: 500;
	padding: .5em 10%;
}
.homeServices h2:first-child{
	margin-top:1em;
	background: #1c3144;
	color: #FFF;
}
.homeServices h2:last-child{
	padding-top:0;
}
.homeServices h3{
	font-size:1.5em;
	color: #3e5688;
	text-align: center;
	padding-top: 6em;
	transition: .3s ease-in-out;
}
.homeServices p{
	color: #414042;
	padding: 1em 10% 5em 10%;
}
.homeServices .homeSmart p:nth-child(3){
	padding-top: 0;
}
.homeServices section{
	border-bottom: solid 3px #1c3144;
	transition: .3s ease-in-out;
	padding: 2em 0;
}
.homeServices section:last-child{
	border-bottom: none;
}
.homeSolar h3{
	background: url("../images/icons/solar.svg") no-repeat center .5em;
	background-size: 5em;
}
.homeLawncare h3{
	background: url("../images/icons/landscape.svg") no-repeat center .5em;
	background-size: 5em;
}
.homeAqua h3{
	background: url("../images/icons/aquaponic.svg") no-repeat center .5em;
	background-size: 5em;
}
.homeSmart h3{
	background: url("../images/icons/smarthome.svg") no-repeat center .5em;
	background-size: 5em;
}
/**/

/* Testimonial*/
main section p{
	font-size: .85em;
}
.homeTest{
	background: #7aa35b;
	color: #FFF;
	height: 30em;
	position: relative;
	text-align: center;
}
.homeTest h3{
	text-align: center;
	font-size: 1.7em;
	font-weight: 600;
	line-height: 2.2em;
	background: #1c3144;
	letter-spacing: .04em;
}
.homeTest h4{
	font-size: 1.2em;
	font-weight: 700;
}
.homeTest p{
	padding: 0 18% 2em 18%;
	background: #7aa35b;
}
.infoContainer{
	position: absolute;
	/*display: none;*/
	opacity: 0;
	transition: .4s ease-in-out;
}
#infoContainer{
	display: block;
	opacity: 1;
}
.infoContainer img{
	border-radius: 50%;
	margin: 1em auto;
	display: block;
	width: 8em;
	border: solid 3px #3e5688;
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
#dotsContainer{
	margin: 0 auto;
	padding-bottom: 2em;
	display: flex;
	justify-content: space-evenly;
	width: 50%;
	position: absolute;
	/*top:12em;*/
	bottom: 0;
	-webkit-transform: translateX(50%);
	transform: translateX(50%)
	left:50%;
}
.dots{
	width: 10px;
	height: 10px;
	background: rgba(62,86,136,.5);
	border-radius: 50%;
}
.dotsActive{
	background: #1c3144;
}
#leftButton,#rightButton{
	top: 13rem;
	position: absolute;
	width: 2.5rem;
	height: 4rem;
	z-index: 1;
	background: rgba(62,86,136,.5);
	border: none;
	color: #FFF;
	font-size: 2em;
	transition: .3s ease-in-out;
}
#leftButton{
	border-radius: 0 5px 5px 0;
	left: 0;
}
#rightButton{
	right:0;
	border-radius: 5px 0 0 5px;
}
#leftButton:hover,#rightButton:hover{
	background: rgba(62,86,136,1);
	cursor: pointer;
}
.aff{
	background: #FFF;
	padding-bottom: 2em;
}
.aff h3{
	font-size: 2em;
	line-height: 3em;
	font-weight: 700;
	letter-spacing: .04em;
	text-align: center;
	background: #1c3144;
	color: #FFF;
	margin-bottom: 1em;
}
.aff a{
	display: block;
	margin: 0 auto;
	width: 60%;
	height: 10em;
}
.aff a:first-child{
	background: url(../images/aff/apSource.jpg) no-repeat center;
	background-size: contain;
}
.aff a:nth-child(2){
	background: url(../images/logo/cyoptics-logo.svg) no-repeat center;
	background-size: contain;
}
.aff a:last-child{
	background: url(../images/aff/google.jpg) no-repeat center;
	background-size: contain;
}

/* Home Page End*/
/* Services Page Start */

.buildProject{
	height: 8.75rem;
	padding: 0 10% 2rem;
}
.buildProject h2{
	text-align: center;
	padding-top: .25em;
	font-size: 1.7em;
	font-weight: 500;
	color: #3e5688;
}
.buildProject button{
	border: none;
	background: #7aa35b;
	font-family: 'Ubuntu';
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.1em;
	border-radius: 3px;
	margin: 1em auto 0;
	display: block;
	transition: .2s ease-in-out;
}
.buildProject button a{
	padding: .5em 1em;
	display: inline-block;
	color: #FFF;
	text-decoration: none;
}
.buildProject button:hover{
	cursor: pointer;
	background: #1c3144;
}
.services .heroHome{
	padding-top: 7em;
}
.servicesAbout{
	position: relative;
	padding: 2rem 10%;
}
.servicesAbout::before{
	content: "";
    position: absolute;
    width: 80%;
    height: 4px;
    background-color: #1c3144;
    top: 0;
    left: 10%;
    border-radius: 2px;
}
.services .homeServices section{
	padding:0;
	border-bottom: none;
}
.services .homeServices h3{
	font-size:1.5em;
	color: #FFF;
	background: #1c3144;
	padding: .5em 0;
}
.services .homeServices p{
	padding: 13em 10% 7em;
}
.services .homeServices a{
	margin-bottom:2em;
}
.services .homeSolar p{
	background: url("../images/icons/solar.svg") no-repeat center 2em;
	background-size: 7.5rem;
}
.services .homeLawncare p{
	background: url("../images/icons/landscape.svg") no-repeat center 2em;
	background-size: 7.5rem;
}
.services .homeAqua p{
	background: url("../images/icons/aquaponic.svg") no-repeat center 2em;
	background-size: 7.5rem;
}
.services .homeSmart p{
	background: url("../images/icons/smarthome.svg") no-repeat center 2em;
	background-size: 7.5rem;
}
.buildProject2{
	height: 12em;
	position: relative;
	padding-top: 2.5em;
}
.buildProject2::before{
	content: "";
    position: absolute;
    width: 80%;
    height: 4px;
    background-color: #1c3144;
    top: 0;
    left: 10%;
    border-radius: 2px;
}
/* Services Page End */
/* About Page Start */

.aboutUs{
	background: #1c3144;
	color: #FFF;
	padding: 0 10% 10%;
}
.aboutUs h2{
	font-size: 2em;
	padding-bottom: .5em;
}
.aboutUs .breadCrumbs a{
	color: #FFF;
}
.aboutUs .breadCrumbs a:hover{
	color: #7aa35b;
}
.ourProcess h2{
	font-size: 2em;
	color: #1c3144;
	padding: 1em 10% .5em;
}
.ourProcess h3{
	font-size: 1.4em;
	padding: .4em 10% .25em;
	color: #FFF;
	background: #1c3144;
	margin:;
}
.ourProcess p{
	padding: 1em 10% 1.5em;
}
.ourTeam{
	text-align: center;
}
.ourTeam h2{
	font-size: 1.8em;
	text-align: left;
	padding: .5em 10%;
	background: #7aa35b;
	color: #FFF;
	margin: 2em 0;
}
.ourTeam img{
	width:15em;
	border-radius: 50%;
	border: 4px solid #7aa35b;
}
.ourTeam h4{
	font-size: 1.5em;
	margin-top:.5em;
}
.ourTeam p{
	font-size: 1.1em;
	margin-bottom: 4em;
}
.careerOpp h2{
	font-size: 1.8em;
	text-align: left;
	padding: .5em 10%;
	background: #7aa35b;
	color: #FFF;
	margin: 2em 0 1em;
}
.careerOpp h3{
	font-size: 1.3em;
	padding: .2em 10%;
	background: #1c3144;
	color: #FFF;
}
.careerOpp p{
	padding: 1em 10% 3em;
}

/* About Page End */
/* Contact Us Start*/

.contactUs, .getUs{
	padding: .25em 10% 2em;
}
.contactUs h2, .getUs h2{
	font-size: 1.5em;
	color: #3e5688;
}
.telephone{
	text-decoration: none;
	font-size: 1em;
	display: inline-block;
	color: #FFF;
	background: #7aa35b;
	padding: .25em .5em;
	margin: .5em 0;
	border-radius: 3px;
	transition: .2s ease-in-out;
}
.telephone:hover{
	background: #1c3144;
}
.contact form, .getstarted form{
	padding:0 10% 3em;
}
label,input,select,option{
	display: block;
	width: 100%;
	margin:0 0;
	height: 2.5em;
}
label{
	padding-top: .5em;
}
[type="submit"]{
	margin: 1.5em 0;
	background: #7aa35b;
	border-radius: 3px;
	text-transform: uppercase;
	border: none;
	color: #FFF;
	font-size: 1.3em;
	padding: 0 1em;
	transition: .2s ease-in-out;
}
[type="submit"]:hover{
	cursor: pointer;
	background: #1c3144;
}
/* Contact Us End*/
/* Each Service Start */
.eachService .heroHome{
	padding: 3.5em 0 0;
}
.eachService .heroHome,
.getstarted .heroHome{
	background: #7aa35b;
}
.eachService .heroHome h2{
	padding: 1em 10%;
	font-size: 2.5em;
	font-weight: 600;
}
.lawncare .heroHome h2{
	line-height: 1.2em;
}
.eachService main section{
	border-bottom: 4px solid #1c3144;
}
.eachService main section:last-child{
	border-bottom: none;
}
.eachService section h2, .eachService section h3{
	padding: 1em 10% .25em;
	font-weight: 500;
}
.eachService section h2{
	font-size: 1.8em;
}
.eachService section h3{
	color: #3e5688;
	font-size: 1.5em;
}
.solar main section:nth-child(2) h3{
	text-align: center;
	font-size: 1.5em;
}
.solar main section:nth-child(2) h3{
	background: url("../images/icons/solar.svg") no-repeat center 1em;
	background-size: 7.5rem;
	padding-top:7em;
}
.lawncare main section:nth-child(2) h3{
	background: url("../images/icons/landscape.svg") no-repeat center 1em;
	background-size: 7.5rem;
	padding-top:6.5em;
}
.eachService section h4{
	font-size: 1.2em;
	font-weight: 500;
	padding: 0 10% 0;
	color: #3e5688;
}
.eachService main p{
	padding: .2em 10% 3em;
}
.eachService main section ul{
	padding: .2em 10% 3em;
}
.eachService main section ul li{
	padding: .5em 0 .5em 1em;
	font-size: .85em;
}
.eachService main section ul li:before{
	content: "- ";
}
.eachService main ul span{
	font-weight: 600;
}
.eachService .breadCrumbs,
.getstarted .breadCrumbs{
	padding: 0 10%;
}
.eachService .buildProject{
	padding: 1em 0;
	min-height: 11.5em;
}
.smart main section:nth-child(4) p{
	padding-bottom: 1.5em;
}
.smart main section:nth-child(4) p a{
	color: #7aa35b;
	text-decoration: none;
}
.smart main section:nth-child(4) p a:hover{
	color: #1c3144;
}
.smart main section:nth-child(4) > a{
	display: block;
	margin: 0 10% 3em;
	height: 5em;
	background: #222 url(../images/logo/cyoptics-logo.svg) no-repeat center;
	background-size: 90%;
	border-radius: 5px;
	text-decoration: none;
	transition: .4s ease-in-out;
}
.smart main section:nth-child(4) > a:hover{
	background: #555 url(../images/logo/cyoptics-logo.svg) no-repeat center;
	background-size: 90%;
}

/* Each Service End */
/* Get Started Start*/
.getstarted .heroHome{
	padding: 3.5em 0 0;
}
.getstarted .heroHome h2{
    padding: 1em 10%;
    font-size: 2.5em;
    font-weight: 600;
}
.getUs{
	padding-top: 1em;
}
.getstarted .interested{
	margin-bottom: 2em;5
}
.getstarted .interested div{
	width: 20em;
}
.getstarted legend{
	font-size: 1.2em;
	padding-bottom: .5em;
}
.getstarted .interested label{
	line-height: 2em;
	padding: 0 0 .2em .5em;
	float: left;
	width:18em;
}
#checkbox{
	width: 2em;
	line-height: 2em;
	display: block;
	float: left;
}
input, select{
	background: #1c3144;
	border: none;
	border-radius: 3px;
	padding-left: 1em;
	color: #fff;
}
select{
	border: 3px solid #7aa35b;
	background: #1c3144;
}
input::placeholder{
	color: #fff;
}

/* Get Started End*/
/* 404 Page Start */
.four .heroHome{
	position: relative;
	padding-top: 3.5em;
	padding-bottom: 0;
	overflow: hidden;
}
.four .heroHome video{
	margin: 0 auto;
	display: block;
}
.four .heroHome div{
  position: relative;
  width: 500px;
  margin: 0 auto;
}
.four .heroHome div:before {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.four h2{
	width: 100%;
	font-size: 2em;
	padding: .5em 10%;
	background: #7aa35b;
	color: #fff;
}
.four main{
	background: #1c3144;
}
.four main p{
	padding: 1em 10%;
	color: #FFF;
	font-size: 1.2em;
}
.four main a{
	color: #FFF;
	text-decoration: none;
	background: #7aa35b;
	display: inline-block;
	padding: .5em 2em;
	border-radius: 3px;
	margin: 0 10% 2em;
}
.four main a:hover{
	color: #3e5688;
}
/* FORMMMMMSSSSSSS Start */

.success{
	background: #3e5688;
	max-width: 1200px;
	margin: 0 auto;
	color: #FFF;
	text-align: center;
	font-size: 2em;
	line-height:5em;
}
.error{
	background: #333;
	max-width: 1200px;
	margin: 0 auto;
	color: #FFF;
	text-align: center;
	font-size: 1.4em;
	line-height:2em;
}

/* FORMMMMMSSSSSSS End */
/* 404 Page End */
/*Footer Start*/

.backFooter{
	background: #FFF;
	box-shadow: 0 0 20px rgba(0,0,0,.4);
	clear: both;
}
footer h1{
	padding: 1em 0 .3em 0;
}
footer h1 a{
	height: 70px;
	width: 50%;
	margin: 0 auto;
	display: block;
	line-height: 70px;
	background: url("../images/logo/pureLogo1.svg") no-repeat center;
	background-size: contain;
}
.footerSubNav, .footerContact{
	display: none;
}
.footerSocial{
	margin: 0 auto;
	text-align: center;
	width:50%;
	display: flex;
	justify-content: center;
}
.footerSocial a{
	width: 35px;
	height: 35px;
	font-size: 1.2em;
	line-height: 35px;
	display: block;
	text-decoration: none;
	color: #9abb3b;
	margin: 0 .4em;
	text-align: center;
	transition: .2s ease-in-out;
}
.footerSocial a:hover{
	color: #3e5688;
}

/* Footer Nav Start*/

.footerNav{
	width: 80%;
	margin: 1.5em auto;
	display: flex;
	justify-content: space-evenly;
}
.fNavItem{
	border-right: solid 2px #414042;
	width: 25%;
}
.fNavItem:last-child{
	border-right: none;
}
.footerNav a{
	text-align: center;
	display: block;
	text-decoration: none;
	color: #414042;
	font-size: .7em;
	line-height: 1.4em;
	font-family: 'Ubuntu';
	font-family: 500;
	padding: .2em 1em;
	transition: .2s ease-in-out;
}
.footerNav a:hover{
	color: #9abb3b;
}
footer iframe{
	width: 100%;
	height: 250px;
	margin-top: 1em;
}
.home .fhome > a,
.services .fservices > a,
	.solar .fsolar > a,
	.solar .fservices > a,
	.lawncare .flawncare > a,
	.lawncare .fservices > a,
	.aqua .faqua > a,
	.aqua .fservices > a,
	.smart .fsmart > a,
	.smart .fservices > a,
.about .fabout > a,
.contact .fcontact > a{
	color: #9abb3b;
}

/* Footer Nav End*/

.copyright{
	background: #1c3144;
	font-size: .75em;
	color: #FFF;
	text-align: center;
	line-height: 2.8em;
}

/*Footer End*/
/* Menu Button*/

.hamburger {
	padding: 15px 15px;
	display: inline-block;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible;
}
.hamburger:hover{
	opacity: 0.7;
}
.hamburger-box{
	width: 40px;
	height: 24px;
	display: inline-block;
	position: relative;
}
.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
	width: 30px;
	height: 4px;
	background-color: #3e5688;
	border-radius: 4px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after{
    content: "";
    display: block;
}
.hamburger-inner::before{
    top: -10px;
}
.hamburger-inner::after{
    bottom: -10px;
}

/* Spring Menu Button */

.hamburger--spring .hamburger-inner{
  top: 2px;
  transition: background-color 0s 0.13s linear;
}
.hamburger--spring .hamburger-inner::before{
    top: 10px;
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spring .hamburger-inner::after{
    top: 20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring.is-active .hamburger-inner{
	transition-delay: 0.22s;
	background-color: transparent;
}
.hamburger--spring.is-active .hamburger-inner::before{
	top: 0;
	transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
	transform: translate3d(0, 10px, 0) rotate(45deg);
}
.hamburger--spring.is-active .hamburger-inner::after{
	top: 0;
	transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
	transform: translate3d(0, 10px, 0) rotate(-45deg);
}

/* FIRST QUUUERRRRYYYYYYYYYYYYYYY 500PXXXXXXXXXXXXX*/

@media only screen and (min-width:500px){
	.backHeader{
		height: 4em;
	}
	header h1 a{
		width:125px;
		line-height: 4em;
		height: 4em;
	}
	header h1{
		float: left;
	}
	#menuButton{
		display: none;
	}
	.telHeader{
		float: right;
		transform: none;
		position: static;
		margin: .5em 5% 0 1em;
	}
	.getStartedNav{
		background: #9aba36;
		display: block;
		float: right;
		color: #FFF;
		text-decoration: none;
		font-weight: 500;
		padding: 2px 1.5em 0;
		font-size:.7em;
		transition: .2s ease-in-out;
		border-radius: 2px;
		margin: .5em 2em 0 20%;
		text-transform: uppercase;
	}
	.getStartedNav:hover{
		background: #1c3144
	}

	/* Global Nav Start */

	#globalNav{
		clear: none;
		position: static;
		float: right;
		width: 20em;
		margin: .25em 5% 0 0;
	}
	.gNavItem a{
		background: none;
		color: #414042;
	}
	#globalNav li{
		float: left;
		width: 25%;
		text-align: center;
	}
	.gNavItem:last-child{
		display: none;
	}
	#globalNav li a:hover{
		background: none;
		border-bottom: none;
		color: #7aa35b;
	}
	.gNavItem a{
		border-bottom: none;
		line-height: 1.5em;
		padding-left: 0;
	}
	#globalSubNav{
		display: none;
	}
	.services .backHeader,
	.solar .backHeader,
	.lawncare .backHeader,
	.aqua .backHeader,
	.smart .backHeader{
		height: 5em;
	}
	.services #globalSubNav,
	.solar #globalSubNav,
	.lawncare #globalSubNav,
	.aqua #globalSubNav,
	.smart #globalSubNav{
		display: block;
	}
	#globalSubNav{
		position: absolute;
		width:20em;
		right:5%;
	}
	.gsubNav{
		display: block;
	}
	.gsubNav a{
		text-indent: 0;
		text-align: center;
		font-size: .6em;
		line-height: 1.8em;
		border-bottom: none;
		height: 1.8em;
		display: block;
		width: 100%;
	}
	.nsmart a{
		border-bottom: none;
	}
	.home .nhome > a,
	.services .nservices > a,
		.solar .nsolar > a,
		.solar .nservices > a,
		.lawncare .nlawncare > a,
		.lawncare .nservices > a,
		.aqua .naqua > a,
		.aqua .nservices > a,
		.smart .nsmart > a,
		.smart .nservices > a,
	.about .nabout > a,
	.contact .ncontact > a,
	.getstarted .ngetstarted > a{
		background: none;
		border-bottom: none;
		color: #7aa35b;
	}
	/* Global Nav End*/

	.eachService .heroHome{
	padding: 5em 0 0;
	}

	/* Home Start*/

	.heroHome h2{
		font-size: 2.2em;
	}
	.heroHome h3{
		font-size: 1.4em;
	}
	.heroHome button{
		margin-top: 5em;
	}
	.home .heroHome{
		height: 340px;
	}
	.services .heroHome{
		height: 400px;
	}
	.about .heroHome{
		height: 340px;
	}
	.contact .heroHome{
		height: 340px;
	}
	.homeTest{
		height: 30em;
	}
	.infoContainer img{
		width: 12em;
	}
	/* Home End*/
	/* Get Started */
	.getstarted main form {
	    padding: 1em 15%;
	}
	.four .heroHome div{
		width:900px;
	}
}

/* FIRST QUUUERRRRYYYYYYYYYYYYYYY 500PXXXXXXXXXXXXX*/

@media only screen and (min-width:625px){
	
	.breadCrumbs a{
		font-size: 1.3em;
	}

	/* home Start*/
	.home .heroHome{
		background: url("../images/hero/heroHomeMed.jpg") no-repeat center bottom;
		background-size: cover;
		height: 390px;
	}
	.services .heroHome{
		background: url("../images/hero/heroServicesMed.jpg") no-repeat center;
		background-size: cover;
		height: 450px;
	}
	.about .heroHome{
		background: url("../images/hero/heroAboutMed.jpg") no-repeat center;
		background-size: cover;
		height: 390px;
	}
	.contact .heroHome{
		background: url("../images/hero/heroContactMed.jpg") no-repeat center 2em;
		background-size: cover;
		height: 390px;
	}
	.heroHome h2{
		font-size: 2.6em;
	}
	.heroHome h3{
		font-size: 1.7em;
	}
	.heroHome button{
		margin-top: 7em;
	}
	.homeAbout{
		background: #1c3144 url(../images/main/eco.jpg) no-repeat center right;
		background-size: 50%;
		padding: 5%;
	}
	.aboutUs{
		background: #1c3144 url(../images/main/about.jpg) no-repeat center right;
		background-size: 50%;
		padding: 0 5% 2em;
	}
	.contactUs{
		background: url(../images/main/contact.jpg) no-repeat center right;
		background-size: 50%;
		padding: 0 10% 2em;
	}
	.getUs{
		background: url(../images/main/getstarted.svg) no-repeat 85% center;
		background-size: 40%;
		padding: 1.5em 10% 2em;
	}
	.homeAbout h2, .homeAbout p, .aboutUs h2, .aboutUs p, .contactUs h2, .contactUs p, .getUs h2,.getUs p{
		width: 45%;
	}
	.homeTest{
		height: 30em;
	}
	.infoContainer img{
		width: 12em;
	}
	.homeTest h4{
		font-size: 1.5em;
	}
	.homeTest p{
		font-size: 1em;
		padding-top: 1em;
	}
	#dotsContainer{
		width: 20em;
		left: 50%;
		transform: translateX(-50%);
	}
	.homeServices h3{
		padding: 6.5em 10% 0;
	}
	.homeServices section{
		width: 50%;
		float: left;
		height: 38em;
		position: relative;
	}
	.homeServices a{
		position: absolute;
		bottom: 3em;
		margin-bottom: 0;
	}
	.homeServices p{
		padding: 1em 10% 1.5em 10%;
	}
	.homeServices .homeAqua{
		border-bottom: none;
	}

	/* HOME END*/
	/* Services Start */
	.lawncare .heroHome h2{
		line-height: .6em;
	}
	.services .homeServices section{
		height: 37em;
	}
	.services .homeServices a{
		bottom: 2em;
	}
	.solar main section:first-child{
		background: url(../images/main/solar.jpg) no-repeat center right;
		background-size: 50%;
	}
	.lawncare main section:first-child{
		background: url(../images/main/lawncare.jpg) no-repeat center right;
		background-size: 50%;
	}
	.aqua main section:first-child{
		background: url(../images/main/aqua.jpg) no-repeat center right;
		background-size: 50%;
	}
	.smart main section:first-child{
		background: url(../images/main/smart.jpg) no-repeat center right;
		background-size: 50%;
	}
	.eachService main section:first-child h3{
		background: none;
		text-align: left;
		width: 50%;
		padding: 1em 5% .25em;
	}
	.eachService main section:first-child p{
		width: 50%;
		padding: .5em 5% 2em;
	}
	.eachService .heroHome h2{
		padding-left: 5%;
	}
	.eachService .breadCrumbs{
		padding-left: 5%;
	}
	.getstarted .breadCrumbs{
		padding-left: 10%;
	}

	/* Services End*/
	/* About Start*/
	.ourProcess h2{
		padding: 1em 5% 1em;
	}
	.ourProcess section{
		width: 50%;
		float: left;
		height: 20em;
	}
	.about h2{
		padding: .5em 5%;
	}
	.aboutUs h2{
		padding-left: 0;
	}
	.about h3{
		padding: .4em 0 .4em 10%;
	}

	.ourTeam section{
		width: 50%;
		float: left;
	}
	.careerOpp{
		margin-bottom: 2em;
	}
	.careerOpp section{
		width: 50%;
		float: left;
		height: 13em;
	}

	/* About End */
	/* Contact Start */

	.contact main form{
		padding: 1em 20%;
	}

	/* Contact End*/
	/* Get Started */
	.getstarted main form {
	    padding: 1em 20%;
	}
	/*Footer Start*/
	.backFooter{
		background: #FFF;
		box-shadow: 0 0 20px rgba(0,0,0,.4);
	}
	.footerLeft{
		float: left;
		width: 60%
	}
	.footerTop{
		padding: 0 5%;
		float: left;
		width: 50%;
	}
	footer h1{
		padding: 1em 0 .3em 0;
	}
	footer h1 a{
		height: 70px;
		width: 10em;
		margin: 0;
	}
	.footerSubNav, .footerContact{
		display: block;
	}
	.footerContact{
		float: left;
		width: 50%;
		padding: 2em 1em 0;
		/*text-indent: 2em;*/
	}
	.footerContact a{
		text-decoration: none;
		color: #1c3144;
		padding: .5em 0;
		font-size: .8em;
		display: block;
		line-height: 1.4em;
		padding-left: 2.5em;
	}
	.footerPhone{
		background: url(../images/icons/phone.svg) no-repeat center left;
		background-size: 1.7em;
	}
	.footerAddress{
		background: url(../images/icons/marker.svg) no-repeat center left;
		background-size: 2em;
	}
	.footerSocial{
		margin: 0;
		text-align: center;
		width:10em;
		display: flex;
		justify-content: center;
	}
	.footerSocial a:hover{
		color: #3e5688;
	}

	/* Footer Nav Start*/

	.footerNav{
		width: 80%;
		margin: 1.5em auto;
		display: flex;
		justify-content: space-evenly;
	}
	.fNavItem{
		border-right: none;
		width: 25%;
	}

	.footerNav a{
		text-align: center;
		display: block;
		text-decoration: none;
		color: #414042;
		font-size: 1em;
		line-height: 1.4em;
		font-family: 'Ubuntu';
		font-family: 500;
		padding: 0;
		transition: .2s ease-in-out;
		text-align: left;
	}
	.footerSubNav{
		font-size: .7em;
	}
	.footerSubNav li{
		padding: .25em 0;
	}
	.footerNav a:hover{
		color: #9abb3b;
	}
	footer iframe{
		width: 40%;
		height: 260px;
		margin-top: 0;
		float: right;
	}
	/* Footer Nav End*/

	.copyright{
		clear: both;
	}

	/*Footer End*/
}

/* 750px QUERRRYYYYYYYYYYYYYYYYYY */

@media only screen and (min-width:750px){
	.heroHome button a{
		padding: .5em 1em;
		font-size: 1.2em;
	}
	.serviceinfo{
		width: 50%;
		float: left;
	}
	.homeServices section{
		height: 34em;
	}
	.infoContainer{
		width: 35em;
		left:50%;
		transform: translateX(-50%);
	}
	.aff div{
		display: flex;
		justify-content: space-evenly;
	}
	.aff a{
		display: block;
		width: 20%;
		height: 10em;
	}
	.services .homeServices section{
		height: 34em;
	}
	.eachService main .serviceinfo{
		border-bottom: none;
	}
	.buildProject{
		padding: 0 5% 2rem;
	}
	.buildProject:last-child{
		clear: both;
		border-top: 4px solid #1c3144;
		padding-top: 2em;
	}
	.solar .buildProject:last-child, .services .buildProject:last-child{
		clear: both;
		border-top: none;
	}
	.telHeader{
		margin: .5em 5% 0 1em;
	}
	.ourProcess section{
		height: 18em;
	}
	.footerTop{
		width: 40%;
	}
	.footerContact{
		width: 60%;
	}
	.four h2{
		padding-left: 5%;
	}
	.four main div{
		width: 50%;
		float: left;
	}
}

/* MEDIA QUERY 900PXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@media only screen and (min-width:900px){
	.heroHome button a{
		padding: .5em 1em;
		font-size: 1.3em;
	}
	.homeTest{
		font-size: 1.2em;
	}
	.infoContainer{
		width: 40em;
	}
	#leftButton,#rightButton{
		top: 17rem;
		width: 3.5rem;
		height: 6rem;
	}
	.footerLeft{
		width:50%;
	}
	.footerTop{
		width: 40%;
	}
	.footerContact{
		width: 60%;
	}
	footer iframe{
		width: 50%;
	}
	.four .heroHome div{
		width:1200px;
	}
	.getStartedNav{
		margin: .5em 2em 0 50%;
	}
	.getUs{
		background: url(../images/main/getstarted.svg) no-repeat 75% center;
		background-size: 30%;
		padding: 1.5em 10% 2em;
	}
	.smart main section:first-child{
		background: url(../images/main/smart.jpg) no-repeat bottom right;
		background-size: 50%;
	}
}

@media only screen and (min-width:1200px){
	body{
		background: url(../images/background.png);
	}
	.backHeader{
		height: 6rem;
	}
	.services .backHeader,
	.solar .backHeader,
	.lawncare .backHeader,
	.aqua .backHeader,
	.smart .backHeader{
		height: 7.7rem;
	}
	.backHeader div{
		max-width: 1200px;
		margin: 0 auto;
		position: relative;
	}
	header h1 a{
		width: 200px;
	    line-height: 6em;
	    height: 6em;
	}
	.telHeader{
		margin: .5em 0 0 1em;
		padding: .25em 1em;
		font-size: 1em;
	}
	.getStartedNav{
		margin: .5em 2em 0 30%;
		padding: .25em 1em;
		font-size: 1em;
	}
	.heroHome div h2{
		max-width: 1200px;
		margin: 0 auto;
		font-size: 3.5em;
		padding: .25em 5% .25em;
		line-height: 1em;
	}
	.heroHome div h3{
		max-width: 1200px;
		margin: 0 auto;
		padding-left: 5%;
		font-size: 2em;
	}
	.home .heroHome{
		background: url("../images/hero/heroHomeLarge.jpg") no-repeat bottom;
		background-size: cover;
		height: 800px;
		padding-top: 15em;
	}
	.services .heroHome{
		background: url("../images/hero/heroServicesLarge.jpg") no-repeat top;
		background-size: cover;
		height: 600px;
		padding-top: 15em;
	}
	.about .heroHome{
		background: url("../images/hero/heroAboutLarge.jpg") no-repeat center;
		background-size: cover;
		height: 600px;
	}
	.contact .heroHome{
		background: url("../images/hero/heroContactLarge.jpg") no-repeat center 2em;
		background-size: cover;
		height: 400px;
	}
	.eachService .heroHome{
		padding: 7.5em 0 0;
	}
	.eachService .heroHome h2,
	.eachService .heroHome ul,
	.getstarted .heroHome h2,
	.getstarted .heroHome ul{
		max-width: 1200px;
		margin: 0 auto;
		padding-left: 0;
	}
	.getstarted .heroHome{
		padding: 5.8em 0 0;
	}
	.heroHome button{
		margin-top: 15em;
	}
	.heroHome button a{
		padding: .5em 1em;
		font-size: 1.7em;
	}
	main{
		max-width: 1200px;
		margin: 0 auto;
	}

	.contactUs{
		width: 35%;
		background: url(../images/main/contact.jpg) no-repeat 3.7em bottom;
		background-size: 85%;
		padding: 1em 5% 16em;
		float: left;
	}
	.getUs{
		width: 35%;
		background: url(../images/main/getstarted.svg) no-repeat 3.7em bottom;
		background-size: 80%;
		padding: 1.5em 5% 13em;
		float: left;
	}
	.contactUs h2,
	.contactUs p,
	.getUs h2,
	.getUs p{
		width: 95%;
	}
	.contact main form, .getstarted main form{
		width: 65%;
		padding: 1em 5%;
		float: right;
	}
	#globalNav{
		margin: .9em 0 0 0;
		font-size: 1.3rem;
	}
	#globalNav li a{
		padding: 0;
	}
	#globalSubNav{
		right: 0;
	}
	.homeServices section{
		height: 30em;
	}
	.services .homeServices section{
		height: 29em;
	}
	.ourProcess section{
		height: 14em;
	}
	footer{
		max-width: 1200px;
		margin: 0 auto;
	}
}