/*
=========================================================
SECURX360 — REPEATING MESH
=========================================================
*/

.securex-main {
    position: relative;
    overflow: hidden;
}

#mesh-3d-animation-layer {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 2;

    background: transparent;
}

.mesh-3d-animation-item {
    position: absolute;

    width: 450px;
    height: 894px;

    display: block;

    pointer-events: none;

    background: transparent;
}


/* Normal laptop: 1366px / 1440px */
@media (max-width: 1440px) {

    .mesh-3d-animation-item {
        transform: scale(1);
    }

    .mesh-3d-animation-item[data-side="right"] {
        transform-origin: top right;
    }
}

/* Smaller laptop: 1280px */
@media (max-width: 1280px) {

    .mesh-3d-animation-item {
        transform: scale(1.2);
    }

    .mesh-3d-animation-item[data-side="right"] {
        transform-origin: top right;
    }
}

/* Smaller desktop/laptop */
@media (max-width: 1150px) {

    .mesh-3d-animation-item {
        transform: scale(1.2);
    }

    .mesh-3d-animation-item[data-side="right"] {
        transform-origin: top right;
    }
}

@media (max-width: 767.98px) {

    /*
     * Keep the actual drawing canvas at 450 x 894 for
     * predictable CPU usage; only the visual footprint
     * is reduced on small screens.
     */
    .mesh-3d-animation-item {
        transform: scale(0.78);
        transform-origin: top left;
    }

    .mesh-3d-animation-item[data-side="right"] {
        transform-origin: top right;
    }

    #mesh-3d-animation-layer {
        opacity: 0.75;
    }
}

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

    #mesh-3d-animation-layer {
        opacity: 1;
    }

}