#before_after {
    background: #fff;
    padding: 50px 0;
}

#before_after h2 {
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    margin: 10px auto 30px;
}

#before_after .ba-slider {
    position: relative;
    overflow: hidden
}

#before_after .ba-slider img {
    width: 100%;
    display: block;
    max-width: none
}

#before_after .ba-slider .resize {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    overflow: hidden
}

#before_after .ba-slider .handle {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    margin-left: -2px;
    background: rgba(0, 0, 0, .5);
    cursor: ew-resize
}

#before_after .ba-slider .handle:after {
    position: absolute;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    content: '\21d4';
    color: #fff;
    font-weight: 700;
    font-size: 36px;
    text-align: center;
    line-height: 64px;
    background: #ffb800;
    border: 1px solid #e6a600;
    border-radius: 50%;
    transition: all .3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 60px 50px -30px #ffd466
}

#before_after .ba-slider .handle.ba-draggable:after {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    line-height: 50px;
    font-size: 30px
}

#before_after .ba-slider {
    position: relative;
    overflow: hidden
}

#before_after .ba-slider img {
    width: 100%;
    display: block;
    max-width: none
}

#before_after .ba-slider .resize {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    overflow: hidden
}

#before_after .ba-slider .handle {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    margin-left: -2px;
    background: rgba(0, 0, 0, .5);
    cursor: ew-resize
}

#before_after .ba-slider .handle:after {
    position: absolute;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    content: '\21d4';
    color: #fff;
    font-weight: 700;
    font-size: 36px;
    text-align: center;
    line-height: 64px;
    background: #ffb800;
    border: 1px solid #e6a600;
    border-radius: 50%;
    transition: all .3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 60px 50px -30px #ffd466
}

#before_after .ba-slider .handle.ba-draggable:after {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    line-height: 50px;
    font-size: 30px
}

#before_after .tabs {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
    padding: 0;
    gap: 10px;
}

#before_after .tabs button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
    background: #f0f0f0;
}

#before_after .tabs button.active {
    background: #fbc304;
}

#before_after .ba-slider {
    position: relative;
    min-width: 600px;
    min-height: 400px;
    display: none;
    background: url(data:image/jpeg;base64,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);
    background-size: contain;
}

#before_after .ba-slider.active {
    display: block;
}

#before_after .ba-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#before_after .placeholder {
    background: #dadada;
    background-size: contain;
}


/* По умолчанию скрываем выпадающий список */

#before_after .mobile-select {
    display: none;
}


/* Показываем выпадающий список и скрываем кнопки на мобильных устройствах */

@media screen and (max-width: 768px) {
    #before_after .ba-slider {
        min-width: unset;
        min-height: unset;
    }
    #before_after .tabs {
        display: none;
    }
    #before_after .mobile-select {
        display: block;
        text-align: center;
    }
    #before_after .mobile-select select {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        outline: none;
        margin: 10px auto;
        background: #fccc4d;
        margin: 0 auto 20px;
    }
}