.carousel {
    max-width: 600px;
    margin: auto;
}

.carousel p {
    margin-left: -3em;
    margin-right: -3em;
}

.carousel-control.left, .carousel-control.right {
    background-image: none
}

.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
/*    text-align: center;*/
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}

.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 4s all ease-in-out .3s;
       -moz-transition: 4s all ease-in-out .3s;
        -ms-transition: 4s all ease-in-out .3s;
         -o-transition: 4s all ease-in-out .3s;
            transition: 4s all ease-in-out .3s;
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 4s all ease-in-out .3s;
       -moz-transition: 4s all ease-in-out .3s;
        -ms-transition: 4s all ease-in-out .3s;
         -o-transition: 4s all ease-in-out .3s;
            transition: 4s all ease-in-out .3s;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #080d15;
    opacity: .7;
}