@c1: #31FF91;
@c2: #F583C7;
@c3: #3FFFFF;
@c4: #DFFF00;
@c5: #FF6600;
@c6: #B285FF;
@c7: #FF8FE5;

@ease: cubic-bezier(0, 0, 0.25, 1);

@ma: ~"screen and (max-width: 900px)";
@mb: ~"screen and (min-width: 901px)";
@hd: ~"screen and (min-width: 1600px) and (min-height: 800px)";


.chapman() {
	font-family: chapman,sans-serif;
	font-weight: 400;
	font-style: italic;
}
.regular() {
	font-family: 'galano', sans-serif;
}
.medium() {
	font-family: 'galano-medium', sans-serif;
}
.ellipsis() {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

html, body {
	// height: 100%;
	width: 100vw;
	overflow-x: hidden;
}

body {
	.medium;
	color: #000;
	position: relative;
	font-size: 12px;
	line-height: 1.33em;
	background-color: #31FF91;
	transition: background 0.8s ease;
}

.clear() {
	display: block;
	clear: both;
	content: '';
}


.transition-fade,
.animate-but-notsamepage,
.animate-but-notsamesubpage {
	transition: all 0.4s @ease;
	opacity: 1;
}
html.is-animating .transition-fade,
html.is-animating:not(.same-page) .animate-but-notsamepage,
html.is-animating:not(.same-subpage) .animate-but-notsamesubpage {
	opacity: 0;
	transform: translateX(-30px);
}

#page {
	min-height: 100%;
	#swup .content {
		min-height: 100vh;
		min-height: ~"calc(var(--vh, 1vh) * 100)";
	}
	main {
		min-height: 100vh;
		min-height: ~"calc(var(--vh, 1vh) * 100)";
		position: relative;
		z-index: 2;
	}
}
// body.home #page main {
// 	overflow: hidden;
// }

h1, .h1 {
    line-height: 1.1em;
	@media @ma {
		font-size: 36px;
		padding: 100px 0 40px;
	}
	@media @mb {
		font-size: 87px;
		padding-top: 12vh;
		padding-top: ~"calc(var(--vh, 1vh) * 12)";
		padding-bottom: 8vh;
		padding-bottom: ~"calc(var(--vh, 1vh) * 8)";
	}
	@media @hd {
		font-size: 105px;
	}
	color: #fff;
	.chapman;
	text-align: center;
	position: relative;
	z-index: 5;
}

.button {
	display: inline-block;
	border: 1px solid #000;
	padding: 0 12px 1px;
	border-radius: 14px;
	transition: all 0.3s ease;
	cursor: pointer;
    font-size: 14px;
    line-height: 22px;
	.medium;
	&:hover {
		background-color: #000;
		color: #fff;
	}
}


#logo {
	position: fixed;
	left: 51px;
	top: 39px;
	@media @ma {
		left: 31px;
		top: 29px;
	}
	display: block;
	height: 39px;
	z-index: 99;
}

#header {
	position: absolute;
	left: 100px;
	top: 50px;
	z-index: 5;
	transition: opacity 0.3s ease;
	pointer-events: none;
	@media @ma {
		left: 80px;
		top: 40px;
	}
}
@media @ma {
	body:not(.home) {
		#header {
			opacity: 0;
		}
	}
}

#menu {
	position: fixed;
	background-color: #fff;
	left: 100vw;
	width: 880px;
	@media @ma {
		width: 100vw;
	}
	transform: translateX(3%);
	top: 0;
	height: 100%;
	z-index: 90;
	transition: transform 0.4s @ease;
	box-shadow: 0 0 12px 0 rgba(0,0,0,.18);
	overflow-y: auto;
	@media @ma {
		padding: 100px 35px 50px;
	}
	.offer {
		@media @mb {
			padding: 70px 60px;
			.group {
				position: relative;
				&:after {
					content: '';
					display: block;
					width: 50px;
					height: 50px;
					position: absolute;
					z-index: -1;
					transform: scale(0);
					transition: transform 0.5s ease;
				}
				&:nth-child(1):after { left: 60px; top: -10px; background: radial-gradient(circle, fade(@c3, 100%) 0%, fade(@c3, 50%) 20%, fade(@c3, 0%) 71%); }
				&:nth-child(2):after { left: 80px; top: 0px; background: radial-gradient(circle, fade(@c1, 80%) 0%, fade(@c1, 40%) 20%, fade(@c1, 0%) 71%); }
				&:nth-child(3):after { left: 30px; top: -10px; background: radial-gradient(circle, fade(@c4, 100%) 0%, fade(@c4, 50%) 20%, fade(@c4, 0%) 71%); }
				&:nth-child(4):after { left: 100px; top: -10px; background: radial-gradient(circle, fade(@c5, 60%) 0%, fade(@c5, 30%) 20%, fade(@c5, 0%) 71%); }
				&:nth-child(5):after { left: 80px; top: 10px; background: radial-gradient(circle, fade(@c2, 80%) 0%, fade(@c2, 40%) 20%, fade(@c2, 0%) 71%); }
				&:nth-child(6):after { left: 80px; top: -20px; background: radial-gradient(circle, fade(@c6, 80%) 0%, fade(@c6, 40%) 20%, fade(@c6, 0%) 71%); }
				&:hover:after {
					transform: scale(1);
				}
			}
		}
		@media @ma {
			.group {
				margin-bottom: 13px;
			}
			h3 {
				cursor: pointer;
			}
			.list {
				margin-bottom: 20px;
				display: none;
			}
		}
		.links {
			@media @mb {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-gap: 40px;
				width: 95%;
			}
			h3 {
				font-size: 200%;
				line-height: 1.2em;
				margin-bottom: 10px;
			}
			a {
				display: block;
				padding: 5px 0;
				&.online {
					&:after {
						display: inline-block;
						width: 24px;
						height: 15px;
						content: '';
						background: url('/assets/online-icon.png');
						background-size: cover;
						margin-left: 5px;
						vertical-align: middle;
    					margin-top: -1px;
    					opacity: 0;
    					transition: opacity 0.3s ease;
					}
					&:hover {
						&:after {
							opacity: 1;
						}
					}
				}
				&:hover {
					text-decoration: underline;
				}
			}
		}
		.onlineNote {
			margin-top: 40px;
			@media @ma {
				margin-top: 27px;
			}
			&:before {
				display: inline-block;
				width: 24px;
				height: 15px;
				content: '';
				background: url('/assets/online-icon.png');
				background-size: cover;
				margin-right: 5px;
				vertical-align: middle;
				margin-top: -1px;
			}
		}
	}
	.mainNav {
		border-top: 1px solid #000;
		@media @ma {
			margin-top: 30px;
			padding-top: 26px;
			.left {
				columns: 2;
				width: 190px;
			}
		}
		@media @mb {
			position: absolute;
			left: 60px;
			right: 60px;
			bottom: 0;
			padding: 35px 0 40px;
		}
		a {
			line-height: 30px;
			@media @ma {
				display: block;
			}
		}
		@media @mb {
			a {
				display: inline-block;
				padding: 0 10px;
				&:hover {
					text-decoration: underline;
				}
			}
			a:nth-child(1) {
				margin-left: -10px;
			}
			a + a {
				margin-left: 10px;
			}
			.left {
				float: left;
			}
			.right {
				float: right;
			}
			.clear;
		}
		.next-move {
			background: url('/assets/gregor-adamczyk.svg') no-repeat;
			background-size: 20px auto;
			padding-left: 30px;
			@media @ma {
				margin-top: 27px;
			}
			@media @mb {
				margin-right: 0;
			}
		}
	}
	@media @mb and (max-height: 770px) {
		.offer {
			padding: 40px 60px;
		}
		.offer .links a {
			padding: 4px 0;
		}
	}
}

#hamburger {
	display: block;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background-color: transparent;
	position: fixed;
	right: 45px;
	top: 44px;
	@media @ma {
		right: 35px;
		top: 34px;		
	}
	z-index: 99;
	cursor: pointer;
	color: #fff;
	width: 36px;
	height: 26px;
	display: block;
	&:before, &:after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		display: block;
		height: 1px;
		background-color: #000;
		width: 34px;
		transition: transform 0.27s @ease;
	}
	&:before {
		transform: translateX(-50%) translateY(-4px) rotate(0deg);
	}
	&:after {
		transform: translateX(-50%) translateY(4px) rotate(0deg);
	}
	&:hover {
		&:before {
			transform: translateX(-50%) translateY(-6px) rotate(0deg);
		}
		&:after {
			transform: translateX(-50%) translateY(6px) rotate(0deg);
		}
	}
}

.back {
	display: block;
	width: 60px;
	height: 60px;
	position: fixed;
	font-size: 0;
	transition: left 0.2s ease;
	background: url('/assets/arrow-left.svg') no-repeat center;
	background-size: 20px auto;
	z-index: 999;
	@media @ma {
		left: 80px;
    	top: 19px;
	}
	@media @mb {
		left: 37px;
		top: 26vh;
		top: ~"calc(var(--vh, 1vh) * 26)";
		&:hover {
			left: 32px;
		}				
	}

}

#copyrights {
	.chapman;
	@media @ma {
		text-align: center;
		padding: 35px;
		position: relative;
		z-index: 80;
		.info {
			display: none;
		}
	}
	@media @mb {
		position: fixed;
	    left: ~"calc( 100vw - 53px )";
	    white-space: nowrap;
	    bottom: 44px;
	    transform: rotate(-90deg);
	    transform-origin: 0;
		font-size: 9px;
		letter-spacing: 0.1px;
		z-index: 80;
		p {
			display: inline-block;
			margin-right: 20px;
		}
	}
}

body.menuVisible {
	#hamburger {
		&:before {
			transform: translateX(-50%) translateY(0px) rotate(-45deg);
		}
		&:after {
			transform: translateX(-50%) translateY(0px) rotate(45deg);
		}
	}
	#menu {
		transform: translateX(-100%);
	}
}


.cookieinfo {
	background-color: #fff !important;
	left: inherit !important;
	@media @ma {
		left: 50vw !important;
		top: 50% !important;
		bottom: auto !important;
		transform: translate(-50%,-50%);
		width: 100vw;
		max-width: 80vw;
	}
	@media @mb {
		right: 103px !important;
		bottom: 50px !important;
		width: 360px;
	}
	box-shadow: 0px 3px 6px #0000000D;
	border-radius: 24px;
	font-family: 'galano', sans-serif !important;
	text-align: left !important;
	padding: 20px 30px 60px !important;
	animation: 9s ease home_cookies;
	a {
		text-decoration: underline !important;
		color: inherit !important;
		&:hover {
			color: #888 !important;
		}
	}
	.cookieinfo-close {
		float: none;
		position: absolute;
		left: 30px;
		bottom: 25px;
		background: #fff !important;
		border: 1px solid #000;
		border-radius: 12px !important;
		margin-left: 0 !important;
		padding: 2px 10px !important;
		transition: all 0.3s ease;
		&:hover {
			color: #fff !important;
			background: #000 !important;
		}
	}
}







/* PAGES */

@keyframes home_img {
	0%  { opacity: 0; }
	40% { opacity: 0; }
	50% { opacity: 1; }
	// 60% { opacity: 1; }
	// 70% { opacity: 0; }
}
@keyframes home_h1a {
	0% { opacity: 1; transform: translateY( 100% ); }
	10% { transform: translateY( 100% ); }
	20% { transform: translateY( 0% ); }
	40% { opacity: 1; }
	50% { opacity: 0; }
	// 60% { opacity: 0; }
	// 70% { opacity: 1; }
}
@keyframes home_h1b {
	0% { opacity: 1; transform: translateY( 100% ); }
	12% { transform: translateY( 100% ); }
	22% { transform: translateY( 0% ); }
	40% { opacity: 1; }
	50% { opacity: 0; }
	// 60% { opacity: 0; }
	// 70% { opacity: 1; }
}
@keyframes home_p {
	0%  { opacity: 0; transform: translateY(-50px); }
	60% { opacity: 0; transform: translateY(-50px); }
	70% { opacity: 1; transform: translateY(0px); }
}
@keyframes home_p2 {
	0%  { opacity: 0; transform: translateY(50px); }
	60% { opacity: 0; transform: translateY(50px); }
	70% { opacity: 1; transform: translateY(0px); }
}
@keyframes home_before {
	0%  { transform: translate(0, -50%); }
	10% { transform: translate(50vw, -50%); }
	20% { transform: translate(50vw, -50%); }
	30% { transform: translate(0, -50%); }
	40% { transform: translate(0, -50%); }
	50% { transform: translate(50vw, -50%); }
	60% { transform: translate(50vw, -50%); }
	70% { transform: translate(0, -50%); }
}
@keyframes home_after {
	0%  { transform: translate(-50%, -50%) scale(0); }
	10% { transform: translate(-50%, -50%) scale(3); }
	20% { transform: translate(-50%, -50%) scale(3); }
	30% { transform: translate(-50%, -50%) scale(1); }
	40% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(3); }
	60% { transform: translate(-50%, -50%) scale(3); }
	70% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes home_arrow {
	0% { opacity: 0; bottom: 30px; }
	70% { opacity: 0; bottom: 30px; }
	80% { opacity: 1; bottom: 50px; }
}
@keyframes home_cookies {
	0% { opacity: 0; pointer-events: none; }
	70% { opacity: 0; pointer-events: none; }
	80% { opacity: 1; pointer-events: auto; }
}


body.home #page {
	main {
		#intro {
			position: relative;
			min-height: 100vh;
			min-height: ~"calc(var(--vh, 1vh) * 100)";
			img, .text {
				position: absolute;
				z-index: 2;
				@media @ma {
					top: 52vh;
					top: ~"calc(var(--vh, 1vh) * 52)";
				}
			}
			img {
				left: 50%;
				transform: translate(-50%,-50%);
				animation: 9s ease home_img;
				// opacity: 0;
				@media @ma {
					width: 130px;
					top: 52%;
				}
				@media @mb {
					top: 47%;
					height: 46vh;
					height: ~"calc(var(--vh, 1vh) * 46)";
				}
			}
			.text {
				transform: translateY(-50%);
				left: 0;
				width: 100%;
				text-align: center;
				@media @ma {
					top: 54%;
				}
				@media @mb {
					top: 47%;
				}
				h1 {
					margin: 50px 0 65px;
					font-size: 123px;
					line-height: 1em;
					height: auto;
					padding: 0;
					@media @mb {
						height: 38vh;
						height: ~"calc(var(--vh, 1vh) * 38)";
						padding-top: 6vh;
						padding-top: ~"calc(var(--vh, 1vh) * 6)";
					}
					div {
						overflow: hidden;
						height: 123px;
						span {
							display: block;
							opacity: 0;
						}
						&:nth-child(1) span {
							animation: 9s ease home_h1a;
						}
						&:nth-child(2) span {
							animation: 9s ease home_h1b;
						}
					}
					@media @ma {
						font-size: 63px;
						margin: 20px 0 35px;
						padding: 0;
						div {
							max-width: 400px;
							margin: 0 auto;
						}
					}
					@media @mb and (max-width: 1200px) {
						font-size: 90px;
						div {
							height: 90px;
							span {
								margin-top: -12px;
							}
						}
					}
					@media screen and (min-width: 1201px) {
						div {
							span {
								margin-top: -20px;
							}
						}
					}
					@media @hd {
						font-size: 166px;
						div {
							height: 166px;
							span {
								margin-top: -30px;
							}
						}
					}
				}
				p {
					font-size: 18px;
					line-height: 1.35em;
					@media @ma {
						font-size: 14px;
						max-width: 230px;
						margin: 0 auto;
					}
					&:first-child { animation: 9s ease home_p; }
					&:last-child { animation: 9s ease home_p2; }
				}
			}
			&:before {
				position: absolute;
				left: 30%;
				top: 47%;
				@media @ma {
					top: 52vh;
					top: ~"calc(var(--vh, 1vh) * 52)";
				}
				transform: translateY(-50%);
				z-index: -1;
				display: block;
				content: '';
				// background-color: @c3;
				// filter: blur(50px);
				// border-radius: 50%;
				background: radial-gradient(circle, fade(@c3, 100%) 58%, fade(@c3, 0%) 71%);
				width: 210vh;
				height: 210vh;
				animation: 9s ease home_before;
			}
			&:after {
				position: absolute;
				left: 50%;
				top: 47%;
				@media @ma {
					top: 52vh;
					top: ~"calc(var(--vh, 1vh) * 52)";
				}
				transform: translate(-50%, -50%) scale(1);
				z-index: -1;
				display: block;
				content: '';
				// background-color: @c4;
				// border-radius: 50%;
				// filter: blur(50px);
				background: radial-gradient(circle, fade(@c4, 100%) 20%, fade(@c4, 0%) 71%);
				width: 40vh;
				height: 40vh;
				animation: 9s ease home_after;
			}
			.arrow {
				cursor: pointer;
				position: absolute;
				left: 50%;
				bottom: 50px;
				transform: translateX(-50%);
				z-index: 5;
				animation: 9s cubic-bezier(.6,0,.3,1.25) home_arrow;
				transition: opacity 0.4s ease;
				white-space: nowrap;
				// &:before {
				// 	content: '';
				// 	display: block;
				// 	height: 80px;
				// 	width: 80px;
				// 	background: url('/assets/arrow-bottom.svg') no-repeat center;
				// 	transition: transform 0.3s ease;
				// 	margin: 0 auto;
				// }
				span {
					display: block;
					border: 1px solid #000;
					padding: 0 12px 1px;
					border-radius: 14px;
					font-size: 14px;
					line-height: 22px;
					transition: all 0.3s ease;
				}
				&:hover {
					&:before {
						transform: translateY(5px);
					}
					span {
						background: #000;
						color: @c3;
					}
				}
			}
		}

		#blog {
			@media @ma {
				.h1 {
					padding-top: 40px;
				}
			}
			@media @mb {
				min-height: 100vh;
				min-height: ~"calc(var(--vh, 1vh) * 100)";
			}
			overflow: hidden;
			position: relative;
			z-index: 2;
			width: 100%;
			overflow: hidden;
			.scrollable {
				@media @ma {
					overflow-x: scroll;
					-webkit-overflow-scrolling: touch;
				}
			}
			h2 {
			}
			.list {
				font-size: 0;
				line-height: 1em;
				width: fit-content;
				white-space: nowrap;
				transition: transform 0.5s cubic-bezier(0, 0, 0.25, 1);
				@media @ma {
					padding: 0 35px;
				}
				@media @mb {
					height: 60vh;
					height: ~"calc(var(--vh, 1vh) * 60)";
					padding: 0 105px 0 60px;					
				}
				.item {
					display: inline-block;
					white-space: normal;
					vertical-align: top;
					position: relative;
					@media @ma {
						width: 267px;
					}
					@media @mb {
						height: 100%;
					}
					font-size: 14px;
					line-height: 1.35em;
					+ .item {
						@media @ma { margin-left: 35px; }
						@media @mb { margin-left: 60px; }
					}
				}
				.details {
					@media @ma {
						position: relative;
					}
					@media @mb {
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
					}
					&:after {
						height: 30px;
						width: 30px;
						content: '';
						display: block;
						position: absolute;
						right: 0;
						top: -3px;
						background: url('/assets/arrow-readmore.svg') no-repeat right top;
						transition: right 0.3s ease;
					}
				}
				img {
					display: block;
					height: ~"calc( 100% - 170px )";
					@media @ma {
						height: 150px;
					}
					background: #fff;
					margin-bottom: 30px;
				}
				h3 {
					font-size: 18px;
					margin-bottom: 10px;
					padding-right: 40px;
					.ellipsis;
				}
				p {
					.regular;
				}
				h3, .description {
					max-width: 360px;
				}
				.description {
					height: 38px;
					overflow: hidden;
				}
				.date {
					border-top: 1px solid #555;
					padding: 21px 0 10px;
					margin-top: 21px;
				}
			}
		}
		.more {
			text-align: center;
			padding: 50px;
		}

	}
	&.scrolled {
		.moveTo {
			opacity: 0;
		}
	}
}


body.blog {
	background-color: #f2f0ef;
	#page {
		h1 {
			color: #000;
		}
		main {
			position: relative;
			overflow: hidden;
			&:before, &:after {
				position: absolute;
				z-index: -1;
				display: block;
				content: '';
				transition: all 1.4s ease;
			}
			&:before {
				transform: translate(-50%, -50%);
				background: radial-gradient(circle, fade(@c1, 100%) 50%, fade(@c1, 0%) 71%);
				@media @ma {
				    left: 80vw;
				    top: -100px;
				    width: 400px;
				    height: 400px;
				}
				@media @mb {
					left: 85vw;
					top: -40vh;
					top: ~"calc(var(--vh, 1vh) * -40)";
					width: 150vh;
					width: ~"calc(var(--vh, 1vh) * 150)";
					height: 150vh;
					height: ~"calc(var(--vh, 1vh) * 150)";
				}
			}
			&:after {
				@media @ma {
					left: -50px;
				    top: 105vh;
					top: ~"calc(var(--vh, 1vh) * 105)";
				    width: 400px;
				    height: 400px;
				}
				@media @mb {
					left: -20vh;
					left: ~"calc(var(--vh, 1vh) * -20)";
					top: 110vh;
					top: ~"calc(var(--vh, 1vh) * 110)";
					width: 90vh;
					width: ~"calc(var(--vh, 1vh) * 90)";
					height: 90vh;
					height: ~"calc(var(--vh, 1vh) * 90)";
				}
				transform: translate(-50%, -50%);
				transition-delay: 0.4s;
				background: radial-gradient(circle, fade(@c3, 100%) 50%, fade(@c3, 0%) 71%);
			}
			.gradientAfter {
				position: absolute;
				z-index: -1;
				bottom: 0;
				overflow: hidden;
				@media @ma {
					width: 400px;
					height: 400px;
					right: -290px;
					&:after {
						width: 100%;
						height: 100%;
						left: 0;
						top: 0;
					}			
				}
				@media @mb {
					width: 100%;
					height: 35vh;
					height: ~"calc(var(--vh, 1vh) * 35)";
					&:after {
						right: -20vw;
						width: 100vh;
						width: ~"calc(var(--vh, 1vh) * 100)";
						height: 100vh;
						height: ~"calc(var(--vh, 1vh) * 100)";
					}				
				}
				&:after {
					position: absolute;
					top: 0;
					display: block;
					content: '';
					background: radial-gradient(circle, fade(@c2, 100%) 50%, fade(@c2, 0%) 71%);
					transition: all 1.4s ease;
				}
			}
			.content {
				padding: 0 35px 80px;
				.list {
					margin: 0 auto;
					font-size: 14px;
					line-height: 1.35em;
					@media @ma {
						max-width: 400px;
						.item {
							margin-bottom: 30px;
    						display: block;
						}
					}
					@media @mb {
						padding: 0 60px 100px;
						display: grid;
						grid-template-columns: 1fr 1fr;
						grid-gap: 50px;
						max-width: 1170px;
					}
					img {
						display: block;
						width: 100%;
						margin-bottom: 20px;
					}
					h3 {
						font-size: 18px;
						margin-bottom: 10px;
						padding-right: 40px;
						width: 331px;
						.ellipsis;
					}
					p {
						.regular;
					}
					h3, .description {
						max-width: 360px;
					}
					.description {
						height: 38px;
						overflow: hidden;
						padding-right: 30px;
					}
					.date {
						border-top: 1px solid #555;
						padding: 17px 0 10px;
						margin-top: 17px;
					}
					.details {
						position: relative;
						&:after {
							height: 30px;
							width: 30px;
							content: '';
							display: block;
							position: absolute;
							right: 0;
							top: -3px;
							background: url('/assets/arrow-readmore.svg') no-repeat right top;
							transition: right 0.3s ease;
						}
					}
					.item:hover {
						.details:after {
							right: -10px;
						}
					}
				}
			}
		}
		&:not(.loaded) {
			main {
				&:before,
				&:after {
					transform: translate(-50%, -50%) scale(0);
				}
			}
		}
	}
}

body.blog-article {
	background-color: #f2f0ef;
	#page {
		h1 {
			color: #000;
			font-size: 54px;
			@media @ma {
				font-size: 24px;
				max-width: 300px !important;
			}
		}
		main {
			&:before {
				position: absolute;
				z-index: -1;
				display: block;
				content: '';
				transition: all 1.4s ease;
				transform: translate(-50%, -50%);
				background: radial-gradient(circle, fade(@c3, 100%) 50%, fade(@c3, 0%) 71%);
				@media @ma {
				    left: 80vw;
				    top: -100px;
				    width: 400px;
				    height: 400px;
				}
				@media @mb {
					left: 85vw;
					top: -40vh;
					top: ~"calc(var(--vh, 1vh) * -40)";
					width: 150vh;
					width: ~"calc(var(--vh, 1vh) * 150)";
					height: 150vh;
					height: ~"calc(var(--vh, 1vh) * 150)";
				}
			}
			.gradientAfter {
				position: absolute;
				z-index: -1;
				bottom: 0;
				overflow: hidden;
				transition: all 0.5s ease;
				@media @ma {
					width: 400px;
					height: 400px;
					right: -290px;
					&:after {
						width: 100%;
						height: 100%;
						left: 0;
						background: radial-gradient(circle, fade(@c1, 100%) 40%, fade(@c1, 0%) 71%);
					}			
				}
				@media @mb {
					width: 100%;
					height: 38vh;
					height: ~"calc(var(--vh, 1vh) * 38)";
					&:after {
						left: 50vw;
						width: 440vh;
						width: ~"calc(var(--vh, 1vh) * 440)";
						height: 440vh;
						height: ~"calc(var(--vh, 1vh) * 440)";
						transform: translateX(-50%);
						background: radial-gradient(circle, fade(@c1, 100%) 67%, fade(@c1, 0%) 71%);
					}				
				}
				&:after {
					position: absolute;
					top: 0;
					display: block;
					content: '';
				}
			}
			.content {
				padding: 0 35px;
				img {
					display: block;
					width: 100%;
					max-width: 420px;
				}
			}
		}
		.date {
			text-align: center;
			font-size: 14px;
			letter-spacing: 0.1px;
			margin: -5px 0 55px;
			.regular;
		}
		h1, .video, .description {
			max-width: 700px;
			margin: 0 auto;
		}
		.video {
			iframe {
				display: block;
				width: 100%;
				height: 450px;
				border: 0;
				@media @ma {
					height: 200px;
				}
			}
		}
		.description {
			padding: 70px 0 120px;
			@media @ma {
				padding: 40px 0 80px;
			}
			font-size: 14px;
		    line-height: 1.35em;
		    .regular;
		}
		&:not(.loaded) {
			main {
				&:before {
					transform: translate(-50%, -50%) scale(0);
				}
				.gradientAfter {
					opacity: 0;
					@media @mb { transform: translateY(20%); }
				}
			}
		}
	}
}

body.referenzen {
	background-color: @c5;
	#page {
		main {
			min-height: 100vh;
			min-height: ~"calc(var(--vh, 1vh) * 100)";
			position: relative;
			overflow: hidden;
			&:after {
				position: fixed;
				left: 50%;
				top: 100vh;
				top: ~"calc(var(--vh, 1vh) * 100)";
				z-index: -1;
				display: block;
				content: '';
				// background-color: @c7;
				// border-radius: 50%;
				// filter: blur(50px);
				background: radial-gradient(circle, fade(@c7, 100%) 30%, fade(@c7, 0%) 71%);
				transform: translate(-50%,-50%) scale(1.3, 1);
				@media @ma {
					transform: translate(-50%,-50%) scale(0.7, 1);
				}
				transition: all 1.4s ease;
				width: 110vh;
				height: 110vh;
			}
		}
		ul {
			font-size: 10px;
			line-height: 1.2em;
			@media @ma {
				padding-left: 35px;
				columns: 2;
			}
			@media screen and (min-width: 400px) and (max-width: 880px) {
				columns: 4;
			}
			@media @mb {
				padding: 0 50px 0 100px;
				max-width: 1150px;
				columns: 5;
				margin: 0 auto;
			}
			@media @hd {
				max-width: 1480px;
			}
			li {
				padding: 5px 25px 5px 0;
				@media @hd {
					padding: 7px 25px 7px 0;
				}
			}
		}
		.note {
			font-size: 23px;
			line-height: 1em;
	    	padding: 70px;
			text-align: center;
			.chapman;
		}
		&:not(.loaded) {
			main {
				&:after {
					transform: translate(-50%,-50%) scale(0);
				}
			}
		}
	}
}

body.bio {
	background-color: @c3;
	#page {
		.content {
			padding: 0 35px;
		}
		main {
			min-height: 100vh;
			min-height: ~"calc(var(--vh, 1vh) * 100)";
			overflow: hidden;
			position: relative;
			&:before, &:after {
				position: absolute;
				z-index: -1;
				display: block;
				content: '';
				// background-color: @c4;
				// border-radius: 50%;
				// filter: blur(30px);
				background: radial-gradient(circle, fade(@c4, 100%) 20%, fade(@c4, 0%) 71%);
				transition: all 1.4s ease;
			}
			&:before {
				left: 82vw;
				top: 370px;
				width: 150px;
				height: 150px;
				transform: translate(-50%, -50%);
				@media @ma {
					top: 760px;
					left: 100vw;
				}
			}
			&:after {
				left: 20px;
				top: 100vh;
				top: ~"calc(var(--vh, 1vh) * 100)";
				width: 250px;
				height: 250px;
				transform: translate(-50%, -50%);
				transition-delay: 0.4s;
				@media @ma {
					top: 1140px;
				}
			}
			.content {
				&:after {
					position: absolute;
					z-index: -1;
					display: block;
					content: '';
					background: radial-gradient(circle, fade(@c4, 100%) 20%, fade(@c4, 0%) 71%);
					transition: all 1.4s ease;
					width: 350px;
					height: 350px;
					left: ~"calc( 50% + 280px)";
					top: 1150px;
					transform: translate(-50%, -50%);
					@media @ma {
						left: 100vw;
						top: 1545px;
					}
					@media @hd {
						width: 600px;
					    height: 600px;
					    left: ~"calc( 50% + 400px)";
					    top: 1540px;
					}
				}
				.cover {
					text-align: center;
					@media @ma {
			  			margin-bottom: 50px;
			  		}
					span {
						background-color: @c3;
						display: inline-block;
					}
					img {
						display: block;
				  		mix-blend-mode: luminosity;
				  		@media @ma {
				  			width: 100%;
				  			max-width: 320px;
				  		}
				  		@media @hd {
				  			width: 560px;
				  		}
					}
				}
			}
		}
		.dates {
			.regular;
			font-size: 14px;
			line-height: 1.4em;
			letter-spacing: 0.4px;
			@media @mb {
				max-width: 1130px;
				margin: -606px auto 50px;
				position: relative;
				z-index: 2;
				padding: 0 90px;
				.part {
					.clear;
				}
				.part-2,
				.part-4 {
					float: right;
					margin-right: -71px;
				}
				.part-2 {
			    	margin-top: 6em;
				}
				.part-3 {
			    	margin-top: 500px;
				}
				.part-4 {
			    	margin-top: -75px;
				}
				.part-5 {
			    	margin-top: 150px;
				}
			}
			@media @hd {
				max-width: 1300px;
				font-size: 17px;
				line-height: 24px;
				margin: -836px auto 50px;
				.part-3 {
			    	margin-top: 720px;
			    	p  {
			    		max-width: 540px;
			    	}
				}
			}
			p {
				max-width: 320px;
				@media @ma {
					margin: 0 auto;
				}
				@media @hd {
					max-width: 440px;
				}
			}
			p + p {
				margin-top: 1.4em;
			}
			strong {
				.medium;
			}
		}
		.note {
			font-size: 35px;
			line-height: 1em;
	    	padding: 70px 35px;
			text-align: center;
			.chapman;
		}
		&:not(.loaded) {
			main {
				&:before,
				&:after {
					transform: translate(-50%, -50%) scale(0);
				}
			}
		}
	}
}

body.veroffentlichungen {
	background-color: @c6;
	#page {
		.content {
			padding: 0 35px;
		}
		h1 {
			@media @mb {
				font-size: 60px;
				max-width: 700px;
				margin: 0 auto;
			}
			@media @hd {
				font-size: 90px;
				max-width: 1000px;
			}
		}
		main {
			min-height: 100vh;
			min-height: ~"calc(var(--vh, 1vh) * 100)";
			overflow: hidden;
			position: relative;
			&:before, &:after {
				position: fixed;
				top: 50%;
				z-index: -1;
				display: block;
				content: '';
				background: radial-gradient(circle, fade(@c3, 100%) 10%, fade(@c3, 0%) 71%);
				transition: opacity 1.4s ease;
				width: 90vw;
				width: ~"calc(var(--vh, 1vh) * 90)";
				height: 90vh;
				height: ~"calc(var(--vh, 1vh) * 90)";
				transform: translate(-50%, -50%) scale(0.4, 1);
			}
			&:before {
				left: 0;
			}
			&:after {
				left: 100vw;
				@media @ma {
					top: 100vh;
					top: ~"calc(var(--vh, 1vh) * 100)";
				}
			}
			.details {
				position: relative;
				@media @mb {
					width: 740px;
					margin: 0 auto;
					font-size: 14px;
					line-height: 22px;
					padding-left: 300px;
				}
				@media @hd {
					width: 1000px;
					padding-left: 400px;
					font-size: 17px;
					line-height: 24px;
				}
				img {
					display: block;
					box-shadow: 0 3px 6px rgba(0,0,0,.16);
					@media @ma {
						width: 100%;
						max-width: 200px;
						margin: 0 auto 40px;
					}
					@media @mb {
						float: left;
						width: 240px;
						height: 380px;
						margin-left: -300px;
					}
					@media @hd {
						width: 320px;
						height: 500px;
						margin-left: -400px;
					}
				}
				.description {
					.regular;
					p + p {
						margin-top: 22px;
					}
					&:not(:empty) + .button {
						margin-top: 49px;
						@media @ma {
							margin: 30px 0 40px;
						}
					}
				}
				.button:hover {
					background-color: #fff;
					border-color: #fff;
					color: @c6;
				}
			}
			.list {
				text-align: center;
				.links {
					display: inline-grid;
					font-size: 0;
					line-height: 0;
					@media @ma {
						grid-template-columns: repeat(2, 1fr);
						grid-gap: 40px;
						margin-bottom: 30px;
					}
					@media @mb {
						grid-template-columns: repeat(4, 1fr);
						grid-gap: 40px 70px;
					}
					@media @hd {
						grid-gap: 50px 90px;
					}
					a {
						background-color: @c6;
						position: relative;
						box-shadow: 0 3px 6px rgba(0,0,0,.16);
						img {
							display: block;
							width: 110px;
							@media @hd {
								width: 140px;
							}
					  		&.bg {
								filter: grayscale(100%);
						  		mix-blend-mode: multiply;
						  	}
						  	&.hover {
						  		@media @ma {
						  			display: none;
						  		}
						  		@media @mb {
							  		position: absolute;
							  		z-index: 2;
							  		top: 0;
							  		left: 0;
							  		opacity: 0;
						  			transition: opacity 0.3s ease;
						  		}
						  	}
						}
						&:hover img.hover {
							opacity: 1;				
						}
					}
				}
			}
		}
		&:not(.loaded) {
			main {
				&:before, &:after {
					opacity: 0;
				}
			}
		}
	}
}
html.same-page body.veroffentlichungen #page {
	main {
		&:before, &:after {
			opacity: 1;
			// transform: translate(-50%, -50%) scale(0.4, 1);
		}
	}
}


body.kundenstimmen {
	background-color: @c1;
	#page {
		@media @ma {
			h1 {
				padding-top: 130px;
			}
		}
		main {
			min-height: 100vh;
			min-height: ~"calc(var(--vh, 1vh) * 100)";
			overflow: hidden;
			position: relative;
			&:before {
				position: fixed;
				left: 50%;
				top: 55vh;
				top: ~"calc(var(--vh, 1vh) * 55)";
				z-index: -1;
				display: block;
				content: '';
				background-color: @c4;
				border-radius: 50%;
				filter: blur(50px);
				transform: translate(-50%,-50%);
				transition: all 1.4s ease;
				width: 0;
				height: 0;
			}
			.list {
				text-align: center;
				@media @mb {
					max-width: 550px;
					margin: 0 auto;
				}
				@media (min-height: 720px) {
					position: absolute;
					left: 50%;
					top: 60vh;
					top: ~"calc(var(--vh, 1vh) * 60)";
					transform: translate(-50%,-50%);
					z-index: 2;
				}
				@media @hd {
					max-width: 800px;
				}
				.item {
					padding: 0 35px;
					@media @hd {
						padding: 0 50px;
					}
					.name {
						span {
							border-bottom: 1px solid #000;
							padding-bottom: 1px;
						}
					}
					.position {
						margin-top: 10px;
						@media @hd {
							margin-top: 15px;
						}
					}
					.description {
						font-size: 14px;
						margin-top: 40px;
						.chapman;
						line-height: 1.85em;
						@media @hd {
							font-size: 18px;
							margin-top: 60px;
						}
						@media @ma {
							max-width: 400px;
							margin: 40px auto;
						}
					}
				}
				.slick-arrow {
					appearance: none;
					border: 0;
					display: block;
					position: absolute;
					transform: translateY(-50%);
					font-size: 0;
					cursor: pointer;
					top: 50%;
					transition: left 0.2s ease, right 0.2s ease;
					@media screen and (max-width: 440px) {
						display: none !important;
					}
					@media @ma {
						width: 35px;
						height: 35px;
						background-size: 30px auto !important;
					}
					@media @mb {
						width: 60px;
						height: 60px;		
					}
					@media @hd {
						width: 90px;
						height: 90px;
					}
					&.slick-prev {
						background: url('/assets/arrow-left.svg') no-repeat center;
						@media @ma {
							left: 30px;
						}
						@media @mb {
							left: -70px;
							&:hover {
								left: -75px;
							}
						}
						@media @hd {
							left: -100px;
							&:hover {
								left: -110px;
							}
						}
					}
					&.slick-next {
						background: url('/assets/arrow-right.svg') no-repeat center;
						transform: translateY(-50%);
						@media @ma {
							right: 30px;
						}
						@media @mb {
							right: -70px;
							&:hover {
								right: -75px;
							}
						}
						@media @hd {
							right: -100px;
							&:hover {
								right: -110px;
							}
						}
					}
				}
			}
		}
		.listDots {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			z-index: 6;
			white-space: nowrap;
			top: 42px;
			@media @ma {
				top: 86px;
			}
			li {
				display: inline-block;
				padding: 10px 30px;
				font-size: 0;
	    		line-height: 0;
				@media @ma {
					padding: 10px 15px;
				}
				cursor: pointer;
				button {
					appearance: none;
					background: #000;
					border: 0;
					font-size: 0;
					line-height: 0;
					width: 6px;
					height: 6px;
					border-radius: 50%;
					cursor: pointer;
					transition: transform 0.2s ease, background 0.2s ease;
				}
				&:hover button {
					transform: scale(1.4);
				}
				&.slick-active button {
					background: #fff;
				}
			}
		}
		&.loaded {
			main {
				&:before {
					width: 60vw;
					height: 60vh;
					height: ~"calc(var(--vh, 1vh) * 60)";
				}
			}
		}
	}
}

body.kontakt {
	background-color: @c4;
	#page {
		main {
			min-height: 100vh;
			min-height: ~"calc(var(--vh, 1vh) * 100)";
			position: relative;
			&:before {
				position: fixed;
				left: 50%;
				top: 55vh;
				top: ~"calc(var(--vh, 1vh) * 55)";
				z-index: -1;
				display: block;
				content: '';
				background-color: @c7;
				border-radius: 50%;
				filter: blur(50px);
				transform: translate(-50%,-50%);
				transition: all 1.4s ease;
				width: 0;
				height: 0;
			}
			a:hover {
				text-decoration: underline;
			}
			.list {
				text-align: center;
				font-size: 0;
				@media @ma {
					.item + .item {
						&:before {
							height: 1px;
							width: 65px;
							background: #000;
							content: '';
							display: block;
							margin: 40px auto 25px;
						}
					}
				}
				@media @mb {
					display: flex;
					position: absolute;
					z-index: 2;
					left: 50%;
					top: 55vh;
					top: ~"calc(var(--vh, 1vh) * 55)";
					transform: translate(-50%,-50%);
					.item {
						padding: 0 50px 10px;
						&:not(:first-child) {
							border-left: 1px solid #000;
						}
					}
				}
				@media @hd {
					.item {
						padding: 0 75px 15px;
					}
				}
				h2 {
					.chapman;
					font-size: 34px;
					line-height: 1.2em;
					margin-bottom: 20px;
					@media @ma {
						font-size: 24px;
					}
					@media @hd {
						font-size: 50px;
						margin-bottom: 30px;
					}
				}
				p {
					font-size: 14px;
					white-space: nowrap;
					letter-spacing: 0.4px;
					@media @hd {
						font-size: 18px;
					}
				}
			}
			.links {
				text-align: center;	
				@media @ma {
					margin: 90px 0 50px;
				}
				@media @mb {
					position: absolute;
					z-index: 2;
					width: 100%;
					bottom: 45px;
				}		
			}
		}
		&.loaded {
			main {
				&:before {
					@media @ma {
						width: 70vw;
						height: 80vh;
						height: ~"calc(var(--vh, 1vh) * 80)";
					}
					@media @mb {
						width: 790px;
						height: 340px;
					}
				}
			}
		}
	}
}


body.impressum,
body.datenschutz {
	background-color: #F2F0EF;

}

body.impressum #page {
	h1 {
		color: @c1;
	}
	.article {
		text-align: center;
	}
}

body.datenschutz #page {
	h1 {
		color: @c3;
	}
	.article {
		font-size: 12px;
	}
}

.article {
	padding: 0 70px 120px;
	max-width: 840px;
	margin: 0 auto;
	font-size: 14px;
	line-height: 1.4em;
	letter-spacing: 0.4px;
	@media @ma {
		padding: 0 35px 60px;
	}
	h2 {
		font-size: inherit;
		&:not(:first-child) {
			margin-top: 30px;
		}
	}
	p {
		.regular;
	}
	// a:not(.bordered):hover {
	// 	text-decoration: underline;
	// }
	a.bordered {
		padding-bottom: 2px;
		border-bottom: 1px solid #000;
		transition: padding 0.2s ease;
		&:hover {
			padding: 0 5px 2px;
		}
	}
}


#background {
	opacity: 0;
	content: '';
	min-height: 130vh;
	min-height: ~"calc(var(--vh, 1vh) * 130)";
	position: fixed;
	z-index: 0;
	left: 0;
	top: 0;
	width: 600vw;
	transition: opacity 0.4s ease;
	transform: translateX(0vw);
	background: linear-gradient(90deg,
		fade(@c3,100) 0%,
		fade(@c3,100) 15.666%,

		fade(@c1,100) 17.666%,
		fade(@c1,100) 32.333%,

		fade(@c4,100) 34.333%,
		fade(@c4,100) 49%,

		fade(@c5,100) 51%,
		fade(@c5,100) 65.666%,

		fade(@c2,100) 67.666%,
		fade(@c2,100) 82.333%,

		fade(@c6,100) 84.333%,
		fade(@c6,100) 100%
	);
}
body.leistungen #page #background {
	opacity: 1;
}

html.same-page body.leistungen #page #background {
	transition: transform 0.5s ease, opacity 0.4s ease;
}

html.is-animating:not(.same-subpage) {
	body.leistungen #page {
		.menuGroups a:after {
			transform: translate(-50%,-50%) scale(0);
		}
	}
}

body.leistungen {
	&.new-work { background: @c3; } // &:before{ transform: translateX(0vw); } }
	&.new-leadership { background: @c1; } // &:before{ transform: translateX(-100vw); } }
	&.storytelling { background: @c4; } // &:before{ transform: translateX(-200vw); } }
	&.personlichkeit { background: @c5; } // &:before{ transform: translateX(-300vw); } }
	&.entscheiden { background: @c2; } // &:before{ transform: translateX(-400vw); } }
	&.konflikte-losen { background: @c6; } // &:before{ transform: translateX(-500vw); } }
	#page {
		@media @ma {
			h1 {
				padding-top: 130px;
			}
		}
		.menuGroups {
			position: absolute;
			left: 50%;
			top: 32px;
			transform: translateX(-50%);
			z-index: 100;
			white-space: nowrap;
			@media @ma {
				top: 74px;
			}
			@media @hd {
				font-size: 14px;
			}
			a {
				display: inline-block;
				width: 50px;
				@media @ma {
					width: 40px;
				}
				height: 50px;
				line-height: 50px;
				position: relative;
				text-align: center;
				&:after {
					content: '';
					display: block;
					position: absolute;
					left: 50%;
					top: 50%;
					width: 20px;
					height: 20px;
					transform: translate(-50%,-50%);
					background-color: #fff;
					border-radius: 50%;
					filter: blur(2px);
					z-index: -1;
					opacity: 0;
					transition: all 0.2s ease;
				}
				&:hover:after {
					opacity: 0.3;
					transform: translate(-50%,-50%) scale(1);
				}
				&.active:after {
					opacity: 1;
				}
			}
		}
		.groupLinks {
			text-align: center;
			position: relative;
			z-index: 6;
			@media @ma {
			    margin-top: -13px;
			    padding: 0 5px;
			}
			@media @mb {
				padding: 0 60px;
			}
			@media @hd {
				font-size: 14px;
			}
			a {
				display: inline-block;
				margin: 6px 11px;
				position: relative;
				@media @ma {
					margin: 6px 10px;
				}
				&:after {
					height: 1px;
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					transform: scale(0);
					transform-origin: right;
					background-color: #000;
				}
				&.active, &:hover {
					&:after {
						transition: transform 0.2s ease;
						transform-origin: left;
						transform: scale(1);
					}
				}
			}
		}
		.description {
			margin: 0 auto;
			@media @ma {
				padding: 0 35px;
				max-width: 600px;
			}
			@media @mb {
				display: flex;
				max-width: 1200px;
				padding: 20px 130px 60px 110px;
			}
			@media @hd {
				max-width: 1230px;
			}
			.image {
				img {
					display: block;
					@media @ma {
						width: 100%;
						max-width: 340px;
    					margin: 20px auto 20px;
					}
					@media @mb {
						width: 420px;
						margin-top: 0;
						max-width: 30vw;
					}
					@media @hd {
						width: 500px;
					}
				}
			}
			.text {
				@media @mb {
					padding-left: 30px;
					padding-top: 60px;
				}
				.onlineNote {
					margin-bottom: 25px;
					&:before {
						display: inline-block;
						width: 24px;
						height: 15px;
						content: '';
						background: url('/assets/online-icon.png');
						background-size: cover;
						margin-right: 5px;
						vertical-align: middle;
						margin-top: -1px;
					}
				}
				ul {
					list-style: disc;
				}
				ul, ol {
					margin-left: 16px;
				}
				p + p, p + ul, p + ol, ol + p, ul + p {
					margin-top: 23px;
				}
				.desc {
					font-size: 14px;
					line-height: 1.35em;
					.regular;
					@media @hd {
						font-size: 17px;
						line-height: 23px;
					}
					strong, h2, h3 {
						.medium;
					}
					&.long {
						display: none;
					}
				}
				&.longDescVisible {
					.short.desc {
						display: none;
					}
					.long.desc {
						display: block;
					}
				}
			}
			.button {
				margin-top: 30px;
			}
		}
	}
}

html.is-leaving body.leistungen #page .groupLinks a.active:after {
	transform: scale(0);
	transform-origin: right;
}

.video {
	img {
		display: block;
		margin: 0 auto;
	}
}