@charset "UTF-8";

html,body{
	width: 100%;
}

/* 
*  Type Settings 
*/

body{
	font-family: 'Sneak-Regular', 'Helvetica', 'Arial', sans-serif;
	font-size: 32px;
}

@media screen and (max-width: 768px){
	body{
		font-size: 18px;
	}
}

a{
	color: inherit;
	text-decoration: none;
	font-family: 'Sneak-Regular', 'Helvetica', 'Arial', sans-serif;
}

a:hover{
	font-family: 'Sneak-Regular-Italic', 'Helvetica-Oblique', 'Arial-ItalicMT';
}


.arrow-link:before{
	content:"→ ";
}

i{
	font-family: 'Sneak-Regular-Italic', 'Helvetica-Oblique', 'Arial-ItalicMT';
}

.hidden{
	display: none;
}



/* 
*  Layout 
*/

.slidercontainer{
	background-color: #000;
	z-index: 1;
	width: 100%;
	height: 2em;
	vertical-align: baseline;
	padding: .5em;
	text-align: center;
}

.slider {
    width: 200px;

    -webkit-appearance: none;
    appearance: none;

    position: relative;
    top: -.6em;

    height: 0;
    border: 1px solid #FFF;
    outline: none;
}

@media screen and (min-width: 768px){
	.slider{
		width: 400px;
	}
}

.slider:hover {
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 2em;
    height: 2em;

    background: #000;
    border: 2px solid #FFF;
    border-radius: 25px;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #000;
    outline: 2px solid #FFF;
    border-radius: 25px;
    cursor: pointer;
}



/* Head of Page */
header{
	padding: 0.5em;
	padding-bottom: 0;
	color: #FFF;
	background-color: #000;
	position: relative;
	z-index: 3;
}
/* End Head */

.project-header{
	padding: 0.5em;
	cursor: pointer;
}
.project-header h3:before{
	content: '↓';
	display: inline;
}

.project-header h3:hover{
	font-family: 'Sneak-Regular-Italic', 'Helvetica-Oblique', 'Arial-ItalicMT';
}

.project-description{
	font-family: 'Sneak-Mono', Courier, sans-serif;
	font-size: .6em;
	line-height: 120%;
	max-width: 50em;
}

.project-description p, 
.project-description dl {
	margin: 1em;
}
.project-description dl {
	font-family: 'Sneak-Regular', 'Helvetica', 'Arial', sans-serif;
}
.project-description dd {
	padding-left: 1em;
}

.project-bilder{
	width: 100%;
	padding-bottom: 37.5%;
	position: relative;
}

@media screen and (max-width: 768px){
	.project-bilder{
		padding-bottom: 66%;
	}
}


.project-bilder .container-inner{
	position: absolute;
	top: 0;
	bottom:0;
	left:0;
	right:0;
	overflow: hidden;
}

.project-bilder .track{
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.project-img{
	height: 100%;
	position: absolute;
	top: 0;
	display: block;
}

footer{
	min-height: 100vh;
	padding: 0.5em;
	position: relative;
	padding-bottom: 2em;
	color: #FFF;
	background-color: #000;
}

footer dl{
	margin: 2rem 0;
}

footer dl dd{
	padding-left: 2rem;
}


.credits{
	position: absolute;
	bottom: 1em;
	font-size: 14px;
	padding-top: 1em;
}