:root {
  --text-size-sm: 0.85rem;
  --text-size-md: 1rem;
  --text-size-h6: 1.15rem;
  --text-size-h5: 1.133rem; /* all smaller font sizes are 85% of normal size */
  --text-size-h4: 1.513rem;
  --text-size-h3: 2.014rem;
  --text-size-h2: 2.677rem;
  --text-size-h1: 3.57rem;
  --text-block-margin: 1rem;
  --color-blue: #00349b;
  --color-blue-dark: #000e3a;
  --color-blue-light: #d1f2ff;
  --color-blue-ultralight: #f5fbff;
  --color-teal: #48dab3;
  --color-grey-light: #eff3f5;
  --color-grey-medium: #8f9299;
  --animate: all ease .3s;
  --border: 1px solid #ccc;
  --radius: 8px;
  --container-padding: 1.5rem;
  --color-error: red;
  }

  @media (min-width: 992px) {

    :root {
      --text-size-h1: 4.2rem;
      --text-size-h2: 3.15rem;
      --text-size-h3: 2.37rem;
      --text-size-h4: 1.78rem;
      --text-size-h5: 1.333rem;
      --container-padding: 3rem;
      }

  }




/* ----------------------------------

Z-Index Reference

10 -- Main Nav in Widescreen
5  -- Download Lit Button

---------------------------------- */




/* ----------------------------------

Resets

---------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

body {
  -webkit-font-smoothing: antialiased;
  }



/* ----------------------------------

Typography 

---------------------------------- */


html {
  color: #222;
  font-size: var(--text-size-md);
  line-height: 1.65;
  font-family: "Poppins", sans-serif;
  }

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  line-height: .95;
  overflow-wrap: break-word;
  text-wrap: balance;
  }

h1, .h1 {
  font-size: var(--text-size-h1);
  letter-spacing: -.15rem;
  }

h2, .h2 {
  font-size: var(--text-size-h2);
  letter-spacing: -.1rem;
  margin-bottom: calc(var(--text-block-margin) * 3);
  color: var(--color-blue-dark);
  }

  h2.anchor-block::before, .h2.anchor-block::before {
    --block-width: 1rem;
    content: "";
    display: block;
    width: var(--block-width);
    height: var(--text-size-h2);
    background-color: var(--color-blue);
    position: absolute;
    margin-left: calc((var(--container-padding) + var(--block-width)) * -1);
    }

h3, .h3 {
  font-size: var(--text-size-h3);
  margin-bottom: var(--text-block-margin);
  letter-spacing: -.075rem;
  }

h4, .h4 {
  font-size: var(--text-size-h4);
  letter-spacing: -.05rem;
  }

h5, .h5 {
  font-size: var(--text-size-h5);
  }

.normal { font-weight: 400 }
.semibold { font-weight: 600 }
strong, b, .bold { font-weight: 700 }

p, ul, ol, dl, table { margin-bottom: var(--text-block-margin); }

:last-child { margin-bottom: 0 }


a { 
  color: var(--color-blue);
  transition: var(--animate);
  }

  a:hover {
    color: var(--color-blue-dark);
    }

.text-end { text-align: right; }
.text-center { text-align: center; }

.lead {
  font-size: var(--text-size-h5);
  }

.small { font-size: var(--text-size-sm); }


/* ----------------------------------

Spacing and Structure

---------------------------------- */

html, body { min-height: 100%; }
body { display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer { flex-shrink: 0; background: yellow;}

.square { aspect-ratio: 1; }

.container {
  border-left: var(--border);
  border-right: var(--border);
  padding-left: var(--container-padding) !important;
  padding-right: var(--container-padding) !important;
  }

  .bg-blue-dark .container {
    border-left-color: var(--color-blue);
    border-right-color: var(--color-blue);
    }

  .bg-blue-light .container {
    border-left-color: #fff;
    border-right-color: #fff;
    }




/* ----------------------------------

Color Utilities

---------------------------------- */

.bg-blue { background-color: var(--color-blue) }
.bg-blue-dark { background-color: var(--color-blue-dark); }
.bg-blue-light { background-color: var(--color-blue-light); }
.bg-teal { background-color: var(--color-teal); }
.bg-grey-light { background-color: var(--color-grey-light); }
.bg-blue-gradient {
  background-image: linear-gradient(
    0deg,
    hsl(201deg 95% 92%) 0%,
    hsl(199deg 92% 91%) 27%,
    hsl(198deg 90% 89%) 44%,
    hsl(198deg 88% 88%) 56%,
    hsl(197deg 87% 86%) 65%,
    hsl(197deg 86% 84%) 72%,
    hsl(196deg 85% 83%) 78%,
    hsl(196deg 85% 81%) 83%,
    hsl(195deg 84% 80%) 87%,
    hsl(195deg 84% 78%) 91%,
    hsl(195deg 83% 76%) 94%,
    hsl(194deg 83% 74%) 97%,
    hsl(194deg 83% 72%) 100%
  );
}

.text-white { color: #fff }
.text-black { color: #000 }
.text-blue { color: var(--color-blue); }
.text-blue-light { color: var(--color-blue-light); }
.text-teal { color: var(--color-teal); }
.text-grey-medium { color: var(--color-grey-medium); }
.text-error { color: var(--color-error); }



/* ----------------------------------

Header

---------------------------------- */

header {
  border-bottom: var(--border);
  }

  header .container {
    border-color: #fff;
    }

.main-nav-link {
  font-size: var(--text-size-h5);
  text-decoration: none;
  line-height: 1.05;
  }

  .at-top .main-nav-link {
    padding-top: 1rem;
    padding-bottom: 1rem;
    line-height: 1.3;
    }

  .main-nav-link:hover {
    background-color: var(--color-teal);
    }

  @media (max-width: 768px) {

    .main-nav-link {
      margin-left: calc(var(--container-padding) - (var(--container-padding)*2));
      margin-right: calc(var(--container-padding) - (var(--container-padding)*2));
      border-top: 1px solid #fff;
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
      }

  }

  @media (min-width: 768px) { /* md break */

    .main-nav-link strong { display: block; }

    /* what happens when someone scrolls */

    header {
      position: sticky; 
      top: 0;
      z-index: 10;
      }

    .main-logo img {
      height: 42px;
      transition: var(--animate);
      }

      .at-top .main-logo img {
        height: 72px;
        }

    .at-top .main-nav-link {
      padding-top: 3rem;
      padding-bottom: 3rem;
      line-height: 1.3;
      }

    .main-nav-link span {
      line-height: 0;
      opacity: 0;
      transition: var(--animate);
      }

      .at-top .main-nav-link span {
        line-height: 1.3;
        opacity: 1;
        }

    .nav-container::before {
      height: 0;
      }

      .at-top .nav-container::before {
        height: 1.5rem;
        }

  }



.nav-container {
  position: relative;
  }

  .nav-container::before,
  .nav-container::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    transition: var(--animate);
    }

    @media (max-width: 768px) { /* md */

      .nav-container::before {
        display: none;
        }

    }

    @media (min-width: 992px) { /* lg */

      .at-top .nav-container::before,
      .nav-container::after {
        height: 2rem;
        }

    }


  .nav-container::before {
    clip-path: polygon(100% 100%, 100% 0%, 0% 100%);
    bottom: 0;
    right: 0;
    background: var(--color-blue-light);
    }

  .nav-container::after {
    height: 1.5rem;
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
    left: 0;
    background: var(--color-blue);
    }






/* ----------------------------------

Product / Brand Page

---------------------------------- */

.brand-image {
  aspect-ratio: 1200 / 630;
  background-color: #ccc;
  background-size: cover;
  border: var(--border);
  border-radius: 1rem;
  }


/* -----------------------
Download Button
----------------------- */

.lit-link {
  text-decoration: none;
  transition: var(--animate);
  line-height: 1.2;
  XXborder-bottom: 2px solid transparent;
  }

  .lit-link:hover {
    XXborder-bottom: 2px solid var(--color-blue);
    }

.lit-link-text {
  font-size: var(--text-size-h6);
  }

.lit-link-icon {
  --icon-size: 60px;
  background-image: linear-gradient(
    0deg,
    hsl(240deg 100% 20%) 0%,
    hsl(226deg 100% 26%) 18%,
    hsl(219deg 100% 31%) 29%,
    hsl(214deg 100% 35%) 37%,
    hsl(210deg 100% 38%) 43%,
    hsl(206deg 100% 40%) 48%,
    hsl(201deg 100% 42%) 53%,
    hsl(195deg 100% 42%) 57%,
    hsl(189deg 100% 41%) 62%,
    hsl(181deg 100% 40%) 67%,
    hsl(173deg 100% 43%) 72%,
    hsl(166deg 100% 47%) 81%,
    hsl(160deg 100% 50%) 100%
  );
  width: var(--icon-size);
  height: var(--icon-size);
  position: relative;
  }

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

  .lit-link-icon::before {
    content: "";
    display: block;
    position: absolute;
    width: var(--icon-size);
    height: var(--icon-size);
    background-image: url(../img/arrow-down-reversed.svg);
    background-size: var(--icon-size);
    animation: none;
    z-index: 5;
    }

  .lit-link-icon::after {
    content: "";
    display: block;
    position: absolute;
    width: var(--icon-size);
    height: var(--icon-size);
    z-index: 2;
    border-radius: 50%;
    animation:spin 4s linear infinite;
    opacity: 0;
    transition: opacity ease 1.5s;
    background-image: linear-gradient(
      0deg,
      hsl(240deg 100% 20%) 0%,
      hsl(281deg 100% 21%) 18%,
      hsl(304deg 100% 23%) 29%,
      hsl(319deg 100% 30%) 37%,
      hsl(329deg 100% 36%) 43%,
      hsl(336deg 100% 41%) 48%,
      hsl(346deg 83% 51%) 53%,
      hsl(3deg 95% 61%) 57%,
      hsl(17deg 100% 59%) 62%,
      hsl(30deg 100% 55%) 67%,
      hsl(40deg 100% 50%) 72%,
      hsl(48deg 100% 50%) 81%,
      hsl(55deg 100% 50%) 100%
    );
    }

  .lit-link:hover .lit-link-icon::after {
    opacity: 1;
    }




/* ----------------------------------

Form Design

---------------------------------- */

.form-input * {
  transition: var(--animate);
  }

.form-input label.required::after {
  content: " *";
  }

.form-input input,
.form-input textarea {
  display: block;
  width: 100%;
  padding: 1rem;
  border: var(--border);
  background-color: var(--color-blue-ultralight);
  border-radius: 5px;
  font-size: var(--text-size-md);
  }

  .form-input *.error {
    border-color: var(--color-error);
    }

  .form-input input:focus,
  .form-input textarea:focus {
    background-color: var(--color-blue-light);
    border-color: var(--color-blue);
    }

  .form-input input:focus + label,
  .form-input textarea:focus + label {
    margin-left: 1rem;
    font-weight: 600;
    }

textarea { font-family: "Poppins", sans-serif; font-size: var(--text-size-md); }

.uniform__potty {
  position: absolute;
  left: -9999px;
  }

.uniform-errors,
.success-message {
  background-color: #fff;
  padding: 1rem;
  }

.uniform-errors {
  border: 1px dotted var(--color-error);
  }

.success-message {
  border: 1px solid green;
  }

  .success-message:focus,
  .success-message:focus-visible,
  .uniform-errors:focus,
  .uniform-errors:focus-visible {
    outline: none;
    }




.btn {
  background-color: var(--color-teal);
  border-radius: 5px;
  color: #fff;
  font-size: var(--text-size-h5);
  color: var(--color-blue-dark);
  cursor: pointer;
  padding: .5rem 1rem;
  border: 1px solid var(--color-teal);
  font-weight: 600;
  transition: var(--animate);
  letter-spacing: -0.02rem;
  text-decoration: none;
  }

  a.btn {
    display: inline-block;
    }

  .btn:hover,
  .btn:focus,
  .btn:focus-visible {
    background-color: var(--color-blue);
    border-color: var(--color-blue-dark);
    color: #fff;
    box-shadow: 0 0 1px 2px var(--color-teal);
    }

  .btn-minor {
    font-size: var(--text-size-md);
    padding: .35rem .75rem;
    }



/* ----------------------------------

Components

---------------------------------- */

@media (min-width: 992px) { /* lg */

  .nav-list {
    transform: translate(-.75rem, 0);
    }

}

.nav-list a {
  display: block;
  text-decoration: none;
  padding: .25rem .75rem;
  }

  .text-white .nav-list a {
    color: #fff;
    }

  .nav-list a:hover {
    background-color: var(--color-teal);
    color: var(--color-blue-dark);
    }

.illustration {
  
  }

.illustration-half {
  aspect-ratio: 1 / 2;
  width: 50%;
  
  }

  .illustration-left {
    border-top-left-radius: 400px;
    border-bottom-left-radius: 400px;
    border-right: 2px solid #fff;
    }

  .illustration-right {
    border-top-right-radius: 400px;
    border-bottom-right-radius: 400px;
    border-left: 2px solid #fff;
    }


/* ------------------------
Card; used in industries
------------------------ */

.card {
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--color-blue-ultralight);
  }

  a.card { 
    text-decoration: none;
    transition: var(--animate);
    }

    a.card:hover,
    a.card:focus {
      background-color: var(--color-blue-light);
      box-shadow: 
        0 0 1px 2px var(--color-teal),
        0 10px 14px 0 var(--color-grey-light);

      }

  .card-img {
    aspect-ratio: 1200 / 630;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    }

  .card-body {
    padding: 1.5rem;
    }

    a.card .card-title {
      text-decoration: underline;
      text-decoration-color: transparent;
      text-underline-offset: 10px;
      transition: var(--animate);
      }

    a.card:hover .card-title,
    a.card:focus .card-title {
      text-decoration: underline;
      text-decoration-color: var(--color-teal);
      text-underline-offset: 5px;
      }



/* ------------------------
Bio Card; used in about
------------------------ */

.bio-card {
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 20px 0 rgba(0 0 0 / 20%);
  --s: 10px;
  --c1: var(--color-blue-light);
  --c2: var(--color-teal);
  --_g: 
    #0000 calc(-650%/13) calc(50%/13),var(--c1) 0 calc(100%/13),
    #0000 0 calc(150%/13),var(--c1) 0 calc(200%/13),
    #0000 0 calc(250%/13),var(--c1) 0 calc(300%/13);
  --_g0: repeating-linear-gradient( 45deg,var(--_g));
  --_g1: repeating-linear-gradient(-45deg,var(--_g));
  background:
    var(--_g0),var(--_g0) var(--s) var(--s),
    var(--_g1),var(--_g1) var(--s) var(--s) var(--c2);
  background-size: calc(2*var(--s)) calc(2*var(--s));
  border-top: 10px solid var(--color-teal);
  border-bottom: 10px solid var(--color-teal);
  }

  .bio-details p {
    font-weight: 600;
    border-bottom: 1px solid var(--color-blue);
    }





/* ----------------------------------

Footer

---------------------------------- */

.footer-container {
  position: relative;
  }

  .footer-container::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1.5rem;
    clip-path: polygon(100% 100%, 100% 0%, 0% 100%);
    right: 0;
    background: var(--color-blue);
    top: calc(-1.5rem + 1px);
    }







/* ----------------------------------

Resets and Utilities

---------------------------------- */

.border-0 { border: none; }

.bg-cover { background-size: cover; }

.img-fluid { max-width: 100%; height: auto; }

@media (min-width: 992px) {

  .row.spread-lg { margin-left: -3rem }

}

  




::selection {
  background: gold;
  color: #000;
  text-shadow: none;
  }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: var(--border);
  margin: 1.5rem 0;
  }



/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}



.hidden,
[hidden] {
  display: none !important;
}

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

.invisible {
  visibility: hidden;
}