/* Block Padding Top & Bottom */
.block-no-margin-tb {
  --block-padding-t: 0px;
  --block-padding-b: 0px;
}
.block-small-margin-tb {
  --block-padding-t: var(--d-margin-bottom-base);
  --block-padding-b: 0px;
}
.block-medium-margin-tb {
  --block-padding-t: var(--page-margin);
  --block-padding-b: calc(var(--page-margin) - var(--d-margin-bottom-base));
}
.block-large-margin-tb {
  --block-padding-t: calc(var(--page-margin) * 2);
  --block-padding-b: calc((var(--page-margin) * 2) - var(--d-margin-bottom-base));
}
/* Block Bottom Margin when background colour is used */
.paragraph:not(.paragraph--type-layout):not(.no-content-bottom-margin):not(.content-bottom-overlap).bgcol,
.paragraph:not(.paragraph--type-layout):not(.no-content-bottom-margin):not(.content-bottom-overlap).bordercol {
  margin-bottom: var(--d-margin-bottom-base);
}
/* Block Padding Left & Right */
.block-no-margin-lr {
  --block-padding-lr: 0px;
}
.block-small-margin-lr {
  --block-padding-lr: var(--d-space-ml);
}
.block-medium-margin-lr {
  --block-padding-lr: var(--left-right-spacing);
}
.block-large-margin-lr {
  --block-padding-lr: calc(var(--left-right-spacing) * 2);
}
/* Layout widths */
.block-100 > .paragraph-content {
  max-width: 100%;
}
.block-85 > .paragraph-content {
  max-width: 90%;
}
.block-75 > .paragraph-content {
  max-width: 80%;
}
.block-66 > .paragraph-content {
  max-width: 70%;
}
.block-50 > .paragraph-content {
  max-width: 60%;
}
/* Layout Alignments */
.block-align-left .paragraph-content,
.paragraph.content-align-left {
  margin-left: 0;
  margin-right: auto;
}
.paragraph.content-align-left .paragraph-content {
  text-align: left;
}
.block-align-center .paragraph-content,
.paragraph.content-align-center {
  margin-left: auto;
  margin-right: auto;
}
.paragraph.content-align-center .paragraph-content {
  text-align: center;
}
.block-align-right .paragraph-content,
.paragraph.content-align-right {
  margin-left: auto;
  margin-right: 0;
}
.paragraph.content-align-right .paragraph-content {
  text-align: right;
}
/* === Paragraph wraps on mobile === */
.mobile-columns .block-wrap-left,
.mobile-columns-all .block-wrap-left {
  float: left !important;
  position: relative;
  max-width: calc((100% - var(--column-gap)) / 2);
  margin-right: var(--column-gap) !important;
  margin-left: 0 !important;
}
.mobile-columns .block-wrap-right,
.mobile-columns-all .block-wrap-right {
  float: right !important;
  position: relative;
  max-width: calc((100% - var(--column-gap)) / 2);
  margin-left: var(--column-gap) !important;
  margin-right: 0 !important
}
.mobile-columns .block-wrap-left + .block-wrap-right,
.mobile-columns .block-wrap-right + .block-wrap-right,
.mobile-columns-all .block-wrap-left + .block-wrap-right,
.mobile-columns-all .block-wrap-right + .block-wrap-right {
  margin-left: 0 !important;
}
.mobile-columns .block-wrap-right + .block-wrap-left,
.mobile-columns .block-wrap-left + .block-wrap-left,
.mobile-columns-all .block-wrap-right + .block-wrap-left,
.mobile-columns-all .block-wrap-left + .block-wrap-left {
  margin-right: 0 !important;
}
/* ------------------------------------- RESPONSIVE ADJUSTMENTS ------------------------------------- */
@media all and (min-width: 768px), print {
  /* TABLET - Non-Retina - (768px-1024px) */

  /* Layout widths */
  .block-85 > .paragraph-content {
    max-width: 85%;
  }
  .block-75 > .paragraph-content {
    max-width: 75%;
  }
  .block-66 > .paragraph-content {
    max-width: 66%;
  }
  .block-50 > .paragraph-content {
    max-width: 50%;
  }
  /* === Paragraph wraps 768 or bigger === */
  .block-wrap-left {
    float: left !important;
    position: relative;
    max-width: calc((100% - var(--column-gap)) / 2);
    margin-right: var(--column-gap) !important;
    margin-left: 0 !important;
  }
  .block-wrap-right {
    float: right !important;
    position: relative;
    max-width: calc((100% - var(--column-gap)) / 2);
    margin-left: var(--column-gap) !important;
    margin-right: 0 !important
  }
  .block-wrap-left + .block-wrap-right,
  .block-wrap-right + .block-wrap-right {
    margin-left: 0 !important;
  }
  .block-wrap-right + .block-wrap-left,
  .block-wrap-left + .block-wrap-left {
    margin-right: 0 !important;
  }


}