:root {
  --bif-red: #d0142e;
  --bif-yellow: #ffb80e;
  --bif-brown: #663536;
  --bif-tan: #fff6db;
  --bif-blue: #d6e4f5;
  font-size: 18px;
  /* font-family: 'Montserrat', sans-serif; */
  font-family: 'Nunito Sans', sans-serif;
}

html, body {
  font-family: 'Nunito Sans', sans-serif;
}

.font-Montserrat {
  font-family: 'Montserrat', sans-serif;
}

.font-Nunito {
  font-family: 'Nunito Sans', sans-serif;
}

.font-small { font-size: 0.8rem; }

a:link, 
a:active, 
a:visited,
a:hover,
a:focus {
  color: var(--bif-brown);
  text-decoration: underline;
}

hr.yellow {
  border: 2px solid var(--bif-yellow);
  width: 100%;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

.grid-x {
  max-width: 1200px;
  margin: auto;
}

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

a#LearnMoreBtn {
  font-size: 32px;
  color: #FFF;
  display: inline-block;
  background-color: var(--bif-brown);
  border-bottom: 5px solid var(--bif-yellow);
  font-weight: 700;
  padding: 8px 10px;
  text-transform: uppercase;
  text-decoration: none;
}


#ShareAndWin {
  font-weight: 600; 
  color: var(--bif-brown); 
  text-align: center;
  font-size: 1.3333rem;
}

#ShareAndWinHeading {
  font-weight: 700; 
  font-size: 2rem; 
  color: #FFF; 
  background-color: var(--bif-red); 
  text-align: center; 
  margin-bottom: 30px;
}



.section-red {
  background-color: var(--bif-red);
  color: #FFF;
  padding: 10px;
}

.section-white {
  background-color: #FFF;
  color: var(--bif-brown);
}

.section-tan {
  background-color: var(--bif-tan);
  color: var(--bif-brown);
}

.section-pattern {
  background: url('../img/pattern.png') top center #663536; 
}

.block-tan {
  background-color: var(--bif-tan);
  color: var(--bif-brown);
  padding: 20px;
}

.block-blue {
  background-color: var(--bif-blue);
  color: var(--bif-brown);
  padding: 20px;
}

.block-white {
  background-color: #FFF;
  color: var(--bif-brown);
  padding: 20px;
}

.block-img {
  background-size: cover;
  background-position: center center;
  padding: 20px;
}

.red-border-top { border-top: 2px solid var(--bif-red); }
.red-border-bottom { border-bottom: 2px solid var(--bif-red); }


.button-brown {
  display: inline-block;
  background-color: var(--bif-brown);
  color: #FFF;
  border-bottom: 4px solid var(--bif-brown);
}



#TopBar {
  background-color: var(--bif-red);
  color: #FFF;
}
  .topbar-padding {
    padding-top: 100px;
  }

#Header {
  background-color: #FFF;
  border-bottom: 2px solid var(--bif-red);
  color: var(--bif-brown);
}
  .header-social {
    font-size: 1rem;
  }

  .header-title {
    font-size: 1.5rem;
  }

#Banner {
  background-color: #FFF;
}

#Footer {
  background-color: var(--bif-red);
  color: #FFF;
  padding-top: 5px;
  font-size: 0.9rem;
  line-height: 2rem;
}
  .footer-social a {
    color: #FFF;
    font-size: 2rem;
    padding: 0 15px;
  }


#LangBtn {
  font-size: 1rem!important;
  color: #FFF!important;
  background-color: var(--bif-brown)!important;
  font-family: 'Montserrat', sans-serif!important;
  font-weight: 900!important;
  -webkit-border-radius: 10px!important;
  -moz-border-radius: 10px!important;
  border-radius: 10px!important;
  padding: 8px!important;
  position: relative;
  top: -7px;
  text-decoration: none;
  text-transform: uppercase;
}


  @media (max-width: 600px) {
    :root {
      font-size: 12px;
    }

    #TopBar {
      position: relative!important;
      line-height: inherit!important;
      font-size: 1.5rem!important;
    }
      .topbar-padding {
        padding-top: 0;
      }

    #HeaderTitle {
      font-size: 1.5rem!important;
      line-height: 60px;
      padding-left: 10px
    }

    #HeaderLogo {
      top: 0!important;
      right: 10px!important;
      bottom: auto!important;
    }
      #HeaderLogo img {
        width: 50px!important;
      }

    #VideoBanner {
      margin-top: 0!important;
    }

    #RegionTitle {
      font-size: 2.5rem!important;
    }

    .back-next {
      text-align: right;
    }
      .back-next a {
        padding: 0 10px;
      }

      #MapBtn {
        padding-top: 50px;
      }

    .presented-by-title {
      text-align: center;
    }

    #Footer,
    #Footer .align-right {
      text-align: center;
    }

    #LangBtn {
      top: 10px;
      left: 10px;
    }

  }