:root {
	--main-color: #2e768f;
	--linear-color: linear-gradient(135deg, rgba(156,66,75,0.1) 0%,rgba(46,118,143,0.6) 30%,rgba(46,118,143,0.8) 50%,rgba(156,66,75,0.8) 60%,rgba(156,66,75,0.6) 80%,rgba(46,118,156,0.1) 100%);;
}

*{
	margin: 0;
	padding:0;
	/*font-family: 'Poppins', sans-serif;*/
	font-family: "Comfortaa", sans-serif;
	box-sizing: border-box;
}
html{
	scroll-behavior: smooth;
	font-size: 62.5%;
}

body{
	/*background-color: #073097;*/
	background-size: cover;
	background-attachment: fixed;
	background: var(--main-color);
}


.container{
	width: 100%;
	/*max-height: 25vh;*/
	background: #e5d6c7;
	background-size: cover;
	background-attachment: fixed;
	/*background: linear-gradient(rgba(0, 0, 0,0),rgba(0, 0, 0,0)),url(images/creme.jpg);*/
	/*background: linear-gradient(rgba(0, 0, 0,0.0),rgba(0, 0, 0,0.0)),url(images/white.jpg);*/
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	filter: drop-shadow(0px 1px 10px #2f2f2f);	
	position: sticky;
	top: 0;
	z-index: 100;

}



.navbar{
	width:95%;
	margin: auto;
	padding: 1.8rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap:wrap;
	z-index: 50;
}

.navbar .navleft{
	display: flex;
	justify-content: space-around;
}

.navbar .logo{

	width:	12rem;
	height: 10rem;
	cursor: pointer;
	transition: 0.5s;
	color: #646548;
	
}

.logo:hover{
	transform: scale(105%);
	filter: brightness(300%);
	filter: blur(50);
	filter: drop-shadow(10px 10px 7px #3f3f3f);	
}

.navbar .textlogo{

	width:	20rem;
	cursor: pointer;
	transition: 0.5s;
	color: #2f2f2f;
}

.textlogo:hover{
	transform: scale(105%);
	filter: brightness(300%);
	filter: blur(50);
	filter: drop-shadow(2px 2px 5px #aaa);	
}

.navbar ul li{
	list-style: none;
	display: inline-block;
	margin: 0 1.5rem;
	position: relative;

}

.navbar ul li a{
	text-decoration: none;
	color: #3f3f3f;
	text-transform: uppercase;
	font-size: 1.5rem;
	transition: 0.3s ease;
}

.navbar ul li a:hover{
	/*font-size: 1.6rem;*/
	font-weight: bold;
}

.navbar ul li::after{
	content: '';
	height: 3px;
	width: 0;
	background: var(--main-color);
	position: absolute;
	left: 0;
	bottom: -8px;
	transition: 0.5s;


}

.navbar ul li:hover::after{
	width: 100%;
}

.navbar i{
  color: #2f2f2f;
  font-size: 2.2rem;
  cursor: pointer;
  display: none;
  z-index: 4;
}

input[type="checkbox"]{
  display: none;
}

.maroonbg{
	background:var(--main-color);
}


.content{
	width: 100%;
	margin: 7rem auto;
	text-align: center;

}

.content .title h2{
	margin: 3rem auto;
	font-size: 2.6rem;
	color: #eeca6b;
	text-transform: uppercase;
	
	/*filter: drop-shadow(2px 2px 1px #aaa);*/

}

.content .title p{
	margin: 3rem auto;
	font-size: 2.2rem;
	color: #ddd;
	/*text-align: justify;*/
	padding: 0.7rem;
}


.content .description{
	width: 100%;
	background-color: #ddd;
	background-size: cover;
	background-attachment: fixed;
	/*background: linear-gradient(rgba(0, 0, 0,0),rgba(0, 0, 0,0)),url(images/creme.jpg);*/
	margin: 7rem auto;
	padding: 3rem;
	color: #2f2f2f;
	font-size: 2rem;

}


.admcontainer{
	width: 100%;
	margin: 4rem auto;
	padding: 1rem;
	background: #e5d6c7;
}

.admcontent{
	margin: 4rem auto;
	text-align: left;
	max-width: 800px;
}

.admcontent h2{
	margin: 1rem auto;
	font-size: 4rem;
	font-family: "UnifrakturCook", cursive;
	text-align: center;
}

.admcontent h3{
	font-size: 2rem;
	color: var(--main-color);
	margin-top: 5rem;
}

.admcontent p{
	text-align: justify;
	font-size: 1.8rem;
	color: #1f1f1f;
	margin: 1rem;
	line-height: 2.4rem;
	word-spacing: 1rem;
}

#resultbox{
	/*background: #06236F;*/
	background: transparent;
}

#resultbox h2{
	color: #EDC635;

}		

.resultpic{
	width: 100%;
	border-radius: 10px;
}


hr{
	margin: 2rem auto;
}



.bluetext{
	margin: 5rem;
	color: var(--main-color);
	font-size: 3rem;
	word-spacing: 0.3rem;
	

}

.prayer_container img{
	width: 100%;
}


.description p{
	font-family: "Open Sans", sans-serif;
 	font-optical-sizing: auto;
	margin: 2rem 0;
	color: #1f1f1f;
	font-size: 2.2rem;
	word-spacing: 0.3rem;
	text-align: justify;
	line-height: 4rem;
	letter-spacing: 0.05rem;
	padding: auto 0.3rem;
}

table{
	width: 100%;
	color: #fff;
	font-size: 1.7rem;
}
td, th{
	padding: 2rem 0;
}
th{
	text-transform: uppercase;
	background:#9c424b;
}
tr{
	padding: 2rem auto;

}

.tablebox2 td{
	color: #fff;
}



/*---------gallery code---------*/

.gallerycontainer{
	width: 100%;
	margin: 0rem auto;
	padding:3rem;
	background:var(--main-color);
}

.gallerycontainer .gallerytitle{
	width: 90%;
	margin: 2rem auto;
	color: #fff;
	text-align: center;
}

.gallerycontainer h2{
	font-family: "UnifrakturCook", cursive;
	font-size: 5rem;
	margin: 2rem auto;
	font-weight: normal;
	text-shadow: 2px 5px 3px #1f1f1f;
}

.mobileview{
	display: none;
}

.desktopview{
	display: block;
}

.gallerycontainer .gallerytitle p{
	font-family: "Great Vibes", cursive;
	font-size: 3rem;
	text-shadow: 3px 5px 2px #2f2f2f;
	word-spacing: 1rem;
}
.gallerybox{
	margin: 0rem auto;
	width: 100%;
	/*background: #eee;*/
	background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(images/hof4.jpeg);
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
}
.gallerycontent{
	width: 100%;
	margin: 1rem auto;
	display: flex;
	justify-content: space-around;
	grid-gap: 0.5rem;
	text-align: center;
	align-items: center;
	flex-wrap: wrap;
	/*padding-top: 1rem;
	padding-bottom: 1rem;*/
	/*background:#1F1F1F;*/
}
.gallerycard{
	width: 33rem;
	height: 22rem;
	position: relative;
	text-align: center;
	/*border:4px solid #fff;
	border-radius: 1rem;*/
	/*margin: 1rem auto;*/
	cursor: pointer;
	/*box-shadow: 8px 8px 3px #ddd;*/

	transition: 0.5s ease;
}



.gallerycard:hover{
	/*border-radius: 50%;
	border:6px solid var(--main-color);*/
	overflow: hidden;
	/*box-shadow: 6px 6px 3px #3f3f3f;*/
}
.gallerycard:hover img{
	/*border-radius: 50%;*/
	transform: scale(90%);
	/*filter: saturate(2);*/
	/*filter: brightness(50%);*/
	
}

@keyframes scrolleffect{
	from {
		opacity: 0;
		transform: translateY(10rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


.gallerycard:hover p{
	background:rgba(46,118,143,0.9);
	/*text-shadow: rgba(0,0,0,0.7);*/
	transform: translate(-50%,-190%);
}

.gallerycard img{
	width: 100%;
	height: 100%;
	transition: 0.5s ease;
	/*border-radius: 1rem;*/
}
.gallerycard p{
	transition: 0.5s ease;
	font-size: 1.7rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	background: rgba(46,118,143,0.6);
	width: 100%;
	padding: 1rem;
}
/*gallery code ends here*/


/*------------ contact ------*/
.contactbox{
	margin: 2rem auto;
	width: 100%;
	background:#eee;

}

.contactcontainer{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;

}

.contactdetails{
	flex-basis: 40%;
	margin: 2rem auto;
	/*padding: 1rem;*/
	text-align: center;
}

.contactdetails i{
	font-size: 2.7rem;
	margin: 1rem auto;
	color:var(--main-color);
}

.contactdetails h2{
	margin: 1rem auto;
	color:#2f2f2f;
	font-size: 1.7rem;
	text-transform: uppercase;
}

.contactdetails p{
	
	margin-bottom: 3rem;
	font-size: 1.5rem;
}

.contactdetails a{
	text-decoration: none;
	cursor: pointer;
	color: #000;
}
.contactdetails a:hover{
	color: var(--main-color);
}

.mapbox{
	flex-basis: 50%;
	width: 100%;
	height: 100%;
}
.srsmap{
	
	width: 100%;
	
}

.srsmap iframe{
	width: 100%;
	

}

.facultycontainer{
	width: 100%;
	/*background: ;*/

	
}
.facultycontainer a{
	text-decoration: none;
}

.facultybox{
	width: 100%;
	margin: 5rem auto;
	padding: 5rem auto;


	
}

.facultybox h1{
	margin-top: 4rem;
	text-align: center;
	font-size: 2rem;
	color: #fff;
	text-transform: uppercase;
}

.facultybox hr{
	color: #1f1f1f;
}

.facultydetails{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	align-items: center;
	text-align: center;
	background: linear-gradient(rgba(46,118,143,0.9),rgba(0,0,0,0.8)),url(images/hof2.jpeg);
	/*background-size: cover;*/
	background-attachment: fixed;
}

.facultycard{
	margin: 4rem auto;
	width: 28rem;
	cursor: pointer;
	/*background:rgba(46,118,143,0.2);*/
	/*animation: scrolleffect ease-in-out both;
	animation-timeline: view();
	animation-range: entry 50% cover 50%;*/
}

.facultycard img{
	margin: 2rem auto;
	width: 27rem;
	height: 30rem;
	border-radius: 10px;
	box-shadow: 0px 9px 20px #eee;
	transition: 0.3s ease;
}
.facultycard img:hover{
	border:5px solid var(--main-color);
	filter: grayscale(100%);
}

.facultycard h3{
	font-size: 1.7rem;
	color: #eeca6b;
	transition: 0.3s ease;
}
.facultycard h3:hover{
	color: #fff;

}

.facultycard p{
	text-transform: uppercase;
	font-size: 1.5rem;
	color: #ddd;
	margin: 1rem auto;

}

.downloadbox{
	margin: 4rem auto;
	width: 95%;
	min-height: 95vh;
	background:#eee;
	display: flex;
	padding: 2rem;
	
	

}

.downloadcontent{
	
	width: 100%;
	padding: 1rem;
}

.downloadcontent p{
	margin: 2rem;
	font-size: 1.4rem;

}

/*updates*/

.newscontainer{
	width: 100%;
	background:#ddd;
	margin: 3rem auto;
}
.newscontent{
	width: 100%;
	margin: 6rem auto;

}
.newsbox{
	/*display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;*/
	width: 100%;
	background: var(--main-color);
	/*box-shadow: -1px -1px 8px #bbb;*/
	margin: 6rem auto;
	overflow: auto;
	/*padding: 1rem;*/
}
.leftcolnews{
	text-align: center;
	max-width: 60rem;
	float: left;
	margin-right: 1.6rem;
	color: #fff;
}

.leftcolnews img{
	width: 100%;
	/*margin:0.5rem auto;*/
}
.rightcolnews{
	/*flex: 1;*/
	text-align: center;
	padding: 1.5rem;
}
.rightcolnews h2{
	text-align: center;
	font-size: 2rem;
	color: #eeca6b;
	margin-bottom: 2rem;
}
.rightcolnews p{
	margin: 1rem auto;
	font-size: 1.6rem;
	color: #eee;
	line-height: 2.5rem;
	word-spacing: 1rem;
	text-align: justify;
}

.rightcolnews a{
	text-decoration: none;
	color: #eeca6b;
	font-weight: bold;
}

.rightcolnews a:hover{
	color: #000;
}

.newsdate{
	display: block;
	text-align: right;
}
.rightcolnews i{
	color:#bbb;
	font-size: 1.5rem;
}

.rightcolnews span{
	font-size: 1.5rem;
	color: #bbb;
	
}
.rightcolnews b{
	text-transform: uppercase;
	color: #000;
	font-weight: 700;
}

.historycontainer{
	margin: 1rem auto;
	width: 100%;
	background:#ddd;
}

.historybox{
	width: 100%;
	margin: 1rem auto;
	
}
.historybox img{
	width: 100%;
	margin: 1rem auto;
	cursor: pointer;
	transition: 0.3s ease;
}
.historybox img:hover{
	filter: grayscale(1);
}
.historybox b{
	color: #9c424b;
}
.historybox h2{
	font-size: 2rem;
	padding: 1rem;
	background:rgba(46,118,143,1);
	color: #fff;
	text-align: center;
}
.historybox p{
	padding: 4rem;
	text-align: justify;
	font-size: 1.8rem;
	word-spacing: 1rem;
	line-height: 2.3rem;
	color: #2f2f2f;
}

.historybox i{
	display: block;
	margin: 1rem auto;
	font-size: 4rem;
	color: var(--main-color);
	text-align: center;
}
.strobert{
	margin: 0.1rem auto;
	width: 25rem;
}
.strobert img{
	border-radius: 50%;
	height: 28rem;
}

.copyright{
	background:var(--main-color);
	text-align: center;
	padding: 2rem;
}

.footer p{
	font-size: 1.3rem;
	line-height: 2rem;
	color: #ddd;

}

.footer hr{
	width: 90%;
	margin: 0 auto;
}

/* ---------------------------------------------------------*/
/* ----------------------tab-----------------------------------*/
/* ---------------media queries-----------------*/

@media screen and (max-width: 1150px){
	.html{
			font-size: 50%;
		}

	.navbar{
			padding-top: 1rem;
					
	}

	.navbar .logo{

			width:	11rem;
			height: 9rem;
			
			
		}

		.navbar .textlogo{

			width:	18rem;
		}

		.navbar ul li{
			margin: 0 1.4rem;
		}

		.navbar ul li a{
			
			font-size: 1.2rem;
			
		}

		.navbar ul li a:hover{
			/*font-size: 1.4rem;*/
		}


		.bluetext{
			font-size: 2.5rem;
		}
		
}




/* ---------------------------------------------------------*/
/* ----------------------tab-----------------------------------*/
/* ---------------media queries-----------------*/

@media screen and (max-width: 1080px){
	.html{
			font-size: 50%;
		}

	
	.navbar{
			padding-top: 1rem;
					
	}
	

	.navbar .logo{

			width:	10rem;
			height: 8rem;
			
			
		}

		.navbar .textlogo{

			width:	15rem;
		}

		.navbar ul li{
			margin: 0 1rem;
		}

		.navbar ul li a{
			
			font-size: 1.2rem;
			
		}

		.navbar ul li a:hover{
			/*font-size: 1.25rem;*/
		}


		.bluetext{
			font-size: 2.3rem;
		}

		.description p{
			
			font-size: 2rem;
			
		}
}

/* ---------------------------------------------------------*/
/* ----------------------tab-----------------------------------*/
/* ---------------media queries-----------------*/

@media screen and (max-width: 980px){
	.html{
			font-size: 45%;
		}

	.navbar{
			padding-top: 1rem;
					
	}

	

	.navbar .logo{

			width:	10rem;
			height: 8rem;
			
			
		}

		.navbar .textlogo{

			width:	15rem;
		}

		.navbar i{
		  display: block;
		}

		#click:checked ~ .menu-btn i:before{
		    content: "\f00d";
		  }


		/*.navbar ul{
		    position: absolute;
		    top: 11.3rem;
		    padding-top: 1rem;
		    left: -100%;
		    background: var(--main-color);
		    max-height: calc(100vh - 11.3rem);

		    width: 100%;
		    text-align: center;
		    display: block;
		    transition: all 0.3s ease;
		    overflow-y: auto;
		  }*/

		  	.navbar ul{
		  		position: absolute;
			    top: 11.3rem;
			    padding-top: 1rem;
			    left: 0;
			    background: var(--main-color);
			    /*left: -100%;*/
			    overflow-y: hidden;
			    overflow: hidden;
			    max-height: 0;
			   /*max-height: calc(100vh - 10rem);*/
			    width: 100%;
			    text-align: center;
			    display: block;
			    
			    transition: all 0.5s ease;
			  }

			#click:checked ~ ul{
			    /*left: 0;*/
			    max-height: calc(100vh - 11.3rem);
			    overflow-y: auto;
			    border-bottom: 3px solid #2f2f2f;
			  }		
		/*#click:checked ~ ul{
		    left: 0;
		  }	*/	

		.navbar ul li{
		    width: 100%;
		    margin: 1.3rem 0;

		  }
		  .navbar ul li a{
		    width: 100%;
		    margin-left: 0px;
		    padding: 1rem 0;
		    display: block;
		    font-size: 1.6rem;
		    color: #eee;
		    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		  }
		  /*#click:checked ~ ul li a{
		    margin-left: 0px;
		  }*/


		.navbar ul li:hover::after{

			width: 0%;
		}

		.navbar ul li a:hover{
			background:#2f2f2f;
			font-weight: bold;
			color: #eee;

		}



		.bluetext{
			font-size: 2.1rem;
		}

		.description p{
			
			font-size: 1.8rem;
			
		}
		
}
/* ---------------------------------------------------------*/
/* ----------------------tab-----------------------------------*/
/* ---------------media queries-----------------*/

@media screen and (max-width: 850px){
		.leftcolnews{
			max-width: 100%;
			margin-right: 0rem;
			margin-bottom: 2rem;
		}

		.gallerycontainer h2{
			font-size: 3.5rem;
		}
		.gallerytitle p{
			font-size: 2.1rem;
		}
		.historybox p{
			font-size: 1.6rem;
			padding: 2rem;
		}
		.historybox h2{
			font-size: 1.8rem;
		}

		table{
			font-size: 1.5rem;
		}
		
}


/* ---------------------------------------------------------*/
/* ----------------------tab-----------------------------------*/
/* ---------------media queries-----------------*/

@media screen and (max-width: 600px){
	.html{
			font-size: 45%;
		}

	.navbar{
			padding-top: 1rem;
					
	}

	.navbar .logo{

			width:	9.5rem;
			height: 7.5rem;
			
			
		}

		.navbar .textlogo{

			width:	15rem;
		}

		.navbar i{
		  display: block;
		  z-index: 5000;
		}

		.menu-btn{
			z-index: 10000;
		}

		#click:checked ~ .menu-btn i:before{
		    content: "\f00d";
		  }

		.navbar ul{
		    top: 10.7rem;
		    max-height: 0;
		  }

		#click:checked ~ ul{
		    /*left: 0;*/
		    max-height: calc(100vh - 10.7rem);
		  }		

		.navbar ul li{
		    width: 100%;
		    margin: 1.3rem 0;

		  }
		  .navbar ul li a{
		    width: 100%;
		    margin-left: 0px;
		    padding: 1rem 0;
		    display: block;
		    font-size: 1.6rem;

		    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		  }
		  #click:checked ~ ul li a{
		    margin-left: 0px;
		  }


		.navbar ul li:hover::after{

			width: 0%;
		}

		.navbar ul li a:hover{
			background:#2f2f2f;
			font-weight: bold;
			color: #eee;

		}

		.content .title h2{
			
			font-size: 2rem;
			

		}

		.content .title p{
			
			font-size: 1.7rem;
			
		}


		.bluetext{
			font-size: 2rem;
		}

		.description p{
			
			font-size: 1.7rem;
			
		}
		.gallerytitle p{
			font-size: 1.8rem;
		}

		table{
			font-size: 1.4rem;
		}
}

/*      --------------------------------*/

/* -----------------------mobile----------------------------------*/
/* ---------------media queries-----------------*/

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

		.html{
			font-size: 35%;
		}

		
		.navbar{
			padding-top: 0.8rem;
			align-items: center;
			justify-content: space-around;			
		}

		.navleft{
			align-items: center;
		}
		.navbar .logo{
			width:	8.5rem;
			height: 7rem;
		}

		.navbar .textlogo{
			width:	14rem;
		}

		.navbar i{
		  display: block;
		  z-index: 1000;
		}

		#click:checked ~ .menu-btn i:before{
		    content: "\f00d";
		  }

		.navbar ul{
		    top: 10rem;
		    padding-top: 1rem;
		    left: 0;
		    /*left: -100%;*/
		    overflow-y: hidden;
		    overflow: hidden;
		    max-height: 0;
		   /*max-height: calc(100vh - 10rem);*/
		    width: 100%;
		    text-align: center;
		    display: block;
		    
		    transition: all 0.5s ease;
		  }

		#click:checked ~ ul{
		    /*left: 0;*/
		    max-height: calc(100vh - 10rem);
		    overflow-y: auto;
		  }		

		.navbar ul li{

		    width: 100%;
		    margin: 1.3rem 0;

		  }
		  .navbar ul li a{
		    width: 100%;
		    /*margin-left: -100%;*/
		    margin-left: 0px;
		    padding: 1rem 0;
		    display: block;
		    font-size: 1.6rem;

		    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		  }
		  #click:checked ~ ul li a{
		    margin-left: 0px;
		  }


		.navbar ul li:hover::after{

			width: 0%;
		}

		.navbar ul li a:hover{
			background:#2f2f2f;
			font-weight: bold;
			color: #eee;

		}

		.content{
			margin: 4rem auto;
			
		}

		.content .title h2{
			margin: 2.2rem auto;
			font-size: 1.5rem;
		}

		.content .title p{
			margin: 2rem auto;
			font-size: 1.3rem;
		}
		.admcontent h2{
			font-size: 3.5rem;
		}

		.admcontent h3{
			text-align: center;
			font-size: 1.8rem;
			background: var(--main-color);
			padding: 1rem;
			color: #eeca6b;
		}
		
		.admcontent p{
			font-size: 1.6rem;
		}
				
		.content .description{
			width: 100%;
			margin: 3rem auto;
			padding: 1.8rem;
			font-size: 1.5rem;
		}

		.bluetext{
			margin: 3rem;
			font-size: 1.5rem;
			word-spacing: 0.04rem;
			

		}
		
		
		
		.description p{
			margin: 1.3rem 0;
			font-size: 1.35rem;
			word-spacing: 0.03rem;
			line-height: 2.7rem;

		}
		.gallerytitle p{
			font-size: 1.7rem;
		}


		.mobileview{
			display: block;
			font-size: 1.7rem;
		}

		.desktopview{
			display: none;
		}

		.contactdetails{
			flex-basis: 100%;
		}

		.mapbox{
			flex-basis: 100%;
			width: 100%;
			height: 100%;
		}

		.srsmap iframe{
			height: 400px;
		}
		.leftcolnews{
			margin-right: 0rem;
		}

		.rightcolnews p{
			font-size: 1.4rem;
		}

		.rightcolnews h2{
			font-size: 1.5rem;
		}

		.historybox p{
			font-size: 1.5rem;
			padding: 1rem;
		}
		.historybox h2{
			font-size: 1.7rem;
		}

		table{
			font-size: 1.3rem;
		}
		th{
			text-transform: none;
		}
}