.colorPrimary {
	background-color: #189A69;
}

.colorAccent {
	background-color: #B63D28;
}

.colorGrey {
	color: #E1DFE9;
}

.colorTextAccent {
	color: #B63D28;
}

.colorText {
	color: #212121;
}

.colorLabel {
	color: white;
}

.fontms {
	font-size: 1rem;
}

.fontmm {
	font-size: 1.25rem;
}

.fontml {
	font-size: 1.1rem;
}

.fontls {
	font-size: 2rem;
}

.fontlm {
	font-size: 3rem;
}

.fontll {
	font-size: 6rem;
}

.fontPrimary {
	font-family: 'Open Sans', sans-serif;
}

.fontLabel {
	font-family: 'Roboto Slab', serif;
}

.fontLabel2 {
	font-family: 'Ubuntu', sans-serif;
}

.f300 {
	font-weight: 300;
}

.f400 {
	font-weight: 400;
}

.f500 {
	font-weight: 500;
}

.f600 {
	font-weight: 600;
}

html,
body {
	margin: 0px;
	padding: 0px;
	scroll-behavior: smooth;
}

a {
	text-decoration: none;
}

#mySidebar {
	position: fixed;
	z-index: 2;
	font-family: 'Open Sans', sans-serif;
	display: none;
	height: 100vh;
	width: 100vw;
	background-color: white;
}

.animate__animated.animate__slideInDown {
	--animate-duration: 0.5s;
}

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

	/* Mobile Version*/
	.contactBar {
		border-top: 5px solid #B63D28;
		border-bottom: 1px solid #E1DFE9;
		padding: 8px;
		text-align: center;
		font-size: 14px;
	}

	.contactBar>span>i {
		margin-right: 3px;
	}

	.CBmobile {
		margin-right: 10px;
	}

	.donationimg>img {
		width: 100%;
	}

	.logoBar {
		padding: 12px;
		text-align: center !important;
		border-bottom: 4px solid #B63D28;
		background-color: white;
	}

	.header {
		align-items: center;
	}

	.logo {
		height: 50px;
		float: left;
	}

	.logoText {
		float: left;
		padding: 10px 0px 5px 8px;
		font-size: 24px;
		color: #B63D28;
	}

	.menuIcon {
		float: right;
		padding: 8px 8px 5px 0px;
		font-size: 28px;
		color: #B63D28;
	}

	.mySlides {
		display: none;
		height: 300px;
	}

	img {
		vertical-align: middle;
	}

	/* Slideshow container */
	.slideshow-container {
		position: relative;
		margin: 80px auto auto auto;
		height: 300px;
	}

	.puja-container {
		position: relative;
		margin: 80px auto auto auto;
		height: 250px;
		width: 100%;
		background-image: url(../img/puja-bg.jpg);
		background-size: cover;
		background-position: center;
	}

	.puja-container-transparent {
		position: absolute;
		height: 250px;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
	}

	.puja-container-transparent>h1 {
		font-size: 45px;
		text-align: center;
		margin-top: 40px;
		letter-spacing: 1px;
	}

	/* Caption text */
	.text {
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		/*color: #f2f2f2;*/
		font-size: 15px;
		padding: 30px;
		position: absolute;
		top: 0px;
		width: 100%;
		font-family: 'Akaya Telivigala', cursive;
	}

	.text-container {
		position: absolute;
		bottom: 40px;
		max-width: 80%;
	}

	.textDes {
		padding-top: 10px;
	}

	/* Fading animation */
	.fadgdge {
		-webkit-animation-name: fade;
		-webkit-animation-duration: 1.5s;
		animation-name: fade;
		animation-duration: 1.5s;
	}

	@-webkit-keyframes fade {
		from {
			transform: scale(1, 1);
		}

		to {
			transform: scale(1.5, 1.5);
		}
	}

	@keyframes fade {
		from {
			transform: scale(1, 1);
		}

		to {
			transform: scale(1.5, 1.5);
		}
	}

	.about-section {
		padding: 40px 30px 0px 30px;
	}

	.gaushalaimg {
		margin-top: 40px;
	}

	.gaushalaimg>img {
		width: 100%;
	}

	.adoptimg {
		margin-top: 20px;
	}

	.adoptimg>img {
		width: 100%;
	}

	.mantra-container {
		background-image: url(https://i.pinimg.com/originals/fe/15/bd/fe15bd84514da9fe56f387fbdd3f8994.jpg);
		background-size: 100% 100%;
		background-position: center;
		padding: 10px;
	}

	.mantra-container2 {
		background-image: url(https://i.pinimg.com/originals/fe/15/bd/fe15bd84514da9fe56f387fbdd3f8994.jpg);
		background-size: 100% 100%;
		background-position: center;
		padding: 10px;
	}

	.mantra {
		font-size: 16px;
		padding: 40px 30px;
		color: rgb(49, 12, 12);
	}

	.mantra-eng {
		font-size: 16px;
		padding: 40px 30px;
		color: rgb(49, 12, 12);
		font-family: 'Courgette', cursive;
	}

	.Gaushala {
		padding: 50px 30px 0px 30px;
	}

	td {
		width: 65%;
		vertical-align: middle;
	}

	.w3-quarter {
		margin: 12px 0px;
		height: 610px;
	}

	.s-text {
		padding: 0px 20px;
		margin-top: 0px;
		line-height: 25px;
	}

	.name {
		margin: 16px 0px 0px 0px;
	}

	.donation-form {
		background-image: url(https://media.istockphoto.com/photos/a-person-holding-red-heart-in-hands-donate-and-family-insurance-on-picture-id1164870804?k=6&m=1164870804&s=612x612&w=0&h=8U5kZriiS40GqCYitb0wV-LJFuKcY67HeY_P48ner64=);
		background-position: center;
		background-size: cover;
	}

	.donation-form>.transparent>input {
		height: 50px;
		font-size: 18px;
		padding-left: 20px;
		background-color: transparent;
		border: 1px solid white;
		color: white
	}

	.transparent {
		padding: 40px 20px;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.75);
		color: white
	}

	.donation-form>.transparent>button {
		height: 50px;
		font-size: 20px;
		color: white;
		letter-spacing: 1px;
		background-color: transparent;
		border: 1px solid white;
	}

	.Gaushala-products {
		padding: 50px 30px 0px 30px;
	}

	body>div:nth-child(7)>div.w3-row.fontPrimary>.w3-quarter {
		margin: 12px 0px;
		max-height: 560px;
	}

	body>div:nth-child(7)>div.w3-row.fontPrimary>.w3-quarter>.s-text {
		padding: 10px 20px;
		line-height: 25px;
	}

	.PHSection {
		margin: 50px 0px 20px 0px;
	}

	.puja-section {
		height: 220px;
	}

	.hawan-section {
		height: 220px;
	}

	.transparent-ph {
		background-color: rgba(0, 0, 0, 0.6);
		height: 220px;
		width: 100%;
		position: relative;
	}

	.transparent-hh {
		background-color: rgba(0, 0, 0, 0.2);
		height: 220px;
		width: 100%;
		position: relative;
	}

	.transparent-ph>.textp {
		position: absolute;
		bottom: 30px;
		padding: 30px 30px 0px 30px;
		font-size: 20px;
		max-width: 85%;
	}

	.transparent-hh>.textp {
		position: absolute;
		bottom: 30px;
		padding: 30px 30px 0px 30px;
		font-size: 20px;
		max-width: 85%;
	}

	.footer {
		border-top: 4px solid #B63D28;
	}

	.footer-items {
		padding: 10px 40px;
	}

	.product-text {
		margin-top: 20px;
		height: 180px;
	}

}

@media screen and (min-width: 900px) {

	/* Desktop Version */
	.contactBar {
		border-top: 5px solid #B63D28;
		border-bottom: 1px solid #E1DFE9;
		padding: 8px;
		text-align: center;
		font-size: 14px;
	}

	.contactBar>span>i {
		margin-right: 3px;
	}

	.CBmobile {
		margin-right: 10px;
	}

	.logoBar {
		padding: 12px 95px;
		text-align: center !important;
		border-bottom: 4px solid #B63D28;
		background-color: white;
	}

	.header {
		align-items: center;
	}

	.logo {
		height: 50px;
		float: left;
	}

	.logoText {
		float: left;
		padding: 10px 0px 5px 8px;
		font-size: 24px;
		color: #B63D28;
	}

	.menuIcon {
		float: right;
		padding: 8px 8px 5px 0px;
		font-size: 28px;
		color: #B63D28;
	}

	img {
		vertical-align: middle;
	}

	/* Slideshow container */
	.slideshow-container {
		position: relative;
		margin: 80px 90px 0px 90px;
		height: 400px;
	}

	/* Caption text */
	.text {
		height: 400px;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		font-size: 15px;
		padding: 0px 70px 0px 70px;
		position: absolute;
		top: 0px;
		width: 100%;
	}

	.text-container {
		position: absolute;
		bottom: 120px;
		max-width: 50%;
	}

	.textDes {
		padding-top: 10px;
	}

	/* Fading animation */
	.fadgdge {
		-webkit-animation-name: fade;
		-webkit-animation-duration: 1.5s;
		animation-name: fade;
		animation-duration: 1.5s;
	}

	@-webkit-keyframes fade {
		from {
			transform: scale(1, 1);
		}

		to {
			transform: scale(1.5, 1.5);
		}
	}

	@keyframes fade {
		from {
			transform: scale(1, 1);
		}

		to {
			transform: scale(1.5, 1.5);
		}
	}

	.about-section {
		padding: 70px 120px 0px 120px;
	}

	.objectivehead {
		margin: 50px 30px;
	}

	.objective {
		margin: 0px 40px;
		max-width: 70%;
	}

	.objective>.w3-card {
		box-shadow: none;
		border: 1px solid #f2f2f2;
		margin-bottom: 30px;
	}

	.gaushalaimg {
		margin-top: 70px;
		text-align: center;
	}

	.gaushalaimg>img {
		width: 50%;
	}

	.donationimg>img {
		width: 40%;
	}

	.adoptimg {
		margin: 50px 0px;
		width: 50%;
	}

	.adopt {
		width: 40%;
		margin: 20px 0px;
	}

	.adoptimg>img {
		width: 80%;
	}

	.mantra-bg {
		background-image: url(https://i.pinimg.com/originals/fe/15/bd/fe15bd84514da9fe56f387fbdd3f8994.jpg);
		background-size: 100% 100%;
		background-position: center;
		width: 70%;
		margin-left: 15%;
		padding: 100px;
		color: rgb(49, 12, 12);
	}

	.Gaushala {
		padding: 70px 120px 0px 120px;
	}

	td {
		width: 65%;
		vertical-align: middle;
	}

	table {
		max-width: 70%;
	}

	.w3-quarter {
		margin: 12px 1%;
		width: 23%;
		min-height: 600px;
	}

	.s-text {
		padding: 0px 20px;
		margin-top: 0px;
		line-height: 25px;
	}

	.name {
		margin: 16px 0px 0px 0px;
		font-size: 22px;
	}

	.donation-form {
		background-image: url(../img/bg-donate.jpg);
		background-position: center;
		background-size: cover;
		max-width: 50%;
		margin-left: 25%;
		margin-top: 50px;
		color: white;
	}

	.donation-form>.transparent>input {
		height: 50px;
		font-size: 18px;
		padding-left: 20px;
		background-color: transparent;
		border: 1px solid white;
		color: white;
	}

	.transparent {
		padding: 40px 20px;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.75);
		color: white;
	}

	.donation-form>.transparent>button {
		height: 50px;
		font-size: 20px;
		color: white;
		letter-spacing: 1px;
		background-color: transparent;
		border: 1px solid white;
	}

	.Gaushala-products {
		padding: 50px 100px 0px 100px;
	}

	body>div:nth-child(7)>div.w3-row.fontPrimary>.w3-quarter {
		margin: 12px 0px;
		max-height: 560px;
	}

	body>div:nth-child(7)>div.w3-row.fontPrimary>.w3-quarter>.s-text {
		padding: 10px 20px;
		line-height: 25px;
	}

	.PHSection {
		margin: 50px 0px 20px 0px;
	}

	.puja-section {
		height: 300px;
	}

	.hawan-section {
		height: 300px;
	}

	.transparent-ph {
		background-color: rgba(0, 0, 0, 0.6);
		height: 300px;
		width: 100%;
		position: relative;
	}

	.transparent-hh {
		background-color: rgba(0, 0, 0, 0.2);
		height: 300px;
		width: 100%;
		position: relative;
	}

	.transparent-ph>.textp {
		position: absolute;
		bottom: 50px;
		padding: 30px 30px 0px 50px;
		font-size: 20px;
		max-width: 70%;
	}

	.transparent-hh>.textp {
		position: absolute;
		bottom: 50px;
		padding: 30px 30px 0px 50px;
		font-size: 20px;
		max-width: 50%;
	}

	.footer {
		border-top: 4px solid #B63D28;
	}

	.footer-items {
		padding: 10px 40px;
	}

	.mySlides {
		display: none;
		height: 400px;
	}

	.product-text {
		margin-top: 20px;
		height: 230px;
	}

	.puja-container {
		position: relative;
		margin: 80px auto auto auto;
		height: 300px;
		width: 100%;
		background-image: url(../img/puja-bg.jpg);
		background-size: cover;
		background-position: center;
	}

	.puja-container-transparent {
		position: absolute;
		height: 300px;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
	}

	.puja-container-transparent>h1 {
		font-size: 60px;
		text-align: center;
		margin-top: 60px;
		letter-spacing: 2px;
	}


}