/* MAIN HEADER */
#main-header {
    background: var(--headerBgColor);
    padding: 10px 0 0;
  }
  
  .et_non_fixed_nav.et_transparent_nav #main-header {
      top:0px !important;
  }
  
  .admin-bar.et_non_fixed_nav.et_transparent_nav #main-header {
      top:32px !important;
  }
  
  .container.et_menu_container {
      z-index: 99;
      display: flex;
      justify-content: center;
      /* border-bottom: 1px solid silver; */
      padding-bottom: 10px;
      max-width: 1250px;
  }
  
  .et_header_style_left #et-top-navigation {
      padding-top: 38px;
      padding-left: 0 !important;
  }
  
  #logo {
    max-height: 100%;
  }

  .logo_container a {
    display: block;
    position: relative;
    height: 70px;
    margin-top: 10px;
    -webkit-mask: url(../png/lake_design-website-design-and-development-agency-toronto-and-charlottetown.png) no-repeat center;
    mask: url(../png/lake_design-website-design-and-development-agency-toronto-and-charlottetown.png) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    float: left;
  }

  .logo_container a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 120px;
    width: 300%;
    height: 300%;
    background-image: linear-gradient(90deg, #00e39c, #0087ec, #ab39ef, #ff00a7, #ffb100, #fbfafd);
    background-size: 300%;
    animation: gradient-move 8s linear infinite;
    z-index: 1;
    transition: 0.5s all;
    transform: rotate(45deg);
  }

  .logo_container a:hover::after {
    left: -72px;
  }
  
  #et-top-navigation nav>ul>li>a {
      font-family: var(--menuFont);
      font-weight: 500;
      color: white;
      font-size: 16px;
      text-transform: uppercase;
      position: relative;
      opacity: 1 !important;
      padding-bottom: 10px !important;
  }

  #et-top-navigation nav>ul>li>a:after {
    position: absolute;
    content: '';
    bottom: 0px;
    left: 0;
    height: 1px;
    width: 0;
    /* background-image: linear-gradient(150deg, rgb(0, 227, 156), rgb(0, 135, 236) 25%, rgb(171, 57, 239) 50%, rgb(255, 0, 167) 75%, rgb(255, 177, 0)); */
    background: white;
    transition:0.2s all;
}

  #et-top-navigation nav>ul>li>a:hover:after {
   width: 100%;
  }

  #top-menu li.current-menu-ancestor>a, #top-menu li.current-menu-item>a {
    color: white;
  }

  #top-menu li.current-menu-ancestor>a:after, #top-menu li.current-menu-item>a:after {
    width: 100%;
  }
  
  .menu-btn {
      position: absolute;
      right: 0;
      top: 20px;
      color: #fff;
      background: transparent;
      padding: 12px 30px 8px;
      border-radius: 0;
      border: 1px solid;
      font-size: 16px;
      text-transform: uppercase;
      transition: 0.2s all;
  }
  
  .menu-btn:hover {
    /* border-image: linear-gradient(150deg, rgb(0, 227, 156), rgb(0, 135, 236) 25%, rgb(171, 57, 239) 50%, rgb(255, 0, 167) 75%, rgb(255, 177, 0)) 1;
    background-image: linear-gradient(150deg, #00e39c, #0087ec 25%, #ab39ef 50%, #ff00a7 75%, #ffb100 100%, #fbfafd) !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important; */
    background: white;
    color: #212121;
    border-color: white;
  }
  
  /* HOMEPAGE ONLY */
  
  .home #logo {
      filter: invert(1);
  }
  
  .home #et-top-navigation nav>ul>li>a, .home #top-menu li.current-menu-ancestor>a, .home #top-menu li.current-menu-item>a {
    color: #242424;
  }

  .home #et-top-navigation nav>ul>li>a:after {
    background: #242424;
  }
  
  .home .menu-btn {
      color: #242424;
      border-color: #242424;
  }

  .home .menu-btn:hover {
    background: #242424;
    color: white;
    border-color: #242424;
  }