/* -----------------------------------------------------------------------------
	
	
	#	QUIZTOPIA.DE
	
	Author: Roman Klein
	Website: https://github.com/twiro
	
	Version: 2.0
	Date: 07.11.2019
	
	
	## FONTS
	
	font-family: 'Brandon Grotesque'

----------------------------------------------------------------------------- */



:root {
	
	/* Colors */
	
	--colorBackground: #85CAD5;
	--colorType: #111;
	
	--colorLink: #B50E4E;
	--colorHover: #10557f;
	
	--colorOrange: #ED6E38;
	--colorRed:	#DE0834;

	/* Type Sizes */
	
	--typeXL: 2rem; /* 32 */
	--typeL: 1.875rem; /* 30 */
	--typeM: 1.25rem; /* 20 */
	--typeS: .8125rem; /* 13 */
	
	/* Grid & Sizes */
	
	--marginXS: .5rem;
	--marginS: 1rem;
	--marginM: 2rem;
	--marginL: 3rem;
	--marginXL: 4rem;
}





/* -----------------------------------------------------------------------------

	## BODY & STAGE

----------------------------------------------------------------------------- */

html,
body {
	height: 100%;
}

body {
	background-color: var(--colorBackground);
	font-family: "brandon-grotesque", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: #111;
	text-align: center;
}

	.stage {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 100vh;
	}






/* 960 (S) */
@media screen and (max-width: 60em) {
	html {
		font-size: 95%;
	}
}


/* 640 (XS) */
@media screen and (max-width: 40em) {
	html {
		font-size: 90%;
	}
}


/* 480 (XXS) */
@media screen and (max-width: 30em) {
	html {
		font-size: 80%;
	}
}





/* -----------------------------------------------------------------------------

	##	HEADER / SECTION / FOOTER

----------------------------------------------------------------------------- */


.header,
.section,
.footer {
	flex-grow: 1;
	display: flex;
	justify-content: center;
	position: relative;
	width: 100%;
	padding-top: var(--marginM);
	padding-bottom: var(--marginM);
}



.header {
	padding-top: var(--marginXL);
	padding-bottom: 0;
}

.section--stickers {
	padding-top: 0;
	padding-bottom: 0;
}

.section--video {}

.section--cta {
	padding-top: var(--marginS);
	padding-bottom: var(--marginS);
}

.section--description {}

.section--social {
	padding-top: var(--marginS);
	padding-bottom: var(--marginS);
}

.section--imprint {}

.section--privacy {}

.section--faq {}

.footer {
	padding-top: var(--marginL);
	padding-bottom: var(--marginL);
}



/* 1280 (M) */
@media screen and (max-width: 80em) {

	.section--stickers  {
		display: none;
	}

}






/* MODIFIERS */

.bg--gradient {
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--colorBackground) 100%);
}

.bg--fill {
	background: var(--colorBackground);
}



/* WRAPPER */

.wrapper {
	display: block;
	position: relative;
	width: 55%;
	min-width: 56rem;
}



.section--privacy .wrapper {
	max-width: 34rem;
}



/* 1280 (M) */
@media screen and (max-width: 80em) {

	.wrapper {
		min-width: auto;
		width: 80%;
	}

}






/* -----------------------------------------------------------------------------

	##	BACKGROUND

----------------------------------------------------------------------------- */


.bg {
	z-index: -1;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

	.bg__img {
		display: block;
		width: 100%;
		height: 100%;
		object-position: 50% 80%;
		object-fit: cover;
	}
	
	.page--imprint .bg__img {
		object-position: 50% 50%;
		transform: rotate(-180deg);
	}




/* -----------------------------------------------------------------------------

	## IMAGES & LAZYLOADING

----------------------------------------------------------------------------- */


img {
	display: block;
	width: 100%;
}



/* LAZYLOAD */

.lazyload,
.lazyloading,
.lazyloaded {
	opacity: 0;
	transition-property: opacity;
	transition-duration: 1600ms;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); /*easeOutQuart */
}

.lazyloaded  {
	opacity: 1;
}




/* -----------------------------------------------------------------------------

	##	ICONS

----------------------------------------------------------------------------- */

svg {
	fill: currentColor;
	transition-property: fill;
	transition-duration: 250ms;
	transition-timing-function: ease;
}


/* SVG ICONS */

svg.icon {
	font-size: 1em;
	width: 1em;
	height: 1em;
}

svg.icon.inline {
	display: inline-block;
	margin: 0 .5em;
}




/* -----------------------------------------------------------------------------

	##	LINKS & BUTTONS

----------------------------------------------------------------------------- */

a  {
	color: #FFF;
	text-decoration: none;
}

a,
a > * {
	transition-property: color, background-color, opacity, transform;
	transition-duration: 250ms, 250ms, 250ms, 500ms;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}



/* TEXT */

p a {
	display: inline-block;
	margin: 0 .15em;
	color: rgba(0,0,0,.75);
	border-bottom: 2px solid rgba(0,0,0,.25);
}

p a:hover {
	color: #D4D600;
	border-color: rgba(0,0,0,0);
}



/* BUTTON */

.button {
	z-index: 1;
	background: url("img/box-border-left.png") left top no-repeat, url("img/box-noise.png") 0 0 no-repeat, var(--colorLink);
	transition-property: background;
	transition-duration: 250ms;
	transition-timing-function: ease;
	text-decoration: none;
	box-shadow: .15rem .15rem 0 rgba(0,0,0,.35);
	padding: .5em 1em;
	margin: .25em;
	border: none;
	border-radius: 0.15rem;
	font-size: 1.25rem ; /* 20 */
	line-height: 1.5;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.1em;
	word-spacing: 0.1em;
	color: #FFF;
	cursor: pointer !important;
}

nav .button:nth-child(2) {
	background: url("img/box-border-right.png") right -10px no-repeat, url("img/box-noise.png") right 0 no-repeat, var(--colorLink);
}

.button:hover {
	background-color: var(--colorHover) !important;
	color: #FFF;
}


/* BUTTON "ICON" */

.button--icon {
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	font-size: 3.5rem;
	line-height: 1;
	width: .925em;
	height: .925em;
	padding: 0;
	margin: .5rem;
	border-radius: 50%;
	background-color: #FFF;
	transition-property: color;
	transition-duration: 250ms;
	transition-timing-function: ease;
	color: var(--colorLink);
	box-shadow: .15rem .15rem 0 rgba(0,0,0,.35);
	cursor: pointer !important;
}

	.button--icon svg.icon {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	.button--icon:hover svg.icon {
		color: var(--colorHover);
	}







/* 1280 (M) */
@media screen and (max-width: 80em) {
	.button {
		padding: .5em 1em;
		margin: .25em;
		font-size: 1.125rem ; /* 18 */
		letter-spacing: 0.1em;
		word-spacing: 0.1em;
	}
}



/* 1000 (S) */
@media screen and (max-width: 62.5em) {
	.button {
		flex-basis: calc(50% - 1rem);
	}
}


/* 640 (XS) */
@media screen and (max-width: 40em) {
	.button {
		flex-basis: 100%;
		display: block;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}




/* -----------------------------------------------------------------------------

	## NAVIGATION

----------------------------------------------------------------------------- */


.nav--buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.nav--social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

}






/* -----------------------------------------------------------------------------

	## MARKDWON

----------------------------------------------------------------------------- */


.md {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}


/* MD : MODIFIERS */


.md--s {
	font-size: 1.125rem;
}

.md--m {
	font-size: 1.25rem;
}

.md--l {
	font-size: 1.5rem;
	font-weight: 500;
}

.md--meta {
	font-size: .75em;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .125em;
	word-spacing: .05em;
	color: rgba(255,255,255,.75);
}



/* MD : ELEMENTS */


.md h3 {
	font-size: 1.5em;
	line-height: 1.25;
	font-weight: 700;
	padding-top: 1em;
	padding-bottom: 1em;
	
}

.md h4 {
	font-size: 1.5em;
	line-height: 1.25;
	font-weight: 500;
	padding-top: .5em;
	padding-bottom: .5em;
}

.md h5 {
	font-size: 1em;
	line-height: 1.25;
	font-weight: 700;
	text-transform: uppercase;
	padding-top: .25em;
	padding-bottom: .25em;
}

.md strong {
	font-weight: 500;
}


.md p {
	margin-bottom: .75em;
}


.md .divider {
	padding: 0 .5em;
}








/* -----------------------------------------------------------------------------

	##	FAQ

----------------------------------------------------------------------------- */


.faq {}

	.faq__item {
		display: block;
		margin-bottom: 1.5em;
	}
	
		.faq__item a {
			display: block;
			outline: none;
			color: currentColor;
		}
	
			.faq__item a i {
				color: #111 !important;
				margin-right: .5em;
				font-weight: bold !important;
			}
	



/* -----------------------------------------------------------------------------

	## HEADER (2019)

----------------------------------------------------------------------------- */



.header {}

	.header__logo {
		display: block;
		position: relative;
		width: 66.666666%;
		margin: 0 auto;
		transition: all 0.5s ease;
		transform: scale(1) rotate(0);
	}

	.header__logo:hover {
		transform: scale(1.075) rotate(-.75deg);
	}
	
		.header__logo h1 {
			display: none;
		}

	.header__title {
		transform: rotate(-2deg) translateX(.75em);
		color: #111;
		font-weight: 700;
		text-transform: uppercase;
		font-size: 1.25vw;
		letter-spacing: .1em;
		word-spacing: .1em;
		text-align: center;
	}



/* 1280 (M) */
@media screen and (max-width: 80em) {
	.header__title {
		font-size: 2vw;
	}
}


/* 960 (S) */
@media screen and (max-width: 60em) {
	.header__title {
		font-size: 2vw;
	}
}

/* 640 (XS) */
@media screen and (max-width: 40em) {
	.header__title {
		text-align: center;
		font-size: 3vw;
	}
}





/* -----------------------------------------------------------------------------

	## VIDEO (2019)

----------------------------------------------------------------------------- */

.video {
	padding: 8% 0;
}

	.video__wrapper {
		display: block;
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 0;
		padding-top: 56.25%;
		z-index: 3;
		background: #DDD;
	}

		.video iframe  {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100% !important;
			height: 100% !important;
		}
		
	.video__frame {
		position: absolute;
		top: 0;
		left: -7.8125%;
		width: 115.625%;
		z-index: 2;
	}





/* -----------------------------------------------------------------------------

	##	BANNER
	
	07.11.2019

----------------------------------------------------------------------------- */

.banner {
	z-index: 2;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
}

	.banner__link {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		text-transform: uppercase;
		color: white;
		font-size: .85vw;
		letter-spacing: .15em;
		margin: 0;
		background: url("img/box-border-right.png") right -10px no-repeat, url("img/box-noise.png") right 0 no-repeat, var(--colorOrange);
		transform: rotate(-40deg) translate(-27.5%,-32.5%);
		padding: 1em 10em;
		box-shadow: 0 .1em .2em rgba(0,0,0,.25);
	}

	.banner__link:hover {
		background-color: var(--colorHover) !important;
		color: #FFF;
	}
	
		.banner__title {
			margin-bottom: .5em;
		}



/* 1280 (M) */
@media screen and (max-width: 80em) {
	.banner__link {
		font-size: 11px;
	}
}

/* 640 (XS) */
@media screen and (max-width: 40em) {
	
	.banner {
		position: relative;
	}
	
	.banner__link {
		width: 100%;
		padding: 1em;
		transform: none !important;
	}
	
		.banner__title br {
			display: none !important;
		}

}







/* -----------------------------------------------------------------------------

	##	STICKER (2019)

----------------------------------------------------------------------------- */

.stickers {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
}

	.sticker {
		z-index: 2;
		display: block;
		position: fixed;
	}


@media screen and (max-width: 640px) {
	
	.stickers {
		position: relative;
		margin-top: -4vw;
	}
	
	.sticker {
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 25% !important;
	}
	
}




/* -----------------------------------------------------------------------------

	##	STICKER "FUNNY"

----------------------------------------------------------------------------- */


.sticker--funny {
	top: 10vh;
	left: 6vw;
	width: 12vw;
	transform: scale(1) rotate(-20deg);
}



@media screen and (max-width: 1280px) {
	.sticker--funny {
		position: absolute;
		left: -5vw;
		top: 6vw;
	}
}

@media screen and (max-width: 960px) {
	.sticker--funny {
		left: -2.5vw;
		top: 9vw;
		width: 14vw;
	}
}


@media screen and (max-width: 640px) {
	.sticker--funny {
		transform: scale(1.15);
	}
}




/* -----------------------------------------------------------------------------

	##	STICKER "BUY"

----------------------------------------------------------------------------- */


.sticker--buy {
	top: 7vh;
	right: 5vw;
	width: 12vw;
	transform: scale(1) rotate(12deg);
}

	.sticker--buy:hover {
		transform: scale(1.075) rotate(11deg);
	}
	
	.sticker--buy .sticker__title {
		font-weight: bold;
		text-transform: uppercase;
		color: white;
		font-size: .85vw;
		letter-spacing: .15em;
		margin: 0;
		background: var(--colorOrange);
		transform: rotate(-7deg) translate(-6%,20%);
		padding: .2em;
		box-shadow: 0 .1em .2em rgba(0,0,0,.25);
		z-index: -1;
	}
	
	.sticker--buy:hover h3 {
		transform: rotate(-9deg) translate(-6%,20%);
	}



@media screen and (max-width: 1280px) {
	.sticker--buy {
		position: absolute;
		top: 4vw;
		right: -5vw;
	}
}

@media screen and (max-width: 960px) {
	.sticker--buy {
		top: 6vw;
		right: -2vw;
		width: 12vw;
	}
	
	.sticker--buy h3 {
		font-size: 1.1vw;
	}
}














/* -----------------------------------------------------------------------------

	##	FOOTER

----------------------------------------------------------------------------- */


img#kaenguru-zitat {
	display: block;
	position: relative;
	width: 50%;
	min-width: 20rem;
	max-width: 100%;
	margin: 0 auto 2rem auto;
}

footer a {
	color: rgba(255,255,255,.7);
	border-bottom: 1px solid rgba(255,255,255,.25);
}

footer a:hover {
	color: rgba(255,255,255,1);
	border-color: rgba(255,255,255,0);
}