/*===========================
        08.Brand css 
===========================*/

.brand-area{}

.single-brand{
    text-align: center;
}


.brand-active{
    & .slick-arrow{
        position: absolute;
        top: 50%;
        left: -15px;
        @include transform(translateY(-50%));
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        @include transition(0.3s);
        cursor: pointer;
        
        & i{
            font-size: 26px;
            color: $black;
        }
        
        &.next{
            left: auto;
            right: -15px;
        }
    }
    
    &:hover{
        & .slick-arrow{
            visibility: visible;
            opacity: 1;            
        }
    }
}