@import "../../variables-layout";

@import "../../../_vendor/node_modules/bootstrap/scss/functions";
@import "../../../_vendor/node_modules/bootstrap/scss/variables";
@import "../../../_vendor/node_modules/bootstrap/scss/mixins";

@import "../../scss-variables";
@import "../../_theme/variables-layout";

html body {
  .ce_rsce_row1start {
    .row.with-mid-content {
      position: relative;

      @include media-breakpoint-up(lg) {
        &:after {
          content: "";
          width: 10px;
          height: 200%;
          position: absolute;
          top: 50%;
          right: 50%;
          transform: translate(50%, -50%);
          background-color: $body-bg;
          z-index: 1;
        }
      }

      @include media-breakpoint-up(lg) {
        > div:not(.row-mid-content) {
          &:last-of-type {
            padding-left: rfs-value(200px);
          }
        }
      }

      .row-mid-content {
        @include media-breakpoint-up(lg) {
          position: absolute;
          top: 50%;
          right: 50%;
          transform: translate(50%, -50%);
          max-width: rfs-value(225px);
        }

        padding: 3rem 2.5rem;
        text-align: center;
        border-radius: 80%;
        z-index: 5;
        display: flex;
        flex-flow: column wrap;
        justify-content: center;

        @include media-breakpoint-up(lg) {
          background-color: $body-bg;
        }

        @include media-breakpoint-up(lg) {
          & + div {
            padding-right: rfs-value(200px);
          }
        }

        h1,
        h2,
        h3,
        h4 {
          margin-bottom: 0.75rem;
        }
      }
    }
  }
}