@charset "UTF-8";
/* CSS Document
This style sheet will format our page for different size screens such as
-a desktop monitor
-a tablet or laptop
-a mobile phone  

VERY IMPORTANT!! - stack your different styles from biggest screen to smallest screen 
 */

/*================================================
styles for desktops larger than 1025 pixels wide 
================================================*/
@media screen and (min-width:1025px){
	body {
	background-color: rgba(152,27,29,0.00);
	}
	header {
	width: 980px;
	height: 200px;
	font-size: 3em;
	text-align: center;
	margin: 0 auto;
	background-color: rgba(229,229,229,0.00);
	padding-top: 40px;
	color: rgba(0,0,0,1.00);
	}
	#sectionContainer {
	display:table;
}
section {
	width:50%;
	float:left;
}
	.article {
		width:22.8%;
		height:auto;
		margin:0.5%;
		padding:0.5%;
		display:table-cell;
	}
	nav {
	display:none;	
	}
}


/*================================================
styles for laptops and tablets in landscape orientation
================================================*/
@media screen and (max-width:1024px) and (orientation:landscape){
	body {
	background-color: rgba(144,230,215,1.00);
	}
	header {
		width: 100%;
		height: 130px;
		font-size: 2em;
		background-color:rgba(249,147,149,1.00);
		padding-top:40px;
	}
	nav {
	display:none;	
	}
	}
.video iframe{
	width:100%;
	min-height:236px;
}
	section {
	display:table;
}
	.article {
		width:47.7%;
		height:auto;
		margin:0.5%;
		padding:0.5%;
		display:table-cell;/*conflicts with float left or float right 
	}
	#clearFloat {
		width:100%;
		clear:both;
		height:3px;
		background-color:rgba(0,0,0,1.00);
	}
}



/*================================================
styles for laptops and tablets in portrait orientation
================================================*/
@media screen and (max-width:768px) and (orientation:portrait){
	body {
		background-color:rgba(209,157,254,1.00)
	}
	nav {
	display:none;
	}
}


/*================================================
styles for mobile phones
================================================*/
@media screen and (max-width:480px){
	body {
	background-color: rgba(249,106,238,1.00);
	}
	header {
		width:97.8%;
		height:20px;
		text-align:center;
		background-color:rgba(158,155,156,1.00);
		position:fixed
		top:0;
		z-index:100;
		font-size:1.5em;

}
	nav{
	display:block;	
	position:relative;
	background-color:rgba(95,139,242,1.00);
	position:fixed;
	top:20px;
	z-index:100;
	width:100%;
	height:20px;
	

	
	}
	.btn{
		text-align::center;
		width:18%;
		margin:0.5%;
		padding:0.5%;
		float:left;
		height:auto;
		font-size:0.6em;
	}
	.article {
		position:relative;
		padding:0.5%;
		float:none;
		width:99%;
		z-index:90;
		padding-top:60px;
	}
	footer {
		
	}
	
}