html{
height: 100%
}
.div-loading{
align-items     : center;
display         : flex;
justify-content : center;
z-index: 100000;
}
.div-loading .text .blur{
color: transparent;
}
.div-loading .circularG-parent{
position:relative;
width:58px;
height:58px;
margin: auto;
}
.div-loading .circularG{
position:absolute;
background-color:rgb(0,0,0);
width:14px;
height:14px;
border-radius:9px;
-o-border-radius:9px;
-ms-border-radius:9px;
-webkit-border-radius:9px;
-moz-border-radius:9px;
animation-name:bounce_circularG;
-o-animation-name:bounce_circularG;
-ms-animation-name:bounce_circularG;
-webkit-animation-name:bounce_circularG;
-moz-animation-name:bounce_circularG;
animation-duration:1.1s;
-o-animation-duration:1.1s;
-ms-animation-duration:1.1s;
-webkit-animation-duration:1.1s;
-moz-animation-duration:1.1s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
}
.div-loading .circularG_1{
left:0;
top:23px;
animation-delay:0.41s;
-o-animation-delay:0.41s;
-ms-animation-delay:0.41s;
-webkit-animation-delay:0.41s;
-moz-animation-delay:0.41s;
}
.div-loading .circularG_2{
left:6px;
top:6px;
animation-delay:0.55s;
-o-animation-delay:0.55s;
-ms-animation-delay:0.55s;
-webkit-animation-delay:0.55s;
-moz-animation-delay:0.55s;
}
.div-loading .circularG_3{
top:0;
left:23px;
animation-delay:0.69s;
-o-animation-delay:0.69s;
-ms-animation-delay:0.69s;
-webkit-animation-delay:0.69s;
-moz-animation-delay:0.69s;
}
.div-loading .circularG_4{
right:6px;
top:6px;
animation-delay:0.83s;
-o-animation-delay:0.83s;
-ms-animation-delay:0.83s;
-webkit-animation-delay:0.83s;
-moz-animation-delay:0.83s;
}
.div-loading .circularG_5{
right:0;
top:23px;
animation-delay:0.97s;
-o-animation-delay:0.97s;
-ms-animation-delay:0.97s;
-webkit-animation-delay:0.97s;
-moz-animation-delay:0.97s;
}
.div-loading .circularG_6{
right:6px;
bottom:6px;
animation-delay:1.1s;
-o-animation-delay:1.1s;
-ms-animation-delay:1.1s;
-webkit-animation-delay:1.1s;
-moz-animation-delay:1.1s;
}
.div-loading .circularG_7{
left:23px;
bottom:0;
animation-delay:1.24s;
-o-animation-delay:1.24s;
-ms-animation-delay:1.24s;
-webkit-animation-delay:1.24s;
-moz-animation-delay:1.24s;
}
.div-loading .circularG_8{
left:6px;
bottom:6px;
animation-delay:1.38s;
-o-animation-delay:1.38s;
-ms-animation-delay:1.38s;
-webkit-animation-delay:1.38s;
-moz-animation-delay:1.38s;
}
.div-loading .circularG-parent.small{
width:22px;
height:22px;
}
.div-loading .circularG.small{
width:5px;
height:5px;
border-radius:3px;
-o-border-radius:3px;
-ms-border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}
.div-loading .circularG_1.small{
left:0;
top:9px;
}
.div-loading .circularG_2.small{
left:2px;
top:2px;
}
.div-loading .circularG_3.small{
top:0;
left:9px;
}
.div-loading .circularG_4.small{
right:2px;
top:2px;
}
.div-loading .circularG_5.small{
right:0;
top:9px;
}
.div-loading .circularG_6.small{
right:2px;
bottom:2px;
}
.div-loading .circularG_7.small{
left:9px;
bottom:0;
}
.div-loading .circularG_8.small{
left:2px;
bottom:2px;
}
.div-loading .circularG-parent.big{
width:83px;
height:83px;
}
.div-loading .circularG.big{
width:19px;
height:19px;
border-radius:12px;
-o-border-radius:12px;
-ms-border-radius:12px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
}
.div-loading .circularG_1.big{
left:0;
top:33px;
}
.div-loading .circularG_2.big{
left:8px;
top:8px;
}
.div-loading .circularG_3.big{
top:0;
left:33px;
}
.div-loading .circularG_4.big{
right:8px;
top:8px;
}
.div-loading .circularG_5.big{
right:0;
top:33px;
}
.div-loading .circularG_6.big{
right:8px;
bottom:8px;
}
.div-loading .circularG_7.big{
left:33px;
bottom:0;
}
.div-loading .circularG_8.big{
left:8px;
bottom:8px;
}
.div-loading .fountainG-parent{
position:relative;
width:150px;
height:18px;
margin:auto;
}
.div-loading .fountainG{
position:absolute;
top:0;
background-color:rgb(0,0,0);
width:18px;
height:18px;
animation-name:bounce_fountainG;
-o-animation-name:bounce_fountainG;
-ms-animation-name:bounce_fountainG;
-webkit-animation-name:bounce_fountainG;
-moz-animation-name:bounce_fountainG;
animation-duration:1.5s;
-o-animation-duration:1.5s;
-ms-animation-duration:1.5s;
-webkit-animation-duration:1.5s;
-moz-animation-duration:1.5s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
transform:scale(.3);
-o-transform:scale(.3);
-ms-transform:scale(.3);
-webkit-transform:scale(.3);
-moz-transform:scale(.3);
border-radius:12px;
-o-border-radius:12px;
-ms-border-radius:12px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
}
.div-loading .fountainG_1{
left:0;
animation-delay:0.6s;
-o-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-moz-animation-delay:0.6s;
}
.div-loading .fountainG_2{
left:19px;
animation-delay:0.75s;
-o-animation-delay:0.75s;
-ms-animation-delay:0.75s;
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;
}
.div-loading .fountainG_3{
left:37px;
animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-moz-animation-delay:0.9s;
}
.div-loading .fountainG_4{
left:56px;
animation-delay:1.05s;
-o-animation-delay:1.05s;
-ms-animation-delay:1.05s;
-webkit-animation-delay:1.05s;
-moz-animation-delay:1.05s;
}
.div-loading .fountainG_5{
left:75px;
animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
}
.div-loading .fountainG_6{
left:94px;
animation-delay:1.35s;
-o-animation-delay:1.35s;
-ms-animation-delay:1.35s;
-webkit-animation-delay:1.35s;
-moz-animation-delay:1.35s;
}
.div-loading .fountainG_7{
left:112px;
animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
}
.div-loading .fountainG_8{
left:131px;
animation-delay:1.64s;
-o-animation-delay:1.64s;
-ms-animation-delay:1.64s;
-webkit-animation-delay:1.64s;
-moz-animation-delay:1.64s;
}
.div-loading .fountainG-parent.big{
width:234px;
height:28px;
}
.div-loading .fountainG.big{
width:28px;
height:28px;
border-radius:19px;
-o-border-radius:19px;
-ms-border-radius:19px;
-webkit-border-radius:19px;
-moz-border-radius:19px;
}
.div-loading .fountainG_1.big{
left:0;
}
.div-loading .fountainG_2.big{
left:29px;
}
.div-loading .fountainG_3.big{
left:58px;
}
.div-loading .fountainG_4.big{
left:88px;
}
.div-loading .fountainG_5.big{
left:117px;
}
.div-loading .fountainG_6.big{
left:146px;
}
.div-loading .fountainG_7.big{
left:175px;
}
.div-loading .fountainG_8.big{
left:205px;
}
.div-loading .fountainG-parent.small{
width:66px;
height:8px;
}
.div-loading .fountainG.small{
width:8px;
height:8px;
border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
.div-loading .fountainG_1.small{
left:0;
}
.div-loading .fountainG_2.small{
left:8px;
}
.div-loading .fountainG_3.small{
left:16px;
}
.div-loading .fountainG_4.small{
left:25px;
}
.div-loading .fountainG_5.small{
left:33px;
}
.div-loading .fountainG_6.small{
left:41px;
}
.div-loading .fountainG_7.small{
left:49px;
}
.div-loading .fountainG_8.small{
left:58px;
}
@keyframes bounce_fountainG{
0%{
transform:scale(1);
}
100%{
transform:scale(.3);
}
}
@-o-keyframes bounce_fountainG{
0%{
-o-transform:scale(1);
}
100%{
-o-transform:scale(.3);
}
}
@-ms-keyframes bounce_fountainG{
0%{
-ms-transform:scale(1);
}
100%{
-ms-transform:scale(.3);
}
}
@-webkit-keyframes bounce_fountainG{
0%{
-webkit-transform:scale(1);
}
100%{
-webkit-transform:scale(.3);
}
}
@-moz-keyframes bounce_fountainG{
0%{
-moz-transform:scale(1);
}
100%{
-moz-transform:scale(.3);
}
}
@keyframes bounce_circularG{
0%{
transform:scale(1);
}
100%{
transform:scale(.3);
}
}
@-o-keyframes bounce_circularG{
0%{
-o-transform:scale(1);
}
100%{
-o-transform:scale(.3);
}
}
@-ms-keyframes bounce_circularG{
0%{
-ms-transform:scale(1);
}
100%{
-ms-transform:scale(.3);
}
}
@-webkit-keyframes bounce_circularG{
0%{
-webkit-transform:scale(1);
}
100%{
-webkit-transform:scale(.3);
}
}
@-moz-keyframes bounce_circularG{
0%{
-moz-transform:scale(1);
}
100%{
-moz-transform:scale(.3);
}
}
.box {
position: absolute;
width: 78px;
height: 78px;
left: 50%;
margin-left: -39px;
margin-top: -39px;
}
.loading:before {
content: '';
position: absolute;
width: 35px;
height: 35px;
top: 50%;
margin-top: -18px;
left: 50%;
margin-left: -18px;
border-width: 2px 1px;
border-style: solid;
border-color: rgb(221,187,0) rgba(221,187,0,0.3);
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
animation: spin 3.45s infinite;
-o-animation: spin 3.45s infinite;
-ms-animation: spin 3.45s infinite;
-webkit-animation: spin 3.45s infinite;
-moz-animation: spin 3.45s infinite;
}
.loading:after {
content: '';
position: absolute;
width: 6px;
height: 6px;
top: 50%;
margin-top: -3px;
left: 50%;
margin-left: -3px;
background-color: rgb(221,187,0);
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
-o-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
-ms-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
-webkit-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
-moz-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
}
.box.big {
width: 210px;
height: 210px;
left: 50%;
margin-left: -105px;
margin-top: -105px;
}
.loading.big:before {
width: 95px;
height: 95px;
top: 50%;
margin-top: -47px;
left: 50%;
margin-left: -47px;
border-width: 5px 3px;
border-color: rgb(221,187,0) rgba(221,187,0,0.3);
}
.loading.big:after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: 50%;
margin-top: -8px;
left: 50%;
margin-left: -8px;
background-color: rgb(221,187,0);
}
.box.small {
width: 40px;
height: 40px;
left: 50%;
margin-left: -20px;
margin-top: -20px;
}
.loading.small:before {
width: 18px;
height: 18px;
top: 50%;
margin-top: -9px;
left: 50%;
margin-left: -9px;
border-width: 1px 0px;
border-color: rgb(221,187,0) rgba(221,187,0,0.3);
}
.loading.small:after {
content: '';
position: absolute;
width: 3px;
height: 3px;
top: 50%;
margin-top: -1px;
left: 50%;
margin-left: -1px;
background-color: rgb(221,187,0);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(360deg);
}
100% {
transform: rotate(1080deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
50% {
-o-transform: rotate(360deg);
}
100% {
-o-transform: rotate(1080deg);
}
}
@-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
50% {
-ms-transform: rotate(360deg);
}
100% {
-ms-transform: rotate(1080deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(1080deg);
}
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
50% {
-moz-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(1080deg);
}
}
@keyframes pulse {
0% {
background-color: rgba(221,187,0,0.2);
}
13% {
background-color: rgba(221,187,0,0.2);
}
15% {
background-color: rgba(255,234,119,0.9);
}
28% {
background-color: rgba(255,234,119,0.9);
}
30% {
background-color: rgba(221,187,0,0.2);
}
43% {
background-color: rgba(221,187,0,0.2);
}
45% {
background-color: rgba(255,234,119,0.9);
}
70% {
background-color: rgba(255,234,119,0.9);
}
74% {
background-color: rgba(221,187,0,0.2);
}
100% {
background-color: rgba(255,234,119,0.9);
}
}
@-o-keyframes pulse {
0% {
background-color: rgba(221,187,0,0.2);
}
13% {
background-color: rgba(221,187,0,0.2);
}
15% {
background-color: rgba(255,234,119,0.9);
}
28% {
background-color: rgba(255,234,119,0.9);
}
30% {
background-color: rgba(221,187,0,0.2);
}
43% {
background-color: rgba(221,187,0,0.2);
}
45% {
background-color: rgba(255,234,119,0.9);
}
70% {
background-color: rgba(255,234,119,0.9);
}
74% {
background-color: rgba(221,187,0,0.2);
}
100% {
background-color: rgba(255,234,119,0.9);
}
}
@-ms-keyframes pulse {
0% {
background-color: rgba(221,187,0,0.2);
}
13% {
background-color: rgba(221,187,0,0.2);
}
15% {
background-color: rgba(255,234,119,0.9);
}
28% {
background-color: rgba(255,234,119,0.9);
}
30% {
background-color: rgba(221,187,0,0.2);
}
43% {
background-color: rgba(221,187,0,0.2);
}
45% {
background-color: rgba(255,234,119,0.9);
}
70% {
background-color: rgba(255,234,119,0.9);
}
74% {
background-color: rgba(221,187,0,0.2);
}
100% {
background-color: rgba(255,234,119,0.9);
}
}
@-webkit-keyframes pulse {
0% {
background-color: rgba(221,187,0,0.2);
}
13% {
background-color: rgba(221,187,0,0.2);
}
15% {
background-color: rgba(255,234,119,0.9);
}
28% {
background-color: rgba(255,234,119,0.9);
}
30% {
background-color: rgba(221,187,0,0.2);
}
43% {
background-color: rgba(221,187,0,0.2);
}
45% {
background-color: rgba(255,234,119,0.9);
}
70% {
background-color: rgba(255,234,119,0.9);
}
74% {
background-color: rgba(221,187,0,0.2);
}
100% {
background-color: rgba(255,234,119,0.9);
}
}
@-moz-keyframes pulse {
0% {
background-color: rgba(221,187,0,0.2);
}
13% {
background-color: rgba(221,187,0,0.2);
}
15% {
background-color: rgba(255,234,119,0.9);
}
28% {
background-color: rgba(255,234,119,0.9);
}
30% {
background-color: rgba(221,187,0,0.2);
}
43% {
background-color: rgba(221,187,0,0.2);
}
45% {
background-color: rgba(255,234,119,0.9);
}
70% {
background-color: rgba(255,234,119,0.9);
}
74% {
background-color: rgba(221,187,0,0.2);
}
100% {
background-color: rgba(255,234,119,0.9);
}
}
@keyframes borderPulse {
0% {
box-shadow: 0 0 0 0 rgb(255,255,255), 0 0 0 1px rgba(221,187,0,0.8);
}
40% {
box-shadow: 0 0 0 1px rgb(255,255,255), 0 0 0 2px rgba(221, 187, 0, 0.8);
}
80% {
box-shadow: 0 0 0 3px #FFF, 0 0 1px 3px rgba(221, 187, 0, 0.8);
}
}
@-o-keyframes borderPulse {
0% {
box-shadow: 0 0 0 0 rgb(255,255,255), 0 0 0 1px rgba(221,187,0,0.8);
}
40% {
box-shadow: 0 0 0 1px rgb(255,255,255), 0 0 0 2px rgba(221, 187, 0, 0.8);
}
80% {
box-shadow: 0 0 0 3px #FFF, 0 0 1px 3px rgba(221, 187, 0, 0.8);
}
}
@-ms-keyframes borderPulse {
0% {
box-shadow: 0 0 0 0 rgb(255,255,255), 0 0 0 1px rgba(221,187,0,0.8);
}
40% {
box-shadow: 0 0 0 1px rgb(255,255,255), 0 0 0 2px rgba(221, 187, 0, 0.8);
}
80% {
box-shadow: 0 0 0 3px #FFF, 0 0 1px 3px rgba(221, 187, 0, 0.8);
}
}
@-webkit-keyframes borderPulse {
0% {
box-shadow: 0 0 0 0 rgb(255,255,255), 0 0 0 1px rgba(221,187,0,0.8);
}
40% {
box-shadow: 0 0 0 1px rgb(255,255,255), 0 0 0 2px rgba(221, 187, 0, 0.8);
}
80% {
box-shadow: 0 0 0 3px #FFF, 0 0 1px 3px rgba(221, 187, 0, 0.8);
}
}
@-moz-keyframes borderPulse {
0% {
box-shadow: 0 0 0 0 rgb(255,255,255), 0 0 0 1px rgba(221,187,0,0.8);
}
40% {
box-shadow: 0 0 0 1px rgb(255,255,255), 0 0 0 2px rgba(221, 187, 0, 0.8);
}
80% {
box-shadow: 0 0 0 3px #FFF, 0 0 1px 3px rgba(221, 187, 0, 0.8);
}
}