.content-block{
  padding-top: 20px;
  padding-bottom: 20px;
  margin-left: 30px;
  margin-right: 30px;
}

@media(min-width: 900px) {
  .content-block{
    margin-left: 50px;
    margin-right: 50px;
  }
}

@media(min-width: 1200px) {
  .content-block {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
}

.data-banner {
  position: relative;
  background-color: #fcffff;
  display: flex;
  justify-content: center;
}


.data-banner h1 {
  color:  ;
  font-size: 2.5rem;
}

.data-banner h2 {
  color: #35b779;
  font-size: 1.5rem;
}

.data-banner .content-block {
  display: flex;
  flex-direction: row;
}

.data-banner .content-block .data-text {
  width: 60%;
  font-size: 16pt;
}


.data-banner .content-block .data-animation {
  margin-left: 40px;
  margin-right: 45px;
  width: 360px;
  height: 360px;
}

.data-banner .content-block .data-animation video {
  width: 360px;
  height: 360px;
}

@media (min-width: 1000px) {
  .data-banner .data-image {
    display: initial;
    width: 270px;
  }
}

@media (min-width: 1200px) {
  .data-banner .data-image {
    width: 340px;
  }
}


@media (min-width: 1400px) {
  .data-banner .data-image {
    width: 440px;
  }
}

.data-banner .data-image p {
  margin-bottom: 0;
}

.data-banner .data-image-left {
  left: 0;
  bottom: 0;
}

.data-banner .data-image-right {
  right: 0;
  bottom: 0;
}

.data-banner .content-block {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .data-banner .content-block {
    max-width: 660px;
  }
  .data-banner .content-block .data-text {
    width: 100%;
  }
  
  .data-banner .content-block .data-animation {
    display: none;
  }
}

@media (max-width: 1200px)  {
  .data-banner .content-block {
    max-width: 660px;
  }
  .data-banner .content-block .data-text {
    width: 100%;
  }
  
  .data-banner .content-block .data-animation {
    display: none;
  }
}


.data-banner a {
  text-decoration: none;
}

.data-banner h3 {
  margin-top: 1.3rem;
  margin-bottom: 1.3rem;
}

.data-banner h4 {
  margin-top: 0;
}

.data-banner a[role="button"] {
  margin-right: 17px;
  margin-top: 0.6rem;
  margin-bottom: 1.6rem;
}


.data-banner #btn-guide {
  background-color: #959595 !important;
  border: none;
}




.data-banner ul {
  padding-inline-start: 21px;
  font-size: 1.1rem;
}

.data-banner ul li {
  padding-bottom: 0.4rem;
}


.feature {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

.feature .content-block {
  display: flex;
  flex-direction: row;
  margin-bottom: 25px;
}

.feature .content-block .col-left {
  width: 60%;
  margin-right: 15px;
}


.feature .content-block .col-right {
  width: 60%;
  margin-left: 15px;
}

.feature h3 {
  color: #1f9e89;
  font-size: 2rem;
}

.feature p:first-of-type {
  margin-bottom: 0.2rem;
  color: #015B41;
}

.feature p {
  font-size: 15pt;
}


/*-- font awesome button --*/

.icon-row {
  margin-top: 10%;
  display: table;
}


.icon-column {
  float: left;
  width: 20%;
  padding: 0px;
  flex-direction: column;
}

.icon-image {
  display: flex;
  margin: auto;
  width: auto;
  height: 4rem;
  width: 100%;
  text-align: center;
  backface-visibility: hidden;
  transform: perspective(1px) translate3d(0, 15px, 0);
  transition: all .1ms;
}

@media screen and (max-width: 300px) {
  .icon-column {
    width: 100%;
  }
  
  .icon-image {
    height: 50px;
  }
  
  .icon-row {
    margin-top: 10%;
  }
}
  

.michigan {
  filter: invert(40%) sepia(35%) saturate(984%) hue-rotate(325deg) brightness(93%) contrast(87%);
}

.michigan:hover {
  filter: invert(95%) hue-rotate(313deg) brightness(100%) contrast(102%);
  color: #a9ebd8;
}

.michigan-white {
  filter: invert(100%) brightness(100%);
}

.michigan-white:hover {
  filter: invert(40%)  hue-rotate(192deg) brightness(50%) contrast(102%);
  color: #a9ebd8;
}







nav.page-navigation {
  display: none;
}

.nav-footer {
  border-top: none !important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #fff;
  background-color: #757575;
}