@import url(//fonts.googleapis.com/css?family=Racing+Sans+One);
.loading-animation {
    background: 50% 50% no-repeat black;
    min-height: 550px;
    min-width: 180px;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 999;
    position: absolute;
    opacity:0.8;
}
.loading-animation .loading-animation-wrapper {
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    width: 180px;
    height: 180px;
    background: black;
    border: 10px solid transparent;
    border-radius: 50%;
    border-top: 10px solid transparent;
    -webkit-animation: loading-animation-wrapper 3.5s linear infinite;
    animation: loading-animation-wrapper 3.5s linear infinite;
    /*font-family: 'Racing Sans One', sans-serif;*/
    font-size: 20px;
    color: #444;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0.04em rgba(255,255,255,0.9);
    line-height: 3em;
    z-index: 999;
}
.loading-animation-image {
    display: block;
    width: 50%;
    margin: auto;
    padding-top: 1.2em;
    animation: rota 3.5s linear reverse infinite;
}

.loading-animation-wrapper:before,
.loading-animation-wrapper:after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: inherit;
}
.loading-animation-inner {
    width: 100%;
    height: 100%;
    animation: rota 3.5s linear reverse infinite;
}
.loading-animation-inner span {
    display: inline-block;
	color:#fff;
    animation: placeholder 1.5s ease-out infinite;
}
.loading-animation-wrapper span:nth-child(1)  { animation-name: loading-animation-wrapper-loading-1;  }
.loading-animation-wrapper span:nth-child(2)  { animation-name: loading-animation-wrapper-loading-2;  }
.loading-animation-wrapper span:nth-child(3)  { animation-name: loading-animation-wrapper-loading-3;  }
.loading-animation-wrapper span:nth-child(4)  { animation-name: loading-animation-wrapper-loading-4;  }
.loading-animation-wrapper span:nth-child(5)  { animation-name: loading-animation-wrapper-loading-5;  }
.loading-animation-wrapper span:nth-child(6)  { animation-name: loading-animation-wrapper-loading-6;  }
.loading-animation-wrapper span:nth-child(7)  { animation-name: loading-animation-wrapper-loading-7;  }
@keyframes rota {
    to { transform: rotate(360deg); }
}
@-webkit-keyframes loading-animation-wrapper {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes loading-animation-wrapper {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes loading-animation-wrapper-loading-1 {
    14.28% { opacity: 0.3; }
}
@keyframes loading-animation-wrapper-loading-2 {
    28.57% { opacity: 0.3; }
}
@keyframes loading-animation-wrapper-loading-3 {
    42.86% { opacity: 0.3; }
}
@keyframes loading-animation-wrapper-loading-4 {
    57.14% { opacity: 0.3; }
}
@keyframes loading-animation-wrapper-loading-5 {
    71.43% { opacity: 0.3; }
}
@keyframes loading-animation-wrapper-loading-6 {
    85.71% { opacity: 0.3; }
}
@keyframes loading-animation-wrapper-loading-7 {
    100% { opacity: 0.3; }
}