carousel.scss

.carousel{

  .skyblue {
    background-color: $light_blue;
  }
  .deepskyblue {
    background-color: $dark_blue;
  }
  .darkerskyblue {
    background-color: $light_orange;
  }

  .carousel-indicators {
    bottom: 0;
  }

  .item {
    height: 500px;
    width:100%;

    @media (max-width: $screen-sm-max) {
      height:350px;
    }

    @media (max-width: $screen-xs-max) {
      height:250px;
    }
  }

  .carousel-caption h3, .icon-container, .carousel-caption button {
    background-color: #09c;
  }

  .carousel-caption {

    h3{
      padding: .5em;
    }

    button {
      border-color: #00bfff;
      margin-top: 1em;
    }
  }

  .icon-container {
    display: inline-block;
    font-size: 25px;
    line-height: 25px;
    padding: 1em;
    text-align: center;
    border-radius: 50%;
  }


  h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: bold;
  }

  .p {
    padding-top: 125px;
    text-align: center;

    a {
      text-decoration: underline;
    }
  }

  /* Animation delays */
  .carousel-caption{

    h3, button{

      @media (max-width: $screen-xs-max) {
        font-size: 14px;
      }
    }
    h3:first-child {
      animation-delay: 1s;
    }

    h3:nth-child(2) {
      animation-delay: 2s;
    }

    button {
      animation-delay: 3s;
    }

  }

}