:root {
  --layout-header-height: 73px;
  --color-primary: #993dbb;
  --color-primary-light: #FDF9FF;
  --color-base-invert: #000000;
  --color-base-light: #303030;
  --color-base: #ffffff;
  --color-base-light-muted: #F5ECF8;
  --color-base-light-muted-half: #F5ECF880;
  --color-muted: #D0D0D0;
  --color-muted-dark: #777;
  --color-danger: #BB3D3D;
  --site-width-large: 80.125rem;
  --site-width-medium: 60rem;
  --site-width-small: 48rem;
  --site-width-mobile: 40rem;
  --grid-gap: calc(1.75rem - 1px);
  --grid-gap-old: 1.875rem;
  --spacing-extra-smaller: 0.875rem;
  --spacing-extra-small: 1rem;
  --spacing-smaller: 1.125rem;
  --spacing-small-medium: 1.25rem;
  --spacing-small: 1.875rem;
  --spacing-default: 2.5rem;
  --spacing-medium: 2.875rem;
  --spacing-large: 3.75rem;
  --spacing-custom-large: 4.375rem;
  --spacing-custom: var(--grid-gap);
  --spacing-custom-grid: var(--grid-gap);
  --section-spacing-small: var(--spacing-small);
  --section-spacing-default: var(--spacing-default);
  --section-spacing-large: var(--spacing-large);
  --section-spacing-custom-large: var(--spacing-custom-large);
  --section-spacing-larger: calc(var(--spacing-default) * 2);
  --section-spacing-extra-large: calc(var(--spacing-large) * 2);
  --font-primary-new: "Nunito", sans-serif;
  --font-secondary-new: "DM Sans", sans-serif;
  --font-custom-default: "Avenir Default", sans-serif;
  --font-custom-medium: "Avenir Medium", sans-serif;
  --font-custom-bold: "Avenir Bold", sans-serif;
  --font-gotcha: "Gotcha Regular", sans-serif;
  --font-size-h1: 3rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.625rem;
  --font-size-h4: 1.5rem;
  --font-size-h5: 1.25rem;
  --font-size-h6: 1rem;
  --font-size-large-custom: 2.625rem;
  --font-size-custom: 1.375rem;
  --font-size-small: 1.125rem;
  --font-size-extra-small: 0.875rem;
  --font-size-h2-line-height: 1.25;
  --font-size-h4-line-height: 1.25;
  --shadow-primary: 0 4px 10px 0 rgb(0 0 0 / 10%);
  --shadow-secondary: 0 8px 10px 2px rgb(0 0 0 / 10%);
  --shadow-custom: 0px 3px 10px rgba(0, 0, 0, 0.05); }
  @media (max-width: 62rem) {
    :root {
      --spacing-default: 1.875rem;
      --spacing-large: 2.5rem;
      --spacing-custom-large: 1.875rem;
      --section-spacing-large: 1.875rem;
      --section-spacing-larger: var(--spacing-default);
      --section-spacing-extra-large: var(--spacing-large); } }
  @media (max-width: 42rem) {
    :root {
      --grid-gap: 1.5rem;
      --grid-gap-old: 0;
      --spacing-medium: 1.5rem; } }
  @media (max-width: 62rem) {
    :root {
      --font-size-h1: 2.5rem;
      --font-size-large-custom: 2.125rem; } }
  @media (max-width: 42rem) {
    :root {
      --font-size-h1: 1.75rem;
      --font-size-h2: 1.5rem;
      --font-size-h3: 1.25rem;
      --font-size-h5: 1rem;
      --font-size-h4: 1.125rem;
      --font-size-large-custom: 1.375rem;
      --font-size-custom: 1.125rem;
      --font-size-small: 1rem; } }

/**
 *	This element is created inside your target element
 *	It is used so that your own element will not need to be altered
 **/
.time_circles {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center; }

/**
 *	This is all the elements used to house all text used
 * in time circles
 **/
.time_circles > div {
  position: absolute;
  text-align: center; }

/**
 *	Titles (Days, Hours, etc)
 **/
.time_circles > div > h4 {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  font-size: 1.25rem !important;
  color: #dab856; }
  @media screen and (max-width: 600px) {
    .time_circles > div > h4 {
      font-size: 0.75em !important; } }

/**
 *	Time numbers, ie: 12
 **/
.time_circles > div > span {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1;
  font-weight: bold; }

/*# sourceMappingURL=TimeCircles.css.map */