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

/*=================================== Initialization & General ===================================*/
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*/
/*Site-specific medium paddings*/
.rightPadding { padding-right:5rem; }
.topPadding { padding-top:5rem; }
.bottomPadding { padding-bottom:5rem; }
.vPadding { padding-top:5rem; padding-bottom:5rem; }
/*Site-specific large paddings*/
.largePadding { padding:8rem; }
.largeTopPadding { padding-top:8rem; }
.largeVPadding { padding-top:8rem; padding-bottom:8rem; }
.largeHPadding { padding-left:8rem; padding-right:8rem; }
.veryLargeTopPadding { padding-top:12rem; }
/*Site-specific small & extra small paddings*/
.smallPadding { padding:3rem; }
.smallHPadding { padding-left:3rem; padding-right:3rem; }
.smallVPadding { padding-top:3rem; padding-bottom:3rem; }
.smallLeftPadding { padding-left:3rem; }
.smallTopPadding { padding-top:3rem; }
.smallBottomPadding { padding-bottom:3rem; }
.verySmallPadding { padding:1rem; }
.verySmallTopPadding { padding-top:1rem; }
.verySmallBottomPadding { padding-bottom:1rem; }
/*Site-specific padding exceptions*/
/*Site-specific medium margins*/
.topMargin { margin-top:3rem; }
.bottomMargin { margin-bottom:3rem; }
.leftMargin { margin-left:3rem; }
.rightMargin { margin-right:3rem; }
/*Site-specific large margins*/
.largeBottomMargin { margin-bottom:8rem; }
/*Site-specific small margins*/
.smallMargin { margin:1rem; }
.smallLeftMargin { margin-left:1rem; }
.smallRightMargin { margin-right:1rem; }
.verySmallRightMargin { margin-right:0.5rem; }
/*Site-specific framework: Backgrounds*/
/*Site-specific framework: Borders*/
.border.neon { border:0.05rem solid #d3fdcd; }
.border.red, header .border.neon:hover { border:0.08rem solid #ff4341; }
.topBorder.neon { border-top:0.05rem solid #d3fdcd; }
.bottomBorder.neon { border-bottom:0.05rem solid #d3fdcd; }
/*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 { background-color:#17191d; }
.greenBackground { background-color:#34413c; }

/*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 ===================================*/

header { left:1rem; bottom:1rem; z-index:1100; }
.home section, footer { z-index:110; }
.home .background { top:125vh; z-index:50; }
.home .backgroundColor { top:0; height:125vh; z-index:25; }
.home .foreground { opacity:0.75; width:100vw; z-index:100; }

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:8rem; }

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; }

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

/*Default types*/
span, header nav { 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.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, h4 { font:600 3rem/3.8rem degular, sans-serif; }
h2 { font:400 0.9rem/1.5rem ballinger-mono, sans-serif; text-transform:uppercase; letter-spacing:0.1rem; }
h3, h1.large { font:600 5.5rem/6.5rem 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 { color:#d3fdcd; }
.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; border-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; }

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

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

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

	div.popup.cookies { width:100%; margin:0 !important; padding:1rem 1rem 8rem 1rem; }

	/*=================================== Templates ===================================*/
	.largePadding, .largeHPadding, section.collective .intro { padding:4rem 0 6rem 0; }
	.largeBottomMargin { margin-bottom:4rem; }

	section.works .work.width70 { width:100% !important; }

	section.collective .groupPortrait { width:100% !important; margin-left:0; }
	section.collective .member, section.collective .associate { width:22rem; height:22rem; margin:4rem 0 0 6rem; }

	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%; }

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

	/*=================================== Texts ===================================*/
	span.huge { font:3rem/4rem 'degular', sans-serif; }
	span.call { font:8rem/8rem 'degular', sans-serif; text-transform:uppercase; }

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

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