/* all keyframes declarations */

/* shape animation */

@-webkit-keyframes shape-in{
	from { -webkit-transform: translateX(-300px) skewX(-30deg); transform: translateX(-300px) skewX(-30deg); }
	to   { -webkit-transform: translateX(0px) skewX(-30deg); transform: translateX(0px) skewX(-30deg); }
}

@-moz-keyframes shape-in{
	from { -moz-transform: translateX(-300px) skewX(-30deg); transform: translateX(-300px) skewX(-30deg); }
	to   { -moz-transform: translateX(0px) skewX(-30deg); transform: translateX(0px) skewX(-30deg); }
}

@-o-keyframes shape-in{
	from { -o-transform: translateX(-300px) skewX(-30deg); transform: translateX(-300px) skewX(-30deg); }
	to   { -o-transform: translateX(0px) skewX(-30deg); transform: translateX(0px) skewX(-30deg); }
}

@keyframes shape-in{
	from { -webkit-transform: translateX(-300px) skewX(-30deg); -moz-transform: translateX(-300px) skewX(-30deg); -o-transform: translateX(-300px) skewX(-30deg); transform: translateX(-300px) skewX(-30deg); }
	to   { -webkit-transform: translateX(0px) skewX(-30deg); -moz-transform: translateX(0px) skewX(-30deg); -o-transform: translateX(0px) skewX(-30deg); transform: translateX(0px) skewX(-30deg); }
}

@-webkit-keyframes shape-out{
	from { -webkit-transform: translateX(0px) skewX(-30deg); transform: translateX(0px) skewX(-30deg); }
	to   { -webkit-transform: translateX(-840px) skewX(-30deg); transform: translateX(-840px) skewX(-30deg); }
}

@-moz-keyframes shape-out{
	from { -moz-transform: translateX(0px) skewX(-30deg); transform: translateX(0px) skewX(-30deg); }
	to   { -moz-transform: translateX(-840px) skewX(-30deg); transform: translateX(-840px) skewX(-30deg); }
}

@-o-keyframes shape-out{
	from { -o-transform: translateX(0px) skewX(-30deg); transform: translateX(0px) skewX(-30deg); }
	to   { -o-transform: translateX(-840px) skewX(-30deg); transform: translateX(-840px) skewX(-30deg); }
}

@keyframes shape-out{
	from { -webkit-transform: translateX(0px) skewX(-30deg); -moz-transform: translateX(0px) skewX(-30deg); -o-transform: translateX(0px) skewX(-30deg); transform: translateX(0px) skewX(-30deg); }
	to   { -webkit-transform: translateX(-840px) skewX(-30deg); -moz-transform: translateX(-840px) skewX(-30deg); -o-transform: translateX(-840px) skewX(-30deg); transform: translateX(-840px) skewX(-30deg); }
}

@-webkit-keyframes shape3-in{
	from { -webkit-transform: translateX(0px) skewX(-30deg); transform: translateX(0px) skewX(-30deg); }
	to   { -webkit-transform: translateX(-120px) skewX(-30deg); transform: translateX(-120px) skewX(-30deg); }
}

@-moz-keyframes shape3-in{
	from { -moz-transform: translateX(0px) skewX(-30deg); transform: translateX(0px) skewX(-30deg); }
	to   { -moz-transform: translateX(-120px) skewX(-30deg); transform: translateX(-120px) skewX(-30deg); }
}

@-o-keyframes shape3-in{
	from { -o-transform: translateX(0px) skewX(-30deg); transform: translateX(0px) skewX(-30deg); }
	to   { -o-transform: translateX(-120px) skewX(-30deg); transform: translateX(-120px) skewX(-30deg); }
}

@keyframes shape3-in{
	from { -webkit-transform: translateX(0px) skewX(-30deg); -moz-transform: translateX(0px) skewX(-30deg); -o-transform: translateX(0px) skewX(-30deg); transform: translateX(0px) skewX(-30deg); }
	to   { -webkit-transform: translateX(-120px) skewX(-30deg); -moz-transform: translateX(-120px) skewX(-30deg); -o-transform: translateX(-120px) skewX(-30deg); transform: translateX(-120px) skewX(-30deg); }
}

@-webkit-keyframes shape2-fill{
	from { -webkit-transform: translateX(-840px) skewX(-30deg); transform: translateX(-840px) skewX(-30deg); }
	to   { background-color: #0078d7; -webkit-transform: translateX(-650px) skewX(-30deg); transform: translateX(-650px) skewX(-30deg); }
}

@-moz-keyframes shape2-fill{
	from { -moz-transform: translateX(-840px) skewX(-30deg); transform: translateX(-840px) skewX(-30deg); }
	to   { background-color: #0078d7; -moz-transform: translateX(-650px) skewX(-30deg); transform: translateX(-650px) skewX(-30deg); }
}

@-o-keyframes shape2-fill{
	from { -o-transform: translateX(-840px) skewX(-30deg); transform: translateX(-840px) skewX(-30deg); }
	to   { background-color: #0078d7; -o-transform: translateX(-650px) skewX(-30deg); transform: translateX(-650px) skewX(-30deg); }
}

@keyframes shape2-fill{
	from { -webkit-transform: translateX(-840px) skewX(-30deg); -moz-transform: translateX(-840px) skewX(-30deg); -o-transform: translateX(-840px) skewX(-30deg); transform: translateX(-840px) skewX(-30deg); }
	to   { background-color: #0078d7; -webkit-transform: translateX(-650px) skewX(-30deg); -moz-transform: translateX(-650px) skewX(-30deg); -o-transform: translateX(-650px) skewX(-30deg); transform: translateX(-650px) skewX(-30deg); }
}

@-webkit-keyframes shape3-fill{
	from { -webkit-transform: translateX(-120px) skewX(-30deg); transform: translateX(-120px) skewX(-30deg); }
	to   { background-color: #0078d7; -webkit-transform: translateX(-250px) skewX(-30deg); transform: translateX(-250px) skewX(-30deg); }
}

@-moz-keyframes shape3-fill{
	from { -moz-transform: translateX(-120px) skewX(-30deg); transform: translateX(-120px) skewX(-30deg); }
	to   { background-color: #0078d7; -moz-transform: translateX(-250px) skewX(-30deg); transform: translateX(-250px) skewX(-30deg); }
}

@-o-keyframes shape3-fill{
	from { -o-transform: translateX(-120px) skewX(-30deg); transform: translateX(-120px) skewX(-30deg); }
	to   { background-color: #0078d7; -o-transform: translateX(-250px) skewX(-30deg); transform: translateX(-250px) skewX(-30deg); }
}

@keyframes shape3-fill{
	from { -webkit-transform: translateX(-120px) skewX(-30deg); -moz-transform: translateX(-120px) skewX(-30deg); -o-transform: translateX(-120px) skewX(-30deg); transform: translateX(-120px) skewX(-30deg); }
	to   { background-color: #0078d7; -webkit-transform: translateX(-250px) skewX(-30deg); -moz-transform: translateX(-250px) skewX(-30deg); -o-transform: translateX(-250px) skewX(-30deg); transform: translateX(-250px) skewX(-30deg); }
}


/* fade animations */

@-webkit-keyframes fade-in{
	from { opacity: 0; }
	to   { opacity: 1; }
}

@-moz-keyframes fade-in{
	from { opacity: 0; }
	to   { opacity: 1; }
}

@-o-keyframes fade-in{
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes fade-in{
	from { opacity: 0; }
	to   { opacity: 1; }
}

@-webkit-keyframes fade-out{
	from { opacity: 1; }
	to   { opacity: 0; }
}

@-moz-keyframes fade-out{
	from { opacity: 1; }
	to   { opacity: 0; }
}

@-o-keyframes fade-out{
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes fade-out{
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* window 10 animations */

@-webkit-keyframes win10-slide{
	from { -webkit-transform: translateX(0px); transform: translateX(0px); }
	to   { -webkit-transform: translateX(-156px); transform: translateX(-156px); }
}

@-moz-keyframes win10-slide{
	from { -moz-transform: translateX(0px); transform: translateX(0px); }
	to   { -moz-transform: translateX(-156px); transform: translateX(-156px); }
}

@-o-keyframes win10-slide{
	from { -o-transform: translateX(0px); transform: translateX(0px); }
	to   { -o-transform: translateX(-156px); transform: translateX(-156px); }
}

@keyframes win10-slide{
	from { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); }
	to   { -webkit-transform: translateX(-156px); -moz-transform: translateX(-156px); -o-transform: translateX(-156px); transform: translateX(-156px); }
}

/* win 10 expand for the expanded version */
@-webkit-keyframes win10-exp{
	from { width: 34px; }
	to   { width: 146px; }
}
@-moz-keyframes win10-exp{
	from { width: 34px; }
	to   { width: 146px; }
}
@-o-keyframes win10-exp{
	from { width: 34px; }
	to   { width: 146px; }
}
@keyframes win10-exp{
	from { width: 34px; }
	to   { width: 146px; }
}

/* bg zoom */

@-webkit-keyframes zoom-in{
	from { -webkit-transform: scale(1); transform: scale(1); }
	to   { -webkit-transform: scale(1.1); transform: scale(1.1); }
}

@-moz-keyframes zoom-in{
	from { -moz-transform: scale(1); transform: scale(1); }
	to   { -moz-transform: scale(1.1); transform: scale(1.1); }
}

@-o-keyframes zoom-in{
	from { -o-transform: scale(1); transform: scale(1); }
	to   { -o-transform: scale(1.1); transform: scale(1.1); }
}

@keyframes zoom-in{
	from { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
	to   { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
}

/* arrow anim */
@-webkit-keyframes arrow-move{
	0% 	 { -webkit-transform: translateY(0px); transform: translateY(0px); }
	50%  { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
	100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@-moz-keyframes arrow-move{
	0% 	 { -moz-transform: translateY(0px); transform: translateY(0px); }
	50%  { -moz-transform: translateY(-5px); transform: translateY(-5px); }
	100% { -moz-transform: translateY(0px); transform: translateY(0px); }
}
@-o-keyframes arrow-move{
	0% 	 { -o-transform: translateY(0px); transform: translateY(0px); }
	50%  { -o-transform: translateY(-5px); transform: translateY(-5px); }
	100% { -o-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes arrow-move{
	0% 	 { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); }
	50%  { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); }
	100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); }
}


/* ------------------------------------------------- */

@-webkit-keyframes shape4-move{
	from { -webkit-transform: translateX(50px) skewX(-30deg); transform: translateX(50px) skewX(-30deg); }
	to   { -webkit-transform: translateX(450px) skewX(-30deg); transform: translateX(450px) skewX(-30deg); }	
}

@-moz-keyframes shape4-move{
	from { -moz-transform: translateX(50px) skewX(-30deg); transform: translateX(50px) skewX(-30deg); }
	to   { -moz-transform: translateX(450px) skewX(-30deg); transform: translateX(450px) skewX(-30deg); }	
}

@-o-keyframes shape4-move{
	from { -o-transform: translateX(50px) skewX(-30deg); transform: translateX(50px) skewX(-30deg); }
	to   { -o-transform: translateX(450px) skewX(-30deg); transform: translateX(450px) skewX(-30deg); }	
}

@keyframes shape4-move{
	from { -webkit-transform: translateX(50px) skewX(-30deg); -moz-transform: translateX(50px) skewX(-30deg); -o-transform: translateX(50px) skewX(-30deg); transform: translateX(50px) skewX(-30deg); }
	to   { -webkit-transform: translateX(450px) skewX(-30deg); -moz-transform: translateX(450px) skewX(-30deg); -o-transform: translateX(450px) skewX(-30deg); transform: translateX(450px) skewX(-30deg); }	
}