html {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
/*     background: #414141; */
    background: #F2E8D9;
/*     background: #FFF; */
    text-align: center;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
p {
	padding: 0;
	margin: 0;
}
#wrap {
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
}
#header {
    max-width: 1280px;
	height: 90px;
    margin: 0;
    padding: 10px 0 0 0;
}
#title {
	margin: 8px 0 0 0;
/* 	color: #6A9E92; */
/* 	color: #0F1626; */
	color: #414141;
    font: normal 50px 'Yesteryear', cursive;
}
.list {
	clear: both;
	margin: 0;
	padding: 0;
	font-size: 0;
}
.list li {
    display: inline-block;
	width: 33%;
    margin: 2px; 
}
.list li a {
    display: block;
    font: bold 32px 'Rubik', sans-serif;
    color: #FFF;
    text-decoration: none;
    padding: 0;
	line-height: 1.8;
	background: #056571;
}
.list li a:hover {
    color: #FFF;
    background: #FF6A5C;
}
.list li a:visited {
    background: #CCDFDB;
}
#footer {
	clear: both;
	padding: 30px 0 0 0;
	margin: 0 auto;	
	width: 90%;
	font: normal 13px 'Helvetica', sans-serif;
	color: #222;
}
#footer a {
	text-transform: capitalize;
	text-decoration: underline;
	color: #222;
}
#footer a:hover {
	text-decoration: none;
}



@media screen and (max-width: 1200px) {
	.list li {
		width: 49%;
	}
}

@media screen and (max-width: 900px) {
	.list li a {	
		font-size: 30px;
	}
}

@media screen and (max-width: 700px) {
	.list li a {	
		font-size: 25px;
	}	
	#footer {
		font-size: 11px;
	}
}

@media screen and (max-width: 699px) {
	.list li a {	
		font-size: 19px;
	}	
}

@media screen and (max-width: 500px) {
	.list li {
		width: 98%;
	}
	.list li a {	
		font-size: 30px;
	}		
}

@media screen and (max-width: 400px) {
	.list li a {	
		font-size: 28px;
	}	
}

@media screen and (max-width: 370px) {
	#header {
		height: 70px;
	}
	#title {	
		font-size: 40px;
	}
	.list li a {	
		font-size: 25px;
	}		
}