/* MAIN SETTINGS */
:root {
  --en-mobnav-left-padding-top-level: 15px;
  --en-mobnav-left-padding-following-levels: 35px;

  /* SCHOOL COLORS TO BE USED IN THE HEADER AND FOOTER - (ALL AREAS EXCEPT THE MENU) */
  --en-mobnav-color-1: #89191c;
  --en-mobnav-color-2: #fff;

  /* MENU COLORS */
  --en-mobnav-menu-bgcolor: #89191c;
  --en-mobnav-menu-color: #fff;

  /* MENU HOVER COLORS */
  --en-mobnav-menu-hover-bgcolor: #fff;
  --en-mobnav-menu-hover-color: #89191c;

}

/* HAMBURGER BUTTON AND MOBILE MENU CLOSE BUTTON */
button.en-mobnav-button {
  background: var(--en-mobnav-color-1);
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: clamp(28px, 3.63636363636vw, 40px);
  font-family: Verdana;
  margin-right: 0.3em;
  padding: 0 0.28em 0.1em 0.28em;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

button.en-mobnav-button:hover {
  background: #d8ad3a;
  color: #fff;
}

/* HAMBURGER BUTTON */
button.en-nav-menu-hamburger-button {
  margin: clamp(5px, 2.6vw, 20px);
  background: var(--en-mobnav-color-1);
  color: var(--en-mobnav-color-2);
  font-size: max(24px, 3.6363vw);
}

/* HOVER ON HAMBURGER BUTTON */
button.en-nav-menu-hamburger-button:hover {
  color: var(--en-mobnav-color-1);
  background: var(--en-mobnav-color-2);
}

/* NAVIGATION MENU CONTAINER */
nav.en-nav {
  background: var(--en-mobnav-color-1);
  color: var(--en-mobnav-color-2);
}

/* MOBILE MENU CLOSE BUTTON */
nav.en-nav button.en-mobile-nav-close-button {
  width: min-content;
  font-size: 24px;
  padding: 4px 8px;
  background: transparent;
  color: var(--en-mobnav-color-2);
  border: none;
  border-radius: 6px;
  margin: 10px 15px;
}

/* HOVER ON CLOSE BUTTON */
nav.en-nav button.en-mobile-nav-close-button:hover {
  background: var(--en-mobnav-color-2);
  color: var(--en-mobnav-color-1);
}

/* HEADER IN MOBILE NAVIGATION */
nav.en-nav>div.en-mobile-nav-header {
  background: var(--en-mobnav-color-1);
  color: var(--en-mobnav-color-2);
  font-family: inherit;
  font-size: 28px;
}

/* FOOTER IN MOBILE NAVIGATION */
nav.en-nav>div.en-mobile-nav-footer {
  background: var(--en-mobnav-color-1);
  color: var(--en-mobnav-color-2);
  font-family: inherit;
  font-size: 22px;
}

/* STYLING OF ALL LIST ITEMS */
nav.en-nav ul li {
  border-top: 1px solid #cccccc;
  text-align: left;
}

/* STYLING OF THE LAST LIST ITEM AT THE TOP LEVEL ONLY */
nav.en-nav>ul>li:last-child {
  border-bottom: 1px solid #cccccc;
}

/* STYLING OF MENU ITEMS AT THE TOP LEVEL ONLY */
nav.en-nav>ul>li>a {
  font-family: 'Asap Condensed', sans-serif;
  font-size: 15.5px;
  color: var(--en-mobnav-menu-color);
  background: var(--en-mobnav-menu-bgcolor);
}

/* HOVER ON MENU ITEMS AT THE TOP LEVEL ONLY */
nav.en-nav>ul>li>a:hover {
  color: var(--en-mobnav-menu-color);
  background: var(--en-mobnav-menu-hover-color);
}

/* STYLING OF MENU ITEMS EXCEPT THE TOP LEVEL */
nav.en-nav>ul>li>ul a {
  font-family: 'Asap Condensed', sans-serif;
  font-size: 14.5px;
  color: var(--en-mobnav-menu-bgcolor);
  background: var(--en-mobnav-menu-color);
}

/* HOVER ON MENU ITEMS EXCEPT THE TOP LEVEL */
nav.en-nav>ul>li>ul a:hover {
  color: var(--en-mobnav-menu-color);
  background: #4d5053;
}

/* STYLING OF THE MENU ITEMS THAT HAVE A SUBMENU */
nav.en-nav>ul>li ul>li.en-has-submenu>a {
  color: var(--en-mobnav-menu-bgcolor);
}

/* HOVER ON MENU ITEMS THAT HAVE A SUBMENU */
nav.en-nav>ul>li ul>li.en-has-submenu>a:hover {
  color: var(--en-mobnav-menu-hover-color);
  background: var(--en-mobnav-menu-hover-bgcolor);
}

/* STYLING OF THE MENU ITEM WHEN SUBMENU IS OPEN */
nav.en-nav>ul>li ul>li.en-mobile-submenu-opened>a {
  color: var(--en-mobnav-menu-color);
  background: var(--en-mobnav-menu-bgcolor);
}

/* SUBMENU INDICATOR ON THE LEFT */
nav.en-nav>ul>li ul li.en-has-submenu>a:before {
  display: none;
  /* display: none to disable */
  margin-right: 7px;
  background: var(--en-mobnav-menu-bgcolor);
  width: 14px;
  height: 13px;
}

/* HOVER ON SUBMENU INDICATOR ON THE LEFT */
nav.en-nav>ul>li ul li.en-has-submenu>a:hover:before {
  background: var(--en-mobnav-menu-hover-color);
}

/* TRANSFORMATION ON THE SUBMENU INDICATOR ON THE LEFT WHEN SUBMENU IS OPEN */
nnav.en-nav>ul>li>ul li.en-mobile-submenu-opened>a:before {
  transform: rotate(90deg);
}

/* SUBMENU INDICATOR ON THE RIGHT. DISABLED BY DEFAULT. */
nav.en-nav>ul>li ul li.en-has-submenu>a:after {
  display: none;
  /* display: inline-block to enable */
  margin-left: 12px;
  /* float: right as an alternative to push the triangle to the end. */
  background: var(--en-mobnav-menu-color);
  width: 14px;
  height: 13px;

}

/* HOVER ON SUBMENU INDICATOR ON THE RIGHT */
nav.en-nav>ul>li ul li.en-has-submenu>a:hover:after {
  background: var(--en-mobnav-menu-hover-color);
}

/* TRANSFORMATION ON THE SUBMENU INDICATOR ON THE RIGHT WHEN SUBMENU IS OPEN */
nav.en-nav>ul>li>ul li.en-mobile-submenu-opened>a:after {
  transform: rotate(90deg);
}

nav.en-nav>ul>li.hasSubNav {
  position: relative;
}

nav.en-nav>ul>li.hasSubNav::after {
  content: "";
  position: absolute;
  margin: 5.5px 0 0 8px;
  transition: all ease 0.5s;
  right: 18px;
  top: 8px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #e3ecdc;
  width: 0;
  height: 0;
}