body {
	font-family: 'Open Sans', sans-serif;
	overflow-x: hidden;
	font-size: 1rem !important;
}

a {
	color: inherit !important;
	text-decoration: inherit !important;
}

h1 {
	text-align: center;
	padding-bottom: 40px;
	text-transform: uppercase;
	font-size: 25px !important;
}
h1::before,
h1::after {
    display: inline-block;
    content: "";
    border-top: .15rem solid  #ff6699;
    width: 1.4rem;
    margin: -.5rem 1rem;
    transform: translateY(-1rem);
}

@media screen and (max-width:1200px) {
	body {
		
		font-size: .8rem !important;
	}
	h1 {
		padding-bottom: 40px;
		font-size: 19px !important;
	}
	h1::before,
	h1::after {
		display: inline-block;
		content: "";
		border-top: .15rem solid  #ff6699;
		width: 1rem;
		margin: -.6rem 1rem;
		transform: translateY(-1rem);
	}
	
	#main-banner,
	 #main-banner-projects,
	 #main-banner-videos,
	 #main-banner-contact,
	 #main-banner-donate	{
		height: 450px !important;
	}

	#main-banner-content {
		width: 90% !important;
	}
	
	#main-banner-text {
		width: 85% !important;
		max-width: 550px;
		font-size: 15px !important;
	}
	
	#what-we-do-container {
		height: auto !important;
		padding-bottom: 7% !important;
	}
	
    #what-we-do-content {
		width: 85% !important;
	}
	
	#project-highlights-container {
		height: auto !important;
		padding-bottom: 7% !important;
	}
	
    #project-highlights-content {
		width: 600px !important;
		margin: 0 auto 0 auto !important;
	}
	
	.project-highlight-box {
		margin: 0 5% 30px auto !important;
	}
	
	#mission-statements-container {
		height: auto !important;
		padding-bottom: 4%;
	}
	
	#mission-statements-content {
		width: 600px !important;
		margin: 0 auto 0 auto !important;
	}
	
	#mission-statements-content .mission-statement-container {
		margin: 0 5% 30px auto !important;
		padding-bottom: 40px !important;
	}
	
	#event-photos-container {
		
	}
	
	#event-photos-content img {
		max-width: 50% !important;
	}
	
	.projects-overview-project {
		width: 98% !important;
	}
	
	h2 {
		font-size: 2.4vw !important;
	}
	
	.projects-overview-project p {
		font-size: 1.8vw !important;
	}
}

@media screen and (max-width:750px) {
	#main-banner-title {
		font-size: 26px !important;
	}
	
	#logo-menu-container {
		height: 60px !important;
	}
	
	#main-menu {
		display: none;
	}
	
	#main-menu-responsive {
		display: block !important;
	}
	
	#main-logo {
		margin-top: -8px !important;
	}
	
    #project-highlights-content {
		width: 100% !important;
	}
	
	.project-highlight-box {
		margin: 0 auto 30px auto !important;
		display: block !important; 
	}
	
	#mission-statements-content {
		width: 100% !important;
	}
	
	#mission-statements-content .mission-statement-container {
		display: block !important;
		margin: 0 auto 0 auto !important;
	}
	
	.donate-container {
		width: 90% !important;
		padding: 10px !important
	}
	
	#footer {
		font-size: 2.7vw !important;
		height: 10vw !important;
		padding-top: 3.1vw !important;
	}
	
	.projects-overview-project .example-image-link img {
		width: 100px !important;
		height: 100px !important;
		display: inline-block !important;
	}
}

@media screen and (max-width:550px) {
	#what-we-do-content img {
		display: block !important;
		float: none !important;
		margin: 0 auto 20px auto !important;
	}
	
	.visit-button {
		display: block !important;
		width: 80% !important;
		text-align: center;
		padding: 3% 0 3% 0 !important;
		margin: 0 auto 0 auto !important;
	}
	
	h2 {
		font-size: 14px !important;
	}
	
	.projects-overview-project p {
		font-size: 11px !important;
	}
	
	.projects-overview-project a img {
		margin: 20px auto 0px auto !important;
		display: inline-block !important;
		width: 45vw !important;
		height: 45vw !important;
	}
}

#main-banner,
 #main-banner-projects,
 #main-banner-videos,
 #main-banner-contact,
 #main-banner-donate {
	display: flex;
	color: white;
	background-repeat: no-repeat;
    overflow: hidden;
    background-position: center;
    background-size: cover;

	height: 550px;
	
	transform-style: preserve-3d;
    perspective:100px;
}


#main-banner:before, 
 #main-banner-projects:before,
 #main-banner-videos:before,
 #main-banner-contact:before,
 #main-banner-donate:before {
	animation: fade-slide-down 2s ease-out forwards;
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8)),
		url(/images/mainbanner.jpg) no-repeat bottom;
  background-size: cover;
  content: "";
  position: absolute;
  background-position: center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  z-index: -1;
}

#main-banner-projects:before {
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8)),
		url(/images/projectsbanner.jpg) no-repeat bottom !important;
}

#main-banner-videos:before {
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8)),
		url(/images/videosbanner.jpg) no-repeat bottom !important;
}

#main-banner-contact:before {
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8)),
		url(/images/contactbanner.jpg) no-repeat bottom !important;
}

#main-banner-donate:before {
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8)),
		url(/images/donatebanner.jpg) no-repeat bottom !important;
}

#main-banner:after, 
 #main-banner-projects:after,
 #main-banner-videos:after,
 #main-banner-contact:after,
 #main-banner-donate:after {
  background: #F9FCFF;
  content: "";
  height: 40rem;
  left: -5%;
  position: absolute;
    right: -5%;
    top: 90%;
  transform-origin: 0 0;
  transform: rotateZ(-4deg);
  z-index: 0;
}

@keyframes fade-slide-down {
  0% {
    opacity: 0;
    transform: translateY(-4rem);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

#main-banner-content {
	width: 1100px;
	margin: 0 auto 0 auto;
}

#logo-menu-container {
	height: 100px;
	margin: 30px 30px 0 0;
}


#main-logo {
	font-size: 20pt;
	font-weight: 300;
	float: left;
}

#main-menu {
	float: right;
}

#main-menu-responsive {
	float: right;
	display: none;
}

#main-menu-responsive i {
	font-size: 32px;
	cursor: pointer;
}

#main-menu a:hover {
	color: #def !important;
	transition-duration: .4s;
}

.main-menu-item {
	float: left;
	margin-right: 24px;
}

.main-menu-item.active {
	color: #ff2255 !important;
}

.main-menu-item-top-label {
	font-weight: bold;
}

.main-menu-item-bottom-label {
	font-weight: 300;
}

#responsive-main-menu-items {
	display: none;
	margin-top: -10px;
}

#responsive-main-menu-items a {
    background-color: black;
    color: white !important;
    display: block; /* Make the links appear below each other */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
}

#responsive-main-menu-items a.active {
    background-color: #ff2255 !important;
	color: white !important;
}

#main-banner-title {
	font-size: 36px;
	font-weight: bold;
}

#main-banner-text {
	margin-top: 20px;
	width: 550px;
	font-size:18px;
}

#what-we-do-container {
	background: linear-gradient(white, #f2f2f2);
	padding-top: 0px;
	color: #555566;
	padding-bottom: 50px;
}

#what-we-do-content {
	width: 1100px;
	margin: 0 auto 0 auto;
}

#what-we-do-content img {
	margin: 0 20px 20px 0;
}

#project-highlights-container {
	padding-top: 60px;
	color: #555566;
	height: 500px;
}

#project-highlights-content {
	width: 1100px;
	margin: 0 auto 0 auto;
}

#project-highlights-content .project-highlight-box {
	display: inline-block;
	width: 250px;
	height: 300px;
	background-position: center;
	background-size: auto 100%;
    background-repeat: no-repeat;
}

#project-highlights-content .project-highlight-box {
	margin: 0 15px 0 0;
	box-shadow: 0 0 8px rgba(0,0,0,0.3);
	width: 250px;
	transition-duration: .2s;
}

#project-highlights-content .project-highlight-box:hover {
	filter: brightness(130%);
	transition-duration: .4s;
	background-size: auto 120%;
}

#project-highlights-content :hover .project-highlight-description {
	opacity: 1 !important;
	color: black !important;
	font-weight: 400;
	transition-duration: .4s;
}

.project-highlight-description {
	color: #616161;
	width: 220px;
	padding: 5px;
	position: absolute;
	margin-top: 150px;
	margin-left: 15px;
	font-size: 13px;
	background-color: white;
	box-shadow: 0 0 3px rgba(0,0,0,0.3);
	opacity: 0.9;
}




#mission-statements-container {
	background-color: #222222;
	padding-top: 60px;
	color: white;
	height: 650px;
}

#mission-statements-content {
	width: 1100px;
	margin: 0 auto 0 auto;
}

#mission-statements-content .mission-statement-container {
	display: inline-block;
	margin-right: 20px;
	width: 250px;
}

#mission-statements-content .mission-statement-image {
	width: 230px;
	margin-left: 10px;
	height: 250px;
    background-position: center;
	background-size: auto 120%;
	background-repeat: no-repeat;
}

#mission-statements-content .mission-statement-box {
	background-color: #ff2255;
	color: white;
	padding: 10px;
	box-shadow: 0 7px 15px rgba(0,0,0,0.2);
}

#mission-statements-content .mission-statement-box i {
	font-size: 20px;
	margin-right: 7px;
}

.mission-statement-description {
	color: white;
	font-size: 13px;
	
	padding: 10px;
}



#event-photos-container {
	background-color: #333;
	color: #555566;
}

#event-photos-content {
	width: 100%;
	max-width: 1600px;
	font-size: 0;
	margin: 0 auto 0 auto;
}

#event-photos-content img {
	position: relative;
	display: inline-block;
	max-width: 25%;
	width: auto;
	height: auto;
	transition: all 0.1s;
	z-index: 1;
}

#event-photos-content img:hover {
	transform: scale(1.1);
	transition: all 0.3s;
	cursor: pointer;
	z-index: 1000;
	
}

.visit-button {
	display: inline-block;
	background-color: #ff2255;
	padding: 8px 14px;
	color: white;
}

#footer {
	height: 60px;
	background-color: #ff2255;
	padding-top: 20px;
	color: white;
	text-align: center;
}

.video-box {
	display: inline-block;
}

.videos-header {
	text-align: center;
	font-size: 25px;
	padding-bottom: 20px;
}

.projects-overview-container {
	background-color: #F9FCFF;
}
.projects-overview-project {
	width: 1200px;
	margin: 0 auto 0 auto;
	/* border: 1px solid #ddd;*/
	padding: 20px;
	/*box-shadow: 0 0 15px rgba(0,0,0,0.2);*/
	margin-bottom: 50px;
	/*background-color: white;*/
}

.projects-overview-project img {
	margin: 0 10px 10px 0;
}


.projects-overview-project h2 {
	font-size: 22px;
	padding: 7px 0 10px 0;
	color: white;
	background-color: #ff2255;
}

.projects-overview-project p {
	font-size: 15px;
}

.projects-overview-project .example-image-link img {
	object-fit: cover;
	width: 150px;
	height: 150px;
	max-width: 100%;
	max-height: 100%;
	transition-duration: .4s;
	border-radius: 5px;
	border: 2px solid #ddd;
}

.projects-overview-project .example-image-link img:hover {
	transform: scale(1.1);
	transition-duration: .4s;
	border: 2px solid #ff2255;
}

.donate-container {
	margin: 0 auto 0 auto;
	width: 650px;
	border-radius: 10px;
	padding: 20px;
	color: #556;
}