/* Typography */

/* temp fix list style indentations for Canvas themed content-block divs */
.content-block ol li, .content-block ul li {
    margin-left: 20px;
}


.g-recaptcha {
  display: inline-block;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;

}
.loading-overlay .hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
}
.loading-overlay .spinner-border {
  position: absolute;
  top: 50%;
  left: 50%;
  /*transform: translate(-50%, -50%);*/
}

.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}


.policy h4 {
font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.policy h5 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.policy h6 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.policy li, .policy p {
  font-size: 0.8rem;
  line-height: 1.15rem;
  margin-bottom: 1rem;
}



/*  ---------------------------
    DRAFTAIL CUSTOM STYLES
 ------------------------------ */

.txt-color.cm-pink {
  color: #e5007f;
}
.txt-color.cm-orange {
  color: #ff9619;
}
.txt-color.cm-blue {
  color: #00b8ed;
}
.txt-color.cm-green {
  color: #00d6aa;
}


/*  ---------------------------
    BLOCK STYLES
 ------------------------------ */


/*.column-box, .column-box.auto-columns {*/
/*  column-count: auto;*/
/*  column-fill: auto;*/
/*  !*display: flex;*!*/
/*!*  box-sizing: border-box;*!*/
/*}*/
.column-box.two-columns {
  columns: 2 220px;
}
.column-box.three-columns {
  columns: 3 180px;
}
.column-box.four-columns {
  columns: 4 160px;
}
.column-box.column-rule {
  column-rule: 1px #ddd dotted;
  column-gap: 4em;
}
.column-box h3 .span {
  -webkit-column-span: all;
          column-span: all;
}

.slider-caption {
  text-shadow: #888888;
}
.hidden {
  display: none;
}
.hoverhide:hover {
  opacity: 0;
  transition: opacity 0.5s;
}
.hoverhide-icon:hover i {
  opacity: 0;
  transition: opacity 0.5s;
}
.hovershow {
  opacity: 0;
  transition: opacity 0.5s;
}
.hovershow:hover {
  opacity: 1;
  transition: opacity 0.5s;
}


/*  ---------------------------
    SIDEBAR PAGE
 ------------------------------ */

.sidebar-wrapper {
  clear: both;
}

.sidebar-container {
  width: 300px;
  margin-left: 0;
  margin-right: -300px;
  float: left;

}
.sidebar-container.right {
  float: right;
  margin-right: 0;
  margin-left: -300px;
}

.sidebar-content {
  float: right;
  margin-right: 50px;
  margin-left: 300px;
  padding-left: 20px;
}
.sidebar-content.right {
  float: left;
  margin-left: 50px;
  margin-right: 300px;
  padding-right: 20px;
}

.sidebar-container .sidebar-widgets-wrap {
  width: 260px;
  padding: 20px;
}

@media screen and (max-width: 991px) {

  .sidebar-container {
    display: block;
    width: 200px;
    margin-right: -200px;
  }
  .sidebar-container.right {
    margin-left: -200px;
  }

  .sidebar-content {
    margin-right: 0;
    margin-left: 200px;
    padding-left: 10px;
  }

  .sidebar-content.right {
    margin-left: 0;
    margin-right: 200px;
    padding-right: 10px;
  }

  .sidebar-container .sidebar-widgets-wrap {
    width: 200px;


  }
  .sidebar-container .sidebar-widgets-wrap .widget {
    width: 200px;
  }
}

@media screen and (max-width: 768px) {

  .sidebar-container {
    display: none;
  }
  .sidebar-content {
    margin-left: 50px;
    margin-right: 50px;
    padding: 0 10px;

  }
}




/*  ---------------------------
    PARALLAX
 ------------------------------ */

.parallax-container {
  /*  this is where the magic happens:  */
  /* SET THE BACKGROUND IMAGE ON THIS DIV*/
  background-attachment: local;
  background-position: center center;
  /*top: -50%;*/
  background-size: cover;
  background-repeat: no-repeat;
  /* dimensions are important, ensure it is tall enough to scroll */
  min-height: 400px;

  /* you are free to lay out the container items with flexbox or whatever means you wish */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-device-width: 1366px) {
  .parallax-container {
    background-attachment: scroll;
  }
}



/*  ------------------------------
    BACKGROUND OPACITY & PATTERNS
 --------------------------------- */


.background-opacity {
      position: relative;
    }
.background-opacity:before {
  content: "";
  position: absolute;
  opacity: 0.4;
  display: inline-block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/*  ------------------------------
    SECTIONS & BLOCK RHYTHM

    A page body is a run of top-level blocks, each a `.cms-section` band
    (containerise-block.html). `--filled` marks a band that paints its own
    ground. Spacing comes from three tokens rather than from each block's
    own margins, so it is the same whatever order the blocks arrive in:

      --cms-section-space  the band's inner padding, on top of the container's
                           own padding utilities (p-5 by default)
      --cms-block-space    between blocks inside a band
      --cms-text-space     between consecutive text blocks (paragraph, lead)

    A theme retunes these by setting the properties; it doesn't need to touch
    the selectors.
 --------------------------------- */

:root {
  --cms-section-space: clamp(1rem, 3vw, 2.5rem);
  --cms-block-space: clamp(1.5rem, 2.5vw, 2.25rem);
  --cms-text-space: 1.25rem;
  --cms-panel-space: clamp(1.5rem, 4vw, 3rem);
  --cms-panel-radius: 1rem;
  --cms-measure: 70ch;
}

.cms-section__body {
  padding-block: var(--cms-section-space);
}
.cms-section__body--tight {
  padding-block: 0;
}

/* Two plain bands in a row read as one break, not two: drop the padding
   between them and let the containers' own padding make the gap. */
.cms-section:not(.cms-section--filled) + .cms-section:not(.cms-section--filled) .cms-section__body {
  padding-top: 0;
}
.cms-section:not(.cms-section--filled):has(+ .cms-section:not(.cms-section--filled)) .cms-section__body {
  padding-bottom: 0;
}

/* A coloured box over a background image. The panel carries the padding, so
   the body inside it doesn't add its own. This file loads before the theme's,
   so the selector outweighs the theme's own .container padding. */
.cms-section .cms-section__panel {
  padding: var(--cms-panel-space);
  border-radius: var(--cms-panel-radius);
}
.cms-section__panel > .cms-section__body {
  padding-block: 0;
}

/* Accordion spacing as a class rather than mb-5, so a section's rhythm can
   override it; !important utilities can't be. Doubled to outweigh canvas's
   .accordion margin, which loads after this file. */
.accordion.cms-accordion {
  margin-bottom: 3rem;
}

/* Block spacing. The theme's stylesheet loads after this one, so these carry a
   .cms-section prefix to outweigh its single-class margins (.accordion,
   .heading-block, …). Vertical margins collapse, so nothing ends up flush
   against its neighbour. */
.cms-section .cms-section__body > * + * {
  margin-top: var(--cms-block-space);
}
.cms-section .cms-section__body > :is(.content-block, .lead) + :is(.content-block, .lead) {
  margin-top: var(--cms-text-space);
}
/* …unless the next one opens with its own heading: that starts a new topic. */
.cms-section .cms-section__body > :is(.content-block, .lead) + .content-block:has(> :first-child:is(h1, h2, h3, h4, h5, h6)) {
  margin-top: var(--cms-block-space);
}
/* A heading belongs to what follows it. One that opens a new group partway
   down a band gets more room above it than below, so it doesn't sit equally
   between the content it ends and the content it starts. */
.cms-section .cms-section__body > * + :is(div:has(> .heading-block), .ex:has(> .ex-head, > .ex-heading)) {
  margin-top: calc(var(--cms-block-space) * 1.75);
}
.cms-section .cms-section__body > div:has(> .heading-block) + * {
  margin-top: calc(var(--cms-block-space) * 0.8);
}
/* Blocks' own bottom margins give way to the rhythm (the section heading's 50px
   canvas margin was the largest gap on the page), and the first and last
   blocks don't add to the band's padding. */
.cms-section .cms-section__body > *,
.cms-section .cms-section__body > div > .heading-block {
  margin-bottom: 0;
}
.cms-section .cms-section__body > :first-child {
  margin-top: 0;
}
.cms-section .cms-section__body > .content-block > :last-child {
  margin-bottom: 0;
}

/* Readable line length for running text; tables, images and grids keep the
   full column. Centred and right-aligned text keeps its alignment. */
.cms-section__body > .lead,
.cms-section__body > .content-block > :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6) {
  max-width: var(--cms-measure);
}
.cms-section__body > .lead.text-center,
.cms-section__body > .content-block.center > :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6) {
  margin-inline: auto;
}
.cms-section__body > .lead.text-right,
.cms-section__body > .lead.text-end,
.cms-section__body > .content-block.right > :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6) {
  margin-inline-start: auto;
}

/* The heading block's sub-paragraph: an intro, not small print. */
.heading-block__intro {
  max-width: 38rem;
  margin-top: 0.75rem;
}
.heading-block__intro.center {
  margin-inline: auto;
}
.heading-block__intro > :last-child {
  margin-bottom: 0;
}

/* A content section centres its own .container inside the outer one, so side
   padding on the outer container never adds a margin: it only squeezes the
   inner container at the widths where they nearly meet. Sections with p-5 and
   sections with pt-5 then started their text at different x positions. The
   gutter is the inner container's job; the outer one keeps a small, equal one. */
.cms-section > .container-fluid:has(> .row > * > .container > .cms-section__body) {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

/* A section's padding utilities are sized for a desktop. On a phone p-5 leaves
   a 60px gutter each side of a 390px screen, so the big sizes step down. */
@media (max-width: 575.98px) {
  .cms-section > :is(.container, .container-fluid):is(.p-4, .p-5, .px-4, .px-5) {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .cms-section > :is(.container, .container-fluid):is(.p-4, .p-5, .py-4, .py-5, .pt-4, .pt-5) {
    padding-top: 2rem !important;
  }
  .cms-section > :is(.container, .container-fluid):is(.p-4, .p-5, .py-4, .py-5, .pb-4, .pb-5) {
    padding-bottom: 2rem !important;
  }
}

/* Call to action: the heading's own bottom margin is replaced by a fixed gap
   to the buttons, so a CTA looks the same with or without a sub-paragraph. */
.cms-cta .heading-block {
  margin-bottom: 0;
}
.cms-cta__actions {
  margin-top: 1.75rem;
}
.cms-cta__actions .button {
  margin: 0;
}