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

.beer-slider *,
.beer-slider:after,
.beer-slider :after,
.beer-slider:before,
.beer-slider :before {
    -webkit-box-sizing: border-box;
    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%;
}

.beer-reveal {
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    right: 50%;
    top: 0;
    -webkit-transition: opacity .35s;
    -o-transition: opacity .35s;
    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: ew-resize;
    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%,43%,.5) url('data:image/png;base64,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') center center no-repeat;
    background-size: contain;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 6px transparent;
    box-shadow: 0 0 6px transparent;
    color: #000;
    height: 104px;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    -webkit-transition: background .3s, opacity .5s .25s, -webkit-box-shadow .3s;
    transition: background .3s, opacity .5s .25s, -webkit-box-shadow .3s;
    -o-transition: background .3s, box-shadow .3s, opacity .5s .25s;
    transition: background .3s, box-shadow .3s, opacity .5s .25s;
    transition: background .3s, box-shadow .3s, opacity .5s .25s, -webkit-box-shadow .3s;
    width: 103px;
    z-index: 2;
}

.beer-range:focus~.beer-handle {
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.4);
    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;
}

@media only screen and (max-width: 40em) {
    .beer-handle {
        height: 52px;
        width: 52px;
    }
}