.detail,.interactive-graphic{width:100%}.interactive-graphic{perspective:1000px;perspective-origin:50% -295%}@media(min-width:992px){#cog,#cog-wrapper{transform-box:fill-box;transform-origin:center}.features,.lg-hidden{display:none}.step-visual{opacity:.5}.step-visual:hover{cursor:pointer;opacity:1}#analyse.active,#analyse:hover,#building.active,#building:hover,#charge.active,#charge:hover,#efficiency.active,#efficiency:hover,#flexibility.active,#flexibility:hover,#generate.active,#generate:hover,#monitor.active,#monitor:hover,#plan.active,#plan:hover,#source.active,#source:hover,#storage.active,#storage:hover,.step-visual.active{opacity:1}.details-wrapper{min-height:200px}#Globe-2{box-shadow:-5px 0 0 0 #000,5px 0 0 0 #000;clip-path:url(clipPathGlobe)}#clip1{stroke:#fff;stroke-width:800px}#globe:hover #Globe-2,#magnify:hover #magnify-glass,#settings:hover #cog-outer,.step-visual.active #Globe-2,.step-visual.active #cog-outer,.step-visual.active #magnify-glass{transform:translateY(-20px)}#globe:hover #map,.step-visual.active #map{animation:slide1 4s linear;transform:translate(-400px)}#globe:hover #map2,.step-visual.active #map2{animation:slide2 4s linear infinite;transform:translate(0)}#globe:hover #map3,.step-visual.active #map3{animation:slide3 4s linear 2s infinite;transform:translate(150px)}@keyframes slide1{0%{transform:translate(0)}to{transform:translate(-400px)}}@keyframes slide2{0%{transform:translate(150px)}to{transform:translate(-200px)}}@keyframes slide3{0%{transform:translate(150px)}to{transform:translate(-200px)}}#cog-wrapper{transform:scaleX(2);-ms-transform:scaleX(2);-moz-transform:scaleX(2);-webkit-transform:scaleX(2)}#cog{transform:rotate(1turn)}#settings:hover #cog,.step-visual.active #cog{animation:rotate 4s linear infinite;-moz-animation:none}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.active .features{display:block}#analyse,#building,#charge,#efficiency,#flexibility,#generate,#monitor,#plan,#source,#storage{opacity:.7}#analyse-shadow,#building-shadow,#charge-shadow,#efficiency-shadow,#flexibility-shadow,#generate-shadow,#monitor-shadow,#plan-shadow,#source-shadow,#storage-shadow{opacity:.1}#analyse,#analyse-shadow,#building,#building-shadow,#charge,#charge-shadow,#efficiency,#efficiency-shadow,#flexibility,#flexibility-shadow,#generate,#generate-shadow,#monitor,#monitor-shadow,#plan,#plan-shadow,#source,#source-shadow,#storage,#storage-shadow{transform:rotate3d(1,1,1,120deg);-ms-transform:rotate3d(1,1,1,120deg);-moz-transform:rotate3d(1,1,1,120deg);-webkit-transform:rotate3d(1,1,1,120deg);transform-box:fill-box;transform-origin:center;transition-duration:.5s,0s;transition-property:transform,opacity}#flexibility,#flexibility-shadow,#generate,#generate-shadow,#monitor,#monitor-shadow{transition-delay:.2s,0s}#analyse,#analyse-shadow,#building,#building-shadow,#source,#source-shadow{transition-delay:.3s,0s}#efficiency,#efficiency-shadow,#plan,#plan-shadow,#storage,#storage-shadow{transition-delay:.4s,0s}#charge,#charge-shadow{transition-delay:.5s,0s}.active #analyse,.active #analyse-shadow,.active #building,.active #building-shadow,.active #charge,.active #charge-shadow,.active #efficiency,.active #efficiency-shadow,.active #flexibility,.active #flexibility-shadow,.active #generate,.active #generate-shadow,.active #monitor,.active #monitor-shadow,.active #plan,.active #plan-shadow,.active #source,.active #source-shadow,.active #storage,.active #storage-shadow{transform:rotate3d(1,1,1,0deg);-ms-transform:rotate3d(1,1,1,0deg);-moz-transform:rotate3d(1,1,1,0deg);-webkit-transform:rotate3d(1,1,1,0deg)}#path1,#path2,#path3,#sidePath1,#sidePath2,#sidePath3{opacity:0}.active #path1,.active #path2,.active #path3,.active #sidePath1,.active #sidePath2,.active #sidePath3{animation:dash .4s linear forwards;opacity:1;stroke-dasharray:1500;stroke-dashoffset:1500}@keyframes dash{0%{stroke-dashoffset:1500}to{stroke-dashoffset:3000}}}