/* This stylesheet is used in the 2022 Refresh of this website */

/* Colour references

Dark blue = #002F87
Light blue = #0070CE

Dark orange = #D65C14

Green = #4A9C2F

*/

/* Container */
/* .eac-container {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 1rem;
}

/* Icon */
/*img.eac-icon {
    width: 20px;
}
img.eac-icon.eac-icon-mr {
    margin-right: 15px;
}

/* Header */
/*.eac-header-top {
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
    /* Logo img */
    /*.eac-header-top a img.header-logo {
        max-width: 220px;
        margin: 0 auto;
        margin-right: 30px;
    }
    /* Header info */
    /*.eac-header-info {

    }
        .eac-header-info h1 {
            color: #D65C14;
            display: none; /*  hide on smaller displays */
       /* }*/
    /* Header icons/info */
    /*.eac-header-icons {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
    }
        .eac-header-icons li a {
            display: flex;
            align-items: center;
            padding: .8rem 1rem;
            border-radius: .5rem;
            transition: ease-in-out .2s;
        }
            /* Hover */
            /*.eac-header-icons li a:hover {
                background-color: #cfe0ff;
            }
        
/*@media screen and (min-width: 768px) {
    .eac-header-info h1 {
        display: inherit;
    }
}*/
body {
  margin: 0;
  padding: 0;
  font-family: "Raleway", sans-serif;
  line-height: inherit !important;
}

*:focus {
  outline-color: rgb(40, 40, 40);
  outline-offset: -2px;
  outline-style: auto;
  outline-width: 5px;
}

:root {
  --darkblue: #002f87;
  --blue: #0070ce;
  --darkorange: #c55d25;
  --orange: #d65c14;
  --green: #4a9c2f;
  --text: #999999;
  --gray: #596670;
  font-size: 16px;
}

/** GENERIC EAC BUTTON **/
.eac-styled-button {
  box-sizing: border-box;
  background-image: linear-gradient(
    to top,
    var(--blue) 51%,
    var(--darkblue) 50%
  );
  background-size: 100% 200%;
  background-position: top;

  color: white;
  font-weight: 600;
  padding: 0.8em 1.2em;
  border: 3px solid var(--blue);
  margin: 1em 0;
  display: inline-block;
  transition: ease-in-out 0.2s;
  cursor: pointer;
  text-decoration: none;
}
.eac-styled-button:hover,
.eac-styled-button:focus {
  background-position: bottom;
}

/* Generic ROW flexbox for elements */
.eac-flexbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.eac-flexbox-justify-start {
  justify-content: start;
}
/* A spacer element */
.eac-flexbox-spacer {
  flex: 1;
}

/* Generic page container for elements */
.eac-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Generic styling for svg ICONS */
.eac-icon {
  width: 18px;
  color: red;
}
.eac-icon-right {
  margin-right: 0.8em;
}

/* Generic EAc button reset */
.eac-button-reset {
  background-color: transparent;
  padding: 0;
  margin: 0;
  border: none;
}

/* Generic Community Plan style border */
.eac-fancy-border {
  border-image: linear-gradient(
      to right,
      var(--darkblue) 25%,
      var(--green) 25%,
      var(--green) 50%,
      var(--orange) 50%,
      var(--orange) 75%,
      var(--gray) 75%
    )
    5;
}

/**
    EAC HEADER
    Logo, navigation items, mobile menu
*/
.eac-header {
  padding: 15px 20px;
  border-top: 6px solid;
}

/* Main logo image */
.eac-header-logo {
  margin-right: 30px;
}
.eac-header-logo img {
  width: 200px;
}
@media screen and (min-width: 400px) {
  .eac-header-logo img {
    width: 300px;
  }
}

/**
  EAC NAVIGATION BAR
**/
.eac-nav ul.eac-flexbox {
  display: none;
  list-style-type: none;
}

@media screen and (min-width: 1200px) {
  .eac-nav ul.eac-flexbox {
    display: flex;
  }
  #eac-mobile-toggle {
    display: none;
  }
}

/* List item */
.eac-nav ul.eac-flexbox > li {
  font-size: 1.1em;
  position: relative;
}
.eac-nav ul.eac-flexbox > li > a {
  text-decoration: none;
  font-weight: 700;
  color: var(--darkblue);
  transition: ease-in-out 0.2s;
}
.eac-nav ul.eac-flexbox > li:hover > .eac-hover-submenu,
.eac-nav ul.eac-flexbox > li > a:focus + .eac-hover-submenu,
.eac-hover-submenu:focus-within {
  opacity: 1;
  pointer-events: all;
}
.eac-nav ul.eac-flexbox > li:hover > a {
  color: var(--blue);
}
.eac-nav ul.eac-flexbox > li:not(:first-child) {
  margin-left: 1.8em;
}

/** HOVER SUB MENU **/
.eac-hover-submenu {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 0;
  padding-top: 20px;
  transition: ease-in-out 0.09s;
}
.eac-hover-submenu ul {
  list-style-type: none;
  width: 300px;
  padding-left: 0;
  background-color: rgba(43, 54, 61, 0.99);
  box-shadow: 0px 0px 5px rgb(1, 1, 1, 0.25);
}

.eac-sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.eac-hover-submenu ul > li:hover {
  background-color: rgb(255, 255, 255, 0.2);
}
.eac-nav
  > ul.eac-flexbox
  > li:nth-of-type(3n + 0)
  > .eac-hover-submenu
  ul
  > li:hover
  a,
.eac-nav
  > ul.eac-flexbox
  > li:nth-of-type(3n + 0)
  > .eac-hover-submenu
  ul
  > li
  > a:focus {
  border-left-color: var(--blue);
}
.eac-nav
  > ul.eac-flexbox
  > li:nth-of-type(3n + 1)
  > .eac-hover-submenu
  ul
  > li:hover
  a,
.eac-nav
  > ul.eac-flexbox
  > li:nth-of-type(3n + 1)
  > .eac-hover-submenu
  ul
  > li
  > a:focus {
  border-left-color: var(--green);
}
.eac-nav
  > ul.eac-flexbox
  > li:nth-of-type(3n + 2)
  > .eac-hover-submenu
  ul
  > li:hover
  a,
.eac-nav
  > ul.eac-flexbox
  > li:nth-of-type(3n + 2)
  > .eac-hover-submenu
  ul
  > li
  > a:focus {
  border-left-color: var(--orange);
}
.eac-hover-submenu ul > li a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 1em;
  border-bottom: 1px solid var(--gray);
  border-left: 10px solid var(--gray);
  font-size: 0.9em;
}

/**
  EAC CONTACT BAR
  Contacts social media links,
  emails and telephone  numbers
*/
.eac-contact-bar {
  width: 100%;
  background-color: rgb(240, 240, 240);
  color: rgb(116, 116, 116);
}
.eac-contact-bar .eac-flexbox {
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
}
.eac-contact-bar .contact-item {
  flex-wrap: nowrap;
  justify-content: start;
  padding: 0.8em 1.5em;
  color: white !important;
  font-size: 0.9em !important;
}
.eac-contact-bar .contact-item:nth-of-type(1) {
  background-color: var(--blue);
}
.eac-contact-bar .contact-item:nth-of-type(2) {
  background-color: var(--green);
}
.eac-contact-bar .contact-item:nth-of-type(3) {
  background-color: #1da1f2;
}
.eac-contact-bar .contact-item:nth-of-type(4) {
  background-color: #4267b2;
}
.eac-contact-bar .contact-item h4 {
  margin: 0;

  word-break: break-all;
}
.eac-contact-bar a {
  text-decoration: none;
  color: inherit;
}

/**
Shrink the contact items when screen gets largr
*/
@media screen and (min-width: 570px) {
  .eac-contact-bar .contact-item {
    width: 50%;
  }
}

/**
Shrink the contact items when screen gets largr
*/
@media screen and (min-width: 850px) {
  .eac-contact-bar .contact-item {
    width: auto;
  }
  .eac-contact-bar .contact-item:nth-of-type(3) h4,
  .eac-contact-bar .contact-item:nth-of-type(4) h4 {
    display: none;
  }
  .eac-contact-bar .contact-item:nth-of-type(3) img,
  .eac-contact-bar .contact-item:nth-of-type(4) img {
    margin-right: 0;
  }
}

/** MOBILE MENU **/
#eac-mobile-toggle {
  width: 25px;
  cursor: pointer;
}

/** MOBILE NAVIGATION **/
#mobile-navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(1, 1, 1, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: ease-in-out 0.1s;
  display: none;
  z-index: 150;
}
/**  Mobile drawer that pops out of the left side */

#mobile-navigation.mobile-open {
  opacity: 1;
  pointer-events: all;
}

.mobile-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;

  width: 100%;
  max-width: 350px;
  background-color: white;
  z-index: 99;
}

#mobile-drawer-close {
  cursor: pointer;
  margin-right: 0.5em;
}
#mobile-drawer-close img {
  width: 30px;
}

.mobile-drawer-top {
  padding: 1em;
}

.mobile-logo {
  width: 200px;
}
@media screen and (min-width: 400px) {
  .mobile-logo {
    width: 250px;
  }
}

.mobile-drawer > ul {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding-left: 0;
  margin-top: 1em;
}
.mobile-drawer > ul > li > div:first-child {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.mobile-drawer > ul > li > div:first-child:hover {
  background-color: rgba(0, 112, 206, 0.2);
}
.mobile-drawer > ul > li > div:first-child a {
  color: var(--darkblue);
  font-weight: 600;
  font-size: 1.2em;
  text-decoration: none;
  flex: 1;
  padding: 1em;
}
.mobile-drawer > ul > li > div:first-child button img {
  padding: 1em;
}
.mobile-drawer > ul > li > div:first-child button.open img {
  transform: rotate(180deg);
}
.mobile-drawer > ul > li img {
  width: 15px;
  cursor: pointer;
}

.mobile-sub-menu {
  flex-direction: column;
  list-style-type: none;
  padding-left: 0em;
  display: none;
}
.mobile-sub-menu.mobile-sub-menu-open {
  display: flex;
}
.mobile-sub-menu > li {
  background-color: rgb(230, 230, 230);
  border-bottom: 1px solid rgb(177, 177, 177);
}
.mobile-sub-menu > li:hover {
  background-color: rgb(218, 216, 216);
}
.mobile-sub-menu > li:first-child {
  border-top: 1px solid rgb(177, 177, 177);
}
.mobile-sub-menu > li > a {
  text-decoration: none;
  padding: 1em;
  display: block;
  color: rgb(60, 60, 60);
  font-weight: 500;
}

/** HOMEPAGE **/

/** Home tiles **/
.eac-home-tiles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 2em;
  gap: 1.5em;
  padding: 0 1em;
}

/* space the tiles out more on bigger devices */
@media screen and (min-width: 1000px) {
  .eac-home-tiles {
    margin-top: 4em;
  }
}

.eac-home-tiles > .eac-tile {
  min-width: 200px;
  flex: 1;
  background-size: 100% 200%;
  background-position: top;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1em;
  border-right: 5px solid;
  border-bottom: 5px solid;
  transition: ease-in-out 0.3s;
  cursor: pointer;
  text-decoration: none;
}
.eac-home-tiles > .eac-tile:hover,
.eac-home-tiles > .eac-tile:focus {
  background-position: bottom;
}
.eac-home-tiles > .eac-tile:hover h1,
.eac-home-tiles > .eac-tile:focus h1,
.eac-home-tiles > .eac-tile:hover p,
.eac-home-tiles > .eac-tile:focus p,
.eac-home-tiles > .eac-tile:hover h3,
.eac-home-tiles > .eac-tile:focus h3 {
  color: white;
}

.eac-home-tiles > .eac-tile:nth-child(1) {
  border-color: var(--darkblue);
  background-image: linear-gradient(
    to top,
    var(--darkblue) 50%,
    rgb(240, 240, 240) 50%
  );
}

.eac-home-tiles > .eac-tile:nth-child(2) {
  border-color: var(--green);
  background-image: linear-gradient(
    to top,
    var(--green) 50%,
    rgb(240, 240, 240) 50%
  );
}

.eac-home-tiles > .eac-tile:nth-child(3) {
  border-color: var(--darkorange);
  background-image: linear-gradient(
    to top,
    var(--darkorange) 50%,
    rgb(240, 240, 240) 50%
  );
}

.eac-home-tiles > .eac-tile:nth-child(4) {
  border-color: var(--gray);
  background-image: linear-gradient(
    to top,
    var(--gray) 50%,
    rgb(240, 240, 240) 50%
  );
}

.eac-home-tiles > .eac-tile h1 {
  margin: 0;
  color: rgb(20, 20, 20);
  transition: cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.2s;
}

.eac-home-tiles > .eac-tile p {
  font-weight: 500;
  color: rgb(40, 40, 40);
  font-size: 1.1em;
  line-height: 1.4em;
  transition: cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.15s;
  margin: 1em 0;
}

.eac-home-tiles > .eac-tile h3 {
  transition: ease-out 0.3s;
  margin: 0;
  text-decoration: underline;
  color: rgb(20, 20, 20);
}

/** EAC HOMEPAGE TEXT AND IMAGE COMBO (SEE 'WHO WE ARE', 'OUR-VISION' etc.) **/
.eac-homepage-text-image {
  padding: 0 1em;
  margin-top: 2em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 3em;
  flex-wrap: wrap;
}
@media screen and (min-width: 1000px) {
  .eac-homepage-text-image {
    margin-top: 5em;
  }
}

/* Reverse the text-image on the second section */
.eac-homepage-text-image#who-we-are {
  flex-direction: row-reverse;
}

.eac-homepage-text-image h2 {
  font-size: 2.2em;
  font-weight: 800;
  margin-bottom: 0;
  color: rgb(40, 40, 40);
  margin-top: 0;
}

.eac-homepage-text-image p {
  font-weight: 600;
  color: rgb(82, 82, 82);
  margin-top: 0.8em;
  line-height: 1.6em;
  margin-bottom: 1em;
}

.eac-homepage-text-image > div {
  flex: 2;
}

.eac-homepage-text-image img {
  height: 200px;
  width: 100%;
  object-fit: contain;
  /* border: 1px solid var(--blue); */
  /*box-shadow: 0 0 28px rgb(40, 40, 40, 0.2);*/
}
@media screen and (min-width: 768px) {
  .eac-homepage-text-image img {
    max-width: 400px;
  }
}
@media screen and (min-width: 1200px) {
  .eac-homepage-text-image img {
    max-width: 550px;
  }
}
/* 
/** HEXAGON STUFF 
#our-themes {
  margin-top: 5em;
}

#hexagon-container {
  position: absolute;
  margin: 0 auto;
  top: 300px;
  z-index: -1;
  transform: rotate(38deg);
  opacity: .2;
  left: 20px;
}

.hexagon {
  position: relative;
  width: 200px; 
  height: 115.47px;
  background-color: #002f87;
  margin: 57.74px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 57.74px solid #002f87;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 57.74px solid #002f87;

}

/** HEX 1 (GREEN) 
#hex-1 {
  background-color: var(--green);
  left: calc(50% - (100px));
}
#hex-1:after {
  border-top-color: var(--green);
}
#hex-1:before {
  border-bottom-color: var(--green);
}
#hex-1 {
  left: calc(50% - (100px));
}

/** HEX 2 (BLUE) 
#hex-2 {
  left: calc(50% - (210px));
  top: 15px;
}

/** HEX 3 (ORANGE 
#hex-3 {
  background-color: var(--orange);
  left: calc(50% - (100px));
  top: -159px;
  left: calc(50% + 12px);
}
#hex-3:after {
  border-top-color: var(--orange);
}
#hex-3:before {
  border-bottom-color: var(--orange);
} */

/** OUR THEMES */
#our-themes {
  box-sizing: border-box;
  margin-top: 2em;
  /* background-color: rgb(240, 240, 240); */
  padding: 1em;
  border-top: 5px solid;
  /* border-bottom: 5px solid; */
  /* border-top-color: var(--darkblue);
  border-right-color: var(--green);
  border-bottom-color: var(--orange);
  border-left-color: var(--gray); */
}
@media screen and (min-width: 1200px) {
  #our-themes {
    margin-top: 5em;
    padding: 4em 2em;
  }
}

#our-themes h2, #our-themes h3, #our-themes > p {
  text-align: center;
}

#our-themes h2, h3 {
  color: rgb(40, 40, 40);
  margin: 0;
}
#our-themes h2 {
  font-size: 2em;
  font-weight: 800;
}
#our-themes h3 {
  padding: 1em 0;
}

#our-themes p {
  font-weight: 600;
  color: rgb(82, 82, 82);
  margin-top: 0.8em;
  line-height: 1.6em;
  margin-bottom: 1em;
}

#our-themes > .eac-flexbox {
  flex-wrap: wrap;
  margin-top: 2em;
  align-items: start;
  gap: 2em;
}
@media screen and (min-width: 768px) {
  #our-themes > .eac-flexbox {
    gap: 0em;
    margin-top: 4em;
  }
}

#our-themes .theme-card {
  flex: 1;
  flex-basis: 300px;
}

#our-themes .theme-card h3 {
  text-decoration: underline;
  transition: ease-in-out .1s;
}
#our-themes .theme-card > a:hover h3,
#our-themes .theme-card > a:focus h3 {
  color: var(--blue);
}

#our-themes .theme-card img {
  width: 100%;
  box-shadow: 0 0 28px rgb(40, 40, 40, 0.2);
}

#our-themes .theme-card p {
  margin-top: 0.5em;
  margin-right: 2em;
}

/** START OF OUR PARTNERS SECTION **/
#our-partners {
  margin-top: 2em;
}

#our-partners > .eac-flexbox {
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
  margin-top: 2em;
  max-height: 400px;
  overflow-y: auto;
}


@media screen and (min-width: 768px) {
  #our-partners {
    margin-top: 4em;
  }
  #our-partners > .eac-flexbox {
    margin-top: 4em;
  }
}


#our-partners img {
  filter: grayscale(100%);
  transition: ease-in-out .2s;
}

#our-partners img:hover,
#our-partners a:focus > img {
  filter: none;
}

#our-partners h2 {
  font-size: 2em;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.3em;
}
#our-partners p {
  text-align: center;
  font-weight: 600;
  color: rgb(82, 82, 82);
  line-height: 1.6em;
  margin-bottom: 1em;
}

/** START OF FOOTER */
#footer {
  margin-top: 3em;
  width: 100%;
  background-color: var(--darkblue);
}


.footer-info-cards {
  flex-wrap: wrap;
  box-sizing: border-box;
  align-items: start;
  justify-content: space-between;
  padding: 1em;
}

.eac-footer-card {
  padding: 1em 0;
  flex: 1;
  flex-basis: 300px;
}


@media screen and (min-width: 1200px) {
  #footer {
    margin-top: 7em;
  }
  .footer-info-cards {
    gap: 3em;
    padding: 2em 0;
  }
  .eac-footer-card {
    padding: 0em 0;
  }
}

#footer-logo {
  color: white;
  font-weight: 300;
  line-height: 1.2em;
  font-size: 1.5em;
  margin-bottom: 0.7em;
  margin-top: 0;
}
#footer-logo > span {
  font-weight: 700;
}

#footer p, #footer a {
  color: rgb(220,220,220);
  margin: .5em 0;
}



.eac-footer-card h4 {
  font-size: 1.2em;
  font-weight: 500;
  margin: 0;
  margin-bottom: 1.2em;
  color: white;
}

.eac-footer-card ul {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: .8em;
}
.eac-footer-card ul a {
  margin: 0 !important;
  text-decoration: none;
  justify-content: start;
}

.eac-footer-card ul li {
  vertical-align: middle;
}

#footer-plan-banner {
  width: 100%;
  background-color: white;
  border-top: 5px solid;
  color: rgb(40,40,40);
}
#footer-plan-banner > .eac-container {
  padding: 1em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

@media screen and (min-width: 1200px) {
  #footer-plan-banner > .eac-container {
    padding: 1em 0;
  }
}



#footer-plan-banner h3 {
  font-size: 1.5em;
  font-weight: 700;
  color: rgb(40,40,40);
}
#footer-plan-banner p {
  color: rgb(60,60,60);
  font-weight: 600;
  font-size: 1.1em;
}

/**

STYLE.CSS OVERWRITES

**/

/* Correct font-size */
body header.eac-header,
body section.eac-contact-bar,
body #footer {
  font-size: 16px;
  font-family: "Raleway";
}

body section.eac-contact-bar > div > a > h4 {
  color: white;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

body header.eac-header > div > nav > ul > li > a {
  font-size: 1.1em;
}

body header.eac-header > div > a.eac-header-logo img {
  max-width: inherit;
}

body #footer a img {
  display: inline-block;
}

body #footer p {
  padding: 0;
}

/* Page header */
.page-header {
  background-color: white !important;
    border-image: linear-gradient(
    to right,
    var(--darkblue) 25%,
    var(--green) 25%,
    var(--green) 50%,
    var(--orange) 50%,
    var(--orange) 75%,
    var(--gray) 75%
  )
  5;
  border-bottom: 5px solid;
}