@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-Regular.ttf") format("ttf")
}

@font-face {
	font-family: "Montserrat Bold";
	src: url("../fonts/Montserrat-Bold.ttf") format("ttf")
}

@font-face {
	font-family: "Montserrat Light";
	src: url("../fonts/Montserrat-Light.ttf") format("ttf")
}

* {
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
	font-size: 14.5px;

}

:root{
	--primary: #293a6f;
	--secondary: #ccc;
	--highlight: #6176a3;
	--light: #eeeeee;
}

html {
	scroll-behavior: smooth;
}

body, html {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	height: 10px;
	width: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);
	background-color: var(--secondary);
}

.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


p {
	margin-bottom: 1em;
	line-height: 1.5;
}

img {
	height: initial;
	max-width: 100%;
}

.white_color * {
	color: #fff;
}

header {
	align-items: center;
	display: flex;
	z-index: 200000;
	justify-content: space-between;
	padding: 20px;
	position: fixed;
	top: 0;
	width: 100%;
	left: 0;
}



@media screen and (max-width: 768px) {
	header #logo{
		display: block;
		width: 200px;
	}
}

#headerimage .container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


a {
	color: var(--primary);
	transition: all 300ms;
}

a:hover {
	color: var(--highlight);
}

main {
	min-height: calc(100vh - 196px);
}

@media screen and (min-width: 960px) {
	main, footer {
		margin-left: 270px;
	}
}
@media screen and (max-width: 959px) {
	main {
		margin-top: 80px;
	}
}

/*------------------------ HEADLINES ------------------ */


h1 {
	color: var(--primary);
	font-size: 4rem;
	text-transform: uppercase;
	display: table;
	position: relative;
}

h1:after {
	background-color: var(--highlight);
	display: block;
	content: '';
	height: 1px;
	margin-top: 12px;
	position: absolute;
	width: 70%;
}

h2, h2 span {
	color: var(--primary);
	font-size: 2.5rem;
	text-transform: uppercase;
}

h3 {
	color: var(--primary);
	font-size: 2rem;
	text-transform: uppercase;
}

h4 {
	color: var(--highlight);
	font-size: 1.6rem;
	text-transform: uppercase;
}

h1:after {
	width: 100%;
}


/*------------------------ HEADERIMAGE ------------------ */

#navigation #logo {
	max-width: 100px;
}


.headerimage {
	align-items: center;
	background-size: cover;
	background-position: center;
	display: flex;
	height: 30vh;
}
body:not(.home) .headerimage {
	background-blend-mode: luminosity;
	background-color: #ccc; /*var(--primary);*/
}


.headerimage h1, .headerimage h2 {
	max-width: 50%;
	margin-left: 30px;
	text-align: left;
	color: #fff;
}

#animationh2 {
	height: 132px;
	position: relative;
}


#animationh2 h2 {
	margin-top: 0;
	color: #fff;
}

#animationh2 h2 span {
	display: none;
	color: #fff;
}

#animationh2 h2 span:not(:first-child) {
	/*color: var(--highlight);*/
	opacity: 0.8;
}

.home .headerimage {
	height: 100vh;
}

@media screen and ( max-width:  767px ) {
	.headerimage h1, .headerimage h2 {
		margin: 0 10px;
	}

	.headerimage h1 {
		font-size: 2.2rem;
	}

	.headerimage h2,
		h2, h2 span {
	font-size: 1.8rem;
	}

	.home .headerimage {
		height: 50vh;
	}

	h1:after {
		margin: 6px 0;
		position: static;
		width: 100%;
	}
}

@media screen and ( max-width:  560px ) {
	.headerimage h1 {
		font-size: 2rem;
	}

	.headerimage h2,
	h2, h2 span {
		font-size: 1.6rem;
	}
}

body:not(.home) .headerimage h1 {
	color: #fff;
	margin: 0 auto;
	text-align: center;
	text-shadow: 1px 1px 2px #293a6f;
}

body:not(.home) .headerimage h1:after {
	left: 0;
	right: 0;
	margin: 0 auto;
}



ol li, main ul li {
	line-height: 1.5;
	margin-bottom: 15px;
}

/*------------------------ DIVIDER ------------------ */

.divider {
	width: 0px;
	height: 0px;
	-webkit-transform:rotate(360deg);
	margin-top: -150px;
	border-style: solid;
	border-width:  0 calc(100vw - 310px) 150px 0px;
}



.contact_icons {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

.contact_icons > div a {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 30px;
	text-decoration: none;
}

.contact_icons > div a i {
	font-size: 3rem;
}

.impressum {
	display: block;
	margin-left: 48px;
}

/*------------------------ ANIMATION ------------------ */

.animation {
	display: table;
	margin:  0 auto;
	position: relative;

}
.animation img {
	transition: all 500ms;
}

.animation img:not(:first-child) {
	position: absolute;
	left: 0;
	opacity: 0;
}

.animation:hover img:nth-child(2) {
	opacity: 1;
	z-index: 10;
}
.animation:hover img:nth-child(3) {
	animation-name: changeimages;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	z-index: 20;
	animation-delay: 1s;
}

@keyframes changeimages {
	0% {opacity: 0}
	50% {opacity: 1;}
	100% {opacity: 0}
}

/*------------------------ SERVICES ------------------ */

.services img {
	height: calc(50vw / 3 * 2);
	max-height: 600px;
	float: left;
	object-fit: cover;
	width: 100%;
	/*filter: saturate(0);*/
	transition: all 300ms;
}

.services .innerrow.left:nth-child(even) {
	flex-direction: row-reverse;
}

.services .innerrow.right:nth-child(odd) {
	flex-direction: row-reverse;
}

.services_text {
	align-items: flex-start;
	background-color: var(--light);
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 2rem;
}

.services_text h3 {
	max-width: 700px;
	margin-top: 0;
}

.services_text > div {
	max-width: 600px;
}

.services_text a {
	margin-top: 30px;
}

.services .innerrow.left:nth-child(even) .services_text,
.services .innerrow.right:nth-child(odd) .services_text{
	align-items: flex-end;
	text-align: right;
}


@media screen and (max-width: 768px) {
	.services .innerrow.left:nth-child(even) .services_text,
	.services .innerrow.right:nth-child(odd) .services_text{
		align-items: flex-start;
		text-align: left;
	}
}


.services a:hover img,
.services img:hover {
	filter: saturate(1);
}

.services a {
	display: block;
	position: relative;
	text-decoration: none;
	overflow: hidden;
}

.service_img a{
	height: 100%;
}


@media screen and (max-width: 1500px) {
	.services img {
		height: 100%;
		max-height: 100%;
	}
}

.link_headline {
	font-size: 2rem;
	font-weight: bold;
	left:0 ;
	position: absolute;
	right: 0;
	text-align: center;
	text-transform: uppercase;
	transition: all 300ms;
	top: 100%;
}

.services a:hover .link_headline{
	top: 40%;
}


.contactform_bg {
	background-size: cover;
	display: table;
	width: 100%;
}

.contactform_bg .row {
	background: #fff;
	padding: 20px 40px;
}

/*------------------------ GALLERY ------------------ */

.gallery > div {
	height: calc((100vw - 270px) / 3 * 2);
	max-height: 764px;
	max-width: 382px;
	width: calc(100% / 6);;
	display: flex;
	flex-direction: column;
}

.gallery > div img {
	height: 50%;
	max-height: 382px;
	width: 100%;

	object-fit: cover;
	object-position: center;
	transition: all 300ms;
}

@media screen and (max-width: 768px) {
	.gallery > div {
		height: calc((100vw));
		width: calc(100% / 2);
	}
}
@media screen and (max-width: 560px) {
	.gallery > div {
		height: calc(200vw);
		width: calc(100%);
	}
}



.gallery > div img:hover {
	transform: scale(1.1);
}


.showreel {
	align-items: center;
	background-position: center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	height: 70vh;

	justify-content: center;
	width: 100%;
}

.showreel > a {
	text-align: center;
	border: 2px solid #fff;
	border-radius: 50%;
	height: 240px;
	width: 240px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.showreel > a:hover {
	border-color: var(--highlight);
}
.showreel > a:hover h3,
.showreel > a:hover i {
	color: var(--highlight);
}

.showreel h3 {
	color: #fff;
	font-size: 1.2rem;
	margin: 15px 0 5px;
}

.showreel i {
	color: #fff;
	font-size: 7rem;
}

.video {
	align-items: center;
	display: flex;
	background-position: center;
	background-size: cover;
	min-height: 100vh;
	padding: 40px;
}

	/*------------------------ QUOTE ------------------ */

.quote {
	text-align: center;
}

.quote i {
	color: var(--primary);
	font-size: 3rem;
}

.quote p {
	font-size: 3.5rem;
	line-height: 1.2;
	color: var(--highlight);
}

.quote h4 {
	font-size: 1.8rem;
	line-height: 1.2;
	color: var(--highlight);
	text-transform: none;
}

@media screen and (max-width: 767px) {
	.quote p {
		font-size: 2.7rem;
	}
}

@media screen and (max-width: 560px) {
	.quote p {
		font-size: 2rem;
	}

	.quote h4 {
		font-size: 1.5rem;
		font-weight: normal;
	}
}

.quote-author {
	display: flex;
	font-style: italic;
	align-items: center;
	justify-content: center;
}

.quote-author:before, .quote-author:after {
	background-color: var(--highlight);
	display: inline-block;
	content: '';
	height: 1px;
	margin: 0 10px;
	width: 50px;
}

.bx-viewport {
	padding-bottom: 15px;
}

/*------------------------ CV ------------------ */

.cv_row {
	flex-direction: column;
}
.cv_td {
	display: grid;
	grid-template-columns: 50px 1fr;
	gap: 100px;
}

.cv_td > div:first-child {
	color: var(--primary);
	font-weight: bold;
	text-align: right;
	padding-bottom: 30px;
	position: relative;
}

.cv_td > div:last-child {
	position: relative;
}
/*
.cv_td > div:first-child:after {
	background-color: var(--highlight);
	content: '';
	display: inline-block;
	height: 1px;
	position: absolute;
	left: 220px;
	top: 25px;
	width: 0px;

	animation: stroke 1s ease-in forwards;
}*/

.cv_td > div:first-child:after {
	background-color: var(--highlight);
	border-radius: 50%;
	border: 8px solid #fff;
	content: '';
	display: inline-block;
	height: 15px;
	position: absolute;
	left: 85px;
	top: 10px;
	width: 15px;
	z-index: 10;
	opacity: 0;

	animation: point 500ms ease-in forwards;
}

.cv_td:nth-child(1) > div:first-child:after { animation-delay: 0.5s; }
.cv_td:nth-child(2) > div:first-child:after { animation-delay: 1000ms; }
.cv_td:nth-child(3) > div:first-child:after { animation-delay: 1500ms; }
.cv_td:nth-child(4) > div:first-child:after { animation-delay: 2000ms; }
.cv_td:nth-child(5) > div:first-child:after { animation-delay: 2500ms; }
.cv_td:nth-child(6) > div:first-child:after { animation-delay: 3000ms; }
.cv_td:nth-child(7) > div:first-child:after { animation-delay: 3500ms; }
.cv_td:nth-child(8) > div:first-child:after { animation-delay: 4000ms; }
.cv_td:nth-child(9) > div:first-child:after { animation-delay: 4500ms; }
.cv_td:nth-child(10) > div:first-child:after { animation-delay: 5000ms; }
.cv_td:nth-child(11) > div:first-child:after { animation-delay: 5500ms; }
.cv_td:nth-child(12) > div:first-child:after { animation-delay: 6000ms; }
.cv_td:nth-child(13) > div:first-child:after { animation-delay: 6500ms; }
.cv_td:nth-child(14) > div:first-child:after { animation-delay: 7000ms; }
.cv_td:nth-child(15) > div:first-child:after { animation-delay: 7500ms; }
.cv_td:nth-child(16) > div:first-child:after { animation-delay: 8000ms; }
.cv_td:nth-child(17) > div:first-child:after { animation-delay: 8500ms; }
.cv_td:nth-child(18) > div:first-child:after { animation-delay: 9000ms; }
.cv_td:nth-child(19) > div:first-child:after { animation-delay: 9500ms; }
.cv_td:nth-child(20) > div:first-child:after { animation-delay: 10000ms; }
.cv_td:nth-child(21) > div:first-child:after { animation-delay: 10500ms; }

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


.cv_td > div:last-child:before {
	background-color: var(--primary);
	content: '';
	display: inline-block;
	height: 0%;
	position: absolute;
	left: -50px;
	top: 0;
	width: 1px;

	animation: stroke 500ms ease-in forwards;
}

.cv_td:nth-child(2) > div:last-child:before { animation-delay: 0.5s; }
.cv_td:nth-child(3) > div:last-child:before { animation-delay: 1s; }
.cv_td:nth-child(4) > div:last-child:before { animation-delay: 1.5s; }
.cv_td:nth-child(5) > div:last-child:before { animation-delay: 2s; }
.cv_td:nth-child(6) > div:last-child:before { animation-delay: 2.5s; }
.cv_td:nth-child(7) > div:last-child:before { animation-delay: 3s; }
.cv_td:nth-child(8) > div:last-child:before { animation-delay: 3.5s; }
.cv_td:nth-child(9) > div:last-child:before { animation-delay: 4s; }
.cv_td:nth-child(10) > div:last-child:before { animation-delay: 4.5s; }
.cv_td:nth-child(11) > div:last-child:before { animation-delay: 5000ms; }
.cv_td:nth-child(12) > div:last-child:before { animation-delay: 5500ms; }
.cv_td:nth-child(13) > div:last-child:before { animation-delay: 6000ms; }
.cv_td:nth-child(14) > div:last-child:before { animation-delay: 6500ms; }
.cv_td:nth-child(15) > div:last-child:before { animation-delay: 7000ms; }
.cv_td:nth-child(16) > div:last-child:before { animation-delay: 7500ms; }
.cv_td:nth-child(17) > div:last-child:before { animation-delay: 8000ms; }
.cv_td:nth-child(18) > div:last-child:before { animation-delay: 8500ms; }
.cv_td:nth-child(19) > div:last-child:before { animation-delay: 9000ms; }
.cv_td:nth-child(20) > div:last-child:before { animation-delay: 9500ms; }
.cv_td:nth-child(21) > div:last-child:before { animation-delay: 10000ms; }
.cv_td:nth-child(22) > div:last-child:before { animation-delay: 10500ms; }

@keyframes stroke {
	0% { height: 0%; }
	100% { height: 100%; }
}

.character_container {
	background-color: #f2f2f2;
	max-width: 540px;
	padding: 20px 20px 40px;
}

.character {
	align-items: center;
	display: flex;
	border-bottom: 1px solid var(--primary);
	padding: 20px;
}

.character i {
	font-size: 1.5rem;
	color: var(--primary);
	margin-right: 15px;
}

	/*------------------------ SOCIAL MEDIA ICONS ------------------ */

#social_media_icons {
	display: flex;
	flex-direction: column;
	position: fixed;
	right: 0;
	z-index: 20;
	top: 40vh;
}

#social_media_icons a {
	align-items: center;
	background-color: var(--primary);
	display: flex;
	color: #fff;
	height: 40px;
	justify-content: center;
	margin: 2px 0;
	text-decoration: none;
	width: 40px;
}

#social_media_icons a:hover {
	background-color: var(--highlight);
}

#social_media_icons a i {
	font-size: 1.5rem;
}


@media screen and (max-width: 768px) {
	iframe {
		max-height: 30vh;
	}
	.video {
		padding: 20px 10px;
	}
}


footer {
	background-color: var(--primary);
	color: #fff;
}

footer p {
	line-height: 1;
}