section.waves
{
  position: relative;
  width: 100%;
  height: 210px;
  top: 1px;
}

section.waves.bottom
{
  top: -1px;
  /* transform: rotate(180deg); */
}


.bottom .custom-shape-divider-top-1 , 
.bottom .custom-shape-divider-top-2 , 
.bottom .custom-shape-divider-top-3 ,
.bottom .custom-shape-divider-top-4 ,
.bottom .custom-shape-divider-top-5 
{
  transform: rotate(180deg);
}

.custom-shape-divider-top, 
.custom-shape-divider-top-1, 
.custom-shape-divider-top-2, 
.custom-shape-divider-top-3,
.custom-shape-divider-top-4,
.custom-shape-divider-top-5 
{
  position: absolute;
  left: 0;
  width: 100%;
  /* overflow: hidden; */
  line-height: 0;
  /* transform: rotateZ(180deg); */
}
.top .custom-shape-divider-top
{
  top: 1px;
  transform: rotatez(180deg);
  z-index: 10;
  /* background-color: #ffffff; */
}

.bottom .custom-shape-divider-top
{
  /* transform: rotateZ(180deg); */
  z-index: 10;
}

.custom-shape-divider-top-1
{
  top: 20px;
  /* z-index: 999; */
}

.custom-shape-divider-top-2
{
  top: 5px;
}

.custom-shape-divider-top-3 
{
  top: 25px;
}

.custom-shape-divider-top-4 
{
  top: -14px;
}

.top .custom-shape-divider-top-5
{
  top: 50px;
}


.custom-shape-divider-top svg, 
.custom-shape-divider-top-1 svg, 
.custom-shape-divider-top-2 svg,
.custom-shape-divider-top-3 svg, 
.custom-shape-divider-top-4 svg
{
  position: relative;
  display: block;
  width: calc(150% + 1.3px);
  height: 210px;
  z-index: 10;
}

.custom-shape-divider-top svg
{
  z-index: 11;
  transform: rotatex(180deg);
}

.custom-shape-divider-top-1 svg
{
  animation: MyTrans2 17s linear infinite;
  opacity: .7;
  animation-delay: 0s;
}

.custom-shape-divider-top-2 svg
{
  animation: MyTrans 17s linear infinite;
  opacity: .5;
  animation-delay: 2s;
}

.custom-shape-divider-top-3 svg
{
  animation: MyTrans2 17s linear infinite;
  opacity: .2;
  animation-delay: 4s;
}

.custom-shape-divider-top-4 svg
{
  animation: MyTrans2 14s linear infinite;
  opacity: .6;
  animation-delay: 0s;
}

.custom-shape-divider-top-5 svg
{
  animation: MyTrans2 14s linear infinite;
  opacity: .4;
  animation-delay: 6s;
}

@keyframes MyTrans
{
  0%
  {
    transform: translateX(0%);
  }
  50%
  {
    transform: translateX(25%);
  }
  100%
  {
    transform: translateX(0%);
  }
}

@keyframes MyTrans2
{
  0%
  {
    transform: translateX(0%);
  }
  25%
  {
    transform: translateX(-20%) translateY(-14%);
  }
  50%
  {
    transform: translateX(-37%) translateY(14%) ;
  }
  75%
  {
    transform: translateX(-20%) translateY(-14%);
  }
  100%
  {
    transform: translateX(0%);
  }
}

@keyframes MyTrans3
{
  0%
  {
    transform: translateX(0%);
  }
  25%
  {
    transform: translateX(-20%);
  }
  50%
  {
    transform: translateX(-37%);
  }
  75%
  {
    transform: translateX(-20%);
  }
  100%
  {
    transform: translateX(0%);
  }
}


.shape-fill 
{
  fill: var(--my-blue);
}


/* .custom-shape-divider-top .shape-fill 
{
  fill: #000000;
}

.custom-shape-divider-top-1 .shape-fill 
{
  fill: #FFFFFF;
}

.custom-shape-divider-top-2 .shape-fill 
{
  fill: #ff0000;
}

.custom-shape-divider-top-3 .shape-fill 
{
  fill: #48ff00;
}

.custom-shape-divider-top-4 .shape-fill 
{
  fill: #2600ff;
}

.custom-shape-divider-top-5 .shape-fill 
{
  fill: #ffee00;
} */



@media (max-width: 1000px) {

  .custom-shape-divider-top-1 svg
  {
    animation: MyTrans3 17s linear infinite;
  }

  /* .custom-shape-divider-top-2 svg
  {
    animation: MyTrans 17s linear infinite;
    
  } */

  .custom-shape-divider-top-3 svg
  {
    animation: MyTrans3 17s linear infinite;
  }

  .custom-shape-divider-top-4 svg
  {
    animation: MyTrans3 14s linear infinite;
  }

  .custom-shape-divider-top-5 svg
  {
    animation: MyTrans3 14s linear infinite;
  }

}

@media (max-width: 700px) {

  section.waves,
  section.waves svg
  {
    height: 110px;
  }
}