* {
	padding: 0;
	margin: 0;
}

@font-face {
	font-family: "OpenSans";
	src: url("Fonts/OpenSans-Regular.ttf");
}


@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=11901fc3-1574-4ea2-ad8c-63271c71575f&fontids=5664121,5664128"); @font-face {
	font-family: "Helvetica Neue LT W05 95 Black";
	src: url("Fonts/5664121/c6d8a5c9-f863-4f17-9c32-355e9e9a98b8.eot?#iefix");
	src: url("Fonts/5664121/c6d8a5c9-f863-4f17-9c32-355e9e9a98b8.eot?#iefix") format("eot"),url("Fonts/5664121/fc4fb6ca-f981-4115-b882-c78e9f08be52.woff2") format("woff2"),url("Fonts/5664121/6ed03453-f512-45ba-84bf-fe4ea45d5e6a.woff") format("woff"),url("Fonts/5664121/42f814cb-78f6-46ec-bcc0-3c28842e5ca9.ttf") format("truetype");
}

@font-face {
	font-family: "Helvetica Neue LT W05 96 Blk It";
	src: url("Fonts/5664128/283fd2a2-0079-40b4-999f-d34f38e7afaa.eot?#iefix");
	src: url("Fonts/5664128/283fd2a2-0079-40b4-999f-d34f38e7afaa.eot?#iefix") format("eot"),url("Fonts/5664128/995add04-59cc-41ea-abd2-4712eaddf2a8.woff2") format("woff2"),url("Fonts/5664128/7090e465-f6bf-4664-8b5a-d877a6915d87.woff") format("woff"),url("Fonts/5664128/e6a63373-d060-4e43-a4e0-3cddad6b6ef9.ttf") format("truetype");
}

p#intro {
	font-size: 1.2em;
	font-family: "Helvetica Neue LT W05 95 Black","HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	max-width: 70ch;
	padding: 20vh 1rem 0;
	pointer-events: none;
}

body {
	font-family: "OpenSans","HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	color: white;
	color: var(--white);
	background: #3100a3;
	background: var(--blue);
	line-height: 1.4;
}

.wheel a, h1,h2,h3,h4,h5,h6 {
	font-family: "Helvetica Neue LT W05 95 Black","HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: normal;
}

video {
	width: 100%;
}

nav ul.trending {
	display: flex;
	flex-direction: column;
	counter-reset: inc;
}

nav ul.trending>li {
	display: block;
}

nav ul.trending>li>a {
	display: inline-flex;
	text-decoration: none;
	padding: 0.5em 1em;
	counter-increment: inc;
}

nav ul.trending>li>a:before {
	content: counter(inc);
	padding-right: 1em;
}

nav ul.trending>li>a.active {
	font-weight: 800;
	border-radius: 2em;
	color: var(--blue);
	background: var(--white);
}

p {
	max-width: 100ch;
	padding-bottom: 1em;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

a {
	color: inherit;
}

.interview h3 {
	text-align: center;
}

div.interview-wrapper {
	max-width: 80ch;
	margin: 0 auto;
}

.linklist h4 {
	text-decoration: underline;
	padding-top: 1em;
}

.linklist a {
	text-decoration: none;
}

.linklist li {
	list-style: none;
}

section.zitat, section.interview {
	z-index: -1;
	background-color: var(--lila);
	flex-basis: 100%;
	background-repeat: no-repeat;
	background-position: right bottom;
}

article>header {
	background-repeat: no-repeat;
	background-position: 80% 95%;
	background-size: 70% auto;
}

article>header ~ header {
	background-size: auto 90%;
}

article>header ~ header h1 {
	box-shadow: none!important;
}

article>figure {
	line-height: 0;
	flex-basis: 100%;
	background-color: black;
}

#prevnext:hover,article>figure:hover ~ #prevnext {
	opacity: 1;
}

@keyframes fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

nav#prevnext {
	position: fixed;
	top: 0em;
	right: 1em;
	z-index: 99;
	display: flex;
	opacity: 0;
	transition: opacity 0.3s ease;
}

#prevnext a.prev {
	background-image: url('icons/Prev.svg');
}

#prevnext a.next {
	background-image: url('icons/Next.svg');
}

article>figure>video {
	animation: fadein 2s ease 1s both;
}

article>header h1 {
	min-height: 2em;
	animation: fadein 0.5s ease 0.5s both;
}

header>ul, article>label, article>section {
	animation: fadein 1s ease 2s both;
}

a#home {
	padding: 1.5em 4em;
	text-decoration: none;
}

#homelogo {
	z-index: 1;
	position: absolute;
	right: 0;
	top: 0;
	min-width: 26em;
	transform-origin: right top;
	transform: scale(0.8);
	background-size: 90% auto;
	background-repeat: no-repeat;
	background-position: 0 1em;
}

#homelogo #leo #bg {
	fill: transparent;
}

section.interview p {
	border: 1px solid;
	margin-top: 1em;
	border-radius: 1em;
	padding: 2em;
	position: relative;
	background-color: var(--lila2);
}

#navtoggle {
	display: none;
}

#navtogglelabel {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999999;
	background-image: url('icons/menu_closed.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

.svgbtn {
	cursor: pointer;
	margin: 1em 0 1em 1em;
	width: 2em;
	height: 2em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	transition: background-color 0.3s ease;
}

.svgbtn:hover {
	background-color: blue;
	background-color: var(--blue);
}

@keyframes fadein2 {
	from {
		opacity: 0;
	}

	to {
		opacity: 0.8;
	}
}

#navtoggle[type=checkbox]:checked ~ nav #home {
	animation: fadein 0.5s ease 1s both;
}

#navtoggle[type=checkbox]:checked ~ nav ul>li {
	animation: fadein 0.5s ease 0.3s both;
}

#navtoggle[type=checkbox]:checked ~ #intro {
	opacity: 0;
}

#navtoggle[type=checkbox]:checked ~ #navtogglelabel {
	background-image: url('icons/menu_open.svg');
}

#wheel-wrapper {
	transition: transform 1.5s ease;
}

#navtoggle[type=checkbox]:checked ~ main {
	overflow: hidden!important;
}

nav#tagnav {
	z-index: 999;
	background-color: #5f2adb;
	background-color: var(--lila);
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease;
	transform: translate(-100%,0);
}

#navtoggle[type=checkbox]:checked ~ nav {
	transform: translate(0,0);
}

nav#tagnav .contact {
	display: flex;
	/* flex-grow: 1; */
	margin-top: auto;
	flex-direction: column;
	justify-content: space-between;
	padding: 1em;
	border-top: 1px solid #3100a3;
	border-top: 1px solid var(--blue);
	transition: transform 0.3s ease 1s;
	transform: translate(0,100%);
}

#navtoggle[type=checkbox]:checked ~ nav .contact {
	transform: translate(0,0);
}

nav#tagnav>ul {
	list-style: none;
	padding: 3.5em 1em;
}

nav#tagnav>ul.chips>li {
	display: inline-block;
}

nav ul.chips>li>a {
	display: inline-block;
	padding: 0.5em 1.5em;
	text-decoration: none;
	background: #3100a3;
	background: var(--blue);
	border-radius: 2em;
	margin: 0 0.7em 0.7em 0;
}

nav#tagnav>ul>li>a {
	text-transform: uppercase;
}

section.interview p:after {
	content: "";
	position: absolute;
	left: -0.8em;
	top: 2.1em;
	width: 0;
	height: 0;
	border-top: 0.8em solid var(--blue);
	border-left: 0.8em solid transparent;
}

section.interview p:before {
	content: "";
	position: absolute;
	left: -1em;
	top: 2em;
	width: 0;
	height: 0;
	border-top: 1em solid;
	border-left: 1em solid transparent;
}

section.interview hr {
	display: none;
}

section.interview p:nth-child(2n+2) {
	background: var(--blue);
}

article>section>blockquote {
	line-height: 1.1;
	font-family: "Helvetica Neue LT W05 96 Blk It";
}

article>section>blockquote+p {
	text-transform: uppercase;
}

section header {
	border-bottom: 1px solid;
}

.wheel.right a:after, .wheel.left>a,h1,h3,section>blockquote {
	font-size: 4em;
	line-height: 1;
	-moz-text-fill-color: transparent;
	-webkit-text-fill-color: transparent;
	-moz-text-stroke-color: currentColor;
	-webkit-text-stroke-color: currentColor;
	-moz-text-stroke-width: 1px;
	-webkit-text-stroke-width: 1px;
	text-transform: uppercase;
}

.wheel.left>a {
	-moz-text-fill-color: var(--blue);
	-webkit-text-fill-color: var(--blue);
}

footer div>h3, article section, article header>h1, article>label {
	padding: 5vw;
	position: relative;
}

article>header {
	flex-basis: 50%;
	flex-grow: 1;
}

article>section, article>label {
	flex-basis: calc(50% - 10vw);
	flex-grow: 1;
}

article>label {
	display: block;
	position: relative;
	cursor: pointer;
}

article>label:hover, article>header:hover, article>section:hover {
	transition: background-color 0.5s ease;
	background-color: var(--lila);
	z-index: 999;
}

article>figure, article>label, h1, article>section, article>header {
	box-shadow: 1px 1px 1px currentColor;
}

article>section:not(.zitat):not(.text):before,.icon:before{
	content: "";
	background-repeat: no-repeat;
	background-size: 50% auto;
	background-color: currentColor;
	background-position: center;
	padding: 1em;
	max-width: 1em;
	max-height: 1em;
	overflow: hidden;
	display: inline-block;
	position: absolute;
	right: 0;
	top: 0;
	overflow: hidden;
}

.icon.share:before {
	background-image: url('icons/share.svg');
}

.icon.links:before {
	background-image: url('icons/links.svg');
}

.icon.interview:before {
	background-image: url('icons/interview.svg');
}

.icon.feedback:before {
	background-image: url('icons/feedback.svg');
}

h1 {
	line-height: 1;
}

form input[type=text] {
	padding: 1em;
	background: none;
	color: var(--white);
	border: 1px solid;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

div#wheel-wrapper {
	margin-top: 10em;
	animation: fadein 1s ease 1s both;
}

.wheel.right a:after {
	display: block;
	content: attr(data-title);
	padding: 0.5rem 1rem;
}

div.wheel a {
	font-weight: 800;
	text-decoration: none;
	color: inherit;
	position: relative;
	margin: 0 3em 4em 0;
}

.wheel {
	counter-reset: section;
}

.wheel>a {
	display: block;
	line-height: 0;
}

.wheel.right a:before {
	counter-increment: section;
	content: counter(section);
	position: absolute;
	left: 0;
	top: 0;
	min-width: 1.5em;
	min-height: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	background-color: white;
	background-color: var(--white);
	color: var(--blue);
	font-weight: 800;
}

#logo {
	width: 10em;
	height: 5em;
	position: fixed;
	right: 1em;
	top: 1em;
	opacity: 0.7;
	z-index: 99999;
}

article>input[type=checkbox] {
	position: absolute;
	top: -9999px;
	left: -9999px;
	display: none;
}

article>input[type=checkbox] ~ section {
	max-height: 0vh;
	overflow: hidden;
	transition: max-height 0.5s ease;
}

article>input[type=checkbox]:checked ~ section {
	max-height: 200vh;
}

article>input[type=checkbox]:checked ~ label {
	background: var(--lila);
	z-index: -1;
}

article>input[type=checkbox]:checked ~ label button {
	display: none;
}

section.share>a {
	font-weight: 800;
	; display: inline-block;
	padding: 1em;
	text-decoration: none;
	color: var(--blue);
	border: none;
	background: var(--white);
	font-size: inherit;
}

article button {
	padding: 1em;
	color: var(--blue);
	border: none;
	background: var(--white);
	font-family: inherit;
	font-weight: 800;
	font-size: inherit;
	pointer-events: none;
	transition: transform 0.5s ease;
}

form:hover input[type=submit], article label:hover button, article section:hover button {
	transform: scale(0.9);
}

section#feedback {
	flex-basis: 100%;
	border-top: 1px solid;
	background: var(--lila);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 2em;
}

section#feedback:before {
	display: none;
}

section#feedback>form {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	padding: 2em;
}

section#feedback textarea {
	background: none;
	border: 1px solid var(--white);
	color: inherit;
	font-size: inherit;
	padding: 1em;
	margin-bottom: 1em;
}

section#feedback>form>input {
	background: none;
	border: 1px solid var(--white);
	padding: 1em;
	color: inherit;
	font-size: inherit;
}

section#feedback>form>input[type=submit] {
	background: var(--white);
	border-radius: 0;
	padding: 1em;
	margin: 1em auto;
	color: var(--blue);
	transition: transform 0.3s ease;
	cursor: pointer;
}

section#feedback>form>label {
	padding: 1em 0 0.5em;
}

#svglogo {
	display: flex;
	padding: 2em;
	position: relative;
	height: 9em;
	overflow: hidden;
	max-width: 25em;
}

#svglogo polygon, #svglogo rect, #svglogo path {
	fill: currentColor;
}

#svglogo div {
	height: 100%;
	flex-grow: 1;
	display: flex;
	align-items: center;
}

#svglogo svg {
	height: 100%;
}

#flag>svg {
	transition: transform 0.5s ease 0.1s;
	height: 3em;
}

#typo svg {
	width: 100%;
	height: 100%;
	max-height: 3.5em;
}

#leo svg {
	justify-self: flex-end;
	position: relative;
}

#leo #hand {
	position: absolute;
	height: 24%;
	transform-origin: 0em 3em;
	transition: transform 0.3s ease;
	transform: translate(200%,-60%);
}

#svglogo:hover #leo #hand {
	transform: translate(180%,-60%) rotate(50deg);
}

#svglogo:hover #flag svg {
	transform: rotate(-180deg);
}

#leo #bg {
	fill: var(--yellow);
}

section.text>ul>li {
	padding-bottom: 1em;
}

body>main+footer {
	color: #088f9c;
	color: var(--teal);
	background: #ffd447;
	background: var(--yellow);
	padding: 2em 0 5em;
	display: flex;
	justify-content: space-between;
}

body>main+footer div.contact {
	padding: 1em 5vw;
}

div.contact>* {
	padding: 0;
}

div.contact h3 {
	padding-bottom: 2rem;
}

body>main+footer div.contact ~ a {
	margin: 5vw;
	font-size: 1.5em;
}

@keyframes jump {
	from {
		transform: translate(0,1em);
	}
}

footer a#edit {
	display: block;
	animation: jump 0.2s ease 0s both alternate infinite;
}

body>main+footer a {
	text-decoration: none;
}

@media(min-width: 60em) {
	#scrollthis {
		position: fixed;
		left: 50%;
		bottom: 2em;
		z-index: 99999;
		transform: rotate(-90deg);
		opacity: 0;
		animation: fadein2 1s ease 1s backwards 5;

	}

	#scrollthis:before, #scrollthis:after {
		content: "";
		height: 1px;
		width: 1em;
		display: inline-block;
		position: absolutE;
		left: 0;
		top: 0;
		transform-origin: 0 0;
		background-color: white;
	}

	#scrollthis:before {
		transform: rotate(45deg);
	}

	#scrollthis:after {
		transform: rotate(-45deg);
	}

	p#intro {
		font-size: 1.3em;
		z-index: 99999;
		max-width: 38ch;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 30vh 2em 2em;
		color: white;
	}

	nav ul.trending {
		margin-top: 2em;
	}

	nav#tagnav>ul {
		padding: 1em;
	}

	article {
		display: flex;
		flex-wrap: wrap;
	}

	nav#tagnav {
		width: 25em;
	}

	#navtoggle[type=checkbox]:checked ~ #wheel-wrapper {
		transform: scale(0.3);
	}

	#navtoggle[type=checkbox]:checked ~ #navtogglelabel:after {
		content: "";
		display: inline-block;
		position: fixed;
		background: var(--blue);
		opacity: 0.9;
		top: 0;
		bottom: 0;
		cursor: ew-resize;
		right: 0;
		left: 25em;
		animation: fadein2 0.5s ease 0s both;
	}

	div#spacer {
		height: 10000cm;
	}

	div#wheel-wrapper {
		background-image: linear-gradient(180deg,var(--lila),var(--blue));
	}

	div.wheel:before {
		content: " ";
		width: 70em;
		height: 70em;
		background: var(--lila);
		border: 1px dotted;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 50%;
		transform: translate(-50%,-50%);
	}

	div.innerring {
		content: " ";
		width: 50em;
		height: 50em;
		background: var(--blue);
		border: 1px dotted;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 50%;
		transform: translate(-50%,-50%);
	}

	div.wheel.right:before {
		width: 110em;
		height: 110em;
	}

	.wheel {
		transition: transform 0.7s ease;
		position: fixed;
		top: 50vh;
	}

	.wheel.right a:after {
		-moz-text-fill-color: initial;
		-webkit-text-fill-color: initial;
		-moz-text-stroke-color: initial;
		-webkit-text-stroke-color: initial;
		-moz-text-stroke-width: 0;
		-webkit-text-stroke-width: 0;
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		padding: 1em;
		font-size: 1em;
	}

	div.wheel.left {
		left: -20em;
	}

	div.wheel.left a {
		padding-top: 2em;
	}

	div.wheel.right {
		right: -20em;
	}

	div.wheel a {
		position: absolute;
		background-size: cover;
		transform-origin: 0 0;
		margin: 0;
		width: 50vw;
	}

	div#wheel-wrapper {
		z-index: 3;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin-top: 0;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	article>section:not(.zitat):not(.text):before,.icon:before {
		padding: 1.5em;
		max-width: 1em;
		max-height: 1em;
		overflow: hidden;
		display: inline-block;
		right: unset;
		left: 0;
	}

	body>main+footer {
		background-image: url('arrows.svg');
		background-repeat: no-repeat;
		background-size: 30em;
		background-position: center 7em;
	}
}

@media(max-width: 60em) {
	section.interview {
		background-image: none!important;
	}

	.wheel.right a:after, .wheel.left>a,h1,h3,section>blockquote {
		font-size: 2em;
		line-height: 1.2;
	}

	div.wheel.right {
		transform: none!important;
	}

	div.wheel.left {
		display: none;
	}

	div.wheel.right a {
		transform: none!important;
	}

	footer {
		flex-direction: column;
	}
}