body {
    font-size: 16pt;
    font-family: 'Space Mono', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    line-height: 1.25;
    background: #FFF;
    color: #111;
	letter-spacing:0.05em;
}

img {
    max-width: 100%;
    display: block;
}

.b-lazy {
    min-height: 50px;
    background: url(../img/squares.gif) 50% 50% no-repeat;
}

.b-loaded {
    min-height: 0;
    background-image: none;
}

.main-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 160;
    padding: 1em;
    background: #FFF;
}

.main-header--name {
    width: 1px;
    font-weight: 700;
	font-size:14px;
	line-height:1.2em;
}
.project--header h1, 
.project--header h2	{
	font-size:14px;
	line-height:1.2em;
	
}
.project--header h2	{
	margin-bottom:10px;
	font-weight:400;
}

.contact-link {
    position: absolute;
    top: 35%;
    right: 1em;
    margin-top: -.5em;
    width: 1em;
    height: 1em;
    line-height: 1em;
    text-align: center;
    color: #111;
    text-decoration: none;
    transition: all ease .5s;
	font-size:30px;
}

.contact-link:after {
    content: '+';
}


.slides {
    margin-top: 4.5em;
}

.project {
    margin: 1em;
}


.project--images   img{
    margin-bottom:17px;
}
.slides-navigation {
    display: none;
}

.contact-us {
	padding: 1em;
    color: #FFF;
    background: #111;


}

.contact-us address {
    margin: 0 0 1em;
	font-style: normal;
	font-size:16px;
	padding-left:10px;
	font-weight:400;
	
}

.contact-us a {
    color: #FFF;
	text-decoration:none;
	font-weight:700;
}

@media (max-width: 768px)  {
	figure.project--images   {
       background-image:none !important;
	}

}



@media (min-width: 769px) {
    body {
        transition: color ease .5s, background ease .5s;
    }

    body.dark {
        color: #FFF;
        background: #111;
    }

    body.dark .slides-navigation a {
        color: white;
    }

    .main-header {
        background: transparent;
    }
	.main-header--name {
		padding:0px 10px;
		font-size:16px;
	}
	
	
    .slides {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        margin: 0;
    }

    .project {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        display: none;
    }

    .project--header {
        position: relative;
        z-index: 90;
        margin: 1em;
        padding-left: 11%;
    }
	.project--header h1, 
	.project--header h2	{
		font-size:16px;
	}
    .project--images {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .project--images img {
        opacity: 0;
    }

    .project.active,
    .project--images img.active {
        display: block;
    }

    .slides-navigation {
        display: block;
		height:100%;
		min-height:100%;
		position: relative;
    }

    .slides-navigation .prev,
    .slides-navigation .next {
        position: absolute;
        top:50%;
        left:0;
        z-index: 120;
		margin:0 0.5em 0 0.5em;
        height: 100%;
        width: 50%;
        padding: 0 1em 0 1em;
        line-height:1em;
        box-sizing: border-box;
        font-size: 60px;
		font-weight:300;
        text-decoration: none;
        color: #111;
        cursor: pointer;
        opacity: .0;
        transition: 1em  ease .5s, opacity ease .5s;
		font-family:'Open Sans';
    }

    .slides-navigation .next {
        left: auto;
        right: 0;
        padding: 0 .75em 0 0;
        text-align: right;
    }

    .slides-navigation .prev:hover {

        padding:0 0 0 .5em;
        opacity: 1;
    }
    .slides-navigation .next:hover {

        padding: 0 .5em 0 0;
        opacity: 1;
    }
	
    .contact-us {
        position: absolute;
        top: 100%;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 140;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        transition: top ease .25s;
    }
	.dark  .contact-link {
	color:#FFF;
	}
	.contact-us__shown .contact-link:after ,
	body.contact-us__shown  .main-header{
		color:#FFF !important;
	}
    .contact-us > :first-child {
        padding-top: 4.5em;
    }

    .contact-us__shown .contact-link {
        transform: rotate(135deg);
    }

    .contact-us__shown .contact-us {
        top: 0;
    }

    /* Animation */
    .project.active {
        animation-duration: 2s;
        animation-name: fadein;
    }

    @keyframes fadein {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

}