/* Global Styles
--------------------------------------------------- */

	*, *:after, *:before { margin: 0; padding: 0; border: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
	
	body { font-family: 'Helvetica Neue',Helvetica,Arial,san-serif; font-size: 100%; }
	header, section, footer, nav { display: block; }
	
	@font-face { font-family: "lg"; src: url("..fonts/lg.otf"); }
	
	h1, h2, h3, h4 { font-family: "lg", Arial, sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: 0.02em; }
	h1, h3 { color: #0f1817; }
	h2, h4 { color: #9fa3a2; }
	
	h1 { font-size: 1.4em; /* 44/16 */ letter-spacing: 0px; }
	h2 { font-size: .8em;  /* 40/16 */ }
	h3 { font-size: 1em;  /* 32/16 */ line-height: 0.9em; }
	
	p { color: #626867; font-size: .9em; line-height: 1.5em; margin-bottom: 20px; }
	
	a { color: #3399ef /* #626867 */;}
	a, button { 
    	text-decoration: none; /* 24/16 */  
    	-o-transition: all .3s linear;
        -moz-transition: all .3s linear;
        -khtml-transition: all .3s linear;
        -webkit-transition: all .3s linear;
        -ms-transition: all .3s linear;
        transition: all .3s linear; 
        cursor: pointer;
    	}
    	
	a:hover { opacity: .7; }
	
    .btn { background-color: #0a75d0; color: #fff; font-size: .9em; padding: 8px 15px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
	.btn .fa { padding-right: 5px; }	


/* Home Styles
--------------------------------------------------- */

	.home { background: url('../img/bg-portrait.jpg') 50% 20% / 70% no-repeat transparent; font-size: 85%; }
	
	.content { width: 80%; margin: 0 auto; padding-top: 400px; text-align: center; }
	.content > h1 { font-size: 2.4em; font-weight: 500; letter-spacing: -1px; }
	.content > h2 { font-size: 1em; margin-bottom: 20px }
	.content > .lst { margin-top: 20px; }
	.content > .lst > li { display: inline-block; }
	.content .fa { font-size: 2.2em; }
	
	@media only screen and (min-width: 30em) { /* ~ 480px */
	    .home { background-position: 120% 0; background-size: 50%; }
	    .content { padding-top: 120px; text-align: left; }
	    }
    
    @media only screen and (min-width: 37.5em) { /* ~ 600px */
	    .home { background-position: 720% -5%; background-size: 95%; }
	    .content { padding: 0; position: fixed; bottom: 20%; left: 10%; }
	    }
	
	@media only screen and (min-width: 56.25em) { /* ~ 900px */
        .home { background-position: 100% 0; background-size: 60%; font-size: 100%; }
        .content { bottom: 20%; left: 10%; }
        }
        
    @media only screen and (min-width: 68.75em) { /* ~ 1100px */
        .home { background-position: 100% 0; background-size:  auto; font-size: 100%; }
        .content { bottom: 25%; left: 15%; }
        }


/* Demo Styles
--------------------------------------------------- */	
	header { 
    	position: fixed; width: 100%; top: 0; overflow: hidden; padding: 15px;
    	background-color: #fff; border-bottom: 1px solid rgba(150,150,150, .2);  z-index: 50000; font-size: .8em; 
    	box-shadow: 0px 0px 15px 1px rgba(155,155,155,.2);
    	}

	header > a { display: none; float: right; font-size: 2.4em !important; }
	
	.projects { width: 90%; margin: 80px auto 100px; }
    .projects button { padding: 20px; position: fixed; top: 90px; z-index: 10000; background-color: transparent; font-size: 1.4em; opacity: .2; }
    .projects button:hover { opacity: .4; }
    .projects .slick-prev { left: -3%; }
    .projects .slick-next { right: -3%; }
	    .project-item { overflow: hidden; }
            .project-screen { display: block; width: 100%; margin-bottom: 60px; /* border: 1px solid rgba(150,150,150, .2); */ }
            .project-detail { width: 100%; margin: 20px 0; }
                .project-detail > h1 { margin-bottom: 2px; }
                .project-detail > h2 { margin-bottom: 25px; }
                .project-detail > h3 { margin: 40px 0 15px 0; }
                .project-detail > p { opacity: .6; margin-bottom: 15px; }
                .project-detail > ul > li { list-style: circle; margin-left: 15px; padding-bottom: 5px; opacity: .4; font-size: .9em; }
                
            .project-detail.mobile { text-align: center; }
            .project-detail.mobile > h1 { font-size: 1.3em; }
            .project-detail.desktop { display: block; width: 100%; padding: 0 25px; }
	

    @media only screen and (min-width: 30em) { /* ~ 480px */
	    .projects .slick-prev { left: 0%; }
        .projects .slick-next { right: 0%; }
	    }
    
    @media only screen and (min-width: 37.5em) { /* ~ 600px */
	    .projects .slick-prev { left: 1%; }
        .projects .slick-next { right: 1%; }
	    }
	
	@media only screen and (min-width: 48em) { /* ~ 768px */
	    .projects .slick-prev { left: 2%; }
        .projects .slick-next { right: 2%; }
	    }
        
    @media only screen and (min-width: 56.25em) { /* ~ 900px */
        header { padding: 20px 30px; }
        header > h1 { font-size: 1.8em; }
        header > a { display: block; }
        .projects { width: 80%; margin: 115px auto 100px; }
        .projects button { top: 50%; font-size: 2em; }
        .projects .slick-prev { left: 0%; }
        .projects .slick-next { right: 0%; }
            .project-screen { float: left; width: 60%; margin-right: 3%; }
            .project-detail.mobile { display: none; }
            .project-detail.desktop { display: block; }
            .project-detail.desktop { float: right; width: calc(100% - 63%); margin-top: 20px; }
        }
        
    @media only screen and (min-width: 68.75em) { /* ~ 1100px */
        .projects .slick-prev { left: 2%; }
        .projects .slick-next { right: 2%; }
            .project-screen { width: 65%; max-width: 800px; margin-right: 5%; }
            .project-detail.desktop { width: calc(100% - 70%); margin-top: 40px; padding-right: 5px; }
        }