363 lines
8.9 KiB
CSS
363 lines
8.9 KiB
CSS
|
|
body {
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
background-color: #403833;
|
|
font-size: 100%;
|
|
font-family: 'Open Sans';
|
|
font-weight: 100;
|
|
height:100%;
|
|
}
|
|
.loader {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-moz-transform: translate(-50%, -50%);
|
|
-mos-transform: translate(-50%, -50%);
|
|
-o-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
text-align:center;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
cursor:default;
|
|
}
|
|
.loader span{
|
|
position: absolute;
|
|
font-size: 3.5em;
|
|
bottom: 3em;
|
|
left: -1.5em;
|
|
z-index: 5;
|
|
color: #403833;
|
|
}
|
|
.clouds {
|
|
font-size: 100px;
|
|
margin-left: -1.5em;
|
|
width: 2em;
|
|
text-align: center;
|
|
}
|
|
|
|
.cloud {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: .0625em;
|
|
}
|
|
.cloud:before, .cloud:after {
|
|
content: "";
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
.cloud:before {
|
|
-webkit-animation: cloud 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate forwards;
|
|
-moz-animation: cloud 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate forwards;
|
|
-mos-animation: cloud 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate forwards;
|
|
-o-animation: cloud 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate forwards;
|
|
animation: cloud 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate forwards;
|
|
-webkit-transform: translateY(0.5em) scale(0);
|
|
-moz-transform: translateY(0.5em) scale(0);
|
|
-mos-transform: translateY(0.5em) scale(0);
|
|
-o-transform: translateY(0.5em) scale(0);
|
|
transform: translateY(0.5em) scale(0);
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.cloud:after {
|
|
-webkit-animation: cloud-shadow 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate forwards;
|
|
-moz-animation: cloud-shadow 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate forwards;
|
|
-mos-animation: cloud-shadow 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate forwards;
|
|
-o-animation: cloud-shadow 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate forwards;
|
|
animation: cloud-shadow 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate forwards;
|
|
bottom: -.75em;
|
|
width: 1em;
|
|
height: .25em;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
-mos-border-radius: 100%;
|
|
-o-border-radius: 100%;
|
|
border-radius: 100%;
|
|
-webkit-transform: scale(0);
|
|
-moz-transform: scale(0);
|
|
-mos-transform: scale(0);
|
|
-o-transform: scale(0);
|
|
transform: scale(0);
|
|
background-color: #322b27 !important;
|
|
}
|
|
|
|
.cloud:nth-child(1):before, .cloud:nth-child(1):after {
|
|
-webkit-animation-delay: 0s;
|
|
-moz-animation-delay: 0s;
|
|
-mos-animation-delay: 0s;
|
|
-o-animation-delay: 0s;
|
|
animation-delay: 0s;
|
|
background:#DB2F00;
|
|
}
|
|
.cloud:nth-child(2):before, .cloud:nth-child(2):after {
|
|
-webkit-animation-delay: 0.25s;
|
|
-moz-animation-delay: 0.25s;
|
|
-mos-animation-delay: 0.25s;
|
|
-o-animation-delay: 0.25s;
|
|
animation-delay: 0.25s;
|
|
background:#ff6d37;
|
|
}
|
|
.cloud:nth-child(3):before, .cloud:nth-child(3):after {
|
|
-webkit-animation-delay: 0.5s;
|
|
-moz-animation-delay: 0.5s;
|
|
-mos-animation-delay: 0.5s;
|
|
-o-animation-delay: 0.5s;
|
|
animation-delay: 0.5s;
|
|
background:#ffa489;
|
|
}
|
|
.cloud:nth-child(4):before, .cloud:nth-child(4):after {
|
|
-webkit-animation-delay: 0.75s;
|
|
-moz-animation-delay: 0.75s;
|
|
-mos-animation-delay: 0.75s;
|
|
-o-animation-delay: 0.75s;
|
|
animation-delay: 0.75s;
|
|
background:#f2f2f2;
|
|
}
|
|
.cloud:nth-child(5):before, .cloud:nth-child(5):after {
|
|
-webkit-animation-delay: 1s;
|
|
-moz-animation-delay: 1s;
|
|
-mos-animation-delay: 1s;
|
|
-o-animation-delay: 1s;
|
|
animation-delay: 1s;
|
|
background:#99d3d4;
|
|
}
|
|
.cloud:nth-child(6):before, .cloud:nth-child(6):after {
|
|
-webkit-animation-delay: 1.25s;
|
|
-moz-animation-delay: 1.25s;
|
|
-mos-animation-delay: 1.25s;
|
|
-o-animation-delay: 1.25s;
|
|
animation-delay: 1.25s;
|
|
background:#56bebf;
|
|
}
|
|
.cloud:nth-child(7):before, .cloud:nth-child(7):after {
|
|
-webkit-animation-delay: 1.5s;
|
|
-moz-animation-delay: 1.5s;
|
|
-mos-animation-delay: 1.5s;
|
|
-o-animation-delay: 1.5s;
|
|
animation-delay: 1.5s;
|
|
background:#13A3A5;
|
|
}
|
|
.cloud:nth-child(8):before, .cloud:nth-child(8):after {
|
|
-webkit-animation-delay: 1.75s;
|
|
-moz-animation-delay: 1.75s;
|
|
-mos-animation-delay: 1.75s;
|
|
-o-animation-delay: 1.75s;
|
|
animation-delay: 1.75s;
|
|
}
|
|
.cloud:nth-child(9):before, .cloud:nth-child(9):after {
|
|
-webkit-animation-delay: 2s;
|
|
-moz-animation-delay: 2s;
|
|
-mos-animation-delay: 2s;
|
|
-o-animation-delay: 2s;
|
|
animation-delay: 2s;
|
|
}
|
|
.cloud:nth-child(10):before, .cloud:nth-child(10):after {
|
|
-webkit-animation-delay: 2.25s;
|
|
-moz-animation-delay: 2.25s;
|
|
-mos-animation-delay: 2.25s;
|
|
-o-animation-delay: 2.25s;
|
|
animation-delay: 2.25s;
|
|
}
|
|
.cloud:nth-child(11):before, .cloud:nth-child(11):after {
|
|
-webkit-animation-delay: 2.5s;
|
|
-moz-animation-delay: 2.5s;
|
|
-mos-animation-delay: 2.5s;
|
|
-o-animation-delay: 2.5s;
|
|
animation-delay: 2.5s;
|
|
}
|
|
.cloud:nth-child(12):before, .cloud:nth-child(12):after {
|
|
-webkit-animation-delay: 2.75s;
|
|
-moz-animation-delay: 2.75s;
|
|
-mos-animation-delay: 2.75s;
|
|
-o-animation-delay: 2.75s;
|
|
animation-delay: 2.75s;
|
|
}
|
|
.cloud:nth-child(13):before, .cloud:nth-child(13):after {
|
|
-webkit-animation-delay: 3s;
|
|
-moz-animation-delay: 3s;
|
|
-mos-animation-delay: 3s;
|
|
-o-animation-delay: 3s;
|
|
animation-delay: 3s;
|
|
}
|
|
.cloud:nth-child(14):before, .cloud:nth-child(14):after {
|
|
-webkit-animation-delay: 3.25s;
|
|
-moz-animation-delay: 3.25s;
|
|
-mos-animation-delay: 3.25s;
|
|
-o-animation-delay: 3.25s;
|
|
animation-delay: 3.25s;
|
|
}
|
|
.cloud:nth-child(15):before, .cloud:nth-child(15):after {
|
|
-webkit-animation-delay: 3.5s;
|
|
-moz-animation-delay: 3.5s;
|
|
-mos-animation-delay: 3.5s;
|
|
-o-animation-delay: 3.5s;
|
|
animation-delay: 3.5s;
|
|
}
|
|
.cloud:nth-child(16):before, .cloud:nth-child(16):after {
|
|
-webkit-animation-delay: 3.75s;
|
|
-moz-animation-delay: 3.75s;
|
|
-mos-animation-delay: 3.75s;
|
|
-o-animation-delay: 3.75s;
|
|
animation-delay: 3.75s;
|
|
}
|
|
.cloud:nth-child(17):before, .cloud:nth-child(17):after {
|
|
-webkit-animation-delay: 4s;
|
|
-moz-animation-delay: 4s;
|
|
-mos-animation-delay: 4s;
|
|
-o-animation-delay: 4s;
|
|
animation-delay: 4s;
|
|
}
|
|
.cloud:nth-child(18):before, .cloud:nth-child(18):after {
|
|
-webkit-animation-delay: 4.25s;
|
|
-moz-animation-delay: 4.25s;
|
|
-mos-animation-delay: 4.25s;
|
|
-o-animation-delay: 4.25s;
|
|
animation-delay: 4.25s;
|
|
}
|
|
.cloud:nth-child(19):before, .cloud:nth-child(19):after {
|
|
-webkit-animation-delay: 4.5s;
|
|
-moz-animation-delay: 4.5s;
|
|
-mos-animation-delay: 4.5s;
|
|
-o-animation-delay: 4.5s;
|
|
animation-delay: 4.5s;
|
|
}
|
|
.cloud:nth-child(20):before, .cloud:nth-child(20):after {
|
|
-webkit-animation-delay: 4.75s;
|
|
-moz-animation-delay: 4.75s;
|
|
-mos-animation-delay: 4.75s;
|
|
-o-animation-delay: 4.75s;
|
|
animation-delay: 4.75s;
|
|
}
|
|
.cloud:nth-child(21):before, .cloud:nth-child(21):after {
|
|
-webkit-animation-delay: 5s;
|
|
-moz-animation-delay: 5s;
|
|
-mos-animation-delay: 5s;
|
|
-o-animation-delay: 5s;
|
|
animation-delay: 5s;
|
|
}
|
|
.cloud:nth-child(22):before, .cloud:nth-child(22):after {
|
|
-webkit-animation-delay: 5.25s;
|
|
-moz-animation-delay: 5.25s;
|
|
-mos-animation-delay: 5.25s;
|
|
-o-animation-delay: 5.25s;
|
|
animation-delay: 5.25s;
|
|
}
|
|
.cloud:nth-child(23):before, .cloud:nth-child(23):after {
|
|
-webkit-animation-delay: 5.5s;
|
|
-moz-animation-delay: 5.5s;
|
|
-mos-animation-delay: 5.5s;
|
|
-o-animation-delay: 5.5s;
|
|
animation-delay: 5.5s;
|
|
}
|
|
.cloud:nth-child(24):before, .cloud:nth-child(24):after {
|
|
-webkit-animation-delay: 5.75s;
|
|
-moz-animation-delay: 5.75s;
|
|
-mos-animation-delay: 5.75s;
|
|
-o-animation-delay: 5.75s;
|
|
animation-delay: 5.75s;
|
|
}
|
|
|
|
@-webkit-keyframes cloud {
|
|
50% {
|
|
-webkit-transform: translateY(0.5em) scale(0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
@-webkit-keyframes cloud-shadow {
|
|
50% {
|
|
-webkit-transform: scale(0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(0.75);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes cloud {
|
|
50% {
|
|
-moz-transform: translateY(0.5em) scale(0);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes cloud-shadow {
|
|
50% {
|
|
-moz-transform: scale(0);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: scale(0.75);
|
|
}
|
|
}
|
|
|
|
@-mos-keyframes cloud {
|
|
50% {
|
|
-mos-transform: translateY(0.5em) scale(0);
|
|
}
|
|
|
|
100% {
|
|
-mos-transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@-mos-keyframes cloud-shadow {
|
|
50% {
|
|
-mos-transform: scale(0);
|
|
}
|
|
|
|
100% {
|
|
-mos-transform: scale(0.75);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes cloud {
|
|
50% {
|
|
-o-transform: translateY(0.5em) scale(0);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
@-o-keyframes cloud-shadow {
|
|
50% {
|
|
-o-transform: scale(0);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: scale(0.75);
|
|
}
|
|
}
|
|
|
|
@keyframes cloud {
|
|
50% {
|
|
transform: translateY(0.5em) scale(0);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
@keyframes cloud-shadow {
|
|
50% {
|
|
transform: scale(0);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0.75);
|
|
}
|
|
}
|