ul.tech-graphic-legend {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    list-style: none;
    margin: 0 auto;
    width: 1170px;
    max-width: 100%;
    height: auto;
    padding-bottom: 4.5rem;
    overflow:visible;
}

svg.explore-arrows {
  width: 64px;
  height: 35px;
  margin: 0 2rem 0 0.5rem;
}

svg.explore-arrows polyline {
  animation:fadeInOut 2000ms linear infinite; 
}

svg.explore-arrows polyline.arrow1 {
  animation-delay:0ms; 
}

svg.explore-arrows polyline.arrow2 {
  animation-delay:400ms; 
}

svg.explore-arrows polyline.arrow3 {
  animation-delay:800ms; 
}

@keyframes fadeInOut {
  0% { opacity: 0.25; }
  35% { opacity: 0.5; }
  50% { opacity:1; }
  65% { opacity: 0.5; }
  100% { opacity: 0.25; }
}

ul.tech-graphic-legend state-copy {
    position: absolute;
    top: calc(100% - 2rem);
    left: 50%;
    width: 800px;
    max-width: 100%;
    text-align: center;
    transition: 240ms ease-in-out all;
    transform: translate(-50%,24px);
    opacity: 0.0;
}

ul.tech-graphic-legend li.active state-copy {
    transform: translate(-50%,0);
    opacity: 1.0;
}

ul.tech-graphic-legend li.intro {
    display: flex;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 100%;
    color: #0F155B;
}

ul.tech-graphic-legend li state-label {
    position: relative;
    display: block;
    font-weight: 500;
    line-height: 100%;
    transition: 240ms ease-in-out all;
    font-size: 1.5rem;
    padding: 0.65rem 2rem;
    border: 2px solid #62C766;
    border-radius: 2.5rem;
    background: white;
    filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.25));
    cursor: pointer;
    margin-right: 2.5rem;
}

ul.tech-graphic-legend li state-label:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 100%;
    background: #62C766;
    width: calc(2.5rem + 2px);
    height: 2px;
}

ul.tech-graphic-legend li:last-of-type state-label:after {
    display: none;
}

ul.tech-graphic-legend li:last-of-type state-label {
    margin-right: 0;
}

ul.tech-graphic-legend li.active state-label, ul.tech-graphic-legend li state-label:hover {
    background: #80D5F9;
    color: white;
    border-color: #80D5F9;
}

figure.technology-graphic-holder {
    position: relative;
    width: 1480px;
    max-width:100%;
    margin: 0 auto;
    padding: 0 1rem;
}

svg.technology-graphic {
    overflow: visible;
    transition:240ms ease-in-out all;
}

svg.technology-graphic g, svg.technology-graphic path, svg.technology-graphic line {
    transition: 240ms ease-in-out all;
    transform-box: fill-box;
    transform-origin: center center;
}

g.waves, g.satellite-lines {
    opacity: 0.0;
    transition-delay:0s;
}

g.waves {
    transform:translate(0,8px); 
}

.state1-active .state1,
.state2-active .state2,
.state3-active .state3 {
    filter: drop-shadow(2px 2px 5px #62c766);
    fill: #62c766;
    opacity:1.0;
    transform:translate(0,0);
    animation:goBurrrr 1.35s ease-in-out infinite;
}

@keyframes goBurrrr {
  0% { filter: drop-shadow(2px 2px 5px #62c766); }
  50% { filter: drop-shadow(2px 2px 7px #ffffff); }
  100% { filter: drop-shadow(2px 2px 5px #62c766); }
}

.state1-active g.waves.state1,
.state2-active g.waves.state2,
.state3-active g.waves.state3 {
    transition-delay:0.25s;
    transform:translate(0,0); 
}

.state2-active g#satellite-lines {
    transition-delay:0.25s; 
}
.state3-active g#satellite-lines-two {
    transition-delay: 0.25s;
}

.state1-active g.state1 path,
.state2-active g.state2 path,
.state3-active g.state3 path {
    fill: #62c766;
}

.state1-active g.state1 path.white-bg {
    fill: white;
}

.state1-active g#car-one {
    transform: translate(72%,0);
}

.state1-active g#car-two {
    transform: translate(244%,0);
}

.state1-active g#car-three.state1,
.state1-active g#car-four.state1 {
    filter:none; 
}

.state2-active g#satellite {
    transform: translate(-250%,0) rotate(-39deg);
}

g#platform-overlay {
    opacity:0.0;
    pointer-events:none;
    transform:translate(581.14px,68.18px);
}

.state3-active #platform-overlay {
    opacity: 1.0;
    transform:translate(581.14px,58.18px);
}

.state3-active #platform-overlay .state3 {
    filter: drop-shadow(2px 2px 7px #62c766);
    stroke: #62c766;
    fill: transparent;
}

.state3-active #platform-overlay .state3.tablet {
    filter: drop-shadow(2px 2px 7px #62c766);
    stroke: #62c766;
    fill:white;
}


@media all and (max-width:1170px) {
  ul.tech-graphic-legend li state-label:after {
      display:none; 
  }
  
  ul.tech-graphic-legend {
      padding: 0 1rem 5rem 1rem;
  }
  
  ul.tech-graphic-legend state-copy {
      padding: 0 1rem;
      font-size:0.85rem;
      top: calc(100% - 4.5rem);
  }
  
  ul.tech-graphic-legend li.intro {
      font-size: 1rem;
  }
  
  svg.explore-arrows {
      width: 30px;
      height: auto;
      margin: 0 1rem 0 0.5rem;
  }
  
  ul.tech-graphic-legend li state-label {
      font-size: 1rem;
      margin: 0.25rem;
      padding: 0.5rem 1.25rem;
  }
  
  figure.technology-graphic-holder {
      padding: 0;
      height: 360px;
  }
  
  svg.technology-graphic {
      transform: scale(1.3) translate(-7%,-12%);
  }
  
  .state1-active svg.technology-graphic {
      transform: scale(1.8) translate(2%,16%);
      transform-origin: center center;
  }
  
  .state2-active svg.technology-graphic {
      transform: scale(1.9) translate(-20%,18%);
  }
  
  .state3-active svg.technology-graphic {
      transform: scale(2) translate(-18%,34%);
      transform-origin: center center;
  }
  
}