@font-face{
	font-family: 'FluxischElse';
	src:url('fonts/FluxischElse-Regular.woff');
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family: 'FluxischElse';
	src:url('fonts/FluxischElse-Light.woff');
	font-weight: normal;
	font-style: italic;
}
@font-face{
	font-family: 'FluxischElse';
	src:url('fonts/FluxischElse-Bold.woff');
	font-weight: bold;
	font-style: normal;
}

body{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	margin:0;
	padding:0;
	background-color: rgb(208, 202, 213); 
	overflow-x: hidden; 
}

/* ------------------------------- */
/* TYPOGRAPHY */
/* ------------------------------- */
body{
	font-family: 'FluxischElse';
	font-size: 17px;
	line-height: 1.5;
	color:rgba(20,20,20,1);
	font-style: italic;
}

a, 
a:active, 
a:visited{
	color: inherit;
	text-decoration: none;
}
a.weblink:active,
a.weblink:visited,
a.weblink{
	text-decoration: underline;

}
	#index:hover{
		cursor: pointer;
		opacity: 0.5;
	}
small,
#zone .post .file-info,
#zone .post .counter,
#panel-wrapper .project-description,
#panel-wrapper .attachments,
#panel-wrapper .project-relations{
	font-size: 12px;
	line-height: 1.7;
	width: 100%;
}
#overview .featured .num,
#panel-wrapper #post-links .num{
	font-size: 11px;
	word-spacing: 0.15em;
	line-height: 2.1;
	padding-left: 30px;
	color:#494747;
}
strong{
	font-style:normal;
}
#panel-wrapper h1, 
#panel-wrapper h2, 
#panel-wrapper h3, 
#panel-wrapper h4, 
#panel-wrapper h5, 
#panel-wrapper h6{
	font-size:20px;
	font-style: normal;
	font-weight: bold;
} 
#panel-wrapper .text{
	color: rgb(157, 157, 225);
}

.page h1,
.page h2, 
.page h3,
.page h4,
.page h5{
	font-size: 15px;
	margin:1.5em 0;
}
.page#updates strong{
	font-size: 14px;
	font-weight: normal;
}

/* ------------------------------- */
/* header */
/* ------------------------------- */

header{
	position: fixed;
	top:0px;
	width: calc(100% - 70px);
	padding:3px 35px;
	color: #494747;
	z-index: 9;
}
header#page{
	position: relative;
}
	header .header-item{
		float: left;
		padding-right: 1em;
		font-size: 15px;
		font-style:normal;
	}
	header .link:hover{
		opacity: 0.5;
		cursor: pointer;
	}
	header .nonactive{
		opacity: 0.5;
	}
	header .back{
		position: absolute;
		left:20px;
	}
	header .name{
		padding-left: 40px;
	}
	header.donker .header-item{
		color:white;
	}
	header .post-title,
	header.donker .post-title{
		color: #2e5ae4;
		padding-left: 40px;
	}
/* post description */
header .icon,
header.donker .icon{
	font-style: normal;
}
	header .icon:hover{
		opacity: 0.75;
		cursor: pointer;
	}
	header .fa-circle{
		font-size: 10px;
		vertical-align: text-top;
		line-height: 1.35;
	}
/* next project button */
header .next{
	position: fixed;
	right:20px;
}

/* ------------------------------- */
/* index */
/* ------------------------------- */

#overview{
	position: relative;
	width: calc(100% - 100px);
	height: auto;
	top:0;
	left:0;
	margin:70px 0 50px 50px;
	font-size: 20px;
	line-height: 20px;
}
#overview .featured {
	display: inline-block;
	margin: 5px -30px 5px 0;	
	width: 200px;
	vertical-align: middle;
}
	#overview .featured .num{
		margin-top:0;
	}
	#overview .featured img{
		width: 200px;
		height: auto;
	}
		#overview .featured img:hover{
			cursor: pointer;
		}

/* ------------------------------- */
/* zone - project view */
/* ------------------------------- */

#zone{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: auto;
	min-height: 100vh;
	color:#7a7a7a;
}
#zone .post{
	padding:50px 0 0;
}
#zone .post figure{
	display: none;
	position: relative;
	top:0;
	left:0;
	padding:0;
}
.blocks-gallery-grid{
	list-style: none;
	text-align: center;
	margin:0;
	padding:0;
}
#zone.licht {
	background-color: rgb(208, 202, 213); 
}
#zone.donker{
	background-color: rgb(5, 5, 5);
}
#zone .post video, 
#zone .post audio, 
#zone .post img {
	display: block;
	top:0;
	left:0;
	right: 0;
	margin:0 auto;
}
	#zone.small .post audio{
		width: calc(100% - 70px);
		max-width: 800px;
		margin:-30px auto;
	}
	#zone .post .videonav{
	}
	#zone .post .videonav:hover{
		cursor: pointer;
		opacity: 0.5;
	}
/* small */
#zone.small .post figure{
	margin:100px auto;
}
#zone.small .post video, 
#zone.small .post img {
	width: auto;
	max-width: calc(100% - 70px);
	max-height: calc(100vh - 400px);
}
#zone.small .post video{
	height: calc(100vh - 400px);
}

/* middle */
#zone.middle .post figure{
	margin:30px auto;
}
#zone.middle .post video, 
#zone.middle .post img {
	width: auto;
	max-width: calc(100% - 70px);
	max-height: calc(100vh - 200px);
}
#zone.middle .post video{
	height: calc(100vh - 200px);
}

/* overflow */
#zone.overflow .post figure{
	margin:30px auto;
}
#zone.overflow .post video, 
#zone.overflow .post img {
	width: auto;
	max-width: calc(100% - 70px);
	max-height: calc(100vh + 200px);
}

/* full */
#zone.full .post{
	padding: 0;
}
#zone.full .post figure{
	margin: 0 auto;
}
#zone.full .post video, 
#zone.full .post img {
	height: auto;
	width: 100%;
}

/* captions */
#zone .post figcaption{
	width: 100%;
	left: 0;
	text-align: center;
	font-size:15px;
	margin: 15px 0 0;
	color:#494747;
}
#zone.donker .post figcaption{
	color:white;
}
#zone.full .post figcaption{
	position: absolute;
	bottom: 30px;
	color: white;
}

/* ------------------------------- */
/* panel */
/* ------------------------------- */

#panel-wrapper .panel{
	z-index: 10;
	position: fixed;
	display: none;
	opacity: 1;
	width: calc(100% - 50px);
	height: calc(100% - 60px);
	top:0;
	left:0;
	padding:30px 25px;
	overflow-x:hidden;
	overflow-y: auto;
	transition: .4s ease-in-out;
	background-color: rgba(130,130,130,0.65);
	color:white;
}
	#panel-wrapper .panel:hover{
		cursor: pointer;
	}

/* post + project description */
#panel-wrapper .panel #post-description h1,
#panel-wrapper .panel #project-description h1{
	font-size:90%;
	line-height: 1.2;
}
#panel-wrapper .panel #post-description,
#panel-wrapper .panel #project-description{
	position: relative;
	width: 45%;
	max-width: 700px;
	margin-left: 50%;
}
#panel-wrapper .panel #project-description{
	color:yellow;
}

/* links */
#panel-wrapper .panel #post-links{
	margin-left:50%;
}
#panel-wrapper .panel .post-link{
	display: inline-block;
	margin:20px;
	vertical-align: middle;
}
	#panel-wrapper .panel .post-link img{
		width:100px;
		height: auto;
		margin-bottom:0.5em;
	}
	#panel-wrapper .panel .post-link:hover{
		opacity: 0.75;
		cursor: pointer;
	}

/* ------------------------------- */
/* info + news page */
/* ------------------------------- */
.page{
	position: absolute;
	width: 100vw;
	height: auto;
	min-height: 100vh;
	top: 0;
	left: 0;
	margin: 0;
	padding:0;
	background-color: #ccb6df;
}
.page .content-wrapper{
	position: relative;
	width: 600px;
	padding: 0;
	margin:50px 0 0 73px;
}
.page .content{
	position: relative;
	margin:0;
}
.page hr{
	border:0;
	margin-top:5em;
}

/* ------------------------------- */
/* animations */
/* ------------------------------- */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ------------------------------- */
/* extra media queries */
/* ------------------------------- */

@media screen and (max-width: 750px){
	header .post-title,
	header.donker .post-title{
		max-width: 300px;
	    word-break: normal;
	}
}
@media screen and (max-width: 700px){
	header .post-title,
	header.donker .post-title{
		max-width: 180px;
	    word-break: normal;
	}
}