.st0{fill:none;}
.st1{fill:#E1141D;}
.st2{fill:#000000;}
.st3{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st4{fill:none;stroke:#E1141D;stroke-width:2;stroke-miterlimit:10;}

#icon-innovation.canvas .iconEl2 { position: absolute; opacity: 0; width: 100%; height: 100%; }
#icon-innovation.canvas .iconEl1 { position: absolute; opacity: 0; width: 100%; height: 100%; }
.animationInView #icon-innovation .iconEl2 { animation-name: icon-innovation-el2; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
.animationInView #icon-innovation .iconEl1 { animation-name: icon-innovation-el1; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
@keyframes icon-innovation-el2 {
	0%   { opacity: 0; }
	10%  { opacity: 0; }
	30%  { opacity: 1; }
	100% { opacity: 1; }
}
@keyframes icon-innovation-el1 {
	0%   { opacity: 0; }
	30%  { opacity: 0; }
	50%  { opacity: 1; }
	60%  { opacity: 1; }
	65%  { opacity: 0.6; }
	78%  { opacity: 1; }
	85%  { opacity: 1; }
	90%  { opacity: 0.7; }
	93%  { opacity: 1; }
	100% { opacity: 1; }
}


#icon-drink-coffee.canvas .iconEl1 { position: absolute; width: 100%; top: 20%; height: 100%; }
#icon-drink-coffee.canvas .iconEl2 { position: absolute; opacity: 0; width: 100%; left: -20%; height: 100%; }
#icon-drink-coffee.canvas .iconEl3 { position: absolute; opacity: 0; width: 100%; height: 100%; }
.animationInView #icon-drink-coffee .iconEl1 { animation-name: icon-drink-coffee-el1; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
.animationInView #icon-drink-coffee .iconEl2 { animation-name: icon-drink-coffee-el2; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
.animationInView #icon-drink-coffee .iconEl3 { animation-name: icon-drink-coffee-el3; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
@keyframes icon-drink-coffee-el1 {
	0%   { top: 20%; }
	30%  { top: 0; }
	100% { top: 0; }
}
@keyframes icon-drink-coffee-el2 {
	0%   { opacity: 0; left: -20%;}
	20%  { opacity: 0; left: -20%; }
	30%  { opacity: 1; left: 0; }
	100% { opacity: 1; left: 0; }
}
@keyframes icon-drink-coffee-el3 {
	0%   { opacity: 0; }
	25%  { opacity: 0; }
	45%  { opacity: 1; }
	100% { opacity: 1; }
}


#icon-e-learning.canvas .iconEl1 { position: absolute; width: 100%; top: 30%; left: -10%; opacity: 0; height: 100%; }
.animationInView #icon-e-learning .iconEl1 { animation-name: icon-e-learning-el1; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
@keyframes icon-e-learning-el1 {
	0%   { opacity: 0; left: -10%; top: 30%; }
	30%  { opacity: 0; left: -10%; top: 30%; }
	60%  { opacity: 1; left: 0; top: 0; }
	100% { opacity: 1; left: 0; top: 0; }
}


#icon-environment.canvas .iconEl1 { position: absolute; opacity: 0; transform-origin: 50% 50%; transform: scale(0,0); height: 100%; width: 100%; }
.animationInView #icon-environment .iconEl1 { animation-name: icon-environment-el1; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
@keyframes icon-environment-el1 {
	0%   { opacity: 0; transform: scale(0,0); }
	30%  { opacity: 0; transform: scale(0,0); }
	60%  { opacity: 1; transform: scale(1,1); }
	100% { opacity: 1; transform: scale(1,1); }
}


#icon-client.canvas .iconEl1 { position: absolute; opacity: 0; transform-origin: 50% 50%; transform: scale(0,0); height: 100%; width: 100%; }
.animationInView #icon-client .iconEl1 { animation-name: icon-client-el1; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
@keyframes icon-client-el1 {
	0%   { opacity: 0; transform: scale(0,0); }
	30%  { opacity: 0; transform: scale(0,0); }
	60%  { opacity: 1; transform: scale(1,1); }
	100% { opacity: 1; transform: scale(1,1); }
}


#icon-solving-problems.canvas .iconEl1 { position: absolute; transform: rotate(29deg); left: -22.4%; width: 100%; height: 100%; }
#icon-solving-problems .puzzle {fill:#000000; }
.animationInView #icon-solving-problems .iconEl1 { animation-name: icon-solving-problems-el1; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
.animationInView #icon-solving-problems .puzzle { animation-name: icon-solving-problems-puzzle; animation-duration: 3s; animation-delay: 1.2s;  animation-fill-mode: forwards; }
@keyframes icon-solving-problems-el1 {
	0%   { transform: rotate(29deg); left: -22.4%; }
	50%  { transform: rotate(29deg); left: -22.4%; }
	100% { transform: rotate(0deg); left: 0%; }
}
@keyframes icon-solving-problems-puzzle {
	0%   { fill: #000000;}
	50%  { fill: #000000;}
	100% { fill: #E1141D; }
}


#icon-hour-registration.canvas .iconEl1 { position: absolute; width: 100%; transform: rotate(0deg); transform-origin: 50% 50%;  height: 100%; width: 100%;}
.animationInView #icon-hour-registration .iconEl1 { animation-name: icon-hour-registration-el1; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
@keyframes icon-hour-registration-el1 {
	0%   { transform: rotate(0deg); }
	30%  { transform: rotate(0deg); }
	60%  { transform: rotate(360deg); }
	100% { transform: rotate(360deg); }
}


#icon-standard-solution.canvas .iconEl1 { position: absolute; width: 100%; opacity: 0; height: 100%; }
.animationInView #icon-standard-solution .iconEl1 { animation-name: icon-standard-solution-el1; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
@keyframes icon-standard-solution-el1 {
	0%   { opacity: 0; }
	30%  { opacity: 0; }
	60%  { opacity: 1; }
	100% { opacity: 1; }
}


#icon-integrated-solution.canvas .iconEl1 { position: absolute; width: 100%; opacity: 0; height: 100%; }
.animationInView #icon-integrated-solution .iconEl1 { animation-name: icon-integrated-solution-el1; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
@keyframes icon-integrated-solution-el1 {
	0%   { opacity: 0; }
	30%  { opacity: 0; }
	60%  { opacity: 1; }
	100% { opacity: 1; }
}


#icon-diversity.canvas .iconEl1 { position: absolute; width: 100%; height: 100%; transform-origin: 80% 50%; transform: scale(0,0); opacity: 0; }
.animationInView #icon-diversity .iconEl1 { animation-name: icon-diversity-el1; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
@keyframes icon-diversity-el1 {
	0%   { opacity: 0; transform: scale(0,0); }
	30%  { opacity: 0; transform: scale(0,0); }
	60%  { opacity: 1; transform: scale(1,1); }
	100% { opacity: 1; transform: scale(1,1); }
}


#icon-order-cash.canvas .iconEl1 { position: absolute; width: 100%; height: 100%; top: 30%; opacity: 0; }
.animationInView #icon-order-cash .iconEl1 { animation-name: icon-order-cash-el1; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
@keyframes icon-order-cash-el1 {
	0%   { opacity: 0; top: 30%; }
	30%  { opacity: 0; top: 30%; }
	60%  { opacity: 1; top: 0; }
	100% { opacity: 1; top: 0; }
}


#icon-calendar.canvas .iconEl1 { position: absolute; width: 100%; height: 100%; opacity: 0; }
.animationInView #icon-calendar .iconEl1 { animation-name: icon-calendar-el1; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
@keyframes icon-calendar-el1 {
	0%   { opacity: 0; }
	30%  { opacity: 0; }
	60%  { opacity: 1; }
	100% { opacity: 1; }
}


#icon-manufacturing.canvas .iconEl1 { position: absolute; width: 100%; height: 100%; transform: rotate(0deg); transform-origin: 80.5% 73.6%; }
#icon-manufacturing.canvas .iconEl2 { position: absolute; width: 100%; height: 100%; transform: rotate(360deg); transform-origin: 33.8% 50%; }
#icon-manufacturing.canvas .iconEl3 { position: absolute; width: 100%; height: 100%; transform: rotate(0deg); transform-origin: 80.5% 29.5%; }
.animationInView #icon-manufacturing .iconEl1 { animation-name: icon-manufacturing-el1; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
.animationInView #icon-manufacturing .iconEl2 { animation-name: icon-manufacturing-el2; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
.animationInView #icon-manufacturing .iconEl3 { animation-name: icon-manufacturing-el3; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
@keyframes icon-manufacturing-el1 {
	0%   { transform: rotate(0deg); }
	10%  { transform: rotate(0deg); }
	80%  { transform: rotate(360deg); }
	100% { transform: rotate(360deg); }
}
@keyframes icon-manufacturing-el2 {
	0%   { transform: rotate(360deg); }
	15%  { transform: rotate(360deg); }
	85%  { transform: rotate(0deg); }
	100% { transform: rotate(0deg); }
}
@keyframes icon-manufacturing-el3 {
	0%   { transform: rotate(0deg); }
	20%  { transform: rotate(0deg); }
	90%  { transform: rotate(360deg); }
	100% { transform: rotate(360deg); }
}


#icon-apps-add-ons.canvas .iconEl1 { position: absolute; width: 100%; height: 100%; opacity: 0; }
#icon-apps-add-ons.canvas .iconEl2 { position: absolute; width: 100%; height: 100%; opacity: 0; }
.animationInView #icon-apps-add-ons .iconEl1 { animation-name: icon-apps-add-ons-el1; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
.animationInView #icon-apps-add-ons .iconEl2 { animation-name: icon-apps-add-ons-el2; animation-duration: 3s; animation-delay: 1.2s; animation-fill-mode: forwards; }
@keyframes icon-apps-add-ons-el1 {
	0%   { opacity: 0; }
	20%  { opacity: 0; }
	60%  { opacity: 1; }
	100% { opacity: 1; }
}
@keyframes icon-apps-add-ons-el2 {
	0%   { opacity: 0; }
	30%  { opacity: 0; }
	70%  { opacity: 1; }
	100% { opacity: 1; }
}