#hero {
  background-color: #4fcdff;
}

@media(min-width: 992px) {
  #hero {
  background-image: url("images/index_local_hero.png");
  background-size: cover;
  background-position: bottom right;
  background-repeat: no-repeat;
  }
/*  .my-md-10{
    margin-top: 10rem !important;
    margin-bottom: 10rem !important;
  }*/
  .is-md-hidden {
    display: none;
  }
}

.fs-7 {
  font-size: 3rem;
}

@media (min-width: 1200px) {
  .fs-7 {
    font-size: 6rem;
  }
}

.icon {
  width: 30px;
}

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  top: 24rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 60rem;
}

.carousel-indicators {
  top: 25rem;
  z-index: 10;
}


.carousel-image {
  right: 100%;
  z-index: 200;
}

a.link-light {
  text-decoration: none;
  border-bottom: 2px solid #eee;
}

#section-4 {
  background-image: url('images/half-moon-with-ring.png'), url('images/small-circle.png'), url('images/half-moon.png');
  background-repeat: no-repeat;
  background-position: 100% -45%, 4% 40%, 0 115%;
  background-size: 15%, 5%, 10%;background-color: rgb(25, 53, 94);
}