.twentytwenty-horizontal .twentytwenty-handle::before {background: rgba(255,255,255,0.5); display: block; position: absolute; z-index: 30; content: " "; box-shadow: 0px 0px 12px rgba(51,51,51,0.5); -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);}
.twentytwenty-horizontal .twentytwenty-handle::after {background: rgba(255,255,255,0.5); display: block; position: absolute; z-index: 30; content: " "; box-shadow: 0px 0px 12px rgba(51,51,51,0.5); -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);}
.twentytwenty-vertical .twentytwenty-handle::before {background: rgba(255,255,255,0.5); display: block; position: absolute; z-index: 30; content: " "; box-shadow: 0px 0px 12px rgba(51,51,51,0.5); -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);}
.twentytwenty-vertical .twentytwenty-handle::after {background: rgba(255,255,255,0.5); display: block; position: absolute; z-index: 30; content: " "; box-shadow: 0px 0px 12px rgba(51,51,51,0.5); -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);}
.twentytwenty-horizontal .twentytwenty-handle::before {left: 50%; width: 2px; height: 9999px; margin-left: -1.5px;}
.twentytwenty-horizontal .twentytwenty-handle::after {left: 50%; width: 2px; height: 9999px; margin-left: -1.5px;}
.twentytwenty-vertical .twentytwenty-handle::before {top: 50%; width: 9999px; height: 1px; margin-top: -1.5px;}
.twentytwenty-vertical .twentytwenty-handle::after {top: 50%; width: 9999px; height: 1px; margin-top: -1.5px;}
.twentytwenty-before-label {top: 0px; width: 100%; height: 100%; position: absolute;}
.twentytwenty-after-label {top: 0px; width: 100%; height: 100%; position: absolute;}
.twentytwenty-overlay {top: 0px; width: 100%; height: 100%; position: absolute;}
.twentytwenty-before-label {transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.twentytwenty-after-label {transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.twentytwenty-overlay {transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
.twentytwenty-before-label {transition-property: opacity; -webkit-transition-property: opacity; -moz-transition-property: opacity;}
.twentytwenty-after-label {transition-property: opacity; -webkit-transition-property: opacity; -moz-transition-property: opacity;}
.twentytwenty-before-label::before {color: white; letter-spacing: 0.1em; font-size: 13px;}
.twentytwenty-after-label::before {color: white; letter-spacing: 0.1em; font-size: 13px;}
.twentytwenty-before-label::before {background: rgba(255, 255, 255, 0.2); padding: 0px 20px; border-radius: 2px; line-height: 38px; position: absolute; -webkit-border-radius: 2px; -moz-border-radius: 2px;}
.twentytwenty-after-label::before {background: rgba(255, 255, 255, 0.2); padding: 0px 20px; border-radius: 2px; line-height: 38px; position: absolute; -webkit-border-radius: 2px; -moz-border-radius: 2px;}
.twentytwenty-horizontal .twentytwenty-before-label::before {top: 50%; margin-top: -19px;}
.twentytwenty-horizontal .twentytwenty-after-label::before {top: 50%; margin-top: -19px;}
.twentytwenty-vertical .twentytwenty-before-label::before {left: 50%; width: 90px; text-align: center; margin-left: -45px;}
.twentytwenty-vertical .twentytwenty-after-label::before {left: 50%; width: 90px; text-align: center; margin-left: -45px;}
.twentytwenty-left-arrow {border: 6px inset transparent; border-image: none; width: 0px; height: 0px; position: absolute;}
.twentytwenty-right-arrow {border: 6px inset transparent; border-image: none; width: 0px; height: 0px; position: absolute;}
.twentytwenty-up-arrow {border: 6px inset transparent; border-image: none; width: 0px; height: 0px; position: absolute;}
.twentytwenty-down-arrow {border: 6px inset transparent; border-image: none; width: 0px; height: 0px; position: absolute;}
.twentytwenty-left-arrow {top: 50%; margin-top: -6px;}
.twentytwenty-right-arrow {top: 50%; margin-top: -6px;}
.twentytwenty-up-arrow {left: 50%; margin-left: -6px;}
.twentytwenty-down-arrow {left: 50%; margin-left: -6px;}
.twentytwenty-container {overflow: hidden; position: relative; z-index: 0; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -webkit-user-select: none; -moz-user-select: none;}
.twentytwenty-container img {top: 0px; display: block; position: absolute; max-width: 100%;}
.twentytwenty-container.active .twentytwenty-overlay {background: rgba(0, 0, 0, 0);}
.twentytwenty-container.active .twentytwenty-overlay:hover {background: rgba(0, 0, 0, 0);}
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label {opacity: 0;}
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label {opacity: 0;}
.twentytwenty-container.active .twentytwenty-overlay:hover .twentytwenty-before-label {opacity: 0;}
.twentytwenty-container.active .twentytwenty-overlay:hover .twentytwenty-after-label {opacity: 0;}
.twentytwenty-container * {box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box;}
.twentytwenty-before-label {opacity: 0;}
.twentytwenty-before-label::before {content: "";}
.twentytwenty-after-label {opacity: 0;}
.twentytwenty-after-label::before {content: "";}
.twentytwenty-horizontal .twentytwenty-before-label::before {left: 10px;}
.twentytwenty-horizontal .twentytwenty-after-label::before {right: 10px;}
.twentytwenty-vertical .twentytwenty-before-label::before {top: 10px;}
.twentytwenty-vertical .twentytwenty-after-label::before {bottom: 10px;}
.twentytwenty-overlay {background: rgba(0, 0, 0, 0); z-index: 25; transition-property: background; -webkit-transition-property: background; -moz-transition-property: background;}
.twentytwenty-overlay:hover {background: rgba(0, 0, 0, 0);}
.twentytwenty-overlay:hover .twentytwenty-after-label {opacity: 1;}
.twentytwenty-overlay:hover .twentytwenty-before-label {opacity: 1;}
.twentytwenty-before {z-index: 20;}
.twentytwenty-after {z-index: 10;}
.twentytwenty-handle {border-radius: 1000px; border: 3px solid rgba(255,255,255,0.7); border-image: none; left: 50%; top: 50%; width: 38px; height: 38px; margin-top: -22px; margin-left: -22px; position: absolute; z-index: 40; cursor: pointer; box-shadow: 0px 0px 12px rgba(51,51,51,0.5); -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -webkit-border-radius: 1000px; -moz-border-radius: 1000px;}
.twentytwenty-horizontal .twentytwenty-handle::before {bottom: 50%; margin-bottom: 22px; box-shadow: 0px 3px 0px white, 0px 0px 12px rgba(51,51,51,0.5); -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);}
.twentytwenty-horizontal .twentytwenty-handle::after {top: 50%; margin-top: 22px; box-shadow: 0px -3px 0px white, 0px 0px 12px rgba(51,51,51,0.5); -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);}
.twentytwenty-vertical .twentytwenty-handle::before {left: 50%; margin-left: 22px; box-shadow: 3px 0px 0px white, 0px 0px 12px rgba(51,51,51,0.5); -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);}
.twentytwenty-vertical .twentytwenty-handle::after {right: 50%; margin-right: 22px; box-shadow: -3px 0px 0px white, 0px 0px 12px rgba(51,51,51,0.5); -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);}
.twentytwenty-left-arrow {left: 50%; margin-left: -17px; border-right-color: white; border-right-width: 6px; border-right-style: solid;}
.twentytwenty-right-arrow {right: 50%; margin-right: -17px; border-left-color: white; border-left-width: 6px; border-left-style: solid;}
.twentytwenty-up-arrow {top: 50%; margin-top: -17px; border-bottom-color: white; border-bottom-width: 6px; border-bottom-style: solid;}
.twentytwenty-down-arrow {bottom: 50%; margin-bottom: -17px; border-top-color: white; border-top-width: 6px; border-top-style: solid;}
