@charset "UTF-8";

body {
	font-family: "source-sans-pro", "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

#wrapper {
	width: 100%;
	text-align: center;
	margin: 40px 0;
    min-width: 300px;
}

header {
	font-weight: 300;
	font-size: .95em;
	text-transform: uppercase;
	line-height: 1.5;
	margin-bottom: 2em;
}

header.large {
    display: none;
}

header em {
	font-weight: 500;
	font-style: normal;
    font-size: .97em;
}

div.nav {
	width: 9.6em;
	margin: 2em auto 0 auto;
}

.nav-arrow {
	width: 1.2em;
	height: 1.2em;
	float: left;
	margin-top: -.2em
}

.nav-square {
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	float: left;
	margin: 0 3em;
	background-color: #D4D1CE;
    opacity: .5;
	transition: opacity .5s ease-out;
}

.nav-square:hover {
	opacity: 1;
}

header img {
    opacity: .5;
    transition: opacity .5s ease-out;
}

header img:hover {
    opacity: 1;
}

.redtype {
	color: #c00;
}

.numbers {
        display: none;
    }

.example-button {
    width: 70%;
    margin: 2em auto;
}

.example-button4 {
    width: 80%;
    margin: 2em auto;
}

.example-button img {
    display: inline-block;
    width: 27.5%;
}

.example-button4 img {
    display: inline-block;
    width: 40%;
	margin-bottom: 2em;
	margin-left: 2.5%;
	margin-right: 2.5%;
}

.example-button-top, .example-button-top4 {
    display: none;
}

#examples {
    width: 80%;
    margin: 0 auto;
    max-width: 240px;
}

#examples1 {
    width: 70%;
    margin: 0 auto;
}
    
#examples3 {
    width: 96%;
    margin: 50px 2%;        
}
    
#examples4, #examples6 {
    width: 80%;
    margin: 50px auto 0 auto;        
}

.project, .project2 {
    width: 100%;
    margin-bottom: 6em;
    height: 180px;
}

.project1 {
    width: 100%;
    margin-bottom: 3em;
}

.project3 {
    width: 46%;
    float: left;
    margin: 2%;
}

.project4 {
    width: 100%;
    margin-bottom: 5em;
    box-shadow: 0px 0px 2px #d2d2d2;
    padding-bottom: -2px;
}

.project5 {
    width: 100%;
    margin-bottom: 5em;
    padding-bottom: -2px;
    margin-bottom: 3em;
    clear: both;
}

.project5-quote {
    width: 75%;
    margin-bottom: 3em;
}

.project6 {
    width: 100%;
    margin-bottom: 2.5em;
    
    padding-bottom: -2px;
}

.project6 img {
	border: solid 1px #DFDFDF;
}

.project6-mb {
    margin-bottom: 5em;
}

.project6-blank {
    width: 100%;
    margin-bottom: 2.5em;
    display: none;
}

.project6-blank img {
	border: solid 1px white;
}

.project img, .project1 img, .project3 img, .project5 img, .project5-quote img, .project6 img {
    width: 100%;
}

.project2 img {
	width: auto;
	max-height: 100%;
}

.project4 img {
    width: 100%;
    margin-bottom: -2px;
}

.arrow-bottom {
    opacity: .5;
    transition: opacity .5 ease-out;
}

.arrow-bottom:hover {
    opacity: 1;
}


/* MEDIA QUERIES */


@media (min-width: 550px) and (max-width: 699px) {
    
    .project5-quote {
        width: 47%;
        margin-bottom: 5em;
    }
    
    .left {
        float: left;
    }
    
    .right {
        float: right;
    }
    
}


@media (min-width: 700px) and (max-width: 999px){
    
    #examples {
        width: 70%;
        max-width: none;
        background-color: white;
    }
    
    #examples1, #examples6 {
        width: 90%;
        background-color: white;
    }
    
    #examples3 {
        width: 85%;
        margin: 0 auto 5em auto;
        background-color: white;
    }

    .example-button {
        width: 80%;
    }

    .example-button img {
        width: 20%;
        padding: 0 2.5%;
    }

	.example-button4 {
		width: 80%;
		margin: 2em auto;
	}

	.example-button4 img {
		width: 20%;
		margin-left: 2%;
		margin-right: 2%;
	}

    .project, .project1, .project2 {
        width: 40%;
        float: left;
        margin: 0 5% 4em 5%;
    }
    
    .project3 {
        width: 30%;
        margin: 1.5%;
    }

    .project4 {
        width: 45%;
        float: left;
        margin: 0 2.5% 4em 2.5%;
    }

    .project5-quote {
        width: 45%;
        margin-bottom: 5em;
    }
    
    .project6 {
        width: 45%;
        margin: 0 2.5% 3.5em 2.5%;
        float: left;
    }
    
    .project6-mb {
        margin-bottom: 3.5em;
    }
    
    .project6-blank {
        display: block;
        width: 45%;
        margin: 0 2.5% 3.5em 2.5%;
        float: left;        
    }
    
    .project6-blank img {
        width: 100%;
    }
    
    .left {
        float: left;
    }
    
    .right {
        float: right;
    }
    
}


@media (min-width: 1000px){
    
    #wrapper {
        position: relative;
    }
    
    header.small {
        display: none;
    }

    header.large {
        display: block;
    }

    nav {
        width: 80%;
        position: absolute;
        top: 189px;
        left: 10%;
    }
    
    nav h6 {
        color: black;
        position: relative;
        top: -40px;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity 1s ease-out;
    }
    
    nav:hover h6 {
        opacity: 1;
    }
    
    .numbers {
        display: block;
        text-align: center;
        width: 12%;
        float: left;
        /*margin-left: 18%;*/
        margin-left: 2%;
        color: #c00;
    }
    
    .numbers.one {     
	    margin-left: 2%;
    }
    
    .numbers.three {     
	    /*margin-left: 34%;*/
        margin-left: 2%;
    }
    
    .numbers h1 {     
	    font-size: 7em;
	    font-weight: 200;
        position: relative;
        top: -32px;
    }
    
    .example-button, .example-button4 {
        display: none;
    }

    .example-button-top {
        display: block;
        width: 125px;
        float: left;
        margin-left: 50px;
        position: relative;
        top: 25px;
        transition: top 1s ease-out;
    }

    .example-button-top4 {
        display: block;
        width: 120px;
        float: left;
        margin-left: 50px;
        position: relative;
        top: 25px;
        transition: top 1s ease-out;
    }

    .example-button-top img, .example-button-top4 img {
        width: 100%;
    }
    
    .example-button-top:hover, .example-button-top4:hover {
        top: 0px;
    }
    
    #examples {
        width: 100%;
        max-width: none;
        padding: 75px 0;
        border-top: solid 1px #999;
        position: absolute;
        top: 265px;
        background-color: white;        
    }
    
    #examples1 {
        width: 100%;
        padding: 75px 0;
        border-top: solid 1px #999;
        position: absolute;
        top: 265px;
        background-color: white;        
    }
    
    #examples3, #examples4, #examples6 {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 75px 0;
        border-top: solid 1px #999;
        position: absolute;
        top: 265px;
        background-color: white;        
    }
    
    .projects-large {
        width: 90%;
        margin: 0 auto;
    }
    
    .projects-large3 {
        width: 96%;
        margin: 0 auto;
    }
    
    .project, .project1, .project2, .project4 {
        width: 28.3%;
        float: left;
        margin: 0 2.5% 6em 2.5%;
    }
    
    .project3 {
        width: 23%;
        margin: 1%;
    }
    
    .project5 {
        width: 40%;
        max-width: 425px;
        float: left;
        margin-bottom: 6em;
    }
    
    .project5-quote {
        width: 25%;
        float: left;
        margin-left: 5%;
    }
    
    .project6-blank {
        display: block;
    }
    
    .project6-mb {
        margin-bottom: 3.5em;
    }
    
    .project6, .project6-blank {
        width: 22%;
        float: left;
        margin-right: 3%;
    }
    
    .project6-blank img {
        width: 100%;
    }
    
    .right {
        float: left;
    }
    
    .arrow-bottom {
        display: none;
    }
    
}


@media (min-width: 1150px){

    .example-button-top4 {
        display: block;
        width: 135px;
        float: left;
        margin-left: 50px;
        position: relative;
        top: 25px;
        transition: top 1s ease-out;
    }
    
    .example-button-top:hover, .example-button-top4:hover {
        top: -9px;
    }

    
    #examples3 {
        width: 100%;
    }
    
    .projects-large {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .projects-large3 {
        width: 90%;
        margin: 0 auto;
    }
    
    .project, .project2 {
        width: 20%;
        float: left;
        margin: 0 2.5% 6em 2.5%;
    }
    
    .project3 {
        width: 18%;
    }
    
}


@media (min-width: 1350px){
    
    .project5-quote {
        width: 20%;
    }   
    
}