/* -------------------------------------------------------------------------- */
/*                                   Colors                                   */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                                   Color Functions                                  */
/* -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap");
.bg-green {
  background-color: #7ddf64;
}

.text-green {
  color: #7ddf64;
}

.bg-aqua {
  background-color: #25c3d1;
}

.text-aqua {
  color: #25c3d1;
}

.bg-orange {
  background-color: #f49f0a;
}

.text-orange {
  color: #f49f0a;
}

.bg-red {
  background-color: #ff6b6b;
}

.text-red {
  color: #ff6b6b;
}

.bg-indigo {
  background-color: #56638a;
}

.text-indigo {
  color: #56638a;
}

.bg-pale-grey {
  background-color: #F5F5F5;
}

.text-pale-grey {
  color: #F5F5F5;
}

.bg-light-grey {
  background-color: #cdcdcd;
}

.text-light-grey {
  color: #cdcdcd;
}

.bg-grey {
  background-color: #c2c1c1;
}

.text-grey {
  color: #c2c1c1;
}

.bg-dark-grey {
  background-color: #8E8E8E;
}

.text-dark-grey {
  color: #8E8E8E;
}

.bg-charcoal {
  background-color: #5C5C5C;
}

.text-charcoal {
  color: #5C5C5C;
}

/* -------------------------------------------------------------------------- */
/*                                    Fonts                                   */
/* -------------------------------------------------------------------------- */
@font-face {
  font-family: "Aiglon Wide";
  src: url("../wan-ifra-amg/assets/fonts/AiglonWePWide-Demi.woff2");
}
@font-face {
  font-family: "Aiglon";
  src: url("../wan-ifra-amg/assets/fonts/AiglonWeP-Bold.woff2");
}
/* -------------------------------------------------------------------------- */
/*                                 Breakpoints                                */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                              // media queries                              */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                                 Breakpoints                                */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                              Key issue buttons                             */
/* -------------------------------------------------------------------------- */
.btn-issue .icon {
  color: white;
  border-radius: 5px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 8px;
}
.btn-issue .icon img {
  height: 1rem;
}

.btn.btn-light.shadow-none.btn-issue.btn-energy.active, .btn.btn-light.shadow-none.btn-issue.btn-energy:hover {
  background: #f49f0a;
  color: white !important;
}

.btn-energy .icon {
  background: #f49f0a;
}

.btn.btn-light.shadow-none.btn-issue.btn-land.active, .btn.btn-light.shadow-none.btn-issue.btn-land:hover {
  background: #7ddf64;
  color: white !important;
}

.btn-land .icon {
  background: #7ddf64;
}

.btn.btn-light.shadow-none.btn-issue.btn-water.active, .btn.btn-light.shadow-none.btn-issue.btn-water:hover {
  background: #25c3d1;
  color: white !important;
}

.btn-water .icon {
  background: #25c3d1;
}

.btn.btn-light.shadow-none.btn-issue.btn-conservation.active, .btn.btn-light.shadow-none.btn-issue.btn-conservation:hover {
  background: #56638a;
  color: white !important;
}

.btn-conservation .icon {
  background: #56638a;
}

.btn.btn-light.shadow-none.btn-issue.btn-responses.active, .btn.btn-light.shadow-none.btn-issue.btn-responses:hover {
  background: #ff6b6b;
  color: white !important;
}

.btn-responses .icon {
  background: #ff6b6b;
}

/* -------------------------------------------------------------------------- */
/*                   Key issue buttons on the project pages                   */
/* -------------------------------------------------------------------------- */
a.btn.btn-light.btn-issue-general {
  color: white;
  height: 2.5rem;
  width: 2.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
a.btn.btn-light.btn-issue-general .icon img {
  width: 1.5rem;
  height: 1.5rem;
}

a.btn.btn-light.btn-issue-general.btn-sm {
  color: white;
  height: 1.5rem;
  width: 1.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
a.btn.btn-light.btn-issue-general.btn-sm .icon img {
  width: 1rem;
  height: 1rem;
}

.btn-energy.btn-issue-general {
  background-color: #f49f0a !important;
}
.btn-energy.btn-issue-general:hover {
  border: 2px solid #e09209;
}

.btn-land.btn-issue-general {
  background-color: #7ddf64 !important;
}
.btn-land.btn-issue-general:hover {
  border: 2px solid #6fdc53;
}

.btn-water.btn-issue-general {
  background-color: #25c3d1 !important;
}
.btn-water.btn-issue-general:hover {
  border: 2px solid #22b3c0;
}

.btn-conservation.btn-issue-general {
  background-color: #56638a !important;
}
.btn-conservation.btn-issue-general:hover {
  border: 2px solid #4e5a7d;
}

.btn-responses.btn-issue-general {
  background-color: #ff6b6b !important;
}
.btn-responses.btn-issue-general:hover {
  border: 2px solid #ff5757;
}

a.btn-light.share-btn {
  color: #8E8E8E;
  height: 2.5rem;
  width: 2.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
a.btn-light.share-btn i {
  font-size: 1.5rem;
}

/* -------------------------------------------------------------------------- */
/*                    Location button on the projects page                    */
/* -------------------------------------------------------------------------- */
a.btn.btn-light.btn-location-general {
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  text-transform: capitalize;
}

a.btn.btn-light.btn-location-general.btn-sm {
  height: 1.8rem;
  font-size: 1.5;
}

/* -------------------------------------------------------------------------- */
/*                               Bootstrap Staples                              */
/* -------------------------------------------------------------------------- */
.btn {
  transition: all 0.3s;
}

.btn.btn-light {
  color: #8E8E8E;
  margin-bottom: 5px;
  background: #F5F5F5;
}
.btn.btn-light:hover {
  background: #8E8E8E;
  color: white;
}

.btn.btn-light.active {
  background: #8E8E8E;
  color: white;
}

.btn.btn-success {
  background-color: #7ddf64 !important;
  border: none;
  margin-bottom: 5px;
  background: #F5F5F5;
  color: white;
  font-weight: 600;
}

.btn.btn-primary {
  background-color: #56638a !important;
  border: none;
  margin-bottom: 5px;
  background: #F5F5F5;
  color: white;
}

.button-icon {
  margin-left: 15px;
}

/* -------------------------------------------------------------------------- */
/*                             List group buttons                             */
/* -------------------------------------------------------------------------- */
.list-group {
  border-radius: 15px;
}

.list-group-item.list-group-item-action.active {
  padding-top: 10px;
  background-color: #8E8E8E;
  border: #8E8E8E;
  color: white;
}

.list-group-item.list-group-item-action {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 1rem;
  color: #5C5C5C;
}

/* -------------------------------------------------------------------------- */
/*                                   Navbar                                   */
/* -------------------------------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

#nav {
  border-radius: 0 0 25px 0;
  box-shadow: 0px 1px 3px 1px #cdcdcd;
  background: white;
  margin-bottom: 25px;
}

a#nav-title {
  text-decoration: none;
  padding: 5px 10px;
  font-family: "IBM Plex Sans", sans-serif;
  color: white;
  font-size: 1rem;
  background: #7ddf64;
  transition: all 0.3s;
  z-index: 100;
}
a#nav-title:hover {
  background: #5ad63a;
  padding-right: 20px;
}

#nav-region {
  font-family: "Aiglon Wide";
  font-size: 1.3rem;
  color: #b4b4b4;
  z-index: 1;
}

/* -------------------------------------------------------------------------- */
/*                                 Burger Nav                                 */
/* -------------------------------------------------------------------------- */
#burger-nav {
  font-size: 2rem;
}

/* nav-icon-5 */
.nav-icon-5 {
  width: 35px;
  height: 20px;
  margin: 10px 10px;
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.nav-icon-5 span {
  background-color: #8E8E8E;
  position: absolute;
  transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  width: 100%;
  height: 2px;
  transition-duration: 500ms;
}

.nav-icon-5 span:nth-child(1) {
  top: 0px;
  left: 0px;
}

.nav-icon-5 span:nth-child(2) {
  top: 9px;
  left: 0px;
  opacity: 1;
}

.nav-icon-5 span:nth-child(3) {
  bottom: 0px;
}

.nav-icon-5.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 8px;
}

.nav-icon-5.open span:nth-child(2) {
  opacity: 0;
}

.nav-icon-5.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 8px;
}

@media only screen and (min-width: 992px) {
  .nav-icon-5:not(.open):hover span:nth-child(1) {
    transform: rotate(-3deg) scaleY(1.1);
  }

  .nav-icon-5:not(.open):hover span:nth-child(2) {
    transform: rotate(3deg) scaleY(1.1);
  }

  .nav-icon-5:not(.open):hover span:nth-child(3) {
    transform: rotate(-4deg) scaleY(1.1);
  }
}
/* -------------------------------------------------------------------------- */
/*                                 Menu Title                                 */
/* -------------------------------------------------------------------------- */
.menu-title {
  font-family: "Aiglon Wide";
  font-size: 1rem;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/*                                  Open Menu                                 */
/* -------------------------------------------------------------------------- */
menu#menu {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  transition: left 0.3s ease-out;
  overflow-y: scroll;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  padding-top: 4rem;
  padding-bottom: 80px;
  z-index: 9000;
}
menu#menu .is-form-style .is-search-submit path {
  fill: white;
}
@media only screen and (min-width: 992px) {
  menu#menu {
    transition: left 0.5s ease-out;
  }
}

#menu-row {
  margin-left: 0;
}

menu#menu::-webkit-scrollbar {
  display: none;
}

.menu-open {
  left: 0;
}

.menu-closed {
  left: 100vw;
}

/* -------------------------------------------------------------------------- */
/*                                Menu Backing                                */
/* -------------------------------------------------------------------------- */
#menu-backing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

/* -------------------------------------------------------------------------- */
/*                               Search in menu                               */
/* -------------------------------------------------------------------------- */
input#is-search-input-90 {
  border-radius: 15px 0 0 15px;
  border: none !important;
  box-shadow: 0px 1px 3px 1px #cdcdcd;
  font-family: "IBM Plex Sans", sans-serif;
}

#header-search input#is-search-input-90 {
  box-shadow: none;
  background: #F5F5F5;
}
#header-search span.is-search-icon {
  box-shadow: none !important;
}

.is-form-style {
  width: 100% !important;
}

span.is-search-icon {
  border-radius: 0 15px 15px 0;
  background-color: #cdcdcd;
  border: none;
  box-shadow: 0px 1px 3px 1px #cdcdcd !important;
}

/* -------------------------------------------------------------------------- */
/*                             White box elements                             */
/* -------------------------------------------------------------------------- */
.white-box {
  z-index: 100;
  margin-top: 15px;
  border-radius: 15px;
  padding: 10px 20px;
  box-shadow: 0px 1px 3px 1px #cdcdcd;
  background: white;
}
.white-box ul {
  list-style-type: none;
  padding: 0;
  margin-bottom: 0;
}
.white-box ul li {
  margin-bottom: 5px;
}
.white-box span {
  font-family: "Aiglon Wide";
  text-transform: uppercase;
  color: #8E8E8E;
}

a.menu-link {
  font-family: "Aiglon Wide";
  text-transform: uppercase;
  color: #8E8E8E;
  text-decoration: none;
  transition: all 0.3s;
}
a.menu-link:hover {
  color: #5C5C5C;
  padding-left: 10px;
}

a.menu-link.active {
  color: #7ddf64;
}

#key-issues-menu a {
  display: inline-flex;
  align-content: center;
  text-align: left;
  font-family: "IBM Plex Sans", sans-serif;
  color: #8E8E8E;
}

/* -------------------------------------------------------------------------- */
/*                               Wrapper styles                               */
/* -------------------------------------------------------------------------- */
#wrapper {
  max-width: 100vw;
  overflow-x: hidden;
  padding-top: 4em;
  transition: filter 0.5s ease-out, opacity 0.5s ease-out;
}

#wrapper.menu-open {
  filter: blur(4px);
  opacity: 0.5;
  pointer-events: none;
}

h1.homepage {
  color: #7ddf64;
  text-transform: uppercase;
  font-size: 1.7rem;
}
@media only screen and (min-width: 2500px) {
  h1.homepage {
    font-size: 3rem;
  }
}

h2.homepage {
  color: #cdcdcd;
  text-transform: none;
}
@media only screen and (min-width: 2500px) {
  h2.homepage {
    font-size: 1.7rem;
  }
}

.home-title-container h2 {
  color: #b6b5b5;
}
.home-title-container h2 large {
  font-size: 2rem;
}
@media only screen and (min-width: 2500px) {
  .home-title-container h2 large {
    font-size: 3rem;
  }
}
.home-title-container h2 small {
  font-size: 1.2rem;
}
@media only screen and (min-width: 2500px) {
  .home-title-container h2 small {
    font-size: 1.7rem;
  }
}

@media only screen and (min-width: 992px) {
  .ki-block {
    display: block;
  }
}
@media only screen and (min-width: 2500px) {
  .ki-block {
    background: #F5F5F5;
    border-radius: 25px;
    border: solid white 5px;
    padding-top: 25px;
  }
}

#ki-buttons-container {
  margin-top: 3rem;
}
@media only screen and (min-width: 768px) {
  #ki-buttons-container .row {
    margin-top: 30px;
  }
}
#ki-buttons-container:not(:first-child) {
  margin-top: 1rem;
}

@media only screen and (min-width: 992px) {
  .ki-description {
    text-align: center;
    margin-top: 10px;
  }
}
@media only screen and (min-width: 2500px) {
  .ki-description h4 {
    font-size: 1.3rem;
  }
}
@media only screen and (min-width: 2500px) {
  .ki-description {
    text-align: center;
  }
}
.ki-description ul {
  padding: 0 10px 0 10px;
}
.ki-description ul li {
  display: block;
}

.ki-icon-holder {
  text-align: right;
}
@media only screen and (min-width: 992px) {
  .ki-icon-holder {
    text-align: center;
    padding-bottom: 10px;
  }
}

.ki-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 15px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-shadow: -1px 6px 5px -3px #8E8E8E;
}
.ki-icon a {
  text-align: center;
}
.ki-icon img {
  height: 3rem;
  width: auto;
}
@media only screen and (min-width: 768px) {
  .ki-icon {
    width: 6rem;
    height: 6rem;
  }
  .ki-icon img {
    height: 4.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .ki-icon {
    width: 9rem;
    height: 9rem;
  }
}
@media only screen and (min-width: 2500px) {
  .ki-icon {
    width: 12rem;
    height: 12rem;
  }
  .ki-icon img {
    height: 6rem;
  }
}

.ki-icon.energy {
  background: #f49f0a;
}

.ki-icon.land {
  background: #7ddf64;
}

.ki-icon.water {
  background: #25c3d1;
}

.ki-icon.conservation {
  background: #56638a;
}

.ki-icon.responses {
  background: #ff6b6b;
}

/* -------------------------------------------------------------------------- */
/*                              Open & close tabs                             */
/* -------------------------------------------------------------------------- */
.tab-row {
  position: relative;
}

.tab {
  padding-top: 10px;
  cursor: pointer;
}

.tab-1 {
  border-radius: 5px 25px 0 0;
}

.tab-2 {
  border-radius: 25px 5px 0 0;
  padding-left: 25px;
}

.tab-open {
  background: white;
}

.tab-closed {
  background: #8E8E8E;
  color: white;
}

.tab-background {
  background: #8E8E8E;
  position: absolute;
  border-radius: 5px;
  width: 80%;
  z-index: -1;
}

.tab-contents {
  border-radius: 0 0 5px 5px;
  box-shadow: -1px 6px 5px -3px #cdcdcd;
}

.number {
  font-family: "Aiglon";
  color: #b6b5b5;
  font-size: 2.3rem;
}

#key-issues-heading {
  font-family: "Aiglon Wide";
  text-transform: uppercase;
  color: #b6b5b5;
  font-size: 2rem;
}

a.btn-home {
  display: inline-block;
}
a.btn-home .icon {
  border-radius: 5px !important;
  padding: 4px;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
a.btn-home .icon img {
  height: 95%;
}

.tab-contents .col-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

#project-stats h6 {
  line-height: 1.5em;
}
@media only screen and (min-width: 2500px) {
  #project-stats h6 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
}

span.highlighted-number {
  background: #7ddf64;
  color: white;
  padding: 2px 10px;
  border-radius: 3px;
}

/* -------------------------------------------------------------------------- */
/*                              Always open tabs                              */
/* -------------------------------------------------------------------------- */
.tab-heading, .tab-text {
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: -1px 6px 5px -3px #8E8E8E;
  padding: 15px;
}

.tab-heading {
  border-radius: 15px;
  text-align: center;
}
.tab-heading h2 {
  color: white;
}

.tab-text {
  transform: translateY(-15px);
  border-radius: 0 0 15px 15px;
}

@media only screen and (min-width: 992px) {
  .tabs-container {
    z-index: 1000;
  }
}
@media only screen and (min-width: 2500px) {
  .tabs-container {
    position: absolute;
    top: 30vh;
    right: 0;
  }
}

@media only screen and (min-width: 992px) {
  .tab-logos img.img-fluid {
    max-height: 75px !important;
  }
}

#open-tabs {
  z-index: 1000;
}
@media only screen and (min-width: 2500px) {
  #open-tabs {
    position: absolute;
    top: 30vh;
    right: 2.5vw;
  }
}

/* -------------------------------------------------------------------------- */
/*                              Context Carousel                              */
/* -------------------------------------------------------------------------- */
.slider.slick-slider-context {
  width: 100%;
}
.slider.slick-slider-context .context-image {
  height: 120px;
}
@media only screen and (min-width: 992px) {
  .slider.slick-slider-context .context-image {
    height: 200px;
  }
}
.slider.slick-slider-context .search-title {
  height: auto;
}
@media only screen and (min-width: 768px) {
  .slider.slick-slider-context .search-title {
    height: 6rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider.slick-slider-context .search-title {
    height: 9rem;
  }
}
@media only screen and (min-width: 2500px) {
  .slider.slick-slider-context .search-title {
    height: 6rem;
  }
}
@media only screen and (min-width: 768px) {
  .slider.slick-slider-context .search-description {
    height: 7rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider.slick-slider-context .search-description {
    height: 8rem;
  }
}
@media only screen and (min-width: 768px) {
  .slider.slick-slider-context .search-org {
    height: 5rem;
  }
}
.slider.slick-slider-context div.slick-inner {
  padding: 5px;
  margin: 0 10px;
}

/* -------------------------------------------------------------------------- */
/*                            With Thanks Carousel                            */
/* -------------------------------------------------------------------------- */
.slick-slider-thanks .slick-inner {
  background: white;
  border-radius: 5px;
  margin: 10px;
  box-shadow: -1px 6px 5px -3px #8E8E8E;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
}
.slick-slider-thanks .slick-inner img {
  max-height: 4rem;
}
@media only screen and (min-width: 768px) {
  .slick-slider-thanks .slick-inner {
    border-radius: 15px;
    height: 8rem;
  }
  .slick-slider-thanks .slick-inner img {
    max-height: 5rem;
  }
}
@media only screen and (min-width: 992px) {
  .slick-slider-thanks .slick-inner {
    height: 12rem;
  }
  .slick-slider-thanks .slick-inner img {
    max-height: 8rem;
  }
}

/* -------------------------------------------------------------------------- */
/*                           Grant Recipients Slider                          */
/* -------------------------------------------------------------------------- */
.slick-slider-recipients .slick-inner {
  background: white;
  border-radius: 5px;
  margin: 10px;
  box-shadow: -1px 6px 5px -3px #8E8E8E;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
}
.slick-slider-recipients .slick-inner img {
  max-height: 4rem;
}
@media only screen and (min-width: 768px) {
  .slick-slider-recipients .slick-inner {
    border-radius: 15px;
    height: 8rem;
  }
  .slick-slider-recipients .slick-inner img {
    max-height: 5rem;
  }
}
@media only screen and (min-width: 992px) {
  .slick-slider-recipients .slick-inner {
    height: 12rem;
  }
  .slick-slider-recipients .slick-inner img {
    max-height: 8rem;
  }
}
@media only screen and (min-width: 2500px) {
  .slick-slider-recipients .slick-inner {
    height: 15rem;
  }
  .slick-slider-recipients .slick-inner img {
    max-height: 8rem;
    max-width: 90%;
  }
}

/* -------------------------------------------------------------------------- */
/*                                 Style SVGs                                 */
/* -------------------------------------------------------------------------- */
.st0 {
  fill: #CED3DD;
}

.st1 {
  fill: #56638A;
}

.st2 {
  opacity: 0.6;
}

.st3 {
  fill: #FFFFFF;
  stroke: #56638A;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.st4 {
  opacity: 0.6;
  fill: #FFFFFF;
  stroke: #56638A;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.st5 {
  fill: none;
}

@media only screen and (min-width: 768px) {
  .st0 {
    opacity: 0.6;
  }

  .st1 {
    fill: #FFFFFF;
    stroke: #56638A;
    stroke-width: 2;
    stroke-miterlimit: 10;
  }

  .st2 {
    opacity: 0.6;
    fill: #FFFFFF;
    stroke: #56638A;
    stroke-width: 2;
    stroke-miterlimit: 10;
  }

  .st3 {
    fill: #CED3DD;
    stroke: none;
  }

  .st4 {
    fill: #56638A;
    opacity: 1;
  }

  .st5 {
    fill: none;
    stroke: #56638A;
    stroke-width: 2;
    stroke-miterlimit: 10;
  }

  .st6 {
    fill: none;
  }
}
#south-africa, #botswana, #zimbabwe, #malawi, #zambia, #kenya, #uganda, #rwanda, #tanzania {
  transition: fill 0.2s ease;
  fill: white;
}
@media only screen and (min-width: 992px) and (orientation: landscape) {
  #south-africa:hover, #botswana:hover, #zimbabwe:hover, #malawi:hover, #zambia:hover, #kenya:hover, #uganda:hover, #rwanda:hover, #tanzania:hover {
    fill: #7ddf64;
  }
  #south-africa:active, #botswana:active, #zimbabwe:active, #malawi:active, #zambia:active, #kenya:active, #uganda:active, #rwanda:active, #tanzania:active {
    fill: white;
  }
  #south-africa:focus, #botswana:focus, #zimbabwe:focus, #malawi:focus, #zambia:focus, #kenya:focus, #uganda:focus, #rwanda:focus, #tanzania:focus {
    fill: white;
  }
}

#south-africa.active, #botswana.active, #zimbabwe.active, #malawi.active, #zambia.active, #kenya.active, #uganda.active, #rwanda.active, #tanzania.active {
  transition: fill 0.2s ease;
  fill: #7ddf64;
}

/* -------------------------------------------------------------------------- */
/*                                     Map                                    */
/* -------------------------------------------------------------------------- */
.map-container {
  background: #F5F5F5;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .map-container {
    background: none;
  }
}
@media only screen and (min-width: 992px) {
  .map-container {
    padding: 0;
    margin: 0;
  }
}

#lgScreen-map {
  height: 85vh;
  width: 100vw;
  position: absolute;
  top: -5vh;
}
@media only screen and (min-width: 992px) {
  #lgScreen-map {
    width: auto;
    height: 100vh;
    overflow-y: hidden;
  }
}
@media only screen and (min-width: 2500px) {
  #lgScreen-map {
    width: 100vw;
  }
}

#lgScreen-map svg {
  height: 100vh;
  transform: translate(-40%, -10vh);
  left: 0;
  z-index: 0;
}
@media only screen and (min-width: 768px) {
  #lgScreen-map svg {
    height: 130vh;
    transform: translate(-40%, -25%);
  }
}
@media only screen and (min-width: 992px) {
  #lgScreen-map svg {
    height: 160vh;
    transform: translate(-33%, -25%);
  }
}
@media only screen and (min-width: 2500px) {
  #lgScreen-map svg {
    transform: translate(-33%, -20%);
  }
}

#lgScreen-map #top-map-heading {
  background: #56638a;
  background: linear-gradient(0deg, rgba(86, 99, 138, 0) 0%, #56638a 75%);
  z-index: 100;
  width: 100vw;
  height: 25vh;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 5vh;
}
#lgScreen-map #top-map-heading h2 {
  color: white;
}

#lgScreen-height-guide {
  height: 80vh;
  z-index: -1000;
  position: relative;
  width: 2%;
  pointer-events: none;
}
@media only screen and (min-width: 992px) {
  #lgScreen-height-guide {
    height: 100vh;
  }
}

/* -------------------------------------------------------------------------- */
/*                             Map search results                             */
/* -------------------------------------------------------------------------- */
#map-results {
  position: absolute;
  top: 0;
  right: -50vw;
  transition: all 0.2s ease;
  width: 50%;
}
@media only screen and (min-width: 768px) {
  #map-results {
    top: 15vh;
    width: 50%;
  }
}
@media only screen and (min-width: 992px) {
  #map-results {
    right: 15px;
    width: 35%;
    top: 0;
    opacity: 0;
  }
}
@media only screen and (min-width: 2500px) {
  #map-results {
    top: 24vh;
    right: 50%;
    width: 15%;
  }
}

#map-results.active {
  right: 10px;
  transition: all 0.2s ease;
}
@media only screen and (min-width: 992px) {
  #map-results.active {
    right: 15px;
    opacity: 1;
  }
}
@media only screen and (min-width: 2500px) {
  #map-results.active {
    right: 50%;
  }
}

.close-map-results .close-btn {
  background: white;
  border-radius: 50px;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #b6b5b5;
  box-shadow: -1px 6px 5px -3px #8E8E8E;
  margin-bottom: 10px;
}
.close-map-results .close-btn i {
  transition: transform 0.3s ease-in;
}

.spin i {
  transform: rotate(180deg);
  transition: transform 0.3s ease-in;
}

.chevron-down .next-btn {
  background: white;
  border-radius: 10px;
  height: 1.5rem;
  width: 6rem;
  font-size: 1.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #b6b5b5;
  box-shadow: -1px 6px 5px -3px #8E8E8E;
  margin-bottom: 10px;
  transition: all 0.5s ease;
  cursor: pointer;
}

.country-result-actual {
  transition: opacity 0.5s ease-in;
  opacity: 1;
  padding: 10px;
}

.country-result-block {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: -1px 6px 5px -3px #8E8E8E;
  margin-bottom: 5px;
}
@media only screen and (min-width: 992px) {
  .country-result-block {
    box-shadow: 3px 6px 5px -3px #8E8E8E;
  }
}

.country-result-block h2 {
  color: #8E8E8E;
  font-size: 1rem;
}
@media only screen and (min-width: 2500px) {
  .country-result-block h2 {
    font-size: 1.4rem;
  }
}

.country-result-block p {
  font-size: 0.8rem;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .country-result-block p {
    font-size: 1rem;
  }
}
@media only screen and (min-width: 2500px) {
  .country-result-block p {
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 768px) {
  .country-result-block a.btn.btn-light.btn-issue-general.btn-sm {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }
}

.country-result-block .read-map-btn.btn-light.btn-sm {
  font-size: 0.8rem;
  background: white;
  box-shadow: -1px 6px 5px -3px #8E8E8E;
  transition: all ease 0.3s;
}
@media only screen and (min-width: 768px) {
  .country-result-block .read-map-btn.btn-light.btn-sm {
    font-size: 1rem;
  }
}
@media only screen and (min-width: 2500px) {
  .country-result-block .read-map-btn.btn-light.btn-sm {
    font-size: 1.2rem;
  }
}
.country-result-block .read-map-btn.btn-light.btn-sm:hover {
  background: #7ddf64;
  border: #7ddf64 2px solid;
  color: white;
}

.country-result-block .search-description {
  font-size: 0.7rem;
}
@media only screen and (min-width: 768px) {
  .country-result-block .search-description {
    font-size: 1rem;
  }
}
@media only screen and (min-width: 2500px) {
  .country-result-block .search-description {
    font-size: 1.2rem;
  }
}

.country-name {
  padding: 10px 10px 5px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .country-name h2 {
    font-size: 1.2rem;
  }
}
@media only screen and (min-width: 2500px) {
  .country-name h2 {
    font-size: 1.4rem;
  }
}

/* -------------------------------------------------------------------------- */
/*                        Javascript uses these styles                        */
/* -------------------------------------------------------------------------- */
.hide {
  transition: opacity 0.5s ease-out;
  opacity: 0;
}

/* -------------------------------------------------------------------------- */
/*                                 SVG tooltip                                */
/* -------------------------------------------------------------------------- */
#map-tooltip {
  position: absolute;
  width: 120px;
  height: auto;
  bottom: 0;
  top: 30px;
  left: 0;
}
@media only screen and (min-width: 768px) {
  #map-tooltip {
    width: 150px;
    bottom: 100px;
    left: 40vw;
    top: auto;
  }
}
@media only screen and (min-width: 992px) {
  #map-tooltip {
    left: 50px;
    top: 30px;
    bottom: auto;
  }
}
@media only screen and (min-width: 2500px) {
  #map-tooltip {
    left: 50px;
    bottom: 20vh;
    top: auto;
    width: 200px;
  }
}

/* -------------------------------------------------------------------------- */
/*                              Heading for pages                             */
/* -------------------------------------------------------------------------- */
#page-type {
  background: #e7e7e7;
  border-radius: 0 0 25px 25px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 70px 10px 10px 10px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  #page-type {
    background: none;
    padding: 0;
  }
  #page-type .mx-auto {
    padding: 70px 10px 10px 10px;
    background: #e7e7e7;
    border-radius: 0 0 15px 15px;
  }
}
#page-type span {
  text-transform: uppercase;
  color: #8E8E8E;
  font-family: "Aiglon Wide";
  font-size: 1rem;
}
@media only screen and (min-width: 768px) {
  #page-type span {
    font-size: 1.2rem;
  }
}

#page-type-padding {
  height: 60px;
}

div.fb-share-button button._2tga._8j9w {
  border-radius: 999px !important;
}

h5.modal-title {
  font-family: "Aiglon Wide";
  color: #b6b5b5;
  text-transform: uppercase;
  font-size: 1em;
}

.featured-image {
  height: auto;
  max-width: 100%;
  overflow: hidden;
  border-radius: 15px;
  padding: 0;
}

#usm-admin-notification-widget > div {
  display: none !important;
}

.motivational-quote {
  border-radius: 15px;
}

/* -------------------------------------------------------------------------- */
/*                               related content                              */
/* -------------------------------------------------------------------------- */
.related-heading {
  border-radius: 0 0 25px 25px;
}

.project-card {
  border-radius: 15px;
  box-shadow: -1px 6px 5px -3px #8E8E8E;
  padding: 10px;
}

#media-logo {
  overflow: hidden;
  border-radius: 10px;
}
#media-logo img {
  max-height: 150px;
  width: auto;
  border-radius: 10px;
}

.audio-box {
  background: #F5F5F5;
  box-shadow: -1px 6px 5px -3px #cdcdcd;
  border-radius: 15px;
}
.audio-box span {
  display: block;
}
.audio-box #audio-creator {
  font-size: 0.8em;
}

#play-icon, #pause-icon {
  font-size: 2em;
}

#audio-time {
  width: 100%;
}

input[type=range]::-webkit-slider-thumb {
  background-color: #7ddf64;
}

#current-time {
  color: #7ddf64;
}

.footer-h2 {
  text-decoration: none;
}
.footer-h2 h2 {
  display: inline-block;
  color: #8E8E8E;
  transition: all 0.3s ease;
}
@media only screen and (min-width: 992px) {
  .footer-h2 h2 {
    font-size: 2rem !important;
  }
}
.footer-h2 h2:hover {
  color: #5C5C5C;
}

.footer-h2.active h2 {
  color: #7ddf64;
}

.footer-links-block span {
  height: 1rem;
  width: 2px;
  transform: translateY(0.2rem);
  display: inline-block;
  background: #8E8E8E;
  margin-left: 5px;
  margin-right: 5px;
}
.footer-links-block a.footer-links {
  text-decoration: none;
  color: #8E8E8E;
  transition: all 0.3s ease;
}
.footer-links-block a.footer-links:hover {
  color: #5C5C5C;
}
.footer-links-block a.footer-links.active {
  color: #7ddf64;
}

.footer-countries .btn-light {
  text-transform: capitalize;
  background: gainsboro;
}

#funded-footer div {
  display: inline-block;
}
#funded-footer .funding-line {
  background: #b6b5b5;
  height: 3px;
  min-width: 50px;
  flex-grow: 2;
  transform: translateY(-5px);
}
#funded-footer #funding-block {
  padding: 0 10px;
}
#funded-footer #funding-block h2 {
  color: #8E8E8E;
}

#footer-outro {
  color: white;
  padding-bottom: 6vh;
}
#footer-outro a {
  text-decoration: none;
  color: white;
}
#footer-outro a img {
  padding-left: 5px;
  width: 2rem;
  transform: translateY(-0.2rem);
}
@media only screen and (min-width: 992px) {
  #footer-outro {
    padding-bottom: 15vh;
  }
}

/* -------------------------------------------------------------------------- */
/*                                Fixed Footer                                */
/* -------------------------------------------------------------------------- */
.fixed-footer {
  position: fixed;
  z-index: 1000;
  bottom: 0;
  left: 0;
}
.fixed-footer #wan-ifra-logo {
  padding: 10px 0;
  height: auto;
  background: #F5F5F5;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 0 25px 0 0;
  box-shadow: 0px -1px 3px 1px rgba(142, 142, 142, 0.5);
  transition: all 0.3s;
}
.fixed-footer #wan-ifra-logo img {
  width: 80%;
  height: auto;
}
.fixed-footer #wan-ifra-logo:hover {
  background: white;
  padding-left: 20px;
}
.fixed-footer #media-button {
  display: flex;
  justify-content: end;
  align-items: center;
}
.fixed-footer #media-button a.btn.btn-light {
  background: white;
  border-radius: 50px;
  box-shadow: 0px -1px 3px 1px rgba(142, 142, 142, 0.5);
  font-size: 0.8rem;
  transition: all 0.3s;
}
.fixed-footer #media-button a.btn.btn-light i {
  color: #ff6b6b;
}
.fixed-footer #media-button a.btn.btn-light:hover {
  background: #ff6b6b;
  padding: 8px 15px;
  color: white;
}
.fixed-footer #media-button a.btn.btn-light:hover i {
  color: white;
}

.search-query {
  background: #F5F5F5;
  color: #5C5C5C;
  border-radius: 15px;
}

.search-result {
  background: white;
  box-shadow: -1px 1px 10px -5px #b6b5b5;
  border-radius: 15px;
}

.context-image {
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  height: 20vh;
  display: flex;
  align-items: center;
}

.search-result-context {
  background: white;
  box-shadow: -1px 1px 10px -5px #b6b5b5;
  border-radius: 0 0 15px 15px;
  overflow: hidden;
}

.white-box-on-page {
  box-shadow: -1px 1px 10px -5px #b6b5b5;
}

#lg-menu {
  padding-left: 3rem;
}

.context-image img.img-fluid {
  min-height: 100%;
}

blockquote {
  font-style: italic;
  font-size: 1.2rem;
  margin: 40px 0;
}

.author-image {
  border-radius: 15px;
  overflow: hidden;
}

#author-name {
  display: block;
  color: #5C5C5C;
}

#author-title {
  display: block;
  font-style: italic;
}

.page-image img {
  height: auto;
  max-width: 100%;
  overflow: hidden;
  border-radius: 15px;
  padding: 0;
}

.rounded-15 {
  border-radius: 15px;
}

#bell-div {
  margin-top: 10px;
  border-left: 5px solid #ff6b6b;
  padding-left: 20px;
}
#bell-div i {
  color: #ff6b6b;
  padding-right: 10px;
}

.resource {
  background: #F5F5F5;
  border: 5px solid white;
  padding: 15px;
  border-radius: 15px;
}
.resource h4 {
  color: #5C5C5C;
  font-size: 0.9rem;
}
@media only screen and (min-width: 2500px) {
  .resource h4 {
    font-size: 1.2rem;
  }
}
.resource a {
  font-size: 0.8rem;
}

.top-404 {
  height: 20vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
@media only screen and (min-width: 768px) {
  .top-404 {
    height: 10vh;
  }
}

#start-404 h1, #end-404 h1 {
  color: white;
  font-size: 1.2rem;
}
#start-404 h1#heading-404, #end-404 h1#heading-404 {
  font-size: 7rem;
}
@media only screen and (min-width: 2500px) {
  #start-404 h1#heading-404, #end-404 h1#heading-404 {
    font-size: 12rem;
  }
}

#start-404 {
  padding-top: 10vh;
}
@media only screen and (min-width: 768px) {
  #start-404 {
    padding-top: 5vh;
    min-height: 30vh;
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) {
  #start-404 {
    padding-top: 15vh;
  }
}
@media only screen and (min-width: 2500px) {
  #start-404 {
    padding-top: 20vh;
  }
  #start-404 h1 {
    font-size: 2rem;
  }
}

#end-404 {
  margin-top: 20px;
  padding-top: 10px;
  padding-bottom: 10vh;
}
@media only screen and (min-width: 768px) {
  #end-404 {
    padding-top: 30px;
    min-height: 50vh;
  }
}
@media only screen and (min-width: 992px) {
  #end-404 {
    padding-bottom: 20vh;
  }
}
@media only screen and (min-width: 2500px) {
  #end-404 {
    padding-bottom: 30vh;
  }
}

/* Theme Name: WAN-IFRA AMG WEBSITE
Theme URI: www.lauraannseal.com
Author: Underscores.me
Author URI: www.lauraannseal.com
Description: Description
Version: 1.1.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: pg-may
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

PG May is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* -------------------------------------------------------------------------- */
/*                              temp page content                             */
/* -------------------------------------------------------------------------- */
.temp-page {
  background: #7ddf64;
  background: linear-gradient(0deg, #7ddf64 36%, #25c3d1 100%);
  width: 100vw;
  height: 100vh;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Aiglon Wide";
  font-size: 2rem;
}

body {
  font-family: "IBM Plex Sans", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: white;
  color: #8E8E8E;
  font-size: 1rem;
}

.invisible-menu-start {
  opacity: 0;
  transform: translateX(-200px);
}

.invisible-menu {
  opacity: 0;
  transform: translateX(-200px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.not-invisible-menu {
  opacity: 1;
  transform: translateX(1);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

h1 {
  font-family: "Aiglon Wide";
  color: #5C5C5C;
  font-size: 1.4em;
}

h2 {
  font-family: "Aiglon Wide";
  color: #5C5C5C;
  text-transform: uppercase;
  font-size: 1.1rem;
}

h3 {
  font-family: "Aiglon Wide";
  color: #cdcdcd;
  font-size: 1rem;
}

h4 {
  font-family: "Aiglon Wide";
  font-size: 1rem;
}

h6 {
  font-family: "IBM Plex Sans", sans-serif;
  color: #8E8E8E;
  font-size: 1.1rem;
}

@media only screen and (min-width: 2500px) {
  p {
    font-size: 1.2rem;
  }
}

ul li:not(:last-child) {
  margin-bottom: 5px;
}

a {
  color: #25c3d1;
}

@media only screen and (min-width: 2500px) {
  .btn {
    font-size: 1.2rem !important;
  }
}

.header-text {
  font-family: "Aiglon Wide";
}

hr {
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #b6b5b5;
}

.my-video-box {
  border-radius: 15px;
  overflow: hidden;
  padding: 0 !important;
  background: black;
}
.my-video-box iframe {
  margin: 0 !important;
  max-width: 100%;
  min-width: 100%;
  height: 250px;
}
@media only screen and (min-width: 992px) {
  .my-video-box iframe {
    height: 350px;
  }
}
@media only screen and (min-width: 2500px) {
  .my-video-box iframe {
    height: 480px;
  }
}

span.country-name {
  text-transform: capitalize;
  display: inline;
  margin: 0;
  padding: 0;
}

/*# sourceMappingURL=style.css.map */