/* ==========================================================================
   Media Queries
   ========================================================================== */
/* When the screen grows larger than this value, apply these settings */
    @media only screen and (min-width: 810px) {

        /* ====================
            INTERMEDIATE: Menu
           ==================== */
        
            nav a {
                float: left;
                /* defines the width of the button "frame" */
                width: 110px;
                /* margin: 0 1.7%; */
                margin: 0 7px;
                /* padding: 25px 2%; */
                padding: 25px 12px;
                margin-bottom: 0;
            }
        
            nav li:first-child a {
                margin-left: 0;
            }
        
            nav li:last-child a {
                margin-right: 0;
            }
        
        /* ========================
            INTERMEDIATE: IE Fixes
           ======================== */
        
            nav ul li {
                display: inline;
            }
        
            .oldie nav a {
                margin: 0 0.7%;
            }
        }
        
/* When the screen grows larger than this value, apply these settings */
    @media only screen and (min-width: 1168px) {
        
        /* ====================
            WIDE: CSS3 Effects
           ==================== */
        
            .header-container,
            .main aside {
                -webkit-box-shadow: 0 5px 10px #aaa;
                   -moz-box-shadow: 0 5px 10px #aaa;
                        box-shadow: 0 5px 10px #aaa;
            }
        
        /* ============
            WIDE: Menu
           ============ */
        
            .title {
                float: left;
            }
        
            nav {
                float: right;
                width: 730px;
            }
        
        /* ============
            WIDE: Main
           ============ */
        
            .main article {
                float: left;
                width: 59%;
            }
        
            .main aside {
                float: right;
                width: 26%;
            }
        }
 
 /* When the screen grows larger than this value, apply these settings */       
        @media only screen and (min-width: 1168px) {
        /* @media only screen and (min-width: 1059px) { */
        
        /* ===============
            Maximal Width
           =============== */
        
            .wrapper {
                width: 1070px; /*- 10% for margins */
                margin: 0 auto;
            }
        }