#mobileNav { display: none; width: 100%; height: 100%; background: var(--darkBlue); position: fixed; top: 100px; left: 0; z-index: 1000; padding: 60px 20px; box-sizing: border-box; }
	#mobileNav.show { display: block; }
	#mobileNav.sticky { top: 60px; }
	#mobileNav .myAccount { margin: 0 0 60px 0; }
		#mobileNav .myAccount a { color: #fff; font-family: 'Mona-Sans', sans-serif; font-size: 16px; display: flex; justify-content: flex-start; align-items: center; }
			#mobileNav .myAccount a span { padding: 0 0 0 15px; margin: 0 0 0 15px; border-left: 1px solid var(--grey); }
	#mobileNav .navLinks .navLink { border-top: 1px solid var(--stroke); padding: 5px 0 0 0; margin: 0 0 40px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
		#mobileNav .navLinks .navLink.on { border-top: 1px solid var(--purple); }

	#mobileNav .purpleLink { background: var(--purple); color: #fff; padding: 10px 15px; border-radius: 100px; text-align: center; display: inline-block; margin: 0 0 15px 0; }
		#mobileNav .purpleLink:hover { background: #fff; color: var(--purple); }
	#mobileNav .navLinks .navLink .navChilds { display: none; cursor: pointer; width: 100%; border-radius: 8px; background: rgba(255, 255, 255, 0.05); margin: 20px 0 0 0; padding: 20px; }
	#mobileNav .navLinks .navLink.on .navChilds { display: block; }
	#mobileNav .navLinks .navLink .mainLink { color: var(--stroke); font-family: 'Mona-Sans', sans-serif; text-transform: uppercase; display: block; width: 80%; font-size: 14px; }
	#mobileNav .navLinks .navLink.on .mainLink { color: var(--purple); }
	#mobileNav .navLinks .navLink .mainLink::before { content: '\2022'; opacity: 0; width: 0; display: inline-block; font-size: 18px; -webkit-transition: all 350ms ease; -moz-transition: all 350ms ease; transition: all 350ms ease; }
	#mobileNav .navLinks .navLink.on .mainLink::before { opacity: 1; margin: 0 11px 0 0; height: 5px; width: 5px; }

	#mobileNav .navLinks .navLink .childNavLink { margin: 0 0 15px 0; }
		#mobileNav .navLinks .navLink .childNavLink:last-child { margin: 0; }
		#mobileNav .navLinks .navLink .childNavLink a { font-size: 12px; text-transform: none; font-weight: 600; }
		#mobileNav .navLinks .navLink .childNavLink.on a { color: var(--purple); }
	#mobileNav .navLinks .navLink .caret { background: url(/gfx/caret-down.png) right center no-repeat; width: 20%; height: 7px; cursor: pointer; }
	#mobileNav .navLinks .navLink.on .caret { background: url(/gfx/caret-down-purple.png) right center no-repeat; }
	#mobileNav .navLinks .navLink.on:hover .caret { background: url(/gfx/caret-up.png) right center no-repeat; }

	#mobileNav .langDiv { margin: 60px 0 0 0; display: flex; justify-content: flex-start; align-items: center; }
		#mobileNav .langDiv img { display: block; margin: 0 20px 0 0; }
		#mobileNav .langDiv a { color: var(--stroke); font-size: 14px; }
		#mobileNav .langDiv .divider { height: 20px; width: 1px; background: var(--stroke); display: block; margin: 0 5px; }
		#mobileNav .langDiv a.on { color: var(--purple); }
	#mobileNav .signInDiv { margin: 60px 0 0 0; }
		#mobileNav .signInDiv a { color: #fff; padding: 20px 0; width: 100%; text-align: center; border-radius: 100px; border: 0.5px solid #fff; display: block; font-size: 14px; }
			#mobileNav .signInDiv a:focus,
			#mobileNav .signInDiv a:hover { background: var(--purple); }

@media screen and (max-width: 680px) {
	#mobileNav { top: 80px; }
}