@font-face {
  font-family: myriadpro-bold;
  src: url("../fonts/myriad-pro-cufonfonts/MYRIADPRO-BOLD.OTF")
    format("opentype");
}

@font-face {
  font-family: myriadpro-regular;
  src: url("../fonts/myriad-pro-cufonfonts/MYRIADPRO-REGULAR.OTF")
    format("opentype");
}

.page .page__main-banner {
  max-height: 650px;
  min-height: 30vh;
  background-color: #1A99D4;
  display: flex;
  align-items: center;
}

.page .page__main-banner h1 {
  color: white;
  font-family: "myriadpro-bold", Fallback, sans-serif;
  font-size: 4vw;
  margin-left: 10%;
}



.page .page__content{
  margin-top: 10vh;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 5vh;
  font-family: "myriadpro-regular", Fallback, sans-serif;
  color: #4C4C4C;
}

.page .page__content h2 {
  font-family: "myriadpro-bold", Fallback, sans-serif;
  font-size: 2vw;
  padding:  2% 0 2% 0;
  color: black;
}

.page .page__content h3 {
  font-family: "myriadpro-bold", Fallback, sans-serif;
  font-size: 1.2vw;
  padding:  1% 0 1% 0;
  color: black;
}

.page .page__content p strong{
  font-size: 1.2em;
  color: black;
  font-family: "myriadpro-bold", Fallback, sans-serif;
  padding-top: 5vh;
  padding-bottom: 5vh;
}


@media (max-width: 620px) {

  .page .page__main-banner {
    max-height: 300px;
    min-height: 15vh;
  }
}

@media (min-width: 620px) and (max-width: 1080px) {

  .page .page__main-banner {
    max-height: 300px;
    min-height: 20vh;
  }
}