.bg-layer {
            position: fixed;
            top: 0;
            left: 0;
	    bottom: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            animation: fadeInOut 16s infinite;
        }

        .bg-layer-1 {
            background-image: url('../images/bckgrnd_gradient_1.jpg');
            animation-delay: 0s;
        }

        .bg-layer-2 {
            background-image: url('../images/bckgrnd_gradient_2.jpg');
            animation-delay: 4s;
        }

        .bg-layer-3 {
            background-image: url('../images/bckgrnd_gradient_3.jpg');
            animation-delay: 6s;
        }

        .bg-layer-4 {
            background-image: url('../images/bckgrnd_gradient_4.jpg');
            animation-delay: 8s;
        }

        @keyframes fadeInOut {
            0% { opacity: 0; }
            22% { opacity: 1; }
            28% { opacity: 1; }
            50% { opacity: 0; }
            100% { opacity: 0; }
        }

        .content {
            position: relative;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
        }