%arrow-style {
    position: absolute;   
    z-index: 999;
    cursor: pointer;
    @extend %bg-primary;
    color: $color_white;
    border: 0;
    padding: 8px;
    line-height: 0;
    font-size: 31px;
    width: 35px;
    text-align: center;
    @include transition(all .3s);
    &:hover {
    	background: $color_secondary;
    }
    &:focus {
    	outline: none;
    }

}
.bt-prev-arrow {
    &.arow-lf {
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
        &:hover {
            width: 55px;
        }
    }
    &.arrow-right {
        right: 55px;
        top: 0;
        font-size: 1rem;
    }
    
	@extend %arrow-style;
}

.bt-next-arrow {
    &.arow-lf{
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
        &:hover {
            width: 55px;
        }
    }
    &.arrow-right {
        right: 15px;
        top: 0;
        font-size: 1rem;
    }
    
	@extend %arrow-style;
}