*{
	box-sizing: content-box;

	--mainWidth: max(75%, 965px);
	--gap: 25px;

	--sp9: #1b356b;
	--sp5: #214da7;
	--sp8: #2463e7;
	--sp4: #1bb7f0;
	--sp7: #18a4d8;
	--sp10: #0788b8;
	--sp2: #951755;
	--sp1: #c94283;
	--sp3: #5b784e;
	--sp6: #81ab6d;
	--sp11: #2642ef;

	--sportContainer: 255px;
	--spbrd: 4px;
}

@charset "UTF-8";

html {
	margin-bottom: 1px;	
	height: 100%;
	background-color: rgba(255,255,255, 1); /* For browsers that do not support gradients */
	background-image: linear-gradient(#03034b, #5794c6, #FFFFFF);
    background-repeat: no-repeat;
    background-size: cover;
 }

body{
	margin:0 auto;
	padding:0;
	line-height: 1.2em;
	font-family: Roboto;
	font-size: 1rem;
	color:#363636;
}

a {
	color:var(--sp3);
	text-decoration: none;
	transition: all 0.5s ease-in-out 0s;
}

a:hover {
	color:var(--sp4);
	text-decoration: none;
	transition: all 0.5s ease-in-out 0s;
}

#container
{
	margin-left: auto;
	margin-right: auto;
	width: var(--mainWidth);
	background-color:#FFF;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
	border-radius: 0 0 3em 3em;
	min-height: 500px;
}

#mainArea {
	margin: var(--gap);
}

#footer { border-top:1px solid #363636; margin: var(--gap); 15px 15px 15px; text-align:left; padding:5px 5px 20px 5px; overflow:hidden; }

/* HEADER GRID SETUP START */
.headerGrid {
	display: grid;
	grid-template-columns: auto auto;
	background-image: url("../images/headerbg.png");
	background-repeat: no-repeat;
	background-size: cover;
  }

  .headerGrid div:first-child{
	grid-row: 1 / span 2;
   }
  
  .headerGrid div .schoolyear, .headerGrid div .headPicts{
	  text-align:right;
	  margin-right:30px;
  }
  
  .headerGrid div .headPicts{
	  margin-top: 50px;
  }
  
  .schoolyear {
	font: 500 3rem "Roboto", sans-serif;
	background-color: #1b356b;
	color: transparent;
	text-shadow: 1px 1px 2px rgba(255,255,255,0.85);
	-webkit-background-clip: text;
	   -moz-background-clip: text;
			background-clip: text;
	}

/* HEADER GRID SETUP END */

/* MENU START */
li .fa-solid {
	margin-right: 7px;
}

#main-menu {
	background-image: linear-gradient(to right, #24366c, #5db5f1, #872656, #61774d);
}

#main-menu ul{
	margin:0;
	padding:0;
	width:inherit;
	list-style: none;
	display:flex;
	justify-content:space-around;
	color: rgba(255,255,255, 0.8);
	font-size:1rem;
	position:relative;
}

#main-menu ul li{
	transition: all 0.5s ease-in-out 0s;
	padding:20px;
}

#main-menu ul a{
	color: rgba(255,255,255, 0.8);
	text-decoration:none;
}

#main-menu ul li:hover{
	transition: all 0.5s ease-in-out 0s;
	background:rgba(0,0,0,0.4);
	border-radius:30px 0 30px 0;
}


#main-menu ul li a:hover{
	transition: all 0.1s ease-in-out 0s;
	color:#FFF;
}

#main-menu ul li ul {
	display:none;
	font-size:0.9rem;
	position:absolute;
	top:59px;
	margin-left:-20px;
	background:rgba(37,54,110,0.8);
	z-index:999;
}

#main-menu ul li ul li {
	border-bottom: dotted 2px #8f8f8f;
}

#main-menu ul li ul li:last-child {
	border-bottom: none;
}

#main-menu ul li ul li:hover {
	border-radius: 0;
	border-bottom: solid 2px #FFF;
}


#main-menu ul li:hover .dropdown {
	display:block;
}
/* MENU END */

/* ANIMATED LOGOS START */

@keyframes slide {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-100%);
	}
  }
  
  .logos {
	overflow: hidden;
	padding:  var(--gap) 0;
	background: white;
	white-space: nowrap;
	position: relative;
    margin: auto;
	z-index:2;
  }
  
  .logos:before,
  .logos:after {
	position: absolute;
	top: 0;
	width: 200px;
	height: 100%;
	content: "";
	z-index: 10;
  }
  
  .logos:before {
	left: 0;
	background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
	z-index:3;
  }
  
  .logos:after {
	right: 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
	z-index:3;
  }
  
  .logos:hover .logos-slide {
	animation-play-state: paused;
  }
  
  .logos-slide {
	display: inline-block;
	animation: 45s slide infinite linear;
  }
  
  .logos-slide img {
	height: 80px;
	margin: 0 35px;
	border-radius:10px;
  }

  /* ANIMATED LOGOS END */

/* TOP BANNERS - START */

.topBanner{
	width: 100%;
	margin-right:auto;
	margin-left:auto;
	margin-top: 35px;
	margin-bottom: 35px;
	text-align:center;
}

.textBox{
	margin-top:20px;
	max-width:650px;
	padding:10px;
	font-size: 0.9rem;
	border:solid 5px #F00;
	border-radius: 12px;
	background-color:#EDEDED;
	margin-left:auto;
	margin-bottom:20px;
	line-height:180%;
}

.badNews{
	max-width:600px;
	background-color:#000;

	font-size: 0.9rem;
	line-height:180%;
	color: #FFF;

	padding:20px;
	margin-top: 0px;
	margin-left:auto;
	margin-bottom:40px;

	border:double 15px #F5F5F5;
	border-radius: 12px;
}

.topBanner h1{
	line-height:110%;
}
.topBanner .text{
	font-size: 1.1rem;
}

/* TOP BANNERS - END */

#topArea {
	display: grid;
	gap:  var(--gap);
	grid-template-columns: var(--sportContainer) auto;
	min-width: 650px;
	width: auto;
}

.photogridarea {
	background: #FFF;
	padding: 7px 15px;
	text-align:right;
	margin-top: 5px;
	min-height:580px;
	height: 580px;
	}

.botlink {
	background: #24366c;
	border: solid 2px #333;
	font-size: 0.8rem;
	color: #FFF;
	padding: 7px 15px;
	text-align:right;
	border-radius: 10px;
	margin-top: 15px;
}

.botlink a{
	color: #FFF;
	text-decoration: none;

	&:hover{
		transition: all 0.3s ease 0s;	
		font-size: 0.85rem;
		text-shadow: #F5C22D 1px 1px 8px;
	}
  
}

/* SPORT LIST START */

#sportContainer {
	width: var(--sportContainer)
}


.sport {
  display: flex;
  text-align: left;
  align-items: center;
  justify-content: left;
  padding: 12px 12px 12px 65px;
  min-height: 30px;
  color:#FFF;
  font-size:1.1rem;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-shadow: #333 1px 1px 5px;
  line-height: 130%;
  transition: all 0.3s ease 0s;
  margin-bottom:2px;
}

.sport:nth-child(2) {
  border-radius: 0 20px 0 0;
  }

.sport:last-child {
  border-radius: 0 0 20px 0;
  }

.sport a{
  color:#FFF;
  text-decoration:none;
  transition: all 0.3s ease 0s;	

  &:hover{
	  transition: all 0.3s ease 0s;	
	  cursor: pointer;
  }

}


.spid0 { 
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size:1.9rem;
  justify-content: center;
  padding: 12px;
  color:#F9F9F9;
}

.spid9 { 
  background: var(--sp9) url(../images/sport-icons/9.svg) no-repeat right center; 
}
.spid5 { 
  background: var(--sp5) url(../images/sport-icons/5.svg) no-repeat right center; 
}
.spid8 { 
  background: var(--sp8) url(../images/sport-icons/8.svg) no-repeat right center; 
}
.spid4 { 
  background: var(--sp4) url(../images/sport-icons/4.svg) no-repeat right center; 
}
.spid7 { 
  background: var(--sp7) url(../images/sport-icons/7.svg) no-repeat right center; 
}
.spid10 { 
  background: var(--sp10) url(../images/sport-icons/10.svg) no-repeat right center; 
}
.spid2 { 
  background: var(--sp2) url(../images/sport-icons/2.svg) no-repeat right center; 
}
.spid1 { 
  background: var(--sp1) url(../images/sport-icons/1.svg) no-repeat right center; 
}
.spid3 { 
  background: var(--sp3) url(../images/sport-icons/3.svg) no-repeat right center; 
}
.spid6 { 
  background: var(--sp6) url(../images/sport-icons/6.svg) no-repeat right center; 
}
.spid11 { 
	background: var(--sp11) url(../images/sport-icons/11.svg) no-repeat right center; 
  }
  

.spid1, .spid2, .spid3, .spid4, .spid5, .spid6, .spid7, .spid8, .spid9, .spid10, .spid11 { 
  background-position: bottom 2px left -87px;
  background-size: 90% 90%;
  &:hover{
	  transition: all 0.3s ease 0s;	
	  font-size:1.15rem;
	  text-shadow: #F5C22D 1px 1px 8px;
  }
}

  .sprt1 { 
	background: var(--sp1);
  }
  .sprt2 { 
	background: var(--sp2);
  }
  .sprt3 { 
	background: var(--sp3); 
  }
  .sprt4 { 
	background: var(--sp4); 
  }
  .sprt5 { 
	background: var(--sp5); 
  }
  .sprt6 { 
	background: var(--sp6); 
  }
  .sprt7 { 
	background: var(--sp7); 
  }
  .sprt8 { 
	background: var(--sp8); 
  }
  .sprt9 { 
	background: var(--sp9); 
  }
  .sprt10 { 
	background: var(--sp10); 
  }
  .sprt11 { 
	background: var(--sp11); 
  }

  .sprtBrd1 { 
	border: solid var(--spbrd) var(--sp1);
  }
  .sprtBrd2 { 
	border: solid var(--spbrd) var(--sp2);
  }
  .sprtBrd3 { 
	border: solid var(--spbrd) var(--sp3); 
  }
  .sprtBrd4 { 
	border: solid var(--spbrd) var(--sp4); 
  }
  .sprtBrd5 { 
	border: solid var(--spbrd) var(--sp5); 
  }
  .sprtBrd6 { 
	border: solid var(--spbrd) var(--sp6); 
  }
  .sprtBrd7 { 
	border: solid var(--spbrd) var(--sp7); 
  }
  .sprtBrd8 { 
	border: solid var(--spbrd) var(--sp8); 
  }
  .sprtBrd9 { 
	border: solid var(--spbrd) var(--sp9); 
  }
  .sprtBrd10 { 
	border: solid var(--spbrd) var(--sp10); 
  }
  .sprtBrd11 { 
	border: solid var(--spbrd) var(--sp11); 
  }

/* SPORT LIST END */

/* CALENDAR START */

#yearschedule { 
/*
	align-self: center;
*/
	margin-right:  var(--gap);
	margin-top: 50px;
}

#calendar_area { 
	margin-top: 50px;
	margin-bottom: 35px;
	display: grid;
	gap:  var(--gap);
	grid-template-columns: 30px 1fr auto;
	min-width: 650px;
	width: auto;
	
}

.wide {
	grid-column: span 3;
  }

#calendar_area:first-child {
	grid-column: 1 / -1;
}

.calendarpics img{
	border-radius: 5px;
}

.calendarbody  {
	padding-bottom: 10px;
	border-bottom: solid 1px #333;
}

.calendartitle {
	font-weight: bold;
	font-size: 0.95rem;
	line-height: 125%;
	margin-bottom: 4px;
}
.calendarorg {
	font-size:0.80rem;
	font-style: italic;
}
.calendarday {
	display: flex;

	justify-content: center;
	font-size:2rem;
	color:#a81f6d;
}

/* CALENDAR END */

/* NEWS SECTION START */
#news { 
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
}

.news-item {
	margin-bottom: 15px;
	padding:15px; 
	box-shadow: #999 2px 2px 8px;
	border-radius:12px;
	background-image: linear-gradient(#e9dfd5, #f3efeb);
}

#news img { 
	border-radius:15px; 
	margin-bottom: 15px;
}

.abstract { 
	font-size: 1rem;
}

.date { 
	font-size:0.85rem; 
	color: #665;
	margin-bottom: 5px;
}

.abs-title { 
	font-size:1.2rem; 
	line-height: 120%;
	font-weight:bold;
}

.abstract img { 
	border:solid 4px #FFF; 
	float: left;
	margin-right: var(--gap);
}

.abstract-text { 
	font-size:0.85rem;
	line-height: 135%;
}

/* NEWS SECTION END */

/* RESULTS FORMATING */

.grey-rpt-bg { padding:10px; background-image: url("../images/sp-title_bg.png");
	background-repeat: repeat-x;
	background-position: center;
	color:#FFF;
}

.tdtitle {
	font-size: 0.9rem;
	font-weight: bold;
	color: #FFF;
	border-bottom:1px solid #FFF;
	border-right:1px solid #FFF;
	background-image: linear-gradient(#0086c5, #004d7c);
	padding:7px;

}

.tdtitlef {
	font-size: 0.9rem;
	font-weight: bold;
	color: #FFF;
	border-bottom:1px solid #FFF;
	border-right:1px solid #FFF;
	background-image: linear-gradient(#c33a90, #ab066f);
	padding:7px;
}


.data {font-size: 0.8rem;}
.data A, .data A:link, .data A:visited {font-size: 0.8rem; color: #165AB9}
.data A:hover, .data A:active {font-size: 0.8rem; color: #0000FF;}

.dataStrong { font-size: 115%; font-weight: bold;}

.updated {font-size: 0.8rem; font-weight: normal;}

.evenrow { background-color:#F5F5F5;}

#yearschedule { 
	padding-top:var(--gap);
}

#newsevnts { 
	margin-left:auto; 
	margin-right:auto; 
	/* width:880px;  */
	padding-top:var(--gap);
}

#calendar_area { 

/*
	overflow: auto; 
	width: 748px;
	width: 673px;
	height: 360px;

*/
}

	.brd_bot { border-bottom: solid 1px #213e72;}
	.brd_side { border-left:dotted 1px #333; padding:0px 7px;}
	
	
	.rank_title, .rank_subtitle, .rank_final { 
		color:#FFF;
		font-weight:bold;
		text-align:center;
	}

	.rank_title { 
		font-size: 1.4rem;
		background-image: linear-gradient(#065cb2, #022a59);
		padding: 20px 0;
		border-radius: 12px 12px 0 0;
		border-bottom:solid  2px #FFF;
	}

	.rank_subtitle { 
		font-size: 1.1rem;
		background-image: linear-gradient(#024183, #5db3ef);
		padding: 15px 0;
		border-radius: 0 0 12px 12px;
	}
	
	.rank_final { 
		font-size: 1.1rem;
		background-image: linear-gradient(#5a3917, #b67b4f);
		padding:15px 20px;	
	}
	
	.rank_fin_brd	{border: solid 1px #b67e4f;}

	.omil_1_tb, .omil_2_tb, .omil_3_tb, .omil_4_tb, .omil_5_tb, .omil_6_tb, .omil_7_tb {
		padding-bottom: 10px;
		border-radius: 12px  12px 20px 20px;
		/* border-radius: 0 0 20px 20px; */
	}

	.omil_1_tb {border: solid 2px #84003a;}
	.omil_2_tb {border: solid 2px #842400;}
	.omil_3_tb {border: solid 2px #875000;}
	.omil_4_tb {border: solid 2px #8b7b00;}
	.omil_5_tb {border: solid 2px #718700;}
	.omil_6_tb {border: solid 2px #008b44;}
	.omil_7_tb {border: solid 2px #00558b;}
	
	.omil_1, .omil_2, .omil_3, .omil_4, .omil_5, .omil_6, .omil_7 { 
		text-align:center;
		color:#FFF;
		font-weight:bold;
		font-size: 0.9rem;
		border-radius: 10px 10px 0 0;
	}
	
	.omil_1 {
		background-image: linear-gradient(#c50066, #800038);
		}

	.omil_2 {
		background-image: linear-gradient(#c52700, #7c2000);
	}

	.omil_3 {
		background-image: linear-gradient(#c56800, #7c4900);
	}

	.omil_4 {
		background-image: linear-gradient(#c5a300, #807200);
	}

	.omil_5 {
		background-image: linear-gradient(#b2c500, #697c00);
		}

	.omil_6 {
		background-image: linear-gradient(#00c552, #007c3c);
	}
	
	.omil_7 {
		background-image: linear-gradient(#0086c5, #004d7c);
	}
	
/* START TABLE SORTER */

table.tablesorter {
	margin:10px 3px 15px 3px;
}

table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	text-align:left;
}

table.tablesorter thead tr .header {
	background-image: url("../images/unsort.gif");
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}

table.tablesorter tbody td {
}

table.tablesorter tbody tr.odd td {
}

table.tablesorter thead tr .headerSortUp {
	background-image: url("../images/asc.gif");
}

table.tablesorter thead tr .headerSortDown {
	background-image: url("../images/desc.gif");
}

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
}

.odd { background-color: #F9F9F9;}
.even { background-color: #e0d8d8;}

/* END TABLE SORTER */

	/* RESULTS FORMATING END */



	/* EXTRA START */

		.tennis {
			width: var(--mainWidth)-100px;
			overflow-x: scroll;
		}

  .white, .white A, .white A:link, .white A:visited {color: #FFF; TEXT-DECORATION: none}
  .white A:hover, .white A:active {color: #FFF; TEXT-DECORATION: underline}
  
  .black, .black A, .black A:link, .black A:visited {color: #000; TEXT-DECORATION: none}
  .black A:hover, .black A:active {color: #000; TEXT-DECORATION: underline}

	.nr { 
	font-weight:bold;
	font-size:110%;
	color:#D30407;
}

	.spUnitContainer {
		display: flex;
		gap: var(--gap);
		margin: 50px 0;
	}

	.spUnit a {
		border: solid 2px #FFF;
		padding: 10px;
		background-color: var(--sp1);
		border-radius: 12px;
		color: #FFF;
		font-size: 1rem;

		&:hover{
			transition: all 0.3s ease 0s;	
			text-shadow: #F5C22D 1px 1px 8px;
			border: solid 2px var(--sp10);
		}
	}	

	h1 {
		font-weight:normal;
	}
	
	.scyear {
		font-weight: bold;
		color: #7c4978;
		font-size: 110%;
	}

	.ResHolder{
		margin: 50px 0;
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		justify-content:space-around;
	}

	.resbut { 
		margin: 0;
		padding: 0;
		color: rgba(255,255,255, 0.8);
		display: flex;
		gap: 15px;
		align-items: center;
		padding-right: 10px;
		box-shadow: #333 1px 1px 8px;
		border-radius: 12px;
		width: 280px;
		font-size: 0.85rem;
		line-height: 135%;
	}
	
	.resbut a { 
		font-size: 1rem;
		color: rgba(255,255,255, 0.8);

		&:hover{
			transition: all 0.3s ease 0s;	
			color: rgba(255,255,255, 1);
		}
	
	}

	.resbut img{ 
		border-radius: 12px;
		margin: 0;
		width: 80px;
		height: 80px;
	}

	.resRatings{
		padding:10px; 
		border-radius: 12px;
		border: solid 2px #0e5a9c; 
		background-color: #e4f5ff;
		margin: 15px 0;
	}

	.sexTitle {
		font-size:1.1rem; 
		font-weight:bold; 
		padding:0px 0px 15px 0px; 
		color:#1b356b;
		margin-top:15px;
	}

	.archComp{
		text-align: center;
		background-color: var(--sp9);
		padding: 16px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		border-radius: 12px;
	}

	.archComp select {
		font-size: 1rem;
		padding: 7px;
		border-radius: 7px;
	}

	.contactarea {
		margin-left: auto;
		margin-right: auto;
		width: fit-content;
	}

	.contactarea img{
		height: 80px;
		border-radius:15px;
	  }
	
	  .sportslistcontainer{
		columns: 2;
	  }


	/* EXTRA END */