.shape {
  position: absolute;
  pointer-events: none
}

.shape>* {
  display: block
}

.shape:not([class*=shape-blur]) {
  overflow: hidden
}

.shape:not([class*=shape-blur])>* {
  transform: scale(2)
}

@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
  .shape>svg {
      display: none
  }
}

.shape-top {
  top: 0;
  right: 0;
  left: 0
}

.shape-top>* {
  transform-origin: bottom center
}

.shape-right {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.shape-right>* {
  position: inherit;
  top: inherit;
  bottom: inherit;
  right: inherit;
  transform-origin: center left
}

.shape-bottom {
  right: 0;
  bottom: 0;
  left: 0
}

.shape-bottom>* {
  transform-origin: top center
}

.shape-left {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.shape-left>* {
  position: inherit;
  top: inherit;
  bottom: inherit;
  left: inherit;
  transform-origin: center right
}

.shape-fluid-x>* {
  width: 100%;
  height: auto
}

.shape-fluid-y>* {
  width: auto;
  height: 100%
}

.shape-blur-1 {
  top: 0;
  right: 0;
  left: 0
}

@media (min-width:768px) {
  .shape-blur-1 {
      bottom: 0;
      left: 50%;
      right: auto
  }
}

.shape-blur-1>* {
  width: 100%;
  height: auto
}

@media (min-width:768px) {
  .shape-blur-1>* {
      width: auto;
      height: 100%
  }
}

.shape-blur-2 {
  top: 0;
  right: 0;
  left: 0
}

@media (min-width:768px) {
  .shape-blur-2 {
      bottom: 0;
      right: 50%;
      left: auto
  }
}

.shape-blur-2>* {
  width: 100%;
  height: auto
}

@media (min-width:768px) {
  .shape-blur-2>* {
      width: auto;
      height: 100%;
      float: right
  }
}

.shape-blur-3 {
  top: 0;
  right: 0;
  left: 0
}

.shape-blur-3>* {
  width: 100%;
  height: auto
}

.shape-blur-4 {
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(1.3)
}

.shape-blur-4>* {
  width: auto;
  height: 100%
}