/* ! NAVIGATIONS  */

/* General for all levels and navs: */
		.nav-list {
		margin: 0;
		padding: 0;
		list-style: none;
		}
		.nav-item {
		position: relative;
		display: inline-block;
		display: block;
		vertical-align: top;
		}
		.nav-link {
		display: block;
		padding: .5em 1em;
		color: inherit;
		text-decoration: none;
		transition: all .2s;
		}
		.nav-link:hover {
		color: inherit;
		text-decoration: none;
		}
		.nav-item[data-nav-status='has-active'] > .nav-link {

		}
		.nav-item[data-nav-status='active'] > .nav-link {

		}



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

	/* ! Main Nav */
	.main-nav {
		display: block;
		/* position: relative; */
		grid-area: navigation;
		padding: 1.75rem 0 0 0;
		margin: 0;

		font-size: 0.875rem;
		font-weight: 500;
		text-transform: uppercase;
	}

	/* Level 1 (horizontal) */
	.main-nav .nav-1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		width: 100%;
		font-weight: 600;
		text-transform: uppercase;
		height: 100%;
	}

	.main-nav .nav-1 > li {
		position: static;
		}
	.main-nav .nav-1 > li:hover {
		z-index: 99;
	}
	.main-nav .nav-1 > li > a {
		display: block;
		padding: 1rem;
		position: relative;
		z-index: 1;
		text-align: center;
		color: #fff;
	}
	.main-nav .nav-1 > li:hover > a {
		z-index: 1000;
		}
	.main-nav .nav-1 > li:hover > a,
	.main-nav .nav-1 > li[data-nav-status='has-active'] > a,
	.main-nav .nav-1 > li[data-nav-status='active'] > a {
		font-weight: 700;
		color: #1fc2de;
	}

	/* 	invisible accessibility triangles assisting diagonal reach to mega menu */
	.main-nav .nav-1 > .has-sub:hover > .nav-link:before,
	.main-nav .nav-1 > .has-sub:hover > .nav-link:after {
		content: '';
		display: block;
		position: absolute;
		top: auto;
		left: auto;
		right: auto;
		bottom: -4.75rem;
		width: 6rem;
		height: 6rem;
		background: pink;
		background: transparent;
		transform: rotate(45deg);

		min-height: 0;
		z-index: 0;
		opacity: 1;
		transition: all .3s;
	}
	.main-nav .nav-1 > .has-sub:hover > .nav-link:before { left: -2rem; right: auto; }
	.main-nav .nav-1 > .has-sub:hover > .nav-link:after { right: -2rem; left: auto; }


	/* Has-subs indicators (chevrons) */
	/* .main-nav .has-sub > .nav-link {
		padding-right: 1.5rem;
	}
		.main-nav .has-sub > .nav-link:after {
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
			right: .25em;
			content: '';
			background: no-repeat right center url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path fill='%23ffffff' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' /></svg>");
			display: block;
			width: 1em;
			height: 1em;
			background-size: 100%;
			transform-origin: center center;
		}
		.main-nav .nav-1 > .has-sub > .nav-link:after {
			transform: rotate(90deg);
		} */

	/* all sub-lists (drop-downs & drop-sides) */
	.main-nav .sub-list {
		display: block;
		position: absolute;
		top: 100%;
		left: auto;
		width: 200px;
		margin: 0;
		padding: 0;

		background-color: #fff;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);

		transition: all .3s;
		z-index: 1000;
	}

	.main-nav li				  > .sub-list { visibility: hidden;  opacity: 0; }
	.main-nav li:hover		> .sub-list { visibility: visible; opacity: 1; }
	.main-nav li:focus-within > .sub-list { visibility: visible; opacity: 1; }

	.main-nav .sub-list .sub-list { left: 100%; }

		/*
	.main-nav :nth-last-child(1) > .nav-2,
		.main-nav :nth-last-child(2) > .nav-2 { right: 0; left: auto; }

		.main-nav :nth-last-child(1) > .nav-2 .nav-list,
		.main-nav :nth-last-child(2) > .nav-2 .nav-list { right: 100%; left: auto; }

		.main-nav :nth-last-child(1) > .nav-2 .has-sub > .nav-link::after,
		.main-nav :nth-last-child(2) > .nav-2 .has-sub > .nav-link::after { transform: scaleX(-1); }
	*/


	/* Level 2 (the only drop-down ) */
	.main-nav .nav-2 {
		top: 100%;
	}
	.main-nav .nav-2 > li {

	}
	.main-nav .nav-2 > li > a {
		padding: .5rem 1rem;
	}
	.main-nav .nav-2 li:hover > a {
		color: #1fc2de;
	}
	.main-nav .nav-2 li[data-nav-status='active'] > a {
		color: #1fc2de;
	}

	/* Level 3, etc. */
	.main-nav .nav-3 {

	}
	.main-nav .nav-3 > li {

	}
	.main-nav .nav-3 > li > a {

	}



	/* 	MEGA Menu */
	.main-nav .mega  {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		margin: 0;
		padding: 1rem 8% 3rem 8%;

		color: #fff;
		background-color: #122c52;
		background-color: rgba(18,44,82, .9);
		box-shadow: 0 -100px rgba(18,44,82, .9);
		border: none;

		transition: all 0s ease-in;
		transform-origin: top center;

		z-index: -1;
		pointer-events: none;

		visibility: hidden; opacity: 0; transform: scale(1);  overflow: hidden;
	}

	.main-nav li:hover		> .mega { visibility: visible; opacity: 1; transform: scale(1); pointer-events: auto; transition-duration: .3s; z-index: 100; }
	.main-nav li:focus-within > .mega { visibility: visible; opacity: 1; transform: scale(1); pointer-events: auto; }

	/* 	Mega Menu sublists */
	.main-nav .mega-container {
		/* max-width: 1440px; */
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		/* flex-direction: column; */
		border-top: 1px solid #ccc;
	}
	.main-nav .mega-container > .sub-list {
		position: relative;
		left: auto;
		top: auto;

		width: 100%;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		border: none;
		background: transparent;

		visibility: visible;
		opacity: 1;
	}

	.main-nav .mega .sub-list {
		width: auto;
		left: auto;
		right: auto;
		top: auto;
		visibility: visible;
		opacity: 1;
		position: relative;
		
		background: none;
		box-shadow: none;
		border: none;
		transform: none;
	}
	.main-nav .mega a {
		padding: .25rem 1rem;
	}
	.main-nav .mega li[data-nav-status="active"] > a {
		color: inherit;
	}


	.main-nav .mega .nav-2 > li {
		min-width: 200px;
		max-width: 350px;
	}

	.main-nav .mega .nav-3 {
		position: absolute;
		top: -77px;
		left: 100%;
		width: 300px;
		text-transform: none;
		margin-left: 1rem;
	}
	.main-nav .mega .nav-3:before {
		content: "CONTESTS";
		display: block;
		position: relative;
		width: 300px;
		padding: 0 0 0 1rem;
		margin: 0 0 1.5rem 0;
		font-size: 1.25rem;
		color: #1fc2de;
	}

	/* injected subnav */
	.main-nav .mega-content {
		width: 40%;
		margin-top: -50px;
	}
		.main-nav .mega-content .nav-list {
			display: block;
		}
		.main-nav .mega-content .nav-list .nav-link {
			padding: .5rem 1rem;
			text-align: left;
			color: #1fc2de;
			font-size: 130%;
		}


	.main-nav .mega-title {
		width: 100%;
		padding: 0 1rem;
		margin: 1rem 0;
		color: #1fc2de;
		font-size: 30px;
		font-weight: bold;
		text-transform: none;
	}

	/* Make a Donation */
	#navigation-1-60 > a {
		padding: 0.75rem 1.5rem 0.625rem 1.5rem;
		margin-top: 0.25rem;
		border-radius: 2em;
		background: #ed003c;
		color: #fff;
	}
	#navigation-1-60 > a:hover {
		background: #f34f97;
	}





	/* ! Footer navigation */
	.site-footer ul#fnav {
		display: flex;
		position: relative;
		flex-wrap: nowrap;
		grid-area: footer-nav;
		width: 100%;
		padding: 1.25rem 0;
		border-bottom: 1px solid #f3f4f4;
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
	}
		.site-footer ul#fnav li {
			display: block;
			position: relative;
			flex-grow: 1;
		}
		.site-footer ul#fnav li#fnav-60 { display: none; }
		.site-footer ul#fnav li > a.nav-link {
			padding: 0;
			line-height: 40px;
			color: #0d2c54;
		}
		.site-footer ul#fnav li ul.sub-list {
			display: none;
		}

}

@media only screen and  (max-width: 768px) {
	
	.main-nav ul.nav-1 { display: none; }
	.main-nav.show > ul.nav-1 {
		display: block;
		position: absolute;
		top: 100px;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0px 0px 5px #666;
		font-size: 1.25rem;
	}
	.main-nav.show > ul.nav-1 p.mega-title { display: none; }
	.main-nav.show > ul.nav-1 > li { border-top: 1px solid #333; }
	.main-nav.show > ul.nav-1 > li:first-child { border: none; }
	.main-nav.show > ul.nav-1 > li > div.mega.sub-list { display: none; }
	.main-nav.show > ul.nav-1 > li > div.mega.sub-list .mega-container { padding: 0; background: #0d2c54; color: #fff; }
	.main-nav.show > ul.nav-1 > li.active > div.mega.sub-list {
		display: block;
		position: relative;
	}
	.main-nav.show > ul.nav-1 > li.active > div.mega.sub-list ul.nav-2 > li { border-top: 1px solid #fff; }
	.main-nav.show > ul.nav-1 > li.active > div.mega.sub-list ul.nav-3 { background: #1fc2de; color: #0d2c54; }
	.main-nav.show > ul.nav-1 > li.active > div.mega.sub-list ul.nav-3 > li { border-top: 1px solid #0d2c54; }
	.main-nav.show > ul.nav-1 > li.active > div.mega.sub-list ul.nav-3 > li a { padding-left: 2.25rem; }
	.main-nav.show > ul.nav-1 > li.active > div.mega.sub-list div.mega-content { display: none; }
	
	
	.site-footer ul#fnav { display: none; }
	
}
 /* ! end of responsive nav */