/*Large Tablet Landscape to 1200px:  Smaller than the 1140px row */
@media only screen and (max-width: 1200px) {
    .hero-text-box {
        width: 100%;
        padding: 0 2%;
    }
    
    .row {padding: 0 2%}
    
    .container {
        width: 1170px
    }

    
}



/*Small Tablets to Large Tablet Portrait: 768 to 1023px */
@media only screen and (max-width: 1023px) {
    body {font-size: 18px;}
    section {padding: 60px 0;}
    
    .container {
        width: 724px
    }
    
    .contact-form {width: 80%;}
} 



/* Large Phones and Small Tablets: 481 to 767px */
@media only screen and (max-width: 767px) {
    
    body {font-size: 16px;}
    section {padding: 30px 0;}
    .row,
    .hero-text-box {padding: 0 4%;}
    .col {
        width: 100%;
        margin: 0 0 4% 0;
    }
    
    .main-nav {display: none;}
    
    .logo {
    height: 50px;
    width: auto;
    float: left;
    margin-top: 10px;
    }
    
    .mobile-nav-icon {display: inline-block;}
    
    .main-nav {
        float: left;
        margin-top: 10px;
        margin-left: 25px;
    }
    
    .main-nav li {
        display: block;
        margin: 0;
    }
    
    .main-nav li a:link,
    .main-nav li a:visited {
        display: block;
        border: 0;
        padding: 10px 0;
        font-size: 100%;
    }
    
    .sticky .main-nav {
    margin-top: 0px;
    }

    .sticky .main-nav li {
        margin-top: 10px;
    }

    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited {padding: 10px 0px;}
    .sticky .mobile-nav-icon i {color: #555}
    .sticky .mobile-nav-icon i {margin-top: 10px;}
    
    .about-copy {
        width: 100%;
        margin: 0;
    }
    
    .about-portrait {
       text-align: center;
    }
    
    .about-source {
        padding-top: 20px;
        width: 100%
    }
    
    .section-about {
        padding-bottom: 20px;
    }
    
    .project-showcase li {
    width: 100%;
    
    }
    
    .project-detail li {
    width: 100%;
    }
    
    .container {
        width: auto
    }
    
    h1 {font-size: 180%;}
    h2 {font-size: 150%;}
    
    footer {padding: 10px;}
    
    .footer-nav {
        text-align: center;
        float: none;
    }
    
    .social-links {
        text-align: center;
        float: none;
        margin-top: 20px;
    }

    .footer-nav li,
    .social-links li {
        display: inline-block;
        margin-right: 10px;
    }

    .footer-nav li:last-child,
    .social-links li:last-child {
        margin-right: 0;
    }
}

/*  Small Phones:  0 to 480px */
@media only screen and (max-width: 480px) {
    
    .container {
        width: auto
    }
    
    h1 {font-size: 150%;}
    h2 {font-size: 120%;}
    
    .hero-text-box {
        padding: 20px;
        margin-top: 60px;
    }
    
    .btn:link,
    .btn:visited,
    .btn-full:link,
    .btn-full:visited,
    .btn-ghost:link,
    .btn-ghost:visited {
        margin: 10px;
    }
    
    .btn:hover,
    .btn:active,
    .btn-full:hover,
    .btn-full:active,
    .btn-ghost:hover,
    .btn-ghost:active {
        margin: 10px;
    }
    
    section {padding: 25px 0;}
    .contact-form {width: 100%;}
    

}