.beer-slider {

    display: inline-block;

    overflow: hidden;

    position: relative;

    border-radius: 20px;

}



.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

}