/* Headers via https://patorjk.com/software/taag/#p=display&f=Doh */

/* Variables */

:root {
    --zero-spacer: 0rem;
    --one-spacer: 0.625rem;
    --two-spacer: 1.25rem;
    --three-spacer: 3rem;
    --four-spacer: 2.5rem;
    --five-spacer: 3.125rem;
    --standard-horiz-spacer: var(var(--two-spacer));
    --standard-vert-spacer: var(var(--two-spacer));
    --global--font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	  --global--font-secondary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --global--font-bold: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --global--font-mono: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-transparent-gray: rgba(39,39,38,0.6);
    --color-gray: #272726;
    --color-lightergray: #939392;
    --color-lightgray: #BBBBBB;
    --color-lightestgray: #EFEFEF;
    --color-blue: #0042B8;
    --color-lightblue: #CBD8F1;
    --color-lightestblue: #CBD8F1;
    --wp--preset--color--blue: var(--color-blue);
    --max-width: 1600px;
}

/* Colors */

.has-white-background-color {
  background-color: var(--wp--preset--color--white) !important;;
}

.has-white-color {
  color: var(--wp--preset--color--white) !important;;
}

.has-black-background-color {
  background-color: var(--wp--preset--color--black) !important;;
}

.has-black-color {
  color: var(--wp--preset--color--black) !important;;
}

/* Position/Positions/Positioning */

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.p-sticky {
  position: sticky;
}

@media screen and (min-width: 992px) {

  .p-lg-relative {
    position: relative;
  }
  
  .p-lg-absolute {
    position: absolute;
  }
  
  .p-lg-sticky {
    position: sticky;
  }

}

/* Ratio Wrappers
Use these for content that needs to always display at a specific ratio;
inner element then gets the classes 'p-absolute w-100 h-100 top-0 left-0' */
                                                                                                                                                                             

.wrapper-1x1 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.wrapper-4x3 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
}

.wrapper-16x9 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.wrapper-2x1 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
}

/* Layouts that span full-bleed but still align inner content with the max-width restriction  */

/* Left 10%, Right 90% */
.split-10-90 {
  display: flex;
  flex-direction: row;
}

.split-10-90 > .left-col {
  width: 10%;
}

.split-10-90 > .left-col.limited {
  max-width: calc(10vw - (-(var(--max-width)) + 100vw ) / 2);
  margin-left: auto;
}

.split-10-90 > .right-col {
  width: 90%;
}

.split-10-90 > .right-col.limited {
  max-width: calc(90vw - (-1600px + 100vw ) / 2);
  margin-right: auto;
}

/* Left 20%, Right 90% */
.split-20-80 {
  display: flex;
  flex-direction: row;
}

.split-20-80 > .left-col {
  width: 20%;
}

.split-20-80 > .left-col.limited {
  max-width: calc(20vw - (-1600px + 100vw ) / 2);
  margin-left: auto;
}

.split-20-80 > .right-col {
  width: 80%;
}

.split-20-80 > .right-col.limited {
  max-width: calc(80vw - (-1600px + 100vw ) / 2);
  margin-right: auto;
}

/* Left 30%, Right 70% */
.split-30-70 {
  display: flex;
  flex-direction: row;
}

.split-30-70 > .left-col {
  width: 30%;
}

.split-30-70 > .left-col.limited {
  max-width: calc(30vw - (-1600px + 100vw ) / 2);
  margin-right: auto;
}

.split-30-70 > .right-col {
  width: 70%;
}

.split-30-70 > .right-col.limited {
  max-width: calc(70vw - (-1600px + 100vw ) / 2);
  margin-right: auto;
}

/* Left 40%, Right 60% */
.split-40-60 {
  display: flex;
  flex-direction: row;
}

.split-40-60 > .left-col {
  width: 40%;
}

.split-40-60 > .left-col.limited {
  max-width: calc(40vw - (-1600px + 100vw ) / 2);
  margin-left: auto;
}

.split-40-60 > .right-col {
  width: 60%;
}

.split-40-60 > .right-col.limited {
  max-width: calc(60vw - (-1600px + 100vw ) / 2);
  margin-right: auto;
}

/* Left 50%, Right 50% */
.split-50-50 {
  display: flex;
  flex-direction: row;
}

.split-50-50 > .left-col {
  width: 50%;
}

.split-50-50 > .left-col.limited {
  max-width: calc(50vw - (-1600px + 100vw ) / 2);
  margin-left: auto;
}

.split-50-50 > .right-col {
  width: 50%;
}

.split-50-50 > .right-col.limited {
  max-width: calc(50vw - (-1600px + 100vw ) / 2);
  margin-right: auto;
}

/* Left 60%, Right 40% */
.split-60-40 {
  display: flex;
  flex-direction: row;
}

.split-60-40 > .left-col {
  width: 60%;
}

.split-60-40 > .left-col.limited {
  max-width: calc(60vw - (-1600px + 100vw ) / 2);
  margin-left: auto;
}

.split-60-40 > .right-col {
  width: 40%;
}

.split-60-40 > .right-col.limited {
  max-width: calc(40vw - (-1600px + 100vw ) / 2);
  margin-right: auto;
}

/* Left 70%, Right 30% */
.split-70-30 {
  display: flex;
  flex-direction: row;
}

.split-70-30 > .left-col {
  width: 70%;
}

.split-70-30 > .left-col.limited {
  max-width: calc(70vw - (-1600px + 100vw ) / 2);
  margin-left: auto;
}

.split-70-30 > .right-col {
  width: 30%;
}

.split-70-30 > .right-col.limited {
  max-width: calc(30vw - (-1600px + 100vw ) / 2);
  margin-right: auto;
}

/* Left 80%, Right 20% */
.split-80-20 {
  display: flex;
  flex-direction: row;
}

.split-80-20 > .left-col {
  width: 80%;
}

.split-80-20 > .left-col.limited {
  max-width: calc(80vw - (-1600px + 100vw ) / 2);
  margin-left: auto;
}

.split-80-20 > .right-col {
  width: 20%;
}

.split-80-20 > .right-col.limited {
  max-width: calc(20vw - (-1600px + 100vw ) / 2);
  margin-right: auto;
}

/* Left 90%, Right 10% */
.split-90-10 {
  display: flex;
  flex-direction: row;
}

.split-90-10 > .left-col {
  width: 90%;
}

.split-90-10 > .left-col.limited {
  max-width: calc(90vw - (-1600px + 100vw ) / 2);
  margin-left: auto;
}

.split-90-10 > .right-col {
  width: 10%;
}

.split-90-10 > .right-col.limited {
  max-width: calc(10vw - (-1600px + 100vw ) / 2);
  margin-right: auto;
}

@media screen and (max-width: 991px) {
  .split-10-90,
  .split-20-80,
  .split-30-70,
  .split-40-60,
  .split-50-50,
  .split-60-40,
  .split-70-30,
  .split-80-20,
  .split-90-10 {
    flex-direction: column;
  }

  .split-10-90 > *,
  .split-20-80 > *,
  .split-30-70 > *,
  .split-40-60 > *,
  .split-50-50 > *,
  .split-60-40 > *,
  .split-70-30 > *,
  .split-80-20 > *,
  .split-90-10 > * {
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .split-10-90 > div:not(.limited),
  .split-20-80 > div:not(.limited),
  .split-30-70 > div:not(.limited),
  .split-40-60 > div:not(.limited),
  .split-50-50 > div:not(.limited),
  .split-60-40 > div:not(.limited),
  .split-70-30 > div:not(.limited),
  .split-80-20 > div:not(.limited),
  .split-90-10 > div:not(.limited) {
    padding-bottom: 100%;
  }

}

.mx-1-children > * {
  margin-left: var(--one-spacer);
  margin-right: var(--one-spacer);
}

.my-1-children > * {
  margin-top: var(--one-spacer);
  margin-bottom: var(--one-spacer);
}

.ml-1-children > * {
  margin-left: var(--one-spacer);
}

.mt-1-children > * {
  margin-top: var(--one-spacer);
}

.mr-1-children > * {
  margin-right: var(--one-spacer);
}

.mb-1-children > * {
  margin-bottom: var(--one-spacer);
}

.mx-2-children > * {
  margin-left: var(--two-spacer);
  margin-right: var(--two-spacer);
}

.my-2-children > * {
  margin-top: var(--two-spacer);
  margin-bottom: var(--two-spacer);
}

.ml-2-children > * {
  margin-left: var(--two-spacer);
}

.mt-2-children > * {
  margin-top: var(--two-spacer);
}

.mr-2-children > * {
  margin-right: var(--two-spacer);
}

.mb-2-children > * {
  margin-bottom: var(--two-spacer);
}

.mx-3-children > * {
  margin-left: var(--three-spacer);
  margin-right: var(--three-spacer);
}

.my-3-children > * {
  margin-top: var(--three-spacer);
  margin-bottom: var(--three-spacer);
}

.ml-3-children > * {
  margin-left: var(--three-spacer);
}

.mt-3-children > * {
  margin-top: var(--three-spacer);
}

.mr-3-children > * {
  margin-right: var(--three-spacer);
}

.mb-3-children > * {
  margin-bottom: var(--three-spacer);
}

.mx-4-children > * {
  margin-left: var(--four-spacer);
  margin-right: var(--four-spacer);
}

.my-4-children > * {
  margin-top: var(--four-spacer);
  margin-bottom: var(--four-spacer);
}

.ml-4-children > * {
  margin-left: var(--four-spacer);
}

.mt-4-children > * {
  margin-top: var(--four-spacer);
}

.mr-4-children > * {
  margin-right: var(--four-spacer);
}

.mb-4-children > * {
  margin-bottom: var(--four-spacer);
}

.mx-5-children > * {
  margin-left: var(--five-spacer);
  margin-right: var(--five-spacer);
}

.my-5-children > * {
  margin-top: var(--five-spacer);
  margin-bottom: var(--five-spacer);
}

.ml-5-children > * {
  margin-left: var(--five-spacer);
}

.mt-5-children > * {
  margin-top: var(--five-spacer);
}

.mr-5-children > * {
  margin-right: var(--five-spacer);
}

.mb-5-children > * {
  margin-bottom: var(--five-spacer);
}

.border-left-none {
  border-left: none;
}

.border-top-none {
  border-top: none;
}

.border-right-none {
  border-right: none;
}

.border-left-1 {
  border-left: 1px solid;
}

.border-top-1 {
  border-top: 1px solid;
}

.border-right-1 {
  border-right: 1px solid;
}

.border-bottom-1 {
  border-bottom: 1px solid;
}

@media screen and (min-width: 992px) {
  .border-left-lg-none {
    border-left: none;
  }
  
  .border-top-lg-none {
    border-top: none;
  }
  
  .border-right-lg-none {
    border-right: none;
  }
  
  .border-left-lg-1 {
    border-left: 1px solid;
  }
  
  .border-top-lg-1 {
    border-top: 1px solid;
  }
  
  .border-right-lg-1 {
    border-right: 1px solid;
  }
  
  .border-bottom-lg-1 {
    border-bottom: 1px solid;
  }
}