/* NUUNNAV CSS*/

.nuunnavbutton {display: none; width: 36px; border: 3px solid #FFCD00; background: initial; padding: 6px 7px; height: 34px; box-sizing: border-box; border-radius: 5px; cursor: pointer; position: fixed; z-index: 2500; top: 29px; right: 5%;}
.nuunnavbutton .navline {height: 3px; width: 16px; box-sizing: border-box; margin-bottom: 3px; border-radius: 5px; background: #FFCD00; opacity: 1; transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;}
.nuunnavbutton .navline:last-of-type {margin-bottom: 0;}
.nuunnavbutton .navline.mid {opacity: 1;}
.nuunnavbutton .navline.top {transform: rotate(0); transform-origin: top right;}
.nuunnavbutton .navline.bot {transform: rotate(0); transform-origin: bottom right;}

.nuunnavbutton.crossed .navline.top {transform: rotate(-45deg) translateY(-1px) translateX(-3px); background: #FFCD00;}
.nuunnavbutton.crossed .navline.mid {opacity: 0;}
.nuunnavbutton.crossed .navline.bot {margin-left: 0; width: 100%; transform: rotate(-135deg) translateY(1px) translateX(18px); background: #FFCD00;}

#nuunnav {display: none; padding-top: 0px; padding-bottom: 50px; position: fixed; overflow-y: auto; top: 0; width: 100%; max-width: 500px; background: #3C3C3A; height: 100vh; z-index: 2000; box-sizing: border-box; transition:right 0.4s ease, box-shadow 0.3s ease;}
#nuunnav.open {right: 0 !important; box-shadow: 0px 0px 20px rgba(0,0,0,0.1);}
/*#nuunnav .inside {padding: 0 5% 30px 5%;}*/

#nuunnav .mod_navigation {margin-top: 50px; margin-bottom: 0px; display: inline-block; width: 100%; position: relative; overflow: hidden;}
#nuunnav li a {font-family: 'wonder_unit_sansbold'; color: #FFCD00; text-decoration: none; padding-bottom: 20px; background-position: bottom left; transition: background 0.3s ease;}
#nuunnav ul.level_1 > li > a.active, #nuunnav ul.level_1 > li > a.trail, #nuunnav ul.level_1 > li > a:hover {background: url(../../graphics/nav-bg-line.svg) no-repeat; background-position: bottom left;}
#nuunnav li a.active {color: #D4B038; font-family: 'wonder_unit_sansbold'; text-decoration: none;}
#nuunnav li a:hover {color: #D4B038;}
#nuunnav ul {list-style: none; padding-left: 0; margin-bottom: 0; display: block; width: 100%;}
#nuunnav ul.level_1 {margin: 0;}
#nuunnav ul.level_1 > li {display: inline-block; width: 100%; border-top: 3px solid #AAAAA5;}
#nuunnav ul.level_1 > li > a {display: inline-block; text-transform: uppercase; font-size: 2.4rem; float: left; clear: left; margin: 0; padding: 12px 0 15px 0px; width: calc(100% - 42px);}
#nuunnav ul.level_1 > li.submenu > a {margin-right: 0px; float: left; clear: left;}
#nuunnav ul li.submenu .subtoggler {width: 40px; height: 40px; position: relative; top:3px; display: flex; align-items: center; justify-content: center; float: left; cursor: pointer;}
#nuunnav ul.level_2 li.submenu .subtoggler {height: 34px;}
#nuunnav ul li.submenu .subtoggler .subtoggline1 {opacity: 1; width: 18px; height: 2px; background: #FFCD00;}
#nuunnav ul li.submenu .subtoggler .subtoggline2 {opacity: 1; width: 18px; height: 2px; background: #FFCD00; position: absolute; transform: rotate(90deg); transition: transform 0.3s ease;}
#nuunnav ul li.submenu .subtoggler.down .subtoggline2 {transform: rotate(0deg);}

#nuunnav ul.level_2 {display: none; margin:0;}
#nuunnav ul.level_2 > li > a {font-family: 'wonder_unit_sansregular'; text-transform: uppercase; display: inline-block; font-size: 2.4rem; float: left; clear: left; padding: 5px 0 10px 23px; background: url(../../graphics/nuunnav-subline.svg) top 19px left no-repeat;}
#nuunnav ul.level_2 li a.active {color: #FFCD00; font-family: 'wonder_unit_sansregular'; text-decoration: underline;}
#nuunnav ul.level_2 li a:hover {color: #FFCD00;}
#nuunnav ul.level_2 li.last {padding-bottom: 15px; display: inline-block; width: 100%;}

#nuunnav ul.level_3 {display: none; visibility: visible;}
#nuunnav ul.level_3 > li > a {font-family: 'wonder_unit_sansregular'; display: inline-block; text-transform: none; font-size: 2rem; float: left; clear: left; padding: 5px 0 5px 20px;}
#nuunnav ul.level_3 li a.active {color: #FFCD00; font-family: 'wonder_unit_sansregular'; text-decoration: underline;}
#nuunnav ul.level_3 li a:hover {color: #FFCD00;}

#nuunnav ul.level_4 {display: none;}
#nuunnav ul.level_4 > li > a {display: inline-block; text-transform: none; font-size: 1.5rem; float: left; clear: left; padding: 5px 0 5px 15px;}
#nuunnav ul.level_4 li a.active {color: #FFCD00; font-family: 'wonder_unit_sansregular'; text-decoration: underline;}
#nuunnav ul.level_4 li a:hover {color: #FFCD00;}

@media screen and (max-width: 1099px) {
	.nuunnavbutton {display: block;}
	#nuunnav {display: block;}
}