@media screen and (max-width: 479px) {
    /**************************
    Page: Portfolio
    ***************************/
    
    #gallery li:nth-child(4n-1) {
        clear: left;
    }
}

@media screen and (min-width: 480px) {
    
    /*********************************
    Page: Contact: TWO COLUMN LAYOUT
    **********************************/
    
    #primary {
        width: 50%;
        float: left;
    }
    
    #secondary {
        width: 40%;
        float: right;
		border-left: 1px #bbb solid;
		padding-left: 20px;
    }
    
    /**************************
    Page: Portfolio
    ***************************/
    
    #gallery li {
        width: 28.3333%;
    }
    
    #gallery li:nth-child(3n+1) {
        clear: left;
    }
    
    
    
    /**************************
    Page: ABOUT
    ***************************/
    
    #profpic {
        float: left;
        margin: 0 5% 20px 0;
    }
}   

@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: 0 0 0 5%;
        text-align: left;
        width: 45%;
    }
    
    h1 {
        font-size: 3em;
    }
    
    h2 {
        font-size: 1.3em;
        margin-bottom: 20px;
    }
    
    header {
        border-bottom: 5px solid #00c4c4;
        margin-bottom: 50px;
    }
    
    .title {
        margin-top: 0px;
    }
    
    .title2 {
        margin-top: 50px;
    }
    
}