/* NUUNNAV CSS*/

.nuunnavbutton {display: none; width: 38px; background: initial; padding: 0; height: 40px; box-sizing: border-box; border-radius: 0; cursor: pointer; position: fixed; z-index: 2500; top: 48px; right: 3%;}
.nuunnavbutton .navline {height: 3px; width: 100%; box-sizing: border-box; margin-bottom: 7px; border-radius: 5px; background: #000; opacity: 1; transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;}
.nuunnavbutton.up .navline {background: #000;}
.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(0px); background: #000;}
.nuunnavbutton.crossed .navline.mid {opacity: 0;}
.nuunnavbutton.crossed .navline.bot {margin-left: 0; width: 100%; transform: rotate(-135deg) translateY(-1px) translateX(35px); background: #000;}

#nuunnav {display: none; padding-top: 0px; padding-bottom: 50px; position: fixed; overflow-y: auto; top: 0; width: 100%; max-width: 500px; background: #fff; 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: 20px; display: inline-block; width: 100%; position: relative; overflow: hidden;}
#nuunnav li a {font-family: 'latoregular'; color: #727272; 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: #D8232A; font-family: 'latoregular'; text-decoration: none;}
#nuunnav li a:hover {color: #D8232A;}
#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-bottom: 1px solid #727272;}
#nuunnav ul.level_1 > li > a {display: inline-block; font-size: 2.4rem; float: left; clear: left; margin: 0; padding: 4px 0 20px 0px; width: calc(100% - 55px);}
#nuunnav ul.level_1 > li.submenu > a {margin-right: 0px; float: left; clear: left;}
#nuunnav ul li.submenu .subtoggler {width: 50px; height: 50px; position: relative; top:3px; display: flex; align-items: center; justify-content: center; float: left; cursor: pointer; background: url(../graphics/nuunnav-subarrow.svg) center no-repeat;}
#nuunnav ul.level_2 li.submenu .subtoggler {height: 34px;}
#nuunnav ul li.submenu .subtoggler .subtoggline1 {opacity: 0; width: 18px; height: 2px; background: #727272;}
#nuunnav ul li.submenu .subtoggler .subtoggline2 {opacity: 0; width: 18px; height: 2px; background: #727272; 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: block; width: 100%; position: absolute; top: 0; right: -100%;}
#nuunnav ul.level_2 > li > a {font-family: 'latoregular'; display: inline-block; font-size: 2rem; float: left; clear: left; padding: 5px 0 5px 0px;}
#nuunnav ul.level_2 li a.active {color: #D8232A; font-family: 'latoregular'; text-decoration: underline;}
#nuunnav ul.level_2 li a:hover {color: #D8232A;}
#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: 'latoregular'; 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: #D8232A; font-family: 'latoregular'; text-decoration: underline;}
#nuunnav ul.level_3 li a:hover {color: #D8232A;}

#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: #D8232A; font-family: 'latoregular'; text-decoration: underline;}
#nuunnav ul.level_4 li a:hover {color: #D8232A;}

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