@import url("../css/_hero-banner.css");
@import url("../css/_short-intro-section.css");
@import url("../css/_community-grid-module.css");
@import url("../css/_community-map-section.css");
@import url("../css/_donation-section.css");
@import url("../css/_repeater-section.css");
@import url("../css/_feature-panel-section.css");
@import url("../css/_common-cta-section.css");
@import url("../css/_history-slider.css");
@import url("../css/_resource-section.css");



.hero-banner-section {margin: 0 0 83px 0;}
.hero-banner-section .hero-banner-main .hero-banner-txt {width: 51%; margin-bottom: 2.5%;}
.hero-banner-section .hero-banner-main .hero-banner-txt .optional-text {margin: 0 0 7px 0;}
.hero-banner-section .hero-banner-main .hero-banner-txt h1 {margin-bottom: 22px;}
.hero-banner-section .hero-banner-main .hero-banner-txt h1 span{color: var(--pink);}
.hero-banner-section .hero-banner-main .hero-banner-txt p {max-width: 450px;}
.hero-banner-section .hero-banner-main .hero-banner-image {width: 46%;}
.hero-banner-section .hero-banner-main .hero-banner-image .banner-img {bottom:0; position: absolute; width: auto!important; height: auto!important;} 


.banner-ellipse-wrap {height: 470px; overflow: hidden; position: absolute; width: 1020px; bottom: 0; left: -364px;}
.banner-ellipse {position: absolute; top: auto; bottom: -555px; height: 1021px; width: 1021px;}

.ellipse {border-radius: 50%; border-style: solid; border-width: 80px;}

.ellipse-blue {border-color: var(--violetblue);}
.ellipse-red {border-color: var(--red);}
.ellipse-orange {border-color: var(--orange); border-width: 79px;}
.ellipse-green {border-color: var(--green);}
.ellipse-pink {border-color: var(--pink); border-width: 79px;}
.ellipse-icon {height: 218px; align-items: center; justify-content: center; background: var(--violetblue); border-radius: 50%;}
.ellipse-icon img {width:96px; height:88px; border-radius:0!important;}

.banner-faces-thumbs {width: 755px; height: 500px; position: absolute; left: -177px; bottom: 0;}
.banner-faces-thumbs .face {width: 197px; height:195px; top: 84px; left: 88px;}
.banner-faces-thumbs .face:nth-child(2) {width: 216px; height: 216px; bottom: -83px; left: 0; top: inherit;}
.banner-faces-thumbs .face:nth-child(3) {width: 260px; height: 260px; right: 93px; top: 15px; left: inherit; margin-left: auto;}
.banner-faces-thumbs .face:nth-child(4) {width: 198px; height: 198px; bottom: -39px; right: -53px; top: inherit; margin-left: auto;}

.page-template-about .tp-shape-9{right: -13px;}
.page-template-about .tp-shape-8{left: -100px;}

.community-main {position: relative; clear: both; width: 100%;}
.community-main h2:before {display: block; position: absolute; left: 0; top: 0; background-image: radial-gradient(circle at 1px, #C8CCCD 1.25px, rgba(255,255,255,0) 1px); background-position: 0 0; background-size: 10px 2px; background-repeat: repeat-x; width: 100%; height: 2px; vertical-align: middle; border: 0 none;
  content: "";}
.community-main h2 {text-align: center; margin: 0 0 100px 0; position: relative; padding: 80px 0 0 0;}


@media only screen and (max-width: 1620px) and (min-width:1401px){
	.banner-faces-thumbs .face {left: 128px;}
	.banner-faces-thumbs .face:nth-child(2) {left: 120px;}
}

@media only screen and (max-width: 1400px) and (min-width:1300px){
	.banner-ellipse-wrap {left: -300px;}
	.banner-faces-thumbs .face {width: 167px; height:165px; top: 84px; left: 210px;}
	.banner-faces-thumbs .face:nth-child(2) {width: 200px; height: 200px; bottom: -83px; left: 170px; top: inherit;}
	.banner-faces-thumbs .face:nth-child(3) {width: 220px; height: 220px; right: 93px; top: 15px; left: inherit; margin-left: auto;}
	.banner-faces-thumbs .face:nth-child(4) {width: 198px; height: 198px; bottom: -39px; right: -115px; top: inherit; margin-left: auto;}
}


@media only screen and (max-width: 1299px) and (min-width:1024px){
	.ellipse, .ellipse-orange, .ellipse-pink {border-width:60px;}
	.ellipse-icon {height: 254px;}
	.banner-ellipse-wrap {left: -288px;}
	.banner-ellipse {bottom: -465px; height: 850px; width: 850px;}
	.banner-ellipse-wrap {width: 850px;}

	.banner-faces-thumbs .face {width: 150px; height:150px; top: 84px; left: 185px;}
	.banner-faces-thumbs .face:nth-child(2) {width: 160px; height: 160px; bottom: -83px; left: 170px; top: inherit;}
	.banner-faces-thumbs .face:nth-child(3) {width: 180px; height: 180px; right: 200px; top: 49px; left: inherit; margin-left: auto;}
	.banner-faces-thumbs .face:nth-child(4) {width: 180px; height: 180px; bottom: -39px; right: 48px; top: inherit; margin-left: auto;}

}


@media only screen and (min-width: 1024px) {
	.short-intro-section {padding: 22px 0 0;}
			
}

@media only screen and (max-width: 1023px) and (min-width:200px){
	.hero-banner-section .hero-banner-main .hero-banner-image {width: 100%; min-height: 470px;}
	.hero-banner-section .hero-banner-main .hero-banner-image .banner-img {width: 100%!important;}
	.banner-ellipse-wrap {left: 50%; right: 0; margin: auto; transform: translateX(-50%);}
}

@media only screen and (max-width: 1023px) and (min-width:768px){
	.banner-ellipse-wrap {width: 900px;}
	.banner-ellipse {bottom: -500px; height: 900px; width: 900px;}
	.ellipse, .ellipse-orange, .ellipse-pink {border-width:60px;}
	.ellipse-icon {height: 290px;}
	.banner-faces-thumbs {width: 724px; height: 470px; left: 0; bottom: 0; right: 0; margin: auto;}
	.banner-faces-thumbs .face:nth-child(3) {width: 230px; height: 230px;}
	.banner-faces-thumbs .face:nth-child(4) {right: 0;}
	
	.short-intro-section {padding: 30px 0 44px;}
	.repeater-list{margin-bottom: 50px;}
	.reverse .repeater-content { padding-top: 28px; }
    .community-main h2 {margin-bottom: 40px; padding-top: 50px;}
}

@media only screen and (max-width: 767px) and (min-width:200px){
	.ellipse, .ellipse-orange, .ellipse-pink {border-width:48px;}
	
	.banner-ellipse-wrap {width: 615px; height: 288px;}
	.banner-ellipse {width: 615px; height: 615px; bottom: -327px; left: -4px;}
	
	.ellipse-icon {height: 132px;}
	
	
	.banner-faces-thumbs {width: 100%; left: 0; right: 0; margin: auto; height: 288px;}
	.banner-faces-thumbs .face {width: 142px; height: 141px; left: 0; top: 7px;}
	.banner-faces-thumbs .face:nth-child(2) {width: 132px; height: 132px; bottom: -36px; left: 35px;}
	.banner-faces-thumbs .face:nth-child(3) {display: none;}
	.banner-faces-thumbs .face:nth-child(4) {width: 175px; height: 176px; bottom: 53px; right: -4px;}
	
	
	.hero-banner-section {margin: 0 0 37px 0;}
	.hero-banner-section.reverse .hero-banner-main .hero-banner-txt {margin: 0 0 111px 0;}
	.hero-banner-section .hero-banner-main .hero-banner-image {min-height: 288px;}
	.hero-banner-section .hero-banner-main .hero-banner-txt .optional-text {margin: 0 0 11px 0;}
	.hero-banner-section .hero-banner-main .hero-banner-txt h1 {margin-bottom: 32px;}
	.hero-banner-section .hero-banner-main .hero-banner-txt p {margin-bottom: 26px;}
	
	.short-intro-section {padding: 55px 0 64px;}
    
    .community-main h2 {padding: 50px 0 0 0; margin: 0 0 40px -22px;}
    .community-main h2::before {width: calc(100% - 44px); left: 22px;}
}