/*--------------------------------------------------------------
*
* Common styles used in the editor and front end
* 
*
--------------------------------------------------------------*/
/*--------------------------------------------------- 
// Variables
/*--------------------------------------------------- */
:root {
  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-17: 1.063rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-22: 1.375rem;
  --font-size-24: 1.5rem;
  --font-size-26: 1.625rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-size-36: 2.25rem;
  --font-size-42: 2.625rem;
  --font-size-48: 3rem;
  --font-size-54: 3.375rem;
  --font-size-60: 3.75rem;
  --font-size-68: 4.25rem;
  --font-size-76: 4.75rem;
  --font-size-84: 5.25rem;
  --font-size-92: 5.75rem;
  --line-height-small: 1.2;
  --line-height-medium: 1.4;
  --line-height-large: 1.6;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --spacing-02: 0.125rem;
  --spacing-04: 0.25rem;
  --spacing-08: 0.5rem;
  --spacing-12: 0.75rem;
  --spacing-16: 1rem;
  --spacing-22: 1.375rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-40: 2.5rem;
  --spacing-48: 3rem;
  --spacing-64: 4rem;
  --spacing-80: 5rem;
  --spacing-96: 6rem;
  --spacing-160: 10rem;
}

/*--------------------------------------------------- 
// Allow long words to break to next line
/*--------------------------------------------------- */
h1, h2, h3, h4, h5, h6, p, li {
  word-wrap: break-word;
}

/*--------------------------------------------------------------
Typography - font weights
--------------------------------------------------------------*/
strong {
  font-weight: 700;
}

/*--------------------------------------------------------------
Typography - Superscript / Subscript
--------------------------------------------------------------*/
sup,
sub {
  position: relative;
  margin-left: 2px;
}

sup {
  font-size: 15px;
  top: -3px;
}

sub {
  font-size: 12px;
  top: 3px;
}

/*--------------------------------------------------- 
 // Heading spacing (custom)
/*--------------------------------------------------- */
h2.is-style-ooda-spacing-sm,
h3.is-style-ooda-spacing-sm,
h4.is-style-ooda-spacing-sm,
h5.is-style-ooda-spacing-sm,
h6.is-style-ooda-spacing-sm {
  margin-bottom: var(--spacing-04) !important;
}

h2.is-style-ooda-spacing-md,
h3.is-style-ooda-spacing-md,
h4.is-style-ooda-spacing-md,
h5.is-style-ooda-spacing-md,
h6.is-style-ooda-spacing-md {
  margin-bottom: var(--spacing-32) !important;
}

h2.is-style-ooda-spacing-lg,
h3.is-style-ooda-spacing-lg,
h4.is-style-ooda-spacing-lg,
h5.is-style-ooda-spacing-lg,
h6.is-style-ooda-spacing-lg {
  margin-bottom: var(--spacing-48) !important;
}

h2.is-style-ooda-spacing-xl,
h3.is-style-ooda-spacing-xl,
h4.is-style-ooda-spacing-xl,
h5.is-style-ooda-spacing-xl,
h6.is-style-ooda-spacing-xl {
  margin-bottom: var(--spacing-64) !important;
}

/*--------------------------------------------------- 
// Heading border top (custom)
/*--------------------------------------------------- */
h3.is-style-ooda-heading-border-top {
  border-top: dotted 1px #A9A9A9 !important;
  padding-top: 16px !important;
}

/*---------------------------------------------------
// Content / Paragraph spacing (custom)
/*--------------------------------------------------- */
p.is-style-ooda-spacing-xs,
ul.is-style-ooda-spacing-xs,
ol.is-style-ooda-spacing-xs {
  margin-bottom: var(--spacing-04) !important;
}

p.is-style-ooda-spacing-sm,
ul.is-style-ooda-spacing-sm,
ol.is-style-ooda-spacing-sm {
  margin-bottom: var(--spacing-12) !important;
}

p.is-style-ooda-spacing-md,
ul.is-style-ooda-spacing-md,
ol.is-style-ooda-spacing-md {
  margin-bottom: var(--spacing-32) !important;
}

p.is-style-ooda-spacing-lg,
ul.is-style-ooda-spacing-lg,
ol.is-style-ooda-spacing-lg {
  margin-bottom: var(--spacing-48) !important;
}

p.is-style-ooda-spacing-xl,
ul.is-style-ooda-spacing-xl,
ol.is-style-ooda-spacing-xl {
  margin-bottom: var(--spacing-64) !important;
}

p.is-style-ooda-Subhead {
  font-size: 22px;
}

/*--------------------------------------------------------------
*
* Styles required for frontend only
* 
*
--------------------------------------------------------------*/
/*---------------------------------------------------
// list item spacing
/*--------------------------------------------------- */
/*Breakdance has no control for li margins */
ul li,
ol li {
  margin-bottom: 12px;
}

/*--------------------------------------------------------------
WP Grid Builder - Modal and spinner when facet selected
--------------------------------------------------------------*/
#loading-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

#loading-modal.show {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
}

.spinner {
  width: 80px;
  height: 80px;
  border: 3px solid #fff;
  border-top: 3px solid #0073e6;
  border-radius: 50%;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}