@import url('https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css?family=Inter:wght@400;700&display=swap');
.sloped-container {
  padding-bottom: 3.5vw;
  /*background-color: @colorBgLight;

    .sloped-top {
        position: relative;
        background-color: @colorBgLight; // top color (overlaps)
        padding-top: @sizesSlopedHeight; //100px; // height of the sloped edge
        margin-bottom: @sizesSlopedHeight / 2; // height below the lowest point of slanted edge

        svg {
            position: absolute;
            bottom: 0px;
            width: 100%;
            height: 100%;
            fill: @colorBgDark;
        }
    }

    .crosshair-group {
        position: relative;
        display: flex;
        justify-content: space-around;
        z-index: 1;
        //margin-bottom: @sizesSlopedHeight / 2;

        .vertical-line {
            background-color: @colorYellow;
            position: absolute;
            bottom: 10px;
            width: 1px;
            height: @sizesSlopedHeight*2;
        }
    }
    .icon-crosshair {
        .icon-crosshair();
    }

    &.top-dark {
        .sloped-top {
            background-color: @colorBgDark;

            svg {
                fill: @colorBgLight;
            }
        }
    }

    &.top-light {
        .sloped-top {
            background-color: @colorBgLight;

            svg {
                fill: @colorBgDark;
            }
        }
    }*/
}
.sloped-container .sloped-top {
  position: relative;
  padding-top: 7vw;
}
.sloped-container .sloped-top svg {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 100%;
}
.sloped-container .crosshair-group {
  position: relative;
  display: flex;
  justify-content: space-around;
  z-index: 1;
  padding-top: 33px;
  max-width: 1400px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .sloped-container .crosshair-group .vertical-line {
    background-color: #0768af;
    position: absolute;
    bottom: 10px;
    width: 1px;
    height: 14vw;
    max-height: 235px;
  }
}
.sloped-container .icon-crosshair {
  position: relative;
  display: block;
  box-sizing: border-box;
  background: currentColor;
}
.sloped-container .icon-crosshair::after {
  display: block;
  box-sizing: border-box;
  background: currentColor;
  content: "";
  position: absolute;
  width: 2px;
  height: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sloped-container .icon-crosshair::before {
  display: block;
  box-sizing: border-box;
  background: currentColor;
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}