/* 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: var(--en-website-color-1);
    --en-mobnav-color-2: var(--en-website-color-2);
    
        /* MENU COLORS */
    --en-mobnav-menu-bgcolor: #06191d;
    --en-mobnav-menu-color: #444444;
    
        /* MENU HOVER COLORS */
    --en-mobnav-menu-hover-bgcolor: var(--en-mobnav-color-1);
    --en-mobnav-menu-hover-color: var(--en-mobnav-color-2);
    
    }
    
    /* MOBILE MENU CLOSE BUTTON */
    nav.en-nav button.en-mobile-nav-close-button {
        padding: 0;
        border: none;
        margin: 0;
        background: #fff;
        color: #fff;
        width: 47px;
        height: 100%;
        max-height: 47px;
        border-radius: 0px;
        position: absolute;
        right: 6px;
        border-radius: 50%;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    nav.en-nav button.en-mobile-nav-close-button::before {
        content: "";
        position: absolute;
        background: none;
        border: 2px solid var(--en-website-color-1);
        width: 95%;
        height: 95%;
        left: 1px;
        top: 1px;
        box-sizing: border-box;
        border-radius: 50px;
        right: 0;
      }
    
    nav.en-nav button.en-mobile-nav-close-button span {
        width: 20px;
        height: 2px;
        display: inline-block;
        background: var(--en-website-color-1);
        position: relative;
        top: 1px;
    }
    
    #close_line1 {
        transform: rotate(48deg) translate(3px, -10px);
    }
    
    #close_line2 {
        transform: rotate(128deg) translate(3px, 11px);
    }
    
    .en-mobile-nav-header span br{display: none;}
    
    /* HOVER ON CLOSE BUTTON */
    nav.en-nav button.en-mobile-nav-close-button:hover, nav.en-nav button.en-mobile-nav-close-button:focus {
        background: #fff;
    }
    
    /* HAMBURGER BUTTON */
    button.en-nav-menu-hamburger-button {
        background: var(--en-mobnav-color-1);
        color: var(--en-mobnav-color-2);
        margin: 0 2vw;
        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: #fff;
color: var(--en-mobnav-color-2);
border-left: 1px solid #fff;
border-right: 1px solid #fff;
    }
    
    
    /* 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 #e6e4e4;
        position: relative;
      }
    
    /* 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 {
        color: #1e2022;
        background: #f4f4f4;
        font-family: 'forma-djr-deck', sans-serif!important;
        font-size: 16px;
        padding:10px auto;
        font-weight: 600;
      }
    
    /* HOVER ON MENU ITEMS AT THE TOP LEVEL ONLY */
    nav.en-nav > ul > li:hover > a, nav.en-nav > ul > li > a:hover, nav.en-nav > ul > li:focus > a, nav.en-nav > ul > li > a:focus {
        color: #fff;
        background: #3677b3;
    }
    
    /* STYLING OF MENU ITEMS EXCEPT THE TOP LEVEL */
    nav.en-nav > ul > li > ul a {
       font-family: 'forma-djr-deck', sans-serif;
font-size: 15px;
color: #1e2022;
background: #fff !important;
padding: 12px 15px !important;
max-width: 100%;
font-weight: 600;
    }
    
    /* HOVER ON MENU ITEMS EXCEPT THE TOP LEVEL */
    nav.en-nav > ul > li > ul a:hover, nav.en-nav > ul > li > ul a:focus {
        background: #f4f4f4 !important;
      }
    
    /* 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-color);
    }
    
    /* 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 RIGHT */
    nav.en-nav ul li {
        position: relative;
    }
    
    nav.en-nav > ul > li.hasSubNav::after {
        content: "";
        position: absolute;
        transform: rotate(0) !important;
        margin: 5.5px 0 0 8px;
        transition: all ease 0.5s;
        right: 18px;
        top: 7px;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 7px solid #000;
        width: 0;
        height: 0;
    }
    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:hover::after, nav.en-nav > ul > li.hasSubNav:focus::after {
        border-top: 7px solid #fff;
    }
    
    nav.en-nav ul{grid-row: 2; grid-column: 1 / 4; margin: 0px 0 0 0 !important;}
    nav.en-nav ul li ul{margin: 0px 0 0 0 !important;}
    
    #tabs #social-icons {
        margin: 7.3px 22px 0 15px;
    }
    
    @media only screen and (max-width: 991px){
        nav.en-nav button.en-mobile-nav-close-button {
            width: 44px;
            max-height: 44px;
            right: 6px;
        }
    }
    
    @media only screen and (max-width: 430px){
        nav.en-nav button.en-mobile-nav-close-button {
            width: 44px;
            max-height: 44px;
            right: 10px;
            top: 15px;
          }
    }