.layer {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateX(-50%);
}

.bg {
    background-image: url(../innergigabyteimages/designConcept/bg.jpg);
    animation: bgGlow .1s infinite linear;
    background-size: cover;
    width: 100%;
}

.gradientCover {
    width: 100%;
    background: linear-gradient(51deg, rgba(255, 0, 255, .3) 0%, rgba(33, 33, 33, 0) 100%);
    background-size: cover;
    animation: gradientCover 5s infinite linear;
}

@keyframes gradientCover {
    0% {
        opacity: 0;
    }

    50% {
        opacity: .6;
    }

    100% {
        opacity: 0;
    }
}

.bg1 {
    animation: bg1 3s infinite linear;
    width: 100%;
}

@keyframes bg1 {
    0% {
        transform: translateX(-40%) translateY(-100%);
    }

    100% {
        transform: translateX(-50%) translateY(100%);
    }
}

.bg2 {
    animation: bg2 3.1s infinite linear;
    width: 100%;
}

@keyframes bg2 {
    0% {
        transform: translateX(-40%) translateY(-100%);
    }

    100% {
        transform: translateX(-50%) translateY(100%);
    }
}

.bg3 {
    animation: bg3 3.9s infinite linear;
    width: 100%;
}

@keyframes bg3 {
    0% {
        transform: translateX(-40%) translateY(-100%);
    }

    100% {
        transform: translateX(-50%) translateY(100%);
    }
}

.bg4 {
    animation: bg4 3.8s infinite linear;
    width: 100%;
}

@keyframes bg4 {
    0% {
        transform: translateX(-40%) translateY(-100%);
    }

    100% {
        transform: translateX(-50%) translateY(100%);
    }
}

.bg5 {
    animation: bg5 3.85s infinite linear;
    width: 100%;
}

@keyframes bg5 {
    0% {
        transform: translateX(-60%) translateY(-100%);
    }

    100% {
        transform: translateX(-50%) translateY(100%);
    }
}

.bg6 {
    animation: bg6 3.2s infinite linear;
    width: 100%;
}

@keyframes bg6 {
    0% {
        transform: translateX(-60%) translateY(-100%);
    }

    100% {
        transform: translateX(-50%) translateY(100%);
    }
}

.bg7 {
    animation: bg7 3.05s infinite linear;
    width: 100%;
}

@keyframes bg7 {
    0% {
        transform: translateX(-60%) translateY(-100%);
    }

    100% {
        transform: translateX(-50%) translateY(100%);
    }
}

.bg8 {
    animation: bg8 3.5s infinite steps(5);
    width: 100%;
}

@keyframes bg8 {
    0% {
        filter: hue-rotate(90deg);
        transform: translateX(-50%) translateY(-1%);
    }

    50% {
        filter: hue-rotate(45deg);
        transform: translateX(-50%) translateY(1%);
    }

    100% {
        filter: hue-rotate(0deg);
        transform: translateX(-50%) translateY(-1%);
    }
}

.layer.cover {
    width: 100%;
    height: 100%;
}

.jp1 {
    animation: bgGlow 1s infinite ease-in-out 1s;
    left: 0;
    transform: translateX(0);
}

.jp2 {
    animation: bgGlow 1s infinite ease-in-out 2s;
    filter: blur(1px);
    opacity: .5;
    left: 0;
    transform: translateX(0);
}

.jp3 {
    animation: bgGlow 1s infinite ease-in-out 3s;
    left: 0;
    transform: translateX(0);
}

@keyframes bgGlow {
    0% {
        filter: brightness(1.1);
    }

    100% {
        filter: brightness(0.9);
    }
}

@media screen and (min-width:1921px) {

    .jp1,
    .jp2,
    .jp3 {
        display: none;
    }

}

@media screen and (max-width:1200px) {

    .jp1,
    .jp2,
    .jp3 {
        display: none;
    }

}