/*# sourceMappingURL=image.css.map */

.react-image {
	position: relative;
	width: 100%;
	height: 100%;
}

.react-image.yes .veritcal {
	animation-name: veritcal;
	animation-timing-function: linear;
	animation-duration: 12s;
	animation-iteration-count: infinite;
}

@keyframes veritcal {
	0% {
		transform: translate3d(0, 0, 0);
	}
	
	50% {
		transform: translate3d(0, 30px, 0);
	}
	
	100% {
		transform: translate3d(0, 0, 0);
	}
}

.react-image.yes .veritcal_two {
	animation-name: veritcal_two;
	animation-timing-function: linear;
	animation-duration: 12s;
	animation-iteration-count: infinite;
}

@keyframes veritcal_two {
	0% {
		transform: translateY(100px);
	}
	
	50% {
		transform: translateY(0);
	}
	
	100% {
		transform: translateY(100px);
	}
}

.react-image.yes .horizontal {
	animation-name: horizontal;
	animation-timing-function: linear;
	animation-duration: 12s;
	animation-iteration-count: infinite;
}

@keyframes horizontal {
	0% {
		transform: translateX(0);
	}
	
	50% {
		transform: translateX(100px);
	}
	
	100% {
		transform: translateX(0);
	}
}

.react-image.yes .rotated_style {
	animation: rotate1 30s linear infinite;
	-webkit-animation: rotate1 30s linear infinite;
}

@keyframes rotate1 {
	from {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	
	to {
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
	}
}

.image-rotate {
	animation: rotation infinite 14s linear;
}

/* Rotation frame*/
@keyframes rotation {
	to {
		transform: rotate(360deg);
	}
}