.media-browser {
    overflow: hidden;
    border: 8px solid transparent;
    text-align: right;
    max-width: 100vw
}

.media-browser,
.media-browser__item {
    position: relative
}

.media-browser__item .image-title {
    background: rgba(var(--color-white), .7);
    color: var(--color-darkgrey);
    width: calc(100% - 12px);
    position: absolute;
    bottom: 0;
    left: 8px;
    text-align: left;
    padding: 4px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.media-browser__media-icon {
    font-family: LindeGlobalIconFont;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    speak: none;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 40px;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    color: var(--color-textgrey);
    background: rgba(var(--color-white), .7);
    padding: 6px 10px;
    top: 3px;
    left: 11px;
    font-size: 32px !important
}

.media-browser__media-icon:before {
    display: block;
    margin: -.2em;
    content: "\f160"
}

.media-browser__navigation {
    display: none
}

.media-browser__navigation .media-browser__item .image-wrapper[data-video-url] {
    pointer-events: none
}

.media-browser__master--wrapper .image-wrapper {
    width: 100vw
}

.datepicker .media-browser__master--wrapper>.btn.ui-datepicker-trigger,
.media-browser__master--wrapper>.btn.btn--icon,
.media-browser__master--wrapper>.btn.btn--social,
.media-browser__master--wrapper>.btn.btn-share {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 800
}

@media (min-width:960px) {

    .datepicker .media-browser__master--wrapper>.btn.ui-datepicker-trigger,
    .media-browser__master--wrapper>.btn.btn--icon,
    .media-browser__master--wrapper>.btn.btn--social,
    .media-browser__master--wrapper>.btn.btn-share {
        right: 208px
    }

    .media-browser__master--wrapper .image-wrapper {
        width: auto
    }
}

.media-browser .image-wrapper {
    padding-bottom: 56.25%
}

.media-browser .image-wrapper a,
.media-browser .image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    min-height: 100%;
    width: 100%
}

.media-browser .btn--carousel-next,
.media-browser .btn--carousel-prev {
    z-index: 2
}

.media-browser .carousel-button-wrapper {
    position: static;
    margin: 8px 0 0 !important;
    padding: 0
}

.media-browser .carousel-button-wrapper>span {
    display: inline-block;
    margin-right: 16px;
    line-height: 48px;
    color: var(--color-red)
}

.media-browser .carousel-button-wrapper--scroll {
    display: none
}

.media-browser .overflow-bottom,
.media-browser .overflow-top {
    position: absolute;
    width: 200px;
    right: 0;
    height: 48px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: start;
    align-items: flex-start;
    pointer-events: none
}

@media (max-width:639px) {

    .media-browser .overflow-bottom,
    .media-browser .overflow-top {
        display: none
    }
}

@media (max-width:1023px) {

    .media-browser .overflow-bottom,
    .media-browser .overflow-top {
        width: 48px;
        height: 113px;
        -ms-flex-align: center;
        align-items: center
    }
}

.media-browser .overflow-bottom button,
.media-browser .overflow-top button {
    pointer-events: all
}

.media-browser .overflow-top {
    top: 0
}

.media-browser .overflow-top:not(.hide-gradient) {
    background-image: linear-gradient(180deg, var(--color-lightgrey), transparent)
}

@media (max-width:1023px) {
    .media-browser .overflow-top {
        right: auto;
        top: auto;
        left: 0;
        bottom: 0
    }

    .media-browser .overflow-top:not(.hide-gradient) {
        background: linear-gradient(90deg, var(--color-lightgrey), transparent)
    }
}

.media-browser .overflow-bottom {
    bottom: 0
}

.media-browser .overflow-bottom:not(.hide-gradient) {
    background-image: linear-gradient(0deg, var(--color-lightgrey), transparent)
}

@media (max-width:1023px) {
    .media-browser .overflow-bottom {
        bottom: 0
    }

    .media-browser .overflow-bottom:not(.hide-gradient) {
        background: linear-gradient(90deg, transparent, var(--color-lightgrey))
    }
}

@media (min-width:640px) {
    .media-browser__navigation {
        display: block;
        margin-top: 8px
    }

    .media-browser__navigation .media-browser__item {
        margin: 0 4px
    }

    .media-browser__navigation .media-browser__item:first-child {
        margin-left: 0
    }

    .media-browser__navigation .media-browser__item:last-child {
        margin-right: 0
    }

    .media-browser__navigation .media-browser__item.active .image-wrapper:after,
    .media-browser__navigation .media-browser__item.swiper-slide-thumb-active .image-wrapper:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 3px solid var(--color-red)
    }

    .media-browser__navigation .media-browser__item.active .image-title {
        width: 100%;
        position: absolute;
        border: 3px solid var(--color-red);
        border-top: 0;
        padding: 4px 5px 1px
    }

    .media-browser__navigation .media-browser__item .image-title {
        position: absolute;
        left: 0;
        width: 100%
    }

    .media-browser .carousel-button-wrapper {
        display: none
    }
}

@media (min-width:640px) and (max-width:1023px) {
    .media-browser .carousel-button-wrapper--scroll {
        bottom: 8px;
        display: block
    }

    .media-browser .carousel-button-wrapper--scroll .btn--carousel-prev .icon {
        transform: rotate(-90deg)
    }

    .media-browser .carousel-button-wrapper--scroll .btn--carousel-prev .icon:before {
        content: "\f15c"
    }

    .media-browser .carousel-button-wrapper--scroll .btn--carousel-next {
        left: auto;
        right: 0
    }

    .media-browser .carousel-button-wrapper--scroll .btn--carousel-next .icon {
        transform: rotate(-90deg)
    }

    .media-browser .carousel-button-wrapper--scroll .btn--carousel-next .icon:before {
        content: "\f12f"
    }

    .media-browser .media-browser__navigation {
        display: none
    }
}

@media (min-width:640px) and (max-width:1023px) and (min-width:640px) {
    .media-browser .media-browser__navigation {
        display: -ms-flexbox;
        display: flex;
        overflow-y: auto
    }

    .media-browser .media-browser__navigation .media-browser__item {
        width: 200px;
        min-width: 200px
    }

    .media-browser .media-browser__navigation .media-browser__item:last-child {
        margin-right: 0
    }
}

@media (min-width:1024px) {
    .media-browser__master {
        width: calc(100% - 208px);
        min-width: 704px;
        margin-left: 0;
    }

    .media-browser__navigation {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 0;
        position: absolute;
        width: 200px;
        top: 0;
        bottom: 0;
        right: 0;
        overflow-y: hidden;
        overflow-x: hidden
    }

    .media-browser__navigation .media-browser__item {
        float: none;
        margin: 0 0
    }

    .media-browser__navigation .media-browser__item:first-child {
        margin-top: 0
    }

    .media-browser__navigation .media-browser__item:last-child {
        margin-bottom: 0
    }

    .media-browser .carousel-button-wrapper--scroll {
        display: block;
        width: 200px;
        right: 8px;
        top: 0;
        bottom: 0
    }

    .media-browser .carousel-button-wrapper--scroll>button {
        position: absolute;
        top: 0;
        right: 76px
    }

    .media-browser .carousel-button-wrapper--scroll>button.btn--carousel-next {
        top: auto;
        bottom: 0
    }
}

.media-browser.lightbox {
    height: 100%;
    padding-top: 48px;
    border: 0
}

.media-browser.lightbox .overflow-bottom,
.media-browser.lightbox .overflow-top {
    width: 48px;
    -ms-flex-align: center;
    align-items: center;
    top: 0;
    bottom: 0;
    height: 100%
}

.media-browser.lightbox .overflow-bottom .icon,
.media-browser.lightbox .overflow-top .icon {
    transform: none !important
}

.media-browser.lightbox .overflow-bottom .btn--carousel-prev .icon:before,
.media-browser.lightbox .overflow-top .btn--carousel-prev .icon:before {
    content: ""
}

.media-browser.lightbox .overflow-bottom .btn--carousel-next,
.media-browser.lightbox .overflow-top .btn--carousel-next {
    left: auto;
    right: 0
}

.media-browser.lightbox .overflow-bottom .btn--carousel-next .icon:before,
.media-browser.lightbox .overflow-top .btn--carousel-next .icon:before {
    content: ""
}

.media-browser.lightbox .overflow-top {
    right: auto;
    left: 0
}

.media-browser.lightbox .overflow-top:not(.hide-gradient) {
    background: linear-gradient(90deg, var(--color-lightgrey), transparent)
}

.media-browser.lightbox .overflow-bottom:not(.hide-gradient) {
    background: linear-gradient(90deg, transparent, var(--color-lightgrey))
}

.media-browser.lightbox .slide-caption span {
    display: none
}

@media (min-width:640px) {
    .media-browser.lightbox .slide-caption {
        overflow: auto;
        height: 33%;
        padding: 0;
        position: absolute;
        bottom: 0;
        text-align: center;
        width: 100%
    }
}

@media (min-width:768px) {
    .media-browser.lightbox .slide-caption {
        height: 26%
    }
}

@media (min-width:960px) {
    .media-browser.lightbox .slide-caption {
        height: 25%
    }
}

@media (min-width:1024px) {
    .media-browser.lightbox .slide-caption {
        height: 17%
    }
}

@media (min-width:1280px) {
    .media-browser.lightbox .slide-caption {
        height: 10%
    }
}

.media-browser.lightbox .slick-active .slide-caption span {
    display: inline
}

.media-browser.lightbox .image-title {
    display: none
}

.media-browser.lightbox .media-browser__master {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.media-browser.lightbox .media-browser__master--wrapper {
    height: 100%;
    margin: 0 48px
}

@media (min-width:640px) {
    .media-browser.lightbox .media-browser__master--wrapper {
        height: calc(100vh - 190px)
    }
}

.media-browser.lightbox .media-browser__master .slick-list,
.media-browser.lightbox .media-browser__master .slick-list .slick-track {
    height: 100%
}

@media print {
    .media-browser.lightbox .media-browser__master .slick-list .slick-track {
        opacity: 1 !important;
        width: 100% !important;
        transform: none !important
    }
}

.media-browser.lightbox .media-browser__master .slick-list .slick-track .media-browser__item .image-wrapper {
    height: calc(100vh - 250px);
    padding-bottom: 0
}

.media-browser.lightbox .media-browser__master .slick-list .slick-track .media-browser__item .image-wrapper img {
    position: absolute;
    width: auto;
    height: auto;
    min-height: 0;
    min-width: 0;
    max-height: 100%;
    max-width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media (min-width:640px) {
    .media-browser.lightbox .media-browser__master .slick-list .slick-track .media-browser__item .image-wrapper {
        height: calc(100vh - 300px)
    }
}

.media-browser.lightbox .carousel-button-wrapper--scroll {
    position: absolute;
    bottom: 0;
    top: auto;
    right: auto;
    width: 100%;
    display: block;
    pointer-events: none
}

.media-browser.lightbox .carousel-button-wrapper--scroll>button {
    position: absolute;
    top: auto;
    left: 0;
    bottom: 30px;
    z-index: 2
}

.media-browser.lightbox .carousel-button-wrapper--scroll>button.btn--carousel-prev .icon:before {
    content: "\f13d"
}

.media-browser.lightbox .carousel-button-wrapper--scroll>button.btn--carousel-next {
    left: auto;
    right: 0;
    bottom: 30px
}

.media-browser.lightbox .carousel-button-wrapper--scroll>button.btn--carousel-next .icon:before {
    content: "\f153"
}

.media-browser.lightbox .media-browser__navigation {
    display: -ms-flexbox;
    display: flex;
    overflow-x: auto;
    max-width: none;
    top: auto;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    bottom: 0;
    margin: 0;
    padding: 0
}

.media-browser.lightbox .media-browser__navigation .media-browser__item {
    width: 200px;
    min-width: 200px;
    margin: 0 4px
}

.media-browser.lightbox .media-browser__navigation .media-browser__item:first-child {
    margin-left: 0
}

.media-browser.lightbox .media-browser__navigation .media-browser__item:last-child {
    margin-right: 0
}

@media (min-width:640px) {
    .media-browser.lightbox .media-browser__navigation {
        -ms-flex-direction: row;
        flex-direction: row;
        position: absolute;
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
        right: auto;
        bottom: 0
    }
}

@media (max-width:639px) {
    .media-browser.lightbox .slide-caption {
        width: 100vw;
        height: 120px;
        overflow: auto;
        background: rgba(var(--color-white), .9);
        padding: 16px
    }

    .media-browser.lightbox .media-browser__navigation {
        display: none
    }

    .media-browser.lightbox .media-browser__master--wrapper {
        max-height: none;
        margin: 0
    }

    .media-browser.lightbox .media-browser__master .slick-list .slick-track .media-browser__item .image-wrapper {
        height: calc(100% - 120px)
    }

    .media-browser.lightbox .carousel-button-wrapper {
        position: absolute;
        bottom: 120px;
        padding-left: 16px;
        background: var(--color-white)
    }
}

@media (min-width:640px) {
    .media-browser.lightbox .carousel-button-wrapper {
        position: static;
        display: block;
        margin: 8px 0 0 !important;
        padding: 0
    }

    .media-browser.lightbox .carousel-button-wrapper>span {
        display: none
    }

    .media-browser.lightbox .carousel-button-wrapper .btn {
        position: absolute;
        top: calc(50% - 96px);
        transform: translateY(-50%)
    }

    .media-browser.lightbox .carousel-button-wrapper .btn--carousel-next {
        right: 0
    }

    .media-browser.lightbox .carousel-button-wrapper .btn--carousel-prev {
        left: 0
    }
}

.layout-article--sidebar .media-browser,
.layout-event--sidebar .media-browser {
    margin: 0
}

.layout-article--sidebar .media-browser .carousel-button-wrapper--scroll,
.layout-event--sidebar .media-browser .carousel-button-wrapper--scroll {
    bottom: 8px;
    display: block
}

.layout-article--sidebar .media-browser .carousel-button-wrapper--scroll .btn--carousel-prev .icon,
.layout-event--sidebar .media-browser .carousel-button-wrapper--scroll .btn--carousel-prev .icon {
    transform: rotate(-90deg)
}

.layout-article--sidebar .media-browser .carousel-button-wrapper--scroll .btn--carousel-prev .icon:before,
.layout-event--sidebar .media-browser .carousel-button-wrapper--scroll .btn--carousel-prev .icon:before {
    content: "\f15c"
}

.layout-article--sidebar .media-browser .carousel-button-wrapper--scroll .btn--carousel-next,
.layout-event--sidebar .media-browser .carousel-button-wrapper--scroll .btn--carousel-next {
    left: auto;
    right: 0
}

.layout-article--sidebar .media-browser .carousel-button-wrapper--scroll .btn--carousel-next .icon,
.layout-event--sidebar .media-browser .carousel-button-wrapper--scroll .btn--carousel-next .icon {
    transform: rotate(-90deg)
}

.layout-article--sidebar .media-browser .carousel-button-wrapper--scroll .btn--carousel-next .icon:before,
.layout-event--sidebar .media-browser .carousel-button-wrapper--scroll .btn--carousel-next .icon:before {
    content: "\f12f"
}

.layout-article--sidebar .media-browser .media-browser__navigation,
.layout-event--sidebar .media-browser .media-browser__navigation {
    display: none
}

@media (min-width:640px) {

    .layout-article--sidebar .media-browser .media-browser__navigation,
    .layout-event--sidebar .media-browser .media-browser__navigation {
        display: -ms-flexbox;
        display: flex;
        overflow-y: auto
    }

    .layout-article--sidebar .media-browser .media-browser__navigation .media-browser__item,
    .layout-event--sidebar .media-browser .media-browser__navigation .media-browser__item {
        width: 200px;
        min-width: 200px
    }

    .layout-article--sidebar .media-browser .media-browser__navigation .media-browser__item:last-child,
    .layout-event--sidebar .media-browser .media-browser__navigation .media-browser__item:last-child {
        margin-right: 0
    }
}

.layout-article--sidebar .media-browser .overflow-bottom,
.layout-article--sidebar .media-browser .overflow-top,
.layout-event--sidebar .media-browser .overflow-bottom,
.layout-event--sidebar .media-browser .overflow-top {
    width: 48px;
    height: 127px;
    -ms-flex-align: center;
    align-items: center
}

.layout-article--sidebar .media-browser .overflow-top,
.layout-event--sidebar .media-browser .overflow-top {
    right: auto;
    top: auto;
    left: 0;
    bottom: 0
}

.layout-article--sidebar .media-browser .overflow-top:not(.hide-gradient),
.layout-event--sidebar .media-browser .overflow-top:not(.hide-gradient) {
    background: linear-gradient(90deg, var(--color-lightgrey), transparent)
}

.layout-article--sidebar .media-browser .overflow-bottom,
.layout-event--sidebar .media-browser .overflow-bottom {
    bottom: 0
}

.layout-article--sidebar .media-browser .overflow-bottom:not(.hide-gradient),
.layout-event--sidebar .media-browser .overflow-bottom:not(.hide-gradient) {
    background: linear-gradient(90deg, transparent, var(--color-lightgrey))
}

@media (min-width:640px) {

    .layout-article--sidebar .media-browser .media-browser__navigation,
    .layout-event--sidebar .media-browser .media-browser__navigation {
        width: 100%
    }

    .layout-article--sidebar .media-browser .media-browser__navigation .media-browser__item,
    .layout-event--sidebar .media-browser .media-browser__navigation .media-browser__item {
        margin: 0 4px;
        padding: 0
    }

    .layout-article--sidebar .media-browser .media-browser__navigation .media-browser__item:first-child,
    .layout-event--sidebar .media-browser .media-browser__navigation .media-browser__item:first-child {
        margin-left: 0
    }

    .layout-article--sidebar .media-browser .media-browser__navigation .media-browser__item:last-child,
    .layout-event--sidebar .media-browser .media-browser__navigation .media-browser__item:last-child {
        margin-right: 0
    }

    .layout-article--sidebar .media-browser .media-browser__navigation .media-browser__item .image-title,
    .layout-event--sidebar .media-browser .media-browser__navigation .media-browser__item .image-title {
        width: 100%;
        left: 0
    }
}

@media (max-width:639px) {

    .layout-article--sidebar .media-browser .media-browser__navigation,
    .layout-event--sidebar .media-browser .media-browser__navigation {
        display: none
    }
}

@media (min-width:1024px) {

    .layout-article--sidebar .media-browser__master,
    .layout-event--sidebar .media-browser__master {
        width: auto
    }

    .layout-article--sidebar .media-browser__navigation,
    .layout-event--sidebar .media-browser__navigation {
        max-width: none;
        position: static;
        overflow: hidden;
        overflow-x: auto;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        margin-top: 8px
    }

    .layout-article--sidebar .media-browser__navigation .media-browser__item,
    .layout-event--sidebar .media-browser__navigation .media-browser__item {
        float: none;
        padding-left: 4px;
        margin-bottom: 8px
    }

    .layout-article--sidebar .media-browser .carousel-button-wrapper--scroll,
    .layout-event--sidebar .media-browser .carousel-button-wrapper--scroll {
        display: block;
        width: 200px;
        right: 8px;
        top: 0;
        bottom: 0
    }

    .layout-article--sidebar .media-browser .carousel-button-wrapper--scroll>button,
    .layout-event--sidebar .media-browser .carousel-button-wrapper--scroll>button {
        position: absolute;
        top: auto;
        right: auto;
        left: 0;
        bottom: 30px
    }

    .layout-article--sidebar .media-browser .carousel-button-wrapper--scroll>button.btn--carousel-next,
    .layout-event--sidebar .media-browser .carousel-button-wrapper--scroll>button.btn--carousel-next {
        top: auto;
        right: 0
    }
}