/* Preloader */
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999999999; 
 background: #fff url(../images/loader.webp) center center no-repeat fixed;
 background-size:cover;
  display:flex;
  align-items:center;
}
.back {
		margin:1em auto;
    font-size: 5pt;
    font-family:"Roboto";
	}
    .back span {
        font-size: 3em;
        color: #666;
        background: #fff;
        display: table-cell;
        box-shadow: inset 0 0 5px rgba(255,255,255,0.3), 0 5px 0 #aeaeab;
        padding: 0 15px;
        line-height: 100px;
        animation: jumb 2s infinite;
    }
	@keyframes jumb {
		0% {
			transform:translateY(0px)
		}
		50% {
			transform:translateY(-30px);
			box-shadow:0 15px 0 #828282999;
		}
		100% {
			transform:translateY(0px)	
		}
	}
	.back span:nth-child(1) {
		animation-delay:0s;
	}
	.back span:nth-child(2) {
		animation-delay:.1s;	
	}
	.back span:nth-child(3) {
		animation-delay:.2s;
	}
	.back span:nth-child(4) {
		animation-delay:.3s;	
	}
	.back span:nth-child(5) {
		animation-delay:.4s;
	}
	.back span:nth-child(6) {
		animation-delay:.5s;	
	}
	.back span:nth-child(7) {
		animation-delay:.6s;
	}
	
	/* Declate color shifting animation */
 @keyframes colorShift {
                0%, 100% {
                    background: linear-gradient(321deg, #f38aa9 , #ffd2df , #f38aa9 , #ffd2df );
                }

                33% {
                    background: #eb0606;
                }

                66% {
                    background: #9f7353;
                }
            }

            /* Declare border pulse animation */
@keyframes borderPulse {
                0% {
                    box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255,.4), 0px 0px 0px 0px rgba(210,177,8,0.7);
                }

                100% {
                    box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255,.2), 0px 0px 0px 10px rgba(255,255,255,0);
                }
            }

            /* CSS */
            
@-webkit-keyframes floatUp {
            0% {
                top: 100vh;
                opacity: 0;
            }

            25% {
                opacity: 1;
            }

            50% {
                top: 0vh;
                opacity: .8;
            }

            75% {
                opacity: 1;
            }

            100% {
                top: -100vh;
                opacity: 0;
            }
        }

        @-moz-keyframes floatUp {
            0% {
                top: 100vh;
                opacity: 0;
            }

            25% {
                opacity: 1;
            }

            50% {
                top: 0vh;
                opacity: .8;
            }

            75% {
                opacity: 1;
            }

            100% {
                top: -100vh;
                opacity: 0;
            }
        }

        @-o-keyframes floatUp {
            0% {
                top: 100vh;
                opacity: 0;
            }

            25% {
                opacity: 1;
            }

            50% {
                top: 0vh;
                opacity: .8;
            }

            75% {
                opacity: 1;
            }

            100% {
                top: -100vh;
                opacity: 0;
            }
        }

        @keyframes floatUp {
            0% {
                top: 100vh;
                opacity: 0;
            }

            25% {
                opacity: 1;
            }

            50% {
                top: 0vh;
                opacity: .8;
            }

            75% {
                opacity: 1;
            }

            100% {
                top: -100vh;
                opacity: 0;
            }
        }
        
         @keyframes nieve {
            from {
                top: -100px;
            }

            to {
                top: 1200px;
            }
        }
        @keyframes copos {
            0% {
                transform: rotate(0deg) translate(0px, 0px);
            }

            100% {
                transform: rotate(720deg) translate(0px, 100px);
            }
        }
        
        /**/
        
        
         /* Here we are adding webkit-animation
        for shooting effect */
              @-webkit-keyframes shooting {
                  0% {
                      -webkit-transform: translateX(0);
                      transform: translateX(0);
                  }

                  100% {
                      -webkit-transform: translateX(270px);
                      transform: translateX(270px);
                  }
              }

              /* Here we make shooting effect */
              @keyframes shooting {
                  0% {
                      -webkit-transform: translateX(0);
                      transform: translateX(0);
                  }

                  100% {
                      -webkit-transform: translateX(270px);
                      transform: translateX(270px);
                  }
              }

	@media only screen and (max-width:600px) 
	{
	    .preloader {
        
         background: #fff url(../images/bg-load.webp) 75% center no-repeat;
         background-size:cover;         
        }
      .preloader img 
      {
        width:100%;
        max-width: 200px;
        text-align:center;
        margin:0px auto;
        position:absolute;
        left:25%;
        top:30%;    
      }
    }