/* =============================================================================
    Team Data Sukan
    Editor: Shay Rahman
   ========================================================================== */ 

   .sol-1-1 {fill:#ffcd08;} 
   .sol-2-2 {fill:#231f20;}

   .sol-1 { fill: #808184; }
   .sol-2 { fill: #ffe9a4; }
   .sol-3 { fill: #ffcd08; }
   
   .sol-4 { stroke: #FBB040; width: 100%; stroke-width: 2px;}
   .sol-4-1 { fill:transparent; stroke:#ffcd08; width: 100%; stroke-width: 2px;}
   
   .sol-5 { stroke: #808184; stroke-width: 1.7px; stroke-dasharray: 6 2;  }

/*--- Advanced Analytics ----*/

.animate-outline1 {
  opacity: 1;
  stroke: var(--yellow-color);
  stroke-width: 5;
  --stroke-dashoffset: 450;
  stroke-dasharray: 450;
  stroke-dashoffset: var(--stroke-dashoffset);
  animation: animate 20s linear infinite alternate;
}

@keyframes animate {
  0% {
    opacity: 1;
    fill: var(--yellow-color);
    --stroke-dashoffset: 450;
      stroke-dasharray: 220;
      stroke-dashoffset: var(--stroke-dashoffset);
  }
  50% {
    opacity: 1;
    fill: var(--yellow-color);
    --stroke-dashoffset: 120;
      stroke-dasharray: 120;
      stroke-dashoffset: var(--stroke-dashoffset);
  }
  80% {
    opacity: 1;
    fill: var(--yellow-color);
    --stroke-dashoffset: 220;
      stroke-dasharray: 220;
      stroke-dashoffset: var(--stroke-dashoffset);
  }
  100% {
      opacity: 1;
      fill: var(--yellow-color);
      --stroke-dashoffset: 420;
      stroke-dasharray: 450;
      stroke-dashoffset: var(--stroke-dashoffset);
    }
}

#wrp-loco-insight1 { overflow: hidden; }
#fly-it { position: relative;}

/*--- Insight SVG ----*/

.wrp-animate-line1 {
  /* --background-color: var(--grey-color);--*/
  text-align: center;
  padding: 120px 0;
}
.wrp-animate-line1:before {
  content: '';
  position: absolute;
  z-index: -1;
  height: 100%; width: 100%;
  top: 0; right: 0%;
  background: url(../img/bg_insight3.png) no-repeat;
  opacity: 0.5;
}
 

#Layer1-Solutions { 
  opacity: 0;
  animation-name: slidein2, Layer1Fade;
  animation-duration: 5s, 15s;
  animation-iteration-count: 1, 1;
  animation-iteration-count: infinite;
}

@keyframes slidein2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(-90px);
            transform: translateX(-90px);
  }
}

@keyframes Layer1Fade{
  0%{
    opacity: 0;
  }
  5%{
    opacity: 1;
  }
  95%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

#Layer2-Solutions2 {
  opacity: 0;
  animation: Layer3Fade 2s cubic-bezier(.02,1.06,.47,.99);
  backface-visibility: hidden;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

@keyframes Layer3Fade {
  0%{
    opacity: 0;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  5%{
    opacity: 1;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  95%{
    opacity: 1;
    -webkit-transform: translateX(70px);
            transform: translateX(70px);
  }
  100%{
    opacity: 0;
    -webkit-transform: translateX(90px);
            transform: translateX(90px);
  }
}


#red-line {
  animation: Line-01 2s linear infinite;
  stroke-dashoffset: 0;
  stroke-dasharray: 50%;
  display: block;
  stroke: #FBB040;
}

@keyframes Line-01 {
  from {
    stroke-dashoffset: 50;
    stroke-dasharray: 50;
  }
  to {
    stroke-dashoffset: 100;
    stroke-dasharray: 20;
  }
}

#red-line2 {
  animation: Line-02 2s linear infinite;
  stroke-dasharray: 50%;
  display: block;
}
@keyframes Line-02 {
  from {
    stroke-dashoffset: 70;
    stroke-dasharray: 40;
  }
  to {
    stroke-dashoffset: 100;
    stroke-dasharray: 40;
  }
}

.dot-line {
  animation: Line-03 2s linear infinite;
  display: block;
  stroke: #FBB040;
}
@keyframes Line-03 {
  from {
    stroke-dashoffset: 70;
    stroke-dasharray: 40;
  }
  to {
    stroke-dashoffset: 100;
    stroke-dasharray: 40;
    stroke: #FBB040;
  }
}

/*---- Animation SVG ----*/

.wrp-animate-dt-man { padding-top: 120px;}
.wrp-animate-sol-aa { margin-top: 200px;}
.wrp-animate-sol-ad { margin-top: 300px;}
.wrp-animate-sol-em { margin-top: 180px;}

/*---- Advance Analytics Animation ----*/

#dt-man {
  opacity: 1;
  transform: translateY(0px);
	animation: LayerFloat 6s ease-in-out infinite;
  
}

@keyframes LayerFloat {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-40px);
	}
	100% {
		transform: translateY(0px);
	}
}

#cicleDS {
  animation: LayerFloat2 2s ease-in-out infinite;
  opacity:1;
}

@keyframes LayerFloat2 {
	0% {
		transform: translateY(0px);
    
	}
	50% {
		transform: translateY(-20px);
    transform: translateX(-5px);
    opacity: 0.7;
	}
	100% {
		transform: translateY(0px);
    transform: translateX(0px);
    opacity: 1;
	}
}

#big-dot2, #big-dot3 {
  animation: LayerFade2 2s ease-in-out infinite;
  opacity: 1;
}
@keyframes LayerFade2 {
	0% {
		opacity: 1;
    
	}
	50% {
    opacity: 0.2;
	}
	100% {
    opacity: 1;
	}
}
#small-dot {
  animation: LayerFade2 5s ease-in-out infinite;
  opacity: 1;
}
@keyframes LayerFade2 {
	0% {  opacity: 1; transform: translateY(0px);	}
	50% {
    opacity: 0.2;
    transform: translateY(2px);
	}
	100% {
    opacity: 1;
    transform: translateY(0px);
	}
}