.rnOuter {
    background: #0072ae;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    height: 100vh;
}

.rnInner {
    width: 100%;
    position: absolute;
    top: -10%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform-style: preserve-3d;
    transition: transform 6s ease;
    transform-origin: -120% top;
}

.rnUnit {
    width: 10vw;
    height: 120vh;
    background: repeating-linear-gradient(to left, #008ED8/*hsl(0, 80%, 38%);*/
    4vw, #0072ae/*hsl(0, 80%, 38%);*/
    8vw, #009FF1/*hsl(0, 80%, 38%);*/
    10vw);
    background-size: 100% 100%;
    display: inline-block;
    transform-origin: 0 0%;
    transform: rotate(3deg);
    -webkit-animation: rnUnit 6s ease infinite;
    animation: rnUnit 6s ease infinite;
}

@-webkit-keyframes rnUnit {
    50% {
        transform: rotate(-30deg);
    }
}

@keyframes rnUnit {
    50% {
        transform: rotate(-3deg);
    }
}

.rnUnit:nth-child(1) {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

.rnUnit:nth-child(2) {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.rnUnit:nth-child(3) {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.rnUnit:nth-child(4) {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.rnUnit:nth-child(5) {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.rnUnit:nth-child(6) {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.rnUnit:nth-child(7) {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.rnUnit:nth-child(8) {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.rnUnit:nth-child(9) {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.rnUnit:nth-child(10) {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.aoTable {
    display: table;
    width: 100%;
    height: 100vh;
    text-align: center;
}

.aoTableCell {
    color: #0072ae;
    display: table-cell;
    vertical-align: middle;
    transition: color 3s ease;
}

.rnOuter:hover .rnInner {
    cursor: pointer;
}

.anim {
    transform-origin: -150% top;
    transform: scaleX(2);
}

.white {
    color: white;
}

.bgChange {
    background: url('bg.gif') #0072ae;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}

img {
    border-radius: 50%;
}