#index_header{
	background:url(../images/index_header.jpg) right -90px #173c3c;
}

#index_header{
	width:100%;
	margin:0px;
	padding:0px;
	margin-top:50px;
	padding:30px 0px 60px 0px;
	z-index: 99;
}

#index_header h1, #index_header h3,
#ctc_header h1, #ctc_header p{
	padding-left: 10px;
	color:#000; /*theme*/
}
#index_header h1{
	font-size:60px;
}
#index_header h1 span{
	color:#fdb901;
}
#index_header h3{
	margin-top:0px;
	margin-bottom:30px;
	font-size:30px;
}
#index_header a{
	margin-right:5px;
}

#whyFlip{
	background:#efefef;
	padding:30px 0px 40px 0px;
	margin-top:340px;	
}
#whyFlip h3{
	margin-top:10px;
}
h2.hds{
	margin-bottom:40px;
	border-bottom:1px dashed #446e9b;
	padding-bottom:6px;
	color:#446e9b;
}
h2.hds span{
	padding-bottom:2px;
	border-bottom:4px solid #446e9b;
}

#whyFlip .col-md-4, #powerFlip .col-md-6{
	text-align: center;
}
#whyFlip img{
	/*width:30%;*/
}
#whyFlip .padtop{
	padding-top:20px;
}

#powerFlip{
	background:#ddd;
	padding:30px 0px 20px 0px;
}
#powerFlip h3{
	margin-top:5px;
}

.img_classprogress{
	height:400px;
	background-size: contain;
	background-image:url(../images/index_classprogress.jpg);
	background-repeat: no-repeat;		
}

.img_studoverview{
	height:400px;
	background-size: contain;
	background-image:url(../images/index_studentoverview.jpg);
	background-repeat: no-repeat;		
}



#student.modal-header{
	background-color: #36a51e;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;  
}

#calltoaction{
	background:#333333;
	padding:40px 0px;
	text-align: center;
	
}
#calltoaction .container{
	padding:0 200px;
}
#calltoaction h1, #calltoaction h2{
	margin:0;
	
}
#calltoaction h1{
	color:#ccc;
	border-bottom:1px solid #000;
	padding-bottom:15px;

}
#calltoaction h2{
	color:#fff;
	font-size:20px;
	border-top:1px solid #666;
	padding-top:20px;
}

#ctc_header{
	background:url(../images/ctc_header.jpg) center #35291b;
	padding:30px 0px 60px 0px;
	height: 269px;
	margin-top:50px;
}
 
 #ctc_header p{
 	font-weight: normal;
 	line-height:25px;
 	width:400px;
 }

#ctc{
	background:#efefef;
	padding:30px 0px 40px 0px;
	
}
#ctc .col-md-4, #ctc .col-md-12{
	text-align: center;
}
#ctc img{
	width:18%;
}

#ctc p{
	font-size:16px;
}




/* ---- for phones ---- */
@media screen and (max-width:480px) {
	#index_header{
		position: relative;
		background: url(../images/index_header_mob.jpg) no-repeat -580px -75px #173c3c;
	}
	#index_header a.btn{
		width:100%;
	}
	#index_header h1, #index_header h3{
		text-shadow: 2px 2px 2px #000000;
	}
	#index_header h1{
		font-size: 50px;
	}
	#index_header h3{
		font-size: 23px;
		display:block;
	}
	#index_header a{
		margin-bottom:10px;
	}
	h2.hds{
		text-align: center;
	}
	h2.hds span{
		border-bottom:none;
		margin-bottom:0px;

	}
	#whyFlip{
		padding-top:5px;
		margin-top:0px;
	}	
	#powerFlip{
		padding-top:5px;
	}
	.img_classprogress{
		height:240px;
		margin-bottom:10px;
	}
	.img_studoverview{
		height:240px;
	}
	#footer span{
		display:block;
	}


	#calltoaction h1{
		font-size:24px;
	}
	#calltoaction h2{
		font-size:16px;
		line-height:20px;
	}

	/* Used in the contact page*/
	#ctc_header{
		background:url(../images/ctc_header_mob.jpg) center #35291b;		
	}
	#ctc_header h1, #ctc_header p{
		text-shadow: 2px 2px 2px #000000;
	}
	#ctc_header p{
		width:200px;
	}
	#ctc iframe{
		display:none;
	}

}

/* ---- for phones, when flipped to landscape mode ---- */
@media (max-width: 640px){ 
	#index_header{
		position: relative;
		background: url(../images/index_header_mob.jpg) no-repeat -580px -75px #173c3c;
	}
	#index_header h1, #index_header h3{
		text-shadow: 2px 2px 2px #000000;
	}	
	#whyFlip{
		margin-top:0px;	
	}
	/* Used in the contact page*/
	#ctc_header{
		background-position:-850px 0px;		
	}
	#ctc iframe{
		width:500px;
	}
}

/* ---- for iPads ---- */
@media (min-width:768px) and (max-width: 1024px){

	#index_header{
		position: relative;
		background: url(../images/index_header_mob.jpg) no-repeat -250px -75px #173c3c;

	}
	#whyFlip{
		margin-top:0px;	
	}
	/* for ipad mini - to make "Expand your lessons" go to the next line */
	#whyFlip .adjust{
		clear:left;
	}

	/*To make the 2 screencaps at the bottom, form side by side in an ipad*/
	#powerFlip .img_classprogress, 
	#powerFlip .img_studoverview {
		height:300px;
	}

}
/* ---- for tablets ---- */
@media (min-width:1200px) and (max-width: 1366px){
	#index_header{
		background-position: -250px -90px;

	}


}

/* ---- to add smaller padding to the call to action when on mobile ---- */
@media (max-width: 1024px){
	#calltoaction .container{
		padding:0px 20px;
	}
}

/* ---- for google account ---- */
.separator{
	background:url(../images/grey_line.png) repeat-x center;
}
.separator span{
	background:#FFFFFF;
	text-align:center;
	margin:0 auto;
	width:50px;
	display: block;
}
.separator.mob{
	display:none;
}

.social_media{
	text-align: center;
}
.social_media h4{
	padding:0px 0px 5px 0px;
}
.social_media .btn-social{
	text-align: center;
	padding-left: 43px;
}
.social_media .col-sm-6{
	padding:10px 5px;
}