header.header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  padding: 30px 0;
  z-index: 9999;
  background-color: var(--primary-background-color);
  @include xs {
    padding: 20px 0;
  }
  .header__navigation-env {
    @media (max-width: 1200px) {
      position: fixed;
      top: 0;
      left: -100%;
      width: 50%;
      background-color: var(--primary-background-color);
      overflow-y: scroll;
      height: 100%;
      z-index: -1;
      visibility: hidden;
      transition: $transition;
      box-shadow: 0 0 8px 1px var(--primary-background-color);
      @media (max-width: 576px) {
        width: 80%;
      }
      .header__navigation-bar {
        padding-top: 55px;
        padding-bottom: 55px;
        height: 100%;
        transition: $transition;
      }
      .header__navigation-bar::-webkit-scrollbar {
        width: 0px;
        background: transparent;
      }
      .header__navigation-bar::-webkit-scrollbar-thumb {
        background: transparent;
      }
    }
  }
  .header__container {
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1600px;
    @include lg {
      max-width: auto;
      width: 100%;
    }
  }
  #site-description {
    display: flex;
    align-items: center;
    color: var(--text-color);
  }
  .logo-and-phone-number {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .menu-right-side{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      a {
        color: var(--text-color);
        text-decoration: none;
        img {
          max-width: 80px;
          @include xs {
            max-width: 60px;
          }
        }
      }
  }
  .menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    @include lg {
      padding: 30px;
    }
    @include xs {
      padding: 20px;
    }
    div {
      &:first-child {
        width: 100%;
      }
    }
    ul {
      display: flex;
      align-items: center;
      margin-left: -20px;
      margin-right: -20px;
      @include lg {
        align-items: flex-start;
        flex-direction: column;
        margin: 0;
      }
      li.menu-item:hover>.sub-menu {
        left: auto;
        opacity: 1;
      }    
      li { 
        position: relative;
        padding: 5px 20px;
        @include lg {
          padding: 5px 0;
          width: 100%;
        }
        a {
          color: var(--menu-text-color);
          text-decoration: none;
        }
        .sub-menu {
          position: absolute;
          display: flex;
          top: 100%;
          left: -9999px;
          z-index: 999;
          min-width: 260px;
          text-align: left;
          transition: opacity $transition;
          border: none;
          padding: 0;
          opacity: 0;
          background: var(--primary-background-color);
          @media (max-width: 1200px) {
            position: static;
            display: none;
            border: 0;
            border-radius: 0;
            padding-top: 0;
            padding-bottom: 0;
            padding-left: 0;
            opacity: 1;
            min-width: auto;
            transform: none;
            text-align: left;
            background: transparent;
            &:before {
              content: none;
            }
            a {
              color: var(--menu-text-color);
              background-color: transparent;
              font-size: 14px;
              &:focus,
              &:hover {
                border: none;
                outline: none;
              }
            }
          }
          li {
            border-bottom: none;
            width: 100%;
            @include lg {
              border-bottom: none;
            }
          }
        }
        &:hover{
          .sub-menu{ 
            display: block;
            @include lg {
              display: none;
            }
          }
        }
      }
    }
  }
}

.menu-item-has-children > .mobile-menu-open {
	position: absolute;
	top: 0;
	right: 0;
	transition: $transition;
	pointer-events: none;
	@include lg {
		right: 10px;
		width: 100%;
		cursor: pointer;
		pointer-events: initial;
	}
}
.menu-item-has-children > .mobile-menu-open::after{
	content: '❯';
	font-size: 12px;
	transform: rotate(90deg);
	display: inline-block;
	position: absolute;
	top: 12px;
	right: 0px;
	transition: all .2s;
  color: var(--menu-text-color);
  @include lg {
    top: 0;
    font-size: 16px;
  }
}
.menu-item-has-children:hover > .mobile-menu-open::after{
	transform: rotate(270deg);
	color: var(--menu-text-color);
	@include lg {
		transform: rotate(90deg);
	}
}


.menu-item-has-children.open > .mobile-menu-open::after{
  @include lg {
    transform: rotate(270deg);
  }
}

.site-description__text {
  @include sm {
    display: none
  }
}


body header.header .show-nav {
	left: 0;
	transform: translateX(0);
	visibility: visible;
	z-index: 9999;
}

.button-hamburger {
  display: none;
  margin-left: 15px;
  padding: 0;
  background: transparent;
  &:focus,
  &:hover {
    border: none;
    outline: none;
    background: transparent;
  }
  @include lg {
    display: block;
  }
  svg {
    width: 25px;
    height: 25px;
    fill: var(--text-color);
  }
	.menu-svg-closed {
		display: none;
	}
}

@media screen and (max-width:992px) {
  .admin-bar .header,
  .admin-bar .header__navigation-env {
    top: 32px;
  }
}

@media screen and (max-width:782px) {
  .admin-bar .header,
  .admin-bar .header__navigation-env {
    top: 46px;
  }
}