@media screen and (max-width:840px) {
    
    #logo-link, nav#main-menu, nav#sec-menu {
        max-width: 50%;
    }
    
    
        nav#sec-menu li.menu-item {
            margin: 0 0 5px 0;
        }
    
}




@media screen and (max-width:640px) {
    
    
    #section {
        min-height: 0;
    }
    
    
    #logo-link {
        float: none;
        text-align: center;
        max-width: 100%;
        margin: 20px 0 20px 0;
    }
    
    nav#main-menu, nav#sec-menu {
        clear: none;
        float: none;
        margin: 0 0 15px 0;
        max-width: none;
        text-align: center;
    }
    
    
        li.menu-item {
            display: inline-block;
            float: none;
            margin: 0 0 0 -5px;
        }
        
        
            li.menu-item a {
                padding: 5px 5px 0 5px;
            }
            
            
            
    #sec_menu-toggle {
        display: block;
    }
    
    
    nav#sec-menu {
        margin: 0 auto;
        max-width: 340px;
        position: relative;
    }
    
    
    nav#sec-menu ul.menu {
        background: white;
        border: 1px solid rgba(0,0,0,0.3);
        border-radius: 4px;
        box-shadow: 0 4px 10px 0 rgba(0,0,0,0.5);        
        display: none;
        padding: 8px;
        position: absolute; top: 100%; right: 0;
        width: 100%;
        z-index: 1;
    }
    
    
        nav#sec-menu li.menu-item {
            background: none;
            display: block;
            margin: 0;
            padding: 0;
            width: 100%;
        }
        
        
            nav#sec-menu li.menu-item a {
                font-size: 14px;
                padding: 12px; 
            }
    
    
    
    
    #article,
    .home #article,
    .projects #article,
    #aside,
    #aside.blog {
        float: none;
        padding: 0 10px;
        position: static;
        width: 100%;
    }
    
    
    #article {
        padding: 20px;
    }
    
    
    
        .post {
            margin: 0 0 20px 0;
            padding: 0 5px;
            width: 50%;
        }
        
        .blog-post {
            width: 100%;
        }
        
        
        .pageimage {
            margin: 0 -20px;
        }    
        
        
        
        
        .home-feature {
            float: none;
            height: 300px;
            margin: 0 auto 10px;
            width: 90%;
        }
        
        
            .home-feature_title {
                right: 0;
            }
        
        
            .home-feature_image {
                right: 0; left: 0;
            }
        
        
            
    
    
    
    #aside,
    #aside.blog {
        padding: 10px;
    }
    
    
        #aside > h2 {
            margin: 10px auto 0;
            width: 90%;
        }
    
    
        .side-post {
            margin: 15px auto;
            width: 90%;
        }
        
    
}




@media screen and (max-width: 400px) {
    
    
    .home-box,
    .home-box.space_1,
    .home-box.space_2,
    .home-box.space_3,
    .home-box.space_4,
    .home-box.space_5,
    .home-box.space_6,
    .home-box.space_7 {
        border: 2px solid white;
        clear: none;
        display: block;
        float: left;
        height: 230px;
        margin: 0;
        overflow: hidden;
        padding: 0;
        text-align: center;
        width: 50%;
    }
    
        .home-box img {
            max-width: none;
        }  
        
        
        
    .about-left {
        margin: 0 15px 5px 0;
        padding: 10px 0 0;
        width: 35%;
    }
    
    
    .about-right {
        float: none;
        padding: 0 0 20px;
        width: 100%;
    }


    
}