@charset "UTF-8";
/* CSS Document */
 	* {/*The * symbol is a wild card which means all the rules below apply to EVERYTHING!*/
	box-sizing: border-box;/*DO NOT CHANGE THIS!!!*/
	margin: 0;/*DO NOT CHANGE THIS!!!*/
	padding: 0;/*DO NOT CHANGE THIS!!!*/
	position: relative;/*DO NOT CHANGE THIS!!!*/
	/*DO NOT ADD ANY MORE TO THIS BLOCK!!!*/
}
body {
	width: 100%;
	height: auto;
	font-family: "open-sans";
	font-size: 100%;
	background-color: #000000;/*adjust this to your desired value*/
	color: #FFFFFF;/*adjust this to your desired value*/
	z-index: 0;
}
/*-----top bar and buttons-----*/
nav, .btn {
	height: 30px;/*adjust this to your desired height depending upon your .btnText font-size*/
}
nav {
	width: 100%;
	position: fixed;/*"fixed" will stick to top, "absolute" will allow bar to scroll vertically with page*/
	top: 0;
	left: 0;
	z-index: 400;
	background-color: #000000;
	display: flex;
	align-content: center;
	justify-content: center;/* center, flex-start, flex-end, space-between */
	flex-direction: row;
	flex-wrap: nowrap;
}
.btn {
	width: 100px;/*adjust this to your desired width*/
	text-align: center;
	cursor: pointer;
	margin: 0 25px;/*adjust this to your desired margins - 1st number is for top and bottom, 2nd number is for left and right*/
	display: flex;
	align-content: center;
	flex-direction: row;
	flex-wrap: nowrap;
	z-index: 500;
}
.btnText {
	margin: auto;/*REQUIRED to vertically and horizontally center*/
	color:#FDF8F8;/*adjust this to your desired text color*/
	z-index: 501;
}
/*----header styles------*/
header, #allArticles {
	width: 100%;/*This is changed by javascript*/
	margin: auto;
}
header {
	display: flex;
	align-content: center;
	justify-content: center;/* flex-start, flex-end, space-between */
	height: 650px;/*adjust this to your desired header height*/
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;/*REQUIRED to completely cover the entire width of headers*/
	margin-bottom: 10px;/*To separate header from main text section */
	margin-top: 30px;
	z-index: 201;
}
.headerTitle {
	text-align: center;
	color: #010101;/*Text color*/
	font-size: 3em;
	font-weight: bold;
	margin: auto;/*REQUIRED to vertically and horizontally center*/
	z-index: 202;
}
#header1 {
	background-image: url(../images//bg1.jpg);
}
#header2 {
	background-image: url(../images//bg2.jpg);
}
#header3 {
	background-image: url(../images//bg3.jpg);
}
#header4 {
	background-image: url(../images//bg4.jpg);
}
#header5 {
	background-image: url(../images//bg5.jpg);
}
/*----Main content styles -------*/
#allArticles {
	width: 100%;
	height: auto;
}
#allArticles {
	margin: 0 auto;
	z-index: 100;
}
#allArticlesWrapper {
	z-index: 200;
}
article {
	float: left;
	z-index: 300;
	height: auto;
}
section h1 {
	text-align: center;
	font-size: 2em;
}
section p {
	margin-bottom: 1em;
	text-indent: 0em;
}
.floatLeft {
	float: left;
}
.floatRight {
		float:right
}
figure {
	height: auto;
	margin: 10px;
	padding: 5px;
	text-align: center;
	z-index: 700
}
figure img {
	width: 100%;
	height: auto;
}
figure p, figcaption p {
	text-indent: 0;
}
section {
	margin: 0 auto;/* centers the text content */
	z-index: 201;
}
/*---for any text link----*/
a {/*allows fora timed transition for text link hover effect*/
	-webkit-transition: all 0.5s linear 0s;
	-o-transition: all 0.5s linear 0s;
	transition: all 0.5s linear 0s;
}	
a:link, a:visited {
	color: #090;
}
a:hover, a:active {
	color: #f00;
}
.clearFloat {
	clear: both;
	width: 100%;
	height: 0;
}
/*-----Footer styles---------*/
footer {
	height: 40px;
	width: 100%;
	font-size: 0.8em;
	display: flex;
	align-content: center;
	justify-content: flex-end;/* center, flex-start, flex-end */
	flex-direction: row;
	flex-wrap: nowrap; 
}
#footerText {
	margin: auto 0;
	padding: 5px;
}
/*------Styles for mobile phones--------*/
@media screen and (max-width:667px) {
	nav, .btn {
		height: 0;
		display: none;
	}
	#allArticles, #allArticlesWrapper, article {
		height: auto;
		width: 100%;
		overflow: visible;
	}
	#allArticles {
		padding: 0px;
	}
	article {
		margin-bottom: 5px;
		float: none;
	}
	article figure, article img {
		float: none;
		margin: 5px auto;
	}
	section {
		padding: 5px;
	}
}