/* Theme Name: ye-website
*/
@font-face {
	font-family: 'Satoshi';
	src: url('./assets/font/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Regular.woff')
		format('woff');
}
/*TODO: sort by pages*/

body {
	font-family: 'Satoshi';
	margin: 0;
}

* {
	margin: 0;
}

html {
	margin: 0 !important;
	width: 100vw;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar {
	display: none;
}

:root {
	--grey: #ebebeb;
	--lightgrey: #f5f5f5;
	--darkgrey: #848484;
}

/* Colors */
.bg-grey {
	background-color: var(--grey);
}

.bg-lightgrey {
	background-color: var(--lightgrey);
}

.bottom-blur {
	height: 60px;
	box-shadow: 0px 100px 50px 20px #e6d7fd, 50px 100px 50px 2px #e6d7fd,
		0px 200px 50px 21px #e6d7fd, -50px 0px 50px -2px #e6d7fd;
}

.top-blur {
	box-shadow: 0px 0px 50px 20px #e6d7fd, 50px 0px 50px 2px #e6d7fd,
		0px 0px 50px 21px #e6d7fd, -50px 0px 50px -2px #e6d7fd;
	margin-top: 100px;
}
/* Containers */
.container {
	width: 100%;
}

.overflow-hidden {
	overflow: hidden;
}
/* Alignment helpers*/
body
	.is-layout-constrained
	> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--content-size);
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.align-content-bottom {
	display: flex;
	align-items: flex-end;
}
.hero-height {
	min-height: 100vh;
	height: fit-content;
}
.p-100-50 {
	padding: 100px 50px;
}
.p-l-r-50 {
	padding: 0 50px;
}
.p-l-0 {
	padding-left: 0 !important;
}
.sub-height {
	height: 90vh;
}

.w-100 > div {
	width: 100%;
	margin: 0 !important;
}

.-m-b-70px {
	margin-bottom: -70px;
}

.m-b-32 {
	margin-bottom: 32px;
}

.m-t-32 {
	margin-top: 32px;
}

.m-b-40 {
	margin-bottom: 40px;
}

.m-t-b-96 {
	margin: 96px 0;
}

.m-t-b-24 {
	margin: 24px 0;
}

.m-b-42 {
	margin-bottom: 42px !important;
}
.m-t-42 {
	margin-top: 42px !important;
}

.m-b-48 {
	margin-bottom: 48px;
}

.m-b-72 {
	margin-bottom: 72px;
}

.m-b-56 {
	margin-bottom: 56px;
}

.m-b-64 {
	margin-bottom: 64px;
}

.m-b-87 {
	margin-bottom: 87px;
}

.m-b-96 {
	margin-bottom: 96px;
}

.m-b-126 {
	margin-bottom: 126px;
}

.m-b-110 {
	margin-bottom: 110px;
}
.mr-30 {
	margin-right: 30px;
}
.m-0 {
	margin: 0 !important;
}

.p-0 {
	padding: 0 !important;
}

.p-t-b-36 {
	padding: 36px 0;
}

.p-t-b-65 {
	padding: 65px 0;
	box-sizing: content-box;
}
.p-t-b-126 {
	padding: 126px 0;
}

.p-b-126 {
	padding-bottom: 126px;
}

.p-b-111 {
	padding-bottom: 111px;
}

.p-b-216 {
	padding-bottom: 216px;
}

.p-b-36 {
	padding-bottom: 36px;
}

.p-b-64 {
	padding-bottom: 64px;
}
.p-t-36 {
	padding-top: 36px;
}
.p-t-126 {
	padding-top: 126px;
}

.p-t-74 {
	padding-top: 74px;
}

.p-t-96 {
	padding-top: 96px;
}

.p-b-50 {
	padding-bottom: 50px;
}

.p-b-30 {
	padding-bottom: 30px;
}

.p-t-b-20 {
	padding: 20px 0;
}

.m-t-80 {
	margin-top: 80px;
}

.m-t-126 {
	margin-top: 126px;
}

.pos-relative {
	position: relative;
}

.group-no-padding > .wp-block-group__inner-container {
	padding: 0 !important;
}

.sum-p-t-b-36 > summary {
	padding: 36px 0;
}

.sum-p-t-b-36-64 > summary {
	padding-top: 36px;
	padding-bottom: 64px;
}

/* Grid & helpers */
:where(.wp-block-columns.has-background),
:where(.wp-block-group.has-background) {
	padding: 0;
	margin: 0;
}
.grid-container {
	/* width: 100vw!important; */
}
.display-grid-half {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-column-gap: 20px;
}
@media screen and (max-width: 600px) {
	.display-grid-half.wp-block-group .wp-block-group__inner-container {
		padding: 0;
	}
}

.sticky-container > .display-grid-half > div {
	grid-column: span 5;
}

.display-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 20px;
}
.grid-container > .wp-block-group__inner-container,
.half-splitted,
.group-max-width > .wp-block-group__inner-container,
.contact-banner > .wp-block-group__inner-container {
	display: grid;
	padding: 0 50px;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 20px;
	margin: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1400px;
}

.wp-block-group__inner-container > * {
	/* width: 100%; */
	z-index: 2;
}

.span-1 {
	grid-column: 1 / 1;
}
.span-2 {
	grid-column: 1 / 2;
}
.span-3 {
	grid-column: 1 / 3;
}
.span-4 {
	grid-column: 1 / 4;
}

.span-5 {
	grid-column: 1 / 5;
}
.span-6 {
	grid-column: 1 / 6;
}

.span-7 {
	grid-column: 1 / 7;
}
.span-8 {
	grid-column: 1 / 8;
}
.span-9 {
	grid-column: 1 / 9;
}
.span-10 {
	grid-column: 1 / 10;
}
.span-11 {
	grid-column: 1 / 11;
}
.span-12 {
	grid-column: 1 / 12;
}
.span-13 {
	grid-column: 1 / 13;
}

.span1-6 {
	grid-column: 1 / 6;
}
.span1-7 {
	grid-column: 1 / 7;
}

.span2-7 {
	grid-column: 2 / 7;
}
.span2-4 {
	grid-column: 2 / 4;
}
.span2-6 {
	grid-column: 2 / 6;
}

.span2-10 {
	grid-column: 2/ 10;
}

.span3-9 {
	grid-column: 3 / 9;
}

.span4-9 {
	grid-column: 4 / 9;
}

.span4-10 {
	grid-column: 4 / 10;
}

.span3-7 {
	grid-column: 3 / 7;
}
.span6-11 {
	grid-column: 6 / 11;
}
.span7-12 {
	grid-column: 7 / 12;
}

.span7-13 {
	grid-column: 7 / 13;
}

.span7-10 {
	grid-column: 7 / 10;
}
.span7-9 {
	grid-column: 7 / 9;
}
.span8-10 {
	grid-column: 8 / 10;
}
.span8-12 {
	grid-column: 8 / 12;
}
.span8-13 {
	grid-column: 8 / 13;
}

.span5-12 {
	grid-column: 5 / 12;
}

.span6-12 {
	grid-column: 6 / 12;
}
.span10-13 {
	grid-column: 10 / 13;
}
.span9-12 {
	grid-column: 9 / 12;
}

.span-end {
	grid-column-end: 13;
}

.g-row-start-2 {
	grid-row-start: 2;
}

.g-row-start-3 {
	grid-row-start: 3;
}

.intro-texts {
	grid-column: 1 / 13;
	align-self: end;
}

.color-contrast {
	/* mix-blend-mode: difference;
  color: black; */
}

/* Nav */
header {
	height: 0;
	display: flex;
	/* margin-top: 50px!important; */
}

#primary-menu {
	grid-column: 2 / 13;
	position: absolute;
	width: 100%;
	list-style: none;
	padding: 30px 0;
	display: grid;
	grid-template-columns: repeat(12, auto); /* TODO: adjust width */
	column-gap: 20px; /* TODO: adjust width*/
	align-items: center;
	z-index: 100;
}
#nav-icon-link {
	position: fixed;
	padding: 10px 0 0 50px;
	width: 30px;
}

.burger-icon {
	transform: rotate(0deg);
	transition: 0.5s ease-in-out;
	cursor: pointer;
	width: 40px;
	height: 40px !important;
	z-index: 10000 !important;
	margin-right: 50px;
	margin-top: 20px;
}
.burger-icon.open {
	margin-top: 50px;
}

.burger-icon span {
	display: block;
	position: absolute;
	height: 2px;
	width: 40px;
	background: black;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	transform: rotate(0deg);
	transition: 0.25s ease-in-out;
}

.burger-icon span:nth-child(1) {
	top: 0px;
}

.burger-icon span:nth-child(2),
#burger-icon span:nth-child(3) {
	top: 18px;
}

.burger-icon.open span:nth-child(1) {
	transform: rotate(-45deg);
}

.burger-icon.open span:nth-child(2) {
	top: 0;
	transform: rotate(45deg);
}

.burger-icon.open span:nth-child(3) {
	transform: rotate(-45deg);
}

.burger-icon.open span:nth-child(4) {
	top: 18px;
	width: 0%;
	left: 50%;
}

#primary-menu li a,
.burger-icon {
	background-color: inherit;
	color: black;
	/* mix-blend-mode: difference!important; */
}

#primary-menu li:nth-child(1) {
	grid-column-start: 1;
}
#primary-menu li:nth-child(1) > a {
	display: flex;
	align-items: center;
}
#primary-menu li:nth-child(1) > a > img {
	max-height: 40px;
	max-width: 40px;
}
#primary-menu li:nth-child(2) {
	grid-column-start: 8;
}
#primary-menu li:nth-child(3) {
	grid-column-start: 9;
}
#primary-menu li:nth-child(4) {
	grid-column-start: 10;
}
#primary-menu li:nth-child(5) {
	grid-column-start: 11;
}
#primary-menu li:nth-child(6) {
	grid-column-start: 12;
}

.menu-item a {
	text-decoration: none;
}

.scrolled-nav {
	opacity: 0;
	z-index: 101;
	background-color: transparent;
}
.scrolled-bg-animation {
	/* background-color: white;
  transition: background-color 1s; */
}

.scrolled {
	top: 20;
	position: fixed;
	display: flex;
	justify-content: flex-end; /* display: grid;
  grid-template-columns: repeat(12, auto);
  column-gap: 20px; */
	width: 100vw;
	padding: 0;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 1s ease-in-out, transform 1s ease-in-out;
	/* z-index: 101!important; */
}
.scrolled > .burger-icon {
	color: black !important;
}

@media screen and (min-width: 600px) {
	.scrolled > .burger-icon {
		position: absolute;
	}
}

.frontpage-side-blob, .frontpage-title-blob {
	position: relative;
}
.frontpage-side-blob::after, .frontpage-title-blob::after {
	background-image: url(assets/blobs/frontpage-side-blob.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	content: "";
	display: block;
	width: 120%;
	height: 150%;
	position: absolute;
	z-index: -1;
	left: -15%;
	top: -30%;
}
.frontpage-title-blob::after {
	background-image: url(assets/blobs/frontpage-title-blob.svg);
	width: 110%;
	height: 140%;
	left: -8%;
	top: -18%;
}

.wp-block-heading {
	z-index: 9;
}

.wir-white-blob1 .wp-block-group__inner-container,
.wir-white-blob2 .wp-block-group__inner-container {
    position: relative;
}
.wir-white-blob1 .wp-block-group__inner-container::after {
	background: url(assets/blobs/WirGemeinsam_Vector.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	content: "";
	display: block;
	width: 120%;
	height: 150%;
	position: absolute;
	z-index: -1;
	left: -15%;
	top: -20%;
}
.wir-white-blob2 .wp-block-group__inner-container::after {
	background: url(assets/blobs/WirGemeinsam_Vector-1.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	content: "";
	display: block;
	width: 120%;
	height: 140%;
	position: absolute;
	z-index: -1;
	left: -15%;
	top: -20%;
}
@media screen and (max-width: 600px) {
    .wir-white-blob1 .wp-block-group__inner-container::after { display: none; }
    .wir-white-blob2 .wp-block-group__inner-container::after { display: none; }
}

.overlay {
	visibility: hidden;
	width: 0;
	height: 0;
	border-radius: 400px 0 400px 1000px;
	z-index: 90 !important;
}

.active-overlay {
	visibility: visible;
	justify-self: flex-end;
	/* position: fixed; */
	display: grid;
	grid-template-columns: repeat(12, auto);
	column-gap: 20px;
	grid-column: span 12;
	height: 90vh;
	width: 100%;
	height: 100vh;
	background-color: white;
	transition: width 1s, height 1s, border-radius 2s;
	border-radius: 0;
	/* padding: 50px 0; */
	/*margin-top: -30px;*/
	overflow-y: auto;
}

.active-overlay > .mi-container {
	padding: 0 30px;
	font-size: 72px !important;
	color: black;
	display: grid;
	grid-template-columns: repeat(12, auto);
	column-gap: 20px;
	grid-column: span 12;
	z-index: 90 !important;
}

.active-overlay-nav {
	grid-column: span 12;
	display: flex;
	align-items: center;
	justify-content: end;
	z-index: 90 !important;
}

#overlay-close-btn {
	padding-right: 50px;
	z-index: 90 !important;
}

.active-overlay > div > a {
	text-decoration: none;
	color: black;
	grid-column: 1 / 12;
}

.active-overlay > div > .menu-subitem {
	grid-column: 2 / 12;
}

.menu-subitem {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 1s ease-in-out;
	-moz-transition: max-height 1s ease-in-out;
	-ms-transition: max-height 1s ease-in-out;
	-o-transition: max-height 1s ease-in-out;
	transition: max-height 1s ease-in-out;
	visibility: hidden;
}

.mi-container:hover > .menu-subitem {
	max-height: 200px;
	visibility: visible;
}

.thanks-to-container,
.thanks-to-container > div {
	width: 100vw !important;
	display: flex;
	justify-content: end;
}

.thanks-to {
	width: 30% !important;
	text-align: center;
	padding-right: 5em;
	padding: 150px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 697 458' width='697' height='458'%3E%3Cg filter='url(%23filter0_f_2288_188)'%3E%3Cpath d='M355.5 406C187.877 406 52.0723 378.797 52 229C51.9368 97.4193 187.886 52 355.5 52C523.114 52 659 88.3149 659 229C659 381.989 523.114 406 355.5 406Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_2288_188' x='0.229168' y='0.229168' width='710.542' height='457.542' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='25.8854' result='effect1_foregroundBlur_2288_188'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

/* Project */
.project-case > div > .wp-block-columns > div > .wp-block-heading,
.sticky-container > div > div > .wp-block-heading {
	height: fit-content;
	min-height: 12rem;
	padding-bottom: 216px;
}

.sticky-container > div > div {
	display: grid;
}
.sticky-container > div > div > * {
	grid-column: span 7;
}

.sticky-container > * {
	top: 10%;
	position: -webkit-sticky;
	position: sticky;
}

.sticky-container .wp-block-group__inner-container {
	padding: 0;
}
/* Footer */
footer > img {
	border-top: 1px solid black;
	margin: 0px 50px;
	padding: 57px 0px;
}
.footer-container {
	list-style: none;
	padding: 30px 50px;
	display: grid;
	grid-template-columns: repeat(12, auto); /* TODO: adjust width */
	column-gap: 20px; /* TODO: adjust width*/
}

.footer-col {
	grid-column: span 1;
	display: flex;
	flex-direction: column;
}
.footer-col a {
	text-decoration: none;
	color: var(--darkgrey);
}

.footer-col a:hover {
	color: black;
}

.footer-col-title {
	line-height: normal;
	padding-bottom: 25px;
}

.scroll-top-text {
	grid-column: 12;
	align-self: flex-end;
	justify-self: end;
	text-decoration: none;
	color: black;
}

.about-sublist > div {
	display: flex;
	justify-content: space-around;
	padding: 0 10px;
}

.about-sublist > div > p {
	background-color: white;
	height: 70px;
	border-radius: 50%;
	text-align: center;
	line-height: 35px;
	box-shadow: 0px -0px 10px 10px white;
}

.img-text-cols-img {
	display: flex;
	justify-content: center;
	align-items: center;
}
.img-text-cols-img > figure {
	margin-bottom: 0;
}

.contact-intro-container > div {
	display: grid;
	padding: 0 50px;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 20px;
	margin: 0 !important;
	padding: 0;
}

.sticky {
	position: sticky;
	top: 0;
}
.z-index-10 {
	z-index: 10;
}
/* Text */
hr {
	border: 0.75px solid black !important;
}
.white-text {
	color: white !important;
}

.text-u {
	text-underline-offset: 5px;
}

h1 {
	font-size: 72px !important;
}

h2 {
	font-size: 48px !important;
}

h3 {
	font-size: 36px !important;
}

.body-text-20 {
	font-size: 20px;
}

.body-text-28 {
	font-size: 28px;
}

.body-text-16 {
	font-size: 16px;
}

.body-text-24 {
	font-size: 24px;
}

.footer-text {
	font-size: 14px;
	line-height: 29.6px;
	margin: auto;
	max-width: 1400px;
}

.text-center {
	align-self: center;
}

.hero-link {
	padding-bottom: 2px;
	width: fit-content;
	height: fit-content;
	border-bottom: 1px solid black;
}

.hero-link > a {
	text-decoration: none;
	color: black;
}

.link-no-deco > a {
	text-decoration: none;
	color: black;
}

.logo-text-container {
	border-top: 0.75px solid black;
}
.ye-logo-white {
	-webkit-filter: grayscale(1) invert(1);
	filter: grayscale(1) invert(1);
}

.footer-logo-wrapper {
	max-width: 1400px;
	margin: auto;
}

.logo-text {
	padding: 55px 0;
	margin: 0;
	width: auto;
	max-height: 200px;
}
@media screen and (max-width: 1400px) {
	.logo-text {
		margin-left: 2rem;
	}
}

.arrow-icon-right::after {
	content: ' \2192';
}

.arrow-icon-down::after {
	content: ' \2193';
}

.arrow-icon-right > a,
.arrow-icon-right > a:visited,
.arrow-icon-down > a,
.arrow-icon-down > a:visited {
	color: black;
}

a {
	color: black;
}

/* Contact banner*/
.contact-banner {
	border-top: 0.75px solid black;
	border-bottom: 0.75px solid black;
	padding: 50px 0;
}

.banner-white-border {
	border: none !important;
	border-top: 0.75px solid white !important;
	color: white;
}

.contact-banner > div {
	height: 100%;
	align-items: center;
	display: grid;
	padding: 0 50px;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 20px;
	margin: 0 !important;
}

.contact-banner > div > :nth-child(2) > a {
	white-space: nowrap;
	color: black;
	text-decoration: none;
}

/* Banner marquee trials */

/* The animation */
@keyframes scroll {
	from {
		transform: translateX(10);
	}
	to {
		transform: translateX(calc(-15% - 1rem));
	}
}

.banner {
	width: 100vw;
	overflow: hidden;
	position: relative;
}

.banner-container {
	margin: 0 auto;
	white-space: nowrap;
	overflow: hidden;
	position: absolute;
}

.banner-container p {
	display: inline-block;
	padding-left: 100%;
	animation: marquee 50s linear infinite both;
	text-transform: uppercase;
	animation-delay: -25s;
}

.banner-container-duplicate p {
	animation-delay: 0s;
}

@keyframes marquee {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(-100%, 0);
	}
}

.banner {
	border-top: 0.75px solid black;
	border-bottom: 0.75px solid black;
	height: 2rem;
	padding: 50px 0;
}

/* Akkordeon */
summary {
	list-style: none;
	display: flex;
	font-weight: bold;
	border-top: 1px solid black;
}

summary::after {
	content: ' ';
	width: 20px;
	height: 20px;
	background: url(/wp-content/themes/ye-website/assets/plus_icon.svg) no-repeat;
	background-size: cover;
	margin-left: auto;
	transition: 0.5s;
}

details[open] > summary::after {
	transform: rotate(45deg);
}

summary::-webkit-details-marker {
	display: none;
}

details[open] summary ~ * {
	animation: open-accordion 0.5s ease-out;
}

details.closeAccordion summary ~ * {
	animation: close-accordion 0.5s ease-out;
	animation-fill-mode: both;
}

details > .wp-block-columns > .wp-block-column > .wp-block-image {
	margin-left: 15%;
}

@keyframes open-accordion {
	0% {
		max-height: 0;
	}
	100% {
		max-height: 500px;
	}
}

@keyframes close-accordion {
	0% {
		max-height: 500px;
	}
	100% {
		max-height: 0;
	}
}

details > div div {
	display: flex;
	align-items: center;
}

details[open] {
	padding-bottom: 36px;
}

.divider {
	grid-column: 1 / 7;
	border-bottom: 1px solid black;
}

.rounded-img-container > div {
}

.rounded-img-container > div > figure > img {
	height: 520px !important;
}

.rounded-img > img {
	border-radius: 70px;
}

/* Buttons */
.wp-block-button__link {
	background: none;
	color: black;
	border-bottom: 1px solid black;
	border-radius: 0;
	width: fit-content;
	padding: 0;
	font-weight: bold;
	font-size: 16px;
}

.white-button > a {
	background: none;
	color: white;
	border-bottom: 1px solid white;
	border-radius: 0;
	width: fit-content;
	padding: 0;
	font-weight: bold;
	font-size: 16px;
}

svg {
	width: 100%;
	height: 100%;
}

.round-white-background {
	position: absolute;
	/* background-image: url( './assets/YE-Websie\ Assets_Cartoony.eai-08.svg' );
  background-size:cover;
  background-position: center; */
	width: 100%;
	height: 100%;
	z-index: 100;
	position: relative;
	z-index: 100 !important;
}

.obj-cover > img {
	object-fit: cover;
}

.round-white-background::after {
	top: 0;
	content: '';
	position: absolute;
	/* width: 200%;
  height: 100%; */
	/* background-color: white;
  border: none;
  z-index: -1; */
}

.work-w-us-container > .wp-block-group__inner-container {
	min-height: 70vh !important;
}

.work-w-us-container > .wp-block-group__inner-container > div {
	display: flex;
	flex-direction: column;
	justify-content: center !important;
}
.together-culture-img > img {
	height: 70vh !important;
	object-fit: cover;
}

/* Images */
.hover-imgs-yp figure,
.hover-imgs-team figure {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: sticky;
	top: 0;
}
.hover-imgs-yp figure,
.hover-imgs-yp figure img {
	height: 100% !important;
	width: 100% !important;
	object-fit: cover;
	border-radius: 50px;
	left: 0;
}

.hover-imgs-team figure,
.hover-imgs-team figure img {
	height: 70vh !important;
	width: 95% !important;
	object-fit: cover;
	border-radius: 50px;
	left: 0 !important;
}

.hover-imgs-team figure,
.hover-imgs-yp figure {
	margin-left: -50px;
}
.display-none {
	display: none !important;
}

.fade-in {
	animation: fadeIn 2s;
	z-index: 100;
}

.fade-out {
	animation: fadeOut 2s;
	animation-delay: 1s;
	z-index: 99;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.hvr-img-text-container-team > .wp-block-columns:hover {
	background-color: white;
	box-shadow: 0px -2px 50px 20px white, 50px 0px 50px 2px white,
		0px 2px 50px 21px white, -50px 0px 50px -2px white;
	border-top: 1px solid black;
}
/* .team-hidden-text{
  display: none;
}
 .display-block{
  display: block;
 } */

.team-hidden-text {
	overflow: hidden;
}
.team-hidden-text > p {
	overflow: hidden;
	visibility: hidden;
	height: 80px;
	max-height: 0;
	-webkit-transition: max-height 2s linear;
	-moz-transition: max-height 2s linear;
	-ms-transition: max-height 2s linear;
	-o-transition: max-height 2s linear;
	transition: max-height 2s linear;
}

.team-hidden-text-container:hover > .team-hidden-text > p,
.text-text-visible > p {
	visibility: visible;
	height: fit-content;
	max-height: 800px;
}

.crumb-container > div {
	display: flex;
	align-items: center;
}

.crumb-container > div > p:first-child {
	background-color: black;
	border-radius: 100px;
	color: white;
	padding: 10px !important;
}

.crumb-container > div p {
	margin-right: 10px !important;
}

.slide-gallery-container {
	z-index: 2;
}
.slide-gallery > figure > img {
	width: fit-content !important;
	border-radius: 50px;
	aspect-ratio: 1;
	object-fit: cover;
}
.slide-gallery > * {
	margin: 0px 3.5px !important;
	flex-shrink: 0;
	width: auto !important;
	height: 100vh;
}

.slide-gallery {
	overflow-x: scroll;
	display: flex !important;
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	white-space: nowrap;
}
.slide-gallery {
	min-height: auto !important;
}

.project-case .slide-gallery-container {
	margin: 0 -50px !important;
}
@media screen and (max-width: 600px) {
	.slide-gallery > * {
		height: 50vh;
	}
	.slide-gallery, .project-case .slide-gallery-container  {
		margin: 0 -20px !important;
	}
}

.hornbach-gallery {
	/*-webkit-box-shadow: 0px 20px 35px -5px rgba(0, 0, 0, 0.45);
	-moz-box-shadow: 0px 20px 35px -5px rgba(0, 0, 0, 0.45);
	box-shadow: 0px 20px 35px -5px rgba(0, 0, 0, 0.45);*/
}

.hornbach-gallery > div > figure {
	padding-bottom: 30px;
}

:where(.is-layout-flex) {
	gap: 0 !important;
}

/* Animations */
.wrap-2 {
	position: absolute;
	overflow-x: hidden !important;
	overflow-y: hidden !important;
	z-index: -30;
	top: 0;
	left: 0;
	right: 0;
	height: 103vh;
	width: 100vw;
	background: white;
}

#section2_lottie {
	position: absolute;
	width: calc(100% - 50px) !important;
	height: 90% !important;
	z-index: 1;
	margin-left: -50px !important;
}

#section3_lottie {
	position: absolute;
	width: calc(100% - 50px) !important;
	height: 90% !important;
	z-index: 1;
	left: -250px;
	padding-top: 150px;
}

#pink_blur_lottie {
	position: absolute;
	z-index: 1;
	width: calc(100vw - 100px) !important;
	height: 100% !important;
	filter: blur(10px) !important;
	padding-top: 80px;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.wrap-2::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.wrap-2 {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}
canvas {
	width: 100% !important;
	height: 100% !important;
}

/* Cursor */
.cursor-circle,
.cursor {
	position: fixed;
	background: transparent;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	display: none;
	z-index: 10000 !important;
}

.cursor-circle {
	height: 100px;
	width: 100px;
	mix-blend-mode: difference;
	transform: translate(-50%, -50%);
	z-index: 11;
}

.mi-container a {
	display: block;
	/*
	cursor: default;

      height: 177px;
      left: 0;
      position: absolute;
      top: 0;
      text-indent: -999px;
      transition: all 0.2s ease-in-out; */
}

.cursor-circle.c-hover {
	transform: translate(-50%, -50%) scale(2.5);
	animation: liquid-cursor 2.5s linear infinite;
}

.liquid-circle {
	display: block;
	animation: liquid_scale 5s linear infinite;
}

path {
	fill: white;
}

.circle {
	display: block;
	position: relative;
	border-radius: 50%;
	animation: blob 10s linear infinite;
}

@keyframes liquid_scale {
	0% {
		transform: scale(1) rotate(0deg);
	}
	20% {
		transform: scale(0.9, 1) rotate(72deg);
	}
	40% {
		transform: scale(0.8, 1) rotate(144deg);
	}
	60% {
		transform: scale(0.92, 0.9) rotate(216deg);
	}
	80% {
		transform: scale(1.05, 0.86) rotate(288deg);
	}
	100% {
		transform: scale(1) rotate(360deg);
	}
}

@keyframes blob {
	0%,
	100% {
		border-radius: 43% 77% 80% 40% / 40% 40% 80% 80%;
	}
	20% {
		border-radius: 47% 73% 61% 59% / 47% 75% 45% 73%;
	}
	40% {
		border-radius: 46% 74% 74% 46% / 74% 58% 62% 46%;
	}
	60% {
		border-radius: 47% 73% 61% 59% / 40% 40% 80% 80%;
	}
	80% {
		border-radius: 50% 70% 52% 68% / 51% 61% 59% 69%;
	}
}

/* Temporary Landing Page */

/* hide nav & footer on temp landingpage*/
/* .home > div > header,
.home > footer{
 display: none;
} */

/* SVGs */
.blueCartoon {
	/* background-image: url("http://localhost:8888/wp-content/uploads/2024/04/YE-yp-cartoony-01.svg");
  width: 100%;
  background-repeat: no-repeat; */
}
/*
.yp-blob-1 > img{
  position: relative;
  margin-top: -500px;
  margin-left: 100px;
  width: 45%;
  z-index: -1;
} */

#b-blue-cartoon {
	position: relative;
	margin-top: -500px;
	margin-left: 100px;
	width: 45%;
	z-index: -1;
}

.yellow-light {
	position: absolute;
	width: 50%;
	height: 50%;
	padding-left: 10%;
	z-index: -1;
	max-width: 600px !important;
}
#b-white-cartoon {
	position: absolute;
	width: 50%;
	height: 47%;
	right: 0;
	top: -6vh;
}

#b-heart-cartoon {
	pointer-events: none;
	position: absolute;
	width: 30%;
	height: 50%;
	right: 200px;
	bottom: -65vh;
	transform: rotate(10deg);
}

#b-project-2 {
	/* TODO: fix */
	display: none;
	/* position: absolute; */
	/*margin-left: 900px; */
}

#lamy {
	background-image: url('https://young-empowerment.de/wp-content/uploads/2024/05/yellow_light.svg');
	/* background-position: bottom center, 50%, 50%; */
	background-size: 40%;
	background-repeat: no-repeat;
	background-position-x: 150px;
	background-position-y: 100px;
}

.b-us-container {
	background: url('data:image/svg+xml,<svg id="b-us-1" width="441" height="345" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(%23a)"><path d="M220.255 293.104c-92.927 0-168.215-18.527-168.255-120.552C51.965 82.934 127.333 52 220.255 52S388.51 76.734 388.51 172.552c0 104.198-75.333 120.552-168.255 120.552z" fill="%23fff" /></g><defs><filter id="a" x=".229" y=".229" width="440.051" height="344.646" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix" /><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" /><feGaussianBlur stdDeviation="25.885" result="effect1_foregroundBlur_942_745" /></filter></defs></svg>')
			right 400px top no-repeat,
		url('data:image/svg+xml,<svg id="b-us-2" width="698" height="641" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(%23a)"><path d="M646 376.589C646 560.181 513.03 589 348.996 589 184.962 589 52 556.351 52 376.589c0-133.002 81.905-188.067 196.446-205.602-42.509-7.796-70.188-24.026-70.188-56.213C178.258 64.685 253.674 52 346.697 52c93.024 0 168.44 12.876 168.44 62.774 0 32.14-26.458 48.233-67.355 56.013C563.249 188.171 646 243.404 646 376.589z" fill="%23fff" /></g><defs><filter id="a" x=".229" y=".229" width="697.542" height="640.542" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix" /><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" /><feGaussianBlur stdDeviation="25.885" result="effect1_foregroundBlur_942_694" /></filter></defs></svg>')
			left top 80px no-repeat;
}

/* #b-us-1{
  position: static;
} */

.blur-lavender {
	position: absolute !important;
	background-image: url('data:image/svg+xml, <svg id="b-us-1" width="441" height="345" fill="none" xmlns="http://www.w3.org/2000/svg"><style> .stbu { fill: %23E6D7FD } </style><g filter="url(%23a)"><path class="stbu" d="M220.255 293.104c-92.927 0-168.215-18.527-168.255-120.552C51.965 82.934 127.333 52 220.255 52S388.51 76.734 388.51 172.552c0 104.198-75.333 120.552-168.255 120.552z" fill="%23fff" /></g><defs><filter id="a" x=".229" y=".229" width="440.051" height="344.646" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix" /><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" /><feGaussianBlur stdDeviation="25.885" result="effect1_foregroundBlur_942_745" /></filter></defs></svg>');
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
	height: 300%;
	width: 400%;
	top: -200px;
	left: -150px;
	z-index: -1;
}
.blur-lavender-last {
	position: absolute !important;
	background-image: url('data:image/svg+xml, <svg id="b-us-1" width="441" height="345" fill="none" xmlns="http://www.w3.org/2000/svg"><style> .stbu { fill: %23E6D7FD } </style><g filter="url(%23a)"><path class="stbu" d="M220.255 293.104c-92.927 0-168.215-18.527-168.255-120.552C51.965 82.934 127.333 52 220.255 52S388.51 76.734 388.51 172.552c0 104.198-75.333 120.552-168.255 120.552z" fill="%23fff" /></g><defs><filter id="a" x=".229" y=".229" width="440.051" height="344.646" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix" /><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" /><feGaussianBlur stdDeviation="25.885" result="effect1_foregroundBlur_942_745" /></filter></defs></svg>');
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
	height: 380%;
	width: 600%;
	top: -250px;
	left: -200px;
	z-index: -1;
}

.ut-double-blob {
	position: absolute !important;
	background-image: url('data:image/svg+xml,<svg width="472" height="508" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M292 0c99.411 0 179.953 26.433 180 172 .042 127.863-80.589 172-180 172s-180-35.285-180-172C112 23.332 192.589 0 292 0zM123.5 379c68.207 0 123.468 9.912 123.5 64.5.029 47.948-55.293 64.5-123.5 64.5S0 494.768 0 443.5C0 387.75 55.293 379 123.5 379z" fill="%23FF4E36"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	height: 70vh;
	width: 70vw;
	top: -15%;
	left: 5%;
}

.z-index-2 {
	z-index: 2;
}
.z-index-3 {
	z-index: 3;
}

.ut-double-blob-long {
	position: absolute !important;
	background-image: url('data:image/svg+xml,<svg width="561" height="539" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 269.504C0 418.344 33.378 539 162.703 539c140.634 0 162.703-120.656 162.703-269.496 0-16.025-.292-31.716-.978-46.969 24.958 14.451 60.411 15.593 99.741 15.593 75.569 0 136.831-5.286 136.831-98.945 0-93.658-61.262-98.944-136.831-98.944-56.563 0-105.107 3.562-125.942 44.186C275.197 32.442 234.103 0 162.703 0 32.893 0 0 120.663 0 269.504z" fill="%23FF4E36"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	height: min(60vh, 400px);
	width: 60vw;
	bottom: -10vh;
	left: -10vw;
	z-index: -1;
}

.gallery-arrow {
    background-image: url(assets/blobs/arrow.svg);
	background-size: contain;
}

.big-blob-container:first-child {
	z-index: 2;
}
#contact-blob2 {
	position: relative;
	top: -25vh;
	left: -30px;
	z-index: -1;
}
.contact-blob1 {
	position: absolute !important;
	background-image: url('data:image/svg+xml, <svg id="contact-blob1" width="178" height="170" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M89 0c49.153 0 88.977 13.063 89 85 .021 63.188-39.847 85-89 85S0 152.563 0 85C0 11.53 39.847 0 89 0z" fill="%23fff" /></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	right: 10vw;
	top: 5vh;
	z-index: 1;
	height: 25vh;
	width: 25vh;
}

.menu-text-hover {
	margin-left: 5rem;
}
.navbar {
	z-index: 102;
}

/* Responsive */
/* Mobile Styles */
@media only screen and (max-width: 600px) {
	/* *{
    max-width: 100vw;
  } */
	#section2_lottie {
		display: none;
	}

	#section3_lottie {
		position: absolute;
		width: calc(100% - 50px) !important;
		height: 90% !important;
		z-index: 1;
		left: 0;
		padding-top: 0;
	}
	.yellow-light {
		position: absolute;
		width: 90%;
		height: 50%;
		padding-left: 0;
		padding-top: 30%;
		z-index: -1;
	}
	.wp-block-group .wp-block-group__inner-container {
		padding: 0 20px;
	}

	h1 {
		font-size: 30px !important;
		padding: 0 !important;
	}

	h2 {
		font-size: 30px !important;
		padding: 0 !important;
	}

	h3 {
		font-size: 20px !important;
		padding: 0 !important;
	}
	.menu-ye-menu-container {
		height: fit-content;
	}
	#primary-menu {
		display: none;
	}
	.scrolled-nav {
		opacity: 1;
		z-index: 101;
		position: fixed;
		right: 0;
		background-color: transparent;
		align-items: flex-end;
	}
	.scrolledPhone {
		display: flex;
		justify-content: flex-end;
		width: 100vw;
		opacity: 1;
		right: 0;
	}
	.burger-menu,
	.burger-icon {
		display: block !important;
		margin-top: 50px !important;
		margin-left: auto !important;
		z-index: 100;
	}

	.active-overlay {
		width: 100vw;
		height: 80vh;
		height: 100dvh;
		bottom: 0;
	}

	.slide-gallery-container {
	}

	.hover-imgs-yp > figure {
		left: 10vw;
	}

	.contact-banner > div {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.contact-banner > div > p {
		padding-top: 20px;
	}

	/* Footer */
	.footer-container {
		display: none;
	}
	.logo-text-container {
		margin: 0;
		width: 100vw;
	}
	.logo-text {
		padding: 30px 5vw;
		min-height: 10vh;
		width: 90vw;
		object-fit: contain;
	}

	/* Young Empowerment */
	.m-yp-purpose > div > h1 {
		margin-bottom: 30px;
	}
	.m-yp-purpose > div > * {
		grid-column: span 12;
	}

	.m-yp-purpose-height {
		min-height: 20vh !important;
		padding: 40px 0;
	}
	.yp-blob-1 > div > * {
		grid-column: span 12;
	}

	.yp-blob-1 > div > div > div {
		padding: 0 !important;
		text-align: end;
		justify-items: end;
	}

	.yp-blob-1 > div > div > div > p {
		margin-left: auto !important;
	}

	.yp-blob-1 > div > div > div > h1 {
		margin-bottom: 20px;
	}

	.yp-blob-2 > div > p {
		font-size: 30px !important;
		grid-column: span 12;
		margin-top: 40px;
	}

	.yp-blob-2 > div > ul {
		grid-column: span 12;
	}

	.m-4ed1-team-img {
		margin: 0;
	}

	.m-4ed1-team-img > div {
		padding: 0 !important;
	}

	.m-4ed1-team-img > div > figure > img {
		height: 40vh !important;
		border-radius: 40px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.m-4ed1-text-container > div > * {
		grid-column: span 12;
	}

	.m-4ed1-text-container > div > p:last-of-type {
		text-align: end;
		margin-bottom: 1em;
	}

	/* Projekt */

	/* .wp-block-columns-is-layout-flex.is-layout-flex {
		flex-direction: column;
	} */
	/* über uns */
	.about-sublist > div {
		display: flex;
		flex-direction: column;
	}
	.about-sublist > div > p {
		margin: 20px 0;
	}

	.m-au-3 > div > div > div {
		padding: 0 !important;
	}

	.m-au-3 > div > h1 {
		padding-bottom: 20px !important;
	}

	.m-au-3 > div > div {
		grid-column: 1 / 13;
	}

	.blur-lavender,
	.blur-lavender-last {
		display: none;
	}

	.sticky {
		position: static;
	}

	.thanks-to {
		font-size: 12px !important;
		align-content: space-evenly;
		padding: 10% !important;
		width: 100% !important;
	}

	/* Wir gemeinsam */
	.m-wwu > div {
		display: flex !important;
		flex-direction: column;
	}

	.m-wwu > div > div {
		margin: 20px 0;
	}

	.m-wwu > div > div p {
		padding-bottom: 10px;
	}

	#kultur {
		margin-top: 20px;
	}

	.ut-d-blob-container > div > div > div {
		z-index: 2;
	}

	.ut-d-blob-container2 {
		padding-top: 50px;
	}

	.ut-double-blob-long {
		z-index: -1 !important;
	}
	summary {
		font-size: 16px;
	}

	/* Kontakt */
	.contact-hero {
		padding-bottom: 40px;
	}
	.contact-hero > div > h1 {
		grid-column: 1 / 13;
	}

	.contact-info > div > div > div > h1,
	.contact-info > div > div > div > h2 {
		grid-column: 1 / 13 !important;
		padding-bottom: 30px !important;
	}

	.small-blob-container > div {
		padding: 0 !important;
	}

	.contact-info > div > div > div > h2 {
		text-align: end;
	}
	.contact-info > div > div > div > h2 > a {
		font-size: 20px;
		text-decoration: none;
	}

	.contact-info > div > div,
	.contact-info > div > p {
		grid-column: 1 /13;
		padding: 0;
	}
	.contact-info > div > p:nth-last-of-type(2),
	.contact-info > div > p:nth-last-of-type(1) {
		text-align: end !important;
		padding-bottom: 10px;
	}
	.big-blob-container > div {
		padding: 30px 0 !important;
	}

	#contact-blob2 {
		display: none;
	}
	/* Menu */
	.burger-icon {
		margin: 0 20px 0 0;
		z-index: 100;
	}
	.burger-icon.open {
		margin: 0 10px 0 0;
	}
	.burger-icon.open span {
		background-color: black !important;
		width: 30px;
	}
	.cursor-circle,
	.liquid-circle {
		display: none;
	}
	.mi-container a {
		font-size: 30px;
		margin: auto 0;
	}
	.menu-subitem {
		display: block;
		max-height: fit-content;
		visibility: visible;
	}

	/* Helpers */
	.span-11, .mobile-span-11 {
		/* expand further on mobile */
		grid-column: 1 / 13;
	}
	

	/* blobs */
	#b-heart-cartoon {
		bottom: -55vh;
		right: 60px;
		transform: rotate(8deg);
	}

	.m-b-96 {
		margin-bottom: 32px;
	}
}

/* Tablet Styles */
/* @media only screen and (min-width: 401px) and (max-width: 960px) {
  body {
    background-color: #F5CF8E;
  }
} */

