body
{
margin:0;
padding:0;
font-family:'century gothic';
}

/*header*/
.nav {
position:fixed;
background-color:#b2daf3;
width:100%;
height:10%;
top:0;
left:0;
text-align:center;
}
.nav ul {
margin: 0 auto;
text-align:center;
}
.nav li {
padding-top:8px;
list-style: none;
display: inline-block;
}
.nav a {
text-decoration: none;
color: #444;
line-height: 100%;
}
.nav a:hover {
color: #fff;
text-decoration:underline;
}
.nav li img {
display:inline-block;
position:relative;
vertical-align:middle;
}
.nav li img:hover ~ mark {color:#fff;}
mark {background-color:#b2daf3;}
mark:hover {color:#fff;}

/*footer*/
.social {
position:absolute;
width:100%;
height:10%;
top:0;
left:0;
text-align:center;
}
.social ul {
padding:0;
margin: 0 auto;
text-align:center;
}
.social li {
padding:0;
margin:2%;
list-style: none;
display: inline-block;
}

@media screen and (max-width: 700px) {
mark {display:none;}
.nav li img {visibility:visible; text:hidden;}
.nav ul {text-align:center;}
.nav li {padding-top:5px;}
}

@media screen and (max-width: 422px) {
.nav ul {text-align:center; margin:0; padding:0;}
.nav li {padding-top:2px;}
}

@media screen and (max-width: 332px) {
.nav ul {text-align:center; margin:0; padding:0;}
}