/* animations */
.flier {
	width: 643px;
	height: 556px;
	pointer-events: none;
	background: url(../img/login_image_2.png);
	background-size: 643px 556px;
}

.flier > * {
/* Adjust animation duration to change the element’s speed */
    --animation: fly 50s linear infinite;
    pointer-events: none !important;
	--top: 0;
	--left: 0;
	--transform: translateX(-120%) translateY(-120%) rotateZ(0);
	position: fixed;
	--animation-delay: 1s;
	z-index: 999999;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes fly {

	98.001%, 0% {
        display: block;
		transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
	}

	15% {
		transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
	}

	15.001%, 18% {
		transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
	}

	40% {
		transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
	}

	40.001%, 43% {
		transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
	}

	65% {
		transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
	}

	65.001%, 68% {
		transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
	}

	95% {
		transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
	}
}


.ani-1 {
	animation: rotate-1 1s linear infinite;
	transform-origin: bottom left;
}

.ani-2 {
	animation: rotate-2 1s linear infinite;
	transform-origin: bottom right;
}

@keyframes rotate-1 {
	98.001%, 0% { transform: rotateZ(0deg) }
	33% { transform: rotateZ(10deg) }
	66% { transform: rotateZ(-10deg) }
}

@keyframes rotate-2 {
	98.001%, 0% { transform: rotateZ(0deg) }
	33% { transform: rotateZ(-10deg) }
	66% { transform: rotateZ(10deg) }
}

.ani-3 {
	animation: updown 1s linear infinite;
}

@keyframes updown {
	98.001%, 0% { transform: translateY(0px) }
	33% { transform: translateY(-10px) }
	66% { transform: translateY(10px) }
}

.ani-4 {
	animation: leftright 1s linear infinite;
}

@keyframes leftright {
	98.001%, 0% { transform: translateX(0px) }
	33% { transform: translateX(-10px) }
	66% { transform: translateX(10px) }
}

.ani-5 {
	animation: around 1s linear infinite;
}

.ani-6 {
	animation: around 1s linear infinite;
	animation-direction: alternate;
}

@keyframes around {
	from { 	transform: rotate(0deg) translateX(15px) rotate(0deg); }
	to   {  transform: rotate(360deg) translateX(15px) rotate(-360deg); }	
/*
	98.001%, 0% { transform: translateX(0px) translateY(10px) }
	25% { transform: translateX(-10px) translateY(0px)}
	50% { transform: translateX(10px) translateY(0px)}
	75% { transform: translateX(10px) translateY(0px)}
*/	
}

.ani-7 {
	animation: haround 1s linear infinite;
	animation-direction: alternate;
}

@keyframes haround {
	from { 	transform: rotate(0deg) translateX(15px) rotate(0deg); }
	to   {  transform: rotate(180deg) translateX(15px) rotate(-180deg); }	
}



#icon_email {
    width: 36px;
    height: 27.8px;
    position: absolute;
    left: 302px;
    top: 168.3px;
    --fill: #5481D8;
    --background: #5481D8;
    transform: scaleX(-1);
}