@media screen and (min-width: 480px) {
    /***********************
    TWO COLUMN LAYOUT
    ***********************/
    #primary {
        width: 50%;
        float: left;
    }

    #secondary {
        width: 40%;
        float: right;
    }

    .box{
        width: 48%;
        margin: 1%;
    }

    .project1 img:hover {
        position: relative;
        top: -15px;
    }

    /***********************
    PAGE: ABOUT
    ***********************/
    .profile-photo {
        float: left;
        margin: 0 5% 80px 0;
    }

    .skills{

        /* margin: 0 5% 80px 0; */
        width: 70%;
        float: right;
    }
    .skills ul{
        float: left;
        width: 5%;
        /* margin-right: 27%; */

    }



    .t {
        float: right;
        width: 5%;

    }

}


@media screen and (min-width: 660px) {
    /***********************
    HEADER
    ***********************/
    nav {
        background: none;
        float: right;
        font-size: 1.125em;
        margin-right: 5%;
        text-align: right;
        width: 45%;
    }

    #logo {
        float: left;
        margin-left: 5%;
        text-align: left;
        width: 45%;
    }

    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 0.825em;
        margin-bottom: 20px;
    }

    header {
        border-bottom: 7px solid #17506b;
        margin-bottom: 60px;
    }

}

@media screen and (min-width: 800px) {
    .box{
        /* width: 31.33%; */
        width: 46%;

    }
}