@charset "UTF-8";
/* CSS Document
This style sheet will format our page for different size screens
-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:#5CA5CC;
	}
	#sectionContainer {
		display:table;
	}
	header {
		width: 980px;
		height: 160px;
		font-size: 4em;
		padding-top:40px;
		background-color:#5CA5CC;
	}
	section {
		width:50%;
		float:left;	
	}
	
	.article {
		width:22.8%;
		height:auto;
		display:table-cell;
		margin:0.5%;
		padding:0.5%;
		background-color:#92B1C2;
	}
	nav {
		display:none;	
	}
}


/*=================================================
styles for laptops and tablets in landscape orientation
====================================================*/
@media screen and (max-width:1024px) and (orientation:landscape){
	body {
		background-color:rgba(0,0,0,1.00);
	}
	nav {
		display:none;	
	}
	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(255,255,255,1.00);
	}
	.video iframe {
		min-height:350px;
	}
	header {
		width: 100%;
		height: 130px;
		font-size: 3em;
		padding-top:20px;
		background-color:rgba(255,255,255,1.00);

}
}



/*=================================================
styles for laptops and tablets in portrait orientation
====================================================*/
@media screen and (min-width:769px) and (orientation:portrait){
	body {
		background-color: rgba(222,36,40,1.00);
	}
	nav {
		display:none;	
	}
	header {
		width: 100%;
		height: 130px;
		font-size: 2em;
		padding-top:20px;
		background-color:rgba(206,255,0,1.00);
	}
}



/*=================================================
styles for mobile phone
====================================================*/
@media screen and (max-width:768px){
	body {
		background-color:rgba(142,45,119,1.00);
	}
	header{
		width:97.8%;
		padding:1%;
		height:20px;
		text-align:center;
		background-color:rgba(255,218,0,1.00);
		position:fixed;
		top:0;
		z-index:100;
		font-size:1.5em;	
	}
	nav {
		display:block;	
		background-color:rgba(141,177,119,1.00);
		position:fixed;
		top:20px;
		z-index:100;
		width:100%;
		height:40px;
	}
	.btn {
		text-align:center;
		width:18%;
		margin:0.5%;
		padding:0.5%;
		height:auto;
		float:left;
		font-size:0.9em;	
	}
	.article {
		position:relative;
		padding:1%;
		float:none;
		width:98%;
		z-index:90;
		padding-top:60px;
	}
	footer{
		height:300px;	
	}
}