html, body { margin:0; padding:0; width:100%; height:100%; background-color:#000; color:#fff; font-family: 'Merriweather Sans', sans-serif; font-size:1em; }

#loader { opacity:1; position:absolute; top:50%; text-align:center; color:#fff; width:100%; font-family:Arial; z-index:1; }
body.loaded #loader { opacity:0; }
#loader span { display:inline-block; }

a { color:#fff; text-decoration:none; }

#background-clip { position:fixed; top:0; left:0; width:100%; height:100%; overflow:hidden; /*background-image: url(noise.png); z-index:0;*/ }
#background {
	width:100%; height:100%; background-size:cover; background-position: 30% 50%; background-repeat:no-repeat; opacity:0; visibility:hidden;
	/*position:relative;
	z-index:-1;*/
	-webkit-transform:scale(1.07);
	-moz-transform:scale(1.07);
	-ws-transform:scale(1.07);
	-o-transform:scale(1.07);
	transform:scale(1.07);
}
body.loaded #background {
	opacity:1;
	visibility:visible;
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ws-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
}
body.webgl #background {
	background:none;
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ws-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
}

#wrapper { display:none; width:100%; position:absolute; top:0; left:0; overflow:hidden; }
body.initialized #wrapper { display:block; }

.box {
	border-radius:3px;
	color:#fff;
	text-shadow:1px 1px 2px rgba(0,0,0,.8);
	box-shadow:0 0 2em rgba(0,0,0,.1); margin:2em;
	border-top:1px solid rgba(255,200,180,.2);
	border-left:1px solid rgba(255,240,200,.2);
	border-bottom:1px solid rgba(60,40,20,.2);
	border-right:1px solid rgba(60,40,20,.2);
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
}
.box header h1 { margin:0 0 .2em; font-size:3em; font-weight:normal; line-height:.9em; margin-left:-.076em; }
.box header p { margin:0; font-size:1.3em; font-size:1.2em; }

.box article h2 { margin:1.3em 0 .3em 0; text-shadow:none; font-weight:normal; font-size:1.2em; color:rgba(255,255,255,.5) }
.box article p { margin:0 0 1em 0;}

.box .box-inner { position:relative; padding:5%; }
.box .box-content { position:relative; z-index:1; }
.box .glass { width:100%; height:100%; position:absolute; top:0; left:0; }

.list-tags { margin:0; padding:0; }
.list-tags li { display:inline-block; margin:.16em 0; background:rgba(0,0,0,.3); padding:.1em .4em; border-radius:3px; }

.list-icons { margin:0; padding:0; }
.list-icons li { display:inline-block; font-size:3.5em; margin:.03em .06em; padding:0; line-height:.7em; }
.list-icons li a { display:block; overflow:hidden; }
.list-icons li a span { display:none; }

#mainbox { width:30em; max-width:78%; float:right; margin-right:5%; }
body.js #mainbox {
	opacity:0;
}
body.js.bio #mainbox {
	opacity:1;
}

/* Glass effect */
/* Specular and noise */
.glass {
	overflow:hidden;
	background-image: url(noise.png);
	background-image: -moz-radial-gradient(top left, ellipse cover, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 80%), url(noise.png);
	background-image: -webkit-gradient(top left, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,.3)), color-stop(80%,rgba(255,255,255,0))), url(noise.png);
	background-image: -webkit-radial-gradient(top left, ellipse cover, rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 80%), url(noise.png);
	background-image: -o-radial-gradient(top left, ellipse cover, rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 80%), url(noise.png);
	background-image: -ms-radial-gradient(top left, ellipse cover, rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 80%), url(noise.png);
	background-image: radial-gradient(ellipse at top left, rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 80%), url(noise.png);
}
.glass-inner { position:relative; z-index:-1; width:100%; height:100%; }
/* Ambient initial color */
.glass.enabled .glass-inner { background-color:#000; }
/* Blur effect */
.glass canvas { -webkit-filter:blur(10px); -moz-filter:blur(10px); -ms-filter:blur(10px); -o-filter:blur(10px); filter:blur(10px); }

/* Animations */
@-webkit-keyframes loader {
	0% { -webkit-transform: scale(.5); }
	20% { -webkit-transform: scale(1.5); }
	40% { -webkit-transform: scale(.5); }
	100% { -webkit-transform: scale(.5); }
}
@keyframes loader {
	0% {
		-moz-transform: scale(.5);
		-ms-transform: scale(.5);
		-o-transform: scale(.5);
		transform: scale(.5);
	}
	20% {
		-moz-transform: scale(1.5);
		-ms-transform: scale(1.5);
		-o-transform: scale(1.5);
		transform: scale(1.5);
	}
	40% {
		-moz-transform: scale(.5);
		-ms-transform: scale(.5);
		-o-transform: scale(.5);
		transform: scale(.5);
	}
	100% {
		-moz-transform: scale(.5);
		-ms-transform: scale(.5);
		-o-transform: scale(.5);
		transform: scale(.5);
	}
}

/* Transitions */
#loader {
	-webkit-transition:opacity .3s 0s linear;
	-moz-transition:opacity .3s 0s linear;
	-ms-transition:opacity .3s 0s linear;
	-o-transition:opacity .3s 0s linear;
	transition:opacity .3s 0s linear;
}
#loader span {
	-webkit-transform-origin: 50% 70%;
	-moz-transform-origin: 50% 70%;
	-ms-transform-origin: 50% 70%;
	-o-transform-origin: 50% 70%;
	transform-origin: 50% 70%;
	-webkit-transform: scale(.5);
	-moz-transform: scale(.5);
	-ms-transform: scale(.5);
	-o-transform: scale(.5);
	transform: scale(.5);
}
#loader span.dot1 {
	-webkit-animation: loader 1s ease-in-out .1s infinite;
	-moz-animation: loader 1s ease-in-out .1s infinite;
	-ms-animation: loader 1s ease-in-out .1s infinite;
	-o-animation: loader 1s ease-in-out .1s infinite;
	animation: loader 1s ease-in-out .1s infinite;
}
#loader span.dot2 {
	-webkit-animation: loader 1s ease-in-out .3s infinite;
	-moz-animation: loader 1s ease-in-out .3s infinite;
	-ms-animation: loader 1s ease-in-out .3s infinite;
	-o-animation: loader 1s ease-in-out .3s infinite;
	animation: loader 1s ease-in-out .3s infinite;
}
#loader span.dot3 {
	-webkit-animation: loader 1s ease-in-out .5s infinite;
	-moz-animation: loader 1s ease-in-out .5s infinite;
	-ms-animation: loader 1s ease-in-out .5s infinite;
	-o-animation: loader 1s ease-in-out .5s infinite;
	animation: loader 1s ease-in-out .5s infinite;
}

#wrapper {
	min-height:100%;
	padding-bottom:60px;
	box-sizing: border-box;
	-webkit-perspective: 3000px;
	-moz-perspective: 3000px;
	-mx-perspective: 3000px;
	-o-perspective: 3000px;
	perspective: 3000px;
	-webkit-perspective-origin: 50% 50%;
	-moz-perspective-origin: 50% 50%;
	-ms-perspective-origin: 50% 50%;
	-o-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
}

#background {
	-webkit-transition:all 3s;
	-moz-transition:all 3s;
	-ms-transition:all 3s;
	-o-transition:all 3s;
	transition:all 3s;
}
.loaded #background {
	-webkit-transition:all 8s;
	-moz-transition:all 8s;
	-ms-transition:all 8s;
	-o-transition:all 8s;
	transition:all 8s;
}

a.zoom {
	-webkit-transition: -webkit-transform .15s 0s ease-out;
	-moz-transition: -moz-transform .15s 0s ease-out;
	-ms-transition: -ms-transform .15s 0s ease-out;
	-o-transition: -o-transform .15s 0s ease-out;
	transition: transform .15s 0s ease-out;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
a.zoom:hover {
	position:relative;
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
}

body.js #mainbox { opacity:0; }
body.initialized #mainbox {
	-wekbit-transition: opacity 1.5s;
	-moz-transition: opacity 1.5s;
	-ms-transition: opacity 1.5s;
	-o-transition: opacity 1.5s;
	transition: opacity 1.5s;
}
body.bio.initialized #mainbox {
	-wekbit-transition: opacity 3s;
	-moz-transition: opacity 3s;
	-ms-transition: opacity 3s;
	-o-transition: opacity 3s;
	transition: opacity 3s;
}

#location {
	position:absolute;
	bottom:0em;
	left:0;
	width:100%;
	padding:1.7em 2em .8em;
	transition: bottom .5s ease-in-out, opacity .5s linear;
	background:rgba(0,0,0,0);
}

#location .bg {
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
	position:absolute;
	z-index: -1;
	top:5em;
	left:0;
	width:100%;
	height:100%;
	transition: top .5s ease-out;
}

#location > p {
	display: inline-block;
	opacity: 0;
	font-size:1.1em;
	color:#fff;
	transition: opacity .5s linear;
	font-weight: 100;
}

#location > i {
	color:#fff;
	font-size:1.6em;
	margin-right:.5em;
}

#location:hover .bg, body.show-location #location .bg {
	top:0px;
}

#location:hover p, body.show-location #location p {
	opacity: .4;
}

body.js #location { bottom:-300px; opacity:0; }
body.loaded #location {
	bottom:0;
	opacity:1;
}

/* Responsive */
@media all and (max-height:800px) and (min-height:640px) {
	html, body { font-size: .9em; }
}

@media all and (max-height:640px) {
	html, body { font-size: .8em; }
}

@media all and (max-width:800px) and (min-width:640px) {
	.box { position:static; width:auto !important; margin:1.5em auto!important; }
	.box .box-inner { padding:.5em !important; }
	#mainbox { float:none; }
}

@media all and (max-width:640px) {
	html, body { font-size: .8em ;}
	.box { position:static; width:auto !important; max-width:none !important; margin:1.5em !important; }
	.box .box-inner { padding:1.3em !important; }
	#mainbox { float:none; }
	#wrapper {
		-webkit-perspective: 1000px;
		-moz-perspective: 1000px;
		-mx-perspective: 1000px;
		-o-perspective: 1000px;
		perspective: 1000px;
	}
}

.cookie-banner {
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30px;
	background: rgba(0,0,0,.5);
	border-top: 1px solid #000;
}

.cookie-banner .buttons {
	margin-top: 1.5em;
}

.cookie-banner button {
	background: #ccc;
	border-radius: 2px;
	border: 1px solid #000;
	padding: 5px 10px;
	margin: 0 .5em;
}

.cookie-banner a {
	text-decoration: underline;
}