#hero-wrapper {
    height: 100%;
    width: 100%;
    position: fixed;
}

#hero-wrapper .carousel-wrapper,
#hero-carousel {
    height: 100%;
    width: 100%;
    position: absolute;
}

#hero-carousel {
    img {
        left: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        max-width: none;
        width: auto;
        height: auto;
    }
    & i {
        position: absolute;
        top: 50%;
    }
}

.carousel-fade {
    .carousel-inner {
        .item {
            opacity: 0;
            transition-property: opacity;
        }
        .active {
            opacity: 1;
        }
        .active.left,
        .active.right {
            left: 0;
            opacity: 0;
            z-index: 1;
        }
        .next.left,
        .prev.right {
            opacity: 1;
        }
    }
    .carousel-control {
        z-index: 2;
    }
}