:root {
	--icon-size: 40px;
}

html {
	scroll-behavior: smooth;
	width: 100%;
}

body {
	background: #000;
	color: #fff;
	font-family: 'DIN';
	width: 100%;
	overflow-x: hidden;
}

#fred-marketing {
	width: 100%;
}

h1, h2, h3, h4, h5 {
	margin-bottom: 0;
	font-weight: bold;
}

a,
a:visited,
a:focus,
a:hover {
	color: #000;
	text-decoration: none;
}

#nav-overlay-wrapper {
	width: 100%;
	height: 0px;
}

#nav-overlay {
	display: none;
	width: 100%;
	height:  100vh;
	position: fixed;
	background-color: #000;
	color: #fff;
	z-index: 300;
	padding: 3rem 3rem;
}

#nav-open,
#nav-overlay #nav-close {
	width: 45px;
	cursor: pointer;
}

#nav-open {
}

#nav-overlay-inner {
	width:  100%;
	height: 100%;
}

#nav-overlay-inner .nav-row {
	text-align: center;
}

#nav-overlay-inner .nav-row .nav-link {
	color: #fff;
	font-weight: bold;
	font-size: 3em;
	white-space: nowrap;
}

#nav-overlay-inner .nav-row .nav-group {
	color: #fff;
	font-weight: bold;
	font-size: 3em;
	white-space: nowrap;
}

#nav-overlay-inner .nav-row .nav-link.sub-link {
	font-size: 2.8em;
}

#page-nav {
	position: fixed;
	top: 0;
	z-index: 290;
	width: 100vw;
}

.normal-cursor {
	cursor: default !important;
}

.white-header {
	background-color: transparent;
	color: #000;
}

.white-header .header-logo {
	width: 100px;
	z-index: 4;
	position: relative;
}

.white-header-spacer {
	background: #fff;
	width: 100%;
	height: 140px;
}

.black-header {
	background-color: transparent;
	color: #fff;
}

.black-header-spacer {
	background:
	transparent; width: 100%;
	height: 140px;
}

.black-header .header-logo,
.white-header .header-logo {
	width: 100px;
	z-index: 4;
	position: relative;
}

.jobs,
.basic-page {
	background-color: #fff;
	color: #000;
}

.jobs-header {
	width: 100%;
	height: 100vh;
}

.jobs-header-content {
	background: url(/assets/background/three-quarters.png);
	background-position: center 50%;
	background-repeat: no-repeat;
	background-size: 300px;
}

.jobs-header .jobs-title h1 {
	font-size: 6vw;
	font-weight: bold;
	transition: all .5s;
	cursor: default;
}

.jobs-header .jobs-proceed {
	height: calc(100vh - 90%);
	background-image: url(/assets/arrows/down_white.png);
	background-position: center 50%;
	background-repeat: no-repeat;
	background-size: auto 20px;
	cursor: pointer;
}

.job-contact {
	background-color: #000;
	color: #fff;
	border-radius: 3px;
	padding: 5px 10px 7px 10px;
	font-weight: bold;
}

.office-info {
	background: #ccc;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}

.office-info h3 {
	font-size: 3rem;
}

.office-info .office-image {
	width: auto;
	max-width: 100%;
}

.container.event-info-container {
	max-width: 800px;
}

#event-info-details {
	padding-top:  1.5em;
	background-color: #fff;
	color: #000;
}

.event-info-headline {
	font-weight: bold;
	font-size: 2rem;
}

.good-to-know-teaser {
	width: auto;
	max-width: 600px;
	height: auto;
	max-height: 100px;
	margin: 1rem 0 2rem 0;
}

.good-to-know-list {
	width: auto;
	max-width: 600px;
	margin: 0px auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.good-to-know-item {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

.good-to-know-item .good-to-know-icon picture {
	width: var(--icon-size);
	display: block;
}

.good-to-know-item .good-to-know-icon picture img {
	width: auto;
	max-width: var(--icon-size);
	height: auto;
	max-height: var(--icon-size);
	display: block;
}

.case-header {
	width: 100%;
	height: 100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.case-header-content {
	cursor:url(/assets/cursors/play.png), auto;
	z-index: 2;
}

.case-header-content.novideo {
	cursor:  default;
}

.case-header .case-title h1 {
	font-size: 6vw;
	font-weight: bold;
	transition: all .5s;
}

.case-header .case-proceed {
	height: calc(100vh - 90%);
	background-image: url(/assets/arrows/down_white.png);
	background-position: center 50%;
	background-repeat: no-repeat;
	background-size: auto 20px;
	cursor: pointer;
}

#case-details {
	padding-top:  1.5em;
}

.case-carousel-image {
	height: 100vh;
	width: auto;
	min-width: 100%;
}

.case-description {
	font-weight: bold;
	font-size: 3rem;
}

.case-headline {
	font-weight: bold;
	font-size: 2rem;
}

.case-right {
	border-left: 2px solid #fff;
	padding-left: 10%;
}

.case-logo {
	width: auto;
	max-width: 100%;
}

.case-service {
	font-weight: bold;
}

.case-social-icon {
	height: auto;
	width: 30px;
}

.case-image {
	height: calc(100vw/2.5);
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#case-images-carousel {
	cursor:url(/assets/cursors/circle.png), auto;
}

.text-justify {
	text-align: justify;
}

.section-spacer {
	height: calc(100vw*0.08);
}

.clip-shadow {
	box-shadow: 0px 0px 100px 10px #fff;
	clip-path: inset(-200px 0px 0px);
}

.sticky-overflow {
	max-height: 100vh;
	overflow: hidden;
	overflow-y: scroll;
	-ms-overflow-style: none;  /* Internet Explorer 10+ */
	scrollbar-width: none;  /* Firefox */
}
.sticky-overflow::-webkit-scrollbar { 
	display: none;  /* Safari and Chrome */
}

.white-text {
	color:#fff;
}

.start {
	height: 100vh;
	width:  100%;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(/assets/logo/fred-und-komplizen_logo-weiss.svg);
	background-size: 30%;
}

.start.novideo {
}

.jobs-button-wrapper {
	display: inline-block;
	height: 0px;
}

.jobs-button {
    color: #fff !important;
    border: 2px solid #fff;
    padding: 0.1rem 1rem 0.2rem 1rem;
    border-radius: 14px;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    top: 2px;
}

.white-header .jobs-button {
	color: #000 !important;
    border: 2px solid #000;
}

.start .start-upper {
	z-index: 3;
}

.start .start-mid {
	cursor:url(/assets/cursors/play.png), auto;
	z-index: 3;
}

.start.novideo .start-mid {
	cursor: default;
}

.start .start-lower {
	cursor:url(/assets/cursors/down.png), auto;
	z-index: 3
}

.start .start-lower {
	height: calc(100vh - 80%);
}

.start .start-logo {
	width: 100px;
	z-index: 4;
	position: relative;
}

.video-wrapper-container {
	height: 0px;
	width: 100%;	
}

.video-wrapper-container .video-wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left:  0;
	z-index: 2;
}

#video-reel-desktop,
#video-reel-mobile {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.start .start-closer-wrapper {
	height: 0px;
	width: 100%;
}

.start .start-closer-wrapper .start-closer {
	position: absolute;
	bottom: 0;
}

.start .start-closer-wrapper .start-closer #start-closer-rocket {
	width: 40px;
	position: relative;
	z-index: 4;
	bottom: 20px;
	left:  -13px;
}

.dfh {
	background: #FFE800;
	color: #000;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
	overflow: hidden;
	position: relative;
	margin-bottom: -1.5em;
}

.dfh.non-decorated {
	margin-top: -1.5em;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	margin-bottom: 0.0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.dfh .arrow-down {
	height: 20px;
	cursor: pointer;
}

.dfh .dfh-content {
	position: relative;
	margin: 0px auto;
	max-width: 70%;
	font-weight: bold;
	text-align: center;
}

.about {
	background: #fff;
	color: #000;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}


.dotted-bg-line {
	background-image: url(/assets/decoration/dotted.png);
	background-repeat: repeat-y;
	background-position: 30px;
}

.container {
	max-width: 1400px;
	width: 80%;
	margin: 0px auto;
}

.header-container {
	max-width: 1400px;
	width: 96%;
	margin: 0px auto;
	visibility: visible;
	opacity: 1;
	bottom: 0;
	position: relative;
	transition: opacity .2s linear, bottom .2s linear;
}

.header-container.header-container-hidden {
	visibility: hidden;
	opacity: 0;
	bottom: 50px;
	transition: visibility 0s .2s, opacity .2s linear, bottom .2s linear;
}

.about {
	cursor: url(/assets/cursors/down_black.png), auto;
}

.about .about-image {
	width: auto;
	max-width: 100%;
	max-height: 400px;
}

.small-underline {
	height: 3px;
	width: 100px;
	background: #000;
	width: 70px;
	margin: .6em 0 1.2em 0;
}

.small-underline.invert {
	background: #fff;
}

.about-logo-wrapper {
	position: relative;
	width: 100%;
	height: 0;
}

.about-logo-wrapper .about-logo {
	position: absolute;
	right: 60px;
	bottom: 100px;
	width: 200px;
	transform: rotate(270deg);
}

.top-cases {
	background: #000;
	color: #fff;
	position: relative;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	margin-top: -25px;
	cursor: url(/assets/cursors/circle_small.png), auto;
}

.top-cases-link,
.top-cases-link:hover,
.top-cases-link:visited,
.top-cases-link:focus {
	color: #fff;
	cursor:url(/assets/cursors/circle_big.png), auto;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
	background-size: 4rem;
	width: 4rem;
	height: 4rem;
}

.carousel-arrow {
	width: 16px;
}

.top-cases .carousel-control-prev {
	width: 4rem;
	cursor:url(/assets/cursors/circle_big.png), auto;
	left: -4rem;
	opacity: 1;
}

.top-cases .carousel-control-next {
	width: 4rem;
	cursor:url(/assets/cursors/circle_big.png), auto;
	right: -4rem;
	opacity: 1;
}

.carousel-control-next-icon,
.carousel-control-prev-icon,
.top-cases .carousel-item {
	cursor:url(/assets/cursors/circle_big.png), auto;
}

.top-cases .top-case-image {
	width: 90%;
}

.top-cases .top-cases-carousel-item-row {
	overflow: hidden;
	margin: 0 20px;
}

.top-cases .campaign-wrapper {
	width: 0px;
	height: 0px;
}

.top-cases .campaign-wrapper .campaign-title {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	position: absolute;
	text-align: left;
	bottom: 0;
	left: 0;
	font-size: calc(100vw*0.05);;
	font-weight: bold;
	line-height: 1.0em;
}

.top-cases .tagline-wrapper {
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	font-weight: bold;
	font-size: calc(100vw*0.02);
}

.top-cases .tagline-wrapper .tagline {
	line-height: 1.1;
}

.top-cases .tagline-horizontal-wrapper {
	float: right;
	width: 82%;
	text-align: left;
}

.top-cases .tagline-horizontal-wrapper .tagline-horizontal {
	font-size: calc(100vw*0.04);
	font-weight: bold;
	line-height: 1.2;
}

.services-intro {
	background-color: #fff;
	color: #000;
	padding-top: 1.5em;
	margin-bottom: -1.5em;
	padding-bottom: 1.5em;
	cursor: url(/assets/cursors/down_black.png), auto;
}

.services-intro .services-intro-inner {
	padding-bottom: 1.5em;
}

.services-details {
	background-color: #000;
	color: #fff;
	position: relative;
	border-top-right-radius: 25px;
	border-top-left-radius: 25px;
	border-bottom-right-radius: 25px;
	border-bottom-left-radius: 25px;
	overflow: hidden;
	cursor: url(/assets/cursors/circle.png), auto;
}

.services-details .small-underline {
	background: #fff;
}

.services-details table {
	width: 100%;
	margin:  2em 0;
}

.services-details table td {
	max-width: 50%;
	width: 50%;
	min-width: 50%;
	height: 120px;
	max-height: 120px;
	min-height: 120px;
}

.services-details table td.left-col,
.services-details table td.right-col {
	background-size: auto 100%;
	background-repeat: no-repeat;
}

.services-details table td.left-col {
	background-image:  url(/assets/background/services/left.png);
	background-position: 100% 0%;
	background-size: auto;
}

.services-details table .first-row td.left-col {
	background-image:  url(/assets/background/services/left-first.png);
}

.services-details table tr.active td.left-col {
	background-image:  url(/assets/background/services/left-active.png);
}

.services-details table tr.first-row.active td.left-col {
	background-image:  url(/assets/background/services/left-first-active.png);
}

.services-details table td.right-col {
	background-image:  url(/assets/background/services/right.png);
	background-position: 0px 0%;
	background-size: auto;
}

.services-details table .first-row td.right-col {
	background-image:  url(/assets/background/services/right-first.png);
}

.services-details table tr.active td.right-col {
	background-image:  url(/assets/background/services/right-active.png);
}

.services-details table tr.first-row.active td.right-col {
	background-image:  url(/assets/background/services/right-first-active.png);
}

.services-details .service-description-wrapper {
	width: 50%;
	float: right;
	min-width: 240px;
	height: 0px;
	position: relative;
}

.services-details .service-description-wrapper.upper-wrapper {
	top: 16px;
}

.services-details .service-description-wrapper.lower-wrapper {
	top: 16px;
}

.services-details .service-description-wrapper .service-description {
	display:  none;
	font-size: .96em;
	position: absolute;
	width: 100%;
	padding-right: 3em;
	margin-right: 5px;
	text-align: left;
}

.services-details .service-description-wrapper .service-description.upper-description {
	top:  0;
	border-top: 1px solid #fff;
	padding-top: 1rem;
}

.services-details .service-description-wrapper .service-description.upper-description {

}

.services-details .service-description-wrapper .service-description.lower-description {
	bottom: 0;
	border-bottom: 1px solid #fff;
}

.services-details table tr td {
	vertical-align: top;
}

.services-details table td.service-label {
	padding-left: 2em;
	font-weight: bold;
	font-size: 1.32em;
	transition: all .2s ease;
}

.services-details table td.service-label:hover {
	font-size: 1.4em;
	transition: all .2s ease;
}

.services-details table td.service-label .service-label-inner {
	position: relative;
	top: -1%;
}

.services-details table tr.first-row td {
}

.services-details table tr.last-row td {
	height: 70px;
	max-height: 70px;
	min-height: 70px;
}

.services-details table td.arrow-end {
	background-repeat: no-repeat;
	background-size: auto;
	height: 20px;
	max-height: 20px;
	min-height: 20px;
}

.services-details table td.arrow-left {
	background-image:  url(/assets/background/services/arrow-left.png);
	background-position: 100% 0%;
}

.services-details table td.arrow-right {
	background-image:  url(/assets/background/services/arrow-right.png);
	background-position: 0% 0%;
}

.services-claim {
	text-transform: uppercase;
	font-size: calc(100vw*0.04);
	font-weight: bold;
	letter-spacing: 2px;
	margin-bottom: 1em;
}

.references {
	margin-top: -1.5em;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
	background-color: #fff;
	color: #000;
	position: relative;
}

.references .reference-image {
	max-height: 200px;
	max-width: 100%;
}

.references .reference-tile {
}

.fly-in-container {
	width: 400px;
	height: 400px;
}

.fly-in-container .fly-in-wrapper {
	position: relative;
	height: 0px;
	visibility: hidden;
}

.fly-in-container .fly-in-wrapper .fly-in {
	width: 400px;
	height: 400px;
}

footer {
	background-color:  #000;
	color: #fff;
	padding: 4em 0em;
	font-size: .9em;
	position: relative;
}

footer a,
footer a:hover,
footer a:visited,
footer a:focus {
	color: #fff;
	text-decoration: none;
}

footer .social-icon {
	width: 24px;
}

.say-hello-wrapper {
	width: 100%;
	height: 0px;
	position: relative;
}

.say-hello {
	outline: none;
	position: relative;
	bottom: 82px;
	color: #000;
	background: #FFE800;
	padding: 1em 1.5em 2em 1.5em;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	font-size: .9rem;
	transition: all .5s;
	width: 230px;
	cursor: pointer;
	margin: 0px auto;
	overflow: hidden;
}

.say-hello:focus {
	bottom: 166px;
	cursor: default;
}

.say-hello-header img.say-hello-arrow {
	width: 25px;
	padding-bottom: 5px;
}

.say-hello-header img.say-hello-arrow-up {
	display: inline;
}

.say-hello-header img.say-hello-arrow-down {
	display: none;
}

.say-hello:focus .say-hello-header img.say-hello-arrow-up {
	display: none;
}

.say-hello:focus .say-hello-header img.say-hello-arrow-down {
	display: inline;
}

.say-hello-header h2 {
	font-weight: bold;
	font-size: 1.6rem;
}

.say-hello-content {
	padding-left: 100%;
	transition: all .5s;
	position: relative;
	width: 100%;
	white-space: nowrap;
}

.say-hello:focus .say-hello-content {
	padding-left: 0px;
}

.say-hello a {
	color: #000;
	text-decoration: none;
}

.say-hello-divider {
	width: 100%;
	height: 3px;
	background: #000;
	margin-top: 2em;
	margin-bottom: .5em;
	transition: all .8s;
}

.say-hello:focus .say-hello-divider {
	width: calc(100%/5);
}

@media screen and (max-width: 992px) {

}

@media screen and (min-width: 768px) {
	.prominent-headline {
		font-size: 3em;
	}

	.prominent-text {
		font-size: 1.1em;
	}
}


@media screen and (max-width: 768px) {
	.top-cases-carousel {
	}

	.top-cases .campaign-wrapper {
	}

	.top-cases .campaign-wrapper .campaign-title {
		font-size: calc(100vw*0.08);
		left: 0%;
	}

	.top-cases .top-case-image {
		width: 82%;
	}

	.jobs-header .jobs-title h1 {
		font-size: 4rem;
	}

	.case-header .case-title h1 {
		font-size: 4rem;
	}

	.top-cases .top-cases-carousel-item-row {
		overflow: hidden;
		margin: 0 0px;
	}
}

@media screen and (max-width: 576px) {

	#nav-overlay {
		padding: 3rem 2rem;
	}

	#nav-overlay-inner .nav-row .nav-link {
		font-size: 2.4em;
	}

	#nav-overlay-inner .nav-row .nav-group {
		font-size: 2.4em;
	}

	#nav-overlay-inner .nav-row .nav-link.sub-link {
		font-size: 2.2em;
	}

	#nav-open,
	#nav-overlay #nav-close {
		width: 36px;
	}

	.black-header .header-logo,
	.white-header .header-logo {
		width: 80px;
	}

	.section-spacer {
		height: calc(100vw*0.05);
		min-height: 50px;
	}

	.start {
		background-image: url(/assets/cursors/play.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 14%;
	}

	.start.novideo {
		background-image: url(/assets/logo/fred_logo_white_wo_sub.svg);
		background-size: 30%;
	}

	.start .start-lower {
		background-image: url(/assets/arrows/down_white.png);
		background-position: center 80%;
		background-repeat: no-repeat;
		background-size: auto 20px;
	}

	.dfh .dfh-content {
		max-width: 94%;
		font-size: 1.4em;
	}

	.dotted-bg-line {
		background-position: 20px;
	}

	.start .start-closer-wrapper .start-closer #start-closer-rocket {
		width: 30px;
		left:  -2px;
	}

	.about-logo-wrapper .about-logo {
		right: 20px;
		width: 80px;
		bottom: 60px;
	}

	.services-details table td.service-label .service-label-inner {
		top: 4%;
	}

	.services-details table td.service-label {
		font-size: .9em;
	}

	.services-details table td.service-label:hover {
		font-size: .95em;
	}

	.services-details .service-description-wrapper {
		min-width: 150px;
		width: 50%;
	}

	.services-claim {
		font-size: calc(100vw*0.07);
	}

	.container {
		width: 96%;
	}

	.carousel-control-next-icon, .carousel-control-prev-icon {
		background-size: 3rem;
		width: 3rem;
		height: 3rem;
	}

	.top-cases .carousel-control-prev {
		left: -3rem;
	}

	.top-cases .carousel-control-next {
		right: -3rem;
	}

	.jobs-header .jobs-title h1 {
		font-size: 3rem;
	}

	.case-header .case-title h1 {
		font-size: 3rem;
	}

	.case-description {
		font-size: 2rem;
	}

}

@media screen and (max-width: 450px) {

	footer .tiny-mobile-text {
		font-size: .7em;
	}

	.services-details table {
		margin: 1.5em 0 2em 0;
	}

	.services-intro .services-intro-inner {
		padding-bottom: 2em;
	}

	.services-details .service-description-wrapper .service-description {
		font-size: .7em;
		padding-right: 2em;
		margin-right: 3px;
	}

}