.dte.media_showcase{ display:flex; justify-content:center; align-items:flex-start; height:100vh !important; width:100vw !important } .dte.media_showcase .el{ display:flex; align-items:center; flex-direction:column; margin:0; height:var(--height); width:var(--width); position:relative } .medshw .slide .item .sp{ color:var(--title_color) !important; font-size:var(--title_size) !important; width:100% !important; text-align:var(--content_align) !important; text-shadow:var(--ts) } .medshw .slide .item{ width:var(--thumb_width); height:var(--thumb_height); position:absolute; top:50%; border-radius:var(--thumb_corners); box-shadow:var(--bs); background-position:50% 50%; background-size:cover; display:inline-block; transition:.75s; left:calc(var(--thumbs_offset) + var(--item-offset)); transform:translate(-50%, -50%) } .medshw .video-container{ display:flex; justify-content:center } .medshw .btn-nav{ text-align:center; position:absolute; top:calc(38% + var(--thumb_height)); left:var(--thumbs_offset); transform:translateX(-100%); z-index:2 } .dte.media_showcase .el:has(.contained) .medshw .btn-nav{ top:calc(33% + var(--thumb_height)) } .medshw .slide .item.featured{ left:50% !important; transform:translate(-50%, -50%) !important; width:100% !important; height:100% !important; border-radius:0 !important; box-shadow:0 20px 35px #505050 } .medshw .slide .item.featured .dtmi{ display:flex !important; justify-content:center !important; align-items:center !important; width:100% !important } .medshw .dt-video-player,.medshw .v-poster,.medshw .dt-video-player-custom-icon-wrapper,.medshw .slide .item.featured .react-player__preview,.medshw .slide .item.featured video{ height:var(--video_height) !important; width:var(--video_width) !important; border-radius:var(--thumb_corners) !important; box-shadow:var(--bs) !important } .medshw .dt-video-player{ box-shadow:none !important } .medshw .dt-video-player-custom-icon-wrapper{ justify-content:center !important; align-items:center !important; padding:0 !important } .medshw .slide .item .play-icon{ left:50% !important; position:absolute; top:50% !important; transform:translate(-50%, -50%) } .dte.media_showcase .el .medstc{ position:absolute; z-index:2; top:5%; padding-left:30px; left:var(--featured_left_offset) !important; width:var(--content_width); border-radius:var(--dt_c_border_radius); transform:translate(0, -5%) } .dte.media_showcase .el .medstc *,.dte.media_showcase .el .medstc .sp,.dte.media_showcase .el .medstc .dthml *{ color:var(--component_header_color) !important; font-size:var(--component_content_size) !important; text-wrap:balance } .dte.media_showcase .el .medstc .sp{ font-size:var(--component_header_size) !important } .medshw .ovl{ height:100%; width:100%; padding:15px; display:flex; justify-content:flex-end; flex-direction:column; align-items:center; background:linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)); border-radius:var(--thumb_corners) } .medshw .ovl__title{ text-align:center; font-family:var(--dt_c_medium_font_family); color:var(--dt_c_light) } .medshw .mspill{ display:flex; padding-left:30px } .medshw .ovl__subtitle,.medshw .mspill__subtitle{ padding:0.6rem 1rem 0.4rem 1rem; backdrop-filter:blur(30px); background-color:rgba(0, 0, 0, 0.5); border-radius:1rem; font-size:0.85rem; text-transform:uppercase; text-align:center; color:white; border:1px solid white; box-shadow:var(--bs); margin-bottom:10px; line-height:1; font-family:var(--dt_c_medium_font_family) } .medshw .slide .item .play-icon img{ height:calc(var(--thumb_width)/ 2) !important; width:calc(var(--thumb_width)/ 2) !important; filter:var(--ds) } .medshw .item .gradient{ display:none } .medshw .item.featured .gradient{ display:unset; position:absolute; height:var(--height); width:var(--width); z-index:-1; border-radius:0; background:linear-gradient(270deg, transparent 10%, var(--dt_c_dark)); top:0; left:0; bottom:0; right:0 } .dte.media_showcase .el .dt-btn-element-container{ padding:0 !important } .dte.media_showcase .el .dt-btn-engine{ justify-content:var(--button_align) } .medshw .item .content{ position:absolute; top:50%; left:var(--featured_left_offset) !important; width:var(--content_width); border-radius:var(--dt_c_border_radius); transform:translate(0, -50%); display:none } .medshw .slide .item.featured .content{ display:block } .medshw .slide .item.featured.with-video .content{ top:53% } .medshw .item .content .basic-el{ padding:15px 30px !important } .medshw .content .name{ opacity:0; animation:mediaShowcaseAnimation 1s ease-in-out 1 forwards } .medshw .content .dthtml{ margin-top:10px; margin-bottom:20px; opacity:0; animation:mediaShowcaseAnimation 1s ease-in-out .3s 1 forwards } .medshw .content .dthtml *{ color:var(--content_color) !important; text-align:var(--content_align) !important; text-shadow:var(--ts) } .medshw .content .dthtml img{ filter:var(--ds) } .medshw .item .content:has(.video-container) .dthtml *,.medshw .slide .item.featured.with-video .sp{ text-align:center !important; text-wrap:balance } .medshw .content .dthtml h2{ font-size:var(--bigh) !important; font-family:var(--dt_c_medium_font_family) !important } .medshw .content .dthtml p{ font-size:var(--content_size) !important } .medshw .content button{ padding:10px 20px; border:none; cursor:pointer; opacity:0; animation:mediaShowcaseAnimation 1s ease-in-out .6s 1 forwards } .medshw .btn-nav button{ width:40px !important; height:40px !important; font-size:25px; padding-top:0; border-radius:8px; line-height:1; cursor:pointer; margin:0 5px; transition:.5s all ease-in-out; background-color:var(--cta_bg_initial); color:var(--cta_color_initial); border:1px solid var(--cta_border_initial) } .medshw .btn-nav button:hover{ background-color:var(--cta_bg_active); color:var(--cta_color_active); border:1px solid var(--cta_border_active) } @media (max-width:800px){ .dte.media_showcase .el:has(.contained){ align-items:flex-start; padding-top:30px } .dte.media_showcase.is-hero{ height:calc(100vh - 80px) !important } .dte.media_showcase .el .medstc{ padding:0 15px } .medshw .ovl{ display:none } .medshw .content .dthtml *{ text-wrap:balance } .medshw .slide .item{ top:unset !important; bottom:0 !important; transform:unset !important } .dte.media_showcase .el .bec.dt-btn-element-container button{ width:fit-content !important; min-width:fit-content !important; max-width:fit-content !important } .dte.media_showcase .el .medstc{ top:10%; transform:translate(-50%, -10%); left:50% !important; text-align: center; width: 100vw !important; } .medshw .mspill{ justify-content:center; margin-bottom:10px; padding-left:0 } .medshw .item .content{ transform:translateX(-50%) !important; z-index:1; top:unset !important; bottom:calc(var(--thumb_height) + 10vh) !important } .medshw .item.featured.with-video .content{ top:40% } .dte.media_showcase .el:has(.contained) .medshw .item.featured.with-video .content{ top:38% } .medshw .item.featured .gradient{ z-index:0; background:rgba(0, 0, 0, .5) } .medshw .item .content .basic-el{ padding:0 !important } .medshw .slide .item{ bottom:15px !important } .dte.media_showcase .el:has(.contained) .medshw .slide .item{ bottom:-10px !important } .medshw .slide .item.featured{ left:0 !important; transform:none !important; width:var(--width) !important; height:var(--height) !important; top:0 !important; bottom:0 !important } .medshw .btn-nav{ top:unset !important; left:20px !important; transform:translate(0, 100%) !important; bottom:calc(var(--thumb_height) + 15px) !important } .dte.media_showcase .el:has(.contained) .medshw .btn-nav{ bottom:calc(var(--thumb_height) - 10px) !important } }