//>>>>> Video Animation Start <<<<<//
@-webkit-keyframes rippleOne {
    70% {
        -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
        box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
        box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
    }
}

@keyframes rippleOne {
    70% {
        -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
        box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
        box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
    }
}
//>>>>> Video Animation End <<<<<//

//>>>>> Progressbar Animation Start <<<<<//
@keyframes toggle {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
  }
  
  @-webkit-keyframes moveCursor1 {
  from {
	  -webkit-transform: scale(1);
			  transform: scale(1);
  }
  to {
	  -webkit-transform: scale(0.8);
			  transform: scale(0.8);
  }
  }
  
  @keyframes moveCursor1 {
  from {
	  -webkit-transform: scale(1);
			  transform: scale(1);
  }
  to {
	  -webkit-transform: scale(0.8);
			  transform: scale(0.8);
  }
  }
  
  @-webkit-keyframes moveCursor2 {
  0% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
  }
  50% {
	  -webkit-transform: scale(1.5);
			  transform: scale(1.5);
  }
  100% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  opacity: 0;
  }
  }
  
  @keyframes moveCursor2 {
  0% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
  }
  50% {
	  -webkit-transform: scale(1.5);
			  transform: scale(1.5);
  }
  100% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  opacity: 0;
  }
  }
//>>>>> Progressbar Animation End <<<<<//

//>>>>> Circle Animation Start <<<<<//
@keyframes cir36 {
    100%{
        transform: rotate(360deg);
    }
}

@keyframes rounded {
    50%{
        transform: rotate(15deg);
    }
}

//>>>>> Circle Animation End <<<<<//

// Animation rotate area start here ***
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.animation__rotate {
	animation: rotate 40s linear infinite;
}
@keyframes rotateY {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}
.animation__rotateY {
	animation: rotateY 40s linear infinite;
}
// Animation rotate area end here ***

//animation
@keyframes rounded {
    50%{
        transform: rotate(30deg);
    }
}

@keyframes handed {
	100% {
		transform: rotate(-360deg);
	}
}

@keyframes right-image-bounce {
    0% {
      transform: translateX(8px);
    }
    50% {
      transform: translateX(-12px);
    }
    100% {
      transform: translateX(8px);
    }
}

@keyframes top-image-bounce {
    0% {
      transform: translateY(8px);
    }
    50% {
      transform: translateY(-12px);
    }
    100% {
      transform: translateY(8px);
    }
}

@-webkit-keyframes scale-up-one {
	0%   {-webkit-transform: scale(1);transform: scale(1);}
	40%  {-webkit-transform: scale(0.8);transform: scale(0.8);}
	100% {-webkit-transform: scale(1);transform: scale(1);}
  }
  @keyframes scale-up-one {
	0%   {-webkit-transform: scale(1);transform: scale(1);}
	40%  {-webkit-transform: scale(0.8);transform: scale(0.8);}
	100% {-webkit-transform: scale(1);transform: scale(1);}
  }

  //>>>>> Preloader Animation Start <<<<<//
 @-webkit-keyframes spinner {
	to {
		-webkit-transform: rotateZ(360deg);
		transform: rotateZ(360deg);
	}
}

@keyframes spinner {
	to {
		-webkit-transform: rotateZ(360deg);
		transform: rotateZ(360deg);
	}
}

@-webkit-keyframes letters-loading {
	0%,
	75%,
	100% {
		opacity: 0;
		transform: rotateY(-90deg);
	}
	25%,
	50% {
		opacity: 1;
		transform: rotateY(0deg);
	}
}

@keyframes letters-loading {
	0%,
	75%,
	100% {
		opacity: 0;
		transform: rotateY(-90deg);
	}
	25%,
	50% {
		opacity: 1;
		transform: rotateY(0deg);
	}
}

//>>>>> Preloader Animation Start <<<<<//
@keyframes loaderspin {
	0% {
	  transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
	  transform: translate(-50%, -50%) rotate(360deg);
	}
}


@keyframes tpswing{
	0% {
    -webkit-transform: rotate(20deg);
    -ms-transform:rotate(20deg);
    transform: rotate(20deg);
	}
    100% { 
      -webkit-transform: rotate(0deg);
      -ms-transform:rotate(0deg);
      transform: rotate(0deg);
	}
}


@keyframes width {
	0% {
	  width: 0%;
	}
	100% {
	  width: 100%;
	}
}

@-webkit-keyframes width {
	0% {
		width: 0%;
	  }
	  100% {
		width: 100%;
	}
}

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

@keyframes loaderpulse {
0% {
	transform: scale(1);
}
100% {
	transform: scale(1.2);
}
}
//>>>>> Preloader Animation End <<<<<//
.float-bob-y {
    -webkit-animation-name: float-bob-y;
    animation-name: float-bob-y;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes float-bob-y {
    0% {
        transform: translateY(-30px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(-30px);
    }
}

@keyframes float-bob-y {
    0% {
        transform: translateY(-30px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(-30px);
    }
}

.float-bob-x {
	-webkit-animation-name: float-bob-x;
	animation-name: float-bob-x;
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}
  
  @-webkit-keyframes float-bob-x {
	0% {
	  -webkit-transform: translateX(-0px);
	  transform: translateX(30px);
	}
	50% {
	  -webkit-transform: translateX(10px);
	  transform: translateX(10px);
	}
	100% {
	  -webkit-transform: translateX(30px);
	  transform: translateX(30px);
	}
}

  @keyframes float-bob-x {
	0% {
	  -webkit-transform: translateX(30px);
	  transform: translateX(30px);
	}
	50% {
	  -webkit-transform: translateX(10px);
	  transform: translateX(10px);
	}
	100% {
	  -webkit-transform: translateX(30px);
	  transform: translateX(30px);
	}
}

@keyframes bounce-x {
	0% {
	  -webkit-transform: translateX(0);
			  transform: translateX(0);
	}
	50% {
	  -webkit-transform: translateX(30px);
			  transform: translateX(30px);
	}
	100% {
	  -webkit-transform: translateX(0);
			  transform: translateX(0);
	}
}

.bounce-x {
	-webkit-animation: bounce-x 7s infinite linear;
	animation: bounce-x 7s infinite linear;
}

@-webkit-keyframes video-animation {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.5);
	}
	100% {
		opacity: 0;
		transform: scale(2);
	}
}
@keyframes video-animation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      opacity: 0;
      transform: scale(2);
	 } 
}