@font-face {
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;
    src: url('slick.eot?#iefix') format('embedded-opentype'), url('slick.woff') format('woff'), url('slick.ttf') format('truetype'), url('slick.svg#slick') format('svg');
}
html#html-block-html body {
    margin: 0;
}
.u_SliderContainer {
    display: flex;
    max-width: 100%;
    margin: 1.5rem auto;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.u_SliderMain {
    position: relative;
    transform-origin: top left;
    height: 100px;
    width: 300px;
    box-shadow: inset 0 0 100px 0px rgb(0 0 0 / 50%), inset 0 0 60px 0px rgb(0 0 0 / 60%);
}
.u_SliderClip {
    overflow: hidden;
    width: 300px;
    height: 100px;
}
.RelocationIsolator {
    position: relative;
    display: block;
    flex-wrap: nowrap;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0,0,0);
    overflow: hidden;
    inset: 0;
}
.u_ItemsTrack {
    display: flex;
    width: 1800px;
    height: 100px;
}
a.u_Item {
    display: flex;
    justify-content: flex-start;
    -webkit-box-pack: start;
    flex-direction: row;
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    flex-grow: 2;
}
.u_RelocationIsolator::before {
    --blurScale: 10px;
    content: "";
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--img);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(var(--blurScale)) saturate(.5);
    z-index: -1;
    transition: background-image 0.5s ease-in-out;
}
.u_ItemsTrack > a > span {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 10px black);
    z-index: 1;
}
a[aria-label] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    top: calc(50% - 1rem);
    position: absolute;
    background: #000;
    z-index: 2;
    pointer-events: initial !important;
    cursor: pointer;
    color: transparent;
    font-size: 0;
    line-height: 0;
    border: none;
    outline: 0;
    background: 0 0;
    text-shadow: 0 5px 10px black;
    &::before {
        content: "←";
        font-family: slick;
        font-size: 1.5rem;
        line-height: 0;
        opacity: .75;
        color: #fff;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transition: 200ms;
    }
}
a[aria-label*="Next"] {
    right: 0;
    &::before {
        content: "→";
    }
}
a[aria-label]:hover::before {
    opacity: 1;
    transition: 200ms;
}
ul[data-info="indicator"] {
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    width: 75%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    list-style: none;
    text-align: center;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}
ul[data-info="indicator"] li.present button {
    position: relative;
    font-size: 0;
    line-height: 0;
    display: flex;
    width: 40px;
    height: 6px;
    padding: 3px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: 0;
    background: 0 0;
    &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        content: "";
        opacity: .5;
        background-color: white;
        transition: .2s;
        -webkit-font-smoothing: antialiased;
        box-shadow: 0 5px 10px 0px #000;
    }
    &:hover::before {
        opacity: 1;
        transition: .2s;
    }
}
ul[data-info="indicator"] li.present.active button {
    &::before {
        opacity: 1;
        transition: .2s;
    }
}
.u_SliderClip:not(:hover) a[aria-label] {
    opacity: 0;
    transition: 200ms;
}
.u_SliderClip:not(:hover) ul[data-info="indicator"] li.present button:before {
    height: 50%;
    transition: 200ms;
}
.u_SliderClip:is(:hover) a[aria-label] {
    opacity: 1;
    transition: 200ms;
}
.u_SliderClip:is(:hover) ul[data-info="indicator"] li.present button:before {
    height: 100%;
    transition: 200ms;
}