/* bounce down */

.blink{
  background-color: rgb(3, 112, 171);
  padding: 12px 40px;  
  text-align: center;
  animation: blink 3.5s linear infinite;
  border-radius: 10px;
}

@keyframes blink {
0%{background-color: rgb(3, 112, 171);}
50%{background-color: white;}
100%{background-color: rgb(3, 112, 171);}
}

.blink_me {
animation: blinker 1s linear infinite;
}

@keyframes blinker {
50% {
opacity: 0;
}
}

.bounce-out-down1 {
	animation: bounce-out-down 1s ease;
	animation-delay: 1s;
  }

  .bounce-out-down2 {
	animation: bounce-out-down 1.4s ease;
	animation-delay: 1.4s;
  }
  .bounce-out-down3 {
	animation: bounce-out-down 1.7s ease;
	animation-delay: 1.7s;
  }
  .bounce-out-down4 {
	animation: bounce-out-down 2s ease;
	animation-delay: 2s;
  }
  @keyframes bounce-out-down {
	0% { margin-top: -1200px; }
	20% {
	  opacity: 0.5;
	  margin-top: -700px;
	}
	90% {
	  opacity: 1;
	  margin-top: 0px;
	}
	95% {
		opacity: 1;
		margin-top: -25px;
	  }
	  96% {
		opacity: 1;
		margin-top: -20px;
	  }
	  97% {
		opacity: 1;
		margin-top: -15px;
	  }
	  98% {
		opacity: 1;
		margin-top: -10px;
	  }
	  99% {
		opacity: 1;
		margin-top: -5px;
	  }
	  100% {
		opacity: 1;
		margin-top: 0px;
	  }
  }

  /* bounce down end */

  /* bounce from right */
  .bounce-in-right {
    animation: bounce-in-right 5.5s ease;
  }
  @keyframes bounce-in-right {
    0% {
      opacity: 0;
      transform: translateX(2000px);
    }
    60% {
      opacity: 1;
      transform: translateX(-30px);
    }
    80% { transform: translateX(10px); }
    100% { transform: translateX(0); }
  }

  /* bounce from right end*/
  
  /* from left */
  .bounce-in-left {
    animation: bounce-in-left 2s ease;
  }
  @keyframes bounce-in-left {
    0% {
      opacity: 0;
      transform: translateX(-2000px);
    }
    60% {
      opacity: 1;
      transform: translateX(-30px);
    }
    80% { transform: translateX(10px); }
    100% { transform: translateX(0); }
  }
  /* from left end */
  /* bounce-titter */
  .animated { 
    -webkit-animation-duration: 5s;
    animation-duration: 5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both;
    animation-delay: 3s; 
  }
  
  @-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-60px);} 
    60% {-webkit-transform: translateY(-30px);} 
  } 
  
  @keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
  }
  
  .bounce { 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
  }
  
  
  @-webkit-keyframes bounce2 { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(60px);} 
    60% {-webkit-transform: translateY(30px);} 
  } 
  
  @keyframes bounce2 { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(30px);} 
    60% {transform: translateY(15px);} 
  }
  
  .bounce2 { 
    -webkit-animation-name: bounce2; 
    animation-name: bounce2; 
  }

  /* bounce-titter end*/

  /* loader 1 */

  .loader {
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: #fff;
  }
    .loader:before,
    .loader:after {
      content: '';
      display: block;
      position: absolute;
      top: 12%;
      left: 16%;
      width: inherit;
      height: inherit;
      border-radius: 50%;
      transform: rotateX(70deg);
      animation: 1s spin linear infinite;
    }
    .loader:after {
      color: #FF3D00;
      transform: rotateY(70deg);
      animation-delay: .4s;
    }

  @keyframes rotate {
    0% {
      transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotateZ(360deg);
    }
  }

  @keyframes rotateccw {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }

  @keyframes spin {
    0%,
    100% {
      box-shadow: .2em 0px 0 0px currentcolor;
    }
    12% {
      box-shadow: .2em .2em 0 0 currentcolor;
    }
    25% {
      box-shadow: 0 .2em 0 0px currentcolor;
    }
    37% {
      box-shadow: -.2em .2em 0 0 currentcolor;
    }
    50% {
      box-shadow: -.2em 0 0 0 currentcolor;
    }
    62% {
      box-shadow: -.2em -.2em 0 0 currentcolor;
    }
    75% {
      box-shadow: 0px -.2em 0 0 currentcolor;
    }
    87% {
      box-shadow: .2em -.2em 0 0 currentcolor;
    }
  }


  /* loader 1 end */

  /* loader 2 */

  .loader2 {
    width: 48px;
    height: 48px;
    position: relative;
  }
  .loader2::before , .loader2::after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    width: 48em;
    height: 48em;
    background-image:
      radial-gradient(circle 10px, #FFF 100%, transparent 0),
      radial-gradient(circle 10px, #FFF 100%, transparent 0),
      radial-gradient(circle 10px, #FFF 100%, transparent 0),
      radial-gradient(circle 10px, #FFF 100%, transparent 0),
      radial-gradient(circle 10px, #FFF 100%, transparent 0),
      radial-gradient(circle 10px, #FFF 100%, transparent 0),
      radial-gradient(circle 10px, #FFF 100%, transparent 0),
      radial-gradient(circle 10px, #FFF 100%, transparent 0);
    background-position: 0em -18em, 0em 18em, 18em 0em, -18em 0em,
                         13em -13em, -13em -13em, 13em 13em, -13em 13em;
      background-repeat: no-repeat;
    font-size: 0.5px;
    border-radius: 50%;
    animation: blast 1s ease-in infinite;
  }
  .loader2::after {
    font-size: 1px;
    background: #fff;
    animation: bounce 1s ease-in infinite;
  }
  
  @keyframes bounce {
    0% , 100%{ font-size: 0.75px }
    50% { font-size: 1.5px }
  }
  @keyframes blast {
    0% , 40% {
      font-size: 0.5px;
    }
    70% {
      opacity: 1;
      font-size: 4px;
    }
     100% {
       font-size: 6px;
      opacity: 0;
    }
  }

  /* loader 2 end */

  /*loader 3 */

  .loader3 {
    position: relative;
    width: 64px;
    height: 60px;
  }
  .loader3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: #e5f4fe;
    width: 64px;
    height: 32px;
    border-radius: 0 0 50px 50px;
    animation: move 0.5s linear infinite alternate;
  }
  .loader3::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -38px;
    background: #FF3D00;
    width: 24px;
    height: 24px;
    transform: translateX(-50%) rotate(0deg);
    animation: rotate 2s linear infinite;
  }
  
  @keyframes rotate {
    100% { transform: translateX(-50%) rotate(360deg)}
  }
  @keyframes move {
    0% { transform: rotate(10deg)}
    100% { transform: rotate(-10deg)}
  }
        

  /* loader 3 end */