/**
* @package   Dispatch App
* @version   1.0.0
* @copyright 2014. Styled by Silviu B.
*
* The animations stylesheet for he Dispatch App.
* This file holds most of the styles we're going to use for the app and works in conjunction with "styles.css" and "responsive.css" stylesheets. 
*/



/*////////////////////////////////////////////////////////////
@Keyframes for the logo appearance                            
////////////////////////////////////////////////////////////*/

@keyframes logoAppear {
	0%   {margin-top:30%; opacity:0;}
	40%  {margin-top:30%; opacity:1;}
	80%  {margin-top:30%; opacity:1;}
	83%  {margin-top:33%; opacity:1;}
	100% {margin-top:10px; opacity:1;}
}

@-webkit-keyframes logoAppear {
	0%   {margin-top:30%; opacity:0;}
	40%  {margin-top:30%; opacity:1;}
	80%  {margin-top:30%; opacity:1;}
	83%  {margin-top:33%; opacity:1;}
	100% {margin-top:10px; opacity:1;}
}


/*////////////////////////////////////////////////////////////
@Keyframes                                
////////////////////////////////////////////////////////////*/

/* Slide Up and Fade In */
@keyframes slideUpFadeIn {
	  0% {top:150px; opacity:0;}
	 80% {top:0px; opacity:0.8;}
	100% {top:0px; opacity:1;}
}
@-webkit-keyframes slideUpFadeIn {
	  0% {top:150px; opacity:0;}
	 80% {top:0px; opacity:0.8;}
	100% {top:0px; opacity:1;}
}


/* Slide Up SHORT and Fade In */
@keyframes slideUpShortFadeIn {
	  0% {top:50px; opacity:0;}
	 80% {top:0px; opacity:0.8;}
	100% {top:0px; opacity:1;}
}
@-webkit-keyframes slideUpShortFadeIn {
	  0% {top:50px; opacity:0;}
	 80% {top:0px; opacity:0.8;}
	100% {top:0px; opacity:1;}
}


/* Slide From Right And Fade In */
@keyframes slideFromRightFadeIn {
	  0% {right:-150px; opacity:0;}
	 80% {right:0px; opacity:0.8;}
	100% {right:0px; opacity:1;}
}
@-webkit-keyframes slideFromRightFadeIn {
	  0% {right:-150px; opacity:0;}
	 80% {right:0px; opacity:0.8;}
	100% {right:0px; opacity:1;}
}


/* Slide From Left And Fade In */
@keyframes slideFromLeftFadeIn {
	  0% {right:150px; opacity:0;}
	 80% {right:0px; opacity:0.8;}
	100% {right:0px; opacity:1;}
}
@-webkit-keyframes slideFromLeftFadeIn {
	  0% {right:150px; opacity:0;}
	 80% {right:0px; opacity:0.8;}
	100% {right:0px; opacity:1;}
}


/* Slide To Right And Fade Out */
@keyframes slideToRightFadeOut {
	  0% {right:0px; opacity:1;}
	 20% {right:0px; opacity:0.8;}
	100% {right:-150px; opacity:0;}
}
@-webkit-keyframes slideToRightFadeOut {
	  0% {right:0px; opacity:1;}
	 20% {right:0px; opacity:0.8;}
	100% {right:-150px; opacity:0;}
}


/* Slide To Left And Fade Out */
@keyframes slideToLeftFadeOut {
	  0% {right:0px; opacity:1;}
	 20% {right:0px; opacity:0.8;}
	100% {right:150px; opacity:0;}
}
@-webkit-keyframes slideToLeftFadeOut {
	  0% {right:0px; opacity:1;}
	 20% {right:0px; opacity:0.8;}
	100% {right:150px; opacity:0;}
}


/* Just Fade Out */
@keyframes thisFadeOut {
	  0% {opacity:1;}
	100% {opacity:0;}
}
@-webkit-keyframes thisFadeOut {
	  0% {opacity:1;}
	100% {opacity:0;}
}


/* Spin This */
@keyframes spin {
	  0% {transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg);}
	100% {transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin {
	  0% {transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg);}
	100% {transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg);}
}


/* Unspin This */
@keyframes unspin {
	  0% {transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg);}
	100% {transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg);}
}
@-webkit-keyframes unspin {
	  0% {transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg);}
	100% {transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg);}
}