/*=================================
//                                 
//    ###     ####   ###    ###  
//   ## ##   #   ##  ## #  # ##  
//  ##   ##    ###   ##  ##  ##  
//  #######  #   ##  ##      ##  
//  ##   ##   ####   ##      ##  
//                                 
//=================================*/

/* ------------------ Top Menu ------------------ */

nav.m-top ul { 
  list-style: none; 
  position: relative;
  justify-content: space-around;
  background-color: var(--navBkg);
  flex-wrap: nowrap;
} 

nav.m-top ul li {
  display: flex;
  position: initial;
  flex-direction: column; 
}


.dropdown-toggle::after {
  color: var(--menu1);
}

nav.m-top a {
  display: block;
  font-weight: normal;
  font-size: 1rem;
  text-decoration: none;
  padding: 1.225rem;
  font-weight: 700;
}

nav.m-top li[data-level="1"] > a {
  color: var(--menu1); 
  position: relative;
}

nav.m-top li:not([data-level="1"]) > a {
  color: var(--menu2);
}

nav.m-top li[data-level="1"] a:hover {
  color: var(--menu1hov);
  background: var(--menuBkg1Hover);
}

nav.m-top li a:hover:focus {
  outline: none;
}

nav.m-top li a:hover::after {
  color: var(--menu1hov);
}

nav.m-top li:not([data-level="1"]) a:hover {
  color: var(--menu2hov);
  background: var(--menuBkg2Hover);
}

/* nav.m-top li:not([data-level="1"]):last-of-type a:hover {
  background: var(--bkg2);
  color: var(--menu2hov); 
} */
  
nav.m-top li[data-level="1"] ul {
  background-color: var(--menuBkg2);
  display: none;
  padding: 0;
  position: absolute;
  /* top: 2.5rem; */
  width: 100%;
  z-index: 1; 
  box-shadow: 0 1rem 3rem var(--opacity1);
}

nav.m-top li[data-level="1"].active ul {
  flex-direction: column;
  width: 14rem;
  display: flex; 
  top: 4rem;
}


@media (max-width: 992px) {
/* @media (max-width: 768px) { */
  nav.m-top ul {
    text-align: left;
    margin: 0 auto;
    box-shadow: none;
    flex-wrap: wrap;
  }
  nav.m-top a {
    /* font-size: 1.125rem; */
  }
  nav.m-top li[data-level="1"] a {
    padding: 1rem;
  }

  nav.m-top li[data-level="1"]:hover:after,
  nav.m-top li[data-level="1"].active:hover:after {
    content: '';
    border-style: none;
    margin: 0;
  }

  nav.m-top li[data-level="1"] ul {
    box-shadow: none;
  }

  nav.m-top li[data-level="1"] a:hover,
  nav.m-top li[data-level="1"].active a {
    background: transparent;
    color: var(--menuBkg1Hover); 
  }

  nav.m-top li[data-level="2"] a:hover {
    color: var(--color1); 
  }

  nav.m-top { 
    background: var(--menuBkg1);
    height: 100vh;
    margin: 0 0 1rem; 
    overflow-y: scroll; 
    padding: 5rem 3rem 3rem; 
    position: absolute;
  }
  nav.m-top li[data-level="1"] {
    margin-bottom:.225rem;
    padding-bottom:.225rem;
    width: 100%; 
  }
  nav.m-top ul li { 
    flex-wrap: wrap;
    flex-direction: column; 
  }
  nav.m-top a {
    position: relative;
    padding: .225rem; 
  }
  nav.m-top a.active,
  nav.m-top a:hover { 
    background: transparent; 
  }
  nav.m-top li[data-level="1"] ul { 
    /* margin-left: 1.5rem; */
    background: transparent;
    display: block; 
    flex-direction: column;
    position: initial; 
    margin-bottom: .5rem;
  }
  nav.m-top li:not([data-level="1"]) a {
    color: var(--menu1);
    font-size: 1rem;
    background-color: var(--menuBkg3);
    padding: .5rem 2rem;
    margin-bottom: .225rem;
  }
  nav.m-top li:not([data-level="1"]) a:hover {
    /* margin-left: 1.5rem; */
  }

}