h1.loader {
  text-align: center;
  text-transform: uppercase;
  font-family: 'Nunito', sans-serif;
  font-size: 2.6875em;
  color: transparent;
  letter-spacing: 0.01em;
}

.loader span {
  text-shadow: 0 0 2px rgba(204, 208, 212, 0.9), 0 15px 25px rgba(0, 0, 0, 0.3), 0 -2px 3px rgba(0, 0, 0, 0.1), 0 -5px 10px rgba(255, 255, 255, 0.5), 0 5px 10px rgba(0, 0, 0, 0.3), 0 3px 4px rgba(255, 255,255, 0.2),
    0 0 20px rgba(255, 255, 255, 0.45);
  
    animation: loading 5.85s ease-in-out infinite alternate;
}

@keyframes loading {
	to {text-shadow:
    0 0 2px rgba(204, 208, 212,0.2),
    0 0 3px rgba(0, 0, 0, 0.02),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(255, 255, 255, 0),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(255, 255, 255, 0),
    0 0 0 rgba(255, 255, 255, 0);}
}

.loader span:nth-child(2) {
  animation-delay:0.15s;
}

.loader span:nth-child(3) {
  animation-delay:0.15s;
}

.loader span:nth-child(4) {
  animation-delay:0.15s;
}

.loader span:nth-child(5) {
  animation-delay:0.15s;
}

.loader span:nth-child(6) {
  animation-delay:0.15s;
}

.loader span:nth-child(7) {
  animation-delay:0.15s;
}



section .inner div {
    opacity: 0;
    -webkit-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    transform-origin: 0px 0px;
    -webkit-animation-name: Drop;
    animation-name: Drop;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}


#sakura .inner div {
    position: absolute;
    display: block;
    width: 20px;
    height: 21px;
    background: url("../img/hosi.png") no-repeat;
}
 
#sakura .inner div.flake2,
#sakura .inner div.flake4,
#sakura .inner div.flake6,
#sakura .inner div.flake8 {
    background-size: 5px 6px !important;
}


.flake1 {
    left: 20%;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
}
 
.flake2 {
    left: 10%;
    -webkit-animation-duration: 2.7s;
    animation-duration: 2.7s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
 
.flake3 {
    left: 30%;
    -webkit-animation-duration: 2.9s;
    animation-duration: 2.9s;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
 
.flake4 {
    left: 40%;
    -webkit-animation-duration: 2.4s;
    animation-duration: 2.4s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
 
.flake5 {
    left: 60%;
    -webkit-animation-duration: 2.4s;
    animation-duration: 2.4s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
 
.flake6 {
    left: 70%;
    -webkit-animation-duration: 2.2s;
    animation-duration: 2.2s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
 
.flake7 {
    left: 80%;
    -webkit-animation-duration: 2.7s;
    animation-duration: 2.7s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
 
.flake8 {
    left: 90%;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}

@-webkit-keyframes Drop {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 0;
    }
 
    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 1;
    }
 
    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0.3;
    }
}
 
@keyframes Drop {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 0;
    }
 
    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 1;
    }
 
    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0.3;
    }
}


#snow .inner div {
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    background: #fff;
}