/*Sync Animation*/
  .animation { clear: both; display: block;}

  /*DataFlow SVG*/
  #funnel {
    margin: 0 auto;
    width: 100%;
    height: 470px;
    background: url('img/syncimage.png') no-repeat;
  }

  .pipeline { position: absolute; background: url('img/pipeline.png') no-repeat; width: 98px; height: 112px; top: 177px; left: 187px;}

  @media screen and (max-width:640px) {
      .pipeline {background-size: contain; width:62px; top: 112px; left: 144px;}
      .flow {display: none;}
  }
  /* Data Transfer Animation */
  /* X-Axis |  */
  .data1 {animation: xAxis1 3s infinite ; animation-delay:.25s; position: absolute; top: 150px; left: 232px;}

  .data2 {animation: xAxis2 2.4s infinite ; animation-delay:.25s; position: absolute; top: 151px; left: 232px; }
  .data4 {animation: xAxis2 2.4s infinite ; animation-delay:.5s; position: absolute; top: 153px; left: 230px; }
  .data6 {animation: xAxis2 2.4s infinite ; animation-delay:.75s; position: absolute; top: 152px; left: 232px; }
  .data8 {animation: xAxis2 2.4s infinite ; animation-delay:1.0s; position: absolute; top: 153px; left: 231px; }
  .data10 {animation: xAxis2 2.4s infinite ; animation-delay:1.25s; position: absolute; top: 150px; left: 233px; }
  .data12 {animation: xAxis2 2.4s infinite ; animation-delay:1.5s; position: absolute; top: 150px; left: 230px; }
  .data14 {animation: xAxis2 2.4s infinite ; animation-delay:1.75s; position: absolute; top: 151px; left: 232px; }

  .data3 {animation: xAxis3 2.4s infinite ; animation-delay:.24s; position: absolute; top: 150px; left: 232px;}
  .data5 {animation: xAxis3 2.4s infinite ; animation-delay:.45s; position: absolute; top: 153px; left: 232px;}
  .data7 {animation: xAxis3 2.4s infinite ; animation-delay:.7s; position: absolute; top: 151px; left: 230px;}
  .data9 {animation: xAxis3 2.4s infinite ; animation-delay:.95s; position: absolute; top: 152px; left: 233px;}
  .data11 {animation: xAxis3 2.4s infinite ; animation-delay:1.24s; position: absolute; top: 152px; left: 231px;}
  .data13 {animation: xAxis3 2.4s infinite ; animation-delay:1.45s; position: absolute; top: 153px; left: 232px;}
  .data15 {animation: xAxis3 2.4s infinite ; animation-delay:1.7s; position: absolute; top: 151px; left: 230px;}

  /* Y-Axis  */
  .data::after{animation: yAxis1 3s infinite; animation-delay:.25s; content: ''; display: block; width: 3px; height: 3px; background-color: #00A0FF;}
  .data4::after{animation: yAxis1 2.4s infinite; animation-delay:.5s; content: ''; display: block; width: 3px; height: 3px; background-color: #00A0FF;}
  .data7::after{animation: yAxis1 2.4s infinite; animation-delay:.70s; content: ''; display: block; width: 3px; height: 3px; background-color: #00A0FF;}
  .data10::after{animation: yAxis1 2.4s infinite; animation-delay:1.25s; content: ''; display: block; width: 3px; height: 3px; background-color: #177CB8;}
  .data13::after{animation: yAxis1 2.4s infinite; animation-delay:1.45s; content: ''; display: block; width: 3px; height: 3px; background-color: #177CB8;}

  .data2::after{animation: yAxis2 2.4s infinite; animation-delay:.25s; content: ''; display: block; width: 3px; height: 3px; background-color: #177CB8;}
  .data6::after{animation: yAxis2 2.4s infinite; animation-delay:.75s; content: ''; display: block; width: 3px; height: 3px; background-color: #177CB8;}
  .data8::after{animation: yAxis2 2.4s infinite; animation-delay:1.0s; content: ''; display: block; width: 3px; height: 3px; background-color: #00A0FF;}
  .data12::after{animation: yAxis2 2.4s infinite; animation-delay:1.5s; content: ''; display: block; width: 3px; height: 3px; background-color: #00A0FF;}
  .data14::after{animation: yAxis2 2.4s infinite; animation-delay:1.75s; content: ''; display: block; width: 3px; height: 3px; background-color: #177CB8;}

  .data3::after{animation: yAxis3 2.4s infinite; animation-delay:.24s; content: ''; display: block; width: 3px; height: 3px; background-color: #00A0FF;}
  .data5::after{animation: yAxis3 2.4s infinite; animation-delay:.45s; content: ''; display: block; width: 3px; height: 3px; background-color: #177CB8;}
  .data9::after{animation: yAxis3 2.4s infinite; animation-delay:1s; content: ''; display: block; width: 3px; height: 3px; background-color: #177CB8;}
  .data11::after{animation: yAxis3 2.4s infinite; animation-delay:1.24s; content: ''; display: block; width: 3px; height: 3px; background-color: #00A0FF;}
  .data15::after{animation: yAxis3 2.4s infinite; animation-delay:1.75s; content: ''; display: block; width: 3px; height: 3px; background-color: #00A0FF;}


  /* Keyframes Adjustments */
  @keyframes yAxis1 {
    from  { opacity: 0; transform: translateY(0px);  animation-timing-function: ease-out;}
    20%   { opacity: 100%;}
    50%   { transform: translateY(162px);}
    72%   { opacity: 100; transform: translateY(162px); animation-timing-function: ease-in}
    to    { opacity: 0; transform: translateY(196px); }
  }
  @keyframes xAxis1 {
    from  { transform: translateX(0px);    border-radius: 3px; animation-timing-function: ease-out;}
    37%   { transform: translateX(0px); animation-timing-function: ease-in-out;}
    89%   { transform: translateX(112px);}
    to    { transform: translateX(112px);}
  }

  @keyframes yAxis2 {
    from  { transform: translateY(0px); animation-timing-function: ease-out; }
    20%   { opacity: 100%;}
    50%   { transform: translateY(162px);}
    72%   { opacity: 100;transform: translateY(162px); animation-timing-function: ease-in}
    to    { opacity: 0; transform: translateY(196px); }
  }
  @keyframes xAxis2 {
    from  { transform: translateX(0px);    border-radius: 3px; animation-timing-function: ease-out;}
    37%   { transform: translateX(0px); animation-timing-function: ease-in-out;}
    89%   { transform: translateX(-112px);}
    to    { transform: translateX(-112px);}
  }
  @keyframes yAxis3 {
    from  { opacity: 0; transform: translateY(0px);  animation-timing-function: ease-out;}
    20%   { opacity: 100%;}
    50%   { transform: translateY(160px);}
    72%   { opacity: 100; transform: translateY(160px); animation-timing-function: ease-in}
    to    { opacity: 0; transform: translateY(194px); }
  }
  @keyframes xAxis3 {
    from  { transform: translateX(0px);    border-radius: 3px; animation-timing-function: ease-out;}
    37%   { transform: translateX(0px); animation-timing-function: ease-in-out;}
    89%   { transform: translateX(112px);}
    to    { transform: translateX(112px);}
  }