/* H! block */
.block-heading1{margin: 100px auto}
.block-heading1 h1{max-width:var(--inner-width); margin: 30px auto; line-height: 1.2; color:var(--navy)}


/* General content */
.block_general{max-width: 855px; margin: 0 auto}
@media (max-width: 860px) {
	.block_general{max-width: 100%; margin: 0 auto; padding: 0 30px}
}

/* Video */
.block_video_large{background: var(--gradient-navy); padding: 90px 30px}
.block_video_large.curves-on-top{padding-top: 120px}

.block_video_large > div{max-width: var(--inner-width); margin: 30px auto}


@media (max-width: 1000px) {
	.block_video_large > div{margin: 30px 15px}
	.block-heading1 h1{margin: 30px 15px}
}
@media (max-width: 600px) {
	.block-heading1 h1{margin: 30px 15px; font-size:2rem; line-height: 2.4rem}
	.block_video_large > div{margin: 0}
	.block_video_large{padding: 30px 30px}
	.block_video_large.curves-on-top{padding-top: 30px}
}

.block_video_small{}
.block_video_small > div{max-width:var(--inner-width); margin: 0 auto; padding: 60px 15px; display: flex; justify-content: space-between; align-items: center}
.block_video_small > div > div{width:100%; max-width: 50%}
.block_video_small > div > div:last-of-type{padding:0 60px}
.block_video_small h2{color: #000}
@media (max-width: 1000px) {
	.block_video_small > div{flex-direction: column}
	.block_video_small > div > div{max-width:100%}
	.block_video_small > div > div:last-of-type{padding: 30px; box-sizing: border-box}
}


/* Header image */
.block_header_image{}
.block_header_image > div{max-width:var(--inner-width); margin: 0 auto}
.block_header_image img{width:100%; height: auto}



/* Accordian */
.block_accordian{max-width: var(--narrow); margin: 0 auto 90px; padding: 0 15px; font-size:1rem}
.block_accordian > div{max-width:var(--block-width); margin: 0 auto 60px; margin: 0 0 15px}
.block_accordian .acc-header{display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; cursor:pointer; border:2px solid var(--navy); border-bottom:0; background-color: var(--pale-pink); border-top-left-radius:5px; border-top-right-radius:5px}

.block_accordian .acc-header > div{width:100%}
.block_accordian .acc-header > div:last-of-type{max-width:60px}
.block_accordian h3{padding: 0; margin: 0; font-size:1rem; font-weight:600}
.block_accordian h4{padding: 0; margin: 0; font-size:1rem; font-weight:600}
.block_accordian .acc-content{display: none; padding: 0 15px; border:2px solid var(--navy); border-top:0; background-color: var(--pale-pink)}
.block_accordian .acc-content p{margin: 0; padding: 0 0 15px}
.block_accordian > div:last-of-type .acc-content{border-bottom:0}
.acc-content li{line-height:1.6rem; padding:0 0 10px}

.block_accordian > div{margin-bottom: 15px; position: relative}
.block_accordian > div .fas{position: absolute; top:12px; right:12px; z-index: 10}

.acc-spacer{height: 15px; border-top:2px solid var(--navy)}

@media only screen and (max-width: 1000px) {
	.block_accordian{margin:0 15px !important}
}


/* Donate CTA */
.block_donation{color:#fff}
.block_donation > div{display: flex; justify-content: space-between; align-items: stretch; max-width:var(--inner-width); margin: 0 auto; background:linear-gradient(180deg, #bb3784, #263e50)}
.block_donation > div > div{width:100%; max-width: 50%}
.block_donation > div > div:first-of-type img{object-fit:cover; object-position: center; width:100%; height: 100%}
.block_donation > div > div:last-of-type{padding:40px 80px}
.block_donation .button{padding-left:60px; padding-right:60px}
.block_donation h2{line-height: 2.2rem}
@media (max-width: 1000px) {
	.block_donation{max-width: 600px !important; margin: 0 auto}
	.block_donation > div{flex-direction: column}
	.block_donation > div > div{max-width:100%}
	.block_donation > div > div:last-of-type{padding: 30px; box-sizing: border-box}
}



/* Call to action block */
.block_orange_cta{background: var(--gradient-navy); padding: 60px 30px 60px}


.block_orange_cta.curves-on-top{padding-top: 120px}
.block_orange_cta.curves-on-bottom{padding-bottom: 90px}

.block_orange_cta > div{display: flex; justify-content: space-between; align-items: stretch; max-width:var(--inner-width); margin: 0 auto; padding: 30px 0}
.block_orange_cta > div > div{width:100%; max-width: 50%; box-sizing: border-box; color: #fff}
.block_orange_cta > div > div:last-of-type img{object-fit:cover; object-position: center; width:100%; height: 100%; border-radius:30px}
.block_orange_cta > div > div:first-of-type{padding:0 80px}
.block_orange_cta .button{padding-left:60px; padding-right:60px}
.block_orange_cta .button:hover{background-color: var(--yellow) !important}

.block_orange_cta.right > div{flex-direction: row-reverse}

.block_orange_cta.white-bg{background: #fff}
.block_orange_cta.white-bg .button{background-color: var(--pink) !important; color: #fff !important}
.block_orange_cta.white-bg .button:hover{background-color: var(--yellow) !important; color: var(--navy) !important}
.block_orange_cta.white-bg > div > div{color: var(--navy) !important}

@media (max-width: 1000px) {
	.block_orange_cta{margin: 0 auto}
	.block_orange_cta > div{flex-direction: column !important; justify-content: space-around; max-width:600px}
	.block_orange_cta > div > div{max-width:100%}
	.block_orange_cta > div > div:first-of-type{padding: 30px; box-sizing: border-box}
}

@media (max-width: 600px) {
	.block_orange_cta{background: var(--gradient-navy); padding: 0 30px 30px}
	.block_orange_cta > div > div:first-of-type{padding: 30px 0}
	.block_orange_cta h2{text-align:center}
	.block_orange_cta .button{width:100%}
	.block_orange_cta.curves-on-top{padding-top: 0px}
	.block_orange_cta.curves-on-bottom{padding-bottom: 30px}
}


/* Basket page for workshops */
.workshop-bundle-block{max-width:900px; margin: 0 auto}



.block_tutorials_listing{background: var(--gradient-navy); padding: 90px 30px}

.tutorial-cards{margin:0 auto; display: flex; justify-content: space-between; align-items: stretch; flex-wrap:wrap; column-gap: 30px; grid-row-gap: 60px; max-width: var(--inner-width); }
.tutorial-cards > div{ padding:30px; width:100%; max-width: 300px; background-color: #fff; color: #000; border-radius:15px}

.tutorial-cards h2{text-decoration-thickness:5px !important; text-decoration-line: underline;
  text-decoration-color: var(--teal) !important; font-size:1.8rem; color:var(--navy)}
.tutorial-cards ul{list-style:none; padding:0; margin:0}
.tutorial-cards ul li{padding: 0 0 10px}
.tutorial-cards ul a{color: var(--navy); text-decoration: underline}

.tutorial-flex{max-width: var(--inner-width); margin: 30px auto}
.tutorial-flex div{color: var(--navy) !important}
.tutorial-flex div:first-of-type{max-width:200px; color: #fff !important}

.tutorial-icon-large{width:100%; max-width: 100px; height: 100px; margin: 0 0 15px}
.tutorial-icon-large > img{object-fit: contain; width:100%; height: 100%}

@media (max-width: 1245px) {
	.tutorial-flex{flex-direction: column}
	.tutorial-flex > div{max-width: 100%; text-align: center}
	.tutorial-flex > div:first-of-type{padding-bottom: 15px}
}



.block_volunteer_roles{display: flex; width:100%; max-width: var(--inner-width); margin: 0 auto; justify-content: space-between; align-items: stretch; flex-wrap: wrap}
.block_volunteer_roles > div{width:100%; max-width: 360px; text-align: left; margin-bottom: 30px}
.block_volunteer_roles h2{font-weight:600}
.block_volunteer_roles .role-photo{width:100%; padding-bottom:56%; position:relative}
.block_volunteer_roles .role-photo img{object-fit: cover; object-position: center; width:100%; height: 100%; position: absolute; top:0; left:0}
.block_volunteer_roles .role-desc{padding:15px 0; font-size:1rem; min-height: 160px}
.block_volunteer_roles .button{}



.block_fundraiser_roles{display: flex; width:100%; max-width: var(--inner-width); margin: 0 auto; justify-content: space-between; align-items: stretch; flex-wrap: wrap}
.block_fundraiser_roles > div{width:100%; max-width: calc(100vw - 60px); text-align: left; margin-bottom: 30px}
.block_fundraiser_roles h2{line-height: 2.2rem; font-weight:600}
.block_fundraiser_roles .role-photo{width:100%; padding-bottom:56%; position:relative}
.block_fundraiser_roles .role-photo img{object-fit: cover; object-position: center; width:100%; height: 100%; position: absolute; top:0; left:0}
.block_fundraiser_roles .role-desc{padding:15px 0; font-size:1rem; min-height: 160px}
.block_fundraiser_roles .button{display:block; margin: 0; max-width:325px}

@media (max-width: 1245px) {
	.block_fundraiser_roles{justify-content: space-around}
	
}
@media (max-width: 600px) {
	.block_volunteer_roles{justify-content: space-around; flex-direction: column; max-width: calc(100vw - 60px)}
	.block_volunteer_roles > div{max-width: 100%; margin: 0 auto 30px}
}


.block_workshop_cards-wrap{background: var(--gradient-navy);padding: 90px 30px}
.block_workshop_cards{display: flex; width:100%; margin: 30px auto; justify-content: flex-start; gap:60px; align-items: stretch; flex-wrap: wrap; max-width:var(--inner-width)}
.block_workshop_cards > div{width:100%; max-width: 360px; text-align: left; margin-bottom: 30px; background: #fff; border-radius:15px}
.block_workshop_cards h2{color:var(--navy); font-size:38px; line-height: 1; min-height: 110px; margin: 0 0 10px; font-weight:600}
.block_workshop_cards .role-photo{width:100%; padding-bottom:56%; position:relative; background: #f8f8f8; border-top-left-radius:15px; border-top-right-radius:15px}
.block_workshop_cards .role-photo img{object-fit: cover; object-position: center; width:100%; height: 100%; position: absolute; top:0; left:0; border-top-left-radius:15px; border-top-right-radius:15px}
.block_workshop_cards .role-desc{padding:15px 0; font-size:1rem; line-height: 1.6rem; min-height: 160px}
.block_workshop_cards .button{width:100%; margin-bottom: 15px}

.ws-card-body{padding: 30px 30px 15px; box-sizing: border-box}

.our-workshop-filter{max-width: var(--inner-width); margin: 30px auto 10px; display: flex; justify-content: flex-start; align-items: center}
.our-workshop-filter > div{}
.our-workshop-filter > div:first-of-type{font-weight:700; color: #fff}
.our-workshop-filter > div:last-of-type{width: 400px; padding-left: 10px}

.workshop-modal-data{display: none}
.wp-modal-flex{gap: 30px; align-items: stretch}
.wp-modal-flex > div{width:100%; text-align: left}
.wp-modal-flex > div:first-of-type{max-width: 55%}
.wp-modal-flex p{padding: 0; margin: 0 0 15px}

@media (max-width: 1245px) {
	.block_workshop_cards{justify-content: space-around}
}
@media (max-width: 600px) {
	.our-workshop-filter{flex-direction: column}
	.our-workshop-filter > div{width:100%; text-align: center}
	.filter-box{margin: 30px auto 10px; min-width:100%; max-width: 300px}
	.block_workshop_cards{max-width: calc(100vw - 60px)}
	.our-workshop-filter .filter-box{max-width: 300px !important}
}




.block_news_cta{padding:40px 15px 30px; margin: 30px auto}
.block_news_cta.grad-teal{background: var(--gradient-teal)}
.block_news_cta.grad-yellow{background: var(--gradient-yellow)}
.block_news_cta > div{display:flex; justify-content: space-between; align-items: center; max-width: var(--inner-width); margin: 0 auto}
.block_news_cta > div > div{width:100%; max-width: 50%}
.block_news_cta > div > div:last-of-type{padding: 15px 50px}
.cta-post-date{padding: 0 0 10px}
.block_news_cta h2 a{color: #000; text-decoration:underline; text-decoration-color: var(--pink); text-decoration-thickness:4px; }
@media (max-width: 900px) {
	.block_news_cta > div{flex-direction: column; justify-content: space-around !important; max-width: 600px}
	.block_news_cta > div > div{max-width: 100%}
	.block_news_cta > div > div:last-of-type{padding: 30px 0}
}




.block_testimonial{padding: 30px 15px; margin: 30px auto}

.block_testimonial.bg-volunteer{background-color: var(--teal)}
.block_testimonial.bg-beneficiary{background: linear-gradient(180deg, #bb3784, #263e50)}
.block_testimonial.bg-beneficiary h2{color: #fff}

.block_testimonial > div{ display: flex; justify-content: space-around; align-items: center; max-width: var(--inner-width); margin: 0 auto}
.block_testimonial > div > div{width:100%; max-width: 100%}
.block_testimonial > div > div:first-of-type{text-align:center}

.block_testimonial h2{line-height: 2.6rem; font-weight:600}
.block_testimonial h2 > span{display:block; position: absolute; top:0; left:-19px}
.block_testimonial h2 p{padding: 0; margin: 0; display: inline}

.block_testimonial .testimomnial-photo{border-radius:400px; min-width:400px; max-width:400px; min-height:400px; max-height:400px; display: flex; justify-content: center; align-items: center; margin: 50px auto; background-image:url("../img/dial-white.png"); background-size: cover}
.block_testimonial .testimomnial-photo > div{background-color: pink; border-radius:315px; min-width:315px; max-width:315px; min-height:315px; max-height:315px}

.block_testimonial .tesimonial-title{color:var(--pink); padding: 0 0 15px; font-weight: 700}
.block_testimonial a{color:#000; text-decoration: underline; font-weight: 500}
.block_testimonial.bg-beneficiary .tesimonial-title{color:var(--yellow)}
.block_testimonial.bg-beneficiary a{color:#fff}

.block_testimonial.bg-beneficiary u{text-decoration-color:var(--yellow) !important}

@media (max-width: 900px) {
	.block_testimonial > div{flex-direction: column; justify-content: space-around !important; max-width: 600px}
	.block_testimonial > div > div{max-width: 100%}
	.block_testimonial > div > div:last-of-type{padding: 30px 0}
}

@media (max-width: 600px) {
	.block_testimonial h2 > span{left:0}
	.block_testimonial .testimomnial-photo {min-width:320px; max-width:320px; min-height: 320px; max-height:320px}
	.block_testimonial .testimomnial-photo > div{min-width:260px; max-width:260px; min-height: 260px; max-height:260px}
}


.block_vol_locs-wrap{background: var(--navy); padding: 60px 0 0}

.block_vol_locs{ margin:0 auto}

.vol_filters{display: flex; margin: 30px auto 90px; justify-content: space-between; align-items: center; max-width:var(--inner-width)}
.vol_filters > div{flex-grow:1; padding: 0 10px 0 0; color: #fff}
.vol_filters > div:nth-of-type(1){font-weight:700; max-width: 260px}
.vol_filters > div:nth-of-type(2){max-width:120px}
.vol_filters #location{max-width: 140px !important; min-width: 140px !important}
.vol_filters > div:nth-of-type(3){max-width:240px; text-align: right; font-weight:700}
.vol_filters > div:nth-of-type(4){max-width:140px}
.vol_filters > div:nth-of-type(5){padding-right:0; max-width:325px}
.vol_filters > div:nth-of-type(5) .button{display: block; width:100%}
.vol_filters input{margin: 0 !important}
.vol_filters .filter-box{min-width:145px; max-width: 145px}

.loc_map_flex-wrap{background: #fff; padding: 5px 15px 0; margin: 0}
.loc_map_flex{display: flex; justify-content: space-between; align-items: stretch; margin: 60px auto 0; max-width:var(--inner-width)}
.loc_map_flex > div{width:100%; height: 600px}
.loc_map_flex > div:first-of-type{max-width:460px; padding-right: 15px}
.loc_map_flex > div:last-of-type{position:relative; background:#f8f8f8}
.loc_map_flex iframe{width:100% !important; min-height: 100% !important; margin: 0; padding: 0; overflow: hidden; position: absolute; top:0; left:0}

#vol_matches{height: 70px; font-size:28px; line-height: 1.2; color: var(--navy); margin: 0 0 15px}
#vol_locations{min-height: 520px; max-height:520px; overflow: auto}
#vol_locations p{margin: 0 0 15px; padding: 0}

@media (max-width: 900px) {
	.vol_filters{flex-direction: column; margin: 0 15px 30px}
	.vol_filters > div{max-width: 300px !important; text-align: center !important; padding: 10px 0}
	
	.loc_map_flex{flex-direction: column; margin: 0 15px}
	.loc_map_flex > div{max-width: 300px !important; margin: 0 auto !important; padding: 0 !important}
}
@media (max-width: 600px) {
	#vol_matches{font-size:1.2rem; line-height: 1.4rem}
	
}

/* testimonials */
.block_testimonial_slider{max-width:var(--inner-width); margin: 90px auto 30px; background: #fff; overflow: hidden; position: relative; min-height: 500px}
.block_testimonial_slider_flex{display:flex; justify-content: flex-start; align-items: stretch; min-height: 500px; z-index: 1}
.block_testimonial_slider_flex > div{min-width:345px; max-width:345px; background: var(--teal); color:#000; margin: 0 15px 0 0; padding: 15px 30px 40px; min-height: 450px}

.block_testimonial_slider_pos{max-width: var(--inner-width); margin: 0 auto; position: relative}
.block_testimonial_slider_pos img{position: absolute; width:30px; cursor:pointer; top:290px; transition:all 300ms ease}
.block_testimonial_slider_pos img:hover{opacity:0.6}
.block_testimonial_slider_pos img:first-of-type{left:-50px}
.block_testimonial_slider_pos img:last-of-type{right:-50px}

.block_testimonial_slider .read-button{position: absolute; bottom:15px; left:30px; color: #000 !important; text-decoration: underline}
.block_testimonial_slider .testimomnial-photo{margin: 0 auto; padding: 0; max-width:260px; min-width:260px; max-height: 260px; min-height: 260px}
.block_testimonial_slider .testimomnial-photo > div{min-width:215px; max-width: 215px; min-height: 215px; max-height:215px}
.block_testimonial_slider h2{font-size:1.4rem; line-height:1.6rem; line-height:2rem; padding: 30px 0 0; min-height:100px; max-height: 100px; overflow: auto; margin: 0}
.block_testimonial_slider h2 u{text-decoration-thickness:4px !important}
.block_testimonial_slider h3{font-size:1rem; line-height:1.3rem; color:var(--pink)}

.test-slider-more{text-align: right; padding: 0; margin: 30px auto 60px; max-width: var(--inner-width)}
.test-slider-more .button{margin:0 !important}

.block_testimonial_slider .testimomnial-photo{border-radius:310px; min-width:310px; max-width:310px; min-height:310px; max-height:310px; display: flex; justify-content: center; align-items: center; margin: 30px auto 0; background-image:url("../img/dial-white.png"); background-size: cover}
.block_testimonial_slider .testimomnial-photo > div{background-color: pink; border-radius:230px; min-width:230px; max-width:230px; min-height:230px; max-height:230px}


.slider-theme-pink > div{background: linear-gradient(0deg, #263e50, #bb3784); color: #fff}
.slider-theme-pink h3{color: var(--yellow)}
.slider-theme-pink .testimomnial-photo{}
.slider-theme-pink .read-button{color: #fff !important}
.slider-theme-pink u{text-decoration-color: var(--yellow) !important}

@media (max-width: 1245px) {
	.block_testimonial_slider{max-width: 390px}
	.block_testimonial_slider_pos{display: none}
	.test-slider-more{padding-right: 15px}
}


.useful-contact-logos{display:flex; justify-content: space-around; align-items: center; flex-wrap:wrap; max-width: var(--inner-width); margin: 30px auto}
.useful-contact-logos > div{border:5px solid var(--pink); width:240px; height:240px; margin: 15px; border-radius:200px; padding: 10px}
.useful-contact-logos > div img{object-position: center; object-fit:contain; width:100%; height: 100%; border-radius:200px}


/* Resources filter */
.resource-filter{display:flex; justify-content: flex-start; align-items: center; max-width: 1245px; margin: 50px auto 15px}
.resource-filter > div{}
.resource-filter > div:first-of-type{padding: 0 15px 0 0; font-weight: 700}

@media (max-width: 600px) {
	.resource-filter{flex-direction: column; justify-content: space-around; width:100%}
	.resource-filter > div{width:100%; padding: 0 0 15px; text-align: center}
}


.block_instagram{background: #f8f8f8; padding: 100px 0}


/* Legacy*/
.threeButtonRow{max-width:var(--inner-width); margin:0 auto}
.wp-block-group, .ctaWrap, .threeButtonRow{border:2px dashed red; background: pink; color:red}


/* Resources */
.block_resources{max-width: 1245px; margin: 15px auto 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap}
.block_resources > div{width:100%; max-width:285px; margin: 0 0 15px; margin:15px 15px 30px 0}
.block_resources h2{text-align:left; font-size:1.4rem; line-height:1.8rem; padding: 0; margin: 0; min-height: 60px}
.block_resources .button{display: block; margin: 15px 0 0}
.block_resources .resource-thumb{padding-bottom:56%; position: relative}
.block_resources .resource-thumb img{object-fit: cover; object-position: center; width:100%; height: 100%; position: absolute; top:0; left:0}

@media (max-width: 1245px) {
	.block_resources{justify-content: space-around}
}


.event-filter-box{display: flex; justify-content: space-between; align-items: center; margin: 90px 0 60px}
.event-filter-box > div{flex-grow:1; padding: 0 10px 0 0}
.event-filter-box > div:first-of-type{color:#fff !important}
.event-filter-box > div:last-of-type{padding: 0}
.event-filter-box .button{min-width: 100%; padding: 12px 30px 11px}
.event-item-desc{padding: 15px}

.news-tease-filter-flex{display:flex; justify-content: flex-start; align-items: center; column-gap: 15px; grid-row-gap: 15px; margin: 0 auto 30px}

.news-tease-filter-flex .button{padding-top: 10px; padding-bottom: 10px; margin: 0}

@media (max-width: 600px) {
	.event-filter-box{flex-direction: column}
}


/* Partners */
.block_partners{padding: 60px 0}
.block_partners > h2{color: var(--navy)}
.block_partners .button-pink{min-width:349px}


#partner-carousel-wrap {
  width: 100%;
  overflow: hidden;
  margin: 0 auto 30px;
  position: relative;
  height: 200px;
}

#partner-carousel-items {
  display: flex;
  column-gap: 30px;
  align-items: center;
  animation: scroll-right-to-left 30s linear infinite;
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
}

.partner-image {
  min-width: 250px;
  max-width: 250px;
  aspect-ratio: 4/3;
}

.partner-image img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  object-position: center;
}

/* Add keyframes to ensure the smooth scrolling */
@keyframes scroll-right-to-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* This is the trick to duplicate the items */
#partner-carousel-items::after {
  content: "";
  display: flex;
  flex: 1 0 auto;
  width: 100%;
  visibility: hidden;
}


#partner-carousel-wrap:hover #partner-carousel-items {
  animation-play-state: paused;
}


@keyframes scroll-right-to-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}




@media (max-width: 600px) {
	.block_partners{padding: 30px 0}
}