/*
You can type here custom CSS code, which will be loaded both on your admin and front-end pages. Please make sure to not override layout properties (positions and sizes), as they can interfere with the sliders built-in responsive functionality. Here are few example targets to help you get started:
*/

.ls-container { /* Slider container */

}

.ls-layers { /* Layers wrapper */ 

}

.ls-3d-box div { /* Sides of 3D transition objects */ 

}

[id^="layerslider_37_"] .ls-bg {
    transition: scale 1.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    scale: 1 !important;
}

[id^="layerslider_37_"]:hover .ls-bg {
    scale: 1.1 !important;
}

[id^="layerslider_37_"] .ls-bg-wrap {
    position: relative;
}

[id^="layerslider_37_"] .ls-bg-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 10;
}