.before-after-container { position: relative; overflow: hidden; }
.before-after-container img { display: block; width: 100%; height: auto; }
.before-wrapper { position: relative; width: 100%; height: 100%; }
.after-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.separator { position: absolute; height: 100%; top: 0; cursor: e-resize; z-index:10; }
.separator-bullet { position: absolute; width: 40px; height: 40px; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; display:flex; align-items:center; justify-content:space-evenly; box-shadow:0 0 10px rgba(0,0,0,0.2); }
.arrow { border-style: solid; border-width: 0 3px 3px 0; padding: 4px; }
.left-arrow { transform: rotate(135deg); }
.right-arrow { transform: rotate(-45deg); }
.beforeAfter-wrapper { display: flex; flex-direction: column; }
.beforeAfter-heading-above { margin-bottom: 10px; }
.beforeAfter-heading-below { margin-top: 10px; }

.before-label.absolute { position: absolute; top: 10px; left: 10px; }
.after-label.absolute { position: absolute; top: 10px; right: 10px; }

.beforeAfter-labels-relative { display: flex; justify-content: space-between; margin-bottom: 10px; }
.before-label.relative, .after-label.relative { display: inline-block; }