/*<HEADER> - INCLUDES SCHOOL LOGOS ROW, LEAGUE LOGO, NAV*/
	#main-header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 200;
		-webkit-box-shadow: 0 2px 4px rgba(1,1,1,0.3);
		box-shadow: 0 2px 4px rgba(1,1,1,0.3);
	}

	/*When #mainNav gets to the top of the window*/
	#main-header.stuck {
		position: fixed;
		top: -51px;
	}

	/*Top Section of the header*/
	.main-header-top {
		background-color: #d9d9d9;
	}

		/*Button to drop down school logos in mobile*/
		.icon-mobile button {
			background-color: #3b6aa0;
			color: white;
			font-size: 1rem;
		}

		.icon-mobile button:hover {
			color: #fff;
		}

		.icon-mobile button:focus {
			box-shadow: none;
		}

			/*School logos dropdown for mobile*/
			.mobile-logos {
				position: absolute;
				background-color: #d9d9d9;
				z-index: 1000;
			}

			.mobile-logos .logo-item {
				padding: 1rem 0;
				width: 50%;
			}

			.mobile-logos img {
				width: 75px;
			}

	/*Bottom Section of Header - League Logo and Links*/
		.league-logo-box {
			position: absolute;
			/*background-color: #fff;*/
			width: 130px;
			height: 56px;
			z-index: 401;
			padding-right: 20px;
		}

			.league-logo-box:before {
				content: "";
				background: #fff;
				width: 1000px;
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
				z-index: -1;
				transform: skew(-20deg);
			}

			/*Determines size of the league logo*/
			img.league-logo {
				height: 56px;
				/*margin-left: 10px;*/
			}

		

		/*Mobile Dropdown Nav*/
			.navbar {
				background-color: #3b6aa0;
			}

				/*Link Styling*/
				ul.mobile-nav li.nav-item a.nav-link {
					color: white;
					padding: 2rem 0 0;
					margin: 0;
					text-transform: uppercase;
					font-size: 22px;
				}

				.dropdown-menu a.hover-item {
					color: black;
				}


		/*Desktop Nav Menu */
			.main-nav {
				background-color: #3b6aa0;
			}

				.menu-item {
					line-height: 80px;
				}

				a.main-menu-link {
					color: white;
					margin: 0;
					text-transform: uppercase;
					font-size: 22px;
				}

				.hover-item {
					display: block;
					line-height: normal;
				}

				li.hover-sport {
					border-bottom: 1px solid #aaa;
				}

				li.hover-sport:hover {
					background-color: #ccc;
				}

		
		/*Mobile and Desktop Navs*/
			.sports-menu.boys, .sports-menu.girls, .sports-menu.fall, .sports-menu.winter, .sports-menu.spring, .sports-column, .season-column {
				flex-basis: 100%;
				margin-bottom: 20px;
			}

			.sports-column {
				margin-bottom: 0;
			}

			.sports-menu h4 {
				font-size: 1.25rem;
				padding-left: 10px;
			}
	
		/*Active Link*/
			.menu-item.active {
				border-bottom: 5px solid white;
			}

@media (min-width: 768px) {
	/*Affect to mobile nav*/
		.mobile-logos .logo-item {
			width: 25%;
		}

		.sports-menu.boys, .sports-menu.girls {
			flex-basis: 46%;
		}

		.sports-menu.fall, .sports-menu.winter, .sports-menu.spring {
			flex-basis: 32%
		}
}


@media (min-width: 1024px) {
	
	/*Main Header gets bigger*/
	.main-header-top {
		height: 110px;
	}

	/*When #mainNav gets to the top of the window*/
	#main-header.stuck {
		position: fixed;
		top: -110px;
	}

		/*Shrink the league logo when the header gets "stuck"*/
			#main-header.stuck img.league-logo {
				transform: scale(0.75) translate(0, 75px);
				transition: .25s;
			}

	/*displays the slanted line between the league logo and the rest of the header*/
	.league-logo-box:after {
		width: 30px;
	}

	/*Move the school icon button to the right*/
	.icon-mobile {
		padding-left: 230px;
		height: 100%;
	}

		/*School logo image widths*/
		.mobile-logos img {
			width: 100px;
		}

	/*Box that hold the league logo*/
	.league-logo-box {
		height: 190px;
		width: 188px;
		padding-right: 30px;
		top: 0;
	}

		img.league-logo {
			width: 135px;
			height: auto;
			transition: .25s;
		}
			

	/*Desktop Nav with top level links*/
	.main-nav ul.top-level {
		padding-left: 180px;
		height: 80px;
		padding-right: 20px;
	}

		/*Dropdown menus on link hover*/
		.hover-menu {
			background-color: #fff;
			position: absolute;
			width: 100%;
			left: -99999px;
			top: 100%;
			opacity: 0;
			box-shadow: 0 2px 4px rgba(1,1,1,0.3);
		}

		.hover-menu a.hover-item {
			color: black;
		}

		/*Display the appropriate dropdown menu on hover*/
		.hover-link:hover .hover-menu {
			left: 0;
			opacity: 1;
			transition: opacity .25s;
		}

		/*Sport & Season dropdown menus*/
		.sports-menu {
			flex: 1 1 auto;
			padding: 1rem;
		}

		.sports-column {
			flex-basis: 48%;
		}

		.season-column {
			flex: 1 1 auto;
		}
}

@media (min-width: 1280px) {

	#main-header.stuck {
		top: -80px;
	}

	.main-header-top {
		height: 80px;
	}

	.league-logo-box {
		height: 130px;
	}

	#main-header.stuck img.league-logo {
	    transform: scale(0.5) translate(0, 80px);
	    transition: .25s;
	}

	.main-nav ul.top-level {
	    height: 50px;
	}

	.menu-item {
	    line-height: 50px;
	}
	
	/*These elements are now the top-level logos*/
	ul.logo-list {
		padding-left: 188px;
		padding-right: 25px;
		height: 100%;
	}

		.logo-box {
			height: 100%;
			filter: grayscale(100%);
			opacity: .5;
			transition: .25s;
		}

			img.logo-image {
				width: 65px;
			}

		.logo-dropdown {
			position: absolute;
			top: 100%;
			background-color: #fff;
			opacity: 0;
			left: -9999px;
			height: 60px;
			width: auto;
			z-index: 1000;
		}

			.logo-dropdown h3 {
				font-size: 1.25rem;
			}

		.logo-item {
			flex: 1 1 auto;
			position: relative;
		}
		/*Hovering over a school logo*/
		/*Changes bg to white*/
		li.logo-item:hover {
			background-color: #fff;
		}

			/*Removes grayscale and opacity*/
			.logo-item:hover .logo-box {
				filter: grayscale(0%);
				opacity: 1;
				transition: .25s;
			}

			/*Displays tge dropdown box*/
			.logo-item:hover .logo-dropdown {
				opacity: 1;
				transition: opacity .25s;
				left: 0;
			}

	/*MAIN NAV NO CHANGES FROM 1024px*/
}

@media (min-width: 1440px) {
	.league-logo-box {
		width: calc(170px + calc((100vw - 1280px) / 2));
	}

	ul.logo-list {
		width: 100%;
		padding-left: 220px;
		padding-right: 5px;
		height: 100%;
	}

	.main-nav ul.top-level {
	    padding-left: 210px;
	    padding-right: 0;
	}

	img.league-logo {
		width: 200px;
	}
}

@media (min-width: 1600px) {
	.league-logo-box {
		width: calc(180px + calc((100vw - 1440px) / 2));
	}

	ul.logo-list {
		padding-left: 195px;
	}

	.main-nav ul.top-level {
	    padding-left: 195px;
	}
}

@media (min-width: 1920px) {
	#main-header.stuck {
	    top: -90px;
	}

	.main-header-top {
	    height: 90px;
	}

	.league-logo-box {
		width: calc(180px + calc((100vw - 1600px) / 2));
		padding-right: 30px;
		height: 150px;
	}

	#main-header.stuck img.league-logo {
	    transform: scale(0.6) translate(0, 75px);
	    transition: .25s;
	}

	.main-nav ul.top-level {
		padding-left: 200px;
		height: 60px;
	}

	.menu-item {
	    line-height: 60px;
	}

	.logo-dropdown h3 {
	    font-size: 1.5rem;
	}

	ul.logo-list {
		padding-left: 200px;
	}

		img.logo-image {
			width: 85px;
		}
}