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

/* small to big tablet. 768 to 1023. */
@media only screen and (max-width: 1023px) {
    body { font-size: 95%;}  /* Original was 20px.  All font sizes expressed in percentages will work nicely with this now. */
}

/* small tablets and phones 481 to 767*/
@media only screen and (max-width: 767px) {
    body { font-size: 90%;} 
    h1 { font-size: 180%;}
    h2 { font-size: 150%;}
	h3 { font-size: 120%;}

    .main-nav { display: none;} /* Hides the main menu for now. */

    .mobile-nav-icon {
        display: inline-block;
    }

    .logo-area {
        flex: 7;
    }
    .menu-area {
        flex: 2;
    }
    
}

/* For small phones from 0 to 480 pixels */
@media only screen and (max-width: 480px) {
    body { font-size: 80%;} 
    h1 { font-size: 160%;}
    h2 { font-size: 140%;}
	h3 { font-size: 110%;}
}