/* Popup https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/popup.md
--------------------------------------------------------------- */
/* Popup Skeletons. do not edit 
--------------------------------------------------------------- */
.doc-popup-active {
  overflow-y: hidden;
}

.popup-content {
  display: none !important;
}

.popup {
  display: none;
  overflow-y: auto;
  position: fixed;
  isolation: isolate;
  z-index: 99999;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0;
  min-height: 100vh;
  width: 100%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  background: none !important;
}
.popup.active {
  display: block;
}
.popup-overlay {
  min-height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
}
.popup-frame {
  position: relative;
}
.popup:has(.popup-constrict) .popup-frame {
  height: 80vh;
  width: 100%;
  max-width: max-content;
  max-height: max-content;
  align-self: center;
  margin-inline: auto;
}
.popup:has(.popup-constrict) .popup-frame > *:not(.popup-destroy) {
  flex: 1 1;
  max-height: max-content;
  max-width: max-content;
  width: 100%;
  height: 100%;
}
.popup:has(.popup-constrict) .popup-frame > *:not(.popup-destroy) :nth-child(n+2) {
  display: none;
}
.popup:has(.popup-constrict) .popup-body {
  padding-block: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}

/* Popup Customizations
--------------------------------------------------------------- */
.popup {
  backdrop-filter: blur(3px);
}
.popup-overlay {
  background: var(--color-dark, black);
  opacity: 0.8;
}
.popup-body {
  overflow-y: scroll;
  height: 100%;
  padding-block: 11vw;
  scrollbar-width: none;
}
.popup-body::-webkit-scrollbar {
  display: none;
}
.popup-frame {
  background: var(--color-light, white);
  padding-block: 4.875rem;
  padding-inline: 3.75rem;
}
.popup-close-button {
  position: absolute;
  top: 1em;
  right: 1em;
  background: none;
  border: 0;
  font-size: 2.5rem;
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
  padding: 0;
  overflow-x: clip;
  color: var(--color-primary);
  padding-top: 1em;
}
.popup-close-button-text {
  font-size: 0.25em;
  text-transform: uppercase;
  text-wrap: pre-wrap;
  white-space: nowrap;
  margin-top: 0.5em;
  display: block;
  text-indent: -9999em;
}
.popup-close-button::before, .popup-close-button::after {
  content: "";
  display: block;
  height: 3px;
  width: 1em;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: currentColor;
}
.popup-close-button::before {
  transform: rotate(45deg);
}
.popup-close-button::after {
  transform: rotate(-45deg);
}
.popup:has(.popup-constricted) .popup-frame {
  padding: 0;
  background: none;
  box-shadow: none;
}
.popup:has(.popup-constricted) .popup-close-button {
  top: -0.5em;
  right: -0.5em;
  margin-top: 0;
  width: 1.5em;
  height: 1.5em;
  padding: 0.5em;
  background: var(--color-light);
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.15);
}
@media only screen and (min-width: 1400px) {
  .popup-container {
    --container-gutter: 200px;
  }
}
@media only screen and (min-width: 1900px) {
  .popup-container {
    --container-gutter: 360px;
  }
}
@media only screen and (max-width: 767px) {
  .popup-frame {
    padding-block: 4rem 2rem;
    padding-inline: 30px;
  }
  .popup-close-button {
    font-size: 2rem;
    top: 1.25rem;
    right: 1.25rem;
  }
}

/* Container: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/container.md
--------------------------------------------------------------- */
/* Container Skeletons. do not edit 
--------------------------------------------------------------- */
.container {
  /* do not attempt to override or your container may misalign. containers are meant to always be centered after all */
  /* Tip: if something in the design is off center, consult with designer or use additional padding or margin as needed for the contents instead */
  padding-inline: min(var(--container-fallback), var(--container-gutter)) !important;
  margin-inline: auto !important;
  /* widths*/
  max-width: 100%;
  width: calc(100% - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2);
  min-width: 0;
  /* flex stuff */
  flex: 0 0 auto;
  grid-column: 1/-1;
  /* container query support */
  container: container/inline-size;
}

/* Fallback Scaffolding. Usually no need to edit: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/container.md#css-vars 
--------------------------------------------------------------- */
.container {
  --container-fallback: 20px;
  /* customizeable distance. Set as the `--container-fallback` by default. Can be customized depending on the design of a given section though 20px - 30px should be enough */
  --container-size-reference: var(--comp);
  /* window width or section width. you wont usually need to manipulate this value  unless complex split layout designs */
  --container-gutter: var(--container-fallback);
  /* the value to constrain the container's horizontal space. you will mostly modify this variable. */
}
@media only screen and (min-width: 1400px) {
  .container {
    --container-fallback: 60px;
  }
}
/* on some cases container query support is a conflict of interest and makes positioned/flex/grid children act weird. use this helper if you dont need container queries */
.container.container-style-normal {
  /* container query support */
  container-type: normal;
}

/* Custom Container Size Variations: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/container.md#container-size-name
--------------------------------------------------------------- */
/* repeating/ internal page container sizing. sometimes designers will use the same gutter width for internals and or gridded template. this can be used so you dont have to copy paste identical styles to different selectos like 10 times */
.container.container-size-default {
  --container-gutter: 30px;
}
@media only screen and (min-width: 768px) {
  .container.container-size-default {
    --container-gutter: 60px;
  }
}
@media only screen and (min-width: 1200px) {
  .container.container-size-default {
    --container-gutter: 90px;
  }
}
@media only screen and (min-width: 1400px) {
  .container.container-size-default {
    --container-gutter: 120px;
  }
}
@media only screen and (min-width: 1900px) {
  .container.container-size-default {
    --container-gutter: 150px;
  }
}

/* Reduces horizontal padding */
@media only screen and (min-width: 768px) {
  .container.container-size-wide {
    --container-gutter: 15px;
  }
}
@media only screen and (min-width: 1200px) {
  .container.container-size-wide {
    --container-gutter: 30px;
  }
}
/* Reduces horizontal padding for xs only */
@media only screen and (max-width: 767px) {
  .container.container-size-wide-xs {
    --container-fallback: 15px;
    --container-gutter: var(--container-fallback);
  }
}

/* Reduces horizontal padding for sm only */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .container.container-size-wide-sm {
    --container-fallback: 30px;
    --container-gutter: var(--container-fallback);
  }
}

/* Other Container Variations: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/container.md#container-style-name
--------------------------------------------------------------- */
/* sometimes when you dont need the fallback gutter for the container but also need to constrict the layout, here's ya boi. Note: Make sure you add appropriate padding for the innards of this container */
.container.container-style-no-padding {
  --container-fallback: 0px;
}

/* constrict container to how wide it is in the deisgn comps. makes sure it never goes beyond the comp or set gutter or fallback global padding + adding important disables third party scripts from overriding our styles */
@media only screen and (min-width: 768px) {
  .container.container-style-maxed {
    max-width: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important;
  }
}

/* constrict container to how wide it is in the deisgn comps for mobile/xs and smaller only */
@media only screen and (max-width: 767px) {
  .container.container-style-maxed-xs {
    max-width: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important;
  }
}

/* constrict container to how wide it is in the deisgn comps for hd/xl and beyond only */
@media only screen and (min-width: 1900px) {
  .container.container-style-maxed-xl {
    max-width: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important;
  }
}

/* constrict container to how wide it is in the deisgn comps for touch devices/xs to sm-max only */
@media only screen and (max-width: 1199px) {
  .container.container-style-maxed-touch {
    max-width: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important;
  }
}

/* constrict container to how wide it is in the deisgn comps for touch devices/xs to sm-max only */
@media only screen and (min-width: 1200px) {
  .container.container-style-maxed-nontouch {
    max-width: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important;
  }
}

/*# sourceMappingURL=base-popup.css.map */