/*Horizontal menu*/
.elementor-widget-the7_horizontal-menu .elementor-widget-container {
  position: relative;
  display: flex;
  flex-flow: column;
}
#the7-body .dt-nav-menu-horizontal {
  list-style: none;
  margin: 0;
}
.elementor-widget-the7_horizontal-menu {
  --submenu-padding-top: 20px;
  --submenu-padding-right: 20px;
  --submenu-padding-bottom: 20px;
  --submenu-padding-left: 20px;
  --submenu-item-color: var(--the7-submenu-color);
  --icon-size: 1em;
  --icon-spacing: 5px;
  --decoration-height: 3px;
  --divider-height: 1em;
  --grid-row-gap: 10px;
  --default-submenu-max-width: calc(100vw - var(--the7-submenu-padding-right) - var(--the7-submenu-padding-left));
}
.elementor-widget-the7_horizontal-menu .horizontal-menu-wrap {
  --first-level-submenu-offset: calc(var(--grid-row-gap, 0px)/2);
}
.dt-nav-menu-horizontal {
  flex-wrap: wrap;
  align-items: stretch;

  & li {
    list-style: none;
  }
}
.dt-nav-menu-horizontal > li {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  list-style: none;

  &:not(.item-divider):not(:first-child) {
    padding-left: calc(var(--grid-row-gap) / 2);
  }
  &:not(.item-divider):not(:last-child) {
    padding-right: calc(var(--grid-row-gap) / 2);
  }
  &:nth-last-child(2) {
    .widget-divider-yes .last-item-border-hide & {
       padding-right: 0;
    }
  }
}

.dt-nav-menu-horizontal.justify-content-evenly {
  justify-content: space-evenly;
}
.dt-nav-menu-horizontal.justify-content-justified > li {
    flex-grow: 1;
    & > a {
      width: 100%;
    }
}
.dt-nav-menu-horizontal.justify-content-fullwidth > li:not(.item-divider) {
  flex: 1 1 0;
}

.dt-nav-menu-horizontal > li.item-divider {
  flex: 0;
  align-self: center;
}

.widget-divider-yes .dt-nav-menu-horizontal .item-divider {
    height: var(--divider-height);
    border-left-width: var(--divider-width, 0px);
    border-right-width: var(--divider-width, 0px);
    border-color: var(--the7-divider-color);
}

.sub-widget-divider-yes .horizontal-sub-nav li:after {
    position: absolute;
    display: block;
    bottom: calc((var(--sub-grid-row-gap, 0px) - var(--divider-sub-width, 0px)) / 2);
    left: 0;
    width: 100%;
    border-top-width: var(--divider-sub-width, 0px);
    border-bottom-width: var(--divider-sub-width, 0px);
    border-color: var(--the7-divider-color);
    content: "";
}
.sub-widget-divider-yes .horizontal-menu-dropdown > ul .horizontal-sub-nav:before {
  position: absolute;
  display: block !important;
  bottom: auto;
  top: calc((var(--sub-grid-row-gap, 0px) - var(--divider-sub-width, 0px)) / 2);
  left: 0;
  width: 100%;
  border-top-width: var(--divider-sub-width, 0px);
  border-bottom-width: var(--divider-sub-width, 0px);
  border-color: var(--the7-divider-color);
  content: "";
}
.dt-nav-menu-horizontal a,
.horizontal-menu-dropdown ul a {
  position: relative;
  display: flex;
  justify-content: center;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
  border: 0 solid;
  .justify-content-fullwidth & {
    width: 100%;
  }
  & .menu-item-text {
    transition: color 0.3s;
  }
}
.dt-nav-menu-horizontal > li > a {
  overflow: hidden;
  height: 100%;
  font-size: var(--the7-text-big-font-size);
  line-height: var(--the7-text-big-line-height);
  color: var(--the7-title-color);
  border-color: var(--the7-divider-color);
  &:after {
    .items-decoration-yes & {
      position: absolute;
      left: 0;
      width: 100%;
      content: "";
      height: 3px;
      background: var(--the7-accent-color);
    }
    .decoration-position-top & {
      top: 0;
    }
    .decoration-position-bottom & {
       top: calc(100% ~'-' var(--decoration-height, 0px));
    }
    .decoration-center & {
      visibility: hidden;
      opacity: 0.85;
      transform: scaleX(0);
      transition: all 0.2s ease-in-out 0s;

    }
    .decoration-left-to-right & {
      width: 0;
      opacity: 0.85;
      transition:      all 300ms cubic-bezier(0.175,0.885,0.32,1.275);
    }
    .decoration-upwards & {
      opacity: 0;
      transition: opacity 0.3s, transform 0.3s;
      transform: translateY(10px);
    }
    .decoration-downwards & {
      opacity: 0;
      transition: height 0.3s, opacity 0.3s, transform 0.3s;
      transform: translateY(-10px);
    }
    .decoration-fade & {
      opacity: 0;
      transition: opacity 0.3s;
    }
  }
  &:hover:after {
    .decoration-center & {
      visibility: inherit;
      transform: scaleX(1);
    }
    .decoration-left-to-right & {
      width:100%;
    }
    .decoration-upwards &,
    .decoration-downwards & {
      opacity: 1;
      transform: translateY(0px);
    }
    .decoration-fade & {
      opacity: 1;
    }
  }

}
.dt-nav-menu-horizontal > li.act > a,
.dt-nav-menu-horizontal > li.parent-clicked > a {
  &:after {
    .decoration-center & {
      visibility: inherit;
      transform: scaleX(1);
    }
    .decoration-left-to-right & {
      width:100%;
    }
    .decoration-upwards &,
    .decoration-downwards & {
      opacity: 1;
      transform: translateY(0px);
    }
    .decoration-fade & {
      opacity: 1;
    }
  }
}
.horizontal-sub-nav {
  position: absolute;
  z-index: 5;
  visibility: hidden;
  opacity: 0;
  --sub-icon-size: 1em;
  --sub-icon-spacing: 5px;
  --submenu-item-padding-right: 0;
  --sub-grid-row-gap: 10px;
  min-width: 250px;
  padding: var(--sub-paddings);

  & li {
    position: relative;
    &:not(:last-child) {
      padding-bottom: var(--sub-grid-row-gap);
    }
    &.has-children > a {
      &:before {
        content: "";
        position: absolute;
        display: block;
        left: calc(-1 * var(--submenu-padding-left, 0px));
        top: 0;
        height: 100%;
        width: calc(var(--submenu-padding-left, 0px) + var(--submenu-padding-right, 0px) + 100% + var(--sub-grid-row-gap));
      }
       & .item-content {
         .dt-sub-menu_align-center & {
            &:before {
              content: "";
              width: ;
            }
          }
      }
    }
  }

  & > li a {
    font-size: var(--the7-text-big-font-size);
    line-height: var(--the7-text-big-line-height);
    color: var(--the7-title-color);
    border-color: var(--the7-divider-color);
    justify-content: var(--h-menu-sub-nav-justify-content);
    align-items: var(--h-menu-sub-nav-align-items);
    text-align: var(--h-menu-sub-nav-text-align);
    & .menu-item-text,
    & .item-content > i {
      order: 1;
    }
  }
  .dt-nav-menu-horizontal > li > & {
      top: 100%;
      &:before {
        content: "";
        display: block;
        left: var(--sub-left, 0px);
        height: calc(100% - var(--sub-menu-gap, 0px));
        width: var(--sub-width, 100%);
        position: absolute;
        bottom: 0;
        background: var(--the7-content-boxes-bg);
      }

  }

  & .horizontal-sub-nav {
    top: calc(-1 * var(--submenu-padding-top, 0px));
    left: calc(var(--submenu-padding-right, 0px) + 100%);
    background: var(--the7-content-boxes-bg);
    padding: var(--submenu-padding-top, 0px) var(--submenu-padding-right, 0px) var(--submenu-padding-bottom, 0px) var(--submenu-padding-left, 0px);
    &.right-overflow {
      left: auto;
      right: calc(var(--submenu-padding-left, 0px) + 100%);
    }

  }
}

.horizontal-sub-nav > li .menu-item-text {
  .sub-icon_align-side.sub-icon_position-left & {
    padding-left: var(--sub-icon-size);
    margin-left: var(--sub-icon-spacing);
  }
  .sub-icon_align-side.sub-icon_position-right & {
    padding-right: var(--sub-icon-size);
    margin-right: var(--sub-icon-spacing);
  }
  .dt-sub-menu_align-center.sub-icon_align-side & {
    padding: 0 var(--sub-icon-size);
    margin: 0 var(--sub-icon-spacing);
  }
}

.dt-nav-menu-horizontal .subtitle-text {
  font-size: 70%;
}

.dt-nav-menu-horizontal li .item-content,
.horizontal-menu-dropdown li .item-content {
  display: flex;
  align-items: center;
}


.content ul.horizontal-sub-nav {
  margin: 0;
}


.dt-nav-menu-horizontal a {
  align-items: inherit;
}


.dt-nav-menu-horizontal__align-center ul li,
.dt-nav-menu-horizontal__align-center ul li a,
.dt-nav-menu-horizontal__align-center ul li a > .item-content {
  justify-content: inherit;
  align-items: inherit;
  text-align: inherit;
}

#page .dt-nav-menu-horizontal__align-right ul li,
#page .dt-nav-menu-horizontal__align-right ul li a {
  justify-content: inherit;
}


.dt-nav-menu-horizontal .submenu-indicator {
  display: none;
}

.dt-nav-menu-horizontal .has-children > a .submenu-indicator {
  position: relative;
  align-self: center;
  display: flex;
  pointer-events: auto;
  line-height: 1.2;
  text-align: center;
}
li > a .submenu-indicator {
  .sub-icon_align-side .horizontal-sub-nav & {
    position: absolute;
    .sub-icon_position-left& {
      left: var(--submenu-item-padding-left);
    }
    .sub-icon_position-right& {
      right: var(--submenu-item-padding-right);
    }
  }
}

.dt-nav-menu-horizontal--main .has-children > a .submenu-indicator i,
.dt-nav-menu-horizontal--main li > a .item-content i {
  width: 1em;
  transition: color 0.3s ease;
}
.dt-nav-menu-horizontal--main li > a .submenu-indicator svg,
.horizontal-menu-dropdown svg {
  width: 1em;
  height: auto;
  fill: var(--the7-title-color);
  transition: fill 0.3s ease;
}


.dt-nav-menu-horizontal .subtitle-text {
  font-size: 70%;
}
.horizontal-menu-toggle {
    --toggle-icon-spacing: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0 solid var(--the7-divider-color);
    font-size: var(--the7-text-big-font-size);
    line-height: var(--the7-text-big-line-height);
    color: var(--the7-title-color);
    outline: 1px solid transparent;
    &:hover {
      color: var(--the7-title-color);
    }


    & svg {
      width: 1em;
      fill: var(--the7-title-color);
      transition: fill 0.3s ease;
    }
    transition: all 0.3s ease;

}
.dt-nav-menu-horizontal--main .submenu-indicator > * {
  display: none;
}
.dt-nav-menu-horizontal .has-children > a .submenu-indicator {
  & > :nth-child(1):not(.submenu-mob-indicator) {
    display: block;
  }
  & > :nth-child(2) {
    display: none;
  }
}
.has-children > a .submenu-mob-indicator {
  text-align: center;
  & > :nth-child(1) {
    display: block;
  }
  & > :nth-child(2) {
    //position: absolute;
    display: none;
  }
}
.horizontal-menu-dropdown .dt-nav-menu-horizontal--main {
  min-width: 250px;
  max-width: var(--submenu-max-width,var(--default-submenu-max-width));
  padding: var(--submenu-padding-top, 20px) var(--submenu-padding-right, 20px) var(--submenu-padding-bottom, 20px) var(--submenu-padding-left, 20px);
  background: var(--the7-content-boxes-bg);
    & .horizontal-sub-nav {
      position: static;
      visibility: visible;
      opacity: 1;
      & .horizontal-sub-nav {
        position: relative;
        top: 0;
        display: none;
        width: 100%;
        left: 0;
        background: none;
        transition: opacity 0.5s;
        padding-top: var(--sub-grid-row-gap);
      }
    }
    & .item-divider {
      display: none;
    }
    & li > a .submenu-indicator {
      position: relative;
      &:after {
        position: absolute;
        content: "";
        min-width: 30px;
        min-height: 30px;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        cursor: pointer;
        transform: translate3d(-50%, -50%, 0px);
      }
    }
}
.horizontal-menu-toggle .menu-toggle-icons {
  position: relative;
  order: 1;
  line-height: 0;
  & > :nth-child(1) {
    opacity: 1;
  }
  & > :nth-child(2) {
    position: absolute;
    opacity: 0;
    top: 50%;
    left: 50%;

    transform: translate3d(-50%, -50%, 0);
  }
}
.horizontal-menu-toggle.elementor-active .menu-toggle-icons {
  & > :nth-child(1) {
    opacity: 0;
  }
  & > :nth-child(2) {
    opacity: 1;
  }
}


.dt-nav-menu-horizontal > li,
.horizontal-menu-wrap {
  position: var(--position,relative);
}

.widget-divider- .dt-nav-menu-horizontal {
  .first.depth-0 > .horizontal-sub-nav {
    left: var(--first-item-offset);

    &.left-overflow {
      right: auto;
      left: var(--first-item-offset);
    }
  }
  .last.depth-0 > .horizontal-sub-nav {
    right: var(--last-item-offset);

    &.right-overflow {
      right: 0;
      left: auto;
    }
  }
}

.widget-divider-yes {
  &.first-item-border-hide .dt-nav-menu-horizontal {
    .first.depth-0 > .horizontal-sub-nav {
      left: var(--first-item-offset);

      &.left-overflow {
        right: auto;
        left: 0;
      }
    }
  }
  &.last-item-border-hide .dt-nav-menu-horizontal {
    .last.depth-0 > .horizontal-sub-nav {
      right: var(--last-item-offset);

      &.right-overflow {
        right: 0;
        left: auto;
      }
    }
  }
}

.dt-nav-menu-horizontal {
  .depth-0 > .horizontal-sub-nav.right-overflow {
    right: var(--first-level-submenu-offset);
    left: auto;
  }

  .depth-0 > .horizontal-sub-nav.left-overflow {
    right: auto;
    left: var(--first-level-submenu-offset);
  }
}

.horizontal-menu-dropdown .dt-nav-menu-horizontal--main {
  width: var(--width,100%);
  left: var(--first-item-offset,0);
  right: var(--last-item-offset,auto);
  margin: var(--sub-margins);
}
.dt-nav-menu-horizontal > li > .horizontal-sub-nav {
  width: var(--width,100%);
  left: var(--left,0);
  right: var(--right,auto);
  max-width: var(--submenu-max-width,var(--default-submenu-max-width));
  margin: var(--sub-margins);
}

.horizontal-menu-dropdown .horizontal-menu-toggle,
.horizontal-menu-dropdown .horizontal-menu-toggle {
  display: inline-flex;
}
.horizontal-menu-dropdown .dt-nav-menu-horizontal--main {
  .mob-menu-popup.horizontal-menu--dropdown-desktop &,
  .mob-menu-popup.horizontal-menu--dropdown-tablet &,
  .mob-menu-popup.horizontal-menu--dropdown-mobile & {
    display: none;
  }
}
.horizontal-menu-dropdown {
    display: inline-flex;
    flex-flow: column;
    .sub-menu-position-center& {
      align-items: center;
    }
}

.horizontal-menu-dropdown .dt-nav-menu-horizontal--main {
  position: absolute;
  z-index: 34;
  top: 100%;
  transition: max-height 0.3s, transform 0.3s;
  transform-origin: top;
  overflow-x: hidden;
  overflow-y: auto;
  & .has-children > a .submenu-indicator,
  & .has-children > a.item-active .submenu-mob-indicator {
    & > :nth-child(1):not(.submenu-mob-indicator) {
      display: none;
    }
    & > :nth-child(2),
    & > :nth-child(1).submenu-mob-indicator {
      display: block;
    }
  }
  .touchevents & {
    -webkit-overflow-scrolling: touch;
  }
  & ul.horizontal-sub-nav {
    position: relative;
    visibility: inherit !important;
    opacity: 1;
    flex-flow: column;
    justify-content: flex-start;

      transform: none;
      min-width: auto;
      width: 100%;
      padding: 0;
    & .item-divider {
      display: none;
    }
    & > li:after {
      .sub-widget-divider-yes& {
          position: absolute;
          display: block;
          bottom: calc((var(--sub-grid-row-gap, 0px)/ 2 - var(--divider-sub-width, 0px)) / 2);
          left: 0;
          width: 100%;
          border-top-width: var(--divider-sub-width, 0px);
          border-bottom-width: var(--divider-sub-width, 0px);
          border-color: var(--the7-divider-color);
          content: "";
      }
    }
    & > li {
      display: flex;
      flex-flow: column;
    }
    & > li > a {
      width: 100%;
      &:before {
        display: none;
      }
    }
    & li .horizontal-sub-nav,
    & li .horizontal-sub-nav .horizontal-sub-nav {
      display: none;
      opacity: 0;
      padding-top: var(--sub-grid-row-gap);
      &:before {
        display: none;
      }
    }
  }
}
.horizontal-menu-dropdown {
  & .dt-nav-menu-horizontal--main li .horizontal-sub-nav,
  & .dt-nav-menu-horizontal--main li .horizontal-sub-nav .horizontal-sub-nav {
    .dt-sub-menu_align-left &,
    .dt-sub-menu_align-right & {
      padding-left: var(--submenu-side-gap, 20px);
    }
  }
  
  & .dt-nav-menu-horizontal--main li .horizontal-sub-nav,
  & .dt-nav-menu-horizontal--main li .horizontal-sub-nav .horizontal-sub-nav {
    .dt-sub-menu_align-center & {
      padding-left: var(--submenu-side-gap, 0px);
    }
  }
}
.horizontal-menu-dropdown .horizontal-menu-toggle:not(.elementor-active) + .dt-nav-menu-horizontal--main {
    transform: scaleY(0); 
    max-height: 0;
  }
 .horizontal-menu-dropdown .horizontal-menu-toggle.elementor-active + .dt-nav-menu-horizontal--main {
  
    transform: scaleY(1);
    max-height: 100vh;
    max-height: calc(var(--vh, 100vh) - var(--sub-menu-bottom-gap, 0px));

  }