.ba__peelback-wrap, .ba__peelback-wrap *{box-sizing: border-box;}
.ba__peelback-wrap{max-width: 100%;}
.ba__peelback, .ba__peelback > *,.ba__peelback > * > *,.ba__peelback > * > * > *{width:100%; height:100%; display: block;}
.ba__peelback{position: absolute; left:inherit;top:inherit;right:inherit;bottom:inherit; overflow: hidden; background-repeat: no-repeat; background-color: #fff; box-shadow: none; --ba-peel-bg:#19a504;}
.ba__peelback > *, .ba__peel-data a{position: absolute; left: 0; right: 0; z-index: 1;}
.ba__peelback > .ba__peel-mask{z-index: 2; cursor: pointer; background: none; color: #fff;}
.ba__peel-data iframe, .ba__peel-data video{border: 0; box-shadow: 0 0 15px rgba(0,0,0,.5);}
.ba__peel-data iframe{min-width:420px; min-height:315px;}
.ba__peel-data iframe + a,
.ba__peel-data aside + a,
.ba__peel-data video + a,
.ba__peel-data audio + a{display: none; width: 0; height: 0; overflow: hidden;}
.ba__peelback img{max-width: 100%; max-height: 100%; width: auto; height: auto;}
.ba__peel-data > *{display: flex; position: relative;}
.ba__peelback-wrap:not(.peel-on) .ba__peel-data > *{min-width: 420px; height: auto;}

.ba__peelback-wrap.top-left{box-shadow: .1em .1em .5em rgba(0,0,0,.3);}
.ba__peelback-wrap.top-right{box-shadow: -.1em .1em .5em rgba(0,0,0,.3);}
.ba__peelback-wrap.bottom-left{box-shadow: .1em -.1em .5em rgba(0,0,0,.3);}
.ba__peelback-wrap.bottom-right{box-shadow: -.1em -.1em .5em rgba(0,0,0,.3);}

.top-right .ba__peel-mask{background-image:linear-gradient(to bottom left, transparent 49.9%, rgba(0,0,0,.3) 50%, transparent 58%), linear-gradient(to bottom left, transparent 49.9%, var(--ba-peel-bg) 50%)}
.top-left .ba__peel-mask{background-image:linear-gradient(to bottom right, transparent 49.9%, rgba(0,0,0,.3) 50%, transparent 58%), linear-gradient(to bottom right, transparent 49.9%, var(--ba-peel-bg) 50%)}
.bottom-right .ba__peel-mask{background-image:linear-gradient(to top left, transparent 49.9%, rgba(0,0,0,.3) 50%, transparent 58%), linear-gradient(to top left, transparent 49.9%, var(--ba-peel-bg) 50%)}
.bottom-left .ba__peel-mask{background-image:linear-gradient(to top right, transparent 49.9%, rgba(0,0,0,.3) 50%, transparent 58%), linear-gradient(to top right, transparent 49.9%, var(--ba-peel-bg) 50%)}

.top-right .ba__peel-mask{-webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);clip-path: polygon(0 0, 0% 100%, 100% 100%);}
.top-left .ba__peel-mask{-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);clip-path: polygon(0 100%, 100% 100%, 100% 0);}
.bottom-left .ba__peel-mask{-webkit-clip-path: polygon(100% 100%, 100% 0, 0 0);clip-path: polygon(100% 100%, 100% 0, 0 0);}
.bottom-right .ba__peel-mask{-webkit-clip-path: polygon(100% 0, 0 0, 0 100%);clip-path: polygon(100% 0, 0 0, 0 100%);}
.ba__peelback-wrap.ba__peelback-over .ba__peel-mask{-webkit-clip-path: none;clip-path: none;}


.ba__peel-mask::before{content: attr(data-event);color: inherit;font:normal 10px arial, sans-serif;text-transform: uppercase;display: flex;align-items: center;justify-content: center;width: 38px; height: 38px;background: none;transform: rotate(-45deg);position: absolute;right: 0;bottom: 0;border: 0 double; border-width: 4px 0 0;}
.top-right .ba__peel-mask::before{transform: rotate(45deg); left: 0; right: auto;}
.bottom-left .ba__peel-mask::before{transform: rotate(-135deg); right:0; top: 0; bottom: auto;}
.bottom-right .ba__peel-mask::before{left: 0; top:0;border-width: 0 0 4px;}

.peel-on.ba__peelback-click .ba__peel-mask::before{content: '✖'; position: absolute; left: 0%; top: 100%;width: 36px; height: 36px; transform: translate(-50%,-100%) rotate(-45deg);z-index: 9;background: rgba(255, 96, 0, 0.5);border-radius: 50%;align-items: center;display: flex;justify-content: center;font-style: normal; box-shadow: 0 0 0 5px rgba(0,0,0,.2); transform: translate(-10%,-90%); border-width: 0; font-size: 16px;}
.top-left.peel-on.ba__peelback-click .ba__peel-mask::before{transform: translate(-90%,-90%);top: 100%;left: 100%;}
.bottom-left.peel-on.ba__peelback-click .ba__peel-mask::before{transform: translate(-80%,-10%);top: 0;left: 100%;}
.bottom-right.peel-on.ba__peelback-click .ba__peel-mask::before{transform: translate(-10%,-10%);top: 0;left: 0;}

.ba__peelback-over.peel-on.top-left:not(.ba__peelback-drag) .ba__peel-mask{transform: translate(100%, 100%);}
.ba__peelback-over.peel-on.top-left:not(.ba__peelback-drag) .ba__peel-mask::before{top:0; left:0;}
.ba__peelback-over.peel-on.top-right:not(.ba__peelback-drag) .ba__peel-mask{transform: translate(-100%, 100%);}
.ba__peelback-over.peel-on.top-right:not(.ba__peelback-drag) .ba__peel-mask::before{top:0; left:100%;}
.ba__peelback-over.peel-on.bottom-left:not(.ba__peelback-drag) .ba__peel-mask{transform: translate(100%, -100%);}
.ba__peelback-over.peel-on.bottom-left:not(.ba__peelback-drag) .ba__peel-mask::before{top: 100%; left: 0;}
.ba__peelback-over.peel-on.bottom-right:not(.ba__peelback-drag) .ba__peel-mask{transform: translate(-100%, -100%);}
.ba__peelback-over.peel-on.bottom-right:not(.ba__peelback-drag) .ba__peel-mask::before{top: 100%; left: 100%;}

.ba__peelback-over.ba__peelback-drag > *{width:calc(200% - 50px); height:calc(200% - 50px);}
.ba__peelback-over.ba__peelback-drag .ba__peel-mask{transition-duration:1.2s;}
.ba__peelback-hover.ba__peelback-over.peel-on .ba__peel-mask::before{opacity: 0;}
.peel-root.peel-on video{width: 100%;}



/*////// CUSTOM ////////*/
.ba__peelback-tr .ba__peel-mask{--ba-peel-bg: #e00eb5;color: #fff;}
.ba__peelback-tl .ba__peel-mask{--ba-peel-bg: #69e106;color: #fff;}
.ba__peelback-bl .ba__peel-mask{--ba-peel-bg: #f90;color: #fff;}
.ba__peelback-ftr .ba__peel-mask{--ba-peel-bg: #fff;color: #333;}
.ba__peelback-ctl .ba__peel-mask{--ba-peel-bg: #21e2d0;color: #fff;}