@charset "utf-8";
/* CSS Document */


body {
  margin: 0 auto;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  font-size: 16px;
  font-family: 'Oswald', sans-serif;
  
 
}

.dark-mode {
  background-color: black;
  color: white;
}



.uppercase {
	
	text-transform: uppercase;
	 
}


.overflow {
	overflow: hidden;
}

.primary {
	
	color: #000;
}

.secondary {
	color: #265989;
}




.burgundy {
	
	color: #4F1818;

}

.teal {
	color: #003334;
}

.wht{
	
	color: ghostwhite;

}

.ylw {
	color: #ebea9b;
}


.opac1 {
filter: opacity(10%);
}

.opac5 {
filter: opacity(50%);
}


.opac8 {
filter: opacity(80%);
}

.txtcenter {
	text-align: center;
}


a {
  color: #265989;
  text-decoration: none;
  background-color: transparent;
}

a:active {
    opacity: .5;
  
}

a:visited {
    color: #3492ea;
	text-decoration: none;
  	background-color: transparent;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1px;
  padding: 0px;
}

p {
  margin-top: 0;

}

.container {
	position: relative;
	width: 100%;
	min-height: 100vh;
	padding-left: 5%;
	padding-right: 5%;
	background-image:
   
    url("../img/eleehd.jpg");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	box-sizing: border-box;
	overflow: hidden;
	
	
	
}

.containerpr {
	position: relative;
	width: 100%;
	min-height: 100vh;
	padding-left: 5%;
	padding-right: 5%;
	background-image:
    linear-gradient(to bottom, rgba(200, 180, 180, 0.15), rgba(52, 146, 234, 0.62)),
    url("../img/clouds.jpg");
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	box-sizing: border-box;
	overflow: hidden;
	
	
	
}



.navbar {
	max-width: 1200px;
	height: 15vh;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	
	
	
}

.navbar  h3 {
	font-size: 40px;
	text-align: center;
	padding: 50px;
	font-family: 'MonteCarlo', cursive;
	font-weight: 500;
	line-height: 48px;
	opacity: .9;
	text-shadow: 2px 2px 4px #265989;
	
}

.logo {
	width: 250px;
	cursor: pointer;
	margin: 10px;
	
	
}

.lad
{
	height: 120px;
	align-content: center;
	text-align: center;
	padding: 1px;
	margin-bottom: 10px;
	
	
}


#trigger  {
	position: absolute;
	top: -200px;
}


nav {
	position: fixed;
	top: 10px;
	right: 20px;
	z-index: 1000;
}

nav .menu1, 
nav .menu2 {
		
		list-style: none;
	}
	
nav .menu1 {
	background: #3492ea;
	background: linear-gradient(to right, #265989, #3492ea);
	width: 60px;
	height: 60px;
	overflow: hidden;
	border-radius: 50px;
	padding: 4px 0 0 0;
	transition: height 400ms cubic-bezier(0.175,0.885,0.32,1.375);
}	

nav .menu1 img{
	height: 48px;
	margin: 0;
	padding: 8px;
	
	align-content: center;
	align-items: center;
	justify-content: center;
	
	

}	

.trigger {
	cursor: pointer;
	
}

nav .menu1 li  {
	font-size: 20px;
	display: block;
	height: 50px;
	width: 100%;
	margin: 0;
	background: transparent;
	text-align: center;
	margin-bottom: 15px;
	transition: background 600ms cubic-bezier(0.165,0.84,0.44,1);
	line-height: 1.4em;
}






nav .menu1 li a:hover {
	opacity: .5;
	transition: 0.5s;
}

.menu2 {
	position: absolute;
	top: 52px;
	transform: translateX(-2200px);
	transition: transform 400ms cubic-bezier(0.165,0.84,0.44,1);
	cursor: pointer;
	
}


nav .menu2 li  {
	font-size: 20px;
	display: block;
	height: 50px;
	width: 100%;
	margin: 0;
	color: #fff;
	line-height: 2.8em;
	text-align: center;
	margin-top: 15px;
	text-shadow: 2px 2px 8px #265989;
	
	
}

nav .menu2 li a {
	color: #fff;
	transition: 0.5s;
}


nav .menu2 li a:hover {
	
	
	filter: blur(1px);
	
	
	
}


input#trigger:checked  ~  nav .menu1 {
	height: 530px;
	
}

#trigger:checked  ~   nav .menu2{
	transform: translateX(-160px);
	
}





.content {
	color: #fff;
	padding: 50px;
}

.content a {
	color: #88c2f9;
}

.content h1 {
	font-size: 40px;
	text-align: center;
	padding: 10px;
	font-family: 'MonteCarlo', cursive;
	font-weight: 100;
}

.content h2 {
	font-size: 25px;
	text-align: center;
	padding: 10px;
}



.content p {
	font-size: 20px;
	text-align: center;
	padding: 10px;
}





.social {
	transform: rotate(-90deg);
	position: absolute;
	left: -110px;
	bottom: 55vh;
	z-index: 1;
}

.social img {
	transform: rotate(90deg);
	height: 25px;
	opacity: .5;
	transition: 0.5s;
	
}




.social a {
	text-decoration: none;
	color: #88c2f9;
	padding-right: 20px;
	font-size: 14px;
	
}


.social a:hover img {
	opacity: .2;
	
}






.newscont {
			width: 1000px;
			height:  45vh;
			margin: 100px auto;
			display: flex;
			z-index: 10;
			
			align-content: center;
			justify-content: space-evenly;
			
						
		}


.newscont a {
			color: #fff;
			
					
		}


.newscont a:hover {
			filter: blur(1px);
			
					
		}




		
.newscont .ncol {
			position: relative;
			height: 100%;
			flex: 1;
			color: #fff;
			box-sizing: border-box;
			box-shadow: 15px 15px 50px -15px rgba(0,0,0, 0.4) inset;
			transition: 0.6s;
		}
 
.newscont .ncol  img {
	
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			opacity: 0.15;
}

.newscont .ncol:hover  img {
	
			display:none;
}

		
.ncol:nth-child(1){
			background: #283491;
			
		}





.ncol:nth-child(2){
			background: #c7b363;
		}


.ncol:nth-child(3){
			background: #830000;
		}
.ncol:nth-child(4){
			background: #065400;
		}
		
		


.newscont .ncol h1{
			text-align:center;
			font-size: 35px;
			font-weight: 600;
			transform: rotate(-90deg);
			
			letter-spacing: 7px;
			margin-top: 50%;
			
		}


.newscont .ncol:hover h1{
			display: none;
			
		}

		
.ncap {
			max-width: 80%;
			max-height: 300px;
			font-size: 16px;
			margin: 20px;
			display: none;
		}

.newscont .ncap h2{
			
			font-size: 35px;
			font-weight: 600;
			letter-spacing: 7px;
			margin-bottom: 20px;
			
			
		}

.newscont .ncap .newsf  {
			display: block;
			transition: 0.6s;
			
			
		}
.newscont .ncap .newsf li {

	
	
	color: #fff;
	
	animation: moveleft 1s linear 1;
	animation-delay: .5s;
	visibility: hidden;
	animation-fill-mode: forwards;
}


@keyframes moveleft{
	0% {
		transform: translateX(220px);
		visibility: visible;
	}
	100% {
		transform: translateX(0);
		visibility: visible;
	}
}


.newscont .ncap .eventsf {
			display: flex;
			
			flex-wrap: wrap;
			gap: 10px;
			justify-content: space-between;
			margin-right: 20px;
			
	
		}

.newscont .ncap .eventsf li{
			list-style: none;
			text-align: center;
			width: 150px;
			cursor: pointer;
			animation: zoomin 1s linear 1;
			animation-delay: .5s;
			visibility: hidden;
			animation-fill-mode: forwards;
			z-index: 20;
			
	
	
		}


.newscont .ncap .noticesf{
			display: block;
			transition: 0.6s;
		}


.newscont .ncap .noticesf li{
		
			color: #fff;
	animation: moveleft 1s linear 1;
	animation-delay: .5s;
	visibility: hidden;
	animation-fill-mode: forwards;

}







.newscont .ncap .dragonsf{
			display: block;
			transition: 0.6s;
		}


.newscont .ncap .dragonsf li{
		
			color: #fff;
	
	
}



.newscont .material-icons {
	color: #fff;
	transition: 0.6s;
	cursor: pointer;
	opacity: .7;
}

.newscont .material-icons:hover {
	filter: blur(1px);
}



@keyframes zoomin{
	0% {
		transform: scale(0.5);
		visibility: visible;
	}
	100% {
		transform: scale(1);
		visibility: visible;
	}
}


		
.ncap button {
			
			background: transparent;
			outline: none;
			padding: 3px;
			color: #fff;
			font-family: 'Just Another Hand', cursive;
			border-radius: 15px;
			margin: 5px 0 5px 55%;
			cursor: pointer;
			font-size: 20px;
			transition: 0.2s;
			opacity: .3;
			
			
		}

.ncap button:hover {
			border: 2px solid #407eb3;
			background: #004682;
			outline: none;
			padding: 6px;
			color: #fff;
			cursor: pointer;
			font-size: 22px;
			opacity: .9;
			
		}

		
		.ncol img {
			width: 185px;
			
			
			
				background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	
	
	box-sizing: border-box;
	overflow: hidden;
			
		}
		
		.ncol:hover{
			flex-grow: 4;
		}
		
		.ncol:hover .ncap{
		display: block;
			
		
		}
		

.bdaysec {
	background: #cfbd74;
	height: 100vh;
	padding: 50px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	
	
	
}

.bdaysec .sponsors{
	
	padding: 10px;
	display: flex;
	justify-content: space-between;
	column-gap: 20px;
	
}

	

.videosec {
	
	background:  #075f80;
    height: 100%;
	margin: 0; 
	padding: 20px 0px 50px 0px;
	color: #fff;
}


	
	.vidcont {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 15px;
		align-items: flex-start;
		padding: 10px 5%;
		
		margin-left: 
		
	}
	
	.vidcont .main-video {
		background: #fff;
		border-radius: 5px;
		
	
		
		
	
	}
	
	
		.vidcont .main-video video {
			width: 100%;
  			border-radius: 5px;
	
		
		
	
	}
	

	
			.vidcont .main-video .video iframe {
	 
 			width: 100%;
  			min-height: 500px;
			height: 100%;
				
	}
	
	
	
	
			.vidcont .main-video .video .title {
	 
		color: #000;
		font-size: 23px;
	    padding-top:  15px;
		padding-bottom: 15px;
	    
	}
	
	
		.vidcont .video-list{
	 
		background: #fff;
	    border-radius: 5px;
		height: 560px;
	    overflow-y: scroll;
	}
	
		.vidcont .video-list::-webkit-scrollbar {
		 width: 7px; 
		
	}
	
		.vidcont .video-list::-webkit-scrollbar-track {
		 background: #ccc;
		border-radius: 50px;	
		
	}	
	
	
		.vidcont .video-list::-webkit-scrollbar-thumb {
		 background: #666;
		border-radius: 50px;	
		
	}		
	
	
		.vidcont .video-list .vid video {
		width: 100px;
		border-radius: 5px;
	}
	
			.vidcont .video-list .vid  {
		display: flex;
	    align-items: center;
		gap: 15px;
	    background: #f7f7f7;
	    border-radius: 5px;
		margin: 10px;
		padding: 10px;
		border:1px solid rgba(0,0,0 .1);
		cursor: pointer;
	}
	
			.vidcont .video-list .vid:hover  {
		background: #eee;
	}	
	
			.vidcont .video-list .vid.active  {
		background: #3291b4;
	}
	
		.vidcont .video-list .vid.active .title  {
		color: #fff;
	}	
	
		.vidcont .video-list .vid .title  {
		color: #333;
		font-size: 17px;
	}




@media screen and (max-width: 1100px)
{
	
	.navbar {
	max-width: 80%;
    
	
	
	
	
}
	
			.navbar  h3 {
	width: 100%;		
	font-size: 35px;
	padding: 5px;
	
	
	
	
}
	
.newscont {
		
		width: 80vw;
			
						
		}	
	
	
	

	nav .menu1 {

	width: 45px;
	height: 45px;
	
}	

nav .menu1 img{
	height: 38px;
	margin: 0;

	
}
	
	
nav .menu1 li  {

	
	height: 27px;
	
	line-height: .75em;
}

.menu2 {
	position: absolute;
	top: 40px;
	transform: translateX(-2200px);
	transition: transform 400ms cubic-bezier(0.165,0.84,0.44,1);
	cursor: pointer;
	
}
	


nav .menu2 li  {
	font-size: 16px;
	display: block;
	height: 27px;
	line-height: 1.5em;
	
	
}
	
	
input#trigger:checked  ~  nav .menu1 {
	height: 360px;
	
}

#trigger:checked  ~   nav .menu2{
	transform: translateX(-130px);
	
}	
	
	

	
}



	@media (max-width:991px){
		
		.vidcont {
			grid-template-columns: 1.5fr 1fr;
			padding: 10px;
		}
	}
	
		



@media screen and (max-width: 740px)
{
	.navbar {
	flex-direction: column;
    height: auto;
	
	
}	
	
		.navbar  h3 {
	width: 40vw;		
	font-size: 35px;
	padding: 5px;
	line-height: 45px;
	margin-top: 30px;
	
	
	
}
	
	

	
	
.lad
{
	margin-top: 80px;
	height: 70px;
	padding: 5px;
	
	
	
}
.social {

	bottom: 70vh;
	
}






.social a {
	
	padding-right: 22px;
	font-size: 14px;
	
}

.social img {
	
	height: 20px;
	
}
	
.newscont {
			
			margin: 10px auto;
		
			
						
		}	
	
	
	
	
.vidcont {
			grid-template-columns: 1fr;
			
		}	
	
	
	
}