/* check all transitions have -webkit- version */
	/* for flex, transforms etc */
* {
	list-style:none;
	margin:0;
	outline:none;
	padding:0;
	text-decoration:none;
  -webkit-box-sizing: border-box;
  box-sizing:border-box;
}

@font-face {
	font-family: Plain Medium;
	src: url('/assets/font/Plain-Medium.otf');
}

:root{
--grey:#666;
--small-font:15px;
--large:35px;
--grid-font:2.1vw;
--thumbnail-font:2.5vw;
--margin:140px;

--lineclamp:5;
--thumbnail-grid: span 6;
--hoverFont:15px;

--name-col:1 / span 3;
--name-view:block;

--age-col:3 / span 1;
--age-view:none;

--cat-col:4 / span 1;
--cat-view:none;

--style-col:4 / span 2;
--style-view:block;

--org-col:6 / span 3;
--org-view:block;

--type-col: 9 /span 2;
--type-view:none;

--city-col:9 / span 2;
--city-view:block;

--country-col:11 / span 2;
--country-view:inline;

--year-col:12 / span 1;
--year-view:none;

--imagehover: 1;

--alphhover:#666;
--filterhover: white;
--textHover: white;
--arrowfont: 20px;
}
html{
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	scrollbar-color: white black;
	/* scroll-behavior: smooth; */
}
body{
	background-color:black;
	color:white;

  font-family: 'Plain Medium';
  font-size: var(--small-font);

	overflow-y:scroll;
	overflow-x: hidden;

}
::selection {
    background: #eee;
    color: #000;
}

/* Image lazy load via
https://davidwalsh.name/lazyload-image-fade */
 img {
	/* opacity: 0; */
}
canvas{
	display:none;
	position:fixed;
	top:0;
	left:0;
	background-color:rgba(0, 0, 0, .8);
	z-index: 500;
}
.imgstoload{
	opacity:0
}
.loadedimg{
	opacity:1
}
.asyncImage{
	opacity:0
}
.showImage{
	opacity:1;
}
/*
img[data-src] {
	opacity: 0;
} */

/* All of the fixed top */

.headerWrap{
	position: fixed;
	top:0;
	left:0;
	width:calc(100% - 20px);
	float:left;
	height:125px;
	/* background-color:blue !important; */
	/* border: 1px solid white; */
	margin: 0px 10px 10px 10px;
	padding-top:20px;
	background-color:black;
	z-index: 10;
	/* opacity:0; */

	transition: opacity .2s ease;
	-webkit-transition: opacity .2s ease;
}

/* Top part of fixed top: Title, Page selection, about page */

	.headerTop{
		display:grid;
		-ms-grid-template-columns: repeat(12, 1fr);
		grid-template-columns: repeat(12, 1fr);
		-webkit-grid-column-gap:9px;
		grid-column-gap: 9px;
  	align-items: baseline;
		font-size:var(--large);
		/* background-color:pink; */
		height:66%;

	}
			.headerTop div{
				white-space:nowrap;
				text-overflow:"...";
				overflow:hidden;
			}

			/* Title */

			.title{
				grid-column-start: 1;
				grid-column-end: 7;
				white-space: nowrap;
			}
			.undertitle{
				position:absolute;
				top:53px;
				left:0px;
				font-size:var(--large);
				transition: opacity .5s ease;
			}

			.mouseMovements{
				display:none;
				position:fixed;
				top:25px;
				left:10px;
		    line-height: .9;
				font-size:30px;
				z-index: 1000;
			}

			/* Page selection */

			.pages{
				display:flex;
				grid-column-start: 7;
				grid-column-end: 10;
				font-size: var(--small-font);
				color:var(--grey);
				cursor:pointer;

			}
					.pages div:hover{
						color:white !important;
					}
					.imagePage{
						color:white;
					}
					.imagePage:hover{
						color:white
					}
					.textPage{
						margin-left: 5px;
					}

			/* About page */
			.lastlinks{
				color:var(--grey);
				grid-column: 11/span 2;
				cursor:pointer;
				display:flex;
				justify-content: space-between;
				transition:opacity .5s ease;
			}

			.info{
				cursor:pointer;
				color:var(--grey);
			}

			.info:hover{
				color:white
			}


			/* .square{
				height:28px;
				width:28px;
				margin-top:6px;
				background-image: url(/assets/icons/cursors/cursor2.svg);
				/* background-position: center;
				background-repeat: repeat-x;
				background-size: auto;
				} */
			.square{
				height:28px;
				width:28px;
				margin-top:7px;
				filter: invert(.7);
			}

			.square:hover{
				filter: invert(0);
			}

/* scroll classes for Subfilters */

.scroll-down .subfilters {
  /* transform: translate3d(-100%, 0%, 0); */
	opacity:0 !important;
	/* z-index:-1 !important; */
}

.scroll-up .trigger-menu-wrapper {

  /* transform: none; */
	opacity:1;
	z-index:40;
}
.scroll-up .trigger-menu-wrapper:not(selector) {

  /* transform: none; */
	/* opacity:1;
	z-index:40; */
}
/* Bottom part of top: Filters and Selections */

	.headerFilters{
		position:relative;
		display:grid;
		-ms-grid-template-columns: repeat(12, 1fr);
		grid-template-columns: repeat(12, 1fr);
		-webkit-grid-column-gap:9px;
		grid-column-gap: 9px;

		height:36px;
		color:var(--grey);

		background-color:black;
		margin-top: 30px;
    z-index: 20;
    padding-top: 10px;
		padding:10px 0px 40px 0px;
		transition:opacity .5s ease;
	}

		/* Sort by: City Country Organizer... */

		.sorting{
			grid-column:span 6;
			display:flex;
			/* align-items: flex-end; */
			white-space:nowrap;
			overflow:hidden;
    	flex-wrap: wrap;

	}


	/* .sorting div{
			opacity:0.5;
			transition:opacity .2s ease;
	}
	.sorting:hover div {
			opacity:1
	} */
				.sortby{
					color:white;
					cursor:pointer;
					margin-right:8px;
					/* opacity:1 !important; */
			}

			.myfilters:hover + .sortby{
				color:pink !important;
			}
				.myfilters{
					display:flex;
				}
				.sorter{
					display:flex;
					align-items: flex-end;
				}
						.filter{
						margin-right:8px;
						cursor:pointer;
						/* text-transform: uppercase; */
						-ms-user-select: none;
								user-select: none;
						/* transition: color .1s ease-out; */
						}
						.myfilters:hover ~ .sortby{
							color:var(--grey)!important;
						}
						#filterx {
							/* height: 20px;
							width: 25px; */
							display:none;
							cursor:pointer;
							padding-left:1px;
							/* padding-top:1px; */
							position:fixed;
							top:0;
							left:0;
							height:100px;
							z-index: 10000
						}
						#filterx img{
							height:120px;
						}
						#hoverDisplay {
							text-transform: uppercase;
							display:block;
							position:fixed;
							cursor:pointer;
							padding-left:1px;
							/* padding-top:1px; */
								position:fixed;
							top:0;
							left:0;
							/* height:100px; */
							background-color:black;
							z-index: 20;
							/* z-index: -10; */
							color:white;
							padding:3px 5px;
							white-space: nowrap;
							/* border:1px white solid; */
							/* font-size: var(--small-font); */
						}
						#filterx img{
							height:120px;
						}

						#filterx img:hover{
							filter: invert(.7);
							}
							.filterclose{
								color:white;
								font-size: 20px;
								transform: translate(-3px, -3px);
								/* background-color:pink; */
								padding: 0 3px;

							}
					#city{
						color:var(--grey);
					}
					#country{
						color:var(--grey);
					}
				.filter:hover{
					color:white !important;
				}
/* no selection*/
.noselect{
	-ms-user-select: none;
			user-select: none;
}
/* Telescope */

	.telescope{
		/* background-color:pink */
	}
		#line{
			/* position:fixed; */
			padding-left: 16px;
			width:200px;
			/* padding-bottom:3px; */
		}
		#tele{
			position:absolute;
			/* margin-bottom:.25em; */
			height:12px;
			width:12px;
			top:41px;

			cursor: ew-resize;
			/* z-index: 2000; */
			transform: translateX(-188px);
		}



		/* Selected: Lausanne x  */

		.selections{
			grid-column:7	/span 3;
			/* color:#444; */

			transition: transform .6s ;
			-webkit-transition: transform .6s ;

			/* padding-top:50px; */
			width: 100%;
			/* left:10px;

			top:140px; */
			/* grid-column:8/span 2; */
			display:flex;
			/* align-items: flex-end; */
			background-color:black;
			z-index: 10;
			white-space: nowrap;
			overflow:hidden;
		}
				/* Selected: */
				.select{
					color:white;
				}
				/* Lausanne */
				.selected{
					padding-left: 6px;
					/* text-transform: uppercase; */
					color:white;
					white-space: nowrap;
					text-overflow: ellipsis;
    			overflow: hidden;

				}
				/* x button */
				.x{
					display:none;
					padding-left: 5px;
					/* font-size:20px; */
					/* transform: translateY(-3px); */
					color:white;
					/* font-size: 12px; */
					/*vertical-align: middle;*/
					/* padding-top:1px; */
				}
				.selection:hover .selected{
					color:var(--grey);
				}
				.selection:hover .x{
					/* color:var(--grey); */
			    filter: invert(.7);
				}

				.selection{
					display:flex;
					/* cursor:pointer; */
					min-width: 120px;
					align-items: baseline;
					cursor:pointer;
				}
		/* Lists of subfilters */

		.subfilters{
			/* position:fixed; */
			position:fixed;

			height:0px;
			top:155px;
			left:0;

			width:100%;
			overflow:hidden;

			background-color:black;

			transition: height .5s, opacity .3s ease , transform .2s;
		  -webkit-transition: height .5s, opacity .3s ease, transform .2s;

			/* opacity:1; */
			z-index: 200;
			/* -ms-user-select: none;
					user-select: none; */

		}

/* -webkit- ?????? */
		.subfilterDetails{
			display: none;
			/* display: grid; */
			-ms-grid-template-columns: repeat(12, 1fr);
			grid-template-columns: repeat(12, 1fr);

			-webkit-grid-column-gap:9px;
			grid-column-gap: 9px;

			grid-template-rows:repeat(7, 18px);
			grid-auto-flow: column;
			margin: 0px 10px 0px 10px;

			color:white;
			/* background-color:black; */
			margin-bottom: 40px;
			/* background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(250,250,250,0)), color-stop(.6,black)); */


		}

		.years::after{
			content:" years"
		}
		.slideArrow{
			cursor:pointer;
			-ms-user-select: none;
					user-select: none;

		}
		#namearrow, #agearrow, #stylearrow, #orgarrow{
			grid-column:7;
			grid-row:7;
		}
		.emptyList{
			color:#333;
			cursor: default !important;
		}
		.inList{
			color:var(--grey);
		}
		.inList:hover{
			color:white;
		}

		/* instead make subfilterdetailsclass and fix javascript accordingly */
		#ages{
			-ms-grid-template-columns: repeat(12, 1fr);
			grid-template-columns: repeat(12, 1fr);

		}
		/* Refer everything but grid column as subfilterclass, make seperate column class */

			.openFilter{
				height:145px;
			}
			/* .closedFilter{
				height:0px;
			} */

				/* Individual subfilters */

				.sp2{
					grid-column-start:span 2;
					cursor:pointer;
					white-space: pre;
					text-overflow: ellipsis;
    			overflow: hidden;
					color:var(--filterhover);
					/* transition:color .1s ease; */
				}
				.sp2:hover{
					color:white !important;
					/* transition:color .1s ease; */

				}

.videolist{
	position: relative;
	/* margin-top:100px; */
	width:calc(100% - 20px);

	margin: 170px 10px 30px 10px;
	z-index: 0;
	transform:translateY(0px);

	transition: transform .5s ;
	-webkit-transition: transform .5s ;
	/* background-color:thistle; */

}
#indexText{

	color:var(--textHover);

}

	/* List of image thumbnails */
	.videoImages{

		display: grid;

		-ms-grid-template-columns: repeat(24, 1fr);
		grid-template-columns: repeat(24, 1fr);

		-webkit-grid-column-gap:9px;
		grid-column-gap: 9px;

		-webkit-grid-row-gap:9px;
		grid-row-gap: 9px;

		/* padding-top:9px; */
		cursor: pointer;

		font-size:var(--large);
		z-index: 10;
	}

		  .thumbnail{
				position: relative;
				grid-column-start: var(--thumbnail-grid);
				z-index: 20;
				opacity:1;
				transition: opacity .2s ;
			}

			.thumbnail:hover img{
				opacity:0.6;
				/* transition:opacity .07s ease; */
				/* filter:blur(2px) */

			}
			.thumbnail:hover .namehover{
				opacity:1;
				z-index: 50;
				/* transition:opacity .07s ease; */

			}
			.namehover{
				opacity:0;
				font-size:var(--grid-font);
				/* font-size: 15px; */
				padding:2px 3px;
				position:absolute;
				color:white;
				display: -webkit-box;
			  -webkit-box-orient: vertical;
			  -webkit-line-clamp: var(--lineclamp);
			  overflow: hidden;
				white-space: break-spaces;
			}
			.thumbnail img{
				width:100%;
				z-index: 21;
			}
			.thumbnailDetails{
				position: absolute;
				color: white;
				opacity: 0;
				top: 0;
				z-index: -1;
				font-size: var(--thumbnail-font);
			}

	/* Lists of videos */
	.videoTexts{
		font-size:var(--grid-font);
		margin-top:40px;
		/* animation:rise .3s ease forwards; */

	}
		.singlevideo{
			display: grid;
			-ms-grid-template-columns: repeat(12, 1fr);
			grid-template-columns: repeat(12, 1fr);
			-webkit-grid-column-gap:9px;
			grid-column-gap: 9px;

			border-bottom: 1px solid var(--grey);
			text-overflow: ellipsis;
			overflow:hidden;
			cursor: pointer;
			line-height: 1.5;
			white-space: nowrap;
		}
		.singlevideopetit{
			display: grid;
			-ms-grid-template-columns: repeat(12, 1fr);
			grid-template-columns: repeat(12, 1fr);
			-webkit-grid-column-gap:9px;
			grid-column-gap: 9px;

			/* border-bottom: 1px solid #444; */
			text-overflow: hidden;
			cursor: pointer;
			/* transition: font-size .1s; */
			line-height: 1.5;
			white-space: nowrap;
		}
		.singlename .petit{
			padding-bottom:220px;
		}
		.singlevideo:hover{
			color:white;
		}
		.singlevideopetit:hover + .singlevideo{
			color:white;
		}
				.singlevideo div{
					/* white-space:nowrap; */
					text-overflow:ellipsis;
					overflow:hidden;
					-ms-user-select: none;
							user-select: none;

				}
			.petit{
				color:var(--grey)!important;
				cursor:default;
				font-size: var(--small-font)!important;
				border:none !important;
				text-transform: capitalize;
			}
				.listname{
					display:var(--name-view);
					grid-column: var(--name-col);
				}

				/* .tooltip {
				    text-decoration:none;
				    position:relative;
				} */
				#tooltip-span {
					position:absolute;
				    display:none;
				}
				.tooltip:hover #tooltip-span {
				    display:block;
				    position:fixed;
				    overflow:hidden;
				}
				.listname:hover ~ #nameVideo{
					color:white;
				}
				.liststyle{
					display:var(--style-view);
					grid-column: var(--style-col);
				}
				.singlevideo:hover > .listname::after{
					/* content: "*";
					color:#444; */
				}
				.singlevideo:hover > div{
					/* text-decoration:underline; */
				}
				.listcity{
					display:var(--city-view);
					grid-column: var(--city-col);
				}
						.listcountry{
						display:var(--country-view);
						grid-column: var(--country-col);

						}

				.listyear{
					display:var(--year-view);
					grid-column: var(--year-col);
				}
				.listorg{
					display:var(--org-view);
					grid-column: var(--org-col);
				}
				.listage{
					display:var(--age-view);
					grid-column: var(--age-col);
				}
				.listcat{
					display:var(--cat-view);
					grid-column: var(--cat-col);
				}
				.listtype{
					display:var(--type-view);
					grid-column: var(--type-col);
				}

	.col{
	display:inline-block;
	}
	.zoom{
		grid-column:11 / span 2;

		align-self:flex-start;
		align-items: flex-end;
		display: flex;
		/* width:100%; */
		color:white;
		background-color: black;
    z-index: 25;
		}
		.grey{
			color:var(--alphhover);
		}
		.alphabet{
			color:var(--alphhover);
		}
		.white{
			color:white;
		}
			.slider {
				position: relative;
			  -webkit-appearance: none;
			  width: 100%;
			  height: 1px;
				margin-left: 10px;
				margin-bottom:8px;
			  background: white;
			  outline: none;

			}

			.slider:hover {
			  opacity: 1;
			}

			.slider::-webkit-slider-thumb {
			  -webkit-appearance: none;
			  appearance: none;
			  width: 12px;
			  height: 12px;
			  border-radius: 50%;
			  background: white;
			  cursor: grab;
			}

			.slider::-moz-range-thumb {
				appearance: none;

			  width: 12px;
			  height: 12px;
			  border-radius: 50%;
				background: white;
				cursor: grab;
				border: none;
			}
					#percent{
						padding-left:10px;
						padding-bottom:1px;
						font-size: 11px;
					}



/* MODAL */
.modal{
	display: none;
	position: fixed;
	z-index: 1000;
	/* padding-top: 32vh; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: black;
	overflow-y:scroll;

}

/* info modal */

#infomodal{
	padding-top:26px;
}
  .infoWrapper{
		display:flex;

		margin: 0px 10px 10px 10px;

	}
/* don't need a 12x grid here! */

	.modHeaderWrap{
		display:grid;
		-ms-grid-template-columns: repeat(12, 1fr);
		grid-template-columns: repeat(12, 1fr);

		-webkit-grid-column-gap:9px;
		grid-column-gap: 9px;

		width:calc(100% - 20px);
		margin: 0px 10px 10px 10px;
		padding-top:20px;

		align-items: baseline;
		z-index: 20;
	}

	.modtitles{
		display: flex;
		justify-content: space-between;
		width:100%;

		grid-column: 1/span 11;
		font-size:var(--large);
		cursor:pointer;
		z-index: 20;

	}
	.modtitle:hover{
		color:var(--grey);
	}
	.modtitle:hover ~ .descWrap{
		background-color:pink !important
	}


	/* why do you have to add 10 to left here??? */
	.modundertitle{
			position:absolute;
			top:53px;
	}
	/* X button */
	#modalx{
		grid-column-start:12;
		cursor:pointer;
		display:flex;
		justify-content: flex-end;
		z-index: 20;
	}
	#modalx img:hover{
		filter: invert(.7);

	}
  #infomodalx{
		position:fixed;
		right:10px;
		top:26px;
		cursor:pointer;
	}
	#infomodalx:hover{
		filter: invert(.7);

	}

/* about page info */

.centerwrap{

  font-size: 30px;
	width: calc(80% - 20px);
	margin: auto;
	max-width:1000px;
}
.par{
  line-height: 40px;
  margin-bottom:var(--margin);
  letter-spacing: normal;
	padding-bottom:10px;

}
#aboutPar div:not(:last-of-type){
	padding-bottom:30px;
}


.titler{
  text-align:center;
  margin-bottom:50px;

}
.subtitle{
	margin-bottom:30px;

}
    .allDetailsWrap{
      grid-column:3 / span 8;
			padding:70px 40px 0px 40px;
    }
    .about{
    }

.upcoming{
	position:relative;
  width:100%;
  margin-top: 50px;
	z-index: 0
}
  .upcomingdetail{
		position:relative;

		display:grid;
		-ms-grid-template-columns: repeat(12, 1fr);
		grid-template-columns: repeat(12, 1fr);
		-webkit-grid-column-gap:9px;
	  grid-column-gap: 9px;

    border-bottom: 1px solid var(--grey);

		padding: 5px 0px;
  }

	.dateIndex{
		height: 800px;
		overflow: hidden;
		padding-bottom:30px;
	}

	.allDates{
		grid-column: 1/span 2;
	}

		.datesYear{
		}
		.date{
			white-space: nowrap;
		}
		.whenwhere{
			grid-column: 4/span 6

		}

		.content{
			grid-column: 10 / span 3;
			/* word-break: break-all;
		  hyphens: auto;
		  -ms-hyphens: auto;
		  -moz-hyphens: auto; */
		}
    .old{
      color:var(--grey);
    }
.gradient{
	background: linear-gradient(to bottom, transparent 0%, black 100%);
  height: 600px;
  width: 100%;
  z-index: 1;
  transform: translateY(-600px);
  overflow: hidden;
	position:absolute;
}

.datePlus{
	cursor: pointer;
  display: flex;
  justify-content: center;
  z-index: 10;
  position: absolute;
  bottom: 100px;
	width: 100%;
	font-size:30px;
}
.datePlus:hover{
	color:var(--grey)
}
a{
  color:var(--grey);
}
#credits{
  margin-top:var(--margin);
}
#presentPar{
  margin-bottom:30px;
}

span{
  color:var(--grey)
}
.supporter{
  color:white
}
.supporter img{
	padding-bottom:10px;
}
.sponsorlogos{
	display: flex;
	justify-content: center;
}
.sponsorlogos img{
	width:180px;
}
.suppTitle{
	color:var(--grey);
	padding-bottom: 15px;
}
.center{
  text-align:center;
}
/* no selection*/
.noselect{
	-ms-user-select: none;
			user-select: none;
}





	/* Selection visibility toggles */

	.hidden{
		display: none;
	}
	.visible{
		display:grid;
	}

	.descWrap{

		grid-column:1/span 12;

		display:flex;
		align-items: baseline;
		font-size:var(--small);
		flex-wrap: wrap;

		position:absolute;
		bottom:20px;
		line-height: 1.4;
		z-index: 20;
	}
	.infoWrap{
		display:flex;

		/* white-space: nowrap; */
	}
		.modfilter{
			color:white;
			padding-right:6px;
			white-space: nowrap;
		}
		.desc{
			color:var(--grey);
			text-transform: capitalize;
			padding-right:13px;

		}
		.vimeoVideo{
			grid-column:2/span 10;
			width:100%;
			/* how the iframe styles aspect ratio */
			height: calc(80vh - 30px);
			position: absolute;

		  left: 50%;

		  top: 51%;

		  transform: translate(-50%, -50%);

		}

		iframe, object, video,embed {
			position: relative;
			/* transform:translateY(20px); */
			border: 0px;

		}
		#arrow{
			position:relative;
			font-size: 16px;
			margin-left:5px;
		}

		/* preloader */

		.preloader8 {
			position: fixed;

			display: flex;
			align-items: center;
			justify-content: center;
			padding:0px;
			opacity:1;
			width:30px;
			height:30px;

	    left: 50%;
	    top: 50%;
	    transform: translate(-15px, -15px);
	    z-index: 5000;
			transition:opacity .3s ease;

			position: absolute;
			top:28px;
			left:460px;
			z-index: 100000;
		}
		.preloader8 span {
			vertical-align:top;
	    border-radius:100%;
	    background:#ccc;
	    display:inline-block;
	    width:8px;
	    height:8px;
	    -webkit-animation:preloader8 1s linear infinite;
	    animation:preloader8 1s linear infinite;
	    transform-origin:center 15px;
	    -webkit-transform-origin:center 15px;
			transform: translate(-10px, -8px);

	 }
	 @keyframes preloader8 {
	    from {transform: rotate(0deg);}
	    to {transform: rotate(360deg);}
	 }
	 @-webkit-keyframes preloader8 {
	    from {-webkit-transform: rotate(0deg);}
	    to {-webkit-transform: rotate(360deg);}
	 }

	 .preloadwrap{
		 position:fixed;
		 top:0;
		 left: 0;
		 display: block;
		 /* align-items: center;
		 justify-content: center; */
		 opacity:1;
		 transition:opacity .3s ease;
		 z-index: 2000;

		 width: 100%;
		 height:100%;
		 /* background-color:pink */
	 }

	 .preloader11 {
	 	/* transform:translate(-50%, -50%); */
	 	width:25px;
	 	height:25px;

		position: absolute;
		top:27px;
		left:441px;
		padding:0px;


	 }
	 .vimeoVideo{
		 grid-column:2/span 10;
		 width:100%;
		 /* how the iframe styles aspect ratio */
		 height: calc(80vh - 30px);
		 position: absolute;
		 left: 50%;
		 top: 51%;
		 transform: translate(-50%, -50%);

	 }

	 .preloadwrapInfo{
		 position:fixed;
		 left: 50%;
		 top: 51%;
		 transform: translate(-50%, -50%);
		 display: block;
		 height: calc(80vh - 30px);

		 opacity:1;
		 transition:opacity .3s ease;
		 z-index: 10;

		 width: 100%;
		 /* height:100%; */

		 display: flex;
		 justify-content: center;
		 align-items: center;
		 background-color:black;
	 }
	 .preloader11info {
		/* transform:translate(-50%, -50%); */
		width:25px;
		height:25px;

		/* position: absolute;
		top:27px;
		left:441px; */
		padding:0px;
	 }
	 .preloader11info hr{
	 	border:0;
	 	margin:0;
	 	width:12px;
	 	height:12px;
	 	position:absolute;
	 	border-radius:50%;
	 	animation:preloader11 2s ease infinite
	 }
	 .preloader11 hr{
	 	border:0;
	 	margin:0;
	 	width:40%;
	 	height:40%;
	 	position:absolute;
	 	border-radius:50%;
	 	animation:preloader11 2s ease infinite
	 }

		 .preloader11 :first-child{ background:#111;animation-delay:-1.5s }
		 .preloader11 :nth-child(2){ background:#444;animation-delay:-1s }
		 .preloader11 :nth-child(3){ background:#777;animation-delay:-0.5s }
		 .preloader11 :last-child{ background:#bbb }

		 .preloader11info :first-child{ background:#111;animation-delay:-1.5s }
		 .preloader11info :nth-child(2){ background:#444;animation-delay:-1s }
		 .preloader11info :nth-child(3){ background:#777;animation-delay:-0.5s }
		 .preloader11info :last-child{ background:#bbb }

		 /*
	 .preloader11 :first-child{ background:#19A68C;animation-delay:-1.5s }
	 .preloader11 :nth-child(2){ background:#F63D3A;animation-delay:-1s }
	 .preloader11 :nth-child(3){ background:#FDA543;animation-delay:-0.5s }
	 .preloader11 :last-child{ background:#193B48 }
	 .preloader11info :first-child{ background:#19A68C;animation-delay:-1.5s }
	 .preloader11info :nth-child(2){ background:#F63D3A;animation-delay:-1s }
	 .preloader11info :nth-child(3){ background:#FDA543;animation-delay:-0.5s }
	 .preloader11info :last-child{ background:#193B48 } */

	 @keyframes preloader11{
	   0%,100%{transform:translate(0)}
	   25%{transform:translate(160%)}
	   50%{transform:translate(160%, 160%)}
	   75%{transform:translate(0, 160%)}
	 }

	 #canvasx{
		 display:none;
		 position: fixed;
     right: 12px;
     top: 29px;
     cursor: pointer;
     z-index: 500;
	 }
	 #canvasx:hover{
		 filter: opacity(.7);
	 }
	 @media only screen and (max-width: 1184px) {
		 .zoom{
			 /* display:none */
		 }
		 .headerFilters{
			 padding:16px 0px 45px 0px;
			 margin-top: 9px;
		 }
		 .pages{
		 }
			.sorting{
				z-index: 20;
				overflow:visible;
				grid-column: span 6;

			}
			.title{
				 grid-column-end: 7;
			}
			.subfilterDetails{
				/* grid-column-gap: 40px;
				overflow-x: scroll;

				padding-bottom: 5px; */
			}

	 }
	 @media only screen and (max-width: 875px) {
		 :root{
			  --thumbnail-grid: span 8;
		 }
		 .headerTop{
			 font-size: 25px;
		 }
		 .undertitle{
			 top: 43px;
			 font-size:25px;
		 }
		 .lastlinks{
			 position: absolute;
			 right: 0;
		 }
		 /* .pages{
			 position: absolute;
    	 top: 74px;
		 } */
		 .zoomText{
			 display:none;
		 }
		 .zoom{
			 grid-column: 11 / span 2;
			 padding-top: 9px;
			 /* display:none */
		 }
		 .slider{
			 margin-left: 0px;
		 }

			.sorting{
				z-index: 20;
				overflow:visible;
				background-color: black;
				/* padding-bottom: 12px; */
			}

		 .title{
			 grid-column-start: 1;
		   grid-column-end: 8;
		 }
		 .pages {
	    grid-column-start: 8;
	    grid-column-end: 10;
		 }
		 .square{
			 display:none
		 }
		 .selections{
			 grid-column: 8 /span 3;
		 }


	 }
	 @media only screen and (max-width: 740px) {
		 .zoom{
			 display:none
		 }
		 .pages {
    grid-column-start: 8;
    grid-column-end: 12;
		}
		.title {
	    grid-column-end: 8;
		}
		.selections{
			grid-column: 8 /span 4;
		}

		.thumbnail:hover img{
			opacity:1;
		}
		.thumbnail:hover .namehover{
			opacity:0;
		}
		.namehover{
			opacity:0;
			font-size:var(--grid-font);
			/* font-size: 15px; */
			padding:2px 3px;
			position:absolute;
			color:white;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: var(--lineclamp);
			overflow: hidden;
			white-space: break-spaces;
		}

	 }
	 @media only screen and (max-width: 426px) {
		 :root{

					 /* set images */
		 			 --thumbnail-grid: span 12;
					 --grid-font:15px;

					 /* set text index */
					 --name-col:1 / span 3;
					 --name-view:block;

					 /* --age-col:4 / span 1; */
					 --age-view:none;

					 /* --cat-col:4 / span 1; */
					 --cat-view:none;

					 --style-col:4 / span 4;
					 --style-view:block;

					 /* --org-col:6 / span 3; */
					 --org-view:none;

					 /* --type-col: 9 /span 2; */
					 --type-view:none;

					 --city-col:8 / span 3;
					 --city-view:block;

					 --country-col:11 / span 2;
					 --country-view:none;

					 --year-col:11 / span 2;
					 --year-view:block;


		 		 }
				 .subfilters ::-webkit-scrollbar {
			    -webkit-appearance: none;
					}

					::-webkit-scrollbar:vertical {
					    width: 4px;
					}

					::-webkit-scrollbar:horizontal {
						padding-top:3px;
					    height: 4px;
					}

					::-webkit-scrollbar-thumb {
					    background-color: white;
					    /* border: 4px solid pink; */
					}

					::-webkit-scrollbar-track {
					    border-radius: 1px;
					    background-color: black;
					}
				.zoom{
					display:none
				}
				#namearrow, #stylearrow{
					display:none
				}
		 		 .sorting{
		 			 z-index: 20;
		 			 overflow:visible;
		 			 line-height: 1.4;
					 background-color: black;
					 padding-bottom: 12px;
		 		 }

		 		 .pages{
		 			 position: absolute;
		 	     top: 64px;
		 		 }

		 		 .headerWrap{
		 	     padding-top: 12px;
		 		 }
		 		 .headerTop{
					 display: flex;
	  			 justify-content: space-between;
		 			 font-size:21px;
		 		 }
		 			 .title{
		 				 -ms-grid-column-span: 10;
		 				 grid-column-end: 10;
		 			 }
		 			 .undertitle{
		 				 top: 32px;
						 font-size:21px;
		 			 }

		 		 .lastlinks{
		 	     -ms-grid-column: 10;
		 	     -ms-grid-column-span: 3;
		 	     grid-column: 10/span 3;
		 		 }

				 .headerFilters{
					 display:block;
					 opacity:1;
					 padding:10px 0px 45px 0px;
					 margin-top: 9px;
				 }

				 .selections{
					 position:fixed;
					 top: 64px;
			     left: 50%;
					 width: calc(50% - 10px);
				 }

				 .singlevideo div{
					 white-space: normal;
			      overflow-x: visible;
						text-overflow: clip;
						    overflow: hidden;
				 				 }
				 .modHeaderWrap{
					 padding-top: 12px;
				 }
				 .modtitles{
					 font-size:21px;
				 }
		 		 .preloader11 {
		 			 -webkit-transform:translate(-50%, -50%);
		 			     -ms-transform:translate(-50%, -50%);
		 			         transform:translate(-50%, -50%);
		 			 width:35px;
		 		 	 height:35px;
		 			 position: fixed;
		 			 top:50%;
		 			 left:50%;
		 		 }

				 .vimeoVideo{
					 top: 41%;
				 }
				 .subfilters{
			     top: 153px;
				 }
				 .subfilterDetails{
					 grid-column-gap: 40px;
					 overflow-x: scroll;

					 padding-bottom: 5px;
				 }
				 #indexText{
					 color: white;
				 }
				 .sp2{
					 grid-column-start: span all;
					 overflow: visible;
				 }
					/* INFO */

					#infomodalx{
						top: 15px;
						z-index: 100
					}
					#infomodalx img{
						width:18px
					}
					#modalx{
						/* position:fixed; */
						position: fixed;
				    right: 10px;
				    top: 26px;
						cursor:pointer;
					}
					#modalx img{
						width:18px
					}
					.centerwrap{
						font-size: 18px;
						    width: 100%;
							padding: 0 10px;
					}

					.gradient{
						height: 400px;
						transform: translateY(-400px);

					}
					/* info page mobile */
					#infomodal{
					 padding-top: 5px;
					 overflow-x: hidden;
					}
					.infoWrapper{
						margin:0px 0px 10px 0px;
					}
					.allDetailsWrap{
						padding: 10px 0px 0px 0px;
					}
					.par{
						line-height:24px;
						margin-bottom:20px;
						text-align: left;
					}
					.titler{
						padding-top: 0px;
						margin-bottom:20px;
					}
					.par{
						margin-bottom: 20px;
					}
					#presentPar{
						margin-bottom:0;
					}
					#aboutPar div:not(:last-of-type) {
    				padding-bottom: 20px;
					}
					#credits{
						margin-top:20px;
					}
					#support{
						text-align: center;
					}
					.sponsorlogos img{
						width:140px;
					}

				/* info dates */
				.dateIndex{
			    font-size: 15px;
					height:600px;
				}
				.whenwhere {
    			grid-column: 4/span 5;
				}

				.content{
			     grid-column: 9 / span 4;
					}
				.datePlus{
					font-size: 18px;
				}
				.descWrap{
					bottom:10px;
				}
	}
	@media only screen and (max-width: 320px) {
		.zoom{
			display:none
		}

		.headerTop{
	    font-size: 20px;
		}
		.allDetailsWrap{
			padding: 40px 0px 0px 0px;
		}
		.headerFilters{
	    padding: 6px 0px 45px 0px;
    	margin-top: 0px;
		}
		.subfilters {
    	top: 158px;
		}
		.date{
			white-space: normal;
		}

}