/* =========================================================
   INDIVIDUAL MESH
========================================================= */

.securex-mesh {

    position: absolute;

    /*
     * Responsive size
     *
     * 30vw  = follows screen width
     * 450px = maximum size
     * 360px = minimum size
     */
    width: clamp(360px, 30vw, 450px);

    /*
     * Keep aspect ratio close to
     * your original 450 x 894
     */
    height: auto;
    aspect-ratio: 450 / 894;

    pointer-events: none;

    overflow: visible;

    opacity: 1;

    filter: none;

    will-change: transform;

}


/* =========================================================
   CANVAS
========================================================= */

.securex-mesh canvas {

    display: block;

    width: 100%;
    height: 100%;

    user-select: none;

}


/* =========================================================
   LEFT MESH
========================================================= */

.securex-mesh.left {

    /*
     * Keep the mesh anchored to the
     * LEFT viewport edge.
     */
    left: 0;

}


/* =========================================================
   RIGHT MESH
========================================================= */

.securex-mesh.right {

    /*
     * Keep the mesh anchored to the
     * RIGHT viewport edge.
     */
    right: 0;

}


/* =========================================================
   MAIN CONTENT
========================================================= */

.securex-main {

    position: relative;

    overflow: hidden;

}


/* =========================================================
   MESH CONTAINER
========================================================= */

#securex-side-mesh {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 4;

}


/* =========================================================
   WEBSITE CONTENT
========================================================= */

.securex-page-content {

    position: relative;

    z-index: 5;

}


/* =========================================================
   HEADER
========================================================= */

.securex-main header,
.securex-main .header,
.securex-main .navbar {

    position: relative;

    z-index: 10;

}


/* =========================================================
   FOOTER
========================================================= */

footer {

    position: relative;

    z-index: 20;

}


/* =========================================================
   HOME PAGE
   Hide ONLY the first mesh
========================================================= */

body.home-page
#securex-side-mesh
.securex-mesh:first-child {

    display: none;

}


/* =========================================================
   LAPTOP / DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .securex-mesh {

        width: clamp(
            400px,
            30vw,
            450px
        );

    }

}


/* =========================================================
   SMALL LAPTOP
========================================================= */

@media (min-width: 768px)
       and (max-width: 1199px) {

    .securex-mesh {

        width: 380px;

    }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 767px) {

    .securex-mesh {

        width: 300px;

        opacity: .4;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .securex-mesh {

        width: 250px;

        opacity: .28;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .securex-mesh {

        animation: none !important;

    }

}