/* stuffed used everywhere */
* {
  box-sizing: border-box;
}
/*colour scheme */
:root {
  --blue: #007ab8;
  --light-blue: #0092db;
  --dark-blue: #006394;
  --pink: #d1009d;
  --light-pink: #f000b4;
  --dark-pink: #ad0082;
  --black: #333333;
  --hover-grey: rgba(0, 0, 0, 0.04);
  --light-grey: #f5f5f5;
  --mid-grey: #e3e3e3;
  --dark-grey: #c8c8c8;
}

html {
  height: 100vh;
}

body {
  font-family: "Roboto", sans-serif;
  height: 90%;
  color: var(--black);
  line-height: 1.5;
  margin: 0;
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: 2rem;
  font-weight: 500;
}

h2 {
  font-size: 1.7rem;
  font-weight: 500;
}

h3 {
  font-size: 1.5rem;
  font-weight: 500;
}

h4 {
  font-size: 1.3rem;
  font-weight: 500;
}

h5 {
  font-size: 1.1rem;
  font-weight: 500;
}

.centered-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1em;
}

.banner-centered-container {
  display: inline-block;
	width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1em;
}

/* james old-fashion method for creating responsive pages - essentially a 12 colummn row -*/
.row {
  min-height: 3em;
  border: 1px black;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
  float: left;
}

[class*="icol-"] {
  width: 100%;
  float: left;
}

.newscol {
  width: 100%;
}

@media only screen and (min-width: 400px) {
  /* For desktops and tablets activate cols */
  .col-1 {
    width: 8.33%;
    padding-right: 8px;
    padding-left: 8px;
  }
  .col-2 {
    width: 16.66%;
    padding-right: 8px;
    padding-left: 8px;
  }
  .col-3 {
    width: 25%;
    padding-right: 8px;
    padding-left: 8px;
  }
  .col-4 {
    width: 33.33%;
    padding-right: 8px;
    padding-left: 8px;
  }
  .col-5 {
    width: 41.66%;
    padding-right: 8px;
    padding-left: 8px;
  }
  .col-6 {
    width: 50%;
    padding-right: 8px;
    padding-left: 8px;
  }
  .col-7 {
    width: 58.33%;
    padding-right: 8px;
    padding-left: 8px;
  }
  .col-8 {
    width: 66.66%;
    padding-right: 8px;
    padding-left: 8px;
  }
  .col-9 {
    width: 75%;
    padding-right: 8px;
    padding-left: 8px;
  }
  .col-10 {
    width: 83.33%;
    padding-right: 8px;
    padding-left: 8px;
  }
  .col-11 {
    width: 91.66%;
    padding-right: 8px;
    padding-left: 8px;
  }
  .col-12 {
    width: 100%;
    padding-right: 8px;
    padding-left: 8px;
  }
  .newscol {
    columns: 2;
    column-gap: 5em;
  }
}

/* formatting images*/
.round-pic {
  border-radius: 50%;
}
/* scrollable table */
.tableFixHead {
  overflow-y: auto;
  height: 550px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
}

/*.set th background to hide scrolled records*/
th {
  background: #eee;
}

.stretchycol {
  display: flex;
  flex-flow: column;
  height: 100%;
}

#inner_fixed {
  height: 100px;
  background-color: grey;
}

.growtobottom {
  flex-grow: 1;
}

NavBox a {
  text-decoration: none;
}

.lightpinkbox {
  overflow: hidden;
  min-height: 10;
  padding-top: 28%;
  padding-bottom: 28%;
}

.footer {
  background-color: var(--mid-grey);
  margin-top: 50px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--dark-grey);
  padding-bottom: 20px;
}

.footer-grid__contact-title {
  color: var(--black);
}

.footer-grid__icons-container {
  justify-self: end;
}

.footer-divider {
  height: 4px;
  max-width: 1000px;
  background-color: var(--blue);
  border: none;
  border-radius: 25px;
}

.footer_contact {
  padding-bottom: 20px;
}

.footer__address {
  font-style: normal;
}

.email {
  color: var(--blue);
  text-decoration: none;
}

.email:hover {
  color: var(--pink);
}

.footer_contact ul {
  padding-inline-start: 0px;
}

ul.footer_icons li {
  display: inline;
  margin: 7px;
}

.social-link {
  text-decoration: none;
}

.social-link--fb {
  color: #4267b2;
}

.social-link--insta {
  color: #c13584;
}

.social-link--li {
  color: #0e76a8;
}

.social-link--twitter {
  color: #1da1f2;
}

.social-link:hover {
  color: var(--pink);
}

.aba {
  display: grid;
  grid-template-columns: 200px auto;
  column-gap: 20px;
  align-items: center;
  border-bottom: 1px solid var(--dark-grey);
  padding-bottom: 20px;
  margin-bottom: 20px;
}


.membership_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  border-bottom: 1px solid var(--dark-grey);
  padding-bottom: 18px;
  margin-bottom: 18px;
}

.membership_wrapper {
  display: flex;
  flex-direction: column;
}

.helplines-partnership__logo {
  width: 90px;
  /*width: 126px;
  height: 63px;*/
}

.lsdsn {
  display: grid;
  grid-template-columns: 100px auto;
  column-gap: 20px;
  align-items: center;
  border-bottom: 1px solid var(--dark-grey);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.lsdsn__logo {
  width: 100px;
}

.terms-wrapper {
  display: flex;
  justify-content: space-between;
}

.indent-text {
  text-indent: 20px;
}

.footer-grid__contact-container {
  display: flex;
  gap: 2em;
}

.sitemap-container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 20px;
}

.sitemap-block-home{
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	width:100%;
	text-align: center;
	margin-bottom: 20px;
}

.sitemap-block-home a {
	color: #007BFF;
	text-decoration: none;
}
.sitemap-block-home a:hover {
	text-decoration: underline;
}

.sitemap-block {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	width:150px;
}

.sitemap-block li {
	line-height: 1.2em;
	margin: 20px 0;
}
.sitemap-block a {
	color: #007BFF;
	text-decoration: none;
}

.sitemap-block a:hover {
	text-decoration: underline;
}

/* Add some indentation for nested lists */
.sitemap-container ul {
	list-style-type: none;
	padding-left: 20px;
}


@media only screen and (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid__icons-container {
    justify-self: flex-start;
  }

  .footer-grid__contact-container {
    justify-self: flex-start;
  }

  .footer-grid__contact-title {
    text-align: start;
  }

  .aba {
    grid-template-columns: 1fr;
    justify-items: flex-start;
    row-gap: 20px;
  }

  .terms-wrapper {
    display: grid;
  }
}
/* <--- footer */

.button {
  color: white;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: bold;
  padding: 10px 21px;
  border: none;
  cursor: pointer;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.button--pink {
  background-color: var(--pink);
}

.button--pink:hover {
  background-color: var(--dark-pink);
}

.button--blue {
  background-color: var(--blue);
}

.button--blue:hover {
  background-color: var(--dark-blue);
}

.button--lowercase {
  text-transform: none;
}

.nav-bar__top-row {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-bar__logo {
  height: 70px;
  background: white;
  display: block;
}

.nav-bar__links-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-bar__row {
  border-bottom: 1px solid var(--mid-grey);
}

.nav-bar__list {
  list-style: none;
  display: flex;
  padding: 0;
}

.nav-bar__list-item {
  margin-right: 28px;
}

.nav-bar__link {
  text-decoration: none;
  text-transform: capitalize;
  font-size: 1.1rem;
  color: var(--blue);
  font-weight: 500;
  display: flex;
  align-items: center;
}

.nav-bar__link:hover {
  color: var(--pink);
}

.nav-bar__caret {
  margin-left: 5px;
  pointer-events: none;
}

.dropdown-link {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  background-color: white;
  z-index: 100;
  top: 30px;
  display: none;
}

.dropdown-menu--show {
  display: block;
}

.dropdown-menu__item {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: var(--blue);
  min-width: 130px;
}

.dropdown-menu__item:hover {
  background-color: var(--hover-grey);
}

.nav-bar__menu-icon {
  font-size: 40px;
  color: var(--blue);
}

.nav-bar__icon-button {
  text-transform: capitalize;
  font-size: 1.1rem;
  color: var(--pink);
  font-weight: bold;
  border: 0;
  background-color: white;
  padding: 0;
  margin: 0;
}

.nav-bar__icon-button:hover {
  color: var(--dark-pink);
  cursor: pointer;
}

.nav-bar__icon-button:focus {
  background-color: rgba(0, 0, 0, 0.1);
  outline: none;
}

@media screen and (min-width: 993px) {
  .nav-bar__icon-button {
    display: none;
  }
}

@media screen and (max-width: 992px) {
  .nav-bar__second-row {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .nav-bar {
    display: block;
  }

  .nav-bar__links-wrapper {
    margin: 0;
  }

  .nav-bar__list {
    display: block;
    padding: 0;
    margin: 0;
  }

  .nav-bar__list-item {
    width: 100%;
  }

  .nav-bar__link {
    display: block;
    width: 100%;
    padding: 8px 0px;
    font-size: 1rem;
  }

  .nav-bar__button {
    margin-top: 8px;
  }

  .collapse {
    display: block;
    width: 100%;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    padding: 0 16px;
  }

  .collapse--show {
    max-height: 100vh;
  }

  .dropdown-link,
  .dropdown-menu {
    position: static;
  }

  .dropdown-menu {
    box-shadow: none;
    max-width: 1000px;
    border-radius: 4px;
    border: 1px solid var(--blue);
  }

  .dropdown-link {
    margin: 0;
  }
}

/* HOME PAGE - added by Alex, 16/05/2020 */
.main-container {
  margin-bottom: 20px;
}

.box-shadow {
  box-shadow: 0px 3px 7px 2px rgba(207, 207, 207, 0.5);
}

.banner {
  position: relative;
}

.banner__text {
  background-color: var(--blue);
  color: white;
  width: 100%;
  text-align: center;
  padding: 20px;
}

.banner__span {
  font-weight: 500;
  letter-spacing: 0.5px;
}

.banner__img {
  max-width: 100%;
  height: auto;
  display: block;
  background: var(--light-grey);
}

.spacing-bottom {
  margin-bottom: 50px;
}

.our-mission__title {
  text-align: center;
}

.our-mission__img {
  height: auto;
  max-width: 100%;
  display: block;
}

.our-mission__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 900px) {
  .our-mission__grid {
    grid-template-columns: 1fr;
  }
}

.our-mission__col-right {
  background-color: var(--pink);
  color: white;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.our-mission__statement {
  margin-bottom: 25px;
}

.blog-and-events {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
}

@media screen and (max-width: 750px) {
  .blog-and-events {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}

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

.widget__list {
  margin: 0;
  list-style: none;
  padding: 0;
}

.widget__list-item {
  margin-bottom: 5px;
}

.widget__link {
  text-decoration: none;
  color: var(--blue);
}

.widget__link:hover {
  text-decoration: underline;
}

.widget__title {
  text-align: center;
  padding: 5px;
  width: 100%;
  display: block;
  font-size: 1.2rem;
  color: white;
  /* text-transform: uppercase; */
  text-decoration: none;
}

.widget__title:hover {
  text-decoration: underline;
}

.widget--pink .widget__title {
  background-color: var(--pink);
}

.widget--pink .widget__title:hover {
  background-color: var(--light-pink);
}

.widget--blue .widget__title {
  background-color: var(--blue);
}

.widget--blue .widget__title:hover {
  background-color: var(--light-blue);
}

.widget__body {
  padding: 15px 20px;
}

.italy-flag {
  width: 30px;
  border-radius: 50%;
  margin-left: 10px;
}

.how-you-can-help {
  background-color: var(--blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.how-you-can-help__text {
  font-size: 1.5rem;
  text-align: center;
}

.img-tile__img {
  display: block;
  width: 100%;
}
.img-tile__img--narrow {
  width: 60%;
}

.img-tile__text {
  text-align: center;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  min-height: 80px;
  font-weight: 500;
  text-decoration: none;
}

.img-tile--grey .img-tile__text {
  background-color: var(--light-grey);
  color: var(--blue);
}

.img-tile--blue .img-tile__text {
  background-color: var(--blue);
  color: white;
}

.img-tile--pink .img-tile__text {
  background-color: var(--pink);
  color: white;
}

.img-tile__text:hover {
  text-decoration: underline;
}

.img-tile--pink .img-tile__text:hover {
  background-color: var(--light-pink);
}

.img-tile--blue .img-tile__text:hover {
  background-color: var(--light-blue);
}

/* the support-us classes are also used on the contact-us page*/

.support-us__title {
  text-align: center;
}

.support-us__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 20px;
  row-gap: 20px;
}

@media screen and (max-width: 650px) {
  .support-us__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

@media screen and (max-width: 420px) {
  .support-us__grid {
    grid-template-columns: 1fr;
  }

  .membership_grid {
    grid-template-columns: 1fr;
  }

  .membership_wrapper:first-child {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dark-grey);
  }
  .membership_wrapper:nth-child(2) {
    padding-top: 16px;
  }
  
  .img-tile__img--narrow {
    width: 100%;
  }
}

.subscribe-banner {
  padding: 20px 40px;
  background-color: var(--light-grey);
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subscribe-banner__text {
  font-weight: 500;
  margin-right: 20px;
  font-size: 1.1rem;
}

@media screen and (max-width: 600px) {
	.img-tile__img--narrow {
    width: 100%;
  }
  .subscribe-banner {
    padding: 20px;
    flex-direction: column;
  }

  .subscribe-banner__text {
    margin: 0 0 20px 0;
    text-align: center;
  }
}

.subscribe-form {
  margin: 50px 0px;
}

.subscribe-modal__label {
  display: block;
}

.subscribe-modal__fieldset {
  border: none;
  margin: 0;
  padding-left: 0;
}

.subscribe-modal__email {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 1rem;
  margin-bottom: 16px;
}

.subscribe-modal__checkbox {
  margin-right: 10px;
}

.subscribe-modal__subtitle {
  display: block;
  margin: 16px 0;
}

.subscribe-modal__email-wrapper {
  margin-bottom: 16px;
}

.subscribe-modal__paragraph {
  word-break: break-word;
}

/* BLOG page */
.blog-post {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 5px;
  margin-bottom: 20px;
}

.blog-post__img {
  width: 100%;
  border: 5px;
}

.blog-post__container {
  grid-row: 1/2;
}

.blog-post__container--left {
  grid-column: 1 / 2;
}

/*james's additions*/

.item1 {
  grid-area: header;
  color: white;
  text-align: center;
}
.item2 {
  grid-area: details;
  background-color: white;
  padding: 20px 20px 20px 20px;
}
.item3 {
  grid-area: photo;
  background-color: white;
}

.light-blue-record-card {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 80px 1fr;
  grid-template-areas:
    "header header"
    "details photo";
  grid-gap: 10px;
  background-color: var(--light-blue);
  padding: 10px;
}

.two-column-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

@media screen and (max-width: 700px) {
  .two-column-grid {
    grid-template-columns: 1fr;
  }
}

/*end of james's additions*/
@media screen and (max-width: 800px) {
  .blog-post {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .blog-post__container {
    grid-row: auto / auto;
  }
}

/* WHAT WE DO - AK, 17/05/20 */
.section {
  margin-bottom: 70px;
}
.section--video {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%;
}
.iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.title-banner {
  display: flex;
  justify-content: center;
}

.title-banner--blue {
  background-image: linear-gradient(var(--blue), var(--dark-blue));
}

.title-banner--pink {
  background-image: linear-gradient(var(--pink), var(--dark-pink));
}

.title-banner__content {
  text-align: center;
  padding: 10px 0px;
}

.title-banner__title {
  color: white;
  margin: 0;
}

.title-banner__img {
  height: 150px;
}

@media screen and (max-width: 1000px) {
  .text-container {
    padding: 0 10px;
  }
}

.text-container__link {
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blue);
  font-weight: bold;
  display: flex;
  align-items: center;
}

.text-container__link-icon {
  padding-bottom: 1px;
}

.text-container__link:hover {
  color: var(--pink);
}

/* ABOUT PAGE - AK, 11/06/2020  */
.about-page-section {
  margin-bottom: 50px;
}

.founder-and-chair {
  color: var(--pink);
}

.trustee-card {
  margin-bottom: 30px;
}

.trustee-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: var(--mid-grey);
}

.trustee-card__name {
  margin: 0;
}

.trustee-card--pink .trustee-card__name {
  color: var(--pink);
}

.trustee-card--blue .trustee-card__name {
  color: var(--blue);
}

.trustee-card__body {
  display: grid;
  grid-template-columns: 1fr 3fr;
  column-gap: 30px;
  padding: 30px;
  background-color: var(--light-grey);
}

.trustee-card__img {
  width: 100%;
  height: 100%;
  max-width: 220px;
  max-height: 220px;
  border-radius: 50%;
  object-fit:cover;
 
}
.trustee-card__description {
  margin: 0px;
}

@media screen and (max-width: 600px) {
  .trustee-card__body {
    grid-template-columns: 1fr;
    row-gap: 20px;
    padding: 20px;
  }

  .trustee-card__img {
    max-width: 150px;
  }
}

/* ANTI-BULLYING PROGRAMME PAGE */
.abp-main-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
  margin-bottom: 50px;
  background-color: var(--light-grey);
  padding: 20px;
}

.abp-main-section__img {
  grid-column: 1 / 2;
  width: 100%;
}

.abp-main-section__content {
  grid-column: 2 / 4;
}

.abp-section__graphic {
  margin-bottom: 20px;
}

.abp-section {
  margin-bottom: 50px;
}

.abp-banner-wrapper {
  margin-bottom: 50px;
}

@media screen and (max-width: 600px) {
  .abp-main-section,
  .abp-section {
    display: block;
  }

  .legal-advice-list,
  .abp-list {
    padding-inline-start: 20px;
  }
}

.legal-advice-main-section {
  margin-bottom: 50px;
}

.legal-advice-container {
  margin-top: 30px;
}

.link {
  color: var(--blue);
  text-decoration: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.link:hover {
  color: var(--pink);
}

/* GET INVOLVED MAIN PAGE */
.get-involved-container {
  margin: 50px 0;
}

.get-involved-card {
  border-radius: 15px;
  margin-bottom: 20px;
}

.get-involved-card--blue {
  background-color: var(--blue);
}

.get-involved-card--pink {
  background-color: var(--pink);
}

.get-involved-card--small {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.get-involved-grid,
.get-involved-card--big {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}

.get-involved-card__title,
.get-involved-card__text,
.get-involved-card__form-label {
  color: white;
}

.get-involved-card__img {
  width: 100%;
  border-radius: 15px 15px 60% 40% / 15px 15px 95% 20%;
}

.get-involved-card__img-wrapper {
  position: relative;
}

.get-involved-card__card-title {
  color: white;
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 2rem;
  margin-top: 15%;
}

.get-involved-card__btn-wrapper {
  text-align: center;
  padding: 20px;
}

.get-involved-card__right-col,
.get-involved-card--small .get-involved-card__text {
  padding: 0 20px;
}

@media screen and (max-width: 800px) {
  .get-involved-grid,
  .get-involved-card--big {
    display: block;
  }
}

@media screen and (max-width: 400px) {
  .get-involved-card__card-title {
    margin-top: 5%;
  }

  .h-captcha {
    transform: scale(0.8);
    transform-origin: 0 0;
  }
}

/* CONTACT US */
.get-in-touch__img {
  width: 100%;
  display: block;
}

.get-in-touch__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  padding: 20px;
  background-color: var(--light-grey);
}

.get-in-touch__form-label {
  display: block;
}

.get-in-touch__form-input {
  display: block;
  width: 100%;
  padding: 7px;
  font-size: 1rem;
}

.get-in-touch__fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 20px 0;
}

/* EVENTS PAGE */
.main-events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 20px;
  column-gap: 20px;
  background-color: var(--light-grey);
}

@media screen and (max-width: 800px) {
  .main-events-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }
}

.address-span {
  display: block;
  font-weight: 500;
}

.next-event {
  padding: 20px;
  background-color: var(--light-grey);
}

.next-event__title {
  margin-top: 0;
  color: var(--blue);
}

.next-event__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 20px;
  margin-top: 20px;
}

@media screen and (max-width: 600px) {
  .next-event__grid {
    grid-template-columns: 1fr;
  }

  .next-event {
    padding: 10px;
  }
}

.previous-events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
  row-gap: 20px;
}

@media screen and (max-width: 800px) {
  .previous-events-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 600px) {
  .previous-events-grid {
    grid-template-columns: 1fr;
  }
}

.event-tile {
  background-color: var(--light-grey);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.event-tile__title {
  font-size: 1.3rem;
  margin: 0;
  color: white;
}

.event-tile__subtitle {
  font-size: 1.1rem;
  margin: 0;
  padding: 10px;
  min-height: 72px;
}
.event-tile__subtitle a {
  text-decoration: none;
  color: var(--blue);
}

.event-tile__header {
  background-color: var(--blue);
  padding: 10px;
}

.event-tile__para {
  padding: 0 10px;
  margin: 0;
}

.event-tile__body {
  padding: 10px;
}

.event-tile__btn-wrapper {
  padding: 10px;
}

.h-captcha {
  padding: 16px 0;
}

.h-captcha__container {
  text-align: left;
}

/* IMAGE CAROUSEL - do not touch any of this CSS as it is used by carousel.js */
/* Parent wrapper to carousel. Width can be changed as needed. */
.carousel-wrapper {
  overflow: hidden;
  width: 90%;
  margin: auto;
}

/* Apply 'border-box' to 'box-sizing' so border and padding is included in the width and height. */
.carousel-wrapper * {
  box-sizing: border-box;
}

/* We'll be using the 'transform' property to move the carousel's items, so setting the 'transform-style' to 'preserve-3d' will make sure our nested elements are rendered properly in the 3D space. */
.carousel {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* By default we're hiding items (except the initial one) until the JS initiates. Elements are absolutely positioned with a width of 100% (as we're styling for mobile first), letting the content's height dictate the height of the carousel. Our magic property here for all our animation needs is 'transition', taking the properties we wish to animate 'transform' and 'opacity', along with the length of time in seconds. */
.carousel__photo {
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  margin: auto;
  padding: 1rem 4rem;
  z-index: 100;
  transition: transform 0.5s, opacity 0.5s, z-index 0.5s;
}

/* Display the initial item and bring it to the front using 'z-index'. These styles also apply to the 'active' item. */
.carousel__photo.initial,
.carousel__photo.active {
  opacity: 1;
  position: relative;
  z-index: 900;
}

/* Set 'z-index' to sit behind our '.active' item. */
.carousel__photo.prev,
.carousel__photo.next {
  z-index: 800;
}

/* Translate previous item to the left */
.carousel__photo.prev {
  transform: translateX(-100%);
}

/* Translate next item to the right */
.carousel__photo.next {
  transform: translateX(100%);
}

/* Style navigation buttons to sit in the middle, either side of the carousel. */
.carousel__button--prev,
.carousel__button--next {
  position: absolute;
  top: 50%;
  width: 3rem;
  height: 3rem;
  background-color: #fff;
  transform: translateY(-50%);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1001; /* Sit on top of everything */
  border: 2px solid var(--blue);
  /*  opacity: 0;  Hide buttons until carousel is initialised
    transition:opacity 1s;*/
}

.carousel__button--prev:hover,
.carousel__button--next:hover {
  border: 2px solid var(--pink);
}

.carousel__button--prev {
  left: 0;
}

.carousel__button--next {
  right: 0;
}

/* Use pseudo elements to insert arrows inside of navigation buttons */
.carousel__button--prev::after,
.carousel__button--next::after {
  content: " ";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 54%;
  border-right: 3px solid var(--blue);
  border-bottom: 3px solid var(--blue);
  transform: translate(-50%, -50%) rotate(135deg);
}

.carousel__button--prev:hover::after,
.carousel__button--next:hover::after {
  border-right: 3px solid var(--pink);
  border-bottom: 3px solid var(--pink);
}

.carousel__button--next::after {
  left: 47%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
/* IMAGE CAROUSEL END */
.non-lazy-img {
  max-width: 100%;
  height: auto;
  background: var(--light-grey);
}

/* VOLUNTEER */
.volunteer-banner__img {
  width: 100%;
  display: block;
}

.volunteer-banner__text {
  font-size: 1.1rem;
}

.volunteer-card {
  margin-bottom: 20px;
  background-color: var(--light-grey);
}

.volunteer-card__top-paragraph {
  margin-top: 0;
}

.volunteer-card__img {
  width: 100%;
  display: block;
  height: 290px;
  object-fit: cover;
}

.volunteer-card__content {
  padding: 20px;
}

.volunteer-card__header-wrapper {
  background-color: var(--blue);
}

.volunteer-card__header {
  margin: 0;
  color: white;
  padding: 10px 20px;
  line-height: 1;
}

.volunteer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}

@media screen and (max-width: 800px) {
  .volunteer-card--big .volunteer-card__content,
  .volunteer-grid {
    display: block;
  }
}

.input {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 1rem;
}

.form-row {
  margin-bottom: 20px;
}

.sign-up-img {
  width: 100%;
}

/* DONATE PAGE */
.hero-banner {
  position: relative;
}

.hero-banner__img {
  width: 100%;
  display: block;
}

.hero-banner__content {
  position: absolute;
  top: 25%;
  right: 20px;
  background-color: var(--light-grey);
  padding: 20px;
  max-width: 250px;
}

.hero-banner__text {
  margin-top: 0;
  font-size: 1.5rem;
  font-weight: 500;
}

@media screen and (max-width: 700px) {
  .hero-banner__content,
  .hero-banner {
    position: static;
  }

  .hero-banner__content {
    max-width: 100%;
  }
}

.funding {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}

.funding__img-div {
  background-image: url("https://static.wearestrongercharity.org/images/donate/boy-having-counseling.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.funding__hidden-img {
  display: none;
  width: 100%;
  height: auto;
}

.funding-title {
  margin-top: 0;
}

.funding__list {
  padding-inline-start: 20px;
}

.funding__list-item {
  margin-bottom: 5px;
}

.funding--img-right .funding__img-div {
  grid-column: 2/3;
  grid-row: 1/2;
}

.funding--shopping .funding__img-div {
  background-image: url("https://static.wearestrongercharity.org/images/donate/man-doing-online-shopping.jpg");
}

@media screen and (max-width: 800px) {
  .funding {
    display: block;
  }

  .funding__hidden-img {
    display: block;
  }
}

.donate-form-wrapper {
  background-color: var(--light-grey);
  padding: 20px;
}

.donate-form {
  max-width: 600px;
  margin: 0 auto;
}

.donate-form__title {
  margin-top: 0;
}

.flex-right {
  display: flex;
  justify-content: flex-end;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.flex-between > h2,
.flex-between > .vertical-center {
  flex: 1; /* Ensures each child takes up equal space */
}

.vertical-center {
	display: flex;
  align-items: center;
	justify-content: center;
}

.big-btn {
	padding: 20px 50px;
}

/*New css start date 19-10-2020*/
/*.blog-and-events{ display:block;}
.blog-and-events .widget__title{ text-align:left; text-decoration:none; padding-left:10px; padding-right:10px; margin-bottom:20px;}
.blog-and-events .widget__title span{ float:right; font-size:14px; margin-top:4px; text-decoration:underline;}
.blog-and-events .widget__title span:hover{ text-decoration:none;}
.home_blog_list{ margin:0 -10px; display: flex; flex-wrap: wrap;}
.home_blog_list .widget__list-item{ padding:0 10px; margin:0 0 20px; width:33.33%; display: flex; flex-wrap: wrap;}
.home_blog_list .home_blog figure{ margin:0;}
.home_blog_list .home_blog figure img{ width:100%; display:block; height: 200px;object-fit: cover;}
.home_blog_list .home_blog_detail{ padding:20px;}
.home_blog_list .home_blog_detail h4{ margin:0; text-transform:capitalize;}
.home_blog_list .home_blog_detail h4 a:hover{ color:var(--pink); text-decoration:none;}
.wasi{ display: grid; grid-template-columns: 1fr 1fr; margin-top:30px;}
.readmore{ text-align:center; padding:11px 0 25px;}
.readmore a{ text-decoration:none; display:inline-block;}*/

.blog-and-events .widget__list {
  padding: 10px 15px;
}
.blog-and-events .widget__list li {
  border-bottom: 1px dashed #bbb;
  display: block;
  margin-bottom: 0;
  padding: 9px 0 9px 20px;
  background: url(https://static.wearestrongercharity.org/images/sidebar-arrow.png)
    no-repeat 0 17px;
  font-size: 14px;
}
.blog-and-events .widget__list li a {
  color: var(--black);
  text-decoration: none;
}
.blog-and-events .widget__list li a:hover {
  color: var(--blue);
}

.blog_list {
  grid-gap: 20px;
}
.blog_list .light-blue-record-card {
  padding: 0;
  display: block;
  background: #f5f5f5;
}
.blog_list figure {
  margin: 0;
}
.blog_list figure img {
  display: block;
  height: 316px;
  object-fit: cover; /*object-position: top center;*/
}
.blog_list .blog_list_details {
  padding: 25px 30px 35px;
}
.blog_list .blog_list_details h3 {
  margin: 0 0 7px;
}
.blog_list .blog_list_details p {
  margin: 0 0 9px;
}
.blog_list .blog_list_details p span {
  color: #777;
}

.blog_detail_wrap img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.blog_detail_wrap p {
  color: #666;
}
.blog_detail_wrap ul {
  color: #666;
  padding: 0 0 0 15px;
  margin: 0;
}
.blog_detail_wrap ul + p {
  margin-top: 0;
}
.blog_detail_wrap .post-categories a {
  color: var(--blue);
  text-decoration: none;
}
.blog_detail_wrap p a {
  color: var(--blue);
  text-decoration: none;
}
.blog_detail_wrap .post-thumb {
  width: 30%;
  float: left;
  margin: 5px 25px 5px 0;
}
.blog_detail_wrap .post-thumb img {
  width: 100%;
  height: auto;
}
.blog_detail_wrap figure {
  margin: 0;
}
.wp-block-audio audio {
  width: 100%;
  min-width: 300px;
}
.blog_detail_wrap .has-text-align-center {
  text-align: center;
}
.event_img {
  border: 5px solid #f5f5f5;
  object-fit: contain;
}
.event_img {
  border: 5px solid #f5f5f5;
}
.spacing-bottom p span {
  color: #777;
}
.make_payment .form-group {
  margin-bottom: 10px;
}
.make_payment .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.make_payment .form-group input {
  border: 1px solid #ccc;
  padding: 8px;
  width: 100%;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
}
.make_payment .form-group.firstname .first {
  width: 50%;
}
.make_payment .form-group.firstname .last {
  width: calc(50% - 15px);
  margin-left: 10px;
}
.make_payment .form-group textarea {
  border: 1px solid #ccc;
  padding: 8px;
  width: 100%;
  height: 60px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
}

.previous-events-grid {
  display: block;
  grid-template-columns: inherit;
}
.previous-events-grid .owl-carousel .owl-nav {
  position: static;
  top: -50px;
  right: 0;
  margin: 0;
}
.previous-events-grid .owl-carousel .owl-nav button {
  background: none !important;
  margin-top: -4.5%;
}
.previous-events-grid .owl-carousel .owl-nav button.carousel__button--prev {
  left: -60px;
}
.previous-events-grid .owl-carousel .owl-nav button.carousel__button--next {
  right: -60px;
}
.previous-events-grid .owl-carousel .owl-nav button span {
  font-size: 48px;
  color: var(--black);
  line-height: 0;
  display: none;
}
.previous-events-grid .event-tile__subtitle {
  min-height: inherit;
  padding-top: 0;
  padding-bottom: 15px;
}
.previous-events-grid .event-tile h3 {
  margin: 0;
  padding: 10px 10px 0;
  font-size: 16px;
}
.previous-events-grid .owl-item img {
  max-height: 318px;
  object-fit: cover;
  object-position: center top;
}

.detail-event p {
  color: #5c5c5c;
}
.detail-event a {
  color: var(--blue);
  text-decoration: none;
}
.detail-event .alignnone,
.detail-event .event_img {
  width: calc(50% - 10px);
  height: auto;
  float: left;
  margin: 5px;
}
.tribe-events-single-section {
  clear: both;
  background: #fafafa;
  border: 1px solid #eee;
  margin: 30px 0;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}
.tribe-events-meta-group {
  float: left;
  margin: 0 0 20px;
  padding: 0 4%;
  text-align: left;
  width: 33.3333%;
}
.tribe-events-meta-group .tribe-events-single-section-title {
  font-size: 17px;
  font-weight: 700;
  margin: 20px 0 10px;
}
.tribe-events-event-meta dl {
  margin: 0;
}
.tribe-events-event-meta dt {
  clear: left;
  font-weight: 700;
  line-height: 1;
  list-style: none;
}
.tribe-events-event-meta dd {
  float: none;
  line-height: 1.5;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.tribe-events-event-meta dd a {
  color: var(--blue);
  text-decoration: none;
}
.tribe-events-event-meta .tribe-events-abbr {
  border-bottom: 0;
  cursor: default;
}

.pdf-embed {
  width: 650px;
  height: 1000px;
}

@media only screen and (max-width: 1199px) {
  .anti-bullying-img {
    height: 400px !important;
  }

  .pdf-embed {
    width: 980px;
    height: 800px;
  }
}
@media only screen and (max-width: 991px) {
  .our-mission__img {
    width: 100%;
  }
  .blog_list figure img {
    height: 210px;
  }
  .anti-bullying-img {
    height: 350px !important;
  }

  .pdf-embed {
    width: 760px;
    height: 800px;
  }
}
@media only screen and (max-width: 767px) {
  .blog_list {
    grid-template-columns: 1fr;
  }
  .blog_list figure img {
    height: auto;
  }
  .anti-bullying-img {
    height: 250px !important;
  }

  .pdf-embed {
    width: 500px;
    height: 800px;
  }
}

@media only screen and (max-width: 500px) {
  .main-events-grid .spacing-bottom {
    margin-bottom: 0;
  }
  .main-events-grid .carousel-wrapper {
    width: 100%;
  }
  .main-events-grid .carousel__photo {
    padding: 0;
  }
  .main-events-grid .carousel__button--next {
    right: 10px;
  }
  .main-events-grid .carousel__button--prev {
    left: 10px;
  }
  .anti-bullying-img {
    height: 200px !important;
  }
  .pdf-embed {
    width: 400px;
    height: 800px;
  }
}
@media only screen and (max-width: 399px) {
  .anti-bullying-img {
    height: auto !important;
  }

  .pdf-embed {
    width: 300px;
    height: 400px;
  }
}

.policies-container {
  background-color: var(--blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 275px;
}

.policies-link {
  text-decoration: none;
  color: white;
}

.policies-table-header {
  padding: 8px;
  background: rgb(5, 172, 255, 0.4);
}

.policies-table-row {
  background: rgb(200, 200, 200, 0.1);
}

.policies-table-cell {
  padding: 8px;
}

.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 62.5%; /* 8:5 Aspect Ratio */
}

.responsive-iframe {
  /* Then style the iframe to fit in the container div with full height and width */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.book-image {
  object-fit: cover;
  object-position: 12% 0%;
}

.flex-landscape {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 400px) {
  .flex-landscape {
    flex-direction: row;
  }
}

/* Pair images in every row */
.img-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  width: 100%;
}

.img-container img {
  width: 50%; /* Set the width of the images to be half of the container width */
  height: auto; /* Maintain aspect ratio */
  padding: 5px;
  object-fit: cover; /* Scale the image to cover the container while maintaining aspect ratio */
}

@media only screen and (max-width: 400px) {
  .img-container  {
    flex-direction: column;
  }
  .img-container img {
    width: 100%;
  }
}

.link_5x1000 {
	font-size: 1.5em;
	text-align: center;
}

/****** 5x1000 ******/
._5x1000__cards {
	display: flex;
	gap: 10px; /* Add desired space between cards */
	justify-content: space-between; /* Align cards with space between */
	margin-top: 20px;
	margin-bottom: 20px;
}

._5x1000__card {
	box-sizing: border-box; /* Include padding in width calculation */
	background-color: var(--light-grey);
}
._5x1000__card.flex-card {
	flex: 0 0 calc(50% - 10px);; /* Each card occupies 50% width */
}

._5x1000__card-title {
	background-color: var(--pink);
	color: white;
	padding-left: 10px;
	padding-right: 10px;
}
._5x1000__card-title > h4 {
	margin: 0;
}

._5x1000__card-content {
	padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
._5x1000__card-content > input {
	height: 38px;
}
._5x1000__card-content__control{
	display: flex;
  align-items: center;
}
._5x1000__card-content__control > input {
	flex: 1 1 auto;
  height: 38px;
}
._5x1000__card.copy-cfnum ._5x1000__card-content__control {
	gap: 10px;
}
._5x1000__card.send-whatsapp ._5x1000__card-content__control {
	justify-content: flex-end;
}

._5x1000__highlight {
  color: red;
}
._5x1000__supporting-text {
  font-size: 14px;
  max-width: 450px;
  text-align: center;
}
._5x1000__value-container {
  margin-top: 20px;
}
#_5x1000__income-input {
  margin-left: 10px;
}

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

@media only screen and (max-width: 600px) {
	._5x1000__cards {
		flex-wrap: wrap; /* Allow cards to wrap to the next line */
	}
	._5x1000__card {
		flex-basis: 100%; /* Make each card occupy 100% width on smaller screens */
	}
	._5x1000__card.flex-card {
		flex: inherit
	}
}

.ml-5 {
	margin-left: 5px;
}

.objpos-rb {
	object-position: right bottom;
}

table.normal-border {
	border-collapse: collapse; /* Ensures the border is neat */
	border: 1px solid #ccc; /* Outer border of the table */
}

table.normal-border th,
table.normal-border td {
    border: 1px solid #ccc; /* Border for each cell */
}

table.normal-header th {
	text-align: left;
	background-color: #ffffff;
	padding-right: 20px;
}

.mem__logo {
  width: 80px;
  padding-top: 3px;
}

/* donation */
.donate-form__text {
  font-size: 1.1rem;
  color: #444;
  margin-bottom: 30px;
  text-align: center;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.donate-form__title{
  text-align: center;
}

.donation-options {
  display: flex;
  gap: 1rem;
	flex-wrap: wrap;
}

.donation-option {
  position: relative;
  display: block;
  flex: 1;
  padding: 1.5rem;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  font-weight: 600;
  background-color: #fff;
  text-align: center;
  transition: border-color 0.3s, box-shadow 0.3s, color 0.3s;
  user-select: none;
}

/* Backgrounds and border colors */
.donation-monthly {
  background-color: #e6f9e8; /* light green */
  border-color: #47b165;
}

.donation-oneoff {
  background-color: #e6f0ff; /* light blue */
  border-color: #3d7eff;
}

/* Hover effect */
.donation-monthly:hover {
  box-shadow: 0 0 10px rgba(71, 177, 101, 0.25);
}

.donation-oneoff:hover {
  box-shadow: 0 0 10px rgba(61, 126, 255, 0.25);
}

/* Hide native radio appearance */
.donation-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Active (selected) state */
.donation-option--active span {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Optional: glow color based on type */
.donation-monthly.donation-option--active {
	border-color: #137c30;
  box-shadow: 0 0 10px rgba(71, 177, 101, 0.4);
}

.donation-oneoff.donation-option--active {
	border-color: #143f93;
  box-shadow: 0 0 10px rgba(61, 126, 255, 0.4);
}

.hideme {
	display: none;
}