@charset "utf-8";
/* Navigation when a user in NOT logged in (AKA Logged Out) */
/* Z INDEX GUIDE */
/*
Loading animation = 101
Menus = 100
Popup shadow layer = 99
Navigation = 98
Shadow layer behind dropdowns = 97
Body Content = 2
Animation layer = 1
*/

.nav-top__2020,.nav-bottom__2020,.navsub-left__2020,.navsub-right__2020,.animated-bg__2020,.nav-profile-dropdown__2020,#navnewsdropdown__2020 {
	display:none; /* Ensures that the navigation designs for users that are logged into the game is not visible if a user is not logged in. */
}

.container::after { /* This is needed so that bottom margins placed on the last element in the page container actually extend the height of the page container, rather than spilling over and creating unfilled space between the page container and the footer. */
	content:'';
	display:block;
	height:1px;
	width:100%;
}

/* HEADER */
.nav-top-logoff__2020 {
	display:block;
	position:fixed;
	top:0;
	width:100%;
	overflow:hidden;
	z-index:98;
	background:#fed123;
	border-bottom: 3px solid #faa819;
}

.nav-top-pattern__2020 {
	position:absolute;
	top:-10px;
	width:100%;
	height:150%;
	z-index:-2;
	background: url(../basic/images/pattern-basic.svg) center -10px;
	background-size:121px 58px;
}
.nav-logo__2020 { /* Formely np-logo */
	background: url(../basic/images/np-logo-glow.png) center center no-repeat;
	background-size:100%;
	width:133px;
	height:45px;
	position:fixed;
	cursor:pointer;
}

.nav-explore-icon__2020 {
	background: url(../basic/images/explore-icon.svg) center center no-repeat;
    background-size: auto;
}
.nav-games-icon__2020 {
	background: url(../basic/images/games-icon.svg) center center no-repeat;
    background-size: auto;
}
.nav-news-icon__2020 {
	background: url(../basic/images/games-icon.svg) center center no-repeat;
	background-size: auto;
}
.nav-community-icon__2020 {
	background: url(../basic/images/community-icon.svg) center center no-repeat;
    background-size: auto;
}
.nav-forum-icon__2020 {
	background: url(../basic/images/community-icon.svg) center center no-repeat;
    background-size: auto;
}
.nav-premium-icon__2020 {
	background: url(../basic/images/premium-icon.svg) center center no-repeat;
    background-size: auto;
}
.nav-facebook-icon__2020 {
	background:url(../../../images/social/facebook.svg?v=2) center center no-repeat;
	background-size:100%;
	display:inline-block;
}
.nav-twitter-icon__2020 {
	background:url(../../../images/social/twitter.svg) center center no-repeat;
	background-size:100%;
	display:inline-block;
}
.nav-instagram-icon__2020 {
	background:url(../../../images/social/instagram.png) center center no-repeat;
	background-size:100%;
	display:inline-block;
}

/* DROPDOWN MENU */
.logoff-dropdown__2020 {
	display:none;
	position:fixed;
	width:280px;
	/*left:-280px;*/
	height:auto; /*TEMP*/
	background:#faed6c; /*TEMP*/
	z-index:98;
	overflow:auto; /*Will make it scrollable when the contents are taller than the height*/
}

.logoff-dropdown__2020 ul {
	position:relative;
	margin:0;
	list-style-type:none;
	width:100%;
	padding:0;
}

.logoff-dropdown__2020 ul li {
	color: #363636;
    font-family: "Cafeteria", 'Arial Bold', sans-serif;
	font-size:18pt;
	float:none;
	text-align:left;
	width:100%;
	margin:0;
	border-bottom: 3px solid #faa819;
	padding: 8px 0px;
	height:auto;
}
.logoff-dropdown__2020 ul li:hover {
	background:#fed123;
	cursor:pointer;
}



/* LOGIN BUTTON */
.nav-login-button__2020 {
	position:fixed;
	right:10px;
	height:25px;
	width:100px;
	background: #48f938;
	background: -webkit-linear-gradient(#48f938, #13b310);
	background: -o-linear-gradient(#48f938, #13b310);
	background: linear-gradient(#48f938, #13b310);
	border-radius: 15px;
	-webkit-box-shadow: inset 0px 0px 0px 1px rgba(2, 255, 0),inset 0px -4px 0px 3px rgba(44, 111, 0),inset 0px 2px 0px 1px rgba(255,255,255,1),inset 0px -7px 0px 1px rgba(153, 255, 150);
	-moz-box-shadow: inset 0px 0px 0px 1px rgba(2, 255, 0),inset 0px -4px 0px 3px rgba(44, 111, 0),inset 0px 2px 0px 1px rgba(255,255,255,1),inset 0px -7px 0px 1px rgba(153, 255, 150);
	box-shadow: inset 0px 0px 0px 1px rgba(2, 255, 0),inset 0px -4px 0px 3px rgba(44, 111, 0),inset 0px 2px 0px 1px rgba(255,255,255,1),inset 0px -7px 0px 1px rgba(153, 255, 150);
	/*border: #000000 solid 2px;*/
	padding:7px 0px 10px;
}
	.nav-login-button__2020:hover {
		cursor:pointer;
	}
	.nav-login-button-text__2020 {
		color: #092b04;
    	font-family: "Cafeteria", 'Arial Bold', sans-serif;
		text-align:center;
		position:relative;
		width:90%;
		height:auto;
		margin: -2px 5% auto auto;
		font-size:17pt;
	}

/* FOOTER */
.footer__2020 {
	display:block;
	position:relative;
	width:100%;
	height:auto;
	overflow:hidden;
	background:#fed123;
	border-top: 3px solid #faa819;
}
.footer-pattern__2020 {
	position:absolute;
	top:-10px;
	width:100%;
	height:150%;
	background: url(../basic/images/pattern-basic.svg) center -10px;
	background-size:121px 58px;
}
.footer-logo__2020 {
	position:relative;
	background: url(../basic/images/np-logo-glow.png) center center no-repeat;
	background-size:100%;
	width:160px;
	height:54px;
	margin: 10px auto;
}
.footer-copyright__2020 {
	position:relative;
	text-align:center;
	margin:auto auto 10px;
	max-width:90%;
	font-size:10pt;
	font-family: "MuseoSansRounded700", 'Arial Bold', sans-serif;
	color: #363636;
}
.footer-links__2020 {
	position:relative;
	margin:auto auto 20px;
	max-width:90%;
	width:230px;
	font-size:16pt;
}
.footer-link__2020 {
	font-family: "Cafeteria", 'Arial Bold', sans-serif;
	display:inline-block;
	max-width:50%;
	margin:auto 10px;
	text-align:center;
	cursor:pointer;
	text-decoration:none;
	color: #363636;
}
.footer__2020 a {
	text-decoration:none;
	color: #363636;
}
.footer-link__2020:hover {
	transform:scale(1.1);
}

/* MEDIA QUERIES */
@media screen and (max-width:679px) { /* When most navigation is hidden in a dropdown  */
	.nav-top-logoff__2020 {
		height:50px; /* Reduce the height of the top navigation bar for mobile devices */
	}
	.logoff-dropdown__2020 {
		top:53px;
		overflow:auto;
	}
	.container::before {
    	height: 50px; /* Keeps the header from covering body content */
	}
	.nav-logo__2020 {
		top:2px; /* Since the header is 15px shorter, the distance from top should be 1/2 that, or -8px */
		margin-left:-66px; /* in order to center the logo on screen, the margin left should be negative half of the image width*/
		left:49%;
	}
	#navmenu-icon__2020 {
		position:fixed;
		top:12px;
		left:20px;
		width:25px;
		height:25px;
		background:url(../basic/images/nav-icon.svg) center center no-repeat;
		background-size:100%;
	}
	#navmenu-icon__2020:hover {
		/*transform:scale(1.1);*/
		width:30px;
		height:30px;
		top:10px;
		left:18px;
		cursor:pointer;
	}
	
	.nav-login-button__2020 {
		top:5px;
	}
	
	.nav-top-logoff__2020 .nav-community__2020,.nav-top-logoff__2020 .nav-games__2020,.nav-top-logoff__2020 .nav-explore__2020,.nav-top-logoff__2020 .nav-news__2020,.nav-top-logoff__2020 .nav-premium__2020  {
		display:none;
	}
	.logoff-dropdown__2020 .nav-explore-icon__2020,.logoff-dropdown__2020 .nav-games-icon__2020,.logoff-dropdown__2020 .nav-news-icon__2020,.logoff-dropdown__2020 .nav-community-icon__2020,.logoff-dropdown__2020 .nav-premium-icon__2020 {
		display:inline-block;
		height:35px;
		width:40px;
		margin-left:15px;
		margin-bottom:-3px;
	}
	.nav-explore-icon__2020:hover,.nav-games-icon__2020:hover,.nav-news-icon__2020:hover,.nav-community-icon__2020:hover,.nav-forum-icon__2020:hover,.nav-premium-icon__2020:hover,.nav-facebook-icon__2020:hover,.nav-twitter-icon__2020:hover,.nav-instagram-icon__2020:hover {
		transform:rotate(-10deg);
	}
	.logoff-dropdown__2020 .nav-news-icon__2020 {
		background:#9E9E9E;
	}
	.nav-logoff-dropdown-community__2020 {
		position:relative; /* Needed so that the down arrow to expand the community section can be absolutely positioned. */
	}
	.nav-logoff-dropdown-forum__2020,.nav-logoff-dropdown-social__2020 {
		background:#fed123;
	}
	.nav-logoff-dropdown-forum__2020:hover,.nav-logoff-dropdown-social__2020:hover {
		background:#faed6c !important;
	}
	.nav-logoff-dropdown-community-hide__2020 {
		width:25px;
		height:15px;
		background:url(../basic/images/arrow-down.svg) center center no-repeat;
		background-size:100%;
		position:absolute;
		right:20px;
		top:20px;
		transition: all 0.5s;
	}
	.logoff-dropdown__2020 .nav-facebook-icon__2020,.logoff-dropdown__2020 .nav-twitter-icon__2020,.logoff-dropdown__2020 .nav-instagram-icon__2020 {
		height:35px;
		width:35px;
		margin-bottom:-3px;
		margin-right:5px;
	}
	.logoff-dropdown__2020 .nav-forum-icon__2020 {
		display:inline-block;
		height:35px;
		width:40px;
		margin-bottom:-3px;
	}
	.logoff-dropdown__2020 .nav-forum-icon__2020,.logoff-dropdown__2020 .nav-twitter-icon__2020 {
		margin-left:50px;
	}
	.logoff-dropdown__2020 .nav-text__2020 {
		display:inline-block;
		margin-left:15px;
		position:absolute;
		margin-top:5px;
	}
}

@media screen and (max-width:400px) {
	.nav-login-button__2020 {
		width:25%;
	}
}

@media screen and (min-width:680px) { /* When most navigation is visible */
	
	.nav-top-logoff-grid__2020 {
		display:grid;
		position:absolute;
		grid-template-columns:auto 90px 60px 60px 65px 60px 115px;
		grid-template-rows:auto;
		column-gap:10px;
		height:55px;
		width:100%;
		top:8px;
		z-index:-1;
	}
	.nav-explore__2020:hover,.nav-games__2020:hover,.nav-news__2020:hover,.nav-community__2020:hover,.nav-premium__2020:hover {
		transform:scale(1.1);
		cursor:pointer;
	}
	.nav-community-icon__2020:hover,.nav-games-icon__2020:hover,.nav-explore-icon__2020:hover,.nav-premium-icon__2020:hover,.nav-news-icon__2020:hover {
		transform:rotate(-10deg);
	}
	.nav-explore__2020 {
		grid-column:2/3;
		grid-row:1/2;
	}
	.nav-games__2020 {
		grid-column:3/4;
		grid-row:1/2;
	}
	.nav-news__2020 {
		grid-column:4/5;
		grid-row:1/2;
	}
	.nav-community__2020 {
		grid-column:5/6;
		grid-row:1/2;
	}
	.nav-premium__2020 {
		grid-column:6/7;
		grid-row:1/2;
	}
	.nav-login-button__2020 {
		top:12px;
	}
	.nav-text__2020 {
		color: #363636;
		font-family: "Cafeteria", 'Arial Bold', sans-serif;
		text-align:center;
	}
	
	.nav-top-logoff__2020 {
		height:65px;
	}
	.container::before {
    	height: 65px; /* Keeps the header from covering body content */
	}
	.nav-logoff-dropdown__2020 {
		top:68px;
	}
	.nav-logo__2020 {
		left:15px;
		top:10px; 
	}
	.logoff-dropdown__2020 {
		display:none !important;
	}
	
}


@media screen and (min-width:680px) and (max-width:1009px) { /* When most navigation is visible, but icons stacked over text  */
	.nav-community-icon__2020,.nav-games-icon__2020,.nav-explore-icon__2020,.nav-premium-icon__2020,.nav-news-icon__2020 {
		width:100%; /*The image should span the whole grid space width to avoid images becoming unaligned when switching between media queries. This is a bug on Chrome when using margin:auto; to align contents within a grid space*/
		height:32px;
	}
}
@media screen and (min-width:1010px) { /* When most navigation is visible, but icons next to text  */
	.nav-top-logoff-grid__2020 {
		grid-template-columns:auto 165px 110px 100px 175px 120px 115px;
		top:12px;
		height:50px;
	}
	.nav-text__2020 {
		position:absolute;
		margin-top:8px;
		display:inline-block;
		width:auto;
		font-size:17pt;
	}
	.nav-community-icon__2020,.nav-games-icon__2020,.nav-explore-icon__2020,.nav-premium-icon__2020,.nav-news-icon__2020 {
		height:40px;
		display:inline-block;
	}
	.nav-community__2020 {
		position:relative;
	}
	.nav-community-icon__2020 {
		width:50px;
		margin-right:10px;
	}
	.nav-logoff-community-hide__2020 {
		width:16px;
		height:10px;
		background:url(../basic/images/arrow-down.svg) center center no-repeat;
		background-size:100%;
		display:inline-block;
		position:absolute;
		top:18px;
		right:10px;
	}
	.nav-community-dropdown__2020 {
		width:155px;
		height:150px;
		position:absolute;
		bottom:-150px;
		background:#fff;
	}
	.nav-games-icon__2020 {
		width:34px;
		margin-right:10px;
	}
	.nav-explore-icon__2020 {
		width:36px;
		margin-right:10px;
	}
	.nav-news-icon__2020 {
		width:36px;
		margin-right:10px;
	}
	.nav-premium-icon__2020 {
		width:40px;
		margin-right:10px;
	}
}