/*
Theme Name: More Soon v2
Author: @tomvdv + edits by dk8.co
Version: 2.0
*/

/*
YUI 3.13.0 (build 508226d) http://yuilibrary.com/license/
@tomvdv: added <figure>
*/
html{color:#000;background:#FFF}blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,figcaption,figure,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:after,q:before{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}

/* Micro clearfix */
.cf:after,.cf:before{content:" ";display:table}.cf:after{clear:both}.cf{*zoom:1}

/* Inline list helper */
.inline li{display:inline}.inline.csv li:after{content:","}.inline.csv li:last-child:after{content:""}

/* Magnific Popup CSS */
.mfp-bg{top:0;left:0;width:100%;height:100%;z-index:1042;overflow:hidden;position:fixed;background:#000;opacity:.85;filter:alpha(opacity=85)}.mfp-wrap{top:0;left:0;width:100%;height:100%;z-index:1043;position:fixed;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;width:100%;height:100%;left:0;top:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-container:before{content:'';display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#ccc;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#ccc}.mfp-preloader a:hover{color:#fff}.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;-webkit-box-shadow:none;box-shadow:none}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;padding:0 0 18px 10px;color:#fff;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#fff;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#ccc;font-size:12px;line-height:18px}img.mfp-img{width:auto;max-width:100%;height:auto;display:block;line-height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure{line-height:0}.mfp-figure:after{content:'';position:absolute;left:0;top:40px;bottom:40px;display:block;right:0;width:auto;height:auto;z-index:-1;box-shadow:none;background:#444}.mfp-figure small{color:#fff;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#fff;word-wrap:break-word;padding-right:36px}.mfp-image-holder .mfp-content{max-width:100%}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(0.75);transform:scale(0.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:0;padding-right:0}}.mfp-ie7 .mfp-img{padding:0}.mfp-ie7 .mfp-bottom-bar{width:600px;left:50%;margin-left:-300px;margin-top:5px;padding-bottom:5px}.mfp-ie7 .mfp-container{padding:0}.mfp-ie7 .mfp-content{padding-top:44px}.mfp-ie7 .mfp-close{top:0;right:0;padding-top:0}


@font-face {
	font-family: 'Calibre-Regular';
	src: url("fonts/calibre-regular.eot");
	src: url("fonts/calibre-regular.eot") format("embedded-opentype"), url("fonts/calibre-regular.woff") format("woff"), url("fonts/calibre-regular.ttf") format("truetype"), url("fonts/calibre-regular.svg#CalibreRegular") format("svg");
}

@font-face {
	font-family: 'Calibre-Semibold';
	src: url("fonts/calibre-semibold.eot");
	src: url("fonts/calibre-semibold.eot") format("embedded-opentype"), url("fonts/calibre-semibold.woff") format("woff"), url("fonts/calibre-semibold.ttf") format("truetype"), url("fonts/calibre-semibold.svg#CalibreSemibold") format("svg");
}

html, body {
	/*background: #d7d7d7 url("img/background-noise.jpg") repeat-x bottom center fixed;*/
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #919191),
		color-stop(1, #D1D3D2)
	);
	background-image: -o-linear-gradient(bottom, #919191 0%, #D1D3D2 100%);
	background-image: -moz-linear-gradient(bottom, #919191 0%, #D1D3D2 100%);
	background-image: -webkit-linear-gradient(bottom, #919191 0%, #D1D3D2 100%);
	background-image: -ms-linear-gradient(bottom, #919191 0%, #D1D3D2 100%);
	background-image: linear-gradient(to bottom, #919191 0%, #D1D3D2 100%);

	background-attachment: fixed;

	font-family: "Calibre-Regular", Helvetica, Arial;
	-webkit-font-smoothing: antialiased;
	letter-spacing: 1px;
	/*background-size: contain;*/
	height: 100%;
	font-size: 20px;
}

body {
	position: relative;
	z-index: -2;
}

body.single-project {
	z-index: 0;
}

body.single-project.aboutOn {
	height: 100%;
	overflow: hidden;
}


a {
	color: black;
}

b, strong {
	font-family: "Calibre-SemiBold";
}

/*#spin {
	margin-left: -20px;
}*/

#loadingGif {
	width: 20px;
	height: 20px;
	background: url('img/loading.gif') no-repeat;
	background-size: cover;
	position: absolute;
	left: 50%;
	top: 30px;
	margin-left: -10px;
}

#loadingWrapper {
	width: 100%;
	height: 40px;
	padding-bottom: 40px;
	text-align: center;
	float: left;
}

body.single-project #loadingGif {
	position: static;
	height: 18px;
	width: 18px;
	display: inline-block;
	margin: 3px 0 0 0;
}



.wrapper {
	padding: 30px 85px 30px 85px;
	margin: 0px auto;
	width: auto;
	max-width: 1800px;
}
.masthead {
	display: block;
	padding-bottom: 30px;
}
.grid .masthead {
	margin-top: -55px;	
}
/*.masthead > div {
	float: left;
	width: 50%;
}*/
.masthead hgroup {
	width: 80%;
	float: left;
}


.masthead nav {
	width: 20%;
	text-align: right;
	float: left;
}


.masthead nav p {
	display: inline-block;
}

body.single-project 

.masthead nav li {
	display: inline;
}

.masthead h1 {
	font-family: "Calibre-SemiBold", Helvetica, Arial;
}
.masthead h1:after {
	content: ",";
	font-family: "Calibre-Regular", Helvetica, Arial;
}
.masthead a {
	text-decoration: none;
}
.masthead .current_page_item a,
.home #menu-item-9 a {
	border-bottom: 1px solid black;
	font-family: "Calibre-SemiBold", Helvetica, Arial;
}

.grid {
	margin: 0 auto;
	border-top: 55px solid transparent;
}
.grid article {
	float: left;
	position: relative;
	margin-bottom: 45px;
	overflow: hidden;
	opacity: 1;
	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	-ms-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
	transition: opacity .5s ease;
}
.grid article.visuallyhidden {
	opacity: 0;
}
.grid article img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity .3s ease;
}
.grid article img.loading {
	opacity: 0;
}
.grid.index article a {
	display: block;
	position: relative;
}
.grid.index article a .caption {
	position: absolute;
	display: table;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0, 0, 0, 0.9);
	color: white;
	opacity: 0;
	-webkit-transition: opacity .12s ease;
	-moz-transition: opacity .12s ease;
	-ms-transition: opacity .12s ease;
	-o-transition: opacity .12s ease;
	transition: opacity .12s ease;
}
.grid.index article a .caption p {
	display: table-cell; 
	vertical-align: middle; 
	text-align: center;
	padding: 0 5%;
}
.grid.index article a .caption span {
	display: block;
}
.grid.index article a .caption .heading {
	font-family: "Calibre-SemiBold", Helvetica, Arial;
}
.grid.index article:hover .caption {
	opacity: 1;
}
.grid.project .credit {
	padding: 45px 0;
	-webkit-box-shadow: inset 0px 0px 0px 2px #000;
	-moz-box-shadow: inset 0px 0px 0px 2px #000;
	box-shadow: inset 0px 0px 0px 2px #000;
}
.grid.project .credit p {
	padding: 0 45px;
	text-align: center;
}


/*Video loader things*/
.video p {
	background: rgba(0,0,0,0.3) url('img/loading.gif') no-repeat;
	width: 100%;
	height: 100%;
	/*background: ;*/
	background-position: 50% 50%;
}

.video p iframe {
	opacity: 0;
	transition:opacity 300ms ease;
	-webkit-transition:opacity 300ms ease;
	-moz-transition:opacity 300ms ease;
	-ms-transition:opacity 300ms ease;
}

/*when loaded...*/
.video p.loaded {
	background: none;
}

.video p.loaded iframe {
	opacity: 1;
}


/* Project footer: next/prev */

footer.project {
	display: block;
	font-family: "Calibre-Regular", Helvetica, Arial;
	text-align: center;
	padding-bottom: 40px;
}
footer.project a {
	text-decoration: none;
	border-bottom: 1px solid black;
}
footer.project a.prev {
	float: left;
}
footer.project a.next {
	float: right;
}
footer.project a.prev,
footer.project a.next {
	font-family: "Calibre-SemiBold", Helvetica, Arial;
	border-bottom: none;
}

/* Custom lightbox pager */

button.mfp-arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	height: 100%;
	width: 49%;
	background: transparent;
}
button.mfp-arrow-left {
	left: 0;
	cursor: w-resize;
}
button.mfp-arrow-right {
	right: 0;
	cursor: e-resize;
}
.mfp-image-holder .mfp-close {
	position: absolute;
	left: 50%;
	margin-left: -13px;
	z-index: 99;
	width: 28px;
}
.mfp-bottom-bar {
	display: none;
}

/* About page */

.aboutButton {
	cursor: pointer;
}

#aboutBox{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left:0;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	z-index: 1000;
	background: white;
	display: none;
	font-size: 33px;
/*	pointer-events: all;
	-ms-overflow-style: scrollbar;*/
	/*font-size: 23px;*/
}

#aboutBox .inner {
	width: 95%;
	padding: 0 0px;
	margin: 90px auto 0 auto;
	padding-bottom: 30px;
	position: relative;
	
	z-index: 0;
/*	-webkit-overflow-scrolling: touch;*/
}

#aboutBox .aboutButton {
	position: absolute;
	top: 20px;
	right: 2.5%;
	font-size: 49px;
	padding: 10px;
	width: 20px;
	height: 20px;
	z-index: 10;
	background-image: url('hack');
}

#aboutBox .inner p {
	margin: 0 0 1em 0;
}

@media screen and (max-width: 500px) {
	#aboutBox .inner {
		width: 92%;
		padding: 0 0px;
		margin: 90px auto 0 auto;
		padding-bottom: 30px;
	/*	-webkit-overflow-scrolling: touch;*/
	}
}

/* ABOUT BOX POP-UP */




@media screen and (max-width: 500px) {
	
	.wrapper {
		padding: 0 20px;
		padding: 30px 20px 30px 20px;
	}
	
	.masthead > div:first-child {
		width: 70%;
	}
	.masthead > div:last-child {
		width: 30%;
	}

	.grid article {
		margin-bottom: 20px;
	}
	article.about {
		text-align: left;
		padding: 0;
	}
	
}



@media screen and (min-width: 1030px) {
	
	.masthead h1, .masthead address, .masthead p {
		display: inline;
	}
	body.single-project #loadingGif {
		margin: 0 0 -3px 4px;
	}
	
}

.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	display: table;
	height: 0px;
	opacity: 0;
	-webkit-transition: 300ms ease hepxight;
	-moz-transition: 300ms ease heigpxht;
	-ms-transition: 300ms ease heigpxht;
	-o-transition: 300ms ease hepxight;
	transition: 300ms ease height;
	width: 100%;
	background: transparent center top no-repeat;
	background-size: cover !important;
	overflow: hidden;
	z-index: -1;
	cursor: pointer;
	-webkit-backface-visibility:hidden;
	
/*	-webkit-transform:translateZ(0px);
	-moz-transform:translateZ(0px);
	-o-transform:translateZ(0px);
	transform:translateZ(0px);*/
}
.iOS-7 .fixed-header {
	background-attachment: scroll;
	/* background-size: contain; */
}

.fixed-header .background {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	position: absolute;
	z-index: 2;
	top: 0;left: 0;
}

.fixed-header .logoContainer {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-size: 24px;
	position: relative;
	z-index: 1;
}
.fixed-header .logoContainer .logo {
	display: none;
	margin: 0 auto;
	width: 70%;
	/*max-width: 900px;*/
	height: auto;
}
.wrap-extra {
	position: static;
	/*background: #d7d7d7 url("img/background-noise.jpg") repeat-x bottom center fixed;	*/
	/*background-size: contain;*/
	/*-webkit-transform: translate3d(0,0,0);*/
	width: 100%;
	min-height: 100%;
	margin-top: 0px;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #919191),
		color-stop(1, #D1D3D2)
	);
	background-image: -o-linear-gradient(bottom, #919191 0%, #D1D3D2 100%);
	background-image: -moz-linear-gradient(bottom, #919191 0%, #D1D3D2 100%);
	background-image: -webkit-linear-gradient(bottom, #919191 0%, #D1D3D2 100%);
	background-image: -ms-linear-gradient(bottom, #919191 0%, #D1D3D2 100%);
	background-image: linear-gradient(to bottom, #919191 0%, #D1D3D2 100%);
}

.wrap-extra.animated {
	-webkit-transition: 400ms ease margin-top;
	-moz-transition: 400ms ease margin-top;
	-ms-transition: 400ms ease margin-top;
	-o-transition: 400ms ease margin-top;
	transition: 400ms ease margin-top;
}

.wrap-extra.aboutOn {
	height: 100%;
	top: 0;
	overflow: hidden;
	margin-top: 0 !important;
}

/*html.iOS-7,*/

/* NOT IN USE */
body.single-project {
	/*background: #d7d7d7 url("img/background-noise.jpg") repeat-x bottom center fixed;	*/
}

html.iOS-7, body.iOS-7 {
	/*background: #d7d7d7 url("img/background-noise.jpg") repeat-x bottom center;	*/
}



/*For mobile devices, overrules the above*/

@media screen and (max-width: 500px) {
	.fixed-header { 
		height: 100%;
	}

	body.single-project #loadingGif {
		height: 13px;
		width: 13px;
		margin: -8px 0 3px 0px;
	}

	.wrap-extra {
		/*background: #d7d7d7 url("img/background-noise.jpg") repeat-x top center fixed;*/
	}

	#aboutBox{
		padding: 0px;
	}

	#aboutBox .inner {
		margin: 80px auto 0 auto;
	}

	#aboutBox .aboutButton {
		position: absolute;
		top: 20px;
		right: 30px;
		font-size: 49px;
	}

}



/*For iPads, overrules the above*/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

	.wrap-extra {
		/*background: #d7d7d7 url("img/background-noise.jpg") repeat-x top center fixed;*/
	}
	#aboutBox{
		padding: 0px;
	}

	#aboutBox .inner {
		margin: 80px auto 0 auto;
	}

	#aboutBox .aboutButton {
		position: absolute;
		top: 20px;
		right: 30px;
		font-size: 49px;
	}

}

/*Fix for overflow scrolling on about box
when iPad rotates to landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	
	#aboutBox {
		overflow: hidden;
	}

	#aboutBox .aboutButton {
		top: 10px;
	}

	#aboutBox .inner {
		margin: 80px auto 0 auto;
		height: 370px;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}	
}

/*For normal devices, overrules the above*/

@media screen and (min-width: 500px) {
/*	.fixed-header { height: 100%;}
	.wrap-extra { top: 100%;}*/
}

@media screen and (max-width: 1030px) {
	.grid { border-top: 90px solid transparent;}
	.grid .masthead { margin-top: -90px;}
}