@font-face {
  font-family: 'League Spartan';
  src: url("../fonts/leaguespartan-bold.eot");
  src: url("../fonts/leaguespartan-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/leaguespartan-bold.woff2") format("woff2"), url("../fonts/leaguespartan-bold.woff") format("woff"), url("../fonts/leaguespartan-bold.ttf") format("truetype"), url("../fonts/leaguespartan-bold.svg#league_spartanbold") format("svg");
  font-weight: bold;
  font-style: normal; }

.design-blue {
  color: #081674; }

.design-blue-dark {
  color: #020c4e; }

.design-pink {
  color: #f86e9f; }

.design-red {
  color: #ec3c28; }

.design-yellow {
  color: #f7c70d; }

body {
  letter-spacing: 0.04em;
  font-family: Lato;
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

p {
  line-height: 1.8em; }

h1, h2, h3, h4, h5, h6 {
  font-family: League Spartan; }

a {
  text-decoration: none;
  color: #f7c70d; }
  a:hover {
    text-decoration: underline; }

.button {
  text-transform: uppercase;
  font-family: League Spartan;
  color: #081674;
  font-size: 14px;
  letter-spacing: 2px;
  border: 2px solid #081674;
  background-color: white;
  border-radius: 5px;
  padding: 6px 12px;
  padding-top: 12px;
  margin: 0;
  display: inline-block;
  transition: all 0.1s ease-in-out; }
  .button:hover {
    text-decoration: none;
    color: #fff;
    background: #081674; }

@media screen and (min-width: 751px) {
  #menu {
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    padding: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600; }
    #menu a {
      margin-left: 12px;
      margin-right: 12px;
      color: #081674; }
  .mobile-menu-button, .mobile-menu-close {
    display: none; } }

@media screen and (max-width: 750px) {
  #menu {
    display: none; }
  body.mobile-menu-open #menu {
    display: block; }
  #menu {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    max-height: calc(100vh - 50px);
    overflow-y: auto;
    background-color: white;
    margin: 15px;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 43px 4px; }
    #menu .menu-top {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between; }
      #menu .menu-top .mobile-menu-close img {
        width: 23px;
        height: 24px;
        margin: 10px; }
    #menu .menu-options {
      text-align: center; }
      #menu .menu-options a {
        display: block;
        font-size: 17px;
        margin: 30px 0; }
  body.mobile-menu-open #menu, .mobile-menu-button a {
    margin: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 43px 4px;
    border-radius: 10px; }
  .mobile-menu-button {
    position: fixed;
    z-index: 1;
    right: 0;
    top: 0; }
    .mobile-menu-button a {
      background-color: white;
      display: inline-block; }
      .mobile-menu-button a img {
        margin: 12px;
        width: 25px;
        height: 23px; }
  body.mobile-menu-open .mobile-menu-button {
    display: none; } }

.design-blue {
  color: #081674; }

.design-blue-dark {
  color: #020c4e; }

.design-pink {
  color: #f86e9f; }

.design-red {
  color: #ec3c28; }

.design-yellow {
  color: #f7c70d; }

.hero {
  background-image: url("../img/pattern.jpg");
  background-size: cover;
  background-position: center;
  color: #081674;
  font-weight: bold;
  display: flex;
  align-items: center;
  height: 92vh; }
  .hero .hero-inner {
    background-color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: auto;
    width: 60vw;
    font-size: 14px;
    margin: 0 auto;
    font-weight: 400;
    border-radius: 10px; }
    .hero .hero-inner h1, .hero .hero-inner div {
      margin: 30px; }
    .hero .hero-inner .hero-logo {
      width: 31vw;
      max-width: 550px; }

@media screen and (max-width: 950px) {
  .hero .hero-inner {
    width: 80vw; } }

@media screen and (max-width: 850px) {
  .hero {
    padding: 0; }
    .hero .hero-inner {
      flex-direction: column;
      padding: 10px; }
      .hero .hero-inner h1, .hero .hero-inner div {
        margin: 3vw; }
      .hero .hero-inner .hero-logo {
        width: 80%; } }

@media screen and (max-width: 650px) {
  .hero .hero-inner .hero-logo {
    width: 100%; } }

.design-blue {
  color: #081674; }

.design-blue-dark {
  color: #020c4e; }

.design-pink {
  color: #f86e9f; }

.design-red {
  color: #ec3c28; }

.design-yellow {
  color: #f7c70d; }

/*
  styled `ol` numbers using technique from
  https://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/
*/
.get-started {
  padding: 5vw;
  border-top: 5px solid #ec3c28;
  margin-top: -1px; }
  .get-started ol {
    display: flex;
    counter-reset: li;
    /* Initiate a counter */ }
    .get-started ol li {
      position: relative;
      /* Create a positioning context */
      list-style: none; }
      .get-started ol li:before {
        content: "0" counter(li);
        /* Use the counter as content */
        counter-increment: li;
        /* Increment the counter by 1 */
        font-family: League Spartan;
        color: #f7c70d;
        font-size: 60px; }

@media screen and (min-width: 751px) {
  .get-started {
    color: #081674;
    padding: 10vw 15vw; }
    .get-started h2 {
      text-align: center; }
    .get-started ol {
      flex-direction: row;
      padding: 0;
      margin: 0; }
      .get-started ol hr {
        display: none; }
      .get-started ol li {
        border: 2px solid #081674;
        padding: 15px;
        border-radius: 10px;
        margin: 25px;
        flex: 1;
        padding-top: 40px; }
        .get-started ol li h3 {
          color: #2600a7; }
        .get-started ol li:before {
          position: absolute;
          background-color: white;
          left: -23px;
          top: -27px;
          padding-right: 15px; } }

@media screen and (max-width: 750px) {
  .get-started {
    background-color: #081674;
    color: white; }
    .get-started ol {
      flex-direction: column;
      padding: 0; }
      .get-started ol hr {
        width: 95%;
        border: none;
        height: 8px;
        background-color: #020c4e;
        margin: 30px 0; }
      .get-started ol li:before {
        position: absolute;
        font-size: 50px; }
      .get-started ol li h3 {
        padding-left: 95px; }
      .get-started ol li p {
        margin-bottom: 0; } }

.design-blue {
  color: #081674; }

.design-blue-dark {
  color: #020c4e; }

.design-pink {
  color: #f86e9f; }

.design-red {
  color: #ec3c28; }

.design-yellow {
  color: #f7c70d; }

.what-happens {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 75px; }
  .what-happens .what-happens-wrap {
    background-color: white;
    text-align: center;
    border-radius: 10px;
    color: #081674;
    width: 60vw;
    margin: 0 auto;
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    max-width: 700px; }
    .what-happens .what-happens-wrap .graphic-bar {
      width: 100%;
      height: 100px;
      display: block;
      background-image: url("../img/pattern-bar.jpg");
      background-size: cover;
      border-radius: 10px 10px 0px 0px; }
    .what-happens .what-happens-wrap .what-happens-inner {
      padding: 50px;
      text-align: left; }
      .what-happens .what-happens-wrap .what-happens-inner h2 {
        text-transform: uppercase;
        letter-spacing: 0.15em;
        text-align: center;
        margin-bottom: 50px; }
      .what-happens .what-happens-wrap .what-happens-inner li {
        margin-bottom: 15px; }
      .what-happens .what-happens-wrap .what-happens-inner hr {
        border: 2px solid #eeedf7;
        margin: 50px 0; }
      .what-happens .what-happens-wrap .what-happens-inner .lab-manager {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center; }
        .what-happens .what-happens-wrap .what-happens-inner .lab-manager img {
          width: 70px;
          height: 70px;
          border-radius: 999px;
          background-color: magenta;
          margin: 15px; }
        .what-happens .what-happens-wrap .what-happens-inner .lab-manager p {
          flex: 1;
          color: #0a031e;
          text-align: left;
          max-width: 500px;
          margin: 15px;
          font-size: 15px; }
          .what-happens .what-happens-wrap .what-happens-inner .lab-manager p a {
            font-weight: bold; }

@media screen and (max-width: 750px) {
  .what-happens {
    padding: 20px; }
    .what-happens .what-happens-wrap {
      width: 90vw; }
      .what-happens .what-happens-wrap .what-happens-inner {
        padding: 15px; }
        .what-happens .what-happens-wrap .what-happens-inner h2 {
          text-align: center; }
        .what-happens .what-happens-wrap .what-happens-inner ul {
          padding-left: 5px; }
          .what-happens .what-happens-wrap .what-happens-inner ul li {
            display: flex;
            align-items: baseline; }
            .what-happens .what-happens-wrap .what-happens-inner ul li:before {
              transform: translate(0, 4px); }
        .what-happens .what-happens-wrap .what-happens-inner .lab-manager {
          flex-direction: column; } }

.design-blue {
  color: #081674; }

.design-blue-dark {
  color: #020c4e; }

.design-pink {
  color: #f86e9f; }

.design-red {
  color: #ec3c28; }

.design-yellow {
  color: #f7c70d; }

.equipment-buttons {
  overflow: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 13px; }
  .equipment-buttons .equipment-button {
    flex: 1;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 20%;
    align-items: center;
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.06);
    margin: 16px;
    padding: 10px;
    transition: all 0.1s ease-in-out;
    color: #081674;
    position: relative; }
    .equipment-buttons .equipment-button:hover {
      text-decoration: none;
      transform: scale(1.03); }
    .equipment-buttons .equipment-button .button-icon, .equipment-buttons .equipment-button span {
      margin: 10px; }
    .equipment-buttons .equipment-button .button-icon {
      width: 80px;
      height: 80px;
      max-width: 100%;
      display: flex;
      align-items: center;
      justify-content: center; }
    .equipment-buttons .equipment-button img {
      width: 100%; }

/*.equipment-button-arrow {
  display: none;
  width: 36px;
  height: 24px;
  background-image: url('../img/equipment-arrow.png');
  background-size: contain;
  position: absolute;
  top: 100%;
  margin-top:-7px;
}*/
.equipment-button-on {
  box-shadow: none !important;
  border: 2px solid #081674 !important; }
  .equipment-button-on .equipment-button-arrow {
    display: block; }

@media screen and (min-width: 951px) {
  #equipment-buttons-L {
    padding-left: 3vw; }
  #equipment-buttons-R {
    padding-right: 3vw; } }

/*
Collapsable technique from
https://stackoverflow.com/a/43965099/509936
*/
.equipment-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden; }
  .equipment-wrap:after {
    content: '';
    height: 50px;
    transition: height 0.3s linear, max-height 0s 0.3s linear;
    max-height: 0px; }

.equipment-section {
  transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
  margin-bottom: 0;
  max-height: 1000000px;
  padding-left: 8vw;
  padding-right: 8vw; }
  .equipment-section:not(.equipment-show) {
    margin-bottom: -2000px;
    transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1), visibility 0s 0.3s, max-height 0s 0.3s;
    visibility: hidden;
    max-height: 0; }
    .equipment-section:not(.equipment-show):after {
      height: 0;
      transition: height 0.3s linear;
      max-height: 50px; }
  .equipment-section .equipment-header {
    display: flex;
    flex-direction: row;
    align-items: center; }
    .equipment-section .equipment-header .equipment-close {
      width: 40px;
      height: 40px;
      margin: 0px; }
      .equipment-section .equipment-header .equipment-close img {
        width: 100%;
        height: auto;
        margin: 0px; }
    .equipment-section .equipment-header img, .equipment-section .equipment-header h3, .equipment-section .equipment-header a {
      margin: 15px; }
    .equipment-section .equipment-header h3 {
      flex: 1;
      text-align: left;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: #081674;
      padding-left: 2vw; }
    .equipment-section .equipment-header .equipment-header-icon {
      width: 80px; }
  .equipment-section hr {
    border: none;
    background-color: #ede8ff;
    height: 7px; }

.equipment-grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto; }
  .equipment-grid #equipment-buttons-L {
    grid-column: 1 / 2;
    grid-row: 1 / 2; }
  .equipment-grid #equipment-buttons-R {
    grid-column: 2 / 3;
    grid-row: 1 / 2; }
  .equipment-grid #equipment-sections-L {
    grid-column: 1 / 3;
    grid-row: 2 / 3; }
  .equipment-grid #equipment-sections-R {
    grid-column: 1 / 3;
    grid-row: 3 / 4; }

@media screen and (max-width: 950px) {
  .equipment-grid {
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto; }
    .equipment-grid #equipment-buttons-L {
      grid-column: 1 / 2;
      grid-row: 1 / 2; }
    .equipment-grid #equipment-buttons-R {
      grid-column: 1 / 2;
      grid-row: 3 / 4; }
    .equipment-grid #equipment-sections-L {
      grid-column: 1 / 2;
      grid-row: 2 / 3; }
    .equipment-grid #equipment-sections-R {
      grid-column: 1 / 2;
      grid-row: 4 / 5; }
    .equipment-grid .equipment-button {
      padding: 4px;
      margin: 10px; }
      .equipment-grid .equipment-button .button-icon {
        width: 50px;
        margin: 0px; } }

.equipment-item {
  display: flex; }
  .equipment-item .equipment-item-text {
    margin: 10px;
    text-align: left; }
    .equipment-item .equipment-item-text h4 {
      margin: 10px;
      color: #081674;
      font-size: 18px; }
    .equipment-item .equipment-item-text h5 {
      margin: 10px;
      color: #979db1;
      font-size: 13px; }
    .equipment-item .equipment-item-text p {
      margin: 10px; }
  .equipment-item img {
    margin: 10px;
    border-radius: 5px; }

@media screen and (max-width: 1050px) {
  .equipment-section {
    padding-left: 20px;
    padding-right: 20px; } }

@media screen and (min-width: 801px) {
  .equipment-item {
    flex-direction: row; }
    .equipment-item .equipment-item-text {
      flex: 1;
      padding-right: 8vw; }
    .equipment-item img {
      max-height: 250px; } }

@media screen and (max-width: 800px) {
  #equipment {
    padding: 0px; }
  .equipment-grid {
    padding: 30px; }
  .equipment-item {
    flex-direction: column-reverse;
    align-items: center; }
    .equipment-item img {
      width: 100%;
      max-width: 400px; } }

@media screen and (max-width: 500px) {
  .equipment-grid {
    padding: 0px !important; } }

#calendar {
  padding-left: 5vw;
  padding-right: 5vw; }
  #calendar iframe {
    height: 80vh;
    width: 100%; }

.design-blue {
  color: #081674; }

.design-blue-dark {
  color: #020c4e; }

.design-pink {
  color: #f86e9f; }

.design-red {
  color: #ec3c28; }

.design-yellow {
  color: #f7c70d; }

.generic-section {
  text-align: center;
  padding: 5vw; }
  .generic-section h2 {
    color: #081674;
    margin-top: 40px; }

.design-blue {
  color: #081674; }

.design-blue-dark {
  color: #020c4e; }

.design-pink {
  color: #f86e9f; }

.design-red {
  color: #ec3c28; }

.design-yellow {
  color: #f7c70d; }

.community-boxes {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  color: #081674; }
  .community-boxes .community-box {
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.06);
    border-radius: 5px;
    flex: 1;
    max-width: 500px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: #081674;
    transition: all 0.1s ease-in-out; }
    .community-boxes .community-box:hover {
      transform: scale(1.03);
      text-decoration: none; }
    .community-boxes .community-box .community-graphic {
      width: 100%;
      height: 200px;
      border-radius: 5px 5px 0px 0px; }
    .community-boxes .community-box .box-content {
      padding: 2vw; }
      .community-boxes .community-box .box-content h3 {
        text-transform: uppercase;
        font-size: 20px;
        letter-spacing: 0.17em; }
    .community-boxes .community-box a {
      border: 2px solid #081674;
      padding: 8px 14px;
      border-radius: 6px;
      display: inline-block;
      margin: 10px;
      font-family: League Spartan;
      text-transform: uppercase;
      font-size: 13px;
      letter-spacing: 0.15em;
      display: flex;
      flex-direction: row;
      align-items: center; }
      .community-boxes .community-box a img {
        margin-right: 5px; }

@media screen and (max-width: 750px) {
  .community-boxes {
    flex-direction: column; }
    .community-boxes .community-box {
      max-width: none;
      margin: 0;
      border-radius: 0;
      border: none;
      margin-bottom: 20px; }
      .community-boxes .community-box a {
        width: 50vw;
        justify-content: center;
        padding: 10px; } }

.design-blue {
  color: #081674; }

.design-blue-dark {
  color: #020c4e; }

.design-pink {
  color: #f86e9f; }

.design-red {
  color: #ec3c28; }

.design-yellow {
  color: #f7c70d; }

.footer {
  text-align: center;
  padding: 70px;
  font-family: League Spartan;
  font-weight: bold;
  font-size: 13px;
  border-top: 4px solid #eeedf7; }
  .footer a {
    color: #081674;
    margin-left: 12px;
    margin-right: 12px; }
  .footer .copyright {
    color: #ec3c28; }