/* Save for Retirement Page (8/2015)
*/

/* Common container */
@media screen and (max-width: 940px) {
	.global-container { width:100%; }
	.content-container--onehundred { padding:0; width:80%; margin:0 auto;  }	
}




/* Header banner */
#vHeader.medium { position:relative; height:auto; background-color:#002b45; }

.sfr-banner { vertical-align:text-bottom; max-width:100%; }
.sfr-banner-title { position:absolute; top:35%; right:6%; color:#000; text-align:center; }
.sfr-banner-title-lower { font-size:2em; padding-top:10px; }
.sfr-banner-title-upper { width:410px; letter-spacing:1px; border-top:solid 1px #fff; padding:0 15px;}
.sfr-banner-title-upper span { display:block; background-color:#000; margin-top:-9px; padding:0 6px;}

@media screen and (max-width: 700px) {
	.sfr-banner { display:none; }
	
	.sfr-banner-title { position:relative; top:auto; right:auto; padding:40px 20px; }
	.sfr-banner-title-upper { margin:0 auto; }
	.sfr-banner-title-upper span { background-color:#002b45; }
}

@media screen and (max-width: 450px) {
	.sfr-banner-title-upper { width:auto; border:none; }
}



/* Form page */
@media screen and (max-width: 500px) {
	.toggle__switch label { 
		float:none; 
		max-width:100%; 
		display:block; 
		border-radius:0; 
		border:solid 1px #c4c4c4;
		border-bottom: none;
	}

	.toggle__switch label:last-of-type { border-bottom:solid 1px #c4c4c4; }

	.toggle__switch label:first-of-type,
	.toggle__switch label:last-of-type
		{ border-radius:0; }
}



/* Results page */
@media screen and (max-width: 770px) {
	.content-container--onehundred { width:90%;  }	
	.median-monthly-pointer { width:70%; }

	.median-monthly-value,
	.median-monthly-explanation
	{ height: 200px; }
}

@media screen and (max-width: 700px) {
	.content-container--onehundred { width:90%;  }	
	.median-monthly-pointer { width:60%; }

	.median-monthly-value,
	.median-monthly-explanation,
	.median-savings-value,
	.median-savings-explanation
	{ height: 200px; }

	.median-monthly-value { width:35%; }
	.median-monthly-explanation { width:65%; }

	.range-increment { float:none; width:100%; border-right:none; border-top:solid 1px #c4c4c4; }
}

@media screen and (max-width: 550px) {
	.median-monthly-pointer { width:100%; }

	.median-monthly-value,
	.median-monthly-explanation,
	.median-savings-value,
	.median-savings-explanation
	{ height: auto; float:none; width:100%; text-align:center; }

	.section-header--form { background:none; }
}