@media screen and (max-width: 960px) {
    section#chalkboard .left {
        float:none;
        width:100%;
        text-align:center;
    }

    section#chalkboard .right {
        float:none;
        width:100%;
        padding:35px 7% 20px 7%;
    }

}

@media screen and (max-width: 660px) {
    header {
        text-align:center;
    }
    .logo {
        float:none;
        width:100%;
        display:inline-block;
    }
    .social {
        float:none;
        padding-top:10px;
        width:100%;
        text-align:center;
    }
        .social a {
            margin:0 7%;
            display:inline-block;
            width:51px;
            height:51px;
            position:relative;
            float:none;
        }
    section#contact .by {
        margin-left:7%;
    }
    section#contact .by div {
        width:100%;
        text-align:left;
    }
    .email {
        margin:10px 0 0 0;
    }
}

@media screen and (max-width: 547px) {
    section#about .left {
        float:none;
        width:100%;
        padding:0 7%;
    }
    section#about .right {
        float:none;
        width:100%;
        padding:0 7%;
    }
    section#contact .by div {
        font-size:1.4em;
    }
}