/* Fonts */

	@font-face {
		font-family: 'PorscheNextWLa';
		src: url('../fonts/PorscheNextTT-Regular.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}

	/* @font-face {
		font-family: 'PorscheNextWLa';
		src: url('../fonts/PorscheNextTT-Bold.ttf') format('truetype');
		font-weight: bold;
		font-style: normal;
	} */

	@font-face {
		font-family: 'PorscheNextWLa';
		src: url('../fonts/PorscheNextTT-Thin.ttf') format('truetype');
		font-weight: lighter;
		font-style: normal;
	}

	@font-face {
		font-family: 'PorscheNextWLa';
		src: url('../fonts/PorscheNextTT-Italic.ttf') format('truetype');
		font-weight: normal;
		font-style: italic;
	}

	/* @font-face {
		font-family: 'PorscheNextWLa';
		src: url('../fonts/PorscheNextTT-BoldItalic.ttf') format('truetype');
		font-weight: bold;
		font-style: italic;
	} */

	@font-face {
		font-family: 'PorscheNextWLa';
		src: url('../fonts/PorscheNextTT-ThinItalic.ttf') format('truetype');
		font-weight: lighter;
		font-style: italic;
	}

/* Basic */

	body {
		font-size: 1.1rem;
		background-attachment: fixed;
		font-family: "PorscheNextWLa", "Arial Narrow", sans-serif;
	}

	h1, h2, .h1, .h2 {
		font-size: 45px;
		font-weight: normal;
	} h1, h2, .h1, .h2, h3, p {
		margin-bottom: 50px;
	} h1, .h1 {
		position: relative;
		z-index: 1;
	} h3, .h3 {
		font-size: 1.5rem;
		margin-bottom: 25px;
	} h4 {
		margin: 0;
	}

	a {
		transition: all .3s;
	} a:hover {
		text-decoration: none;
	}

	img {
		max-width: 100%;
	} .shadow {
		box-shadow: 0 .5rem 1rem rgba(0,0,0,.25) !important;
	}

/* Preloader */

	.preloader {
		position: fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 9998;

		margin: auto;
		width: 100vw;
		height: 100vh;
		background: #1a1d24;

		transition: all .5s;
		transition-delay: 1s;
		visibility: visible;
		opacity: 1;
	} .preloader-inner {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;

		margin: auto;
		width: 4em;
		height: 4em;
		line-height: 4em;
		text-align: center;
		font-size: 3em;
		color: #fff;
	} .preloader-inner:after {
		content: '+';
		color: #cc0814;

		transition: all .3s;
		visibility: hidden;
		opacity: 0;
	} .preloader h5 {
		display: block;
		position: absolute;
		bottom: 20px;
		text-align: center;
		width: 100%;
	}

	.preloader.hide {
		visibility: hidden;
		opacity: 0;
		z-index: -1;
	} .preloader.hide .preloader-inner:after {
		visibility: visible;
		opacity: 1;
	}

	.circular-chart {
		position: absolute;
		top: calc(50% - 100px); left: calc(50% - 100px);

		width: 200px;
		height: 200px;
	}

	.circle-bg {
		fill: none;
		stroke: #181e21;
		stroke-width: 1.5;
	}

	.circle {
		fill: none;
		stroke: transparent;
		stroke-width: .5;
		stroke-linecap: round;
	} .circle.progress {
		animation: progress 4s ease-out forwards;
	} @keyframes progress {
		0% {
			stroke: #fff;
			stroke-dasharray: 0 100;
		} 85% {
			stroke: #fff;
		} 99% {
			stroke: #cc0814;
		} 100% {
			stroke: transparent;
		}
	}

/* Cookies */

	.cc-revoke, .cc-window {
		font-size: 12px;
	}

	.cc-grower {
		position: absolute;
		top: 0; left: 0;
		z-index: 99999;
		width: 100%;
		text-align: center;
	}

	.cc-btn,
	.cc-banner.cc-theme-edgeless .cc-btn {
		font-size: 20px;
		line-height: 20px;
		padding: .25em 1.5em;
	}

/* Header */

	header {
		position: absolute;
		top: 0; left: 0; right: 0;
		z-index: 9999;

		width: 100%;
		height: 75px;
		background-color: #fff;
		box-shadow: 0 0 3px 0 rgba(0,0,0,0.22);

		transition: all .5s;
	}

	header img {
		margin: 0 auto;
		display: block;
		height: 75px;
		width: 125px;
	}

	header .call-to-action, header .language {
		display: none;
		position: absolute;
		top: 15px; left: 25px;
	} header .language {
		top: 25px; right: 25px; left: auto;
		color: #cc0814;
	} header .language a {
		color: #7D7D7D;
	} header .language a:hover {
		color: #cc0814;
	}

/* Animation */

	.animate {
		opacity: 0;
		visibility: hidden;
		animation-duration: .5s;
		animation-fill-mode: forwards;
	} .animated {
		opacity: 1;
		visibility: visible;
	} .delay {
		transition-delay: .5s;
		animation-delay: .5s;
	} .delay-2 {
		transition-delay: 1s;
		animation-delay: 1s;
	}

/* Scroll Effects */

	/* Mouse */

	.mouse {
		position: absolute;
		bottom: 20px; left: calc(50% - 15px);
		z-index: 2;
		display: block;
		width: 25px;
		height: 40px;
		margin: 0 auto 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border: 2px solid #fff;
		border-radius: 23px;

		opacity: .5;
	} .mouse > * {
		position: absolute;
		display: block;
		top: 29%;
		left: 50%;
		width: 6px;
		height: 6px;
		margin: -3px 0 0 -3px;
		background: #fff;
		border-radius: 50%;
		-webkit-animation: ani-mouse 2.5s linear infinite;
		-moz-animation: ani-mouse 2.5s linear infinite;
		animation: ani-mouse 2.5s linear infinite;
	}

	@-webkit-keyframes ani-mouse {
		0% {
			opacity: 1;
			top: 29%;
		} 15% {
			opacity: 1;
			top: 50%;
		} 50% {
			opacity: 0;
			top: 50%;
		} 100% {
			opacity: 0;
			top: 29%;
		}
	} @-moz-keyframes ani-mouse {
		0% {
			opacity: 1;
			top: 29%;
		} 15% {
			opacity: 1;
			top: 50%;
		} 50% {
			opacity: 0;
			top: 50%;
		} 100% {
			opacity: 0;
			top: 29%;
		}
	} @keyframes ani-mouse {
		0% {
			opacity: 1;
			top: 29%;
		} 15% {
			opacity: 1;
			top: 50%;
		} 50% {
			opacity: 0;
			top: 50%;
		} 100% {
			opacity: 0;
			top: 29%;
		}
	}

/* Page */

	#page {
		padding: 150px 0 50px;
	} #page .row {
		padding: 20px 0;
	}

/* Section */

	#steps {
		padding: 150px 0px;
	} #download {
		padding-bottom: 150px;
	}

	.section {
		overflow: hidden;
		padding: 0;
	} .section.auto-height, .section.auto-height .fp-tableCell, .half-height.auto-height {
		height: auto !important;
	} .section.background-size-auto {
		background-size: auto 100vh;
		background-repeat: no-repeat;
		background-position: top center;
	} .section.background-size-auto.overlay:before, .section.background-size-auto.raster:before {
		height: 100vh;
	} .section.background-size-auto .header-content {
		padding-top: 300px;
		min-height: 100vh;
	} .section.background-size-auto .header-content + * {
		margin-top: 150px;
	}

	.container {
		padding: 0 2vw;
		position: relative;
		z-index: 1;
	}

	.overlay .container > *, .raster .container > * {
		position: relative;
	} .overlay:before, .raster:before {
		content: '';
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;

		max-width: 100vw;
		background-image: linear-gradient(to right top, rgba(0,0,0,.5), transparent);
	} .overlay-red:before {
		background-image: linear-gradient(to top, rgba(3,62,116,.75), #cc0814);
	} .overlay-blue:before {
		background-image: linear-gradient(-207deg, rgba(255,255,255,0.00) 0%, rgba(9,8,46,0.30) 100%);
	} .overlay-black:before {
		background-image: linear-gradient(-207deg, rgba(149,220,253,0.00) 0%, rgba(18,9,9,0.81) 100%);
	} .overlay-brown:before {
		background-image: linear-gradient(-207deg, rgba(154,242,253,0.00) 0%, rgba(61,28,0,0.48) 100%);
	} .raster:before {
		background-image: url(../img/raster.png);
		background-color: rgba(0,0,0,.5);
		background-size: cover;
		z-index: 1;
	}

	.half-height, .third-height, .two-third-height {
		height: 50vh;
		padding: 30px 0;
		position: relative;
		background-size: cover;
		background-repeat: no-repeat;
	} .third-height {
		height: 33.3333vh;
	} .two-third-height {
		height: 66.6666vh;
	} .align-center {
		display: flex;
		align-items: center;
	} .align-bottom {
		display: flex;
		align-items: flex-end;
	} .half-height h2, .third-height h2, .two-third-height h2 {
		margin-bottom: 0;
	}

	.partner {
		padding: 50px 0;
		margin-bottom: 200px;
	}

	.red-background {
		background-color: #cc0814 !important;
		background-image: linear-gradient(to top, transparent, rgba(0,0,0,.15));
	} .gray-background {
		background-color: #20282b !important;
	} .red-background h3, .gray-background h3 {
		font-size: 20px;
		line-height: 30px;
	}

	.hide-desktop {
		display: none;
	}

	/* Light Sections */

	.light,
	.fp-viewing-0 #fp-nav ul li .fp-tooltip, .fp-viewing-0-0 #fp-nav ul li .fp-tooltip, .fp-viewing-0-1 #fp-nav ul li .fp-tooltip, .fp-viewing-0-2 #fp-nav ul li .fp-tooltip, .fp-viewing-0-3 #fp-nav ul li .fp-tooltip,
	.fp-viewing-1 #fp-nav ul li .fp-tooltip,
	.fp-viewing-3 #fp-nav ul li .fp-tooltip,
	.fp-viewing-5 #fp-nav ul li .fp-tooltip,
	.fp-viewing-8 #fp-nav ul li .fp-tooltip {
		color: #fff;
	} .fp-viewing-0 #fp-nav ul li a span, .fp-viewing-0 .fp-slidesNav ul li a span, .fp-viewing-0-0 #fp-nav ul li a span, .fp-viewing-0-0 .fp-slidesNav ul li a span, .fp-viewing-0-1 #fp-nav ul li a span, .fp-viewing-0-1 .fp-slidesNav ul li a span, .fp-viewing-0-2 #fp-nav ul li a span, .fp-viewing-0-2 .fp-slidesNav ul li a span, .fp-viewing-0-3 #fp-nav ul li a span, .fp-viewing-0-3 .fp-slidesNav ul li a span,
	.fp-viewing-1 #fp-nav ul li a span, .fp-viewing-1 .fp-slidesNav ul li a span,
	.fp-viewing-3 #fp-nav ul li a span, .fp-viewing-3 .fp-slidesNav ul li a span,
	.fp-viewing-5 #fp-nav ul li a span, .fp-viewing-5 .fp-slidesNav ul li a span, .fp-viewing-5 #fp-nav ul li a.active span, .fp-viewing-5 .fp-slidesNav ul li a.active span, .fp-viewing-5 #fp-nav ul li:hover a.active span, .fp-viewing-5 .fp-slidesNav ul li:hover a.active span,
	.fp-viewing-8 #fp-nav ul li a span, .fp-viewing-8 .fp-slidesNav ul li a span {
		background-color: #fff;
	}

/* Tooltip */

	#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
		background-color: #cc0814;
	}

	#fp-nav ul li .fp-tooltip {
		display: none;
	}

	#fp-nav ul li:nth-child(6), #fp-nav ul li:last-child { /* Red Background Section and last Section is to small */
		display: none;
	}

/* Slider */

	.slide {
		position: relative;
	}

	.fp-controlArrow.fp-prev {
		left: 100px;
		border-width: 28.5px 24px 28.5px 0;
	} .fp-controlArrow.fp-next {
		right: 100px;
		border-width: 28.5px 0 28.5px 24px;
	}

	/* Slick */

	.slider-background {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
	} .slider-background .slick-slide {
		min-height: 100vh;
		background-size: cover;
		background-position: center;
	}

	/* Synced (iPhone and Header) */

	.slider-synced .fp-tableCell {
		vertical-align: top;
	}

	.slider-synced h2 {
		padding: 500px 0 50px;
	}

	.slider-iphone, .video-iphone {
		width: 339px;
		height: 690px;
		padding: 20px;
		margin: 0 auto;
		position: relative;

		/* background-image: url(../img/iphone-frame.png);
		background-size: contain;
		background-repeat: no-repeat; */
	} .slider-iphone {
		z-index: 2;
	} .slider-iphone .slick-list {
		padding: 0 !important;
	} .slider-iphone > *, .video-iphone > * {
		width: 300px;
		height: 650px;
	}

	.slider-iphone:before, .slider-iphone:after, .video-iphone:before, .video-iphone:after {
		content: '';
		width: 339px;
		height: 50px;
		background-size: 339px 50px;

		position: absolute;
		left: 0; right: 0;
		z-index: 1;
	} .slider-iphone:before, .video-iphone:before {
		top: 0;
		background-image: url(../img/iphone-frame-top.png);
	} .slider-iphone.status-bar:before, .video-iphone.status-bar:before {
		top: 0;
		background-image: url(../img/iphone-frame-top-status-bar.png);
	} .slider-iphone:after, .video-iphone:after {
		bottom: 0;
		background-image: url(../img/iphone-frame-bottom.png);
	}

	.iphone-frame-left, .iphone-frame-right {
		width: 23px;
		height: 690px;
		background-size: 23px 690px;

		position: absolute;
		top: 0; bottom: 0;
		z-index: 1;
	} .iphone-frame-left {
		left: 0;
		background-image: url(../img/iphone-frame-left.png);
	} .iphone-frame-right {
		right: 0;
		background-image: url(../img/iphone-frame-right.png);
	}

	.slider-header {
		position: absolute;
		top: 0; right: 0; left: 0;
	} .slider-header .slick-slide {
		height: 600px;
	}

/* Figure | Figcaption */

	figure {
		position: relative;
		z-index: 1;
	} figure:before {
		content: '';
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;

		background-image: linear-gradient(transparent, rgba(0,0,0,.5));
	}

	figure img {
		width: 100%;
	}

	figure figcaption {
		position: absolute;
		bottom: 20px; left: 30px; right: 30px;

		color: #fff;
	}

	figure + p {
		padding: 0 25px;
	}

	figure.max-width-280 {
		max-width: 280px;
	}

/* Grid */

	.grid {
		overflow: visible;
	}

	.grid .background-video {
		height: 100vh;
	}

	.grid .divider, .divider {
		margin-top: 100px;
	} .grid .divider-big, .divider-big {
		margin-top: 250px;
	} .grid .divider-small, .divider-small {
		margin-top: 50px;
	} .grid .overlap, .overlap {
		margin-top: -100px !important;
	} .grid .overlap-big, .overlap-big {
		margin-top: -450px !important;
	} .grid .overlap-big, .overlap-medium {
		margin-top: -25vh !important;
	}

	.grid .position-center {
		padding-top: 20%;
	}

	.grid .bg-divider {
		height: 75vh;
		margin: -100px 0;
		position: relative;
		background-size: cover;
		background-repeat: no-repeat;
	}

/* Button | Call to Action | Play Video */

	.button {
		color: #fff;
		padding: 10px 20px;
		background-color: #cc0814;
		display: inline-block;
	} .button:before {
		content: '';
		width: 7px;
		height: 14px;
		margin-right: 10px;
		display: inline-block;

		background-image: url(../img/arrow-white.svg);
		background-size: 7px 14px;
		background-repeat: no-repeat;
		background-position: center;
	} .button:hover {
		color: #fff;
		background-color: #e60000;
	} .button.gray {
		background-color: #313638;
	} .button.gray:hover {
		background-color: #191f22;
	} .red-background .button, .gray-background .button {
		background-color: transparent;
		border: 1px solid rgba(255,255,255,.5);
	} .red-background .button:hover, .gray-background .button:hover {
		background-color: #cc0814;
		border-color: rgba(255,255,255,1);
	} .gray-background .button:hover {
		background-color: transparent;
	}

	.call-to-action, .play-video {
		color: #000;
		display: inline-block;
		position: relative;
		padding-left: 20px;
		margin-top: 10px;
		margin-bottom: 25px;
	} .play-video {
		padding-left: 35px;
	} .light .call-to-action, .light .play-video {
		color: #fff;
	} .call-to-action:hover, .play-video:hover,
	.light .call-to-action:hover, .light .play-video:hover {
		color: #d5001c;
	}

	.call-to-action:before, .play-video:before {
		content: "";
		width: 15px;
		height: 27px;
		display: inline-block;

		background-image: url(../img/arrow.svg);
		background-size: 15px 15px;
		background-repeat: no-repeat;
		background-position: center;

		position: absolute;
		top: 0; left: 0;
	} .play-video:before {
		width: 25px;
		background-image: url(../img/play-icon.svg);
		background-size: 25px 25px;
	}

/* Video */

	.background-video {
		position: absolute;
		right: 0;
		bottom: 0;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		background-color: black; /* in case the video doesn't fit the whole page*/
		background-image: /* our video */;
		background-position: center center;
		background-size: contain;
		object-fit: cover; /*cover video background */
	} .background-video + * {
		position: relative;
		z-index: 1;
	}

	video::-webkit-media-controls {
		display: none !important;
	}

/* Table */

	.CookieTable-container {
		display: block;
		margin: 0 auto;
		max-width: 1082px;
		overflow-x: auto;
	}

	.CookieTable tr:nth-child(odd) {
		background-color: #f8f8f8;
	}

	.CookieTable td {
		padding-left: 14px;
		padding-right: 14px;
		padding-top: 5px;
		padding-bottom: 5px;
		vertical-align: top;
		text-align: left;
		border-bottom: 1px dashed #ccc;
	}

/* Footer */

	footer {
		padding: 2em;
		position: relative;
		text-align: center;
		background-color: #191F22;
	}

	footer p {
		margin: 0;
		padding: 0;
	}

	footer a {
		color: #84868c;
	} footer a:hover {
		color: #ccc;
	}

	footer img {
		margin: 0 auto 2em;
	}

@media (max-width: 1500px) {

	.video-iphone {
		transform: scale(.75);
	} .slider-iphone {
		transform: scale(.6);
		margin: 190px auto -75px !important;
	}
}

@media (max-width: 1199px) {

/* Basic */

	h1, h2, .h1, .h2 {
		font-size: 36px;
	}
}

@media (max-width: 991px) {

/* Basic */

	h1, h2, .h1, .h2 {
		margin-bottom: 30px;
	}

/* Preloader */

	.preloader h5 {
		display: none;
	}

/* Header */

	header {
		width: 124px;
		left: 7.5px; right: auto;
	}

/* Animation */

	.delay, .delay-2 {
		transition-delay: 0;
		animation-delay: 0;
	}

/* Scroll Effects */

	.mouse {
		display: none;
	}

/* Section */

	#overview {
		background-color: #191f22 !important;
	} #overview .overlay:before {
		display: none;
	} #steps {
		padding: 100px 0;
	}

	.section.background-size-auto {
		background-size: 100% 100vh;
	} .section.background-size-auto .header-content {
		padding: 75px 15px;
	}

	.half-height, .third-height, .two-third-height {
		height: auto;
	} .two-third-height {
		padding: 0;
		background-size: 100% 85vh;
	} .two-third-height:before {
		height: 85vh;
	} .half-height-mobile {
		height: 50vh;
	}

	.partner {
		margin-bottom: 0;
	}

	.padding-mobile {
		padding: 100px 0;
	} .grid .padding-mobile {
		padding-bottom: 0;
	}

	.no-padding-bottom-mobile {
		padding-bottom: 25px;
	} .no-padding-top-mobile {
		padding-top: 25px;
	}

	.hide-desktop {
		display: block;
	} .hide-mobile {
		display: none !important;
	}

	#download {
		padding-bottom: 0;
	}

	/* Light Sections */

	.light-mobile {
		color: #fff;
	}

/* Bootstrap */

	.row {
		margin: 0;
	}

	.order-1, .order-2, .order-3, .order-4, .order-5, .order-6, .order-7, .order-8, .order-9, .order-10, .order-11, .order-12 {
		-ms-flex-order: 0;
		order: 0;
	}

/* Tooltip */

	#fp-nav {
		display: none;
	}

/* Slider */

	.slider-synced h2 {
		padding: 0;
		color: inherit;
	}

	.video-iphone, .video-iphone.overlap-big {
		margin: -50px auto -125px !important;
	}

/* Figure | Figcaption */

	figure {
		margin: 1rem calc(-2vw - 15px);
	} figure + p {
		padding: 0;
	}

	.grid figure {
		margin-top: 0;
		margin-bottom: 0;
	}

	figure.max-width-280 {
		max-width: none;
	}

/* Grid */

	.grid .divider, .divider, .grid .divider-small, .divider-small, .grid .divider-big, .divider-big,
	.grid .overlap, .overlap, .grid .overlap-big, .overlap-big {
		margin-top: 0 !important;
	}

	.grid .position-center {
		padding-top: 0;
	}

	.grid .bg-divider {
		display: none;
	}

/* Button | Call to Action | Play Video */

	.button {
		display: block;
		text-align: center;
	}

/* Fixe Größen */

	#intro, #intro .fp-tableCell, .slider-background .slick-slide {
		height: 990px !important;
	} #intro .half-height-mobile {
		height: 450px;
		padding-bottom: 50px;
	}

	.grid .background-video {
		height: 770px !important;
	} .section.background-size-auto .header-content, .section.background-size-auto.overlay:before, .section.background-size-auto.raster:before {
		height: 770px;
		min-height: none;
	} .grid .half-height-mobile {
		height: 385px;
	}

/* Footer */

	footer p {
		font-size: .8rem;
	}
}

@-moz-document url-prefix() {

/* Firefox Font Weight Fix */

	body, h1, h2, .h1, .h2 {
		font-weight: bold;
	}
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {

/* Chrome Font Weight Fix */

	body, h1, h2, .h1, .h2 {
		font-weight: bold;
	}
}