* {
   box-sizing: border-box;
   /*     margin: 0;
    padding: 0; */
}

.logo {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   display: none;
}


/* HOME CONCERNED START */

#Plane_2,
#Plane,
#Cross_2,
#Cross,
#Cross_2,
#Cross_3 {
   opacity: 0;
}

.opacity-1 {
   opacity: 1 !important;
}

.home-concerned g#Line {
   stroke-dashoffset: 2243;
   stroke-dasharray: 2243;
   animation-name: line-anim;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
   fill: transparent;
   transition: ease all 0.25s;
}

@keyframes line-anim {
   0% {
      stroke-dashoffset: 2243;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-concerned #Cross,
.home-concerned #Cross_3,
.home-concerned #Cross_2 {
   animation: cross 12s linear infinite;
   transform-origin: 50% 50%;
   transform-box: fill-box;
   stroke-dasharray: 107px;
   /*     stroke-dashoffset: 107px; */
}

@keyframes cross {
   0% {
      transform: scale(1) translate(0px, 0px) rotate(0deg);
   }
   50% {
      transform: scale(1.2) translate(10px, 0px) rotate(180deg);
   }
   100% {
      transform: scale(1) translate(0px, 0px) rotate(360deg);
      stroke-dasharray: 0;
   }
}

#stats #Vector_18 {
   animation: stats_1 2s linear infinite 2s;
   transform-origin: 50% 50%;
   transform-box: fill-box;
}

@keyframes stats_1 {
   0% {
      transform: scale(1) translate(0px, 0px);
   }
   50% {
      transform: scale(1) translate(0px, 5px);
   }
   100% {
      transform: scale(1) translate(0px, 0px);
   }
}

#stats #Vector_15 {
   animation: stats_line1 2s linear infinite 2s;
   transform-origin: 50% 50%;
   stroke-dasharray: 7px;
   stroke-dashoffset: 7px;
}

@keyframes stats_line1 {
   to {
      stroke-dasharray: 0;
   }
}

#stats #Vector_17 {
   animation: stats_2 2s linear infinite 2s;
   transform-origin: 50% 50%;
   transform-box: fill-box;
}

@keyframes stats_2 {
   0% {
      transform: scale(1) translate(0px, 0px);
   }
   50% {
      transform: scale(1) translate(0px, 8px);
   }
   100% {
      transform: scale(1) translate(0px, 0px);
   }
}

#stats #Vector_14 {
   animation: stats_line2 5s linear infinite 2s;
   transform-origin: 50% 50%;
   stroke-dasharray: 13px;
}

@keyframes stats_line2 {
   to {
      stroke-dasharray: 0;
   }
}

#stats #Vector_16 {
   animation: stats_3 2s linear infinite 2s;
   transform-origin: 50% 50%;
   transform-box: fill-box;
}

@keyframes stats_3 {
   0% {
      transform: scale(1) translate(0px, 0px);
   }
   50% {
      transform: scale(1) translate(0px, 8px);
   }
   100% {
      transform: scale(1) translate(0px, 0px);
   }
}

#stats #Vector_13 {
   animation: stats_line3 5s linear infinite 2s;
   transform-origin: 50% 50%;
   stroke-dasharray: 33px;
}

@keyframes stats_line3 {
   to {
      stroke-dasharray: 0;
   }
}

.home-concerned g#hands {
   stroke-dashoffset: 2243;
   stroke-dasharray: 2243;
   animation-name: hands;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
   fill: transparent;
   transition: ease all 0.25s;
}

@keyframes hands {
   0% {
      stroke-dashoffset: 2243;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate(0px, 8px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-concerned g#Bubbles,
.home-concerned g#Bubbles_2 {
   animation: bubbles 5s linear infinite 2s;
   transform-origin: 50% 50%;
   transform-box: fill-box;
}

@keyframes bubbles {
   0% {
      transform: scale(1) translate(0px, 0px);
   }
   50% {
      transform: scale(1.2) translate(0px, -20px);
   }
   100% {
      transform: scale(1) translate(0px, 0px);
   }
}

.home-concerned #Vector_72,
.home-concerned #Vector_73 {
   animation: arrow_circle 8s linear infinite;
   transform-origin: 50% 50%;
   transform-box: fill-box;
}

@keyframes arrow_circle {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.home-concerned #Vector_72 path#Vector_76,
{
   transform: rotateX( 45deg);
}

.home-concerned #Vector_76 {
   stroke-dashoffset: 117;
   stroke-dasharray: 117;
   animation-name: arrow;
   animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
   fill: transparent;
   transition: ease all 0.25s;
}

@keyframes arrow {
   0% {
      stroke-dashoffset: 117;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate(0px, 10px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-concerned #Vector_71 {
   animation: arrow_round 4s linear infinite;
   transform-origin: 50% 50%;
   transform-box: fill-box;
   stroke-dasharray: 37px;
}

@keyframes arrow_round {
   0% {
      transform: translate(0px, 0px);
   }
   50% {
      transform: translate(0px, 10px);
      stroke-dasharray: 0px;
   }
   100% {
      transform: translate(0px, 0px);
   }
}

.home-concerned #Vector_19 {
   stroke-dashoffset: 290;
   stroke-dasharray: 290;
   animation-name: message;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
   fill: transparent;
   transition: ease all 0.25s;
}

@keyframes message {
   0% {
      stroke-dashoffset: 290;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate(0px, 10px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-concerned #Plane_2,
.home-concerned #Plane {
   stroke-dashoffset: 130;
   stroke-dasharray: 130;
   animation-name: plane2;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
   fill: #fff;
   transition: ease all 0.25s;
   animation-delay: 8s;
}

@keyframes plane2 {
   0% {
      stroke-dashoffset: 130;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* HOME CONCERNED END */


/* DETECTION TOOLS START */

.detection-tools #bubbles,
.detection-tools #bubbles_2 {
   animation: bubbles_2 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes bubbles_2 {
   to {
      transform: scale(1.2);
   }
}

.detection-tools #phone-gears path#Vector_50 {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.detection-tools #phone-gears path#Vector_49 {
   stroke-dashoffset: 459;
   stroke-dasharray: 459;
   animation: gear_big 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes gear_big {
   0% {
      transform: translate(0, 0);
      stroke-dashoffset: 459;
   }
   50% {
      transform: translate(0, 5px);
      stroke-dashoffset: 0;
   }
   100% {
      transform: translate(0, 0);
      stroke-dashoffset: 0;
   }
}

.detection-tools #plus path,
.detection-tools #plus_2 path {
   stroke-dashoffset: 29.39;
   stroke-dasharray: 29.39;
   animation: plus-new 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes plus-new {
   0% {
      transform: translate(0, 0);
      stroke-dashoffset: 29.39;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      transform: translate(0, 0);
      stroke-dashoffset: 0;
   }
}

.detection-tools #code-arrows path,
.detection-tools #code-arrows path,
.detection-tools #bug path,
.detection-tools #code-braces path {
   stroke-dashoffset: 365;
   stroke-dasharray: 365;
   animation: code-bracket 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes code-bracket {
   0% {
      transform: translate(0, 0);
      stroke-dashoffset: 365;
   }
   50% {
      transform: scale(1.25);
      stroke-dashoffset: 0;
   }
   100% {
      transform: translate(0, 0);
      stroke-dashoffset: 0;
   }
}

.detection-tools #ninja-blade path,
.detection-tools #ninja-blade_2 path {
   stroke-dashoffset: 130;
   stroke-dasharray: 130;
   animation-name: mb-gear;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 3s;
   transform-box: fill-box;
}

.detection-tools #tools path {
   stroke-dashoffset: 213;
   stroke-dasharray: 213;
   animation: screw-driver 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes screw-driver {
   0% {
      transform: translate(0, 0);
      stroke-dashoffset: 213;
   }
   50% {
      transform: translate(0, 10px);
      stroke-dashoffset: 0;
   }
   100% {
      transform: translate(0, 0);
      stroke-dashoffset: 0;
   }
}

.detection-tools #phone-stats path {
   stroke-dashoffset: 299;
   stroke-dasharray: 299;
   animation: detection-ph-stats 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes detection-ph-stats {
   0% {
      transform: translate(0, 0);
      stroke-dashoffset: 299;
   }
   50% {
      transform: rotateX(90deg);
      stroke-dashoffset: 0;
   }
   100% {
      transform: translate(0, 0);
      stroke-dashoffset: 0;
   }
}

.detection-tools #phone-gallery path {
   stroke-dashoffset: 162;
   stroke-dasharray: 162;
   animation: detection-ph-gallery 5s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes detection-ph-gallery {
   0% {
      transform: translate(0, 0);
      stroke-dashoffset: 162;
   }
   50% {
      transform: rotateY(90deg);
      stroke-dashoffset: 0;
   }
   100% {
      transform: translate(0, 0);
      stroke-dashoffset: 0;
   }
}

.detection-tools #phone-outer path {
   stroke-dashoffset: 1504;
   stroke-dasharray: 1504;
   animation: detection-ph-outer 6s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes detection-ph-outer {
   0% {
      transform: translate(0, 0);
      stroke-dashoffset: 1504;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      transform: translate(0, 0);
      stroke-dashoffset: 0;
   }
}


/* DETECTION TOOLS END 





/*  DURABILITY ILLUSTRATION START */

.durability-illustration #gear,
.durability-illustration #gear_2 {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.durability-illustration #plus path,
.durability-illustration #plus_2 path {
   stroke-dashoffset: 42.90;
   stroke-dasharray: 42.90;
   animation: durability-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes durability-plus {
   0% {
      stroke-dashoffset: 42.90;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.durability-illustration #ninja-blade path,
.durability-illustration #ninja-blade_2 path {
   stroke-dashoffset: 165;
   stroke-dasharray: 165;
   animation-name: durability-gear;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 3s;
   transform-box: fill-box;
}

@keyframes durability-gear {
   0% {
      stroke-dashoffset: 165;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.durability-illustration #bubbles,
.durability-illustration #bubbles_2 {
   animation-name: durability-bubble;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 3s;
   transform-box: fill-box;
}

@keyframes durability-bubble {
   0% {
      transform: scale(0.85);
   }
   50% {
      transform: scale(1);
   }
   100% {
      transform: scale(0.85);
   }
}

.durability-illustration #sheild path {
   stroke-dashoffset: 1414.4;
   stroke-dasharray: 1414.4;
   animation-name: durability-sheild;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 2s;
   transform-box: fill-box;
}

@keyframes durability-sheild {
   0% {
      stroke-dashoffset: 1414.4;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.durability-illustration #sheild-hand path {
   stroke-dashoffset: 513.5;
   stroke-dasharray: 513.5;
   animation-name: durability-sheild-hand;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 3s;
   transform-box: fill-box;
}

@keyframes durability-sheild-hand {
   0% {
      stroke-dashoffset: 513.5;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/*  DURABILITY ILLUSTRATION END */


/* MOBILE APP MARKETING START */

.mobile-app-marketing #plus path,
.mobile-app-marketing #plus_2 path {
   stroke-dashoffset: 42.90;
   stroke-dasharray: 42.90;
   animation: durability-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.mobile-app-marketing #ninja-blade path,
.mobile-app-marketing #ninja-blade_2 path,
.mobile-app-marketing #ninja-blade-lg path {
   stroke-dashoffset: 165;
   stroke-dasharray: 165;
   animation-name: durability-gear;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   animation-delay: 1s;
   transform-box: fill-box;
}

.mobile-app-marketing #bubbles,
.mobile-app-marketing #bubbles_2,
.mobile-app-marketing #bubbles_3 {
   animation-name: durability-bubble;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.mobile-app-marketing #magnifying path {
   stroke-dashoffset: 149.8;
   stroke-dasharray: 149.8;
   animation-name: mb-app-magnify;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes mb-app-magnify {
   0% {
      stroke-dashoffset: 149.8;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.mobile-app-marketing #calander path {
   stroke-dashoffset: 225.8;
   stroke-dasharray: 225.8;
   animation-name: mb-app-calander;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes mb-app-calander {
   0% {
      stroke-dashoffset: 225.8;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.mobile-app-marketing #Vector_134,
.mobile-app-marketing #Vector_135,
.mobile-app-marketing #Vector_136,
.mobile-app-marketing #Vector_137,
.mobile-app-marketing #Vector_138,
.mobile-app-marketing #Vector_139,
.mobile-app-marketing #Vector_140,
.mobile-app-marketing #Vector_141,
.mobile-app-marketing #Vector_142,
.mobile-app-marketing #Vector_143,
.mobile-app-marketing #Vector_144,
.mobile-app-marketing #Vector_145 {
   stroke-dashoffset: 50.4;
   stroke-dasharray: 50.4;
   animation-name: mb-app-calander-square;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   fill: unset;
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke: #262962;
}

.mobile-app-marketing #loud-speaker #Vector_24,
.mobile-app-marketing #loud-speaker #Vector_25,
.mobile-app-marketing #loud-speaker #Vector_26,
.mobile-app-marketing #loud-speaker #Vector_27,
.mobile-app-marketing #loud-speaker #Vector_28 {
   stroke-dashoffset: 160.3;
   stroke-dasharray: 160.3;
   animation-name: mb-app-loud-speaker;
   animation-duration: 7s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes mb-app-loud-speaker {
   0% {
      stroke-dashoffset: 160.3;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.mobile-app-marketing #loud-speaker #Vector_19,
.mobile-app-marketing #loud-speaker #Vector_20,
.mobile-app-marketing #loud-speaker #Vector_21,
.mobile-app-marketing #loud-speaker #Vector_22,
.mobile-app-marketing #loud-speaker #Vector_23,
.mobile-app-marketing #loud-speaker #Vector_29 {
   stroke-dashoffset: 28.37;
   stroke-dasharray: 28.37;
   animation-name: mb-app-loudspeaker-dash;
   animation-duration: 7s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes mb-app-loudspeaker-dash {
   0% {
      stroke-dashoffset: 28.37;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate( 8px, 0);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.mobile-app-marketing #users path {
   stroke-dashoffset: 142.19;
   stroke-dasharray: 142.19;
   animation-name: mb-app-users;
   animation-duration: 7s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes mb-app-users {
   0% {
      stroke-dashoffset: 142.19;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.mobile-app-marketing #hand {
   animation-name: mb-app-hand;
   animation-duration: 3s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes mb-app-hand {
   0% {
      transform: scale(0.98);
   }
   50% {
      transform: scale(1) translate( 0, 5px);
   }
   100% {
      transform: scale(0.98);
   }
}

.mobile-app-marketing #phone path {
   stroke-dashoffset: 1053.5;
   stroke-dasharray: 1053.5;
   animation-name: mb-mobile-outer;
   animation-duration: 7s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes mb-mobile-outer {
   0% {
      stroke-dashoffset: 1053.5;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.mobile-app-marketing #phone-stats path,
.mobile-app-marketing #phone-noti path {
   stroke-dashoffset: 127.4;
   stroke-dasharray: 127.4;
   animation-name: mb-mobile-lines;
   animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes mb-mobile-lines {
   0% {
      stroke-dashoffset: 127.4;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* MOBILE APP MARKETING END */


/* TESTING CRASHES AND DETECTION START */

.testing-crashes-detect #plus path,
.testing-crashes-detect #plus_2 path {
   stroke-dashoffset: 42.90;
   stroke-dasharray: 42.90;
   animation: durability-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.testing-crashes-detect #ninja-blade path,
.testing-crashes-detect #ninja-blade_2 path {
   stroke-dashoffset: 165;
   stroke-dasharray: 165;
   animation-name: durability-gear;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   animation-delay: 1s;
   transform-box: fill-box;
}

.testing-crashes-detect #bubbles,
.testing-crashes-detect #bubbles_2 {
   animation-name: durability-bubble;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.testing-crashes-detect #hazard path {
   stroke-dashoffset: 216.8;
   stroke-dasharray: 216.8;
   animation-name: tsd-hazard;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes tsd-hazard {
   0% {
      stroke-dashoffset: 216.8;
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1.05);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.testing-crashes-detect #code-braces path {
   stroke-dashoffset: 159.2;
   stroke-dasharray: 159.2;
   animation-name: tsd-braces;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0;
}

@keyframes tsd-braces {
   0% {
      stroke-dashoffset: 159.2;
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1.1);
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.testing-crashes-detect #bug-finder #Vector_8,
.testing-crashes-detect #bug-finder #Vector_9,
.testing-crashes-detect #bug-finder #Vector_10 {
   stroke-dashoffset: 602;
   stroke-dasharray: 602;
   animation-name: tsd-bug-finder;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes tsd-bug-finder {
   0% {
      stroke-dashoffset: 602;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.testing-crashes-detect #bug-finder #Vector_11 {
   stroke-dashoffset: 210;
   stroke-dasharray: 210;
   animation-name: tsd-bug-finder-bug;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0.1;
}

@keyframes tsd-bug-finder-bug {
   0% {
      stroke-dashoffset: 210;
   }
   50% {
      stroke-dashoffset: 0;
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.testing-crashes-detect #code-bracket path {
   stroke-dashoffset: 209.9;
   stroke-dasharray: 209.9;
   animation-name: tsd-code-bracket;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0.3;
}

@keyframes tsd-code-bracket {
   0% {
      stroke-dashoffset: 209.9;
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1.1);
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.testing-crashes-detect #bug-alert path {
   stroke-dashoffset: 276;
   stroke-dasharray: 276;
   animation-name: tsd-bug-alert;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0.3;
}

@keyframes tsd-bug-alert {
   0% {
      stroke-dashoffset: 276;
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1.1);
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.testing-crashes-detect #phone path {
   stroke-dashoffset: 480.25;
   stroke-dasharray: 480.25;
   animation-name: tsd-phone;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes tsd-phone {
   0% {
      stroke-dashoffset: 480.25;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.testing-crashes-detect #phone-lines path {
   stroke-dashoffset: 188.9;
   stroke-dasharray: 188.9;
   animation-name: tsd-phone-lines;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0.5;
}

@keyframes tsd-phone-lines {
   0% {
      stroke-dashoffset: 188.9;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate( 3px, -3px);
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* TESTING CRASHES AND DETECTION END */


/* MANUAL IOS & ANDROID APP START */

.manual-ios-android #plus path,
.manual-ios-android #plus_2 path {
   stroke-dashoffset: 42.90;
   stroke-dasharray: 42.90;
   animation: durability-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.manual-ios-android #ninja-blade path,
.manual-ios-android #ninja-blade_2 path {
   stroke-dashoffset: 165;
   stroke-dasharray: 165;
   animation-name: durability-gear;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   animation-delay: 1s;
   transform-box: fill-box;
}

.manual-ios-android #bubbles,
.manual-ios-android #bubbles_2 {
   animation-name: durability-bubble;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.manual-ios-android #android {
   stroke-dashoffset: 902;
   stroke-dasharray: 902;
   animation-name: manual-android;
   animation-duration: 12s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   /*     animation-delay: 3s; */
   transform-box: fill-box;
   transform-origin: center;
}

.manual-ios-android #gear-big path {
   stroke-dashoffset: 459;
   stroke-dasharray: 459;
   animation: gear_big 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.manual-ios-android #apple {
   stroke-dashoffset: 281;
   stroke-dasharray: 281;
   animation-name: manual-apple;
   animation-duration: 12s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   /*     animation-delay: 4s; */
   transform-box: fill-box;
   transform-origin: center;
}

.manual-ios-android #bucket {
   stroke-dashoffset: 289.5;
   stroke-dasharray: 289.5;
   animation: ios-and-bucket 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ios-and-bucket {
   0% {
      stroke-dashoffset: 289.5;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate( 0, 5px);
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.manual-ios-android #mobile {
   stroke-dashoffset: 612.9;
   stroke-dasharray: 612.9;
   animation: ios-and-mobile 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ios-and-mobile {
   0% {
      stroke-dashoffset: 612.9;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate( 0, 5px);
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.manual-ios-android #message-bubble {
   stroke-dashoffset: 280.7;
   stroke-dasharray: 280.7;
   animation: ios-and-message-bubble 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ios-and-message-bubble {
   0% {
      stroke-dashoffset: 280.7;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate( 0, 8px);
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.manual-ios-android #wrench {
   stroke-dashoffset: 587.8;
   stroke-dasharray: 587.8;
   animation: ios-and-message-wrench 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ios-and-message-wrench {
   0% {
      stroke-dashoffset: 587.8;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate( 0, -8px);
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.manual-ios-android #code-window {
   stroke-dashoffset: 359.7;
   stroke-dasharray: 359.7;
   animation: ios-and-message-code 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ios-and-message-code {
   0% {
      stroke-dashoffset: 359.7;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate( 0, -8px);
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.manual-ios-android #scale {
   stroke-dashoffset: 444.7;
   stroke-dasharray: 444.7;
   animation: ios-and-message-scale 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ios-and-message-scale {
   0% {
      stroke-dashoffset: 444.7;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate( 0, -10px);
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.manual-ios-android #tower {
   stroke-dashoffset: 468.4;
   stroke-dasharray: 468.4;
   animation: ios-and-message-tower 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ios-and-message-tower {
   0% {
      stroke-dashoffset: 468.4;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate( 0, -10px);
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* MANUAL IOS & ANDROID APP END */


/* GOING BEYOND BUG FIXING START */

.going-beyond-bug-fix #tick-circle,
.going-beyond-bug-fix #tick-circle_2 {
   stroke-dashoffset: 244.5;
   stroke-dasharray: 244.5;
   animation-name: going-ticks;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes going-ticks {
   0% {
      stroke-dashoffset: 244.5;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.going-beyond-bug-fix #magnify {
   stroke-dashoffset: 256.4;
   stroke-dasharray: 256.4;
   animation-name: going-magnify;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes going-magnify {
   0% {
      stroke-dashoffset: 256.4;
      transform: scale(0.85);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(0.85);
   }
}

.going-beyond-bug-fix #bubbles,
.going-beyond-bug-fix #bubbles_2 {
   animation-name: durability-bubble;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.going-beyond-bug-fix #ninja-blade path,
.going-beyond-bug-fix #ninja-blade_2 path {
   stroke-dashoffset: 165;
   stroke-dasharray: 165;
   animation-name: durability-gear;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   animation-delay: 1s;
   transform-box: fill-box;
}

.going-beyond-bug-fix #plus path,
.going-beyond-bug-fix #plus_2 path {
   stroke-dashoffset: 42.90;
   stroke-dasharray: 42.90;
   animation: durability-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.going-beyond-bug-fix #bottom {
   stroke-dashoffset: 612.5;
   stroke-dasharray: 612.5;
   animation-name: going-bottom;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes going-bottom {
   0% {
      stroke-dashoffset: 612.5;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.going-beyond-bug-fix #hammer {
   stroke-dashoffset: 191.8;
   stroke-dasharray: 191.8;
   animation-name: going-hammer;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes going-hammer {
   0% {
      stroke-dashoffset: 191.8;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate(0, -10px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.going-beyond-bug-fix #lights {
   stroke-dashoffset: 111.1;
   stroke-dasharray: 111.1;
   animation-name: going-lights;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes going-lights {
   0% {
      stroke-dashoffset: 111.1;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate(0, 10px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.going-beyond-bug-fix #bug {
   stroke-dashoffset: 359.7;
   stroke-dasharray: 359.7;
   animation-name: going-bug;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0;
}

@keyframes going-bug {
   0% {
      stroke-dashoffset: 359.7;
   }
   50% {
      stroke-dashoffset: 0;
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.going-beyond-bug-fix #screen-lines {
   stroke-dashoffset: 276.8;
   stroke-dasharray: 276.8;
   animation-name: going-screen-lines;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes going-screen-lines {
   0% {
      stroke-dashoffset: 276.8;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.going-beyond-bug-fix #disc {
   stroke-dashoffset: 769.2;
   stroke-dasharray: 769.2;
   animation-name: going-disc;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes going-disc {
   0% {
      stroke-dashoffset: 769.2;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* GOING BEYOND BUG FIXING END */


/* APP USABILITY TESTING START */

.app-usability-testing #bubbles,
.app-usability-testing #bubbles_2 {
   animation-name: durability-bubble;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.app-usability-testing #ninja-blade path,
.app-usability-testing #ninja-blade_2 path {
   stroke-dashoffset: 165;
   stroke-dasharray: 165;
   animation-name: durability-gear;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   animation-delay: 1s;
   transform-box: fill-box;
}

.app-usability-testing #plus path,
.app-usability-testing #plus_2 path {
   stroke-dashoffset: 42.90;
   stroke-dasharray: 42.90;
   animation: durability-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.app-usability-testing #lines {
   stroke-dashoffset: 146;
   stroke-dasharray: 146;
   animation-name: ap-use-lines;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes ap-use-lines {
   0% {
      stroke-dashoffset: 146;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-usability-testing #lines-circles {
   stroke-dashoffset: 199.8;
   stroke-dasharray: 199.8;
   animation-name: ap-us-circles;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes ap-us-circles {
   0% {
      stroke-dashoffset: 199.8;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-usability-testing #browser-window {
   stroke-dashoffset: 943.8;
   stroke-dasharray: 943.8;
   animation-name: ap-us-windows;
   animation-duration: 7s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes ap-us-windows {
   0% {
      stroke-dashoffset: 943.8;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-usability-testing #app-window #Vector_88 {
   animation-name: mb-app-hand;
   animation-duration: 3s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.app-usability-testing #app-window path#Vector_76,
.app-usability-testing #app-window path#Vector_77,
.app-usability-testing #app-window path#Vector_78,
.app-usability-testing #app-window path#Vector_79,
.app-usability-testing #app-window path#Vector_80,
.app-usability-testing #app-window path#Vector_81,
.app-usability-testing #app-window path#Vector_82,
.app-usability-testing #app-window path#Vector_83,
.app-usability-testing #app-window path#Vector_84,
.app-usability-testing #app-window path#Vector_85,
.app-usability-testing #app-window path#Vector_86,
.app-usability-testing #app-window path#Vector_87 {
   stroke-dashoffset: 783.7;
   stroke-dasharray: 783.7;
   animation-name: ap-us-windows;
   animation-duration: 7s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes ap-us-windows {
   0% {
      stroke-dashoffset: 783.7;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* APP USABILITY TESTING END */


/* APP ANALYTICS START */

.app-analytics #bubbles,
.app-analytics #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes app-analytics-bubbles {
   0% {
      transform: scale(0.9);
   }
   50% {
      transform: scale(1);
   }
   100% {
      transform: scale(0.9);
   }
}

.app-analytics #ninja-blade path,
.app-analytics #ninja-blade_2 path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   /*     fill: transparent; */
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes app-analytics-ninja-blade {
   0% {
      stroke-dashoffset: 2168;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-analytics #plus path,
.app-analytics #plus_2 path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-analytics-plus {
   0% {
      stroke-dashoffset: 79.4;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-analytics #stat-1 path {
   stroke-dashoffset: 430.8;
   stroke-dasharray: 430.8;
   animation: app-analytics-stat-1 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-analytics-stat-1 {
   0% {
      stroke-dashoffset: 430.8;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-analytics #house path {
   stroke-dashoffset: 1201.2;
   stroke-dasharray: 1201.2;
   animation: app-analytics-house 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-analytics-house {
   0% {
      stroke-dashoffset: 1201.2;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-analytics #house #Vector_3,
.app-analytics #house #Vector_4,
.app-analytics #house #Vector_5,
.app-analytics #house #Vector_6,
.app-analytics #house #Vector_7,
.app-analytics #house #Vector_8,
.app-analytics #house #Vector_9,
.app-analytics #house #Vector_10,
.app-analytics #house #Vector_11,
.app-analytics #house #Vector_12,
.app-analytics #house #Vector_13,
.app-analytics #house #Vector_14 {
   animation: app-analytics-house-window 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-analytics-house-window {
   0% {
      transform: scale(0.8);
   }
   50% {
      transform: scale(1);
   }
   100% {
      transform: scale(0.8);
   }
}

.app-analytics #pie-chart path {
   stroke-dashoffset: 820.2;
   stroke-dasharray: 820.2;
   animation: app-analytics-pie-chart 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-analytics-pie-chart {
   0% {
      stroke-dashoffset: 820.2;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-analytics #stats-lines path {
   stroke-dashoffset: 3392;
   stroke-dasharray: 3392;
   animation: app-analytics-stats-lines 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-analytics-stats-lines {
   0% {
      stroke-dashoffset: 3392;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-analytics #mobile path {
   stroke-dashoffset: 2204.9;
   stroke-dasharray: 2204.9;
   animation: app-analytics-mobile 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-analytics-mobile {
   0% {
      stroke-dashoffset: 2204.9;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-analytics #paper-chart path {
   stroke-dashoffset: 658.3;
   stroke-dasharray: 658.3;
   animation: app-analytics-paper-chart 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-analytics-paper-chart {
   0% {
      stroke-dashoffset: 658.3;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-analytics #magnify path {
   stroke-dashoffset: 411.3;
   stroke-dasharray: 411.3;
   animation: app-analytics-magnify 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-analytics-magnify {
   0% {
      stroke-dashoffset: 411.3;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* APP ANALYTICS END */


/* APP CAMPAIGN START */

.app-campaigns #bubbles,
.app-campaigns #bubbles_2,
.app-campaigns #bubbles_3 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.app-campaigns #ninja-blade path,
.app-campaigns #ninja-blade_2 path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.app-campaigns #plus path,
.app-campaigns #plus_2 path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.app-campaigns #gears path {
   animation-name: app-campaign-gear;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-campaign-gear {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.app-campaigns #outer-circle {
   stroke-dashoffset: 189;
   stroke-dasharray: 189;
   animation-name: app-campaign-outer-line;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-campaign-outer-line {
   0% {
      stroke-dashoffset: 189;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-campaigns #magnify path {
   stroke-dashoffset: 540;
   stroke-dasharray: 540;
   animation: app-campaign-magnify 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-campaign-magnify {
   0% {
      stroke-dashoffset: 540;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-campaigns #stat-lines path {
   stroke-dashoffset: 846.3;
   stroke-dasharray: 846.3;
   animation: app-campaign-stat-lines 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-campaign-stat-lines {
   0% {
      stroke-dashoffset: 846.3;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-campaigns #pie-chart path {
   stroke-dashoffset: 1606.1;
   stroke-dasharray: 1606.1;
   animation: app-campaign-pie-chart 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-campaign-pie-chart {
   0% {
      stroke-dashoffset: 1606.1;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-campaigns #speaker path {
   stroke-dashoffset: 465;
   stroke-dasharray: 465;
   animation: app-campaign-speaker 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-campaign-speaker {
   0% {
      stroke-dashoffset: 465;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.app-campaigns #mobile path {
   stroke-dashoffset: 4732;
   stroke-dasharray: 4732;
   animation: app-campaign-mobile 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes app-campaign-mobile {
   0% {
      stroke-dashoffset: 4732;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* APP CAMPAIGN END */


/* AUTOMATED SEGMENTAION START */

.automated-segmentaion #bubbles,
.automated-segmentaion #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.automated-segmentaion #ninja-blade path,
.automated-segmentaion #ninja-blade_2 path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.automated-segmentaion #plus path,
.automated-segmentaion #plus_2 path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.automated-segmentaion #user-tree path {
   stroke-dashoffset: 437.2;
   stroke-dasharray: 437.2;
   animation: auto-seg-user 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes auto-seg-user {
   0% {
      stroke-dashoffset: 437.2;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.automated-segmentaion #pie-chart path {
   stroke-dashoffset: 1619.3;
   stroke-dasharray: 1619.3;
   animation: auto-seg-pie 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes auto-seg-pie {
   0% {
      stroke-dashoffset: 1619.3;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.automated-segmentaion #target-user path {
   stroke-dashoffset: 1640.5;
   stroke-dasharray: 1640.5;
   animation: auto-seg-target 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes auto-seg-target {
   0% {
      stroke-dashoffset: 1640.5;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.automated-segmentaion #lines path {
   stroke-dashoffset: 673;
   stroke-dasharray: 673;
   animation: auto-seg-lines 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes auto-seg-lines {
   0% {
      stroke-dashoffset: 673;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* AUTOMATED SEGMENTAION END */


/* OPTIMIZED APP START */

.optimized-app #gears path {
   animation-name: app-campaign-gear;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.optimized-app #bubbles,
.optimized-app #bubbles_2,
.optimized-app #bubbles_3,
.optimized-app #bubbles_4 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.optimized-app #ninja-blade path,
.optimized-app #ninja-blade_2 path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.optimized-app #plus path,
.optimized-app #plus_2 path,
.optimized-app #plus_3 path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.optimized-app #battery path,
.optimized-app #battery #Vector_31 path {
   stroke-dashoffset: 1174.8;
   stroke-dasharray: 1174.8;
   animation: optimized-app-battery 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes optimized-app-battery {
   0% {
      stroke-dashoffset: 1174.8;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.optimized-app #watch path {
   stroke-dashoffset: 1047.6;
   stroke-dasharray: 1047.6;
   animation: optimized-app-watch 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes optimized-app-watch {
   0% {
      stroke-dashoffset: 1047.6;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.optimized-app #magnify path {
   stroke-dashoffset: 446.7;
   stroke-dasharray: 446.7;
   animation: optimized-app-magnify 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes optimized-app-magnify {
   0% {
      stroke-dashoffset: 446.7;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.optimized-app #messages path {
   animation: optimized-app-messages 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes optimized-app-messages {
   0% {
      transform: translate(0, 0px);
   }
   50% {
      transform: translate(0, 30px);
   }
   100% {
      transform: translate(0, 0px);
   }
}

.optimized-app #screen-lines path {
   stroke-dashoffset: 433.3;
   stroke-dasharray: 433.3;
   animation: optimized-app-screen-lines 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes optimized-app-screen-lines {
   0% {
      stroke-dashoffset: 433.3;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* OPTIMIZED APP END */


/* DEDICATED QUALITY ASSURANCE START */

.dedicated-quality-assurance #service path {
   stroke-dashoffset: 415.9;
   stroke-dasharray: 415.9;
   animation: dqs-service 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dqs-service {
   0% {
      stroke-dashoffset: 415.9;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.dedicated-quality-assurance #guarantee path {
   stroke-dashoffset: 271.7;
   stroke-dasharray: 271.7;
   animation: dqs-guarantee 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dqs-guarantee {
   0% {
      stroke-dashoffset: 271.7;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.dedicated-quality-assurance #standard path {
   stroke-dashoffset: 236.1;
   stroke-dasharray: 236.1;
   animation: dqs-standard 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dqs-standard {
   0% {
      stroke-dashoffset: 236.1;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.dedicated-quality-assurance #customer path {
   stroke-dashoffset: 1593;
   stroke-dasharray: 1593;
   animation: dqs-customer 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dqs-customer {
   0% {
      stroke-dashoffset: 1593;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.dedicated-quality-assurance #business path {
   stroke-dashoffset: 268;
   stroke-dasharray: 268;
   animation: dqs-business 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dqs-business {
   0% {
      stroke-dashoffset: 268;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.dedicated-quality-assurance #satisfaction path {
   stroke-dashoffset: 223;
   stroke-dasharray: 223;
   animation: dqs-satisfaction 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dqs-satisfaction {
   0% {
      stroke-dashoffset: 223;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.dedicated-quality-assurance #improvements path {
   stroke-dashoffset: 621;
   stroke-dasharray: 621;
   animation: dqs-improvements 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dqs-improvements {
   0% {
      stroke-dashoffset: 621;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.dedicated-quality-assurance #qas-arrow {
   /*   stroke-dashoffset: 621;
    stroke-dasharray: 621; */
   animation: dqs-qas-arrow 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
   stroke-opacity: 0.5;
}

@keyframes dqs-qas-arrow {
   0% {}
   50% {
      transform: scale(1.05);
      stroke-opacity: 1;
   }
   100% {}
}

.dedicated-quality-assurance #qas-text path {
   stroke-dashoffset: 167.8;
   stroke-dasharray: 167.8;
   animation: dqs-qas-text 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dqs-qas-text {
   0% {
      stroke-dashoffset: 167.8;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.dedicated-quality-assurance #qas-lines path {
   stroke-dashoffset: 1085;
   stroke-dasharray: 1085;
   animation: dqs-qas-lines 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
   stroke-opacity: 0.6;
}

@keyframes dqs-qas-lines {
   0% {
      stroke-dashoffset: 1085;
   }
   50% {
      stroke-dashoffset: 0;
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.dedicated-quality-assurance #bubbles,
.dedicated-quality-assurance #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.dedicated-quality-assurance #ninja-blade path,
.dedicated-quality-assurance #ninja-blade_2 path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.dedicated-quality-assurance #plus path,
.dedicated-quality-assurance #plus_2 path,
.dedicated-quality-assurance #plus_3 path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}


/* DEDICATED QUALITY ASSURANCE END */


/* HAVING A HOLISTIC APPROACH START */

.having-holistic-approach #gear path {
   animation-name: hha-gear;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes hha-gear {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.having-holistic-approach #rotate-arrow {
   animation-name: hha-rotate-arrow;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes hha-rotate-arrow {
   0% {
      transform: rotate(0deg);
   }
   50% {
      transform: rotate(80deg) scale(0.85);
   }
   100% {
      transform: rotate(0deg);
   }
}

.having-holistic-approach #lines path,
.having-holistic-approach #dots path {
   stroke-dashoffset: 283;
   stroke-dasharray: 283;
   animation: hha-lines 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes hha-lines {
   0% {
      stroke-dashoffset: 283;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.having-holistic-approach #bubbles,
.having-holistic-approach #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.having-holistic-approach #ninja-blade path,
.having-holistic-approach #ninja-blade_2 path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.having-holistic-approach #plus path,
.having-holistic-approach #plus_2 path,
.having-holistic-approach #plus_3 path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.having-holistic-approach #user path {
   stroke-dashoffset: 197;
   stroke-dasharray: 197;
   animation: hha-user 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes hha-user {
   0% {
      stroke-dashoffset: 197;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.having-holistic-approach #envelope path {
   stroke-dashoffset: 362;
   stroke-dasharray: 362;
   animation: hha-envelope 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes hha-envelope {
   0% {
      stroke-dashoffset: 362;
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(0.9);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.having-holistic-approach #tools path {
   stroke-dashoffset: 134;
   stroke-dasharray: 134;
   animation: hha-tools 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes hha-tools {
   0% {
      stroke-dashoffset: 134;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.having-holistic-approach #mobile path {
   stroke-dashoffset: 1011;
   stroke-dasharray: 1011;
   animation: hha-mobile 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes hha-mobile {
   0% {
      stroke-dashoffset: 1011;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* HAVING A HOLISTIC APPROACH END */


/* THRIVING IN COVERING ALL CONERS START */

.thriving-in-covering #laptop path {
   stroke-dashoffset: 369;
   stroke-dasharray: 369;
   animation: tic-laptop 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes tic-laptop {
   0% {
      stroke-dashoffset: 369;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.thriving-in-covering #bubbles,
.thriving-in-covering #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.thriving-in-covering #ninja-blade path,
.thriving-in-covering #ninja-blade_2 path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.thriving-in-covering #plus path,
.thriving-in-covering #plus_2 path,
.thriving-in-covering #plus_3 path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.thriving-in-covering #clock path {
   stroke-dashoffset: 225;
   stroke-dasharray: 225;
   animation: tic-clock 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes tic-clock {
   0% {
      stroke-dashoffset: 225;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translateY(25px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.thriving-in-covering #long-hands path {
   stroke-dashoffset: 904;
   stroke-dasharray: 904;
   animation: tic-long-hands 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes tic-long-hands {
   0% {
      stroke-dashoffset: 904;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* THRIVING IN COVERING ALL CONERS END */


/* WOOCOMMERCE START */

.woocommerce #bubbles,
.woocommerce #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.woocommerce #ninja-blade path,
.woocommerce #ninja-blade_2 path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.woocommerce #plus path,
.woocommerce #plus_2 path,
.woocommerce #plus_3 path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.woocommerce #circle-lines {
   animation-name: woo-circle-lines;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes woo-circle-lines {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.woocommerce #woo {
   stroke-dashoffset: 3358.2;
   stroke-dasharray: 3358.2;
   animation: woo-woocommerce 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes woo-woocommerce {
   0% {
      stroke-dashoffset: 3358.2;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* WOOCOMMERCE END */


/* SHOPIFY START */

.shopify #bubbles,
.shopify #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.shopify #ninja-blade path,
.shopify #ninja-blade_2 path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.shopify #plus path,
.shopify #plus_2 path,
.shopify #plus_3 path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.shopify #circle-lines {
   animation-name: woo-circle-lines;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.shopify #shopify-logo path {
   stroke-dashoffset: 3339.9;
   stroke-dasharray: 3339.9;
   animation: woo-shopify 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes woo-shopify {
   0% {
      stroke-dashoffset: 3339.9;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* SHOPIFY END */


/* OPENCART START */

.opencart #bubbles,
.opencart #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.opencart #ninja-blade path,
.opencart #ninja-blade_2 path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.opencart #plus path,
.opencart #plus_2 path,
.opencart #plus_3 path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.opencart #circle-lines {
   animation-name: woo-circle-lines;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.opencart #opencart-logo path {
   stroke-dashoffset: 1451.5;
   stroke-dasharray: 1451.5;
   animation: woo-opencart 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes woo-opencart {
   0% {
      stroke-dashoffset: 1451.5;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* OPENCART END */


/* MAGENTO START */

.magento #bubbles,
.magento #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.magento #ninja-blade path,
.magento #ninja-blade_2 path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.magento #plus path,
.magento #plus_2 path,
.magento #plus_3 path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.magento #circle-lines {
   animation-name: woo-circle-lines;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.magento #magento-logo path {
   stroke-dashoffset: 1762.9;
   stroke-dasharray: 1762.9;
   animation: woo-magento 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes woo-magento {
   0% {
      stroke-dashoffset: 1762.9;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* MAGENTO END */


/* ECOMMERCE YOUR PATHWAY TO SUCESSFUL START */

.ecommerce-your-pathway #bubbles,
.ecommerce-your-pathway #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.ecommerce-your-pathway #ninja-blade path,
.ecommerce-your-pathway #ninja-blade_2 path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.ecommerce-your-pathway #plus path,
.ecommerce-your-pathway #plus_2 path,
.ecommerce-your-pathway #plus_3 path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.ecommerce-your-pathway #bucket path {
   stroke-dashoffset: 663.5;
   stroke-dasharray: 663.5;
   animation: eyp-bucket 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes eyp-bucket {
   0% {
      stroke-dashoffset: 663.5;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-your-pathway #clock path {
   stroke-dashoffset: 581.7;
   stroke-dasharray: 581.7;
   animation: eyp-clock 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes eyp-clock {
   0% {
      stroke-dashoffset: 581.7;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-your-pathway #location-search path {
   stroke-dashoffset: 515.9;
   stroke-dasharray: 515.9;
   animation: eyp-location-search 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes eyp-location-search {
   0% {
      stroke-dashoffset: 515.9;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-your-pathway #lock path {
   stroke-dashoffset: 638.1;
   stroke-dasharray: 638.1;
   animation: eyp-lock 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes eyp-lock {
   0% {
      stroke-dashoffset: 638.1;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-your-pathway #wheel-cart path {
   stroke-dashoffset: 431.8;
   stroke-dasharray: 431.8;
   animation: eyp-wheel-cart 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes eyp-wheel-cart {
   0% {
      stroke-dashoffset: 431.8;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-your-pathway #laptop path {
   stroke-dashoffset: 2367.5;
   stroke-dasharray: 2367.5;
   animation: eyp-laptop 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes eyp-laptop {
   0% {
      stroke-dashoffset: 2367.5;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* ECOMMERCE YOUR PATHWAY TO SUCESSFUL END */


/* ECOMMERCE CUSTOMIZED SHOP START */

.ecommerce-cuztomized-shop {}

.ecommerce-cuztomized-shop #message path {
   stroke-dashoffset: 413.3;
   stroke-dasharray: 413.3;
   animation: ecs-message 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ecs-message {
   0% {
      stroke-dashoffset: 413.3;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-cuztomized-shop #location path {
   stroke-dashoffset: 341.4;
   stroke-dasharray: 341.4;
   animation: ecs-location 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ecs-location {
   0% {
      stroke-dashoffset: 341.4;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-cuztomized-shop #bubbles,
.ecommerce-cuztomized-shop #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.ecommerce-cuztomized-shop #gears path {
   animation-name: ecs-gear;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ecs-gear {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.ecommerce-cuztomized-shop #search path {
   stroke-dashoffset: 331.1;
   stroke-dasharray: 331.1;
   animation: ecs-search 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ecs-search {
   0% {
      stroke-dashoffset: 331.1;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-cuztomized-shop #bucket path {
   stroke-dashoffset: 544.8;
   stroke-dasharray: 544.8;
   animation: ecs-bucket 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ecs-bucket {
   0% {
      stroke-dashoffset: 544.8;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-cuztomized-shop #screen path {
   stroke-dashoffset: 3095.4;
   stroke-dasharray: 3095.4;
   animation: ecs-screen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ecs-screen {
   0% {
      stroke-dashoffset: 3095.4;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* ECOMMERCE CUSTOMIZED SHOP END */


/* CONTACT US START */

.contact-us #bubbles,
.contact-us #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.contact-us #ninja-blade path,
.contact-us #ninja-blade_2 path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.contact-us #plus path,
.contact-us #plus_2 path,
.contact-us #plus_3 path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.contact-us #gears path,
.contact-us #world,
.contact-us #at {
   animation-name: ecs-gear;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ecs-gear {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.contact-us #telephone .dialer {
   animation-name: contact-us;
   animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes contact-us {
   0 {
      transform: rotate(0deg);
   }
   50% {
      transform: rotate(180deg);
   }
   100% {
      transform: rotate(0deg);
   }
}

.contact-us #notes path {
   stroke-dashoffset: 1998;
   stroke-dasharray: 1998;
   animation: contact-us-notes 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes contact-us-notes {
   0% {
      stroke-dashoffset: 1998;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.contact-us #pencil path {
   animation: contact-us-pencil 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes contact-us-pencil {
   0% {
      transform: translate(0px, 0);
   }
   50% {
      transform: translate(-50px, 0px);
   }
   100% {
      transform: translate(0px, 0);
   }
}

.contact-us #telephone path {
   stroke-dashoffset: 2672;
   stroke-dasharray: 2672;
   animation: contact-us-telephone 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes contact-us-telephone {
   0% {
      stroke-dashoffset: 2672;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.contact-us #curved-line path {
   stroke-dashoffset: 980;
   stroke-dasharray: 980;
   animation: contact-us-curved-line 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes contact-us-curved-line {
   0% {
      stroke-dashoffset: 980;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.contact-us #email path {
   stroke-dashoffset: 744;
   stroke-dasharray: 744;
   animation: contact-us-email 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes contact-us-email {
   0% {
      stroke-dashoffset: 744;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* CONTACT US END */


/* CREATIVE DIRECTION START */

.CDS-why-need-creative #target path {
   stroke-dashoffset: 256;
   stroke-dasharray: 256;
   animation: cds-target 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cds-target {
   0% {
      stroke-dashoffset: 256;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.CDS-why-need-creative #gear-big {
   stroke-dashoffset: 1659;
   stroke-dasharray: 1659;
   animation: cds-gear-big 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cds-gear-big {
   0% {
      stroke-dashoffset: 1659;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.CDS-why-need-creative #gear-small {
   animation-name: cds-gear-small;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cds-gear-small {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.CDS-why-need-creative #laptop {
   stroke-dashoffset: 3353;
   stroke-dasharray: 3353;
   animation: cds-laptop 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cds-laptop {
   0% {
      stroke-dashoffset: 3353;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.CDS-why-need-creative #laptop-lights {
   stroke-dashoffset: 413;
   stroke-dasharray: 413;
   animation: cds-laptop-lights 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cds-laptop-lights {
   0% {
      stroke-dashoffset: 413;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.CDS-why-need-creative #bubbles,
.CDS-why-need-creative #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.CDS-why-need-creative #ninja-blade path,
.CDS-why-need-creative #ninja-blade_2 path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.CDS-why-need-creative #plus path,
.CDS-why-need-creative #plus_2 path,
.CDS-why-need-creative #plus_3 path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.CDS-why-need-creative #search {
   stroke-dashoffset: 1191;
   stroke-dasharray: 1191;
   animation: cds-search 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cds-search {
   0% {
      stroke-dashoffset: 1191;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.CDS-why-need-creative #clock {
   stroke-dashoffset: 682;
   stroke-dasharray: 682;
   animation: cds-clock 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cds-clock {
   0% {
      stroke-dashoffset: 682;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.CDS-why-need-creative #certificate {
   stroke-dashoffset: 495;
   stroke-dasharray: 495;
   animation: cds-certificate 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cds-certificate {
   0% {
      stroke-dashoffset: 495;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.CDS-why-need-creative #envelope {
   stroke-dashoffset: 865;
   stroke-dasharray: 865;
   animation: cds-envelope 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cds-envelope {
   0% {
      stroke-dashoffset: 865;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* CREATIVE DIRECTION END */


/* WE ARE PASSIONATE START */

.CDS-we-are-passionate #bubbles,
.CDS-we-are-passionate #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.CDS-we-are-passionate #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.CDS-we-are-passionate #plus path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.CDS-we-are-passionate #bulb,
.CDS-we-are-passionate #time-text,
.CDS-we-are-passionate #work-text,
.CDS-we-are-passionate #plan-text,
.CDS-we-are-passionate #focus-text {
   animation: cds-passionate-bulb 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cds-passionate-bulb {
   0% {
      transform: scale(0.9);
   }
   50% {
      transform: scale(1);
   }
   100% {
      transform: scale(0.9);
   }
}

.CDS-we-are-passionate #bulb-lines path {
   stroke-dashoffset: 103;
   stroke-dasharray: 103;
   animation: cds-passionate-bulb-lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cds-passionate-bulb-lines {
   0% {
      stroke-dashoffset: 103;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.CDS-we-are-passionate #lines {
   stroke-dashoffset: 1015;
   stroke-dasharray: 1015;
   animation: cds-passionate-bulb-lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cds-passionate-bulb-lines {
   0% {
      stroke-dashoffset: 1015;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* WE ARE PASSIONATE END */


/* LOGO DESIGN - BEST UAE START */

.ld-best-uae #bubbles,
.ld-best-uae #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.ld-best-uae #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.ld-best-uae #plus path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.ld-best-uae #ruler-pen {
   stroke-dashoffset: 658;
   stroke-dasharray: 658;
   animation: cdslg_best-ruler-pennes 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes lg_best-ruler-pen {
   0% {
      stroke-dashoffset: 658;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ld-best-uae #perkar {
   stroke-dashoffset: 440;
   stroke-dasharray: 440;
   animation: ld_best-ruler-perkar 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ld_best-ruler-perkar {
   0% {
      stroke-dashoffset: 440;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ld-best-uae #pen-nip {
   stroke-dashoffset: 649;
   stroke-dasharray: 649;
   animation: ld_best-ruler-pen-nip 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ld_best-ruler-pen-nip {
   0% {
      stroke-dashoffset: 649;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ld-best-uae #laptop {
   stroke-dashoffset: 1559;
   stroke-dasharray: 1559;
   animation: ld_best-ruler-laptop 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ld_best-ruler-laptop {
   0% {
      stroke-dashoffset: 1559;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ld-best-uae #desktop {
   stroke-dashoffset: 1800;
   stroke-dasharray: 1800;
   animation: ld_best-ruler-desktop 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ld_best-ruler-desktop {
   0% {
      stroke-dashoffset: 1800;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ld-best-uae #tablet {
   stroke-dashoffset: 1800;
   stroke-dasharray: 1800;
   animation: ld_best-ruler-tablet 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ld_best-ruler-tablet {
   0% {
      stroke-dashoffset: 1800;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* LOGO DESIGN - BEST UAE END */


/* HOW IS A LOGO BENEFICAL START */

.ld-how-logo #bubbles,
.ld-how-logo #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.ld-how-logo #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.ld-how-logo #plus path {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.ld-how-logo #marketing {
   stroke-dashoffset: 1346;
   stroke-dasharray: 1346;
   animation: ld-how-logo-marketing 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ld-how-logo-marketing {
   0% {
      stroke-dashoffset: 1346;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ld-how-logo #mission {
   stroke-dashoffset: 279;
   stroke-dasharray: 279;
   animation: ld-how-logo-mission 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ld-how-logo-mission {
   0% {
      stroke-dashoffset: 279;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ld-how-logo #values {
   stroke-dashoffset: 565;
   stroke-dasharray: 565;
   animation: ld-how-logo-values 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ld-how-logo-values {
   0% {
      stroke-dashoffset: 565;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ld-how-logo #communication {
   stroke-dashoffset: 348;
   stroke-dasharray: 348;
   animation: ld-how-logo-communication 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ld-how-logo-communication {
   0% {
      stroke-dashoffset: 348;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ld-how-logo #design {
   stroke-dashoffset: 420;
   stroke-dasharray: 420;
   animation: ld-how-logo-design 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ld-how-logo-design {
   0% {
      stroke-dashoffset: 420;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ld-how-logo #identity {
   stroke-dashoffset: 602;
   stroke-dasharray: 602;
   animation: ld-how-logo-identity 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ld-how-logo-identity {
   0% {
      stroke-dashoffset: 602;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ld-how-logo #trust {
   stroke-dashoffset: 1366;
   stroke-dasharray: 1366;
   animation: ld-how-logo-trust 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ld-how-logo-trust {
   0% {
      stroke-dashoffset: 1366;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ld-how-logo #cloud {
   animation: ld-how-logo-cloud 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ld-how-logo-cloud {
   0% {
      transform: scale(0.9);
   }
   50% {
      transform: scale(1);
   }
   100% {
      transform: scale(0.9);
   }
}

.ld-how-logo #cloud #Vector_187,
.ld-how-logo #cloud #Vector_188,
.ld-how-logo #cloud #Vector_189,
.ld-how-logo #cloud #Vector_190 {
   stroke-dashoffset: 636.7;
   stroke-dasharray: 636.7;
   animation: ld-how-logo-cloud-text 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ld-how-logo-cloud-text {
   0% {
      stroke-dashoffset: 636.7;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* HOW IS A LOGO BENEFICAL END */


/* WEB APP DEVELOPMENT SERVICES - FLEXIBLE SCALE START */

.web-app-dev_flexible #bubble {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.web-app-dev_flexible #ninja-blade {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.web-app-dev_flexible #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.web-app-dev_flexible #calander path {
   stroke-dashoffset: 1447.3;
   stroke-dasharray: 1447.3;
   animation: wadf_calander 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_calander {
   0% {
      stroke-dashoffset: 1447.3;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_flexible #stats path {
   stroke-dashoffset: 649.2;
   stroke-dasharray: 649.2;
   animation: wadf_stats 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_stats {
   0% {
      stroke-dashoffset: 649.2;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_flexible #time-box path {
   stroke-dashoffset: 979.8;
   stroke-dasharray: 979.8;
   animation: wadf_time-box 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_time-box {
   0% {
      stroke-dashoffset: 979.8;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_flexible #lines path {
   stroke-dashoffset: 683;
   stroke-dasharray: 683;
   animation: wadf_lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_lines {
   0% {
      stroke-dashoffset: 683;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_flexible #setting {
   animation-name: wadf_setting;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_setting {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}


/* WEB APP DEVELOPMENT SERVICES - FLEXIBLE SCALE END */


/* WEB APP DEVELOPMENT SERVICES - AFFORDABLE START */

.web-app-dev_affordable #bubbles,
.web-app-dev_affordable #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.web-app-dev_affordable #ninja-blade {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.web-app-dev_affordable #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.web-app-dev_affordable #gear path {
   animation-name: wadf_affordable;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_affordable {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.web-app-dev_affordable #clock path {
   stroke-dashoffset: 825;
   stroke-dasharray: 825;
   animation: wadf_affordable_clock 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_affordable_clock {
   0% {
      stroke-dashoffset: 825;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_affordable #mobile path {
   stroke-dashoffset: 1055;
   stroke-dasharray: 1055;
   animation: wadf_affordable_mobile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_affordable_mobile {
   0% {
      stroke-dashoffset: 1055;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_affordable #magnify path {
   stroke-dashoffset: 1300;
   stroke-dasharray: 1300;
   animation: wadf_affordable_magnify 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_affordable_magnify {
   0% {
      stroke-dashoffset: 1300;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_affordable #lines path {
   stroke-dashoffset: 307;
   stroke-dasharray: 307;
   animation: wadf_affordable_lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_affordable_lines {
   0% {
      stroke-dashoffset: 307;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_affordable #wallet path {
   stroke-dashoffset: 712;
   stroke-dasharray: 712;
   animation: wadf_affordable_wallet 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_affordable_wallet {
   0% {
      stroke-dashoffset: 712;
      transform: scale(0.85);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(0.85);
   }
}


/* WEB APP DEVELOPMENT SERVICES - AFFORDABLE END */


/* WEB APP DEVELOPMENT SERVICES - PROCEDURE START */

.web-app-dev_procedure #bubbles,
.web-app-dev_procedure #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.web-app-dev_procedure #ninja-blade {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.web-app-dev_procedure #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.web-app-dev_procedure #clock path {
   stroke-dashoffset: 736;
   stroke-dasharray: 736;
   animation: wadf_procedure-clock 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_procedure-clock {
   0% {
      stroke-dashoffset: 736;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_procedure #plug path {
   stroke-dashoffset: 1359;
   stroke-dasharray: 1359;
   animation: wadf_procedure-plug 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_procedure-plug {
   0% {
      stroke-dashoffset: 1359;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_procedure #envelope path {
   stroke-dashoffset: 507;
   stroke-dasharray: 507;
   animation: wadf_procedure-envelope 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_procedure-envelope {
   0% {
      stroke-dashoffset: 507;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_procedure #laptop path {
   stroke-dashoffset: 1221;
   stroke-dasharray: 1221;
   animation: wadf_procedure-laptop 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_procedure-laptop {
   0% {
      stroke-dashoffset: 1221;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_procedure #triangle path {
   stroke-dashoffset: 296;
   stroke-dasharray: 296;
   animation: wadf_procedure-triangle 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_procedure-triangle {
   0% {
      stroke-dashoffset: 296;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_procedure #boxes path {
   stroke-dashoffset: 327;
   stroke-dasharray: 327;
   animation: wadf_procedure-boxes 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_procedure-boxes {
   0% {
      stroke-dashoffset: 327;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_procedure #scale path {
   stroke-dashoffset: 765;
   stroke-dasharray: 765;
   animation: wadf_procedure-scale 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_procedure-scale {
   0% {
      stroke-dashoffset: 765;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_procedure #bulb path {
   stroke-dashoffset: 452;
   stroke-dasharray: 452;
   animation: wadf_procedure-bulb 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_procedure-bulb {
   0% {
      stroke-dashoffset: 452;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-dev_procedure #email path {
   stroke-dashoffset: 538;
   stroke-dasharray: 538;
   animation: wadf_procedure-email 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wadf_procedure-email {
   0% {
      stroke-dashoffset: 538;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* WEB APP DEVELOPMENT SERVICES - PROCEDURE END */


/* WHO WE ARE - BLOGGING LATEST NEWS START */

.who-we-are_blogging #bubbles,
.who-we-are_blogging #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.who-we-are_blogging #ninja-blade {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.who-we-are_blogging #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.who-we-are_blogging #lines path {
   stroke-dashoffset: 1696;
   stroke-dasharray: 1696;
   animation: wwab_blogging-lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wwab_blogging-lines {
   0% {
      stroke-dashoffset: 1696;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.who-we-are_blogging #pencil path {
   stroke-dashoffset: 1660;
   stroke-dasharray: 1660;
   animation: wwab_blogging-pencil 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wwab_blogging-pencil {
   0% {
      stroke-dashoffset: 1660;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.who-we-are_blogging #heart path {
   stroke-dashoffset: 1660;
   stroke-dasharray: 1660;
   animation: wwab_blogging-heart 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wwab_blogging-heart {
   0% {
      stroke-dashoffset: 1660;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.who-we-are_blogging #heart path#Vector_31 {
   stroke-dashoffset: 1660;
   stroke-dasharray: 1660;
   animation: wwab_blogging-heart-beat 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wwab_blogging-heart-beat {
   0% {
      transform: scale(0.9);
      stroke-dashoffset: 0;
   }
   50% {
      transform: scale(1);
   }
   100% {
      transform: scale(0.9);
   }
}

.who-we-are_blogging #screen path {
   stroke-dashoffset: 2583;
   stroke-dasharray: 2583;
   animation: wwab_blogging-screen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wwab_blogging-screen {
   0% {
      stroke-dashoffset: 2583;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* WHO WE ARE - BLOGGING LATEST NEWS END */


/* WHO WE ARE - WHO WE ARE START */

.who-we-are_who-we-are #bubbles,
.who-we-are_who-we-are #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.who-we-are_who-we-are #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.who-we-are_who-we-are #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.who-we-are_who-we-are #target path {
   stroke-dashoffset: 2583;
   stroke-dasharray: 2583;
   animation: wwab_wwr-target 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wwab_wwr-target {
   0% {
      stroke-dashoffset: 2583;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.who-we-are_who-we-are #people path {
   stroke-dashoffset: 731;
   stroke-dasharray: 731;
   animation: wwab_wwr-people 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wwab_wwr-people {
   0% {
      stroke-dashoffset: 731;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.who-we-are_who-we-are #certificate path {
   stroke-dashoffset: 401;
   stroke-dasharray: 401;
   animation: wwab_wwr-certificate 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wwab_wwr-certificate {
   0% {
      stroke-dashoffset: 401;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.who-we-are_who-we-are #thumb path {
   stroke-dashoffset: 330;
   stroke-dasharray: 330;
   animation: wwab_wwr-thumb 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wwab_wwr-thumb {
   0% {
      stroke-dashoffset: 330;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.who-we-are_who-we-are #diary path {
   stroke-dashoffset: 660;
   stroke-dasharray: 660;
   animation: wwab_wwr-diary 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wwab_wwr-diary {
   0% {
      stroke-dashoffset: 660;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.who-we-are_who-we-are #bulb path {
   stroke-dashoffset: 358;
   stroke-dasharray: 358;
   animation: wwab_wwr-bulb 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wwab_wwr-bulb {
   0% {
      stroke-dashoffset: 358;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.who-we-are_who-we-are #notebook path {
   stroke-dashoffset: 880;
   stroke-dasharray: 880;
   animation: wwab_wwr-notebook 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wwab_wwr-notebook {
   0% {
      stroke-dashoffset: 880;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.who-we-are_who-we-are #gear path {
   animation-name: ecs-gear;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}


/* WHO WE ARE - WHO WE ARE END */


/* WE ARE HIRING START */

.we-are-hiring #bubbles,
.we-are-hiring #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.we-are-hiring #we-are-hiring path {
   stroke-dashoffset: 4162;
   stroke-dasharray: 4162;
   animation: wwr_we-are-hiring 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wwr_we-are-hiring {
   0% {
      stroke-dashoffset: 4162;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.we-are-hiring #users path {
   stroke-dashoffset: 4162;
   stroke-dasharray: 4162;
   animation: wwr_users 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wwr_users {
   0% {
      stroke-dashoffset: 4162;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* WE ARE HIRING END */


/* ON GOING ASSISTANCE SERVICE - MAINTENANCE START */

.oas-maintenance #bubbles,
.oas-maintenance #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.oas-maintenance #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.oas-maintenance #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.oas-maintenance #refresh path {
   stroke-dashoffset: 561;
   stroke-dasharray: 561;
   animation: oas-maintenance_refresh 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-maintenance_refresh {
   0% {
      stroke-dashoffset: 561;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-maintenance #search path {
   stroke-dashoffset: 1210;
   stroke-dasharray: 1210;
   animation: oas-maintenance_search 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-maintenance_search {
   0% {
      stroke-dashoffset: 1210;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-maintenance #code path {
   stroke-dashoffset: 1837;
   stroke-dasharray: 1837;
   animation: oas-maintenance_code 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-maintenance_code {
   0% {
      stroke-dashoffset: 1837;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-maintenance #checklist path {
   stroke-dashoffset: 1749;
   stroke-dasharray: 1749;
   animation: oas-maintenance_checklist 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-maintenance_checklist {
   0% {
      stroke-dashoffset: 1749;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-maintenance #screen path {
   stroke-dashoffset: 2613;
   stroke-dasharray: 2613;
   animation: oas-maintenance_screen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-maintenance_screen {
   0% {
      stroke-dashoffset: 2613;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-maintenance #gear path {
   animation-name: ecs-gear;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}


/* ON GOING ASSISTANCE SERVICE - MAINTENANCE END */


/* ON GOING ASSISTANCE SERVICE - TOP ONGOING START */

.oas-top-ongoing #bubbles,
.oas-top-ongoing #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.oas-top-ongoing #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.oas-top-ongoing #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.oas-top-ongoing #location path {
   stroke-dashoffset: 608;
   stroke-dasharray: 608;
   animation: oas-tom_location 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-tom_location {
   0% {
      stroke-dashoffset: 608;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-top-ongoing #lock path {
   stroke-dashoffset: 1277;
   stroke-dasharray: 1277;
   animation: oas-tom_lock 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-tom_lock {
   0% {
      stroke-dashoffset: 1277;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-top-ongoing #shield path {
   stroke-dashoffset: 1442;
   stroke-dasharray: 1442;
   animation: oas-tom_shield 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-tom_shield {
   0% {
      stroke-dashoffset: 1442;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-top-ongoing #refresh,
.oas-top-ongoing #mobile-loader {
   animation-name: ecs-gear;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.oas-top-ongoing #setting path {
   stroke-dashoffset: 1509;
   stroke-dasharray: 1509;
   animation: oas-tom_setting 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-tom_setting {
   0% {
      stroke-dashoffset: 1509;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-top-ongoing #mobile path {
   stroke-dashoffset: 2363;
   stroke-dasharray: 2363;
   animation: oas-tom_mobile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-tom_mobile {
   0% {
      stroke-dashoffset: 2363;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* ON GOING ASSISTANCE SERVICE - TOP ONGOING END */


/* ON GOING ASSISTANCE SERVICE - ROUDN THE CLOCK START */

.oas-round-clock #bubbles,
.oas-round-clock #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.oas-round-clock #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.oas-round-clock #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.oas-round-clock #agent path {
   stroke-dashoffset: 1029;
   stroke-dasharray: 1029;
   animation: oas-rc-agent 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-rc-agent {
   0% {
      stroke-dashoffset: 1029;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-round-clock #phone path {
   stroke-dashoffset: 869.3;
   stroke-dasharray: 869.3;
   animation: oas-rc-phone 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-rc-phone {
   0% {
      stroke-dashoffset: 869.3;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-round-clock #message path {
   stroke-dashoffset: 532;
   stroke-dasharray: 532;
   animation: oas-rc-message 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-rc-message {
   0% {
      stroke-dashoffset: 532;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-round-clock #fax path {
   stroke-dashoffset: 604;
   stroke-dasharray: 604;
   animation: oas-rc-fax 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-rc-fax {
   0% {
      stroke-dashoffset: 604;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-round-clock #emails path {
   stroke-dashoffset: 671;
   stroke-dasharray: 671;
   animation: oas-rc-emails 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-rc-emails {
   0% {
      stroke-dashoffset: 671;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-round-clock #card path {
   stroke-dashoffset: 841;
   stroke-dasharray: 841;
   animation: oas-rc-card 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-rc-card {
   0% {
      stroke-dashoffset: 841;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-round-clock #two47 path {
   stroke-dashoffset: 3374.9;
   stroke-dasharray: 3374.9;
   animation: oas-rc-two47 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-rc-two47 {
   0% {
      stroke-dashoffset: 3374.9;
      transform: scale(.8);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(.8);
   }
}


/* ON GOING ASSISTANCE SERVICE - ROUDN THE CLOCK END */


/* ON GOING ASSISTANCE SERVICE - CROSS COMPATIBILITY START */

.oas-cross #bubbles,
.oas-cross #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.oas-cross #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.oas-cross #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.oas-cross #mobile path {
   stroke-dashoffset: 3727;
   stroke-dasharray: 3727;
   animation: oas-cross-mobile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-cross-mobile {
   0% {
      stroke-dashoffset: 3727;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.oas-cross #screen-inner path {
   stroke-dashoffset: 481;
   stroke-dasharray: 481;
   animation: oas-cross-screen-inner 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-cross-screen-inner {
   0% {
      stroke-dashoffset: 481;
      transform: scale(0.8);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(0.8);
   }
}

.oas-cross #circles path {
   stroke-dashoffset: 901;
   stroke-dasharray: 901;
   animation: oas-cross-circles 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-cross-circles {
   0% {
      stroke-dashoffset: 901;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* ON GOING ASSISTANCE SERVICE - CROSS COMPATIBILITY END */


/* BRAND STRATEGY SERVICES - HELP TO DEVELOP START */

.bss-help #bubbles {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.bss-help #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.bss-help #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.bss-help #brackets path {
   stroke-dashoffset: 96;
   stroke-dasharray: 96;
   animation: bss-help_brackets 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes bss-help_brackets {
   0% {
      stroke-dashoffset: 96;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.bss-help #checklist path {
   stroke-dashoffset: 955;
   stroke-dasharray: 955;
   animation: bss-help_checklist 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes bss-help_checklist {
   0% {
      stroke-dashoffset: 955;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.bss-help #laptop path {
   stroke-dashoffset: 2665;
   stroke-dasharray: 2665;
   animation: bss-help_laptop 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes bss-help_laptop {
   0% {
      stroke-dashoffset: 2665;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.bss-help #mobile path {
   stroke-dashoffset: 1151;
   stroke-dasharray: 1151;
   animation: bss-help_mobile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes bss-help_mobile {
   0% {
      stroke-dashoffset: 1151;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.bss-help #meter path {
   stroke-dashoffset: 424;
   stroke-dasharray: 424;
   animation: bss-help_meter 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes bss-help_meter {
   0% {
      stroke-dashoffset: 424;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.bss-help #rocket path {
   stroke-dashoffset: 394;
   stroke-dasharray: 394;
   animation: bss-help_rocket 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes bss-help_rocket {
   0% {
      stroke-dashoffset: 394;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translateY(50px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.bss-help #cloud path {
   stroke-dashoffset: 731;
   stroke-dasharray: 731;
   animation: bss-help_cloud 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes bss-help_cloud {
   0% {
      stroke-dashoffset: 731;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translateX(20px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* BRAND STRATEGY SERVICES - HELP TO DEVELOP END */


/* INFORMATION WEBSITE SERVICE - CMS WEB DESIGN DEVELOPMENT START */

.iws-cms-web #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.iws-cms-web #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.iws-cms-web #outer-circles path {
   stroke-dashoffset: 902;
   stroke-dasharray: 902;
   animation: iws-cms-outer-circles 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-cms-outer-circles {
   0% {
      stroke-dashoffset: 902;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-cms-web #checklist,
.iws-cms-web #stats,
.iws-cms-web #setting,
.iws-cms-web #code,
.iws-cms-web #clock,
.iws-cms-web #globe,
.iws-cms-web #target {
   animation: iws-cms-icons 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-cms-icons {
   0% {
      transform: scale(0.8);
   }
   50% {
      transform: scale(1);
   }
   100% {
      transform: scale(0.8);
   }
}

.iws-cms-web #gears path {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.iws-cms-web #woocommerce path {
   stroke-dashoffset: 1087;
   stroke-dasharray: 1087;
   animation: iws-cms_woocommerce 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-cms_woocommerce {
   0% {
      stroke-dashoffset: 1087;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-cms-web #magento path {
   stroke-dashoffset: 497;
   stroke-dasharray: 497;
   animation: iws-cms_magento 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-cms_magento {
   0% {
      stroke-dashoffset: 497;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-cms-web #shopify path {
   stroke-dashoffset: 698;
   stroke-dasharray: 698;
   animation: iws-cms_shopify 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-cms_shopify {
   0% {
      stroke-dashoffset: 698;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-cms-web #wordpress path {
   stroke-dashoffset: 504;
   stroke-dasharray: 504;
   animation: iws-cms_wordpress 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-cms_wordpress {
   0% {
      stroke-dashoffset: 504;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-cms-web #inner-circle path {
   stroke-dashoffset: 2650;
   stroke-dasharray: 2650;
   animation: iws-cms_inner-circle 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-cms_inner-circle {
   0% {
      stroke-dashoffset: 2650;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-cms-web #cms path {
   stroke-dashoffset: 1047;
   stroke-dasharray: 1047;
   animation: iws-cms_cms 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-cms_cms {
   0% {
      stroke-dashoffset: 1047;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-cms-web #bubbles path {
   stroke-dashoffset: 72;
   stroke-dasharray: 72;
   animation: iws-cms_bubbles 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-cms_bubbles {
   0% {
      stroke-dashoffset: 72;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* INFORMATION WEBSITE SERVICE - CMS WEB DESIGN DEVELOPMENT END */


/* INFORMATION WEBSITE SERVICE - MAGENTO START */

.iws-magento #bubbles,
.iws-magento #bubbles_2,
.iws-magento #bubbles_3 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.iws-magento #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.iws-magento #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.iws-magento #lines path {
   stroke-dashoffset: 695;
   stroke-dasharray: 695;
   animation: iws-magento-lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-magento-lines {
   0% {
      stroke-dashoffset: 695;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-magento #gears path {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.iws-magento #laptop path {
   stroke-dashoffset: 2850;
   stroke-dasharray: 2850;
   animation: iws-magento-laptop 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-magento-laptop {
   0% {
      stroke-dashoffset: 2850;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-magento #globe path {
   stroke-dashoffset: 454;
   stroke-dasharray: 454;
   animation: iws-magento-globe 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-magento-globe {
   0% {
      stroke-dashoffset: 454;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-magento #search path {
   stroke-dashoffset: 525;
   stroke-dasharray: 525;
   animation: iws-magento-search 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-magento-search {
   0% {
      stroke-dashoffset: 525;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-magento #stats path {
   stroke-dashoffset: 203;
   stroke-dasharray: 203;
   animation: iws-magento-stats 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-magento-stats {
   0% {
      stroke-dashoffset: 203;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-magento #chart path {
   stroke-dashoffset: 427;
   stroke-dasharray: 427;
   animation: iws-magento-chart 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-magento-chart {
   0% {
      stroke-dashoffset: 427;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-magento #cart path {
   stroke-dashoffset: 220;
   stroke-dasharray: 220;
   animation: iws-magento-cart 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-magento-cart {
   0% {
      stroke-dashoffset: 220;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-magento #magento path {
   animation: iws-magento-magento 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-magento-magento {
   0% {
      transform: scale(0.85);
   }
   50% {
      transform: scale(1);
   }
   100% {
      transform: scale(0.85);
   }
}


/* INFORMATION WEBSITE SERVICE - MAGENTO END */


/*manual-automated-provisioning*/

.manual-automated-provisioning #bubbles,
.manual-automated-provisioning #bubbles_2 {
   animation: bubbles 5s linear infinite 2s;
   transform-origin: 50% 50%;
   transform-box: fill-box;
}

.manual-automated-provisioning #ninja-blade,
.manual-automated-provisioning #ninja-blade_2 {
   stroke-dashoffset: 130;
   stroke-dasharray: 130;
   animation-name: mb-gear;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.manual-automated-provisioning #plus path,
.manual-automated-provisioning #plus_2 path {
   stroke-dashoffset: 23;
   stroke-dasharray: 23;
   animation-name: mb-mobile-plus;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.manual-automated-provisioning #lines path,
.manual-automated-provisioning #lines_2 path {
   stroke-dashoffset: 119;
   stroke-dasharray: 119;
   animation-name: mb-circles-ticks;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes mb-circles-ticks {
   0% {
      stroke-dashoffset: 119;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.manual-automated-provisioning #gear,
.manual-automated-provisioning #gear_2 {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes manual-auto-gear {
   from% {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.manual-automated-provisioning #apple {
   stroke-dashoffset: 281;
   stroke-dasharray: 281;
   animation-name: manual-apple;
   animation-duration: 12s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes manual-apple {
   0% {
      stroke-dashoffset: 281;
      transform: rotateY(0deg);
   }
   10% {
      transform: translateY(20px);
   }
   15% {
      transform: translateY(0px);
   }
   20% {
      transform: translateY(15px);
   }
   50% {
      stroke-dashoffset: 0;
      transform: rotateY(180deg);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.manual-automated-provisioning #android-logo {
   stroke-dashoffset: 902;
   stroke-dasharray: 902;
   animation-name: manual-android;
   animation-duration: 12s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes manual-android {
   0% {
      stroke-dashoffset: 902;
   }
   10% {
      transform: translateY(20px);
   }
   15% {
      transform: translateY(0px);
   }
   20% {
      transform: translateY(15px);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1.05);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.manual-automated-provisioning #android-screen {
   stroke-dashoffset: 1369;
   stroke-dasharray: 1369;
   animation-name: android-out;
   animation-duration: 10s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes android-out {
   0% {
      stroke-dashoffset: 1369;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.manual-automated-provisioning #android-screen-circles {
   animation: screen-circles 2s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes screen-circles {
   0% {
      transform: translate(0, 0);
   }
   50% {
      transform: translate(0, 5px);
   }
   100% {
      transform: translate(0, 0);
   }
}

.manual-automated-provisioning #android-screen-lines path {
   stroke-dashoffset: 35.7;
   stroke-dasharray: 35.7;
   animation: screen-lines 2s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes screen-lines {
   0% {
      transform: translate(0, 0);
      stroke-dashoffset: 35.7;
   }
   50% {
      transform: translate(0, 5px);
      stroke-dashoffset: 0;
   }
   100% {
      transform: translate(0, 0);
      stroke-dashoffset: 0;
   }
}

.manual-automated-provisioning #android-screen-button path {
   animation: screen-button 1s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes screen-button {
   to {
      transform: scale(1.3);
   }
}


/* INFORMATION WEBSITE SERVICE - WORDPRESS START */

.iws-wordpress #bubbles,
.iws-wordpress #bubbles_2,
.iws-wordpress #bubbles_3 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.iws-wordpress #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.iws-wordpress #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.iws-wordpress #video path {
   stroke-dashoffset: 896;
   stroke-dasharray: 896;
   animation: iws-wordpress-video 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-wordpress-video {
   0% {
      stroke-dashoffset: 896;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-wordpress #scenery path {
   stroke-dashoffset: 797;
   stroke-dasharray: 797;
   animation: iws-wordpress-scenery 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-wordpress-scenery {
   0% {
      stroke-dashoffset: 797;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-wordpress #ruler {
   stroke-dashoffset: 982;
   stroke-dasharray: 982;
   animation: iws-wordpress-ruler 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-wordpress-ruler {
   0% {
      stroke-dashoffset: 982;
      transform: scale(0.9);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      transform: scale(0.9);
      stroke-dashoffset: 0;
   }
}

.iws-wordpress #screen {
   stroke-dashoffset: 1752;
   stroke-dasharray: 1752;
   animation: iws-wordpress-screen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-wordpress-screen {
   0% {
      stroke-dashoffset: 1752;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-wordpress #hands {
   stroke-dashoffset: 1752;
   stroke-dasharray: 1752;
   animation: iws-wordpress-hands 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
   fill: #fff;
}

@keyframes iws-wordpress-hands {
   0% {
      stroke-dashoffset: 1752;
      transform: scale(0.9);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(0.9);
   }
}

.iws-wordpress #wordpress-logo {
   stroke-dashoffset: 814;
   stroke-dasharray: 814;
   animation: iws-wordpress-wordpress-logo 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-wordpress-wordpress-logo {
   0% {
      stroke-dashoffset: 814;
      transform: scale(0.9);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(0.9);
   }
}

.iws-wordpress #location {
   stroke-dashoffset: 459.4;
   stroke-dasharray: 459.4;
   animation: iws-wordpress-location 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-wordpress-location {
   0% {
      stroke-dashoffset: 459.4;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate(0px, -15px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-wordpress #window {
   stroke-dashoffset: 1064;
   stroke-dasharray: 1064;
   animation: iws-wordpress-window 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-wordpress-window {
   0% {
      stroke-dashoffset: 1064;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate(0px, -15px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-wordpress #wires {
   stroke-dashoffset: 264;
   stroke-dasharray: 264;
   animation: iws-wordpress-wires 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-wordpress-wires {
   0% {
      stroke-dashoffset: 264;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate(0px, -15px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* INFORMATION WEBSITE SERVICE - WORDPRESS END */


/* INFORMATION WEBSITE SERVICE - SHOPIFY START */

.iws-shopify #bubbles,
.iws-shopify #bubbles_2,
.iws-shopify #bubbles_3 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.iws-shopify #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.iws-shopify #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.iws-shopify #gears path {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.iws-shopify #screen {
   stroke-dashoffset: 1545;
   stroke-dasharray: 1545;
   animation: iws-shopify-screen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-shopify-screen {
   0% {
      stroke-dashoffset: 1545;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-shopify #shirts {
   stroke-dashoffset: 344;
   stroke-dasharray: 344;
   animation: iws-shopify-shirts 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-shopify-shirts {
   0% {
      stroke-dashoffset: 344;
      transform: scale(0.9);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(0.9);
   }
}

.iws-shopify #sale {
   stroke-dashoffset: 815;
   stroke-dasharray: 815;
   animation: iws-shopify-sale 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-shopify-sale {
   0% {
      stroke-dashoffset: 815;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-shopify #globe {
   stroke-dashoffset: 672;
   stroke-dasharray: 672;
   animation: iws-shopify-globe 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-shopify-globe {
   0% {
      stroke-dashoffset: 672;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translateY(-30px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-shopify #lines {
   stroke-dashoffset: 1738;
   stroke-dasharray: 1738;
   animation: iws-shopify-lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-shopify-lines {
   0% {
      stroke-dashoffset: 1738;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-shopify #text {
   stroke-dashoffset: 704;
   stroke-dasharray: 704;
   animation: iws-shopify-text 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-shopify-text {
   0% {
      stroke-dashoffset: 704;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-shopify #cart {
   stroke-dashoffset: 243;
   stroke-dasharray: 243;
   animation: iws-shopify-cart 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-shopify-cart {
   0% {
      stroke-dashoffset: 243;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-shopify #shopify-logo {
   stroke-dashoffset: 1991;
   stroke-dasharray: 1991;
   animation: iws-shopify-shopify-logo 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-shopify-shopify-logo {
   0% {
      stroke-dashoffset: 1991;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-shopify #cursor {
   stroke-dashoffset: 1991;
   stroke-dasharray: 1991;
   animation: iws-shopify-cursor 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
   fill: #fff;
}

@keyframes iws-shopify-cursor {
   0% {
      stroke-dashoffset: 1991;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate(-300px, -80px) scale(0.8);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-shopify #magnify {
   stroke-dashoffset: 712;
   stroke-dasharray: 712;
   animation: iws-shopify-magnify 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
   fill: #fff;
}

@keyframes iws-shopify-magnify {
   0% {
      stroke-dashoffset: 712;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* INFORMATION WEBSITE SERVICE - SHOPIFY END */


/* INFORMATION WEBSITE SERVICE - INSPIRING START */

.iws-inspiring #bubbles,
.iws-inspiring #bubbles_2,
.iws-inspiring #bubbles_3 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.iws-inspiring #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.iws-inspiring #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.iws-inspiring #gears path {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.iws-inspiring #lines {
   stroke-dashoffset: 1001;
   stroke-dasharray: 1001;
   animation: iws-inspiring-lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-inspiring-lines {
   0% {
      stroke-dashoffset: 1001;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-inspiring #brand-icons {
   stroke-dashoffset: 1030;
   stroke-dasharray: 1030;
   animation: iws-inspiring-brand-icons 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-inspiring-brand-icons {
   0% {
      stroke-dashoffset: 1030;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-inspiring #laptop {
   stroke-dashoffset: 1740.5;
   stroke-dasharray: 1740.5;
   animation: iws-inspiring-laptop 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-inspiring-laptop {
   0% {
      stroke-dashoffset: 1740.5;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-inspiring #checklist {
   stroke-dashoffset: 395;
   stroke-dasharray: 395;
   animation: iws-inspiring-checklist 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-inspiring-checklist {
   0% {
      stroke-dashoffset: 395;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-inspiring #globe {
   stroke-dashoffset: 312;
   stroke-dasharray: 312;
   animation: iws-inspiring-globe 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-inspiring-globe {
   0% {
      stroke-dashoffset: 312;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-inspiring #code {
   stroke-dashoffset: 635;
   stroke-dasharray: 635;
   animation: iws-inspiring-code 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-inspiring-code {
   0% {
      stroke-dashoffset: 635;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-inspiring #user-profile {
   stroke-dashoffset: 584;
   stroke-dasharray: 584;
   animation: iws-inspiring-user-profile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-inspiring-user-profile {
   0% {
      stroke-dashoffset: 584;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* INFORMATION WEBSITE SERVICE - INSPIRING END */


/* HOME - BRAND START */

.home-brand #bubbles,
.home-brand #bubbles_2,
.home-brand #bubbles_3 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.home-brand #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.home-brand #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.home-brand #screens {
   stroke-dashoffset: 717;
   stroke-dasharray: 717;
   animation: home-brand-screens 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-brand-screens {
   0% {
      stroke-dashoffset: 717;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-brand #pencil-ruler {
   stroke-dashoffset: 717;
   stroke-dasharray: 717;
   animation: home-brand-pencil-ruler 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-brand-pencil-ruler {
   0% {
      stroke-dashoffset: 717;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translateY(20px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-brand #perkar {
   stroke-dashoffset: 168;
   stroke-dasharray: 168;
   animation: home-brand-perkar 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-brand-perkar {
   0% {
      stroke-dashoffset: 168;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translateY(20px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-brand #pen {
   stroke-dashoffset: 249;
   stroke-dasharray: 249;
   animation: home-brand-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-brand-pen {
   0% {
      stroke-dashoffset: 249;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translateY(20px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* HOME - BRAND END */


/* HOME - HOSTALIC START */

.home-hostalic #bubbles,
.home-hostalic #bubbles_2,
.home-hostalic #bubbles_3 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.home-hostalic #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.home-hostalic #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-hostalic-pen {
   0% {
      stroke-dashoffset: 106;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-hostalic #gear path {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.home-hostalic #lines {
   stroke-dashoffset: 459;
   stroke-dasharray: 459;
   animation: home-hostalic-lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-hostalic-lines {
   0% {
      stroke-dashoffset: 459;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-hostalic #tools {
   stroke-dashoffset: 114;
   stroke-dasharray: 114;
   animation: home-hostalic-tools 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-hostalic-tools {
   0% {
      stroke-dashoffset: 114;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-hostalic #user {
   stroke-dashoffset: 168;
   stroke-dasharray: 168;
   animation: home-hostalic-tools 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-hostalic-tools {
   0% {
      stroke-dashoffset: 168;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-hostalic #rotate-arrows {
   animation: home-hostalic-rotate-arrows 6s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-hostalic-rotate-arrows {
   0% {
      transform: rotate(0deg) scale(0.8);
   }
   100% {
      transform: rotate(50deg) scale(1);
   }
}


/* HOME - HOSTALIC END */


/* HOME - ANDROID START */

.home-android #bubbles,
.home-android #bubbles_2,
.home-android #bubbles_3 .home-android #bubbles_4,
.home-android #bubbles_5,
.home-android #bubbles_6,
.home-android #bubbles_7 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.home-android #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.home-android #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-hostalic-pen {
   0% {
      stroke-dashoffset: 106;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-android #gears,
.home-android #gears_2,
.home-android #gears_3 {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.home-android #all path {
   stroke-dashoffset: 536;
   stroke-dasharray: 536;
   animation: home-android-all 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-android-all {
   0% {
      stroke-dashoffset: 536;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-android #arrow-up path {
   animation: home-android-arrow-up 1s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-android-arrow-up {
   0% {
      transform: translateY(0px)
   }
   100% {
      transform: translateY(-10px)
   }
}

.home-android #group-man path {
   stroke-dashoffset: 407;
   stroke-dasharray: 407;
   animation: home-android-group-man 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-android-group-man {
   0% {
      stroke-dashoffset: 407;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* HOME - ANDROID END */


/* HOME - IPHONE START */

.home-iphone #bubbles,
.home-iphone #bubbles_2,
.home-iphone #bubbles_3,
.home-iphone #bubbles_4 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.home-iphone #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.home-iphone #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-hostalic-pen {
   0% {
      stroke-dashoffset: 106;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-iphone #gear,
.home-iphone #gear_2,
.home-iphone #gear_3,
.home-iphone #gear_4,
.home-iphone #gear_5 {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.home-iphone #all path {
   stroke-dashoffset: 612;
   stroke-dasharray: 612;
   animation: home-iphone-all 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-iphone-all {
   0% {
      stroke-dashoffset: 612;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-iphone #arrows-v path {
   animation: home-android-arrows-v 1s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-android-arrows-v {
   0% {
      transform: translateY(0px)
   }
   100% {
      transform: translateY(-10px)
   }
}

.home-iphone #arrows-h path {
   animation: home-android-arrows-h 1s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-android-arrows-h {
   0% {
      transform: translateX(0px)
   }
   100% {
      transform: translateX(-10px)
   }
}

.home-iphone #ipad path {
   stroke-dashoffset: 533;
   stroke-dasharray: 533;
   animation: home-iphone-ipad 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes home-iphone-ipad {
   0% {
      stroke-dashoffset: 533;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* HOME - IPHONE END */


/* ONGING ASSISTANCE SERVICE - GAME DEVELOPMENT  START */

.osa-game-developement #bubbles,
.osa-game-developement #bubbles_2,
.osa-game-developement #bubbles_3,
.osa-game-developement #bubbles_4,
.osa-game-developement #bubbles_5 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.osa-game-developement #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.osa-game-developement #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.osa-game-developement #console path {
   stroke-dashoffset: 1037;
   stroke-dasharray: 1037;
   animation: oas-game-dev-consile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-game-dev-consile {
   0% {
      stroke-dashoffset: 1037;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.osa-game-developement #wrench path {
   stroke-dashoffset: 1221;
   stroke-dasharray: 1221;
   animation: oas-game-dev-wrench 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-game-dev-wrench {
   0% {
      stroke-dashoffset: 1221;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.osa-game-developement #mobile path {
   stroke-dashoffset: 1118;
   stroke-dasharray: 1118;
   animation: oas-game-dev-mobile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-game-dev-mobile {
   0% {
      stroke-dashoffset: 1118;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.osa-game-developement #scroll-bar path {
   stroke-dashoffset: 687;
   stroke-dasharray: 687;
   animation: oas-game-dev-scroll-bar 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-game-dev-scroll-bar {
   0% {
      stroke-dashoffset: 687;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.osa-game-developement #play path {
   animation: oas-game-dev-play 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-game-dev-play {
   0% {
      transform: scale(0.8);
   }
   50% {
      transform: scale(1);
   }
   100% {
      transform: scale(0.8);
   }
}

.osa-game-developement #checklist path {
   stroke-dashoffset: 396;
   stroke-dasharray: 396;
   animation: oas-game-dev-checklist 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-game-dev-checklist {
   0% {
      stroke-dashoffset: 396;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.osa-game-developement #paper path {
   stroke-dashoffset: 654;
   stroke-dasharray: 654;
   animation: oas-game-dev-paper 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes oas-game-dev-paper {
   0% {
      stroke-dashoffset: 654;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* ONGING ASSISTANCE SERVICE - GAME DEVELOPMENT  END */


/* WEB DESIGN DEVELOPMENT START */

.web-design-development #bubbles,
.web-design-development #bubbles_2,
.web-design-development #bubbles_3,
.web-design-development #bubbles_4,
.web-design-development #bubbles_5 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.web-design-development #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.web-design-development #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.web-design-development #man path {
   stroke-dashoffset: 284;
   stroke-dasharray: 284;
   animation: wdd-man 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wdd-man {
   0% {
      stroke-dashoffset: 284;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-design-development #line path {
   stroke-dashoffset: 475;
   stroke-dasharray: 475;
   animation: wdd-line 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wdd-line {
   0% {
      stroke-dashoffset: 475;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-design-development #man path {
   stroke-dashoffset: 284;
   stroke-dasharray: 284;
   animation: wdd-man 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wdd-man {
   0% {
      stroke-dashoffset: 284;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-design-development #layout path {
   stroke-dashoffset: 437;
   stroke-dasharray: 437;
   animation: wdd-layout 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wdd-layout {
   0% {
      stroke-dashoffset: 437;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-design-development #stats path {
   stroke-dashoffset: 75;
   stroke-dasharray: 75;
   animation: wdd-stats 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wdd-stats {
   0% {
      stroke-dashoffset: 75;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-design-development #message-bubble path {
   stroke-dashoffset: 179;
   stroke-dasharray: 179;
   animation: wdd-message-bubble 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wdd-message-bubble {
   0% {
      stroke-dashoffset: 179;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-design-development #code path {
   stroke-dashoffset: 163;
   stroke-dasharray: 163;
   animation: wdd-code 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wdd-code {
   0% {
      stroke-dashoffset: 163;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-design-development #desktop path {
   stroke-dashoffset: 333;
   stroke-dasharray: 333;
   animation: wdd-desktop 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wdd-desktop {
   0% {
      stroke-dashoffset: 333;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-design-development #mobile path {
   stroke-dashoffset: 138;
   stroke-dasharray: 138;
   animation: wdd-mobile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wdd-mobile {
   0% {
      stroke-dashoffset: 138;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-design-development #pencil path,
.web-design-development #pencil_2 path {
   stroke-dashoffset: 160;
   stroke-dasharray: 160;
   animation: wdd-pencil 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wdd-pencil {
   0% {
      stroke-dashoffset: 160;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-design-development #note path,
.web-design-development #pointer path {
   animation: wdd-note 4s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wdd-note {
   0% {
      transform: translateY(0px);
   }
   100% {
      transform: translateY(30px);
   }
}

.web-design-development #gear-big path,
.web-design-development #gear-small path {
   stroke-dashoffset: 467;
   stroke-dasharray: 467;
   animation: wdd-gear-big 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wdd-gear-big {
   0% {
      stroke-dashoffset: 467;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-design-development #gear-small path {
   stroke-dashoffset: 483;
   stroke-dasharray: 483;
   animation: wdd-gear-small 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wdd-gear-small {
   0% {
      stroke-dashoffset: 483;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* WEB DESIGN DEVELOPMENT END */


/* HOME MOBILE APP START */

.home-mobile-app #bubbles,
.home-mobile-app #bubbles {
   animation: mb-bubbles 5s linear infinite 2s;
   transform-origin: 50% 50%;
   transform-box: fill-box;
}

@keyframes mb-bubbles {
   0% {
      transform: scale(1) translate(0px, 0px);
   }
   50% {
      transform: scale(1) translate(0px, 20px);
   }
   100% {
      transform: scale(1) translate(0px, 0px);
   }
}

.home-mobile-app #gears path {
   stroke-dashoffset: 665;
   stroke-dasharray: 665;
   animation-name: mb-gears;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 3s;
   transform-box: fill-box;
}

@keyframes mb-gears {
   0% {
      stroke-dashoffset: 665;
   }
   50% {
      stroke-dashoffset: 300;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-mobile-app #plus path {
   stroke-dashoffset: 23;
   stroke-dasharray: 23;
   animation-name: mb-mobile-plus;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 3s;
   transform-box: fill-box;
}

@keyframes mb-mobile-plus {
   0% {
      stroke-dashoffset: 23;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-mobile-app #ninja-blade path {
   stroke-dashoffset: 130;
   stroke-dasharray: 130;
   animation-name: mb-gear;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 3s;
   transform-box: fill-box;
}

@keyframes mb-gear {
   0% {
      stroke-dashoffset: 130;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-mobile-app #curved-lines path {
   stroke-dashoffset: 232;
   stroke-dasharray: 232;
   animation-name: mb-curved-lines;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 3s;
   transform-box: fill-box;
}

@keyframes mb-curved-lines {
   0% {
      stroke-dashoffset: 232;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translate(0px, 20px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-mobile-app #screen-lines path,
.home-mobile-app #screen-lines_2 path {
   stroke-dashoffset: 181;
   stroke-dasharray: 181;
   animation-name: mb-screen-lines;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 3s;
   transform-box: fill-box;
}

@keyframes mb-screen-lines {
   0% {
      stroke-dashoffset: 181;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-mobile-app #mobile-button path {
   stroke-dashoffset: 789;
   stroke-dasharray: 789;
   animation-name: mb-mobile-btn;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 3s;
   transform-box: fill-box;
}

@keyframes mb-mobile-btn {
   50% {
      transform: scale(1.05);
   }
}

.home-mobile-app #mobile {
   animation-name: mb-mobile;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 3s;
   transform-box: fill-box;
}

@keyframes mb-mobile {
   0% {
      transform: scale(1);
   }
   50% {
      transform: scale(0.95);
   }
   100% {
      transform: scale(1);
   }
}

.home-mobile-app #card {
   stroke-dashoffset: 181;
   stroke-dasharray: 181;
   animation-name: mb-card;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 3s;
   transform-box: fill-box;
}

@keyframes mb-card {
   0% {
      stroke-dashoffset: 181;
   }
   50% {
      transform: translate(20px, -5px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-mobile-app #side-circles-lines {
   stroke-dashoffset: 131;
   stroke-dasharray: 131;
   animation-name: mb-circles-lines;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 3s;
   transform-box: fill-box;
}

@keyframes mb-circles-lines {
   0% {
      stroke-dashoffset: 131;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.home-mobile-app #circle-tick,
.home-mobile-app #circle-x,
.home-mobile-app #circle-flag {
   stroke-dashoffset: 779;
   stroke-dasharray: 779;
   animation-name: mb-circles-ticks;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 3s;
   transform-box: fill-box;
}

@keyframes mb-circles-ticks {
   0% {
      stroke-dashoffset: 779;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* HOME MOBILE APP END */


/* CUSTOM WEB APPLICATION DEVELOPMENT START */

.custom-web-app-dev #bubbles,
.custom-web-app-dev #bubbles_2 {
   animation-name: durability-bubble;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.custom-web-app-dev #ninja-blade path,
.custom-web-app-dev #ninja-blade_2 path {
   stroke-dashoffset: 165;
   stroke-dasharray: 165;
   animation-name: durability-gear;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   animation-delay: 1s;
   transform-box: fill-box;
}

.custom-web-app-dev #plus path,
.custom-web-app-dev #plus_2 path {
   stroke-dashoffset: 42.90;
   stroke-dasharray: 42.90;
   animation: durability-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.custom-web-app-dev #text-lines path {
   stroke-dashoffset: 37.3;
   stroke-dasharray: 37.3;
   animation-name: custom-web-lines;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

@keyframes custom-web-lines {
   0% {
      stroke-dashoffset: 37.3;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.custom-web-app-dev #html-text path {
   stroke-dashoffset: 57.3;
   stroke-dasharray: 57.3;
   animation-name: custom-html-text;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0;
}

@keyframes custom-html-text {
   0% {
      stroke-dashoffset: 57.3;
   }
   50% {
      stroke-dashoffset: 0;
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.custom-web-app-dev #css-text path {
   stroke-dashoffset: 57.7;
   stroke-dasharray: 57.7;
   animation-name: custom-css-text;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0;
}

@keyframes custom-css-text {
   0% {
      stroke-dashoffset: 57.7;
   }
   50% {
      stroke-dashoffset: 0;
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.custom-web-app-dev #c-text path {
   stroke-dashoffset: 38.2;
   stroke-dasharray: 38.2;
   animation-name: custom-c-text;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0;
}

@keyframes custom-c-text {
   0% {
      stroke-dashoffset: 38.2;
   }
   50% {
      stroke-dashoffset: 0;
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.custom-web-app-dev #java-text path {
   stroke-dashoffset: 43.0;
   stroke-dasharray: 43.0;
   animation-name: custom-java-text;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0;
}

@keyframes custom-java-text {
   0% {
      stroke-dashoffset: 43.0;
   }
   50% {
      stroke-dashoffset: 0;
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.custom-web-app-dev #php-text path {
   stroke-dashoffset: 43.7;
   stroke-dasharray: 43.7;
   animation-name: custom-php-text;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0;
}

@keyframes custom-php-text {
   0% {
      stroke-dashoffset: 43.7;
   }
   50% {
      stroke-dashoffset: 0;
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

#cloud path#Vector_35 {
   animation-name: custom-cloud-arrow;
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0.5;
}

@keyframes custom-cloud-arrow {
   0% {
      transform: translate(0, 0);
   }
   50% {
      transform: translate(0, -5px);
      stroke-opacity: 1;
   }
   100% {
      transform: translate(0, 0);
   }
}

.custom-web-app-dev #cloud path#Vector_34 {
   stroke-dashoffset: 276.9;
   stroke-dasharray: 276.9;
   animation-name: custom-cloud;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0;
}

@keyframes custom-cloud {
   0% {
      stroke-dashoffset: 276.9;
   }
   50% {
      stroke-dashoffset: 0;
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.custom-web-app-dev #mobile_2 path {
   stroke-dashoffset: 283.7;
   stroke-dasharray: 283.7;
   animation-name: custom-mobile-2;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0;
}

@keyframes custom-mobile-2 {
   0% {
      stroke-dashoffset: 283.7;
   }
   50% {
      stroke-dashoffset: 0;
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.custom-web-app-dev #paper path {
   stroke-dashoffset: 213.2;
   stroke-dasharray: 213.2;
   animation-name: custom-paper;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0;
}

@keyframes custom-paper {
   0% {
      stroke-dashoffset: 213.2;
   }
   50% {
      stroke-dashoffset: 0;
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.custom-web-app-dev #screen-text path {
   stroke-dashoffset: 41.8;
   stroke-dasharray: 41.8;
   animation-name: custom-screen;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0;
}

@keyframes custom-screen {
   0% {
      stroke-dashoffset: 41.8;
   }
   50% {
      stroke-dashoffset: 0;
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.custom-web-app-dev #noti path {
   stroke-dashoffset: 256.9;
   stroke-dasharray: 256.9;
   animation-name: custom-noti;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
   stroke-opacity: 0;
}

@keyframes custom-noti {
   0% {
      stroke-dashoffset: 256.9;
   }
   50% {
      stroke-dashoffset: 0;
      stroke-opacity: 1;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* CUSTOM WEB APPLICATION DEVELOPMENT END */


/* INFORMATION WEBSITE SERVICE - WOOCOMMERCE START */

.iws-woocommerce #bubbles,
.iws-woocommerce #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.iws-woocommerce #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.iws-woocommerce #plus {
   stroke-dashoffset: 79.4;
   stroke-dasharray: 79.4;
   animation: app-analytics-plus 4s linear forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.iws-woocommerce #globe path {
   stroke-dashoffset: 845;
   stroke-dasharray: 845;
   animation: iws-woocommece_globe 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-woocommece_globe {
   0% {
      stroke-dashoffset: 845;
   }
   50% {
      stroke-dashoffset: 0;
      transform: translateX(50px);
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-woocommerce #bucket path {
   stroke-dashoffset: 574;
   stroke-dasharray: 574;
   animation: iws-woocommece_bucket 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-woocommece_bucket {
   0% {
      stroke-dashoffset: 574;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-woocommerce #lock path {
   stroke-dashoffset: 581;
   stroke-dasharray: 581;
   animation: iws-woocommece_lock 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-woocommece_lock {
   0% {
      stroke-dashoffset: 581;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-woocommerce #cart path {
   stroke-dashoffset: 411;
   stroke-dasharray: 411;
   animation: iws-woocommece_cart 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-woocommece_cart {
   0% {
      stroke-dashoffset: 411;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-woocommerce #laptop path {
   stroke-dashoffset: 3033;
   stroke-dasharray: 3033;
   animation: iws-woocommece_laptop 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-woocommece_laptop {
   0% {
      stroke-dashoffset: 3033;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.iws-woocommerce #card path {
   stroke-dashoffset: 609;
   stroke-dasharray: 609;
   animation: iws-woocommece_card 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iws-woocommece_card {
   0% {
      stroke-dashoffset: 609;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* INFORMATION WEBSITE SERVICE - WOOCOMMERCE END */


/* IOS WEB DEVELOPMENT START */

.ios-mob-dev #bubbles,
.ios-mob-dev #bubbles_2,
.ios-mob-dev #bubbles_3,
.ios-mob-dev #bubbles_4,
.ios-mob-dev #bubbles_5 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.ios-mob-dev #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.ios-mob-dev #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.ios-mob-dev #ipad {
   stroke-dashoffset: 533;
   stroke-dasharray: 533;
   animation: imd-ipad 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes imd-ipad {
   0% {
      stroke-dashoffset: 533;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ios-mob-dev #notebook {
   stroke-dashoffset: 355;
   stroke-dasharray: 355;
   animation: imd-notebook 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes imd-notebook {
   0% {
      stroke-dashoffset: 355;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ios-mob-dev #lines {
   stroke-dashoffset: 153;
   stroke-dasharray: 153;
   animation: imd-lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes imd-lines {
   0% {
      stroke-dashoffset: 153;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ios-mob-dev #arrows {
   stroke-dashoffset: 57;
   stroke-dasharray: 57;
   animation: imd-arrows 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes imd-arrows {
   0% {
      stroke-dashoffset: 57;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ios-mob-dev #mobile {
   stroke-dashoffset: 612;
   stroke-dasharray: 612;
   animation: imd-mobile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes imd-mobile {
   0% {
      stroke-dashoffset: 612;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ios-mob-dev #gears path {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}


/* IOS WEB DEVELOPMENT END */


/* GAME - 3 START */

.game-3 #bubbles,
.game-3 #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.game-3 #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.game-3 #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.game-3 #gears path,
.game-3 #circles path {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.game-3 #target path {
   stroke-dashoffset: 6.1;
   stroke-dasharray: 6.1;
   animation: game-3-target 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes game-3-target {
   0% {
      stroke-dashoffset: 6.1;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.game-3 #mobile path {
   stroke-dashoffset: 239;
   stroke-dasharray: 239;
   animation: game-3-mobile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes game-3-mobile {
   0% {
      stroke-dashoffset: 239;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.game-3 #earth path {
   stroke-dashoffset: 140;
   stroke-dasharray: 140;
   animation: game-3-earth 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes game-3-earth {
   0% {
      stroke-dashoffset: 140;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* GAME - 3 END */


/* GAME - 1 START */

.game-1 #bubbles,
.game-1 #bubbles_2,
.game-1 #bubbles_3 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.game-1 #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.game-1 #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.game-1 #anime-1 {
   stroke-dashoffset: 505;
   stroke-dasharray: 505;
   animation: game-1-anime-1 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes game-1-anime-1 {
   0% {
      stroke-dashoffset: 505;
      transform: scale(0.85);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(0.85);
   }
}

.game-1 #anime-2 {
   stroke-dashoffset: 709;
   stroke-dasharray: 709;
   animation: game-1-anime-2 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes game-1-anime-2 {
   0% {
      stroke-dashoffset: 709;
      transform: scale(0.9);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(0.9);
   }
}

.game-1 #anime-3 {
   stroke-dashoffset: 417;
   stroke-dasharray: 417;
   animation: game-1-anime-3 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes game-1-anime-3 {
   0% {
      stroke-dashoffset: 417;
      transform: scale(0.85);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(0.85);
   }
}

.game-1 #triangle {
   stroke-dashoffset: 345;
   stroke-dasharray: 345;
   animation: game-1-triangle 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes game-1-triangle {
   0% {
      stroke-dashoffset: 345;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* GAME - 1 END */


/* GAME - 2 START */

.game-2 #bubbles,
.game-2 #bubbles_2,
.game-2 #bubbles_3,
.game-2 #bubbles_4 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.game-2 #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.game-2 #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.game-2 #circles path {
   stroke-dashoffset: 155;
   stroke-dasharray: 155;
   animation: game-2-circles 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes game-2-circles {
   0% {
      stroke-dashoffset: 155;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.game-2 #boy {
   stroke-dashoffset: 291;
   stroke-dasharray: 291;
   animation: game-2-boy 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes game-2-boy {
   0% {
      stroke-dashoffset: 291;
      transform: scale(0.95);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(0.95);
   }
}


/* GAME - 2 END */


/* CROSS PLATFORM START */

.cross-platform #bubbles,
.cross-platform #bubbles_2,
.cross-platform #bubbles_3 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.cross-platform #logos,
.cross-platform #logos_2,
.cross-platform #logos_3,
.cross-platform #logos_4,
.cross-platform #logos_5,
.cross-platform #logos_6 {
   stroke-dashoffset: 155;
   stroke-dasharray: 155;
   animation: cross-platform-logos 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cross-platform-logos {
   0% {
      stroke-dashoffset: 155;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.cross-platform #loader {
   stroke-dashoffset: 4.3;
   stroke-dasharray: 4.3;
   animation: cross-platform-loader 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cross-platform-loader {
   0% {
      stroke-dashoffset: 4.3;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.cross-platform #big-circles {
   stroke-dashoffset: 73.5;
   stroke-dasharray: 73.5;
   animation: cross-platform-big-circles 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cross-platform-big-circles {
   0% {
      stroke-dashoffset: 73.5;
      transform: scale(0.90);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(0.90);
   }
}

.cross-platform #mid-circles {
   stroke-dashoffset: 185.1;
   stroke-dasharray: 185.1;
   animation: cross-platform-mid-circles 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cross-platform-mid-circles {
   0% {
      stroke-dashoffset: 185.1;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.cross-platform #mobile {
   stroke-dashoffset: 450;
   stroke-dasharray: 450;
   animation: cross-platform-mobile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes cross-platform-mobile {
   0% {
      stroke-dashoffset: 450;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* CROSS PLATFORM END */


/* MOBILE START */

.mobile #mobile_2 {
   stroke-dashoffset: 2651;
   stroke-dasharray: 2651;
   animation: mobile_2 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes mobile_2 {
   0% {
      stroke-dashoffset: 2651;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.mobile #boxes-big {
   stroke-dashoffset: 559;
   stroke-dasharray: 559;
   animation: mobile-boxes-big 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes mobile-boxes-big {
   0% {
      stroke-dashoffset: 559;
      transform: scale(0.9);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(0.9);
   }
}

.mobile #boxes-small {
   stroke-dashoffset: 270;
   stroke-dasharray: 270;
   animation: mobile-boxes-small 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes mobile-boxes-small {
   0% {
      stroke-dashoffset: 270;
      transform: scale(0.9);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(0.9);
   }
}

.mobile #lines {
   stroke-dashoffset: 270;
   stroke-dasharray: 270;
   animation: mobile-lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes mobile-lines {
   0% {
      stroke-dashoffset: 270;
      transform: scale(0.9);
   }
   50% {
      stroke-dashoffset: 0;
      transform: scale(1);
   }
   100% {
      stroke-dashoffset: 0;
      transform: scale(0.9);
   }
}


/* MOBILE END */


/* MVP START */

.mvp #bubbles {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.mvp #icon {
   stroke-dashoffset: 101;
   stroke-dasharray: 101;
   animation: mvp-icon 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes mvp-icon {
   0% {
      stroke-dashoffset: 101;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.mvp #icon_2 {
   stroke-dashoffset: 417;
   stroke-dasharray: 417;
   animation: mvp-icon_2 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes mvp-icon_2 {
   0% {
      stroke-dashoffset: 417;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.mvp #icon_3 {
   stroke-dashoffset: 113;
   stroke-dasharray: 113;
   animation: mvp-icon_3 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes mvp-icon_3 {
   0% {
      stroke-dashoffset: 113;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.mvp #icon_4 {
   stroke-dashoffset: 197;
   stroke-dasharray: 197;
   animation: mvp-icon_4 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes mvp-icon_4 {
   0% {
      stroke-dashoffset: 197;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.mvp #icon_5 {
   stroke-dashoffset: 181;
   stroke-dasharray: 181;
   animation: mvp-icon_5 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes mvp-icon_5 {
   0% {
      stroke-dashoffset: 181;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.mvp #icon_6 {
   stroke-dashoffset: 162;
   stroke-dasharray: 162;
   animation: mvp-icon_6 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes mvp-icon_6 {
   0% {
      stroke-dashoffset: 162;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.mvp #lines {
   stroke-dashoffset: 181;
   stroke-dasharray: 181;
   animation: mvp-lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes mvp-lines {
   0% {
      stroke-dashoffset: 181;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* MVP END */


/* FULLY CUSTOMIZED ECOM START */

.fully-customized-ecom #bubbles,
.fully-customized-ecom #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.fully-customized-ecom #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.fully-customized-ecom #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.fully-customized-ecom #bucket {
   stroke-dashoffset: 831;
   stroke-dasharray: 831;
   animation: fully-custom-bucket 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes fully-custom-bucket {
   0% {
      stroke-dashoffset: 831;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.fully-customized-ecom #globe {
   stroke-dashoffset: 764;
   stroke-dasharray: 764;
   animation: fully-custom-globe 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes fully-custom-globe {
   0% {
      stroke-dashoffset: 764;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.fully-customized-ecom #cart {
   stroke-dashoffset: 975;
   stroke-dasharray: 975;
   animation: fully-custom-cart 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes fully-custom-cart {
   0% {
      stroke-dashoffset: 975;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.fully-customized-ecom #search {
   stroke-dashoffset: 1677;
   stroke-dasharray: 1677;
   animation: fully-custom-search 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes fully-custom-search {
   0% {
      stroke-dashoffset: 1677;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.fully-customized-ecom #checklist {
   stroke-dashoffset: 1014;
   stroke-dasharray: 1014;
   animation: fully-custom-checklist 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes fully-custom-checklist {
   0% {
      stroke-dashoffset: 1014;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.fully-customized-ecom #laptop {
   stroke-dashoffset: 2104;
   stroke-dasharray: 2104;
   animation: fully-custom-laptop 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes fully-custom-laptop {
   0% {
      stroke-dashoffset: 2104;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* FULLY CUSTOMIZED ECOM END */


/* ANDROID APP SERVICE START */

.android-app-service #bubbles,
.android-app-service #bubbles_2,
.android-app-service #bubbles_3 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.android-app-service #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.android-app-service #lines {
   stroke-dashoffset: 208;
   stroke-dasharray: 208;
   animation: android-as-lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes android-as-lines {
   0% {
      stroke-dashoffset: 208;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.android-app-service #bulb {
   stroke-dashoffset: 408;
   stroke-dasharray: 408;
   animation: android-as-bulb 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes android-as-bulb {
   0% {
      stroke-dashoffset: 408;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.android-app-service #code-window {
   stroke-dashoffset: 229;
   stroke-dasharray: 229;
   animation: android-as-code-window 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes android-as-code-window {
   0% {
      stroke-dashoffset: 229;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.android-app-service #notes {
   stroke-dashoffset: 320;
   stroke-dasharray: 320;
   animation: android-as-notes 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes android-as-notes {
   0% {
      stroke-dashoffset: 320;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.android-app-service #scale {
   stroke-dashoffset: 329;
   stroke-dasharray: 329;
   animation: android-as-scale 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes android-as-scale {
   0% {
      stroke-dashoffset: 329;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.android-app-service #gear {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.android-app-service #mobile {
   stroke-dashoffset: 532;
   stroke-dasharray: 532;
   animation: android-as-mobile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes android-as-mobile {
   0% {
      stroke-dashoffset: 532;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.android-app-service #pen {
   stroke-dashoffset: 247;
   stroke-dasharray: 247;
   animation: android-as-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes android-as-pen {
   0% {
      stroke-dashoffset: 247;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* ANDROID APP SERVICE END */


/* DIGITAL MARKETING ICON START */

.digital-marketing-icon #bubbles,
.digital-marketing-icon #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.digital-marketing-icon #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.digital-marketing-icon #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.digital-marketing-icon #chats {
   stroke-dashoffset: 545;
   stroke-dasharray: 545;
   animation: dmi-chats 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dmi-chats {
   0% {
      stroke-dashoffset: 545;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.digital-marketing-icon #speaker {
   stroke-dashoffset: 343;
   stroke-dasharray: 343;
   animation: dmi-speaker 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dmi-speaker {
   0% {
      stroke-dashoffset: 343;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.digital-marketing-icon #rocket {
   stroke-dashoffset: 471;
   stroke-dasharray: 471;
   animation: dmi-rocket 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dmi-rocket {
   0% {
      stroke-dashoffset: 471;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.digital-marketing-icon #stats {
   stroke-dashoffset: 475;
   stroke-dasharray: 475;
   animation: dmi-stats 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dmi-stats {
   0% {
      stroke-dashoffset: 475;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.digital-marketing-icon #gears path {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.digital-marketing-icon #pie {
   stroke-dashoffset: 699;
   stroke-dasharray: 699;
   animation: dmi-pie 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dmi-pie {
   0% {
      stroke-dashoffset: 699;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.digital-marketing-icon #window {
   stroke-dashoffset: 2929;
   stroke-dasharray: 2929;
   animation: dmi-window 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dmi-window {
   0% {
      stroke-dashoffset: 2929;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.digital-marketing-icon #search {
   animation: dmi-search 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes dmi-search {
   0% {
      transform: scale(0.8);
   }
   50% {
      transform: scale(1);
   }
   100% {
      transform: scale(0.8);
   }
}


/* DIGITAL MARKETING ICON END */


/* PERFECTION START */

.perfection #bubbles,
.perfection #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.perfection #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.perfection #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.perfection #server {
   stroke-dashoffset: 1708;
   stroke-dasharray: 1708;
   animation: perfection-server 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes perfection-server {
   0% {
      stroke-dashoffset: 1708;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.perfection #system {
   stroke-dashoffset: 1834;
   stroke-dasharray: 1834;
   animation: perfection-system 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes perfection-system {
   0% {
      stroke-dashoffset: 1834;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.perfection #network {
   stroke-dashoffset: 1672;
   stroke-dasharray: 1672;
   animation: perfection-network 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes perfection-network {
   0% {
      stroke-dashoffset: 1672;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.perfection #hand {
   stroke-dashoffset: 1464;
   stroke-dasharray: 1464;
   animation: perfection-hand 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes perfection-hand {
   0% {
      stroke-dashoffset: 1464;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.perfection #boxes {
   stroke-dashoffset: 603;
   stroke-dasharray: 603;
   animation: perfection-boxes 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes perfection-boxes {
   0% {
      stroke-dashoffset: 603;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.perfection #chat-bubble {
   stroke-dashoffset: 902;
   stroke-dasharray: 902;
   animation: perfection-chat-bubble 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes perfection-chat-bubble {
   0% {
      stroke-dashoffset: 902;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* PERFECTION END */


/* APPEALING INTERACTIVE INTERFACE START */

.appealing-interactive-interface #bubbles,
.appealing-interactive-interface #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.appealing-interactive-interface #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.appealing-interactive-interface #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.appealing-interactive-interface #laptop {
   stroke-dashoffset: 1676;
   stroke-dasharray: 1676;
   animation: aii-laptop 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes aii-laptop {
   0% {
      stroke-dashoffset: 1676;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.appealing-interactive-interface #mobile {
   stroke-dashoffset: 1339;
   stroke-dasharray: 1339;
   animation: aii-mobile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes aii-mobile {
   0% {
      stroke-dashoffset: 1339;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.appealing-interactive-interface #gear-big {
   stroke-dashoffset: 956;
   stroke-dasharray: 956;
   animation: aii-gear-big 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes aii-gear-big {
   0% {
      stroke-dashoffset: 956;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.appealing-interactive-interface #rocket {
   stroke-dashoffset: 580;
   stroke-dasharray: 580;
   animation: aii-rocket 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes aii-rocket {
   0% {
      stroke-dashoffset: 580;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.appealing-interactive-interface #rocket_2 {
   stroke-dashoffset: 555;
   stroke-dasharray: 555;
   animation: aii-rocket_2 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes aii-rocket_2 {
   0% {
      stroke-dashoffset: 555;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.appealing-interactive-interface #tab {
   stroke-dashoffset: 1595;
   stroke-dasharray: 1595;
   animation: aii-tab 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes aii-tab {
   0% {
      stroke-dashoffset: 1595;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.appealing-interactive-interface #speaker {
   stroke-dashoffset: 340;
   stroke-dasharray: 340;
   animation: aii-speaker 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes aii-speaker {
   0% {
      stroke-dashoffset: 340;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.appealing-interactive-interface #gear path {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.appealing-interactive-interface #youtube {
   animation: aii-youtube 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes aii-youtube {
   0% {
      transform: scale(0.8);
   }
   50% {
      transform: scale(1);
   }
   100% {
      transform: scale(0.8);
   }
}


/* APPEALING INTERACTIVE INTERFACE END */


/* GORGEOUS AND MINIMAL USER INTERFACE START */

.gorgeous-minimal-user #bubbles,
.gorgeous-minimal-user #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.gorgeous-minimal-user #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.gorgeous-minimal-user #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.gorgeous-minimal-user #bucket {
   stroke-dashoffset: 610;
   stroke-dasharray: 610;
   animation: gmu-bucket 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes gmu-bucket {
   0% {
      stroke-dashoffset: 610;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.gorgeous-minimal-user #screen {
   stroke-dashoffset: 3184;
   stroke-dasharray: 3184;
   animation: gmu-screen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes gmu-screen {
   0% {
      stroke-dashoffset: 3184;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.gorgeous-minimal-user #mouse {
   stroke-dashoffset: 1505;
   stroke-dasharray: 1505;
   animation: gmu-mouse 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes gmu-mouse {
   0% {
      stroke-dashoffset: 1505;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.gorgeous-minimal-user #c-gear {
   stroke-dashoffset: 1189;
   stroke-dasharray: 1189;
   animation: gmu-c-gear 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes gmu-c-gear {
   0% {
      stroke-dashoffset: 1189;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* GORGEOUS AND MINIMAL USER INTERFACE END */


/* PRODUCT STRATEGY 1 START */

.product-strategy-1 #bubbles,
.product-strategy-1 #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.product-strategy-1 #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.product-strategy-1 #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.product-strategy-1 #hand {
   stroke-dashoffset: 233;
   stroke-dasharray: 233;
   animation: ps1-hand 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps1-hand {
   0% {
      stroke-dashoffset: 233;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.product-strategy-1 #pencil {
   stroke-dashoffset: 280;
   stroke-dasharray: 280;
   animation: ps1-pencil 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps1-pencil {
   0% {
      stroke-dashoffset: 280;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.product-strategy-1 #cont {
   stroke-dashoffset: 692;
   stroke-dasharray: 692;
   animation: ps1-cont 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps1-cont {
   0% {
      stroke-dashoffset: 692;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* PRODUCT STRATEGY 1 END */


/* PRODUCT STRATEGY 2 START */

.product-strategy-2 #bubbles,
.product-strategy-2 #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.product-strategy-2 #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.product-strategy-2 #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.product-strategy-2 #search {
   stroke-dashoffset: 382;
   stroke-dasharray: 382;
   animation: ps2-search 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps2-search {
   0% {
      stroke-dashoffset: 382;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.product-strategy-2 #wrench {
   stroke-dashoffset: 300;
   stroke-dasharray: 300;
   animation: ps2-wrench 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps2-wrench {
   0% {
      stroke-dashoffset: 300;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.product-strategy-2 #screen {
   stroke-dashoffset: 482;
   stroke-dasharray: 482;
   animation: ps2-screen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps2-screen {
   0% {
      stroke-dashoffset: 482;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.product-strategy-2 #mobile {
   stroke-dashoffset: 805;
   stroke-dasharray: 805;
   animation: ps2-mobile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps2-mobile {
   0% {
      stroke-dashoffset: 805;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.product-strategy-2 #gear,
.product-strategy-2 #gear_2 {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}


/* PRODUCT STRATEGY 2 END */


/* PRODUCT STRATEGY 1 START */

.product-strategy-4 #bubbles,
.product-strategy-4 #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.product-strategy-4 #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.product-strategy-4 #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.product-strategy-4 #machine {
   stroke-dashoffset: 523;
   stroke-dasharray: 523;
   animation: ps4-machine 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps4-machine {
   0% {
      stroke-dashoffset: 523;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* PRODUCT STRATEGY 4 END */


/* PRODUCT STRATEGY 5 START */

.product-strategy-5 #bubbles,
.product-strategy-5 #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.product-strategy-5 #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.product-strategy-5 #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.product-strategy-5 #camera-take {
   stroke-dashoffset: 164;
   stroke-dasharray: 164;
   animation: ps5-camera-take 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps5-camera-take {
   0% {
      stroke-dashoffset: 164;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.product-strategy-5 #speaker {
   stroke-dashoffset: 142;
   stroke-dasharray: 142;
   animation: ps5-speaker 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps5-speaker {
   0% {
      stroke-dashoffset: 142;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.product-strategy-5 #tab {
   stroke-dashoffset: 701;
   stroke-dasharray: 701;
   animation: ps5-tab 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps5-tab {
   0% {
      stroke-dashoffset: 701;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.product-strategy-5 #camera {
   stroke-dashoffset: 202;
   stroke-dasharray: 202;
   animation: ps5-camera 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps5-camera {
   0% {
      stroke-dashoffset: 202;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.product-strategy-5 #lines {
   stroke-dashoffset: 61;
   stroke-dasharray: 61;
   animation: ps5-lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps5-lines {
   0% {
      stroke-dashoffset: 61;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* PRODUCT STRATEGY 5 END */


/* ECOMMERCE PORTAL START */

.ecommerce-portal #bubbles,
.ecommerce-portal #bubbles_2,
.ecommerce-portal #bubbles_3 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.ecommerce-portal #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.ecommerce-portal #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.ecommerce-portal #mobile {
   stroke-dashoffset: 1184;
   stroke-dasharray: 1184;
   animation: ep-mobile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ep-mobile {
   0% {
      stroke-dashoffset: 1184;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-portal #basket {
   stroke-dashoffset: 311;
   stroke-dasharray: 311;
   animation: ep-basket 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ep-basket {
   0% {
      stroke-dashoffset: 311;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-portal #buy {
   stroke-dashoffset: 213;
   stroke-dasharray: 213;
   animation: ep-buy 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ep-buy {
   0% {
      stroke-dashoffset: 213;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-portal #bag {
   stroke-dashoffset: 288;
   stroke-dasharray: 288;
   animation: ep-bag 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ep-bag {
   0% {
      stroke-dashoffset: 288;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-portal #cart-wheel {
   stroke-dashoffset: 193;
   stroke-dasharray: 193;
   animation: ep-cart-wheel 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ep-cart-wheel {
   0% {
      stroke-dashoffset: 193;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-portal #card {
   stroke-dashoffset: 343;
   stroke-dasharray: 343;
   animation: ep-card 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ep-card {
   0% {
      stroke-dashoffset: 343;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-portal #clock {
   stroke-dashoffset: 221;
   stroke-dasharray: 221;
   animation: ep-clock 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ep-clock {
   0% {
      stroke-dashoffset: 221;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-portal #location {
   stroke-dashoffset: 145;
   stroke-dasharray: 145;
   animation: ep-location 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ep-location {
   0% {
      stroke-dashoffset: 145;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-portal #tag {
   stroke-dashoffset: 280;
   stroke-dasharray: 280;
   animation: ep-tag 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ep-tag {
   0% {
      stroke-dashoffset: 280;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ecommerce-portal #card_2 {
   stroke-dashoffset: 329;
   stroke-dasharray: 329;
   animation: ep-card_2 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ep-card_2 {
   0% {
      stroke-dashoffset: 329;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* ECOMMERCE PORTAL END */


/* PRODUCT STRATEGY 6 START */

.product-strategy-6 #bubbles,
.product-strategy-6 #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.product-strategy-6 #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.product-strategy-6 #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.product-strategy-6 #pen {
   stroke-dashoffset: 135;
   stroke-dasharray: 135;
   animation: ps6-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps6-pen {
   0% {
      stroke-dashoffset: 135;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.product-strategy-6 #sketch {
   stroke-dashoffset: 694;
   stroke-dasharray: 694;
   animation: ps6-sketch 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps6-sketch {
   0% {
      stroke-dashoffset: 694;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.product-strategy-6 #boxes {
   stroke-dashoffset: 333;
   stroke-dasharray: 333;
   animation: ps6-boxes 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes ps6-boxes {
   0% {
      stroke-dashoffset: 333;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.product-strategy-6 #gear,
.product-strategy-6 #gear_2 {
   animation-name: manual-auto-gear;
   animation-duration: 6s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}


/* PRODUCT STRATEGY 6 END */


/* WHY TO HIRE START */

.why-to-hire #bubbles,
.why-to-hire #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.why-to-hire #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.why-to-hire #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.why-to-hire #analysis path {
   stroke-dashoffset: 584;
   stroke-dasharray: 584;
   animation: wth-analysis 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wth-analysis {
   0% {
      stroke-dashoffset: 584;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.why-to-hire #optimization path {
   stroke-dashoffset: 351;
   stroke-dasharray: 351;
   animation: wth-optimization 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wth-optimization {
   0% {
      stroke-dashoffset: 351;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.why-to-hire #content path {
   stroke-dashoffset: 267;
   stroke-dasharray: 267;
   animation: wth-content 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wth-content {
   0% {
      stroke-dashoffset: 267;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.why-to-hire #reading path {
   stroke-dashoffset: 390;
   stroke-dasharray: 390;
   animation: wth-reading 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wth-reading {
   0% {
      stroke-dashoffset: 390;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.why-to-hire #backlinks path {
   stroke-dashoffset: 383;
   stroke-dasharray: 383;
   animation: wth-backlinks 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wth-backlinks {
   0% {
      stroke-dashoffset: 383;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.why-to-hire #keywords path {
   stroke-dashoffset: 356;
   stroke-dasharray: 356;
   animation: wth-keywords 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wth-keywords {
   0% {
      stroke-dashoffset: 356;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.why-to-hire #web path {
   stroke-dashoffset: 391;
   stroke-dasharray: 391;
   animation: wth-web 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wth-web {
   0% {
      stroke-dashoffset: 391;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.why-to-hire #traffic path {
   stroke-dashoffset: 432;
   stroke-dasharray: 432;
   animation: wth-traffic 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wth-traffic {
   0% {
      stroke-dashoffset: 432;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.why-to-hire #seo path {
   stroke-dashoffset: 1423;
   stroke-dasharray: 1423;
   animation: wth-seo 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wth-seo {
   0% {
      stroke-dashoffset: 1423;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.why-to-hire #lines path {
   stroke-dashoffset: 207;
   stroke-dasharray: 207;
   animation: wth-lines 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes wth-lines {
   0% {
      stroke-dashoffset: 207;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}


/* WHY TO HIRE END */


/* WEB APP USER INTERFACER START */

.web-app-user-interface #bubbles,
.web-app-user-interface #bubbles_2 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.web-app-user-interface #plus {
   stroke-dashoffset: 106;
   stroke-dasharray: 106;
   animation: home-hostalic-pen 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

.web-app-user-interface #ninja-blade path {
   stroke-dashoffset: 2168;
   stroke-dasharray: 2168;
   animation-name: app-analytics-ninja-blade;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.web-app-user-interface #rocket path {
   stroke-dashoffset: 471;
   stroke-dasharray: 471;
   animation: waui-rocket 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes waui-rocket {
   0% {
      stroke-dashoffset: 471;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-user-interface #stats path {
   stroke-dashoffset: 347;
   stroke-dasharray: 347;
   animation: waui-stats 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes waui-stats {
   0% {
      stroke-dashoffset: 347;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-user-interface #layout path {
   stroke-dashoffset: 1922;
   stroke-dasharray: 1922;
   animation: waui-layout 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes waui-layout {
   0% {
      stroke-dashoffset: 1922;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.web-app-user-interface #gear-small,
.web-app-user-interface #gear-big {
   animation-name: app-campaign-gear;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}


/* WEB APP USER INTERFACER END */


/* IOS APP BANNER START */

.ios-app-banner #bubbles,
.ios-app-banner #bubbles_2,
.ios-app-banner #bubbles_3 {
   animation-name: app-analytics-bubbles;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
   transition: ease all 0.25s;
   transform-box: fill-box;
}

.ios-app-banner #gear,
.ios-app-banner #gear_2,
.ios-app-banner #gear_3,
.ios-app-banner #gear_4 {
   animation-name: app-campaign-gear;
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: linear all 0.25s;
   transform-box: fill-box;
   transform-origin: center;
}

.ios-app-banner #tab path {
   stroke-dashoffset: 533;
   stroke-dasharray: 533;
   animation: iab-tab 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iab-tab {
   0% {
      stroke-dashoffset: 533;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ios-app-banner #mobile path {
   stroke-dashoffset: 355;
   stroke-dasharray: 355;
   animation: iab-mobile 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iab-mobile {
   0% {
      stroke-dashoffset: 355;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ios-app-banner #mobile_2 path {
   stroke-dashoffset: 612;
   stroke-dasharray: 612;
   animation: iab-mobile_2 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iab-mobile_2 {
   0% {
      stroke-dashoffset: 612;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

.ios-app-banner #cont path {
   stroke-dashoffset: 237;
   stroke-dasharray: 237;
   animation: iab-cont 8s ease-in-out forwards infinite alternate;
   transform-box: fill-box;
   transform-origin: center;
}

@keyframes iab-cont {
   0% {
      stroke-dashoffset: 237;
   }
   50% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}