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