/* raleway-100 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/raleway-v26-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v26-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v26-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v26-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v26-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v26-latin-100.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-200 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/raleway-v26-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v26-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v26-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v26-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v26-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v26-latin-200.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-300 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/raleway-v26-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v26-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v26-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v26-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v26-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v26-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v26-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v26-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v26-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v26-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v26-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v26-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-500 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/raleway-v26-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v26-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v26-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v26-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v26-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v26-latin-500.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-600 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/raleway-v26-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v26-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v26-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v26-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v26-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v26-latin-600.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-700 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/raleway-v26-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v26-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v26-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v26-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v26-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v26-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}

/*===================== Style for the Home Page + general Style for all HTML elements, that are scattered over the different pages (subpages + mainpage)  =====================*/

html, body {
    font-family: 'Raleway';
    /*
    An overflow hidden disables decendants of beeing styled with postion: sticky!!!*/
    overflow-x: hidden!important;
    hyphens: manual;
    /* still not sure for this css-declaration, when the modals in the footer are closed
    scroll-behavior: smooth;
    */
    color: #fff;
    background-color: black!important;
    font-weight: 200;
    appearance: none;
    z-index: 0;
    margin: 0;
    padding: 0;
    /*This CSS-Declaration fixes the number-issue when using Raleway*/
    font-feature-settings: 'lnum' 1;
}
input[type="number"] { font-feature-settings: 'lnum' 1; }
body p, body ul li:not(.nav li), p > a, h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0.8px;
}
.autoHyphens {
    /* The following 5 CSS-Declarations add hyphens automatically! 
        https://css-tricks.com/almanac/properties/h/hyphenate/ 
    */
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
.manualHyphen {
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}
.textVanishContainerForReal::marker {
    color: transparent;
    list-style: none;
    transition: all 0.5s ease!important;
}
.paddingRightFromBP_Logo ul, .paddingRightFromBP_Logo ul {
    margin-bottom: 0;
}
ul, ol {
    padding-left: 14px;
}
/*Overwrite default h1-h6 from Bootstrao*/
h1:not(.fadeContent h1), h2, h3, h4:not(.branchenschwerpunkte div > h4, .fadeContent > div h4), h5, h6:not(.fadeContent h6, .accordionBodyHeader),
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit!important;
    font-weight: 100!important;
    line-height: 1.2!important;
    color: inherit!important;
}
a, a:hover {
    color: #fff;
}
a.disabledLink{
    text-decoration: none;
    pointer-events: none;
    opacity: .5;
}
/*==== Navigation Style ====*/
nav .collapsing {
    /* make the dropdown faster openeing by reducing the transition duration */
    transition: height 0.4s ease!important;
}
.navbar {
    background-image: linear-gradient( black, transparent);
}

.showHideOnScroll {
    transition: all .4s ease!important;
}
.navbar > * {
    z-index: 1030;
}
.navbar-brand {
    margin: 0;
}
.navbar-toggler {
    animation-name: zoom-in-once;
    animation-iteration-count: 1;
    animation-duration: 1s;
}
.navbar-toggler-icon {
    border-color: white;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")!important;
}
button.dropdownButtonLink, button.languageButton {
    color: white;
    font-size: 14px;
    font-weight: 200;
    background-color: transparent;
    border: none;
    letter-spacing: 0.8px;
}
.languageModalBody {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, 10%);
}
button.languageButton:focus {
    outline: none;
}
.dropdown > a {
    height: 100%!important;
    padding: 4px 6px!important;
    font-size: 15px!important;
    vertical-align: middle;
}
.dropdown > a:hover {
    text-decoration: none;
}
button.dropdownButtonLink:focus {
    outline: none;
}
nav .dropdown-menu {
    /*background: rgba(0, 0, 0, 0.2)!important;*/
    background: rgba(0, 0, 0, 0)!important;
}
nav .dropdown-menu .dropdown-item {
    background-color: transparent!important;
    color: white!important;
    color: #fff;  
    font-weight: 200;
}
nav .dropdown-menu .dropdown-item:hover {
    background-color: white!important;
    color: black!important;
}
.navbar > a > img {
    transition: opacity .4s ease;
}
.is-visible {
    opacity: 1;
}
.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.navOrientation {
    position: fixed;
    z-index: 100;
    width: 100%;
    transition: opacity .4s ease;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
}
.navOrientation p {
    transition: opacity .4s ease;
}
#languageButton {
    padding: 0;
    /*max-width: 15%;*/
    background-color: transparent;
    border: none;
    color: rgba(255, 255, 255, .8);
}
#languageButton:focus {
    outline: none;
}
#languageButton i {
    color: rgba(255, 255, 255, .7);
    transition: all 0.4s ease;
}
#languageButton:hover i {
    transform: scale(1.3);
    color: rgba(255, 255, 255, 1);
}
.fa-globe-americas {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    background-color: transparent;
}
#languageModal {
    background-size: cover;
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('/media/2022/02/Titelbilder_SPRACHE_Trial2.jpg');
    background-position: center center;
}
#mainGrid {
    max-width: 1400px!important;
}
main .card-img-top {
    overflow: hidden;
    width: 100%;
    height: 20vh;
    max-height: 200px;
    border-radius: 0px;
    transition: all 0.4s ease;
    margin: auto;
}
main .card-img-top img,  main .card-img-top video{
    /*With thise 2 CSS-declarations we make the card-images haveing the same height*/
    width: 100%;
    height: 100%;
    object-position: top;
    object-fit: cover;
    filter: brightness(50%);
    transition: all 0.2s ease;
}
.object-pos-center {
    object-position: center!important;
    object-fit: cover;
}
main .card-img-top img.noFilterBrighntess {
    filter: brightness(60%);
}
main .card-img-top img.imageCenterPosition {
    object-position: center;
}
main .card:hover img, main .card:hover video {
    transform: scale(1.2)!important;
    filter: brightness(70%)!important;
}
main .card:active img {
    transform: scale(1.2)!important;
    filter: brightness(70%)!important;
}
main .imageVanish {
    transition: opacity .4s ease;
}
main .card .cardTextVanish {
    transition: all .4s ease;
}
main .card-img-top.contain {
    object-fit: contain;
    height: 100%;
}
main .card-body a {
    color: white!important;
    transition: letter-spacing .3s ease!important;
}
main .card-body a:hover {
    letter-spacing: 2px!important;
}
main .fade {
    transition: none!important;
}
.fadeContent {
    transition: filter 0.5s ease;
}
/*=== Style for all modals ===*/
.modal-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom: none;
}
.modal-header button.close {
    color:#fff;
    opacity: 1;
    font-size: 3em;
    font-weight: 100;
}
.modal-content {
    color: #fff;
    background-color: transparent;
}

/*==== Style for the carousel in the header ====*/
header.carousel .carousel-inner {
    background-repeat: no-repeat;
}
header.carousel .home-inner video {
    /*The CSS declaration below enables to set a filter the video-tag*/
    filter: brightness(0.75);
    /*THose 3 css-properties lead to get a video beeing always full screened on all devices*/
    object-fit: cover;
    object-position: center top;
    width: 100vw;
    height: 100vh;
}
.carousel-item {
    transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out,-webkit-transform .5s ease-in-out;
}
.carousel-indicators {
    /*With those 5 lines of CSS-Declaration the indicator-container is positioned to the right*/
    position: fixed!important;
    margin: 0;
    margin-left: auto!important;
    top: 0;
    bottom: 0;
    animation-name: zoom-in-once;
    animation-iteration-count: 1;
    animation-duration: 1s;
}
.carousel-indicators li {
    width: 2px;
    flex: 0 1 auto;
    background: none;
    /*With the negative margin for top & bottom the indicators get closer to each other*/
    margin-top: -5px!important;
    margin-bottom: -5px!important;
    padding: 0;
}
.carousel-indicators li div {
    background: #fff;
}
/*Style the arrows*/
.carousel-control-prev,
.carousel-control-next {
    width: 10%;
    height: auto;
    padding-right: 40px;
    animation-name: zoom-in-once;
    animation-iteration-count: 1;
    animation-duration: 1s;
    /*THe animation fill mode is important for the arrows, otherwise they will suddenly get a littel up after the animation, 
      because of the transform property below. The default style before and after the animations will be considered!
    */
    animation-fill-mode: both;
    /*The following 4 CSS declarations enable to change/overwrite the position of the arrwos for the slider*/
    position: relative!important;
    margin-left: auto;
    top: 50%;
    transform: translateY(-50%);
}
/* This class is used for hiding the .carousel-indicators and .carousel-control-prev/next with jQuery in custom.js*/
.hidden {
    display: none!important;
}
.carousel .fal {
    color: #fff!important;
    opacity: 1!important;
}
.carousel-caption {
    color: #fff;
    /*text-shadow: 2px 2px 4px #000000;*/
    transition: opacity 0.3s ease;
}
.carousel-caption h1 {
    font-weight: 300;
}
.carousel-caption a:hover {
    text-decoration: none!important;
}
.carousel-caption h1 {
    animation-name: zoom-in-once;
    animation-iteration-count: 1;
    animation-duration: 1s;
    letter-spacing: 3px;
}


/*=== Style for the Social Items Section ===*/
.socialItems {
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1030;
}
.socialItems ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@keyframes zoom-in-once {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
.socialItems ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    animation-name: zoom-in-once;
    animation-iteration-count: 1;
    animation-duration: 1s;
    transition: all .2s ease;
}
.socialItems ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .8)!important;
}
.socialItems ul li a:hover {
    text-decoration: none;
}
.socialItems ul li:hover:not(.vericalLineContainer) {
    transform: scale(1.5);
}
.svg-inline--fa {
    font-size: 1rem!important;
}
.vericalLineContainer {
    height: 120px!important;
}
.verticalLine {
    display: block;
    height: 80%!important;
    border-left: 0.01px solid rgba(255, 255, 255, .8)!important;
}

/*=== Style for the footer ===*/
footer {
    transition: all ease .5s; 
}

footer {
    position: relative;
    display: block;
}
footer a{ 
    color: #fff!important;
    transition: all ease .5s; 
}
footer a:focus {
    outline: none;
}
/*=== Style for the modal (in the modalToFooter) ===*/
.modalToFooter a {
    color: #fff!important;
}
.modalToFooter ul li {
    margin: 0 1rem;
}
/*When too much content is stored in the .modal-body element, the modal will get the full height although the classes .modal-dialog-centered
  and .modal-dialog .modal-dialog-scrollable are used. To solve the problem set the .modal-body with "max-height: vh;"
*/
.modal-body {
    max-height: 60vh;
}
/*Style for the modal Kontaktdaten*/
.modalKontaktDaten .modal-dialog {
    justify-content: center;
}
.modalKontaktDaten .modal-content {
    width: auto;
}
/*Animation for the Siegel Modal*/
@keyframes fade-down {
    from { 
        transform: translate3d(0, -100px, 0);
        transform: scale(0);
        opacity: 0;
     }
    to { 
        transform: translate3d(0, 0, 0);
        transform: scale(1);
        opacity: 1;
    }
}
/*Style for the Siegel Modal*/
.modalSiegel .modal-content img {
    display: block!important;
    margin: 0 auto!important;
    height: 100%!important;
    width: 100%!important;
    max-height: 205px!important;
    animation-name: fade-down!important;
    animation-iteration-count: 1!important;
    animation-timing-function: ease!important;
}
.modalSiegel .modal-content .img1 { 
    animation-duration: 1s!important;
}
.modalSiegel .modal-content .img2 { 
    animation-duration: 1.2s!important;
}
.modalSiegel .modal-content .img3 { 
    animation-duration: 1.4s!important;
}
.modalSiegel .modal-content .img4 { 
    animation-duration: 1.6s!important;
}
.modalSiegel .modal-content .img5 { 
    animation-duration: 1.8s!important;
}
.modalSiegel .modal-content .img6 { 
    animation-duration: 2s!important;
}
.modalSiegel .modal-content .img7 { 
    animation-duration: 2.2s!important;
}
.modalSiegel .modal-content .img8 { 
    animation-duration: 2.4s!important;
}
.modalSiegel .modal-content .img9 { 
    animation-duration: 2.6s!important;
}
.modalSiegel .modal-content .img10 { 
    animation-duration: 2.8s!important;
}
.fa-chevron-up {
    font-size: 2rem;
}
/*===================== Style for the page contact.html =====================*/
#kontaktFormular input:not(#kontaktFormular input[type="submit"]), #kontaktFormular textarea{
    border: none;
    border-bottom: 1px solid grey;
    background-color: rgba(0, 0, 0, 0)!important;
    transition: all ease-out 0.5s;
    font-weight: 200;
}
#kontaktFormular textarea {
    display: block!important;
    width: 100%!important;
}
#kontaktFormular input:focus, #kontaktFormular textarea:focus {
    opacity: 1!important;
    pointer-events: auto;
    color: white;
}
.placeholder {
    position: absolute;
    left: 2px;
    bottom: 0;
    color: grey;
    font-weight: 200!important;
    z-index: 1;
    -webkit-transition: all ease-out 0.5s;
    transition: all ease-out 0.5s;
}
#kontaktFormular input:hover + .placeholder, #kontaktFormular textarea:hover + .placeholder, .placeholder:hover {
    color: white;
    cursor: pointer;
}
#kontaktFormular input:hover, #kontaktFormular textarea:hover {
    cursor: pointer;
}
/*===================== Style for the page unternehmen.html =====================*/
.mehrErfahrenImage {
    height: 50vh;
    object-fit: cover;
    object-position: top;
}
.overlayDark {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(transparent .5%, black 99.5%);
    opacity: 1;
    transition: opacity .4s ease;
}

/*===================== Style for the page alle_Berater.html =====================*/
.mehrErfahrenBeraterImageContainer, .infoContainer {
    overflow: hidden;
    width: 100%;
    max-width: 500px;
}
.mehrErfahrenBeraterImage {
    width: 100%;
    object-fit: cover;
    object-position: top;
    filter: brightness(65%);
    transition: all 0.2s ease;
}
/*Becasue of the action effects with CSS we have to make the hover-effect somehow in JavaScript*/
.mehrErfahrenBeraterImage:hover {
    cursor: pointer;
}
.infoContainer {
    position: relative;
    height: 100%;
}
.mehrErfahrenBeraterNameTitel {
    cursor: pointer;
}
.infoContainer .infoText {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow-y: auto;
    transition: all 0.3s ease;
}
.schließen {
    background-color: transparent;
    border: none;
}
.schließen:focus {
    outline: none;
}
.schließen i {
   font-weight: 100!important;
   font-size: 25px;
}
.schließen i {
    color: rgba(255, 255, 255, .5);
    background-color: transparent;
    transition: all .4s ease;
}
 .schließen i:hover {
    transform: scale(1.3);
    color: rgba(255, 255, 255, 1);
}
/*This CSS class is used for hiding the .info element and the .wbn-buttons */
.hide {
    opacity: 0!important;
    pointer-events: none!important;
    transition-delay: 0s;
}
/*THis CSS class is used for disableing the dot-images, when the .info text for the consultant is displayed*/
.pointerEvents {
    pointer-events: none!important;
}



/*===================== Style for the subpage executive_Search.html and executive_Assessment.html and executive_Development.html =====================*/
.collapsePos  {
    padding-top: 10px;
}
.imageContainer {
    background: none;
}
@keyframes bounce {
    0% {
        transform: translateY(0%);
    }
    40% {
        transform: translateY(80%);
    }
    80% {
        transform: translateY(40%);
    }
    100% {
        transform: translateY(0%);
    }
}
.bounceArrow {
    animation: bounce 3s infinite;
}
.introContent {
    display: block;
    transition: all 0.5s ease;
    position: absolute;
    bottom: 0;
}
.textVanish {
    /* the transition for the filter property is used for the images in for the pages in the blog section */
   transition: opacity 0.5s ease, filter 0.5s ease!important;
}
.textVanish i:not(.schließen i) {
    transform-origin: 50% 50%!important;
    transition: transform .35s ease!important;
}
hr.textVanish {
    border-top: .1px solid rgba(255, 255, 255, .5);
}
.card {
    border-radius: 0;
    background-color: transparent;
    border: none;
}
.card-header {
    transition: box-shadow ease 0.3s;
    padding-left: 0px;
}
.card-header:hover:not(.card-header[aria-expanded=true]) {
    box-shadow: 0px 10px 14px -13px rgb(255 255 255);
}
.card-body {
    padding-left: 0px;
    padding-right: 0px;;
}
.close-open {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: auto;
    right: 5px;
}

.line {
    width: 15px;
    height: 1.5px;
    background-color: rgb(0, 0, 0);
    margin: 5px;
}
.bulletPoint {
    font-size: xx-large;
}

/*===================== Style for the subpages board_ceo.html, financial_Officers.html =====================*/
.opacity_image  {
    position: relative;
    padding: 0;
    background: transparent;
}
.opacity_image img {
    object-fit: cover;
    width: 100%;
    opacity: 0.8;
    transition: opacity .4s ease;
}
.opacity_image video {
    object-fit: cover;
    width: 100%;
    transition: opacity .4s ease;
}
.opacity_image video:focus {
    outline: none;
}
.opacity_image div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(transparent 5%, rgba(0, 0, 0, 0.9) 95%);
}


/*===================== Style for the subpages profile.html =====================*/
.progressBarContainer {
    width: auto;
    height: auto;
    border-radius: 50%;
}
.progressBar {
    border: 6px solid gray;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
}
.round {
    position: relative;
}
.round strong {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: #fff;
    font-weight: 100;
}
.round canvas {
    transition: all .4s ease;
    border-style: none!important;
}
.progressBarContainer  > p {
    margin-top: 20px;
}
.round span i {
    color: #ff5c5c;
    font-size: 22px;
    margin-right: 10px;
}
/*===================== Style for the subpages publications.html =====================*/
.noLink, .noLink:hover {
    text-decoration: none;
}


/*===================== Style for the subpages blog.html, podcasts.html, talks_and_Reports.html =====================*/
/* the main-tag is prepened to distinguish between the .nav-items, .nav-links in the navigation-bar and the nav-tabs */
main h3.echas {
    letter-spacing: 2.5px;
}
main ul.nav-tabs {
    border: none;
}
main ul.nav-tabs .nav-item {
    overflow: hidden;
}
main .nav-link {
    transition: all 1s ease!important;
    font-family: 'Source Sans Pro', sans-serif!important;
}
main .nav-link.active {
    background: none!important;
    border: none!important;
    color: white!important;
    pointer-events: none;
    border-bottom: 1px solid rgba(255, 255, 255, 1)!important;
}
/*===================== Style for the subpages in the blog-directory =====================*/
.fadeContent > video {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    object-position: 40% top;
}
.fadeContent > .mediaNewsVideo {
    object-position: 50% bottom;
}
.fadeContent > .mediaNewsVideo {
    filter: brightness(70%);
}
.fadeContent > video.videoSabrina {
    object-position: top right!important;
}
.fadeContent > .videoLeistungen {
    filter: brightness(50%);
    object-position: 65% center;
}
.fadeContent > .videoBranchen {
    object-position: 46% center;
}
.fadeContent > .videoFunktionen {
    object-position: 50% 45%;
}
.fadeContent > .videoKarriere {
    filter: brightness(50%);
    object-position: 47% top;
}
.fadeContent > .videoContact {
    filter: brightness(50%);
}
.imageCenter {
    object-position: center!important;
}
.weitereArtikel a {
    text-decoration: underline;
}
.quaderImage {
    width: 55%;
}
.normalImage {
    width: 70%;
}
.widthImage {
    width: 90%;
}
.heightImage {
    width: 40%;
}
.thinHeightImage {
    width: 20%;
}
/* The CSS-selectors should not affect the .mehrErfahren Buttons in our custom carousel in alle_Berater.html */
.contactUs, #kontaktFormular input[type="submit"] {
    background-color: transparent;
    border-bottom: 1px solid grey!important;
    border-radius: 3px;
    border-right: 1px solid grey!important;
    transition: .4s ease;
    color: grey;
}
/* The CSS-selectors should not affect the .mehrErfahren Buttons, when hovering over them in our custom carousel in 
alle_Berater.html */
.contactUs:hover, #kontaktFormular input[type="submit"]:hover {
    background-color: rgba(255, 255, 255, 1);
    color: black!important;
    text-decoration: none;
    letter-spacing: 0.5px;
}
img.filterImage {
    filter: brightness(70%);
}
img.filterImage:hover {
    filter: brightness(90%);
}
.verweis {
    text-decoration: underline;
}
/* The CSS-Selectors below are used for the image Modals */
/* The Modal (background) */
.imageForModal:hover, .imageForModal:active {
    cursor: pointer;
    transform: scale(1.05);
}
.customModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1050; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%;
    overflow-X: hidden; /* Enable scroll if needed */
    overflow-y: hidden;
    background-color: rgba(0,0,0,0.8);
}
.modalBody {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.modalClose {
    align-self: flex-end;
    cursor: pointer;
    font-size: 2rem;
    font-weight: 100;
}
/* Modal Content (image) */
.modalImage {
    margin: 0 auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
    z-index: 1050; /* Sit on top */
}
img.bottomImage {
    bottom: -40%;
}
/* Add Transition */
.modalImage, .customModal, .imageForModal {  
    transition: all 0.4s ease!important;
}
  
/*===================== Style for the subpages in the BP_Executive_Talk-directory =====================*/
.overlayImageContainerBeforeVideoStart {
    position: relative;
}
.overlayImageContainerBeforeVideoStart video:focus {
    outline: none;
}
.overlayImageContainerBeforeVideoStart > img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 1;
    filter: brightness(60%);
    object-fit: cover;
    transition:  filter 0.4s ease;
    padding: 0 15px; /*Otherwise the overlayed image will overflow more than the area of the video*/
}
.overlayImageContainerBeforeVideoStart .fa-play-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 7rem;
    cursor: pointer;
    font-weight: 400;
    opacity: 1;
    transition: opacity 0.4s ease;
}

/*===================== Style for the subpage aktuelle_Stellenangebote.html =====================*/
tbody tr {
    cursor: pointer;
}
table a {
    cursor: none;
    pointer-events: none;
}
.modalToStellenangebote .modal {
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55));
}
.modalToStellenangebote .modal-dialog .modal-body {
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
}

/*===================== Style for the page contactus.html =====================*/
form input, form textarea {
    background-color: rgba(255, 255, 255, 1);
    color: grey;
    resize: none;
}
form input:focus, form textarea:focus {
    outline: none;
}
form input::-webkit-outer-spin-button,
form input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
form input[type=number] {
  -moz-appearance: textfield;
}
form input[type=submit] {
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid white!important;
    border-radius: 3px;
    transition: all .4s ease!important;
}
form input[type=submit]:hover {
    background-color: rgba(0, 0, 0, 1);
    border: 1px solid black!important;
    color: white!important;
    text-decoration: none;
    letter-spacing: 2px;
}