/*reset*/
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, article, footer, header, menu, nav, section, video, picture { width: 100%; margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; box-sizing: border-box; display: block; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

img { display: block; vertical-align: bottom; font-size: 0; line-height: 0; width: 100%; height: auto; border: 0; }

/*base*/
html { -webkit-overflow-scrolling: touch; }

/*Base*/
/* CSS Document */
.beer-reveal[data-beer-label]:after, .beer-slider[data-beer-label]:after { content: none; }

.beer-handle { background: #ffffff; border-radius: 50%; box-shadow: 0 0 6px transparent; color: #000; height: 52px; left: 50.3%; opacity: 0; pointer-events: none; position: absolute; top: 52.7%; transform: translate3d(-53%, -50%, 0); transition: background .3s,box-shadow .3s,opacity .5s .25s; width: 52px; z-index: 2; }

@media screen and (max-width: 800px) { .beer-handle { width: 6.5vw; height: 6.5vw; } }

.beer-handle::before { position: absolute; content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #727171 transparent transparent; transform: rotate(0deg); top: 31%; left: 20%; }

@media screen and (max-width: 800px) { .beer-handle::before { border-width: 1.25vw 1.25vw 1.25vw 0; } }

.beer-handle::after { position: absolute; content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #727171; transform: rotate(0deg); top: 30%; right: 16%; }

@media screen and (max-width: 800px) { .beer-handle::after { border-width: 1.25vw 0 1.25vw 1.25vw; } }

.beer-reveal { left: 0; opacity: 0; overflow: hidden; position: absolute; right: 50%; top: 0; transition: opacity .35s; z-index: 1; }

.beer-reveal::before { position: absolute; content: ""; border-right: solid 2px #fff; right: 0; height: 100%; }

.beer-range:focus ~ .beer-handle { background: #ffffff; box-shadow: unset; }

.slideAB { top: 46.3%; width: 88.125%; margin: 0 auto; left: 0; right: 0; }

.slideAB__move { top: 0; left: 0; width: 0%; animation: slide linear 4s infinite; border-right: solid 2px #fff; }

.slideAB__move--img { width: 100%; overflow: hidden; display: block; }

.slideAB__move--img img { width: 705px; }

@media screen and (max-width: 800px) { .slideAB__move--img img { width: 88.125vw; } }

@keyframes slide { 0% { width: 0; }
  40% { width: 100%; }
  50% { width: 100%; }
  90% { width: 0; } }
/*# sourceMappingURL=before-after.css.map */