#homeCarousel {
    max-height: 55em;
    position: relative;
}

#homeCarouselInner {
    max-height: inherit;
}

#homeCarousel .left,
#homeCarousel .right {
    color: #fff;
    font-size: 24px;
    text-align: center;
    border-radius: 4px;
    z-index: 5;
    line-height: 50px;
}

#homeCarousel .left:hover,
#homeCarousel .right:hover {
    color: #ffb400;
}

#homeCarousel .fa-angle-double-left,
#homeCarousel .fa-angle-double-right {
    padding-top: 100%;
    font-size: 50px;
}


/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://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."
  Need to 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);
    }
}

#homeCarousel .item img {
    width: 100%;
}

#homeCarousel .carousel-control {
    opacity: 1;
    filter: alpha(opacity=100);
    background-image: none;
    background-repeat: no-repeat;
    text-shadow: none;
}

.homeCarouselText {
    position: absolute;
    top: 20%;
    left: 1.8%;
    right: auto;
    width: 100%;
    color: #fff;
}

.homeCarouselText h2 span {
    padding: 10px;
    font-size: 79px;
}

.homeCarouselText h3 span {
    padding: 15px;
    color: #fff;
    font-size: 45px;
}

.homeProcessTitle {
    color: #fff;
}

.home-slide-text {
    text-shadow: 2px 2px #000;
}

@media (max-width: 795px) {
    
    .homeCarouselText h2 span {
        font-size: 25px;
    }
    .homeCarouselText h3 span {
        font-size: 15px;
    }

    #logo a h1 img {
        max-height: 50px;
    }

}

@media (max-width: 550px) {

    .homeCarouselText{
        top: 15%;
    }
    
    .homeCarouselText h2 span {
        font-size: 25px;
    }
    .homeCarouselText h3 span {
        display: none;
    }
    
}