.rasterslider-polygon {
    fill: #FF000040;
    stroke: none;
    /* stroke-width: 3;         */
}

.raster-main-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.raster-main-container .top-container {
    position: absolute;
    width: 66.67%;
    aspect-ratio: 1.3333;
    display: flex;
    justify-content: center;
    align-items: center;
}


.raster-main-container .svg-container {
    position: absolute;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1.3333;
    line-height: 0px;
}

/* on small screen */
@media only screen and (max-width: 600px) {
    .raster-main-container .top-container {
        max-width: 100%;
    }
}

.raster-main-container .attribution {
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 2px 4px;
    color: black;
    background-color: #ffffffc0;
    font-size: 12px;
    line-height: unset;
    margin: 0px !important;
    text-shadow: none !important;
}


.raster-main-container .bottom-container {
    position: relative;
    display: flex;
}

.raster-main-container .cropper {
    position: absolute;
    overflow: hidden;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
}

.raster-main-container .slider {
    position: absolute;
    height: 100%;
    width: 1px;
    left: 50%;
    background-color: white;
    opacity: 0.8;
}

.raster-main-container img {
    position: relative;
    height: auto;
    filter: grayscale(1) brightness(1.5) contrast(1.2);
}

.raster-main-container .back-image {
    width: 100%;
    aspect-ratio: 1.3333;
}

.raster-main-container .top-image {
    width: none;
    height: 100%;
    aspect-ratio: 1.3333;
}

.raster-main-container .beer-handle {
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    color: #555;
    height: 36px;
    width: 36px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
}

.raster-main-container .beer-handle:before {
    border-left: 2px solid;
    border-top: 2px solid;
    content: "";
    height: 6px;
    width: 6px;
    position: absolute;
    top: 50%;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    left: 8px;
}

.raster-main-container .beer-handle:after {
    border-left: 2px solid;
    border-top: 2px solid;
    content: "";
    height: 6px;
    width: 6px;
    position: absolute;
    top: 50%;
    transform-origin: 0 0;
    transform: rotate(135deg);
    right: 0px;
}

.raster-main-container .raster-title {
    position: absolute;
    font-size: 12px;
    color: #333;
    /* font-family: var(--font-noto); */
    margin: 0px;
    padding: 0px;
    line-height: 24px;
    margin: 0px;
    text-shadow: none !important;
}

.raster-main-container .before-title {
    left: 0px;
    transform-origin: 50% 50%;
    transform: rotate(270deg) translateY(-150%) translateY(calc(-4px + -1.0*12px)) !important;
}


.raster-main-container .after-title {
    right: 0px;
    transform-origin: 50% 50%;
    transform: rotate(90deg) translateY(-150%) translateY(calc(-4px + -1.0*12px)) !important;
}


.raster-main-container .bottom-title {
    bottom: 0px;
    transform: translateY(100%);
}


/* Transitions */
.raster-main-container .pulsating {
    animation: rasterslider-pulsate 3s linear infinite;
}

@keyframes rasterslider-pulsate {
    from { opacity: 0.4; }
    50% { opacity: 0.1; }
    to { opacity: 0.4; }
}