@charset "utf-8";
/* CSS Document */

/* Reset margin, padding. */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}

/* Layout */

html {
	-webkit-text-size-adjust: 100%; 
}

body {
	font-family: Verdana, Lucida, sans-serif;
	font-size: 16px;
	background-color: #fffbec;
	margin: 0 auto;
}

header {
	margin: 0 auto;
}

img {
	width: 100%;
	display: block;
}

nav {
	background-color: #fffbec;
	text-align: center;
	margin: 1% 6% 0 6%;
}

nav ul {
	list-style-type: none;
	display: inline-block;
}

nav ul li {
	float: left;
	background-color: #e6c5ab;
	padding: 5px;
	margin: 2px 2px;
	letter-spacing: 1px;
}

nav ul li:hover {
	color: #fffbec;
	background-color: #330414;
}

nav ul a li {
	color: #330414;
	text-align: center;
	text-decoration: none;
}

main {
	clear: both;
	background-color: #fffbec;
	margin: 0 6%;
	padding: 3%;
}

main img {
	margin: 0 auto;
	max-width: 500px;
	width: 100%;

}

footer {
	color: #333;
	margin: 0 6%;
	font-size: 0.8em;
	text-align: center;
	line-height: 1.5em;
}

/* Media max-width 479px */

@media (max-width: 479px) {

	body {
		max-width: 479px;
	}

	nav ul li {
		font-size: 1em;
	}
	
}

/* Media mix width 480px and max-width 767px */

@media (min-width: 480px) and (max-width: 767px) {
	
	body {
		max-width: 767px;
	}

	nav ul li {
		font-size: 1.1em;
		width: 120px;
	}

}

/* Media mix width 768px and max-width 999px */

@media (min-width: 768px) and (max-width: 999px){
	
		
	body {
		max-width: 999px;
	}

	nav ul li {
		font-size: 1.2em;
		width: 180px;
	}

}

/* Media mix width 1000px */

@media (min-width: 1000px){
	
	body {
		max-width: 1000px;
	}

	nav ul li {
		font-size: 1.2em;
		width: 180px;
	}
	
}