@-webkit-keyframes waving {
    0% {
        transform: translateY(0px);
    }

    25% {
        transform: translateY(-20px);
    }

    50% {
        transform: translateY(0px);
    }

    75% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes waving {
    0% {
        transform: translateY(0px);
    }

    25% {
        transform: translateY(-20px);
    }

    50% {
        transform: translateY(0px);
    }

    75% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0px);
    }
}

.tw-flag {
    position: relative;
    width: 60vw;
    padding-bottom: 4vw;
    display: flex;
    align-items: stretch;
}

    .tw-flag .column {
        list-style: none;
        position: absolute;
        width: 4vw;
        height: 100%;
        background: #ccc;
        justify-self: stretch;
        perspective: 50px;
        background-size: 298% 100%;
        transform-origin: center;
        background-image: url("../images/logo.png");
    }

        .tw-flag .column:nth-child(1) {
            left: 0vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0s;
            animation-delay: 0s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 60vw 0;
        }

        .tw-flag .column:nth-child(2) {
            left: 0.6vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0.05s;
            animation-delay: 0.05s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 59.4vw 0;
        }

        .tw-flag .column:nth-child(3) {
            left: 1.2vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 58.8vw 0;
        }

        .tw-flag .column:nth-child(4) {
            left: 1.8vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0.15s;
            animation-delay: 0.15s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 58.2vw 0;
        }

        .tw-flag .column:nth-child(5) {
            left: 2.4vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 57.6vw 0;
        }

        .tw-flag .column:nth-child(6) {
            left: 3vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0.25s;
            animation-delay: 0.25s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 57vw 0;
        }

        .tw-flag .column:nth-child(7) {
            left: 3.6vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 56.4vw 0;
        }

        .tw-flag .column:nth-child(8) {
            left: 4.2vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0.35s;
            animation-delay: 0.35s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 55.8vw 0;
        }

        .tw-flag .column:nth-child(9) {
            left: 4.8vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 55.2vw 0;
        }

        .tw-flag .column:nth-child(10) {
            left: 5.4vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0.45s;
            animation-delay: 0.45s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 54.6vw 0;
        }

        .tw-flag .column:nth-child(11) {
            left: 6vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 54vw 0;
        }

        .tw-flag .column:nth-child(12) {
            left: 6.6vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0.55s;
            animation-delay: 0.55s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 53.4vw 0;
        }

        .tw-flag .column:nth-child(13) {
            left: 7.2vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 52.8vw 0;
        }

        .tw-flag .column:nth-child(14) {
            left: 7.8vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0.65s;
            animation-delay: 0.65s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 52.2vw 0;
        }

        .tw-flag .column:nth-child(15) {
            left: 8.4vw;
            -webkit-animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            animation: waving 6s cubic-bezier(0.37, 0, 0.63, 1);
            -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            background-position: 51.6vw 0;
        }

.wrapper.ten {
}

.bounce {
    font-size: 2rem;
    width: 70%;
    margin: 1rem auto;
    display: inline-flex;
    -webkit-box-reflect: below -20px linear-gradient(transparent, #211e1e2e);
}

    .bounce span {
        display: inline-flex;
        color: #c7f4ff;
        font-family: "Play", sans-serif;
        animation: bounce 1s infinite;
    }

@keyframes bounce {
    0%,25%, 50%,75%, 100% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-20px);
    }
}

.ten span:nth-of-type(1) {
    animation-delay: 0.1s;
}

.ten span:nth-of-type(2) {
    animation-delay: 0.25s;
}

.ten span:nth-of-type(3) {
    animation-delay: 0.4s;
}

.ten span:nth-of-type(4) {
    animation-delay: 0.55s;
}

.ten span:nth-of-type(5) {
    animation-delay: 0.7s;
}

.ten span:nth-of-type(6) {
    animation-delay: 0.85s;
}

.ten span:nth-of-type(7) {
    animation-delay: 1.0s;
}

.ten span:nth-of-type(8) {
    animation-delay: 1.15s;
}

.ten span:nth-of-type(9) {
    animation-delay: 1.3s;
}

.ten span:nth-of-type(10) {
    animation-delay: 1.45s;
}

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}