/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }	
	33% { -webkit-transform: scale(0.9); }
	66% { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse {
    0% { -moz-transform: scale(1); }	
	33% { -moz-transform: scale(0.9); }
	66% { -moz-transform: scale(1.1); }
    100% { -moz-transform: scale(1); }
}
@-ms-keyframes pulse {
    0% { -ms-transform: scale(1); }	
	33% { -ms-transform: scale(0.9); }
	66% { -ms-transform: scale(1.1); }
    100% { -ms-transform: scale(1); }
}
@-o-keyframes pulse {
    0% { -o-transform: scale(1); }	
	33% { -o-transform: scale(0.9); }
	66% { -o-transform: scale(1.1); }
    100% { -o-transform: scale(1); }
}
@keyframes pulse {
    0% { transform: scale(1); }	
	33% { transform: scale(0.9); }
	66% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.pulse {
	-webkit-animation-name: pulse;
	-moz-animation-name: pulse;
	-ms-animation-name: pulse;
	-o-animation-name: pulse;
	animation-name: pulse;
}

@-webkit-keyframes tada {
	0% {-webkit-transform: scale(1);}	
	10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
	100% {-webkit-transform: scale(1) rotate(0);}
}

@-moz-keyframes tada {
	0% {-moz-transform: scale(1);}	
	10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
	100% {-moz-transform: scale(1) rotate(0);}
}

@-ms-keyframes tada {
	0% {-ms-transform: scale(1);}	
	10%, 20% {-ms-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-ms-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-ms-transform: scale(1.1) rotate(-3deg);}
	100% {-ms-transform: scale(1) rotate(0);}
}

@-o-keyframes tada {
	0% {-o-transform: scale(1);}	
	10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
	100% {-o-transform: scale(1) rotate(0);}
}

@keyframes tada {
	0% {transform: scale(1);}	
	10%, 20% {transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
	100% {transform: scale(1) rotate(0);}
}

.tada {
	-webkit-animation-name: tada;
	-moz-animation-name: tada;
	-ms-animation-name: tada;
	-o-animation-name: tada;
	animation-name: tada;
}

@-webkit-keyframes fadeOutRightBig {
	0% {-webkit-transform: translateX(0px);}
	25% {-webkit-transform: translateX(-10px);}
	100% {-webkit-transform: translateX(150px);}
}
@-moz-keyframes fadeOutRightBig {
	0% {-moz-transform: translateX(0px);}
	25% {-moz-transform: translateX(-10px);}
	100% {-moz-transform: translateX(150px);}
}
@-ms-keyframes fadeOutRightBig {
	0% {-ms-transform: translateX(0px);}
	25% {-ms-transform: translateX(-10px);}
	100% {-ms-transform: translateX(150px);}
}
@-o-keyframes fadeOutRightBig {
	0% {-o-transform: translateX(0px);}
	25% {-o-transform: translateX(-10px);}
	100% {-o-transform: translateX(150px);}
}
@keyframes fadeOutRightBig {
	0% {transform: translateX(0px);}
	25% {transform: translateX(-10px);}
	100% {transform: translateX(150px);}
}

.fadeOutRightBig {
	-webkit-animation-name: fadeOutRightBig;
	-moz-animation-name: fadeOutRightBig;
	-ms-animation-name: fadeOutRightBig;
	-o-animation-name: fadeOutRightBig;
	animation-name: fadeOutRightBig;
}

/* STEPS MODULE */
#steps {overflow:hidden; position:relative; z-index: 1; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
#steps .step {float:left; height:190px; position:relative; }
#steps .step:hover {z-index:10;}
#steps .step .background {opacity:.5; position:absolute; top:0; left:0; width:100%; height:100%; filter:alpha(opacity=50);}
#steps .step .arrow {position:absolute; top:0; right:-18px; width:0; height:0; opacity:0.5; content: ""; border-bottom: 95px dashed transparent;  border-top: 95px dashed transparent; }
#steps .step .background,
#steps .step .arrow {
-moz-transition-property: all;
-moz-transition-duration:150ms;
-moz-transition-timing-function:ease-in;
-webkit-transition-property:  all;
-webkit-transition-duration:150ms;
-webkit-transition-timing-function:ease-in;
-o-transition-property:  all;
-o-transition-duration:150ms;
-o-transition-timing-function:ease-in;
transition-property:  all;
transition-duration:150ms;
transition-timing-function:ease-in;}
#steps .step:hover .background,
#steps .step:hover .arrow {opacity:.8; filter:alpha(opacity=80); }
#steps .step .inner-step { text-align:center; position:relative; height:100%; overflow: hidden;}
.browserIe.ie7 #steps .step .inner-step { width:100%;}
#steps.steps4 .step {width:25%;}
#steps.steps3 .step {width:33.3%;}
#steps.steps3 .step3 {width:33.4%;}
.browserIe.ie7 #steps.steps3 .step3 {width:33.3%;}
#steps.steps2 .step {width:50%;}
#steps .step1 {z-index:3;}
#steps .step2 {z-index:2;}
#steps .step3 {z-index:1;}
#steps h4 {bottom: 15px; display: block; font-size: 14px; line-height: 1.6; margin: 0 16%; position: absolute; text-align: center; width:68%; }
.browserIe.ie7 #steps h4 { left:0; right:0;}
#steps .step:hover,
#steps .step:hover h4 { color:#fff;}
#steps .icon { position:absolute; top:50px; background-repeat:no-repeat; background-position:center top; left:50%; }

#steps .step:hover .icon { background-position:center bottom; }
#steps .step .icon a {display: block; width: 100%; height: 100%; }
#steps .step[data-animation=tada]:hover .icon1 {
-webkit-animation: tada ease-in-out 1 normal 800ms;
-moz-animation: tada ease-in-out 1 normal 800ms;
-ms-animation: tada ease-in-out 1 normal 800ms;
-o-animation: tada ease-in-out 1 normal 800ms;
animation: tada ease-in-out 1 normal 500ms; }
#steps .step[data-animation=pulse]:hover .icon2 {
-webkit-animation: pulse ease-in-out 1 normal 500ms;
-moz-animation: pulse ease-in-out 1 normal 500ms;
-ms-animation: pulse ease-in-out 1 normal 500ms;
-o-animation: pulse ease-in-out 1 normal 500ms;
animation: pulse ease-in-out 1 normal 500ms; }
#steps .step[data-animation=fadeOutRightBig]:hover .icon3 {
-webkit-animation: fadeOutRightBig ease-in-out 1 normal 1s;
-moz-animation: fadeOutRightBig ease-in-out 1 normal 1s;
-ms-animation: fadeOutRightBig ease-in-out 1 normal 1s;
-o-animation: fadeOutRightBig ease-in-out 1 normal 1s;
animation: fadeOutRightBig ease-in-out 1 normal 1s; }
