* {
    padding: 0;
    margin: 0;
}
html, body{
    width:100%;
    height:100%;
}
body{
    /*background-color: #b7d6cd;
    background-position:center;*/
    margin: 0 auto;
    background:#95c8ce;
}
.container{
    position:absolute;
    margin:auto;
    height:100%;
    width:100%;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
}
ul{
    width: 60%;
    position:relative;
    margin: 0 auto;
    height:60%;
    top: 20%;
    text-align:center;
    font-size: 3vw;
}
ul div{
    list-style: none;
    margin: 10% auto;
    height: 12%;
    position: relative;
}
ul div:nth-of-type(1){
    margin-top:0;
}
ul div:nth-of-type(4){
    margin-bottom:0;
}
a{
    text-decoration: none;
    color:black;
    cursor:pointer;
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
}
a:hover{
    color:whitesmoke;
}

.logo{
    width:10%;
    height:auto;
    position: absolute;
    margin: 2%;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.logo.full{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
.logo:hover{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}