.my-learning-carousel {
        position: absolute;
        visibility: hidden;
        top: -250px;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
        &:hover {
            .carousel-control-next, .carousel-control-prev {
                display: flex !important;
            }
        }
        &.active {
                visibility: visible;
                -webkit-transition: all 0.5s ease;
                -moz-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
                -ms-transition: all 0.5s ease;
                transition: all 0.5s ease;
                 top: 0px;
                
        }
    @include rem-fallback(height,250px / 16px);
    .elicon,.close {
        @include rem-fallback(right,12px / 16px);
        @include rem-fallback(font-size,42px / 16px);
        @include rem-fallback(top,-240px / 16px);
        position: relative;
        color: $white;
        z-index: 999;
        cursor: pointer;
        opacity: 1;
    }
    .carousel-inner, .carousel-control-prev, .carousel-control-next {
        z-index: 2;
    }
    .carousel-indicators a{
        height: 100%;
        display: block;
        &:focus  {
            outline: 1px dotted !important;
            outline: 5px auto -webkit-focus-ring-color !important;
        }
    }
    .carousel-caption {
        @include rem-fallback(margin-top,30px / 16px);
        top: 0;
        text-align: left;
        p {
            @include rem-fallback(font-size,14px / 16px);
        }
        
        @media screen and (max-width:767px) {
            @include rem-fallback(margin-top,15px / 16px);
        }
    }
}