:root {
	--headline: 1.3em; --pad: 1rem; }

* {
	padding: 0;
	margin: 0;
	outline-color: var(--primary);
	border-color: var(--fade);
	border-width: thin;
}


figure>div.audiotoggle{
	right: 0;
	bottom: 0;
	position: absolute;
	opacity: 0;
	transition: opacity 0.5s ease 0.5s;
}
figure>video.isplaying+div.audiotoggle{
	opacity: 1;
}

figure>div.audiotoggle>input{
	display: none;
}
figure>div.audiotoggle:hover label{
	background-color: white;
}

figure>div.audiotoggle>input+label{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	min-height: 2em;
	min-width: 2em;
	border-radius: 50%;
	margin: 2em;
	cursor: pointer;
	transition: background-color 0.3s ease;
	background-image: url('icon.svg');
	background-size: 1.4em;
	background-repeat: no-repeat;
	background-position: center;
}
figure>div.audiotoggle:not(.on):after{
	position: absolute;
	left: 2.2em;
	top: 2.9em;
	display: inline-block;
	content: "";
	width: 1.7em;
	height: 3px;
	border-radius: 2px;
	background-color: currentColor;
	transform: rotate(45deg);
}

@keyframes exit {
	from {
		max-height: 100vh;
	}

	to {
		max-height: 0vh;
	}
}
@keyframes fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}
@keyframes slidein {
	from {
		transform: translate(0,5em);
	}
}

@keyframes hello {
	from {
		transform: scale(0);
	}
}

@keyframes moveit {
	from {
		left: 0%;
		right: 100%;
	}

	50% {
		right: 0%;
	}

	to {
		left: 100%;
		right: 0%;
	}
}

::-moz-selection {
	color: var(--primary);
	background: var(--fade);
}

::selection {
	color: var(--primary);
	background: var(--fade);
}

html {
	scroll-behavior: smooth;
}

body>main {
	display: flex;
	flex-direction: column;
}

#start~nav div#slot {
	min-height: 0;
}

p>a, nav {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: unset;
	}
}

@font-face {
	font-family: 'Ringier';
	font-weight: 200;
	src: url("Ringier-Light.eot");
	src: url("Ringier-Light.woff") format("woff2");
}

@font-face {
	font-family: 'Ringier';
	font-weight: 400;
	src: url("Ringier-Book.eot");
	src: url("Ringier-Book.woff") format("woff2");
}

@font-face {
	font-family: 'Ringier';
	font-weight: 400;
	font-style: italic;
	src: url("Ringier-BookItalic.eot");
	src: url("Ringier-BookItalic.woff") format("woff2");
}

@font-face {
	font-family: 'Ringier';
	font-weight: 600;
	src: url("Ringier-Bold.eot");
	src: url("Ringier-Bold.woff") format("woff2");
}

@font-face {
	font-family: 'Ringier';
	font-weight: 600;
	font-style: italic;
	src: url("Ringier-BoldItalic.eot");
	src: url("Ringier-BoldItalic.woff") format("woff2");
}

@font-face {
	font-family: 'Ringier';
	font-weight: 800;
	src: url("Ringier-Black.eot");
	src: url("Ringier-Black.woff") format("woff2");
}

body {
	font-family: Ringier, Helvetica Neue, Helvetica, Arial, sans-serif;
	line-height: 1.45;
	color: var(--typo);
}

body.lock {
	overflow: hidden;
}

body.drag {
	position: fixed;
	overflow-y: scroll
}

video, img {
	width: 100%;
	max-width: 100vw;
	max-height: 100vh;
}

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

input,textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

main>div#start>a.cta{
	text-decoration: underline;
	position: absolute;
	left: 0%;
	right: 0;
	top: 20%;
	font-size: 1.5em;
	z-index: 99999;
	text-align: center;
	font-weight: 800;
	max-width: 70ch;
	margin: 0 auto;
	padding: 1em;
	transform: translate(0,-50%);
	animation: fadein 1s ease 0.5s both;
	color: white;

}

main>canvas+a#arrow{
	display: none;
}

main>a{
	position: relative;
}
section>input:not(:checked)+label:not(.question) span {
	display: none;
}
section>div.podcast,
section>div.copy {
	padding: 2rem var(--pad);
}

section h2+div.copy {
	padding-top: 0;
}

section>div.copy p {
	padding-bottom: 1em;
}

nav.index a>span, section>h2, section>div p {
	hyphens: auto;
	white-space: pre-wrap;
}

section>h2:hover>a {
	text-decoration: underline;
}

main>div#start>h2#introcopy {
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 8vw;
	font-weight: 800;
	line-height: 1;
	user-select: none;
	pointer-events: none;
	z-index: 99999;
	padding-top: 6em;
	transition: opacity 0.2s ease 0s;
}

main>div#start>h2#introcopy.hi {
	opacity: 1;
	transition: opacity 1s ease 0.1s;
}

canvas#canvas {
	transition: background-color 0.5s ease 0.1s;
	width: 100%;
	height: 100vh;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}

div#start{
	grid-column: 1 / -1;
	height: 100vh;
	max-height: 100vh;
	transition: max-height 0.5s ease;
	overflow: hidden;
	position: relative;
}

main>a>figure{
	background-color: var(--primary);
}

div#start.close{
	animation: exit 0.3s ease 0s both;
}

#rings{
	top: 40vh;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
	grid-row: 1;
	grid-column: 1 / -1;
	padding: 0;
	position: absolute;
	left: calc(50% - 7em);
	right: 0;
	margin: 0 auto;
	display: flex;
	max-width: 14em;
	justify-content: space-around;
	list-style: none;
	margin: 0em;
	cursor: pointer;
}

div#rings>div:nth-child(1){
	border-color: #E6007E;
}
div#rings>div:nth-child(2){
	border-color: #FFDE14;
}
div#rings>div:nth-child(3){
	border-color: #009FE3;
}

#rings>div {
	width: 2.5em;
	margin: 0.1em;
	border: 10px solid;
	border-radius: 50%;
	cursor: pointer;
}

#rings>div:before {
	content: "";
	display: block;
	padding-top: 100%;
}
#start ~ nav.right{
	z-index: 9999999;

}
nav.right {
	grid-column: -2 / -1;
	grid-row: 2 / 999;

}

.story nav.right {
	order: -1;
	grid-row: 1 / 9999;
}

label>span.icn, nav #searchLabel, div.gallery, div.gallery label, div.gallery a>figure, main>section.jobs #loading, nav.right>div>a {
	position: relative;
}

nav.meta>input[type=checkbox]~div {
	max-height: 0em;
	overflow: hidden;
}

nav.meta>input[type=checkbox]:checked~div {
	max-height: 5em;
	display: unset;
	border-top: 1px solid var(--fade);
}
nav.meta {
	justify-content: space-between;
	display: flex;
}

nav.meta>div:last-child {
	grid-column-end: span 2;
}

#filtertoggle {
	display: none;
}

#filtertoggle:checked+label+#jobfilter {
	max-height: 100vh;
}

#filtertogglelabel {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	padding: 1em var(--pad);
}
#filtertogglelabel span.icn{
	margin-left: auto;
}

#jobfilter {
	padding: 0;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}

#jobfilter select+span {
	visibility: hidden;
	cursor: pointer;
	font-size: 1.5em;
	padding: 0 1rem;
	font-weight: 100;
	display: flex;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
}

#jobfilter select.flag+span {
	visibility: unset;
}
#jobfilter select.flag {
	max-width: 80%;
}

#jobfilter select {
	display: block;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0.5rem var(--pad);
	border-radius: 2px;
	font-size: inherit;
	border: none;
	color: inherit;
	flex-grow: 1;
	background-color: var(--faded);
}

#jobfilter div {
	border-bottom: 1px solid var(--fade);
	display: flex;
	flex-grow: 1;
	justify-content: space-between;
}

nav.meta>label {
	padding: 0;
	align-items: center;
	justify-content: center;
}

nav.meta>input:not(:checked)+label:after {
  content: "\221F";
  transform: rotate(-45deg);
  padding-left: 0.5em;
}

nav.left{
	padding-top: 3em;
}

nav.meta>* {
	flex-grow: 1;
	transition: background-color 0.3s ease;
	cursor: pointer;
	text-transform: capitalize;
}

nav.meta>a:first-child {
	padding-right: 0;
}

nav.meta>a {
	align-items: center;
	display: flex;
	min-height: 3em;
}

main>section.jobs #loading {
	padding: 0em;
	margin: 0;
	max-height: 10em;
	overflow: hidden;
	transition: max-height 0.5s ease 1s;
}

section.jobs>#loading>span {
	padding: 2em;
	display: inline-block;
}

#loading:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	background: var(--primary);
	animation: moveit 1.0s ease 0.0s infinite;
}

main>section.jobs.loaded #loading {
	border: none;
	max-height: 0;
}

section>a:focus, #jobs>a:focus {
	outline: 0;
}

#jobs {
	display: flex;
	flex-direction: column;
	border-top: 3px solid var(--primary);
	min-height: 100vh;
}

#jobs>a.log {
	opacity: 0.5;
	background-color: var(--light);
}

#jobs>a>h3 {
	padding: 0;
	font-weight: 600;
}

#jobs>a>h3:after {
	content: attr(data-details);
	font-size: 1rem;
	font-weight: 200;
	display: block;
	padding-top: 1.1em;
}


#jobs>a>div{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: row-reverse;
}
#jobs>a>div>h6{
	margin-right: auto;
}

#jobs>a>div, #jobs>a>h3:before {
	transition: border-top 1.2s ease;
}

#jobs.filter>a:not(.match) {
	display: none;
}

nav.vnav {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	max-height: calc(100vh - 62vh);
	margin-top: auto;
	min-height: 7em;
}

a#logo {
	justify-content: center;
	align-items: center;
	padding: 3em 3em;
	border-bottom: 1px solid var(--fade);
}

a#logo>img {
	max-width: 10em;
}

section>input[type=radio]+label,nav input[type=radio]+label, input, form#contact>textarea, nav a, nav>label {
	padding: 0.5rem var(--pad);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

nav.left input:checked+label:after, nav.left input:checked+label:hover {
	background: var(--primary);
}

#jobs.filter>label.match, main>section.jobs #loading, nav input:not(#langtoggle):checked+label, p>a:hover, nav>div>label:hover, nav div>label>a:hover {
	background-color: var(--fade);
}

aside#jobabolink:hover,
nav.vnav a:focus, nav.right>div>a:not(#logo):focus, main>section.jobs>a:focus,
#searchLabel, main>section.jobs>a:hover, section>input:not(:checked)+label.question:hover, nav.vnav a:hover, nav.left>div>div>div:hover, nav.right>div>a:not(#logo):hover, nav.right>div>a.active {
	transition: background-color 0.3s ease, color 0.3s ease;
	background-color: var(--fade);
}

nav.vnav>a {
	transition: color 0.5s ease, background-color 0.3s ease 0s;
	white-space: pre-line;
	animation: fadein 1s ease 2.0s both;
}

main>a>figure:not(.loaded)>video, main>a>figure:not(.loaded)>img {
	opacity: 0;
}

main>a>figure.loaded>video, main>a>figure.loaded>img {
	animation: fadein 2s ease 0.0s both;
}

a>figure+figcaption {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	font-weight: 200;
	font-size: calc(1.2 * var(--headline));
}

main>a>figure>video {
	width: 100%;
}

main>a>figure+figcaption>div {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	padding: var(--pad);
	color: white;
}


div.gallery>input:not(:checked)+label+div.gwrap>label>figure>video{
    pointer-events: none;
}

div.gallery div.gwrap {
	scroll-behavior: smooth;
	display: flex;
	padding: var(--pad);
	flex-wrap: wrap;
}

div.gallery:not(.active)>input:not(:checked)+label+div.gwrap>label>figure {
	transform: scale(1)!important;
}

div.gallery div.gwrap>label>figure {
	transition: transform 0.3s ease;
	display: block;
	position: unset;
}

div.gallery label.gopen {
	position: absolute;
	left: 0em;
	top: 0em;
	right: 2em;
	bottom: 0em;
	cursor: pointer;
}

label.gclose:before, label.gclose:after {
	content: "";
	display: inline-block;
	border-top: 1px solid var(--primary);
	width: 4em;
	position: absolute;
	left: 0em;
	top: 2em;
}

div.gallery>label.gclose:before {
	transform: rotate(45deg);
}

div.gallery>label.gclose:after {
	transform: rotate(-45deg);
}

div.gallery>input:checked ~label.gclose {
	cursor: pointer;
	z-index: 99999;
	position: fixed;
	top: 0;
	right: 0;
	background: white;
	padding: 2em;
	margin: 0;
	animation: fadein 0.3s ease 1s both;
	transition: transform 0.5s ease;
}

div.gallery>input:checked ~label.gclose:hover{
	transform: rotate(180deg);
}

div.gallery>input:not(:checked) ~ div.gwrap>label figure {
	height: 5em;
	padding: 0 0.2em 0.2em 0;
	margin: 0;
}

div.gallery>input:not(:checked) ~ div.gwrap figure>:first-child {
	width: auto;
	height: 100%;
}

div.gallery video {
	background-color: var(--primary);
	height: 100%;
	margin: 0 auto;
}

div.gallery figure>figcaption {
	padding: 2em;
	max-width: 70ch;
	margin: 0 auto;
}

div.gallery>input:checked ~ div.gwrap {
	cursor: w-resize;
	pointer-events: initial;
	padding: 0;
	animation: fadein 0.3s ease 0s both;
	background: white;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-y: hidden;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 99999;
}

div.gallery input:checked ~div.gwrap video, div.gallery input:checked ~div.gwrap img {
	object-fit: contain;
	object-position: left top;
	object-position: center;

}

div.gallery > input:checked + label + div.gwrap input:not(:checked)+label{
	display: none;
}

div.gallery.active div.gwrap>label{
	padding: 0;
	margin: 0;
}

div.gallery input:checked ~ div.gwrap figure {
	height: 100vh;
	width: 100%;
	transform: scale(1)!important;
	cursor: pointer;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(min-content,auto) auto;
	grid-template-rows: auto min-content;
}

div.gallery>input:checked + label + div.gwrap>label{
	display: flex;
	flex-grow: 1;
}

div.gallery input:checked ~ div.gwrap figure>figcaption {
	display: flex;
	animation: fadein 0.3s ease 0.3s both;
}

div.gallery input:checked ~ div.gwrap figure>img {
	animation: fadein 0.2s ease 0.1s both;
/*	max-height: 100%; */
	flex-grow: 1;
}

nav #searchLabel {
	display: flex;
	transition: transform 0.2s ease;
}


nav #searchLabel svg {
	pointer-events: none;
	position: absolute;
	right: 0.1em;
	top: 0.5em;
	bottom: 0;
	height: 2.5em;
	transition: opacity 0.5s ease;
}

nav #searchLabel svg * {
	fill: none;
	stroke-width: 3px;
	stroke: var(--primary);
}

nav #searchLabel svg>line {
	stroke-width: 6px;
	stroke-linecap: round;
}


input[type="search"] {
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

nav label:hover svg {
	transform: scale(1.1);
}

nav input[type=search]:focus {
	outline: 0;
	border-top: 3px solid var(--primary);
}

nav label:focus-within svg {
	opacity: 0;
}

nav input[type=search] {
	-moz-appearance: none;
  -webkit-appearance: none;
	border-radius: 0;
	transition: border-top 0.3s ease;
	max-width: 100%;
	border: none;
	padding-right: 1em;
	flex-grow: 1;
	border-top: 1px solid var(--fade);
	display: block;
	color: inherit;
	background: inherit;
}

nav input[type="search"] {
	padding-top: 1em;
	padding-bottom: 1em;
	border-top: 3px solid var(--primary);
}

div.gallery figure>figcaption, nav.left #brands, div.gallery.active>input:checked+label.gopen, div.gallery>input:not(:checked) ~ label.gclose, main form#contact>label, form#contact .hide, section input, nav input {
	display: none;
}

section>div.answer {
	transition: max-height 0.3s ease, background-color 0.3s ease;
	overflow: hidden;
	max-height: 0;
}

section>div.answer p {
	padding: 1em var(--pad);
}

section>div.answer p:last-of-type {
	padding-bottom: calc(var(--pad) * 2);
}

section>input[type=radio]:checked+label.question+div.answer {
	max-height: 100em;
	transition: max-height 0.2s ease 0.1s, background-color 0.3s ease;
}

section ol.links {
	display: inline-block;
	text-align: right;
}

section ol.links>li {
	list-style: none;
}

div.gallery>p, section ol.links>li>a {
	background: white;
	font-size: 0.9em;
	display: inline-flex;
	align-items: center;
	padding: 0.5em 1.5em;
	border-radius: 2em;
	margin: 1em 0 0;
	border-style: solid;
	transition: background-color 0.2s ease 0.1s, color 0.3s ease 0s;
}

section ol.links>li>a:hover {
	background: var(--fade);
}

section ol.links>li>a:after {
	padding-left: 0.5em;
	content: "→";
}

main section h2+p.copy {
	padding-top: 0;
}

main>a>figure+figcaption>div, h2, h3 {
	font-size: 1em;
	line-height: 1.3;
	padding: var(--pad);
}

section>h4 {
	outline: 0;
	padding-top: 1.5em;
	margin: 0 var(--pad);
	display: inline-block;
}

nav.left input+label:not(#filtertogglelabel):after {
	border: 2px solid var(--primary);
	border-radius: 50%;
}

#jobs>a {
	display: block;
	padding: var(--pad);
}

#jobs>a>div>h6 {
	font-size: 1em;
	font-weight: 200;
	padding-bottom: 0.5em;
}

nav.right, section>input[type=radio]+label, nav input[type=radio]+label, nav.left label, nav.right>div>a, main>section.jobs>a, form#contact>input {
	border-top-style: solid;
}

div.copy+input+label.question {
	border-top-style: none;
}

main>section.jobs>a+article {
	max-height: 0em;
	overflow: hidden;
}

#jobabolink {
	margin-top: 1em;
	order: 999;
	padding: var(--pad);
	padding-top: 7em;
	border-top: 3px solid var(--primary);
	transition: background-color 0.3s ease, color 0.3s ease;
}

#jobabolink a{
	text-decoration: underline;
}

#jobs>a>h3, #jobabolink a {
	font-size: 1em;
	line-height: 1.3;
}

section>div.error {
	color: white;
	background: rgb(240, 2, 127);
}

section>div.error {
	padding: var(--pad);
}

main>section:not(.jobs) {
	counter-reset: flipflop;
}

main>section.jobs>a:target+article {
	max-height: 50em;
}

div.details a {
	padding: 1em 0;
	text-decoration: underline;
}

main>section.jobs>a:hover:before {
	border-bottom: solid var(--primary);
}

nav a>span {
	border-bottom: 3px solid var(--primary);
}

section>div.copy:not(:last-child), nav.vnav>a, nav.left label:last-child {
	border-bottom-style: solid;
}

nav.right, main>footer, form#contact {
	border-left-style: solid;
}

section>div>p>a {
	border: none;
	border-bottom: 1px solid;
}

nav.index, section>input:checked+label.question+div, section>input:checked+label.question {
	background-color: var(--light);
}

nav.index a:first-child {
	padding-top: calc(var(--pad) + 0.3em);
	padding-bottom: 2em;
}

nav.right>div>a:not(#logo):focus, nav.left div>div>div:hover, section ol.links>li>a:after, section>input:not(:checked)+label.question:hover, section>input:checked+label.question, nav.index>div>a:not(:first-child)::before, nav.vnav a:hover, nav.right>div>a:not(#logo):hover, nav.right>div>a.active, nav.meta, nav.index a:first-child {
	color: var(--primary);
}

nav.index>div:hover>a:not(:hover) span {
	border-color: transparent;
	transition: border 0.3s ease;
}

nav.index>div>a {
	padding: 0.5em var(--pad);
	justify-content: flex-start;
}

nav.index>div {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	padding-bottom: 2em;
}

div.gallery
  input:checked
  + label
  + div.gwrap
  > input:checked
  + label
  > figure
  div.arrow {
  z-index: 9999;
  position: absolute;
  display: flex;
  right: 0em;
  top: 50%;
  user-select: none;
  padding: 2em;
  position: fixed;
  top: calc(50vh - 2em);
}

div.gallery
  input:checked
  + label
  + div.gwrap
  > input:checked
  + label
  > figure
  div.arrow:before,
div.gallery
  input:checked
  + label
  + div.gwrap
  > input:checked
  + label
  > figure
  div.arrow:after {
  display: inline-block;
  content: '';
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 1.5em solid black;
}

div.gallery
  input:checked
  + label
  + div.gwrap
  > input:checked
  + label
  > figure
  div.arrow:before {
  border-left: 1.5em solid white;
  position: relative;
  left: 1.5em;
  transform: scale(0.9);
}

div.gallery > input:checked + label + div.gwrap label + label:after,
div.gallery > input:checked + label + div.gwrap label + label:before {
  content: '';
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-right: 1.5em solid black;
}
div.gallery > input:checked + label + div.gwrap label + label:after {
  border-right: 1.5em solid white;
  transform: scale(0.9);
  position: relative;
  left: -1.5em;
}

div.gallery > input:checked + label + div.gwrap label + label {
  padding: 2em;
  position: absolute;
  cursor: pointer;
  left: 0em;
  top: 50%;
  position: fixed;
  top: calc(50vh - 2em);
}

div.gallery>input:checked+label+div.gwrap label+label{
	display: none;
}

div.gallery>input:checked+label+div.gwrap input:checked+label+label{
	display: flex;
}

form#contact {
	grid-column: 2;
	display: flex;
	flex-grow: 1;
	min-height: 62vh;
	flex-direction: column;
}

form#contact>textarea, form#contact>input {
	flex-grow: 1;
	border-left: none;
	border-bottom: none;
	border-right: none;
	text-align: left;
}

#contact input#send{
	-webkit-appearance: none;
	background-color: transparent;
}

form#contact>textarea {
	resize: none;
}

form#contact>*:focus {
	background-color: var(--fade);
}

::-webkit-input-placeholder {
	color: var(--primary);
}

::-moz-placeholder {
	color: var(--primary);
}

label>span.icn {
	position: relative;
	transition: transform 0.3s ease, opacity 0.3s ease;
	width: 1em;
	height: 1em;
	min-width: 1em;
	min-height: 1em;
	transform: translate(0,-0.5em) rotate(-45deg);
}

label>span.icn:after, label>span.icn:before {
	content: "";
	display: inline-block;
	position: absolute;
	transition: opacity 0.3s ease;
	border-radius: 2px;
}

input:checked+label>span.icn:before {
	opacity: 0;
}

label>span.icn:after {
	border-left: 1px solid;
	transform: rotate(-45deg);
	top: 50%;
	height: 1em;
}

label>span.icn:before {
	top: 50%;
	border-left: 1px solid;
	transform: rotate(45deg);
	height: 1em;
}

section>h4.flipflop+figure:after {
	font-size: 3em;
	content: counter(flipflop);
}

section>h4.flipflop+figure {
	position: relative;
	margin: 2em var(--pad) 0;
	background-color: var(--fade);
	width: 6em;
	height: 6em;
	float: left;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	counter-increment: flipflop;
}

section>h4.flipflop+figure>img {
	object-fit: cover;
	object-position: center;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
}

section>h4.flipflop~figure:nth-of-type(2n+2) {
	float: right;
	margin-left: 1em;
}

a.stream>figure {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(4, 50vw);
}

main>a.stream>figure>img {
	object-fit: cover;
	height: 100%;
	width: 100%;
	transform: scale(1);
}

main>a.stream>figure>img:first-child {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

section>label:focus {
	outline: 0;
}

section>div.answer+h4{
	margin-top: 5em;
}

h4+input:checked+label>span {
	transform: rotate(45deg) scale(0);
}

h4+input:checked+label+p {
	animation: fadein 0.3s ease 0.2s both;
}

h2+input+label {
	padding-top: var(--pad);
}

section>label.question + div+ input + label:not(.question) {
	padding-top: 3em;
	border-top: 1px solid var(--fade);
}

section>label {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.7s ease 0.2s;
	cursor: pointer;
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 0 var(--pad);
}

nav.left div>div>div, nav.right>div>a, section>label:hover {
	transition: background-color 0.3s ease 0.1s, color 0.5s ease;
}

nav.index, section>input:not(:checked)+label+figure, section>input:not(:checked)+label+figure+div {
	display: none;
	opacity: 0;
}

main>footer {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	grid-column: 2/3;
	min-height: 100vh;
}

main>footer, div#leftpad {
	background-color: var(--fade);
}

main>footer>h3 {
	white-space: pre-wrap;
}

main>footer>aside#social {
	flex-grow: 1;
	display: flex;
	padding: 0em;
	justify-content: space-around;
	max-width: 30em;
	margin: 0;
}

main>footer>aside#social>a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
	border: none;
	padding: 0.5em;
	margin: 0 0.5em 1em;
	margin-top: auto;
	max-width: 1.5em;
	display: block;
	transition: transform 0.3s ease;
	text-decoration: none;
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
}

main>footer>aside#social>a>svg {
	width: 100%;
	transition: fill 0.3s ease;
	fill: currentColor;
}

main>footer>aside#social>a:hover {
	transform: scale(1.5);
}

main>footer>aside#social>a:hover>svg {
	fill: var(--primary);
}

#introvideo{
	width: 100%;
	height: 100vh;
}

#introvideo>video{
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}

@media(min-width: 60em) {
	:root {
		--pad: 3vw;
		--headline: 2em; }

	#rings{
		top: 50%;
	}
	main>div#start>a.cta{
		font-size: 4em;
		max-width: 40ch;
	}

	main>div#start>h2#introcopy {
		padding-top: 0;
	}
		
	nav.meta{
		display: grid;
		grid-template-columns: repeat(3,minmax(auto,1fr));
	}

	nav.meta>input[type=checkbox]~div {
		transition: max-height 0.3s ease;
	}

	nav input[type="search"], #jobs{
		border-top: none;
	}

	main>div#start>a#arrow{
		animation: slidein 0.5s ease-in-out 2.0s both;
		position: absolute;
		left: calc(50vw - 2em);
		top: 94vh;
		width: 4em;
		height: 2em;
		color: var(--primary);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	nav.meta a{
		min-height: initial;
	}
	main>div#start>a#arrow:after{
		transition: transform 0.3s ease;
		content: "";
		display: inline-block;
		width: 0; 
		height: 0; 
		border-left: 0.4em solid transparent;
		border-right: 0.4em solid transparent;
		border-top: 0.4em solid;
	}

	main>div#start>a#arrow:hover:after{
		transform: scale(1.4);
	}

	#filtertogglelabel, label:not(.question)>span.icn {
		display: none;
	}

	section>input:not(:checked)+label+figure, section>input:not(:checked)+label+figure+div, section>input:not(:checked)+label+div.copy, section>input:not(:checked)+label+figure section>input:not(:checked)+label+div {
		display: block;
		opacity: 1;
	}

	section>h4.flipflop:first-of-type {
		padding-top: 1em;
	}

	section>h4.flipflop:nth-of-type(2n+1) {
		margin-left: 0;
	}

	main>section>h2 {
		max-width: 50ch;
	}

	main>section>div>p {
		max-width: 100ch;
	}

	nav.left>div {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: -webkit-sticky;
		position: sticky;
		top: 10em;
		bottom: 0;
		min-height: calc(100vh - 10em);
	}

	nav.left{
		padding-top: 0;
	}
	nav.index, nav.left {
		display: initial;
		animation: fadein 0.3s ease 0.3s both;
		border-right-style: solid;
	}

	nav.left #brands {
		flex-grow: 1;
		padding: 0 2vw;
		align-items: center;
		justify-content: center;
		background-size: 10em auto;
		background-repeat: no-repeat;
		background-position: center;
		transition: background-image 0.1s ease 0.1s;
	}
	nav #searchLabel svg{
		top: 0.3em;
	}

	#start~nav #slot+nav.meta {
		min-height: 10em;
	}

	body.intro nav #searchLabel.sticky {
		transform: translate(0,calc(-100vh + 10em));
		display: flex;
		position: relative;
	}

	main>nav>div.stick {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	a.stream>figure {
		min-height: unset;
		display: grid;
		grid-template-columns: repeat(4,1fr);
		grid-template-rows: 1fr 1fr;
	}
	
	#jobs>a {
		/*animation: fadein 0.5s ease 0s both;*/
		transition: background-color 0.3s ease, color 0.3s ease;
		display: flex;
		justify-content: space-between;
		cursor: pointer;
		padding: 0 var(--pad);
	}

	#jobs>a>div {
		display: block;
		border-top: 3px solid white;
		padding: 1em 0 0 0.5em;
		width: 25%;
	}

	#jobs>a>h3 {
		line-height: 1.2;
		padding: 0;
		width: 75%;
		padding-bottom: 1em;
	}

	#jobs>a>h3:before{
		padding-bottom: 1em;
		content: "";
		display: flex;
		border-top: 3px solid white;
	}

	#jobs>a.log>h3:before,#jobs>a.log>div, #jobs>a:hover>div,#jobs>a:focus>div,#jobs>a.active>div, #jobs>a:hover>h3:before, #jobs>a:focus>h3:before, #jobs>a.active>h3:before {
		transition: border-top 0.2s ease;
		border-top: 3px solid var(--primary);
	}

	section>input:not(:checked)+label+figure, nav.left #brands {
		display: flex;
	}

	#jobfilter {
		max-height: initial;
	}

	#jobabolink {
		min-height: 10em;
		padding: 0 var(--pad);
		display: flex;
		align-items: center;
		margin: 0;
		flex-grow: 1;
	}

	label>span.icn:after, label>span.icn:before {
		top: 0.7em;
	}

	main>a>figure {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
	}

	main>a:not(#logo) {
		position: relative;
		grid-column: 1 / 3;
		height: 62vh;
		outline: 0;
		display: block;
	}

	main>a:not(:hover)>figure>* {
		transform: scale(1);
	}

	main>a>figure>video, main>a>figure>img {
		transition: transform 10s ease;
		transform: scale(1.1);
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	section>h4.flipflop+figure {
		width: 10em;
		height: 10em;
	}

	section>h4.flipflop+figure:nth-child(2n+1) {
		margin-right: 2em;
	}

	a#logo {
		flex-grow: 0;
		min-height: unset;
	}

	body:not(.nofilter) #start ~nav a#logo {
		border: none;
		position: fixed;
		left: 0;
		top: 0;
	}
	body:not(.nofilter) #start ~nav .meta {
		min-height: 10em;
	}

	body>main {
		display: grid;
		grid-template-columns: minmax(10em,3fr) 7fr 20em;
	}

	nav.index>div>a:not(:first-child) {
		counter-increment: section;
	}

	nav.index>div>a:not(:first-child)::before {
		padding-right: 0.3em;
		content: counter(section, decimal-leading-zero)".";
	}

	div.gallery {
		padding-bottom: 5em;
		transition: background-color 0.3s ease 0.1s;
	}

	div.gallery.active {
		z-index: 999;
	}

	body:not(.galleryTransition) div.gallery>div.gwrap>label>figure{
		transform: unset!important;
	}
	
	body.galleryTransition div.gallery>input:not(:checked) ~div.gwrap>label {
		transition: transform 0.5s ease 0.1s;
		cursor: pointer;
	}

	body.galleryTransition div.gallery.active>input:not(:checked) ~div.gwrap>label {
		transform: translate(10em,-2em);
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-tap-highlight-color: transparent;
		user-select: none;
	}

	body.galleryTransition div.gallery.active>input:not(:checked) ~div.gwrap>label:nth-child(2n+1) {
		transform: translate(4em,7em);
	}

	body.galleryTransition div.gallery.active>input:not(:checked) ~div.gwrap>label:nth-child(3n+3) {
		transform: translate(6em,15em);
	}

	body.galleryTransition div.gallery.active>input:not(:checked) ~div.gwrap>label:nth-child(4n+2) {
		transform: translate(7em,5em);
	}

	body.galleryTransition div.gallery.active>input:not(:checked) ~div.gwrap>label:nth-child(7n+2) {
		transform: translate(-3em,3em);
	}

	div.gallery p, section div>ol.links {
		transform: translate(-70%,-1em);
	}

	main>footer {
		min-height: unset;
	}

	main>footer>aside#social {
		padding: 2em;
	}
}

@media(min-height: 40em) and (min-width: 60em) {

	#jobs>a>h3, #jobabolink a {
		font-size: 2em;
		font-weight: 100;
	}

	main>a>figure+figcaption>div, h2, h3 {
		font-size: var(--headline);
		font-weight: 200;
	}
	
	section>input[type=radio]+label,nav input[type=radio]+label, input, form#contact>textarea, nav a, nav>label {
		padding: 1rem var(--pad);
	}
	
	#jobs>a>div {
		padding: 2em 0 0 0.5em;
	}

	nav.vnav, h4, nav.left #brands {
		border-top: 3px solid var(--primary);
	}
	
	#jobabolink {
		min-height: calc(100vh - 62vh);
	}
	
	#jobfilter select {
		padding: 1rem var(--pad);
	}

	#jobs>a>div>time {
		margin-bottom: 0.5em;
		display: flex;
	}
}

@media(max-width: 60em) {

	nav.meta>input[type=checkbox]:checked~div {
		display: flex;	
		justify-content: center;
		align-items: center;
	}

	div.gallery>div.gwrap>label>figure{
		transform: unset!important;
	}
}



input#input3bd78ac744be02145ba6{
	display: none;
}