/* if target display is less than 480px, styles will not be executed */
/* fairly common res for smart phone screen */ 

@media screen and (min-width: 480px) {                   
    
    /********************
    TWO COLUMN LAYOUT
    ********************/
    
    #primary {
        width: 50%;
        float: left;
    }
    
    #secondary {
        width: 40%;
        float: right;
    }
       
    /********************
    PAGE: Samples
    ********************/
    
    #homeprimary {
        width: 50%; 
        float: left;
        text-align: left;
    }
    
    #homesecondary {
        width: 40%;
        float: right;
        text-align: left;
    }
    
    /********************
    PAGE: ABOUT
    ********************/
    
    .profile-photo {
        float: left;
        margin: 0 5% 3% 0; 
    }
    
    .phone-icon {
        padding-right: 5px;
        padding-bottom: -15px;
        width: 4%;
    }
    
    #welcome {
        font-size: 1.25em;
    }
    
    #ben {
        color: black;
        padding: 10px;
        font-size: 1.75em;
    }
    
}

@media screen and (max-width: 700px) {
    #examples_header {
        font-size: 1.4em;
        text-align: center;
    }
}

/* res for tablet */

@media screen and (min-width: 850px) { /* originally 660 */
    
    /********************
    HEADER 
    ********************/
    
    nav {
        background: none;
        float: right;
        font-size: 1.125em;
        margin-right: 5%;
        text-align: right;
        width: 45%;
    }
    
    nav a.selected, nav a:hover {
        color: #004d4d; 
    }
    
    #logo {
        float: left;
        margin-left: 5%;
        text-align: left;
        width: 45%;
    }
    
    h1 {
        font-size: 2.5em;
    }
    
    h2 {
        font-size: 1.25em;
        margin-bottom: 20px;
    }
    
    header {
        border-bottom: 5px solid #004d4d;
        margin-bottom: 60px;
    }
    
}