@charset "utf-8";
/* CSS Document */
#main_top_container{
	height:300px;
	width:100vw;
	display:block;
	background:url('../img/howitworks_banner_bg.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}

.hiw-section-grey{
	background:#f4f4f4;
	border-top:1px solid #cfd5e1;
	border-bottom:1px solid #cfd5e1;
}

.hiw-section-grey:first-child{
	border-bottom:none;	
}

.hiw-last-section{
	margin-bottom:100px;	
}

#hiw .text-section{
	width:75%;	
}

#hiw .section-grey-heading{
	margin-bottom:55px;	
}

.hiw-columns{
	width:48%;
	display:inline-block;
	vertical-align:middle;
}

.step-4-left-column{
	width:65%;	
	display:inline-block;
	vertical-align:middle;
	margin-right:55px;
}

.step-4-right-column{
	width:25%;
	display:inline-block;
	vertical-align:middle;
}

.hiw-columns-margin{
	margin-top:35px;	
}

.hiw-headings{
	font-size:25px;
	font-weight:bold;
	margin-bottom:15px;
	text-align:left;
}

.step-1-heading{
	color:#f26d38;	
}

.step-2-heading{
	color:#218f48;	
}

.step-3-heading{
	color:#21acd8;	
}

.step-4-heading{
	color:#b5325e;	
}

.mockup-container{
	width:100%;
	height:100%;
	vertical-align:middle;
}

.report-mockups{
	width:100%;
	height:376px;
	background:url('../img/report_mockup.png');
	background-repeat:no-repeat;
	background-size:contain;
	margin-left:25px;
	background-position:center;
}

.wlp-mockup{
	width:100%;
	height:325px;
	background:url('../img/wlp_mockup.png');
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}

.step-4-kids{
	width:100%;
	height:380px;
	background:url('../img/step_4_image.png');
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}

/* Personalised learning dot points */
.hiw-columns span{
	font-weight:bold;	
}

ul.no_bullet{
	list-style-type:none;
	padding:0;
	margin:0 0 0 25px;
	line-height:35px;
}


.subject-line li{
	box-sizing:border-box;
	padding-left:15px;
	padding-right:15px;
	margin:0 0 15px 0;
}

.subject-line li:last-child{
	margin-bottom:0;	
}

.green-line{
	border-left: 5px solid #218f48;
}

.blue-line{
	border-left:5px solid #21acd8;	
}

/* You'll never have to guess - parallax section */
.never-guess{
	height:350px;
	background:url('../img/never_guess_banner_bg.jpg');
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
	color:#FFF;
	font-size:45px;	
	padding:0;
	display:inline-block;
	width:100%;
}

.never-guess .never-guess-section{
	height:100%;
	width:100%;
	text-align:center;
	vertical-align:middle;
	padding:0;
	display:table;
	text-align:center;
	margin:0 auto;
	padding:0;
}

.ngt{
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	display:table-cell;
	font-size:40px;
	vertical-align:middle; 
	text-align:center;
	float:none;
	padding:0 20px 0 20px;
}

#home_logo{
	width:300px;
	height:50px;
	background-image:url('../img/aplus_america_logo_white_med.png');
	background-repeat:no-repeat;
	background-size:contain;
	margin:80px 0 0 0;
	display:inline-block;
	z-index:99;
	position:relative;
}

#logo_bg_holder{
	height:80px;
	width:30%;
	display:block;
	position:absolute;
	top:62px;
	left:0;
	background-color:#FFF;
	z-index:0;
}

/** Overrides common.css styles **/
.section_div{
	margin:0 auto;
	height:auto;
	width:80%;
	display:block;
	clear:both;
	padding:0;
	overflow:hidden;
	min-width:320px;
}

.section_container{
	box-sizing:border-box;
	padding-top:100px;
	padding-bottom:100px;
	font-size:21px;
}

.section-container-small{
	box-sizing:border-box;
	padding-top:50px;
	padding-bottom:50px;
	font-size:21px;
}

.section-white-heading{
	color:#FFF;
	font-weight:normal;
	font-size:45px;
	text-align:center;
}

.section-grey-heading{
	color:#565656;
	font-size:45px;
	text-align:center;
}

.white-bg-section{
	background:#FFF;	
}

.text-section{
	width:60%;
	margin:0 auto;
	text-align:justify;
	line-height:45px;
	font-size:21px;
	color:#565656;
}

.text-section p:last-child{
	margin-bottom:0;
	padding-bottom:0;
}

.home_logo_howitworks:hover{
	cursor:pointer;
}

/** Media Queries **/
@media screen and (max-width:1500px){
#hiw .text-section{
	width:100%;	
}
.step-4-kids{
	height:280px;	
}

.never-guess{
	padding-top:10%;	
}	
}

@media screen and (max-width:1200px){
#home_logo{
	width:150px;
	height:50px;
	margin-top:85px;
}


#logo_bg_holder{
	height:55px;
	width:250px;
	top:65px;
}
}

@media screen and (max-width:1090px){
.quote-text-container{
	width:85%;	
}

.hiw-columns, .step-4-left-column, .step-4-right-column{
	width:100%;	
}

.mockup-container{
	
}

.report-mockups{
	margin: 25px auto 0;
}

.wlp-mockup{
	margin:0 auto 25px;	
}

.step-4-kids{
	margin:25px auto 0;	
}

.never-guess{
    background-attachment:inherit;	
	height:270px;
	font-size:40px;	
}


.never-guess .never-guess-section{
	height:100%;
	width:100%;
	text-align:center;
	vertical-align:middle;
	padding:0;
	display:table;
	text-align:center;
	margin:0 auto;
	padding:0;
}


.ngt{
	font-size:30px;
}
}

@media screen and (max-width:850px){
#main_top_container{
	height:200px;	
}	

#hiw .text-section{
	width:95%;
	font-size:20px;
}

.hiw-last-section{
	margin-bottom:0;	
}
}

@media screen and (max-width:800px){
#logo_bg_holder{
	display:none;
}


#home_logo{
	display:none;
}
}

@media screen and (max-width:720px){
#main_top_container{
	height:150px;	
}	

#hiw .text-section{
	font-size:18px;
	line-height:30px;
	text-align:left;
}

.report-mockups, .wlp-mockup, .step-4-kids{
	height:200px;	
}

.never-guess{
	height:200px;
	font-size:30px;
}

.never-guess .never-guess-section{
	height:100%;
	width:100%;
	text-align:center;
	vertical-align:middle;
	padding:0;
	display:table;
	text-align:center;
	margin:0 auto;
	padding:0;
}


.ngt{
	font-size:20px;
}
}

@media screen and (max-width:425px){
.never-guess{
	font-size:25px;
}

.ngt{
	padding:0 10px 0 10px;
	font-size:15px;
}
}