@charset "utf-8";

/* ------------------------- */
/* 1. Fonts
/* ------------------------- */

/* ------------------------- */
/* 1.1. Fonts
/* ------------------------- */

@font-face {
	font-family: 'Graphik';
  	src: url('../fonts/graphik/Graphik-Regular.eot?#iefix') format('embedded-opentype'),
  		 url('../fonts/graphik/Graphik-Regular.otf') format('opentype'),
	     url('../fonts/graphik/Graphik-Regular.woff') format('woff'), 
	     url('../fonts/graphik/Graphik-Regular.ttf') format('truetype'), 
	     url('../fonts/graphik/Graphik-Regular.svg#Graphik-Regular') format('svg');
  	font-weight: normal;
  	font-style: normal;
}

/* ------------------------- */
/* 2. General
/* ------------------------- */

#elapsed-time {
	position:fixed;
	bottom:10px;
	right:10px;
	font-size:10px;
	font-weight:bold;
}

* {
	-moz-box-sizing:border-box;
		 box-sizing:border-box;
}

body {
	overflow-x:hidden;
	overflow-y:hidden;
	font-family:'Graphik', sans-serif;
	font-size:15px;
	letter-spacing:1px;
	color:#9ED5DF;
	/*background-color:#010101;*/
}

img {
	vertical-align:text-bottom;
}

p {
	margin:0;
}

h1, h2, h3, h4, h5 {
	margin:0;
	font-weight:normal;
}

ul,
ol {
	margin:0;
	padding:0;
	list-style:none;
}

a {
	outline:0;
	color:#9ED5DF;
}

a:hover, a:active, a:focus {
	outline:0;
}

a:hover {
	text-decoration:none;
}

figure {
	margin:0;
}

.clearfix::after {
	content:"";
	display:table;
	clear:both;
}

.html-content {
}

.html-content a {
}

.html-content a:hover {
}

.html-content strong,
.html-content b {
}

.html-content li {}

/* ------------------------- */
/* 3. Header
/* ------------------------- */

#header {
}

/* ------------------------- */
/* 4. Content
/* ------------------------- */

.span-1 {
	width:16.6666%;
}

.span-2 {
	width:33.3333%;
}

.span-3 {
	width:50%;
}

.span-4 {
	width:66.6666%;
}

.column {
	float:left;
	padding:0 10px;
	vertical-align:top;
}

.row {
	/*overflow:hidden;*/
	width:100%;
}

.column.first {
	padding:0 10px 0 0;
}

.column.last {
	padding:0 0 0 10px;
}

.table {
	display:table;
	width:100%;
	height:100%;
}

.table-cell {
	display:table-cell;
	vertical-align:middle;
}

#slideshow {
}

#slideshow > article {
	overflow:hidden;
	position:relative;
	width:100%;
	background-color:#010101;
}

#slideshow > article div.pattern {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../images/patterns/01.png) center center;
	z-index:4999;
	opacity:0.1;
}

#slideshow > article.work header {
	position:absolute;
	top:0;
	left:0;
	padding:0 0 0 40px;
	width:200px;
	height:100%;
	z-index:5000;
}

#slideshow > article.work header p.nav-info {
	/*font-size:30px;*/
	font-size:15px;
}

#slideshow > article.work header p.nav-info span {
	display:inline-block;
	min-width:22px;
}

#slideshow > article.work header h1,
#slideshow > article.work header p.desc {
	line-height:19px;
}

#slideshow > article.work header h1 {
	margin:10px 0 0;
	font-size:15px;
	text-transform:uppercase;
}

#slideshow > article.work header p.desc {
	margin:2px 0 0;
}

#slideshow > article.page div.content {
	position:absolute;
	top:0;
	left:0;
	padding:40px;
	width:100%;
	height:100%;
	z-index:5000;
}

#slideshow > article.page div.content.home header {
	position:absolute;
	top::40px;
	left:40px;
	right:40px;
}

#slideshow > article.page div.content.home header p {
	max-width:260px;
}

#slideshow > article.page div.content.about {
	/*text-align:center;*/
}

#slideshow > article.page div.content.about h1 {
	/*font-size:69px;*/
	font-size:15px;
}

#slideshow > article.page div.content.home div.text,
#slideshow > article.page div.content.about div.text {
	/*margin:20px auto 0;*/
	margin:0 auto;
	max-width:500px;
}

#slideshow > article.page div.content.about h1 {
	margin:0 0 20px;
}

/*
main #slideshow > div header {
	position:absolute;
	top:50px;
	left:50px;
	z-index:9999;
}

main #slideshow > div header h1 {
}
*/

.inner-slideshow {
}

.inner-slideshow > div {
	overflow:hidden;
	padding:0 0;
	width:100%;
	height:100%;
}

#navigation {
	position:absolute;
	top:0;
	right:0;
	padding:0 40px 0 0;
	height:100%;
	z-index:5001;
	text-align:center;
	/*position:fixed;
	bottom:50px;
	right:50px;
	z-index:100;*/
}

#navigation a {
	display:block;
	font-size:30px;
	text-decoration:none;
}

#navigation a.index {
	position:absolute;
	bottom:40px;
	right:40px;
}

#navigation a + a {
	/*margin:0 0 0 20px;*/
}

#index {
	position:absolute;
	top:100%;
	left:0;
	padding:40px;
	width:100%;
	color:#010101;
	background-color:#9ED5DF;
	z-index:100000;
}

#index .index-close {
	position:absolute;
	top:40px;
	right:40px;
}

#index .index-close a {
	display:block;
	font-size:30px;
	text-decoration:none;
}

#index p {
	max-width:260px;
}

#index a {
	color:#010101;
}

#index a:hover {
	text-decoration:none;
}

#index section,
#index footer {
	margin:130px 0 0;
}

#index section div.row {
	padding:10px 0;
	min-height:65px;
	border-top:1px solid #010101;
}

#index section div.row + div.row {
	margin:10px 0 0;
}

#index section div.row:hover {
	color:#fff;
	cursor:pointer;
}

#index section div.row:hover a {
	color:#fff;
}

#index section div.row .image-wrapper {
	position:relative;
	pointer-events:none;
}

#index section div.row .image-wrapper .image {
	display:none;
	position:absolute;
	top:-10px;
	left:280px;
}

#index section div.row:hover .image-wrapper .image {
	display:block;
}

#index section div.row.current,
#index section div.row.current a {
	color:#fff;
}

#index footer {
	padding:10px 0 0 0;
	border-top:1px solid #010101;
	font-size:10px;
	text-transform:uppercase;
}

#index footer ul {
	text-align:right;
}

#index footer ul li {
	display:inline-block;
}

#index footer ul li + li {
	margin:0 0 0 30px;
}

/* ------------------------- */
/* 5. Footer
/* ------------------------- */

#footer {
}

/* ------------------------- */
/* 6. Mobile only 
/* ------------------------- */

/* ------------------------- */
/* 7. Make responsive 
/* ------------------------- */

@media all and (max-width: 1023px) {
}