body,
html {
  height: 100%;
  /* overflow-y: hidden; */
  margin: 0;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("AQUA-SP-199.jpg");

  /* Add the blur effect */
  filter: blur(25px);
  -webkit-filter: blur(25px);

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;

  padding-left: 5%;
  padding-right: 5%;

  /* flex */
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

/* nav item */
.portal-link:link {
  cursor: pointer;
  text-decoration: none;
}

.nav-item {
  width: 200px;
  font-family: Suisseintl, sans-serif;
  display: flex;
  padding: 48px 24px;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
    rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  transform-style: preserve-3d;
  opacity: 1;
}

.media {
  transition: 0.3s;
}

.nav-item:hover .media {
  transform: scale(1.1);
}

.icon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 80px;
  height: 80px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 28%;
  background-color: #7ce0d3;
  border: 3px solid #f4f4f4;
}

.content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  /* justify-content: flex-start; */
}

.card-title {
  color: #f4f4f4;
  /* line-height: 36px; */
  font-weight: 400;
  font-size: 15px;
}

@media only screen and (max-width: 444px) {
  .bg-image {
    background-image: none;
  }

  .card-title {
    color: #004851;
    line-height: 36px;
    font-weight: 400;
    font-size: 15px;
  }

  .icon {
    border: 3px solid #004851;
  }
}