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

/*------ colors -------*/

/*
green:      #50c377
yellow:     #ffc802
light grey: #7f7f7f
dark grey:  #333333
*/
/*------ end of colors -------*/







/*------ body -------*/
body{
	background-color:#7f7f7f;
	color:white;
	font-family: verdana, arial;
	text-align:center;
	margin:0px;
}


a{
	color:white;
	text-transform:uppercase;
	font-weight:lighter;
	text-decoration:none;
}


li{
	list-style:none;
}


h2, h3, h4, h5, h6{
	text-transform:uppercase;
}


.services h2, #newsletter h2{
	letter-spacing:.25em;
}


.hamburger, #social img{
	width:45px;
	height:45px;
}


.green{
	color:#50c377;
}


/*------ buttons -------*/

.button{
	background-color:#ffc802;
	font-weight:bold;
	letter-spacing:.1em;
	padding:12px 30px;
}

.learn-more-button{
	font-weight:300px;
	display:block;
	width:100px;
	margin-top:30px;
	margin-left:auto;
	margin-right:auto;
}

/*------ end of buttons -------*/



/*------ wrappers -------*/

.wrapper{
	width:96%;
	max-width:2200px;
	margin-left:auto;
	margin-right:auto;
	padding: 0 2%
}


/*------ end of wrappers -------*/



/*------ header -------*/
header{
	background-color:#333333;
	padding-bottom:12px;
}

#brand{
	width:100%;
	max-width:2200px;
	margin-left:auto;
	margin-right:auto;
	padding:35px 0 20px 0;
}


#brand #headerlogo{
	float:left;
	margin-left:5%;
}

#headerlogo{
	width:500px;
}



#headernav{
	float:right;
	margin-top:24px;
	margin-right:5%;
}

#headernav li{
	font-size:15px;
	max-width:1200px;
	display:inline-block;
	margin:10px 15px;
}

.toggle{
	display:none;
}


.clearfix{
	clear:both;
}
/*------ end of header -------*/




/*------ banner -------*/

#banner{
	position:relative;
	height:700px;
	background-image:url("images/jpg/hero-image.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position-x:30%;
}

.valueprop1{
	background-color:rgba(0, 0, 0, 0.2);
	text-align:left;
	position:absolute;
	right:0;
	width:30%;
	height:100%;
	padding-left:2%;
}



.valueprop1 h1{
	text-transform:capitalize;
	letter-spacing:.10em;
	padding-top:20px;
	margin-right:30%;
}

.valueprop1 p{
	line-height:30px;
	margin-bottom:90px;
	margin-right:30%;
}

#banner-responsive{
	display:none;
}


/*------ end of banner -------*/





/*------ services -------*/

.services{
	margin-top:80px;
	margin-bottom:80px;
}

.services h2{
	margin-bottom:40px;
}

.service-info{
	display:inline-block;
	vertical-align:top;
	width:22%;
	margin:25px 0; 
	padding:0;
	
}

.service-info h3{
	font-size:25px;
	text-transform:capitalize;
}

.service-info p{
	line-height:29px;
	width:70%;
	margin:-8px auto 60px;
	padding:0 15%;
	opacity:80%;
	
}

.icon{
	width:100%;
	max-width:50%;
	height:auto;
	margin-bottom:10px;
}

/*------ end of services -------*/




/*------ membership -------*/

#membership{
	width:100%;
	margin-top:130px;
	margin-bottom:80px;
	margin-left: auto;
	margin-right: auto;
	padding:0 2%;
}

.mem{
	background-color:#333333;
	display:inline-block;
	vertical-align:top;
	width:100%;
	max-width:22%;
	min-width:400px;
	height:670px;
	margin:0 2%;
	padding:40px 2% 0;
}



.mem1{
	margin-bottom:35px;
}

.mem h2{
	font-size:30px;
	letter-spacing:.23em;
	margin:0 auto -14px;
}

.mem .green{
	font-size:22px;
	font-weigth:bold;
	letter-spacing:.33em;
	word-spacing:-1px;
	margin-bottom:50px;
}

.money{
}

.mem h3 span{
	font-weigth:bold;
	font-family:"Trebuchet MS";
	font-size:55px;
	position:relative;
}

.dollar, .month{
	font-size:25px;
	font-weight:normal;
	display:inline-block;
	text-transform:lowercase;
}

.dollar{
	margin-bottom:-500px;
	position:absolute;
	top:-30%;
	left:-8%;
}

.mem h6{
	text-transform:lowercase;
	font-weight:lighter;
	margin:-34px 0 40px;
}

.mem-button{
	color:#333333;
	font-weight:bold;
	font-size:22px;
	letter-spacing:2px;
	padding:13px 70px;
}

.mem h5{
	margin-top:100px;
	margin-bottom:-3px;
}

.mem ul{
	text-align:left;
	font-weight:normal;
	font-size:15px;
	line-height:2.5em;
	margin-left:80px;
}

.mem h5, .mem li{
}


.mem h6, .mem h5, .mem li{
	opacity:65%;
}


/*------ end of membership -------*/






/*------ teams -------*/


.team-wrapper{
	background-color:black;
	width:100%;
}

.valueprop2{
	max-width:2200px;
	margin-left:auto;
	margin-right:auto;
	padding:45px 5% 30px; 
}

.valueprop2 h2{
	font-size:60px;
	text-align:left;
	float:left;
	width:30%;
	margin-left: 12%;
	margin-right:1%;
	padding-right: 1%;
}

.valueprop2 p{
	font-size:15px;
	text-align:left;
	line-height:40px;
	float:left;
	width:42%;
	margin-top:58px;
	margin-left: 4%;
	padding-left:2%;
}

.clearfix{
	clear:both;
}




.team-image{
	width:100%;
	height:auto;
	position: relative;
}

.team-image img{
	width:100%;
}

.team-image h2{
	width:100%;
	margin-bottom:3.5px;
	position:absolute;
	bottom:0;
	padding:15px 0;
}


h2.left, h2.right{
	word-spacing:.4em;
	background-color:rgba(0, 0, 0, 0.5);
	width:100%;
	height:29px;
}

h2.left{
	text-align:center;
	width:50%;
}

h2.right{
	text-align:center;
	width:50%;
	right:0;
}



.team-cta{
	background-color:black;
	width:100%;
	height:110px;
	margin-top:-4px;
	padding-top:80px;
}


.team-responsive{
	display:none;
}

/*------ end of teams -------*/



.wrapper-form{
	width:90%;
	padding-left:5%;
	padding-right:5%;
}

/*------ newsletter -------*/

#newsletter{
	text-align:center;
	width:100%;
	margin-top:100px;
	margin-bottom:120px;
	margin-left:auto;
	margin-right:auto;
	padding-top:85px;
}

#newsletter p{
	font-weight:bold;
	letter-spacing:.25em;
	line-height:1.5em;
	max-width:450px;
	margin-left:auto;
	margin-right:auto;
}

#newsletter p span{
	display:block;
}


#sign-up{
	width:100%;
	margin-top:50px;
}

.sign-up{
	color:#50c377;
	background-color:#333333;
	display:block;
	font-family:verdana;
	font-weight:bold;
	letter-spacing:2px;
	text-align:center;
	text-transform:capitalize;
	border: 4px solid #50c377;
	box-sizing:border-box;
	width:100%;
	max-width:300px;
	height:35px;
	margin:10px auto;
}

.sign1 .sign2{
	
}

.sign3{
	color:#333333;
	background-color:#50c377;
	margin-top:20px;
	letter-spacing:5px;
	text-transform:uppercase;
}
/*------ end of newsletter -------*/






/*------ footer -------*/



/*------ logo -------*/
#footerlogo img{
	display:block;
	width:320px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:50px;
	padding-bottom:0px;
} 



.combomark2{
	width:400px;
}

/*------ end of logo -------*/



#reach{
	max-width:1100px;
	margin:55px auto 50px;
}

/*------ contact -------*/

#contact{
	word-spacing:.10em;
	text-align:left;
	display:inline-block;
	vertical-align:top;
	width:100%;
	max-width:350px;
	padding-right:5%;
}

#contact h6{
	margin-bottom:-10px;
	opacity:70%;
}

.icon-contact{
	width:14px;
	height:14px;
}

#contact img{
	margin-right:15px;
	margin-bottom:-2.5px;
}



/*------ end of contact -------*/



/*------ social -------*/
#social{
	text-align:right;
	display:inline-block;
	vertical-align:top;
	width:100%;
	max-width:210px;
	margin-left:auto;
	margin-right:auto;
	padding-left:5%;
	
}

#social li{
	display:inline-block;
	margin:10px 10px 0;
}

/*------ end of social -------*/



/*------ footernav -------*/

footer{
	background-color:#333333;
	padding-bottom:30px;
}

#footernav{
	padding-right:50px;
}

#footernav li{
	text-align:center;
	display:inline-block;
	margin:0 20px 25px;
	opacity:70%;
}

/*------ end of footernav -------*/



/*------ terms -------*/

.terms p{
	font-size:10px;
	word-spacing:.08em;
	width:90%;
	margin:0 5%;
	opacity:70%;
}

/*------ end of terms -------*/

/*------ end of footer -------*/



/*------ end of body -------*/













/*------ media query -------*/

@media screen and (max-width: 1900px){
	
	.valueprop1{
		width:40%;
	}
	
}
/*end 1900*/

@media screen and (max-width: 1650px){
	
	.valueprop2 h2{
		font-size:50px;
	}
	
	.valueprop2 p{
		font-size:20px;
		line-height:35px;
		margin-top:45px;
	}
	
}
/*end 1650*/


@media screen and (max-width: 1350px){

	#headernav{
		display:none;
	}
	.toggle{
		display:block;
		float:right;
		margin-top:45px;
		margin-right:5%;
	}

	
	.service-info{
		width:40%;
	}
	

}
/*end 1350*/





@media screen and (max-width: 1200px){

	.valueprop2 h2, .valueprop2 p{
		text-align:center;
		display:block;
		width:90%;
		margin-left:auto;
		margin-right:auto;
		padding:0 5%;
	}

	.valueprop2 p{
		margin-top:0px;
	}


	
	
	.teams{
		display:none;
	}
	
	.team-responsive{
		display:block;
	}
	
	.team-image-responsive{
		position:relative;
	}
	
	.team-image-responsive img{
		display:block;
		width:100%;
		height:auto;
	}
	
	
	h2.left-responsive, h2.right-respnsive{
		background-color:rgba(0, 0, 0, 0.5);
		word-spacing:.4em;
		position:absolute;
		width:100%;
		height:50px;
		margin-bottom:0px;
		padding:18px 0 0;
		
	}
	
	h2.left-responsive{
		bottom:50%;
	}
	
	h2.right-respnsive{
		bottom:0;
		margin-bottom:0px;
		
	}

}
/*end 1200*/




@media screen and (max-width: 1100px){
	
	
	.valueprop1{
		display:none;
	}
	
	#banner-responsive{
		background-color:black;
		display:block;
		height:420px;
		margin-top:-20px;
	}
	

	
	.valueprop1-responsive{
		text-align:left;
		max-width:900px;
		height:400px;
		margin:20px auto;
		padding:20px 5% 0;
	}
	
	.valueprop1-responsive h1{
	}
	
	.valueprop1-responsive p{
		line-height:30px;
		max-width:700px;
		margin-bottom:50px;
	}
	
	
#membership{
	width:100%;
	margin-top:130px;
	margin-bottom:80px;
	margin-left: auto;
	margin-right: auto;
	padding:0%;
}

.mem{
	display:block;
	vertical-align:top;
	min-width:400px;
	max-width:22%;
	height:670px;
	margin:0 auto 35px;
	padding:40px 0% 0;
}


	
}/*end 1100*/





@media screen and (max-width: 900px){

	

		
	.service-info{
		width:40%; 
		margin:15px 2%;	
	}
	
	
	#contact, #socail{
		display:block;
		margin:50px auto;
		padding:0 5%;
	}
	
	#social {
		padding-right:40px;
	}
	
		#footernav{
		margin-bottom:50px;
	}
	
	#footernav li{
		display:block;
	}
	
}/*end 900*/



@media screen and (max-width: 800px){

	#headerlogo{
		width:360px;
		margin-top:10px;
	}
	

	
	.service-info{
		width:100%;
		max-width:400px;
		margin-left:auto;
		margin-right:auto;
	}
	
	
	

	
	.combomark2{
	width:300px;
}
	

	
	

}/*end 800*/





@media screen and (max-width: 650px){


	.valueprop1-responsive h1{
	}

}/*end 650*/



@media screen and (max-width: 600px){
	
	#banner{
		height:500px;
	}


}/*end 600*/


@media screen and (max-width: 500px){


	#headerlogo{
		width:260px;
		margin-top:10px;
	}

	.toggle{
		margin-top:28px;
	}
	
	.hamburger{
		width:35px;
	}
}/*end 500*/

@media screen and (max-width: 450px){
	

	
	.valueprop1-responsive h1{
		font-size:32px;
	}
	
	.valueprop1-responsive p{
		font-size:16px;
		line-height:30px;

	}
	
	.mem{
	display:block;
	vertical-align:top;
	min-width:100%;
	max-width:22%;
	height:670px;
	margin:0 auto 35px;
	padding:40px 0% 0;
}

	
	
	#newsletter p{
	
	display:inline;
}

	#newsletter p span{
		display:inline;
	}

	
}/*end 450*/