:root {
	--brown: #441D01;
	--red: #E30F00;
	--grey: #DACCCC;
	--grey2: #CCCCCC;
	--purple: #C1B3FE;
	--purple-2: #a08bff;
	--blue: #555577;
	--pink: #FEB8D5;
	--black: #000000;
	--width: 594mm;
	--height: 841mm;
	--margin: 1.5vw;
 }
:root {
	--main: var(--brown);
	--bg: var(--brown);
	--fg: var(--grey);
	--conic-gradient: conic-gradient(from 180deg at 50% 50%, var(--red) 0deg, var(--brown) 11.25deg, var(--purple) 28.125deg, var(--pink) 54.37500178813934deg, var(--grey2) 74.99999821186066deg, var(--purple-2) 108.75000357627869deg, var(--red) 135deg, var(--grey) 144.3749964237213deg, var(--brown) 187.49999284744263deg, var(--red) 196.875deg, var(--blue) 241.875deg, var(--brown) 271.8749928474426deg, var(--grey) 281.25deg, var(--purple) 311.2499928474426deg, var(--red) 333.7499928474426deg);
	--gradient: radial-gradient(var(--brown), var(--red), var(--purple));
	--border: 0.5px solid var(--fg);
	--font-size-l: 5.8vw;
	--font-size-m: 2vw;
	--font-size-m-relative: 1.5vw;

	--font-size-s: 22px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: var(--fg);
	scroll-behavior: smooth !important;
}

body {
	background-color: var(--bg);
	scroll-behavior: smooth !important;
	color: var(--fg);
	position: relative;
	display: block;
	float: left;
	width: 100%;
	height: auto;
}
*::selection {
	background-color: var(--fg);
	color: var(--bg);
}

p {
	word-break: break-word;
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}


iframe {
    width: 100%;
    height: calc( 100vw/6 * 4 * 0.56);
}
/*————————————————————*/
/* Column system
/*————————————————————*/

.col-4 {
	width: calc(100vw / 6 * 4);
}

.col-2 {
	width: calc(100vw / 6 * 2);
}

.col {
	padding: var(--margin);
	display: block;
	float: left;
	position: relative;
	height: auto;
}

.column {
	width: 50%;
	float: left;
	display: block;
	clear: none;	
	height: auto;
}

/*————————————————————*/
/* Typography 
/*————————————————————*/

a {
	text-decoration: none;
}
.serif p a {
	border-bottom: var(--border);
}

.sans {
	text-transform: uppercase;
	font-family: 'NewEdgeTM', 'Helvetica', sans-serif;
	font-size: var(--font-size-s);
	letter-spacing: -0.07rem;
}
.serif {
	font-family: 'TimesNow', 'Times New Roman';
	letter-spacing: -0.05em;

}
.serif  p > strong {
	font-weight: normal;
	font-family: 'NewEdgeTM', 'Helvetica', sans-serif;
	font-size: var(--font-size-m-relative);
	letter-spacing: -0.07rem;
	text-transform: uppercase;
}

.sans:not(.header-title) a {
	border-bottom: 0.2rem solid var(--fg);
}

.serif.medium .sans {
	font-family: 'NewEdgeTM', 'Helvetica', sans-serif;
	font-size: var(--font-size-m-relative);
	font-weight: normal;
	letter-spacing: -0.07rem;
}

.serif .sans {
	font-family: 'NewEdgeTM', 'Helvetica', sans-serif;
	font-size: var(--font-size-s);
	letter-spacing: -0.07rem;

}

.large {
	line-height: 0.75;
	font-size: var(--font-size-l);
	letter-spacing: -0.07em;
}
.serif.large {
	letter-spacing: -0.09em;
}

.medium {
	font-size: var(--font-size-m);
	letter-spacing: -0.06em;
}

.center {
	text-align: center;
}

.nowhite {
	white-space: pre-wrap;
}

.long-text p {
	margin-bottom: 1em;
}
/*————————————————————*/
/* Header 
/*————————————————————*/

.header {
	background-color: var(--bg);
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	padding: var(--margin);
	color: var(--fg);
	border-left: var(--border);
	user-select: none;
	z-index: 999;
}
.header-menu {
	z-index: 999;
}

.shapes, .shapes .shape {
	z-index: -1;
}
.menu-item {
	text-align: center;
	width: 100%;
	position: relative;
	display: block;
	transition: transform 0.3s;
	cursor: pointer;
}

.menu-item:hover {
	transform: skewX(-25deg);
}

.header-title {
	text-align: center;
	margin-top: -0.2vw;
}

.header-footer {
	box-sizing: border-box;
	position: absolute;
	bottom: var(--margin);
	left: 0;
	right: 0;
	text-align: center;
	z-index: 10;
}

/*————————————————————*/
/* Shapes
/*————————————————————*/


.shape {
	background: var(--conic-gradient);	
	position: absolute;
	left: var(--margin);
	pointer-events: none;
}
.header-toggle {
	display: none;
	border-radius: 10px;
	z-index: 99999;
	width: 30px;
	height: 30px;
	bottom: var(--margin);
	right: var(--margin);
	left: auto;
	pointer-events: auto;
	position: fixed;
	transform: rotate(var(--offset));
	background: var(--gradient);
	box-shadow: 0 0 5px 2.5px rgb(50, 50, 50, 0.2);
}

.menu-shape {
	transform: translate(-50%, 0);
	transform: translate(-50%, 0) rotate(var(--offset));
}

.oval {
	background: var(--conic-gradient);
	border-radius: 30%;	
	background: var(--gradient);
	left: 50%;
	top: 60vh;
}

.oval:nth-of-type(1) {
	width: 30vw;
	height: 30vw;
	transform: translate(-50%, calc(-0% - var(--offset)*1.8 ));
}

.oval:nth-of-type(2) {
	width: 27.5vw;
	height: 27.5vw;
	transform: translate(-50%, calc(-0% - var(--offset)*1.7 ));
}

.oval:nth-of-type(3) {
	width: 25vw;
	height: 25vw;
	transform: translate(-50%, calc(-0% - var(--offset)*1.6 ));
}

.oval:nth-of-type(4) {
	width: 22.5vw;
	height: 22.5vw;
	transform: translate(-50%, calc(-0% - var(--offset)*1.5 ));
}

.oval:nth-of-type(5) {
	width: 20vw;
	height: 20vw;
	transform: translate(-50%, calc(-0% - var(--offset)*1.4 ));
}

.oval:nth-of-type(6) {
	width: 17.5vw;
	height: 17.5vw;
	transform: translate(-50%, calc(-0% - var(--offset)*1.3 ));
}

.oval:nth-of-type(7) {
	width: 15vw;
	height: 15vw;
	transform: translate(-50%, calc(-0% - var(--offset)*1.2 ));
}

.oval:nth-of-type(8) {
	width: 12.5vw;
	height: 12.5vw;
	transform: translate(-50%, calc(-0% - var(--offset)*1.1));
}

.oval:nth-of-type(9) {
	width: 10vw;
	height: 10vw;
	transform: translate(-50%, calc(-0% - var(--offset)*1.0 ));
}

.large-oval {
	height: calc(50vh - var(--margin) * 2);
	width: calc(100% - var(--margin) * 2);
	position: relative;
	border-radius: 100px;
	transition: all 1s;
	pointer-events: auto;
	background: var(--gradient);
}
.large-oval:hover {
	transform: translateY(-10px);
}
.small-oval {
	position: relative;
	width: 100%;
	height: 30vh;
	padding: 20px;
	
	display: flex;
	margin: 0 0 0 0;
	float: left;
/*	margin: var(--margin) auto;*/
	align-items: center;
	justify-content: center;
	user-select: none;
	border-radius: 10vw;
	transition: all 1s;
	transform: rotate(0deg);
	background-repeat: no-repeat;
	/* transform-origin: 50% 50%; */
	background-size: 100% 100% !important;  
	background: var(--gradient);
}


a.small-oval:hover {
	background-position: 60% 60% !important;
}

/*————————————————————*/
/* Visible Grid Components 
/*————————————————————*/

.vertical-grid {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	max-height: 100%;
	display: flex;
	flex-direction: row;
	z-index: 200;
	pointer-events: none;
	/*align-items: stretch;*/
	align-items: space-around;
	justify-content: space-between;
}

.line {
	width: 0px;
	border-right: var(--border);
	height: 100%;
}

.line:nth-of-type(1),
.line:last-of-type{
	opacity: 0;
}

.some-hidden .line:nth-of-type(3),
.some-hidden .line:nth-of-type(4),
.some-hidden .line:nth-of-type(6),
.some-hidden .line:nth-of-type(7){
	opacity: 0;
}

.staple-holes {
	position: sticky;
	top: 0;
	max-height: 100%;

	padding: calc(var(--margin) / 2 );
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 100vh;
	clear: none;
	pointer-events: none;
}

.staple-holes.left {
	left: 0;
}

.staple-holes.right {
	float: right;
	right: 0;
	top: 0;
}

.ellipse {
	border-radius: 50%;
	background-color: var(--fg);
	width: calc(var(--margin) * 0.75);
	height: calc(var(--margin)* 0.75);
}
.rect {
	border-radius: calc( var(--margin) * 0.75);
	background-color: var(--fg);
	width: calc(var(--margin) * 0.75);
	height: calc(var(--margin) * 1.2);
}

.noise {
	pointer-events: none;
	z-index: 99999;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	position: fixed;
	height: 100%;
	background-image: url('../../templates/images/noise.jpg');
	background-size: 260px 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	mix-blend-mode: overlay;
	opacity: 0.4;
}

.noise img {
	min-width: 100%;
	min-height: 100%;
	z-index: 999;
	pointer-events: none;
}

/*————————————————————*/
/* Layout Components 
/*————————————————————*/

.container {
	position: relative;
	display: block;
	float: left;
	height: auto;
	background-color: var(--brown);
	color: var(--gray);
	scroll-behavior: smooth;
}
.block {
	width: 100%;
	position: relative;
	display: block;
	clear: both;
	height: auto;
	float: left;
	border-bottom: var(--border);
}
/*————————————————————*/
/* Section Colors 
/*————————————————————*/

.block:nth-of-type(1) {
	background: linear-gradient(var(--brown), var(--red), var(--brown));
}
.block:nth-of-type(2) {
	background: linear-gradient(var(--brown), var(--brown), var(--red));
}

.block:nth-of-type(3) {
	background: linear-gradient(var(--red), var(--brown));
}

.block:nth-of-type(4) {
	background: linear-gradient( var(--brown), var(--black), var(--brown));
}

.block:nth-of-type(5) {
	background: linear-gradient(  var(--brown), var(--red), var(--red), var(--brown),  var(--blue));
}

.block:nth-of-type(6) {
	background: linear-gradient( var(--blue),var(--blue), var(--purple-2), var(--brown), var(--brown));
}
.block:nth-of-type(7) {
	background: linear-gradient( var(--brown), var(--pink), var(--pink), var(--purple-2), var(--blue), var(--red));
}
.block:nth-of-type(8) {
	background: linear-gradient( var(--red), var(--brown), var(--brown), var(--brown) );
}

/*.block:nth-of-type(6) {
	background: linear-gradient( #83F102, #b4b4b4);
}
.block:nth-of-type(5) {
	background: linear-gradient( #83F102, #b4b4b4);
}*/

.block-title {
	border-bottom: var(--border);
	width: 100%;
	position: relative;
	display: block;
	z-index: 200;
}
.absolute {
	left: 0;
	top: 0;	
	position: absolute;
}

.details {
	margin: 5vw 0;
}

.workshop-credits p {
	white-space: pre-wap;
	width: auto;
	display: inline-block;

}
.colophon-item p {
	white-space: pre-line;
	width: auto;
	display: inline-block;
	width: 100%;
}

.columns-3 {
	column-count: 2;
}

.colophon-item, .timetable-item {
	break-inside: avoid;
	width: 100%;
	/*margin-bottom: 1.3em;*/
}
.line.horizontal {
	width: 100%;
	height: 0px;
	border-bottom: var(--border);
}

.line-up-item {
	position: relative;
	display: flex;

	float: left;
	width: 37.5%;
	height: calc(100vw / 4 );
	border-bottom: var(--border);
	overflow: hidden;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 0 5px 2.5px rgb(50, 50, 50, 0.2);
}
.line-up-item:nth-of-type(2n ) {
	margin-left: 12.5%;
}
.line-up-item:nth-of-type(2n + 1) {
	margin-right: 12.5%;
}

.line-up-caption {
	position: absolute;
	bottom: 0px;
	right: 5px;
}

.line-up-online {
	font-size: 10px;
	line-height: 0px;
}


.cover {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
	/*opacity: 0.5;*/
	mix-blend-mode: luminosity;
	/*transition: mix-blend-mode 0.4s;*/
}

.speaker {
	filter: grayscale(1);
	/*mix-blend-mode: luminosity;*/
	object-fit: cover;
	width: 100%; 
	height: 100%; 
}
.line-up-item:hover .cover, 
.line-up-item:hover .speaker {
	mix-blend-mode: normal;
	filter: grayscale(0);
}

.line-up-item:nth-of-type(2n + 1) .cover {
	transform: scale( -1.0, 1);
	/*opacity: 0.4;*/
}

.line-up-item:nth-of-type(2n + 1) .line-up-caption  {
	bottom: 0px;
	left: 5px;

}


.timetable-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: stretch;
	min-height: 120px;
	height: auto;
	
	background-color: var(--pink);
}

.timetable-item * {
	color: var(--black);
	line-height: calc(var(--font-size-m) * 1.1);
}
.time-text, .timetable-highlight, .timetable-content {
	padding: 0 0.3em;

}


.time {
	position: sticky;
	top: 0;

	display: flex;
	flex-direction: row;
	align-items: space-between;
	justify-content: space-between;
	width: 100%;
	/*height: 100%;*/
	background-color: var(--grey);
	z-index: 100;
/*	position: relative;
	display: block;
	float: left;
	clear: none;*/
}
.timetable-content {
	display: block;
	top: 33px;

	/* width: calc(100% - 130px); */
	/* background-color: var(--grey); */
	/* line-height: calc(2vw * 1.3); */
}
.break {

	transform: skewX(-25deg);
	background-color: var(--brown);
}
.break .timetable-content * {
	color: var(--fg) !important;
}
.timetable-highlight {
	display: inline-block;
	float: right;
	background-color: var(--red);
	color: var(--grey);
}
.talk-title {
	text-transform: capitalize;
}



/* Single pages */

.slider {
	position: relative;
	width: 100%;
	height: auto;
	height: calc(50vh);
/*	position: relative;*/
	display: block;
	float: left;
    overflow: hidden;
}
.slide {
	max-width: 100vw;
	height: 100%;
}
.slick-track img{
    height: calc(50vh + (var(--margin)/4));
}
.slick-track video{
    height: calc(50vh + (var(--margin)/4));
}
.arrows {
	position: absolute;
	width: calc(100vw / 6 * 4);
	display: flex;
    /*top: 60vh;*/
    height: 50vh;
    left: 0;
/*	float: left;*/
    z-index: 200;
}
.slick-next:before {
    content:url(../images/vectors/Vector%201.svg);
    mix-blend-mode: difference;;
}
.slick-prev:before {
    content:url(../images/vectors/Vector%202.svg);
    mix-blend-mode: difference;;
}
.slick-next, .slick-prev {
    width: 10%;
    height: 100%;
    margin: 0 calc(var(--margin)/2);
}
.slick-next {
    right: 0;
}
.slick-prev {
    left: 0;
}
.main{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: auto;
    /*position: fixed;*/
    top: 0;
    left: 0;
}
.twocolumn{
    width: 100%;
    float: left;
    display: block;
    clear: none;
    height: auto;
/*    min-height: 50vh;*/
    column-count: 2;
    column-gap: calc(var(--margin)*2);
}
.row {
/*	border-top: 1px solid black;*/
	position: relative;
	float: left;
	display: block;
	width: 100%;
	height: auto;
}
.row:not(:first-of-type) {
	border-top: var(--border);
}
.flex-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	width: 100%;
}

.participant{
    height: 60vh;
}


.staple-holes-participant {
	position: fixed;
	top: 0;
	padding: calc(var(--margin) / 2 );
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 100vh;
	clear: none;
	pointer-events: none;
    z-index: 1000;
}

.staple-holes-participant.left {
	left: 0;
}

.staple-holes-participant.right {
	float: unset;
	right: unset;
	top: 0;
}
.holes-portrait{
    width: calc(100vw / 6 * 4);
    position: fixed;
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
    pointer-events: none;
    visibility: hidden;
}

.participant-block {
	width: 100%;
	position: relative;
	display: block;
	clear: both;
	min-height: 50vh;
	height: auto;
	float: left;
	border-bottom: 1px solid #222;
}
.twocolumn a{
   border-bottom: 0.2rem solid #222;
}


.participant-block {
	background: linear-gradient(#b4b4b4, #0EAF00);
}
.go-back {
    margin: calc(var(--margin)/4) 0 0 calc(var(--margin)/2);
    height: 3.7vw;
    width: 3.7vw;
    cursor: pointer;
    transition: all 0.5s;
}
.block-title:hover .go-back, 
.block-title:active .go-back {
	width: 1vw;
	transition: all 0.5s;

}