/* -----------------------------------------
  =CSS3 Loading animations
-------------------------------------------- */

/* =Elements style
---------------------- */
.load-wrapp {
    position: fixed;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    text-align: center;
    background-color: #ffffff;
}

.load-6 {
    /*padding-left: 40vw;*/
    /*padding-top: 33vw;*/
}

.load-wrapp:last-child {
    margin-right: 0;
}

.letter-holder {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    vertical-align: middle;
}

.letter {
    float: left;
    font-size: 18px;
    color: #19AA5A;
}

/* =Animate the stuff
------------------------ */

.load-6 .letter {
    animation-name: loadingF;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-direction: linear;
}

.l-1 {
    animation-delay: 0.48s;
}

.l-2 {
    animation-delay: 0.6s;
}

.l-3 {
    animation-delay: 0.72s;
}

.l-4 {
    animation-delay: 0.84s;
}

.l-5 {
    animation-delay: 0.96s;
}

.l-6 {
    animation-delay: 1.08s;
}

.l-7 {
    animation-delay: 1.2s;
}

.l-8 {
    animation-delay: 1.32s;
}

.l-9 {
    animation-delay: 1.44s;
}

.l-10 {
    animation-delay: 1.56s;
}

.l-11 {
    animation-delay: 1.68s;
}

.l-12 {
    animation-delay: 1.8s;
}

.l-13 {
    animation-delay: 1.92s;
}

.l-14 {
    animation-delay: 2.04s;
}

.l-15 {
    animation-delay: 2.16s;
}

.l-16 {
    animation-delay: 2.28s;
}

.l-17 {
    animation-delay: 1.56s;
}

.l-18 {
    animation-delay: 1.56s;
}


@keyframes loadingF {
    0% {
        /*opacity: 0;*/
        color: #FFCC2A;
    }
    100% {
        /*opacity: 1;*/
        color: #19AA5A;
    }
}