.carousel-indicators {
  bottom: 14%;
}

.carousel-indicators li {
  display: inline-block;
  text-indent: 0;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  background-color: #666;
  box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.carousel-indicators .active {
  background-color: #fff;
}

/*
inspired from https://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.carousel-caption {
  font-family: "Open Sans", sans-serif;
  font-size: 2em;
  font-weight: 300;
  width: 100%;
  position: absolute;
  bottom: -12px;
  left: -30%;
  color: white;
  text-decoration: none;
  text-shadow: 2px 2px #000000;
  animation-delay: 1.5s;
  animation-duration: 1.5s;
}

.btn-teo-caption {
  width: 155px;
  border-radius: 500px !important;
  border: 3px solid #106470;
  margin-top: 6px;
  margin-right: 21%;
  background-color: #106470;
  font-weight: bold;
  color: white;
}

.btn-teo-caption:hover {
  background-color: white;
  color: #106470;
  border: 3px solid #106470;
  transition-property: ease 1s;
}

#caption1-button {
  font-family: "Open Sans", sans-serif;
  font-size: 2em;
  font-weight: 300;
  position: absolute;
  bottom: -10px;
  left: 40%;
  color: black;
  text-decoration: none;
}