un-header-banner:not(:defined) {
    display: none
}

un-header-banner {
    /*! grid-area: header; */
    display: flex;
    justify-content: right;
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    --filter: drop-shadow(5px 5px 5px #4f4f4f) sepia(50%);
    border: 1px solid var(--borders)
}

un-header-banner>img {
    position: absolute;
    opacity: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    transition-property: transform,opacity,filter;
    transition-duration: 5s;
    transition-timing-function: ease-in-out;
    transition-delay: 0;
    object-fit: cover;
    border: thin solid #000;
    filter: var(--filter)
}

un-header-banner img.foreground {
    object-fit: contain;
    max-height: 100%;
    transition-property: filter;
    transition-duration: .5s;
    padding: 20px
}

un-header-banner .overlay {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    height: 100%;
    align-items: center;
    margin: 0 1%
}

un-header-banner .overlay>* {
    max-height: 100%
}

un-header-banner .overlay un-img {
    object-fit: contain;
    transition-property: filter;
    transition-duration: .5s
}

un-header-banner .overlay un-img:hover {
    filter: brightness(150%) drop-shadow(2px 2px 0px #fff)
}

un-header-banner .overlay un-drawer img {
    transition-property: transform;
    transition-duration: .5s;
    filter: drop-shadow(0px 0px 2px black)
}

un-header-banner .overlay un-drawer img:hover {
    transform: scale(1.1);
    filter: drop-shadow(0px 1px 1px white)
}

un-header-banner img.show {
    opacity: 1!important
}

un-header-banner[data-area=header] {
    grid-area: header
}

un-header-banner[data-scroll=true] {
    overflow: auto
}

un-header-banner[data-filter=sepia]>img {
    filter: sepia(50%)
}

un-header-banner[data-filter=grey]>img {
    filter: grayscale(70%)
}

un-header-banner[data-filter=shadow]>img {
    filter: drop-shadow(5px 5px 5px #4f4f4f)
}

un-header-banner[data-transfx=flash]>img {
    transition-duration: .5s;
    opacity: 0
}

un-header-banner[data-transfx=flash]>img.show {
    opacity: 1!important
}

un-header-banner[data-transfx=grey]>img {
    filter: grayscale(100%)
}

un-header-banner[data-transfx=grey]>img.show {
    filter: grayscale(0%)!important
}

un-header-banner[data-transfx=blend]>img {
    filter: brightness(50%) sepia(50%)
}

un-header-banner[data-transfx=blend]>img.show {
    filter: brightness(100%) sepia(50%)!important
}

un-header-banner[data-transfx=slide]>img {
    transform: translateY(-100%);
    opacity: 0
}

un-header-banner[data-transfx=slide]>img.show {
    transform: translateX(0)!important;
    opacity: 1!important
}

un-header-banner[data-theme=""] {
    height: 250px
}