// // shapes.scss // Theme component //

.shape {

position: absolute;
pointer-events: none;

}

.shape > * {

display: block;

}

.shape:not() {

overflow: hidden;

}

.shape:not() > * {

transform: scale(2);

}

// Hide SVG images in IE

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

.shape > svg {
  display: none;
}

}

// Position

.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-bottom-100 {

right: 0;
bottom: 100%;
left: 0;

}

.shape-bottom-100 > * {

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;

}

// Orientation

.shape-fluid-x > * {

width: 100%;
height: auto;

}

.shape-fluid-y > * {

width: auto;
height: 100%;

}

// Blurs

.shape-blur-1 {

top: 0;
right: 0;
left: 0;
@include media-breakpoint-up(md) {
  bottom: 0;
  left: 50%;
  right: auto;
}

}

.shape-blur-1 > * {

width: 100%;
height: auto;
@include media-breakpoint-up(md) {
  width: auto;
  height: 100%;
}

}

.shape-blur-2 {

top: 0;
right: 0;
left: 0;
@include media-breakpoint-up(md) {
  bottom: 0;
  right: 50%;
  left: auto;
}

}

.shape-blur-2 > * {

width: 100%;
height: auto;
@include media-breakpoint-up(md) {
  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%;

}