:root {
  --global-spacing: 3rem;
}

.mb--6 {
  margin-bottom: -6rem !important;
}

.mt--6 {
  margin-top: -6rem !important;
}

.ml--6 {
  margin-left: -6rem !important;
}

.mr--6 {
  margin-right: -6rem !important;
}

@media screen and (max-width: 468px) {
  .sm-mb--6 {
    margin-bottom: -6rem !important;
  }
  .sm-mt--6 {
    margin-top: -6rem !important;
  }
  .sm-ml--6 {
    margin-left: -6rem !important;
  }
  .sm-mr--6 {
    margin-right: -6rem !important;
  }
}
@media screen and (min-width: 1040px) {
  .xl-mb--6 {
    margin-bottom: -6rem !important;
  }
  .xl-mt--6 {
    margin-top: -6rem !important;
  }
  .xl-ml--6 {
    margin-left: -6rem !important;
  }
  .xl-mr--6 {
    margin-right: -6rem !important;
  }
}
.mb--5 {
  margin-bottom: -5rem !important;
}

.mt--5 {
  margin-top: -5rem !important;
}

.ml--5 {
  margin-left: -5rem !important;
}

.mr--5 {
  margin-right: -5rem !important;
}

@media screen and (max-width: 468px) {
  .sm-mb--5 {
    margin-bottom: -5rem !important;
  }
  .sm-mt--5 {
    margin-top: -5rem !important;
  }
  .sm-ml--5 {
    margin-left: -5rem !important;
  }
  .sm-mr--5 {
    margin-right: -5rem !important;
  }
}
@media screen and (min-width: 1040px) {
  .xl-mb--5 {
    margin-bottom: -5rem !important;
  }
  .xl-mt--5 {
    margin-top: -5rem !important;
  }
  .xl-ml--5 {
    margin-left: -5rem !important;
  }
  .xl-mr--5 {
    margin-right: -5rem !important;
  }
}
.mb--4 {
  margin-bottom: -4rem !important;
}

.mt--4 {
  margin-top: -4rem !important;
}

.ml--4 {
  margin-left: -4rem !important;
}

.mr--4 {
  margin-right: -4rem !important;
}

@media screen and (max-width: 468px) {
  .sm-mb--4 {
    margin-bottom: -4rem !important;
  }
  .sm-mt--4 {
    margin-top: -4rem !important;
  }
  .sm-ml--4 {
    margin-left: -4rem !important;
  }
  .sm-mr--4 {
    margin-right: -4rem !important;
  }
}
@media screen and (min-width: 1040px) {
  .xl-mb--4 {
    margin-bottom: -4rem !important;
  }
  .xl-mt--4 {
    margin-top: -4rem !important;
  }
  .xl-ml--4 {
    margin-left: -4rem !important;
  }
  .xl-mr--4 {
    margin-right: -4rem !important;
  }
}
.mb--3 {
  margin-bottom: -3rem !important;
}

.mt--3 {
  margin-top: -3rem !important;
}

.ml--3 {
  margin-left: -3rem !important;
}

.mr--3 {
  margin-right: -3rem !important;
}

@media screen and (max-width: 468px) {
  .sm-mb--3 {
    margin-bottom: -3rem !important;
  }
  .sm-mt--3 {
    margin-top: -3rem !important;
  }
  .sm-ml--3 {
    margin-left: -3rem !important;
  }
  .sm-mr--3 {
    margin-right: -3rem !important;
  }
}
@media screen and (min-width: 1040px) {
  .xl-mb--3 {
    margin-bottom: -3rem !important;
  }
  .xl-mt--3 {
    margin-top: -3rem !important;
  }
  .xl-ml--3 {
    margin-left: -3rem !important;
  }
  .xl-mr--3 {
    margin-right: -3rem !important;
  }
}
.mb--2 {
  margin-bottom: -2rem !important;
}

.mt--2 {
  margin-top: -2rem !important;
}

.ml--2 {
  margin-left: -2rem !important;
}

.mr--2 {
  margin-right: -2rem !important;
}

@media screen and (max-width: 468px) {
  .sm-mb--2 {
    margin-bottom: -2rem !important;
  }
  .sm-mt--2 {
    margin-top: -2rem !important;
  }
  .sm-ml--2 {
    margin-left: -2rem !important;
  }
  .sm-mr--2 {
    margin-right: -2rem !important;
  }
}
@media screen and (min-width: 1040px) {
  .xl-mb--2 {
    margin-bottom: -2rem !important;
  }
  .xl-mt--2 {
    margin-top: -2rem !important;
  }
  .xl-ml--2 {
    margin-left: -2rem !important;
  }
  .xl-mr--2 {
    margin-right: -2rem !important;
  }
}
.mb--1 {
  margin-bottom: -1rem !important;
}

.mt--1 {
  margin-top: -1rem !important;
}

.ml--1 {
  margin-left: -1rem !important;
}

.mr--1 {
  margin-right: -1rem !important;
}

@media screen and (max-width: 468px) {
  .sm-mb--1 {
    margin-bottom: -1rem !important;
  }
  .sm-mt--1 {
    margin-top: -1rem !important;
  }
  .sm-ml--1 {
    margin-left: -1rem !important;
  }
  .sm-mr--1 {
    margin-right: -1rem !important;
  }
}
@media screen and (min-width: 1040px) {
  .xl-mb--1 {
    margin-bottom: -1rem !important;
  }
  .xl-mt--1 {
    margin-top: -1rem !important;
  }
  .xl-ml--1 {
    margin-left: -1rem !important;
  }
  .xl-mr--1 {
    margin-right: -1rem !important;
  }
}
.mb-0 {
  margin-bottom: 0rem !important;
}

.mt-0 {
  margin-top: 0rem !important;
}

.ml-0 {
  margin-left: 0rem !important;
}

.mr-0 {
  margin-right: 0rem !important;
}

.pb-0 {
  padding-bottom: 0rem !important;
}

.pt-0 {
  padding-top: 0rem !important;
}

.pl-0 {
  padding-left: 0rem !important;
}

.pr-0 {
  padding-right: 0rem !important;
}

@media screen and (max-width: 468px) {
  .sm-mb-0 {
    margin-bottom: 0rem !important;
  }
  .sm-mt-0 {
    margin-top: 0rem !important;
  }
  .sm-ml-0 {
    margin-left: 0rem !important;
  }
  .sm-mr-0 {
    margin-right: 0rem !important;
  }
  .sm-pb-0 {
    padding-bottom: 0rem !important;
  }
  .sm-pt-0 {
    padding-top: 0rem !important;
  }
  .sm-pl-0 {
    padding-left: 0rem !important;
  }
  .sm-pr-0 {
    padding-right: 0rem !important;
  }
}
@media screen and (min-width: 1040px) {
  .xl-mb-0 {
    margin-bottom: 0rem !important;
  }
  .xl-mt-0 {
    margin-top: 0rem !important;
  }
  .xl-ml-0 {
    margin-left: 0rem !important;
  }
  .xl-mr-0 {
    margin-right: 0rem !important;
  }
  .xl-pb-0 {
    padding-bottom: 0rem !important;
  }
  .xl-pt-0 {
    padding-top: 0rem !important;
  }
  .xl-pl-0 {
    padding-left: 0rem !important;
  }
  .xl-pr-0 {
    padding-right: 0rem !important;
  }
}
.mb-1 {
  margin-bottom: 1rem !important;
}

.mt-1 {
  margin-top: 1rem !important;
}

.ml-1 {
  margin-left: 1rem !important;
}

.mr-1 {
  margin-right: 1rem !important;
}

.pb-1 {
  padding-bottom: 1rem !important;
}

.pt-1 {
  padding-top: 1rem !important;
}

.pl-1 {
  padding-left: 1rem !important;
}

.pr-1 {
  padding-right: 1rem !important;
}

@media screen and (max-width: 468px) {
  .sm-mb-1 {
    margin-bottom: 1rem !important;
  }
  .sm-mt-1 {
    margin-top: 1rem !important;
  }
  .sm-ml-1 {
    margin-left: 1rem !important;
  }
  .sm-mr-1 {
    margin-right: 1rem !important;
  }
  .sm-pb-1 {
    padding-bottom: 1rem !important;
  }
  .sm-pt-1 {
    padding-top: 1rem !important;
  }
  .sm-pl-1 {
    padding-left: 1rem !important;
  }
  .sm-pr-1 {
    padding-right: 1rem !important;
  }
}
@media screen and (min-width: 1040px) {
  .xl-mb-1 {
    margin-bottom: 1rem !important;
  }
  .xl-mt-1 {
    margin-top: 1rem !important;
  }
  .xl-ml-1 {
    margin-left: 1rem !important;
  }
  .xl-mr-1 {
    margin-right: 1rem !important;
  }
  .xl-pb-1 {
    padding-bottom: 1rem !important;
  }
  .xl-pt-1 {
    padding-top: 1rem !important;
  }
  .xl-pl-1 {
    padding-left: 1rem !important;
  }
  .xl-pr-1 {
    padding-right: 1rem !important;
  }
}
.mb-2 {
  margin-bottom: 2rem !important;
}

.mt-2 {
  margin-top: 2rem !important;
}

.ml-2 {
  margin-left: 2rem !important;
}

.mr-2 {
  margin-right: 2rem !important;
}

.pb-2 {
  padding-bottom: 2rem !important;
}

.pt-2 {
  padding-top: 2rem !important;
}

.pl-2 {
  padding-left: 2rem !important;
}

.pr-2 {
  padding-right: 2rem !important;
}

@media screen and (max-width: 468px) {
  .sm-mb-2 {
    margin-bottom: 2rem !important;
  }
  .sm-mt-2 {
    margin-top: 2rem !important;
  }
  .sm-ml-2 {
    margin-left: 2rem !important;
  }
  .sm-mr-2 {
    margin-right: 2rem !important;
  }
  .sm-pb-2 {
    padding-bottom: 2rem !important;
  }
  .sm-pt-2 {
    padding-top: 2rem !important;
  }
  .sm-pl-2 {
    padding-left: 2rem !important;
  }
  .sm-pr-2 {
    padding-right: 2rem !important;
  }
}
@media screen and (min-width: 1040px) {
  .xl-mb-2 {
    margin-bottom: 2rem !important;
  }
  .xl-mt-2 {
    margin-top: 2rem !important;
  }
  .xl-ml-2 {
    margin-left: 2rem !important;
  }
  .xl-mr-2 {
    margin-right: 2rem !important;
  }
  .xl-pb-2 {
    padding-bottom: 2rem !important;
  }
  .xl-pt-2 {
    padding-top: 2rem !important;
  }
  .xl-pl-2 {
    padding-left: 2rem !important;
  }
  .xl-pr-2 {
    padding-right: 2rem !important;
  }
}
.mb-3 {
  margin-bottom: 3rem !important;
}

.mt-3 {
  margin-top: 3rem !important;
}

.ml-3 {
  margin-left: 3rem !important;
}

.mr-3 {
  margin-right: 3rem !important;
}

.pb-3 {
  padding-bottom: 3rem !important;
}

.pt-3 {
  padding-top: 3rem !important;
}

.pl-3 {
  padding-left: 3rem !important;
}

.pr-3 {
  padding-right: 3rem !important;
}

@media screen and (max-width: 468px) {
  .sm-mb-3 {
    margin-bottom: 3rem !important;
  }
  .sm-mt-3 {
    margin-top: 3rem !important;
  }
  .sm-ml-3 {
    margin-left: 3rem !important;
  }
  .sm-mr-3 {
    margin-right: 3rem !important;
  }
  .sm-pb-3 {
    padding-bottom: 3rem !important;
  }
  .sm-pt-3 {
    padding-top: 3rem !important;
  }
  .sm-pl-3 {
    padding-left: 3rem !important;
  }
  .sm-pr-3 {
    padding-right: 3rem !important;
  }
}
@media screen and (min-width: 1040px) {
  .xl-mb-3 {
    margin-bottom: 3rem !important;
  }
  .xl-mt-3 {
    margin-top: 3rem !important;
  }
  .xl-ml-3 {
    margin-left: 3rem !important;
  }
  .xl-mr-3 {
    margin-right: 3rem !important;
  }
  .xl-pb-3 {
    padding-bottom: 3rem !important;
  }
  .xl-pt-3 {
    padding-top: 3rem !important;
  }
  .xl-pl-3 {
    padding-left: 3rem !important;
  }
  .xl-pr-3 {
    padding-right: 3rem !important;
  }
}
.mb-4 {
  margin-bottom: 4rem !important;
}

.mt-4 {
  margin-top: 4rem !important;
}

.ml-4 {
  margin-left: 4rem !important;
}

.mr-4 {
  margin-right: 4rem !important;
}

.pb-4 {
  padding-bottom: 4rem !important;
}

.pt-4 {
  padding-top: 4rem !important;
}

.pl-4 {
  padding-left: 4rem !important;
}

.pr-4 {
  padding-right: 4rem !important;
}

@media screen and (max-width: 468px) {
  .sm-mb-4 {
    margin-bottom: 4rem !important;
  }
  .sm-mt-4 {
    margin-top: 4rem !important;
  }
  .sm-ml-4 {
    margin-left: 4rem !important;
  }
  .sm-mr-4 {
    margin-right: 4rem !important;
  }
  .sm-pb-4 {
    padding-bottom: 4rem !important;
  }
  .sm-pt-4 {
    padding-top: 4rem !important;
  }
  .sm-pl-4 {
    padding-left: 4rem !important;
  }
  .sm-pr-4 {
    padding-right: 4rem !important;
  }
}
@media screen and (min-width: 1040px) {
  .xl-mb-4 {
    margin-bottom: 4rem !important;
  }
  .xl-mt-4 {
    margin-top: 4rem !important;
  }
  .xl-ml-4 {
    margin-left: 4rem !important;
  }
  .xl-mr-4 {
    margin-right: 4rem !important;
  }
  .xl-pb-4 {
    padding-bottom: 4rem !important;
  }
  .xl-pt-4 {
    padding-top: 4rem !important;
  }
  .xl-pl-4 {
    padding-left: 4rem !important;
  }
  .xl-pr-4 {
    padding-right: 4rem !important;
  }
}
.mb-5 {
  margin-bottom: 5rem !important;
}

.mt-5 {
  margin-top: 5rem !important;
}

.ml-5 {
  margin-left: 5rem !important;
}

.mr-5 {
  margin-right: 5rem !important;
}

.pb-5 {
  padding-bottom: 5rem !important;
}

.pt-5 {
  padding-top: 5rem !important;
}

.pl-5 {
  padding-left: 5rem !important;
}

.pr-5 {
  padding-right: 5rem !important;
}

@media screen and (max-width: 468px) {
  .sm-mb-5 {
    margin-bottom: 5rem !important;
  }
  .sm-mt-5 {
    margin-top: 5rem !important;
  }
  .sm-ml-5 {
    margin-left: 5rem !important;
  }
  .sm-mr-5 {
    margin-right: 5rem !important;
  }
  .sm-pb-5 {
    padding-bottom: 5rem !important;
  }
  .sm-pt-5 {
    padding-top: 5rem !important;
  }
  .sm-pl-5 {
    padding-left: 5rem !important;
  }
  .sm-pr-5 {
    padding-right: 5rem !important;
  }
}
@media screen and (min-width: 1040px) {
  .xl-mb-5 {
    margin-bottom: 5rem !important;
  }
  .xl-mt-5 {
    margin-top: 5rem !important;
  }
  .xl-ml-5 {
    margin-left: 5rem !important;
  }
  .xl-mr-5 {
    margin-right: 5rem !important;
  }
  .xl-pb-5 {
    padding-bottom: 5rem !important;
  }
  .xl-pt-5 {
    padding-top: 5rem !important;
  }
  .xl-pl-5 {
    padding-left: 5rem !important;
  }
  .xl-pr-5 {
    padding-right: 5rem !important;
  }
}
.mb-6 {
  margin-bottom: 6rem !important;
}

.mt-6 {
  margin-top: 6rem !important;
}

.ml-6 {
  margin-left: 6rem !important;
}

.mr-6 {
  margin-right: 6rem !important;
}

.pb-6 {
  padding-bottom: 6rem !important;
}

.pt-6 {
  padding-top: 6rem !important;
}

.pl-6 {
  padding-left: 6rem !important;
}

.pr-6 {
  padding-right: 6rem !important;
}

@media screen and (max-width: 468px) {
  .sm-mb-6 {
    margin-bottom: 6rem !important;
  }
  .sm-mt-6 {
    margin-top: 6rem !important;
  }
  .sm-ml-6 {
    margin-left: 6rem !important;
  }
  .sm-mr-6 {
    margin-right: 6rem !important;
  }
  .sm-pb-6 {
    padding-bottom: 6rem !important;
  }
  .sm-pt-6 {
    padding-top: 6rem !important;
  }
  .sm-pl-6 {
    padding-left: 6rem !important;
  }
  .sm-pr-6 {
    padding-right: 6rem !important;
  }
}
@media screen and (min-width: 1040px) {
  .xl-mb-6 {
    margin-bottom: 6rem !important;
  }
  .xl-mt-6 {
    margin-top: 6rem !important;
  }
  .xl-ml-6 {
    margin-left: 6rem !important;
  }
  .xl-mr-6 {
    margin-right: 6rem !important;
  }
  .xl-pb-6 {
    padding-bottom: 6rem !important;
  }
  .xl-pt-6 {
    padding-top: 6rem !important;
  }
  .xl-pl-6 {
    padding-left: 6rem !important;
  }
  .xl-pr-6 {
    padding-right: 6rem !important;
  }
}
/*
 * Horizontal gradient, from left to right
 *
 * Creates two color stops, start and end, by specifying a color and position for each color stop.
 * Color stops are not available in IE9 and below.
 */
/*
 * Vertical gradient, from top to bottom
 *
 * Creates two color stops, start and end, by specifying a color and position for each color stop.
 * Color stops are not available in IE9 and below.
 */
/*
 * Vertical 45, from top to bottom
 *
 * Creates two color stops, start and end, by specifying a color and position for each color stop.
 * Color stops are not available in IE9 and below.
 */
/*
 * Vertical 145, from top to bottom
 *
 * Creates two color stops, start and end, by specifying a color and position for each color stop.
 * Color stops are not available in IE9 and below.
 */
/*
 * Mixin for basic CSS triangles
 * @include triangle(up, #000, 50px)
*/
/*
 * Vendor tranform
 * @include vendorTransform(rotate(90deg));
 */
/*
 * Calculates the sRGB luma of a colour.
 *
 * Math nicked from a great Thoughtbot article by Reda Lemeden:
 * http://robots.thoughtbot.com/closer-look-color-lightness
 */
/*
 * Picks a colour from two options based on which one is more visible
 * on the given background colour.
 *
 * Usage: pick-visible-color($bg-color, $color-1, $color-2)
 * $white-black is used when you don't want to return a hex (like for SVGs)
 */
/* Front-end Styles */
.renoun-section {
  position: relative;
  padding-top: var(--wp--preset--spacing--30);
  width: 100% !important;
  max-width: 100% !important;
  background-image: var(--desktop-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* .row {
      max-width: var(--wp--style--global--content-size) !important;
      width: 100%;
  }
  &.alignwide {
      .row {
          max-width: var(--wp--style--global--wide-size) !important;
          width: 100%;
      }
  } */
}
.renoun-section.alignfull .row {
  max-width: 100vw !important;
  width: 100%;
}
.renoun-section__align-right > .row {
  margin-right: 0;
}
.renoun-section__align-left > .row {
  margin-left: 0;
}
.renoun-section.alignleft, .renoun-section.aligncenter, .renoun-section.alignright {
  float: none !important;
  margin-top: initial;
  margin-bottom: initial;
  margin-left: initial;
  margin-right: initial;
}
@media screen and (max-width: 768px) {
  .renoun-section {
    background-image: var(--mobile-bg-image);
  }
}

/* Editor specific stylers */
.editor-styles-wrapper .wp-block-renoun-section {
  max-width: unset !important;
  width: 100%;
  border: 1px dashed #000;
}
.editor-styles-wrapper .wp-block-renoun-section.acf-block-preview {
  padding-top: 0 !important;
}
.editor-styles-wrapper .wp-block-renoun-section:focus {
  border: none;
}
.editor-styles-wrapper .wp-block-renoun-section section {
  padding-top: var(--wp--preset--spacing--10);
  background-image: var(--desktop-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  .editor-styles-wrapper .wp-block-renoun-section section {
    background-image: var(--mobile-bg-image);
  }
}