@charset "UTF-8";

:root {
	--color-black: 0,0,0;
	--color-1: 255,0,0; /*red*/
	--color-2: 52,0,141; /*blue*/
	--color-3: 126, 88, 255; /*purple*/
	--color-4: 203,170,255; /*lilas*/
	--color-5: 164, 81, 146; /*grape*/
	--color-6: 163, 0, 85; /*fuchsia*/
	--color-7: 164, 69, 86; /*rose*/
	--color-8: 108,0,0; /*brown*/
	--color-9: 202, 141, 143; /*light-rose*/
	--color-10: 255, 185, 158; /*salmon*/
	--color-11: 244, 209, 191; /*skin tone*/
	--color-12: 249, 242, 213; /*off white*/
	--color-13: 0,0,0; /*black*/
	--color-white: 255,255,255;
	--transition-duration-bt: 0.4s;
	--transition-timing-linear: linear;
	--transition-timing-ease-out: cubic-bezier(0,0.6,0.4,1);
	--transition-timing-ease-in-out: cubic-bezier(0.6,0,0.4,1);
	/*--transition-timing-ease-in-out: cubic-bezier(0.25, 0.25, 0.25, 1);*/

	--page-margin: clamp(min(50px, (50 / 414) * 100vw), (100 / 1440) * 100vw, 100px);
	--page-margin-neg: calc(var(--page-margin) * -1);
	--grid-column-gap: clamp(min(20px, (20 / 414) * 100vw), (20 / 1440) * 100vw, 20px);
	--grid-column-w: calc((min(1440px, 100vw) - (var(--page-margin) * 2) - (11 * var(--grid-column-gap))) / 12);
}

html {
	height: 100%;
	font-family: Arial, sans-serif;
}

body {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}

body.noscroll,
body.show-nav {
	overflow: hidden;
}

* {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
}

img, iframe, video {
	display: block;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, button, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: none;
}

ul, li {
	list-style: none;
}

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

h1, h2, h3, h4, h5 {
	font-weight: normal;
}

button {
	background: none;
	border-radius: 0;
	cursor: pointer;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

*:focus {
    outline: 0;
}


/*************************************
	Color theme
 *************************************/


:root {
	--color-theme-01 : rgb(var(--color-8));
	--color-theme-02 : rgb(var(--color-6));
	--color-theme-03 : rgb(var(--color-5));
	--color-theme-04 : rgb(var(--color-1));
	--color-theme-05 : rgb(var(--color-2));
	--color-theme-06 : rgb(var(--color-8));
}

header nav ul li,
.artists-list li .tags li,
.filters .toggle,
.filters li:after,
.filters li a:after,
.artist h1,
.artist h2,
.artist h3,
.artist h4,
.generic:not(.contact) h1,
.generic:not(.contact) h2,
.artist .professions,
.artist .links,
.artist .sponsors,
.artist p,
.artist td,
.contact,
ul.unordered-list,
footer {
	border-color: var(--site-colors-theme);
	color: var(--site-colors-theme);
	transition: border-color 2s linear, color 2s linear;
}

.artists-list li picture:after,
.artist .tags li,
.filters .toggle > span,
.filters li {
	border-color: var(--site-colors-theme);
	background-color: var(--site-colors-theme);
	transition: border-color 2s linear, background-color 2s linear;
}

.logo-mofat-mng svg,
.logo-mo svg {
	fill: var(--site-colors-theme);
	transition: fill 2s linear;
}


/*************************************
	Nav
 *************************************/


header {
	display: flex;
	justify-content: space-between;	
	position: fixed;
	max-width: 1440px;
	left: 0;
	right: 0;
	top: 0;
	margin: 0 auto;
	padding: 20px;
	z-index: 1000;
}

header .logo-mofat-mng {
	position: relative;
}

header .logo-mofat-mng a {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

header .logo-mofat-mng svg {
	display: block;
	width: 86px;
	height: 48px;
}

header nav ul {
	display: flex;
	position: relative;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.125em;
	column-gap: 0.625em;
}

header nav ul:before {
	content: "";
	display: block;
	position: absolute;
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	left: -20px;
	top: -20px;
	border-radius: 9999px;
	z-index: -1;
	
}

header nav ul li {
	border-radius: 9999px;
	padding: 0.5em;
}

header nav ul li:nth-child(1) {
	border-style: solid;
	border-width: 1px;
}

header nav ul li.active {
	padding: 0.5em;
}

header nav ul li.lang {
	text-transform: uppercase;
}

header div.ico {
	display: none;
}


/*************************************
	Sections
 *************************************/


.container {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

main {
	flex: 1 0 auto;
	display: block;
	position: relative;
	transition: transform 1.2s var(--transition-timing-ease-in-out);
    z-index: 100;
}

section {
	display: block;
	position: relative;
	width: 100%;
	opacity: 1;
	transition: opacity 0.6s var(--transition-timing-linear);
}

strong {
    font-weight: 700;
}

ol.ordered-list {
    counter-reset: count-ordered-list;
}

ol.ordered-list li,
ul.unordered-list li {
	position: relative;
	padding-left: 1rem;
}

ol.ordered-list li:before {
    content: counter(count-ordered-list)".";
	counter-increment: count-ordered-list;
    display: inline-block;
    position: absolute;
    left: 0;
}

ul.unordered-list li:before {
    content: "•";
    display: inline-block;
    position: absolute;
    left: 0;
}

.text-decoration-underline {
	text-decoration: underline;
}

.text-transform-uppercase {
	text-transform: uppercase;
}

.white-space-nowrap {
	white-space: nowrap;
}

.logo-sodec {
    width: 135px;
}

.logo-musicaction {
    width: 100px;
}

.logo-mo {
	display: block;
	position: sticky;
	top: 0;
	pointer-events: none;
	z-index: 100;
}

.logo-mo > div {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100vh;
}

.artists-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: min(95px, (95 / 1440) * 100vw);
	grid-auto-flow: row dense;
	grid-gap: min(80px, (80 / 1440) * 100vw);
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: 80px min(145px, (145 / 1440) * 100vw);
}

.artists-list:before {
    content: "";
    display: block;
    position: fixed;
    width: 100%;
    height: 80px;
	top: 0;
	background-image: linear-gradient(rgba(var(--color-white),1), rgba(var(--color-white),0));
	z-index: 10;
}

.artists-list:after {
	grid-column: 2 / span 1;
	grid-row: 1 / span 4;
	content: "";
	display: block;
	position: relative;
	width: 100%;
}

.artists-list > li {
	grid-row-end: span 3;
	position: relative;
	animation: kf-fade-in 0.2s linear both;
	animation-delay: calc(var(--transition-delay) * 0.1s);
}

/**/

.artists-list {
	grid-gap: min(40px, (40 / 1440) * 100vw);
}

.artists-list:after {
	grid-row: 1 / span 5;
}

.artists-list > li {
	grid-row-end: span 4;
}

.artists-list li figure picture {
	border-radius: 3px;	
}

/**/

.artists-list > li.col-0 {
	grid-column-start: 1;
	transform: translateY(calc(var(--translate-offset) * -50%));
}

.artists-list > li.col-1 {
	grid-column-start: 2;
}

.artists-list > li.col-2 {
	grid-column-start: 3;
	transform: translateY(calc(var(--translate-offset) * -25%));
}

.artists-list li figure,
.artists-list li picture {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.artists-list li picture:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	mix-blend-mode: screen;
	opacity: 0;
	transition: border-color 2s linear, background-color 2s linear, opacity 0.6s linear;
}

.artists-list li:hover picture:after {
	opacity: 1;
}

.artists-list li img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter 0.4s linear, transform 0.6s cubic-bezier(0.25,0.25,0.25,1);
}

.artists-list li:hover img {
	filter: grayscale(0.75);
	transform: scale(1.1);
}

.artists-list li figcaption {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 16px;
	margin-bottom: calc(var(--tags-h) * -1px);
	padding: 1em;
	opacity: 0;
}

.artists-list.show li figcaption {
	opacity: 1;
	transition: margin 0.6s cubic-bezier(0.25,0.25,0.25,1), opacity linear 0.4s 0.6s;
}

.artists-list li:hover figcaption {
	margin-bottom: 0;
}

.artists-list li figcaption h2 {
	color: rgb(var(--color-white));
	font-family: 'Berlingske Serif';
	font-weight: 400;
	font-size: 24px;
	line-height: 1.1667em;
}

.artists-list li .tags,
.artist .tags {
	display: flex;
	flex-wrap: wrap;
	font-weight: 700;
	line-height: 1.125em;
	column-gap: 0.625em;
	row-gap: 0.625em;
	margin-top: 1em;
}

.artists-list li .tags {
	opacity: 0;
	transition: opacity 0.4s linear;
}

.artists-list li:hover .tags {
	opacity: 1;
}

.artist .tags {
	max-height: none;
	font-size: 16px;
	margin-top: 0.75em;
}

.artists-list li .tags li,
.artist .tags li {
	display: inline-block;
	border-style: solid;
	border-width: 1px;
	border-radius: 9999px;	
	padding: 0.5em;
}

.artists-list li .tags li {
	background: rgb(var(--color-white));
}

.artist .tags li {
	color: rgb(var(--color-white));
}

.filters {
	display: flex;
	align-items: center;
	column-gap: 0.625em;
	position: sticky;
	bottom: 20px;
	font-size: 16px;
	margin-left: calc(20px + max(0px, 50vw - 720px));
}

.filters .toggle {
	position: relative;
	background: rgb(var(--color-white));
	border-style: solid;
	border-width: 1px;
	border-radius: 9999px;
	cursor: pointer;
	font-weight: 700;
	line-height: 1.125em;
	padding: 1em 3em;
	white-space: nowrap;
	z-index: 10;
}

.filters .toggle i {
	display: inline-block;
	margin-left: 0.5em;
}

.filters .toggle > span {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 9999px;
	color: rgb(var(--color-white));
	opacity: 0;
	transition: border-color 2s linear, background-color 2s linear, opacity 0.4s linear;
}

.filters.show .toggle > span {
	opacity: 1
}

.filters .filters-tags {
	/*border-radius: 9999px;*/
	overflow: hidden;
}

.filters ul {
	display: flex;
	flex-wrap: wrap;
	font-weight: 700;
	line-height: 1.125em;
	column-gap: 0.625em;
	row-gap: 0.625em;
	transform: translateX(-100%);
	transition: transform 0.6s cubic-bezier(0.25,0.25,0.25,1);
}

.filters.show ul {
	transform: translateX(0);
}

.filters li {
	display: inline-block;
	position: relative;
	border-style: solid;
	border-width: 1px;
	border-radius: 9999px;
	color: rgb(var(--color-white));
	padding: 0.5em;
}

.filters li:after {
	content: attr(data-content);
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgb(var(--color-white));
	border-radius: 9999px;
	opacity: 0;
	transition: border-color 2s linear, color 2s linear, opacity 0.4s;
}

.filters li a {
	position: relative;
}

.filters li a:after {
	content: attr(data-content);
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	transition: border-color 2s linear, color 2s linear, opacity 0.4s;
	z-index: 10;
}

.filters li:hover:after,
.filters li.active:after,
.filters li:hover a:after,
.filters li.active a:after {
	opacity: 1;
}

.artist,
.generic {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--grid-column-gap);
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--page-margin);
}

.artist > figure {
	grid-column: 1 / span 6;
	position: sticky;
	height: 100vh;
	top: 0;
	margin-left: calc(min(0px, 720px - 50vw) - var(--page-margin));
}

.artist > figure picture,
.artist > figure img {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.artist > figure img {
	object-fit: cover;
	object-position: center 37.5%;
}

.artist > figure figcaption {
	position: absolute;
	left: 20px;
	bottom: 20px;
	color: rgb(var(--color-white));
	font-size: 12px;
}

.artist > div.content,
.generic > div.content {
	grid-column: 8 / span 5;
	position: relative;
	padding: 140px 0 120px 0;
}

.generic > div.content {
	grid-column: 1 / -1;
}

div.content:before {
    content: "";
    display: block;
    position: sticky;
    width: 100%;
    height: 100px;
	top: 0;
	background-image: linear-gradient(rgba(var(--color-white),1), rgba(var(--color-white),0));
}

.header-mobile {
	display: none;
}

.header {
	margin-left: calc(((var(--grid-column-w) * 7) + (var(--grid-column-gap) * 7) + var(--page-margin)) * -1);
	padding-left: var(--page-margin) !important;
	z-index: 10;
}

.header:before {
	position: relative !important;
}

.header:after {
	content: "";
	display: block;
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	background: rgb(var(--color-white));
	opacity: calc(1 - var(--prct));
	z-index: -1;
}

.artist h1,
.artist h2,
.generic:not(.contact) h1,
.generic:not(.contact) h2 {
	min-height: 0vh;
    font-family: 'Berlingske Serif';
    font-size: clamp(32px, (64 / 1440) * 100vw, 64px);
    line-height: 1.2em;
}

.artist .professions,
.artist .links,
.artist .sponsors {
	display: flex;
	flex-wrap: wrap;
	font-weight: 700;
	font-size: 14px;
}

.artist .professions {
	margin: 10em 0 2em 0;
}

.artist .professions li + li:before {
	content: "/";
	display: inline-block;
	margin: 0 0.5em;
}

.artist .links {
	margin: 4em 0;
}

.artist .links a {
	text-decoration: underline;
}

.artist .professions > li,
.artist .links > li,
.artist .sponsors > li {
	display: inline-block;
}

.artist .links > li + li,
.artist .sponsors > li + li {
	margin-left: 1em;
}

.artist h3 {
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3em;
	text-transform: uppercase;
}

.artist h4 {
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3em;
}

.artist p,
.artist ul.unordered-list,
.artist td {
	font-size: 20px;
	line-height: 1.3em;
}

.artist td {
	vertical-align: text-top;
}

.artist td + td {
	padding: 0 0.25em;
}

.artist h1 + p,
.artist h2 + p,
.artist h2 + h3 {
	margin-top: 7em;
}

.artist p + p,
.artist table + p,
.artist p + h3,
.artist p + h4,
.artist h3 + h4,
.artist h3 + ul,
.artist ul.unordered-list + p,
.artist ul.unordered-list + h4 {
	margin-top: 1.3em;
}

.artist a {
	text-decoration: underline;
}

.media {
	font-size: 14px;
	margin-top: 4em;
}

.media img {
	width: 100%;
	height: auto;
}

.media.video {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.media iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.contact {
	grid-template-rows: auto auto 1fr;
	min-height: 100vh;
	padding-top: min(240px, (240 / 1440) * 100vw);
	padding-bottom: 20px;
}

.contact h2 {
	grid-column: 1 / -1;
	font-weight: 700;
	font-size: 16px;
}

.contact p {
	grid-column-end: span 6;
    font-family: 'Berlingske Serif';
	font-size: 24px;
	line-height: 1.3333em;
}

.contact .logo-mo {
	grid-column: 1 / -1;
	align-self: end;
	margin-left: calc(max(-100px, (-100 / 1440) * 100vw) + 20px);
}

.contact .logo-mo svg {
	width: min(986px, (986 / 1440) * 100vw);
	height: auto;
}


/*************************************
	Footer
 *************************************/


footer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	position: relative;
	width: 100%;
	max-width: 1440px;
	font-size: clamp(12px, (16 / 1440) * 100vw, 16px);
	margin: 0 auto;
	padding: 20px;
	padding-top: 72px;
}

footer > div {
	display: flex;
	align-items: center;
	column-gap: min((20 / 1440) * 100vw, 20px);
}

footer > *:nth-child(3) {
	justify-content: flex-end;
}

footer .brand,
footer .email {
	font-weight: 700;
}

footer .address,
footer .phone {
	font-family: 'Berlingske Serif';
}

footer .logo-mo svg {
	width: 62px;
	height: auto;
}


@keyframes kf-fade-in {
    0%   {opacity: 0;}
    100%  {opacity: 1;}
}

@media screen and (max-width: 980px) {
	.artists-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.artists-list:after {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
	}

	.artists-list > li.col-0,
	.artists-list > li.col-1,
	.artists-list > li.col-2 {
		grid-column-start: auto;
		transform: none;	
	}

	.artists-list > li {
		grid-row-end: span 5;
	}

	.artists-list > li:nth-child(2n+1) {
		transform: translateY(calc((var(--translate-offset) * 1) * -50%));
	}
	
	
	.artist > figure {
		grid-column: 1 / span 7;
	}

	.artist > div.content,
	.generic > div.content {
		grid-column: 8 / span 5;
	}
	
	.header {
		padding-left: calc((var(--grid-column-w) * 1) + (var(--grid-column-gap) * 1) + var(--page-margin)) !important;
		padding-right: calc((var(--grid-column-w) * 1) + (var(--grid-column-gap) * 1)) !important;
	}
	
	.contact {
		min-height: calc(100vh - 144px);
	}
	
	.filters {
		display: block;
		width: 100%;
		bottom: 0;
		margin-left: 0;
		background-color: var(--site-colors-theme);
		transition: background-color 2s linear;
	}
	
	.filters .toggle {
		width: 100%;
		background: transparent;
		border-width: 0;
		border-bottom-width: 1px;
		border-bottom-color: rgb(var(--color-black));
		border-radius: 0;
		color: rgb(var(--color-white));
		font-size: 18px;
		text-align: center;
		transition: none;
	}
	
	.filters .toggle:before {
		content: none;
	}
	
	.filters .filters-tags {
		border-radius: 0;
	}
	
	.filters ul {
		font-size: 14px;
		padding: 20px;
	}
	
	.filters li {
		background: rgb(var(--color-black));
		border-color: rgb(var(--color-black));
		color: rgb(var(--color-white));
		transition: border-color 0.4s linear, background-color 0.4s linear;
	}
	
	.filters li:hover,
	.filters li.active {
		background: rgb(var(--color-white));
		color: rgb(var(--color-black));
	}
	
	.filters li:after,
	.filters li a:after {
		content: none;
	}
	
	.filters ul {
		transform: none;
	}
	
	.filters .filters-tags {
		height: 0;
		transition: height 0.6s cubic-bezier(0.25,0.25,0.25,1);
	}
	
	.filters.show .filters-tags {
		height: calc(var(--tags-h) * 1px);
	}
}

@media screen and (max-width: 727px) {
	header nav {
		display: block;
		position: fixed;
		width: 100vw;
		min-height: 100vh;
		left: 0;
		top: 0;
		background-color: var(--site-colors-theme);
		transform: translateX(100%);
		transition: border-color 2s linear, background-color 2s linear, transform 0.4s cubic-bezier(0.25,0.25,0.25,1);
	}
	
	header nav ul {
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		row-gap: 20px;
		padding: 20px;
		padding-top: 108px;
	}
	
	header nav ul li {
		border-color: rgb(var(--color-white));
		color: rgb(var(--color-white));
		transition: none;;
	}
	
	
	/*--  nav-open  --*/

	body.nav-open {
		overflow: hidden;
	}
	
	body.nav-open header nav {
		transform: translateX(0);
	}
	

	/*--  nav ico  --*/

	header div.ico {
		display: block;
		position: absolute;
		right: 32px;
		top: 32px;
		cursor: pointer;
		pointer-events: auto;
		transition: background-color 0.2s linear;
		z-index: 20;
	}

	header div.ico > div {
		display: block;
		position: relative;
		width: 40px;
		height: 24px;
	}

	header div.ico span {
		display: block;
		position: absolute;
		width: 100%;
		height: 3px;
		background-color: var(--site-colors-theme);
		border-radius: 9999px;
		transition: width 0s 0.3s, background-color 2s linear, opacity 0.3s 0.3s, top 0.3s 0.3s, transform 0.3s;
	}
	
	header div.ico span:after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: rgb(var(--color-white));
		border-radius: 9999px;
		opacity: 0;
		transition: opacity 0.3s 0.3s;
	}

	body.nav-open header div.ico span {
		transition: width 0s 0.3s, background-color 2s linear, opacity 0.3s, top 0.3s, transform 0.3s 0.3s;
	}
	
	body.nav-open header div.ico span:after {
		opacity: 1;
		transition: opacity 0.3s;
	}

	header div.ico span:nth-child(1) {
		top: 0px;
	}

	header div.ico span:nth-child(2) {
		top: calc(50% - 1.5px);
	}

	header div.ico span:nth-child(3) {
		top: calc(100% - 3px);
		right: 0;
	}
	
	body.nav-open header div.ico span:nth-child(1) {
		top: calc(50% - 1.5px);
		transform: rotate(45deg);
	}

	body.nav-open header div.ico span:nth-child(2) {
		opacity: 0;
	}

	body.nav-open header div.ico span:nth-child(3) {
		top: calc(50% - 1.5px);
		width: 100%;
		transform: rotate(-45deg);
	}
	
	header .logo-mofat-mng {
		transition: fill 2s linear, filter 0.2s linear;
		z-index: 10;
	}
	
	body.nav-open header .logo-mofat-mng {
		filter: brightness(0%) invert(100%);
	}
		
	.artists .logo-mo {
		display: none;
	}

	.artists-list {
		grid-template-columns: auto;
		grid-auto-rows: auto;
		grid-gap: 76px;
		padding: 20px;
		padding-top: 56px;
	}
	
	.artists-list:after {
		content: none;
	}
	
	.artists-list > li {
		grid-row-end: auto;
		/*/height: 50vw;*/
		height: 60vw;
	}

	.artists-list > li:nth-child(2n+1) {
		transform: none;
	}
	
	.artists-list li figure {
		overflow: visible;	
	}
	
	.artists-list li img {
		object-position: center 60%;
	}

	.artists-list li figcaption {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		margin-bottom: 0;
		padding: 0;
		opacity: 1;
	}

	.artists-list li figcaption h2 {
		color: var(--site-colors-theme);
		transform: translateY(calc(-100% - 14px));
		transition: color 2s linear;
	}

	.artists-list li .tags {
		padding: 1em;
		opacity: 1;
	}
	
	.artist,
	.generic {
		padding: 0 20px;
		padding-top: 88px;
	}
	
	.artist + .artist {
		padding-top: 0;
	}
	
	.artist > figure {
		grid-column: 1 / -1;
		position: sticky;
		height: 70vw;
		margin: 0 -20px;
		z-index: 10;
	}
	
	.artist > figure:after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 60px;
		left: 0;
		bottom: -60px;
		background-image: linear-gradient(rgba(var(--color-white),1), rgba(var(--color-white),0));
	}
	
	.artist > div.content,
	.generic > div.content {
		grid-column: 1 / -1;
		padding: 0 !important;
		padding-bottom: 20px !important;
	}
	
	div.content:before {
		content: none;
	}
	
	.header {
		margin-left: 0;
		padding-left: 0 !important;
		z-index: 10;
	}
	
	.artist h1,
	.artist h2 {
		display: block;
		position: sticky;
		top: calc(70vw - ((var(--top-offset) * 1px) + 5px));
		z-index: 100;
	}
	
	.artist h2 {
		margin-bottom: -15px;
	}
	
	.artist h1:before,
	.artist h2:before {
		content: "";
		display: block;
		position: absolute;
		width: calc(100% + 40px);
		height: calc(100% + 10px);
		left: -20px;
		top: -5px;
		background-image: linear-gradient(45deg, rgba(var(--color-white),0.65) 25%, rgba(var(--color-white),0.1));
		z-index: -1;
	}
	
	.artist .professions {
		margin: 4em 0 2em 0;
	}
	
	.artist h2 + p {
		margin-top: 2em;
	}
	
	.artist > figure img {
		object-position: center 65%;
	}
	
	.header-mobile {
		display: block;
		color: var(--site-colors-theme);
		padding: 20px;
		padding-top: 88px;
		padding-top: 116px;
		transition: color 2s linear;
	}
	
	.header-mobile h2 {
		font-family: 'Berlingske Serif';
		font-weight: 400;
		font-size: 24px;
		line-height: 1.3333em;
	}
	
	.header-mobile h3 {
		font-weight: 700;
		font-size: 18px;
		line-height: 1em;
		text-transform: uppercase;
		margin-top: 3.5em;
	}
	
	.header-mobile h4 {
		font-weight: 700;
		font-size: 18px;
		line-height: 1em;
		margin-top: 3.5em;
	}
	
	.content.header.team {
		display: none;
	}
	
	.contact {
		display: block;
		min-height: 0;
		padding-top: 116px;
	}
	
	.contact h2 + p,
	.contact p + p {
		margin-top: 1.3333em;		
	}
	
	.contact .logo-mo {
		display: none;
	}
	
	footer {
		grid-template-columns: auto;
		grid-row-gap: 2em;
		font-size: 14px;
		padding-top: 2em;
	}
	
	footer > div {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 0.5em;
	}
	
	footer .address span {
		display: block;
	}
	
	footer .logo-mo {
		grid-row-start: 1;
	}
}