* {
    margin: 0;
    padding: 0;
}

.designConcept {
    position: relative;
    overflow: hidden;
    height: 100vh;
}

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

.cover {
    width: 100%;
}

.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%);
    }
}

.robot1 {
    transition: opacity 2s;
}

.robotOpacity {
    opacity: .7;
}

.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);
    }
}

.robot2 {
    opacity: .3;
    animation: glitch-anim ease-in-out infinite alternate 2s;
}

.robot3 {
    opacity: .3;
    animation: glitch-anim-2 ease-in-out infinite 2s;
}

.robot4 {
    opacity: .5;
}

@keyframes glitch-anim {
    0% {
        -webkit-clip-path: polygon(2% 0, 2% 100%, 5% 100%, 5% 0);
        clip-path: polygon(2% 0, 2% 100%, 5% 100%, 5% 0);
    }

    10% {
        -webkit-clip-path: polygon(15% 0, 15% 100%, 15% 100%, 15% 0);
        clip-path: polygon(15% 0, 15% 100%, 15% 100%, 15% 0);
    }

    20% {
        -webkit-clip-path: polygon(10% 0, 10% 100%, 20% 100%, 20% 0);
        clip-path: polygon(10% 0, 10% 100%, 20% 100%, 20% 0);
    }

    30% {
        -webkit-clip-path: polygon(1% 0, 1% 100%, 2% 100%, 2% 0);
        clip-path: polygon(1% 0, 1% 100%, 2% 100%, 2% 0);
    }

    40% {
        -webkit-clip-path: polygon(33% 0, 33% 100%, 33% 100%, 33% 0);
        clip-path: polygon(33% 0, 33% 100%, 33% 100%, 33% 0);
    }

    50% {
        -webkit-clip-path: polygon(44% 0, 44% 100%, 44% 100%, 44% 0);
        clip-path: polygon(44% 0, 44% 100%, 44% 100%, 44% 0);
    }

    60% {
        -webkit-clip-path: polygon(50% 0, 50% 100%, 20% 100%, 20% 0);
        clip-path: polygon(50% 0, 50% 100%, 20% 100%, 20% 0);
    }

    70% {
        -webkit-clip-path: polygon(70% 0, 70% 100%, 70% 100%, 70% 0);
        clip-path: polygon(70% 0, 70% 100%, 70% 100%, 70% 0);
    }

    80% {
        -webkit-clip-path: polygon(80% 0, 80% 100%, 80% 100%, 80% 0);
        clip-path: polygon(80% 0, 80% 100%, 80% 100%, 80% 0);
    }

    90% {
        -webkit-clip-path: polygon(50% 0, 50% 100%, 55% 100%, 55% 0);
        clip-path: polygon(50% 0, 50% 100%, 55% 100%, 55% 0);
    }

    100% {
        -webkit-clip-path: polygon(70% 0, 70% 100%, 80% 100%, 80% 0);
        clip-path: polygon(70% 0, 70% 100%, 80% 100%, 80% 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        -webkit-clip-path: polygon(2% 0, 2% 100%, 5% 100%, 5% 0);
        clip-path: polygon(2% 0, 2% 100%, 5% 100%, 5% 0);
    }

    7% {
        -webkit-clip-path: polygon(15% 0, 15% 100%, 15% 100%, 15% 0);
        clip-path: polygon(15% 0, 15% 100%, 15% 100%, 15% 0);
    }

    14% {
        -webkit-clip-path: polygon(10% 0, 10% 100%, 20% 100%, 20% 0);
        clip-path: polygon(10% 0, 10% 100%, 20% 100%, 20% 0);
    }

    21% {
        -webkit-clip-path: polygon(1% 0, 1% 100%, 2% 100%, 2% 0);
        clip-path: polygon(1% 0, 1% 100%, 2% 100%, 2% 0);
    }

    28% {
        -webkit-clip-path: polygon(33% 0, 33% 100%, 33% 100%, 33% 0);
        clip-path: polygon(33% 0, 33% 100%, 33% 100%, 33% 0);
    }

    35% {
        -webkit-clip-path: polygon(44% 0, 44% 100%, 44% 100%, 44% 0);
        clip-path: polygon(44% 0, 44% 100%, 44% 100%, 44% 0);
    }

    42% {
        -webkit-clip-path: polygon(50% 0, 50% 100%, 20% 100%, 20% 0);
        clip-path: polygon(50% 0, 50% 100%, 20% 100%, 20% 0);
    }

    49% {
        -webkit-clip-path: polygon(70% 0, 70% 100%, 70% 100%, 70% 0);
        clip-path: polygon(70% 0, 70% 100%, 70% 100%, 70% 0);
    }

    56% {
        -webkit-clip-path: polygon(80% 0, 80% 100%, 80% 100%, 80% 0);
        clip-path: polygon(80% 0, 80% 100%, 80% 100%, 80% 0);
    }

    63% {
        -webkit-clip-path: polygon(50% 0, 50% 100%, 55% 100%, 55% 0);
        clip-path: polygon(50% 0, 50% 100%, 55% 100%, 55% 0);
    }

    70% {
        -webkit-clip-path: polygon(70% 0, 70% 100%, 80% 100%, 80% 0);
        clip-path: polygon(70% 0, 70% 100%, 80% 100%, 80% 0);
    }

    77%,
    100% {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

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

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