@charset "UTF-8";
/* CSS Document 
This CSS document is used to create different styles for different devices.
-desktop computer
-laptop and tablet
-mobile phone

VERY IMPORTANT!- create the style blocks from largest screen to smallest screen. 
*/

/* ========================================================================
Styles for desktop computers with screens larger than 1024 pixels wide.
=========================================================================== */
@media screen and (min-width:1025px){
	body {
	background-color:rgba(37,108,146,1.00);	
	}
	header {
	text-align:center;
	width:100%;
	height:40px;
	position:fixed;
	top:0;
	z-index:100;	
	font-family: Futured;
	font-size: 42px;
	background-color:rgba(255,255,255,1.00);
	}
	.article {
	width:22.5%;
	border:1px rgba(197,29,114,1.00);
	float:left;
	margin:0.5%;
	padding:0.5%;
	margin-top: 50px;
	}
	nav {
		display:none;
	}
	.video iframe{
		height-auto:auto;
		min-height:300px;
	}
}


/* ========================================================================
Styles for laptops and tablets with with maximum screen widths of 1024 pixels in landscape orientation. 
=========================================================================== */
@media screen and (max-width:1024px) and (orientation:landscape){
		body {
	background-color:rgba(165,78,79,1.00)	
	}
	header {
	text-align:center;
	width:100%;
	height:40px;
	position:fixed;
	top:0;
	z-index:100;	
	font-family: Futured;
	font-size: 42px;
	background-color:rgba(255,255,255,1.00);	
	}
	.article {
	width:47.5%;
	border:1px rgba(197,29,114,1.00);
	float:left;
	margin:0.5%;
	padding:0.5%;
	margin-top: 20px;
	}
	#clearFloat {
	clear:both;
	width:100%;
	height:3px;
	background-color:rgba(0,0,0,1.00);	
	}
	.video iframe{
		height-auto:auto;
		min-height:200px;
	}
nav {
		display:none;
	}
}


/* ========================================================================
Styles for tablets with a maximum screen width of 1024 pixels in portrait orientation. 
=========================================================================== */
@media screen and (max-width:1024px) and (orientation:portrait){
		body {
	background-color:rgba(23,119,38,1.00)
	}
	header {
	text-align:center;
	width:100%;
	height:40px;
	position:fixed;
	top:0;
	z-index:100;	
	font-family: Futured;
	font-size: 36px;
	background-color:rgba(255,255,255,1.00);	
	}
	article {
	width:47.5%;
	border:1px rgba(197,29,114,1.00);
	float:left;
	margin:0.5%;
	padding:0.5%;
	margin-top: 20px;
	}
	#clearFloat {
	clear:both;
	width:100%;
	height:3px;
	background-color:rgba(0,0,0,1.00);	
	.video iframe{
		height-auto:auto;
		min-height:200px;
	}
		nav {
		display:none;
	}
}


/* ========================================================================
Styles for mobile phones.
=========================================================================== */
@media screen and (max-width:480px) and (orientation:portrait){
		body {
	background-color:rgba(223,199,29,1.00)
	}
	header {
	text-align:center;
	width:100%;
	height:40px;
	position:fixed;
	top:0;
	z-index:100;	
	font-family: Futured;
	font-size: 36px;
	background-color:rgba(255,255,255,1.00);	
	}
	.article {
	width:96.5%;
	border:1px rgba(197,29,114,1.00);
	float:left;
	margin:0.5%;
	padding:70px 1.5% 1.5% 1.5%;
	margin-top: 20px;
	}
	nav {
		display:block;
		width:100%;
		position:fixed;
		top:40px;
		left:0;
		x-index:100;
		background-color:rgba(255,149,41,.80);
		height:40px;
	}
	.btn {
		width:25%;
		height:20px;
		text-align:center;
		float:left;	
	}
	.btn a:link, .btn a:visited{
		color:rgba(32,40,255,1.00);
		}
		.btn a:hover, .btn a:active{
		color:rgba(255,255,255,1.00);
		}
}