/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ overall edits ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */

@font-face {
	font-family: 'Myriad Pro';
	src: url('../fonts/myriad_pro/MyriadPro-It.woff2') format('woff2'),
	url('../fonts/myriad_pro/MyriadPro-It.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Myriad Pro';
	src: url('../fonts/myriad_pro/MyriadPro-Regular.woff2') format('woff2'),
	url('../fonts/myriad_pro/MyriadPro-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Myriad Pro';
	src: url('../fonts/myriad_pro/MyriadPro-Bold.woff2') format('woff2'),
	url('../fonts/myriad_pro/MyriadPro-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Myriad Pro';
	src: url('../fonts/myriad_pro/MyriadPro-Light.woff2') format('woff2'),
	url('../fonts/myriad_pro/MyriadPro-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

::-moz-selection {
	color: #fff;
	background: #002c58;
}

::selection {
	color: #fff;
	background: #002c58;
}

html {
	scroll-behavior: smooth;
	font-family: 'Myriad Pro';
	font-weight: 300;
	color: #002c58;
}

p, a, h1, h2, h3, h4, h5, h6, li, form, label {
	font-family: 'Myriad Pro';
	font-weight: 300;
	color: #002c58;
}

::placeholder, select, #cv, #submit, #c-submit {
	font-family: 'Myriad Pro';
	font-weight: 300;
}

body {
	margin: 0;
    background: #F6F6F6;
}

.content-box {
	max-width: 1250px;
	margin: auto;
	padding: 0 20px;
	text-align: left;
}

p, li {
	font-size: 1.2em; /* 16px alt Kurfürst */
	margin: 0;
	color: #002c58;
	line-height: 1.3; /* 1.5 w/ standart myriad */
	text-align: left;
}

h1 {
	font-size: 6em;
	margin: 0;
}

h2 {
	font-size: 2.75em; /* 36px alt Kurfürst */
	font-weight: normal;
	color: #009fe3;
	line-height: 1.3em;
}

@media only screen and (max-width: 350px) {
	h2 {
		font-size: 2.5em;
	}
}

h3 {
	font-size: 1.5em;
	color: #595959;
}

h6 {
	font-size: 1em;
	margin: 0;
}

a {
	color: #f7a600;
}

a:hover,
a:focus,
a:active {
	color: #002c58;
	transition: .3s;
}

.hover:hover,
.hover:active,
.hover:focus {
	outline: none;
	-webkit-filter: brightness(0.85);
	filter: brightness(0.85);
}

ul {
	line-height: 1.5;
}

img {
	border-radius: 4px;
}

.no-border-radius {
	border-radius: 0;
}

.button {
	text-align: center;
	bottom: 20px;
	width: max-content;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #f7a600;
	color: white;
	padding: 12px 25px;
	text-decoration: none;
	border-radius: 5px;
}


a.button:link, a.button:visited {
	background-color: #f7a600;
	color: white;
	padding: 12px 25px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 5px;
}

a.button:hover, a.button:focus, a.button:active {
	color: #fff;
	background-color: #002c58;
}

.space-fix {
	height: 80px;
}

.bold {
	font-weight: 900
}

.semi-bold {
	font-weight: 500;
}

.italic {
	font-style: italic;
}

.yellow {
	color: #f7a600;
}

.blue {
	color: #002c58;
}

.cyan {
	color: #009fe3;
}

.white {
	color: #ffffff;
}

.black {
	color: #333333;
}

.center {
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.inline {
	display: inline-block;
}

.block {
	display: block;
}

.underline {
	text-decoration: underline;
}

#back-to-top {
    display: none;
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 99;
    border: none;
    outline: none;
    color: #fff;
    background-color: #000000a6;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border-radius: 100px;
    text-align: center;
	opacity: 0.9;
  }

  .fa-arrow-up {
	  opacity: 1;
  }

  .fa-arrow-up:hover {
	  opacity: 1;
  }

.header-img {
	width: 100vw;
	border-radius: 0;
	height: 320px;
	object-fit: cover;
}

.header-txt {
	position: absolute;
	top: 150px;
	left: 25px;
	max-width: 80vw;
}

.header-txt h1 {
	font-weight: 500;
	font-size: 14vw;
}

.header-txt h6 {
	font-weight: 500;
	font-size: 6vw;
}

@media only screen and (min-width: 1400px) {
	.header-txt,
	.sub-page-header-txt {
		margin: auto;
		right: 25px;
		left: 25px;
	}
}


@media only screen and (min-width: 700px) {
	.header-txt h1 {
		font-size: 95px;
	}

	.header-txt h6 {
		font-size: 40px;
	}
}

.dark-header {
	filter: brightness(70%) grayscale(20%);
}

.sub-page-header-txt {
	text-align: right;
	position: absolute;
	top: 150px;
	right: 20px;
	max-width: 80vw;
}

.sub-page-header-txt h2 {
	font-size: 58px;
	margin-top: 15px;
}

.sub-page-header-txt h6 {
	font-size: 2em;
}

@media only screen and (max-width: 600px) {
	.sub-page-header-txt h2 {
		font-size: 3em;
	}

	.sub-page-header-txt h6 {
		font-size: 1.3em;
	}

	.sub-page-header-txt {
		top: 190px;
	}
}

.breadcrumb {
	margin: 20px 0;
	text-align: left;
}

hr {
	height: 2px;
	border-width: 0;
	color: #cccccc;
	background-color: #cccccc
}

.sub-page-prefooter {
	text-align: center;
	margin: 25px 0;
}

.back-div,
.related-topics {
	width: 40%;
	vertical-align: top;
}

.back-div {
	margin: 0 50px 0 -50px;
	text-align: left;
}

.back-div hr {
	margin-bottom: 25px;
}

.sub-page-prefooter a {
	margin: 15px 0;
}

.related-topics {
	text-align: left;
}

@media only screen and (max-width: 1025px) {
	.back-div,
	.related-topics {
		width: 100%;
		display: block;
	}

	.back-div {
		margin: 0 0 30px 0;
	}
}

.subpage-content {
	margin: 0 70px;
}

@media only screen and (max-width: 1025px) {
	.subpage-content {
		margin: 0 20px;
	}
}

/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ header ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */

.wrapper {
    max-width: 1250px;
    margin: auto;
    padding: 70px 0 90px;
}

.serviceportal h1 {
    text-align: center;
}

.serviceportal h1 .logo {
    display: inline-block;
    width: 420px;
    vertical-align: middle;
    margin: 0 20px 10px 0;
}

.serviceportal .subline {
    text-align: center;
    font-size: 2em;
}

.subline #company-logo {
    filter: brightness(0);
    height: 60px;
    vertical-align: bottom;
    margin-left: 10px;
}

/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ Footer ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */

.whole-footer {
	text-align: center;
	/* max-width: 1050px; */
	margin: 0 auto;
	background-color: #009fe3;
	box-shadow: inset 0px 5px 5px 0 rgb(0 0 0 / 50%);
	height: 200px;
}

.footer-div {
	line-height: 2;
	display: inline-block;
	width: 30%;
	margin-top: 50px;
}

.footer-div-left p {
	text-align: left;
	max-width: 290px;

}

.footer-div-middle p {
	text-align: center;
	max-width: 290px;
	margin: auto;

}

.footer-div-right p {
	text-align: right;
	max-width: 290px;
}

.footer-div p {
	color: #fff;
	margin: auto;
}

.footer-div a:hover, .footer-div a:active, .footer-div a:focus {
	opacity: 0.7;
}

@media only screen and (max-width: 948px) {
	.footer-div p {
		font-size: 1.1em;
	}
}

@media only screen and (max-width: 876px) {
	.footer-div p {
		font-size: 1em;
	}
}

@media only screen and (max-width: 805px) {
	.footer-div {
		display: block;
		font-size: 1.2em;
		margin: 20px auto;
		width: 43%;
		width: 300px;
	}

	.footer-div p {
		text-align: center;
	}

	.whole-footer {
		margin: 0;
		height: auto;
		padding: 30px 0;
	}
}

@media only screen and (max-width: 642px) {
	.footer-div {
		width: 48%;
	}
}

@media only screen and (max-width: 580px) {
	.footer-div {
		width: 55%;
	}
}

@media only screen and (max-width: 508px) {
	.footer-div {
		width: 65%;
	}
}

@media only screen and (max-width: 438px) {
	.footer-div {
		width: 75%;
	}
}

@media only screen and (max-width: 385px) {
	.footer-div {
		width: 85%;
	}
}

@media only screen and (max-width: 344px) {
	.footer-div {
		width: 95%;
	}
}

/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ charts ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */

.serviceportal .charts-wrapper {
    margin: 70px 0 90px;
    display: flex;
    justify-content: space-around;
}

.serviceportal .chart {
    display: inline-block;
    width: 25%;
}

/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ service tiles ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */

.serviceportal .service-tile-wrapper {
    margin: 70px 0 90px;
}

.serviceportal .service-section {
    margin: 40px 0;
}

.serviceportal .service-section h2 {
    font-size: 1.5em;
    color: #918F8F;
    margin: 20px;
}

.service-section .info {
    display: inline-block;
    background: #eaeaea;
    padding: 18px 30px;
    vertical-align: top;
    border-radius: 4px;
    margin: 0 20px 30px;
    width: 225px;
}

@media screen and (max-width: 1350px) {
    .service-section .info {
        display: block;
        margin: 0 auto 30px;
    }

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

.function-tile {
    margin: 0 20px 30px;
    display: inline-block;
    transition: .3s;
    position: relative;
}

.function-tile i {
    vertical-align: sub;
    color: #009fe3;
    margin-right: 10px;
}

.function-tile a {
    text-decoration: none;
    background: #fff;
    display: inline-block;
    width: 250px;
    vertical-align: top;
    padding: 20px 15px;
    box-shadow: 0 0 15px #d1d1d1;
    border-radius: 4px;
    border: 2px solid #FFF;
    vertical-align: text-top;
}

.function-tile a:hover {
    border: 2px solid #009FE3;
    box-shadow: 0 0 15px #b0b0b0;
    background: #f4f4f4;
}

.function-tile:hover .blend-in-explanation {
    /*display: block;*/
    visibility: visible;
    opacity: 1;
}

.function-tile .icon {
    width: 25px;
    margin-right: 10px;
}

.function-tile h3,
.info h3 {
    display: inline-block;
    margin: 0;
    vertical-align: top;
    font-weight: 600;
    width: 80%;
}

.function-tile h3 {
    text-align: left;
}

.function-tile .description {
    font-size: 1em;
    margin: 15px 0;
}

.function-tile .call-to-action {
    margin-top: 15px;
    color: #009FE3;
    font-weight: 400;
}

.blend-in-explanation {
    /*display: none;*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: -50%;
    right: -90%;
    z-index: 1000;
    background: #fff;
    padding: 20px;
    width: 200px;
    border-radius: 4px;
    box-shadow: 0 0 15px #d1d1d1;
    transition: .3s;
}

@media screen and (max-width: 1460px) {
    .blend-in-explanation {
        right: -72%;
    }
}

@media screen and (max-width: 1020px) {
    .blend-in-explanation {
        right: -65%;
        width: 180px;
    }
}

@media screen and (max-width: 1000px) {
    .blend-in-explanation {
        display: none;
    }
}

.blend-in-explanation .title {
    font-size: 1.2em;
    font-weight: 500;
    margin-bottom: 10px;
}

.blend-in-explanation p {
    font-size: 1em;
}

.blend-in-explanation img {
    width: 100%;
}