@font-face {
  font-family: "texgyreheros-regular";
  src: url("fonts/texgyreheros-regular.otf") format("opentype")
}
@font-face {
  font-family: "texgyreheros-bold";
  src: url("fonts/texgyreheros-bold.otf") format("opentype")
}

*{
	box-sizing: border-box;
}
::-webkit-scrollbar {
    display: none;
}
::-moz-selection { background: #C4FF0E; }
::selection { background: #C4FF0E; }

:root{
	--back-color: #171717;
	--back-color-trans: #17171700;
	--front-color: #C6C6C6;

	--padding: 12px;
	--padding-minus: calc(var(--padding) * -1);
	--padding-half: calc(var(--padding) / 2);
	--padding-q: calc(var(--padding-half) / 2);
	--border-radius: 8px;

	--column-width: 500px;
	--column-width-focus: 1000px;
	--menu-width: 380px;
	--menu-width-fixed: 380px;
	--menu-collapse: 160px;
	--border: 1px solid var(--front-color);
	--header-height: 80px;
	--menu-header-height: 130px;
	--social-height: 120px;
}

body, html{
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
body, button{
	font-family: 'texgyreheros-regular', san-serif;
	font-weight: normal;
	font-size: 14px;
	line-height: 1.4em;
	letter-spacing: -0.02em;
	margin: 0;
	padding: 0;
	background: var(--back-color);
	color: var(--front-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
button{
	font-size: 14px;
	line-height: 1.2em;
	background: none;
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
}
p{
	margin: 0 0 var(--padding) 0;
}
p:last-child{
	margin: 0;
}
a{
	color: var(--front-color);
	text-decoration: none;
}
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1, h2, h3, h4{
	font-weight: normal;
	font-size: 14px;
	line-height: 1.4em;
	margin: 0 0 var(--padding) 0;
	padding: 0;
}
h1{
	font-family: 'texgyreheros-regular';
	text-transform: uppercase;
	font-size: 60px;
	line-height: 0.85em;
	margin: 0;
	letter-spacing: -0.04em;
}
.icon--big{
	width: 50px;
	height: auto;
}
svg line{
	stroke: var(--front-color);
}

.align--center{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.align--centerh{
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, 0);
}
.column{
	width: var(--column-width);
	min-width: var(--column-width);
	border-right: var(--border);
	height: 100%;
}
.column > *{
	padding: var(--padding);
}
.header{
	border-bottom: var(--border);
	overflow: hidden;
	height: var(--header-height);
}
.header > h1{
	/*margin-bottom: 0.1em;*/
	white-space: nowrap;
}
.icon{
	width: auto;
	height: 28px;
}


.flickity-viewport{
	height: 100% !important;
}
.carousel-cell {
	transition: left 0.5s;
}


.menu{
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
    width: var(--menu-width);
    min-width: var(--menu-width);
    transition: width 0.5s, min-width 0.5s;
    background: var(--back-color);
    z-index: 1;
}
.menu .header{
	white-space: normal;
    height: var(--menu-header-height);
    transition: height 0.5s;
}
.menu .header h1{
	transition: transform 0.5s;
	transform-origin: 0 0;
}
.menu--hide .menu .header{
	height: var(--header-height);
}
.menu--hide .menu .header h1{
	transform: scale(0.5);
}
.menu--open--mobile{
	display: none;
}
.menu--main{
	position: relative;
	border-bottom: var(--border);
	display: flex;
	padding: 0;
}
.menu--main > *{
	width: 50%;
	transition: opacity 0.5s, width 0.5s, left 0.5s, top 0.5s;
}
.menu--hide .menu--main > *{
	width: 100%;
	transition: opacity 0.5s, width 0.5s, left 0.5s, top 0.5s;
}
.socials{
	padding: var(--padding);
	background: var(--back-color);
	z-index: 1;
}
.socials > *{
	display: block;
	transition: opacity 0.5s;
}
.socials:hover > *{
	opacity: 0.33;
}
.socials:hover > *:hover{
	opacity: 1;
}
.touch .socials:hover > *{
	opacity: 1;
}
.info{
    height: calc(100% - var(--menu-header-height) - var(--social-height));
    overflow: scroll;
}
.info > *{
	margin-bottom: var(--padding);
}
.info h3:not(:first-child){
	padding-top: 1em;
}
.info li {
    display: grid;
    grid-template-columns: 0 1fr;
    grid-gap: 1em;
    align-items: start;
}
.info ul li::before {
  content: '–';
}

.menu--hide .info{
	opacity: 0;
	pointer-events: none;
}


.color--controls{
	position: absolute;
	left: 50%;
	top: 0;
	height: 100%;
	border-left: var(--border);
	transition: opacity 0.5s, width 0.5s, left 0.5s 0.5s, top 0.25s !important;
}
.menu--hide .color--controls{
    border-left: 0;
    border-top: var(--border);
    border-bottom: var(--border);
    top: 100%;
    left: 0;
    transition: opacity 0.5s, width 0.5s, left 0.5s, top 0.25s 0.5s !important;
}
.color--controls > *{
	width: 100%;
	height: 50%;
}
.color--text{
	display: flex;
	border-bottom: var(--border);
}
.color--text > *:nth-child(3){
	border-right: var(--border);
}
.color--select{
	position: relative;
    width: 100%;
    height: 100%;
}
.color--select:after{
	content: '';
	width: 10px;
	height: 10px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 5px;
	background: white;
	mix-blend-mode: difference;
	opacity: 0;
	transition: opacity 0.5s;
}
.color--select.selected:not(.color--text--multi):after{
	opacity: 1;
}
.color--background{
	display: flex;
}


.menu--open{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: e-resize;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s;
}
.menu--hide .menu--open{
	opacity: 1;
	pointer-events: auto;
}
.menu--open > svg{
	transition: transform 0.5s;
}
.menu--open:hover > svg{
	transform: translate(-50%, -50%) rotate(360Deg);
}


.projects{
	position: fixed;
	left: calc(var(--menu-collapse) + (var(--menu-width) - var(--menu-collapse)) / 2);
	top: 0;
	width: calc(100% - var(--menu-collapse));
	height: 100%;
	overflow-x: scroll;
	transition: width 0.5s, left 0.5s;
}
.menu--hide .projects{
	left: var(--menu-collapse);
}
.scroll--wrapper{
	position: relative;
	width: auto;
    height: 100%;
}
.project--column{
	display: flex;
	flex-direction: column;
	transition: width 0.5s;
}
.focussed .project--column{
	width: var(--column-width-focus);
}
.project--column .header{
	display: flex;
	justify-content: space-between;
}
.project--column .header .title--scroll{
    width: calc(100% - 50px - var(--padding));
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    margin-left: var(--padding-minus);
	padding-left: var(--padding);
}
.title--scroll > *{
	transition: transform 5s linear;
    display: inline-block;
}
.project--column .header .title--scroll:after{
	content: '';
	width: 50px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: var(--back-color-trans);
	background: linear-gradient(90deg, var(--back-color-trans) 0%, var(--back-color) 100%);
}
.project--column .header svg{
	opacity: 0;
	transition: opacity 0.25s, transform 0.5s;
	cursor: pointer;
}
.project--column:hover .header svg{
	opacity: 1;
}
.project--column.focus .header svg{
	opacity: 1;
	transform: rotate(45Deg);
}
.project--column .header svg:hover{
	transform: rotate(360Deg);
}
.project--column.focus .header svg:hover{
	transform: rotate(405Deg);
}
.focussed .project--column:not(.focus) .project--content{
	opacity: 0.5;
	filter: blur(10px);
	cursor: pointer;
}
.project--content{
	position: relative;
	height: calc(100% - var(--header-height));
	overflow-y: scroll;
	overflow-x: hidden;
	padding: 0;
	transition: filter 0.5s, opacity 0.5s;
}
.project--content > *{
	padding: var(--padding);
}
.project--block{
	position: relative;
}

.project--info{
	border-bottom: var(--border);
	padding: 0;
}
.project--info--summary{
	padding: var(--padding);
	max-width: var(--column-width);
}
.project--info--main{
    width: var(--column-width-focus);
	display: none;
}
.project--info--main > *{
	width: var(--column-width);
	padding: var(--padding);
}
.project--info--mobile{
	display: none;
}
.project--desc{
	border-right: var(--border);
}
.focussed .project--info--summary{
	display: none;
}
.focussed .project--info--main{
	display: flex;
}
.focussed .desc--long .project--info--main{
	display: block;
}
.desc--long .project--info--main > *{
	width: var(--column-width-focus);
}
.desc--long .project--desc{
	columns: 2;
	width: var(--column-width-focus);
	border-right: 0;
	border-bottom: var(--border);
}
.project--details{
	position: relative;
}
.project--details > *{
	position: relative;
	margin-bottom: var(--padding);
}
.details--header{
	display: flex;
	justify-content: space-between;
}
.desc--long .project--details{
	display: flex;
	padding: 0;
}
.desc--long .project--details > *{
	width: 50%;
	padding: var(--padding);
	margin-bottom: 0;
}
.desc--long .details--header{
	justify-content: flex-start;
}
.desc--long .details--header > *{
	margin-right: 20%;
}
.desc--long .details--tech{
	position: absolute;
	bottom: var(--padding);
	left: var(--padding);
	padding: 0;
}
.desc--long .no--credits .details--tech{
	bottom: auto;
	top: var(--padding);
	left: 50%;
}


.project--items > *:not(:last-child){
	margin-bottom: var(--padding);
}
.project--content .project--block > img,
.project--content .project--block > video{
	position: relative;
	width: 100%;
	height: auto;
	display: block;
}
.project--content iframe{
	pointer-events: none;
}


.vid--play--inline{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#inline--pause{
	display: none;
}
.vimeo--block{
    align-items: center;
    display: flex;
}
.vid--controls{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	transform: translate(0, 0);
	display: flex;
    padding: 8px var(--padding);
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}
.focussed .vid--controls{
	opacity: 1;
	pointer-events: auto;
}
.vid--controls.hide{
	display: none;
}
.vid--controls > *{
	margin-right: var(--padding);
}
.vid--controls > *:last-child{
	margin-right: 0;
}
.vid--controls .icon,
.audio--controls .icon{
	height: 18px;
}
.vid--controls--main{
	display: flex;
	padding: calc(var(--padding_half) / 2) var(--padding);
	align-items: center;
}
.vid--controls--main > *{
	margin-right: var(--padding);
}
.vid--controls--main > *:last-child{
	margin-right: 0;
}
.track{
	position: relative;
}
.track input{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
.vid--timeline{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0;
	cursor: pointer;
}
.track--full{
	position: relative;
	width: 100%;
	height: 6px;
	margin: 12px 0;
	border-radius: 0;
	background: transparent;
}
.track--progress{
	position: absolute;
	width: 100%;
	height: 6px;
	margin: 12px 0;
	border-radius: 0;
	background: #b7b7b7;
	width: 0%;
	z-index: 1;
}
.vid--timeline .track--full,
.vid--timeline .track--progress{
    margin: 8px 0 0 0;
    border-radius: 0;
}
.vid--controls--volume{
	display: flex;
	padding: calc(var(--padding_half) / 2) var(--padding);
	align-items: center;
}
.vid--controls--inline:not(.audio--controls) .vid--controls--volume{
	width: 42px;
    justify-content: center;
}
.vid--controls--volume > *{
	margin-right: var(--padding);
}
.vid--controls--volume > *:last-child{
	margin-right: 0;
}
.vid--volume,
.vid--mute{
	position: relative;
	text-align: right;
	cursor: pointer;
}
.vid--volume{
	width: 80px;
}
.vid--controls--inline:not(.audio--controls) .vid--controls--volume:hover{
	background: var(--button_hover);
}
.vid--mute{
	display: flex;
	/*display: none;*/
}
.mute--sound{
	margin-left: 2px;
}
.vid--controls--viewer .vid--mute .mute--sound path,
.audio--controls .vid--mute .mute--sound path,
.costume--controls .vid--mute .mute--sound path{
	opacity: 0;
}
.vid--controls--viewer .vol--1.vid--mute .mute--sound path:nth-child(3),
.audio--controls .vol--1.vid--mute .mute--sound path:nth-child(3),
.costume--controls .vol--1.vid--mute .mute--sound path:nth-child(3){
	opacity: 1;
}
.vid--controls--viewer .vol--2.vid--mute .mute--sound path:nth-child(2),
.audio--controls .vol--2.vid--mute .mute--sound path:nth-child(2),
.costume--controls .vol--2.vid--mute .mute--sound path:nth-child(2){
	opacity: 1;
}
.vid--controls--viewer .vol--3.vid--mute .mute--sound path:nth-child(1),
.audio--controls .vol--3.vid--mute .mute--sound path:nth-child(1),
.costume--controls .vol--3.vid--mute .mute--sound path:nth-child(1){
	opacity: 1;
}
.muted.vid--mute .mute--sound{
	opacity: 0;
}

.vid--play{
	position: relative;
    text-align: left;
    height: 30px;
}
.vid--play > *{
	cursor: pointer;
	display: block;
}
#vid--pause{
	display: none;
}
.vid--play.playing #vid--pause{
	display: block;
}
.vid--play.playing #vid--play{
	display: none;
}
.vid--time{
	white-space: nowrap;
}
.track input[type=range] {
	width: 100%;
	padding: 12px 0;
	margin: 0;
	background-color: transparent;
	-webkit-appearance: none;
	height: 100%;
}
.track input[type=range]:focus {
	outline: none;
}
.keyboard--controls .track input[type=range]:focus {
	outline: 1px auto blue;
}
.track input[type=range]::-webkit-slider-runnable-track {
	background: transparent;
}
.track input[type=range]::-webkit-slider-thumb {
	margin-top: -5px;
	width: 0px;
	height: 0px;
	border-radius: 50%;
	border: 0;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
}
.track.vid--volume input[type=range]::-webkit-slider-thumb {
	margin-top: -5px;
	height: 12px;
}
.track input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}
.track input[type=range]::-moz-range-track {
  background: transparent;
}
.track input[type=range]::-moz-range-thumb {
  width: 15px;
  height: 14px;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 10px;
  cursor: pointer;
}
.track input[type=range]::-ms-track {
  background: transparent;
}
.track input[type=range]::-ms-fill-lower {
  background: transparent;
}
.track input[type=range]::-ms-fill-upper {
  background: transparent;
}
.track input[type=range]::-ms-thumb {
  width: 15px;
  height: 14px;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 0px;
}
.vid--open{
	padding: calc(var(--padding_half) / 2) var(--padding);
    width: 55px;
    height: 42px;
    position: relative;
    cursor: pointer;
    position: absolute;
    right: 0;
    margin-right: 0;
}
.vid--close{
	cursor: pointer;
    width: 42px;
    height: 42px;
    position: relative;
}
.vid--close img{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45Deg);
	transition: transform 0.5s;
}
.vid--close:hover img{
	display: block;
	transform: translate(-50%, -50%) rotate(-45Deg);
}
.vid--close--mobile{
	display: none;
}
.viewer--idle .vid--controls{
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity 0.5s !important;
}
input[type=range] {
  width: 100%;
  margin: 12px 0;
  background-color: transparent;
  -webkit-appearance: none;
  height: 4px;
}
input[type=range]:focus {
  outline: none;
}
.keyboard--controls input[type=range]:focus {
  outline: 1px auto blue;
}
input[type=range]::-webkit-slider-runnable-track {
  background: #FFFFFF;
  border: 0px solid rgba(0, 1, 1, 0);
  border: 0;
  border-radius: 1.3px;
  width: 100%;
  height: 2px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -6.5px;
  width: 15px;
  height: 14px;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #FFFFFF;
}
input[type=range]::-moz-range-track {
  background: #FFFFFF;
  border: 0px solid rgba(0, 1, 1, 0);
  border: 0;
  border-radius: 1.3px;
  width: 100%;
  height: 2px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 0px;
  height: 0px;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 10px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 7.5px 0;
  color: transparent;
  width: 100%;
  height: 2px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: #FFFFFF;
  border: 0px solid rgba(0, 1, 1, 0);
  border: 0;
  border-radius: 2.6px;
}
input[type=range]::-ms-fill-upper {
  background: #FFFFFF;
  border: 0px solid rgba(0, 1, 1, 0);
  border: 0;
  border-radius: 2.6px;
}
input[type=range]::-ms-thumb {
  width: 0px;
  height: 0px;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 0px;
}


.project--solo{
	position: relative;
	left: var(--menu-width);
	width: calc(100% - var(--menu-width));
}
.project--solo .project{
	width: 100%;
}
.project--solo .project--info--main{
	width: 100%;
}
.project--solo .project--info--main > * {
    width: 50%;
}
.project--solo .desc--long .project--desc{
	width: 100%;
}
.project--solo .desc--long .project--info--main > *{
	width: 100%;
}


@media only screen and (max-width: 1400px) {

	:root{
		--column-width-focus: calc((100vw - var(--menu-width-fixed)) * 0.95);
	}

}



@media only screen and (max-width: 800px) {

	:root{
		--padding: 8px;
		--menu-header-height: 70px;
	    --header-height: 44px;
	    --social-height: 36px;
		--color-width: 140px;
	    --column-width: 90vw;
	    --column-width-focus: 90vw;
	    --menu-collapse: 100%;
	}

	body, h2, h3, h4{
	    font-size: 13px;
	    line-height: 1.4em;
	}

	h1{
		font-size: 30px;
		line-height: 0.85em;
	}
	.icon--big{
		width: 30px;
	}


	.menu{
		flex-direction: column-reverse;
		height: var(--menu-header-height);
		top: auto;
		bottom: 0;
		width: 100vw;
		min-width: 100vw;
		border-right: 0;
	}
	.menu .header{
		position: relative;
		width: calc(100% - var(--color-width));
	    z-index: 1;
	    background: var(--back-color);
	    border-top: var(--border);
	    border-bottom: 0;
	}
	.menu--open--mobile{
		display: block;
		position: absolute;
		right: var(--padding);
		top: 50%;
		transform: translate(0, -50%);
		padding: var(--padding-half);
	}
	.menu--open--mobile svg line{
		transition: transform 0.5s, opacity 0.5s;
	}
	.menu--mobile--open .menu--open--mobile svg line:nth-child(2){
	    transform: translate(0, 10.839px);
	    opacity: 0;
	}
	.menu--mobile--open .menu--open--mobile svg line:nth-child(3){
	    transform: translate(0, -10.839px);
	    opacity: 0;
	}
	.menu--main,
	.info{
	    position: absolute;
	    width: 100%;
	    top: 0;
	    left: 0;
	}
	.color--controls{
	    z-index: 1;
	    height: var(--menu-header-height);
	    width: var(--color-width);
	    right: 0;
	    border-top: var(--border);
	    left: auto;
	}
	.socials{
		z-index: 0;
	    width: 100%;
	    display: flex;
	    justify-content: space-around;
	    border-top: var(--border);
	    transition: transform 0.5s;
	}
	.info{
		z-index: -1;
		height: calc(100vh - var(--menu-header-height) - var(--social-height) + 2px);
		background: var(--back-color);
		transition: transform 0.5s;
		border-top: var(--border);
	}
	.menu--mobile--open .socials{
		transform: translate(0, -100%);
	}
	.menu--mobile--open .info{
		transform: translate(0, calc(-100% - var(--social-height) + 1px));
	}
	.menu.open .socials{
		transform: translate(0, -100%);
	}
	.menu--open{
		display: none;
	}
	.menu--hide .menu .header {
	    height: var(--menu-header-height);
	}
	.menu--hide .menu .header h1 {
	    transform: scale(1);
	}
	.menu--hide .color--controls {
		width: var(--color-width);
	    border-left: var(--border);
	    border-top: var(--border);
	    border-bottom: 0;
	    top: 0;
	    left: auto;
	    transition: opacity 0.5s, width 0.5s, left 0.5s, top 0.25s 0.5s !important;
	}
	.projects{
		left: 0;
		width: 100%;
		height: calc(100% - var(--menu-header-height));
	}
	.project--column .header svg{
		display: none;
	}
	.project--column .header .title--scroll{
		width: 100%;
	}

	.project--info--mobile{
		display: block;
	    border-bottom: 0;
        border-top: var(--border);
	}
	.project--info--mobile .project--info--main{
		display: block;
	}
	.project--details{
	    position: inherit;
	}
	/*.details--header{
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    padding: var(--padding);
	}*/
	.project--desc{
		padding: var(--padding);
		border-bottom: var(--border);
	}
	.desc--long .project--desc{
		columns: 1;
	}
	.desc--long .project--details > * {
	    width: 100%;
	    padding: var(--padding);
	    margin-bottom: 0;
	}
	.desc--long .details--header {
	    justify-content: space-between;
	}
	.desc--long .details--header > * {
	    margin-right: 0;
	}
	.desc--long .details--tech {
	    position: relative;
	    bottom: 0;
	    left: 0;
	}
	.desc--long .project--details {
	    display: block;
	    padding: 0;
	}
	.desc--long .no--credits .details--tech {
	    top: 0;
	    left: 0;
	}

	.is-selected .vid--controls{
		opacity: 1;
		pointer-events: auto;
	}
	.vid--play{
		height: 20px;
	}
	.vid--controls .icon, .audio--controls .icon {
	    height: 16px;
	}
	.track--full,
	.track--progress{
		height: 3px;
	}
	.vid--timeline{
		display: none;
	}

}







@media only screen and (max-width: 340px) {

	body{
		font-size: 14px;
	}

}