@layer base {

    /* Gray Background Gradient - Commonly used in most template pages. */

    .bg-gradient {
        @media (max-width: 767px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/black-gradient-bg.png");

        @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/black-gradient-bg.webp")) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/black-gradient-bg.webp");
            }
        }
        @media (min-width: 768px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/black-gradient-bg@2x.png");
        
            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/black-gradient-bg@2x.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/black-gradient-bg@2x.webp");
            }
        }
    }

    /*Teal Blur Background Gradient - Commonly used. */

    .teal-blur-bg {
        @media (max-width: 767px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/teal-blur-bg.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/teal-blur-bg.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/teal-blur-bg.webp");
            }
        }

        @media (min-width: 768px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/teal-blur-bg@2x.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/teal-blur-bg@2x.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/teal-blur-bg@2x.webp");
            }
        }
    }

    /* Blue-Purple Wave Pattern Background - Commonly Used */

    .bg-blue-purple-waves {
        @media (max-width: 767px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/blue-purple-waves-bg.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/blue-purple-waves-bg.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/blue-purple-waves-bg.webp");
            }
        }

        @media (min-width: 768px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/blue-purple-waves-bg@2x.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/blue-purple-waves-bg@2x.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/blue-purple-waves-bg@2x.webp");
            }
        }

    }

    /* Blue-Green gradient background - Found in Home Page */

    .bg-blue-green-twirl {
        @media (max-width: 767px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/blue-green-twirl-elegant-bg.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/blue-green-twirl-elegant-bg.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/blue-green-twirl-elegant-bg.webp");
            }
        }

        @media (min-width: 768px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/blue-green-twirl-elegant-bg@2x.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/blue-green-twirl-elegant-bg@2x.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/blue-green-twirl-elegant-bg@2x.webp");
            }
        }
    }

    /* CSP Banner Image - Found in School Partial within Industries section. */

    .bg-csp-banner {
        @media (max-width: 767px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/school-bus/csp-banner.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/school-bus/csp-banner.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/school-bus/csp-banner.webp");
            }
        }

        @media (min-width: 768px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/school-bus/csp-banner@2x.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/school-bus/csp-banner@2x.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/school-bus/csp-banner@2x.webp");
            }
        }

    }

    /* Camera Product Banner - Found in Recorders Page. */

    .bg-cameras {
        @media (max-width: 767px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/cameras/camera-link-banner.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/cameras/camera-link-banner.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/cameras/camera-link-banner.webp");
            }
        }

        @media (min-width: 768px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/cameras/camera-link-banner@2x.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/cameras/camera-link-banner@2x.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/cameras/camera-link-banner@2x.webp");
            }
        }

    }

    /* Recorder Product Banner - Found in Cameras Page. */

    .bg-recorders {
        @media (max-width: 767px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/recorders/recorder-link-banner.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/recorders/recorder-link-banner.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/recorders/recorder-link-banner.webp");
            }
        }

        @media (min-width: 768px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/recorders/recorder-link-banner@2x.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/recorders/recorder-link-banner@2x.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/recorders/recorder-link-banner@2x.webp");
            }
        }

    }

    /* Wireless Technology Background - Found in Wireless Technologies Page and the Making Connections Banner. */
    @media (max-width: 767px) {
        .bg-wireless-tech {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/wireless-tech-bg-alpha.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/wireless-tech-bg-alpha.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/wireless-tech-bg-alpha.webp");
            }
        }
    }

    @media (min-width: 768px) {
        .bg-wireless-tech {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/wireless-tech-bg-alpha@2x.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/wireless-tech-bg-alpha@2x.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/wireless-tech-bg-alpha@2x.webp");
            }
        }
    }

    /* Purple Circuit Background for Camera and Recorder Images - Found in Camera and Recorder Page. */

    .bg-purple-circuit {
        @media (max-width: 767px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/purple-blue-curcuit-bg.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/purple-blue-curcuit-bg.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/purple-blue-curcuit-bg.webp");
            }
        }

        @media (min-width: 768px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/purple-blue-curcuit-bg@2x.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/purple-blue-curcuit-bg@2x.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/purple-blue-curcuit-bg@2x.webp");
            }
        }

    }

    /* Data Center Background for Software Page - Found in Data Center section of Software Page. */
    @media (max-width: 767px) {
        .data-server-bg {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/about/wireless-technologies/hosted-server-banner-bg.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/about/wireless-technologies/hosted-server-banner-bg.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/about/wireless-technologies/hosted-server-banner-bg.webp");
            }
        }
    }

    @media (min-width: 768px) {
        .data-server-bg {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/about/wireless-technologies/hosted-server-banner-bg@2x.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/about/wireless-technologies/hosted-server-banner-bg@2x.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/about/wireless-technologies/hosted-server-banner-bg@2x.webp");
            }
        }
    }

    /* Data Center Banner - Found in Software Page as a banner. */

    .data-center-banner {
        @media (max-width: 767px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/software/data-center-bg.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/software/data-center-bg.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/software/data-center-bg.webp");
            }
        }

        @media (min-width: 768px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/software/data-center-bg@2x.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/software/data-center-bg@2x.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/products/software/data-center-bg@2x.webp");
            }
        }

    }

    /* Data Center Background Image - Found in Hosted Server page. */
    .data-center-bg {
        @media (max-width: 767px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/datacenter-dark.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/datacenter-dark.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/datacenter-dark.webp");
            }
        }

        @media (min-width: 768px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/datacenter-dark@2x.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/datacenter-dark@2x.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/datacenter-dark@2x.webp");
            }
        }

    }


    /* Employee Personnel Background - Found in Careers Section */

    .bg-personnel {
        @media (max-width: 767px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/personnel-bg.jpg");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/personnel-bg.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/personnel-bg.jpg");
            }
        }

        @media (min-width: 768px) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/personnel-bg@2x.jpg");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/personnel-bg@2x.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/personnel-bg@2x.webp");
            }
        }

    }

    /* Child Safety Program Backgrounds - Found only in the CSP view */
    @media (max-width: 767px) {
        .csp-bg {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/csp-page-bg-web2.png");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/csp-page-bg-web2.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/csp-page-bg-web2.webp");
            }
        }
    }

    @media (min-width: 768px) {
        .csp-bg {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/csp-page-bg-web2");

            @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/csp-page-bg-web2@2x.webp")) {
                background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/csp-page-bg-web2@2x.webp");
            }
        }
    }

    .tech-bg {
        background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/tech-lines.png");

        @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/tech-lines.webp")) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/tech-lines.webp");
        }
    }

    .support1-bg {
        background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/support-images/support1.png");

        @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/support-images/support1.webp")) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/support-images/support1.webp");
        }
    }

    .support2-bg {
        background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/support-images/support2.png");

        @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/support-images/support2.webp")) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/support-images/support2.webp");
        }
    }

    .support3-bg {
        background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/support-images/support3.png");

        @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/support-images/support3.webp")) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/support-images/support3.webp");
        }
    }

    .support4-bg {
        background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/support-images/support4.png");

        @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/support-images/support4.webp")) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/industries/csp/support-images/support4.webp");
        }
    }

    /* Waves Background - Found in Need Help and Want to Know More Banners. */
    .waves-bg {
        background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/waves-bg.png");

        @supports(background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/waves-bg.webp")) {
            background-image: url("https://s3.angeltrax.com/angeltraxdotcom/images/shared/backgrounds/waves-bg.webp");
        }
    }
}