/* ==========================================================================
   Normalize
   ========================================================================== */
   
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html,button,input,select,textarea{font-family:sans-serif}
body{margin:0}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
h2{font-size:1.5em;margin:.83em 0}
h3{font-size:1.17em;margin:1em 0}
h4{font-size:1em;margin:1.33em 0}
h5{font-size:.83em;margin:1.67em 0}
h6{font-size:.75em;margin:2.33em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
blockquote{margin:1em 40px}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
p,pre{margin:0 0}
code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
q{quotes:none}
q:before,q:after{content:'';content:none}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
dl,menu,ol,ul{margin:0 0}
dd{margin:0 0 0 0}
menu,ol,ul{padding:0 0 0 40px}
nav ul,nav ol{list-style:none;list-style-image:none}
img{border:0;-ms-interpolation-mode:bicubic}
svg:not(:root){overflow:hidden}
figure{margin:0}
form{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
button,input{line-height:normal}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
button[disabled],input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}


/* ==========================================================================
   Main styles
   ========================================================================== */
   
@font-face {
  font-family: 'Apercu';
  src: url('apercu_regular.eot'); /* IE9 Compat Modes */
  src: url('apercu_regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	   url('apercu_regular.woff') format('woff'), /* Modern Browsers */
	   url('apercu_regular.ttf')  format('truetype'), /* Safari, Android, iOS */
	   url('apercu_regular.svg#773d68d038fe7c6746af87cbb1789f49') format('svg'); /* Legacy iOS */
	   
  font-style:   normal;
  font-weight:  400;
  font-display: block;
}  

html {
	height: 100%;
}

* {
	margin: 0;
	padding: 0;
}

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

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

body {
	font-family: "Apercu", Arial, Helvetica, sans-serif;
	font-size: 19px;
	line-height: 26px;
	min-height: 100%;
	background: white;
}

body::before {
	content: '';
	height: 2px; 
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 999;
	background: #3366ff;
}

body#home:not(.bg) {
	background: #3366FF;
}

body#home.bg {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 100%;
}

body#home #bg {    
  background: url('../assets/test_pic.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  height: 100vh;
  width: 100vw;
}

body#home.text-white *{
	color: white;
}

a:link, a:visited {
	color: inherit;
	text-decoration: none;
}

a:hover, a:active {
	color: #3366ff;
}

.desktop-only {
   display: inline;
}

.mobile-only {
   display: none;
}

header, #descr {
	color: black;
}

#home #descr div.inner p {
	width: 100%;
}

#home #content {
	padding: 20px;
}

#descr {
	position: absolute;
	bottom: 20px;
	left: 20px;
}

#home #descr {
	position: relative;
	left: 0;
	padding-top: 75px;
	padding-bottom: 20px;
}

/* #home.bg header, #home.bg #descr {
	color: black;
} */

header, footer {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2;
}

header ul, footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 22px;
}

footer {
	top: auto;
	bottom: 0;
	border: none;
	background: white
}

main {
	padding: 20px;
}

#work main {
	padding: 0;
	background: white;
}

a.background--light, h1.background--light, span.background--light, .background--light a {
  color: black!important;
  transition: color 0.5s;
}

a.background--light:hover, a.background--dark:hover, a.background--complex:hover {
  color: #3366FF!important;
  transition: color 0.5s;
} 

a.background--dark, h1.background--dark, span.background--dark, .background--dark a {
  color: white!important;
  transition: color 0.5s;
}

a.background--complex, h1.background--complex, span.background--complex, .background--complex a {
  color: gray!important;
  transition: color 0.5s;
}

.onwhite #header a, .onwhite #attachments a {
	color: black;
}

#home:not(.bg) a:hover {
	color: white!important;
}

#logo_link {
	width: 100%;
	text-align: center;
}

#works_link {
	left: 20px;
	position: absolute;
}

#about_link {
	right: 20px;
	position: absolute;
}

#home header, #work header {
	position: fixed;
}

.controls {
	position: fixed;
	bottom: 0;
	right: 20px;
	height: 66px;
	z-index: 999;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.counter {
	display: inline-block;
}

.section {
	-webkit-transform: translate3d(0,0,0)
}

@media only screen and (min-width: 768px) {

	.slide {
		height: 100vh;
		position: relative;
	}
	
	.slide img {
		height: 100%;
		width: auto;
	}
	
	.slide .media-wrapper {
		height: 100%;
		padding: 66px 0;
		text-align: center;
	}
	
	.slide.video .media-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.slide img {
		object-fit: contain;
	}
	
	.slide.fullscreen .media-wrapper {
		padding-top: 0;
	}
	
	.slide.fullscreen img {
		object-fit: cover;
		width: 100%;
	}
	
	.slide .caption {
		position: absolute;
		bottom: 0;
		left: 150px;
		right: 150px;
		height: 66px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
}

a.showdetails, a.hidedetails, a.next {
	color: #3366FF;
}

@media only screen and (max-width: 768px) { 
	
	#work header {
		position: relative;
	}

	
	h1.mobile-only {
		padding: 0 15px;
		display: block;
	}
	
	.collapse-group {
		position: relative;
	}
	
	.next {
		padding: 0 15px 15px;
		float: right;
	}
	
	.description {
		padding: 0 15px;
	}
	
	.slides, .collapse {
		padding-top: 15px;
	}
	
	.slide {
		padding-bottom: 15px;
	}
	
	.slide img, .slide iframe {
		width: 100%;
		height: auto;
	}
	
	.slide .caption {
		padding-left: 15px;
		padding-right: 15px;
		display: block;
	}
	
	.controls {
		display: none;
	}
}

#info .text {
	margin-top: 55px;
	padding-bottom: 75px;
	width: 50%;
}

.controls {
	text-align: right;
}	

#anchors {
	display: flex;
}

#anchors li {
	display: inline-block;
	padding-left: 8px;
}

#anchors li a.selected, #anchors li a:hover {
	color: #cc9900;
}

h1 {
	margin: 0;
	padding: 0;
	font: 19px/24px "Apercu";
	display: inline;
}

h1 .cat {
	display: inline;
}

#caption {
	display: block;
}

.btn.showdetails {
	display: block;
}

.btn:hover {
	cursor: pointer;
}

#descr div.inner p {
	width: 50%;
}

.vimeo-overlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 10px;
	right: 0;
}

.vimeo-overlay:hover {
	cursor: pointer;
}


.play-status {
	text-decoration: underline;
	cursor: pointer;
	color: #3366ff!important;
}

.play-status:after {
	position: relative;
	content: 'Play';
}

.slide.loading .play-status:after {
	content: 'Loading';
}

.slide.playing .play-status:after {
	content: 'Playing';
}

.slide.playing .play-status:hover:after {
	content: 'Pause';
}

@media only screen and (max-width: 768px) {
	.slide.playing .play-status:after {
		content: 'Pause';
	}
}

.iframe-wrapper {
	position: relative;
}

.seek {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  z-index: 999;
}

progress.currentPlay,
progress.volumeProg {
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  margin: -2px 0 0;
  padding: 0;
  vertical-align: top;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 100px;
  overflow: hidden;
  z-index: 0;
  background: transparent;
  border: none;
}

.currentPlay::-webkit-progress-value {
  background: #3366FF;
}

.currentPlay::-moz-progress-bar {
  background: #3366FF;
}

.currentPlay::-ms-fill {
  border-radius: 100px
}

input[type=range].time {
  height: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  background: transparent;
  position: relative;
  z-index: 2;
  width: 100%;
}

input[type=range].time:focus {
  outline: none;
}

input[type=range].time::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: rgba(255, 255, 255, .2);
  border-radius: 100px;
}

input[type=range].time::-webkit-slider-thumb {
  height: 12px;
  width: 12px;
  border-radius: 16px;
  background: #3366FF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4px;
}

input[type=range].time:focus::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, .1);
}

input[type=range].time::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: rgba(255, 255, 255, .2);
  border-radius: 0px;
  border: 0px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

input[type=range].time::-moz-range-thumb {
  border: none;
  height: 12px;
  width: 12px;
  border-radius: 15px;
  background: #3366FF;
  cursor: pointer;
}

@media only screen and (min-width: 768px) {

.collapse {
	position: fixed;
	bottom: 66px;
	left: 0;
	padding: 20px;
	background: white;
	z-index: 999;
}

.showdetails, .hidedetails { 
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 998;
}

}

.collapse, .toggled .showdetails, .hidedetails {
	display: none;
}

.toggled .collapse, .toggled .hidedetails {
	display: block;
	width: 100%;
}

#attachments {
	position: absolute;
	bottom: 30px;
	right: 30px;
	text-align: right;
}

#press #attachments {
	position: relative;
	bottom: 0;
	left: 0;
	width: 50%;
	text-align: left;
}

.links_list li{
	display: inline;
	padding-right: 15px;
}

.links_list li:last-child {
	padding-right: 0;
}

#press.links_list li{
	display: block;
	padding-bottom: 13px;
}

#content #selector_list {
	padding-bottom: 30px;
	margin-top: 55px;
}

#selector_list li a.active {
	color: #3366FF!important;
}

#content #list {
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#list li {
	width: 32.5%;
	margin-bottom: 30px;
}

#list dl dt {
	margin-bottom: 20px;
	padding-left: 7px;
}

#list li a img {
	width: 100%;
	height: auto;
}

#list[data-type="all"] li {
	display: inline-block;
}

#list[data-type="performance"] .performance {
	display: inline-block;
}

#list[data-type="video"] .video {
	display: inline-block;
}

#list[data-type="installations"] .installations {
	display: inline-block;
}

#list[data-type="photography"] .photography {
	display: inline-block;
}

.carousel-cell {
  width: 100%; /* full width */
  height: 100vh; /* height of carousel */
}

.carousel-cell.image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0:
}

.carousel-cell.image.fullscreen img {
  object-fit: cover;
}

/* .vimeo iframe, .fit {
	opacity: 0;
}

.vimeo iframe.loaded, .fit.loaded {
	opacity: 1;
}

.vimeo iframe {
	pointer-events: none;
} */

/*! Flickity v2.2.0
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  will-change: transform;
  touch-action: none; -webkit-user-select: none; -webkit-user-drag: none;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
		  tap-highlight-color: transparent;
  -webkit-user-select: none;
	 -moz-user-select: none;
	  -ms-user-select: none;
		  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
   
   
   @media only screen and (max-width: 768px) {
	   
	   body {
		   min-height: auto;
	   }
	   
	   body, h1 {
		   font-size: 16px;
		   line-height: 23px;
	   }
	   
	   .desktop-only {
		   display: none!important;
	   }
	   
	   .mobile-only {
		   display: inline;
	   }
	   
		   #info {
			   display: flex;
			   min-height: 100vh;
			   min-height: calc(var(--vh, 1vh) * 100);
			   flex-direction: column;
		   }
		   
		   main {
			   flex: 1;
		   }
		   
		   #info main {
			   flex: none;
		   }
				  
		#descr, main, footer {
			   padding: 15px; 
		}   
		
		header ul {
			padding: 14px 20px 14px 20px;
		}
		
		#works_link {
			left: 15px;
		}
		
		#about_link {
			right: 15px;
		}
		
		#content #selector_list, #content #list {
			padding: 0;
		}
		
		#content #selector_list {
			margin-top: 35px;
			margin-bottom: 15px;
		}
		
		#list li {
			padding: 0;
			width: 100%;
			margin-bottom: 20px;
		}
		
		#descr div.inner p {
			width: 100%;
		}
		
		#about #descr {
			position: relative;
			margin-top: 80px;
		}
		
		#work {
			overflow: auto;
		}
		
		#work #descr {
			position: relative;
			margin-top: 35px;
		}
		
		.play-vimeo {
			right: 15px;
		}
		
		.fit {
			opacity: 1;
		}
		
		.carousel-cell {
			position: relative;
			height: auto;
			padding-bottom: 15px;
		}
		
		.carousel-cell .caption {
			padding-left: 15px;
			padding-right: 15px;
			display: block;
		}
		
		.carousel-cell.image img {
			position: relative;
			height: auto;
		}
		
		#anchors {
			display: none;
		}
		
		#info .text {
			margin-top: 35px;
			padding-bottom: 0;
			width: 100%;
		}
				
		#press .links_list {
			margin-top: 0;
		}
		
		#press .links_list li {
			padding-right: 0;
			margin-bottom: 15px;
		}

		footer {
			display: block;
			/* position: relative; */
		}
		
		footer ul {
			float: none;
			display: flex;
			justify-content: space-between;
		}
		
		.links_list li {
			padding: 0;
		}
		
		#press.links_list li {
			padding-bottom: 15px;
		}

		#press.links_list li:last-child {
			padding-bottom: 0;
		}
		
		#home #content {
			padding: 0;
		}
		
	}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	*text-indent: -9999px;
}

.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 100%;
}

.hidden {
	display: none !important;
	visibility: hidden;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

.invisible {
	visibility: hidden;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
	* {
		background: transparent !important;
		color: #000 !important; /* Black prints faster: h5bp.com/s */
		box-shadow:none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/*
	 * Don't show links for images, or javascript/internal links
	 */

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group; /* h5bp.com/t */
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}