:root {
  --font-body: mr-eaves-xl-sans, sans-serif;
  --font-headings: new-spirit, serif;
  --fontSize--small: .9rem;

  --border-radius: 1rem;
  --border-radius-small: .5rem;

  --window-small: 650px;
  --window-large: 850px;
  --window-xlarge: 1100px;

  --color-primary: #f69436;
  --color-primary-dark: #d37e2d;
  --color-primary-light: #FDB849;
  --color-secondary: #91ced8;
  --color-secondary-light: #d5ebef;
  --color-secondary-lighter: #eaf6f9;
  --color-black: #2b2d2f;
  --color-white: #eeede8;
  --color-background-dark: #24406b;
  --color-background-light: var(--color-white);
  --color-light-gray: #edf1f2;

  --color-headline: #24406B;
}

.at-only:not(:focus):not(:active) { /* For accessible technology only to be hidden from regular use */
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

html, body {
  margin: 0;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;

  color: var(--color-black);
  background: var(--color-background-light);

  overflow-x: hidden;
}

header {
  border-top: 1px solid transparent;
  margin-top: -1px;
  padding: 0 1rem;
}

p, li, td, th {
  font-size: 1.1rem;
  margin: 1rem 0;
}

h1, h2, h3 {
  font-weight: 600;
  font-family: var(--font-headings);
  line-height: 1.25em;
  color: var(--color-headline);
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

table tr {
  background: #ffffff;
}

table tr:nth-child(2n) {
  background: var(--color-secondary-lighter);
}

table td, table th {
  padding: 1rem;
}

#logo figure {
  margin: 1rem 0;
}

#logo figure img {
  height: auto;
  width: 15rem;
  transition: width .2s ease-in;
}

small {
  font-size: var(--fontSize--small);
  line-height: 1.5;
}

a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

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

a.button, button {
  display: inline-block;
  justify-self: flex-start;

  font-family: var(--font-body);
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;

  color: var(--color-white);
  background: var(--color-background-dark);

  padding: .5em 2em;
  border-radius: var(--border-radius-small);
  border: 2px solid var(--color-white);
}

a.button:hover, button:hover {
  background: var(--color-secondary);
  color: var(--color-black);
}

a.button.button--highlight {
  background: var(--color-primary-light);
  color: var(--color-black);
}

button.menuControl {
  padding: .5rem 1rem .5rem 1rem;
  position: relative;
  margin: 0;
}

.alert {
  background: var(--color-primary-light);
  color: var(--color-black);
  width: 100%;
  padding: .5rem 5rem .5rem 1rem;
  text-align: center;
  box-sizing: border-box;
}

.alert a {
  color: var(--color-background-dark);
}

.alert a:hover {
  color: var(--color-background-light);
}

nav#mainMenu {
  padding: 1rem;
  font-size: 1rem;
  border-top: -1px solid transparent;
  padding-top: 1px;
}

nav#mainMenu li a {
  display: inline-flex;
  color: var(--color-primary-light);
  text-decoration: none;
  font-size: 1rem;
  padding: .5rem;
  border-radius: var(--border-radius-small);
  transition: all .2s ease-in;
}

nav#mainMenu li a:hover {
  background: var(--color-secondary);
  color: var(--color-black);
}

nav#mainMenu li button.menuControl {
  display: inline-flex;
  background: none;
  border: none;
  padding: .5rem;
  color: var(--color-primary-light);
  line-height: inherit;
  font-weight: normal;
  cursor: pointer;
}

nav#mainMenu li button.menuControl:after {
  text-indent: 0;
  margin-left: .5rem;
  content: "\203a";
  color: var(--color-primary-light);
  display: block;
  transition: transform .1s linear;
}

nav#mainMenu li button.menuControl[aria-expanded=true]{
  background: var(--color-secondary);
  color: var(--color-background-dark);
}

nav#mainMenu li button.menuControl[aria-expanded=true]:after {
  transform: rotate(90deg);
  color: var(--color-background-dark);
}

nav#mainMenu li button.menuControl--withLink {
  text-indent: -999rem;
  background: transparent;
  border: none;
  width: 1.5rem;

  cursor: pointer;
}

nav#mainMenu li button.menuControl--withLink:hover {
  background: var(--color-secondary);
  color: var(--color-black);
}

nav#mainMenu li button.menuControl--withLink:hover:after {
  color: var(--color-black);
}

nav#mainMenu li.menuItem--highlight button.menuControl {
  font-weight: bold;
  color: var(--color-secondary-light);
}

nav#mainMenu li.menuItem--highlight button.menuControl[aria-expanded=true] {
  color: var(--color-background-dark);
}

nav#mainMenu li.menuItem--highlight button.menuControl:hover {
  background: var(--color-secondary);
  color: var(--color-background-dark);
}

a.button--join {
  padding: .2rem .5rem;
  width: 6rem;
  font-size: var(--fontSize--small);
  margin-left: calc(50% - 6rem);
}

#navToggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 11;

  height: 2.5rem;
  width: 3rem;
  padding: .5rem;
  background: var(--color-background-dark);
  border: none;
  border-radius: var(--border-radius-small);

  color: var(--color-white);
}

#navToggle:hover {
  background: var(--color-background-dark);
}

#navToggle:active {
  background: var(--color-background-dark);
}

#navToggle span {
  position: absolute;
  display: block;
  top: 1rem;
  left: .5rem;

  text-indent: -999rem;

  height: 3px;
  width: 2rem;
  border-radius: 5px;
  background: var(--color-white);

  transition: all .2s linear;
  transform-origin: 50%;
  box-sizing: border-box;

  pointer-events: none;
}

#navToggle:before, #navToggle:after {
  content: "";
  display: block;
  position: absolute;
  top: .5rem;
  left: .5rem;
  background: var(--color-white);
  height: 3px;
  width: 2rem;
  border-radius: 5px;
  box-sizing: border-box;

  transition: all .2s linear;
  transform-origin: .5rem 50%;

  pointer-events: none;
}

#navToggle:after {
  top: 1.5rem;
  transform-origin: .3rem 50%;
}

#navToggle:hover span, #navToggle:hover:before, #navToggle:hover:after {
  background: var(--color-white);
}

.js-mainMenu-open {
  height: 100vh;
  overflow: hidden;
}

.js-mainMenu-open #navToggle {
  position: fixed;
}

.js-mainMenu-open #navToggle span {
  transform: rotate(45deg);
}

.js-mainMenu-open #navToggle:before {
  transform: rotate(45deg);
}

.js-mainMenu-open #navToggle:after {
  transform: rotate(-45deg);
  width: 2.1rem;
}

.mainMenuWrapper {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100vw;
  height: 0px;
  overflow: hidden;
}

.mainMenu__list {
  list-style: none;
  margin: 0;
  padding: 20vh 0 0 0;

  white-space: nowrap;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-sizing: border-box;

  font-size: 2rem;

  transition: all .2s ease-in-out;
}

.menuItem {
  position: relative;
  width: 12rem;
  text-align: center;
  display: inline-flex;
  flex-wrap: wrap;
}

.js-mainMenu-open .mainMenuWrapper {
  height: 100vh;
  padding: 0;
  overflow: scroll;
  background: var(--color-background-dark);
}

.js-mainMenu-open .menuItem__link {
  color: var(--color-primary-light);
}

#patientPortalToggle {
  padding: .5rem 1rem;
  margin: 0 auto;
}

nav#mainMenu .submenu {
  flex-basis: 100%;
  height: 0px;
  width: 12rem;
  white-space: nowrap;
  overflow: hidden;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  border-radius: var(--border-radius);
  box-sizing: border-box;
  box-shadow: 0 .5rem 2rem rgba(0,0,0,.1);

  background: var(--color-white);
  color: var(--color-black);

  transition: height .2s ease-in-out;
}

nav#mainMenu .submenu .submenu__item {
  margin: 0;
  font-size: 1.2rem;
  display: block;
}

nav#mainMenu .submenu .submenu__item a {
  display: inline-block;
  box-sizing: border-box;
  color: var(--color-background-dark);
  width: 100%;
  white-space: break-spaces;
}

nav#mainMenu .submenu .submenu__item--currentPage a {
  background: var(--color-background-dark);
  color: var(--color-white);
}

nav#mainMenu .submenu.js-is-open {
  height: auto;
  padding: 1rem;
}

footer {
  background: var(--color-secondary-light);
  padding: 2rem 0;

  display: grid;
  grid-template-areas:
    ". contactInfo social .";
  grid-template-columns: minmax(1rem, auto) calc(60vw - 2rem) calc(40vw - 2rem) minmax(1rem, auto);
}

#footerContactInfo {
  grid-area: contactInfo;
}

#contactSocial {
  display: flex;
  flex-direction: column;
  grid-area: social;
  justify-self: end;
  list-style: none;

  margin: 0;
  padding: 0;
}

#contactSocial li {
  margin: .5rem;
}

#contactSocial img {
  height: 2rem;
  color: var(--color-background-dark);
  filter: invert(22%) sepia(93%) saturate(352%) hue-rotate(165deg) brightness(119%) contrast(119%);
}

#contactSocial a:hover img {
  filter: invert(22%) sepia(93%) saturate(352%) hue-rotate(165deg) brightness(189%) contrast(119%);
}

@media (min-width: 650px){
  h1 {
    font-size: 3rem;
  }

  header {
    padding: 0;
    margin: 1rem 5vw;
    max-width: 90vw;
  }

  nav#mainMenu {
    padding: 1rem 5vw;
  }

  #navToggle {
    right: 5vw;
  }

  footer {
    grid-template-columns: 5vw 55vw 33vw 5vw;
  }

  #contactSocial {
    flex-direction: row;
  }
}

@media (min-width: 850px){
  #logo figure img {
    width: 30vw;
  }

  #navToggle {
    display: none;
  }

  .alert {
    padding: .5rem;
  }

  nav#mainMenu {
    display: grid;
    grid-template-areas:
      ". employers"
      "logo mainMenu";
    overflow: visible;
  }

  #logo {
    grid-area: logo;
  }

  .mainMenuWrapper {
    height: auto;
    width: auto;
    position: relative;
    grid-area: mainMenu;
    overflow: visible;
    align-self: center;
  }

  .mainMenu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    position: unset;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    overflow: visible;

    align-items: inherit;
    flex-direction: row;
    justify-content: space-around;

    font-size: 1rem;
  }

  .js-mainMenu-open .mainMenu__list {
    height: auto;
  }

  .menuItem {
    display: inline-block;
    align-items: center;
    flex-basis: 10%;
    width: auto;
  }

  .submenu {
    position: absolute;
    top: 3rem;
    left: calc(50% - 6rem);
    right: 0;
    margin: 0;
    left: unset;
    background: #ffffff;
  }

  .submenu__item--currentPage {
    display: block;
  }

  a.button--join {
    position: absolute;
    top: -1.25rem;
    right: 0;
  }
}