@charset "UTF-8";
/* CSS Document */
/* process steps */
.process_steps {overflow:hidden; border-radius:2px; margin-bottom:15px;}
.process_steps .step {float:left; width:25%; padding: 15px; color:#fff; min-height:230px; position:relative; text-align:center;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; height: 100%;}
.process_steps .step:after {content:''; position:absolute; top:15px; right:-14px; border:7px solid transparent; z-index:1;}
.process_steps .step.intro {background:#CD2122;}
.process_steps .step.intro:after {border-left-color:#CD2122; }
.process_steps .step.step1 {background:#5a5a5a;}
.process_steps .step.step1:after {border-left-color:#5a5a5a; }
.process_steps .step.step2 {background:#4a4a4a;}
.process_steps .step.step2:after {border-left-color:#4a4a4a; }
.process_steps .step.step3 {background:#3e3e3e;}
.process_steps .step.step3:after {display:none; }
.process_steps .step.intro > h3 {margin-top:0; line-height:1.2; font-weight:500;}
.process_steps .step.intro > h3 strong {font-size:120%; display:block;}
.process_steps .step.intro > a {font-size:11px; font-weight:700; color:#eee;}
.process_steps .step.intro > a:hover {color:#fff;}
.process_steps .step > div + h3 + p {margin-bottom:0;}
.process_steps .step .icon {margin:20px 0 15px; min-height: 50px; line-height: 50px;}

@-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: translate(2px, 1px); }
3% { -webkit-transform: translate(-1px, -2px); }
6% { -webkit-transform: translate(-3px, 0px); }
8% { -webkit-transform: translate(0px, 2px); }
10% { -webkit-transform: translate(1px, -1px); }
20% { -webkit-transform: translate(20px, -20px); }
100% { -webkit-transform: translate( 120px, -120px);}
}
@-moz-keyframes fadeOutRightBig {
0% { -moz-transform: translate(2px, 1px); }
3% { -moz-transform: translate(-1px, -2px); }
6% { -moz-transform: translate(-3px, 0px); }
8% { -moz-transform: translate(0px, 2px); }
10% { -moz-transform: translate(1px, -1px); }
20% { -moz-transform: translate(20px, -20px); }
100% { -moz-transform: translate( 120px, -120px);}
}
@-ms-keyframes fadeOutRightBig {
0% { -ms-transform: translate(2px, 1px); }
3% { -ms-transform: translate(-1px, -2px); }
6% { -ms-transform: translate(-3px, 0px); }
8% { -ms-transform: translate(0px, 2px); }
10% { -ms-transform: translate(1px, -1px); }
20% { -ms-transform: translate(20px, -20px); }
100% { -ms-transform: translate( 120px, -120px);}
}
@-o-keyframes fadeOutRightBig {
0% { -o-transform: translate(2px, 1px); }
3% { -o-transform: translate(-1px, -2px); }
6% { -o-transform: translate(-3px, 0px); }
8% { -o-transform: translate(0px, 2px); }
10% { -o-transform: translate(1px, -1px); }
20% { -o-transform: translate(20px, -20px); }
100% { -o-transform: translate( 120px, -120px);}
}
@keyframes fadeOutRightBig {
0% {transform: translate(2px, 1px); }
3% {transform: translate(-1px, -2px); }
6% {transform: translate(-3px, 0px); }
8% {transform: translate(0px, 2px); }
10% {transform: translate(1px, -1px); }
20% {transform: translate(20px, -20px); }
100% {transform: translate( 120px, -120px);}
} 
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
-moz-animation-name: fadeOutRightBig;
-ms-animation-name: fadeOutRightBig;
-o-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;}
.process_steps .step:hover .icon[data-animation=tada] img {
-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; }
.process_steps .step:hover .icon[data-animation=pulse] img {
-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; }
.process_steps .step:hover .icon[data-animation=fadeOutRightBig] img {
-webkit-animation: fadeOutRightBig ease-out 1 normal 1s;
-moz-animation: fadeOutRightBig ease-out 1 normal 1s;
-ms-animation: fadeOutRightBig ease-out 1 normal 1s;
-o-animation: fadeOutRightBig ease-out 1 normal 1s;
animation: fadeOutRightBig ease-out 1 normal 1s;}
.process_steps .step {min-height: 250px;}
.process_steps .step > h3 {font-size:20px}
.process_steps .step {min-height: 240px;}
	.process_steps .step.intro > h3 {font-size: 20px;}
	.process_steps .step.intro > h3 + p {font-size: 12px;}
	.process_steps .step .icon {margin: 10px 0 5px;}
	.process_steps .step .icon + h3 {line-height: 1.4;font-size: 20px;}
	.process_steps .step .icon + h3 + p{font-size: 12px;}