.d-none {
    display: none !important;
}

.pt-60 {
    padding-top: 60px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.pt-50 {
    padding-top: 50px;
}

.p-0 {
    padding: 0 !important;
}

.section--blog .blog-teaser-list .blog-teaser .image-container {
    padding-bottom: 75.5%;
}

section.section--logos .shell {
    max-width: unset;
    padding: 0;
}

section.section--logos .shell .section__content {
    max-width: unset;
}

section.section--logos .shell .section__content ul.list-logos li {
    width: 15%;
    position: relative;
    height: 150px;
    margin: 10px;
    box-shadow: 0px 1px 10px 0px rgba(50, 50, 50, 0.14);
    /*filter: grayscale(100%);*/
    background: #fff;
}

section.section--logos .shell .section__content ul.list-logos li img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-width: 60% !important;
    max-height: 67% !important;
    margin: auto;
}

.headerSmall > .shell {
    max-width: 2000px;
}

.responsive-content .video-content-wrapper .intro {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 20px !important;
}
.intro-video iframe {
    opacity: 0.7 !important;
}

@media only screen and (max-width: 1500px) {
    section.section--logos .shell .section__content ul.list-logos li {
        width: 22%;
        height: 150px;
    }
}

@media only screen and (max-width: 1023px) {
    section.section--logos .shell .section__content header {
        margin-bottom: 55px;
        margin-top: 30px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-20-responsive {
        padding-top: 20px !important;
    }

    .pt-30-responsive {
        padding-top: 30px !important;
    }

    .pb-30-responsive {
        padding-bottom: 30px !important;
    }
}

@media only screen and (max-width: 920px) {
    section.section--logos .shell .section__content ul.list-logos li {
        width: 46%;
    }
}

@media only screen and (max-width: 767px) {
    section.section--logos .shell .section__content ul.list-logos li {
        display: inline-block;
    }
}

@media only screen and (max-width: 550px) {
    section.section--logos .section__content .section__head {
        padding-top: 30px;
    }

    section.section--logos .shell .section__content ul.list-logos li {
        height: 120px;
        width: 44%;
    }
}

/**
 * Hero Areas
 */
.responsive-content, .responsive-content-2, .responsive-content-991 {
    display: none;
}

.responsive-bar-wrapper {
    display: none;
}

div.video-content-wrapper, div.slider-content-wrapper {
    padding: 10px 15px;
}

.slide-content {
    position: relative;
}

div.bar-wrapper {
    width: 100%;
    height: 30px;
}

.bg-grey {
    background: #f1f1f1 !important;
}

.bg-white {
    background: #ffffff !important;
}

div.bar {
    height: 100%;
    width: 50%;
    background: #e7ff1d;
    float: right;
    position: relative;
    z-index: 2;
}

div.bar.wide {
    width: 65%;
}

.img-wrapper {
    width: 100%;
    position: relative;
}

.mt-20 {
    margin-top: 20px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.hero-wrapper {
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
    position: relative;
    min-height: 550px;
}

.section--introWithoutImage .introHeadlineSmall {
    height: 425px;
}

h1.hero-line {
    font-weight: 900;
    color: #fff;
    font-size: 54pt;
    line-height: 60pt;
    margin: 0;
}

.hero-wrapper .hero-element {
    position: absolute;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 140px;
    z-index: 500;
}

.hero-wrapper .hero-element.petrol {
    background: #16748e;
}

.hero-wrapper .hero-element.left {
    width: 47%;
}

.section--introSmall {
    padding-top: 123px;
    /*padding-top: 0;*/
}

div.main section.section.section--page section.section.section--introSmall {
    padding-top: 0;
}

.section--introBig .introRight,
.section--introSmall .introRight {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

.p-t-0 {
    padding-top: 0 !important;
}

.p-b-0 {
    padding-bottom: 0 !important;
}

.introRight .bar-wrapper {
    position: absolute;
    bottom: -30px;
    width: 100%;
}

.introRight .bar-wrapper .bar {
    width: 100% !important;
}

.introHeadlineSmall {
    left: 0;
    max-width: 100%;
}

.introLine {
    height: 30px;
    bottom: -30px;
}

.section--introWithoutImage .introRight,
.section--introWithoutImage .introLeft {
    height: 425px;
}

.section--introWithoutImage .introLeft {
    display: flex;
    align-items: center;
    padding-left: 140px;
    z-index: 500;
}

.section--introWithoutImage .introRight {
    margin-top: 0;
}

section.section.section--introWithoutImage {
    padding-top: 158px;
}

section.section--introSmall .introSublineWrapper {
    display: flex;
    min-height: 340px;
    align-items: flex-end;
}

header.headerSmall ~ div.main > section.section.section--page {
    padding-top: 122px;
}

header.headerSmall ~ div.main > section.section.section--page > section.section--introWithoutImage {
    padding-top: 0;
}

.section--introWithoutImage .introRight {
    width: 54%;
}

.main section.section.section--page .section--introBig/*, section.section.section--introSmall*/ {
    padding-top: 0 !important;
}

.section--introWithoutImage .introRight {
    margin-top: 0;
}

.logoContainerWrapper + .section--introWithoutImage .introRight {
    margin-top: -60px;
}

.desktop {
    display: block !important;
}

.hide-desktop {
    display: none !important;
}

.nav-space-top {
    background: #fff;
    height: 77px;
    position: absolute;
    z-index: 10;
    width: 100%;
    top: 0;
    left: 0;
}

@media only screen and (max-width: 1500px) {
    .desktop {
        display: none !important;
    }

    .hide-desktop {
        display: block !important;
    }

    .hide-tablet {
        display: none;
    }

    header.headerSmall ~ div.main > section.section.section--page {
        padding-top: 77px;
    }
}

@media only screen and (min-width: 1281px) {
    div.intro-video div.intro {
        padding-left: 148px !important;
        padding-right: 148px !important;
    }
}

@media only screen and (max-width: 1280px) {
    header.headerSmall ~ div.main > section.section.section--page {
        padding-top: 77px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .hero-wrapper .hero-element,
    .section--introWithoutImage .introLeft {
        padding-left: 60px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .article .article__content p {
        font-size: 24px;
    }
}

@media only screen and (max-width: 991px) {
    .responsive-content-991 {
        displaY: block;
    }

    .hide-responsive-991 {
        display: none;
    }

    .hide-responsive {
        display: none !important;
    }

    .responsive-content {
        display: block !important;
    }

    .responsive-content div.bar {
        width: 65%;
    }

    .responsive-content .video-content-wrapper,
    .responsive-content .slider-content-wrapper {
        background: #16748e;
        position: relative;
        z-index: 2;
    }

    .responsive-content .video-content-wrapper div.intro,
    .responsive-content .slider-content-wrapper div.description {
        position: static;
        padding: 0;
    }

    .responsive-content .video-content-wrapper div.intro h1,
    .responsive-content .slider-content-wrapper div.description h1 {
        font-size: 48px;
    }

    .responsive-content .video-content-wrapper div.intro p,
    .responsive-content .slider-content-wrapper div.description p {
        font-size: 22px;
        color: #fff;
        font-weight: 300;
    }

    div.bar {
        height: 20px;
    }

    .limit-width {
        width: 100% !important;
    }

    .limit-width.bar {
        left: 60px;
    }

    .limit-width.right {
        margin-left: 6%;
    }

    .fill-width {
        width: 6% !important;
    }

    h1.hero-line {
        font-size: 42pt !important;
        line-height: 45pt;
        font-weight: 900;
        margin-bottom: 0;
        max-width: 100%;
    }

    .section--introWithoutImage .introRight,
    .section--introWithoutImage .introLeft,
    .section--introWithoutImage .introHeadlineSmall {
        height: 180px;
    }

    section.section--introSmall .introSublineWrapper,
    .introSublineWrapper {
        min-height: unset;
    }
}

@media only screen and (max-width: 767px) {
    .hide-responsive-2 {
        display: none !important;
    }

    .responsive-content-2 {
        display: block !important;
    }

    .responsive-content-2 div.bar {
        width: 65%;
    }

    .responsive-content-2 .video-content-wrapper,
    .responsive-content-2 .slider-content-wrapper {
        background: #16748e;
        position: relative;
        z-index: 2;
        padding-left: 8%;
    }

    .section.section.section--article article.article div.article__image {
        display: block;
        position: static;
        width: 100% !important;
    }

    .responsive-content-2 .video-content-wrapper div.intro,
    .responsive-content-2 .slider-content-wrapper div.description {
        position: static;
        font-size: 26px;
        font-weight: 300;
        padding: 0 20px 0 0;
        margin: 15px 0;
    }

    .responsive-content-2 .video-content-wrapper div.intro h1,
    .responsive-content-2 .slider-content-wrapper div.description h1 {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .responsive-content-2 .video-content-wrapper div.intro p,
    .responsive-content-2 .slider-content-wrapper div.description p {
        font-size: 22px;
        color: #fff;
        font-weight: 300;
        margin-bottom: 15px;
    }

    .responsive-content-2 .slider-content-wrapper div.description a {
        margin-left: 2px;
    }

    .overlay-image-bar {
        height: 20px;
        position: absolute;
        bottom: 0;
    }

    .overlay-image-bar.foreground {
        background: rgba(22, 116, 142, .5);
        right: 0;
    }

    .overlay-image-bar.background {
        background: #16748e;
        left: 0;
    }

    .section--introWithoutImage {
        padding-top: 0 !important;
    }

    div.logoContainerWrapper ~ .section--introWithoutImage .introRight {
        margin-top: -60px;
    }

    .hero-wrapper .hero-element, .section--introWithoutImage .introLeft {
        padding-left: 60px;
    }

    h1.hero-line {
        font-size: 30pt !important;
        line-height: 36pt;
    }
}

@media only screen and (max-width: 500px) {
    .limit-width {
        width: 100%;
    }

    .limit-width.bar {
        left: 20px;
    }

    .hero-wrapper .hero-element, .section--introWithoutImage .introLeft {
        padding-left: 20px;
    }
}