[class*="transition"]{
  position: relative;

  &::before, &::after {

    display: block;
    position: absolute;
    height: 50vw;
    max-height: 50vh;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    background-size: 100% auto;
    pointer-events: none;
  }

  &::before {
    bottom: 100%;
    transform: translateY(50%);
  }

  &::after {
    top: 100%;
    transform: translateY(-50%) scaleY(-1);
  }
}

[class*="transition-before"]::before { content:''}
[class*="transition-after"]::after { content:''}

@each $color, $value in $colors {
  .#{$color} {
    &.transition {
      &-before {


        &::before {
          @include make-wave1($value);
        }
      }

      &-after {


        &::after {
          @include make-wave2($value);

        }
      }
    }
  }
}


.transition-hero-type {

  &-1 {
    @include HeroTransition(1920, 406, 0.5);
  }

  &-2 {
    @include HeroTransition(1920, 266, 0.425);
  }

  &-3 {
    @include HeroTransition(1920, 266, .425);
  }

  &-4 {
    @include HeroTransition(1920, 328, .7);
  }

  &-5 {
    @include HeroTransition(1920, 328, .7);
  }

  &-6 {
    @include HeroTransition(1920, 328, .7);
  }

  &-7 {
    @include HeroTransition(1920, 328, .7);
  }

  &-8 {
    @include HeroTransition(1920, 328, .7);
  }

  &-9 {
    @include HeroTransition(1920, 328, .7);
  }
}


