/*!
 * 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; border:5px solid #ffe22e; border-radius: 25px; */}
.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%; max-width: none; }
.cndkbeforeafter-item-before { z-index: 5; }
.cndkbeforeafter-item-after { z-index: 10; }
.cndkbeforeafter-seperator { width:2.5px; position: absolute; height: 100%; z-index: 15; left: 0; top: 0; background: #FFFFFF; cursor: ew-resize; }
.cndkbeforeafter-seperator > div > span { transition: 0.25s; cursor: pointer; position: absolute; width: 65px; height: 65px; cursor: ew-resize; border:2px solid #FFF; background: white; top: 50%; left: 50%; margin-top: -30px; margin-left: -32px; border-radius: 50px; } 
.cndkbeforeafter-seperator > div > span::after { content: ""; border: solid #231f06; border-width: 0 2px 2px 0; display: inline-block; padding: 5px; transform: rotate(135deg); -webkit-transform: rotate(135deg); top: 50%; position: absolute; margin-top: -5px; left: 0; margin-left: 18px; }
.cndkbeforeafter-seperator > div > span::before { content: ""; border: solid #231f06; border-width: 2px 0 0 2px; display: inline-block; padding: 5px; transform: rotate(135deg); -webkit-transform: rotate(135deg); top: 50%; position: absolute; margin-top: -5px; right: 0; margin-right: 18px; }

/*.cndkbeforeafter-seperator.cndkbeforeafter-drag-transition > div > span::after { content: ""; border: solid #231f06; border-width: 0 2px 2px 0; display: inline-block; padding: 5px; transform: rotate(135deg); -webkit-transform: rotate(135deg); top: 50%; position: absolute; margin-top: -7px; left: 0; margin-left: 18px;}
.cndkbeforeafter-seperator.cndkbeforeafter-drag-transition > div > span::before { content: ""; border: solid #231f06; border-width: 2px 0 0 2px; display: inline-block; padding: 5px; transform: rotate(135deg); -webkit-transform: rotate(135deg); top: 50%; position: absolute; margin-top: -7px; right: 0; margin-right: 18px;}
*/

.cndkbeforeafter-seperator:hover > div > span, .cndkbeforeafter-seperator:active > div > span { background: #2572ca; }
.cndkbeforeafter-seperator:active > div > span { transform: scale(0.8); }
.cndkbeforeafter-seperator:hover { opacity:1 !important; }
/* .cndkbeforeafter-seperator:active { box-shadow: 0 0 35px #000; } */
.cndkbeforeafter-item-before-text { z-index:5;  position: absolute; display: inline-block; background: rgba(0, 0, 0, 0.6); color:#fff; padding: 10px;}
.cndkbeforeafter-item-after-text { position: absolute; z-index: 4; 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 24px !important; font-size: 11px !important; bottom: 0; }  
.cndkbeforeafter-extra-small-text-before { left: 20px; bottom: 20px; font-size: 14px !important; text-transform: uppercase; padding:0 20px; border-radius:25px; }
.cndkbeforeafter-extra-small-text-after { right: 20px; bottom: 20px; font-size: 14px !important; text-transform: uppercase; padding:0 20px; border-radius:25px;}
.cndkbeforeafter-hover:hover { opacity: 1; 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: white !important; }
.cndkbeforeafter-theme-light .cndkbeforeafter-seperator > div > span { border-color: white !important; background: white !important; }
.cndkbeforeafter-theme-light .cndkbeforeafter-seperator > span::after, .cndkbeforeafter-theme-light .cndkbeforeafter-seperator > span::before { border-color: white !important; }
.cndkbeforeafter-theme-light :hover > div > span, .cndkbeforeafter-theme-light :active > div > span { background: white !important; }
.cndkbeforeafter-theme-light .cndkbeforeafter-item-before-text, .cndkbeforeafter-theme-light .cndkbeforeafter-item-after-text { background: white !important; color:black !important }
.cndkbeforeafter-theme-light :hover > div > span, .cndkbeforeafter-theme-dark :active > div > span { background: #2572ca !important;  }
.cndkbeforeafter-theme-light :hover > div > span:after {  border-color: #ffffff !important;}
.cndkbeforeafter-theme-light :hover > div > span:before {  border-color: #ffffff !important;}


.cndkbeforeafter-item-before-c h2 { font-size: 24px; position: absolute; left: 0; bottom: 35px; height: auto; z-index: 9; right: 0; text-align: center; color:#fff; font-weight:600; text-shadow: 3px 3px 5px rgba(0,0,0,0.4);}
.cndkbeforeafter-item-after-c h2 { font-size: 24px; position: absolute; bottom: 35px; height: auto; z-index: 99; right: 0%; text-align: center; color:#fff; font-weight:600; text-shadow: 3px 3px 5px rgba(0,0,0,0.4);}
.
/* Theme Dark */
.cndkbeforeafter-theme-dark .cndkbeforeafter-seperator  { background: #ffe22e !important; }
.cndkbeforeafter-theme-dark .cndkbeforeafter-seperator > div > span { border-color: white !important; background: #E3C7A4 !important; }
.cndkbeforeafter-theme-dark .cndkbeforeafter-seperator > span::after, .cndkbeforeafter-theme-dark .cndkbeforeafter-seperator > span::before { border-color: white !important; }
/*.cndkbeforeafter-theme-dark :hover > div > span, .cndkbeforeafter-theme-dark :active > div > span { background: #2572ca !important;  }
.cndkbeforeafter-theme-dark :hover > div > span:after {  border-color: #ffffff !important;}
.cndkbeforeafter-theme-dark :hover > div > span:before {  border-color: #ffffff !important;}*/
/* .cndkbeforeafter-theme-dark .cndkbeforeafter-item-before-text, .cndkbeforeafter-theme-dark .cndkbeforeafter-item-after-text { background: #2572ca !important; color:#fff !important } */

.cndkbeforeafter-item-after-c.text-index { z-index:6;}

.cndkbeforeafter-theme-dark .cndkbeforeafter-item-before-text { display: inline-flex; height: 32px; align-items: center; justify-content: center; padding: 0 10px; color: #FFFFFF; border: 1px solid #FFFFFF; background: rgba(0,0,0,0.22); text-transform: uppercase; font-weight: 700; position: absolute; left: 15px; bottom: 15px; z-index: 10;}
.cndkbeforeafter-theme-dark .cndkbeforeafter-item-after-text { display: inline-flex; height: 32px; align-items: center; justify-content: center; padding: 0 10px; color: #FFFFFF; border: 1px solid #FFFFFF; background: rgba(0,0,0,0.22); text-transform: uppercase; font-weight: 700;  position: absolute; right: 15px; bottom: 15px; z-index: 10;}


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