/* =========================================================
   SECUREX360 — REPEATING SIDE MESH
========================================================= */

#securex-side-mesh {
    position: absolute;
    inset: 0;
    width: 100%;
    /* min-height: 100%; */
    /* overflow: hidden; */
    pointer-events: none;
    z-index: 2;
    top: 100vh;
}

.securex-side-mesh-item {
    position: absolute;
    width: 500px;
    height: 900px;
    pointer-events: none;
    will-change: transform;
    opacity: 1;
}

.securex-side-mesh-item svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.securex-side-mesh-content {
    position: relative;
    z-index: 2;
}

@media (max-width: 767px) {
    .securex-side-mesh-item {
        width: 220px;
        height: 560px;
        opacity: .30;
    }
}
 
@keyframes securexSideFloat0 {
    0%,100% { transform: translate3d(0,0,0) rotate(-1deg); }
    50% { transform: translate3d(28px,18px,0) rotate(1.5deg); }
}
@keyframes securexSideFloat1 {
    0%,100% { transform: translate3d(0,0,0) rotate(1deg); }
    50% { transform: translate3d(-24px,-20px,0) rotate(-1.5deg); }
}
@keyframes securexSideFloat2 {
    0%,100% { transform: translate3d(0,0,0) rotate(-1deg); }
    50% { transform: translate3d(20px,-22px,0) rotate(1.2deg); }
}
@keyframes securexSideFloat3 {
    0%,100% { transform: translate3d(0,0,0) rotate(1deg); }
    50% { transform: translate3d(-30px,16px,0) rotate(-1.2deg); }
}