@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,300;1,400;1,900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,600,600italic,700,700italic,900italic,900");
/**********************************************************************************************
 * Copyright @ 2021 - NJVACA
 * Version: 2.01 
 * File name: main.scss
 * 
 * Details: 
 *     This is the CSS pre-processor for SASS 
 * 
 * Updates:
 *     04/11/2021: created
 * 
 **********************************************************************************************/
*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 16px;
}

/***  Define all the standard colors for our website   ***/
:root {
  --primary-color-lightyellow: #f7f3aa;
  --primary-color-yellow: #F8EF22;
  --primary-color-dark: #363636;
  --primary-color-white: #f3f3f3;
  --primary-color-gray: #e1e1e1;
  --primary-color-lightgray: #f3f3f3;
  --primary-color-red: #e31e25;
  --primary-color-green: #1f7f3e;
  --primary-color-lightgreen: #c8eac8;
  --primary-color-lightblue: #c7e4ee;
  --primary-color-blue: rgb(43, 43, 161);
  --primary-color-darkblue: #032129;
  --primary-color-yellowish-black: #141408;
}

html, body {
  font-family: poppins, lato, sans-serif;
  scroll-behavior: smooth;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.success-color {
  color: var(--primary-color-blue);
}

.failure-color {
  color: var(--primary-color-red);
}

/*****************************************************************************/
/*************                     HEADER                     ****************/
/*****************************************************************************/
header {
  position: fixed;
  width: 100vw;
  height: 64px;
  z-index: 900;
}

.navbar {
  background-color: var(--primary-color-dark);
  height: 64px;
}

.nav.active {
  padding: 0px;
  background-color: var(--primary-color-dark);
  display: flex;
  justify-content: flex-end;
  z-index: 999;
}

.nav__logo img {
  position: absolute;
  margin: 20px 0 0 40px;
  width: 130px;
  height: 130px;
  z-index: 1000;
}
.nav__logo .nav__logoframe {
  position: absolute;
  margin: 16px 0 0 36px;
  width: 138px;
  height: 138px;
  background-color: var(--primary-color-dark);
  border-radius: 50%;
}

.nav {
  display: flex;
  justify-content: flex-end;
  z-index: 999;
}

.nav__list {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  list-style-type: none;
  margin-right: 2rem;
}

.nav__item {
  font-size: 20px;
  padding: 18px 16px;
  /*** text-transform: uppercase;  ***/
}

.nav__item a {
  text-decoration: none;
  color: var(--primary-color-white);
}

.active_page a {
  color: var(--primary-color-yellow);
}

.nav__item a:hover {
  color: var(--primary-color-yellow);
}

.nav a {
  text-decoration: none;
}

.nav__donate {
  display: block;
  text-decoration: none;
  font-weight: 200;
  color: var(--primary-color-white);
  font-size: 18px;
  margin: 18px 30px 0 0;
  padding: 0 20px;
  /**  text-transform: uppercase;  **/
  background-color: transparent;
  border: 1px solid var(--primary-color-white);
  border-radius: 6px;
}

.nav__donate:hover {
  color: black;
  background-color: var(--primary-color-yellow);
  border: 1px solid var(--primary-color-yellow);
}

.menubtn, .closebtn {
  position: fixed;
  right: 40px;
  top: 14px;
  scale: 60%;
  display: none;
  z-index: 1000;
  cursor: pointer;
}

.menubtn.active {
  display: none;
}

.closebtn.active {
  display: none;
}

/*****************************************************************************/
/*************                   Hero section                 ****************/
/*****************************************************************************/
section .hero-section {
  width: 100vw;
}

.hero-section .home-hero-background {
  position: relative;
  margin-top: 64px;
  background-image: url("../images/home_hero_overlaid.png");
  width: 100vw;
  height: 600px;
  /* You must set a specified height */
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
}
.hero-section .home-hero-background .fancy-background-overlay {
  background: rgba(32, 34, 2, 0.4);
  background-blend-mode: multiply;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.hero-section .home-hero-background .home-title, .hero-section .home-hero-background .home-subtitle {
  margin: 0 auto;
}
.hero-section .home-hero-background h1 {
  display: block;
  color: var(--primary-color-white);
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: 2px;
  width: 34ch;
  text-align: center;
  margin-top: 6.2rem;
}
.hero-section .home-hero-background h2 {
  display: block;
  color: var(--primary-color-white);
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 2px;
  width: 44ch;
  margin-top: 30px;
  text-align: center;
}
.hero-section .home-hero-background h2 span {
  display: block;
}
.hero-section .home-hero-background .volunteer {
  display: block;
  font-size: 1.2rem;
  margin-top: 2.5rem;
}
.hero-section .home-hero-background .volunteer a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary-color-white);
  border: 1px solid var(--primary-color-white);
  border-radius: 8px;
  padding: 8px 40px;
  background-color: var(--primary-color-yellowish-black);
}
.hero-section .home-hero-background .volunteer a:hover {
  background-color: var(--primary-color-yellow);
  color: var(--primary-color-dark);
  border: 1px solid var(--primary-color-yellow);
}
.hero-section .home-hero-background .social-media-links {
  position: absolute;
  top: 18px;
  right: 160px;
}
.hero-section .home-hero-background .social-media-links .facebook-link img, .hero-section .home-hero-background .social-media-links .youtube-link img {
  width: 32px;
  height: 32px;
  margin-left: 20px;
  opacity: 0.6;
}

.hero-section .donate-hero-background {
  position: relative;
  margin-top: 64px;
  background-image: url("../images/donate_hero_overlaid.png");
  width: 100vw;
  height: 630px;
  /* You must set a specified height */
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
}
.hero-section .donate-hero-background .fancy-background-overlay {
  background: rgba(26, 16, 4, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-section .donate-hero-background .donate-title, .hero-section .donate-hero-background .donate-subtitle {
  height: 100%;
}
.hero-section .donate-hero-background h1 {
  display: block;
  color: var(--primary-color-white);
  margin-top: 8rem;
  font-size: 3.2rem;
  font-weight: 500;
  letter-spacing: 2px;
  width: 36ch;
  text-align: center;
}
.hero-section .donate-hero-background h2 {
  color: var(--primary-color-white);
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 2px;
  width: 44ch;
  text-align: center;
}
.hero-section .donate-hero-background .social-media-links {
  position: absolute;
  top: 18px;
  right: 160px;
}
.hero-section .donate-hero-background .social-media-links .facebook-link img, .hero-section .donate-hero-background .social-media-links .youtube-link img {
  width: 32px;
  height: 32px;
  margin-left: 20px;
  opacity: 0.6;
}

.hero-section .news-hero-background {
  position: relative;
  margin-top: 64px;
  background-image: url("../images/news_events_hero_overlaid.png");
  width: 100vw;
  height: 600px;
  /* You must set a specified height */
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
  z-index: 0;
}
.hero-section .news-hero-background .fancy-background-overlay {
  background: rgba(3, 26, 16, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.hero-section .news-hero-background .news-title, .hero-section .news-hero-background .news-subtitle {
  margin: 0 auto;
}
.hero-section .news-hero-background h1 {
  display: block;
  color: var(--primary-color-white);
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 2px;
  width: 36ch;
  text-align: center;
  margin-top: 4rem;
}
.hero-section .news-hero-background h2 {
  display: block;
  color: var(--primary-color-white);
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 3px;
  width: 44ch;
  margin-top: 30px;
  text-align: center;
}
.hero-section .news-hero-background .volunteer {
  display: block;
  font-size: 1.2rem;
  margin-top: 3.5rem;
}
.hero-section .news-hero-background .volunteer a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary-color-white);
  border: 1px solid var(--primary-color-white);
  border-radius: 8px;
  padding: 8px 40px;
  background-color: var(--primary-color-yellowish-black);
}
.hero-section .news-hero-background .volunteer a:hover {
  background-color: var(--primary-color-yellow);
  color: var(--primary-color-dark);
  border: 1px solid var(--primary-color-yellow);
}
.hero-section .news-hero-background .social-media-links {
  position: absolute;
  top: 18px;
  right: 160px;
}
.hero-section .news-hero-background .social-media-links .facebook-link img, .hero-section .news-hero-background .social-media-links .youtube-link img {
  width: 32px;
  height: 32px;
  margin-left: 20px;
  opacity: 0.6;
}

.hero-section .event-details-hero-background {
  position: relative;
  margin-top: 64px;
  background-image: url("../images/news_events_hero_overlaid.png");
  width: 100vw;
  height: 600px;
  /* You must set a specified height */
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
  z-index: 0;
}
.hero-section .event-details-hero-background .fancy-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.hero-section .event-details-hero-background .event-details-title, .hero-section .event-details-hero-background .event-details-subtitle {
  margin: 0 auto;
}
.hero-section .event-details-hero-background h1 {
  display: block;
  color: var(--primary-color-white);
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 2px;
  width: 36ch;
  text-align: center;
  margin-top: 4rem;
}
.hero-section .event-details-hero-background h2 {
  display: block;
  color: var(--primary-color-white);
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 3px;
  width: 44ch;
  margin-top: 30px;
  text-align: center;
}
.hero-section .event-details-hero-background .volunteer {
  display: block;
  font-size: 1.2rem;
  margin-top: 3.5rem;
}
.hero-section .event-details-hero-background .volunteer a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary-color-yellow);
  border: 1px solid var(--primary-color-yellow);
  border-radius: 8px;
  padding: 8px 40px;
  background-color: #141408;
}
.hero-section .event-details-hero-background .volunteer a:hover {
  background-color: var(--primary-color-yellow);
  color: var(--primary-color-dark);
}
.hero-section .event-details-hero-background .social-media-links {
  position: absolute;
  top: 18px;
  right: 160px;
}
.hero-section .event-details-hero-background .social-media-links .facebook-link img, .hero-section .event-details-hero-background .social-media-links .youtube-link img {
  width: 32px;
  height: 32px;
  margin-left: 20px;
  opacity: 0.6;
}

.hero-section .leadership-hero-background {
  position: relative;
  margin-top: 64px;
  background-image: url("../images/leadership_hero_overlaid.png");
  width: 100vw;
  height: 600px;
  /* You must set a specified height */
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
  z-index: 0;
}
.hero-section .leadership-hero-background .fancy-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.hero-section .leadership-hero-background .leadership-title, .hero-section .leadership-hero-background .leadership-subtitle {
  height: 100%;
}
.hero-section .leadership-hero-background h1 {
  display: block;
  color: var(--primary-color-white);
  margin-top: 6rem;
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 2px;
  width: 36ch;
  text-align: center;
}
.hero-section .leadership-hero-background h2 {
  display: flex;
  justify-content: center;
  background-color: var(--primary-color-yellow);
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 1px;
  width: 100vw;
}
.hero-section .leadership-hero-background h2 p {
  display: block;
  margin: 2rem 1.5rem 8rem 1.5rem;
  text-align: center;
  color: var(--primary-color-dark);
  font-weight: 300;
  font-size: 1.1rem;
  width: 86ch;
}
.hero-section .leadership-hero-background .volunteer {
  display: block;
  margin-top: -9rem;
  font-size: 1.2rem;
}
.hero-section .leadership-hero-background .volunteer a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 8px;
  padding: 8px 40px;
  background-color: var(--primary-color-gray);
  color: var(--primary-color-dark);
  border: 1px solid var(--primary-color-dark);
}
.hero-section .leadership-hero-background .volunteer a:hover {
  background-color: var(--primary-color-dark);
  color: var(--primary-color-yellow);
  border: 1px solid var(--primary-color-dark);
}
.hero-section .leadership-hero-background .social-media-links {
  position: absolute;
  top: 18px;
  right: 160px;
}
.hero-section .leadership-hero-background .social-media-links .facebook-link img, .hero-section .leadership-hero-background .social-media-links .youtube-link img {
  width: 32px;
  height: 32px;
  margin-left: 20px;
  opacity: 0.6;
}

.hero-section .contactdetails-hero-background {
  position: relative;
  margin-top: 64px;
  background-image: url("../images/leadership_hero_overlaid.png");
  width: 100vw;
  height: 600px;
  /* You must set a specified height */
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
  z-index: 0;
}
.hero-section .contactdetails-hero-background .fancy-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.hero-section .contactdetails-hero-background .contactdetails-title, .hero-section .contactdetails-hero-background .contactdetails-subtitle {
  height: 100%;
}
.hero-section .contactdetails-hero-background h1 {
  display: block;
  color: var(--primary-color-white);
  margin-top: 6rem;
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 2px;
  width: 36ch;
  text-align: center;
}
.hero-section .contactdetails-hero-background h2 {
  display: flex;
  justify-content: center;
  background-color: var(--primary-color-yellow);
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 3px;
  width: 100vw;
  margin-top: 170px;
}
.hero-section .contactdetails-hero-background h2 p {
  display: block;
  margin: 20px 20px 110px 20px;
  text-align: center;
  color: var(--primary-color-red);
  font-weight: 400;
  width: 86ch;
}
.hero-section .contactdetails-hero-background .volunteer {
  display: block;
  margin-top: -70px;
  font-size: 1.2rem;
}
.hero-section .contactdetails-hero-background .volunteer a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 8px;
  padding: 8px 40px;
  background-color: var(--primary-color-gray);
  color: var(--primary-color-red);
  border: 1px solid var(--primary-color-red);
}
.hero-section .contactdetails-hero-background .volunteer a:hover {
  background-color: var(--primary-color-dark);
  color: var(--primary-color-yellow);
  border: 1px solid var(--primary-color-dark);
}
.hero-section .contactdetails-hero-background .social-media-links {
  position: absolute;
  top: 18px;
  right: 160px;
}
.hero-section .contactdetails-hero-background .social-media-links .facebook-link img, .hero-section .contactdetails-hero-background .social-media-links .youtube-link img {
  width: 32px;
  height: 32px;
  margin-left: 20px;
  opacity: 0.6;
}

.hero-section .aboutus-hero-background {
  position: relative;
  margin-top: 64px;
  background-image: url("../images/aboutus_hero_overlaid.png");
  width: 100vw;
  height: 700px;
  /* You must set a specified height */
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
}
.hero-section .aboutus-hero-background .fancy-background-overlay {
  background: rgba(3, 34, 24, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.hero-section .aboutus-hero-background .aboutus-title, .hero-section .aboutus-hero-background .aboutus-subtitle {
  margin: 0 auto;
}
.hero-section .aboutus-hero-background h1 {
  display: block;
  color: var(--primary-color-white);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 2px;
  width: 36ch;
  text-align: center;
  margin-top: 6.2rem;
}
.hero-section .aboutus-hero-background h2 {
  display: block;
  color: var(--primary-color-white);
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 1px;
  width: 66ch;
  margin-top: 30px;
  text-align: center;
}
.hero-section .aboutus-hero-background .volunteer {
  display: block;
  font-size: 1.2rem;
  margin-top: 3.5rem;
}
.hero-section .aboutus-hero-background .volunteer a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary-color-white);
  border: 1px solid var(--primary-color-white);
  border-radius: 8px;
  padding: 8px 40px;
  background-color: var(--primary-color-yellowish-black);
}
.hero-section .aboutus-hero-background .volunteer a:hover {
  background-color: var(--primary-color-yellow);
  color: var(--primary-color-dark);
  border: 1px solid var(--primary-color-yellow);
}
.hero-section .aboutus-hero-background .social-media-links {
  position: absolute;
  top: 18px;
  right: 160px;
}
.hero-section .aboutus-hero-background .social-media-links .facebook-link img, .hero-section .aboutus-hero-background .social-media-links .youtube-link img {
  width: 32px;
  height: 32px;
  margin-left: 20px;
  opacity: 0.6;
}

.hero-section .contact-hero-background {
  position: relative;
  margin-top: 64px;
  background-image: url("../images/contact_hero_overlaid.png");
  width: 100vw;
  height: 670px;
  /* You must set a specified height */
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
  z-index: 0;
}
.hero-section .contact-hero-background .fancy-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.hero-section .contact-hero-background .contact-title, .hero-section .contact-hero-background .contact-subtitle {
  margin: 0 auto;
}
.hero-section .contact-hero-background h1 {
  display: block;
  color: var(--primary-color-white);
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 2px;
  width: 36ch;
  text-align: center;
  margin-top: 5rem;
}
.hero-section .contact-hero-background h2 {
  display: block;
  color: var(--primary-color-white);
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 3px;
  width: 44ch;
  margin-top: 30px;
  text-align: center;
}
.hero-section .contact-hero-background .social-media-links {
  position: absolute;
  top: 18px;
  right: 160px;
}
.hero-section .contact-hero-background .social-media-links .facebook-link img, .hero-section .contact-hero-background .social-media-links .youtube-link img {
  width: 32px;
  height: 32px;
  margin-left: 20px;
  opacity: 0.6;
}

.hero-section .privacy-hero-background {
  position: relative;
  margin-top: 64px;
  background-image: url("../images/privacy_policy_overlaid.png");
  width: 100vw;
  height: 400px;
  /* You must set a specified height */
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
}
.hero-section .privacy-hero-background .fancy-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.hero-section .privacy-hero-background .home-title, .hero-section .privacy-hero-background .home-subtitle {
  margin: 0 auto;
}
.hero-section .privacy-hero-background h1 {
  display: block;
  color: var(--primary-color-white);
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 2px;
  width: 36ch;
  text-align: center;
  margin-top: 6rem;
}
.hero-section .privacy-hero-background h2 {
  display: block;
  color: var(--primary-color-white);
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 3px;
  width: 44ch;
  margin-top: 30px;
  text-align: center;
}
.hero-section .privacy-hero-background .social-media-links {
  position: absolute;
  top: 18px;
  right: 160px;
}
.hero-section .privacy-hero-background .social-media-links .facebook-link img, .hero-section .privacy-hero-background .social-media-links .youtube-link img {
  width: 32px;
  height: 32px;
  margin-left: 20px;
  opacity: 0.6;
}

.hero-section .terms-hero-background {
  position: relative;
  margin-top: 64px;
  background-image: url("../images/terms_hero_overlaid.png");
  width: 100vw;
  height: 300px;
  /* You must set a specified height */
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
}
.hero-section .terms-hero-background .fancy-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.hero-section .terms-hero-background .terms-title, .hero-section .terms-hero-background .terms-subtitle {
  margin: 0 auto;
}
.hero-section .terms-hero-background h1 {
  display: block;
  color: var(--primary-color-white);
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 2px;
  width: 40ch;
  text-align: center;
  margin-top: 6rem;
}
.hero-section .terms-hero-background .social-media-links {
  position: absolute;
  top: 18px;
  right: 160px;
}
.hero-section .terms-hero-background .social-media-links .facebook-link img, .hero-section .terms-hero-background .social-media-links .youtube-link img {
  width: 32px;
  height: 32px;
  margin-left: 20px;
  opacity: 0.6;
}

/*****************************************************************************/
/*************                   MAIN section                 ****************/
/*****************************************************************************/
.main-section {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: var(--primary-color-lightgray);
}

.home-main {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: linear-gradient(150deg, #f3f3f3, rgb(228, 228, 90));
}
.home-main .top-msg {
  width: 94%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 10;
}
.home-main .top-msg .vision-msg, .home-main .top-msg .mission-msg {
  width: 550px;
  margin: -100px 60px 30px 60px;
  background-color: var(--primary-color-yellow);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;
  border-top: 24px solid var(--primary-color-dark);
  padding: 0 40px;
  box-shadow: 0px 0px 10px rgba(27, 17, 17, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-weight: 400;
}
.home-main .top-msg .vision-msg a, .home-main .top-msg .mission-msg a {
  display: block;
  margin-top: auto;
  margin-bottom: 26px;
  text-decoration: none;
  color: var(--primary-color-red);
  font-size: 1.3rem;
  align-self: flex-end;
}
.home-main .top-msg .vision-msg a:hover, .home-main .top-msg .mission-msg a:hover {
  color: var(--primary-color-red);
  font-weight: 500;
}
.home-main .top-msg h3 {
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 8px 0 1.5rem auto;
  color: var(--primary-color-dark);
  border-bottom: 1px solid var(--primary-color-dark);
  background: transparent;
  display: block;
  height: 2.8rem;
  width: 100%;
}
.home-main .top-msg p {
  font-size: 1.25rem;
  font-weight: 300;
  margin-top: 5px;
  padding-bottom: 1.6rem;
}
.home-main .top-news-events {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-main .event {
  width: 140ch;
  margin: 20px 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.3);
  display: flex;
}
.home-main .event .event-thumbnail img {
  display: block;
  margin: 10px;
  height: 250px;
  width: auto;
  opacity: 0.9;
  border: 2px solid var(--primary-color-gray);
}
.home-main .event .event-content {
  padding: 20px;
}
.home-main .event .event-content .event-title h3 {
  font-family: roboto, poppins, lato, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
}
.home-main .event .event-content .event-subtitle {
  font-family: roboto, poppins, lato, sans-serif;
  font-size: 1rem;
  font-weight: 300;
}
.home-main .event .event-content .event-desc {
  font-family: roboto, poppins, lato, sans-serif;
  margin-top: 1.1rem;
  letter-spacing: 0.5px;
  font-weight: 300;
}
.home-main .event .event-content .read-more {
  display: block;
  margin-top: 1rem;
  text-decoration: none;
  color: var(--primary-color-blue);
  font-weight: 600;
  font-size: 1.1rem;
}
.home-main .event .event-content .read-more:hover {
  color: var(--primary-color-red);
  font-weight: 600;
}
.home-main .more-events-btn {
  display: block;
  margin-bottom: 60px;
  margin-top: 30px;
}
.home-main .more-events-btn a {
  font-size: 1.1rem;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary-color-white);
  border: 1px solid var(--primary-color-dark);
  border-radius: 8px;
  padding: 8px 40px;
  background-color: var(--primary-color-dark);
}
.home-main .more-events-btn a:hover {
  background-color: var(--primary-color-yellow);
  color: var(--primary-color-dark);
  border: 1px solid var(--primary-color-dark);
}

.donate-main {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--primary-color-gray);
  background-image: linear-gradient(180deg, #f3f3f3, rgb(228, 228, 90));
}
.donate-main .donate-message {
  width: 90ch;
  background-color: white;
  border-radius: 10px;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 10;
  box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.2);
}
.donate-main .donate-message p {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--primary-color-dark);
  text-align: center;
}
.donate-main .donate-btn {
  color: var(--primary-color-white);
  background-color: var(--primary-color-dark);
  border: 1px solid var(--primary-color-dark);
  -moz-columns: var(--primary-color-white);
       columns: var(--primary-color-white);
  padding: 10px 50px;
  margin: 10px 30px 50px 30px;
  border-radius: 5px;
}
.donate-main .donate-btn a {
  color: var(--primary-color-white);
  text-decoration: none;
}
.donate-main .donate-btn:hover {
  color: var(--primary-color-dark);
  border: 1px solid var(--primary-color-dark);
  background-color: var(--primary-color-yellow);
}
.donate-main .donate-btn:hover a {
  color: var(--primary-color-dark);
  text-decoration: none;
}
.donate-main .donate-btn:hover a:hover {
  color: var(--primary-color-dark);
}
.donate-main #venmo-code {
  display: inline;
  margin: 0 auto;
  width: 8rem;
}

.news-main {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: linear-gradient(150deg, #f3f3f3, rgb(228, 228, 90));
}
.news-main .first-event {
  margin: -260px 20px 20px 20px;
}
.news-main .event {
  margin: 20px 20px;
}
.news-main .event, .news-main .first-event {
  width: 85vw;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.3);
  display: flex;
  z-index: 10;
}
.news-main .event .event-thumbnail img, .news-main .first-event .event-thumbnail img {
  display: block;
  margin: 40px 20px 40px 20px;
  height: 240px;
  width: auto;
  border: 4px solid var(--primary-color-lightgray);
  opacity: 1;
}
.news-main .event .event-content, .news-main .first-event .event-content {
  padding: 30px;
}
.news-main .event .event-content .event-title h3, .news-main .first-event .event-content .event-title h3 {
  font-family: roboto, poppins, lato, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
}
.news-main .event .event-content .event-subtitle, .news-main .first-event .event-content .event-subtitle {
  font-family: roboto, poppins, lato, sans-serif;
  font-size: 1rem;
  font-weight: 200;
}
.news-main .event .event-content .event-desc, .news-main .first-event .event-content .event-desc {
  font-family: roboto, poppins, lato, sans-serif;
  font-size: 1.1rem;
  margin-top: 1rem;
  letter-spacing: 0.5px;
  font-weight: 300;
}
.news-main .event .event-content .read-more, .news-main .first-event .event-content .read-more {
  display: block;
  margin-top: 1.5rem;
  text-decoration: none;
  color: var(--primary-color-blue);
  font-weight: 500;
  font-size: 1.1rem;
}
.news-main .event .event-content .read-more:hover, .news-main .first-event .event-content .read-more:hover {
  color: var(--primary-color-red);
  font-weight: 500;
}
.news-main .more-events ul {
  display: flex;
  flex-direction: row;
  margin-bottom: 40px;
  margin-top: 20px;
  list-style: none;
}
.news-main .more-events ul li {
  display: block;
  font-size: 1.2rem;
  text-align: center;
  margin: 0 0.8rem;
}
.news-main .more-events ul li .active-page {
  color: var(--primary-color-dark);
  border: 1px solid var(--primary-color-dark);
  background-color: var(--primary-color-lightgray);
  text-decoration: underline;
}
.news-main .more-events ul li a {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2rem;
  font-weight: 500;
  text-decoration: none;
  padding-top: 0.3rem;
  color: var(--primary-color-white);
  border: 1px solid var(--primary-color-dark);
  border-radius: 6px;
  background-color: var(--primary-color-dark);
}
.news-main .more-events ul li a:hover {
  color: var(--primary-color-dark);
  border: 1px solid var(--primary-color-dark);
  background-color: var(--primary-color-yellow);
}

.event-details-main {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--primary-color-gray);
}
.event-details-main .event-details-container {
  margin: -300px 2rem 2rem 2rem;
  width: 88vw;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.3);
  display: flex;
  flex-wrap: wrap;
  z-index: 10;
}
.event-details-main .event-details-container .error-load {
  display: block;
  padding: 2rem;
  width: 86vw;
  text-align: center;
  color: var(--primary-color-red);
  font-weight: 500;
}
.event-details-main .event-details-container .event-poster {
  margin: 2rem auto;
}
.event-details-main .event-details-container .event-poster img {
  display: block;
  width: 60vw;
  border: 5px solid var(--primary-color-gray);
}
.event-details-main .event-details-container .second-event-poster {
  margin: 2rem auto;
}
.event-details-main .event-details-container .second-event-poster img {
  display: block;
  width: 60vw;
  border: 5px solid var(--primary-color-gray);
}
.event-details-main .event-details-container .event-content {
  padding: 30px;
  text-align: center;
  margin: 2rem auto;
}
.event-details-main .event-details-container .event-content .event-title h3 {
  font-family: roboto, poppins, lato, sans-serif;
  font-size: 2rem;
  font-weight: 600;
}
.event-details-main .event-details-container .event-content .event-subtitle {
  font-family: roboto, poppins, lato, sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  margin-bottom: 2rem;
}
.event-details-main .event-details-container .event-content .event-desc {
  font-family: roboto, poppins, lato, sans-serif;
  margin-top: 1.1rem;
  letter-spacing: 0.5px;
  font-weight: 300;
}
.event-details-main .event-details-container .event-content .links {
  margin-top: 1.5rem;
  font-weight: 300;
}
.event-details-main .event-details-container .event-content .link {
  display: block;
  text-decoration: none;
  color: var(--primary-color-blue);
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
}
.event-details-main .event-details-container .event-content .link:hover {
  color: var(--primary-color-red);
  font-weight: 600;
}
.event-details-main .event-details-container .event-content .attachments {
  margin-top: 1.5rem;
  font-weight: 300;
}
.event-details-main .event-details-container .event-content .attachment-link {
  display: block;
  text-decoration: none;
  color: var(--primary-color-blue);
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
}
.event-details-main .event-details-container .event-content .attachment-link:hover {
  color: var(--primary-color-red);
  font-weight: 600;
}
.event-details-main .event-details-container .event-content .go-back {
  display: block;
  margin-top: 3rem;
  text-decoration: none;
  color: var(--primary-color-blue);
  font-weight: 600;
  font-size: 1.1rem;
  text-align: center;
}
.event-details-main .event-details-container .event-content .go-back:hover {
  color: var(--primary-color-red);
  font-weight: 600;
}

.leadership-main {
  width: 100vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  padding: 110px 40px 60px 40px;
  background-color: var(--primary-color-lightgray);
}
.leadership-main .wrapper-grid {
  width: 98vw;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  grid-gap: 1rem;
  justify-items: center;
}
.leadership-main .wrapper-grid .contact-container {
  display: flex;
  flex-direction: column;
  width: 500px;
  height: 290px;
  background-color: white;
  box-shadow: 0 0 8px 0 rgba(100, 100, 100, 0.3);
  border-radius: 8px;
  padding: 20px;
  margin: 20px;
  font-size: 0.9rem;
  font-weight: 300;
  z-index: 20;
}
.leadership-main .wrapper-grid .contact-container div:nth-child(n+2):nth-child(-n+4) {
  margin-left: 130px;
}
.leadership-main .wrapper-grid .contact-container .full-name {
  font-size: 1.3rem;
  font-weight: 500;
}
.leadership-main .wrapper-grid .contact-container .job-title {
  color: var(--primary-color-green);
}
.leadership-main .wrapper-grid .contact-container .brief-bio {
  margin-top: 0.8rem;
  font-size: 0.9rem;
}
.leadership-main .wrapper-grid .contact-container .portrait-thumbnail img {
  position: absolute;
  width: 120px;
  height: auto;
  margin-top: -50px;
  border-radius: 50rem;
  border: 6px solid white;
}
.leadership-main .wrapper-grid .contact-container .social-media-links {
  position: absolute;
  margin-top: 90px;
  width: 110px;
}
.leadership-main .wrapper-grid .contact-container .social-media-links ul {
  display: flex;
  justify-content: center;
  list-style: none;
}
.leadership-main .wrapper-grid .contact-container .social-media-links ul li a {
  display: block;
  text-decoration: none;
  padding: 0 4px;
}
.leadership-main .wrapper-grid .contact-container .social-media-links ul li a img {
  width: 28px;
  height: auto;
}
.leadership-main .wrapper-grid .contact-container .full-bio {
  font-weight: 500;
  margin-left: auto;
  margin-top: 10px;
  text-align: right;
  font-size: 0.8rem;
}
.leadership-main .wrapper-grid .contact-container .full-bio a {
  text-decoration: none;
  color: var(--primary-color-blue);
}
.leadership-main .wrapper-grid .contact-container .full-bio a:hover {
  font-weight: 500;
  color: var(--primary-color-red);
}
.leadership-main .board-emeritus {
  width: 60vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 12px;
  background-color: var(--primary-color-gray);
  padding-bottom: 1rem;
  margin-top: 2rem;
}
.leadership-main .board-emeritus .emeritus-header {
  width: 60vw;
  display: block;
  margin: 0 auto;
  border-top: 1.2rem solid var(--primary-color-dark);
}
.leadership-main .board-emeritus .emeritus-header h2 {
  display: block;
  font-size: 1.5em;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 auto;
  padding: 0.5rem 1.5rem 2.4rem 1.5rem;
  text-align: center;
  color: var(--primary-color-dark);
  border-bottom: 1px solid #021d24;
  height: 2.8rem;
  width: 28ch;
}
.leadership-main .board-emeritus .former-contact-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 110px;
  background-color: white;
  box-shadow: 0 0 8px 0 rgba(100, 100, 100, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin: 30px 20px 10px 20px;
  font-size: 0.9rem;
  font-weight: 300;
  z-index: 20;
}
.leadership-main .board-emeritus .former-contact-container div:nth-child(n+2):nth-child(-n+4) {
  margin: 0 auto;
  text-align: center;
}
.leadership-main .board-emeritus .former-contact-container .full-name {
  margin: 0 auto;
  font-size: 1.1rem;
  font-weight: 500;
}
.leadership-main .board-emeritus .former-contact-container .prev-job-title {
  color: var(--primary-color-dark);
  font-size: 0.9rem;
}
.leadership-main .board-emeritus .former-contact-container .prev-job-title span {
  color: var(--primary-color-green);
  font-size: 0.9rem;
  font-weight: 400;
}
.leadership-main .board-emeritus .former-contact-container .service-term {
  color: var(--primary-color-dark);
  font-size: 0.9rem;
}
.leadership-main .board-emeritus .former-contact-container .service-term span {
  font-size: 0.9rem;
  font-weight: 400;
}
.leadership-main .board-emeritus .former-contact-container .portrait-thumbnail img {
  position: absolute;
  width: 100px;
  height: auto;
  margin-top: 0px;
  border-radius: 8px;
}
.leadership-main .board-emeritus .former-contact-container .social-media-links {
  position: absolute;
  margin-top: 90px;
  width: 120px;
}
.leadership-main .board-emeritus .former-contact-container .social-media-links ul {
  display: flex;
  justify-content: center;
  list-style: none;
}
.leadership-main .board-emeritus .former-contact-container .social-media-links ul li a {
  display: block;
  text-decoration: none;
  padding: 0 5px;
}
.leadership-main .board-emeritus .former-contact-container .social-media-links ul li a img {
  width: 30px;
  height: auto;
}
.leadership-main .board-emeritus .former-contact-container .full-bio {
  margin: 15px auto;
  font-weight: 500;
}
.leadership-main .board-emeritus .former-contact-container .full-bio a {
  text-decoration: none;
  color: var(--primary-color-blue);
}
.leadership-main .board-emeritus .former-contact-container .full-bio a:hover {
  font-weight: 500;
  color: var(--primary-color-red);
}

.contactdetails-main {
  width: 76vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 20px;
  margin: -360px 20px 40px 20px;
  background-color: white;
  box-shadow: 0 0 8px 0 rgba(100, 100, 100, 0.3);
  border-radius: 8px;
  z-index: 18;
}
.contactdetails-main .contact-container-left {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  z-index: 20;
  width: 26rem;
}
.contactdetails-main .contact-container-left .full-name {
  position: relative;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0.6rem auto;
  width: 24rem;
  text-align: center;
}
.contactdetails-main .contact-container-left .job-title {
  position: relative;
  color: var(--primary-color-green);
  margin: 0 auto;
  width: 24rem;
  text-align: center;
}
.contactdetails-main .contact-container-left .portrait-thumbnail img {
  position: relative;
  width: 24rem;
  height: auto;
  border-radius: 10px;
  border: 6px solid var(--primary-color-gray);
}
.contactdetails-main .contact-container-left .social-media-links {
  position: relative;
  margin: 1rem auto;
  width: 24rem;
  text-align: center;
}
.contactdetails-main .contact-container-left .social-media-links ul {
  display: flex;
  justify-content: center;
  list-style: none;
  text-align: center;
}
.contactdetails-main .contact-container-left .social-media-links ul li a {
  display: block;
  text-decoration: none;
  padding: 0 20px 0 0;
}
.contactdetails-main .contact-container-left .social-media-links ul li a img {
  width: 40px;
  height: auto;
}
.contactdetails-main .contact-container-right {
  position: relative;
  padding: 1rem;
  width: calc(76vw - 30rem);
}
.contactdetails-main .contact-container-right .full-bio {
  margin-left: 10px;
}
.contactdetails-main .contact-container-right .full-bio p {
  font-size: 1.1rem;
}
.contactdetails-main .contact-container-right .full-bio a {
  font-weight: 400;
  text-decoration: none;
  color: var(--primary-color-blue);
}
.contactdetails-main .contact-container-right .full-bio a:hover {
  color: var(--primary-color-red);
}
.contactdetails-main .contact-container-right .go-back a {
  text-decoration: none;
  font-weight: 600;
  color: var(--primary-color-blue);
}
.contactdetails-main .contact-container-right .go-back a:hover {
  color: var(--primary-color-red);
}

.aboutus-main {
  width: 100vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  background-color: var(--primary-color-gray);
  margin-top: -60px;
}
.aboutus-main .aboutus-statement {
  display: flex;
  flex-direction: column;
  width: 100vw;
  margin-top: -100px;
  background-color: var(--primary-color-lightblue);
  padding: 20px;
  z-index: 20;
}
.aboutus-main .aboutus-statement h2 {
  display: block;
  font-size: 1.6em;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 auto;
  padding: 0.5rem 1.5rem 2.4rem 1.5rem;
  text-align: center;
  color: var(--primary-color-dark);
  border-bottom: 1px solid rgb(2, 29, 36);
  height: 2.8rem;
}
.aboutus-main .aboutus-statement .aboutus-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 94vw;
  background-color: var(--primary-color-lightblue);
  padding: 10px;
  margin: 10px auto;
  z-index: 30;
  font-weight: 400;
}
.aboutus-main .aboutus-statement .aboutus-container .box-content {
  display: block;
  width: 27ch;
  height: 13.4rem;
  background-color: white;
  padding: 1.3rem 1rem;
  margin: 10px 10px;
  z-index: 33;
  font-size: 1.1rem;
  border-top: 20px solid var(--primary-color-darkblue);
  text-align: center;
  box-shadow: 0px 0px 8px rgba(183, 186, 192, 0.6);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  font-weight: 300;
}
.aboutus-main .aboutus-statement .box-content-bottom {
  display: block;
  width: 60vw;
  padding: 1rem 1rem 0 1rem;
  margin: 10px auto;
  z-index: 33;
  font-size: 1rem;
  text-align: center;
  font-weight: 300;
}
.aboutus-main .mission-statement {
  display: flex;
  flex-direction: column;
  width: 100vw;
  background-color: var(--primary-color-darkblue);
  padding: 2rem;
  z-index: 20;
}
.aboutus-main .mission-statement h2 {
  display: block;
  font-size: 1.6em;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0px auto;
  padding: 0.5rem 1.5rem 2.4rem 1.5rem;
  text-align: center;
  color: var(--primary-color-white);
  border-bottom: 1px solid var(--primary-color-white);
  height: 2.8rem;
}
.aboutus-main .mission-container ul {
  display: block;
  flex-direction: row;
  width: 84ch;
  text-align: left;
  background-color: var(--primary-color-darkblue);
  padding: 20px;
  margin: 10px auto;
  z-index: 30;
  list-style-type: square;
}
.aboutus-main .mission-container ul li {
  font-size: 1.1rem;
  color: var(--primary-color-white);
  font-weight: 200;
  margin: 0.8rem 0.5rem;
}

.contact-main {
  width: 100vw;
  margin-top: -300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: var(--primary-color-gray);
}
.contact-main .contact-form {
  flex: 1 1 40rem;
  height: auto;
  background-color: var(--primary-color-lightgray);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.contact-main .contact-form .contact-list {
  padding: 20px 40px;
  margin: 20px auto;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top: 20px solid var(--primary-color-dark);
  box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.2);
  background-color: white;
}
.contact-main .contact-form .contact-list ul li.contact-person {
  text-decoration: none;
  list-style: none;
  display: block;
}
.contact-main .contact-form .contact-list ul li.contact-person .contact-title {
  display: block;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 500;
  margin-top: -0.8rem;
  text-align: center;
  border-bottom: 1px solid var(--primary-color-dark);
  margin-bottom: 1.1rem;
}
.contact-main .contact-form .contact-list ul li.contact-person .person-title {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 300;
}
.contact-main .contact-form .contact-list ul li.contact-person .person-name {
  display: inline-block;
  font-size: 1rem;
  font-weight: 500;
}
.contact-main .contact-form .contact-list ul li.contact-person .email-address {
  display: block;
  font-size: 0.9rem;
  font-weight: 300;
  margin-bottom: 1rem;
}
.contact-main .contact-form .form-container {
  padding: 20px 40px;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.2);
  background-color: white;
}
.contact-main .contact-form .form-container .success-submit {
  display: block;
}
.contact-main .contact-form .form-container .success-submit p {
  text-align: center;
}
.contact-main .contact-form .form-container h2.success-state {
  color: var(--primary-color-blue);
  text-align: center;
}
.contact-main .contact-form .form-container h3 {
  display: block;
  color: var(--primary-color-dark);
  font-weight: 500;
  font-size: 1.1rem;
  margin: 10px auto;
  text-align: center;
}
.contact-main .contact-form .form-container h3.failure-state {
  color: var(--primary-color-red);
}
.contact-main .contact-form .form-container form {
  margin: 3rem;
}
.contact-main .contact-form .form-container form label, .contact-main .contact-form .form-container form p {
  display: block;
  color: var(--primary-color-dark);
  font-weight: 400;
  margin: 16px 0 5px 0;
}
.contact-main .contact-form .form-container form input {
  border: 1px solid rgb(184, 182, 182);
  border-radius: 5px;
  height: 2rem;
  width: 24em;
  padding-left: 8px;
}
.contact-main .contact-form .form-container form input.failure-state {
  border: 1px solid var(--primary-color-red);
}
.contact-main .contact-form .form-container form .phone-type {
  color: var(--primary-color-dark);
  display: block;
  margin: 10px auto;
}
.contact-main .contact-form .form-container form .phone-type label, .contact-main .contact-form .form-container form .phone-type p {
  display: inline;
  color: var(--primary-color-dark);
}
.contact-main .contact-form .form-container form .phone-type .radio-btn {
  display: inline-block;
  width: 1.5rem;
}
.contact-main .contact-form .form-container form textarea {
  display: block;
  width: 25rem;
  border: 1px solid rgb(184, 182, 182);
  border-radius: 5px;
  padding: 2px 6px 2px 8px;
}
.contact-main .contact-form .form-container form textarea.failure-state {
  border: 1px solid var(--primary-color-red);
}
.contact-main .contact-form .form-container form .required-field {
  color: var(--primary-color-red);
}
.contact-main .contact-form .form-container form .submit {
  display: block;
  height: 34px;
  width: 160px;
  margin: 26px auto;
  border: 1px solid var(--primary-color-dark);
  border-radius: 5px;
  background-color: var(--primary-color-dark);
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 1px;
  color: var(--primary-color-white);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.contact-main .contact-form .form-container form .submit:hover {
  color: var(--primary-color-dark);
  background-color: var(--primary-color-yellow);
  border: 1px solid var(--primary-color-dark);
}
.contact-main .contact-map {
  flex: 1 1 50rem;
  height: auto;
  background-image: linear-gradient(150deg, #f3f3f3, #e4e45a);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}
.contact-main .contact-map .map-container {
  display: flex;
  flex-direction: column;
  margin: 30px auto;
}
.contact-main .contact-map .map-container iframe {
  display: block;
  width: 42vw;
  height: 30vw;
  margin: 0 auto;
  max-width: 800px;
  max-height: 600px;
  border: 4px solid var(--primary-color-white);
  box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.3);
}
.contact-main .contact-map .address-container {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  font-size: 1.2rem;
  letter-spacing: 1px;
  width: 90%;
}
.contact-main .contact-map .address-container .address-container-left {
  flex: 1 1 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  text-transform: uppercase;
}
.contact-main .contact-map .address-container .address-container-left div:nth-child(1) {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-color-red);
}
.contact-main .contact-map .address-container .address-container-right {
  flex: 1 1 20rem;
  margin: 0px 0 30px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--primary-color-dark);
}
.contact-main .contact-map .address-container .address-container-right a {
  text-decoration: none;
  color: var(--primary-color-dark);
}
.contact-main .contact-map .address-container .address-container-right a:hover {
  color: var(--primary-color-red);
}
.contact-main .contact-map .address-container .address-container-right .social-media img {
  width: 34px;
  height: auto;
  margin: 20px 30px 0 0;
}

.privacy-main {
  width: 100vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  background-color: var(--primary-color-gray);
}
.privacy-main .privacy-container {
  display: block;
  width: 120ch;
  background-color: white;
  padding: 2rem 6rem;
  margin: 36px auto;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.3);
}
.privacy-main .privacy-container h3 {
  font-weight: 600;
  font-size: 1.2rem;
  margin: 1rem 0 0.6rem 0;
}
.privacy-main .privacy-container h3.date {
  color: var(--primary-color-blue);
  margin: 2rem auto;
  text-align: center;
}
.privacy-main .privacy-container h4 {
  font-weight: 500;
  font-size: 1.1rem;
  margin: 1rem 0 0.6rem 0;
}
.privacy-main .privacy-container p {
  font-size: 0.9rem;
}

.terms-main {
  width: 100vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  background-color: white;
}
.terms-main .terms-container {
  display: block;
  width: 120ch;
  background-color: white;
  padding: 2rem 6rem;
  margin: 3rem auto;
  border-radius: 8px;
}
.terms-main .terms-container h3 {
  font-weight: 600;
  font-size: 1.2rem;
  margin: 1rem 0 0.6rem 0;
}
.terms-main .terms-container h3.date {
  color: var(--primary-color-blue);
  margin: 2rem auto;
  text-align: center;
}
.terms-main .terms-container h4 {
  font-weight: 500;
  font-size: 1.1rem;
  margin: 1rem 0 0.6rem 0;
}
.terms-main .terms-container p {
  font-size: 1rem;
}

/*****************************************************************************/
/*************                      Footer                    ****************/
/*****************************************************************************/
.footer-section {
  margin-top: auto;
  background-color: var(--primary-color-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.footer-section .footer {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-section .footer .left-section {
  padding: 0px 18px 0px 18px;
  margin: 30px 0 10px 0;
}
.footer-section .footer .left-section .success-submit {
  color: var(--primary-color-yellow);
}
.footer-section .footer .left-section h2 {
  color: var(--primary-color-white);
  font-weight: 400;
  font-size: 1.1rem;
}
.footer-section .footer .left-section label {
  display: block;
  font-size: 0.9rem;
  color: var(--primary-color-white);
  font-weight: 300;
  margin: 16px 0 5px 0;
}
.footer-section .footer .left-section input {
  display: inline-block;
  border: 1px solid var(--primary-color-gray);
  border-radius: 5px;
  height: 2rem;
  width: 20rem;
  padding-left: 6px;
}
.footer-section .footer .left-section input.failure-state {
  border: 1px solid var(--primary-color-red);
  background-color: lightpink;
}
.footer-section .footer .left-section h3.failure-state {
  color: var(--primary-color-red);
  font-size: 0.9rem;
  font-weight: 400;
}
.footer-section .footer .left-section .submit {
  display: block;
  height: 32px;
  width: 140px;
  margin-left: auto;
  margin-top: 26px;
  border: 1px solid var(--primary-color-yellow);
  border-radius: 5px;
  background-color: transparent;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary-color-yellow);
  cursor: pointer;
}
.footer-section .footer .left-section .submit:hover {
  border: 1px solid var(--primary-color-yellow);
  color: var(--primary-color-dark);
  background-color: var(--primary-color-yellow);
}
.footer-section .footer .right-section {
  padding: 0px 20px 0px 40px;
  margin: 40px 0 10px 0;
  border-left: 1px solid var(--primary-color-yellow);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.footer-section .footer .right-section #njvaca {
  font-weight: 400;
  color: var(--primary-color-white);
  font-size: 1.1rem;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}
.footer-section .footer .right-section .addr1, .footer-section .footer .right-section .addr2, .footer-section .footer .right-section .contact-info {
  color: var(--primary-color-white);
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 2px;
}
.footer-section .footer .right-section .contact-info {
  margin-top: 0.5rem;
}
.footer-section .footer .right-section .contact-info .bar {
  color: var(--primary-color-yellow);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 400;
  padding: 0 0.6rem;
}
.footer-section .footer .right-section .contact-info a {
  text-decoration: none;
  color: var(--primary-color-white);
}
.footer-section .footer .right-section .contact-info a:hover {
  color: var(--primary-color-yellow);
}
.footer-section .footer .right-section .social-media img {
  width: 32px;
  height: auto;
  margin: 30px 30px 0 0;
}

.footer-section .copyright {
  margin: 1rem;
  color: var(--primary-color-white);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 100;
  letter-spacing: 2px;
}
.footer-section .copyright .bar {
  color: var(--primary-color-yellow);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 400;
  padding: 0 1rem;
}
.footer-section .copyright a {
  text-decoration: none;
  color: var(--primary-color-white);
}
.footer-section .copyright a:hover {
  color: var(--primary-color-yellow);
  text-decoration: none;
}

/***************************************************************************************************************/
/****************************                 For Screen <= 900px                *******************************/
/***************************************************************************************************************/
@media all and (max-width: 900px) {
  .nav__logo img {
    margin: 10px 0 0 40px;
    width: 86px;
    height: 86px;
    z-index: 1000;
  }
  .nav__logo .nav__logoframe {
    margin: 8px 0 0 38px;
    width: 90px;
    height: 90px;
    background-color: var(--primary-color-dark);
    border-radius: 50%;
  }

  .nav.active {
    position: absolute;
    padding: 16px;
    background-color: var(--primary-color-dark);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100vw;
    height: 100vh;
    opacity: 0.99;
    z-index: 999;
  }

  .nav {
    display: none;
    z-index: 999;
  }

  .navbar {
    width: 100vw;
  }

  .nav__list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
  }

  .nav__item {
    font-size: 1.8rem;
    padding: 18px 0;
    text-transform: uppercase;
  }

  .nav__item:nth-child(1) {
    margin-top: 60px;
  }

  .nav__donate {
    font-size: 18px;
    margin: 30px 30px 0 0;
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid white;
    border-radius: 8px;
  }

  .menubtn {
    position: absolute;
  }

  .closebtn {
    position: absolute;
  }

  .menubtn.active {
    display: block;
  }

  .closebtn.active {
    display: block;
  }

  .hero-section .home-hero-background .home-title {
    margin-top: 1rem;
  }
  .hero-section .home-hero-background .home-title h1 {
    font-size: 1.5rem;
    width: 96vw;
    margin-bottom: 1rem;
  }
  .hero-section .home-hero-background .home-subtitle {
    margin: 0 auto;
    text-align: center;
  }
  .hero-section .home-hero-background .home-subtitle h2 {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    width: 96vw;
    flex-wrap: wrap;
    margin: 0px auto;
  }
  .hero-section .home-hero-background .home-subtitle h2 span {
    display: block;
    width: 90%;
    text-align: center;
    margin: 0 auto;
  }
  .hero-section .home-hero-background .social-media-links {
    top: 22px;
    right: 50px;
  }
  .hero-section .home-hero-background .social-media-links .facebook-link img, .hero-section .home-hero-background .social-media-links .youtube-link img {
    width: 32px;
    height: 32px;
    margin-left: 30px;
  }

  .hero-section .home-hero-background .home-subtitle h2 {
    font-size: 1rem;
    width: 96vw;
  }

  .hero-section .home-hero-background .volunteer {
    font-size: 1.2rem;
  }

  .home-main .top-msg {
    width: 100%;
  }
  .home-main .top-msg .vision-msg, .home-main .top-msg .mission-msg {
    width: 92vw;
    border-radius: 8px;
    text-align: center;
    padding: 20px 40px;
  }
  .home-main .top-msg .vision-msg p, .home-main .top-msg .mission-msg p {
    font-size: 1.2rem;
    width: 99%;
  }
  .home-main .top-msg .vision-msg {
    margin: -100px 30px 30px 30px;
  }
  .home-main .top-msg .mission-msg {
    margin: 10px 30px 30px 30px;
  }
  .home-main .top-msg h3 {
    height: 2.8rem;
  }
  .home-main .top-news-events .event {
    width: 92%;
    flex-direction: column;
  }
  .home-main .top-news-events .event .event-thumbnail {
    display: none;
  }
  .home-main .top-news-events .event .event-content .event-title {
    font-size: 1.6rem;
  }
  .home-main .top-news-events .event .event-content .event-subtitle {
    font-size: 1.1rem;
  }
  .home-main .top-news-events .event .event-content p {
    font-size: 1.2rem;
  }

  .hero-section .donate-hero-background {
    width: 100vw;
    height: 600px;
    /* You must set a specified height */
  }
  .hero-section .donate-hero-background h1 {
    margin-top: 7rem;
    font-size: 3rem;
    width: 14ch;
  }
  .hero-section .donate-hero-background h2 {
    width: 96vw;
    margin-top: 1rem;
  }
  .hero-section .donate-hero-background .social-media-links {
    right: 50px;
  }

  .donate-main .donate-message {
    width: 90vw;
  }

  .hero-section .news-hero-background {
    width: 100vw;
    height: 600px;
    /* You must set a specified height */
  }
  .hero-section .news-hero-background h1 {
    width: 15ch;
    margin-top: 4rem;
  }
  .hero-section .news-hero-background .volunteer {
    display: block;
    font-size: 1.2rem;
    margin-top: 1rem;
  }
  .hero-section .news-hero-background .social-media-links {
    position: absolute;
    top: 18px;
    right: 50px;
  }

  .hero-section .event-details-hero-background {
    width: 100vw;
    height: 600px;
    /* You must set a specified height */
  }
  .hero-section .event-details-hero-background h1 {
    width: 15ch;
    margin-top: 4rem;
  }
  .hero-section .event-details-hero-background .volunteer {
    display: block;
    font-size: 1.2rem;
    margin-top: 1rem;
  }
  .hero-section .event-details-hero-background .social-media-links {
    position: absolute;
    top: 18px;
    right: 50px;
  }

  .news-main .first-event {
    margin: -260px 20px 20px 20px;
  }
  .news-main .event, .news-main .first-event {
    width: 92vw;
  }
  .news-main .event .event-thumbnail img, .news-main .first-event .event-thumbnail img {
    display: none;
    height: 120px;
  }
  .news-main .event .event-content, .news-main .first-event .event-content {
    padding: 20px;
  }
  .news-main .event .event-content .event-title h3, .news-main .first-event .event-content .event-title h3 {
    font-size: 1.4rem;
    font-weight: 600;
  }
  .news-main .event .event-content .event-subtitle, .news-main .first-event .event-content .event-subtitle {
    font-size: 0.9rem;
    font-weight: 200;
  }
  .news-main .event .event-content .event-desc, .news-main .first-event .event-content .event-desc {
    margin-top: 1.1rem;
    letter-spacing: 0.5px;
    font-weight: 300;
  }

  .event-details-main .event-details-container {
    width: 100vw;
  }
  .event-details-main .event-details-container .event-poster img {
    width: 94vw;
  }
  .event-details-main .event-details-container .second-event-poster img {
    width: 94vw;
  }
  .event-details-main .event-details-container .event-content {
    padding: 20px;
  }
  .event-details-main .event-details-container .event-content .event-title h3 {
    font-size: 1.4rem;
    font-weight: 600;
  }
  .event-details-main .event-details-container .event-content .event-subtitle {
    font-size: 0.9rem;
    font-weight: 200;
  }
  .event-details-main .event-details-container .event-content .event-desc {
    margin-top: 1.1rem;
    letter-spacing: 0.5px;
    font-weight: 300;
  }

  .hero-section .leadership-hero-background {
    position: relative;
    margin-top: 64px;
    background-image: url("../images/leadership_hero_overlaid.png");
    width: 100vw;
    height: 260px;
    /* You must set a specified height */
    background-position: center;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: cover;
    /* Resize the background image to cover the entire container */
    z-index: 0;
  }
  .hero-section .leadership-hero-background .fancy-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .hero-section .leadership-hero-background .leadership-title, .hero-section .leadership-hero-background .leadership-subtitle {
    height: 100%;
  }
  .hero-section .leadership-hero-background h1 {
    display: block;
    color: var(--primary-color-white);
    margin-top: 4.5rem;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 2px;
    width: 36ch;
    text-align: center;
  }
  .hero-section .leadership-hero-background h2 {
    display: none;
  }
  .hero-section .leadership-hero-background .volunteer {
    position: absolute;
    display: block;
    margin-top: 180px;
    font-size: 1.2rem;
  }
  .hero-section .leadership-hero-background .volunteer a {
    color: var(--primary-color-dark);
    border: 2px solid var(--primary-color-dark);
  }
  .hero-section .leadership-hero-background .social-media-links {
    top: 18px;
    right: 50px;
  }

  .leadership-main {
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 6px;
    background-color: var(--primary-color-lightgray);
  }
  .leadership-main .wrapper-grid {
    width: 99vw;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    grid-gap: 1rem;
  }
  .leadership-main .wrapper-grid .contact-container {
    display: flex;
    flex-direction: column;
    width: 380px;
    height: 320px;
    background-color: white;
    border-radius: 8px;
    padding: 10px;
    margin: 20px 4px;
    z-index: 20;
  }
  .leadership-main .wrapper-grid .contact-container div:nth-child(n+2):nth-child(-n+4) {
    margin-left: 108px;
  }
  .leadership-main .wrapper-grid .contact-container .job-title {
    font-size: 0.85rem;
  }
  .leadership-main .wrapper-grid .contact-container .full-name {
    font-size: 1.15rem;
    font-weight: 500;
    margin-top: 0.5rem;
  }
  .leadership-main .wrapper-grid .contact-container .brief-bio {
    margin-top: 0.7rem;
  }
  .leadership-main .wrapper-grid .contact-container .portrait-thumbnail img {
    position: absolute;
    width: 100px;
    height: auto;
    margin-top: 0;
    border-radius: 12px;
    border: 2px solid white;
  }
  .leadership-main .wrapper-grid .contact-container .social-media-links {
    position: absolute;
    margin-top: 120px;
  }
  .leadership-main .wrapper-grid .contact-container .full-bio {
    font-weight: 500;
    margin-left: auto;
    margin-top: 8px;
    text-align: right;
    font-size: 0.7rem;
  }
  .leadership-main .board-emeritus {
    width: 94vw;
  }
  .leadership-main .board-emeritus .emeritus-header {
    width: 94vw;
    margin: 0 auto;
  }
  .leadership-main .board-emeritus .emeritus-header h2 {
    display: block;
    font-size: 1.3em;
    font-weight: 500;
    width: 28ch;
  }
  .leadership-main .board-emeritus .former-contact-container {
    width: 48ch;
    height: 105px;
    padding: 10px;
    margin: 20px 10px 5px 10px;
  }
  .leadership-main .board-emeritus .former-contact-container .full-name {
    font-size: 1.1rem;
    font-weight: 500;
  }
  .leadership-main .board-emeritus .former-contact-container .prev-job-title {
    color: var(--primary-color-dark);
    font-size: 0.9rem;
  }
  .leadership-main .board-emeritus .former-contact-container .service-term {
    color: var(--primary-color-dark);
    font-size: 0.9rem;
  }
  .leadership-main .board-emeritus .former-contact-container .portrait-thumbnail img {
    position: absolute;
    width: 80px;
    height: auto;
    margin-top: 0px;
    border-radius: 6px;
  }
  .leadership-main .board-emeritus .former-contact-container .social-media-links {
    position: absolute;
    margin-top: 90px;
    width: 110px;
  }
  .leadership-main .board-emeritus .former-contact-container .social-media-links ul {
    display: flex;
    justify-content: center;
    list-style: none;
  }
  .leadership-main .board-emeritus .former-contact-container .social-media-links ul li a {
    display: block;
    text-decoration: none;
    padding: 0 5px;
  }
  .leadership-main .board-emeritus .former-contact-container .social-media-links ul li a img {
    width: 26px;
    height: auto;
  }
  .leadership-main .board-emeritus .former-contact-container .full-bio {
    margin: 10px auto;
    font-weight: 500;
  }
  .leadership-main .board-emeritus .former-contact-container .full-bio a {
    text-decoration: none;
    color: var(--primary-color-blue);
  }
  .leadership-main .board-emeritus .former-contact-container .full-bio a:hover {
    font-weight: 500;
    color: var(--primary-color-red);
  }

  .hero-section .contactdetails-hero-background .social-media-links {
    right: 60px;
  }

  .contactdetails-main {
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    background-color: white;
    z-index: 18;
  }
  .contactdetails-main .contact-container-left {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0.5rem;
    z-index: 20;
    width: 92vw;
  }
  .contactdetails-main .contact-container-left .full-name {
    position: relative;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 1rem auto;
    text-align: center;
    width: 92vw;
  }
  .contactdetails-main .contact-container-left .job-title {
    position: relative;
    color: var(--primary-color-green);
    text-align: center;
    margin: 0 auto;
    width: 92vw;
  }
  .contactdetails-main .contact-container-left .portrait-thumbnail {
    position: relative;
    margin: 0 auto;
  }
  .contactdetails-main .contact-container-left .portrait-thumbnail img {
    width: 80vw;
    height: auto;
    border-radius: 10px;
    border: 6px solid var(--primary-color-gray);
  }
  .contactdetails-main .contact-container-left .social-media-links {
    position: relative;
    margin: 1rem auto;
    width: 92vw;
  }
  .contactdetails-main .contact-container-left .social-media-links ul {
    display: flex;
    justify-content: center;
    list-style: none;
  }
  .contactdetails-main .contact-container-left .social-media-links ul li a {
    display: block;
    text-decoration: none;
    padding: 0 20px 0 0;
  }
  .contactdetails-main .contact-container-left .social-media-links ul li a img {
    width: 40px;
    height: auto;
  }
  .contactdetails-main .contact-container-right {
    position: relative;
    padding: 0.5rem;
    width: 92vw;
  }
  .contactdetails-main .contact-container-right .full-bio {
    margin-left: 10px;
  }
  .contactdetails-main .contact-container-right .full-bio p {
    font-size: 1rem;
  }

  .hero-section .aboutus-hero-background h1 {
    width: 90vw;
    text-align: center;
    margin-top: 6.2rem;
  }
  .hero-section .aboutus-hero-background h2 {
    width: 92vw;
    font-size: 1.1rem;
    font-weight: 400;
    margin-top: 30px;
  }
  .hero-section .aboutus-hero-background .social-media-links {
    right: 50px;
  }

  .aboutus-main {
    margin-top: 1rem;
  }
  .aboutus-main .aboutus-container {
    width: 98vw;
  }
  .aboutus-main .aboutus-container ul {
    width: 94vw;
  }
  .aboutus-main .aboutus-statement .box-content-bottom {
    width: 90vw;
  }
  .aboutus-main .mission-container ul {
    width: 90vw;
  }

  .hero-section .contact-hero-background {
    margin-top: 64px;
    height: 620px;
    /* You must set a specified height */
  }
  .hero-section .contact-hero-background .contact-title, .hero-section .contact-hero-background .contact-subtitle {
    margin: 0 auto;
  }
  .hero-section .contact-hero-background h1 {
    font-size: 2.2rem;
    font-weight: 400;
    width: 12ch;
    margin-top: 4rem;
  }
  .hero-section .contact-hero-background .social-media-links {
    right: 50px;
  }

  .contact-main .contact-form {
    flex: 1 1 96vw;
    height: auto;
    background-color: var(--primary-color-lightgray);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }
  .contact-main .contact-form .form-container {
    padding: 20px 10px;
    margin: 20px auto;
    width: 94%;
    border-radius: 0px;
    box-shadow: 0px 0px 0px rgba(50, 50, 50, 0.2);
    background-color: white;
  }
  .contact-main .contact-form .form-container form {
    margin: 10px;
  }
  .contact-main .contact-form .form-container form label, .contact-main .contact-form .form-container form p {
    display: block;
    color: var(--primary-color-dark);
    font-weight: 400;
    width: 92%;
    margin: 0 auto;
    margin-top: 25px;
  }
  .contact-main .contact-form .form-container form input {
    display: block;
    border: 1px solid rgb(184, 182, 182);
    border-radius: 5px;
    height: 34px;
    width: 92%;
    padding-left: 8px;
    margin: 10px auto;
  }
  .contact-main .contact-form .form-container form .phone-type {
    width: 92%;
    margin: 10px auto;
    color: var(--primary-color-dark);
  }
  .contact-main .contact-form .form-container form .phone-type label.radio-btn, .contact-main .contact-form .form-container form .phone-type p {
    display: inline;
    margin-right: 1px;
  }
  .contact-main .contact-form .form-container form .phone-type input.radio-btn {
    display: inline;
    margin-left: 1px;
  }
  .contact-main .contact-form .form-container form .phone-type .small-screen {
    display: none;
  }
  .contact-main .contact-form .form-container form textarea {
    display: block;
    width: 92%;
    height: 16em;
    order: 1px solid rgb(221, 219, 219);
    border-radius: 5px;
    padding: 2px 6px;
    margin: 10px auto;
  }
  .contact-main .contact-form .form-container form .submit {
    margin: 30px auto;
    font-size: 1.2rem;
  }
  .contact-main .contact-map {
    flex: 1 1 50rem;
    height: auto;
    background-color: var(--primary-color-yellow);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
  }
  .contact-main .contact-map .map-container {
    display: flex;
    flex-direction: column;
    margin: 30px auto;
  }
  .contact-main .contact-map .map-container iframe {
    display: block;
    width: 94vw;
    height: 70.5vw;
    margin: 0 auto;
    max-width: 800px;
    max-height: 600px;
  }
  .contact-main .contact-map .address-container {
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    font-size: 1.2rem;
    color: var(--primary-color-dark);
    letter-spacing: 2px;
    width: 90%;
  }
  .contact-main .contact-map .address-container .address-container-left {
    flex: 1 1 30rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    text-transform: uppercase;
  }
  .contact-main .contact-map .address-container .address-container-left div:nth-child(1) {
    font-size: 1.8rem;
    font-weight: 700;
  }
  .contact-main .contact-map .address-container .address-container-right {
    flex: 1 1 30rem;
    margin: 20px 0 50px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .contact-main .contact-map .address-container .address-container-right .social-media img {
    width: 34px;
    height: auto;
    margin: 20px 30px 0 0;
  }

  .footer-section .footer .right-section {
    border-left: 0;
    padding-top: 30px;
  }

  .hero-section .privacy-hero-background {
    width: 100vw;
    height: 300px;
    /* You must set a specified height */
  }
  .hero-section .privacy-hero-background .privacy-title, .hero-section .privacy-hero-background .privacy-subtitle {
    margin: 0 auto;
  }
  .hero-section .privacy-hero-background h1 {
    font-size: 3rem;
    width: 12ch;
  }
  .hero-section .privacy-hero-background .social-media-links {
    position: absolute;
    top: 18px;
    right: 50px;
  }

  .privacy-main .privacy-container {
    display: block;
    width: 94%;
    background-color: white;
    padding: 2rem 2rem;
    margin: 20px auto;
  }
  .privacy-main .privacy-container h3 {
    font-weight: 600;
    font-size: 1.2rem;
    margin: 1rem 0 0.6rem 0;
  }
  .privacy-main .privacy-container h3.date {
    color: var(--primary-color-blue);
    margin: 1rem auto;
    text-align: center;
  }
  .privacy-main .privacy-container h4 {
    font-weight: 500;
    font-size: 1.1rem;
    margin: 1rem 0 0.6rem 0;
  }
  .privacy-main .privacy-container p {
    font-size: 0.9rem;
  }

  .hero-section .terms-hero-background {
    width: 100vw;
    height: 300px;
    /* You must set a specified height */
  }
  .hero-section .terms-hero-background .terms-title, .hero-section .terms-hero-background .terms-subtitle {
    margin: 0 auto;
  }
  .hero-section .terms-hero-background h1 {
    font-size: 3rem;
    width: 10ch;
  }
  .hero-section .terms-hero-background .social-media-links {
    right: 50px;
  }

  .terms-main .terms-container {
    display: block;
    width: 94%;
    background-color: white;
    padding: 2rem 2rem;
    margin: 20px auto;
  }
  .terms-main .terms-container h3 {
    font-weight: 600;
    font-size: 1.2rem;
    margin: 1rem 0 0.6rem 0;
  }
  .terms-main .terms-container h3.date {
    color: var(--primary-color-blue);
    margin: 1rem auto;
    text-align: center;
  }
  .terms-main .terms-container h4 {
    font-weight: 500;
    font-size: 1.1rem;
    margin: 1rem 0 0.6rem 0;
  }
  .terms-main .terms-container p {
    font-size: 0.9rem;
  }
}
/***************************************************************************************************************/
/******************************              For Screen <= 1440px               ********************************/
/***************************************************************************************************************/
@media all and (min-width: 901px) and (max-width: 1440px) {
  .nav__logo img {
    margin: 20px 0 0 40px;
    width: 120px;
    height: 120px;
    z-index: 1000;
  }
  .nav__logo .nav__logoframe {
    margin: 18px 0 0 38px;
    width: 124px;
    height: 124px;
    background-color: var(--primary-color-dark);
    border-radius: 50%;
  }

  .nav__list {
    margin-right: 2rem;
  }

  .nav__item {
    font-size: 20px;
    padding: 18px 10px;
  }

  .nav__donate {
    margin: 18px 40px 0 0;
  }

  .hero-section .home-hero-background .home-title h1 {
    margin-top: 5rem;
  }
  .hero-section .home-hero-background .social-media-links {
    top: 22px;
    right: 45px;
  }
  .hero-section .home-hero-background .social-media-links .facebook-link img, .hero-section .home-hero-background .social-media-links .youtube-link img {
    width: 32px;
    height: 32px;
    margin-left: 20px;
  }

  .home-main .top-msg {
    width: 100%;
  }
  .home-main .top-msg .vision-msg, .home-main .top-msg .mission-msg {
    width: 24.5rem;
    height: 22rem;
    margin: -120px 28px 30px 28px;
    text-align: center;
    padding: 0 40px;
  }
  .home-main .top-msg .vision-msg p, .home-main .top-msg .mission-msg p {
    font-size: 1.2rem;
  }
  .home-main .event {
    width: 94vw;
  }

  .hero-section .donate-hero-background {
    width: 100vw;
    height: 450px;
    /* You must set a specified height */
  }
  .hero-section .donate-hero-background h2 {
    margin-top: 20px;
    width: 30ch;
  }
  .hero-section .donate-hero-background .social-media-links {
    right: 50px;
  }

  .hero-section .news-hero-background {
    width: 100vw;
    height: 600px;
    /* You must set a specified height */
  }
  .hero-section .news-hero-background h1 {
    width: 40ch;
    margin-top: 4rem;
  }
  .hero-section .news-hero-background .volunteer {
    display: block;
    font-size: 1.2rem;
    margin-top: 1rem;
  }
  .hero-section .news-hero-background .social-media-links {
    position: absolute;
    top: 18px;
    right: 60px;
  }

  .news-main .first-event {
    margin: -260px 20px 20px 20px;
  }
  .news-main .event, .news-main .first-event {
    width: 92vw;
  }
  .news-main .event .event-thumbnail img, .news-main .first-event .event-thumbnail img {
    height: 160px;
  }
  .news-main .event .event-content, .news-main .first-event .event-content {
    padding: 30px;
  }
  .news-main .event .event-content .event-title h3, .news-main .first-event .event-content .event-title h3 {
    font-size: 1.4rem;
    font-weight: 600;
  }
  .news-main .event .event-content .event-subtitle, .news-main .first-event .event-content .event-subtitle {
    font-size: 0.9rem;
    font-weight: 200;
  }
  .news-main .event .event-content .event-desc, .news-main .first-event .event-content .event-desc {
    margin-top: 1.1rem;
    letter-spacing: 0.5px;
    font-weight: 300;
  }

  .hero-section .event-details-hero-background {
    width: 100vw;
    height: 600px;
    /* You must set a specified height */
  }
  .hero-section .event-details-hero-background h1 {
    width: 40ch;
    margin-top: 4rem;
  }
  .hero-section .event-details-hero-background .volunteer {
    display: block;
    font-size: 1.2rem;
    margin-top: 1rem;
  }
  .hero-section .event-details-hero-background .social-media-links {
    position: absolute;
    top: 18px;
    right: 60px;
  }

  .event-details-main .event {
    width: 92vw;
  }
  .event-details-main .event .event-thumbnail img {
    height: 160px;
  }
  .event-details-main .event .event-content {
    padding: 30px;
  }
  .event-details-main .event .event-content .event-title h3 {
    font-size: 1.4rem;
    font-weight: 600;
  }
  .event-details-main .event .event-content .event-subtitle {
    font-size: 0.9rem;
    font-weight: 200;
  }
  .event-details-main .event .event-content .event-desc {
    margin-top: 1.1rem;
    letter-spacing: 0.5px;
    font-weight: 300;
  }

  .hero-section .leadership-hero-background .leadership-title, .hero-section .leadership-hero-background .leadership-subtitle {
    height: 100%;
  }
  .hero-section .leadership-hero-background h1 {
    display: block;
    color: var(--primary-color-white);
    margin-top: 5rem;
    font-size: 2.4rem;
  }
  .hero-section .leadership-hero-background h2 {
    display: flex;
    justify-content: center;
    background-color: var(--primary-color-yellow);
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 1px;
    width: 100vw;
    margin-top: 170px;
  }
  .hero-section .leadership-hero-background .volunteer {
    display: block;
    margin-top: -5rem;
    font-size: 1.1rem;
  }
  .hero-section .leadership-hero-background .social-media-links {
    right: 60px;
  }

  .leadership-main {
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 40px;
    background-color: var(--primary-color-lightgray);
  }
  .leadership-main .wrapper-grid {
    width: 98vw;
    margin-top: 60px;
  }
  .leadership-main .board-emeritus {
    width: 88vw;
  }
  .leadership-main .board-emeritus .emeritus-header {
    width: 88vw;
  }
  .leadership-main .board-emeritus .former-contact-container {
    margin-top: 20px;
  }

  .hero-section .contactdetails-hero-background .contactdetails-title, .hero-section .contactdetails-hero-background .contactdetails-subtitle {
    height: 100%;
  }
  .hero-section .contactdetails-hero-background h1 {
    display: block;
    color: var(--primary-color-white);
    margin-top: 5rem;
    font-size: 2.4rem;
  }
  .hero-section .contactdetails-hero-background h2 {
    display: flex;
    justify-content: center;
    background-color: var(--primary-color-yellow);
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 3px;
    width: 100vw;
    margin-top: 170px;
  }
  .hero-section .contactdetails-hero-background h2 p {
    display: block;
    margin: 20px 20px 110px 20px;
    padding: 10px 10px;
  }
  .hero-section .contactdetails-hero-background .volunteer {
    display: block;
    margin-top: -64px;
    font-size: 1.1rem;
  }
  .hero-section .contactdetails-hero-background .social-media-links {
    right: 60px;
  }

  .contactdetails-main {
    width: 92vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 20px;
    margin: -360px 20px 40px 20px;
    background-color: white;
    box-shadow: 0 0 8px 0 rgba(100, 100, 100, 0.3);
    border-radius: 8px;
    z-index: 18;
  }
  .contactdetails-main .contact-container-left {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    z-index: 20;
    width: 22rem;
  }
  .contactdetails-main .contact-container-left .full-name {
    position: relative;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0.5rem auto;
    width: 20rem;
  }
  .contactdetails-main .contact-container-left .job-title {
    position: relative;
    color: var(--primary-color-green);
    margin: 0 auto;
    width: 20rem;
  }
  .contactdetails-main .contact-container-left .portrait-thumbnail {
    position: relative;
    margin: 1rem auto;
  }
  .contactdetails-main .contact-container-left .portrait-thumbnail img {
    width: 20rem;
    height: auto;
    border-radius: 10px;
    border: 6px solid var(--primary-color-gray);
  }
  .contactdetails-main .contact-container-left .social-media-links {
    position: relative;
    margin: 1rem auto;
    width: 20rem;
  }
  .contactdetails-main .contact-container-left .social-media-links ul {
    display: flex;
    justify-content: center;
    list-style: none;
  }
  .contactdetails-main .contact-container-left .social-media-links ul li a {
    display: block;
    text-decoration: none;
    padding: 0 20px 0 0;
  }
  .contactdetails-main .contact-container-left .social-media-links ul li a img {
    width: 40px;
    height: auto;
  }
  .contactdetails-main .contact-container-right {
    position: relative;
    padding: 1.4rem 1rem;
    width: calc(92vw - 25rem);
  }
  .contactdetails-main .contact-container-right .full-bio {
    margin-left: 10px;
  }
  .contactdetails-main .contact-container-right .full-bio p {
    font-size: 1rem;
  }

  .hero-section .aboutus-hero-background h1 {
    width: 90vw;
    text-align: center;
    margin-top: 6.2rem;
  }
  .hero-section .aboutus-hero-background h2 {
    width: 80vw;
  }
  .hero-section .aboutus-hero-background .social-media-links {
    right: 50px;
  }

  .aboutus-main {
    margin-top: -4rem;
  }
  .aboutus-main .aboutus-container {
    width: 94vw;
  }
  .aboutus-main .aboutus-container ul {
    width: 90vw;
  }
  .aboutus-main .aboutus-statement .box-content-bottom {
    width: 90vw;
  }
  .aboutus-main .mission-container ul {
    width: 80vw;
  }

  .hero-section .contact-hero-background .social-media-links {
    position: absolute;
    top: 18px;
    right: 60px;
  }

  .contact-main {
    width: 100vw;
    margin-top: -440px;
  }
  .contact-main .contact-form {
    flex: 1 1 70rem;
  }
  .contact-main .contact-form .form-container {
    width: 50vw;
    padding: 20px 40px;
    margin: 30px auto;
    border-radius: 8px;
    box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.2);
    background-color: white;
  }
  .contact-main .contact-form .form-container form {
    display: block;
    margin: 50px auto;
  }
  .contact-main .contact-form .form-container form label, .contact-main .contact-form .form-container form p {
    display: block;
    width: 80%;
    color: var(--primary-color-dark);
    font-weight: 400;
    margin: 10px auto;
    margin-top: 30px;
  }
  .contact-main .contact-form .form-container form input {
    display: block;
    border: 1px solid rgb(184, 182, 182);
    border-radius: 5px;
    height: 30px;
    width: 80%;
    padding-left: 8px;
    margin: 0px auto;
  }
  .contact-main .contact-form .form-container form .phone-type {
    color: var(--primary-color-dark);
    display: block;
    margin: 20px auto;
    width: 80%;
  }
  .contact-main .contact-form .form-container form .phone-type label.radio-btn, .contact-main .contact-form .form-container form .phone-type p {
    display: inline;
  }
  .contact-main .contact-form .form-container form .phone-type input.radio-btn {
    display: inline;
    width: 20px;
  }
  .contact-main .contact-form .form-container form textarea {
    display: block;
    width: 80%;
    order: 1px solid var(--primary-color-gray);
    border-radius: 5px;
    padding: 2px 6px 2px 8px;
    margin: 0px auto;
  }
  .contact-main .contact-form .form-container form .submit {
    display: block;
    height: 34px;
    width: 160px;
    margin-right: auto;
    margin-top: 30px;
  }
  .contact-main .contact-map {
    flex: 1 1 100vw;
    height: auto;
    background-color: var(--primary-color-yellow);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
  }
  .contact-main .contact-map .map-container {
    display: flex;
    flex-direction: column;
    margin: 30px auto;
  }
  .contact-main .contact-map .map-container iframe {
    display: block;
    width: 90vw;
    height: 67.5vw;
    margin: 0 auto;
    max-width: 800px;
    max-height: 600px;
  }
  .contact-main .contact-map .address-container {
    width: 90%;
  }
  .contact-main .contact-map .address-container .address-container-left {
    flex: 1 1 30rem;
  }
  .contact-main .contact-map .address-container .address-container-right {
    flex: 1 1 30rem;
  }

  .hero-section .privacy-hero-background {
    width: 100vw;
    height: 300px;
    /* You must set a specified height */
  }
  .hero-section .privacy-hero-background .privacy-title, .hero-section .privacy-hero-background .privacy-subtitle {
    margin: 0 auto;
  }
  .hero-section .privacy-hero-background h1 {
    font-size: 3rem;
    width: 30ch;
  }
  .hero-section .privacy-hero-background .social-media-links {
    right: 50px;
  }

  .privacy-main .privacy-container {
    display: block;
    width: 92%;
    background-color: white;
    padding: 2rem 3rem;
    margin: 20px auto;
  }
  .privacy-main .privacy-container h3 {
    font-weight: 600;
    font-size: 1.2rem;
    margin: 1rem 0 0.6rem 0;
  }
  .privacy-main .privacy-container h3.date {
    color: var(--primary-color-blue);
    margin: 1rem auto;
    text-align: center;
  }
  .privacy-main .privacy-container h4 {
    font-weight: 500;
    font-size: 1.1rem;
    margin: 1rem 0 0.6rem 0;
  }
  .privacy-main .privacy-container p {
    font-size: 0.9rem;
  }

  .hero-section .terms-hero-background {
    width: 100vw;
    height: 300px;
    /* You must set a specified height */
  }
  .hero-section .terms-hero-background .terms-title, .hero-section .terms-hero-background .terms-subtitle {
    margin: 0 auto;
  }
  .hero-section .terms-hero-background h1 {
    font-size: 3rem;
    width: 30ch;
  }
  .hero-section .terms-hero-background .social-media-links {
    right: 50px;
  }

  .terms-main .terms-container {
    display: block;
    width: 92%;
    background-color: white;
    padding: 2rem 3rem;
    margin: 20px auto;
  }
  .terms-main .terms-container h3 {
    font-weight: 600;
    font-size: 1.2rem;
    margin: 1rem 0 0.6rem 0;
  }
  .terms-main .terms-container h3.date {
    color: var(--primary-color-blue);
    margin: 1rem auto;
    text-align: center;
  }
  .terms-main .terms-container h4 {
    font-weight: 500;
    font-size: 1.1rem;
    margin: 1rem 0 0.6rem 0;
  }
  .terms-main .terms-container p {
    font-size: 0.9rem;
  }
}
/***************************************************************************************************************/
/******************************              For Screen > 1440px               ********************************/
/***************************************************************************************************************/
@media all and (min-width: 1441px) {
  .nav__logo img {
    margin: 20px 0 0 200px;
    width: 144px;
    height: 144px;
    z-index: 1000;
  }
  .nav__logo .nav__logoframe {
    margin: 18px 0 0 198px;
    width: 148px;
    height: 148px;
    background-color: var(--primary-color-dark);
    border-radius: 50%;
  }

  .nav__list {
    margin-right: 8em;
  }

  .nav__donate {
    margin: 18px 160px 0 0;
  }

  .hero-section .home-title h1 {
    font-size: 2.6rem;
  }

  .news-main .first-event {
    margin: -200px 20px 20px 20px;
  }
}
/***************************************************************************************************************/
/******************************              For Screen > 1920px                ********************************/
/***************************************************************************************************************/
@media all and (min-width: 1920px) {
  .news-main .first-event {
    margin: -200px 20px 20px 20px;
  }
  .news-main .event, .news-main .first-event {
    width: 70vw;
  }
  .news-main .event .event-thumbnail img, .news-main .first-event .event-thumbnail img {
    height: 300px;
  }

  .event-details-main .event {
    width: 70vw;
  }
  .event-details-main .event .event-thumbnail img {
    height: 360px;
  }

  .aboutus-main .aboutus-container {
    width: 94vw;
  }
  .aboutus-main .aboutus-container ul {
    width: 86vw;
  }
  .aboutus-main .aboutus-statement .box-content-bottom {
    width: 50vw;
  }
  .aboutus-main .mission-container ul {
    width: 40vw;
  }
}/*# sourceMappingURL=main.css.map */