@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&display=swap");
body {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ul {
  margin: 100px 0px;
  padding: 0;
  list-style: none;
  color: #f2f2f2;
}

ul li {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 86vw;
  max-width: 516px;
}

ul h2 {
  font-family: 'Big Shoulders Display';
  text-transform: uppercase;
  font-size: 2.4em;
}

ul p {
  font-family: 'Lexend Deca';
  line-height: 1.7em;
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.75);
}

ul a {
  text-decoration: none;
}

.contentwrap {
  padding-top: 3.0em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

.card1 {
  border: 1px solid #e38826;
  border-radius: 10px 10px 0px 0px;
  background: #e38826;
}

.card1 .b-text {
  color: #e38826;
}

.card1 .button1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 24px 0px 46px;
  width: 150px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 3em;
  background: #f2f2f2;
}

.card1 .button1:hover {
  background: #e38826;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.card1 .button1:hover .b-text {
  color: rgba(255, 255, 255, 0.75);
}

.card2 {
  border: 1px solid #006970;
  background: #006970;
}

.card2 .b-text {
  color: #006970;
}

.card2 .button2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 24px 0px 46px;
  width: 150px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 3em;
  background: #f2f2f2;
}

.card2 .button2:hover {
  background: #006970;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.card2 .button2:hover .b-text {
  color: rgba(255, 255, 255, 0.75);
}

.card3 {
  border: 1px solid #004241;
  border-radius: 0px 0px 10px 10px;
  background: #004241;
}

.card3 .b-text {
  color: #004241;
}

.card3 .button3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 24px 0px 46px;
  width: 150px;
  height: 48px;
  border-radius: 3em;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: #f2f2f2;
}

.card3 .button3:hover {
  background: #004241;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.card3 .button3:hover .b-text {
  color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 1200px) {
  ul {
    top: 80px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 59vw;
  }
  .contentwrap {
    padding-top: 3.0em;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 64%;
  }
  .card1 {
    border-radius: 10px 0px 0px 10px;
  }
  .card1 .button1 {
    margin-top: 5.125rem;
  }
  .card2 .button2 {
    margin-top: 5.125rem;
  }
  .card3 {
    border-radius: 0px 10px 10px 0px;
  }
  .card3 .button3 {
    margin-top: 5.125rem;
  }
}
/*# sourceMappingURL=style.css.map */