.before-effect-main-div { /* plugin main div */
    position: relative;
    overflow: hidden;
    width:100%;
    margin:70px auto 0;
    border-radius:5px;
}

.before-effect-main-div img { /* it's images */
    width: 100%;
    display:block;
    pointer-events: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;    
    max-width:none;
}

.before-effect-resizable-div { /* resizable div*/
    position: absolute;
    top:0;
    left: 0;
    overflow: hidden;
}

.before-effect-line { /* Tha seperator line */
    position:absolute; 
    left:50%;
    top:0;
    bottom:0;
    /*width:4px;*/
    margin-left:-2px;
    background: var(--LineColor);
    Cursor: var(--Cursor);
}

.before-effect-line:after {  /* Line middle button */
    text-align: center;
    position: absolute;
    color:var(--IconColor);
    top: var(--IconPosT);
    right: var(--IconPosR);
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    transition: all 0.2s;
    content:var(--icon);
    background-image: linear-gradient(180deg, var(--buttonG1) 0%, var(--buttonG2) 100%);
    border: 1px solid var(--ButtonBorder);
    background-size:56px;
    border-radius: var(--ButtonRaduis);
    font-size: var(--IconSize);
    line-height: 52px;
    box-sizing: border-box;
}

.before-effect-line:hover:after { /* let's scale button on hover! */
    transform: scale(1.03);
}

.dragging:hover:after { /* it's dragging !!! */
    transform: scale(1.03) translateY(2px);
}


.before-effect-button { /* slider buttons */
    position: absolute;
    bottom: 0;
    background: #121212;
    color: #fff;
    pointer-events: none;
    border-radius: .2rem;
    padding: 2px 10px;
    margin: 1rem;
    font-size: 1em;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.before-effect-button-right { /* Tha before one! */
    right: 0;
}

.after-effect-button { /* Tha before one! */
    /*z-index: 9;*/
}

@media screen and (max-width: 1000px) { /* some responsive */
  .before-effect-line:after { 
    width: 28px; 
    height: 28px; 
    margin: -14px 0 0 -14px; 
    font-size: 12px; 
    line-height: 26px; 
  }
}

.before-effect-button,.after-effect-button{
    display: none;
}