@charset "utf-8";
.twentytwenty-horizontal .twentytwenty-handle:after,
.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-vertical .twentytwenty-handle:after,
.twentytwenty-vertical .twentytwenty-handle:before {
    content:"";
    display:block;
    background:#fff;
    position:absolute;
    z-index:30;
    -webkit-box-shadow:0 0 12px rgba(51,51,51,.5);
    -moz-box-shadow:0 0 12px rgba(51,51,51,.5);
    box-shadow:0 0 12px rgba(51,51,51,.5)
}
.twentytwenty-horizontal .twentytwenty-handle:after,
.twentytwenty-horizontal .twentytwenty-handle:before {
    height:9999px;
    left:50%;
    margin-left:0
}
.twentytwenty-vertical .twentytwenty-handle:after,
.twentytwenty-vertical .twentytwenty-handle:before {
    width:9999px;
    height:3px;
    top:50%;
    margin-top:-1.5px
}
.twentytwenty-after-label,
.twentytwenty-before-label,
.twentytwenty-overlay {
    width:100%;
    position:absolute;
    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    transition-duration:.5s
}
.twentytwenty-after-label,
.twentytwenty-before-label {
    -webkit-transition-property:opacity;
    -moz-transition-property:opacity;
    transition-property:opacity
}
.twentytwenty-after-label:before,
.twentytwenty-before-label:before {
    width:16.6%;
    text-align:center;
    font-size:13px;
    font-weight:400;
    color:#000;
    letter-spacing:normal;
    line-height:normal;
    background:#fff;
    border-radius:5px;
    padding:10px 2% 12px;
    position:absolute;
    content:attr(data-content)
}
.twentytwenty-horizontal .twentytwenty-after-label:before,
.twentytwenty-horizontal .twentytwenty-before-label:before {
    top:50%
}
.twentytwenty-vertical .twentytwenty-after-label:before,
.twentytwenty-vertical .twentytwenty-before-label:before {
    left:50%;
    margin-left:-45px;
    text-align:center;
    width:90px
}
.twentytwenty-down-arrow,
.twentytwenty-left-arrow,
.twentytwenty-right-arrow,
.twentytwenty-up-arrow {
    width:8px;
    height:14px;
    transition:.25s ease-out;
    position:absolute
}
.twentytwenty-left-arrow,
.twentytwenty-right-arrow {
    top:50%;
    transform:translateY(-50%)
}
.twentytwenty-down-arrow,
.twentytwenty-up-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
}
.twentytwenty-container img {
    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-after-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label {
    opacity:0
}
.twentytwenty-container * {
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box
}
.twentytwenty-horizontal .twentytwenty-before-label:before {
    left:4.8%
}
.twentytwenty-horizontal .twentytwenty-after-label:before {
    right:4.8%
}
.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);
    top:7.3%;
    z-index:25
}
.twentytwenty-overlay:hover .twentytwenty-after-label,
.twentytwenty-overlay:hover .twentytwenty-before-label {
    opacity:1
}
.twentytwenty-before {
    z-index:20
}
.twentytwenty-after {
    z-index:10
}
.twentytwenty-handle {
    height:40px;
    width:40px;
    transform:translateY(-50%);
    background:#fff;
    border:1px solid #fff;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    -webkit-box-shadow:0 0 12px rgba(51,51,51,.5);
    -moz-box-shadow:0 0 12px rgba(51,51,51,.5);
    box-shadow:0 0 12px rgba(51,51,51,.5);
    cursor:pointer;
    margin:0 0 0 -22px;
    z-index:40;
    position:absolute;
    left:50%;
    top:50%
}
.twentytwenty-handle:hover {
    background:#fff
}
.twentytwenty-horizontal .twentytwenty-handle:before {
    width:2px;
    bottom:0;
    margin-bottom:24px;
    -webkit-box-shadow:0 3px 0 #fff,
    0 0 12px rgba(255,255,255,.5);
    -moz-box-shadow:0 3px 0 #fff,
    0 0 12px rgba(255,255,255,.5);
    box-shadow:0 3px 0 #fff,
    0 0 12px rgba(255,255,255,.5)
}
.twentytwenty-horizontal .twentytwenty-handle:after {
    width:2px;
    top:0;
    margin-top:24px;
    -webkit-box-shadow:0 -3px 0 #fff,
    0 0 12px rgba(255,255,255,.5);
    -moz-box-shadow:0 -3px 0 #fff,
    0 0 12px rgba(255,255,255,.5);
    box-shadow:0 -3px 0 #fff,
    0 0 12px rgba(255,255,255,.5)
}
.twentytwenty-vertical .twentytwenty-handle:before {
    left:50%;
    margin-left:22px;
    -webkit-box-shadow:3px 0 0 #fff,
    0 0 12px rgba(255,255,255,.5);
    -moz-box-shadow:3px 0 0 #fff,
    0 0 12px rgba(255,255,255,.5);
    box-shadow:3px 0 0 #fff,
    0 0 12px rgba(255,255,255,.5)
}
.twentytwenty-vertical .twentytwenty-handle:after {
    right:50%;
    margin-right:22px;
    -webkit-box-shadow:-3px 0 0 #fff,
    0 0 12px rgba(255,255,255,.5);
    -moz-box-shadow:-3px 0 0 #fff,
    0 0 12px rgba(255,255,255,.5);
    box-shadow:-3px 0 0 #fff,
    0 0 12px rgba(255,255,255,.5)
}
.twentytwenty-left-arrow {
    background:url(../images/left-black-plain-arrow.svg) center/100% no-repeat;
    left:50%;
    margin-left:-16px
}
.twentytwenty-handle:hover .twentytwenty-left-arrow {
    background:url(../images/left-gray-plain-arrow.svg) center/100% no-repeat
}
.twentytwenty-right-arrow {
    background:url(../images/right-black-plain-arrow.svg) center/100% no-repeat;
    right:50%;
    margin-right:-16px
}
.twentytwenty-handle:hover .twentytwenty-right-arrow {
    background:url(../images/right-gray-plain-arrow.svg) center/100% no-repeat
}
.twentytwenty-up-arrow {
    border-bottom:5px solid #fff;
    top:50%;
    margin-top:-20px
}
.twentytwenty-down-arrow {
    border-top:5px solid #fff;
    bottom:50%;
    margin-bottom:-20px
}
.galler-col2 .twentytwenty-handle {
    width:42px;
    height:42px;
    margin:0 0 0 -21px
}
.galler-col2 .twentytwenty-left-arrow {
    margin-left:-12px
}
.galler-col2 .twentytwenty-right-arrow {
    margin-right:-12px
}
.galler-col2 .twentytwenty-horizontal .twentytwenty-handle:before {
    margin-bottom:45px
}
.galler-col2 .twentytwenty-horizontal .twentytwenty-handle:after {
    margin-top:45px
}
.galler-row1 .twentytwenty-after-label:before,
.galler-row1 .twentytwenty-before-label:before {
    display:none
}
@media screen and (max-width:480px) {
    .twentytwenty-overlay {
        top:10%
    }
    .twentytwenty-horizontal .twentytwenty-before-label:before {
        left:5%
    }
    .twentytwenty-horizontal .twentytwenty-after-label:before {
        right:5%
    }
    .twentytwenty-after-label:before,
    .twentytwenty-before-label:before {
        width:22.6%;
        font-size:11px;
        line-height:normal;
        padding:6px 2% 8px
    }
}
@media screen and (min-width:481px) and (max-width:600px) {
    .twentytwenty-overlay {
        top:10%
    }
    .twentytwenty-horizontal .twentytwenty-before-label:before {
        left:5%
    }
    .twentytwenty-horizontal .twentytwenty-after-label:before {
        right:5%
    }
    .twentytwenty-after-label:before,
    .twentytwenty-before-label:before {
        width:22.6%;
        font-size:11px;
        line-height:normal;
        padding:6px 2% 8px
    }
}
@media screen and (min-width:601px) and (max-width:767px) {
    .twentytwenty-overlay {
        top:10%
    }
    .twentytwenty-horizontal .twentytwenty-before-label:before {
        left:5%
    }
    .twentytwenty-horizontal .twentytwenty-after-label:before {
        right:5%
    }
    .twentytwenty-after-label:before,
    .twentytwenty-before-label:before {
        width:22.6%;
        font-size:11px;
        line-height:normal;
        padding:6px 2% 8px
    }
}
@media screen and (min-width:768px) and (max-width:900px) {
    .twentytwenty-after-label:before,
    .twentytwenty-before-label:before {
        font-size:11px;
        padding:6px 2% 8px
    }
}
@media screen and (min-width:901px) and (max-width:1024px) {
    .twentytwenty-after-label:before,
    .twentytwenty-before-label:before {
        font-size:11px;
        padding:6px 2% 8px
    }
}
