@media (max-width: 600px) {

    .container {
        padding: 0;
        margin: 0; 
        width: 100%;
    }
    
        header {
            height: 175px;
            margin-left: 0;
            padding-left: 0;
        }    
 
        .content {
            width: 92%;		
        }    
    
        .content h1 {
            font-size: 2.2em;
            text-align: center;
        }    

        .content h2 {
            font-size: 1.8em;
        }     
    
        .threeqcol {
            width: 100%;
        }
    
    
        .quartercol {                   /*  CHANGE TO ALTERNATIVE DISPLAY  */
            display: none;
        }      
 
        /******FORM*******/


        input[type='text'], [type='password'], [type='email'], [type='number'], [type='tel']{
            padding: 1em;
            width: 80%;
        }

        textarea {
            padding: 1em;
            width: 80%;
        }

        .selectstyle {
            padding: 1em;
            width: 80%;
        }

        input[type='text'].halfsize {
            width: 40%;
        }

        input[type='text'].textshrink {
            width: 31.44%;
        }

        .smallselect {
            padding: 1em;
            width: 30%;
        }
          
        select {
            width: 85%;
        }
    
        .preview {
            width: 85%;
        }     
    
}
    
    
@media (min-width: 601px) and (max-width:724px) {

        .logo {
            width: 60%;
            margin: 0 auto;
            left: auto;
            margin-bottom: 1em;
        }    
    
        nav {
            position: relative;
            top: auto;
            right: auto;
            margin: 0 auto;
            font-size: 1.2em;
            text-align: center;
            padding-top: .8em;	
            padding-bottom: .3em;		
            width: 100%;
        }

        nav  ul {
            list-style:none;
        }

        nav  ul li {
            display: block;
            display:inline-block;
            padding-right: 1em;
            padding-left: 1em;	
            margin: 0 auto;
        }

        header {
            height: 220px;
        }

        .content {
            width: 100%;		
        }    
    
        .content h1 {
            font-size: 2.1em;
        }    

        .content h2 {
            font-size: 1.9em;
        }      
    
    
        .threeqcol {
            width: 95%;
        }
    
    
        .quartercol {                   /*  CHANGE TO ALTERNATIVE DISPLAY  */
            display: none;
        }  

        select {
            width: 80%;
    }
    
        .preview {
            width: 75%;
        }    
    
}

@media (min-width: 725px) and (max-width:1099px) {

        .logo {
            width: 50%;
            margin: 0 auto;
            left: auto;
            margin-bottom: 1em;
        }    
    
        nav {
            position: relative;
            top: auto;
            right: auto;
            margin: 0 auto;
            font-size: 1.3em;
            text-align: center;
            padding-top: .8em;	
            padding-bottom: .3em;		
            width: 100%;
        }

        nav  ul {
            list-style:none;
        }

        nav  ul li {
            display: block;
            display:inline-block;
            padding-right: 1em;
            padding-left: 1em;	
            margin: 0 auto;
        }


        .content {
            width: 95%;		
        }    
    
        .content h1 {
            font-size: 2.4em;
        }    

        .content h2 {
            font-size: 2.1em;
        }        
    
        .quartercol {                   /*  CHANGE TO ALTERNATIVE DISPLAY  */
            display: none;
        }

        .threeqcol {                        
            width: 95%;
        }  
    
        .preview {
            width: 75%;
        }    
    
}

@media (min-width:1100px) and (max-width:1289px) {

        .logo {
            width: 33%;
            left: 5em;
        }

        nav {
            font-size: 1.3em;
        }    
    
        .content {
            width: 95%;
        }
    
        .content h1 {
            font-size: 2.6em;
        }
    
        .quartercol {
            float: left;
            width: 20%;
            padding: 2%;
        }

        .threeqcol {
            float: left;
            width: 70%;
            padding: 2%;
        } 
    
        .preview {
            width: 75%;
        }
    
}


@media only screen and (min-width:1290px) and (max-width:1409px) {

        .logo {
            width: 33%;
            left: 10em;
        }

        nav {
            font-size: 1.4em;
        }

        .content {
            width: 90%;
        }    

}



@media (min-width: 1410px) and (max-width: 1610px) {

        .logo {
            width: 35%;
            left: 10em;
        }

}



}