@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-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%;
}

.container::before {
    height: 65px;
}

body {
    /*background-color:#D7D7D7;*/
    background-image:url(../basic/images/bg-pattern.svg);
    background-size:200px 200px;
}

/* Top Navigation */

.nav-dropdown-arrow-rotate {
	transform:rotate(-180deg);
}

.nav-logo__2020 {
	position:absolute;
    cursor:pointer;
    width:135px;
    height:100%;
    top:0;
    left:20px;
    background-image:url(../basic/images/v3/np-logo-R.svg);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}


.nav-top-out__2020 a, .nav-dropdown-out__2020 a {
    text-decoration:none;
}
.nav-top-out__2020 {
    height:65px;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:98;
    background:#fed123;
    background: -moz-linear-gradient(0deg, rgba(254,240,23,1) 0%, rgba(251,199,0,1) 60%);
    background: -webkit-linear-gradient(0deg, rgba(254,240,23,1) 0%, rgba(251,199,0,1) 60%);
    background: linear-gradient(0deg, rgba(254,240,23,1) 0%, rgba(251,199,0,1) 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fef017",endColorstr="#fbc700",GradientType=1);
	border-bottom: 3px solid #faa819;
}
#navmenu-icon__2020 {
    background-image: url(../basic/images/nav-icon.svg);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    width:25px;
    height:25px;
    position:absolute;
    left:20px;
    top:calc(50% - 12px);
    display:none;
}
.navmenu-icon-x {
    background-image:url(../basic/images/nav-x.svg) !important;
}
#navmenu-icon__2020:hover {
    transform:scale(1.1);
}
.nav-top-grid__2020 {
    display:grid;
    justify-content:center;
    align-items:center;
    width: calc(100% - 180px);
    max-width: 700px;
    margin-right: 10px;
    margin-left: auto;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr 120px 120px;
    grid-gap:10px;
}
.nav-top-grid__2020 h3 {
    font-family: "Cafeteria", 'Arial Bold', sans-serif;
    font-size:19pt;
    text-align:center;
    text-transform: uppercase;
    color: #363636;
    margin:0;
}
.nav-top-out__2020 h4 {
    text-decoration:none;
    font-family: "Cafeteria", 'Arial Bold', sans-serif;
    font-size:20px;
    text-align:center;
    /*text-transform: uppercase;*/
}
.nav-tab-button__2020 {
    height:calc(100% + 10px);
    width:100%;
    background:unset;
    border-image-slice:30 12 30 12 fill;
    border-image-width:27px 12px 27px 12px;
    border-image-outset:0px 0px 0px 0px;
    border-image-repeat:stretch stretch;
    border-image-source:url(../common/signup/images/nav-button.png);
    box-sizing:border-box;
    padding:10px;
    font-family: "Cafeteria", 'Arial Bold', sans-serif;
    font-size:19pt;
    text-transform: uppercase;
    outline:none;
    color: #363636;
    cursor:pointer;
}
.nav-tab-button__2020:hover {
    border-image-source:url(../common/signup/images/nav-button-hover.png);
}
.nav-tab-button__2020:active {
    border-image-source:url(../common/signup/images/nav-button-down.png);
}

#communitydropdownOut__2020, #merchdropdownOut__2021 {
    background-color: #fffacd;
    color: #363636;
    border: 2px solid #faa819;
    position: absolute;
    width: 180px;
    top: 100%;
}
#communitydropdownOut__2020{
    left: 50%;
    margin-left: -90px;
}
#merchdropdownOut__2021 {
    left: 75%;
    margin-left: -90px;
}
#communitydropdownOut__2020 a, #merchdropdownOut__2021 a, .nav-dropdown-out__2020 a {
    color: #363636;
}
#communitydropdownOut__2020 ul, #merchdropdownOut__2021 ul, .nav-dropdown-out__2020 ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#communitydropdownOut__2020 ul li, #merchdropdownOut__2021 ul li, .nav-dropdown-out__2020 ul li {
    border-bottom: 2px solid #faa819;
}
#navdropdownout__2020 ul li {
    padding:10px;
    box-sizing:border-box;
    position:relative
}
#communitydropdownOut__2020 ul li:hover, #merchdropdownOut__2021 ul li:hover, .nav-dropdown-out__2020 ul li:hover {
    background-color:#ffd35e;
}
#navdropdownout__2020 ul li h3 {
    font-family: "Cafeteria", 'Arial Bold', sans-serif;
    font-size:20px;
    margin:0;
}
#navdropdownout__2020 ul li .nav-dropdown-arrow__2020 {
    top:calc(50% - 9px);

}
.community-dropdown-out-button, .merch-dropdown-out-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.community-dropdown-out-button:hover, .merch-dropdown-out-button:hover {
    transform:scale(1.1);
	cursor:pointer;
}
.nav-dropdown-arrow__2020 {
	width:18px;
	height:18px;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	margin-left:10px;
    transition: all 0.25s;
    background-image: url(../basic/images/dropdown-arrow.svg);
}
.nav-community__2020, .nav-merch__2021 {
    position: relative;
    height:100%;
}
.nav-community__2020 ul li, .nav-merch__2021 ul li {
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
}
.nav-community__2020 h4, .nav-merch__2021 h4 {
    margin: 0 0 0 10px;
}
.nav-top-out__2020 .nav-facebook-icon, .nav-top-out__2020 .nav-twitter-icon, .nav-top-out__2020 .nav-instagram-icon, .nav-top-out__2020 .nav-youtube-icon, .nav-top-out__2020 .nav-merchshop-icon {
    background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
.nav-dropdown-out__2020 .nav-dropdown-arrow__2020 {
    position:absolute;
    right:20px;
}
/* Dropdown Menu */
.nav-dropdown-out__2020 {
    position:fixed;
    left:0;
    top:50px;
    z-index: 98;
    background-color: #fffacd;
    color: #363636;
    border: 2px solid #faa819;
    width:240px;
}

#dropdownoutcommunitySection__2020, #dropdownoutmerchSection__2021 {
    background-color:#faa819;
}
#dropdownoutcommunitySection__2020:hover {
    background-color: #ffd35e;
}

#dropdownoutcommunitySection__2020 .nav-facebook-icon, #dropdownoutcommunitySection__2020 .nav-twitter-icon, #dropdownoutcommunitySection__2020 .nav-instagram-icon, #dropdownoutcommunitySection__2020 .nav-youtube-icon, #communitydropdownOut__2020 .nav-facebook-icon, #communitydropdownOut__2020 .nav-twitter-icon, #communitydropdownOut__2020 .nav-instagram-icon, #communitydropdownOut__2020 .nav-youtube-icon, #dropdownoutmerchOut__2021 .nav-merchshop-icon, #merchdropdownOut__2021 .nav-merchshop-icon {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    margin: 0px 5px;
    width: 35px;
    height: 35px;
}

li#dropdownoutmerchSection__2021 {
    padding: 0 !important;
    box-sixing: border-box;
}

#dropdownoutmerchSection__2021 ul li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    box-sixing: border-box;
    border: none;
}

#dropdownoutmerchSection__2021 ul li:hover {
    background-color: #ffd35e;
}

#dropdownoutmerchSection__2021 ul li h4 {
    text-decoration: none;
    font-family: "Cafeteria", 'Arial Bold', sans-serif;
    font-size: 20px;
    margin: 0;
    padding: 10px;
}

/* Bottom Navigation */
.nav-bottom-out__2020 {
    position:fixed;
	bottom:0;
	width:100%;
    height:65px;
    z-index:97;
    background:#fed123;
    background: -moz-linear-gradient(0deg, rgba(254,240,23,1) 0%, rgba(251,199,0,1) 60%);
    background: -webkit-linear-gradient(0deg, rgba(254,240,23,1) 0%, rgba(251,199,0,1) 60%);
    background: linear-gradient(0deg, rgba(254,240,23,1) 0%, rgba(251,199,0,1) 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fef017",endColorstr="#fbc700",GradientType=1);
    border-top: 3px solid #faa819;
    display:none;
    justify-content:center;
    align-items:center;
}
.nav-bottom-pattern__2020 {

}
.nav-bottom-button__2020 {
    width:100%;
    height:90%;
    max-width:300px;
    /*margin:0px 10px;*/
    margin:auto;
    display:inline-block;
    box-sizing:border-box;
    background:unset;
    border-image-slice: 30 24 30 24 fill;
    border-image-width: 30px 24px 30px 24px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url(../common/signup/images/login-button.svg);
    padding: 10px;
    background: unset;
    text-transform: uppercase;
    outline:none;
    font-family: "Cafeteria", 'Arial Bold', sans-serif;
    font-size:20px;
    text-aligN:center;
}


/* Footer */
.footer__2020 {
	display:block;
	position:relative;
	width:100%;
	height:auto;
	overflow:hidden;
	background:#fed123;
    border-top: 3px solid #faa819;
    z-index:2;
}
.footer-pattern__2020,.nav-bottom-pattern__2020,.nav-top-pattern__2020 {
	position:absolute;
	top:0;
	left:0;
    width:100%;
    height:100%;
	background-image:url(../common/signup/images/nav-stars.svg);
	background-size:auto 100%;
	background-position:left center;
    background-repeat:no-repeat;
    z-index:-1;
}

.footer-social__2020 {
	display:flex;
	justify-content:center;
}
.footer-facebook-icon__2020,.footer-twitter-icon__2020,.footer-instagram-icon__2020,.footer-youtube-icon__2020, .footer-merchshop-icon__2021 {
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	display:inline-block;
	margin:10px 5px;
	width:40px;
	height:40px;
}
.footer-facebook-icon__2020, .nav-top-out__2020 .nav-facebook-icon, #dropdownoutcommunitySection__2020 .nav-facebook-icon {
	background-image: url(../../../images/social/facebook.svg);
}
.footer-twitter-icon__2020, .nav-top-out__2020 .nav-twitter-icon, #dropdownoutcommunitySection__2020 .nav-twitter-icon {
	background-image: url(../../../images/social/twitter.svg);
}
.footer-instagram-icon__2020, .nav-top-out__2020 .nav-instagram-icon, #dropdownoutcommunitySection__2020 .nav-instagram-icon {
	background-image: url(../../../images/social/instagram.png);
}
.footer-youtube-icon__2020, .nav-top-out__2020 .nav-youtube-icon, #dropdownoutcommunitySection__2020 .nav-youtube-icon {
	background-image: url(../../../images/social/youtube.svg);
}
.footer-merchshop-icon__2021, .nav-top-out__2020 .nav-merchshop-icon, #dropdownoutmerchSection__2021 .nav-merchshop-icon {
    background-image: url(../basic/images/merch-icon.png);
}

.footer-copyright__2020 {
	position:relative;
	text-align:center;
	margin:20px 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:350px;
	width:90%;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	font-size:16pt;
}
.footer-link__2020 {
	display:inline-block;
	max-width:50%;
	margin:auto 10px;
	text-align:center;
	cursor:pointer;
	text-decoration:none;
	font-family: "Cafeteria", 'Arial Bold', sans-serif;
    color: #363636;
}
.footer__2020 a {
	text-decoration:none;
	color: #363636;
}
.footer-link__2020:hover {
	transform:scale(1.1);
}
@media screen and (min-width:751px) { /* Bottom Nav is Hidden */
    #navdropdownout__2020 {
        top:65px;
    }
}
@media screen and (max-width: 750px) { /* Bottom Nav is Visible */
    .nav-bottom-out__2020 {
        display:flex;
    }
    .nav-top-out__2020 {
		height:50px; /* Reduce the height of the top navigation bar for mobile devices */
	}
    .nav-logo__2020 {
        left:calc(50% - 67px);
    }
    .nav-top-grid__2020 {
        display:none;
    }
    #navdropdownout__2020 {
        top:50px;
    }
    .footer__2020 {
        /*display:none;*/
        margin-bottom:65px;
	}
	.footer-navhidden__2020 {
		margin-bottom:0 !important;
    }
    #navmenu-icon__2020 {
        display:block;
    }
    .container::before {
        height: 50px;
    }
}