@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
body {
	background-color: #000000;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	color: white;
	}
	
a {
	color: #DFD8AC;
	}

#container {
	width: 1200px;
	margin: auto;
	}
	
header {
	
	}
	
h1 {
	font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 36px;
	color: #E0B400;
	margin-top: 20px;
	line-height: 48px;
	}
	
h2 {
	font-family: "Open Sans Condensed",Helvetica, Arial, sans-serif;
	font-size: 28px;
	color: #E0B400;
	margin-top: 20px;
	line-height: 34px;
	}	
main {
	width: 900px;
	font-size: 18px;
	line-height: 22px;	
	
	}
	
#photo {
	width: 300px;
	height: 464px;
	background-image:url(../images/ua-cover.png);
	background-size:cover;
	border: 1px white soid;
	float: left;
	}
	
#summary-bio {
	background-color: #535353;
	margin: auto;
	width: 85%;
	padding: 4px 10px 10px 10px;
	border-radius: 8px;
	}
	
	footer {
	
	}
/* --------------------------------------------
   < 1200px viewport
-------------------------------------------- */			
				
@media (max-width: 1200px) {

	#container { width: 960px;
	 }
		main { width: 700px; }
	
}
	
/* --------------------------------------------
  iPad in landscape
-------------------------------------------- */

/* 	
	TO PREVIEW ON THE DESKTOP, REPLACE THE QUERY WITH THE FOLLOW:
	@media (max-width: 1024px) {  } 
*/
	
@media (max-device-width: 1024px) and (orientation: landscape) {

	#container { width: 868px; }
		main { width: 740px; }

}
/* --------------------------------------------
  iPad in portrait
-------------------------------------------- */

/* 	
	TO PREVIEW ON THE DESKTOP, REPLACE THE QUERY WITH THE FOLLOW:
	@media (max-width: 768px) {  } 
*/

@media (max-device-width: 768px) and (orientation: portrait) {

	#container { 
		width: 755px; 
	}
	main { 
		width: 755px; 
		}
		
	h1 {
		font-size: 44px;
		line-height: 52px;
		}
		
		h2 {
		font-size: 38px;
		line-height: 44px;
			}

}

/* --------------------------------------------
  moile
-------------------------------------------- */

@media (max-width: 600px) {

	#container { float: none; width: inherit; }
	#main { font-size: 24px; }
		
	h1 {
		font-size: 52px;
		text-align: center;
		line-height: 62px;
		}
		
	h2 {
		font-size: 38px;
		line-height: 44px;
			}
			
#photo {
			display: none;
			}
}

/* --------------------------------------------
  iphone 5
-------------------------------------------- */

@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2) {

	#container { float: none; width: inherit; }
	#main { font-size: 24px; }
		
	h1 {
		font-size: 52px;
		text-align: center;
		line-height: 62px;
		}
		
	h2 {
		font-size: 38px;
		line-height: 44px;
			}
			
#photo {
			display: none;
			}
}