/*-- -------------------------- -->
<---        Content Page        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #legal-page {
    padding: var(--sectionPadding);
    background-color: #fff;
    /* clips the wave background from causing overflow issues when it goes off screen */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #legal-page .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #legal-page .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 46.125rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  #legal-page .cs-content img {
    width: 100%;
    height: auto;
    margin: 1rem 0;
    display: block;
  }
  #legal-page h2,
  #legal-page h3,
  #legal-page h4,
  #legal-page h5,
  #legal-page h6 {
    font-weight: 700;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #legal-page h2 {
    font-size: 2rem;
    margin-top: 2rem;
  }
  #legal-page h3 {
    font-size: 1.5rem;
    color: var(--primary);
  }
  #legal-page h4,
  #legal-page h5,
  #legal-page h6 {
    font-size: 1.25rem;
  }
  #legal-page .cs-button-solid {
    margin-bottom: 2rem;
  }
  #legal-page .cs-color {
    color: var(--primary);
  }
  #legal-page p {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
  }
  #legal-page p:last-of-type {
    margin-bottom: 2rem;
  }
  #legal-page p a {
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
    color: var(--primary);
  }
  #legal-page ol,
  #legal-page ul {
    padding-left: 1.5rem;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColor);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }
  #legal-page ul li {
    list-style: none;
    color: inherit;
    position: relative;
  }
  #legal-page ul li:before {
    /* custom list bullet */
    content: "";
    width: 3px;
    height: 3px;
    background: currentColor;
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 0.625rem;
    left: -0.75rem;
  }
  #legal-page .cs-flower {
    width: 22.625em;
    height: auto;
    display: block;
    position: absolute;
    bottom: -2.375em;
    right: -3em;
    z-index: -1;
    -webkit-transform: rotate(142deg);
            transform: rotate(142deg);
  }
  #legal-page .cs-sense {
    width: 5em;
    height: auto;
    position: absolute;
    top: -0.25em;
    left: 0.625em;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  #legal-page .cs-background {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #legal-page .cs-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  #legal-page .cs-background {
    width: 20%;
    height: 100%;
    background-color: #f7f7f7;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }
  #legal-page .cs-background img {
    width: 100%;
    height: 100%;
    opacity: 0.2;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
}
/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {
  #legal-page .cs-background {
    width: 50%;
    /* with the left edge always positioned at the center line, we push left of the center line by 335px.  This ensures that this element will stay exactly in this position no matter how wide the screen gets */
    margin-left: 20.9375rem;
    right: auto;
    /* sets the left edge of the element to be at the center line */
    left: 50%;
  }
}