body {
	margin: 0;
	padding: 0;
	overflow:hidden;
	overflow-x: hidden !important;
	font-family: helvetica, sans-serif;
}

p {
	margin: 0;
	font-size: 13pt;
}


a {
	text-decoration: none;
	color:black;
}

.colophon {
	position: absolute;
	top:15px;
	left:calc(2*(100vw / 3) + 15px);
	width: calc(100vw / 3 - 15px);
}

.colophon div {
	/*opacity: 0;*/
}

.colophon a {
	text-decoration: none;
}

.colophon a:hover {
	text-decoration: underline;
}

.sort {
	position: absolute;
	bottom: 15px;
	left: 15px;
	z-index: 112;
}

.colophon p#name {
	cursor: default !important;
	text-decoration: underline;
}

.colophon p#name:after {
	content: attr(data-content);
	line-height: 20px;
	cursor: pointer;
}

.sort p {
	cursor: pointer;
	display: inline;
	padding-right:10px;
}

.sort p::before {
	content: attr(data-content);
	line-height: 20px;
}

.sort>p {
	cursor: default;
	text-decoration: underline !important;
	display: block;
	float: left;
	padding-right: 15px;
}

.sort p:hover {
	text-decoration: underline !important;
}

div#cats {
	float: left;
}

/* List items */

.list {
	position: absolute;
	width: calc(100vw / 3 *2 - 15px);
	z-index: 2;
	top:15px;
	left: 15px;
}

ul {
	margin:0;
	padding-left: 0px;
	z-index: 111;
	-webkit-column-count: 2;
	-moz-column-count:2;
	column-count: 2;
}

.onecolumn {
	-webkit-column-count: 1;
	-moz-column-count:1;
	column-count: 1;
	width: 50%;
}

.twocolumn {
	-webkit-column-count: 2;
	-moz-column-count:2;
	column-count: 2;
	width: 100%;
}

a {
	text-decoration: underline;
}

li {
	font-size: 13pt;
	line-height: 20px;
	padding-left: 42px;
	color:black;
	list-style: none;
}

li:hover {
	/*color:#D0B21C !important;*/
	text-decoration: underline !important;
	cursor: pointer;
}

p.date {
	font-size: 13pt;
	margin-right: 25px;
}

p.date::after {
	content:'↪';
	margin-top: 20px;
	margin-left: -15px;
	position: absolute;
}


/* Image Column */

.content {
	display: none;
	position: absolute;
	top:50%;
	left: 50%;
	margin-right: -50%;
	-ms-transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	width:auto;
	overflow: hidden;
	z-index: 200 !important;
	background-color: white;
	padding: 20px 30px 10px 30px;
	max-height:93vh !important;
	border: 2px solid black;
}

.caption {
	padding-top: 10px;
	text-align: right;
}

img {
	width: 100%;
}

/*Slideshow*/

.images {
	position: relative;
}

.images img {
	width: 100%;
	display: block;
}

.prev, .next {
	position: absolute;
	opacity: 0;
	height:100px;
	filter: alpha(opacity=0); 
	z-index: 10;
	height:100%;
	width: 50%;
}

.next {
	right:0;
}

.prev:hover {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="30" style="font-size: 20px;"><text y="17">↩</text></svg>'), auto;
}

.next:hover {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="30" style="font-size: 20px;"><text y="17">↪</text></svg>'), auto;
}

#counter {
	position: absolute; 
	float:left;
	color: black; 
	bottom: 0px; 
	padding-bottom: 5px;
	left:0px; 
	transform: rotate(-90deg);
	transform-origin: bottom left;
	z-index: 700; 
	font-size: 12pt; 
}

#close {
	position: fixed;
	top:10px;
	right:5px;
	display: block;
	z-index: 999999;
	cursor: pointer;
}

#close p {
	font-size: 20pt;
}


/*all sizes*/

#pavilion, #girl-on-the-mountain {
	width: 28vw;
}

#stiff-on-the-wings {
	width: 33vw;
}

#gay-agenda {
	width: 45vw;
}

#everything-is-gay-if-i-say-so, #computers-at-work, #leesmagazijn, #final-fabric, #coincidences, #reverie, #introduction, #theres-nothing-to-see-here, #artifacts {
	width: 50vw;
}

#willem-sandberg-1962, #tampopo, #convent-of-pleasure, #simulacrum-het-andere-dier, #simulacrum-het-archief, #simulacrum-t-huis  {
	width: 55vw;
}

#fconijn-poster, #girl-quarter, #de-lennui-au-spectacle, #vice-versa, #morane-havet, #type-specimen-volume-two, #relaxation, #smb, #how-to-think {
	width:57vw;
}

#fconijn-reader, #home-life, #amfi2016, #alstublieft, #repertoire-archeologique, #arias-mobile, .web, #maybe {
	width: 59vw;
}

.web, #maybe {
	width: 63vw;
}

#amfi2017 {
	width: 66vw;
}

#arias-newsletter, #screening-series, #callout-guide, #simulacrum {
	width: 80vw;
}

#callout-guide img {
	width: 100%;
}


.content .ov-scroll {
	width: 70vw;	
	overflow: auto;
	height:80vh;
}

.content .ov-scroll img {
	margin-top: 0;
	display: block;
	margin-bottom: 0;
}

iframe#websites {
	width: 100%;
	height:80vh;
	width: 80vw;
	border:none;
	margin-top: 10px;
}

iframe#berlinframe {
	height: 80vh;
	width: 65vw;
	border:none;
	margin-bottom: -5px;
}

.video-container {
	width: 58vw;
	position: relative;
 	padding-top: 0;
 	height: 0;
}

#gj504b .video-container {
 	padding-bottom: 75%;
}

#vondelpark .video-container {
 	padding-bottom: 56.25%;
}

#antonioni .video-container {
	width: 65vw;
 	padding-bottom: 54.8%;
}

.video-container iframe {
	position: absolute;
	border:none;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}


div.preview {
	display: block;
	position: fixed;
	width: calc(100vw / 3);
	left:15px;
	height:auto;
	z-index: 113;
}

/*div.preview#col2 {
	left:calc(100vw / 3 + 15px);
}

div.preview#col3 {
	left:calc(2*(100vw / 3) + 15px);
}*/

div.preview .thumb {
	position: fixed;
	bottom:15px;
	left:calc(2*(100vw / 3) + 15px);
	background-color: black;
	display:none;
	width: calc(25vw + 20px) !important;
	height:auto;
	border:2px solid black;
}

div.preview .thumb img, div.preview .thumb#callout-guide img  {
	width: 25vw;
	background-color: black;
	height:auto;
	border:10px solid white;
	margin-bottom:-4px;
	cursor: pointer;
}








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

.content>div {
	width: 75vw !important;
}

}




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

body {
	overflow-x: hidden;
	overflow-y: scroll;
}

* {
	overflow-x: hidden;
}

.content * {
	overflow-x: initial;
}

a {
	color:black;
}

.colophon {
	width: calc(100vw - 20px);
	padding:0px 10px 0px 10px;
	position: relative;
	top:10px;
	left: 0px;
	-webkit-column-count: 1;
	-moz-column-count:1;
	column-count: 1;
}

.colophon div {
	opacity: 1 !important;
	margin-left: 40px;
}

.sort {
	position: relative;
	bottom:auto;
	top:60px;
	right:10px;
}

.list {	
	left:0;
	width: calc(100vw - 20px);
	padding:0px 10px 10px 10px;
	position: relative;
	margin-top: 100px;
	height:auto;
}

p.date {
	margin-right: 0;
}

ul {
	-webkit-column-count: 1;
	-moz-column-count:1;
	column-count: 1;
}

.onecolumn {
	width: 100%;
}

.content {
	position: fixed;
	top:0;
	left: 0;
	width: calc(100vw - 4px);
	height: calc(100vh - 4px);
	margin: 0;
	padding: 0;
	max-height: none !important;
    -ms-transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
}

.content>div {
	position: relative;
	top:50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100vw !important;
}

#close {
    position: absolute;
    width: 100vw;
    height: 40px;
    left: 0;
    top:0;
    text-align: right;
    top: calc(50% - 50vh);
}

#close p {
	padding-top: 10px;
	padding-right: 20px;
}

.content div.images, .caption {
	width:calc(100vw - 4px);
}

.images, .ov-scroll {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
}

.caption p {
	padding: 0px 10px 0px 10px;
}

#counter {
	position: absolute !important; 
	left: 10px; 
	top: -30px;
    -ms-transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
}

.web #counter {
	right:auto;
	left:10px;
}

.web {
	margin:0;
}

.video-container {
	width: 100vw !important;
    padding-bottom: 100% !important;
}

.content .ov-scroll {
    width: calc(100vw - 2px);
}

iframe#berlinframe, iframe#websites {
    width: calc(100vw - 2px);
}

}