.so-widget-graphic div { position:relative; }
.so-widget-graphic canvas { display:block; width:100%; }
.so-widget-graphic svg { position:absolute; top:0; left:0; width:100%; }

.so-widget-graphic .renewable-energy { animation:hover 3s linear infinite alternate; }
.so-widget-graphic .renewable-energy .blades-1, .so-widget-graphic .renewable-energy .blades-2, .so-widget-graphic .renewable-energy .blades-3 { animation:spin 3s linear infinite; transform-origin:center center; transform-box:fill-box; }
.so-widget-graphic .renewable-energy .charge-1 { animation:fade-five-1 3s infinite; opacity:0; }
.so-widget-graphic .renewable-energy .charge-2 { animation:fade-five-2 3s infinite; opacity:0; }
.so-widget-graphic .renewable-energy .charge-3 { animation:fade-five-3 3s infinite; opacity:0; }
.so-widget-graphic .renewable-energy .charge-4 { animation:fade-five-4 3s infinite; opacity:0; }
.so-widget-graphic .renewable-energy .charge-5 { animation:fade-five-5 3s infinite; opacity:0; }

.so-widget-graphic .projects .pulses circle { transform-origin:center center; transform-box:fill-box; }
.so-widget-graphic .projects .pulses circle.pulse-1 { animation:pulse-1 3s; }
.so-widget-graphic .projects .pulses circle.pulse-2 { animation:pulse-2 3s; }
.so-widget-graphic .projects .pulses circle.pulse-3 { animation:pulse-3 3s; }

.so-widget-graphic .earth-and-sun svg { overflow:visible; }
.so-widget-graphic .earth-and-sun .sunlight circle { transform-origin:center center; transform-box:fill-box; animation:pulse 3s linear infinite; }
.so-widget-graphic .earth-and-sun .earth { animation:hover 3s linear infinite alternate; }

.so-widget-graphic .onshore-wind .blades-1, .so-widget-graphic .onshore-wind .blades-2, .so-widget-graphic .onshore-wind .blades-3 { animation:spin 3s linear infinite; transform-origin:center center; transform-box:fill-box; }

.so-widget-graphic .offshore-wind svg { overflow:hidden; }
.so-widget-graphic .offshore-wind .blades-1, .so-widget-graphic .offshore-wind .blades-2, .so-widget-graphic .offshore-wind .blades-3 { animation:spin 3s linear infinite; transform-origin:center center; transform-box:fill-box; }
.so-widget-graphic .offshore-wind .boat { animation:hover 3s linear infinite alternate; }
.so-widget-graphic .offshore-wind .water { animation:slide 18s linear infinite; }

.so-widget-graphic .ev-charging .charge-1 { animation:fade-four-1 3s infinite; opacity:0; }
.so-widget-graphic .ev-charging .charge-2 { animation:fade-four-2 3s infinite; opacity:0; }
.so-widget-graphic .ev-charging .charge-3 { animation:fade-four-3 3s infinite; opacity:0; }
.so-widget-graphic .ev-charging .charge-4 { animation:fade-four-4 3s infinite; opacity:0; }

.so-widget-graphic .total-integration .solar, .so-widget-graphic .total-integration-inverted .solar { animation:zoom-five-1 9s infinite; opacity:0; transform:scale(0.75); transform-origin:center center; transform-box:fill-box; }
.so-widget-graphic .total-integration .storage, .so-widget-graphic .total-integration-inverted .storage { animation:zoom-five-2 9s infinite; opacity:0; transform:scale(0.75); transform-origin:center center; transform-box:fill-box; }
.so-widget-graphic .total-integration .ev-charging, .so-widget-graphic .total-integration-inverted .ev-charging { animation:zoom-five-3 9s infinite; opacity:0; transform:scale(0.75); transform-origin:center center; transform-box:fill-box; }
.so-widget-graphic .total-integration .microgrids, .so-widget-graphic .total-integration-inverted .microgrids { animation:zoom-five-4 9s infinite; opacity:0; transform:scale(0.75); transform-origin:center center; transform-box:fill-box; }
.so-widget-graphic .total-integration .energy-management, .so-widget-graphic .total-integration-inverted .energy-management { animation:zoom-five-5 9s infinite; opacity:0; transform:scale(0.75); transform-origin:center center; transform-box:fill-box; }

@keyframes pulse-1 {
	0% {
		transform:scale(1);
		opacity:0;
	}
	50% {
		opacity:0.15;
	}
	100% {
		transform:scale(6);
		opacity:0;
	}
}

@keyframes pulse-2 {
	0% {
		transform:scale(1);
		opacity:0;
	}
	50% {
		opacity:0.15;
	}
	100% {
		transform:scale(9);
		opacity:0;
	}
}

@keyframes pulse-3 {
	0% {
		transform:scale(1);
		opacity:0;
	}
	50% {
		opacity:0.15;
	}
	100% {
		transform:scale(12);
		opacity:0;
	}
}

@keyframes fade-five-1 {
	20%, 100% {
		opacity:1;
	}
}

@keyframes fade-five-2 {
	0%, 20% {
		opacity:0;
	}
	40%, 100% {
		opacity:1;
	}
}

@keyframes fade-five-3 {
	0%, 40% {
		opacity:0;
	}
	60%, 100% {
		opacity:1;
	}
}

@keyframes fade-five-4 {
	0%, 60% {
		opacity:0;
	}
	80%, 100% {
		opacity:1;
	}
}

@keyframes fade-five-5 {
	0%, 80% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@keyframes fade-four-1 {
	25%, 100% {
		opacity:1;
	}
}

@keyframes fade-four-2 {
	0%, 25% {
		opacity:0;
	}
	50%, 100% {
		opacity:1;
	}
}

@keyframes fade-four-3 {
	0%, 50% {
		opacity:0;
	}
	75%, 100% {
		opacity:1;
	}
}

@keyframes fade-four-4 {
	0%, 75% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@keyframes hover {
	0% {
		transform:translateY(0);
	}
	100% {
		transform:translateY(-12px);
	}
}

@keyframes pulse {
	0% {
		transform:scale(1);
		opacity:0;
	}
	50% {
		opacity:0.4;
	}
	100% {
		transform:scale(1.6);
		opacity:0;
	}
}

@keyframes slide {
	0% {
		transform:translateX(0);
	}
	100% {
		transform:translateX(-800px);
	}
}

@keyframes zoom-five-1 {
	10%, 100% {
		opacity:1;
		transform:none;
	}
}

@keyframes zoom-five-2 {
	0%, 10% {
		opacity:0;
		transform:scale(0.75);
	}
	20%, 100% {
		opacity:1;
		transform:none;
	}
}

@keyframes zoom-five-3 {
	0%, 20% {
		opacity:0;
		transform:scale(0.75);
	}
	30%, 100% {
		opacity:1;
		transform:none;
	}
}

@keyframes zoom-five-4 {
	0%, 30% {
		opacity:0;
		transform:scale(0.75);
	}
	40%, 100% {
		opacity:1;
		transform:none;
	}
}

@keyframes zoom-five-5 {
	0%, 40% {
		opacity:0;
		transform:scale(0.75);
	}
	50%, 100% {
		opacity:1;
		transform:none;
	}
}

@keyframes spin {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(360deg);
	}
}