.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {content: " "; display: block; background: white; position: absolute; z-index: 30; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {width: 3px; height: 9999px; left: 50%; margin-left: -1.5px; } .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {width: 9999px; height: 3px; top: 50%; margin-top: -1.5px; } .twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {width: 0; height: 0; border: 6px inset transparent; position: absolute; } .twentytwenty-left-arrow, .twentytwenty-right-arrow {top: 50%; margin-top: -6px; } .twentytwenty-up-arrow, .twentytwenty-down-arrow {left: 50%; margin-left: -6px; } .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; border-radius: 30px; } .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-overlay {-webkit-transition-property: background; -moz-transition-property: background; transition-property: background; background: rgba(0, 0, 0, 0); z-index: 25; } .twentytwenty-before {z-index: 20; } .twentytwenty-after {z-index: 10; } .twentytwenty-horizontal .twentytwenty-handle:before {bottom: 50%; margin-bottom: 22px; -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); 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; -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); 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; -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); 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; -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); box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-right-arrow {border-left: 6px solid var(--pbmit-global-color) !important; right: 50%; margin-right: -17px; } .twentytwenty-up-arrow {border-bottom: 6px solid white; top: 50%; margin-top: -17px; } .twentytwenty-down-arrow {border-top: 6px solid white; bottom: 50%; margin-bottom: -17px; } .twenty20{margin-bottom: 20px; } .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {content: " "; display: block; background: white; position: absolute; z-index: 30; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {width: 2px; height: 9999px; left: 50%; margin-left: -1.5px; } .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {width: 9999px; height: 3px; top: 50%; margin-top: -1.5px; } .twentytwenty-overlay {position: absolute; top: 0; width: 100%; height: 100%; } .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, .twentytwenty-after-label {color: white; font-size: 13px; letter-spacing: 0.1em; } .twentytwenty-before-label, .twentytwenty-after-label {position: absolute; background: rgba(255, 255, 255, 0.2); line-height: 38px; padding: 0 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {width: 0; height: 0; border: 6px inset transparent; position: absolute; } .twentytwenty-left-arrow, .twentytwenty-right-arrow {top: 50%; margin-top: -6px; } .twentytwenty-up-arrow, .twentytwenty-down-arrow {left: 50%; margin-left: -6px; } .twentytwenty-container img {max-width: 100%; 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-container.t20-hover.active .twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.t20-hover.active .twentytwenty-overlay .twentytwenty-after-label{opacity: 1; } .twentytwenty-after-label {opacity: 0; } .twentytwenty-horizontal .twentytwenty-before-label, .twentytwenty-horizontal .twentytwenty-after-label {padding: 2px 15px; background: rgba(var(--pbmit-blackish-color-rgb), .5); border-radius: 30px; bottom: 20px; margin-left: 20px; } .twentytwenty-horizontal .twentytwenty-before-label{left: 1px; max-width: 50%; box-sizing: border-box; line-height: inherit; } .twentytwenty-horizontal .twentytwenty-after-label {right: 1px; max-width: 50%; box-sizing: border-box; line-height: inherit; margin-right: 20px; } .twentytwenty-overlay:hover .twentytwenty-before-label, .twentytwenty-overlay:hover .twentytwenty-after-label{opacity: 1; } .twentytwenty-vertical .twentytwenty-before-label {top: 1px; line-height: inherit; padding: 6px; box-sizing: border-box; } .twentytwenty-vertical .twentytwenty-after-label {bottom: 1px; line-height: inherit; padding: 6px; box-sizing: border-box; } .twentytwenty-overlay {-webkit-transition-property: background; -moz-transition-property: background; transition-property: background; background: rgba(0, 0, 0, 0); z-index: 25; } .twentytwenty-before {z-index: 20; } .twentytwenty-after {z-index: 10; } .twentytwenty-handle {height: 55px; width: 55px; position: absolute; left: 50%; top: 50%; margin-left: -31px; margin-top: -22px; border: 2px solid white; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); z-index: 40; cursor: pointer; background-color: var(--pbmit-white-color); } .twentytwenty-horizontal .twentytwenty-handle:before {bottom: 65%; margin-bottom: 22px; -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); box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle:after {top: 70%; margin-top: 22px; -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); 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; -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); 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; -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); box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-left-arrow {border-right: 6px solid var(--pbmit-global-color); left: 50%; margin-left: -17px; } .twentytwenty-up-arrow {border-bottom: 6px solid white; top: 50%; margin-top: -17px; } .twentytwenty-down-arrow {border-top: 6px solid white; bottom: 50%; margin-bottom: -17px; } .twenty20 .twentytwenty-handle {margin-left: -30px; margin-top: -45px; height: 60px; width: 60px; background: var(--pbmit-white-color); } .twenty20 .twentytwenty-horizontal .twentytwenty-handle::before, .twenty20 .twentytwenty-horizontal .twentytwenty-handle::after {width: 2px; } .twenty20 .twentytwenty-horizontal .twentytwenty-handle::after {margin-left: -2.5px; } .twenty20 .twentytwenty-overlay:hover {background: transparent; } .twenty20 .twentytwenty-horizontal .twentytwenty-after-label, .twenty20 .twentytwenty-horizontal .twentytwenty-before-label {padding: 2px 15px; background: rgba(var(--pbmit-blackish-color-rgb), .5); border-radius: 30px; bottom: 20px; margin-left: 20px; } .twenty20 .twentytwenty-horizontal .twentytwenty-after-label{margin-right: 20px; } .twenty20 .twentytwenty-right-arrow{border-left-color: var(--pbmit-global-color); } .twenty20 .twentytwenty-left-arrow {border-right-color: var(--pbmit-global-color); } .twenty20 .twentytwenty-container{border-radius: 30px; }