/* These rules were taken form the original slick custom theme and modified to keep only some rules about the arrow. */
/* Arrows */
.slick-slider {
    margin-bottom: 40px;
}

.slick-prev,
.slick-next
{
    position: absolute;

    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 15px;
    border: none;
    outline: none;
    background: inherit;
    color: white;

    cursor: pointer;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    opacity: 0.75;
}

.grayBackgroundArrow {
    background-color: #a1a1a1;
}

@media(min-width: 768px) {
    .slick-prev, .slick-next {
        top: 50%;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }

    .slick-prev
    {
        left: -59px;
    }

    .slick-next
    {
        right: -59px;
    }
}

@media(max-width: 767px) {
    .slick-prev, .slick-next {
        top: unset;
        bottom: -40px;
    }

    .slick-prev
    {
        left: 30%;
    }

    .slick-next
    {
        right: 30%;
    }
}