﻿.flyaway {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
.float {
    animation: float 2s infinite ease-in-out alternate;
}
.nav .shadow{left:0;top:0;}
@-webkit-keyframes float {
    from,
    to {
        transform: transofrmY(0);
    }
    50% {
        transform: translateY(6px);
    }
}


@keyframes float {
    from,
    to {
        transform: transofrmY(0);
    }
    50% {
        transform: translateY(8px);
    }
}

@-webkit-keyframes pushOut{
	
	
	0%{-webkit-transform:translate(0,0) rotate(0) scale(0);transform:translate(0,0) rotate(0) scale(0)}
	5%{-webkit-transform:translate(15px,-100px) rotate(10deg) scale(1.2);transform:translate(15px,-100px) rotate(10deg) scale(1.2)}
	20%{-webkit-transform:translate(330px,-200px) rotate(-20deg) scale(1.5);transform:translate(330px,-200px) rotate(-20deg) scale(1.5)}
	40%{-webkit-transform:translate(280px,-300px) rotate(10deg) scale(.8);transform:translate(280px,-300px) rotate(10deg) scale(.8);opacity:.8}
	100%{-webkit-transform:translate(1000px,-400px) rotate(60deg) scale(0);transform:translate(1000px,-400px) rotate(60deg) scale(0);opacity:1}
	
	}



@-webkit-keyframes popUp {
	0% {
		-webkit-transform: translate(0,0) scale(1);
		transform: translate(0,0) scale(1)
	}

	10% {
		-webkit-transform: translate(-10px,10px) scale(1);
		transform: translate(-10px,10px) scale(1)
	}

	50% {
		-webkit-transform: translate(-15px,15px) scale(1);
		transform: translate(-15px,15px) scale(1);
		opacity: 1
	}

	
	

	100% {
		-webkit-transform: translate(500px,-500px) scale(0);
		transform: translate(500px,-500px) scale(0);
		opacity: 0
	}
}

@keyframes popUp {
	0% {
		-webkit-transform: translate(0,0) scale(1);
		transform: translate(0,0) scale(1)
	}

	10% {
		-webkit-transform: translate(-10px,10px) scale(1);
		transform: translate(-10px,10px) scale(1)
	}

	50% {
		-webkit-transform: translate(-15px,15px) scale(1);
		transform: translate(-15px,15px) scale(1);
		opacity: 1
	}

	100% {
		-webkit-transform: translate(500px,-500px) scale(0);
		transform: translate(500px,-500px) scale(0);
		opacity: 0
	}
}

.flyaway.pushOut {
	-webkit-animation-name: pushOut;
	animation-name: pushOut;
	-webkit-animation-timing-function: linear;
	animation-timing-function: lienar;
	animation-duration:2s;
	-webkit-animation-duration:2s; 

}

.flyaway.popUp {
	-webkit-animation-name: popUp;
	animation-name: popUp;
		animation-duration:1.2s;
	-webkit-animation-duration:1.2s; 
}

.flyaway.rotateShake {
	-webkit-animation-name: rotateShake;
	animation-name: rotateShake
}

.flyaway.linearShake {
	-webkit-animation-name: linearShake;
	animation-name: linearShake
}

@-webkit-keyframes linearShake {
	10%,20%,30%,40%,50%,60%,70%,80%,90%,from,to {
		-webkit-transform: translateX(-4px);
		transform: translateX(-4px)
	}

	15%,25%,35%,45%,5%,55%,65%,75%,85%,95% {
		-webkit-transform: translateX(4px);
		transform: translateX(4px)
	}
}

@keyframes linearShake {
	10%,20%,30%,40%,50%,60%,70%,80%,90%,from,to {
		-webkit-transform: translateX(-4px);
		transform: translateX(-4px)
	}

	15%,25%,35%,45%,5%,55%,65%,75%,85%,95% {
		-webkit-transform: translateX(4px);
		transform: translateX(4px)
	}
}

@-webkit-keyframes rotateShake {
	10%,20%,30%,40%,50%,60%,70%,80%,90%,from,to {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}

	15%,25%,35%,45%,5%,55%,65%,75%,85%,95% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg)
	}
}

@keyframes rotateShake {
	10%,20%,30%,40%,50%,60%,70%,80%,90%,from,to {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}

	15%,25%,35%,45%,5%,55%,65%,75%,85%,95% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg)
	}
}