#main-menu { clear: both; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
/* Mobile menu toggle button */
.main-menu-btn { width: 100%; position: relative; display: inline-block; height: 3.8rem; white-space: nowrap; overflow: hidden; cursor: pointer; margin-bottom: -4px; }
/* hamburger icon */
.main-menu-btn-icon, .main-menu-btn-icon::before, .main-menu-btn-icon::after { position: absolute; top: 1.75rem; left: calc(50% - 1.25rem); height: .25rem; width: 2.5rem; background: #fff; transition: all 0.5s; }
.main-menu-btn-icon::before { content: ''; top: -.8rem; left: 0; }
.main-menu-btn-icon::after { content: ''; top: .8rem; left: 0; }
/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon { height: 0; }
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon::before { top: -10%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon::after { top: -10%; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
/* hide the menu in mobile view */
#main-menu-state:not(:checked) ~ #main-menu { display: none; }
#main-menu-state:checked ~ #main-menu { display: block; }
.navi { display: block; box-sizing: border-box; position: relative; z-index: 9999; }
.navi, .navi ul, .navi li { display: block; list-style: none; margin: 0; padding: 0; line-height: normal; text-align: left; }
.navi>li>h1,.navi>li>h2,.navi>li>h3,.navi>li>h4,.navi>li>h5,.navi>li>h6 { margin: 0; padding: 0; ; }
.navi ul { display: none; }
.navi li,.navi a { position: relative; line-height: 1.6; }
.navi a { display: block; }
.navi a.disabled { cursor: default; }
.navi::after { content: ""; display: block; height: 0; font: 0px/0 serif; clear: both; overflow: hidden; }
.navi *,.navi *::before,.navi *::after { box-sizing: inherit; }
.navi a { padding: .8rem .4rem; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18rem; color: #fff; background: #9d1927; border-left: .4rem solid #9d1927; text-decoration: none; }
.navi a:hover, .navi a:focus, .navi a:active { color: #9d1927; background: rgba(255,255,255,.9); border-left: .4rem solid rgba(255,255,255,1.0); text-decoration: none; }
.navi a.current { padding-left: .4rem; color: #9d1927; background: rgba(255,255,255,.9); border-left: .4rem solid rgba(255,255,255,1.0); }
.navi a.current:hover { border-left: .4rem solid #9d1927; }
.navi a .sub-arrow { position: absolute; top: .5rem; right: .5rem; width: 5.4rem; height: 2.2rem; overflow: hidden; font-size: 1.6rem; line-height: 1.4; text-align: center; color: #9d1927; background: #fff; border-radius: .25rem; }
.navi a .sub-arrow::before { color: #9d1927; content: '+'; }
.navi a.highlighted .sub-arrow::before { content: '\2013'; }
.navi > li:last-child > a, .navi > li:last-child > *:not(ul) a, .navi > li:last-child > ul, .navi > li:last-child > ul > li:last-child > a, .navi > li:last-child > ul > li:last-child > *:not(ul) a, .navi > li:last-child > ul > li:last-child > ul, .navi > li:last-child > ul > li:last-child > ul > li:last-child > a, .navi > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .navi > li:last-child > ul > li:last-child > ul > li:last-child > ul, .navi > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .navi > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .navi > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, .navi > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .navi > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .navi > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul { }
.navi > li:last-child > a.highlighted, .navi > li:last-child > *:not(ul) a.highlighted, .navi > li:last-child > ul > li:last-child > a.highlighted, .navi > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .navi > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .navi > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .navi > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .navi > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .navi > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .navi > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > rgba(180,217,230,1) li:last-child > *:not(ul) a.highlighted {border-radius:0}
.navi ul { padding-left: 0; }
.navi ul a { padding-left: 1.1rem; color: #9d1927; background: rgba(255,255,255,1.0); border-left: .4rem solid transparent; }
.navi ul a:hover, .navi ul a:focus, .navi ul a:active { color: #9d1927; background: rgba(255,255,255,.9); border-left: .4rem solid #9d1927; text-decoration: none; }
.navi ul a.current { padding-left: 1.1rem; color: #9d1927; background: rgba(255,255,255,.9); border-left: .4rem solid #9d1927; }
.navi ul a.current:hover { border-left: .4rem solid #9d1927; }
.navi ul ul { padding-left: 0; }
.navi ul ul a { padding-left: 2.2rem; color: #9d1927; background: rgba(255,255,255,1.0); border-left: .4rem solid transparent; }
.navi ul ul a:hover, .navi ul a:focus, .navi ul a:active { color: #9d1927; background: rgba(255,255,255,.9); border-left: .4rem solid #9d1927; text-decoration: none; }
.navi ul ul a.current { padding-left: 2.2rem; color: #9d1927; background: rgba(255,255,255,.9); border-left: .4rem solid #9d1927; }
.navi ul ul a.current:hover { border-left: .4rem solid #9d1927; }
.navi ul ul ul { padding-left: 0; }
.navi ul ul ul a { padding-left: 3.3rem; color: #9d1927; background: rgba(255,255,255,1.0); border-left: .4rem solid transparent; }
.navi ul ul ul a:hover, .navi ul a:focus, .navi ul a:active { color: #9d1927; background: rgba(255,255,255,.9); border-left: .4rem solid #9d1927; text-decoration: none; }
.navi ul ul ul a.current { padding-left: 3.3rem; color: #9d1927; background: rgba(255,255,255,.9); border-left: .4rem solid #9d1927; }
.navi ul ul ul a.current:hover { border-left: .4rem solid #9d1927; }
.navi ul li { border-top: .063rem solid rgba(255,255,255,0); }
/* -------------------------------------- */
/* -------------------------------------- */
/* -------------------------------------- */
/* --- die media queris --- */
/* -------------------------------------- */
/* -------------------------------------- */
/* -------------------------------------- */
@media only screen and (min-width: 62.5rem) { 
#main-menu { clear: none; }
#main-menu::before { display: none; }
.main-menu-btn { position: absolute; top: -99999px; }
/* always show the menu in desktop view */
#main-menu-state:not(:checked) ~ #main-menu { display: inline-block; }
/* start... (it's not recommended editing these rules) */
nav { height: 2rem; border: 0; padding: .4rem 0 .6rem 0; line-height: 1; text-align: center; background: #9d1927; } 
.navi ul { position: absolute; }
.navi li { float: left; }
.navi ul li { float: none; }
.navi a { white-space: nowrap; }
.navi .navi-nowrap > li > a, .navi .navi-nowrap > li > :not(ul) a { white-space: nowrap; }
/* ...end */
.navi li { margin: 0 .4rem; }
.navi ul li { border-top: 0; }
.navi a:link { font-size: .92rem; padding: .4rem .6rem .2rem .6rem; color: #fff; background-color: #9d1927; border: .063rem solid #9d1927; border-radius: .5rem; text-decoration: none; } 
.navi a:visited { font-size: .92rem; padding: .4rem .6rem .2rem .6rem; color: #fff; background-color: #9d1927; border: .063rem solid #9d1927; border-radius: .5rem; text-decoration: none; } 
.navi a:hover { font-size: .92rem; padding: .4rem .6rem .2rem .6rem; color: #fff; background-color: #9d1927; border: .063rem solid #fff; border-radius: .5rem; text-decoration: none; } 
.navi a:active { font-size: .92rem; padding: .4rem .6rem .2rem .6rem; color: #fff; background-color: #9d1927; border: .063rem solid #fff; border-radius: .5rem; text-decoration: none; } 
.navi a.current { font-size: .92rem; padding: .4rem .6rem .2rem .6rem; color: #fff; background-color: #9d1927; border: .063rem solid #9d1927; border-radius: .5rem; text-decoration: none; }
.navi a.current:hover { font-size: .92rem; padding: .4rem .6rem .2rem .6rem; color: #fff; border: .063rem solid #fff; border-radius: .5rem; text-decoration: none; }
.navi li ul li { }
.navi li ul li:last-child { }  
.navi li ul li:first-child { ; }
.navi li ul { background: rgba(248,248,248,0); border-radius: .5rem; }
.navi li ul li { margin: .2rem 0; }
.navi li ul li:first-child { margin-top: 0; }
.navi li ul li:last-child { margin-bottom: 0; } 
.navi li ul li a:link { background: #9d1927; padding-right: 2rem; letter-spacing: .09rem; text-transform: none; }  
.navi li ul li a:hover { color: #9d1927; background: #fff; border: .063rem solid #9d1927; } 
.navi li ul li a:active { color: #9d1927; background: #fff; border: .063rem solid #9d1927; } 
.navi li ul li a.current { ; }
.navi li ul li a.current:hover { color: #9d1927; } 
.navi li ul li ul { background: rgba(248,248,248,1); border-radius: .5rem; }
.navi li ul li ul li a:link { padding-right: 2rem; letter-spacing: .09rem; text-transform: none; }  
.navi li ul li ul li a:hover { color: #9d1927; border: .063rem solid #9d1927; } 
.navi li ul li ul li a:active { color: #9d1927; border: .063rem solid #9d1927; } 
.navi li ul li ul li a.current { color: #9d1927; border: .063rem solid #9d1927; padding-left: .6rem; }
.navi li ul li ul li a.current:hover { border-left: .063rem solid #9d1927; } 
.navi a .sub-arrow { display: none; }
.navi li ul li a .sub-arrow { display: block; }
.navi li ul li a .sub-arrow::before { color: #9d1927; content: '+'; }
.navi li ul li a.highlighted .sub-arrow::before { content: '+'; } 
.navi li ul li a .sub-arrow { position: absolute; top: .6rem; top: .35rem; right: .5rem; width: 1rem; height: 1.3rem; padding-top: .09rem; font-size: 1.2rem; line-height: 1.1; }
.navi li ul li a .sub-arrow { color: #fff; ; background: rgba(248,248,248,1); ; } 
.navi li ul li a:hover .sub-arrow { color: #9d1927; background: #fff; }
.navi li ul li a:active .sub-arrow { color: #9d1927; background: #fff; }  
.navi li ul li a.current .sub-arrow { color: #9d1927; background: #fff; } 
}