/* ———————————————————————————————*/
/*   Stylesheet Vera van de Seyp
/* ———————————————————————————————*/

/* ————————————————————————*/
/* Fonts
/* ————————————————————————*/

@font-face {
	font-family: 'monument-mono';
	src: url(../fonts/ABCMonumentGroteskMono-Regular.otf) format('opentype'),
	url(../fonts/ABCMonumentGroteskMono-Regular.woff) format('woff'),
	url(../fonts/ABCMonumentGroteskMono-Regular.woff2) format('woff2');
	font-style: normal;
	font-weight: normal;
}

@font-face {
	font-family: 'monument-mono';
	src: url(../fonts/ABCMonumentGroteskMono-RegularItalic.otf) format('opentype'),
	url(../fonts/ABCMonumentGroteskMono-RegularItalic.woff) format('woff'),
	url(../fonts/ABCMonumentGroteskMono-RegularItalic.woff2) format('woff2');
	font-style: italic;
	font-weight: normal;
}

@font-face {
	font-family: "dumpling";
	src: url("../fonts/koosveratypeGX.ttf") format('truetype-variations');
}

@font-face {
	font-family: "dumpling-extra";
	src: url("../fonts/dumplingGX.ttf") format('truetype-variations');
}


/* ————————————————————————*/
/* Basic stuff
/* ————————————————————————*/

* {
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

*:focus {
	outline: none !important;
}
*::selection {
	background-color: var(--green);
	color: var(--black);
}

html {
	font-size: 18px;
	line-height: 22px;
}
body {
	background-color: var(--black);
	color: var(--gray);
	color: white;
	width: 100%;
	position: relative;
	color: var(--gray);
	font-size: 18px;
	line-height: 22px;


	float: left;
	height: auto;
	box-sizing: border-box;
	scroll-behavior: smooth;
	font-family: 'monument-mono', sans-serif;
}

img {
	user-select: none;
}


/* ————————————————————————*/
/* Basic typography
/* ————————————————————————*/

a {
	text-decoration: none;
	color: inherit;
}
p {
	line-height: 1.4;
	color: var(--gray);
	margin-bottom: 1.4rem;

	/*clear: both;*/
}
p:last-of-type {
	margin-bottom: 0;
}
.mono {
	font-family: 'monument-mono';
}

.regular {
	font-family: 'monument-regular' !important;
	font-size: 2vw;
	/*letter-spacing: -0.05rem;*/
}

.dumpling, .dumpling *  {
	font-family: 'dumpling';
	font-size: 30px;
	line-height: 1;
}


h1, h2, h3, h4, h5, h6 {
	font-family: 'monument-mono';
	font-size: 20px;
	line-height: 1.4;
	font-weight: normal;
}




.caps {
	text-transform: uppercase;
}
.footnotes {
	max-width: 90%;
	color: var(--gray);
	box-sizing: border-box;
	word-break: break-word;
	padding-left: 2rem;
	padding-right: -2rem;
}
.footnotes p {
	display: inline;
}
.footnotes a {
	display: inline;
	color: var(--purple);
}
.purple {
	color: var(--purple);
}

.subtitle {
	text-transform: uppercase;
	text-align: center;
}

.description {
	text-align: center;
	color: var(--gray);
	font-size: 14px;
	margin-top: 10px;
}
.reference {
	color: var(--green);
	vertical-align: super;
	font-size: 12px;
}
.flex-center {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 3em 0 !important;
}
.flex-center a {
	display: inline-block;
	cursor: pointer;
}

/*—————————————————*/
/* Column system 
/*—————————————————*/

.col {
	position: relative;
	float: left;
	clear: none;
	box-sizing: border-box;
}
.col-1 {
	box-sizing: border-box;
	width: calc(100% / 6 );
}
.col-2 {
	box-sizing: border-box;
	width: calc(100% / 3);
}
.col-3 {
	box-sizing: border-box;
	width: calc(100% / 2);
}
.col-4 {
	box-sizing: border-box;
	width: calc(100% / 6 * 4);
}
.col-5 {
	box-sizing: border-box;
	width: calc(100% / 6 * 5);
}
.col-6 {
	box-sizing: border-box;
	width: calc(100%);
}
.col-6-1 {
	box-sizing: border-box;
	width: calc(100%);
}
.col-6-3 {
	box-sizing: border-box;
	width: calc(100%);
}
.hide-mobile {
/*	display: none;*/
}
.mobile-only  {
		display: none;
}

/*—————————————————*/
/* Content layout 
/*—————————————————*/

.block {
	position: relative;
	display: block;
	clear: both;
	float: left;
	box-sizing: border-box;
	color: white;
	padding: 0 var(--m);
	box-sizing: border-box;
	width: 100%;
}

.divider {
	position: relative;
	float: left;
	display: block;
	clear: both;
	width: calc(100% - var(--m) * 2 );
	height: 1px;
	margin: var(--m);
	border-top: 1px solid var(--gray);
}

.row {
	width: 100%;
	position: relative;
	display: block;
	float: left;
	clear: both;
	margin-bottom: 1.5em;
}
.row:last-of-type {
	margin-bottom: 0;
}

.button-row {
	display: block;
	float: left;
	clear: both;
	margin-bottom: calc(var(--m)/2);
}
.button-row:last-of-type {
	margin-bottom: 0;
}

.text {
	position: relative;
	float: none;
	word-break: break-word;
	max-width: 1000px;
}
.list p {
	display: inline;
	/*white-space: nowrap;*/
}

.entry-preview .text p {
	font-family: 'monument-mono';
}

.border {
	width: 100%;
	float: left;
	display: flex;
	flex-direction: row;
	position: relative;
	display: block;
	border-bottom: 1px solid var(--gray);
}
.border .button-subtitle {
	clear: none;
	margin-bottom: 0;
}


/* ————————————————————————*/
/*  Slider
/* ————————————————————————*/

.flex-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	width: calc(100% );
	float: left;
	align-items: flex-start;
	justify-content: space-between;

}
.switch {
  position: relative;
  display: inline-block;
  width: 160px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}


.slider-toggle.button {
	margin-bottom: 0;
}
.slider-toggle {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray-dark);
  -webkit-transition: .4s;
  transition: .4s;

  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  color: var(--black);
}

.slider-toggle:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: var(--red);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider-toggle {
  background-color: var(--purple);
}

input:focus + .slider-toggle {
  box-shadow: 0 0 1px var(--purple);
}

input:checked + .slider-toggle:before {
  -webkit-transform: translateX(130px);
  -ms-transform: translateX(130px);
  transform: translateX(130px);
}


.slider-toggle:before {
  border-radius: 50%;
}

input:hover + .slider-toggle {
	background-color: var(--green);
}

/* ————————————————————————*/
/*          MENU
/* ————————————————————————*/


.header {
	display: block;
	float: left;
	position: fixed;
	/*position: relative;*/
/*	margin-top: var(--m);*/
	top: var(--m);
	width: auto;
	height: auto;
	user-select: none;
	z-index: 999;
}

#header {
	transition: 0.5s ease-in-out;
	z-index: 999;
}

#header + * {
	margin-top: calc( 2vw + var(--m) * 2);
}
.header-items {
	margin-left: var(--m);
}


.invert {
	width: 30px;
	height: 30px;
	border-radius: 30px;
	float: left;
	display: block;
	padding: 0 !important;
	cursor: pointer;
	background-color: var(--gray);
	border: 1px solid var(--gray);
	overflow: hidden;
}
.invert-half {
	background-color: var(--black);
	width: 15px;
	height: 30px;

	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	transform-origin: 100% 50% 0px;
	transition: transform 0.5s;
	transform: rotate(0deg);

}
.invert-half.inverted {
	transform: rotate(180deg);
}

.index .header {
	/*margin-bottom: 60px;*/
}

#tags {
	width: 100%;
	height: auto;
}

.tags {
	position: absolute;
	right: calc(var(--m)/2);
	top: calc(var(--m));
}

#showtags {
	width: 100%;
	height: auto;
	max-height: 59.5vh;
	overflow-y: scroll;
}

.tag {
	display: block;
	position: relative;
	float: right;
	clear: none;
	text-transform: uppercase;
	background-color: var(--gray);
	color: var(--black);
	margin-left: calc(var(--m));
	margin-bottom: calc(var(--m)/2);
	margin-right: calc(-1 * var(--m)/2);
	cursor: pointer;
	line-height: 1;
	transition: width 0.5s;
	padding: 1px 10px;
	white-space: nowrap;
	text-overflow: ellipsis;
	user-select: none;
}

.tag-preview {
	display: block;

}
.tag-full {
	opacity: 0;
	width: 0;
	display: none;
}

.tag:hover .tag-preview {
	display: none;
}
.tag:hover .tag-full {
	opacity: 1;
	width: auto;
	display: block;
}
/*
.tag.active {
	background-color: var(--green) !important;
}
.tag.active:after {
	background-color: var(--green) !important;
}

.tag-description  {
	text-align: center;
}
.tag-title {
	color: var(--green);
}*/

.filter-tags {
	position: relative;
	display: flex;	
}

.filter-tag {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	display: none;
	cursor: pointer;
}

.filter-tag .tag {
	margin-left: 0;
	margin-right: 0;
}

.tag-arrow,
.tag-close {
	position: relative;
	top: 0;
	color: var(--gray);
	line-height: 0.8;
	margin: 0 calc(var(--m) / 2);
}

.filter-tag.active {
	display: flex;
}


.tag-in-text {
	display: inline-block;
	clear: none;
	float: none;
	margin: 0;
}

/* ————————————————————————*/
/*  BUTTONS
/* ————————————————————————*/

.button {
	display: flex;
	float: left;
	clear: none;
	padding: 1px var(--m);
	margin-right: calc(var(--m)/2);
	margin-bottom: calc(var(--m)/2);

	line-height: 1;	
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--gray);
	color: var(--black);
	text-transform: uppercase;
	cursor: pointer;
	/* transition: all 0.5s; */
}

.button-subtitle {
	display: flex;
	float: left;
	clear: both;
	position: relative;
	padding: 1px 1px;
	margin-bottom: 1.4rem;
	margin-right: calc(var(--m)/2);
	line-height: 1;	
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	/*border: 1px solid var(--gray);*/
	background-color: var(--gray);
	color: var(--gray);
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 3px;
	/* transition: all 0.5s; */
}

.button-subtitle-inner {
	background-color: var(--black);
	color: var(--gray);
	padding: 1px 10px;
}

.in-text {
	display: inline-block;
	float: none;
}
.in-text .button-subtitle {
	float: none;
	margin-bottom: 0;
}

.button.gray {
	background-color: var(--gray-dark);
	color: var(--black);
}

 .button.selected .button-subtitle-inner {
 	background-color: var(--gray);
 	color: var(--black);

 }
 .entry .button-subtitle {
 	margin-bottom: var(--m);
 }


.header-all {
	display: block;
	position: relative;
	float: left;
	clear: none;
	height: calc(30px + 2px);
	width: calc(30px + 2px);
	text-align: center;
	font-size: 30px;
	line-height: 0.85;
	background-color: var(--gray);
	color: black;
	border-radius: 50%;
	margin-right: calc(var(--m)/2);
	transform-origin: 50% 50%;
	transition: all 0.5s;
	opacity: 1;
	animation: 0.5s xAppear 3s 1 forwards;
	transform: rotate(45deg);
}


@keyframes xAppear {
	0% {
		opacity: 1;
		transform: rotate(45deg);
	}

	100% {
		opacity: 1;
		transform: rotate(0);
	}
}
@keyframes xDisappear {
	0% {
		opacity: 1;
		transform: rotate(45deg);

	}

	100% {
		opacity: 1;
		transform: rotate(0);

	}
}

.not-current {
	animation: 0.5s disappear 2s 1 forwards;
}
.not-current span {
	animation: 0s leDisappear 2s 1 forwards;
}
.not-current.invert {
		animation: 0s leDisappear 2s 1 forwards;
}
.invert {
	animation: 0.5s disappearInvert 2s 1 forwards;

}

.header-items:hover .not-current {
	animation: none;
}

.header-items:hover .header-all {
	animation: none;
}

.header-items:hover span {
	animation: none;
}


.button:not(.current):hover {
	background-color: var(--green);
}

.button.current {
	cursor: initial;
	background-color: var(--gray-dark);
	animation: 0s changeBack 2s 1 forwards;
}

.header-items:hover .button.current {
	background-color: var(--gray-dark);
	animation: none;
}

.project .button.current {
	cursor: pointer;
	background-color: var(--gray);
	animation: none;
}

.project  .header-items:hover .button.current {
	background-color: var(--gray) ;
	animation: none;
}
.project .button.current:hover {
	background-color: var(--green) !important;
}


@keyframes changeBack {
	from {
		background-color: var(--gray-dark);
	}
	to {
		background-color: var(--gray);
	}
}

@keyframes leDisappear {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}


@keyframes disappear {
	0% {
		opacity: 1;
		width: 50px;
		padding: 1px 10px;
		display: flex;
	}
	99% {
		opacity: 0;
		width: 0px;

		margin: 0;
		padding: 1px 0px;
		display: flex;
	}
	100% {
		opacity: 0;
		width: 0px;
		margin: 0;
		padding: 1px 0px;
	}
}
@keyframes disappearInvert {
	0% {
		opacity: 1;
		width: 2vw;
		padding: 1px 10px;
		display: flex;
	}
	99% {
		opacity: 0;
		width: 0px;

		margin: 0;
		padding: 1px 0px;
		display: flex;
	}
	100% {
		opacity: 0;
		width: 0px;
		margin: 0;
		padding: 1px 0px;
	}
}

.corners, input, textarea, button[type=submit] {
	clip-path: polygon(5px 0%, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0% 5px);
	/*clip-path: polygon(3px 3px, 0 3px, 0 calc(100% - 3px), 3px  calc(100% - 3px), 3px 100%,  calc(100% - 3px) 100%, calc(100% - 3px)  calc(100% - 3px), 100%  calc(100% - 3px), 100% 3px,  calc(100% - 3px) 3px,  calc(100% - 3px) 0, 3px 0);*/
}

.element .button {
	margin-right: 0;
}

/* ————————————————————————*/
/* FORM styling
/* ————————————————————————*/


input:focus, textarea:focus {
	outline: 0px solid var(--purple) !important;
	border: 3px solid var(--purple) !important;

}
button[type="submit"] {
	outline: none;
	border: none ;
	background-color: transparent ;
	font-family: 'monument-mono' ;
/*	color: var(--purple) ;*/
	text-transform: uppercase;
/*	margin: 0 auto;*/
	position: relative;
	display: block;
	font-size: inherit;
	font-weight: normal ;
}

button[type="submit"]:focus, button[type="submit"]:hover {
	color: var(--green);
	outline: none;
	border: none !important;

}
form .description {
	color: white;
}

.uk-button {
	width: 100%;
    font-family:  'monument-mono' !important;
    background: var(--black);
    border-radius: 0px;
    text-transform: uppercase;
}
.alert {
	display: none;
}

.hidden {
	display: none;
}

.gray {
	color: var(--gray);
}

.flex-container { 
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-start;
}

/* Vera's stuff*/
.special-button {
	position: sticky;
	display: block;
	right: calc(var(--m) );
	top:  calc(var(--m));
	overflow: hidden;
	white-space: nowrap; 
	background-color: var(--red);
	box-sizing: border-box;
	width: calc(100vw / 6 - var(--m)/2);
	max-width: calc(100vw / 6 - var(--m)/2);
	z-index: 100;

}
.special-button span {
	animation: ticker 5s linear infinite ;
	color: var(--black);
	padding-left: 100%; /* Initial offset */
	display: inline-block;

}
.special-button:hover span {
	letter-spacing: initial;
	animation-play-state: paused;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.projects {
	width: 100%;
	position: relative;
	display: block;
	float: left;
	clear: both;
}
.two-columns {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	column-count: 2;
	column-gap: 0px;
	padding: 0px;
	float: left;
	color: var(--gray);
}
.three-columns {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	column-count: 3;
	column-gap: 0px;
	padding: 0px;
	float: left;
	color: var(--gray);
}

.entry {
	position: relative;
	display: block;
	clear: both;
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
	height: auto;
	overflow: hidden;
	transform-origin: 0 0;
}
.entry * {
	text-decoration: none !important;
}

/* Filter via tags  */
.entry.not-selected {
	display: none;
}
.entry.selected {
	display: block;
}


.time {
	width: 4rem;
	position: relative;
	display: block;
	float: left;
}

.desc {
	width: calc(100% - 100px);
	position: relative;
	display: block;
	float: left;
}

.normal, .normal *  {
	color: #666;
	opacity: 1;
	animation: appear 0.5s 1 linear forwards;
}
.hidden {
	display: block;
	height: 0;
	transform: scale(1.0, 0);
	animation: none;
}



@keyframes appear {
	from {
		opacity: 0;
/*		height: -100;*/
/*		transform: scale(1.0, 0);*/
	}
	to {
/*		opacity: 0.8;*/
/*		height: 100%;*/
/*		transform: scale(1.0, 1.0);*/

	}
}



.textblock {
	position: relative;
	float: left;
	page-break-inside: avoid;
	clear: both;
	padding: 0 var(--m) 1.8rem var(--m);
}

.small-padding  {
	pointer-events: none;
	padding: var(--m);
}
.regular a {
	color: var(--red);

}
a.red {
	color: var(--red);
}
a.purple {
	color: var(--purple);
}
.textblock a {
	/*color: var(--gray-dark);*/
	letter-spacing: 0px;
	transition: letter-spacing 0.25s;
}
.textblock a:hover {
	/*color: var(--gray);*/
	letter-spacing: 5px;
	word-break: break-all;
}

a.nospace,
a.nospace:hover {
/*	margin-right: calc(-1 * var(--m)/2);*/
	letter-spacing: 0px;
}

.about .textblock a:nth-of-type(5n) {
	color: var(--red);
}
.about .textblock a:nth-of-type(5n+1) {
	color: var(--purple);
}
.about .textblock a:nth-of-type(5n+2) {
	color: var(--green);
}
.about .textblock a:nth-of-type(5n+3) {
	color: var(--yellow);
}
.about .textblock a:nth-of-type(5n+4) {
	color: var(--pink);
}

/* entry  */
.entry a:nth-of-type(5n) {
	color: var(--red);
}
.entry a:nth-of-type(5n+1) {
	color: var(--purple);
}
.entry a:nth-of-type(5n+2) {
	color: var(--green);
}
.entry a:nth-of-type(5n+3) {
	color: var(--yellow);
}
.entry a:nth-of-type(5n+4) {
	color: var(--pink);
}

.back-button {
	font-family: 'dumpling-extra';
	transform: scale(1.0, 1.0);
	transform-origin: 0 0 ;
	transition: all 0.5s;
}
.back-button a {
	line-height: 0.5;
	transition: all 0.5s;
}
.back-button:hover {
	letter-spacing: 0;
	transform: scale(4.0, 1.0);
}
.back-button:hover a {
	letter-spacing: 2vw !important;
}

.project-entry {
	color: var(--gray);
	padding: var(--m) 0;
	box-sizing: border-box;
	border-bottom: 1px solid gray;
}

.project-entry:first-of-type {
	padding-top: 0;
}


.first-selected {
	padding-top: 0;
}

.projects-title {
	display: flex;
	align-items: baseline;
}

.project-title {
/*	padding: 6px 0;*/
	color: var(--gray);
	padding-left: calc(var(--m)/2);
}

.thumbs {
	display: block;
	overflow: hidden;
	height: 90px;
}

.thumbnail {
	position: relative;
	width: auto;
	height: auto;
	max-height: 90px;
	display: block;
	margin-right: calc( var(--m) / 2 ) ;
	float: left;
	clear: none;
	/* background-color: var(--purple); */
}

.lazyload {
	height: 100px;

}
.col-3 iframe {
	width: calc(100% - var(--m)  * 2 );
	height: calc(27vw );
	max-height: 100vh;
}
.margin-bottom {
	margin-bottom: var(--m);
}
/*——————————————————*/
/*   Slider stuff   */
/*——————————————————*/

.slider-container {
	position: relative;
	float: left;
	display: block;
	clear: both;
	margin-top: 0 !important;
	width: 100vw;
	height: auto;
	max-height: 100vh;
	overflow-x: hidden;
}

.slider {
	position: relative;
	float: left;
	display: block;
	clear: both;
	overflow: hidden;
	width: 100vw;
	max-height: calc(100vh - var(--m) * 2);
}

.slide {
/*	width: 5vw;*/
	margin-right: 0px;
	position: relative;
	display: block;
	max-height: calc(100vh - var(--m) * 2);
	float: left;
	overflow: hidden;
	transition: all 0.5s;
	margin: 0 calc(var(--m) / 2);
}

.slide img, .video {
	height: auto;
	width: auto;
	max-width: calc(100vw - var(--m) );
	max-height: calc(100vh - var(--m)*2 );
	transition: width 0.5s;
	float: left;
	position: relative;
	display: block;

}
.image-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--gray);
	color: var(--black);
	padding: calc(var(--m)/2) calc(var(--m));
	opacity: 0;
	transition: opacity 0.5s;
	max-width: 100%;
	line-height: 1;
}

.slick-current .image-caption,
.slide:hover .image-caption,
*:hover > .image-caption  {
	opacity: 1;
}

.slick-current {
/*	width: 80vw !important;*/
	transition: all 0.5s;
}


.slick-current .stretch {
	position: relative;
	display: block;
	float: left;
	width: auto;
	height: 100%;
	float: left;
}

.slick-slide {
	transition: 1s all;
	transform-origin: 0 0;
}

.slick-current {
	transition: 1s all;
}
.slick-current .huge {
	transition:  all 1s 0.25s;
	font-variation-settings: "wdth" -50;
/*	transform: scale(0.7, 1);*/
}

/* Navigation */

.nav-overlay {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 500;
	pointer-events: none;
	overflow-y: hidden;
	width: 100%;
}
.slick-arrow {
	pointer-events: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	height: 100%;
	max-height: 100vh;
	width: 10vw;
	outline: none;
	border: none;
	font-family: 'dumpling';
	background-color: transparent;
	color: transparent;
}
.slick-prev {
	left: var(--m);
	cursor: w-resize;
	text-align: left;
}
.slick-prev:before,
.slick-next:after {
	content: '→';
	color: var(--gray);
	font-size: 2vw;
	transition: color 0.5s;
}

.slick-prev:before {
	content: '←';
}

.slick-next {
	right: var(--m);
	text-align: right;
	cursor: e-resize;
}
.slick-arrow:hover:before,
.slick-arrow:hover:after {
	color: var(--green);
}

/* Mini slider  */


.mini-slider {
	position: relative;
	float: left;
	display: block;
	clear: both;
	width: 100vw;
	height: calc(90px + var(--m) * 3) ;
	padding: 0;
/*	width: 100%;*/
/*	width: 100vw;*/
/*	height: auto;*/
}
.mini-slide {
/*	height: 20vh;*/
	position: relative;
	float: left;
	width: auto;
	height: auto;
	min-width: 25vw;
	height: calc(90px + var(--m) ) ;
	padding: 0 50px var(--m) 50px;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: baseline;
}

.mini-title {
	font-family: 'dumpling-extra';
	font-variation-settings: "wdth" -90, "slnt" 0;
	font-size: 125px;
	line-height: 0.7;
	margin-right: var(--m);
	user-select: none;
	transition: all 0.25s;

}
.mini-slide:hover .mini-title{
	font-variation-settings: "wdth" -70, "slnt" 0;

}

.mini-thumb {
	width: auto;
	max-height: 90px;
	position: relative;
	display: block;
	float: left;
	margin-right: calc(var(--m) / 2);
/*	height: 120px;*/
/*	background-color: var(--green);*/
}

.sketch-entry {
	margin-bottom: 32px;
}

.details, .details *, .details a  {
	color: var(--gray-dark) !important;
}
.sketch-img {
	width: auto;
	min-width: 50vw;
	height: 50vh;
	position: relative;
	display: block;
	float: left;
	clear: both;
	background-color: var(--green);
}
/*—————————————————————*/
/*      Process overlay      */
/*—————————————————————*/

.sketches-overlay {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	backdrop-filter: blur(20px);
	z-index: 999;
	transition: all 1s;
	opacity: 1;
}
.project-content {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	float: left;
}

.sketch-toggle {
	position: fixed;
	display: block;
	top: var(--m);
	right: var(--m);
	float: right;
/*	bottom: var(--m);*/
	z-index: 1000;
	margin-bottom: 0;
	font-variation-settings: 'crcl' 0;
	transition: font-variation-settings 0.25s;
	user-select: none;
	pointer-events: initial;

}
.sketch-toggle.toggled {
	font-variation-settings: 'crcl' 100;
}
.process-image {
	position: absolute;
	display: block;
	width: auto;
	height: auto;
	transform-origin: 50% 50%;
	transition: all 0.25s;
	pointer-events: initial;
}
.process-image img {
	position: relative;
	display: block;
	max-width: 30vw;
	max-height: 30vh;
	width: auto	;
	height: auto;
}
.process-image:hover{
/*	opacity: 0.5;*/
	transform: rotate(0deg) !important;
	z-index: 2000;
}
.invisible {
/*	display: none;*/
	visibility: hidden;
	opacity: 0;
	backdrop-filter: blur(0px);

}

/*—————————————————————*/
/*      Homepage      */
/*—————————————————————*/

.home-container {
	position: relative;
	float: left;
	display: block;
	clear: both;
	margin-top: 0 !important;
	width: 100vw;
	height: auto;
/*	max-height: 100vh;*/
	overflow-x: hidden;
}

.placeholder-slide {
	position: relative;
 	display: block;
 	float: left;
 	clear: both;
 	height: 100vh;
 	width: 100%;
 	pointer-events: none;
}
.home-slide {
 	position: fixed;
 	left: var(--m);
 	right: var(--m);
 	top: var(--m);
 	height: calc(100vh - var(--m) * 2);
 	width: calc(100vw - var(--m));
 	white-space: nowrap;
/* 	z-index: 999;*/
/*  border: 1px solid green;*/
  transform-origin: 50% 100% 0px;
  transform: scaleY(0);
  display: block;
  background-color: var(--black);
  overflow: hidden;
} 
.home-slide a {
	white-space: nowrap;

	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: flex-start;
	width: 100%;
}

.top-slide-inactive {
	transform-origin: 50% 0% 0px;
	transform: scaleY(0);
}

.bottom-slide-inactive {
	transform-origin: 50% 100% 0px;
	transform: scaleY(0);
}


.top-slide {
	transform-origin: 50% 0% 0px;
	display: block;
	z-index: 2;
}

.bottom-slide {
	transform-origin: 50% 100% 0px;
/*	z-index: -12;*/
	transform: scaleY(0);
	display: block;

}


.huge {
	display: block;
	position: relative;
	line-height: 0.72;
	font-size: calc(138.2vh - var(--m)*2 );
	clear: none;

/*	font-size: 50vw;*/
	float:	left;
	font-family: 'dumpling-extra';
	font-variation-settings: "wdth" -80, 'ntch' 100;
/*	transition:  all 1s 0.25s;*/
/*	transform: scale(0.1, 1);*/
}
.home-thumb {
	position: relative;
/*	width: 15vw;*/
	height: auto;
	width: auto;
/*	display: block;*/
	float: left;
/*	clear: none;*/
/*background-color: red;*/
transform-origin: 0 100% 0px;
}
.home-thumb img {
/*	height: 10vw;*/
	position: relative;
	display: block;
	width: 20vw;
	height: auto;
}
.caption {
	text-transform: uppercase;
	line-height: 1;
	margin-top: calc(var(--m)/2);
}
.home-thumb .caption {
	width: 20vw;
	height: auto;
	white-space: normal;
	display: block;
	float: left;
}
.home-title {
	text-transform: uppercase;
	width: auto;
	display: block;
	position: relative;
	transform-origin: 0 0 0px;
	font-variation-settings: "wdth" -100, 'ntch' 100;
}
.home-caption {
	width: auto;
	transform-origin: 0 0;
}
/*————————————————————*/
/* 404 page  */
/*————————————————————*/
.home-slide.slide-404 {
	transform-origin: 0 0 ;
	height: 100vh;
	width: auto;
	transform: scaleY(1);

}
.page-404 {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		display: block;
		position: relative;
		background-color: var(--black);
}
.slide-404 {
	text-transform: uppercase;
	white-space: nowrap;
	transform-origin: 0 0;
}
.title-404 {
	font-family: 'dumpling-extra';
	transform-origin: 0 0;
	animation: rainbow 5s linear infinite forwards;
}
.caption-404 {
	top: 10 px;
	left: 10px;
	opacity: 1;
	z-index: 999;
	bottom: auto;
}

@keyframes rainbow {
	0% {
		color: var(--gray);
/*		font-variation-settings: 'ntch' 100;*/
	}
	15% {
		color: var(--green);
/*		font-variation-settings: 'ntch' 0;*/
	}
	30% {
		color: var(--purple);
/*		font-variation-settings: 'ntch' 100;*/
	}
	45% {
		color: var(--yellow);
/*		font-variation-settings: 'ntch' 0;*/
	}
	60% {
		color: var(--red);
/*		font-variation-settings: 'ntch' 100;*/
	}
	75% {
		color: var(--blue);
/*		font-variation-settings: 'ntch' 0;*/
	}
	90% {
		color: var(--pink);
/*		font-variation-settings: 'ntch' 100;*/
	}
	100% {
		color: var(--gray);
/*		font-variation-settings: 'ntch' 100;*/
	}
}

/*—————————————————————*/
/*     Full height     */
/*—————————————————————*/



/* Teaching */
.label {
	font-size: smaller;
	display: inline;
	color: inherit;
	padding: 0 5px;
	border: 1px solid var(--gray);
	float: right;
	border-radius: 3px;
	user-select: none;
	cursor: pointer;
	margin-left: 4px;
}

.miscellaneous .category {
	border-color: var(--green);
	color: var(--green);
}

.institutes_festivals .category {
	border-color: var(--blue);
	color: var(--blue);
}

.framework .category {
	border-color: var(--red);
	color: var(--red);
}
.maker .category {
	border-color: var(--yellow);
	color: var(--yellow);
}
.communities_meetups .category {
	border-color: var(--blue);
	color: var(--blue);
}

.learning .category {
	border-color: var(--pink);
	color: var(--pink);
}
.resource .category {
	border-color: var(--purple);
	color: var(--purple);
}



.sticky {
	position: sticky;
	top: 0px;
	z-index: 888;
	pointer-events: none;
}

.sticky.button-subtitle {
	top: calc(2vw + 10px);
}
.two-columns.sticky {
	z-index: 100;
}
.pointer-events {
	pointer-events: all;
}
.print-only {
	display: none;
}

/* Loading content  */

.loading-icon .textblock {
	display: none;
	opacity: 0;
}

.loading-icon {
	min-height: 20vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.loading-icon:before {
	content: "";
	position: relative;
	display: block;
	width: 40px;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
	  radial-gradient(farthest-side,var(--purple) 94%,#0000),
	  radial-gradient(farthest-side,var(--green) 94%,#0000),
	  var(--purple);
	background-position: center;
	background-repeat: no-repeat;
	animation: l4 1s infinite; 
}

@keyframes l4 {
  0%   {background-size:0    0   ,0    0}
  30%,
  50%  {background-size:0    0   ,120% 120%}
  80%,
  100% {background-size:120% 120%,120% 120%}
}