.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%
}
.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:100%
}
.beer-reveal>img:first-child{
    height:100%;
    width:100%
}
.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;
    bottom: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
}