@import url(https://fonts.googleapis.com/css?family=Oswald:700);


/* === MEDIA QUERIES === */
/* === MOBILE FIRST === */
img, object, embed, video {
	max-width: 100%;
}
.ie6 img {
	width:100%;
}
body {
	background: #000 ;
}

h1, h2, h3, h4, h5, nav, p, footer {
	font-family: 'Oswald', sans-serif;
	font-weight:normal;
}
nav {
	margin:20px;
	text-align:right;
	
}

p {
	text-align:center;
}


#wrapper {
	background: #ffbd38;
	width:100%;
	margin:0 auto;
	padding:0px;
	height:100%;
}

#img {
	display:block;
	max-width:100%;
	width:100%;
	position:relative;
	margin-top:0;
	padding:10px;
}

header, nav, section, article, aside {
	margin-bottom:10px;
}

h1 {
	font-size: 24px;
	text-shadow:2px 2px 2px rgba(255,255,255,1);
	color:#000;
	margin-top:30px;
	margin-bottom:5px;
}

h2 {
	color:#333;
	font-size:36px;
	margin:30px;
}

h3 {
	color:#333;
	font-size:24px;
	margin:60px;
}

h4 {
	color: #333;
	font-size: 20px;
	margin:40px;
}


h5 {
	color:#333;
		font-size: 24px;
	margin:30px;
}


footer {
	clear:none;
	color:#fff;
	font-size: 14px;
	padding-top:150px;
	padding-bottom:20px;
	font-weight:lighter;
	width:100%;
	bottom:0;
}

footer img {
		margin-top:20px;
		margin-right:20px;
	}
	




	

/* === TABLET VIEW === */
/*481px to 768px. Inherits styles from: MObile Layout.*/

@media only screen and (min-width:481px) {
	#wrapper {
		width:90%;
	}
	h1 {
		font-size: 28px;
		margin-top:30px;
		margin-bottom:15px;
		text-shadow:2px 2px 2px rgba(255,255,255,1);
	color:#000;
	}
	


	nav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}


footer {
	clear:none;
	color:#fff;
	font-size: 14px;
	padding-top:150px;
	padding-bottom:20px;
	font-weight:lighter;
}


footer img {
		margin-top:20px;
		margin-right:20px;
	}

}

/* === DESKTOP VIEW === */
/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
	#wrapper {
		width:80%;
		max-width:1232px;
	}
	h1 {
		font-size: 36px;
		margin-top:50px;
		margin-bottom:10px;
		text-shadow:2px 2px 2px rgba(255,255,255,1);
	color:#000;

	}
	#div {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
	footer {
	clear:none;
	color:#fff;
	font-size: 14px;
	padding-top:150px;
	padding-bottom:20px;
	font-weight:lighter;
}

	
	footer img {
		margin-top:20px;
		margin-right:20px;
	}
	
	nav {
	clear: both;
	float: left;
	width: 100%;
	display: block;
	margin-bottom:60px;
	background:#ffaa00;
	padding:10px;
}


/* === GALLERY ===*/

.hovergallery img{
	max-width:100%;
	margin-right:1px;
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8); 
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;

}

.hovergallery img:hover{

-webkit-transform:scale(1.1); 
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px white; 
-webkit-box-shadow:0px 0px 30px white;
-moz-box-shadow:0px 0px 30px white;
opacity: 1;
}




*|*:-moz-any-link { text-decoration:none!important; }
*|*:-webkit-any-link { text-decoration:none!important; }
*|*:-ms-any-link { text-decoration:none!important; }

}



/*=== NAV INFO AND MEDIA QUERIES ===*/

nav a:link {
	font-weight:bold;
	color:#000;
	text-decoration:none;
	transition: all 1s;
	font-weight:bold;
	
}


nav a:hover {
	color: #f00;
	
}

nav a:active {
	color:#F00;

}

nav a:visited {
	color:#fff;

}

nav li {
	display:inline;
	margin-right:50px;
	font-weight:bold;
	font-size:16px;
	color:#fff;
	
}


@media only screen and (max-width:481px) {
	nav li {
	margin:0;
	background:#ffaa00;
	color:#F00;
	display:block;
	margin-bottom:3px;
	font-weight:bold;
	font-size:16px;
}
nav a {
	display:block;
	padding:10px;
	text-align:center;
	color:#F00;
}



}

@media only screen and (max-width:769px) {
	nav li {
	margin:0;
	background:#ffaa00;
	color:#F00;
	display:block;
	margin-bottom:3px;
	font-weight:bold;
	font-size:16px;
	
}
nav a {
	display:block;
	padding:10px;
	text-align:center;
	color:#F00;
}



}

body { text-align: center; } a { text-decoration: none; color:#0CC; } img { margin: 0px;
margin-bottom:2px; }