.relative{
    position: relative;
}

.box-shadow {
    box-shadow: 1px 1px 10px #ccc;
}

.no-nav .slick-arrow{
    display: none !important;
}

.no-dots .slick-dots{
    display: none !important;
}

.slick-arrow {
    position: absolute;
    border: none;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: rgb(var(--primary), 0.5);
    color: #fff;
    top: calc(50% - 25px);
    z-index: 1;
    transition: .3s;
    margin: 0 10px;
    line-height: 0;
}

.slide-next.slick-arrow {
    right: 0;
}

.slick-arrow:hover {
    cursor: pointer;
    background: rgb(var(--primary), 1);
    transition: .3s;
}

/*Slick*/

.slick-track {
    float: left;
}

ul.slick-dots {
    width: 100%;
    text-align: center;
    margin: auto;
    /* position: absolute; */
    /* bottom: 0px; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
.dots-bottom10 ul.slick-dots{
    bottom: 10px;
}
.dots-bottom-20 ul.slick-dots{
    bottom: -20px;
}
ul.slick-dots li{
    margin:0 1px;
    display: flex;
}
ul.slick-dots li + li {
    margin-left: 3px;
}
ul.slick-dots li button{
    border:none;border-radius:50%;
    text-overflow:clip;
    height:17px;
    width: 17px!important;
    cursor:pointer;
    animation-name:fadeInBig;
    content-visibility:hidden;
    transition:all 200ms ease;
    background-color: var(--white);
    border: 2px solid #606266a6;
}
ul.slick-dots li.slick-active button,
ul.slick-dots li:hover button{
    background-color: var(--primary-background);
    border: 2px solid var(--primary-color);
    transform: scale(1.2);
    margin: 0 1px;
}
ul.slick-dots li {
    width: unset !important;
}