.carouselLineArrow-line {
    position: absolute;
    left: 0;
    //bottom: 0;
    width: 100%;
    //height: 10px;

    .carouselLineArrow-innerline {
        //background-color: red;
        height: 100%;
        width: 0%;
    }
}

.carouselLineArrow-arrow {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.5);
    top: 50%;
    transform: translateY(-50%);
    transition: .3s;
    cursor: pointer;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);

    &:hover{
        background-color: rgba(255, 255, 255, 1); 
    }

    &.carouselLineArrow-arrow-left {
        left: -50px;

        &:hover{
            .carouselLineArrow-arrow-inner{
                transform: rotate(-360deg);
            }  
        }

        .carouselLineArrow-arrow-inner{
            height: 100%;
            width: 100%;
            transition: .3s;

            &:before{
                position: absolute;
                content: '';
                background-color: red;
                height: 5px;
                width: 30px;
                top: 50%;
                right: 5px;
                transform: translate(0%, -50%);
            }
            &:after{
                position: absolute;
                content: '';
                //background-color: red;
                height: 0px;
                width: 0px;
                border: 10px solid transparent;
                border-right: 10px solid red;

                top: 50%;
                right: 34px;
                transform: translate(0, -50%);
            }
        }
    }

    &.carouselLineArrow-arrow-right {
        right: -50px;

        &:hover{
            .carouselLineArrow-arrow-inner{
                transform: rotate(360deg);
            }  
        }

        .carouselLineArrow-arrow-inner{
            height: 100%;
            width: 100%;
            transition: .3s;

            &:before{
                position: absolute;
                content: '';
                background-color: red;
                height: 5px;
                width: 30px;
                top: 50%;
                left: 5px;
                transform: translate(0%, -50%);
            }
            &:after{
                position: absolute;
                content: '';
                //background-color: red;
                height: 0px;
                width: 0px;
                border: 10px solid transparent;
                border-left: 10px solid red;

                top: 50%;
                left: 34px;
                transform: translate(0, -50%);
            }
        }
    }
}

.carousel-wrapper-middle{
    &:hover {
        .carouselLineArrow-arrow {
            &.carouselLineArrow-arrow-left {
                left: 20px;
            }

            &.carouselLineArrow-arrow-right {
                right: 20px;
            }
        }
    }
}