@media handheld, screen and (min-width: 2050px){
    .header { background-size: 100% auto; }
}

@media handheld, screen and (max-width:1250px){
    .header .fullwidth { width: 95%; }
    .section1.fullwidth,
    .about .fullwidth,
    .footer .fullwidth { width: 90%; }
    .section2 h6, .section3 h6 { padding: 0 25px; }
    .section2.fullwidth { max-width: 1050px; }
    .big-square { width: 33.33%; padding-bottom: 33.33%;}
    .illustrate h6 { margin-left: 50px;}
}

@media handheld, screen and (max-width:1000px){
    .section1 .col-3 { width: 50%;}
}


@media handheld, screen and (max-width:800px){


    .col-1, .col-2, .col-3, .col-4,
    .col-5, .col-6, .col-7, .col-8,
    .col-9, .col-10, .col-11, .col-12 { width: 100%; }

    .header { 
        background-size: auto 400px; 
        background-image: url(../images/the-closet-guy-mobile.jpg);
        background-color: #594b41;
        color: #fff;
    }
    .header .banner .fullwidth { 
        padding-top: 400px; 
        width:100%;
    }
    .header .content { 
        position: relative;
        margin: 0 auto;
        padding: 25px 0;
        right: auto; 
        max-width: initial;
        width:90%;
    }

    .header h1, .header h2 { text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);}

    .section1, .illustrate, .about { padding: 75px 0; }
    .mid-paper { padding: 75px 50px; }

    .design .big-square { width: 50%; padding-bottom: 50%;}
    .design .big-square.fix { margin-top: 0px; }

    .illustrate .thumbnail { width: 33.33%; }

    .footer .l, .footer .r { float: none; }
}

@media handheld, screen and (max-width:700px){
    
    .about .fullwidth > div { margin: 0 auto; width:auto;}
    .about .fullwidth > div > div { display: block; }
    .about .me { padding-bottom: 25px;width:100%; }
    .about .me img { margin: 0 auto;}
    .about .me, .about .items { display: block; margin: 0 auto;text-align:Center; }
}

@media handheld, screen and (max-width:600px){
    .section1 h6 { float:none;}
    .section1 .content { padding: 25px 0;}

}

@media handheld, screen and (max-width:525px){
    .section1 .col-3 { width: 100%; }
    .section1 .text { width: 100%;}
}

@media handheld, screen and (max-width:500px){
    
    #nav.unscroll .logo { width: 100%; }
    #nav.scroll .logo { width: 30%; }

    .header #nav > div:first-child {width: 100%;}

    #nav.scroll ul.menu { 
        margin: 60px 0 0;
        z-index: 50;
        width:100%;
        display:none;
        -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.25);
        -moz-box-shadow:    0px 10px 30px 0px rgba(0, 0, 0, 0.25);
        box-shadow:         0px 10px 30px 0px rgba(0, 0, 0, 0.25);
    }

    #nav.scroll ul.menu.open { display: block; }

    #nav ul.menu li {
        font-size: 1.2em;
        display:block;
        background-color: #594b41;
        border-bottom: 1px solid #443931;
        border-top: 1px solid #726155;
        text-align:right;
        padding: 0 15px;
    }

    #nav ul.menu li a { line-height: 44px; }

    #nav li.teal:hover { background-color: #00cfae;}
    #nav li.green:hover { background-color:#93c476; }
    #nav li.yellow:hover { background-color:#d9bf53; }
    #nav li.orange:hover { background-color:#c8783f; }

    #nav li.teal a:hover,
    #nav li.green a:hover,
    #nav li.yellow a:hover,
    #nav li.orange a:hover { color: #fff; }

    #nav li a { display: block; width: 100%; height:100%;}

	#nav.scroll .menu .hamburger { opacity: 1; margin-right: 10px; }
    #nav.unscroll .logo { height: 100px; margin-top: 0px; }
    #nav.scroll .logo { height: 62px; margin-top: 15px; position:relative; z-index:60; }
    #nav.scroll .logo a { height: 62px; width: 60px;}
    #nav .nav-tab .scroll .top { height: 25px; }
    #nav .nav-tab .unscroll { margin-top: 25px; }
    
    .design .big-square { width: 100%; padding-bottom: 100%; }

	.about div.pic { 
		float: none;
		width: 60%;
		padding: 0;
		margin: 0 auto 25px auto;
	}
	.about div.content { width: 100%; }
	.about div { display: block; }


}


@media handheld, screen and (max-width:350px){
    #nav .nav-tab .unscroll { background: url(../elements/logo-tab-mobile.png) no-repeat center; }
    .illustrate .thumbnail { width: 100%; }
    .header h1 { font-size: 2em;}
    .header h2 { font-size: 1.3em;}
}

@media handheld, screen and (max-width:300px){
    #nav ul.menu li { font-size: 1em; }
    #nav ul.menu li a { line-height: 34px; }
}


@media handheld, screen and (min-width:500px) {

    #nav.scroll ul.menu { display: block!important; }
}