.contentHead{background-image: url("../images/charity76.jpeg"); border: 0.1px solid transparent; width: 100%; height: 80%; }
.onLandingHead{background-image: url("../images/ihlumlo home graphic.png"); background-size: 100% 100%;} 
.onTicket{ background-image: url("../images/image5\ copy.png"); }
.onContact{ background-image: url("../resources/images/file-20220513-12-s96mpo.avif"); }

.contentHead> .contentTitles{ width: 40%; height: 50%; margin-top: 15%; margin-left: 5%; }
.contentHead> .landingHead{margin-left: 30%;}
.contentHead> h3{text-align: center; margin-top: 10%; font-size: 4em;}
.contentHead> .contentTitles> p{margin-top: 3%; color: white; font-size: larger; font-weight: bolder;}
.contentHead> .contentTitles> h2{color: white; font-size:3.7em; margin-top: 1%; font-weight: bolder; line-height: 1em;}
.contentHead> .contentTitles> h3{color: white; font-size:1em; margin-top: 1%; font-weight: bolder; line-height: 1em;}
.onContact > .contentTitles{visibility: hidden;}


.fundRaiser{width: 90%; position: relative; margin-left: 5%; min-height: 20%; display: flex;}
.fundRaiser> .contentSide{width: 65%;display: inline-block;}
.fundRaiser> .contentSide> .bankDetails{background: rgb(66, 60, 43); margin-left: 30%; width: 30%; margin-top: -4em; float: right; height: 8em; 
	position: absolute; border-radius: 12px;}
.fundRaiser> .contentSide> .bankDetails> h3{margin-top: 0.2%; color: whitesmoke; text-align: center;}
.fundRaiser> .contentSide> .bankDetails> p{margin-top: 5%; color: rgb(203, 156, 76); margin-left: 4%; line-height:6%; text-align: left;}
.fundRaiser> .contentSide> .charityImage{width: 200px; height: 200px}
.fundRaiser> .contentSide> .charityImage> img{width: inherit; height: inherit; object-fit: cover;}
.fundRaiser> .contentSide> .welcome{color: rgb(203, 156, 76); margin-top: 4%;}
.fundRaiser> .contentSide> h3{color: black; margin-top: 0em; font-size: 2.5em;}
.fundRaiser> .formSide{width: 33%; margin-left: 1%; display: inline-block;}
.fundRaiser> .formSide>.theform{width: 90%; margin-top: -6em; box-shadow: 2px 5px 15px rgba(0, 0, 0,0.5); border-radius: 12px; background: rgb(56, 49, 32);}
.fundRaiser> .formSide>.theform> .close{display: none;}
.fundRaiser> .formSide>.theform> .theHead {background: rgb(46, 102, 109); border-top-left-radius: 12px; border-top-right-radius: 12px; justify-content: center;
	 margin-top: 0%;  padding-top: 0%; color: rgb(203, 156, 76);}
.fundRaiser> .formSide>.theform> .theHead> h3{text-align: center; padding-top: 2%; font-size: larger; color: white;}
.fundRaiser> .formSide>.theform> .theHead> p{text-align: center; padding-bottom: 2%; font-weight: bold;}
.fundRaiser> .formSide>.theform> form{margin-bottom: 5%;}
.fundRaiser> .formSide>.theform> form > p{color: rgb(203, 156, 76); margin-left: 4%;}
.fundRaiser> .formSide>.theform> form > h3{color: white; margin-left: 4%;}
.fundRaiser> .formSide>.theform> form > input{margin-left: 4%; color: white; width: 90%; background: rgb(66, 60, 43); border: none; border-radius: 6px;height: 40px; margin-top: -1em; }
.fundRaiser> .formSide>.theform> form > input::placeholder{color: whitesmoke;}
.fundRaiser> .formSide>.theform> form > button{margin-left: 5%; width: 90%; border-radius: 6px;height: 45px; margin-top: 1em;
	background: rgb(203, 156, 76); color: white; margin-bottom: 7%; }

.fundRaiser> .containing{border-radius: 7px; box-shadow: 2px 5px 15px rgba(0, 0, 0,0.5); position: relative; margin-bottom: 4%; background:  rgb(243, 249,235); width: 30%; margin-right: 5%; display: inline-block; height: 75vh;}
.fundRaiser> .containing> .fundPic{ height: 40%; width: 100%; border-top-right-radius: 7px; border-top-left-radius: 7px}
.fundRaiser> .containing> .fundPic> img{height: 100%; width: inherit; object-fit: cover; border-radius: inherit;}
.fundRaiser> .containing> h3{text-align: center;}
.fundRaiser> .containing> p{text-align: justify; padding-left: 3%; padding-right: 3%;}
.fundRaiser> .containing> .bottom{width: 100%; display: flex; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; position: absolute; bottom: 0%; height: 10%; background: rgb(223, 216, 204);}
.fundRaiser> .containing> .bottom> p{color: rgb(47, 102, 109); width: 50%; font-weight: bold;}
.fundRaiser> .containing> .bottom> p:nth-child(1){ padding-left: 3%;}
.fundRaiser> .containing> .bottom> p:nth-child(2){text-align: right; padding-right: 3%;}

.fundRaiser> .personInfo{position: relative; margin-bottom: 4%; background:  white; width: 25%; margin-right: 5%; display: inline-block; height: 65vh; }
.fundRaiser> .personInfo> .personPic{height: 40%; position: relative; width: 100%; }
.fundRaiser> .personInfo> .personPic> div{border: 5px solid gainsboro; position: absolute; width: 200px; height: 200px; margin-left: 3.3em; border-radius: 50%;}
.fundRaiser> .personInfo> .personPic> div> img{border-radius: inherit; width: 100%; height: 100%;}
.fundRaiser> .personInfo> h3{text-align: center; margin-top: 2em;}
.fundRaiser> .personInfo> p{text-align: center; padding-left: 6%; padding-right: 6%;}
.fundRaiser> .personInfo> .bottom{height: 10%; justify-content: center; width: 100%; display: flex;}
.fundRaiser> .personInfo> .bottom> div{height: 45px; margin-left: 2%; width: 45px; border-radius: 50%}
.fundRaiser> .personInfo> .bottom> div> img{height: 100%; width: 100%; border-radius: inherit;}

.formDiv{height: 100%; display: none; width: 100%; top: 0%; position: absolute;}
.formDiv> form{width: 25%; z-index: 10; position: relative; margin-top: 8%; height: 80%; margin-left: 37.5%;box-shadow: 2px 5px 15px rgba(0, 0, 0,0.5); border-radius: 12px; background: rgb(56, 49, 32);}
.formDiv> form> h3{color: white; text-align: center; margin-top: 3%;}
.formDiv> form> p{color: rgb(203, 156, 76); margin-left: 4%;}
.formDiv> form> input{margin-left: 4%; color: white; width: 90%; background: rgb(66, 60, 43); border: none; border-radius: 6px;height: 40px; margin-top: -1em; }
.formDiv> form> input::placeholder{color: whitesmoke;}
.formDiv> form> button{background: rgb(203, 156, 76); border-radius: 12px; margin-top: 5%; margin-left: 4%; border: none; padding: 3%;}

.formDiv> .clickableDiv{background: rgba(0, 0, 0,0.5); width: 100%; height: 100%; position: absolute}

.vouchersDiv{width: 90%; justify-content: center; margin-left: 5%; margin-bottom:3%; display: block}
.vouchersDiv> .voucherContainer{box-shadow: 2px 5px 15px rgba(0, 0, 0,0.5); background:  rgb(243, 249,235); width: 30%; height: 93vh; margin-left: 2.2%; margin-top: 3%; display: inline-block}
.vouchersDiv> .voucherContainer> .imgDiv{width: 100%; height: 40%}
.vouchersDiv> .voucherContainer> .imgDiv> img{width: 100%; height: 100%;}
.vouchersDiv> .voucherContainer> h3{text-align: center;}
.vouchersDiv> .voucherContainer> p{text-justify: distribute-all-lines; padding: 0% 2% 0% 2%;}
.vouchersDiv> .voucherContainer> button{ margin-left: 4%; background: rgb(203, 156, 76); border: none; border-radius: 10px; padding: 2%;}

.showPop{display: none;}
.coverPhoto{justify-content: center;}

@media only screen and (max-width: 820px) {

	.contentHead{height: 45%; background-size: 100% 100%;}
	
	.fundRaiser{width: 98%;margin-left: 1%;}
	.fundRaiser> .personInfo{width: 31%; height: 40vh; margin-right: 2%}
	.fundRaiser> .personInfo> .personPic{height: 30%;}
	.fundRaiser> .personInfo> .personPic> div{ margin-left: 2.5em;width: 150px; height: 150px;}
	.fundRaiser> .formSide>.theform{width: 100%;  margin-top: -4em;}

	.fundRaiser> .contentSide> .bankDetails{margin-left: 28%; height: 8.5%; margin-top: -2.5em; width: 37%}
	.fundRaiser> .contentSide> .bankDetails> h3{font-size: 90%;}
	.fundRaiser> .contentSide> .bankDetails> p{ margin-left: 2%; font-size: 80%;}

	.formDiv> form{width: 50%; margin-left: 25%; margin-top: 10%;}

	.vouchersDiv> .voucherContainer{width: 48%; margin-left: 1%; height: 60vh;}
	.vouchersDiv> .voucherContainer> .imgDiv{height: 36%;}

	.fundRaiser> .containing{ margin-bottom: 4%; width: 32.4%; margin-right: 1%; height:45vh }
	.fundRaiser> .containing> .fundPic{ height: 35%;}
	
	 
}

@media only screen and (max-width: 768px) {
	.contentHead{height: 60%; background-size: 100% 100%;}

	.fundRaiser{width: 98%;margin-left: 1%;}
	.fundRaiser> .personInfo{width: 31%; height: 45vh; margin-right: 2%}
	.fundRaiser> .personInfo> .personPic{height: 30%;}
	.fundRaiser> .personInfo> .personPic> div{ margin-left: 2em;width: 150px; height: 150px;}
	.fundRaiser> .personInfo> .bottom{height: 8%}
	.fundRaiser> .personInfo> .bottom> div{height: 35px; margin-left: 2%; width: 35px; }
	.fundRaiser> .formSide>.theform{width: 100%;  margin-top: -4em;}
	.fundRaiser> .contentSide> .bankDetails{margin-left: 28%; height: 8.5%; margin-top: -2.5em; width: 37%}
	.fundRaiser> .contentSide> .bankDetails> h3{font-size: 90%;}
	.fundRaiser> .contentSide> .bankDetails> p{ margin-left: 2%; font-size: 80%;}

	.fundRaiser> .containing{ margin-bottom: 4%; width: 32.4%; margin-right: 1%; height:55vh }
	.fundRaiser> .containing> .fundPic{ height: 35%;}
	.vouchersDiv> .voucherContainer{height: 67vh;}

}

@media only screen and (max-width: 600px) {
	.hStand{font-size: 1.5em;}
	.contentHead{height: 65%; background-size: 100% 100%;;}
	.contentHead> .contentTitles{ width: 98%; height: 50%; margin-top: 12em; margin-left: 1%}
	.contentHead> .contentTitles> p{text-align: center;}
	.contentHead> .contentTitles> h2{font-size:2.7em; text-align: center; }
	.contentHead> .contentTitles> h3{text-align: center; margin-top: 0%;}
	

	.fundRaiser{width: 96%; margin-left: 1%; display: block; position: relative;}
	.fundRaiser> .contentSide{width: 100%; position: relative;}
	.fundRaiser> .contentSide> button{background: rgb(203, 156, 76); float: right; color: white; font-size: 1.2em; height: 1.6em; border-radius: 15px; border: none; margin-right: 6%;}
	.fundRaiser> .contentSide> .bankDetails{ margin-left: 5%; width: 90%; position: absolute; margin-top: -3em; float: right; height: 6em;}

	.fundRaiser> .formSide{display: none; height: 90%;width: 95%; top: 0%; margin-left: 2.5%;position: absolute; z-index: 2}
	.fundRaiser> .formSide>.theform{width: 100%; margin-top: 0em;}
	.fundRaiser> .formSide>.theform> .close{position: absolute; display: block; border: 1px solid white; font-size: large; border-radius: 50%; color: white;}

	.fundRaiser> .contentSide> .charityImage{width: 200px; height: 200px}
	.fundRaiser> .contentSide> .charityImage> img{width: inherit; height: inherit; object-fit: cover;}
	.fundRaiser> .contentSide> .welcome{ margin-top: 4em;}
	.fundRaiser> .contentSide> h3{ margin-top: 0%; font-size: 1.3em;}

	.fundRaiser> .containing{ margin-bottom: 4%; width: 90%; margin-left: 5%; display: inline-block; height: 50vh;}
	.fundRaiser> .containing> h3{font-size: 1em;}

	.fundRaiser> .personInfo{width: 95%; height: 55vh; margin-left: 2.5% }
	.fundRaiser> .personInfo> .personPic> div{width: 150px; height: 150px; margin-top: 1%; margin-left: 5.5em}

	.formDiv> form{width: 90%; margin-left: 5%; margin-top: 30%;}
	.vouchersDiv{width: 100%; margin-left: 0%;}
	.vouchersDiv> .voucherContainer{width: 95%; margin-left: 2.5%;}
	.vouchersDiv> .voucherContainer> .imgDiv{height: 30%;}


}