body {
	margin: 0;
	font-family: 'Lato', sans-serif;
	
}

.homescreen-home {
   background: url(images/personal-trainer-workout-d.jpg) no-repeat center; 
   height: 900px;
   width: 100%;
   
   
}

@media only screen and (max-width: 500px) {
.homescreen-home {
   background: url(images/personal-trainer-workout-m.jpg) no-repeat center; 
   width: 100%;
   height: 900px;
      
}
}	

/*-Registration-form--------------------------------*/
@media (min-width:240px) {
h2 {
	font-size: 48px;
	margin-bottom: 10px;
	margin-top: 30px;
	font-weight: 400;
	color: #3d6784;
	width: 100%;
	
}

h5 {
	font-size: 20px; 
	font-weight: 300;
	color: #485C65;
	
}


.registerform {
	position: relative;
	width: 100%;
	height: 100%;
	max-height: 700px;
	
	
	
	
}
.registerform header {
  position: absolute;
  width: 50%;
  top: 49%;
  left: 43%;
  transform: translate(-0%, -43%);
  -ms-transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  color: black;
  font-size: 16px;
  border-radius: 10px;
  text-align: center;
  opacity: .8;
  padding: 10px;
  max-height: 440px;
}


.background form {
	width: 100%;
	text-align: center;
	margin-right:auto;
	margin-left:auto;
	text-decoration:none;
	 
}

input[value="GET STARTED"]
{
  background-color: #485C65;
  border-radius: 8px;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 17px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  cursor: pointer;

}

 input[value="GET STARTED"]:hover {
	opacity: 1;
	color: white;
	}
	
.input-group {
	display: inline;
	text-align: center; 
}
div.input-group input {
	display: inline-block;
	padding: 10px;
	
	
	
}

form p {
	text-align: center; 
	color: black;
	text-decoration:none;
}

form .terms-privacy a {
	text-decoration: none;
	color: grey;
}

form .loginfeature {
	color: #80A0B7;
	text-decoration: none;
}

}

@media screen and (max-width: 800px) {
h2 {
	font-size: 30px;	
	margin-bottom: 10px;
	margin-top: 30px;
	color: #3d6784;
	
}

h5 {
	font-size: 16px; 
	
}


.registerform {
	position: relative;
	height: 100%;
	max-height: 800px;
	width: 100%;
	
	
	
	
}
.registerform header {
  position: absolute;
  width: 100%;
  left: 0;
  top: 80%;
  opacity: 1;
  background-color: white;
  color: black;
  font-size: 16px;
  width: 100%;
  text-align: center;
  border: 0px solid #CCC;
  border-bottom: 1px solid #CCC;
  padding: 0px;
  padding-bottom: 5px;
  border-radius: 0px;
  padding-top: -10px;


  
  
}



.background form {
	width: 100%;
	text-align: center;
	margin-right:auto;
	margin-left:auto;
	text-decoration:none;
	
	 
}

.input-group {
	
	display: inline;
	text-align: center; 
}
div.input-group input {
	display: inline-block;
	padding: 10px;
	
	
	
}

.registration form p {
	text-align: center; 
	color: black;
	text-decoration:none;
	font-size: 15px;
	
}

form .terms-privacy a {
	text-decoration: none;
	color: grey;
	
}


form .loginfeature {
	color: #80A0B7;
	text-decoration: none;
}
}
	
/*--How It Works---------------------------------------------------------*/
/*desktop view*/
@media (min-width:880px) {
.hwitext {
	margin-top: 100px;
	text-align: center;
	color: #3d6784;
	width: 100%;
	font-weight: 500;
	font-size: 50px;
	
	
}

.how-it-works {
	background-color: white;
	width: 100%;
	text-align: center;
	margin: 0px, 0px, 0px, 0px;
	
		
	
}

.step-one,
.step-two,
.step-three,
.step-four {
	color: #3d6784;
	vertical-align: top;
}

.step-one {
	width: 24.5%;
	display: inline-block;

	
}

.step-two {
	width: 24.5%;
	display: inline-block;
}

.step-three {
	width: 24.5%;
	display: inline-block;
}

.step-four {
	width: 24.5%;
	display: inline-block;
}
} 

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

.hwitext {
	margin-top: 80px;
	text-align: center;
	color: #3d6784;
	width: 100%;
	font-weight: 500;
	font-size: 30px;
	padding-bottom: 15px; 
	
}
.how-it-works {
	background-color: white;;
	margin-top: 50px;
	text-align: center;
	color: #3d6784;
	width: 100%;
	font-weight: 600;
	
}
	

.step-one,
.step-two,
.step-three,
.step-four {
	display: inline-block;
	vertical-align: top;
	width: 49%;
	text-align: center; 
	

}



}


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

.hwitext {
	margin-top: 100px;
	text-align: center;
	color: #3d6784;
	width: 100%;
	font-weight: 500;
}
.how-it-works {
	background-color: white;;
	margin-top: 20px;
	text-align: center;
	color: #3d6784;
	width: 100%;
	font-weight: 500;
	
	
	
}
	

.step-one, .step-two, .step-three, .step-four {
	display: block;
	vertical-align: top;
	
	
	

}
/*Puts a seperation from how-it-works and the first picture (step-one)*/
.step-one {
margin-top: 30px;
	
}

.step-two {
	
	
}

.step-three {
	
}

.step-four {
	

}
/*Resets padding on left- fixes seperation from one another (padding)*/
.step-one,
.step-two {
	width: 100%;
	display: block;
	padding-left: 0px;
	padding-bottom:30px;
	
	
}

/*Resets padding on left- fixes seperation from one another (padding,margin)*/
.step-three,
.step-four {
	width: 100%;
	display: block;
	margin-top: 30px;
	padding-left: 0px;
	padding-bottom:30px;
	
	
	
}
}

/* The Benefits----------------------------------------*/
@media (min-width:240px) {
/*container for the entire benefits container*/
.benefits-back {
   background: url(images/exercise-with-personal-trainer-d.jpg) no-repeat center; 
   width: 100%;
   height: 400px;
   
	
}
/*container for the main header text*/
.benefitsh11 {
	color: #3d6784;
	padding-top: 20px;
	text-align: center; 
	font-size: 70px;
	width: 100%;
	font-weight: 500;
	text-shadow:-1px -1px 0 white,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
	
	}
/*sub-cotainer for all the benefits*/
	.the-benefits {
		width: 100%;
		
		margin-right:auto;
		margin-left: auto; 
		margin-top: 4%;
		text-align:center;
		
		
		
	 
	}
	
.benefits-h3 {
	color: #3d6784;
	font-weight: 700;	
	height: 22px;
	
}

	
.nasm,
.encouraging,
.goal-orienteded,
.nutrition-specialists {
	vertical-align: top;
	 width: 17%;
	display: inline-block;
	 	
	
}
}
@media screen and (max-width: 880px) {

.the-benefits {
		
		width: 100%;
		margin-right:auto;
		margin-left: auto; 
		margin-top: 4%;
		text-align:center;	
	 
}

.nasm,
.encouraging,
.goal-orienteded,
.nutrition-specialists {
	vertical-align: top;
	 width: 24%;
	display: inline-block;	 	
	
}

}
/*Benefits Mobile--------------------------------------*/
@media screen and (max-width: 500px) {

.benefits-back {
   background: url(images/exercise-with-personal-trainer.jpg) no-repeat center; 
   width: 100%;
   height: 650px;
	
}

.benefitsh11 {
	padding-top: 50px;
	color: #3d6784;
	text-align: center; 
	font-size: 60px;
	width: 100%;

  
	
	}
	
	.nasm,
.encouraging,
.goal-orienteded,
.nutrition-specialists {
	vertical-align: top;
	 width: 43%;
	display: inline-block;	 	
	
}
	
.benefits-h3 {
	
	
	
	font-size: 20px; 
	
}

}	

/*Reviews Container-What People are saying*/
@media screen and (min-width: 220px) {
/* Reviews Container */
.reviewsheader {
	padding-top: 10px;
	width: 100%;
	text-align: center;
	color: #3d6784;
	
}
/* Header text */
.reviewh1 {
	text-align: center;
}

/* Google Navigate link */
.button-inverse-button {
  color: #7fa0b7;
  font-size: 17px;
  margin-left: 20px;
  transition: 0.3s;
  cursor: pointer;
  text-decoration:none;
  width: 100%
  
}
/* Google Navigate link:hover */
.button-inverse-button:hover {
	text-decoration: underline;
	
}

/*Contains the stars fr the reviews*/
.star-header {
	color: #edb94b;
	margin-bottom: 8px;
}

/* Add an italic font style to all quotes */
q {font-style: italic;
}

/* Add a blue color to the author */
.author {
	color: #3d6784;
	font-weight: 800;
	}

}

/*Registration Footer-----------------------------------------*/
@media (min-width:240px) {
	

	
	.h1bottom {
	font-size: 2em;
	font-weight: 300;
	text-align: center;
	
	
	
}
.backgroundfooter {
background: url(images/yoga-personal-trainer.jpg) no-repeat center; 
   width: 100%;
   height: 450px;
}

.registerformft {
	position: relative;
	width: 100%;
	height: 100%;
	max-height: 300px;
	
	
	
}
.registerformft header {
  position: absolute;
  width: 50%;
  top: 60%;
  left: 25%;
  transform: translate(-0%, -43%);
  -ms-transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  color: black;
  font-size: 16px;
  border-radius: 10px;
  text-align: center;
  opacity: .9;
}

}


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

h1.h1bottom {
	font-size: 26px; 
	width: 84%;
	padding-left: 25px;
	
	
}

.registerformft header {
  position: absolute;
  width: 70%;
  top: 60%;
  left: 15%;
  transform: translate(-0%, -43%);
  -ms-transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  color: black;
  font-size: 16px;
  border-radius: 10px;
  text-align: center;
  opacity: .8;

  
 
}

.input-group {
	
	display: inline;
	text-align: center; 
	margin-left: 4px;
}
div.input-group input {
	display: inline-block;
	width: 170px;
	
	
	
}

form p {
	text-align: center; 
	color: black;
	text-decoration:none;
	font-size: 15px;
	
}

.loginfeature:hover, .term-privacy-link:hover {
	text-decoration: underline;
	
}

form .terms-privacy a {
	text-decoration: none;
	color: grey;
	
}


input[class="getstartedfooter"][value="GET STARTED"]
{
  background-color: #485C65;
  border-radius: 8px;
  color: white;
  padding: 8px 16px;
  text-align: center;
  margin: 8px 16px;
  opacity: 0.6;
  transition: 0.3s;
  cursor: pointer;
  font-size: 14px;
 
  

}

 input[value="GET STARTED"]:hover {
	opacity: 1;
	color: white;
	}
	
		div.input-group input[name="email"] { 
	 width: 200px;
}
	div.input-group input[placeholder="Zip Code"] { 
	 width: 100px;
}}
.txt-container-header {
	width: 100%;
	padding-top: 130px;
	text-align: center;
}

.main-header-txt-one {
	font-size: 100px; 
	color: #7fa0b7;
	text-shadow: 1px 1px white;
}

.main-header-txt-two {
		font-size: 30px; 
	color: white;
	text-shadow: 2px 2px #7fa0b7;
	margin-top: -100px; 
}

.main-header-txt-three {
		font-size: 40px; 
	color: #7fa0b7;
	text-shadow: 1px 1px black;
	margin-top:-10px;
	margin-bottom: 6px;
}

.phone-call-now {
	padding: 6px 15px; 
	background-color:#3d6784;
	border-radius: 8px; 
	font-size: 30px; 
	margin-top: -20px;

	
}

.phone-call-now a {
	text-decoration: none; 
	color: white; 
}

.slideshow-container {
	width: 80%;
	margin-left:auto;
	margin-right: auto;
}