.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: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
}