@font-face { font-display: swap; font-family: 'DINNextLTPro-Black'; src: url('../fonts/38D58E_0_0.eot');src: url('../fonts/38D58E_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/38D58E_0_0.woff2') format('woff2'),url('../fonts/38D58E_0_0.woff') format('woff'),url('../fonts/38D58E_0_0.ttf') format('truetype');}
@font-face { font-display: swap; font-family: 'DINNextLTPro-Regular'; src: url('../fonts/38D58E_1_0.eot');src: url('../fonts/38D58E_1_0.eot?#iefix') format('embedded-opentype'),url('../fonts/38D58E_1_0.woff2') format('woff2'),url('../fonts/38D58E_1_0.woff') format('woff'),url('../fonts/38D58E_1_0.ttf') format('truetype');}

/*
colors:
Orange: #FFA700
Dark grey: #312B22
*/

* { font-family: "DINNextLTPro-Regular", sans-serif; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { font-size: 25px; line-height: 1.2em; }
body { margin: 0; color: #312B22; animation-duration: 1s; animation-fill-mode: both; animation-delay: .5s; -webkit-animation-name: fadeIn; animation-name: fadeIn; }

.page-container { max-width: 100%; overflow-x: hidden; }

@media(min-width: 2000px) {
	html { font-size: 28px; }
}

@media(max-width: 1200px) {
	html { font-size: 24px; }
}

@media(max-width: 768px) {
	html { font-size: 19px; }
}

@media(max-width: 400px) {
	html { font-size: 17px; }
}

/*sections*/
.section { position: relative; padding: 0; z-index: 90; }
.section > .container-fluid { margin: 0 auto; padding: 0; z-index: 110; }
.section > .container-fluid.padding-x { padding: 0 8vw; }

.section-full-viewport { min-height: 100vh; }

.section-first > .container-fluid { margin-top: 8rem; }

.section-bg-fixed { background-position: center; background-size: cover; background-repeat: no-repeat; position: fixed; width: 100%; height: 100%; top: 0; left 0; z-index: 10; }
.section-bg-fixed video {
	position: fixed;
	right: 0;
	bottom: 0;
	top: 0;
	min-width: 100vw;
	min-height: 100%;
	transform: translateX(calc((100% - 100vw) / 2));
	overflow: hidden;
	object-fit: cover;
}

.section.section-textonly { }
	.section.section-textonly > .container-fluid { margin-right: 250px; }

@media(max-width: 992px) {
	.section.section-textonly > .container-fluid { margin-right: 40px; }
}

@media(max-width: 576px) {
	.section > .container-fluid.padding-x { padding: 0 2rem 0 1rem; }
}

/*navigation*/

	/*navi links*/
	ul.navi { list-style-type: none; margin: 0; padding: 0; }
		ul.navi li { }
		ul.navi li a { text-transform: uppercase; font-family: "DINNextLTPro-Black", sans-serif; text-decoration: none; font-size: 1.5rem; line-height: 1.3em; color: #FFFFFF; position: relative;
																-webkit-transition: opacity .5s, color .2s; transition: opacity .5s, color .2s; transition-timing-function: ease-out; }
		ul.navi li a:hover { opacity: .8; }

		ul.navi li.active a { color: #FFA700; }

		ul.navi.bg-orange li a { }
		ul.navi.bg-white li a { color: #312B22; }
		ul.navi.bg-white li a:hover { color: #FFA700; }
		ul.navi.bg-orange li.active a { color: #312B22; }

		#navibar-overlay ul.navi li a { font-size: 2rem; margin-right: -150%; }
		#navibar-overlay ul.navi li a:hover { color: #312B22; }
		#navibar-overlay ul.navi li.active a { color: #312B22; }

	/*navi buttons*/
	.btn-show-navi { display: none; position: fixed; top: 3rem; right: 2rem; z-index: 5000; cursor: pointer; -webkit-transition: opacity .5s; transition: opacity .5s; transition-timing-function: ease-out; }
		.btn-show-navi i { color: #FFFFFF; font-size: 2.5rem; }
		.btn-show-navi:hover { opacity: .7; }

	.btn-hide-navi { top: 1rem; right: 2rem; z-index: 5000; cursor: pointer; -webkit-transition: opacity .5s; transition: opacity .5s; transition-timing-function: ease-out; }
		.btn-hide-navi i { color: #FFFFFF; font-size: 2.5rem; }
		.btn-hide-navi:hover { opacity: .7; }

	.btn-show-navi-scrolled { display: none; padding: 1rem; top: 0; right: 0; background-color: #FFA700; }
	.btn-show-navi-scrolled:hover { opacity: .8; }
		.btn-show-navi-scrolled i { color: #FFFFFF; font-size: 2.5rem; }
		.btn-show-navi-scrolled:hover i { color: #FFFFFF; }

	@media( max-width: 576px ) {
		.btn-show-navi { top: 2.2rem; }
		.btn-hide-navi { top: 0; }
	}

	#navibar { position: absolute; top: 0; right: 0; z-index: 10000; }

		/*navibar background variations*/
		#navibar.bg-white {}
			#navibar.bg-white .btn-show-navi i { color: #312B22; }

			#navibar.bg-white ul.navi li a { color: #312B22; }
			#navibar.bg-white ul.navi li a:hover { color: #FFA700; }

			#navibar.bg-orange ul.navi li.active a { color: #312B22; }

	#navibar-overlay { display: none; position: fixed; width: 400px; height: 100%; z-index: 10000; top: 0; right: 0; padding: 2rem 2rem; background-color: #FFA700; animation-name: navi-overlay-show; animation-duration: 1s; }
		#navibar-overlay:before { content: ' '; display: block; position: fixed; width: calc(100vw - 400px); height: 100%; left: 0; top: 0; z-index: 10000; background-color: rgba(0,0,0,.7); }

		#navibar-overlay .btn-hide-navi { display: inline-block; }
		#navibar-overlay .navibar-content { padding: 4rem 0; }  

	@media( max-width: 992px ) {
		#navibar .navibar-content { display: none; }
		.btn-show-navi { display: inline-block; }
	}

	@media( max-width: 768px ) {
		#navibar-overlay { width: 330px; }
			#navibar-overlay:before { width: calc(100vw - 330px); }
	}

/*Footer*/
.section-footer { z-index: 99; background: url(/assets/images/bg-hafen-footer.svg) bottom right no-repeat, #312B22; background-size: 30vw; }
	.section-footer > .container-fluid { min-height: 40vw; }

.section-footer-image:before { position: absolute; content: ' '; background: url(/images/corax-schiff.jpg) center center no-repeat; background-size: cover; top: 0; left: 0; height: 100%; width: 50%; }
.section-footer-logentry:before { position: absolute; content: ' '; background-color: #FFFFFF; top: 0; left: 0; height: 100%; width: 50%;  }

@media(max-width: 992px) {
	.section-footer-image:before { display: none; }
}

@media(max-width: 992px) {
	.section-footer { background-size: 45vw; }
	.section-footer-logentry:before { display: none; }
}

/*logo address line vertical*/
.logo-main { position: fixed; top: 3rem; left: 3rem; max-width: 14rem; width: 45%; height: auto; z-index: 10000; }

#page-contact-vertical { position: fixed; left: 2rem; bottom: 2rem; z-index: 100; transform: rotate(-90deg); transform-origin: bottom left; font-size: .8rem; }

@media( max-width: 1024px ) {
	#page-contact-vertical { left: 2rem; }
}

@media( max-width: 576px ) {
	#page-contact-vertical { font-size: .8rem; width: 80vh; left: calc(100% - .2rem); transform-origin: bottom left; }
	.logo-main { top: 2.4rem; height: 2.1rem; width: auto; left: 1.8rem; }
}

/*colors*/
.bg-color-darkgrey { background-color: #312B22; }
.bg-color-orange { background-color: #FFA700; }
.bg-color-white { background-color: #FFFFFF; }
.bg-color-lightgrey { background-color: #F9F9F9; }

.text-color-darkgrey { color: #312B22; }
.text-color-orange { color: #FFA700; }
.text-color-white { color: #FFFFFF; }

/*general styles*/
.img-fluid-full { position: relative; width: 100%; height: auto; }

/*typo*/
p { max-width: 900px; }

@media(max-width: 576px) {
	p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
}

h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 *, h5, h5 *, h6, h6 * { font-family: "DINNextLTPro-Black", sans-serif; margin-bottom: 1rem; font-weight: normal; max-width: 900px; }
h1 { font-size: 4.8rem; line-height: 1em; }
h1.xlarge { font-size: 6rem; line-height: 1em; line-height: 1em; }
h2 { font-size: 3.6rem; line-height: 1.1em; }
h3 { font-size: 2.4rem; line-height: 1.1em; }
h4 { font-size: 1.6rem; line-height: 1.2em; }
h5 { font-size: 1.6rem; line-height: 1.2em; }
h6 { font-size: 1.6rem; line-height: 1.2em; }

.use-hyphen { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

@media(max-width: 1024px) {	
	h1.xlarge { font-size: 4rem; }
	h1 { font-size:3rem; }
	h2 { font-size:2.5rem; }
	h3 { font-size:2rem; }
	h4 { font-size:1.5rem; }
	h5 { font-size:1.5rem; }
	h6 { font-size:1.5rem; }
}

@media(max-width: 768px) {
	h1.xlarge { font-size: 2.8rem; }
	h1 { font-size:2.5rem; }
	h2 { font-size:2.0rem; }
	h3 { font-size:1.7rem; }
	h4 { font-size:1.4rem; }
	h5 { font-size:1.4rem; }
	h6 { font-size:1.4rem; }
}

a { color: #FFA700; }

@media (hover: hover) {
		a:hover { color: #FFA700; text-decoration: none; transition: opacity .3s ease-out, color .3s ease-out; }
}

a img { transition: opacity .3s ease-out, color .3s ease-out; }
a:hover img { opacity: .8; }

a.text-color-white:hover { color: #FFFFFF; opacity: .8; }
a.text-color-orange:hover { opacity: .9; }
a.text-color-darkgrey:hover { color: #FFA700; }

.text-small { font-size: .9rem; line-height: 1.3em; }
.text-larger { font-size: 1.1rem; line-height: 1.2em; }
.text-large { font-size: 1.4rem; line-height: 1.4em; }

.text-uppercase { text-transform: uppercase; }

@media(max-width: 576px) {
	.text-large { font-size: 1.2rem; }
}

strong { font-family: "DINNextLTPro-Black", sans-serif; font-weight: normal; }
.text-weight-black { font-family: "DINNextLTPro-Black", sans-serif; }

ul.styled-list { margin: 0; padding: 0; list-style-type: none; margin-bottom: 1.4rem; } 
	ul.styled-list li { display: block; padding-left: .6rem; position: relative; margin-bottom: .3rem; }
	ul.styled-list li:before { content: '_'; position: absolute; left: 0; top: -.1em; }

	ul.styled-list-orange li { padding-left: 1rem; }
	ul.styled-list-orange li:before { font-family: "DINNextLTPro-Black", sans-serif; color: #FFA700; }

/*forms*/
.btn { border-radius: 0; line-height: 1em; padding: .85rem 1rem .75rem 1rem; -webkit-transition: background-color .5s; transition: background-color .5s; transition-timing-function: cubic-bezier(.23,.66,.7,.95); }

.btn.bg-color-darkgrey { color: #FFA700; border: 1px solid #FFA700; }
.btn.bg-color-darkgrey:hover { background-color: #FFA700; color: #312B22; }

.btn.bg-color-darkgrey.text-color-white { color: #FFFFFF; border: 0px none; }
.btn.bg-color-darkgrey.text-color-white:hover {background-color: #312B22; opacity: .8; -webkit-transition: opacity .5s; transition: opacity .5s; transition-timing-function: cubic-bezier(.23,.66,.7,.95); }

.btn.bg-color-orange { background-color: #FFA700; border: 1px solid #FFFFFF; }
.btn.bg-color-orange:hover { background-color: #FFFFFF; color: #FFA700; } 

.btn.bg-color-white { background-color: #FFFFFF; border: 1px solid #FFA700; }
	.btn.bg-color-white:hover { background-color: #FFA700; color: #FFFFFF; }

.btn.bg-color-lightgrey { background-color: #F9F9F9; border: 1px solid #FFA700; }
	.btn.bg-color-lightgrey:hover { background-color: #FFA700; color: #FFFFFF; }

.form-control { width: 100%; }

/*tiles*/
	.tile-landscape, .tile-square, .tile-portrait { padding: 0 !important; }
	.tile-landscape:after { display: block; content: ""; padding-bottom: calc( 100% / 2); }
	.tile-square:after { display: block; content: ""; padding-bottom: calc( 100% * 1); }
	.tile-portrait:after { display: block; content: ""; padding-bottom: calc( 100% * 2); }
	
	.tile-width-half, .tile-width-third,.tile-width-twothird { padding: 0 !important; }
	.tile-width-half:after { display: block; content: ""; padding-bottom: calc( 100%); }
	.tile-width-third:after { display: block; content: ""; padding-bottom: calc( 100%); }
	.tile-width-twothird:after { display: block; content: ""; padding-bottom: calc( 100% / 3 * 2); }

/*animations*/
.animate { animation-duration: 1s; animation-fill-mode: both; animation-delay: .5s;}

.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }

.animated-inview { }

@-webkit-keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -2rem, 0);
        transform: translate3d(0, -2rem, 0);
				visibility: hidden; 
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
				visibility: visible;
    }
}

@keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -2rem, 0);
        transform: translate3d(0, -2rem, 0);
				opacity: 0; 
        visibility: hidden;
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
				opacity: 1; 
				visibility: visible;
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        -webkit-transform: translate3d(0, 2rem, 0);
        transform: translate3d(0, 2rem, 0);
        visibility: hidden;
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
				visibility: visible;
    }
}

@keyframes fadeInUp {
    0% {
        -webkit-transform: translate3d(0, 2rem, 0);
        transform: translate3d(0, 2rem, 0);
				opacity: 0; 
        visibility: hidden;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
				opacity: 1; 
				visibility: visible;
    }
}


@-webkit-keyframes fadeIn {
    0% {
        opacity: 0; 
        visibility: hidden;
    }

    to {
        opacity: 1; 
				visibility: visible;
    }
}

@keyframes fadeIn {
    0% {
				opacity: 0; 
        visibility: hidden;
    }

    to {
				opacity: 1; 
				visibility: visible;
    }
}

/*content elements*/

	/*videos*/
	.responsive-video { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden; }
	.responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

	/*accordeon*/
	.accordeon-item {}
		.accordeon-item-headline { cursor: pointer; -webkit-transition: color .3s; transition: color .3s; transition-timing-function: cubic-bezier(.23,.66,.7,.95); }
		.accordeon-item-headline:hover { color: #FFA700; }

		.accordeon-item-content { display: none; }

		.accordeon-item.active .accordeon-item-headline { color: #FFA700; }

	/*start*/
	#section-start-welcome { background-position: center; background-size: cover; background-repeat: no-repeat; }
		#section-start-welcome:before { content: ' '; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.4); }

	.start-projects-slides { position: relative; }
		.start-projects-slides .slide { height: 35vw; position: relative; }
		.start-projects-slides .slide .slide-text { background-color: rgba(0,0,0,.6); position: absolute; font-family: "DINNextLTPro-Black", sans-serif; text-transform: uppercase; color: #FFFFFF; bottom: 2rem; left: 0; padding: .5em 1.5em .5em 2em; font-size: 1.8rem; line-height: 1em !important; max-width: 90%; }
		.start-projects-slides .slide img { display: block; height: 100%; width: auto; position: relative; }

		.start-projects-slides .slick-next, .start-projects-slides .slick-prev { border: 1px solid transparent; margin-top: 0; top: 0; width: 10vw; z-index: 100; height: 100% !important; text-align: center; position: absolute; transform: none; }
		.start-projects-slides .slick-next { margin-right: 0; right: 0; }
		.start-projects-slides .slick-prev { margin-left: 0; left: 0; }
		.start-projects-slides .slick-next:before { content: ''; }
		.start-projects-slides .slick-prev:before { content: ''; }
		.start-projects-slides .slick-slider { margin-bottom: 0 !important; }

	@media(max-width: 1200px) {
		.start-projects-slides .slide .slide-text { font-size: 1.2rem; bottom: 1rem; } 
	}

	@media(max-width: 576px) {
		.start-projects-slides .slide { width: 100vw; height: auto; }
		.start-projects-slides .slide img { width: 100%; height: auto; }
	}

	/*jobs*/
	#section-jobs-opener {  }
		
		#section-jobs-opener .section-bg-fixed { background: url(/assets/images/hafenluemmel.svg) right bottom -4rem no-repeat; background-size: 50% auto; }

		.jobs-slider {}
			.job-slide { text-align: center; padding: 4rem; } 
				.job-slide .statement { font-size: 1.4rem; line-height: 1.2em; font-family: "DINNextLTPro-Black", sans-serif; }
				.job-slide .author { font-size: .9rem; }
				.job-slide .answer { margin-top: 1rem; }

		.jobs-slider .slick-next, .jobs-slider .slick-prev { background-color: none; width: 4rem; height: 3rem; top: calc(50% - 2rem); z-index: 100; text-align: center; position: absolute; transform: none; }
		.jobs-slider .slick-next { margin-right: 0; right: -2rem; }
		.jobs-slider .slick-prev { margin-left: 0; left: -2rem; }
		.jobs-slider .slick-next:before { content: '\f178'; font-family: 'Font Awesome 5 Pro'; color: #FFA700; font-size: 3rem; font-weight: 100; }
		.jobs-slider .slick-prev:before { content: '\f177'; font-family: 'Font Awesome 5 Pro'; color: #FFA700; font-size: 3rem; font-weight: 100; }
		.jobs-slider .slick-slider { margin-bottom: 0 !important; }

	@media(max-width: 768px) {
		#section-jobs-opener .section-bg-fixed { background: url(/assets/images/hafenluemmel.svg) right bottom -4rem no-repeat, #312B22; background-size: auto 50vh;}
	}

	@media(max-width: 576px) {
		.job-slide { padding: 0; padding-top: 4rem; }
		.jobs-slider .slick-next { right: -1rem; }
		.jobs-slider .slick-prev { left: -1rem; }
		.jobs-slider .slick-next, .jobs-slider .slick-prev { top: 0; }
	}

	@media(min-width: 1800px) {
		#section-jobs-opener .section-bg-fixed { background-size: 40% auto;}
	}

	/*agency*/
	#section-agency-intro { }
		#section-agency-intro:before { content: ' '; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.6); z-index: 30; }

		.competences-item { position: relative; margin-bottom: 2rem; padding-left: 2rem; }
			.competences-item-headline { cursor: pointer; -webkit-transition: color .3s; transition: color .2s; transition-timing-function: cubic-bezier(.23,.66,.7,.95); position: relative; }
			.competences-item-headline h2 { display: block; position: relative; }
			.competences-item-headline h2:before { content: '_'; position: absolute; left: -.7em; bottom: .2em; } 
			.competences-item-headline:hover { color: #FFFFFF; }
			.competences-item-content { display: none; }

		.competences-item.active { }
			.competences-item.active h2 { color: #FFFFFF !important; }

	@media( max-width: 768px ) {
		.competences-item { margin-bottom: 1rem; }
	}

	@media( max-width: 576px ) {
		.competences-item-headline * { font-size: 1.9rem !important; }
	}

	#section-agency-name {}
		#section-agency-name .smiley { position: absolute; display: block; bottom: -5rem; right: -3rem; max-height: 100%; max-width: 45%; height: auto; width: auto; z-index: 1000; }

	@media( max-width: 992px ) {
		#section-agency-name { padding-bottom: 40vw !important; }
		#section-agency-name .smiley { bottom: -4rem; right: 0; max-height: 60vw; max-width: 100%; }
	}

	#section-agency-focus {}
		.text-agency-focus { }
		.agency-letter { position: absolute; top: -12vw; right: -9vw; width: 40vw; height: auto; }

		@media( max-width: 768px ) {
			.text-agency-focus { padding-top: 25vw; }
		}

	/*logbuch*/
	#section-logbuch-intro { }
		#section-logbuch-intro:before { content: ' '; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.6); z-index: 30; }

	.section-logbuch-entry { padding-top: 30vw !important; }
		.section-logbuch-entry p, .section-logbuch-entry h1, .section-logbuch-entry h2, .section-logbuch-entry h4, .section-logbuch-entry h4, .section-logbuch-entry .container-fluid img { max-width: 1024px; }

	/*team*/
	#section-team-intro { background: url(/assets/images/corax-c.png) bottom -11vw right -4vw no-repeat, #FFA700; background-size: 30vw; }

	.image-tile-team { display: block; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; }
		.image-tile-team .image-tile-text { width: 70%; padding-left: 15% !important; position: absolute; bottom: 2rem; left: 0; padding-right: 3rem; background-color: rgba(49,43,34,.7); }
		.image-tile-team .image-tile-text-details { display: none; }

	@media(max-width: 740px) {
		#section-team-intro { background-size: 50vw; }
	}


	/*contact*/
	#section-contact-intro {  } 

	.contact-link { }
		.contact-link .icon { font-size: 4rem; color: #312B22; }
		.contact-link .label { color: #312B22; display: block; margin-top: .4rem; }

	.contact-link:hover * { color: #FFA700; -webkit-transition: color .5s; transition: color .5s; }

	/*project overview*/
	.project-overview { }

	.image-tile-project-overview { background-position: center center; background-repeat: no-repeat; background-size: cover; }
		.image-tile-project-overview .image-tile-text { position: absolute; z-index: 100; width: 100%; height: 100%; left: 0; top: 0; padding-top: 2rem; text-shadow: 1px 1px rgba(0,0,0,0.5); }
		
	.image-tile-project-overview .image-tile-text-hovered * { color: #FFA700; } 
		.image-tile-project-overview .image-tile-text-hovered { color: #FFA700; padding-bottom: 2rem; display: none; z-index: 50; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(49,43,34,.7); }
		.image-tile-project-overview .image-tile-text-hovered .image-tile-text-details { display: block; width: 100%; }
		a.image-tile-project-overview .image-tile-text-hovered:after { content: '\f178'; font-weight: 100; position: absolute; bottom: 1rem; right: 2rem; font-size: 2rem; font-family: 'Font Awesome 5 Pro'; color: #FFA700; }

		.col-sizer {  }
		.gutter-sizer { width: 0; }

	/*project detail*/
	.section-project-mood { padding-top: 15rem !important; }
		.section-project-mood:before { content: ' '; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.6); z-index: 30; }
		.section-project-mood .container-fluid { z-index: 100; }
		

		/*Website Mockup*/
		.project-container-website-mockup { position: relative; margin: 0 10% 4rem 10%; }
			.website-mockup-image { position: absolute; width: auto; height: 67.6%; top: 5.35%; right: 5.8%; left: 5.8%; overflow-y: scroll; display: block; }
				.website-mockup-image a:hover img { opacity: 1; }

		/*Letters*/
		.project-letter { position: absolute; top: -12vw; right: -9vw; width: 30vw; height: auto; max-height: 600px; }

		@media(max-width: 576px) {
			.project-letter { top: -20vw; right: -5vw; width: 35vw; }
		}

		/*Image tiles*/
		.image-tile-project-detail { display: block; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; }

			.image-tile-project-detail .image-tile-text { padding-left: 10% !important; position: absolute; bottom: 2rem; left: 0; margin-right: 2rem; padding-right: 3rem; background-color: rgba(49,43,34,.7); }
			.image-tile-project-detail .image-tile-text-details { display: none; }

		@media(max-width: 768px) {
			.image-tile-project-detail .image-tile-text { bottom: 1rem; }
		}

		@media(max-width: 592px) {
			.image-tile-project-detail .image-tile-text { padding-top: 1rem !important; padding-bottom: 0 !important; }
			.image-tile-project-detail .image-tile-text * { font-size: .9rem; }

		}

		/*Slider*/
		.project-imageslider .slick-next, .project-imageslider .slick-prev { background-color: none; width: 4rem; height: 3rem; top: calc(50% - 2rem); z-index: 100; text-align: center; position: absolute; transform: none; }
		.project-imageslider .slick-next { margin-right: 0; right: 2rem; }
		.project-imageslider .slick-prev { margin-left: 0; left: 2rem; }
		.project-imageslider .slick-next:before { content: '\f178'; font-family: 'Font Awesome 5 Pro'; color: #FFA700; font-size: 3rem; font-weight: 100; }
		.project-imageslider .slick-prev:before { content: '\f177'; font-family: 'Font Awesome 5 Pro'; color: #FFA700; font-size: 3rem; font-weight: 100; }
		.project-imageslider .slick-slider { margin-bottom: 0 !important; }

		.project-imageslider .slides {  }
		.project-imageslider .slick-slide { height: 30vw; min-height: 350px; }
		.project-imageslider img { height: 100%; width: auto; }

		@media(max-width: 576px) {
			.project-imageslider .slick-next { right: 1rem; }
			.project-imageslider .slick-prev { left: 1rem; }
		}

		/*Slider with padding-top and -bottom*/
		.project-imageslider.padding .slick-slide { height: 20vw; }
		#section-agency-gallery.padding { background-color: #004f9f; height: 25vw; padding-top: 2.5vw!important; }

	/*Clients*/
	.section-client-intro { min-height: 60vh; }
	
	.client-list { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 3rem; -moz-column-gap: 3rem; column-gap: 3rem; }
		.client-list-item { margin-bottom: 1em; display: block; position: relative; padding-left: .6em; line-height: 1.1em; }
		.client-list-item:before { content: '_'; color: #FFFFFF; position: absolute; left: 0; top: 0; } 

	@media(max-width:1200px) {
		.client-list { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
	}

	@media(max-width:576px) {
		.client-list { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
	}

	/*Customer specific*/

		/*stn*/
		#section-project-stn-abba { background: url(/images/referenzen/stn/content-10-erneuerbare-Energien-stn-Husum-Corax-Grafikdesign-Werbeagentur.png) top right no-repeat, #DB332A; background-size: 55%; border-bottom: 1rem solid #FFF; }
		
		@media(max-width:768px) {
			#section-project-stn-abba { padding-top: 70vw !important; background-size: auto 75vw; }
		}

		.bg-color-stn { background-color: #DB332A; }

		/*De Kollunder*/
		#section-project-kollunder-clothing { background: url(/images/referenzen/de-kollunder/vektor-4-kleidung-Lieferservice-De-Kollunder-Husum-Corax-Grafikdesign-Werbeagentur.jpg) bottom 0 left -5% no-repeat, 
																										url(/images/referenzen/de-kollunder/vektor-3-kleidung-Lieferservice-De-Kollunder-Husum-Corax-Grafikdesign-Werbeagentur.jpg) top 0 right -10% no-repeat, 
																										#E9E9E9; background-size: 17%, 17%; }
			#section-project-kollunder-clothing img { max-width: 350px; max-height: 350px; width: auto; height: auto; margin: 2rem; }
		
		#section-project-kollunder-website {}
			#section-project-kollunder-website .section { background: url(/images/referenzen/de-kollunder/vektor-1-website-Lieferservice-De-Kollunder-Husum-Corax-Grafikdesign-Werbeagentur.jpg) top 0 left -5% no-repeat, 
																										url(/images/referenzen/de-kollunder/vektor-2-website-Lieferservice-De-Kollunder-Husum-Corax-Grafikdesign-Werbeagentur.jpg) bottom 0 right -10% no-repeat, 
																										#9dac9e; background-size: 30%, 30%; }

		#section-project-kollunder-cars { background: 	url(/images/referenzen/de-kollunder/vektor-5-Fahrzeug-Lieferservice-De-Kollunder-Husum-Corax-Grafikdesign-Werbeagentur.jpg) top -1% left -3% no-repeat, 
																										url(/images/referenzen/de-kollunder/vektor-6-Fahrzeug-Lieferservice-De-Kollunder-Husum-Corax-Grafikdesign-Werbeagentur.jpg) top -6% right 30% no-repeat, 
																										url(/images/referenzen/de-kollunder/vektor-8-Fahrzeug-Lieferservice-De-Kollunder-Husum-Corax-Grafikdesign-Werbeagentur.jpg) bottom -6% left 30% no-repeat, 
																										url(/images/referenzen/de-kollunder/vektor-7-Fahrzeug-Lieferservice-De-Kollunder-Husum-Corax-Grafikdesign-Werbeagentur.jpg) bottom 0 right -7% no-repeat, 
																										#9dac9e; background-size: 15%, 15%, 15%, 15%; }

			#section-project-kollunder-cars img { width: auto; height: auto; max-width: 80%; max-height: 600px; margin: 3rem auto; }

		/*VR Bank Westküste*/
		#section-project-vr-kuestenclub-intro { background: url(/images/referenzen/vr-bank-westkueste/backgrounds/bg-muscheln.png) top -2rem right -10vw no-repeat, #FFFFFF; background-size: 35%; }

		#section-project-vr-kuestenclub-website { }
			#section-project-vr-kuestenclub-website .btn { background-color: #F9761B; }
			#section-project-vr-kuestenclub-website .section { 	background: url(/images/referenzen/vr-bank-westkueste/backgrounds/bg-flaschenpost.png) center center no-repeat,
																													 						url(/images/referenzen/vr-bank-westkueste/backgrounds/bg-aquarell.jpg) bottom left no-repeat, #FFFFFF; 
																													background-size: 90% auto, contain;  }

		#section-project-vr-appy-days { }
			#section-project-vr-appy-days .col-appydays-intro { background: url(/images/referenzen/vr-bank-westkueste/backgrounds/bg-appydays.png) bottom left no-repeat, #0059A9; background-size: contain; color: #FFFFFF; }

		@media(max-width: 768px) {
			#section-project-vr-appy-days .col-appydays-intro { min-height: 100vw; }
		}

		/*German pavilion*/
		.section-gp-text { background: url(/images/referenzen/bmwi/content-08-AMP-Deutscher-Pavilion-Husum-Corax-Grafikdesign-Werbeagentur.jpg) right center no-repeat; background-size: cover; }

.grid {
  display: grid!important;
	column-gap: 30px;
	row-gap: 30px;
}
.grid-col-2 {
  grid-template-columns: 1fr 1fr;
}
.grid-row-span-2 {
  grid-row: span 2;
}