/* Big tablet to 1200 px (width smaller than the 1140px row) */
@media only screen and (max-width: 1200px) {
    .hero-text-box {
        width: 100%;
        padding: 0 2%;
    }
}

/* Small tablet to big tabler (iPad in portrait mode) - 768 px to 1023 px */
@media only screen and (max-width: 1023px) {

    h1 { font-size: 150%; }
    h2 { font-size: 135%; }
    h4.my-info { font-size: 90%; }
    h4.employment-desc-header { font-size: 70%; }

    .main-nav {
        margin-top: 30px;
    }

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

    .main-nav li a:link,
    .main-nav li a:visited {
        padding: 4px 0;
        font-size: 75%;
    }
    
    .reference h3 {
        font-size: 100%;
    }
    
    .email,
    .phone {
        font-size: 80%;
    }

    .description,
    .recommedation {
        font-size: 80%;
    }

}

/* All Phones/tablets that are smaller than the iPad - 481 to 767 px */
@media only screen and (max-width: 767px) {

    .main-nav { display: none; }

    .mobile-nav-icon { 
        display: inline-block;
        margin-top: 5px; 
        margin-right: 5px;
        font-size: 80%;
    }
    
    .main-nav {
        float: left;
        margin-top: 5px;
        margin-left: 40%;
    }
    
    .main-nav li {
        display: block;
    }
    
    .main-nav li a:link,
    .main-nav li a:visited {
        display: block;
        border: 0;
        padding: 2px 0;
        font-size: 80%;
    }

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

    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited { padding: 3px 0; }
    .sticky .mobile-nav-icon i { color: #555; }
    .sticky .mobile-nav-icon { 
        margin-top: 5px; 
        margin-right: 5px;
    }
    
    .anchor {
        top: -180px;
    }

    .anchor.overview,
    .anchor.tools,
    .anchor.work-history {
        top: -180px;
    }
    
    h1 { font-size: 135%; }
    h2 { font-size: 120%; }
    h4.my-info { font-size: 75%; }
    h4.employment-desc-header { font-size: 60%; }
    
    .btn:link,
    .btn:visited {
        font-size: 80%;
    }

    .employment-info ul li {
        font-size: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    
    .section-about-website ul li {
        font-size: 80%;
    }
    
    p {
        font-size: 80%;
        width: 90%;
        word-spacing: 2px;
        margin: 3% 5%;
    }

    .section-work-history .btn,
    .section-work-history .btn-full {
        margin-top: 10px;
        font-size: 75%;
    }
    
    .section-awards h2 {
        padding-top: 20px;
    }

    .section-awards ul li {
        width: 80%;
        margin-left: 10%;
        font-size: 75%;
        padding: 10px;
    }
    
    .reference {
        display: block;
        width: 80%;
        margin-left: 10%;
    }
}

/* Rules inside the declaration block will apply when the width of the device or browser is <= 480 px */
/* Small Phones from 0 to 480 px */
@media only screen and (max-width: 480px) {
    
    header,
    .section-tools,
    .section-about-website {
        background-attachment: scroll;
    }

    .main-nav { margin-left: 25%; }

    h1 { font-size: 120%; }
    h2 { font-size: 100%; }
    h4.my-info { font-size: 65%; }
    
    .btn:link,
    .btn:visited {
        font-size: 75%;
    }
    
    .employment-info ul li {
        font-size: 85%;
    }

    .employment-description p {
        font-size: 80%;
    }
    
    .section-about-website {
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7))), url(img/about-website.jpg);
        background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/about-website.jpg);
    }

}