@font-face {
  font-family: 'montserrat';
  src: url('./assets/fonts/montserrat-v15-latin-300.woff2') format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'montserrat';
  src: url('./assets/fonts/montserrat-v15-latin-500.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'montserrat';
  src: url('./assets/fonts/montserrat-v15-latin-600.woff2') format("woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'montserrat';
  src: url('./assets/fonts/montserrat-v15-latin-700.woff2') format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'montserrat';
  src: url('./assets/fonts/montserrat-v15-latin-regular.woff2') format("woff2");
  font-weight: medium;
  font-style: normal;
}

:root {
  /* Define Colors as colors */
  --magenta: #B0008E;
  --purple: #86339A;
  --orange: #E86826;
  --orangeLight: #FD8204;
  --blue: #00C2DF;
  --lime: #C2D500;
  --errorDark: #FF0048;
  --error: #FFD6E1;
  --magentaDark: #8B0A75;
  --purpleDark: #5A0752;
  --gray: #A7A8AA;
  --grayDark: #53565A;
  --grayMedium: #CBC8C7;
  --grayLight: #EFEEEE;
  --white: #FFFFFF;

  /* Define Colors intentions */
  --background: var(--white);
  --textColor: var(--grayDark);
  --textColorInverse: var(--white);
  --linkColor: var(--orange);
  --linkHoverColor: var(--orangeLight);
  --navLinkColor: var(--purpleDark);
  --navLinkHoverColor: var(--magenta);
  --headingColor: var(--magenta);
  --hrColor: var(--grayMedium);
  --buttonBackground: linear-gradient(130deg, var(--orangeLight) 0%, var(--orange) 70%) no-repeat;
  --buttonBackgroundColor: var(--orangeLight);
  --secondaryButtonColor: var(--orange);
  --secondaryButtonBorder: var(--orangeLight);
  --bulletColor: var(--magenta);

  /* Type */
  --bodyFont: 'montserrat', Arial, sans-serif;
  --fontWeightLight: 300;
  --fontWeightMedium: 500;
  --fontWeightSemiBold: 600;
  --fontWeightBold: 700;
  --h1: calc((30/16) * 1rem); /* 30px */
  --h1Big: calc((40/16) * 1rem); /* 40px */
  --h1Small: calc((28/16) * 1rem); /* 28px */
  --h2: calc((24/16) * 1rem); /* 24px */
  --h3: calc((20/16) * 1rem); /* 20px */
  --h4: calc((20/16) * 1rem);
  --h5: calc((20/16) * 1rem);
  --h6: calc((20/16) * 1rem);
  --p: calc((19/16) * 1rem); /* 19px */
  --pLargest: calc((26/16) * 1rem); /* 26px */
  --pLarge: calc((22/16) * 1rem); /* 22px */
  --pSmall: calc((16/16) * 1rem); /* 16px */
  --pSmallest: calc((14/16) * 1rem); /* 14px */
  --pLegal: calc((14/16) * 1rem); /* 14px */
  --li: var(--p);
  --navLink: calc((18/16) * 1rem); /* 18px */
  --buttonText: calc((22/16) * 1rem); /* 22px */
  --captionText: calc((16/16) * 1rem); /* 16px */
  --inputText: calc((19/16) * 1rem); /* 19px */
  --lineheight: calc((26/16) * 1rem); /* 26px */
  --h1Lineheight: calc((36/16) * 1rem); /* 36px */
  --h1BigLineheight: calc((50/16) * 1rem); /* 50px */
  --h2Lineheight: calc((30/16) * 1rem); /* 30px */
  --h3Lineheight: calc((26/16) * 1rem); /* 26px */
  --h4Lineheight: calc((26/16) * 1rem); /* 26px */
  --h5Lineheight: calc((26/16) * 1rem); /* 26px */
  --h6Lineheight: calc((26/16) * 1rem); /* 26px */
  --pLineheightLarge: calc((32/16) * 1rem); /* 32px */
  --pLineheight: calc((27/16) * 1rem); /* 27px */
  --pLineheightSmallest: calc((20/16) * 1rem); /* 20px */
  --buttonLineHeight: calc((32/16) * 1rem); /* 32px */
  --inputLieHigh: calc((27/16) * 1rem); /* 27px */

  /* sizing */
  --buttonHeight: calc((50/16) * 1rem); /* 26px */
  --widthSmall: 200px;
  --widthMedium: 400px;
  --widthXLarge: 1100px;
}

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  background: var(--background);
  color: var(--textColor); 
  font-family: var(--bodyFont);
  font-size: var(--fontSizeDefault);
  line-height: var(--lineheight);
  font-weight: var(--fontWeightLight);
  margin: 0;
}

input, select, textarea, button{
  font-family:inherit;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--headingColor);
  margin: 30px 0 15px 0;
  font-weight: var(--fontWeightMedium);
}

h1 {
  margin-top: 0;
  font-size: var(--h1);
  line-height: var(--h1Lineheight);
  font-weight: var(--fontWeightSemiBold);
}

h2 {
  font-size: var(--h2);
  line-height: var(--h2Lineheight);
}

h3 {
  font-size: var(--h3);
  line-height: var(--h3Lineheight);
}

h4 {
  font-size: var(--h4);
  line-height: var(--h4Lineheight);
}

h5 {
  font-size: var(--h5);
  line-height: var(--h5Lineheight);
}

h6 {
  font-size: var(--h6);
  line-height: var(--h6Lineheight);
}

p {
  font-size: var(--p);
  line-height: var(--pLineheight);
  font-weight: var(--fontWeightMedium);
  padding: 0;
  margin: 0 0 15px 0;
}

.p-smallest {
  font-size: var(--pSmallest) !important;
  line-height: var(--pLineheightSmallest) !important;
}

.p-legal {
  font-size: var(--pLegal) !important;
  line-height: var(--pLineheightSmallest) !important;
  font-weight: var(--fontWeightLight) !important;
  margin: 0;
}

.inverse, nav a.inverse {
  color: var(--textColorInverse) !important;
}

b, strong {
  font-weight: var(--fontWeightBold);
}

em, i {
  font-style: italic;
}

a {
  color: var(--linkColor);
  text-decoration: underline;
  cursor: pointer;
  font-weight: var(--fontWeightBold);
  padding: 0;
  margin: 0 0 15px 0;
}

a:hover {
  color: var(--linkHoverColor);
}

p a {
  display: inline;
  font-weight: bold; 
}

.header-nav a {
  color: var(--navLinkColor);
  font-size: var(--navLink);
  font-weight: var(--fontWeightSemiBold);
  padding: 0;
  margin: 0 30px 0 0;
}

.header-nav a:hover {
  color: var(--navLinkHoverColor);
}

.header-nav ul {
  list-style: none;
}

hr {
  display: block;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  margin-inline-start: auto;
  margin-inline-end: auto;
  overflow: hidden;
  margin: 30px 0;
  border: 0;
  height: 1px;
  background: var(--hrColor);
}

button, .link--button {
  min-height: var(--buttonHeight);
  border-radius: 5px;
  font-size: var(--buttonText);
  line-height: var(--buttonLineHeight);
  font-weight: var(--fontWeightSemiBold);
  padding: 8px 15px;
  width: 100%;
  margin: 0 0 15px 0;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  text-align: center;
  min-width: 150px;
  color: white;
  z-index: 1;
  border: none;
  background: var(--buttonBackground);
  position: relative;
}

/* Full color overlay for transitioning out of gradient */
button:before, .link--button:before {
  background-color: var(--buttonBackgroundColor);
  content: '';
  display: block;
  border-radius: 5px;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  width: 100%;
  z-index: -100;
  transition: opacity 300ms;
  transform: translateZ(0);
}

button:hover:before, .link--button:hover:before {
  opacity: 1;
}

button > span, .link--button > span {
  font-weight: var(--fontWeightSemiBold);
}

.link--button {
  text-decoration: none;
  white-space: nowrap;
  min-height: 0;
}

.link--button:hover {
  color: white;
}

.button--secondary {
  color: var(--secondaryButtonColor);
  border: 2px solid var(--secondaryButtonBorder);
  background: none;
  transition: color 300ms, border-color 300ms;

}

/* Change color on hover*/
.button--secondary:hover,  .button--secondary:active {
  color: var(--secondaryButtonBorder);
  border-color: var(--secondaryButtonColor);
}

.button--secondary:hover:before {
  opacity: 0;
}

ul, ol {
  list-style: none;
  font-weight: var(--fontWeightMedium);
  padding: 0 15px 0 0;
  margin: 0 0 15px 0;
}

ol {
  list-style-type: decimal;
  padding-left: 30px;
}

li {
  margin-bottom: 10px;
  font-size: var(--li)
}

:not(nav) > ul li {
  padding-left: 15px;
}

:not(nav) > ul li:before {
  content: "•";
  font-size: x-large;
  color: var(--bulletColor);
  display: inline-block;
  width: 1rem;
  margin-left: -1rem;
}

blockquote {
  margin: 10px;
  padding: 2em;
  background: var(--grayLight);
}

table {
  background: white;
  border-radius: 1px;
  border-collapse: collapse;
  box-shadow: 0 1px 5px var(--gray);
  margin: 0 auto 15px;
  text-align: left;
  width: 100%;
}

table a {
  margin-bottom: 0;
}

th, td {
  font-weight: var(--fontWeightMedium);
  border-right: 1px solid var(--grayMedium);
  border-bottom: 1px solid var(--grayMedium);
  padding: 10px 15px;
  vertical-align: middle;
}

th:last-child, td:last-child {
  border-right: 0;
}

th {
  color: white;
  background: var(--purple);
}

tr:last-child {
  border-bottom: 0;
}
caption, figcaption {
  caption-side: bottom;
  font-size: var(--captionText);
  margin-left: 5px;
  margin-top: 10px;
  text-align: left;
}

label {
  display: block;
  font-size: var(--inputText);
  line-height: var(--inputLieHigh);
}

input, textarea, select {
  font-size: var(--inputText);
  line-height: var(--inputLieHigh);
  color: var(--grayDark);
  font-weight: var(--fontWeightMedium);
  font-family: inherit;
  background: white;
  width: 100%;
  padding: 0 15px;
  height: 50px;
  border: 2px solid var(--grayMedium);
  display: block;
  margin: 0 0 15px 0;
  border-radius: 0;
}

input::placeholder, textarea::placeholder, select:invalid {
  font-style: italic;
  font-weight: var(--fontWeightMedium);
  color: var(--gray);
}

option {
  color: var(--grayDark);
}

.say-container {
  width: 90%;
  max-width: 750px;
  margin: auto auto 0;
}

.say-container--wide {
  width: 90%;
  max-width: 1300px;
  margin: auto auto 0;
}

.grid {
  --gridCols: 2;
  display: grid;
  grid-template-columns: repeat(var(--gridCols), 1fr);
  grid-gap: 0 15px;
}

.cols-3 {
  --gridCols: 3;
}

.cols-4 {
  --gridCols: 4;
}

.flex {
  --justifyContent: space-between;
  display: flex;
  justify-content: var(--justifyContent);
}

.flex-around {
  --justifyContent: space-around;
}

.flex-start {
  --justifyContent: flex-start;
}
.align-items-center {
  align-items: center;
}

.gap-15 {
  gap: 15px;
}

.maxWidth-small {
  max-width: var(--widthSmall);
}

.maxWidth-Medium {
  max-width: var(--widthMedium);
}

.maxWidth-XLarge {
  max-width: var(--widthXLarge);
}

.card {
  background: white;
  padding: 30px;
  border-top: 1px solid var(--grayMedium);
  border-bottom: 1px solid var(--grayMedium);
  border-radius: 0;
  overflow: auto;
}

.card > *:first-child {
  margin-top: 0;
}

.card > *:last-child {
  margin-bottom: 0;
}

header {
  background-color: var(--white);
  position: relative;
  min-height: 40px;
  z-index: 3;
  border-bottom: 1px solid #EFEEEE;
  margin-bottom: 30px;
}

#small-logo {
  display: block;
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 5;
}

#large-logo {
  display: none;
  position: absolute;
  top: -5px;
  left: 0;
  z-index: 5;
}

.header-nav {
  padding: 14px 0 0 110px;
}

.header-nav ul {
  margin-bottom: 0;
}

.header-nav li {
  margin-bottom: 0;
}

#closed-sign {
  display: none;
  width: 100%;
  max-width: 360px;
}

.cta {
  text-align: center;
}

.cta-content {
  margin-bottom: 45px;
}

#shield-logo {
  max-width: 155px;
  margin: 0 auto 30px;
}

footer {
  background-color: var(--purpleDark);
  color: var(--white);
  padding: 30px;
}

.footer-nav {
  margin: 0;
}

.footer-nav li {
  display: inline-block;
  margin: 0 0 15px 0;
}

.divider {
  padding: 0 8px;
}

@media screen and (min-width: 700px) {
  h1 {
    font-size: var(--h1Big);
    line-height: var(--h1BigLineheight);
  }
  
  button, .link--button {
    width: auto;
  }

  button + button, .link--button + .link--button, button + .link--button, .link--button + button {
    margin-left: 15px;
  }

  :not(nav) > ul, :not(nav) > ol {
    padding-left: 30px;
  }

  ol {
    padding-left: 45px;
  }

  .say-container {
    width: 95%;
  }

  .card {
    border: none;
    margin-bottom: 15px;
    box-shadow: 0 1px 5px var(--gray);
    border-radius: 15px;
  }

  header {
    min-height: 85px;
    margin-bottom: 45px;
  }

  #small-logo {
    display: none;
  }

  #large-logo {
    display: block;
  }

  .header-nav {
    padding: 45px 0 0 180px;
  }

  #closed-sign {
    display: block;
  }

  .cta {
    text-align: left;
    display: flex;
    flex-direction: column;
  }

  .cta-content {
    display: flex;
    margin-bottom: 0;
  }

  #shield-logo {
    min-width: 155px;
    margin: 0 30px 0 0;
  }

  .cta-btn {
    align-self: flex-end;
    min-width: 340px;
  }
  
}

@media screen and (min-width: 840px) {
  .hero-text {
    font-size: var(--pLarge);
    line-height: var(--pLineheightLarge);
    font-weight: var(--fontWeightMedium);
  }
}

@media screen and (min-width: 960px) {
  .hero-text {
    font-size: var(--h1);
    line-height: var(--h1Lineheight);
    font-weight: var(--fontWeightMedium);
  }
}

/* Utilties */
.text-align-center {
  text-align: center !important;
}

.margin-bottom-60 {
  margin-bottom: 60px !important;
}

.word-wrap-break-word {
  word-wrap: break-word !important;
}

.word-break-break-all {
  word-break: break-all !important;
}

.m-b-0 {
  margin-bottom: 0px !important;
}

.m-b-10 {
  margin-bottom: 10px !important;
}

.m-b-15 {
  margin-bottom: 15px !important;
}

.m-b-30 {
  margin-bottom: 30px !important;
}

.m-b-60 {
  margin-bottom: 60px !important;
}

.m-l-0 {
  margin-left: 0px !important;
}

.m-l-10 {
  margin-left: 10px !important;
}

.m-l-15 {
  margin-left: 15px !important;
}

.m-l-30 {
  margin-left: 30px !important;
}

.m-l-60 {
  margin-left: 60px !important;
}

.m-r-0 {
  margin-right: 0px !important;
}

.m-r-10 {
  margin-right: 10px !important;
}

.m-r-15 {
  margin-right: 15px !important;
}

.m-r-30 {
  margin-right: 30px !important;
}

.m-r-60 {
  margin-right: 60px !important;
}

.m-t-0 {
  margin-top: 0px !important;
}

.m-t-10 {
  margin-top: 10px !important;
}

.m-t-15 {
  margin-top: 15px !important;
}

.m-t-30 {
  margin-top: 30px !important;
}

.m-t-60 {
  margin-top: 60px !important;
}