.slick-slider{
    .slick-dots{
        list-style: none;
        margin: 0;
        padding: 10px 15px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        button{
            display: none;
        }
        li{
            height: 10px;
            width: 10px;
            border-radius: 100%;
            margin-left: 2.5px;
            margin-right: 2.5px;
            margin-top: 5px;
            @include transition();
            opacity: 0.63;
            &:hover{
                opacity: 1;
            }
        }
        .slick-active{
            width: 20px;
            border-radius: 5px;
            opacity: 1;
       }
    }
    .slick-arrow{
        height: 40px;
        width: 40px;
        border-radius: 3px;
        font-size: 0;
        padding: 0;
        border: 0;
        cursor: pointer;
        outline: 0;
        position: absolute;
        top: 50%;
        @include transform(translateY(-50%));
        z-index: 1;
        text-align: left;
        &:hover{
            opacity: 0.8;
        }
        &:before{
            content: "";
            display: inline-block;
        }

    }
    .slick-prev{
        left: 15px;
    }
    .slick-next{
        right: 15px;
    }
}

.#{$prefix}-slick-angle-right,
.#{$prefix}-slick-chevron-right,
.#{$prefix}-slick-arrow-right{
    .slick-arrow{
        &:before{
            position: absolute;
            @include border-left(2px,solid);
            @include border-bottom(2px,solid);
        }
    }
    .slick-prev{
        &:before{
            @include transform(rotate(45deg));
        }
    }
    .slick-next{
        &:before{
            @include transform(rotate(225deg));
        }
    }
}

/************ ANGLE RIGHT ****************/ 
.#{$prefix}-slick-angle-right{
    .slick-arrow{
        &:before{
            width: 8px;
            height: 8px;
            top: 15px;
        }
    }
    .slick-prev{
        &:before{
            left: 16px;
        }
    }
    .slick-next{
        &:before{
            left: 14px;
        }
    }
}

/*********** CHEVRON RIGHT ******************/ 
.#{$prefix}-slick-chevron-right{
    .slick-arrow{
        &:before{
            width: 12px;
            height: 12px;
            top: 14px;
        }
    }
    .slick-prev{
        &:before{
            left: 16px;
        }
    }
    .slick-next{
        &:before{
            left: 10px;
        }
    }
}

/************** ARROW RIGHT****************/ 
.#{$prefix}-slick-arrow-right{
    .slick-arrow{
        &:before{
            width: 10px;
            height: 10px;
            top: 15px;
        }
        &:after{
            content: '';
            display: inline-block;
            width: 14px;
            position: absolute;
            top: 19px;
            @include border-bottom(2px,solid);
            border-color: rgba($color_white,0.9);
        }
    }
    .slick-prev{
        &:before{
            left: 14px;
        }
        &:after{
            left: 14px;
        }
    }
    .slick-next{
        &:before{
            left: 16px;
        }
        &:after{
            left: 13px;
        }
    }
   
}

/************* CARET RIGHT ***************/ 
.#{$prefix}-slick-caret-right{
    .slick-arrow{
        &:before{
            position: absolute;
            top: 12px;
            width: 0;
            height: 0;
            @include border-top(8px,solid);
            @include border-right(8px,solid);
            @include border-bottom(8px,solid);
            border-color: transparent $color_white transparent transparent;
        }
    }
    .slick-prev{
        &:before{
            left: 14px;
        }
    }
    .slick-next{
        &:before{
            left: 17px;
            @include transform(rotate(180deg));
        }
    }
}

/************** LONG ARROW RIGHT****************/ 
.#{$prefix}-slick-long-arrow-right{
    .slick-arrow{
        &:before{
            position: absolute;
            top: 14px;
            width: 0;
            height: 0;
            @include border-top(6px,solid);
            @include border-right(6px,solid);
            @include border-bottom(6px,solid);
            border-color: transparent $color_white transparent transparent;
        }
        &:after{
            content: '';
            display: inline-block;
            width: 12px;
            position: absolute;
            top: 19px;
            @include border-bottom(2px,solid);
            border-color: rgba($color_white,0.9);
        }
    }
    .slick-prev{
        &:before{
            left: 12px;
        }
        &:after{
            left: 18px;
        }
    }
    .slick-next{
        &:before{
            left: 22px;
            @include transform(rotate(180deg));
        }
        &:after{
            left: 10px;
        }
    }
}