/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Cocktail Companion Editions Carousel
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.companion-sec {
    padding: 40px 0 60px;
    overflow: hidden;
}

.companion-carousel-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
}

/* Slide */
.companion-item {
    padding: 0;
}

.companion-item_inner {
    height: 100%;
}

.companion-item_inner img {
    width: 100%;
    height: auto;
    display: block;
}

/* Keep the existing edition heading rhythm */
.companion-item .edition-spacing {
    padding: 32px 0 0 0;
}

.companion-sec sup {
    text-transform: none;
}

.companion-item .lookinside {
    padding-bottom: 0;
}

/*~~~ Owl overrides ~~~*/

.companion-carousel .owl-stage {
    display: flex;
    align-items: flex-end;
}

.companion-carousel .owl-item {
    display: flex;
}

.companion-carousel .owl-item > .companion-item {
    width: 100%;
}

/* Nav arrows */
.companion-carousel .owl-nav {
    margin: 0;
}

.companion-carousel .owl-nav button.owl-prev,
.companion-carousel .owl-nav button.owl-next,
.companion-carousel .owl-nav .owl-prev,
.companion-carousel .owl-nav .owl-next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 34px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    transition: opacity 300ms ease;
}

.companion-carousel .owl-nav .owl-prev {
    left: 10px;
}

.companion-carousel .owl-nav .owl-next {
    right: 10px;
}

.companion-carousel .owl-nav .owl-prev img,
.companion-carousel .owl-nav .owl-next img {
    width: 100%;
    height: auto;
    display: block;
}

.companion-carousel .owl-nav .owl-prev:hover,
.companion-carousel .owl-nav .owl-next:hover {
    opacity: .7;
    background: none;
}

.companion-carousel .owl-nav .disabled {
    opacity: .25;
    cursor: default;
}

/* Dots */
.companion-carousel .owl-dots {
    margin-top: 26px;
    text-align: center;
}

.companion-carousel .owl-dots .owl-dot {
    background: none;
    border: none;
    outline: none;
    padding: 0;
}

.companion-carousel .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #d8d8d8;
    border-radius: 50%;
    display: block;
    transition: background 300ms ease;
}

.companion-carousel .owl-dots .owl-dot.active span,
.companion-carousel .owl-dots .owl-dot:hover span {
    background: #A6192E;
}

/*~~~~~~~~~~~~~~~~
    Responsive
~~~~~~~~~~~~~~~~~*/

@media screen and (min-width: 1299px) {
    .companion-carousel-wrap {
        max-width: 1340px;
        padding: 0 70px;
    }
    .companion-carousel .owl-nav .owl-prev,
    .companion-carousel .owl-nav .owl-next {
        width: 38px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .companion-sec {
        padding: 30px 0 45px;
    }
    .companion-carousel-wrap {
        padding: 0 45px;
    }
    .companion-item .edition-spacing {
        padding: 24px 0 0 0;
    }
    .companion-carousel .owl-nav .owl-prev,
    .companion-carousel .owl-nav .owl-next {
        width: 26px;
    }
}

@media screen and (max-width: 767px) {
    .companion-sec {
        padding: 25px 0 40px;
    }
    .companion-carousel-wrap {
        padding: 0 34px;
    }
    .companion-item {
        padding: 0;
    }
    .companion-item .edition-spacing {
        padding: 22px 0 0 0;
    }
    .companion-carousel .owl-nav .owl-prev,
    .companion-carousel .owl-nav .owl-next {
        width: 22px;
    }
    .companion-carousel .owl-nav .owl-prev {
        left: 0;
    }
    .companion-carousel .owl-nav .owl-next {
        right: 0;
    }
    .companion-carousel .owl-dots {
        margin-top: 20px;
    }
}