/* Styles for additional Swiper instances used by shortcodes. */

/* latest posts swiperjs (see inc/shortcodes.php: td-latest-posts-swiper) */
.latest-posts-swiperjs {
    position: relative;
    --swiper-pagination-bullet-size: 13px;
    --swiper-pagination-bullet-horizontal-gap: 2.5px;
}
.latest-posts-swiperjs .swiper-slide { height: 420px; }
.latest-posts-swiperjs-slide {
    display: block;
    position: relative;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.latest-posts-swiperjs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 130, 0, 0.55);
    z-index: 1;
}
.latest-posts-swiperjs-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.latest-posts-swiperjs-caption .container {
    /* keep slide content clear of the nav arrows (offset + arrow width + gap) at any screen size */
    padding-left: calc(var(--swiper-navigation-sides-offset, 10px) + (var(--swiper-navigation-size, 44px) * 27 / 44) + 10px);
    padding-right: calc(var(--swiper-navigation-sides-offset, 10px) + (var(--swiper-navigation-size, 44px) * 27 / 44) + 10px);
}
.latest-posts-swiperjs-caption p {
    margin: 0 0 22.5px;
    color: #fff;
    font-size: 36px;
    line-height: 1.4em;
}
.latest-posts-swiperjs .btn.btn-inverted:hover,
.latest-posts-swiperjs .btn.btn-inverted:focus,
.latest-posts-swiperjs .btn.btn-inverted:active {
    border-color: #fff;
}
.latest-posts-swiperjs .swiper-pagination {
    bottom: 15px;
}
.latest-posts-swiperjs .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.8;
}
.latest-posts-swiperjs .swiper-pagination-bullet-active {
    background: #FF8200;
    opacity: 1;
}
.latest-posts-swiperjs .swiper-button-prev,
.latest-posts-swiperjs .swiper-button-next {
    color: #fff;
}