@import url(../fonts/Metropolis/style.css);
@import url("https://p.typekit.net/p.css?s=1&k=usi2dac&ht=tk&f=26034.26053.26055.26058.26060.26062.26063.26068.26070.26072.26074.26075.26078.26080.26084.26086&a=119803244&app=typekit&e=css");

/* - - - - - - - - - - - - - - - - - general - - - - - - - - - - - - - - - - - */

body {
	width: 100vw;
	margin: 0;
	background-color: #000;
}

a:link, a:visited {
 text-decoration: none;
 color: #ff6900;
}


[data-object-fit='cover'] {
  object-fit: cover
}

.flex {
	display: flex;
}

.contentBox {
	flex-direction: column;
	position: relative;
	z-index: 2;
}

.sideSpace1 {
	padding-left: 5vw;
	padding-right: 5vw;
	width: 90vw;
}

.sideSpace2 {
	padding-left: 13vw;
	padding-right: 13vw;
}

.sideSpace3 {
	padding-left: 22vw;
	padding-right: 22vw;
}

img {
	width: 100%;
}

a:focus   { color: #e24220; }
a:hover   { color: #e24220; }
a:active  { color: #e24220; }

/* - - - - - - - - - - - - - - - - - colour - - - - - - - - - - - - - - - - - */

:root {  --primarycolor: #ffff50;}
:root {  --primarycolor_hover: #ffff91;}
:root {  --primarycolor_active: #dcdc46;}

:root {  --secondarycolor: #00ccff;}


/* - - - - - - - - - - - - - - - - - typo - - - - - - - - - - - - - - - - - */

.h1 {
	font-size: 8.6vh;
	font-family:"acumin-pro-wide";
	font-weight:500;
	color: #000;
	letter-spacing: 0;
	line-height: 1.23;
	transform-origin: top left;
	will-change: transform;
}

.h1SpaceBottom {
	margin-bottom: 3.5vh;
}

.h2 {
	font-size: 4.8vh;
	font-family:"acumin-pro-wide";
	font-weight:500;
	color: #fff;
	letter-spacing: 0;
	line-height: 1.23;
}

.h3 {
	font-size: 1.5vh;
	font-family:"acumin-pro";
	font-weight:400;
	line-height: 1.35;
	letter-spacing: 1.5;
	padding-bottom: 1.5vh;
}

.h4 {
	font-size: 1.9vh;
	font-family:"acumin-pro";
	font-weight:600;
	line-height: 1.35;
	padding-bottom: 1.1vh;
}

.t1 {
	font-size: 3.9vh;
	font-family:"acumin-pro-wide";
	font-weight:300;
	letter-spacing: 0;
	line-height: 1.23;
}

.t2 {
	font-size: 2.5vh;
	font-family:"acumin-pro";
	font-weight:300;
	line-height: 1.35;
	z-index: 3;
}

.t2 b {
	font-weight:600;
	line-height: 2;
}

.t3 {
	font-size: 1.9vh;
	font-family:"acumin-pro";
	font-weight:300;
	line-height: 1.35;
}

.t5 {
	font-size: 1.4vh;
	font-family:"acumin-pro";
	font-weight:300;
	line-height: 1.35;
	color: #8f8f8f;
}

/* - - - - - - - - - - - - - - - - - navigation - - - - - - - - - - - - - - - - - */
.header {
	height: 9vh;
	position: fixed;
	mix-blend-mode: difference;
	justify-content:  space-between;
	align-items: center;
	z-index: 10;
}

.logo {
	height: 4vh;
	width: 11vw;	
}

.iconMenu {
	fill: #fff;
	height: 5vh;
	width: 5vh;
	background-color: #000;
	mix-blend-mode: difference;
}


/* - - - - - - - - - - - - - - - - - button - - - - - - - - - - - - - - - - - */


/* - - - - - - - - - - - - - - - - - stage - - - - - - - - - - - - - - - - - */

.stage {
	width: 100vw;
	height: 90vh;
	background-color: #000;
	justify-items: center;
}

.stageVideo {
	object-fit: cover;
}

/* - - - - - - - - - - - - - - - - - intro - - - - - - - - - - - - - - - - - */

.intro {
	padding: 23vh 5vw 30vh 5vw;
	flex-direction: column;
	text-align: center;
	color: #000;
	background-color: #fff;
	position: relative;
	overflow: hidden;
}

.introGraphic {
	position: absolute;
	opacity: 0;
	z-index: 2;

}

.introGraphic1 {
	width: 13vh;
	height: 13vh;
	top: 9vh;
	left: 26%;
	transform: scale(0.9);
}

.introGraphic2 {
	width: 28vh;
	height: 32vh;
	top: 50vh;
	left: 75%;
	transform: scale(0.9);
	opacity: 0;
}

.introGraphic3 {
	width: 29vh;
	top: 80vh;
	left: 17%;
	transform: scale(0.93);
}

#trigger2_S1 {
	position: absolute;
	bottom: 0;
	height: 50%;
	width: 100%;
}

/* - - - - - - - - - - - - - - - - - clients & agencies - - - - - - - - - - - - - - - - - */

.clientsBox {
	background-color: #000;
	padding: 10vh 0 11vh 0;
	align-content: space-between;
	flex-direction: column;
	text-align: center;
	color: #fff;
	overflow: hidden;
}

.clientsStripe {
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 1vw;
	margin-top: 2vh;
	text-align: left;
}

.client {
	flex-direction: row;
	gap: 2vw;
}

.clientTask {
	margin-top: 3%;
}

.stripeElement {
	overflow-x: auto;
	word-break: break-all;
	white-space: nowrap;
}

.clientName {
	font-size: 5.4vw;
	font-family:"acumin-pro-wide";
	font-weight: 500;
	color: #fff;
	letter-spacing: 0;
	transform-origin: top left;
	vertical-align: top;
	margin-left: 3vw;
}

.t3c {
	font-size: 1vw;
	font-family:"acumin-pro";
	font-weight:300;
	line-height: 1.2;
}
.t3c b {
	font-weight:600;
}

.agenciesBox {
	padding: 10vh 5vw 22vh 5vw;
	align-content: space-between;
	flex-direction: column;
	text-align: center;
	background-color: #fff;
}

.agencyLogoBox {
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7vh 2vw;
	padding-top: 7vh;
	justify-content: space-around;
}

.agency {
	width: 22vw;
	height: 7vw;
	overflow: hidden;
	justify-content: center;
	align-items: flex-end;
}

.t5Quelle {
	margin-top: 4vh;
}

/* - - - - - - - - - - - - - - - - - brandBox - - - - - - - - - - - - - - - - - */

.brandBox {
	width: 100%;
	background-color: #fff;
}

.brandBoxText {
	color: #fff;
	background-color: #000;
	padding-top: 2vh;
	padding-bottom: 13vh;
	text-align: center;
	line-height: 1.45;
}
/* - - - - - - - - - - - - - - - - - contact - - - - - - - - - - - - - - - - - */

.meBox {
	width: 100vw;
	height: 58vw;
	overflow: hidden;
	background-color: #fff;
	align-items: center;
	justify-content: center;
	position: relative;
}

.photoMe {
	width: 25.5vw;
	position: absolute;
	transform: scale(0.9);
	z-index: 5;
	bottom: 4vh;
}

.photoMe.photoMeEnd {
	width: 27vw;
	filter: blur(0);
	
}

.hHello1 {
	font-size: 5.2vw;
	width: 31vw;
	float: left;
	top: 12.8vw;
	margin-right: 2vw;
	font-family:"acumin-pro-wide";
	font-weight:200;
	color: blue;
	transition: all 0.6s ease;
	z-index: 10;
	position: absolute;
	transform: 
		perspective(800px)
    rotateY(20deg) scale(0.95)
    rotateX(10deg)
    rotateZ(4deg);
}

.hHello1.hHello1Transform {
	margin-right: 0;
	transform: 
		perspective(800px)
    rotateY(0deg) scale(1)
    rotateX(0deg)
    rotateZ(0deg);
}

.hHello2 {
	font-size: 17vw;
	top: 13.5vw;
	margin-left: -7vw;
	font-family:"acumin-pro-wide";
	font-weight:500;
	color: blue;
	transition: all 0.8s ease;
	z-index: 10;
	position: absolute;
	transform: 
		perspective(800px)
    rotateY(-20deg) scale(0.95)
    rotateX(10deg)
    rotateZ(-5deg);
}

.hHello2.hHello1Transform {
	margin-left: 0vw;
	transform: 
		perspective(800px)
    rotateY(0deg) scale(1)
    rotateX(0deg)
    rotateZ(0deg);
}

/*.hBig:hover {
	transform: perspective(200px) translate3d(0px, 0px, 100px);
}*/

.contactBox {
	padding: 10vh 5vw 12vh 5vw;
	flex-direction: column;
	text-align: center;
	background-color: #fff;
}

/* - - - - - - - - - - - - - - - - - footer - - - - - - - - - - - - - - - - - */

.footer {
	background-color: #000;
	padding-top: 10vh;
	padding-bottom: 8vh;
	color: #fff;
	overflow: hidden;
}

.footerMenu {
	gap: 7vw;
	flex-wrap: wrap;
}

.logoFooter {	
	margin-top: 8.5vh;
}

.copyright {
	margin-top: 4.5vh;
	color: #979797;
}


/* - - - - - - - - - - - - - - - - - impressum - - - - - - - - - - - - - - - - - */

.impressum {
	padding-top: 15vh;
	padding-bottom: 10vh;
	width: 65vw;
	flex-direction: column;
	text-align: left;
	color: #fff;
	position: relative;
}

/* - - - - - - - - - - - - - - - - - animations - - - - - - - - - - - - - - - - - */

[data-aos="ud-bigScale"] {
	transform: translate3d(0px, 0px, 0px) scale(1, 1);
	transform: rotate(-180deg);
	transform: scale(1.0);
}


	[data-aos="ud-bigScale"].aos-animate {
		transform: translate3d(200px, 500px, 0px) scale(0.35, 0.35);
		transform: rotate(0);
		transform: scale(0.35);
	}
}

AOS.init {
	delay: 0;
  duration: 400; 
	};