﻿#loading {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: rgba(249,249,249,.9);
    /*background: -webkit-linear-gradient(bottom left, #f9f9f9 10%, #f9f9f9 65%, #f9f9f9 125%);
    background: linear-gradient(to top right, #f9f9f9 10%, #f9f9f9 65%, #f9f9f9 125%);*/
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    z-index: 999999;
}

#phrase_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column;
    flex-flow: column;
    height: 150px;
    overflow: hidden;
    width: 440px;
}

#phrases {
    -webkit-animation: slide-phrases-upward 25s;
    animation: slide-phrases-upward 25s;
}

@-webkit-keyframes slide-phrases-upward {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    14.3% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }

    28.6% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }

    42.9% {
        -webkit-transform: translateY(-150px);
        transform: translateY(-150px);
    }

    57.2% {
        -webkit-transform: translateY(-200px);
        transform: translateY(-200px);
    }

    71.5% {
        -webkit-transform: translateY(-250px);
        transform: translateY(-250px);
    }

    85.8% {
        -webkit-transform: translateY(-300px);
        transform: translateY(-300px);
    }

    100% {
        -webkit-transform: translateY(-350px);
        transform: translateY(-350px);
    }
}

@keyframes slide-phrases-upward {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    14.3% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }

    28.6% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }

    42.9% {
        -webkit-transform: translateY(-150px);
        transform: translateY(-150px);
    }

    57.2% {
        -webkit-transform: translateY(-200px);
        transform: translateY(-200px);
    }

    71.5% {
        -webkit-transform: translateY(-250px);
        transform: translateY(-250px);
    }

    85.8% {
        -webkit-transform: translateY(-300px);
        transform: translateY(-300px);
    }

    100% {
        -webkit-transform: translateY(-350px);
        transform: translateY(-350px);
    }
}

#loadingCheckCircleSVG-0 {
    -webkit-animation: fill-to-white 5000ms;
    animation: fill-to-white 5000ms;
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    fill: #666666;
    opacity: 0;
}

#loadingCheckCircleSVG-1 {
    -webkit-animation: fill-to-white 5000ms;
    animation: fill-to-white 5000ms;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    fill: #666666;
    opacity: 0;
}

#loadingCheckCircleSVG-2 {
    -webkit-animation: fill-to-white 5000ms;
    animation: fill-to-white 5000ms;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    fill: #666666;
    opacity: 0;
}

#loadingCheckCircleSVG-3 {
    -webkit-animation: fill-to-white 5000ms;
    animation: fill-to-white 5000ms;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    fill: #666666;
    opacity: 0;
}

#loadingCheckCircleSVG-4 {
    -webkit-animation: fill-to-white 5000ms;
    animation: fill-to-white 5000ms;
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
    fill: #666666;
    opacity: 0;
}

#loadingCheckCircleSVG-5 {
    -webkit-animation: fill-to-white 5000ms;
    animation: fill-to-white 5000ms;
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
    fill: #666666;
    opacity: 0;
}

#loadingCheckCircleSVG-6 {
    -webkit-animation: fill-to-white 5000ms;
    animation: fill-to-white 5000ms;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
    fill: #666666;
    opacity: 0;
}

#loadingCheckCircleSVG-7 {
    -webkit-animation: fill-to-white 5000ms;
    animation: fill-to-white 5000ms;
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
    fill: #666666;
    opacity: 0;
}

@-webkit-keyframes fill-to-white {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fill-to-white {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

#loadingCheckSVG-0 {
    -webkit-animation: fill-to-grey 5000ms;
    animation: fill-to-grey 5000ms;
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
}

#loadingCheckSVG-1 {
    -webkit-animation: fill-to-coral 5000ms;
    animation: fill-to-coral 5000ms;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

#loadingCheckSVG-2 {
    -webkit-animation: fill-to-coral 5000ms;
    animation: fill-to-coral 5000ms;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

#loadingCheckSVG-3 {
    -webkit-animation: fill-to-coral 5000ms;
    animation: fill-to-coral 5000ms;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}

#loadingCheckSVG-4 {
    -webkit-animation: fill-to-coral 5000ms;
    animation: fill-to-coral 5000ms;
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
}


#loadingCheckSVG-5 {
    -webkit-animation: fill-to-coral 5000ms;
    animation: fill-to-coral 5000ms;
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}

#loadingCheckSVG-6 {
    -webkit-animation: fill-to-coral 5000ms;
    animation: fill-to-coral 5000ms;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
}

#loadingCheckSVG-7 {
    -webkit-animation: fill-to-coral 5000ms;
    animation: fill-to-coral 5000ms;
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}

@-webkit-keyframes fill-to-coral {
    0% {
        fill: white;
    }

    10% {
        fill: #666666;
    }

    100% {
        fill: #666666;
    }
}

@keyframes fill-to-grey {
    0% {
        fill: white;
    }

    10% {
        fill: white;
    }

    100% {
        fill: white;
    }
}
