/** Scroll control */
.ex_ctrl--scroll_content {
   width: 100%;
   overflow-x: scroll;
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   scrollbar-width: none;  /* Firefox */
}
.ex_ctrl--scroll_content::-webkit-scrollbar { 
   display: none;  /* Safari and Chrome */
}

   .ex_ctrl--scroll_arrow {
      position: absolute;
      display: none;
      width: 40px;
      top: 0;
      bottom: 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      background: var(--Neutrals-Light-Sand);
   }
   .ex_ctrl--scroll_arrow.ex_ctrl--scroll_visible {
      display: block;
   }
   .ex_ctrl--scroll_arrow div {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
   }
   .ex_ctrl--scroll_arrow > div {
      left: -100%;
      background: linear-gradient(to right, rgba(230,230,215,0), rgba(230,230,215,1));
   }
   .ex_ctrl--scroll_arrow::after {
      position: absolute;
      content: "";
      top: 15px;
      right: 0;
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 16px;
      background-color: var(--Neutrals-Sand);
      background-position: center;
      background-repeat: no-repeat;
      /* 
      <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12">
         <style type="text/css">
               .st0{fill:none;stroke:#282819;stroke-width:1.1;}
               .st1{fill:none;stroke:#282819;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;}
         </style>
         <line class="st0" x1="0" y1="6" x2="11.3" y2="6"/>
         <path class="st1" d="M8.27,9.13L11.34,6L8.27,2.87"/>
      </svg>
      */                       
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23282819;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
   }
   .ex_ctrl--scroll_right {
      right: 0;
   }
   .ex_ctrl--scroll_left {
      left: 0;
      transform: scaleX(-1);
   }
   @media (hover: hover) {
      .ex_ctrl--scroll_arrow:hover::after {
         background-color: var(--Neutrals-White);
      }
   }



/** EX Tabs Controller */
.ex_ctrl--block {
   top: 64px;
   position: sticky;
   width: 100%;
   padding-top: 0;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
   z-index: 1500;
}
   .ex_ctrl--block.ex_ctrl--sticked {
      padding-top: 64px;
   }
   .ex_ctrl--block.ex_ctrl--title_top.ex_ctrl--sticked {
      padding-top: 107px;
   }
.ex_ctrl--block a {
   text-decoration: none;
}

.ex_ctrl--shadow {
   position: fixed;
   top: 117px;
   width: 100%;
   height: 10px;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
   display: none;
   z-index: 1400;
}
   .ex_ctrl--title_top .ex_ctrl--shadow {
      top: 160px;
   }
   .ex_ctrl--sticked .ex_ctrl--shadow {
      display: block;
   }
.ex_ctrl--container {
   background: var(--Neutrals-Light-Sand);
   z-index: 1500;
   overflow-x: visible;
   width: 100%;
   top: 64px;
   height: 64px;
}
   .ex_ctrl--block.ex_ctrl--title_top .ex_ctrl--container {
      height: 107px;
   }
   .ex_ctrl--sticked .ex_ctrl--container {
      position: fixed;
   }
   .ex_ctrl--ribbon_white:not(.ex_ctrl--sticked) .ex_ctrl--container {
      background: var(--Neutrals-White);
   }




/* Tabs controller sections */
.ex_ctrl--wrap {
   display: flex;
   justify-content: flex-start;
   flex-wrap: nowrap;
   position: relative;
}
.ex_ctrl--title_top .ex_ctrl--wrap {
   flex-wrap: wrap;
}

   /* Title section */
   .ex_ctrl--title {
      display: none;
      flex: 0 0 auto;
      padding-top: 17px;
      padding-bottom: 21px;
      padding-right: 64px;
      font-size: 26px;
      font-weight: 300;
      font-style: normal;
      line-height: 26px; 
      letter-spacing: -0.02em;
      white-space: nowrap;
      color: var(--Neutrals-Black);
      visibility: hidden;
   }
   .ex_ctrl--title_ribbon .ex_ctrl--title {
      display: block;
   }
   .ex_ctrl--title_top .ex_ctrl--title {
      padding-bottom: 0;
      width: 100%;
   }


   /* Tabs section, scrolled */
   .ex_ctrl--tabs_container {
      display: none;
      flex: 1 1 auto;
      position: relative;
      width: 20%;
      visibility: hidden;
      padding-left: 40px;
      padding-right: 40px;
   }
   .ex_ctrl--tabs_ribbon .ex_ctrl--tabs_container {
      display: block;
   }
   .ex_ctrl--tabs_ribbon:not(.ex_ctrl--title_ribbon) .ex_ctrl--tabs_container {
      padding-left: 0;
   }
    
   .ex_ctrl--tabs {
      display: flex;
      justify-content: flex-start;
      flex-wrap: nowrap;
   }
      .ex_ctrl--tab_item {
         display: block;
         flex: 0 0 auto;
         padding: 20px;
         font-size: 12px;
         font-style: normal;
         font-weight: 700;
         line-height: 24px;
         letter-spacing: 0.08em;
         text-decoration: none;
         white-space: nowrap;
         text-transform: uppercase; 
         transition: color 0.2s ease;
      }
      .ex_ctrl--tabs_ribbon:not(.ex_ctrl--title_ribbon) .ex_ctrl--tab_item.ex_ctrl--tab_first {
         padding-left: 2px;
      }
      .ex_ctrl--block .ex_ctrl--tab_item {
            color: var(--Neutrals-Light-Grey);
      }
         .ex_ctrl--tab_item.ex_ctrl--tab_active {
               color: var(--Neutrals-Black);
         }
         .ex_ctrl--tab_item.ex_ctrl--link_cta {
               display: none;
               padding-top: 8px;
               padding-bottom: 8px;
         }
         .ex_ctrl--cta_tabs.ex_ctrl--cta_visible .ex_ctrl--link_cta,
         .ex_ctrl--cta_burger.ex_ctrl--cta_visible .ex_ctrl--link_cta {
               display: block;
         }
         .ex_ctrl--cta_burger .ex_ctrl--link_cta .button--send_request {
               margin: 0;
         }
         .ex_ctrl--cta_burger .ex_ctrl--tab_item.ex_ctrl--link_cta {
               padding: 15px 12px 13px;
               text-align: center;
         }
        
   @media (hover: hover) {
      .ex_ctrl--tab_item:hover {
         color: var(--Primary-Light-Green);
      }
      .ex_ctrl--tab_item.ex_ctrl--tab_active:hover {
         color: var(--Neutrals-Black);
      }
   }



   /* Burger section */
   .ex_ctrl--burger_container {
      display: none;
      flex: 1 1 auto;
      position: relative;
      width: 10%;
      cursor: pointer;
   }
      .ex_ctrl--burger_mode .ex_ctrl--burger_container {
         display: flex;
         justify-content: flex-end;
         flex-wrap: nowrap;
      }

      .ex_ctrl--burger_target {
         flex: 1 1 auto;
         width: 100%;
      }
         .ex_ctrl--burger_target {
            padding: 20px 0 20px 0;
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            line-height: 24px;
            letter-spacing: 0.08em;
            white-space: nowrap;
            text-transform: uppercase; 
            color: var(--Neutrals-Black);
         }
         .ex_ctrl--title_ribbon .ex_ctrl--burger_target {
            text-align: right;
         }
         .ex_ctrl--title_top .ex_ctrl--burger_target {
            text-align: left;
         }                        

      .ex_ctrl--burger_icon {
         flex: 0 0 auto;
         width: 68px;
         padding: 16px 0 16px 32px;
      }
         .ex_ctrl--burger_icon span {
            display: block;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 16px;
            background-color: var(--Neutrals-White);
            background-position: center;
            background-repeat: no-repeat;
            /* 
            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20">
               <style type="text/css">
                  .st0{fill:#282819;}
               </style>
               <circle class="st0" cx="3.266" cy="10" r="2"/>
               <circle class="st0" cx="10.223" cy="10" r="2"/>
               <circle class="st0" cx="16.734" cy="10" r="2"/>
            </svg>
            */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='20px' height='20px' viewBox='0 0 20 20'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23282819;%7D %3C/style%3E%3Ccircle class='st0' cx='3.266' cy='10' r='2'/%3E%3Ccircle class='st0' cx='10.223' cy='10' r='2'/%3E%3Ccircle class='st0' cx='16.734' cy='10' r='2'/%3E%3C/svg%3E%0A");
            transition: transform .3s ease-in-out 0s;
         }
         .ex_ctrl--ribbon_white:not(.ex_ctrl--sticked) .ex_ctrl--burger_icon span {
            background-color: var(--Neutrals-Light-Sand);
         }
      
         @media (hover: hover) {
            .ex_ctrl--burger_container:hover .ex_ctrl--burger_icon span {
               background-color: var(--Neutrals-Sand);
            }
         }
                  
         .ex_ctrl--burger_pointer {
            display: none;
            position: absolute;
            height: 15px;
            width: 15px;
            top: -13px;
            right: 32px;
            background-position: center;
            background-repeat: no-repeat;
            /* 
            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M15,0L0,15h15V0z" fill="#F7F6F2"/>
            </svg>  
            */
            background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15,0L0,15h15V0z' fill='%23F7F6F2'/%3E%3C/svg%3E");
         }
            .ex_ctrl--burger_mode .ex_ctrl--burger_pointer {
               display: block;
            }
            @media (max-width: 450px) {
               .ex_ctrl--burger_pointer {
                  right: 24px;
               }
            }
         .ex_ctrl--burger_mode .ex_ctrl--tabs_container {
            display: none;
            position: absolute;
            width: auto;
            right: -10px;
            top: 64px;
            background: var(--Neutrals-White-Sand);
            border-radius: 16px;
            box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
         }
         .ex_ctrl--burger_mode.ex_ctrl--burger_open .ex_ctrl--tabs_container {
            display: block;
            padding-left: 0;
            padding-right: 0;
         }
         .ex_ctrl--title_top.ex_ctrl--burger_mode .ex_ctrl--tabs_container {
            top: 107px;
         }
         
            .ex_ctrl--burger_mode .ex_ctrl--tabs_container .ex_ctrl--scroll_arrow {
               display: none;
            }
            .ex_ctrl--burger_mode .ex_ctrl--tabs {
               display: block;
            }
            .ex_ctrl--burger_mode .ex_ctrl--tab_item {
               padding: 15px 48px 13px;
            }
            .ex_ctrl--burger_mode .ex_ctrl--tab_item:not(:first-child) {
               border-top: 1px solid var(--Neutrals-Medium-Sand);
            }
   
   @media (max-width: 450px) {
      .ex_ctrl--burger_mode .ex_ctrl--tabs_container {
         right: -3px;
      }
   }
    
   /* CTA section */
   .ex_ctrl--cta_container {
      display: none;
      flex: 0 0 auto;
      padding: 8px 0 8px 64px;
      visibility: hidden;
   }
   .ex_ctrl--cta_ribbon.ex_ctrl--cta_visible .ex_ctrl--cta_container {
      display: block;
   }







/** EX Tabs content */
div.ex_ctrl--item_container {
	position: relative;
   display: none;
	padding-top: 80px;
   z-index: 10;
   font-weight: 400;
}

    .ex_ctrl--item_mask {
        display: none;
    }
      .ex_ctrl--item_masked .ex_ctrl--item_mask {
         position: absolute;
         top: 0;
         bottom: 0;
         width: 100%;
         background-color: var(--Neutrals-White);
         opacity: 0.6;
         z-index: 20;
         display: block;
      }

      .ex_ctrl--item_container.ex_ctrl--item_active {
         display: block;
      }

@media (max-width: 1024px) {
    div.ex_ctrl--item_container {
        padding-top: 60px;
    }
}
@media (max-width: 450px) {
    div.ex_ctrl--item_container {
        padding-top: 50px;
    }
}