/*
	Responsive Stylesheet for Biom'Up SBSS
	Developed by Nile Livingston
	January 2016

	For general styles, please see style.css
*/

/*
	Login page
*/

@media screen and (max-width: 705px) {
	#footer-description, #footer-nav {
		float: none;
		margin: 0 auto;
		padding: 2% 0 0 0 ;
		/*width: 90%;*/
	}
	#footer-nav {
		text-align: center;
	}
}

@media screen and (max-width: 450px) {
	#form-area {
		width: 100%;
	}

	#form-area #login, #form-area #forgot-submit {
		float: none;
		text-align: center;
		width: 50%;
	}
}

@media screen and (max-width: 320px) {
	#form-area h1 {
		font-size: 1.6em;
	}
}


/*
	Footer
*/

@media screen and (max-width: 1170px) {
	.logo-wrap {width:20%;}
	#footer-nav,
	#footer-nav-alt {width:30%;}
	#footer-description {width:70%;}
	#footer-description-alt {width:50%;}
}

@media screen and (max-width: 960px) {
	.logo-wrap {width:20%;}
	.logo-wrap img {width:100px;}
	#footer-nav,
	#footer-nav-alt {width:30%;font-size:13px;}
	#footer-description {width:70%;}
	#footer-description-alt {width:50%;}
}





/*
	Start page
*/

@media screen and (max-width: 700px) {
	#start-page-description {
		width: 90%;
	}
	.we-top-text h2 {
    	font-size: 2rem;
	}
	.we-top-text p {
    	font-size: 1.3rem;
	}
}

@media screen and (max-width: 450px) {
	#start-page-headline {
		font-size: 1.5em;
		width: 90%;
	}
	#start-page-description {
		font-size: 0.9em;
	}
}

@media screen and (max-width: 360px) {
	#start-page-hero {
		height: 40%;
	}
}


/*
	Video page
*/

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

	.container-60 {
		width: 90%;
	}

	#sbss-video {
		height: 265px;
	}
}

@media screen and (max-width: 360px) {
	#sbss-video {
		height: 130px;
	}
}




/*
	Testing Page
*/


@media screen and (max-width: 1170px) {
	.question-wrap {
		padding: 2% 0;
	}

}

@media screen and (max-width: 960px) {
	.question-wrap {
		padding: 2% 0%;
	}
	.test-form input[type=submit] {
		margin-left: 8px;
	}
	#hero-wrap {
		height: initial;
	}
}


/*
	Results Page
*/

@media screen and (max-width: 1170px) {
	.results-table {width:80%;}
	.results-buttons a {
    padding: 8px 10px;
    background-color: #9cbb12;
    color: #FFF;
	}
}

@media screen and (max-width: 960px) {
	.results-table {width:80%;}
	.results-buttons a {
	}
	#hero-wrap {
    	background-position: right;
	}
}


@media screen and (max-width: 760px) {
	.results-table {width:80%;}
	.results-buttons a {
    display:block;
	margin-bottom: 8px;
    text-align: center;
	}
	#footer-description {
    width: 100%;
	}
	.footer-logo {
    float: initial;
	}
	.we-wrap {
    	max-width: 85%;
	}
	#hero-wrap {
		padding: 4em 0;
	}
}