/*This is the old website's CSS sheet and its beeing used by the mobile pages that are rendered in the app*/
:root {
    --black: #000000;
    --white: #ffffff;
    --font-bold: '';
    --font-regular: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-italic: ''
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

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

strong {
    font-weight: 700
}

em, i {
    font-style: italic
}

a {
    text-decoration: none
}

.front-end {
    height: 100%;
    font-size: 10px
}

body {
    height: 100%;
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-family: var(--font-regular);
    background-color: #fff;
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch
}

input::-ms-clear {
    display: none
}

a {
    color: inherit
}

    a:active, a:hover, a:link, a:visited {
        text-decoration: none
    }

    a:focus {
        outline: 1px dashed #000;
        outline: 1px dashed var(--black)
    }

button:focus {
    outline: 1px dashed #000;
    outline: 1px dashed var(--black)
}

input:focus {
    outline: 1px dashed #000;
    outline: 1px dashed var(--black)
}

textarea:focus {
    outline: 1px dashed #000;
    outline: 1px dashed var(--black)
}

select:focus {
    outline: 1px dashed #000;
    outline: 1px dashed var(--black)
}

.clear {
    clear: both
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0
}

.hidden {
    display: none
}

.img-responsive {
    width: 100%;
    height: auto
}

.box-wide {
    width: 92%;
    margin: auto;
    max-width: 110rem
}

    .box-wide .box-wide {
        width: 100%
    }

@media all and (-ms-high-contrast:none) {
    .box {
        margin-bottom: 2rem
    }

    .box-full {
        width: 100%;
        float: left;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .box-half {
        width: 50%;
        float: left;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .box-third {
        width: 33.333%;
        float: left;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .box-two-thirds {
        width: 66.66%;
        float: left;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden
    }

    .box-quarter {
        width: 25%;
        float: left;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .box-three-quarters {
        width: 75%;
        float: left;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .column-grid {
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        width: -moz-calc(100% + 3rem);
        width: calc(100% + 3rem);
        margin-left: -1.5rem;
        margin-right: -1.5rem
    }

        .column-grid > .box-quarter {
            width: -moz-calc(25% - 3rem);
            width: calc(25% - 3rem);
            margin-left: 1.5rem;
            margin-right: 1.5rem
        }

        .column-grid > .box-third {
            width: -moz-calc(33.333% - 3rem);
            width: calc(33.333% - 3rem);
            margin-left: 1.5rem;
            margin-right: 1.5rem
        }

        .column-grid > .box-two-thirds {
            width: -moz-calc(66.66% - 3rem);
            width: calc(66.66% - 3rem);
            margin-left: 1.5rem;
            margin-right: 1.5rem
        }

        .column-grid > .box-full {
            width: -moz-calc(100% - 3rem);
            width: calc(100% - 3rem);
            margin-left: 1.5rem;
            margin-right: 1.5rem
        }

        .column-grid > .box-half {
            width: -moz-calc(50% - 3rem);
            width: calc(50% - 3rem);
            margin-left: 1.5rem;
            margin-right: 1.5rem;
            position: relative
        }

        .column-grid > .box-three-quarters {
            width: -moz-calc(75% - 3rem);
            width: calc(75% - 3rem);
            margin-left: 1.5rem;
            margin-right: 1.5rem
        }

    @media all and (max-width:768px) {
        .box-quarter, .box-third {
            width: 50%
        }

        .box-three-quarters, .box-two-thirds {
            width: 100%
        }

        .column-grid > .box-quarter, .column-grid > .box-third {
            width: -moz-calc(50% - 3rem);
            width: calc(50% - 3rem)
        }

        .column-grid > .box-three-quarters, .column-grid > .box-two-thirds {
            width: -moz-calc(100% - 3rem);
            width: calc(100% - 3rem)
        }
    }

    @media all and (max-width:540px) {
        .box-half, .box-quarter, .box-third {
            width: 100%
        }

        .column-grid > .box-half, .column-grid > .box-quarter, .column-grid > .box-third {
            width: -moz-calc(100% - 3rem);
            width: calc(100% - 3rem)
        }
    }
}

@supports (display:grid) {
    .column-grid {
        display: grid;
        grid-template-columns: repeat(12,minmax(0,1fr));
        grid-gap: 4rem
    }

    .box-quarter {
        grid-column: span 3
    }

    .box-third {
        grid-column: span 4
    }

    .box-half {
        grid-column: span 6
    }

    .box-two-thirds {
        grid-column: span 8;
        overflow: hidden
    }

    .box-full {
        grid-column: 1/-1
    }

    @media all and (min-width:769px) and (max-width:968px) {
        .box-quarter {
            grid-column: span 4
        }

        .box-two-thirds {
            grid-column: 1/-1
        }
    }

    @media all and (max-width:768px) {
        .box-quarter {
            grid-column: span 6
        }

        .box-half, .box-third, .box-two-thirds {
            grid-column: 1/-1
        }
    }

    @media all and (max-width:540px) {
        .column-grid {
            grid-gap: 0
        }

        .box-half, .box-quarter, .box-third, .box-two-thirds {
            grid-column: 1/-1
        }
    }
}

.header {
    background-color: rgba(255,255,255,.5);
    z-index: 3
}

.logo {
    max-height: 3rem
}

.button {
    display: inline-block;
    padding: 2rem 3rem;
    background-color: #bb1d2c;
    color: #fff;
    font-size: 1.6rem;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

    .button.gradient {
        color: #fff;
        background: -moz-linear-gradient(left,#bb1d2c 0,#872058);
        background: linear-gradient(90deg,#bb1d2c 0,#872058)
    }

    .button.black {
        color: #fff;
        background-color: #14242c
    }

    .button.red {
        color: #fff;
        background-color: #bb1d2c
    }

.round .button {
    -moz-border-radius: 30px;
    border-radius: 30px
}

.button-content-wrapper {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

    .button-content-wrapper.center {
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .button-content-wrapper.right {
        -moz-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }

    .button-content-wrapper > .button {
        margin-top: .5rem;
        margin-bottom: .5rem;
        width: 100%;
        text-align: center
    }

@media all and (min-width:540px) {
    .button-content-wrapper > .button {
        width: auto
    }

        .button-content-wrapper > .button + .button {
            margin-left: 1rem
        }
}

.separator-container {
    padding: 2rem 0
}

hr.separator {
    position: relative;
    height: 3px;
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid #ccc
}

.header-background {
    width: 100%;
    height: 10rem;
    position: relative;
    background: -moz-linear-gradient(left,#14242c 0,#14242c 40%,#243e4b 40%,#243e4b 100%);
    background: linear-gradient(to right,#14242c 0,#14242c 40%,#243e4b 40%,#243e4b 100%)
}

.header-container {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: flex;
    height: 10rem;
    margin-top: 3rem
}

.no-language-menu .header-container, .no-language-menu.no-menu .header-container {
    margin-top: 0
}

.burger-menu {
    display: none
}

.menu {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 2;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    width: 65%;
    height: 100%;
    font-size: 1.5rem;
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-family: var(--font-regular);
    background: #243e4b;
    z-index: 1
}

.menu-item {
    position: relative;
    margin-left: 2.5rem;
    height: 10rem;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .menu-item:first-child {
        margin-left: 4rem
    }

.menu-item-with-arrow {
    position: relative;
    width: auto;
    white-space: nowrap
}

    .menu-item-with-arrow a {
        font-size: 1.6rem
    }

.menu-item .caret {
    display: inline-block;
    cursor: pointer;
    color: inherit;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 5px dashed;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent
}

.drop-down-arrow {
    display: inline-block;
    cursor: pointer;
    padding: 1rem;
    padding-left: .5rem
}

    .drop-down-arrow:hover {
        cursor: pointer
    }

.drop-down-menu-list {
    display: none;
    white-space: nowrap;
    position: absolute;
    min-width: 13rem;
    height: auto;
    top: 100%;
    left: -2.5rem;
    padding: 1.5rem 2rem;
    background-color: #14242c;
    color: #fff
}

.menu-item:first-child .drop-down-menu-list {
    left: -4rem
}

.drop-down-menu-list a {
    cursor: pointer;
    text-decoration: none;
    list-style-type: none;
    margin-bottom: 2rem;
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-family: var(--font-regular)
}

.active .drop-down-menu-list {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.active .caret {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.language-links-wrap {
    height: 3rem;
    width: 100%;
    min-width: 30rem;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #14242c;
    background-color: rgba(255,255,255,.4);
    text-transform: uppercase;
    font-size: 2rem;
    position: absolute;
    top: -3rem;
    left: 50%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-left: 0
}

.language-links-inner-wrap {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 3rem;
    width: 92%;
    max-width: 110rem
}

.language-link-item {
    margin-left: 5rem;
    cursor: pointer
}

    .language-link-item:hover {
        font-weight: 600
    }

.language-links-inner-wrap a:active {
    font-weight: 600;
    text-decoration: underline
}

.no-menu .header-container {
    margin-top: 3rem
}

.overlay {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: 0 0;
    height: 100vh;
    width: 100vw
}

.active.overlay {
    display: block
}

@media all and (max-width:920px) {
    .logo {
        max-height: 2.7rem
    }

    .button.header-button {
        padding: 2rem .5rem
    }

    .menu {
        width: 65%
    }

    .menu-item {
        margin-left: 1rem
    }

        .menu-item:first-child {
            margin-left: 2.5rem
        }

        .menu-item.menu-item.language-links-wrap {
            margin-left: 0
        }

    .menu-item-with-arrow a {
        font-size: 1.4rem
    }

    .drop-down-arrow {
        padding: 1rem 1rem 1rem .5rem
    }

    .drop-down-menu-list {
        left: -1rem
    }

    .menu-item:first-child .drop-down-menu-list {
        left: -2.5rem
    }
}

@media all and (max-width:768px) {
    body.fixed {
        position: fixed;
        width: 100%;
        overflow-y: scroll
    }

    .no-menu.header {
        position: absolute;
        top: 0;
        width: 100%
    }

    .button.header-button {
        display: none
    }

    .header-background {
        background: #14242c
    }

    .header-container {
        margin-top: 0
    }

    .no-menu .header-container {
        margin-top: 3rem
    }

    .burger-menu {
        cursor: pointer;
        display: block;
        position: absolute;
        top: 50%;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 4rem;
        background-color: transparent;
        border: transparent;
        z-index: 3
    }

        .burger-menu:hover {
            cursor: pointer
        }

        .burger-menu .burger-menu-item {
            display: block;
            width: 3rem;
            height: .3rem;
            background-color: #fff;
            margin: .6rem 0;
            -moz-transition: .3s;
            transition: .3s;
            pointer-events: none
        }

    .burger-menu-item:hover {
        cursor: pointer
    }

    .is-open .burger-menu .burger-menu-item:nth-child(1) {
        -moz-transform: rotate(-45deg) translate(-6px,6px);
        -ms-transform: rotate(-45deg) translate(-6px,6px);
        transform: rotate(-45deg) translate(-6px,6px)
    }

    .is-open .burger-menu .burger-menu-item:nth-child(2) {
        opacity: 0
    }

    .is-open .burger-menu .burger-menu-item:nth-child(3) {
        -moz-transform: rotate(45deg) translate(-7px,-7px);
        -ms-transform: rotate(45deg) translate(-7px,-7px);
        transform: rotate(45deg) translate(-7px,-7px)
    }

    .menu {
        position: fixed;
        right: -60%;
        width: 60%;
        height: -moz-calc(100vh - 10rem);
        height: calc(100vh - 10rem);
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin-bottom: 5rem;
        top: 10rem;
        -moz-transition: .3s ease-in;
        transition: .3s ease-in;
        padding-top: 5rem;
        background-color: #14242c;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        overflow-y: scroll;
        -ms-overflow-style: none;
        z-index: 3
    }

    .is-open .menu {
        right: 0;
        bottom: 0;
        overflow: scroll
    }

    .menu-item {
        margin-left: 4rem;
        margin-bottom: 5rem;
        height: auto;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content
    }

        .menu-item:first-child {
            margin-left: 4rem
        }

    .menu-item-with-arrow a {
        font-size: 2rem
    }

    .drop-down-menu-list {
        position: relative;
        padding: 0 2rem;
        left: 0;
        margin-top: 2rem
    }

    .menu-item:first-child .drop-down-menu-list {
        left: 0
    }

    .menu-item.language-links-wrap {
        display: none;
        position: relative;
        top: auto;
        padding: 3rem 0;
        padding-bottom: 7rem;
        margin-left: 0;
        margin-bottom: 1rem;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        z-index: 2;
        background-color: #14242c;
        color: #fff;
        text-align: center;
        border-top: .1rem solid #fff;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        width: 100%;
        height: 5rem
    }

    .language-links-wrap.no-menu {
        position: absolute
    }

    .no-menu .language-links-inner-wrap {
        -moz-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }

    .language-links-inner-wrap {
        -ms-flex-pack: distribute;
        justify-content: space-around
    }

    .is-open .language-link-item {
        margin-left: 0
    }

    .overlay {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: 0 0;
        height: 100vh;
        width: 100vw;
        z-index: 2
    }

    .is-open .overlay {
        display: block
    }

    .drop-down-arrow {
        padding: 1.5rem 1.5rem 1.5rem 1rem
    }

    .menu-item .caret {
        border-top: 6px dashed;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent
    }

    .no-menu .language-links-wrap {
        top: -3rem;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        height: 3rem;
        top: -3rem;
        color: #14242c;
        background-color: transparent
    }

    .no-menu .language-link-item {
        margin-right: 3rem
    }

    .no-menu .button.header-button {
        display: initial;
        margin-right: 1rem
    }

    ::-webkit-scrollbar {
        display: none
    }
}

@media all and (max-width:540px) {
    .header .button {
        padding: 1rem;
        font-size: 1.3rem
    }

    .header-background {
        height: 7rem
    }

    .header-container {
        height: 7rem
    }

    .burger-menu {
        right: 1.5rem
    }

    .menu {
        top: 7rem;
        padding-top: 1rem;
        right: -100%;
        width: 100%;
        height: -moz-calc(100vh - 7rem);
        height: calc(100vh - 7rem)
    }

    .menu-item {
        margin-bottom: 2.5rem
    }

    .is-open .menu {
        display: block
    }

    .menu-item.language-links-wrap {
        margin-bottom: 0;
        padding: 2rem 0;
        padding-bottom: 7rem
    }

    .no-menu .language-link-item {
        margin-right: 3rem;
        margin-left: 1rem;
        font-size: 1.7rem
    }

    .menu-item-with-arrow a {
        font-size: 1.7rem
    }
}

.hero {
    position: relative;
    padding-top: 13rem;
    padding-bottom: 7rem
}

    .hero:before {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #000;
        opacity: .5
    }

.hero-image-wrapper {
    margin-top: 0;
    position: absolute;
    top: -9rem;
    height: -moz-calc(100% + 9rem);
    height: calc(100% + 9rem);
    min-width: 100%;
    overflow: hidden;
    z-index: -1
}

.frontpage-hero-banner-picture {
    position: absolute;
    top: -6.5rem;
    left: 50%;
    height: -moz-calc(100% + 6.5rem);
    height: calc(100% + 6.5rem);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    transform: translate(-50%,0)
}

.hero-picture {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto
}

.hero-container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.hero-title {
    width: 100%;
    font-size: 8.2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: #2b2b2b;
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-family: var(--font-regular)
}

.hero-intro-text {
    margin-bottom: 2rem;
    color: #ba1d2c;
    font-size: 2rem
}

.hero-text {
    width: 60%;
    font-size: 1.6rem;
    line-height: 2.5rem;
    margin-bottom: 3rem;
    color: #5d5d5d
}

.hero-overlay {
    position: fixed;
    display: none;
    visibility: hidden;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5
}

    .hero-overlay.active {
        display: block;
        visibility: visible
    }

.hero-popup {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #233e4b;
    opacity: 0;
    -moz-transition: opacity .6s;
    transition: opacity .6s
}

.hero-overlay.visible .hero-popup {
    opacity: .9;
    visibility: visible
}

.hero-popup-video {
    position: absolute;
    width: 100rem;
    height: 70rem;
    left: 50%;
    top: 50%;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.video-component-container {
    width: 100%;
    height: 100%
}

.hero .video-component-youtube-player {
    opacity: 0;
    -moz-transform: translateY(2.5%);
    -ms-transform: translateY(2.5%);
    transform: translateY(2.5%);
    -moz-transition: opacity .6s,transform .6s,-moz-transform .6s;
    transition: opacity .6s,transform .6s;
    transition: opacity .6s,transform .6s,-moz-transform .6s
}

.hero-overlay.visible .video-component-youtube-player {
    opacity: 1;
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.pulsating-play-button {
    position: relative;
    width: 20rem;
    height: 20rem;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #bb1d2c;
    cursor: pointer
}

    .pulsating-play-button:before {
        content: '';
        position: absolute;
        width: 120%;
        height: 120%;
        margin-top: -10%;
        margin-left: -10%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-color: #bb1d2c;
        -moz-animation: pulse-ring 3s cubic-bezier(.215,.61,.355,1) infinite;
        animation: pulse-ring 3s cubic-bezier(.215,.61,.355,1) infinite
    }

.pulsating-play-button-icon {
    position: absolute;
    top: 50%;
    left: -moz-calc(50% + .7rem);
    left: calc(50% + .7rem);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.close-popup {
    position: absolute;
    width: 5rem;
    height: 5rem;
    right: 3rem;
    top: 3rem;
    background: #bb1d2c;
    font-size: 1rem;
    cursor: pointer
}

.close-icon {
    display: inline-block;
    position: absolute;
    width: 2rem;
    height: 3.4rem;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    font-size: 3rem;
    color: #fff
}

@media (min-width:767px) {
    .frontpage-hero-banner-picture {
        top: -9rem;
        height: -moz-calc(100% + 9rem);
        height: calc(100% + 9rem)
    }
}

@media all and (min-width:2560px) {
    .hero-picture {
        min-width: 100%
    }
}

@media all and (max-width:1024px) {
    .hero .box-third {
        display: none
    }

    .hero-title {
        width: 100%
    }

    .hero-text {
        width: 80%
    }

    .hero-popup-video {
        width: 80vw;
        height: 50vw
    }
}

@media all and (max-width:768px) {
    .no-menu.header + .hero {
        padding-top: 17rem
    }

    .hero {
        padding-top: 3rem
    }

    .hero-title {
        width: 100%;
        font-size: 6rem
    }

    .hero-text {
        width: 100%
    }

    .hero-popup-video {
        width: 90vw;
        height: 50rem
    }
}

@media all and (max-width:540px) {
    .no-menu.header + .hero {
        padding-top: 13rem
    }

    .hero-popup-video {
        height: 30rem
    }

    .hero-title {
        font-size: 4.8rem
    }

    .close-popup {
        right: 1.5rem
    }

    .hero-container {
        top: 55%
    }
}

@-moz-keyframes pulse-ring {
    0% {
        -moz-transform: scale(.5);
        transform: scale(.5)
    }

    40%,50% {
        opacity: 0;
        -moz-transform: scale(1.1);
        transform: scale(1.1)
    }

    100% {
        opacity: 0;
        -moz-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@keyframes pulse-ring {
    0% {
        -moz-transform: scale(.5);
        transform: scale(.5)
    }

    40%,50% {
        opacity: 0;
        -moz-transform: scale(1.1);
        transform: scale(1.1)
    }

    100% {
        opacity: 0;
        -moz-transform: scale(1.1);
        transform: scale(1.1)
    }
}

.cases {
    padding: 12rem 0
}

.cases-title {
    margin-bottom: 2rem;
    font-size: 4.2rem;
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-family: var(--font-regular);
    font-weight: 500;
    color: #000
}

.cases-text {
    font-size: 1.6rem;
    margin-bottom: 4rem;
    line-height: 2;
    color: #5b5b5b
}

.case-item {
    position: relative
}

.case-item-image, .case-item-text-container {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.case-item-image {
    width: 100%;
    margin-bottom: 4rem
}

.case-item-text-container {
    margin-bottom: .9rem;
    background-color: #fff
}

.case-item-title {
    width: 80%;
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1rem;
    line-height: 1.5;
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-family: var(--font-regular);
    color: #2b2b2b
}

.case-item-text {
    margin-bottom: .9rem;
    font-size: 1.6rem;
    line-height: 1.8;
    color: #5b5b5b
}

.case-item-link {
    font-size: 1.6rem;
    font-weight: 500;
    color: #bb1d2c
}

@media all and (max-width:540px) {
    .cases {
        padding: 5rem 0
    }

    .case-item {
        margin-bottom: 4rem
    }

    .case-item-image {
        height: initial
    }
}

.info-box-container {
    position: relative;
    padding: 2rem 0
}

    .info-box-container a {
        color: #fff
    }

        .info-box-container a:hover {
            text-decoration: underline
        }

.info-box-item-container {
    position: relative;
    top: 0
}

.info-box.with-text {
    position: relative
}

.info-box-headline {
    font-size: 4.2rem;
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-family: var(--font-regular);
    font-weight: 600;
    margin-bottom: 3.1rem;
    margin-left: -.3rem
}

.info-box-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.info-box-image {
    width: 100%
}

.info-box-play {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    cursor: pointer
}

.info-box-caption {
    font-size: 1.7rem;
    margin-top: 2rem;
    color: #909090
}

.video-cover {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.info-box .video-component-container {
    position: relative;
    width: 100%;
    height: 30rem;
    top: 0;
    left: 50%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    overflow: hidden
}

.info-box-picture {
    position: relative;
    display: block;
    height: 0;
    width: 100%;
    padding-bottom: 114.8%;
    overflow: hidden
}

    .info-box-picture.landscape {
        padding-bottom: 56.25%
    }

.info-box-picture-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.landscape .info-box-picture-image {
    width: 100%;
    height: auto
}

@media all and (max-width:1024px) {
    .info-box-headline {
        margin-left: -.2rem
    }
}

@media all and (max-width:768px) {
    .info-box-container .column-grid {
        grid-gap: 2rem
    }

    .info-box-headline {
        font-size: 2rem;
        margin-bottom: 2rem;
        margin-left: -.1rem
    }
}

@media all and (max-width:540px) {
    .info-box-container {
        padding: 5rem 0
    }
}

@media all and (min-width:768px) {
    .info-box-container {
        padding: 6rem 0
    }
}

.editor-content {
    margin: 3rem auto;
    width: 100%
}

    .editor-content ul {
        padding: 2rem 0 0 2rem
    }

        .editor-content ul li {
            position: relative;
            padding-bottom: 1rem;
            font-size: 1.5rem;
            line-height: 1.5;
            color: #5b5b5b
        }

            .editor-content ul li:after {
                content: "";
                position: absolute;
                width: .8rem;
                height: .8rem;
                -moz-border-radius: 50%;
                border-radius: 50%;
                top: .8rem;
                left: -2rem;
                background: #5b5b5b
            }

    .editor-content h1 {
        margin-bottom: 3.5rem;
        font-size: 4.2rem;
        font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-family: var(--font-regular);
        font-weight: 600;
        width: 100%
    }

    .editor-content h2 {
        margin-bottom: 2rem;
        font-size: 3.2rem;
        font-weight: 500;
        font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-family: var(--font-regular);
        width: 100%
    }

    .editor-content p {
        width: 100%;
        font-size: 1.5rem;
        line-height: 1.8;
        color: #5b5b5b
    }

    .editor-content ul ~ p {
        margin-top: 3rem
    }

    .editor-content a {
        color: #bb1d2c;
        text-decoration: underline
    }

    .editor-content img {
        max-width: 100%;
        margin: 1rem 0
    }

@media all and (max-width:960px) {
    .editor-content ul li {
        font-size: 1.8rem;
        line-height: 1.3
    }

        .editor-content ul li:after {
            top: .6rem
        }
}

@media all and (max-width:768px) {
    .editor-content h1 {
        font-size: 3.5rem;
        margin-bottom: 2.5rem
    }

    .editor-content h2 {
        font-size: 3rem;
        margin-bottom: 1.5rem
    }

    .editor-content p {
        width: 100%;
        line-height: 1.5
    }

    .editor-content ul li {
        font-size: 1.4rem
    }
}

@media all and (max-width:450px) {
    .editor-content h1 {
        font-size: 2.8rem
    }

    .editor-content h2 {
        font-size: 2.3rem;
        margin-bottom: 1rem
    }
}

.banner-with-boxes {
    text-align: center;
    padding: 6rem 0;
    background-color: #d8eff7
}

.banner-with-boxes-headline {
    font-size: 3.2rem;
    font-weight: 500;
    margin-bottom: 6rem
}

.banner-with-boxes-item-headline, .banner-with-boxes-text {
    text-align: center
}

.banner-with-boxes-image {
    margin-bottom: 2.8rem
}

.banner-with-boxes-item-headline {
    width: 90%;
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-family: var(--font-regular);
    font-size: 3rem;
    margin-bottom: 2rem;
    font-size: 3.2rem;
    font-weight: 500;
    margin: 0 auto 2rem
}

.banner-with-boxes-text {
    width: 94%;
    margin: 0 auto 6rem auto;
    font-size: 1.6rem;
    margin-bottom: 4rem;
    color: #2b2b2b;
    line-height: 1.8
}

.banner-with-boxes .box-third.only-two {
    grid-column: span 6
}

@media all and (max-width:768px) {
    .banner-with-boxes .box-wide .box-third.only-two {
        grid-column: 1/-1 !important
    }
}

.testimonials-container {
    padding: 3rem 0 10rem
}

.testimonial-item {
    text-align: center
}

.testimonial-image-container {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 20rem;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.testimonial-title {
    margin-bottom: 2rem;
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-family: var(--font-regular);
    font-weight: 500;
    font-size: 2rem;
    color: #2b2b2b
}

.testimonial-text {
    padding: 0 1rem;
    font-size: 1.6rem;
    color: #5c5c5c;
    line-height: 1.7;
    margin-bottom: 2rem
}

.testimonial-author {
    position: relative;
    font-size: 1.3rem;
    font-style: italic
}

    .testimonial-author:after {
        content: "";
        position: absolute;
        width: .6rem;
        height: .1rem;
        left: -1.2rem;
        top: 50%;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        background: #000
    }

@media all and (max-width:540px) {
    .testimonials-container {
        padding: 0 0 5rem
    }
}

footer {
    padding: 6rem 0 6.2rem;
    background: #14242c
}

.footer-item {
    margin-bottom: 5rem
}

.footer-item-text, .footer-item-title, .footer-social-section-title {
    color: #fff
}

.footer-item-title {
    font-size: 4.2rem;
    margin-bottom: 3.5rem
}

.footer-item-text {
    margin-bottom: 3rem;
    font-size: 1.6rem;
    line-height: 1.7
}

.footer-social-section-title {
    margin-bottom: 3rem;
    font-size: 2rem
}

.footer-item-secondary-title {
    font-size: 2rem;
    margin-bottom: 3rem;
    color: #fff
}

.footer-images-container {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 3rem
}

.footer-image {
    margin: 0 4rem 3rem 0
}

.footer-social-link {
    margin-right: 2.1rem;
    border-bottom: .1rem solid #fff;
    font-size: 1.6rem;
    color: #fff;
    text-decoration: underline
}

.footer-copyright {
    font-size: 1.2rem;
    text-align: center;
    color: #b3b3b3
}

.footer-menu {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 1rem
}

.footer-menu-link {
    font-size: 2rem;
    color: #fff;
    font-size: 1.4rem;
    color: #fff;
    margin: 0 1rem
}

@media all and (max-width:540px) {
    footer {
        padding: 5rem 0
    }

    .footer-item {
        margin-bottom: 2.5rem
    }

    .footer-images-container {
        display: block
    }

    .footer-menu {
        display: block;
        text-align: center
    }

    .footer-menu-link {
        display: block;
        margin-bottom: .5rem
    }
}

.newsletter {
    padding: 7rem 0;
    background: #233e4b
}

    .newsletter #clickdimensionsForm {
        overflow: hidden;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-line-pack: stretch;
        align-content: stretch;
        height: 100%
    }

    .newsletter .clickdform.mainDiv {
        float: initial;
        padding: 0 !important;
        margin: 0 !important
    }

.newsletter-title {
    font-size: 4.2rem;
    margin-bottom: 3.5rem;
    color: #fff
}

.newsletter-intro-text {
    margin-bottom: 3.1rem;
    font-size: 1.6rem;
    line-height: 1.6;
    color: #fff
}

.newsletter a {
    text-decoration: underline !important
}

.responsiveRow {
    display: inline-block;
    width: 50%;
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif
}

.newsletter .clickdform.mainDiv .responsiveRow * {
    line-height: 1.3;
    width: 100%;
    display: block;
    min-width: 90%;
    color: #fff !important
}

    .newsletter .clickdform.mainDiv .responsiveRow * input[type=text], .newsletter .clickdform.mainDiv .responsiveRow * select {
        height: 4.5rem;
        padding: 0 2rem;
        color: #000 !important
    }

.newsletter .clickdform.mainDiv .responsiveRow select option {
    color: #000 !important
}

.newsletter .clickdform.mainDiv .responsiveRow .maxSize1 {
    font-size: 1.7rem !important;
    margin-bottom: 1rem
}

.newsletter .clickdform.mainDiv .responsiveRow textarea {
    color: #000 !important;
    padding: 2rem
}

.newsletter .clickdform.mainDiv .responsiveRow .buttonContainer {
    margin-top: 5.5rem
}

.newsletter .clickdform.mainDiv .responsiveRow * input[type=checkbox] {
    margin-right: 10px;
    display: inline;
    width: 17px;
    height: 17px
}

.newsletter .clickdform.mainDiv .requiredStar {
    display: inline
}

.newsletter .buttonContainer #btnSubmit {
    width: 90%;
    padding: 1.5rem 3rem;
    background: #bb1d2c;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 0;
    color: #fff !important;
    cursor: pointer
}

.newsletter-bottom-text {
    margin-top: 3rem;
    font-size: 1.2rem;
    line-height: 1.4;
    color: #ababab
}

.floatLeft {
    min-width: auto !important
}

@media all and (max-width:768px) {
    .newsletter {
        padding: 3rem 0
    }

    .responsiveRow {
        width: 100%
    }

    .newsletter .clickdform.mainDiv .responsiveRow * {
        min-width: 100%
    }

    .newsletter .clickdform.mainDiv .responsiveRow .buttonContainer {
        margin-top: 0
    }
}

.document-download {
    padding: 6rem 0
}

.document-download-title {
    font-size: 2rem;
    color: #2b2b2b;
    margin-bottom: 2.9rem;
    font-weight: 500
}

.document-download-link-container {
    display: block;
    width: 80%;
    padding: 2.1rem 3.8rem;
    margin-bottom: 1.8rem;
    border: .1rem solid #bb1d2c;
    font-size: 1.6rem;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #bb1d2c;
    text-align: center;
    font-weight: 400
}

.document-download-link {
    position: relative
}

    .document-download-link::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -2rem;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 1.3rem;
        height: 1rem;
        background-image: url(../../../dist/images/download-icon.png)
    }

@media all and (max-width:768px) {
    .document-download {
        padding: 5rem 0
    }

    .document-download-link-container {
        width: 100%
    }
}

.outgrow-component {
    padding: 5rem 0
}

.accordion-container {
    width: 70%;
    margin: 5rem auto
}

.accordion-container-title {
    margin: 4rem;
    text-align: center;
    font-size: 4rem;
    font-weight: 700;
    color: #14242c
}

.accordion {
    border-top: .1rem solid #bb1d2c;
    border-bottom: .1rem solid #bb1d2c;
    margin-top: -.1rem
}

    .accordion:focus {
        outline-color: rgba(255,255,255,0)
    }

    .accordion .accordion-header {
        position: relative;
        color: #000;
        outline: 0;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        cursor: pointer;
        padding: 2.5rem 0;
        margin: auto;
        width: 80%;
        text-align: left;
        font-size: 1.4rem;
        font-weight: 700;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

        .accordion .accordion-header:focus {
            outline: 0
        }

.accordion-title {
    padding-left: 2rem;
    padding-right: 1rem;
    margin: auto;
    color: #bb1d2c;
    font-size: 1.7rem;
    text-align: center;
    pointer-events: none
}

.accordion-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1rem .5rem 0 .5rem;
    border-color: #bb1d2c transparent transparent transparent;
    -moz-transition: .3s;
    transition: .3s;
    pointer-events: none
}

.active .accordion-arrow {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.panel {
    height: 0;
    overflow: hidden;
    -moz-transition: height .3s ease-in;
    transition: height .3s ease-in
}

.is-visible.panel {
    margin-bottom: 3rem
}

.panel-inner-container {
    padding: 1rem
}

    .panel-inner-container img {
        display: block;
        margin: 2rem auto
    }

    .panel-inner-container iframe {
        display: block;
        margin: 2rem auto
    }

.accordion-container .editor-content {
    margin: 0 auto
}

.editor-content-subtitle {
    font-size: 2rem;
    font-weight: 500;
    margin: 1rem 0
}

.accordion-container.lightweight {
    margin-bottom: 0;
    margin-top: 0
}

    .accordion-container.lightweight .accordion {
        border: 0
    }

    .accordion-container.lightweight .accordion-header {
        margin: 0
    }

    .accordion-container.lightweight .accordion-title {
        color: #000;
        padding: 0;
        margin-left: 0;
        text-align: left;
        line-height: 1.4
    }

    .accordion-container.lightweight .accordion-arrow {
        border-color: #000 transparent transparent transparent
    }

    .accordion-container.lightweight .is-visible.panel {
        margin-bottom: 0
    }

.in-app .editor-content ul {
    padding-top: 0
}

.in-app .panel-inner-container {
    margin-top: -.8rem
}

.source-link {
    font-style: italic;
    font-size: 1.3rem;
    color: #87a0a8;
    margin-top: -3rem;
    display: block
}

    .source-link a {
        color: #87a0a8;
        text-decoration: none;
        padding: 1rem 0
    }

@media all and (max-width:1024px) {
    .accordion-container {
        width: 80%
    }
}

@media all and (max-width:768px) {
    .accordion-container {
        width: 100%
    }

    .accordion {
        width: 100%
    }

    .accordion-title {
        font-size: 1.5rem
    }

    .accordion .accordion-header {
        width: 95%
    }

        .accordion .accordion-header:active, .accordion .accordion-header:focus {
            -webkit-tap-highlight-color: rgba(255,255,255,0);
            -webkit-tap-highlight-color: transparent
        }
}

.video-banner .video-component-container {
    position: relative;
    display: block;
    max-width: 70%;
    height: 0;
    padding-bottom: 39.4%;
    margin: 4rem auto 6rem;
    background-color: #14242c
}

.video-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.video-item {
    height: 100%;
    width: 100%
}

.video-wrapper[data-type=vimeo] > .video-item > iframe {
    height: 100% !important;
    width: 100% !important
}

@media all and (max-width:1024px) {
    .video-banner .video-component-container {
        max-width: 80%;
        padding-bottom: 45%
    }
}

@media all and (max-width:768px) {
    .video-banner .video-component-container {
        max-width: 100%;
        padding-bottom: 56.25%
    }

    .header + .video-banner .video-component-container {
        margin: 2rem auto 6rem
    }

    .header.no-menu + .video-banner .video-component-container {
        margin: 15rem auto 6rem
    }
}

@media all and (max-width:540px) {
    .header + .video-banner .video-component-container {
        margin: 2rem auto 4rem
    }

    .header.no-menu + .video-banner .video-component-container {
        margin: 12rem auto 4rem
    }
}

.image-component-container {
    position: relative;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin: 2rem 0;
    padding: 8rem 0;
    min-height: 35rem;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.image-component-picture {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: -1
}

.image-component-picture-image {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.image-component-content-wrapper {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    color: #fff
}

.image-component-headline {
    font-size: 3.2rem;
    line-height: 1;
    margin-bottom: 1rem
}

.image-component-description {
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 2.5rem
}

.image-component-content-wrapper .button {
    font-size: 1.6rem;
    padding: 1.2rem 3rem
}

.article-page .box-wide + .box-wide {
    margin-top: 4rem
}

@media all and (max-width:768px) {
    .image-component-container {
        padding: 4rem 0
    }
}

.article-library-page {
    margin: 8rem 0
}

.article-library-filter-dropdown-container {
    margin-bottom: 2rem
}

.article-library-filter-dropdown {
    position: relative;
    float: right;
    width: 20rem;
    padding: 1.1rem 2rem;
    cursor: pointer;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    color: var(--white);
    background-color: #243e4b
}

.article-library-filter-dropdown-text {
    position: relative;
    display: block;
    font-size: 1.4rem;
    line-height: 1.8rem;
    padding-right: 2.5rem;
    word-break: break-word
}

    .article-library-filter-dropdown-text:after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        width: 0;
        height: 0;
        -moz-transform: translateY(-50%) rotate(0);
        -ms-transform: translateY(-50%) rotate(0);
        transform: translateY(-50%) rotate(0);
        border-style: solid;
        border-width: .5rem .5rem 0 .5rem;
        border-color: #fff transparent transparent transparent;
        border-color: var(--white) transparent transparent transparent;
        -moz-transition: transform .4s ease-in-out,-moz-transform .4s ease-in-out;
        transition: transform .4s ease-in-out;
        transition: transform .4s ease-in-out,-moz-transform .4s ease-in-out
    }

.article-library-filter-dropdown.active .article-library-filter-dropdown-text:after {
    -moz-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg)
}

.article-library-filter-dropdown-select {
    visibility: hidden;
    pointer-events: none;
    width: 0;
    height: 0;
    display: none
}

.article-library-filter-dropdown-entries {
    font-size: 1.4rem;
    line-height: 1.8rem;
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    -moz-transition: opacity .2s,visibility .4s;
    transition: opacity .2s,visibility .4s;
    background-color: #243e4b;
    z-index: 1
}

    .article-library-filter-dropdown-entries.active, .article-library-filter-dropdown.active .article-library-filter-dropdown-entries {
        opacity: 1;
        visibility: visible;
        -moz-transition: opacity .4s;
        transition: opacity .4s
    }

.article-library-filter-dropdown-entry {
    -moz-transition: background-color .25s ease-in-out;
    transition: background-color .25s ease-in-out;
    padding: 1rem 2rem;
    border-top: .1rem solid #5c5c5c;
    list-style: none
}

    .article-library-filter-dropdown-entry:hover {
        background-color: #14242c
    }

.article-library-article-wrapper {
    margin-bottom: 2rem;
    -moz-transition: transform .4s ease-in-out,-moz-transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out,-moz-transform .4s ease-in-out
}

    .article-library-article-wrapper:hover {
        -moz-transform: translateY(-.5rem);
        -ms-transform: translateY(-.5rem);
        transform: translateY(-.5rem)
    }

.article-library-article-picture, .article-library-article-picture-placeholder {
    position: relative;
    display: block;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    background-color: #d8eff7
}

.article-library-article-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.article-library-article-content-wrapper {
    padding-top: .5rem
}

.article-library-article-caption {
    font-size: 1.6rem;
    text-align: right;
    display: block;
    padding-top: .5rem;
    color: #5c5c5c
}

    .article-library-article-caption .date {
        font-style: italic
    }

.article-library-article-header {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5;
    color: #2b2b2b;
    padding: 1.5rem 0 1rem;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out
}

    .article-library-article-header:hover {
        color: #bb1d2c
    }

.article-library-article-description {
    font-size: 1.6rem;
    line-height: 1.7;
    color: #5c5c5c
}

.article-library-pagination-container {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 4rem 0
}

.article-library-pagination-next, .article-library-pagination-previous {
    position: relative;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer
}

.article-library-pagination-previous {
    margin-right: 1rem
}

.article-library-pagination-next {
    margin-left: 1rem
}

    .article-library-pagination-next:after, .article-library-pagination-previous:before {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        width: 0;
        height: 0;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        border-style: solid;
        -moz-transition: border-color .25s ease-in-out;
        transition: border-color .25s ease-in-out
    }

.article-library-pagination-previous:before {
    border-width: .5rem 1rem .5rem 0;
    border-color: transparent #243e4b transparent transparent
}

.article-library-pagination-previous:hover:before {
    border-color: transparent #bb1d2c transparent transparent
}

.article-library-pagination-next:after {
    border-width: .5rem 0 .5rem 1rem;
    border-color: transparent transparent transparent #243e4b
}

.article-library-pagination-next:hover:after {
    border-color: transparent transparent transparent #bb1d2c
}

.article-library-pagination-next.disabled, .article-library-pagination-previous.disabled {
    opacity: .2;
    pointer-events: none
}

.article-library-pagination-item {
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1.23;
    margin: 0 .5rem;
    padding: 0 .25rem .25rem;
    color: #243e4b;
    border-bottom: .1rem solid transparent;
    -moz-transition: color .25s ease-in-out,border .25s ease-in-out;
    transition: color .25s ease-in-out,border .25s ease-in-out;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

    .article-library-pagination-item.current {
        border-bottom: .1rem solid #243e4b
    }

    .article-library-pagination-item:not(.inactive):hover {
        border-bottom: .1rem solid #bb1d2c;
        color: #bb1d2c
    }

@media all and (max-width:768px) {
    .article-library-article-wrapper {
        margin-bottom: 5rem
    }

        .article-library-article-wrapper:hover {
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0)
        }

    .article-library-article-header {
        padding-top: 0
    }
}

.article-page {
    margin: 8rem 0
}

.article-page-title {
    font-size: 3.6rem;
    line-height: 1.1;
    font-weight: 100;
    margin-bottom: 4rem
}

.article-page-info-wrapper {
    font-size: 1.5rem;
    color: #5b5b5b
}

.article-page-date {
    font-style: italic
}

.article-page-tags {
    font-weight: 500;
    color: #bb1d2c
}

.article-page .editor-content {
    margin: 1.5rem 0
}

.article-page .box-wide + .box-wide {
    margin-top: 4rem
}

@media all and (max-width:768px) {
    .article-page {
        margin: 6rem 0
    }

    .header.no-menu + .article-page {
        margin: 15rem auto 6rem
    }

    .article-page-title {
        margin-bottom: 3rem
    }
}

@media all and (max-width:540px) {
    .article-page {
        margin: 4rem 0
    }

    .header.no-menu + .article-page {
        margin: 12rem auto 4rem
    }

    .article-page-title {
        margin-bottom: 2rem
    }
}

.lazy-load img {
    opacity: 0;
    -moz-transition: opacity .4s cubic-bezier(.38,.53,.48,.94);
    transition: opacity .4s cubic-bezier(.38,.53,.48,.94)
}

.lazy-load.loaded img {
    opacity: 1
}