/*!
 * 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-image: -moz-linear-gradient( to right, #19C133 0%,#19C133 100% );
         background-image: -webkit-linear-gradient( to right, #19C133 0%, #19C133 100% );
         background-image: -ms-linear-gradient( to right, #19C133 0%, #19C133 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;
     }
 }