/*******************************************************************************************************/
/* Allgemein */
/*******************************************************************************************************/

@font-face {
	font-family: 'Concevis Main Font';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('../fonts/MainFont.woff2') format('woff2');
}

html, body {
	font-family: 'Concevis Main Font', sans-serif;
	margin: 0;
}

.page {
	position: relative;
	display: flex;
	flex-direction: column;
}

p {
	margin: 0px 0px 18px 0px;
}

ul {
	color: rgb(25, 25, 25);
	font-size: 20px;
	font-weight: 400;
	line-height: 30px;
	margin-top: 18px;
}

li {
	margin-bottom: 16px;
}


h2
{
	margin-top: 48px;
}

h3 {
	margin-top: 32px;
}

/*.clearfix {
	clear: both;
}*/


/*******************************************************************************************************/
/* Navigation */
/*******************************************************************************************************/

.navigation-container {
	position: fixed;
	top: 0px;
	background-color: rgb(3, 91, 171);
	font-size: 18px;
	font-weight: 700;
	margin: 0 auto;
	width: 100%;
	height: 100px;
	z-index: 2;
	background-image: url(../Images/Logo_small.png);
	background-repeat: no-repeat;
	background-position: 40px 36px;
}

@media screen and (max-width:1199px) {
	.navigation-container {
		background-image: none;
	}
}

.navigation-container-home {
	position: fixed;
	top: 0px;
	font-size: 18px;
	font-weight: 700;
	margin: 0 auto;
	width: 100%;
	height: 100px;
	z-index: 2;
	background-color: rgba(3, 91, 171, 255);
}

@supports (animation-timeline: scroll()) {
	.navigation-container-home {
		background-color: rgba(3, 91, 171, 0);
		animation: nav-home-fadein linear;
		animation-timeline: scroll();
		animation-range: exit;
	}
}

@keyframes nav-home-fadein {
	0% {
		background-color: rgba(3, 91, 171, 0);
	}

	30%, 100% {
		background-color: rgba(3, 91, 171, 255);
	}
}

.navigation-backdrop {
	/* Gleiche Werte wie bei navigation-container */
	width: 100%;
	height: 100px;
}

/* Navbar container */
.navigation-bar {
	margin-top: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
}

	/* Links inside the navbar */
	.navigation-bar a {
		float: left;
		color: white;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		border-bottom: 1px solid rgba(3, 91, 171, 0);
	}

/* The dropdown container */
.dropdown {
	float: left;
	overflow: hidden;
}

/* Dropdown button */
/*.dropdown .dropbtn {
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;*/ /* Important for vertical align on mobile phones */
/*margin: 0;*/ /* Important for vertical align on mobile phones */
/*font-size: 18px;
	font-weight: 700;
	border-bottom: 1px solid rgba(3, 91, 171, 0);
}*/


/* Add a red background color to navbar links on hover */
/*.navigation-bar a:hover, .dropdown:hover .dropbtn:hover {*/
/*.navigation-bar a:hover, .dropdown:hover {*/
.navigation-bar a:hover {
	/*background-color: red;*/
	border-bottom: 1px solid white;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
	position: absolute;
	top: 77px;
	background-color: #fbfbfb;
	min-width: 160px;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);
	z-index: 1000;
	visibility: hidden;
	transform: translateY(-5px);
	transition: all 0.3s ease;
	opacity: 0;
}

	/* Links inside the dropdown */
	.dropdown-content a {
		float: none;
		color: rgb(25, 25, 25);
		padding: 8px 32px;
		text-decoration: none;
		display: block;
		text-align: left;
		font-size: 15px;
		font-weight: 500;
	}

		/* Add a grey background color to dropdown links on hover */
		.dropdown-content a:hover {
			background-color: #ddd;
		}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
	opacity: 1;
	visibility: visible;
	transform: translateY(-1px);
}

.caret {
	margin-left: 10px;
}

.dropdown-subheader {
	padding: 12px 16px;
	font-size: 15px;
}


/*******************************************************************************************************/
/* Home Header */
/*******************************************************************************************************/
.home-video-container {
	display: block;
	height: 800px;
}

.home-video {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	opacity: 1;
}


.overlay-logo {
	position: absolute;
	width: 100%;
	height: 200px;
	top: 140px;
	opacity: 0.7;
	/*background-color:aquamarine;*/
	z-index: 1;
	background-image: url('../images/transparentLogo.png');
	background-position: center;
	background-position-y: 0px;
	background-repeat: no-repeat;
	background-size: 720px;
	animation: sizein 2s, slidein 2s, fadein 2s;
}

@keyframes slidein {
	from {
		background-position-y: 64px;
	}

	to {
		background-position-y: 0px;
	}
}

@keyframes sizein {
	from {
		background-size: 500px;
	}

	to {
		background-size: 720px;
	}
}


@keyframes fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 0.7;
	}
}


.welcome-overlay {
	position: absolute;
	top: 240px;
	width: 100%;
	margin: 0 auto;
}

.welcome-text {
	max-width: 800px;
	padding-top: 48px;
	margin: 0 auto;
	color: white;
	font-size: 60px;
	font-weight: 900;
	line-height: 64px;
	text-align: center;
	margin-bottom: 80px;
}

.first-step-text {
	color: white;
	font-size: 24px;
	font-weight: 300;
	line-height: 34px;
	text-align: center;
	margin-bottom: 60px;
}

.get-in-contact {
	color: white;
	width: 200px;
	padding: 20px 50px;
	background-color: rgba(255, 255, 255, 0.7);
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	margin: 0 auto;
	-webkit-transition: background-color 200ms linear;
	transition: background-color 200ms linear;
}

	.get-in-contact:hover {
		background-color: rgba(255, 255, 255, 0.9);
		-webkit-transition: background-color 200ms linear;
		transition: background-color 200ms linear;
	}


	.get-in-contact a:link {
		text-decoration: none;
	}

	.get-in-contact a:visited {
		color: black;
		text-decoration: none;
	}

a:focus {
}

a:hover {
}

a:active {
}




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

	.home-video-container {
		height: 640px;
	}

	.overlay-logo {
		height: 160px;
		top: 120px;
		background-size: 460px;
	}

	.welcome-overlay {
		top: 170px;
	}

	.welcome-text {
		font-size: 50px;
		font-weight: 800;
		line-height: 54px;
		margin-bottom: 40px;
	}

	.first-step-text {
		margin-bottom: 40px;
	}
}

/*******************************************************************************************************/
/* Content */
/*******************************************************************************************************/

.section-filler {
	width: 100%;
	padding: 0px;
	margin: 0px;
}

.standard-content-container {
	padding: 24px;
	max-width: 1500px;
	margin: 0 auto;
}

.image-content-container {
	max-width: 1500px;
	margin: 0 auto;
}

.vertical_spacer-32 {
	height: 32px;
}

.bg-grey {
	background-color: rgb(235, 235, 235);
}

.bg-light-grey {
	background-color: rgb(246, 246, 246);
}

.bg-blue {
	background-color: rgb(3, 91, 171);
}

.fg-white {
	color: white;
}

.fg-blue {
	color: rgb(3, 91, 171);
}

.rounded-corner {
	border-radius: 10px;
}

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

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


.padding24 {
	padding: 24px;
}


.standard-title {
	margin-top: 60px;
	margin-bottom: 30px;
	color: rgb(3, 91, 171);
	font-size: 36px;
	font-weight: 600;
	line-height: 42px;
}

.standard-body {
	margin-top: 32px;
}

.standard-paragraph {
	color: rgb(25, 25, 25);
	font-size: 20px;
	font-weight: 400;
	line-height: 30px;
}

.footer-content-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	flex-direction: column;
	padding: 24px;
	max-width: 1500px;
	margin: 0 auto;
}

@media (max-width: 1100px) {
	.footer-content-container {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

@media (max-width: 800px) {
	.footer-content-container {
		grid-template-columns: 1fr 1fr 1fr;
	}
}


@media (max-width: 600px) {
	.footer-content-container {
		grid-template-columns: 1fr 1fr;
	}
}

.footer-navigation-box {
	color: white;
	display: flex;
	flex-direction: column;
	margin-bottom: 32px;
}

	.footer-navigation-box a:link {
		color: #eee;
		text-decoration: none;
	}

	.footer-navigation-box a:hover {
		color: #eee;
		text-decoration: underline !important;
	}
	/* Nicht klar, durch welchen Style das überschrieben wird */
	.footer-navigation-box a:active {
		color: #eee;
		text-decoration: underline !important;
	}
	/* Nicht klar, durch welchen Style das überschrieben wird */
	.footer-navigation-box a:visited {
		color: #eee;
		text-decoration: none;
	}

.footer-navigation-title {
	font-size: 120%;
	font-weight: bold;
	line-height: 2em;
}

.footer-navigation-link {
	font-size: 110%;
	line-height: 2em;
	/*	padding-left:12px; */
}

.footer-address {
	font-size: 110%;
	line-height: 2em;
	color: white;
}

/*******************************************************************************************************/
/* Image-Boxes */
/*******************************************************************************************************/

.content-box-flex {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 48px;
	flex-direction: column;
}

@media (max-width: 1100px) {
	.content-box-flex {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 800px) {
	.content-box-flex {
		grid-template-columns: 1fr;
	}
}

.animated-image-box-container {
	min-height: 400px;
	overflow: hidden;
}

.animated-image-box {
	height: 100%;
	width: 100%;
	background-position: center center;
	background-size: cover;
	transition: all ease .4s;
}

	.animated-image-box h2 {
		color: white;
		/*padding: 20px 0px 10px 0px;*/
		background: rgba(0, 0, 0, 0.6);
	}

	.animated-image-box:hover {
		transform: scale(1.05);
	}

.animated-image-box-container a:link {
	color: #eee;
	text-decoration: none;
}

.animated-image-box-container a:hover {
	color: #eee;
	text-decoration: none !important;
}
/* Nicht klar, durch welchen Style das überschrieben wird */
.animated-image-box-container a:active {
	color: #eee;
	text-decoration: none !important;
}
/* Nicht klar, durch welchen Style das überschrieben wird */
.animated-image-box-container a:visited {
	color: #eee;
	text-decoration: none;
}

.manager-image {
	width: 400px;
	height: 400px;
}

@media (max-width: 1340px) {
	.manager-image {
		width: 320px;
		height: 320px;
	}
}


.bg-image-finance {
	background-image: url('../images/BrFinanzen.jpg');
}

.bg-image-government {
	background-image: url('../images/BrGovernment.jpg');
}

.bg-image-other {
	background-image: url('../images/BrAndere.jpg');
}

.bg-image-kalle {
	background-image: url('../images/Kalle.webp');
}

.bg-image-marc {
	background-image: url('../images/Marc.webp');
}

.bg-image-chris {
	background-image: url('../images/Chris.webp');
}

.animated-text-box {
	min-height: 230px;
	overflow: hidden;
	background: white;
	border-radius: 10px;
	padding: 0px 32px 32px 32px;
	margin: 16px 16px 48px 16px;
	text-align: center;
	transition: all ease .4s;
}

	/*.animated-text-box {
height: 100%;
width: 100%;
background: red;
transition: all ease .4s;
}*/

	.animated-text-box:hover {
		transform: scale(1.05);
	}

	.animated-text-box a:link {
		font-weight: 800;
		color: rgb(3, 91, 171);
		text-decoration: none;
	}

	.animated-text-box a:hover {
		color: rgb(3, 91, 171);
		text-decoration: underline;
	}
	/* Nicht klar, durch welchen Style das überschrieben wird */
	.animated-text-box a:visited {
		color: rgb(3, 91, 171);
		text-decoration: none;
	}

.text-box {
	overflow: hidden;
	/*background: white;*/
	text-align: justify;
	font-size: 20px;
	font-weight: 400;
	/*line-height: 30px;*/
}

	.text-box ul {
		margin: 0px 0px 32px 0px;
	}

	.text-box li {
		margin-bottom: 0px;
		font-size: 16px;
		text-align: left;
	}

	.text-box .list-title {
		color: rgb(3, 91, 171);
		font-size: 18px;
		text-align: left;
		font-weight: 800;
	}

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


.small-image-list {
}

.small-image-box {
	background: white;
	padding: 1em;
	border: solid 1px #ddd;
	margin-right: 8px;
	margin-bottom: 8px;
}

.image-section-filler {
	margin: 0 auto;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 500px;
	padding-bottom: 48px;
	color: white;
}

.section-image-klick {
	background-image: url('../images/SoKlick.jpg');
}

.section-image-intertax {
	background-image: url('../images/SoIntertax.jpg');
}

.section-image-feko {
	background-image: url('../images/SoFeko.jpg');
}

.section-image-iveframe {
	background-image: url('../images/SoIVEframe.jpg');
	background-position: center;
}

.section-image-elicet {
	background-image: url('../images/SoElicet.jpg');
	background-position: center;
}

.section-image-bizinfo {
	background-image: url('../images/SoBizinfo.jpg');
}

.section-image-referenzliste {
	background-image: url('../images/SoReferenzliste.jpg');
}

.section-image-erfolgsgeschichten {
	background-image: url('../images/SoErfolgsgeschichten.jpg');
	background-position: center;
	background-repeat: no-repeat;
	height: 400px;
}

.section-image-kundenstimmen {
	background-image: url('../images/SoKundenstimmen.jpg');
	background-position: center;
	background-repeat: no-repeat;
	height: 400px;
}

.section-image-individualloesungen {
	background-image: url('../images/SoIndividualloesungen.jpg');
	background-position: top;
}

.bg-image-softwareentwicklung {
	background-image: url('../images/KmpSoftwareentwicklung.jpg');
}

.bg-image-datamanagement {
	background-image: url('../images/KmpDataManagement.jpg');
}

.bg-image-beratung {
	background-image: url('../images/KmpBeratung.jpg');
}

.bg-image-kontakt {
	background-image: url('../images/Kontakt.jpg');
}

.bg-image-karriere {
	background-image: url('../images/Karriere.jpg');
}

.bg-image-fragen {
	background-image: url('../images/SoFragen.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 64px;
}

.list-title {
	/*font-size: 20px;*/
	font-weight: 800;
}

/*******************************************************************************************************/
/* Quotes */
/*******************************************************************************************************/

.quote-container {
	display: block;
	margin: 0 auto;
	margin-bottom: 1.5em;
	padding: 1.5em 1.5em 0 1.5em;
	text-align: justify;
	font-size: 20px;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

blockquote {
	background: url(../Images/QuoteLeft.png) no-repeat;
	color: #777;
	font-style: italic;
	padding-bottom: 0.5em;
	padding-left: 48px;
	padding-right: 0;
}

.citation {
	margin-left: 40px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 48px;
	padding-right: 0;
	color: #777;
	font-style: normal;
}

/*******************************************************************************************************/
/* Kontakt */
/*******************************************************************************************************/

.contact-box-flex {
	display: grid;
	grid-template-columns: 1fr 300px;
	column-gap: 48px;
	flex-direction: column;
}

@media (max-width: 1100px) {
	.contact-box-flex {
		grid-template-columns: 1fr;
	}
}

.contact-image-box {
	height: 100%;
	width: 100%;
	min-height: 320px;
	background-image: url('../images/Kontakt.jpg');
	background-position: center center;
	background-size: cover;
	scale: 0.8;
	opacity: 0.0;
	animation: image-fadein linear forwards;
	animation-timeline: view();
	animation-range: 150px 600px;
}

.list-icon {
	width: 16px;
	margin-right: 16px;
	filter: invert(17%) sepia(95%) saturate(2941%) hue-rotate(197deg) brightness(96%) contrast(98%);
}

.contact-text-box {
	text-align: left;
	font-size: 20px;
	font-weight: 400;
}

	.contact-text-box a:link {
		color: rgb(25, 25, 25);
		text-decoration: none;
	}

	.contact-text-box a:hover {
		color: rgb(3, 91, 171);
		text-decoration: none;
	}

	.contact-text-box a:active {
		color: rgb(25, 25, 25);
		text-decoration: none;
	}

	.contact-text-box a:visited {
		color: rgb(25, 25, 25);
		text-decoration: none;
	}

/*******************************************************************************************************/
/* Karriere */
/*******************************************************************************************************/

.karriere-content-container {
	/*padding: 24px;*/
	max-width: 1500px;
	margin: 0 auto;
}


.karriere-box-flex {
	display: grid;
	grid-template-columns: 560px 1fr;
	min-height: 500px;
	column-gap: 64px;
	flex-direction: column;
}

@media (max-width: 1100px) {
	.karriere-box-flex {
		grid-template-columns: 1fr;
	}
}

.karriere-image-box {
	height: 100%;
	width: 100%;
	min-height: 320px;
	background-image: url('../images/Karriere.jpg');
	background-position: center center;
	background-size: cover;
	scale: 0.6;
	opacity: 0.8;
	animation: image-fadein linear forwards;
	animation-timeline: view();
	animation-range: 0px 500px;
}

@keyframes image-fadein {
	to {
		scale: 1;
		opacity: 1;
	}
}

.karriere-text-box {
	padding: 0px 24px 24px 24px;
	text-align: left;
	font-size: 20px;
	font-weight: 400;
}

	.karriere-text-box p {
		color: white;
	}


.image-fader {
	scale: 0.0;
	opacity: 0.0;
	animation: image-fadein linear forwards;
	animation-timeline: view();
	animation-range: 0px 700px;
}

.font-size-40 {
	font-size: 40px;
}

.url-locator {
	padding: 16px;
	margin-top: -16px;
}