.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after { content: " "; display: block; background: #25aae2; position: absolute; z-index: 30; }
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after { width: 8px; height: 9999px; left: 50%; margin-left: -4px; }
.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after { width: 9999px; height: 3px; top: 50%; margin-top: -1.5px; }
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay { position: absolute; top: 0; width: 100%; height: 100%; }
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; }
.twentytwenty-before-label, .twentytwenty-after-label { -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; }
.twentytwenty-before-label:before, .twentytwenty-after-label:before { position: absolute; line-height: 38px; padding: 0; }
.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before { top: 27px; width: 100px; text-align: center; }
.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before { left: 50%; margin-left: -45px; text-align: center; width: 90px; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow { width: 0; height: 0; position: absolute; border-style: solid; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow { top: 50%; margin-top: -9px; }
.twentytwenty-up-arrow, .twentytwenty-down-arrow { left: 50%; margin-left: -9px; }
.twentytwenty-container { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; z-index: 0; overflow: hidden; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.twentytwenty-container img { max-width: 100%; position: absolute; top: 0; display: block; }
.twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay { background: rgba(0, 0, 0, 0); }
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,  .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,  .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label { opacity: 0; }
.twentytwenty-container * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.twentytwenty-before-label { opacity: 0; }
.twentytwenty-before-label:before { content: attr(data-content); }
.twentytwenty-after-label { opacity: 0; }
.twentytwenty-after-label:before { content: attr(data-content); }
.twentytwenty-horizontal .twentytwenty-before-label:before { left: 112px; }
.twentytwenty-horizontal .twentytwenty-after-label:before { right: 112px; }
.twentytwenty-vertical .twentytwenty-before-label:before { top: 10px; }
.twentytwenty-vertical .twentytwenty-after-label:before { bottom: 10px; }
.twentytwenty-overlay { -webkit-transition-property: background; -moz-transition-property: background; transition-property: background; background: rgba(0, 0, 0, 0); z-index: 25; }
.twentytwenty-overlay:hover { background: rgba(0, 0, 0, 0.2); }
.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 { height: 68px; width: 68px; position: absolute; left: 50%; top: 50%; margin-left: -39px; margin-top: -39px; border: 5px solid #25aae2; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 40; cursor: pointer; }
.twentytwenty-horizontal .twentytwenty-handle:before { bottom: 50%; margin-bottom: 0; }
.twentytwenty-horizontal .twentytwenty-handle:after { top: 50%; margin-top: 0; }
.twentytwenty-vertical .twentytwenty-handle:before { left: 50%; margin-left: 0; }
.twentytwenty-vertical .twentytwenty-handle:after { right: 50%; margin-right: 0; }
.twentytwenty-left-arrow { border-width: 9px 9px 9px 0; border-color: transparent #25aae2 transparent transparent; left: 50%; margin-left: -24px; }
.twentytwenty-right-arrow { border-width: 9px 0 9px 9px; border-color: transparent transparent transparent #25aae2; right: 50%; margin-right: -24px; }
.twentytwenty-up-arrow { border-width: 9px 9px 0 9px; border-color: #25aae2 transparent transparent transparent; top: 50%; margin-top: -24px; }
.twentytwenty-down-arrow { border-width: 0 9px 9px 9px; border-color: transparent transparent #25aae2 transparent; bottom: 50%; margin-bottom: -24px; }
.twentytwenty-overlay div { font-size: 24px; color: #333; font-weight: 500; }
@media screen and ( max-width: 1024px ) {
.twentytwenty-overlay { display: none; }
}
@media screen and ( max-width: 767px ) {
.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after { width: 4px; margin-left: -2px; }
.twentytwenty-handle { width: 48px; height: 48px; border-width: 3px; margin-left: -27px; margin-top: -27px; }
.twentytwenty-left-arrow { border-width: 7px 7px 7px 0; margin-left: -16px; margin-top: -7px; }
.twentytwenty-right-arrow { border-width: 7px 0 7px 7px; margin-right: -16px; margin-top: -7px; }
}