/*-------------------------------------------------------*/
/* Before and After
/*-------------------------------------------------------*/
.ba-slider { position: relative; overflow: hidden; }

.ba-slider img { width: 100%; display: block; max-width: none; }

.ba-slider .resize { position: absolute; top: 0; right: 0; height: 100%; width: 50%; overflow: hidden; }

.ba-slider .handle { position: absolute; right: 50%; top: 0; bottom: 0; width: 4px; margin-right: -2px; background: rgba(0, 0, 0, 0.5); cursor: ew-resize; }

.ba-slider .handle:after { position: absolute; top: 50%; width: 64px; height: 64px; margin: -32px -32px 0 0; content: '\21d4'; color: #fff; font-weight: 700; font-size: 36px; text-align: center; line-height: 64px; background: #ffb800; border: 1px solid #e6a600; border-radius: 50%; transition: all .3s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 60px 50px -30px #ffd466; }

.ba-slider .handle.ba-draggable:after { width: 48px; height: 48px; margin: -24px -24px 0 0; line-height: 50px; font-size: 30px; }

.ba-slider .handle:after { background-color: #0074e0; border: 0; box-shadow: none; }

.ba-slider:hover .ba-slider__ribbon, .ba-slider:focus .ba-slider__ribbon { opacity: 1; }

.ba-slider__ribbon { position: absolute; top: 48px; padding: 6px 12px; z-index: 1; background: #242424; color: #ffffff; border-radius: 3px; opacity: 0.2; box-shadow: -2px 2px 12px rgba(91, 69, 32, 0.2); transition: opacity .3s ease; }

.ba-slider__ribbon--before { right: 0; }

.ba-slider__ribbon--after { left: 0; }