// dimensions
// options
/* Carousel base class */
.carousel.carousel-codex {
    .carousel-inner {
        height: 100%;
    }
    .carousel-item {
        background-size: cover;
        //background: rgba(0, 0, 0, 0) no-repeat center center;
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    .carousel-caption {
        position: absolute;
        //@include center-width(70);
        //top: 200px;
        //margin: 0 auto;
        left: 10%;
        right: 10%;
        bottom: 20%;
        z-index: 10;
        width: 80%;
        //max-width: 580px;
        //border: 1px solid $carousel-caption-border-color;
        padding: 20px;
    }
    .carousel-caption, .carousel-caption p {
        font-size: $carousel-caption-font-size;
    }

    // with this
    .carousel-control {
        &.bottom {
            position: relative;
            bottom: 90px;
            display: block;
            top: initial;
            text-align: center;
            color: white;
            font-size: 70px;
            z-index: 2;
            margin: 0 auto;
            //color: rgba(white, 0.6);
            &:hover {
                //color: rgba(white, 0.9);
            }
        }

        .icon-bottom {
            @include fa-icon();
            position: absolute;
            z-index: 5;
            display: inline-block;
            width: $carousel-icon-width;
            height: $carousel-icon-width;
            margin-top: -($carousel-icon-width / 2);
            font-family: serif;
            line-height: 1;
            &:before {
                content: $fa-var-chevron-down;
            }
        }
    }

}

@include media-breakpoint-up(xl){
    .carousel.carousel-codex {
        .carousel-caption {
            left: 20%;
            right: 20%;
            width: 60%;
        }
    }
}