.beer-slider {
    display: inline-block;
    overflow: hidden;
    position: relative ;
   
}

    .beer-slider *, .beer-slider:after, .beer-slider :after, .beer-slider:before, .beer-slider :before {
        box-sizing: border-box
    }

    .beer-slider img, .beer-slider svg {
        vertical-align: bottom
    }

    .beer-slider > * {
        height: 100%
    }

    .beer-slider > img {
        height: auto;
        max-width: 100% ;
        border: 4px solid #783d3a;
        border-radius: 15px;
    }

.beer-reveal {
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    right: 50%;
    top: 0;
    transition: opacity .35s;
    z-index: 1
}

    .beer-reveal > :first-child {
        height: 100%;
        max-width: none;
        width: 200%
    }

    .beer-reveal > img:first-child {
        height: auto
    }

.beer-range {
    -moz-appearance: none;
    -ms-touch-action: auto;
    -webkit-appearance: slider-horizontal !important;
    bottom: 0;
    cursor: pointer;
    height: 100%;
    left: -1px;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    touch-action: auto;
    width: calc(100% + 2px);
    z-index: 2
}

    .beer-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 300vh
    }

    .beer-range::-moz-range-thumb {
        -webkit-appearance: none;
        height: 300vh
    }

    .beer-range::-ms-tooltip {
        display: none
    }

.beer-handle {
    background: hsla(0,0%,100%,.5);
    border-radius: 50%;
    box-shadow: 0 0 6px transparent;
    color: #000;
    height: 48px;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    transition: background .3s,box-shadow .3s,opacity .5s .25s;
    width: 48px;
    z-index: 2
}

    .beer-handle:after, .beer-handle:before {
        border-left: 2px solid;
        border-top: 2px solid;
        content: "";
        height: 10px;
        position: absolute;
        top: 50%;
        transform-origin: 0 0;
        width: 10px
    }

    .beer-handle:before {
        left: 10px;
        transform: rotate(-45deg)
    }

    .beer-handle:after {
        right: 0;
        transform: rotate(135deg)
    }

.beer-range:focus ~ .beer-handle {
    background: hsla(0,0%,100%,.85);
    box-shadow: 0 0 3px rgba(0,0,0,.4)
}

.beer-reveal[data-beer-label]:after, .beer-slider[data-beer-label]:after {
    background: hsla(0,0%,100%,.75);
    border-radius: .125rem;
    content: attr(data-beer-label);
    line-height: 1;
    padding: .5rem;
    position: absolute;
    top: 1.5rem
}

.beer-slider[data-beer-label]:after {
    right: 1.5rem
}

.beer-reveal[data-beer-label]:after {
    left: 1.5rem
}

.beer-reveal[data-beer-label=""]:after, .beer-slider[data-beer-label=""]:after {
    content: none
}

.beer-ready .beer-handle, .beer-ready .beer-reveal {
    opacity: 1
}