#mainImage {
    position: relative;
    margin-top: 1rem;
    overflow: hidden;
    background: #000;
}

.slick-slider {
    margin-top: 30px;
}

/* mask for both sides */
.slick-mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 10;
}

/*.slick-mask:after {
    content: "";
    display: block;
    clear: both;
}*/

.slick-mask .mask-left,
.slick-mask .mask-right {
    position: relative;
    width: 50%;
    height: 100%;
    top: 0;
}

.slick-mask .mask-left:before,
.slick-mask .mask-right:before {
    content: "";
    display: block;
    height: 100%;
    background-color: #3b0e56;
}

.slick-mask .mask-left {
    float: left;
    left: 0;
}

.slick-mask .mask-left:before {
    margin-right: 490px;
}

.slick-mask .mask-right {
    float: right;
    right: 0;
}

.slick-mask .mask-right:before {
    margin-left: 490px;
}

/* slick-arrow style */
.slick-arrow {
    width: 2.5rem;
    height: 2.5rem;
    z-index: 20;
}

.slick-arrow:before {
    font-size: 3rem;
}

.slick-prev {
    left: 0;
    width: 100%;
    margin-left: -540px;
}

.slick-next {
    right: 0;
    width: 100%;
    margin-right: -540px;
}

/* slick-dots style */
.slick-dots li button:before,
.slick-dots li.slick-active button:before {
    font-size: 1rem;
    color: #d41e52;
}

/* hide outline for chrome */
.slick-list .slick-slide {
    outline: none;
}

@media (max-width: 1140px) {
    .slick-prev, .slick-next {
        width: 3rem;
        margin: 0;
    }
}

@media (max-width: 980px) {
    .slick-mask {
        display: none;
    }
    .slick-arrow:before {
        background: rgba(0, 0, 0, 0.6);
        padding: 0.6rem 0 0.4rem;
    }
}