.story {
  outline-offset: -3px;
  min-height: 100vh;
  width: 100%;
  position: relative;
  margin: 0 auto;
}

.story_loader {
  position: absolute;
  z-index: 999;
  width: 100%;
  height: 100vh;
  background-color: black;
  display: grid;
  align-content: center;
  top: 0;
  left: 0;
  right: 0;
  transition: 0.5s ease;
  opacity: 1;
}

.hide_story_loader {
  opacity: 0;
  pointer-events: none;
}

.story_loader h2 {
  text-align: center;
  color: white;
}

.story_element {
  position: sticky;
  top: 0;
  overflow: hidden;
}

.story_element_text_clip_container {
  display: grid;
  align-content: center;
}

.story_atom_text_clip {
  height: 100vh;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  background-repeat: no-repeat !important;
  -webkit-background-repeat: no-repeat !important;
  background-size: cover !important;
  -webkit-background-size: cover !important;
  color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.stb_tab_active_indicator {
  height: 3px;
  transition: 0.5s ease;
  margin-bottom: -2px;
}

.stb_tab_active_indicator_rail {
  height: 1px;
  width: 100%;
}

.stb_carousel_slider{
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  gap: 1rem;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-snap-stop: always;
}

.stb_carousel_slider::-webkit-scrollbar {
  display: none;
}

.stb_carousel_slider {
  -ms-overflow-style: none; 
  scrollbar-width: none;  
}

.stb_carousel_slide{
  flex-shrink: 0;
  position: relative;
  scroll-snap-align: center;
}

.stb_carousel_slide .gridbox-bg-img{
  height: auto;
  max-height: 100vh;
  position: static;
}

.stb_carousel_arrow_left, .stb_carousel_arrow_right{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.stb_carousel_arrow_right{
  transform: translatey(-50%) rotate(180deg); 
}
.stb_carousel_arrow_left{
  left: 1rem;
}
.stb_carousel_arrow_right{
  right: 1rem;
}

.stb_infograph_pillar_value{
  margin-bottom: 4px;
}
.stb_infograph_pillar_label{
  position: absolute; 
  top: calc(100% + .5rem);
  left: 50%; 
  transform: translateX(-50%);
  width: 100%;
}
.stb_infograph_x_axis{
  width: 1px;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
.stb_infograph_y_axis{
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px
}

.stb_level_marker{
  border-bottom: 1px dashed;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  z-index: -1;
}

.stb_level_marker_label{
  position: absolute;
  top: 50%;
  right: calc(100% + 0.5rem);
  transform: translateY(-50%);
}

.stb_x_axis_arrow_head{
  position: absolute; 
  right: -2px;
  transform: rotate(90deg);
  top: -2px
}
.stb_y_axis_arrow_head{
  position: absolute; 
  right: -3px;
  top: -0px
}

.stb_legend_box{
  width: 20px;
  height: 20px;
  border-radius: 2px;
}

.stb_infograph_img{
  width: 54px;
  height: 54px;
  border: 2px solid;
  border-radius: 999px;
  overflow:hidden;
  object-fit: cover; 
}

.stb_infograph_pillar_inner{
  transition: 1s ease-in; 
  height: 0px;
}

.stb_video_card{
  border-radius: 4px;
  overflow:hidden;
}

.stb_video_card_thumbnail{
  width: 100%;
  object-fit: cover;
  height: 250px;
}

.stb_video_card_play_btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
}

.stb_recommendation_meter{
  width: 226px;
  height: 1.25rem;
  border: 2px solid;
}

.stb_meter_mark{
  width: 1px;
  position: absolute;
  top: 0;
  height: 1.25rem;
}
.stb_meter_mark_20{left: 20%}
.stb_meter_mark_40{left: 40%}
.stb_meter_mark_60{left: 60%}
.stb_meter_mark_80{left: 80%}

.stb_recommendation_progress_bar{
  height: 1.25rem;
  width: 95%;
}

.stb_list{
  list-style-type: none;
  padding-inline-start: 1.5rem;;
}
.stb_bullet_point_check{
  padding-left: .75rem;
  list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEwIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDQuNUw0IDcuNUw5IDEuNSIgc3Ryb2tlPSIjNzdFMjM0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
}
.stb_bullet_point_check li{
  padding-left: .75rem;
  list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEwIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDQuNUw0IDcuNUw5IDEuNSIgc3Ryb2tlPSIjNzdFMjM0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
}


.stb_accessory_card img{
  max-height: 250px;
}
.stb_accessory_card_additional_views_container{
  margin-bottom: -3rem;
}
.stb_accessory_card_additional_views_box{
  border-radius: 8px;
}
.stb_accessory_card_additional_views_box img{
  aspect-ratio: 1/1;
}

.stb_form_select{
  width:fit-content;
  border: 1px solid;
  padding: 1rem;
  border-radius: 999px;
  padding-right: 3rem;
  min-width: 250px;
  color:inherit;
}
.stb_form_select_wrapper{
  width: fit-content;
  position: relative;
}
.stb_select_arrow{
  position: absolute;
  top: 43%;
  right: 1rem;
}

.stb_stars_ratings_wrapper{
  width: 226px;
  height: 42px;
}

.stb_stars_ratings_clip{
  clip-path: url(#stb_stars_clip);
  height: 42px;
  width: 100%;
  background: transparent;
  overflow: hidden;
}
.stb_ratings_progress{
  width: 50%;
  height: 100%;
}

.stb_stars_outline{
  position: absolute; 
  top: 0;
  left: 0,
}

/* TEMPORARY CAROUSEL STYLINGS */
.stb_tab_nav_item{
  opacity: 0.5;
  transition: .2s ease;
}

.stb_tab_nav_item .stb_tab_nav_item_simple{
  font-family: 'Open Sans Semibold', sans-serif !important; 
}
.stb_tab_nav_item.active .stb_tab_nav_item_simple{
  font-family: 'Open Sans Bold', sans-serif !important; 
}

/* .stb_tab_nav_item .stb_tab_nav_item_heading{
  color: var(--rsf-2022-color-black);
} */

.stb_tab_nav_item.active{
  opacity: 1;
  z-index: 99;
}

.tab-contant-box.active{
  z-index: 99;
}



*[data-stb-interaction-identifier="tab-content-box"],
*[data-stb-interaction-identifier="sub-tab-content-box"]
{
  display: none;
}

*[data-stb-interaction-identifier="tab-content-box"].active,
*[data-stb-interaction-identifier="sub-tab-content-box"].active{
  display: block;
}

.stb_carousel_arrow_inactive{
  pointer-events: none;
  opacity: 0.1
}
.stb_list{
  list-style-type: inherit;
}

.content-wrapper.overflow-scroll::-webkit-scrollbar {
  display: none;
  }
.content-wrapper.overflow-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none; 
}


.stb_modal{
  opacity: 0;
  pointer-events: none;
  opacity: 0;

  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,.7);
  transition: .3s ease;  
  display: grid;
  place-items: center;
  box-sizing: border-box;

}

.stb_modal_center{
  place-items:center;
}
.stb_modal_top{
  place-items: start;
}
.stb_modal_bottom{
  place-items: end;
}
.stb_modal_bottom>*{
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
.stb_modal_active{
  pointer-events: all;
  opacity: 1; 
  pointer-events: all;
}
.stb_modal_close_button{
  position: absolute; 
  top: 1rem;
  right: 1rem;
  cursor: pointer;
}

.stb_modal>*{
  transition: .3s ease;
  transition-delay: .1s;
  transform: translateY(100px);
  opacity: 0;
}

.stb_modal_active>*{
  transform: translateY(0);
  opacity: 1;
}

.hidden_content{
  overflow:hidden;
  height: 0px;
}

.hidden_content.stb_content_active{
  height: auto;
}




  /* CONTENT TO BE IMPLEMENTED: */

  /* .product-grid, .article-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
  }
  
  .product_card{
    border-radius: 4px;
  }
  
  .product_card_img{
    width: 100%;
    height: 160px;
    object-fit: contain;
  }
  
  .product_card_info_icon{
    position: absolute;
    top: .5rem;
    right: .5rem;
  }
  
  .product_card_info_box{
    padding: 0.75rem .75rem;
    border-radius: 4px;
    width: fit-content;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .product_card_rating_container{
    gap: .25rem;
  }
  
  .product_card_price_reduced{
    text-decoration: line-through;
  }
  
  @media(max-width: 395px){
    .product-grid, .article-grid{
      grid-template-columns: repeat(1, 1fr);
    }
  }

  .small_article_card{
    border-radius: 4px;
    overflow:hidden;
  }
  
  .small-article-img{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    object-fit: cover;
  }
  
  .small-article-img-wrapper{
    align-self: stretch;
    overflow: hidden;
  }
  
  .big-article-card{
    border-radius: 4px;
    overflow:hidden;
  }
  
  .big-article-card-img{
    object-fit: cover;
    width: 100%;
    height: 150px;
  }
  
  .article-card-info-box{
    border-radius: 4px;
    padding: .5rem;
    position: absolute;
    top: 0;
    left: 0;
  }

  .top-article-minimal, .article-minimal{
    margin-bottom: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid
  }

  
  
  .top-article-minimal-img{
    max-height: 400px;
    width: 100%;
    object-fit:cover;
    border-radius: 4px;
    margin-bottom: 1rem;
  } 

  @media(max-width: 400px){
  .top-article-minimal-img{
    max-width: 100%;
    aspect-ratio: 1/1
  }
}
 
*/

.dfn_auto_tabs_progress_bar div{
  height: 2px;
  border-radius: 2px;
}

.dfn_auto_tabs_progress_bar_fill{
  clip-path: inset(0% 100% 0% 0%)
}

@keyframes progressBarFill {
  0% {clip-path: inset(0% 100% 0% 0%);}
  100% {clip-path: inset(0% 0% 0% 0%);}
}

@keyframes imageProgressFill{
  0% {clip-path: inset(0% 100% 0% 0%);}
  100% {clip-path: inset(0% 0% 0% 0%);}
}

.stb_tab_nav_item.active .dfn_auto_tabs_progress_bar_fill{
  animation-name: progressBarFill;
  animation-duration: 4s;
  animation-timing-function: linear;
}


.story_atom[data-stb-interaction-type="tabs-auto"] .tab-contant-box{
  display: block;
  opacity: 0;
  pointer-events: none;
  /* transform: translateX(-200px); */
  transition: .4s ease;
}

.story_atom[data-stb-interaction-type="tabs-auto"] .tab-contant-box.active{
  opacity: 1;
  pointer-events: all;
  transform: translateX(0px);
}

.story_atom[data-stb-interaction-type="tabs-auto"] .tab-contant-box.leave-right{
  transform: translateX(25vw);
}
.story_atom[data-stb-interaction-type="tabs-auto"] .tab-contant-box.leave-left{
  transform: translateX(-25vw);
}

.story_atom[data-stb-interaction-type="tabs-auto"] .stb_tab_nav_item>div{
  position: relative;
}
.story_atom[data-stb-interaction-type="tabs-auto"] .stb_tab_nav_item.active>.dfn_auto_tabs_img_overlay{
  box-shadow: 0 0 0 3px var(--rsf-2022-color-1);
}

.story_atom[data-stb-interaction-type="tabs-auto"] .stb_tab_nav_item>.dfn_auto_tabs_img_overlay::after{
  content: '';
  display:block;
  position: absolute; 
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  opacity: 0.3;
  z-index: 2;
}
.story_atom[data-stb-interaction-type="tabs-auto"] .stb_tab_nav_item.active>.dfn_auto_tabs_img_overlay::after{
  animation-name: imageProgressFill;
  animation-duration: 4s;
  animation-timing-function: linear;
}

.stb_heading_label{
  padding: .2rem .4rem;
  border-radius: 4px;
}

.dfn_auto_tabs_img_overlay.dfn_auto_tabs_stop_animation::after{
  display: none !important;
}

.stb_table_icon{
  width: fit-content;
}
.stb_table_icon>span{
  position: absolute; 
  top: 0;
  left: -10px;
}

.anchor{
  display: block;
  position: relative;
  top: -200px;
  visibility: hidden;
}

@media(max-width: 1234px){
  .anchor{
    top: -140px;
  }
}

.stb_tab_nav_item_pill{
  padding: 0.75rem 1rem; 
  border-radius: 999px;
}

.stb_tab_nav_item.active .stb_tab_nav_item_pill{
  background-color: var(--rsf-2022-color-7);
  color: var(--rsf-2022-color-white);
  box-shadow: 2px 2px 8px 0 rgba(123, 32, 255, 0.25);
}

.stb_tab_nav_item_minitab{
  width: 24px;
  height: 3px;
  border-radius: 999px;
}
.stb_tab_nav_item.active .stb_tab_nav_item_minitab{
  height: 5px;
  margin-top: -1px;
}

.stb_graph_animation_carousel_morph_atom_mobile{
  width: calc(100% - 4rem);
  margin: 0;
}

.stb_hide{
  display: none;
}

.stb_sccessory_card_btn{
  position: absolute; 
  top: .25rem;
  right: .25rem;
}

.stb_accessory_card{
  border-radius: 4px;
}

.stb_accessory_card_divider{
  border-top: 1px solid var(--rsf-2022-color-12);
}

.stb_accessory_card img{
  height: 210px;
}

@media(max-width: 640px){
  .stb_accessory_card img{
    height: 150px;
  }
}


.tab_content_box_wrapper_animated{
  display: grid;
}

.tab_content_box_wrapper_animated > .tab-contant-box {
  display: block; 
  grid-row: 1;
  grid-column: 1;
}

.tab_content_box_wrapper_animated.tab_content_box_wrapper_animation_fade_in > .tab-contant-box{
  opacity: 0;
  transition: .3s ease;
}
.tab_content_box_wrapper_animated.tab_content_box_wrapper_animation_fade_in > .tab-contant-box.active{
  opacity: 1;
}

.stb_tab_nav_item_rail_wrapper{
  position: absolute; 
  left: 0;
  bottom: 0;
  min-width: 700px;
  width: 100%;

}

.story_atom_tab_wrapper{
  overflow-x:scroll;
  max-width: calc(100vw - 2rem);

}

/* Hide scrollbar for Chrome, Safari and Opera */
.story_atom_tab_wrapper::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.story_atom_tab_wrapper {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}


.phone-img{
  transform: translateX(5%);
}
@media(max-width: 500px){
  .phone-img{
    object-fit: cover; 
    transform: scale(1.8) translateX(18%);
  }
}


/* !!! EXPERIMENTAL PARALLAX STYLES !!! */

/* .stb_parallax_container{
  transform-style: preserve-3d;
  position: relative; 
  height: 100vh;
}

.stb_parallax_container img, 
.stb_parallax_container video{
  width:100vw;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
  background-size: 100%;
  height: 100vh;
  z-index: -1;
}

.preserve-3d{
  transform-style: preserve-3d;
}

body{
    perspective: 4px;
    height: 100vh; 
    overflow:scroll;
} */
.rsf-popup-close-btn,
.stb_video_card_popup_close_btn{
  position: absolute; 
  top: 1rem;
  right: 1rem;
  width: 24px;
  height: 24px;
}
.rsf-popup-close-btn,
.stb_video_card_popup_close_btn > svg{
  width: 24px;
  height: 24px;
}

.stb_video_card_popup_player,
.stb_modal_video_player
{
  width: 100%;
  height: 100%;
  position:absolute; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


/* STYLES FOR SMALL FEATURES BANNER */

.dfn_small_features_banner_nav_items{
  max-width: none !important;
}

.dfn_small_features_banner_nav_items .gridbox-element > .flex{
  justify-content: center;
}

.dfn_small_features_banner_nav_items .stb_tab_nav_item{
  max-width: 234px;
}

.dfn_small_features_banner_nav_items .content-wrapper{
  height: 113px; 
 }

 .dfn_small_features_banner .tab-contant-box .content-wrapper{
  height: 510px;
 }

@media(max-width:1024px){
  .dfn_small_features_banner_nav_items .content-wrapper{
   height: 75px; 
  }
  .dfn_small_features_banner .tab-contant-box .content-wrapper{
    height: 430px;
   }
}

@media(max-width:800px){
  .dfn_small_features_banner_nav_items .stb_tab_nav_item{
    max-width: 144px;
    min-width: 144px !important;
  }
}

.dfn-feature-banner-nav-container .dfn-feature-banner-advance-left-btn{
  position: absolute; 
  top: 40%; 
  left: -3rem; 
  transform: translateY(-50%) rotate(180deg); 
  cursor: pointer; 
  display: none;
  pointer-events: none;
}
.dfn-feature-banner-nav-container .dfn-feature-banner-advance-right-btn{
  position: absolute; 
  top: 40%; 
  right: -3rem; 
  transform: translateY(-50%);
  cursor: pointer; 
  display: none;
  pointer-events: none;
}

.dfn-feature-banner-advance-left-btn.show, .dfn-feature-banner-advance-right-btn.show{
  display:block;
  pointer-events:all;
}

.dfn-feature-banner-advance-left-btn.inactive, .dfn-feature-banner-advance-right-btn.inactive{
  opacity: 0.5;
  pointer-events: none;
}

.dfn-feature-banner-nav-container .story_atom_tab_wrapper{
  overflow-x:hidden
}

@media(max-width: 1360px){
  .dfn-feature-banner-advance-right-btn, .dfn-feature-banner-advance-left-btn{
    pointer-events: none !important;
    display: none !important;
  }
  .dfn-feature-banner-nav-container .story_atom_tab_wrapper{
    overflow-x:scroll
  }
}

.dfn_hero_slider_mobile .wp-block-dfnstbm-tab-nav-wrapper{
  max-width: none;
}