/*
==============================================
CSS3 ANIMATION CHEAT SHEET
==============================================

Made by Justin Aguilar

www.justinaguilar.com/animations/

Questions, comments, concerns, love letters:
justin@justinaguilar.com
==============================================
*/


/* ======================

modiefied by Kamila Kisiel

====================== */


/*

@keyframes rotating {
    0% {transform: rotate(0deg); width: 0%}
    90% {transform: rotate(725deg); width: 100%}
    100% {transform: rotate(720deg); width: 100%}
}

@-webkit-keyframes rotating {
    0% {-webkit-transform: rotate(0deg); width: 0%}
    90% {-webkit-transform: rotate(725deg); width: 100%}
    100% {-webkit-transform: rotate(720deg); width: 100%}
}



#intro-stamp{
    
    animation-name: rotating;
    -webkit-animation-name: rotating;
    
    animation-duration: 4s;
    -webkit-animation-duration: 4s;
    
    
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
}

*/



/*
==============================================
expandUp
==============================================
*/


/*

#intro-logo{
	animation-name: expandUp;
	-webkit-animation-name: expandUp;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	
    
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
    
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards;

	visibility: visible !important;	
}

@keyframes expandUp {
	0% {transform: translateY(100%) scale(0.6) scaleY(0.5); width:0%;}
	60%{transform: translateY(-7%) scaleY(1.12);}
	75%{transform: translateY(3%);}	
	100% {transform: translateY(0%) scale(1) scaleY(1); width:100%;}	
}

@-webkit-keyframes expandUp {
	0% {-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); width:0%;}
	60%{-webkit-transform: translateY(-7%) scaleY(1.12);}
	75%{-webkit-transform: translateY(3%);}	
	100% {-webkit-transform: translateY(0%) scale(1) scaleY(1); width:100%;}	
}


*/



/*
==============================================
slideLeft
==============================================
*/


/*

.slideLeft1{
	animation-name: slideLeft1;
	-webkit-animation-name: slideLeft1;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;	
    
    animation-delay: 5s;
    -webkit-animation-delay: 5s;
    
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 

	visibility: visible !important;	
}

@keyframes slideLeft1 {
	0% {transform: translateX(150%); }
	50% {transform: translateX(-8%); opacity:0.6}
	65% {transform: translateX(4%); opacity:0.7}
	80% {transform: translateX(-4%); opacity:0.8}
	95% {transform: translateX(2%); opacity:0.9}			
	100% {transform: translateX(0%); opacity:1}
}

@-webkit-keyframes slideLeft1 {
	0% {-webkit-transform: translateX(150%); }
	50% {-webkit-transform: translateX(-8%); opacity:0.6}
	65% {-webkit-transform: translateX(4%); opacity:0.7}
	80% {-webkit-transform: translateX(-4%); opacity:0.8}
	95% {-webkit-transform: translateX(2%); opacity:0.9}			
	100% {-webkit-transform: translateX(0%); opacity:1}
}

*/

/* ================================ */

/*

.slideLeft2{
	animation-name: slideLeft2;
	-webkit-animation-name: slideLeft2;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;	
    
    animation-delay:5.5s;
    -webkit-animation-delay:5.5s;
    
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards;

	visibility: visible !important;	
}

@keyframes slideLeft2 {
	0% {transform: translateX(150%); }
	50% {transform: translateX(-8%); opacity:0.6}
	65% {transform: translateX(4%); opacity:0.7}
	80% {transform: translateX(-4%); opacity:0.8}
	95% {transform: translateX(2%); opacity:0.9}			
	100% {transform: translateX(0%); opacity:1}
}

@-webkit-keyframes slideLeft2 {
	0% {-webkit-transform: translateX(150%); }
	50% {-webkit-transform: translateX(-8%); opacity:0.6}
	65% {-webkit-transform: translateX(4%); opacity:0.7}
	80% {-webkit-transform: translateX(-4%); opacity:0.8}
	95% {-webkit-transform: translateX(2%); opacity:0.9}			
	100% {-webkit-transform: translateX(0%); opacity:1}
}

*/

/* ================================ */

/*

.slideLeft3{
	animation-name: slideLeft3;
	-webkit-animation-name: slideLeft3;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;	
    
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
    
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards;

	visibility: visible !important;	
}

@keyframes slideLeft3 {
	0% {transform: translateX(150%); }
	50% {transform: translateX(-8%); opacity:0.6}
	65% {transform: translateX(4%); opacity:0.7}
	80% {transform: translateX(-4%); opacity:0.8}
	95% {transform: translateX(2%); opacity:0.9}			
	100% {transform: translateX(0%); opacity:1}
}

@-webkit-keyframes slideLeft3 {
	0% {-webkit-transform: translateX(150%); }
	50% {-webkit-transform: translateX(-8%); opacity:0.6}
	65% {-webkit-transform: translateX(4%); opacity:0.7}
	80% {-webkit-transform: translateX(-4%); opacity:0.8}
	95% {-webkit-transform: translateX(2%); opacity:0.9}			
	100% {-webkit-transform: translateX(0%); opacity:1}
}

*/

/* ================================ */