/* Variables
----------------------- */
:root {
  --color-primary: #ec1c24;
  --color-secondary: #fbea01;
  --color-primary-light: #ef494f;
  --color-secondary-light: #fbee33;
  /* --bg-body: #F9F6F3; */
  /* --text-color: #4A4A4A; */
  --bold-color: #222222;
  --light: #efefff;
  --bg-body: #fff;
  --lighter-red: #fde8e9;
  --lighter-yellow: #fefce5;
  --border: #dbdbd3;
  --shadow: 0 0 8px 1px #cccccc;
  --font-text: Verdana, Geneva, sans-serif;
  --font-heading: Verdana, Geneva, sans-serif;
}

* {
  transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  o-transition: all 0.6s ease;
}

/* third level drop down */
.submenu .expanded::after {
  content: '+';
  position: absolute;
  top: 8px;
  right: 10px;
  color: #ffffff;
}

ul.main-menu ul.submenu ul.submenu {
  margin-left: 1px;
  left: 100%;
  top: 0px;
}

ul.main-menu ul.submenu ul.submenu li {
  font-size: 1em;
}

.menu-icon-active span:first-child {
  transform: rotate(45deg);
}

.menu-icon-active span:last-child {
  transform: rotate(-45deg);
}

.menu-icon-active span:nth-child(2) {
  display: none;
}

.grey-bg { background: var(--light); }

.redish-bg { background: var(--lighter-red); }

.yellowish-bg { background: var(--lighter-yellow); }

.border-bg { background: var(--border); }

.red-bg {
  color: var(--light);
  background: var(--color-primary);
}

.red-bg .block-title {
  color: var(--light);
}

#content-bottom.red-bg {
  background: var(--color-primary);
}

.yellow-bg { background: var(--color-secondary-light); }

#toolbar-administration * {
  text-align: left;
}

.header-right {
  padding: 30px 30px 30px 100px;
  margin-top: -16px;
  margin-bottom: -16px;
  background: var(--color-secondary-light);
}


.header-right::before {
  content: "";
  position: absolute;
  top: 0%;
  bottom: 0%;
  /* z-index: 999; */
  border-bottom: 108px solid rgb(251, 238, 51);
  border-left: 50px solid rgb(255, 255, 255);
  border-right: 0px;
  left: 0px;
}

.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="password"] { width: 100%; }

.full-page-search { border-left: 2px solid #ec1c24; }

.full-page-search .search-icon a { color: #ec1c24; }

img.image-field,
.field--type-video-embed-field { float: left; }

.field--type-video-embed-field {
  width: 100%;
  height: auto;
  max-width: 480px;
  margin-right: 1em;
}

.node-content .field__label {
  font-weight: 600;
  font-size: 1.4em;
}

/* Homepage
-------------------------------------------- */

.more-link {
  margin-right: 2%;
  text-align: right;
  font-weight: 600;
  font-family: initial;
  display: inline-block;
  width: 100%;
}

.views-more-link {
  font-style: italic;
  font-family: initial;
  display: inline-block;
}

/* .pager__item a { background: #cfcfff; } */
.pager__item a { background: var(--light); }

input[type="email"] { width: 100%; }
/*
.section {
  position: relative;
}
*/
.partners,
.latest-videos,
.program-areas,
.featured-projects,
.success-stories,
.testimonies,
.latest-invites,
.podcasts-signup,
.impact-counters,
.latest-downloads {
  position: relative;
  padding: 70px 0;
}

.the-about,
.the-videos,
.the-programs {
  position: relative;
  padding: 30px 0;
  margin: 0 -10px;
  width: 100%;
}

/* .page-node-1 #main.page-content { padding-bottom: 70px; } */

/* ------- Latest News, Blogs and Events ------- */

.latest-news,
.latest-events {
  width: 100%;
  float: left;
  max-width: 30%;
  position: relative;
}

.the-news-updates a,
.the-event-updates a {
  
  text-decoration: none;
}

.the-news-updates .news-update,
.the-event-updates .news-update {
  padding: 4px 0 5px;
  margin: 0 0 -2px;
  width: 100%;
  display: block;
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
}

.the-news-updates .news-update:hover,
.the-event-updates .news-update:hover {
  background: #e4e4e4;
}

/* ------- Impact Counters ------- */

.impact-counters {
  /* background: var(--color-secondary); */
  border-top: 4px solid var(--bg-body);
  /* background: var(--color-primary); */
}

.the-impact {
  padding-top: 45px;
  margin-left: -1.5em;
  margin-right: -1.5em;
}

.impact-counters .impact-counter {
  width: 100%;
  max-width: 25%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  position: relative;
  /* color: var(--light); */
  margin: 0 -2px;
  /* border-left: 4px solid var(--border); */
  /* border-right: 4px solid var(--border); */
  padding: 0 1.5em;
}

.impact-counters .impact-counter:hover { opacity: 0.87; }

.impact-counter .fontawesome-icons {
  /* float: left; */
  font-size: 3em;
  /* color: var(--color-secondary); */
  color: var(--light);
}

.impact-counter .counter-statistics {
  font-size: 3.4em;
  font-weight: 800;
  /* color: #fff; */
  /* color: var(--color-bright-pink); */
  color: var(--color-secondary-light);
}

.impact-counter .impact-description {
  font-size: 1.6em;
  line-height: 1.2;
  color: var(--light);
}
/*
.impact-counters p {
  background: var(--border);
  color: var(--color-primary);
  line-height: 1.4rem;
  padding: 20px 15px 0;
}
*/
/*-------------- Programs CSS --------------*/

/* .program-areas { background: var(--light); } */

.program {
  width: 20%;
  position: relative;
  text-align: center;
  padding: 10px;
  vertical-align: middle;
  display: inline-block;
  /* min-width: 230px; */
  margin: 0 -2px;
}

.program:hover {
  z-index: 3;
  /* background: #efefef; */
  /* box-shadow: 0px 1px 10px 0px rgba(0, 0, 255, 0.3); */
}

.program h5 {
  float: left;
  width: 100%;
  margin: 0;
  padding: 15px;
  background: var(--lighter-yellow);
  border-bottom: 3px solid var(--bg-body);
  border-left: 3px solid var(--bg-body);
  border-right: 3px solid var(--bg-body);
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}

.program:hover h5/*,
.program h5:hover*/ {
  background: var(--lighter-red);
}

.program:hover h5 {
  border-bottom: 3px solid var(--lighter-yellow);
  border-left: 3px solid var(--lighter-yellow);
  border-right: 3px solid var(--lighter-yellow);
}

.program .caption_wrapper {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 255, 0.28);
}

.program:hover .caption_wrapper { background: none; }

.program span.program-image {
  float: left;
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--lighter-yellow);
  border-left: 3px solid var(--lighter-yellow);
  border-right: 3px solid var(--lighter-yellow);
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}

.program img {
  margin: 0;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ------- Successs Testimonies Section ------- */

.the-success {
  margin: 25px -15px 0;
  text-align: left;
}
/*
.the-success img,
.the-success .video-embed-field-responsive-video {
  width: 40%;
  float: left;
  margin-right: 4em;
}
*/
/* ------- Podcasts & SignUp Section ------- */

.podcasts-signup {
  display: flex;
  justify-content: center;
  position: relative;
  background: #04040f;
  color: var(--border);
}

.podcasts-signup .block-title {
  margin-bottom: 1.5em;
  color: var(--light);
}

.podcasts-signup .form-item.form-type-email {
  color: var(--bold-color);
}

.podcasts-signup input[type="submit"],
.podcasts-signup input[type="button"],
.podcasts-signup button {
  /* background-color: var(--color-secondary); */
  /* color: var(--color-primary); */
}

.podcasts-signup input[type="submit"]:hover,
.podcasts-signup input[type="button"]:hover,
.podcasts-signup button:hover {
  background-color: var(--color-primary-light);
  /* color: #fff; */
}

.podcasts-signup .half {
  width: 50%;
  display: inline-block;
  vertical-align: middle;
  margin: 0 -2px;
}

.podcasts-signup .sign-up {
  padding-left: 8%;
}

.podcasts-signup input[type="email"] {
  border-bottom: 2px solid var(--color-primary);
}

.podcasts-signup input[type="email"]:focus {
  border-bottom: 2px solid var(--color-primary-light);
}

.podcasts-signup a.detail-link {
  float: right;
  margin-top: -37px;
  position: relative;
  color: var(--bg-body);
  background: var(--bold-color);
  padding: 3px 10px;
}

.podcasts-signup a.detail-link:hover {
  color: var(--bold-color);
  background: var(--color-secondary);
}

/* ------- Latest Downloads ------- */

.downloads-block {
  width: 25%;
  position: relative;
  text-align: left;
  padding: 0 10px;
  vertical-align: top;
  display: inline-block;
  margin: 0 -2px;
}

/* ------- Partners ------- */

.the-partners {
  margin: 0 -2.2%;
  padding: 30px 0 0;
  /* text-align: center; */
  overflow: hidden;
}

.donor-partners {
  padding-bottom: 70px;
}

.partner {
  padding: 15px 2.2%;
  display: inline-block;
}

.partner img {
  width: auto;
  margin-right: 0;
  max-height: 60px;
}

.partner a img {
  filter: none;
  -webkit-filter: grayscale(0%);
}

.partner a:hover img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

/*------------ About Us CSS ------------*/

/* .the-about { padding: 10px 0 0; } */

.about-info li { padding: 0; }

.about-info h3 {
  font-weight: 600;
  padding-left: 8px;
  border-left: 5px solid var(--color-primary);
  color: var(--color-secondary);
}

.about-info {
  width: 25%;
  position: relative;
  padding: 10px 25px;
  vertical-align: top;
  display: inline-block;
  text-align: initial;
  margin: 0 -2px;
}

/*------------ Updates CSS ------------*/

/* .front-briefs { padding: 65px 0 60px; } */

.front-briefs .block-title {
  font-weight: 600;
  padding-left: 8px;
  border-left: 5px solid var(--color-primary);
}

.red-bg .block-title,
.podcasts-signup .block-title {
  border-left: 5px solid var(--color-secondary);
}

.top-container .front-briefs .block-title {
  /* width: auto; */
  max-width: fit-content;
  padding-right: 20px;
  background: var(--color-secondary-light);
}

.top-container .front-briefs .block-title::after {
  content: "";
  position: absolute;
  top: 0%;
  bottom: 0%;
  /* z-index: 999; */
  border-bottom: 30px solid rgb(251, 238, 51);
  border-right: 50px solid rgb(255, 255, 255);
  border-left: 0px;
  margin-left: 15px;
}

.the-updates {
  margin: 0 -15px;
  text-align: left;
  padding: 10px 0 0;
}

.place-text {
  margin: 0 15px;
  text-align: left;
  float: left;
}

.update {
  width: 100%;
  padding: 0 20px;
  margin: 25px -2px;
  max-width: 25%;
  min-width: 200px;
  vertical-align: top;
  display: inline-block;
  background: transparent;
  text-align: left;
  line-height: 1.2;
}

.update img,
.update .video-embed-field-responsive-video {
  margin: 0;
  width: 100%;
  box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.15);
}

.update p,
.update h6 {
  display: inline-block;
  background: #fdfdfd;
  margin-bottom: 0;
  width: 100%;
}

.update h6 {
  box-shadow: 0px -10px 15px 0px rgba(0, 0, 0, 0.15);
  text-align: left;
  padding: 10px;
}

.update p {
  float: left;
  padding: 0 10px 20px;
  box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.15);
}

.update:hover p,
.update:hover h6,
.update:hover img,
.update:hover .video-embed-field-responsive-video {
  box-shadow: none;
}

/*------------- Team CSS --------------*/

.team-member {
  width: 100%;
  max-width: 18.7%;
  text-align: center;
  font-weight: 600;
  margin: 25px 3%;
  /* min-width: 200px; */
  vertical-align: top;
  display: inline-block;
  line-height: 1.2;
  padding-bottom: 5px;
}

.team-member:hover { background: #fbea01; }

.team-member .title {
  margin: 15px 0 5px;
  font-size: 1.1em;
  display: inline-block;
  color: #ec1c24;
}

.team-member img {
  margin: 0;
  width: 100%;
  border-radius: 50%;
  border: 2px solid #fbea01;
}

/*-------------- News CSS --------------*/
/*
.news-update .title {
  font-size: 1em;
  text-align: left;
  margin: 15px 0 8px;
  display: inline-block;
}
*/
/*-------------- Videos CSS --------------*/

.the-videos {
  text-align: left;
}

.video-entry {
  width: 100%;
  max-width: 29%;
  min-width: 200px;
  padding: 5px 5px 10px;
  margin: 25px 2%;
  font-size: 1.1em;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  line-height: 1.2;
  background: #fdfdfd;
  box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.1);
}

.video-entry:hover { box-shadow: none; }

.video-entry img {
  margin: 0;
  width: 100%;
}

.video-entry .title {
  float: left;
  width: 100%;
  margin-top: 8px;
}

/*------------ Projects CSS ------------*/

.the-projects { margin-top: 35px; }

.the-projects img.image-field {
  margin: 0;
}

.project h6 {
  /* float: left; */
  width: 100%;
  /* margin-top: 8px; */
  /* text-align: center; */
  line-height: inherit;
}

.featured-project {
  border-bottom: 1px solid var(--border);
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 40px 0;
}

.featured-project:last-child { border-bottom: 0; }

.the-projects .feat-image,
.the-success .testimony-image {
  width: 40%;
  border: 4px solid var(--border);
  overflow: hidden;
  border-radius: 1em;
}

.the-success .title-body-wrap,
.the-projects .title-body-wrap {
  width: 60%;
  margin-top: 2%;
}

.the-projects .feat-image,
.the-success .testimony-image,
.the-success .title-body-wrap,
.the-projects .title-body-wrap {
  margin-left: -2px;
  margin-right: -2px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.featured-project:nth-child(2n) .feat-image {
  float: left;
  /* margin-right: 2em; */
}

.featured-project:nth-child(2n+1) .feat-image {
  float: right;
  /* margin-left: 2em; */
}

.featured-project p,
.featured-project h3,
.success-testimony p,
.success-testimony h3 {
  padding-left: 6%;
  padding-right: 6%;
  margin-left: 10%;
  margin-right: 10%;
  background: var(--lighter-red);
}

.featured-project h3,
.success-testimony h3 {
  padding-top: 5%;
  padding-bottom: 15px;
  margin-bottom: 0;
  text-align: initial;
  border-top: 4px solid;
  border-top-left-radius: 1.5em;
  border-top-right-radius: 1.5em;
}

.featured-project p,
.success-testimony p {
  padding-bottom: 5%;
  border-bottom: 4px solid;
  border-bottom-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
}

.featured-project p,
.featured-project h3,
.success-testimony p,
.success-testimony h3 {
  border-left: 4px solid;
  border-right: 4px solid;
  border-color: var(--lighter-yellow);
}

.featured-project:hover p,
.featured-project:hover h3,
.success-testimony:hover p,
.success-testimony:hover h3 {
  border-left: 4px solid;
  border-right: 4px solid;
}

.featured-project:hover h3,
.success-testimony:hover h3 {
  border-top: 4px solid;
}

.featured-project:hover p,
.success-testimony:hover p {
  border-bottom: 4px solid;
}

.featured-project:hover p,
.featured-project:hover h3,
.success-testimony:hover p,
.success-testimony:hover h3,
.featured-project:hover .feat-image,
.success-testimony:hover .testimony-image {
  border-color: #fcf266;
}

/*-------------- Downloads CSS --------------*/

.latest-downloads .block-title {
  margin-bottom: 20px;
}

.the-downloads {
  column-count: 3;
  column-gap: 30px;
  margin-bottom: 45px;
}

.download a {
  float: left;
  width: 100%;
  padding: 5px 10px;
}

.download-files a {
  color: var(--lighter-yellow);
}

.download-files .download a {
  margin: 0 0 -1px;
  border-top: 1px solid #f7a4a7;
  border-bottom: 1px solid #f7a4a7;
}

.download-files .download a:hover {
  background: #ef494f;
  /* color: var(--bold-color); */
}

.the-downloads .download a {
  background: var(--border);
  margin: 1px 0;
}

.the-downloads .download a:hover {
  background: var(--color-secondary-light);
  /* color: var(--bold-color); */
}

.download-files .more-link {
  margin-top: 15px;
}

.download-files .more-link:hover a {
  color: var(--border);
}

/*-------------- Social Media & Contacts CSS --------------*/

#user-login-form {
  padding: 70px 0 0;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

#contact-message-feedback-form {
  padding: 70px 0 0;
  max-width: 720px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#user-login-form input[type="text"],
#user-login-form input[type="password"],
#contact-message-feedback-form textarea,
#contact-message-feedback-form input[type="text"],
#contact-message-feedback-form input[type="email"] {
  border: 0;
  border-bottom: 2px solid var(--color-primary);
  border-radius: 0;
}

#user-login-form input[type="text"]:focus,
#user-login-form input[type="password"]:focus,
#contact-message-feedback-form textarea:focus,
#contact-message-feedback-form input[type="text"]:focus,
#contact-message-feedback-form input[type="email"]:focus {
  border-bottom: 2px solid var(--color-secondary);
}


.contacts,
.social-accounts {
  position: relative;
  /* border-top: 2px solid #474747; */
  border-top: 2px solid var(--border);
}

.page-node-type-social_account .field--name-field-logo,
.page-node-type-social_account .field--name-field-website,
.page-node-type-impact_numbers .field--name-field-number,
.page-node-type-impact_numbers .field--name-field-fontawesome {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  /* float: left; */
}

.field--name-field-logo.field--type-fontawesome-icon,
.field--name-field-fontawesome.field--type-fontawesome-icon {
  padding-right: 15px;
  font-size: 3em;
}

.social-accounts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6em 0 0.5em;
}

.social-accounts .block-title {
  font-weight: 600;
  border-left: 5px solid var(--color-primary);
  padding: 0 10px;
}

.social-accounts .block-title,
.social-accounts .block-content {
  display: inline-block;
  vertical-align: middle;
}

.social-accounts .social-account {
  padding: 0 20px;
  display: inline-block;
}

.social-accounts .social-account a {
  color: var(--color-primary);
  /* transition: all 0.6s ease; */
  /* -webkit-transition: all 0.6s ease; */
  /* -moz-transition: all 0.6s ease; */
  /* o-transition: all 0.6s ease; */
}

.social-accounts .social-account:hover a {
  color: var(--color-secondary);
}

.social-accounts .fontawesome-icons,
.social-accounts .social-account span {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.social-accounts .fontawesome-icons {
  padding-right: 4px;
  font-size: 2em;
}

.contacts { background: var(--color-secondary-light); }

.contacts .block-title {
  font-weight: 600;
  position: relative;
  padding-left: 8px;
  border-left: 5px solid #ec1c24;
  margin-bottom: 20px;
}

.footer-block p { color: #222; }