.arrow-down {
  position: relative;
  width: 0;
  height: 0;
  border-left: 3rem solid transparent;
  border-right: 3rem solid transparent;
  border-top: 3rem solid var(--bgcolor50);
  left: 50%;
  transform: translateX(-50%);
}

.skew_outer {
  position: relative;
  /*width: 100%;*/
  /*height: 5rem;*/
  width: 0;
  height: 0;
  background-color: var(--bgcolor100);
  border-left: 0rem solid transparent;
  border-right: 120rem solid transparent;
  border-top: 10rem solid var(--bgcolor50);
}

.skew {
  position: relative;
  rotate: -5deg;
  margin-top: -3rem;
  background-color: var(--bgcolor50);
}

.waves {
  position: relative;
  width: 100%;
  height: 10rem;
  margin-top: -3rem;
  min-height: 100px;
  max-height: 150px;
}

.waves--upsidedown {
  position: relative;
  width: 100%;
  height: 10rem;
  /*margin-top: 1rem;*/
  margin-bottom: -6.6rem;
  min-height: 100px;
  max-height: 150px;
  rotate: 180deg;
}

.waves--upsidedown--rot {
  position: absolute;
  /*left: 15rem;*/
  width: 100%;
  height: 15rem;
  /*margin-top: 1rem;*/
  /*margin-bottom: -6.6rem;*/
  /*min-height: 100px;*/
  /*max-height: 150px;*/
  rotate: 180deg;
}