.gitlab-corner-wrapper {
    overflow: hidden;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0
}

.gitlab-corner {
    position: absolute;
    top: -16px;
    right: -50px;
    transform: rotate(45deg);
    background: #333;
    border: 44px solid #333;
    border-bottom: none;
    border-top: #333 solid 16px
}

.gitlab-corner svg {
    width: 60px;
    height: 60px;
    margin-bottom: -4px
}

.cls-g-1 {
    fill: #aaa
}

.cls-g-2 {
    fill: #888
}

.cls-g-3 {
    fill: #eee
}

.gitlab-corner:hover .cls-g-1 {
    animation: greyCycle .6s
}

.gitlab-corner:hover .cls-g-2 {
    animation: greyCycleMid .6s
}

.gitlab-corner:hover .cls-g-3 {
    animation: greyCycleEnd .6s
}

@keyframes greyCycle {

    100%,
    15%,
    60% {
        fill: #eee
    }

    30%,
    75% {
        fill: #888
    }

    45%,
    90% {
        fill: #aaa
    }
}

@keyframes greyCycleMid {

    100%,
    15%,
    60% {
        fill: #888
    }

    30%,
    75% {
        fill: #aaa
    }

    45%,
    90% {
        fill: #eee
    }
}

@keyframes greyCycleEnd {

    100%,
    15%,
    60% {
        fill: #aaa
    }

    30%,
    75% {
        fill: #eee
    }

    45%,
    90% {
        fill: #888
    }
}

@media (max-width:500px) {

    .gitlab-corner:hover .cls-g-1,
    .gitlab-corner:hover .cls-g-2,
    .gitlab-corner:hover .cls-g-3 {
        animation: none
    }

    .gitlab-corner .cls-g-1 {
        animation: greyCycle .6s
    }

    .gitlab-corner .cls-g-2 {
        animation: greyCycleMid .6s
    }

    .gitlab-corner .cls-g-3 {
        animation: greyCycleEnd .6s
    }
}