/*=================================== Custom fonts ===================================*/

/*=================================== Initialization & General ===================================*/
:root { --maxWidth:1680px; --minWidth:600px; } /*Don't forget to adjust in framework.css and scripts.js!*/
.maxWidth { max-width:1680px; }
p { margin-bottom:1rem; }

/*=================================== Site-specific Framework & Snippets ===================================*/

html, body { cursor:url(/assets/images/cursor.png), auto; -webkit-font-smoothing:antialiased; }
/*Site-specific grids, widths & heights*/
.w-90vw { width:90vw; }
.h-50vw { height:50vw; }
.py-0_5vh { padding-top:0.5vh; padding-bottom:0.5vh }

/*Site-specific framework: Borders*/
.border.neon { border:0.05rem solid #f1ff54; }
.border.red, header .border.neon:hover { border:0.08rem solid #ff4341; }
.topBorder.neon { border-top:0.05rem solid #f1ff54; }
.bottomBorder.neon { border-bottom:0.05rem solid #f1ff54; }
.pixelButton { border-radius:0.25rem; border-top:0.2rem solid #eeede7; border-left:0.2rem solid #eeede7; border-bottom:0.2rem solid #aba99c; border-right:0.2rem solid #aba99c; }

/*Site-specific framework: Buttons & icons*/
button.continue { width:20rem; height:20rem; margin-bottom:3rem; background:url(/assets/images/icon-continue-neon.png) no-repeat center center; background-size:contain; }
button.continue:hover { background:url(/assets/images/icon-continue-red.png) no-repeat center center; background-size:contain; }
button.next { width:2.5rem; height:1.5rem; background:url(/assets/images/icon-next-neon.png) no-repeat center center; background-size:contain; }
button.next:hover { background:url(/assets/images/icon-next-red.png) no-repeat center center; background-size:contain; }
button.previous { width:2.5rem; height:1.5rem; background:url(/assets/images/icon-previous-neon.png) no-repeat center center; background-size:contain; }
button.previous:hover { background:url(/assets/images/icon-previous-red.png) no-repeat center center; background-size:contain; }
button.link { text-align:left; margin-bottom:1rem; padding-left:1.9rem; background:url(/assets/images/icon-next-neon.png) no-repeat left 0.2rem; background-size:1.4rem; }
button.link:hover { background:url(/assets/images/icon-next-red.png) no-repeat left 0.2rem; background-size:1.4rem; }
button.back { padding-left:1.9rem; background:url(/assets/images/icon-previous-neon.png) no-repeat left center; background-size:1.2rem; }
button.back:hover { background:url(/assets/images/icon-previous-red.png) no-repeat left center; background-size:1.2rem; }
button.nextPage { width:20rem; padding-top:12rem; background:url(/assets/images/icon-next-neon-large.png) no-repeat top right; background-size:12rem; }
button.nextPage:hover { background:url(/assets/images/icon-next-red-large.png) no-repeat top right; background-size:16rem; }
button.previousPage { width:20rem; padding-top:12rem; background:url(/assets/images/icon-previous-neon-large.png) no-repeat top left; background-size:12rem; }
button.previousPage:hover { background:url(/assets/images/icon-previous-red-large.png) no-repeat top left; background-size:16rem; }

/*Colors*/
.blackBackground { background-color:#000; }
.anthraciteBackground, body.greyBackground:not(.bordered) { background-color:#17191d; }
/*.greenBackground { background-color:#34413c; }*/
.greyBackground { background-color:#cdccc4; }

/*Snippets*/
#cookie_banner-wrapper { z-index:1000; }
.carousel button.previous { top:50%; left:1rem; z-index:1000; }
.carousel button.next { top:50%; right:1rem; z-index:1000; }

/*=================================== Templates ===================================*/


body:not(.bordered) #siteBorder, body:not(.bordered) #siteScreen { display:none; }
header { left:0; bottom:0.5rem; z-index:1100; }

.background { top:0; pointer-events:none; }
.background.screen { mix-blend-mode:soft-light; opacity:0.25; }
.background.border .top { background:url(/assets/images/bg-pa-border-top-oversized.png) no-repeat; background-position:bottom; background-size:100%; height:3.2vh; }
.background.border .sides { background:url(/assets/images/bg-pa-border-sides.png) repeat-y; background-size:100%; height:88.6vh; }
.background.border .bottom { background:url(/assets/images/bg-pa-border-bottom-oversized.png) no-repeat; background-size:100%; height:max(8.2vh, 4rem); }
.background.main { width:110%; }
.backgroundColor { top:0; height:125vh; z-index:25; }
.foreground { opacity:0.75; width:100vw; }

footer span.elevated { top:-0.5rem; }

section.highlights .highlight .wrapper { padding-top:100vh; }
section.highlights .highlight video { width:100vw; height:100vh; }

section.works { min-height:180vw; }
section.works .work .elevated { top:0; left:-1.5rem; }
section.works .work .details { height:0; overflow:hidden; transition:height 0.25s ease-in; }
section.works .work:hover .details { height:10rem; }

section.collective .intro { padding:8rem 8rem 8rem 40rem; }
section.collective .groupPortrait { margin-left:-3rem; }
section.collective .member, section.collective .associate { width:22rem; height:22rem; margin:4rem 1.75rem 0 1.75rem; padding:2rem; }
section.collective .member:hover, section.collective .associate:hover { border-radius:0; }
section.collective .member img, section.collective .associate img { display:none; }
section.collective .member:hover img, section.collective .associate:hover img { display:block; }

section.press .pressLinks { column-count:2; }
section.press .pressLinks a { margin-bottom:1rem; padding-right:2rem; }

section.description .intro, section.description .text { padding:8rem 8rem 3rem 40rem; }
section.description .mediaCredits, section.description .links { padding:0 8rem 0 40rem; }

section.quotes { min-height:100vh; }

section.texts .text { height:7.5rem; overflow:hidden; }
section.texts .text.active { height:auto; }

section.call { height:60rem; }

section.presentation p { margin-bottom:2rem; }

section.shows .show:not(.active) { height:7rem; }

/*=================================== Texts ===================================*/

/*Default types*/
header nav { font:1.2rem/1.6rem 'lores-12', sans-serif; }
span { font:1.2rem/1.6rem 'degular', sans-serif; }
span.large { font:1.5rem/2rem 'degular', sans-serif; }
span.veryLarge { font:2.2rem/3.5rem 'degular', sans-serif; }
span.presentation { font:4rem/5rem 'degular', sans-serif; }
span.huge { font:5rem/6rem 'degular', sans-serif; }
span.call { font:16rem/16rem 'degular', sans-serif; text-transform:uppercase; }
span.data, button { font:400 1.1rem/1.5rem ballinger-mono, sans-serif; text-transform:uppercase; letter-spacing:0.1rem; }
button.link { font:400 1.4rem/1.4rem ballinger-mono, sans-serif; text-transform:uppercase; letter-spacing:0.1rem; }
h1, h2.large, h4 { font:600 3rem/3.8rem degular, sans-serif; }
h2, h4.small { font:400 0.9rem/1.5rem ballinger-mono, sans-serif; text-transform:uppercase; letter-spacing:0.1rem; }
h2.presentation { font:600 5rem/6rem degular, sans-serif; }
h3, h1.large { font:600 5rem/6rem degular, sans-serif; }
h3.small { font:600 2.4rem/3.2rem degular, sans-serif; }
button.nextPage, button.previousPage { font:400 10rem/10rem degular, sans-serif; text-transform:none; letter-spacing:0; }

/*Template specific types*/
section.works span.data.elevated { line-height:5.6rem; }

/*Type colors*/
.neon, .neon a, .hoverNeon a:hover, a.hoverNeon:hover { /*color:#d3fdcd;*/ color:#f1ff54; }
.red, .red a, .hoverRed a:hover, .hoverRed a:active, a.hoverRed:hover, a.hoverRed:active, button.hoverRed:hover, .clickable.hoverRed:hover { color:#ff4341 !important; }
.black, .black a { color:#000; }
.white, .white a, .project.producer:hover .white.text { color:#fff; }

/*Type styles*/
.italic { font-style:italic !important; }
.uppercase { text-transform:uppercase; letter-spacing:0.07rem; }
.strong { font-weight:bold !important; }
.strikethrough, button.publication { text-decoration:line-through; }
button.strikethrough.active, a.strikethrough:hover { text-decoration:none !important; }
ol { list-style-position:inside; }

/*Link styles*/
.white.hoverUnderline a:hover, .white.hoverUnderline a:visited, button.direct.active span { text-decoration:none; border-bottom:0.05rem solid #fff !important; }
.noUnderline, .noUnderline a:link, .noUnderline a:visited, .noUnderline a:hover, .noUnderline a:active, .hoverUnderline a:link, .hoverUnderline a:visited { text-decoration:none; b/*order-bottom:none;*/ }
a.hoverItalic:hover, .hoverItalic a:hover, button.hoverItalic:hover, .clickable.hoverItalic:hover { font-style:italic !important; }
a.hoverBold:hover, .hoverBold a:hover { font-weight:bold; }

/*=================================== Widescreen Styles ===================================*/

@media all and (min-width:1680px) {
	/*=================================== Initialization & General ===================================*/
	p { margin-bottom:calc(1 / 100 * var(--maxWidth)); }

	/*=================================== Site-specific Framework & Snippets ===================================*/

	/*Site-specific framework: Borders*/
	.border.neon { border:calc(0.05 / 100 * var(--maxWidth)) solid #f1ff54; }
	.border.red, header .border.neon:hover { border:calc(0.08 / 100 * var(--maxWidth)) solid #ff4341; }
	.topBorder.neon { border-top:calc(0.05 / 100 * var(--maxWidth)) solid #f1ff54; }
	.bottomBorder.neon { border-bottom:calc(0.05 / 100 * var(--maxWidth)) solid #f1ff54; }
	.pixelButton { border-radius:calc(0.25 / 100 * var(--maxWidth)); border-top:calc(0.2 / 100 * var(--maxWidth)) solid #eeede7; border-left:calc(0.2 / 100 * var(--maxWidth)) solid #eeede7; border-bottom:calc(0.2 / 100 * var(--maxWidth)) solid #aba99c; border-right:calc(0.2 / 100 * var(--maxWidth)) solid #aba99c; }

	/*Site-specific framework: Buttons & icons*/
	button.continue { width:calc(20 / 100 * var(--maxWidth)); height:calc(20 / 100 * var(--maxWidth)); margin-bottom:calc(3 / 100 * var(--maxWidth)); }
	button.next { width:calc(2.5 / 100 * var(--maxWidth)); height:calc(1.5 / 100 * var(--maxWidth)); }
	button.previous { width:calc(2.5 / 100 * var(--maxWidth)); height:calc(1.5 / 100 * var(--maxWidth)); }
	button.link { margin-bottom:calc(1 / 100 * var(--maxWidth)); padding-left:calc(1.9 / 100 * var(--maxWidth)); background-position:left calc(0.2 / 100 * var(--maxWidth)); background-size:calc(1.4 / 100 * var(--maxWidth)); }
	button.link:hover { background-position:left calc(0.2 / 100 * var(--maxWidth)); background-size:calc(1.4 / 100 * var(--maxWidth)); }
	button.back { padding-left:calc(1.9 / 100 * var(--maxWidth)); background-size:calc(1.2 / 100 * var(--maxWidth)); }
	button.back:hover { background-size:calc(1.2 / 100 * var(--maxWidth)); }
	button.nextPage { width:calc(20 / 100 * var(--maxWidth)); padding-top:calc(12 / 100 * var(--maxWidth)); background-size:calc(12 / 100 * var(--maxWidth)); }
	button.nextPage:hover { background-size:calc(16 / 100 * var(--maxWidth)); }
	button.previousPage { width:calc(20 / 100 * var(--maxWidth)); padding-top:calc(12 / 100 * var(--maxWidth)); background-size:calc(12 / 100 * var(--maxWidth)); }
	button.previousPage:hover { background-size:calc(16 / 100 * var(--maxWidth)); }

	/*Snippets*/
	.carousel button.previous { left:calc(1 / 100 * var(--maxWidth)); }
	.carousel button.next { right:calc(1 / 100 * var(--maxWidth)); }

	/*=================================== Templates ===================================*/
	header { bottom:calc(0.5 / 100 * var(--maxWidth)); }

	.home .backgroundColor { height:calc(125 / 100 * var(--maxWidth)); }
	footer span.elevated { top:calc(-0.5 / 100 * var(--maxWidth)); }
	section.works { min-height:calc(180 / 100 * var(--maxWidth)); }
	section.works .work .elevated { left:calc(-1.5 / 100 * var(--maxWidth)); }
	section.works .work:hover .details { height:calc(10 / 100 * var(--maxWidth)); }
	section.collective .intro { padding:calc(8 / 100 * var(--maxWidth)) calc(8 / 100 * var(--maxWidth)) calc(8 / 100 * var(--maxWidth)) calc(40 / 100 * var(--maxWidth)); }
	section.collective .groupPortrait { margin-left:calc(-3 / 100 * var(--maxWidth)); }
	section.collective .member, section.collective .associate { width:calc(22 / 100 * var(--maxWidth)); height:calc(22 / 100 * var(--maxWidth)); margin:calc(4 / 100 * var(--maxWidth)) calc(1.75 / 100 * var(--maxWidth)) 0 calc(1.75 / 100 * var(--maxWidth)); padding:calc(2 / 100 * var(--maxWidth)); }
	section.press .pressLinks a { margin-bottom:calc(1 / 100 * var(--maxWidth)); padding-right:calc(2 / 100 * var(--maxWidth)); }
	section.description .intro, section.description .text { padding:calc(8 / 100 * var(--maxWidth)) calc(8 / 100 * var(--maxWidth)) calc(3 / 100 * var(--maxWidth)) calc(40 / 100 * var(--maxWidth)); }
	section.description .mediaCredits, section.description .links { padding:0 calc(8 / 100 * var(--maxWidth)) 0 calc(40 / 100 * var(--maxWidth)); }
	section.texts .text { height:calc(7.5 / 100 * var(--maxWidth)); }
	section.call { height:calc(60 / 100 * var(--maxWidth)); }
	section.presentation p { margin-bottom:calc(2 / 100 * var(--maxWidth)); }
	section.shows .show:not(.active) { height:calc(7/ 100 * var(--maxWidth)); }

	/*=================================== Texts ===================================*/
	/*Default types*/
	header nav { font:calc(1.2 / 100 * var(--maxWidth))/calc(1.6 / 100 * var(--maxWidth)) 'lores-12', sans-serif; }
	span { font:calc(1.2 / 100 * var(--maxWidth))/calc(1.6 / 100 * var(--maxWidth)) 'degular', sans-serif; }
	span.large { font:calc(1.5 / 100 * var(--maxWidth))/calc(2 / 100 * var(--maxWidth)) 'degular', sans-serif; }
	span.veryLarge { font:calc(2.2 / 100 * var(--maxWidth))/calc(3.5 / 100 * var(--maxWidth)) 'degular', sans-serif; }
	span.presentation { font:calc(4 / 100 * var(--maxWidth))/calc(5 / 100 * var(--maxWidth)) 'degular', sans-serif; }
	span.huge { font:calc(5 / 100 * var(--maxWidth))/calc(6 / 100 * var(--maxWidth)) 'degular', sans-serif; }
	span.call { font:calc(16 / 100 * var(--maxWidth))/calc(16 / 100 * var(--maxWidth)) 'degular', sans-serif; }
	span.data, button { font:400 calc(1.1 / 100 * var(--maxWidth))/calc(1.5 / 100 * var(--maxWidth)) ballinger-mono, sans-serif; letter-spacing:calc(0.1 / 100 * var(--maxWidth)); }
	button.link { font:400 calc(1.4 / 100 * var(--maxWidth))/calc(1.4 / 100 * var(--maxWidth)) ballinger-mono, sans-serif; letter-spacing:calc(0.1 / 100 * var(--maxWidth)); }
	h1, h2.large, h4 { font:600 calc(3 / 100 * var(--maxWidth))/calc(3.8 / 100 * var(--maxWidth)) degular, sans-serif; }
	h2, h4.small { font:400 calc(0.9 / 100 * var(--maxWidth))/calc(1.5 / 100 * var(--maxWidth)) ballinger-mono, sans-serif; letter-spacing:calc(0.1 / 100 * var(--maxWidth)); }
	h2.presentation { font:600 calc(5 / 100 * var(--maxWidth))/calc(6 / 100 * var(--maxWidth)) degular, sans-serif; }
	h3, h1.large { font:600 calc(5 / 100 * var(--maxWidth))/calc(6 / 100 * var(--maxWidth)) degular, sans-serif; }
	h3.small { font:600 calc(2.4 / 100 * var(--maxWidth))/calc(3.2 / 100 * var(--maxWidth)) degular, sans-serif; }
	button.nextPage, button.previousPage { font:400 calc(10 / 100 * var(--maxWidth))/calc(10 / 100 * var(--maxWidth)) degular, sans-serif; }

	/*Template specific types*/
	section.works span.data.elevated { line-height:calc(5.6 / 100 * var(--maxWidth)); }

	/*Type colors*/

	/*Type styles*/
	.uppercase { letter-spacing:calc(0.07 / 100 * var(--maxWidth)); }
}

/*=================================== Mobile Styles ===================================*/

@media all and (max-width:600px) {
	html { font-size:2.5vw; }

	button.nextPage { width:11rem; padding-top:12rem; background-size:12rem; }
	button.previousPage { width:11rem; padding-top:12rem; background-size:12rem; }

	div.popup.cookies { width:90%; left:5%; bottom:8rem; margin:0 !important; padding:1rem 1rem 1rem 1rem; }

	/*=================================== Templates ===================================*/
	header .item { float:none; display:inline-block; margin:0 0.5rem 1rem 0.5rem; }
	.background.border .bottom { position:fixed; bottom:0; }

	.background.main, .background.stars, .background.rear { width:150%; left:-25%; }
	.largePadding, .largeHPadding, section.collective .intro { padding:4rem 0 6rem 0; }
	.largeBottomMargin { margin-bottom:4rem; }

	section.works { margin-top:40rem; }
	section.works .work.width70 { width:100% !important; }

	section.collective .px-3 { padding-left:0; padding-right:0; }
	section.collective .groupPortrait { width:100% !important; margin-left:0; }
	section.collective .member, section.collective .associate { width:24rem; height:24rem; margin:4rem 0 0 0; }

	section.press .pressLinks { column-count:1; }

	section.description .intro, section.description .text { padding:8rem 0 3rem 0; }
	section.description .mediaCredits { width:100%; display:inline-block; }
	section.description .mediaCredits, section.description .links { padding:0 0 0 0; }

	section.quotes .item { padding:4rem 2rem 0 2rem !important; }

	section.texts .details.width60 { width:100%; }
	section.texts .text { height:9.5rem; }

	body.work section.description img { width:100% !important; }
	body.work section.media img { width:84% !important; }

	section.shows .show:not(.active) { height:9rem; }

	/*=================================== Texts ===================================*/
	span.veryLarge { font:2rem/3.5rem 'degular', sans-serif; }
	span.huge { font:3rem/4rem 'degular', sans-serif; }
	span.call { font:8rem/8rem 'degular', sans-serif; text-transform:uppercase; }
	h3, h1.large { font:600 4rem/5rem degular, sans-serif; }

	section.works h3, section.works h3 a { /*color:#ff4341 !important;*/ }

	button.nextPage, button.previousPage { font:400 4rem/4rem degular, sans-serif; }
}