﻿:root {
    /*dynamicBanners variables*/
    --dynbanners-billboard-shadow: #262626;
    --dynbanners-rectangleAd-bg: rgba(0,0,0,.3);
    --dynbanners-thumbnail9-bg: rgba(0,0,0,.3);
}

/* Dynamic Banners Common styles */
.dynamicBanners,
.dynamicBanners .dynamicBanners_item {
    position: relative;
}

.banners_rectangleAd .dynamicBanners_img,
.banners_thumbnail9 .dynamicBanners_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.dynamicBanners .lca-banner-video {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dynamicBanners.banners_billboard .lca-banner-video {
    z-index: -1;
}

.dynamicBanners .dynamicBanners_caption {
    position: absolute;
    z-index: 2;
    width: calc(100% - 16px);
    height: auto;
    max-height: calc(100% - 62px);
    inset-inline-start: 16px;
    padding-inline-end: 16px;
    inset-block-end: 16px;
    inset-block-start: initial;
    overflow: hidden;
}

.dynamicBanners .dynamicBanners_caption * {
    word-break: break-word;
}

.banners_billboard.dynamicBanners .dynamicBanners_caption {
    inset-block-end: initial;
    inset-block-start: 16px;
    max-height: 60%;
}

.dynamicBanners .lca-voice-icon {
    inset-inline-end: 16px;
}

/* Billboard Banner */
.lca-main-content .with_shadow_slider.empty_banner {
    margin-bottom: 0;
}

.banners_billboard.empty_banner ~ .landing_contet {
    margin-top: 30px;
}

.banners_billboard.empty_banner ~ .tl_cont.full_width {
    margin-top: 30px;
    padding-top: 50px;
}

.landing_contet {
    padding-top: 50px;
}

.banners_billboard:not(.empty_banner) ~ .landing_contet {
    padding-top: 0;
}

.banners_billboard:not(.empty_banner),
.banners_billboard_slider .dynamicBanners_item.lca-banner-video-link,
.banners_billboard_slider .dynamicBanners_img {
    width: 100%;
    height: calc(281px + (674 - 281) * (100vw - 320px) / (768 - 320));
}

/* Billboard banner slider items */
.banners_billboard_slider {
    height: 100%;
}

.banners_billboard_slider .dynamicBanners_img{
    object-fit: cover;
    object-position: top;
    z-index: -1;
    top: 0;
    position: relative;
}

/* Billboard Short Type Banner */
.banners_billboardShort:not(.empty_banner) ~ .landing_contet {
    padding-top: 0;
}

.banners_billboardShort:not(.empty_banner),
.banners_billboardShort_slider .dynamicBanners_item.lca-banner-video-link,
.banners_billboardShort_slider .dynamicBanners_img {
    width: 100%;
    height: calc(171px + (409.6 - 171) * (100vw - 320px) / (768 - 320));
}

/* Billboard Short Type slider items */
.banners_billboardShort_slider,
.banners_billboardShort_slider .dynamicBanners_item {
    height: 100%;
}

.banners_billboardShort_slider .dynamicBanners_img {
    object-fit: cover;
    object-position: top;
    z-index: -1;
    top: 0;
    position: relative;
}


/* Rectangle Ad Banner */
.banners_rectangleAd__wrapper {
    overflow-x: auto;
    padding: 0 16px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.banners_rectangleAd {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 8px;
}

.banners_rectangleAd .dynamicBanners_item {
    width: calc(100vw - 32px);
    border-radius: 8px;
    overflow: hidden;
    display: block;
    height: calc(169px + (431 - 169) * (100vw - 320px) / (768 - 320));
    background-color: var(--dynbanners-rectangleAd-bg);
    overflow: hidden;
}

@media only screen and (min-width: 483px){
    .banners_rectangleAd .dynamicBanners_item {
        max-width: 450px;
        height: 263px;
    }
}

/* Thumbnail 9 Banner */
.banners_thumbnail9__wrapper{
    margin: 16px 0 0;
}

.banners_thumbnail9 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 8px;
    overflow-x: auto;
    padding: 0 16px;
    grid-auto-flow: column;
    margin-top: 4px;
}

.banners_thumbnail9 .dynamicBanners_item {
    width: calc(50vw - 20px);
    height: calc(94px + (243 - 94) * (100vw - 320px) / (768 - 320));
    background-color: var(--dynbanners-thumbnail9-bg);
    border-radius: 8px;
    overflow: hidden;
}

.banners_thumbnail9__wrapper .name_vidget {
    margin: 8px 16px;
    visibility: visible;
}

@media only screen and (min-width: 600px) {
    .banners_thumbnail9 .dynamicBanners_item {
        max-width: 280px;
        height: 187px;
    }
}

/* Registration Popup Banner */
.banners_popup:not(.empty_banner) .dynamicBanners_item {
    height: calc(150px + (360 - 150) * (100vw - 320px) / (768 - 320));
}

.dynamicBanners.banners_popup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}