@font-face {
    font-family: 'juniper';
    src: url('./fonts/Juniper.ttf') format('truetype');
}
@font-face {
    font-family: 'lightcool';
    src: url('./fonts/CoolveticaEl-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'cool';
    src: url('./fonts/CoolveticaLt-Regular.ttf') format('truetype');
}

.font-juniper{
	font-family: "juniper", sans-serif !important;
}
.font-lightcool{
	font-family: "lightcool", sans-serif !important;
}
.font-cool{
	font-family: "cool", sans-serif !important;
}

html{
	overflow-x: hidden;
}
body{
	margin-left: 0;
	margin-right: 0;
	background: #011827;
	color: #fff;
	
}
header {
    position: fixed;
    width: 100%;
	color: white;
    filter: contrast(1);
    mix-blend-mode: difference;
}

h2, p{
	word-break: break-word;
}
#scroll-btn{
	position: fixed;
	right: 0;
	bottom: 40px;
	mix-blend-mode: difference;
    filter: invert(1);
}
@media screen and (min-width: 992px){
	#scroll-btn{
		right: 20px;
	}
}
#scroll-btn span{
	color: #011827;
    display: block;
    font-size: 20px;
    transform: rotate(90deg) translateY(-15px) translateX(-14px);
}
#scroll-btn img{
	transform: rotateZ(90deg) translateX(9px);
	width: 46px;
}
#social-media-fix{
	position: fixed;
	left: 20px;
	bottom: 20px;
	width: 25px;
	mix-blend-mode: difference;
    filter: invert(1);
	z-index: 100
}
#social-media-fix ul{
	list-style: none;
	padding: 20px 20px 0 20px;
}
#social-media-fix .social-media-item:last-of-type {
    margin-bottom: 0;
}
@media screen and (max-width: 992px){
	#social-media-fix ul{
		padding-left: 0;
		width: calc(100vw - 60px);
		display: flex;
		gap: 15px;
	}
	#social-media-fix ul li{
		margin-bottom: 0;
	}
}
#social-media-fix .social-media-item{
	width: 25px;
}
.text-centered{
	text-align: center;
}
img{
	width: 100%;
}
/* content */
.content {
    padding-top: 50px;
    padding-bottom: 100px;
	overflow-x: hidden;
}
/* content */


/* gallery */
.image-gallery .item{
	transition: .5s ease-in-out;
}
.image-gallery .item:hover{
	transform: scale(1.15);
}
.aspect-16-9{
	aspect-ratio: 16/9;
	object-fit: cover;
}
img:hover ~ span.image-caption{
	opacity: 1;
	margin-left: 0;
}
span.image-caption {
    opacity: 0;
    transition: .5s ease-in-out;
    margin-left: -10px;
	padding-top: 3px;
}
.gap-0 img{
	margin-bottom: -5px;
}
.row.containered .gap-0 span.image-caption,
.row.containered .col-lg-6 span.image-caption{
    position: absolute;
    left: -42px;
    bottom: 0;
    writing-mode: vertical-lr;
    font-size: 32px;
    line-height: 42px;
    color: #fff;
	transition: .8s ease-in;
}
.row.containered .col-lg-6:nth-of-type(2n) span.image-caption{
    right: -42px;
    left: auto;
}
/* end gallery */


/* text module */
.text-module h1{
	font-size: 48px;
    line-height: 60px;
}
section .text-module h2,
section.text-module h2{
	font-size: 42px;
    line-height: 54px;
}
.text-module *,
.text-left-image-right *,
.slider-module *,
.Banner *{
	font-family: "lightcool", sans-serif;
    font-weight: 100;
    letter-spacing: 1px;
    font-size: 32px;
    line-height: 48px;
	text-transform: uppercase;

}
section.smallBanner{
	padding-top: 5px;
	padding-bottom: 5px;
}
main section .row h2{
	font-family: "juniper", sans-serif;
}
.smallBanner h2{
	font-size: 60px;
    text-transform: uppercase;
	font-family: "juniper", sans-serif;
	font-weight: 100;
}
.smallBanner span{
	font-size: 32px;
	line-height: 62px;
	margin-top: auto;
}
@media screen and (max-width: 992px){
	.smallBanner h2{
		font-size: 40px;
	}
	.smallBanner span{
		font-size: 24px;
		line-height: 28px;
        padding-bottom: 12px;
	}
	.smallBanner .d-flex{
		flex-wrap: wrap;
	}
}
.tags-under-text{
	padding-top: 20px;
}
.tags-under-text span{
	font-size: 30px;
    line-height: 1.2;
}
@media screen and (max-width: 992px){
	.text-module *,
	.text-left-image-right *,
	.slider-module *{
		font-size: 32px;
		line-height: 48px;
		letter-spacing: 1px;

	}
	.tags-under-text span{
		font-size: 24px;
		line-height: 32px;
	}
}
@media screen and (min-width: 992px){
	.text-module .col-lg-9,
	.text-module .col-lg-10{
		text-align: right;
	}
	.tags-under-text{
		max-width: 45%;
    	margin-left: auto;
    	text-align: right;
		padding-top: 36px;
	}
}
/* end text module */
nav.logo{
	position: absolute;
	bottom: 50px;
	z-index: 1000;
}

.ul-unstyled{
	list-style: none;
	padding-left: 0;
}
.d-flex{
	display: flex;
}
.row{
	display: flex;
	flex-wrap: wrap;
}
.containered{
	max-width: 1200px;
	margin: auto;
}
.caption{
	margin: 20px 0;
	width: fit-content;
	padding: .5rem;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: 1px;
    font-weight: bold;
	text-transform: uppercase
}
.c-main{
	color: #d5cced; 
}
.c-pink{ 
	color:  rgb(255 105 180);	
}
.bg-grey{
	background: #D2CCBB
}
.hero-box.optionOne .caption-top{
	background: #D2CCBB;
	color: rgb(255 105 180);	
	position: absolute;
	top: 40px;
	left: 0;
}

a{
	color: white;
	font-weight: 14px;
	letter-spacing: 1px;
	line-height: 18px;
	text-transform: uppercase;
	text-decoration: none;
}
h1, 
.h1{
	font-size: 72px;
	line-height: 80px;
	text-transform: uppercase;
	letter-spacing: 0px;
	font-family: "juniper", sans-serif;
	font-weight: 100;
}
.uppercase{
	text-transform: uppercase;
}
a.link-btn:hover{
	border: 1px solid;
    padding: .5rem 2rem;
    margin-right: -2rem;
}
/* text-image module */
@media screen and (min-width: 992px){
	.one-col h2{
		color: #ffffff;
		font-size: 11.5vw;
		line-height: 11.5vw;
		margin: -3vw 0 -55px 0;	
	}
	.text-img-module.text-module .one-col h2 {
		transform: translate(-10px, 0);
	}
	.padding-text-module .one-col h2,
	.padding-text-module.row h2,
	.text-left-image-right .padding-text-module h2,
	.padding-text-module h1{
		margin-bottom: 0;
		font-size: 8rem;
        line-height: 9rem;
	}
	p{
		margin: 0;
	}
}
@media screen and (max-width: 992px){
	.text-img-module video{
		max-width: calc(100% - 40px);
	}
}
.vertical-text{
	writing-mode: tb;
	color: #3444a1;
    font-size: 20px;
    line-height: 1.5;
}
.text-left-image-right{
	position: relative;
	height: 100vh;
}
.text-left-image-right .p-absolute .z-bg.t-0.h-100{
	background: #7f81b5;
}
.text-left-image-right.fullwidth img{
	height: 100vh;
	object-fit: cover;
}

.boxed-section{
	padding: 2.5vw;
}

.full-width .col-lg-12{
	Position: absolute;
	z-index: -1;
	top:0;
	left:0;
}
.full-width .col-lg-12 img{
	object-fit: cover;
}
.text-img-module.img-right .col-lg-6{
	margin-left: auto;
	min-width: auto;
	position: relative;
}
.text-img-module.img-right .col-lg-6 img{
	margin-left: -40px;
	order: 2;
}
.text-img-module.img-right .col-lg-6 .vertical-text{
	position: absolute;
	left: -70px;
}
@media screen and (max-width: 992px){
	.text-img-module.text-module img.ml-4.mt-3{
		max-width: 100% !important;
		margin-top: 20px;
	}
	.text-img-module.img-right .col-lg-6 .vertical-text{
		margin-left: 0 !important;
		left: 0;
	}
	.text-img-module .col-lg-6{
		flex-wrap: wrap;
	}
	.text-img-module .col-lg-6 .vertical-text{
		writing-mode: lr;
		margin-top: 0;
		order: 2;
		margin-left: 0;
	}
}
.text-left-image-right.fullwidth{
	min-height: 600px;
}
.text-left-image-right.fullwidth .col-lg-12 img{
	min-height: 100%;
}
.text-left-image-right.fullwidth{
	padding-bottom: 160px;
	height: 100%;
}
.text-left-image-right.fullwidth .col-lg-3,
.text-left-image-right.fullwidth .cta{
	margin-left: auto;
}
.cta{
	width: fit-content;
}
@media screen and (min-width: 768px) and (max-width: 1600px){
	.text-left-image-right.fullwidth .col-lg-3.r-3vw{
		min-width: 500px;
	}
}
.text-img-module.text-module img.ml-4.mt-3{
	width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: auto;
}
.three-imgs-row img{
	aspect-ratio: 16 / 10.5;
    object-fit: cover;
    object-position: center;
}
.three-imgs-row img ~ div{
	mix-blend-mode: difference;
	font-size: 18px;
	line-height: 24px;
	opacity: 0 !important;
	margin-left: -20px;
	transition: .7s ease-in-out;
	transform: translateY(-20px);
}
.three-imgs-row img:hover ~ div{
	opacity: 1 !important;
	margin-left: 0;
	transform: translateY(0);
}

@media screen and (max-width: 1200px){
	.text-left-image-right.fullwidth .col-12.col-lg-3{
		left: 0;
        max-width: 94vw;
        min-width: 94vw;
	}
	.text-img-module.text-module img.ml-4.mt-3{
		margin-left: 0;
		max-width: calc(100% - 36px);
	}
	.text-img-module.img-right .col-lg-6 .vertical-text{
		position: relative;
		margin-left: -11px;
	}
	.text-left-image-right.fullwidth .col-lg-3.r-3vw{
		margin-left: 0;
		margin: 0;
		min-width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        padding: 20px;
	}
}
.mirrored{
	transform: rotate(-180deg);
}
.big-h h2{
	margin-top: 0;
	font-size: 15vw;
    line-height: 15vw;
    margin-bottom: 0;	
}

/*scroll gallery */
@media screen and (min-width: 992px){
	.md-no-flex{
		flex-wrap: nowrap;
	}
}

/* play button */
video:hover{
	cursor: url('/images/Allgemein/play.png'), auto;
}


/* Contact */
.contact-module .freeform-fieldtype-text,
.contact-module .freeform-fieldtype-textarea{
	display: block;
	margin-bottom: 20px;
}
.contact-module form{
    list-style: none;
	min-width: 100%;
	margin-top: 10px;
}
@media  screen and (min-width: 996px) {
	.contact-module form{
		min-width: 800px;
	}
}

.contact-module form .input-box, 
.contact-module form textarea{
    margin-top: -5px;
}
.contact-module form textarea{
	height: 150px;
    overflow-y: scroll;
    font-size: 42px;
    line-height: 72px;
}
.contact-module form input,
.contact-module form textarea{
	background: none;
    border: 2px solid #3444a1;
	text-transform: none !important;
}
.contact-module form button.btn-primary{
	padding-left: 0;
	padding-right: 0;
	border: none;
	color: #3444a1;
	background: none;
}
.contact-module form button.btn-primary:hover{
	color: #fff;
	background: #3444a1;
	cursor: pointer;
}
.contact-module div[data-freeform-controls]{
	justify-content: left;
}
@media screen and (min-width: 1200px){
	.contact-module{
		padding-top: 40px;
	}
	.contact-module form{
		max-width: 800px;
		margin: auto;
	}
	.contact-module form input{
		min-width: 800px;
		padding: 5px 30px;
	}
	.contact-module form textarea{
		width: 805px;
		padding: 20px 30px;
	}
}



/* project-list */
.project-list{
	min-height: 100vh;
	height: fit-content;
}
.project-list h2{
	font-size: 72px;
    line-height: 80px;
    text-transform: uppercase;
    letter-spacing: 0px;
    font-family: "juniper", sans-serif;
    font-weight: 100;
	margin-bottom: 5px;
}
.project-list p{
	margin-top: 5px;
}
.project-loop-box img{
	max-height: 50vh;
}
.project-list .col-lg-6:last-of-type .project-loop-element-img,
.project-list .col-lg-8:last-of-type .project-loop-element-img{
	opacity: 0;
	transition: 1s ease-in;
}
.project-list .col-lg-6:last-of-type .project-loop-element-img.hovered,
.project-list .col-lg-8:last-of-type .project-loop-element-img.hovered{
	opacity: 1;
}

[class^="project-loop-element-"] {
	z-index: 1;
	padding: .3rem 1rem;
}
.z-10{
	z-index: 10;
}



.project-list h3{
	margin-bottom: 0;
	margin-top: 1rem;
}
.project-list p{
	margin-top: 0;
	font-size: 18px;
	line-height: 24px;
}
.project-list svg{
	z-index: 10;
    position: absolute;
	filter: drop-shadow(4px 6px 8px black);
}
@media screen and (min-width: 992px){
	.project-list svg{
		top: -40px;
		right: -40px;
	}
}
.project-list .hovered svg path{
	fill: none !important;
}

.project-list .hovered path {
   stroke-dasharray: 800;
   stroke-dashoffset: 800;
   animation: draw 1s linear forwards;
}

.project-list .hovered path#p-id-1 { animation-delay: 0s; }
.project-list .hovered path#p-id-2 { animation-delay: .5s; }
.project-list .hovered path#p-id-3 { animation-delay: 1s; }
.project-list .hovered path#p-id-4 { animation-delay: 1.5s; }
.project-list .hovered path#p-id-5 { animation-delay: 2s; }
.project-list .hovered path#p-id-6 { animation-delay: 2.5s; }
.project-list .hovered path#p-id-7 { animation-delay: 3s; }
.project-list .hovered path#p-id-8 { animation-delay: 3.5s; }
.project-list .hovered path#p-id-9 { animation-delay: 4s; }
.project-list .hovered path#p-id-10 { animation-delay: 4.5s; }

@keyframes draw {
   to {
     stroke-dashoffset: 0;
   }
}


/* impressum / datenschutz*/
.impressum main *,
.datenschutz main *{
	color: black;
}
.datenschutz main h2{
	margin-top: 40px;
}

/* form */
section.contact-module form input{
	min-width: 100%;
}

/* three js */
canvas.three-bg ~ section p,
canvas.three-bg ~ section span,
canvas.three-bg ~ section h3,
canvas.three-bg ~ section h2,
canvas.three-bg ~ section h1,
canvas.three-bg ~ section strong,
canvas.three-bg ~ section h4,
canvas.three-bg ~ section form{
   position: relative;
}

canvas.three-bg{
	transition: 2s ease-in-out;
}

canvas.three-bg {
	position: fixed;
	top: 0 !important;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	z-index: 0;
	pointer-events: none;
}
.section-bg-box{
	position:absolute;
	height: 100%;
	width: 100%;
	z-index: -1;
	top:0;
}
html{
	scroll-behavior: smooth !important;
}
section.contact-module{
	padding-bottom: 40px;
	padding-left: 5vw;
	padding-right: 5vw;
}
section.project-list{
	padding-bottom: 40px;
}
section{
	position: relative;
}
section.hero-module.optionTwo.bg-loaded{
	margin-bottom: 120px;
}
.freeform-row .freeform-label{
	color: #fff;
}

.skill-box{
	padding: 10px;
	margin-bottom: 20px;
	border-left: none !important;
	transform: scaleX(0) translateY(-80px) !important;
	transition: 2s ease-in-out;
	transition-delay: 1s;
}
.skill-box.is-visible{
	transform: scaleX(1) translateY(0) !important;
}
.diagram-box{
	padding-left: 40px;
    padding-bottom: 20px;
    margin-top: 40px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
}