From 760becabf40dbbaed36dac6c37275c7e31aa2509 Mon Sep 17 00:00:00 2001
From: ITML <antonis@itml.gr>
Date: Thu, 17 Feb 2022 09:57:12 +0000
Subject: [PATCH] refactor(header): adjust to volto in progress

---
 src/semantic.less                          |    4 +
 src/ui/Header/Header.jsx                   |   47 +-
 src/ui/Header/HeaderSearchPopUp.js         |    8 +-
 theme/theme.config                         |    1 +
 theme/themes/eea/elements/button.overrides |   28 +-
 theme/themes/eea/elements/button.variables |   10 +-
 theme/themes/eea/elements/input.overrides  |   32 +
 theme/themes/eea/extras/header.less        | 1092 +++++++++++++++++++
 theme/themes/eea/extras/header.variables   |   52 +
 theme/themes/eea/globals/site.overrides    | 1146 --------------------
 10 files changed, 1243 insertions(+), 1177 deletions(-)
 create mode 100644 theme/themes/eea/extras/header.less
 create mode 100644 theme/themes/eea/extras/header.variables

diff --git a/src/semantic.less b/src/semantic.less
index 213ac216ee..0972edd3fb 100644
--- a/src/semantic.less
+++ b/src/semantic.less
@@ -220,6 +220,10 @@
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/footer';
 }
 
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/header';
+}
+
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/inpageNavigation';
 }
diff --git a/src/ui/Header/Header.jsx b/src/ui/Header/Header.jsx
index 628a1585bd..1e83b6a7ce 100644
--- a/src/ui/Header/Header.jsx
+++ b/src/ui/Header/Header.jsx
@@ -14,8 +14,6 @@ import HeaderSearchPopUp from './HeaderSearchPopUp';
 import HeaderMenuPopUp from './HeaderMenuPopUp';
 import Logo from '../Logo/Logo';
 
-import { Col } from '../Grid/Col';
-
 //import { Logo, Navigation } from '@plone/volto/components';
 
 /**
@@ -186,7 +184,7 @@ class Header extends Component {
     return (
       <div className="eea-header">
         <Header.TopHeader>
-          <Header.TopItem id="eea-official-union">
+          <Header.TopItem className="official-union mobile or lower hidden">
             <Image src={eeaFlag} alt="eea flag"></Image>
 
             <Dropdown
@@ -214,7 +212,7 @@ class Header extends Component {
             </Dropdown>
           </Header.TopItem>
 
-          <Header.TopItem id="eea-official-union-mobile">
+          <Header.TopItem className="official-union mobile only">
             <Image src={eeaFlag} alt="eea flag"></Image>
 
             <Dropdown
@@ -223,7 +221,6 @@ class Header extends Component {
               aria-label="dropdown"
             >
               <Dropdown.Menu
-                id="eea-official-union-dropdown-mobile"
                 role="group"
               >
                 <div role="option" aria-selected="false">
@@ -245,15 +242,16 @@ class Header extends Component {
 
           <Header.TopItem>
             <Dropdown
-              id="eea-top-header-theme-sites"
+              id="theme-sites"
+              className="tablet or lower hidden"
               text="Environmental information systems"
               icon="chevron down"
               aria-label="dropdown"
             >
-              <Dropdown.Menu id="eea-theme-sites-dropdown" role="group">
-                <div id="eea-theme-sites-list">
+              <Dropdown.Menu role="group">
+                <div className="list">
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -262,7 +260,7 @@ class Header extends Component {
                     </a>
                   </div>
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -271,7 +269,7 @@ class Header extends Component {
                     </a>
                   </div>
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -281,7 +279,7 @@ class Header extends Component {
                     <br />
                   </div>
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -290,7 +288,7 @@ class Header extends Component {
                     </a>
                   </div>
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -299,7 +297,7 @@ class Header extends Component {
                     </a>
                   </div>
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -308,7 +306,7 @@ class Header extends Component {
                     </a>
                   </div>
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -317,7 +315,7 @@ class Header extends Component {
                     </a>
                   </div>
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -360,12 +358,11 @@ class Header extends Component {
 
         <Header.Main>
           <Container>
-            <Grid.Row>
-              <Col desktop="4" tablet="5" mobile="3">
-                {/* <Image src={logo} id="eea-logo" alt="eea logo"></Image> */}
-                <Logo id="eea-logo"></Logo>
-              </Col>
-              <Col desktop="8" tablet="3" mobile="1">
+            <Grid>
+              <Grid.Column mobile={8} tablet={8} computer={4}>
+                <Logo id="logo"></Logo>
+              </Grid.Column>
+              <Grid.Column mobile={4} tablet={4} computer={8}>
                 <div className="eea-main-header-menu">
                   {!this.state.activeSearch && !this.state.activeMenu && (
                     <Menu className="eea-main-menu" text>
@@ -424,8 +421,8 @@ class Header extends Component {
                     <span></span>
                   </div>
                 </div>
-              </Col>
-            </Grid.Row>
+              </Grid.Column>
+            </Grid>
           </Container>
           {this.state.activeSearch && <HeaderSearchPopUp></HeaderSearchPopUp>}
           {this.state.activeMenu && <HeaderMenuPopUp></HeaderMenuPopUp>}
@@ -444,7 +441,7 @@ const TopHeader = (props) => (
 Header.TopHeader = TopHeader;
 
 const TopItem = (props) => (
-  <div className="eea-top-header-item" id={props.id}>
+  <div className={`eea-top-header-item ${props.className}`} id={props.id}>
     {props.children}
   </div>
 );
diff --git a/src/ui/Header/HeaderSearchPopUp.js b/src/ui/Header/HeaderSearchPopUp.js
index db79229c79..876b6924a0 100644
--- a/src/ui/Header/HeaderSearchPopUp.js
+++ b/src/ui/Header/HeaderSearchPopUp.js
@@ -3,17 +3,17 @@ import { Container, Input, Button, Icon } from 'semantic-ui-react';
 
 function HeaderSearchPopUp() {
   return (
-    <div id="eea-search-box">
+    <div id="search-box">
       <Container>
-        <div className="eea-search-body">
+        <div className="wrapper">
           <Input
-            id="eea-search-input"
+            className="search"
             icon="search"
             placeholder="Search..."
             fluid
           />
           <div className="eea-advanced-search-button">
-            <Button icon labelPosition="left">
+            <Button icon labelPosition="left" className="search">
               <Icon name="search" />
               Advanced Search
             </Button>
diff --git a/theme/theme.config b/theme/theme.config
index fa529d1a85..d38dbd83a4 100644
--- a/theme/theme.config
+++ b/theme/theme.config
@@ -82,6 +82,7 @@
 @banner      : 'eea';
 @timeline    : 'eea';
 @footer      : 'eea';
+@header      : 'eea';
 @inpageNavigation : 'eea';
 
 /*******************************
diff --git a/theme/themes/eea/elements/button.overrides b/theme/themes/eea/elements/button.overrides
index 0641762c8a..cd57418fa6 100644
--- a/theme/themes/eea/elements/button.overrides
+++ b/theme/themes/eea/elements/button.overrides
@@ -39,7 +39,7 @@
 .ui.button.secondary,
 .ui.buttons.secondary {
   border: @buttonBorder @primaryButtonColor;
-  background-color: @secondaryButtonBackrgound;
+  background-color: @secondaryButtonBackground;
   .text-color(@white);
 
   &:hover,
@@ -114,6 +114,32 @@ p.ui.button {
   }
 }
 
+/* Advanced Search Button */
+.ui.button.search {
+  box-sizing: border-box;
+  border: @buttonBorder @white;
+  background: @searchButtonBackground;
+  border-radius: @searchButtonBorderRadius;
+  color: @searchButtonColor;
+  font-size: @searchButtonFontSize;
+
+  &:active,
+  &:visited,
+  &:focus,
+  &:hover {
+    border: @buttonBorder @white;
+    background: @searchButtonBackground;
+    color: @searchButtonColor;
+  }
+}
+.ui.labeled.icon.button.search > .icon {
+    font-size: @searchButtonFontSize;
+    left: @searchButtonIconLeft;
+    background: @searchButtonBackground;
+    opacity: @searchButtonIconOpacity;
+}
+
+
 .searchbox.field > .ui.action.input > .icon.button {
   padding-top: 0;
   padding-right: 0;
diff --git a/theme/themes/eea/elements/button.variables b/theme/themes/eea/elements/button.variables
index ab22d03679..d514209b9e 100644
--- a/theme/themes/eea/elements/button.variables
+++ b/theme/themes/eea/elements/button.variables
@@ -16,7 +16,7 @@
 @primaryButtonColorHover: @darkMidnightBlue;
 
 /* Secondary Button */
-@secondaryButtonBackrgound: transparent;
+@secondaryButtonBackground: transparent;
 @secondaryButtonColor: @white;
 @secondaryButtonColorHover : @darkMidnightBlue;
 @secondaryBorder: @buttonBorder @primaryColor;
@@ -29,6 +29,14 @@
 /* Text Button */
 @textButtonBackground: transparent;
 
+/* Search Button */
+@searchButtonBackground: transparent;
+@searchButtonColor: @white;
+@searchButtonFontSize: 1.125rem;
+@searchButtonBorderRadius: 0.625rem;
+@searchButtonIconLeft: 1.25rem;
+@searchButtonIconOpacity: 0.625rem;
+
 @verticalMargin: 0em;
 @horizontalMargin: 0.25em;
 @backgroundColor: @silverGray;
diff --git a/theme/themes/eea/elements/input.overrides b/theme/themes/eea/elements/input.overrides
index 5653d8e6c8..145057421e 100644
--- a/theme/themes/eea/elements/input.overrides
+++ b/theme/themes/eea/elements/input.overrides
@@ -39,6 +39,38 @@ textarea {
   }
 }
 
+
+/* Search Input */
+.ui.fluid.icon.input.search {
+  input {
+    padding: 18.5px;
+    border: none !important;
+    border-bottom: 2px solid !important;
+    background: transparent;
+    color: @white;
+    font-size: 18px;
+  }
+
+  i.icon {
+    color: @white;
+    font-size: 18px;
+    opacity: 1;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .ui.fluid.icon.input.search {
+    input {
+      border-bottom: 3px solid !important;
+      font-size: 48px;
+    }
+    i.icon {
+      font-size: 48px;
+    }
+  }
+}
+
+/*****************************************************************/
 .inline.field {
   .wrapper {
     display: flex;
diff --git a/theme/themes/eea/extras/header.less b/theme/themes/eea/extras/header.less
new file mode 100644
index 0000000000..31b93e25f2
--- /dev/null
+++ b/theme/themes/eea/extras/header.less
@@ -0,0 +1,1092 @@
+@type: 'extra';
+@element: 'header';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Header
+*******************************/
+
+
+.eea-header {
+  background: @white;
+
+  /* Top header section */
+  .eea-top-header {
+    display: flex;
+    align-items: center;
+    height: @mobileTopSectionHeight;
+    background: @topSectionBackground;
+  
+    .ui.container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        z-index: 999999;
+    }
+    .eea-top-header-item {
+        display: flex;
+        align-items: center;
+        color: @topSectionItemColor;
+        font-weight: @topSectionItemFontWeight;
+        font-size: @mobileTopSectionItemFontSize;
+
+    }
+    .ui.dropdown {
+        border: none !important;
+        height: auto !important;
+        border-radius: @defaultBorderRadius;
+        color: @topSectionItemColor;
+
+        font-size: @dropdownFontSize;
+        font-weight: @dropdownFontWeight;
+
+        .menu {
+            margin-top: @mobileDropdownMenuMarginTop;
+        } 
+    }
+
+    /* Official union dropdown */
+    .official-union {
+        display: flex;
+        gap: @officialUnionGap;
+    }
+    .official-union.mobile.or.lower.hidden {
+        .ui.dropdown .menu {
+            padding: @tabletOfficialUnionPadding;
+            margin-left: -47px;
+          
+            div {
+              max-width: 373px;
+            }
+          
+            p,
+            a {
+              font-size: @dropdownFontSize;
+              font-weight: @dropdownFontWeight;
+              white-space: pre-wrap;
+            }
+        }
+    }
+    .official-union.mobile.only {
+
+        img {
+          width: 17px;
+        }
+        
+        .ui.dropdown {
+            font-size: @mobileTopSectionItemFontSize;
+
+            .menu {     
+                margin-left: -30px;
+                padding: @mobileOfficialUnionPadding;
+
+                div {
+                    max-width: 215px !important; 
+        
+                    p,
+                    a {
+                        font-size: 12px;
+                        font-weight: 400;
+                        white-space: pre-wrap;
+                    }
+                
+                    i.icon,
+                    i.icons {
+                        font-size: @mobileTopSectionItemFontSize;
+                    }
+                }
+            } 
+        }
+    }
+
+    /* Theme sites dropdown */
+    #theme-sites.ui.dropdown {
+
+        .list {
+            width: @themeSitesMenuWidth;
+            padding: @themeSitesMenuPadding;
+            white-space: pre-wrap;
+
+            .site {
+                margin: @themeSitesMenuSiteMargin;
+
+                a {
+                    color: @themeSitesMenuSiteLinkColor;
+                    font-weight: @themeSitesMenuSiteLinkFontWeight;
+                }
+                
+                a:hover {
+                    color: #4183c4;
+                }
+            }
+        }
+    }
+  }
+
+  /* Main header section */
+  .eea-main-header {
+    .ui.container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: @mobileMainSectionHeight;
+  
+      .ui.grid {
+        /* All margins and paddings removed for main header */
+        width: 100%;
+        margin-top: 0;
+        margin-bottom: 0;
+        margin-left: 0;
+        margin-right: 0;
+  
+        div:first-child {
+          padding-left: 0;
+        }
+  
+        div:last-child {
+          padding-right: 0;
+        }
+      }
+
+      #logo {
+        width: @logoWidth;
+        max-width: @mobileLogoMaxWidth;
+        margin-top: @mobileLogoMarginTop;
+      }
+    }
+
+
+    /* Search Box */
+    #search-box {
+        position: relative;
+        z-index: 99999;
+        overflow: scroll;
+        width: 100%;
+        height: calc(100vh - 74px);
+        background: linear-gradient(340.97deg, @darkCerulean 9.19%, #009591 77.47%);
+      
+        .ui.container {
+          height: 100%;
+          align-items: baseline;
+        }
+        .wrapper {
+            position: relative;
+            width: 100%;
+            margin: 135px 0 0 0;
+
+            .eea-advanced-search-button {
+                display: flex;
+                justify-content: center;
+                padding: 119px 0 0 0;
+            }
+        }
+      }
+  }
+}
+
+#eea-top-header-language-dropdown {
+  display: flex;
+  border-radius: @defaultBorderRadius;
+  font-size: 10px;
+  font-weight: 700;
+
+  img {
+    width: 50%;
+  }
+}
+
+#eea-top-header-language-dropdown .menu {
+  top: 10px;
+  left: -134px;
+  width: 164px;
+  border-radius: @defaultBorderRadius;
+  color: @japaneseIndigo;
+}
+
+#eea-top-header-language-dropdown .menu > .item {
+  text-align: end;
+
+  span.country-code {
+    margin-left: 3px;
+    font-weight: bold;
+  }
+}
+
+#eea-top-header-language-dropdown .menu > .item:hover {
+  background: none !important;
+}
+
+#eea-top-header-language-dropdown .menu > .item span.text {
+  padding: 5px;
+
+  &:hover {
+    background-color: #2e3e4c;
+    color: #ffffff;
+  }
+}
+
+.eea-main-header-menu {
+  display: flex;
+  width: 100%;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.eea-main-menu.ui.text.menu {
+  display: none;
+}
+
+.eea-main-menu-item {
+  color: @deepBlue;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.eea-top-header-language-dropdown .menu .option .text {
+  font-size: 12px;
+}
+
+
+
+
+
+
+/***************************************
+Header Actions - Burger and Search Icons
+***************************************/
+.eea-header-burger-action {
+    display: flex;
+    width: 30px;
+    height: @mobileMainSectionHeight;
+    align-items: center;
+    justify-content: center;
+    background-color: @mediumPersianBlue;
+  
+    span {
+      position: absolute;
+      width: 22px;
+      height: 4px;
+      background-color: #ffffff;
+      border-radius: 9px;
+      cursor: pointer;
+    }
+  
+    span:first-child {
+      transform: rotate(45deg);
+    }
+  
+    span:last-child {
+      transform: rotate(135deg);
+    }
+  }
+  
+  .eea-header-burger-action.desktop {
+    display: none;
+  }
+  
+  .eea-header-burger-action.mobile {
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+    -webkit-transition: 0.5s ease-in-out;
+    -moz-transition: 0.5s ease-in-out;
+    -o-transition: 0.5s ease-in-out;
+    transition: 0.5s ease-in-out;
+  
+    span {
+      position: inherit;
+      left: 0;
+      display: block;
+      width: 16px;
+      height: 2px;
+      margin: 2px;
+      background: #ffffff;
+      border-radius: 9px;
+      opacity: 1;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+      -webkit-transition: 0.25s ease-in-out;
+      -moz-transition: 0.25s ease-in-out;
+      -o-transition: 0.25s ease-in-out;
+      transition: 0.25s ease-in-out;
+    }
+  }
+  
+  .eea-header-burger-action.mobile.open span {
+    position: absolute;
+    left: inherit;
+  }
+  
+  .eea-header-burger-action.mobile.open span:nth-child(1) {
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+  
+  .eea-header-burger-action.mobile.open span:nth-child(2) {
+    width: 0%;
+    opacity: 0;
+  }
+  
+  .eea-header-burger-action.mobile.open span:nth-child(3) {
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+  }
+  
+  .eea-header-search-action {
+    display: flex;
+    width: 30px;
+    height: @mobileMainSectionHeight;
+    align-items: center;
+    justify-content: center;
+    background-color: @darkCyan;
+  
+    .eea-header-search-action{
+      display: contents;
+    }
+  
+    img {
+      width: 24px;
+    }
+  
+    span {
+      position: absolute;
+      width: 16px;
+      height: 2px;
+      background-color: #ffffff;
+      border-radius: 9px;
+      cursor: pointer;
+    }
+  
+    span:first-child {
+      transform: rotate(45deg);
+    }
+  
+    span:last-child {
+      transform: rotate(135deg);
+    }
+  }
+
+
+
+
+
+
+
+
+
+
+
+@media only screen and (min-width: @tabletBreakpoint) {
+    .eea-header {
+        .eea-top-header {
+            height: @tabletTopSectionHeight;
+
+            .eea-top-header-item {
+                font-size: @tabletTopSectionItemFontSize;
+            }
+
+            .ui.dropdown .menu {
+                margin-top: @tabletDropdownMenuMarginTop;
+            }
+        }
+        .eea-main-header {
+            .ui.container {
+                height: 117px;
+
+                #logo {
+                    max-width: @tabletLogoMaxWidth;
+                    margin-top: @tabletLogoMarginTop;
+                }
+            }
+
+            /* Search box */
+            #search-box {
+                height: calc(100vh - 140px);
+            }
+        }
+    }
+
+  .eea-main-menu.ui.text.menu {
+    display: none;
+  }
+
+  .eea-header-burger-action.mobile {
+    display: flex;
+  }
+
+  .eea-header-burger-action.mobile {
+    width: 66px;
+    height: 117px;
+
+    span {
+      width: 30px;
+      height: 4px;
+      margin: 4px;
+    }
+  }
+
+  .eea-header-search-action {
+    width: 66px;
+    height: 117px;
+
+    img {
+      width: 45px;
+    }
+
+    span {
+      width: 30px;
+      height: 4px;
+    }
+  }
+
+
+
+
+  #eea-top-header-language-dropdown {
+    font-size: 14px;
+  }
+
+  #eea-top-header-language-dropdown .menu {
+    top: 18px;
+    left: -127px;
+  }
+
+  .eea-top-header-language-dropdown .menu .option .text {
+    font-size: 1rem;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+    .eea-header {
+        .eea-top-header {
+            height: @computerTopSectionHeight;
+        }
+
+        .eea-main-header {
+            .ui.container {
+              height: 160px;
+              #logo {
+                max-width: @computerLogoMaxWidth;
+                margin-top: @computerLogoMarginTop;
+              }
+            }
+
+            /* Search box */
+            #search-box {
+                height: calc(100vh - 192px);
+
+                .wrapper {
+                    margin: 280px 0 0 0;
+
+                    .eea-advanced-search-button {
+                        justify-content: flex-end;
+                        padding: 74px 0 0 0;
+                    }
+                }
+            }
+        }
+    }
+
+  .eea-header-burger-action.mobile {
+    display: none;
+
+    span {
+      width: 44.21px;
+    }
+  }
+
+  .eea-main-menu.ui.text.menu {
+    display: flex;
+    width: 88%;
+    max-height: 20px;
+    justify-content: space-between;
+    margin: 0;
+  }
+
+  .eea-header-burger-action.desktop {
+    display: flex;
+    width: 72px;
+    height: 160px;
+
+    span {
+      width: 44.21px;
+    }
+  }
+
+  .eea-header-search-action {
+    width: 72px;
+    height: 160px;
+
+    span {
+      width: 44.21px;
+      height: 4px;
+    }
+  }
+}
+
+/************************
+      MEGA MENU
+************************/
+
+#eea-mega-menu-wrap {
+  position: relative;
+  z-index: 9999;
+  overflow: scroll;
+  width: 100%;
+  height: calc(100vh - 74px);
+  background: linear-gradient(180deg, #0065a4 39.58%, #043570 100%);
+
+  .ui.container {
+    height: 100%;
+    align-items: baseline;
+  }
+}
+
+#first-section-link {
+  display: block;
+}
+
+#trigger,
+.eea-mobile-menu-trigger {
+  display: none !important;
+}
+
+nav.eea-nav {
+  position: relative;
+  width: 100%;
+  margin-top: 40px;
+}
+
+nav.eea-nav ul,
+nav.eea-nav li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+nav.eea-nav a,
+nav.eea-nav span {
+  display: block;
+  text-decoration: none;
+}
+
+nav.eea-nav a:hover,
+nav.eea-nav a:visited {
+  text-decoration: none;
+}
+
+.menu-bar {
+  display: flex;
+  background: transparent;
+}
+
+.menu-link {
+  position: relative;
+  z-index: 1;
+  padding: 10px;
+  background: transparent;
+  color: @white;
+  font-size: 30px;
+  transition: background 0.2s, color 0.2s;
+}
+
+a.menu-link:hover {
+  color: @white;
+}
+
+.menu-link[aria-haspopup='true'] {
+  padding-right: 40px;
+}
+
+.menu-link[aria-haspopup='true']:after {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  background-image: url(../assets/images/mega-menu-arrow.svg);
+  background-repeat: no-repeat;
+  background-size: 24px;
+  content: '';
+  font-size: 12px;
+  transform: translateY(-50%);
+}
+
+.mega-menu-header {
+  color: #136a73;
+  font-size: 1.2em;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.mega-menu {
+  z-index: 10;
+  background: transparent;
+}
+
+.mega-menu--multiLevel {
+  flex-direction: column;
+}
+@media only screen and (min-width: @tabletBreakpoint) {
+  nav.eea-nav {
+    margin-top: 200px;
+    background: transparent;
+  }
+
+  .nav.eea-nav > nav {
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .menu [aria-haspopup='true'] ~ ul {
+    display: none;
+  }
+
+  .menu-link {
+    padding: 20px 25px;
+  }
+
+  .menu-bar {
+    position: relative;
+  }
+
+  .menu-bar > li > [aria-haspopup='true']:after {
+    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#accent');
+  }
+
+  .menu-bar > li > [aria-haspopup='true']:hover:after {
+    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#light');
+  }
+
+  .menu-bar > li > [aria-haspopup='true']:focus ~ ul {
+    display: flex;
+    animation: dropdown 0.2s ease-out;
+    transform-origin: top;
+  }
+
+  .menu-bar > li > [aria-haspopup='true'] ~ ul:hover {
+    display: flex;
+  }
+
+  .menu-bar > li:focus-within > [aria-haspopup='true'] ~ ul {
+    display: flex;
+  }
+
+  .menu-bar > li > [aria-haspopup='true']:focus,
+  .menu-bar > li:focus-within > [aria-haspopup='true'],
+  .menu-bar > li:hover > a {
+    background: #177e89;
+    color: #ffffff;
+  }
+
+  .menu-bar > li > [aria-haspopup='true']:focus:after,
+  .menu-bar > li:focus-within > [aria-haspopup='true']:after,
+  .menu-bar > li:hover > a:after {
+    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowTop.svg#light');
+  }
+
+  .mega-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+  }
+
+  .mega-menu:hover {
+    display: flex;
+  }
+
+  .mega-menu a:hover {
+    color: @white;
+  }
+
+  .mega-menu--multiLevel > li {
+    width: 33.333333333333%;
+  }
+
+  .mega-menu--multiLevel > li > [aria-haspopup='true'] ~ ul {
+    left: 33.333333333333%;
+    width: 33.333333333333%;
+  }
+
+  .mega-menu--multiLevel > li > [aria-haspopup='true'] ~ ul ul {
+    left: 100%;
+    width: 100%;
+  }
+
+  .mega-menu--multiLevel li:hover > [aria-haspopup='true'] ~ ul {
+    display: block;
+    animation: flyout 0.2s ease-out;
+    transform-origin: left;
+  }
+
+  .mega-menu--multiLevel li:focus-within > [aria-haspopup='true'] ~ ul {
+    display: block;
+  }
+
+  .mega-menu--multiLevel li:hover > [aria-haspopup='true'],
+  .mega-menu--multiLevel li:hover > a,
+  .mega-menu--multiLevel li:focus-within > [aria-haspopup='true'],
+  .mega-menu--multiLevel li:focus-within > a {
+    color: @white;
+  }
+
+  .mega-menu--multiLevel [aria-haspopup='true'] ~ ul:hover,
+  .mega-menu--multiLevel [aria-haspopup='true']:hover {
+    display: block;
+  }
+
+  .mega-menu--multiLevel [aria-haspopup='true'] ~ ul {
+    position: absolute;
+    top: 0;
+    height: 100%;
+  }
+
+  .mega-menu--flat > * {
+    flex: 1;
+  }
+
+  .eea-mobile-menu-trigger,
+  .mobile-menu-header,
+  .mobile-menu-back-item {
+    display: none;
+  }
+}
+@media only screen and (max-width: @largestMobileScreen) {
+  #eea-mega-menu-wrap {
+    height: calc(100vh - 140px);
+  }
+
+  .nav.eea-nav {
+    padding: 20px;
+  }
+
+  .mobile-menu-header,
+  .mobile-menu-back-item {
+    display: block;
+  }
+
+  .mobile-menu-header {
+    order: -1;
+    background: grey;
+  }
+
+  .mobile-menu-header a {
+    padding: 20px 25px;
+    color: #ffffff;
+    visibility: visible;
+  }
+
+  .menu-bar {
+    top: 0;
+    width: 100%;
+    max-width: 100%;
+    flex-direction: column;
+    overflow-x: hidden;
+    transition: left 0.3s;
+  }
+
+  .menu-bar > li > [aria-haspopup='true'] ~ ul {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    max-height: 100vh;
+    flex-direction: column;
+    background: transparent;
+    transition: left 0.3s;
+  }
+
+  .menu-bar > li > [aria-haspopup='true'] ~ ul > li > [aria-haspopup='true'],
+  .menu-bar > li,
+  .menu-bar > li a {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .menu-bar
+    > li
+    > [aria-haspopup='true']
+    ~ ul
+    > li
+    > [aria-haspopup='true']
+    ~ ul
+    a {
+    padding-left: 40px;
+  }
+
+  .menu-bar
+    > li
+    > [aria-haspopup='true']
+    ~ ul
+    > li
+    > [aria-haspopup='true']
+    ~ ul
+    > li
+    > [aria-haspopup='true']
+    ~ ul
+    a {
+    padding-left: 80px;
+  }
+
+  .menu-bar > li > [aria-haspopup='true'] ~ ul [aria-haspopup='true'] {
+    color: @white;
+  }
+
+  .menu-bar > li > [aria-haspopup='true'] ~ ul [aria-haspopup='true']:after {
+    height: 20px;
+    background: none;
+    content: '';
+    font-size: 1em;
+    font-weight: normal;
+    line-height: 1;
+  }
+
+  .menu-bar > li > [aria-haspopup='true'] ~ ul [aria-haspopup='true'] ~ ul {
+    max-height: 0px;
+    transform: scaleY(0);
+    transform-origin: top;
+    transition: max-height 0.1s;
+  }
+
+  .mega-menu-content {
+    padding: 20px 25px;
+  }
+
+  .mobile-menu-back-item {
+    order: -1;
+  }
+
+  .mobile-menu-back-item a {
+    max-height: calc(1.4em + 40px);
+    margin-top: calc(0px - (1.4em + 40px));
+    background: tint(grey, 70%);
+    color: #2a2a2a;
+    pointer-events: none;
+  }
+
+  .mobile-menu-back-item a:before {
+    display: inline-block;
+    width: 14px;
+    height: 12px;
+    margin-right: 10px;
+    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowLeft.svg#default');
+    background-size: 14px;
+    content: '';
+  }
+
+  .eea-mobile-menu-trigger:focus ~ ul {
+    left: 0;
+  }
+
+  .menu-bar:hover,
+  .menu-bar:focus-within {
+    left: 0;
+  }
+
+  .menu-bar > li > [aria-haspopup='true']:focus ~ ul {
+    left: 0;
+  }
+
+  .menu-bar > li > [aria-haspopup='true'] ~ ul:hover,
+  .menu-bar > li > [aria-haspopup='true'] ~ ul:focus-within {
+    left: 0;
+  }
+
+  .menu-bar
+    > li
+    > [aria-haspopup='true']
+    ~ ul
+    [aria-haspopup='true']:focus
+    ~ ul {
+    max-height: 500px;
+    animation: dropdown 0.3s forwards;
+  }
+
+  .menu-bar
+    > li
+    > [aria-haspopup='true']
+    ~ ul
+    li:focus-within
+    > [aria-haspopup='true']
+    ~ ul {
+    max-height: 500px;
+    transform: scaleY(1);
+  }
+
+  .menu-bar > li:focus-within ~ .mobile-menu-header a {
+    visibility: hidden;
+  }
+}
+@media only screen and (max-width: @largestMobileScreen) and (hover: none) {
+  .eea-mobile-menu-trigger:hover ~ ul {
+    left: 0;
+  }
+
+  .menu-bar > li > [aria-haspopup='true']:hover ~ ul {
+    left: 0;
+  }
+
+  .menu-bar > li > [aria-haspopup='true'] ~ ul:hover {
+    left: 0;
+  }
+
+  .menu-bar
+    > li
+    > [aria-haspopup='true']
+    ~ ul
+    [aria-haspopup='true']:hover
+    ~ ul {
+    max-height: 500px;
+    animation: dropdown 0.3s forwards;
+  }
+
+  .menu-bar
+    > li
+    > [aria-haspopup='true']
+    ~ ul
+    [aria-haspopup='true']
+    ~ ul:hover {
+    max-height: 500px;
+    transform: scaleY(1);
+  }
+
+  .menu-bar > li:hover ~ .mobile-menu-header a {
+    visibility: hidden;
+  }
+}
+@keyframes dropdown {
+  0% {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleY(1);
+  }
+}
+@keyframes flyout {
+  0% {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+  li {
+    font-size: 20px;
+
+    a.menu-link {
+      font-size: 24px;
+    }
+  }
+
+  .menu-link[aria-haspopup='true']:after {
+    height: 20px;
+    background-size: 14px;
+  }
+}
+
+@media only screen and (max-width: @largestMobileScreen) {
+  li {
+    font-size: 18px;
+
+    a.menu-link {
+      font-size: 18px;
+    }
+  }
+}
+@media only screen and (min-width: @computerBreakpoint) {
+  .menu-link.mega-menu-link.mega-menu-first-level {
+    padding: 30px 25px;
+    font-size: 48px;
+  }
+
+  .menu-link.menu-list-link.mega-menu-second-level {
+    padding: 25px 25px;
+    font-size: 40px;
+  }
+
+  .menu-link.menu-list-link.mega-menu-third-level {
+    padding: 18px 25px;
+    font-size: 36px;
+  }
+
+  #eea-mega-menu-wrap {
+    height: calc(100vh - 192px);
+  }
+}
+
+ul.mega-menu.mega-menu--multiLevel > li:last-child {
+  margin-bottom: 50px;
+}
+
+//** MEGA MENU REVISIT **//
+
+#eea-mega-menu-wrap {
+
+  .ui.vertical.menu{
+    background: transparent;
+    border: none;
+  }
+
+  .ui.dropdown {
+    border: none !important;
+
+    .active {
+      border:none;
+    }
+  }
+
+  .ui.menu .dropdown.item .menu {
+    background: transparent;
+    border: none;
+  }
+
+
+  .ui.vertical.menu .dropdown.item .menu{
+    top:0 !important;
+    margin-top: 0 !important;
+  }
+
+  .ui.vertical.menu .item > .menu.hidden {
+    display: none;
+  }
+
+  
+}
+
+#desktop-menu{
+    display: none;
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  #desktop-menu{
+    display: block;
+  }
+
+  #mobile-menu{
+    display: none;
+  }
+}
diff --git a/theme/themes/eea/extras/header.variables b/theme/themes/eea/extras/header.variables
new file mode 100644
index 0000000000..ccd6cf4be8
--- /dev/null
+++ b/theme/themes/eea/extras/header.variables
@@ -0,0 +1,52 @@
+/*-------------------
+      HEADER
+--------------------*/
+
+/* Heights */
+@mobileTopSectionHeight: @18px;
+@tabletTopSectionHeight: @30px;
+@computerTopSectionHeight: @33px;
+
+@mobileMainSectionHeight: 56px;
+@tabletMainSectionHeight: 117px;
+@computerMainSectionHeight: 160px;
+
+/* Top */
+@topSectionBackground: @silverGray;
+@topSectionItemColor: @japaneseIndigo;
+@topSectionItemFontWeight: @bold;
+@mobileTopSectionItemFontSize: 8px;
+@tabletTopSectionItemFontSize: 12px;
+
+/* Dropdown */
+@mobileDropdownMenuMarginTop: 3px;
+@tabletDropdownMenuMarginTop: 7px;
+@dropdownFontSize: 12px;
+@dropdownFontWeight: 700;
+/* Dropdown Menu */
+@dropdownMenuLeft: auto;
+@dropdownMenuRight: 0;
+
+// Official Union
+@officialUnionGap: 12px;
+@mobileOfficialUnionPadding: 5px;
+@tabletOfficialUnionPadding: 12px;
+// Theme Sites
+@themeSitesMenuWidth: 205px;
+@themeSitesMenuPadding: 5px;
+@themeSitesMenuSiteMargin: 5px 0;
+@themeSitesMenuSiteLinkColor: @japaneseIndigo;
+@themeSitesMenuSiteLinkFontWeight: 400;
+// Language
+
+/* Main Section */
+@headerMainSectionBackground: @white;
+
+/* Logo */
+@logoWidth: 100%;
+@mobileLogoMaxWidth: 122px;
+@tabletLogoMaxWidth: 252px;
+@computerLogoMaxWidth: 348px;
+@mobileLogoMarginTop: 9px;
+@tabletLogoMarginTop: 15px;
+@computerLogoMarginTop: 20px;
\ No newline at end of file
diff --git a/theme/themes/eea/globals/site.overrides b/theme/themes/eea/globals/site.overrides
index 978ac26359..26c5dac64c 100644
--- a/theme/themes/eea/globals/site.overrides
+++ b/theme/themes/eea/globals/site.overrides
@@ -9,1149 +9,3 @@
   h3 { font-size: unit((36 / 16), rem); }
   h4 { font-size: unit((24 / 16), rem); }
 }
-
-/*-------------------
-      HEADER
---------------------*/
-
-.eea-header {
-  background: @white;
-}
-
-.eea-top-header {
-  display: flex;
-  height: 18px;
-  align-items: center;
-  background: @silverGray;
-
-  .ui.container {
-    z-index: 999999;
-  }
-}
-
-.eea-top-header .ui.container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.eea-top-header-item {
-  display: flex;
-  align-items: center;
-  color: @japaneseIndigo;
-  font-size: 12px;
-  font-weight: 700;
-
-  .ui.dropdown {
-    height: auto !important;
-  }
-}
-
-.ui.dropdown .menu {
-  margin-top: 6px !important;
-}
-
-.ui.dropdown.eea-top-header-item {
-  height: auto !important;
-}
-
-#eea-official-union,
-#eea-official-union-mobile {
-  .ui.dropdown {
-    min-width: -webkit-max-content;
-    min-width: -moz-max-content;
-    min-width: max-content;
-    padding-left: 12px;
-    border: none !important;
-    border-radius: @defaultBorderRadius;
-    font-size: 12px;
-    font-weight: 700;
-  }
-}
-
-#eea-official-union {
-  display: none;
-}
-
-#eea-official-union-mobile {
-  display: flex;
-
-  img {
-    width: 17px;
-  }
-
-  div {
-    max-width: 215px !important;
-    font-size: 8px;
-
-    i.icon,
-    i.icons {
-      font-size: 8px;
-    }
-  }
-}
-
-#eea-official-union-dropdown,
-#eea-official-union-dropdown-mobile {
-  position: absolute;
-  padding: 12px;
-  margin-top: 6px;
-  margin-left: -34px;
-
-  div {
-    max-width: 373px;
-  }
-
-  p,
-  a {
-    font-size: 12px;
-    font-weight: 400;
-    white-space: pre-wrap;
-  }
-}
-
-#eea-official-union-dropdown-mobile {
-  top: 12px;
-}
-
-#eea-top-header-theme-sites {
-  display: none;
-}
-
-#eea-top-header-theme-sites.ui.dropdown {
-  border: none !important;
-  font-size: 12px;
-  font-weight: 700;
-
-  a {
-    color: @japaneseIndigo !important;
-    font-weight: 400;
-  }
-
-  a:hover {
-    color: #4183c4 !important;
-  }
-}
-
-#eea-official-union-dropdown,
-#eea-official-union-dropdown-mobile,
-#eea-theme-sites-dropdown,
-#eea-top-header-theme-sites {
-  border: none !important;
-  border-radius: @defaultBorderRadius;
-}
-
-#eea-theme-sites-list {
-  width: 205px;
-  padding: 12px;
-  white-space: pre-wrap;
-}
-
-#eea-top-header-language-dropdown {
-  display: flex;
-  border: none !important;
-  border-radius: @defaultBorderRadius;
-  font-size: 10px;
-  font-weight: 700;
-
-  img {
-    width: 50%;
-  }
-}
-
-#eea-top-header-language-dropdown .menu {
-  top: 10px;
-  left: -134px;
-  width: 164px;
-  border-radius: @defaultBorderRadius;
-  color: @japaneseIndigo;
-}
-
-#eea-top-header-language-dropdown .menu > .item {
-  text-align: end;
-
-  span.country-code {
-    margin-left: 3px;
-    font-weight: bold;
-  }
-}
-
-#eea-top-header-language-dropdown .menu > .item:hover {
-  background: none !important;
-}
-
-#eea-top-header-language-dropdown .menu > .item span.text {
-  padding: 5px;
-
-  &:hover {
-    background-color: #2e3e4c;
-    color: #ffffff;
-  }
-}
-
-.eea-main-header {
-  .ui.container {
-    display: flex;
-    height: 56px;
-    align-items: center;
-    justify-content: space-between;
-
-    .row {
-      padding: 0 0;
-
-      div:first-child {
-        padding-left: 0;
-      }
-
-      div:last-child {
-        padding-right: 0;
-      }
-    }
-  }
-}
-
-img#eea-logo {
-  width: 100%;
-  max-width: 122px;
-  margin-top: 9px;
-}
-
-.eea-theme-site-item {
-  margin: 5px 0;
-}
-
-.eea-main-header-menu {
-  display: flex;
-  width: 100%;
-  align-items: flex-end;
-  justify-content: flex-end;
-}
-
-.eea-main-menu.ui.text.menu {
-  display: none;
-}
-
-.eea-main-menu-item {
-  color: @deepBlue;
-  font-size: 18px;
-  font-weight: 500;
-}
-
-.eea-header-burger-action {
-  display: flex;
-  width: 30px;
-  height: 56px;
-  align-items: center;
-  justify-content: center;
-  background-color: @mediumPersianBlue;
-
-  span {
-    position: absolute;
-    width: 22px;
-    height: 4px;
-    background-color: #ffffff;
-    border-radius: 9px;
-    cursor: pointer;
-  }
-
-  span:first-child {
-    transform: rotate(45deg);
-  }
-
-  span:last-child {
-    transform: rotate(135deg);
-  }
-}
-
-.eea-header-burger-action.desktop {
-  display: none;
-}
-
-.eea-header-burger-action.mobile {
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  -webkit-transform: rotate(0deg);
-  -moz-transform: rotate(0deg);
-  -o-transform: rotate(0deg);
-  transform: rotate(0deg);
-  -webkit-transition: 0.5s ease-in-out;
-  -moz-transition: 0.5s ease-in-out;
-  -o-transition: 0.5s ease-in-out;
-  transition: 0.5s ease-in-out;
-
-  span {
-    position: inherit;
-    left: 0;
-    display: block;
-    width: 16px;
-    height: 2px;
-    margin: 2px;
-    background: #ffffff;
-    border-radius: 9px;
-    opacity: 1;
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-    -webkit-transition: 0.25s ease-in-out;
-    -moz-transition: 0.25s ease-in-out;
-    -o-transition: 0.25s ease-in-out;
-    transition: 0.25s ease-in-out;
-  }
-}
-
-.eea-header-burger-action.mobile.open span {
-  position: absolute;
-  left: inherit;
-}
-
-.eea-header-burger-action.mobile.open span:nth-child(1) {
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-.eea-header-burger-action.mobile.open span:nth-child(2) {
-  width: 0%;
-  opacity: 0;
-}
-
-.eea-header-burger-action.mobile.open span:nth-child(3) {
-  -webkit-transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-  -o-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-
-.eea-header-search-action {
-  display: flex;
-  width: 30px;
-  height: 56px;
-  align-items: center;
-  justify-content: center;
-  background-color: @darkCyan;
-
-  .eea-header-search-action{
-    display: contents;
-  }
-
-  img {
-    width: 24px;
-  }
-
-  span {
-    position: absolute;
-    width: 16px;
-    height: 2px;
-    background-color: #ffffff;
-    border-radius: 9px;
-    cursor: pointer;
-  }
-
-  span:first-child {
-    transform: rotate(45deg);
-  }
-
-  span:last-child {
-    transform: rotate(135deg);
-  }
-}
-
-#eea-search-box {
-  position: relative;
-  z-index: 99999;
-  overflow: scroll;
-  width: 100%;
-  height: calc(100vh - 74px);
-  background: linear-gradient(340.97deg, @darkCerulean 9.19%, #009591 77.47%);
-
-  .ui.container {
-    height: 100%;
-    align-items: baseline;
-  }
-}
-
-.eea-search-body {
-  position: relative;
-  width: 100%;
-  margin: 135px 0 0 0;
-
-  i.icon {
-    color: @white;
-    font-size: 18px;
-    opacity: 1;
-  }
-}
-
-#eea-search-input {
-  padding: 18.5px;
-  border: none !important;
-  border-bottom: 2px solid !important;
-  background: transparent;
-  color: @white;
-  font-size: 18px;
-}
-
-.eea-advanced-search-button {
-  display: flex;
-  justify-content: center;
-  padding: 119px 0 0 0;
-
-  .ui.button {
-    box-sizing: border-box;
-    border: 2px solid @white;
-    background: transparent;
-    border-radius: 10px;
-    color: @white;
-    font-size: 18px;
-
-    &:active,
-    &:visited,
-    &:focus,
-    &:hover {
-      border: 2px solid @white;
-      background: transparent;
-      color: @white;
-    }
-  }
-
-  i.icon {
-    font-size: 18px;
-  }
-
-  .ui.labeled.icon.button > .icon {
-    left: 20px;
-    background: transparent;
-    opacity: 1;
-  }
-}
-
-.eea-top-header-language-dropdown .menu .option .text {
-  font-size: 12px;
-}
-
-@media only screen and (min-width: @tabletBreakpoint) {
-  #eea-search-box {
-    height: calc(100vh - 140px);
-  }
-
-  .eea-top-header {
-    height: 30px;
-  }
-
-  .eea-main-menu.ui.text.menu {
-    display: none;
-  }
-
-  .eea-header-burger-action.mobile {
-    display: flex;
-  }
-
-  #eea-official-union-mobile {
-    display: none;
-  }
-
-  #eea-official-union {
-    display: flex;
-  }
-
-  .eea-header-burger-action.mobile {
-    width: 66px;
-    height: 117px;
-
-    span {
-      width: 30px;
-      height: 4px;
-      margin: 4px;
-    }
-  }
-
-  .eea-header-search-action {
-    width: 66px;
-    height: 117px;
-
-    img {
-      width: 45px;
-    }
-
-    span {
-      width: 30px;
-      height: 4px;
-    }
-  }
-
-  img#eea-logo {
-    width: 100%;
-    max-width: 252px;
-    margin-top: 15px;
-  }
-
-  .eea-main-header {
-    .ui.container {
-      height: 117px;
-    }
-  }
-
-  #eea-top-header-language-dropdown {
-    font-size: 14px;
-  }
-
-  #eea-top-header-language-dropdown .menu {
-    top: 18px;
-    left: -127px;
-  }
-
-  .eea-top-header-language-dropdown .menu .option .text {
-    font-size: 1rem;
-  }
-}
-
-@media only screen and (min-width: @computerBreakpoint) {
-  #eea-search-box {
-    height: calc(100vh - 192px);
-  }
-
-  .eea-top-header {
-    height: 33px;
-  }
-
-  .eea-header-burger-action.mobile {
-    display: none;
-
-    span {
-      width: 44.21px;
-    }
-  }
-
-  #eea-top-header-theme-sites {
-    display: block;
-  }
-
-  .eea-advanced-search-button {
-    justify-content: flex-end;
-    padding: 74px 0 0 0;
-  }
-
-  .eea-main-menu.ui.text.menu {
-    display: flex;
-    width: 88%;
-    max-height: 20px;
-    justify-content: space-between;
-    margin: 0;
-  }
-
-  .eea-search-body {
-    margin: 280px 0 0 0;
-
-    i.icon {
-      font-size: 48px;
-    }
-  }
-
-  #eea-search-input {
-    border-bottom: 3px solid !important;
-    font-size: 48px;
-  }
-
-  .eea-advanced-search-button i.icon {
-    font-size: 18px !important;
-  }
-
-  #eea-official-union-mobile {
-    display: none;
-  }
-
-  #eea-official-union {
-    display: flex;
-  }
-
-  .eea-header-burger-action.desktop {
-    display: flex;
-    width: 72px;
-    height: 160px;
-
-    span {
-      width: 44.21px;
-    }
-  }
-
-  .eea-header-search-action {
-    width: 72px;
-    height: 160px;
-
-    span {
-      width: 44.21px;
-      height: 4px;
-    }
-  }
-
-  img#eea-logo {
-    width: 100%;
-    max-width: 348px;
-    margin-top: 20px;
-  }
-
-  .eea-main-header {
-    .ui.container {
-      height: 160px;
-    }
-  }
-}
-
-/************************
-      MEGA MENU
-************************/
-
-#eea-mega-menu-wrap {
-  position: relative;
-  z-index: 9999;
-  overflow: scroll;
-  width: 100%;
-  height: calc(100vh - 74px);
-  background: linear-gradient(180deg, #0065a4 39.58%, #043570 100%);
-
-  .ui.container {
-    height: 100%;
-    align-items: baseline;
-  }
-}
-
-#first-section-link {
-  display: block;
-}
-
-#trigger,
-.eea-mobile-menu-trigger {
-  display: none !important;
-}
-
-nav.eea-nav {
-  position: relative;
-  width: 100%;
-  margin-top: 40px;
-}
-
-nav.eea-nav ul,
-nav.eea-nav li {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-nav.eea-nav a,
-nav.eea-nav span {
-  display: block;
-  text-decoration: none;
-}
-
-nav.eea-nav a:hover,
-nav.eea-nav a:visited {
-  text-decoration: none;
-}
-
-.menu-bar {
-  display: flex;
-  background: transparent;
-}
-
-.menu-link {
-  position: relative;
-  z-index: 1;
-  padding: 10px;
-  background: transparent;
-  color: @white;
-  font-size: 30px;
-  transition: background 0.2s, color 0.2s;
-}
-
-a.menu-link:hover {
-  color: @white;
-}
-
-.menu-link[aria-haspopup='true'] {
-  padding-right: 40px;
-}
-
-.menu-link[aria-haspopup='true']:after {
-  position: absolute;
-  top: 50%;
-  right: 10px;
-  width: 30px;
-  height: 30px;
-  background-image: url(../assets/images/mega-menu-arrow.svg);
-  background-repeat: no-repeat;
-  background-size: 24px;
-  content: '';
-  font-size: 12px;
-  transform: translateY(-50%);
-}
-
-.mega-menu-header {
-  color: #136a73;
-  font-size: 1.2em;
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-.mega-menu {
-  z-index: 10;
-  background: transparent;
-}
-
-.mega-menu--multiLevel {
-  flex-direction: column;
-}
-@media only screen and (min-width: @tabletBreakpoint) {
-  nav.eea-nav {
-    margin-top: 200px;
-    background: transparent;
-  }
-
-  .nav.eea-nav > nav {
-    max-width: 900px;
-    margin: 0 auto;
-  }
-
-  .menu [aria-haspopup='true'] ~ ul {
-    display: none;
-  }
-
-  .menu-link {
-    padding: 20px 25px;
-  }
-
-  .menu-bar {
-    position: relative;
-  }
-
-  .menu-bar > li > [aria-haspopup='true']:after {
-    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#accent');
-  }
-
-  .menu-bar > li > [aria-haspopup='true']:hover:after {
-    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#light');
-  }
-
-  .menu-bar > li > [aria-haspopup='true']:focus ~ ul {
-    display: flex;
-    animation: dropdown 0.2s ease-out;
-    transform-origin: top;
-  }
-
-  .menu-bar > li > [aria-haspopup='true'] ~ ul:hover {
-    display: flex;
-  }
-
-  .menu-bar > li:focus-within > [aria-haspopup='true'] ~ ul {
-    display: flex;
-  }
-
-  .menu-bar > li > [aria-haspopup='true']:focus,
-  .menu-bar > li:focus-within > [aria-haspopup='true'],
-  .menu-bar > li:hover > a {
-    background: #177e89;
-    color: #ffffff;
-  }
-
-  .menu-bar > li > [aria-haspopup='true']:focus:after,
-  .menu-bar > li:focus-within > [aria-haspopup='true']:after,
-  .menu-bar > li:hover > a:after {
-    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowTop.svg#light');
-  }
-
-  .mega-menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-  }
-
-  .mega-menu:hover {
-    display: flex;
-  }
-
-  .mega-menu a:hover {
-    color: @white;
-  }
-
-  .mega-menu--multiLevel > li {
-    width: 33.333333333333%;
-  }
-
-  .mega-menu--multiLevel > li > [aria-haspopup='true'] ~ ul {
-    left: 33.333333333333%;
-    width: 33.333333333333%;
-  }
-
-  .mega-menu--multiLevel > li > [aria-haspopup='true'] ~ ul ul {
-    left: 100%;
-    width: 100%;
-  }
-
-  .mega-menu--multiLevel li:hover > [aria-haspopup='true'] ~ ul {
-    display: block;
-    animation: flyout 0.2s ease-out;
-    transform-origin: left;
-  }
-
-  .mega-menu--multiLevel li:focus-within > [aria-haspopup='true'] ~ ul {
-    display: block;
-  }
-
-  .mega-menu--multiLevel li:hover > [aria-haspopup='true'],
-  .mega-menu--multiLevel li:hover > a,
-  .mega-menu--multiLevel li:focus-within > [aria-haspopup='true'],
-  .mega-menu--multiLevel li:focus-within > a {
-    color: @white;
-  }
-
-  .mega-menu--multiLevel [aria-haspopup='true'] ~ ul:hover,
-  .mega-menu--multiLevel [aria-haspopup='true']:hover {
-    display: block;
-  }
-
-  .mega-menu--multiLevel [aria-haspopup='true'] ~ ul {
-    position: absolute;
-    top: 0;
-    height: 100%;
-  }
-
-  .mega-menu--flat > * {
-    flex: 1;
-  }
-
-  .eea-mobile-menu-trigger,
-  .mobile-menu-header,
-  .mobile-menu-back-item {
-    display: none;
-  }
-}
-@media only screen and (max-width: @largestMobileScreen) {
-  #eea-mega-menu-wrap {
-    height: calc(100vh - 140px);
-  }
-
-  .nav.eea-nav {
-    padding: 20px;
-  }
-
-  .mobile-menu-header,
-  .mobile-menu-back-item {
-    display: block;
-  }
-
-  .mobile-menu-header {
-    order: -1;
-    background: grey;
-  }
-
-  .mobile-menu-header a {
-    padding: 20px 25px;
-    color: #ffffff;
-    visibility: visible;
-  }
-
-  .menu-bar {
-    top: 0;
-    width: 100%;
-    max-width: 100%;
-    flex-direction: column;
-    overflow-x: hidden;
-    transition: left 0.3s;
-  }
-
-  .menu-bar > li > [aria-haspopup='true'] ~ ul {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    width: 100%;
-    max-height: 100vh;
-    flex-direction: column;
-    background: transparent;
-    transition: left 0.3s;
-  }
-
-  .menu-bar > li > [aria-haspopup='true'] ~ ul > li > [aria-haspopup='true'],
-  .menu-bar > li,
-  .menu-bar > li a {
-    font-size: 18px;
-    font-weight: bold;
-  }
-
-  .menu-bar
-    > li
-    > [aria-haspopup='true']
-    ~ ul
-    > li
-    > [aria-haspopup='true']
-    ~ ul
-    a {
-    padding-left: 40px;
-  }
-
-  .menu-bar
-    > li
-    > [aria-haspopup='true']
-    ~ ul
-    > li
-    > [aria-haspopup='true']
-    ~ ul
-    > li
-    > [aria-haspopup='true']
-    ~ ul
-    a {
-    padding-left: 80px;
-  }
-
-  .menu-bar > li > [aria-haspopup='true'] ~ ul [aria-haspopup='true'] {
-    color: @white;
-  }
-
-  .menu-bar > li > [aria-haspopup='true'] ~ ul [aria-haspopup='true']:after {
-    height: 20px;
-    background: none;
-    content: '';
-    font-size: 1em;
-    font-weight: normal;
-    line-height: 1;
-  }
-
-  .menu-bar > li > [aria-haspopup='true'] ~ ul [aria-haspopup='true'] ~ ul {
-    max-height: 0px;
-    transform: scaleY(0);
-    transform-origin: top;
-    transition: max-height 0.1s;
-  }
-
-  .mega-menu-content {
-    padding: 20px 25px;
-  }
-
-  .mobile-menu-back-item {
-    order: -1;
-  }
-
-  .mobile-menu-back-item a {
-    max-height: calc(1.4em + 40px);
-    margin-top: calc(0px - (1.4em + 40px));
-    background: tint(grey, 70%);
-    color: #2a2a2a;
-    pointer-events: none;
-  }
-
-  .mobile-menu-back-item a:before {
-    display: inline-block;
-    width: 14px;
-    height: 12px;
-    margin-right: 10px;
-    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowLeft.svg#default');
-    background-size: 14px;
-    content: '';
-  }
-
-  .eea-mobile-menu-trigger:focus ~ ul {
-    left: 0;
-  }
-
-  .menu-bar:hover,
-  .menu-bar:focus-within {
-    left: 0;
-  }
-
-  .menu-bar > li > [aria-haspopup='true']:focus ~ ul {
-    left: 0;
-  }
-
-  .menu-bar > li > [aria-haspopup='true'] ~ ul:hover,
-  .menu-bar > li > [aria-haspopup='true'] ~ ul:focus-within {
-    left: 0;
-  }
-
-  .menu-bar
-    > li
-    > [aria-haspopup='true']
-    ~ ul
-    [aria-haspopup='true']:focus
-    ~ ul {
-    max-height: 500px;
-    animation: dropdown 0.3s forwards;
-  }
-
-  .menu-bar
-    > li
-    > [aria-haspopup='true']
-    ~ ul
-    li:focus-within
-    > [aria-haspopup='true']
-    ~ ul {
-    max-height: 500px;
-    transform: scaleY(1);
-  }
-
-  .menu-bar > li:focus-within ~ .mobile-menu-header a {
-    visibility: hidden;
-  }
-}
-@media only screen and (max-width: @largestMobileScreen) and (hover: none) {
-  .eea-mobile-menu-trigger:hover ~ ul {
-    left: 0;
-  }
-
-  .menu-bar > li > [aria-haspopup='true']:hover ~ ul {
-    left: 0;
-  }
-
-  .menu-bar > li > [aria-haspopup='true'] ~ ul:hover {
-    left: 0;
-  }
-
-  .menu-bar
-    > li
-    > [aria-haspopup='true']
-    ~ ul
-    [aria-haspopup='true']:hover
-    ~ ul {
-    max-height: 500px;
-    animation: dropdown 0.3s forwards;
-  }
-
-  .menu-bar
-    > li
-    > [aria-haspopup='true']
-    ~ ul
-    [aria-haspopup='true']
-    ~ ul:hover {
-    max-height: 500px;
-    transform: scaleY(1);
-  }
-
-  .menu-bar > li:hover ~ .mobile-menu-header a {
-    visibility: hidden;
-  }
-}
-@keyframes dropdown {
-  0% {
-    opacity: 0;
-    transform: scaleY(0);
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    transform: scaleY(1);
-  }
-}
-@keyframes flyout {
-  0% {
-    opacity: 0;
-    transform: scaleX(0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scaleX(1);
-  }
-}
-
-@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
-  li {
-    font-size: 20px;
-
-    a.menu-link {
-      font-size: 24px;
-    }
-  }
-
-  .menu-link[aria-haspopup='true']:after {
-    height: 20px;
-    background-size: 14px;
-  }
-}
-
-@media only screen and (max-width: @largestMobileScreen) {
-  li {
-    font-size: 18px;
-
-    a.menu-link {
-      font-size: 18px;
-    }
-  }
-}
-@media only screen and (min-width: @computerBreakpoint) {
-  .menu-link.mega-menu-link.mega-menu-first-level {
-    padding: 30px 25px;
-    font-size: 48px;
-  }
-
-  .menu-link.menu-list-link.mega-menu-second-level {
-    padding: 25px 25px;
-    font-size: 40px;
-  }
-
-  .menu-link.menu-list-link.mega-menu-third-level {
-    padding: 18px 25px;
-    font-size: 36px;
-  }
-
-  #eea-mega-menu-wrap {
-    height: calc(100vh - 192px);
-  }
-}
-
-ul.mega-menu.mega-menu--multiLevel > li:last-child {
-  margin-bottom: 50px;
-}
-
-//** MEGA MENU REVISIT **//
-
-#eea-mega-menu-wrap {
-
-  .ui.vertical.menu{
-    background: transparent;
-    border: none;
-  }
-
-  .ui.dropdown {
-    border: none !important;
-
-    .active {
-      border:none;
-    }
-  }
-
-  .ui.menu .dropdown.item .menu {
-    background: transparent;
-    border: none;
-  }
-
-
-  .ui.vertical.menu .dropdown.item .menu{
-    top:0 !important;
-    margin-top: 0 !important;
-  }
-
-  .ui.vertical.menu .item > .menu.hidden {
-    display: none;
-  }
-
-  
-}
-
-#desktop-menu{
-    display: none;
-}
-
-@media only screen and (min-width: @computerBreakpoint) {
-  #desktop-menu{
-    display: block;
-  }
-
-  #mobile-menu{
-    display: none;
-  }
-}