/*!
 * Cndk.BeforeAfter.js v 0.0.2 (https://github.com/ilkerccom/cndkbeforeafter)
 * Ilker Cindik
 * Licensed under the MIT license
 */
 
.cndkbeforeafter { overflow: hidden; position: relative; transition: 0.5s; }
.cndkbeforeafter-container { background: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; }
.cndkbeforeafter-item { overflow: hidden; position: relative; }
.cndkbeforeafter-item > div { height: 100%; position: absolute; }
.cndkbeforeafter-item img { position: absolute; left: 0; top: 0; width: auto; height: 100%; }
.cndkbeforeafter-item-before { z-index: 5; }
.cndkbeforeafter-item-after { z-index: 10; }
.cndkbeforeafter-seperator { width:4px; position: absolute; height: 100%; z-index: 15; left: 0; top: 0; background: black; cursor: ew-resize; }
.cndkbeforeafter-seperator > div > span { 
        transition: 0.25s;
        cursor: pointer; 
        position: absolute;
        width: 80px; 
        height: 80px;
        cursor: ew-resize;
        background: -moz-linear-gradient( to right, #F25743 0%,#EB3648 100% );
        background: -webkit-linear-gradient( to right, #F25743 0%, #EB3648 100% );
        background: -ms-linear-gradient( to right, #F25743 0%, #EB3648 100%);
        background: linear-gradient( to right, #F25743 0%, #EB3648 100%);
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%) ;
        border-radius: 0px; 


    } 


.cndkbeforeafter-seperator > div > span::after { content: ""; border: solid #fff; border-width: 0 1px 1px 0; display: inline-block; padding: 4px; transform: rotate(135deg); -webkit-transform: rotate(135deg); top: 58%; position: absolute; margin-top: -10px; left: 15px; margin-left: 10px; }
.cndkbeforeafter-seperator > div > span::before { content: ""; border: solid #fff; border-width: 1px 0 0 1px; display: inline-block; padding: 4px; transform: rotate(135deg); -webkit-transform: rotate(135deg); top: 58%; position: absolute; margin-top: -10px; right: 15px; margin-right: 10px; }

.cndkbeforeafter-seperator:hover { opacity:1 !important; }

.cndkbeforeafter-item-before-text, .cndkbeforeafter-item-after-text { position: absolute; z-index: 14; display: inline-block; background: rgba(0, 0, 0, 0.6); color:#fff; padding: 10px; }
.cndkbeforeafter-top-left {  left:0; top: 0; }
.cndkbeforeafter-top-right {  right:0; top: 0; }
.cndkbeforeafter-bottom-left {  left:0; bottom: 0; }
.cndkbeforeafter-bottom-right {  right:0; bottom: 0; }
.cndkbeforeafter-extra-small-text { padding: 5px !important; font-size: 11px !important; bottom: 0; }  
.cndkbeforeafter-extra-small-text-before { left: 0; }
.cndkbeforeafter-extra-small-text-after { right: 0; }
.cndkbeforeafter-hover:hover { opacity: 0.95; box-shadow: 0 0 50px #ccc; }
.cndkbeforeafter-drag-transition { transition: 0.5s; }
.cndkbeforeafter-hover-transition { transition: 0s; }
.cndkbeforeafter-animation { animation: cndkbeforeafter-startanimaton 1s ease-in-out ; }
.cndkbeforeafter-animation-item-1 { animation: cndkbeforeafter-continuous-1 10s ease-in-out infinite; }
.cndkbeforeafter-animation-item-2 { animation: cndkbeforeafter-continuous-2 10s ease-in-out infinite; }
.cndkbeforeafter-animation-seperator { animation: cndkbeforeafter-continuous-3 10s ease-in-out infinite; }

/* Animations */
@keyframes cndkbeforeafter-startanimaton { from { opacity: 0; width:50%; transform: scale(0.85); } to { opacity: 1; width:100%; transform: scale(1); }  }
@keyframes cndkbeforeafter-continuous-1 { 0% { width:10%; } 50% { width:90%; } 100% { width:10%; } }
@keyframes cndkbeforeafter-continuous-2 { 0% { width:90%; } 50% { width:10%; } 100% { width:90%; } }
@keyframes cndkbeforeafter-continuous-3 { 0% { left:10%; } 50% { left:90%; } 100% { left:10%; } }

/* Theme Light */
.cndkbeforeafter-theme-light .cndkbeforeafter-seperator  { 
    background-image: -moz-linear-gradient( 90deg, rgb(242,87,67) 0%, rgb(235,54,72) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(242,87,67) 0%, rgb(235,54,72) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(242,87,67) 0%, rgb(235,54,72) 100%);
}

.cndkbeforeafter-theme-light .cndkbeforeafter-seperator > span::after, .cndkbeforeafter-theme-light .cndkbeforeafter-seperator > span::before { border-color: white !important; }

.cndkbeforeafter-theme-light .cndkbeforeafter-item-before-text, .cndkbeforeafter-theme-light .cndkbeforeafter-item-after-text { background: white !important; color:black !important }

/* Theme Dark */
.cndkbeforeafter-theme-dark .cndkbeforeafter-seperator  { background: black !important; }
.cndkbeforeafter-theme-dark .cndkbeforeafter-seperator > div > span { border-color: black !important; background: black !important; }
.cndkbeforeafter-theme-dark .cndkbeforeafter-seperator > span::after, .cndkbeforeafter-theme-dark .cndkbeforeafter-seperator > span::before { border-color: black !important; }
.cndkbeforeafter-theme-dark :hover > div > span, .cndkbeforeafter-theme-dark :active > div > span { background: black !important; }
.cndkbeforeafter-theme-dark .cndkbeforeafter-item-before-text, .cndkbeforeafter-theme-dark .cndkbeforeafter-item-after-text { background: black !important; color:white !important }

/* For Mobile Devices */
@media only screen and (max-width: 600px) {
    .cndkbeforeafter{ width: 100% !important; }
}
  

@media only screen and (min-width: 576px) and (max-width: 767px){
    .cndkbeforeafter-seperator > div > span {
        width: 40px;
        height: 40px;
    }
    .cndkbeforeafter-seperator > div > span::before {
        margin-top: -7px;
        right: 0;
    }
    .cndkbeforeafter-seperator > div > span::after {
        margin-top: -7px;
        left: 0;
    }
}
@media (max-width: 575px){
    .cndkbeforeafter-seperator > div > span {
        width: 40px;
        height: 40px;
    }
    .cndkbeforeafter-seperator > div > span::before {
        margin-top: -7px;
        right: 0;
    }
    .cndkbeforeafter-seperator > div > span::after {
        margin-top: -7px;
        left: 0;
    }
}