* {
    box-sizing:border-box;
}

body {
    margin:0 auto;
    font-size:1.2rem;
    padding: 0 20px;
    background-color:#F2F1F4;
    color:grey;
    font-family: 'Open Sans', sans-serif;
    line-height:30px;
}

header {
    text-align: center;
    font-family: 'PT Sans Narrow', sans-serif;
}

nav {
    font-size:1.6rem;
    background-color:#30A894;
}

nav > a {
    display:block;
    padding: 40px 0;
    transition: all .5s ease;
    text-decoration:none;
    color: #fff;
}

nav > a:hover {
    background-color:#13433b;
}

nav > a {
    color: #97d3c9;
}


section img {
    max-width:100%;
}

h1, h2, h3 {
    color:#30A894;
    text-transform:uppercase;
    font-family: 'PT Sans Narrow', sans-serif;
}

h1 {
    font-size : 3rem;
}

h2 {
    font-size : 2.2rem;
}

hr {
    border-color:#30A894;
}

aside {
    display:none;
    background-color:#B8DCB1;
    padding:20px;
}

footer {
    padding:20px;
    margin: 0 auto;
    text-align:center;
}

footer a {
    text-decoration:none;
    color: #30A894;
}

.footer-img {
    max-width:100px;
}



@media screen and (min-width: 768px) {
    aside {
        display:block;
}
    section {
        padding:0 20px;
}
}

@media screen and (min-width: 1025px) {
    body {
        width:80%;
    }
    nav > a {
        display:inline-block;
        width:33.33%;
    }
    section {
        width:70%;
        display:inline-block;
        padding-right:25px;
}
    aside {
        width:30%;
        display:inline-block;
        vertical-align:top;
}
}