/* Navigation */
.nav_1 ul li:before,
.nav_2 ul li:before,
.nav_3 ul li:before{
display:none;
}

/* Mobile View > Mobile Only */
@media screen and (max-width: 45rem){

#nav.sticky{
position:sticky;
height:0;
top:var(--top-sticky-height);
left:0;
z-index:98;
}

#nav:not(.sticky){
position:absolute;
display:none;
top:5rem;
left:0;
}

}


/* Mobile View > Tablet only */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

#nav.sticky{
position:fixed;
top:var(--top-sticky-height);
left:0;
z-index:98;
height:0;
}

#nav:not(.sticky){
position:absolute;
top:8rem;
left:0;
z-index:98;
display:none;
}

}

/* Desktop View*/
@media screen and (min-width: 79.5rem){

#nav{
display:block;
width:100%;
}

#nav.sticky{
position:fixed;
top:var(--top-sticky-height);
left:0;
z-index:1000;
}

#nav:not(.sticky){
position:relative;
}

}


/* Mobile View */
@media screen and (max-width: 79.5rem){

#nav_toggle{
display:flex;
justify-content:center;
align-items:center;
width:3.5rem;
height:5rem;
}

.btn_nav_toggle{
height:2.25rem;
width:2.25rem;
margin:0;
padding:0;
cursor:pointer;
position:relative;
}

.btn_nav_toggle .status{
position:absolute;
top:1.1rem;
left:0
}

.btn_nav_toggle .status,
.btn_nav_toggle .status:before,
.btn_nav_toggle .status:after{
content: '';
display:block;
background:var(--bgr-primary-300);
height:1px;
width:2rem;
border-radius:1px;
transition: all ease-in-out 250ms;
}

.btn_nav_toggle .status:before{
transform:translateY(-8px);
}

.btn_nav_toggle .status:after{
transform:translateY(7px);
}

.btn_nav_toggle .status.active{
transform:rotate(45deg);
}

.btn_nav_toggle .status.active:before{
opacity:0;
}

.btn_nav_toggle .status.active:after{
transform:translateY(-2px) rotate(-90deg);
}

#nav{
float:left;
width:100%;;
display:none;
z-index:100;
background:hsla(0, 0%, 100%,.90);
-webkit-backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
}


#nav.open{
display:block;
animation: ani_open .5s ease-out forwards;
height:auto
}

#nav.close{
animation: ani_close .5s ease-out forwards;
height:0;
}

@keyframes ani_open{

0%{
-webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%);
clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%);
opacity:0;
}

100%{
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
opacity:1;
}

}


@keyframes ani_close{

0%{
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
opacity:1;
}

100%{
-webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%);
clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%);
opacity:0;
}

}

#nav nav{
float:left;
width:100%;
display:block;
}

#nav nav ul{
display:block;
list-style:none;
margin:0 0 0 1.5rem;
padding:0;
}

#nav nav ul:first-child{
margin:0;
padding:0;
display:block;
}

#nav nav ul li{
float:left;
width:100%;
display:block;
text-align:left;
border-bottom:var(--brd-primary-100) 1px solid;
padding:.15rem 0;
-webkit-tap-highlight-color:var(--bgr-gray-100);
}

#nav nav li a{
float:left;
width:calc(100% - 3.5rem);
margin:0;
padding:.5rem .85rem;
}

#nav nav li a:hover,
#nav nav li a.on{
color:var(--clr-primary-300);
}

#nav nav li > ul{
float:left;
width:100%;
display:none;
margin:0;
padding:0;
}

#nav nav li > ul li a:before{
display:inline-block;
content:'';
width:.45rem;
height:.45rem;
margin:0 .35rem 0 0;
border:var(--brd-primary-100) solid;
border-width:0 1px 1px 0;
border-radius:1px;
position:relative;
top:-.1rem;
}

#nav nav li > ul li a:before{
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}

#nav nav li > ul li:last-of-type{
border-bottom:0;
}

#nav nav li > ul a{
float:left;
width:calc(100% - 3.5rem);
margin:0;
padding:.25rem .5rem .25rem 1.5rem;
font-weight:normal;
}

#nav nav li .arrow{
float:right;
position:relative;
top:.25em;
display:flex;
justify-content:center;
align-items:center;
width:2.5rem;
height:100%;
margin:0 .5rem 0 0;
padding:.5rem;
cursor:pointer;
}

#nav nav ul ul li > ul a{
float:left;
width:calc(100% - 3.5rem);
margin:0;
padding:.25rem .5rem .25rem 3rem;
font-weight:normal;
}

#nav nav ul ul li .arrow{
top:-.15rem;
}

#nav nav li .arrow em{
width:.75rem;
height:.75rem;
border:var(--clr-primary-300) solid;
border-width:0 2px 2px 0;
display:inline-block;
border-radius:2px;
}

#nav nav li .arrow.is_open{
position:relative;
top:.25rem;
}

#nav nav li .arrow.is_open em{
transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
transition:all ease-in-out 250ms;
}

#nav nav li .arrow em,
#nav nav li .arrow.is_closed em{
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transition:all ease-in-out 250ms;
}

.subnav_1{
display:none;
}

.subnav_1 ul{
float:left;
width:100%;
list-style-type:none;
margin:0;
padding:0;
}

.subnav_1 li{
float:left;
width:100%;
margin:0;
padding:0;
border-bottom:var(--brd-primary-100) 1px solid;
}

.subnav_1 li:last-child{
border-bottom:0;
}

.subnav_1 a{
float:left;
width:100%;
margin:.35em 0 .35em 0;
padding:.45em .75em .35em .75em;
text-decoration:none;
transition:background 20ms ease-out;
}

.subnav_1 a:hover,
.subnav_1 a.on{
color:var(--clr-primary-300);
}


.subnav_1 ul ul > li{
float:left;
text-align:left;
width:100%;
margin:0;
padding:0 1rem;
border-bottom:var(--brd-primary-100) 1px solid;
}

.subnav_1 ul ul > li a:before{
display:inline-block;
content:'';
width:.45rem;
height:.45rem;
margin:0 .35rem 0 0;
border:var(--brd-primary-100) solid;
border-width:0 1px 1px 0;
border-radius:1px;
position:relative;
top:-.1rem;
}

.subnav_1 ul ul > li a:before{
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}


.subnav_1 ul ul > li a{
float:left;
width:100%;
margin:.25em 0;
padding:.35em .25em .25em .25em;
color:var(--clr-primary-300);
text-decoration:none;
font-size:var(--fs-p);
transition:background 50ms;
}

.subnav_1 ul ul > li a:hover,
.subnav_1 ul ul > li a.on{
color:var(--clr-primary-300);
}

.nav_2{
clear:both;
float:left;
width:100%;
margin:1.5rem 0 0 0;
padding:.75rem 0 1rem 0;
background:var(--bgr-primary-400);
}

.nav_2 ul,
.nav_3 ul{
float:left;
width:100%;
list-style-type:none;
margin:0;
padding:0 .5rem;
}

.nav_3 ul{
margin:.5rem 0 0 0;
padding:0;
}

.nav_2 ul li,
.nav_3 ul li{
float:left;
width:100%;
text-align:center;
margin:0;
padding:.5rem 0;
}

.nav_2 a,
.nav_3 a{
float:left;
width:100%;
text-align:center;
color:var(--clr-primary-300);
text-decoration:none;
font-weight:bold;
font-size:var(--fs-p);
}

.nav_2 a:hover,
.nav_2 a.on,
.nav_3 a:hover,
.nav_3 a.on{
text-decoration:underline;
}

}


/* Desktop View */
@media screen and (min-width: 79.5rem){


#nav_toggle{
display:none
}

.nav_1 ul{
display:flex;
justify-content:space-around;
list-style-type:none;
margin:0;
padding:.25rem 0;
background:var(--bgr-primary-300);
}

.nav_1 li{
float:left;
text-align:left;
margin:0;
padding:0;
width:auto;
position:relative;
}

.nav_1 li .arrow em{
position:absolute;
top:.85rem;
right:-.75rem;
width:.5rem;
height:.5rem;
border:#FFF solid;
border-width:0 2px 2px 0;
display:inline-block;
}

.nav_1 li .arrow em{
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transition:all ease-in-out 250ms;
}


.nav_1 a{
display:inline-block;
color:var(--clr-primary-300);
background:hsla(0, 0%, 100%,.15);
border:hsla(0, 0%, 100%,.25) 1px solid;
border-radius:.25rem;
text-decoration:none;
font-weight:normal;
font-size:1rem;
width:auto;
padding:.35em .65rem .35em .65rem;
transition:border ease-in-out 50ms;
}

.nav_1 a:hover,
.nav_1 a.on{
background:var(--bgr-primary-400);
border:var(--brd-primary-400) 1px solid;
}

.nav_1 .activ{
background:var(--bgr-primary-400);
border:var(--brd-primary-400) 1px solid;
}

.nav_1 li:hover ul{
top:35px;
}

.nav_1 ul ul,
.nav_2 ul ul{
display:block;
position:absolute;
top:-9999px;
left:-.5em;
z-index:100;
width:17em;
margin:0;
padding:.5rem 0 .5rem 0;
background:rgba(255,255,255,.9);
border-top:0;
border-left:var(--brd-gray-500) 1px solid;
border-right:var(--brd-gray-500) 1px solid;
border-bottom:var(--brd-gray-500) 1px solid;
border-radius:.5rem;
}

.nav_1 ul ul li{
display:block;
text-align:left;
width:15.75em;
margin:0 .5rem;
padding:0;
border-bottom:var(--brd-gray-500) 1px solid;
}

.nav_1 ul ul li:last-of-type{
border-bottom:0;
}

.nav_1 ul ul li > a{
float:left;
width:100%;
margin:.15rem 0;
padding:.25rem .5rem;
color:var(--clr-primary-300);
font-size:var(--fs-p);
text-decoration:none;
text-transform:none;
font-weight:normal
}

.nav_1 ul ul li > a:hover,
.nav_1 ul ul li > a.on{
background:var(--bgr-primary-400);
border-radius:.5rem;
font-weight:bold;
}

.nav_1 ul ul ul,
.nav_1 ul ul li .arrow{
display:none;
}


.nav_2{
margin:.5rem 0;
padding:.5rem 0;
background:var(--bgr-primary-400);
border-top:var(--brd-gray-400) 1px solid;
border-bottom:var(--brd-gray-400) 1px solid;
}

.nav_2 ul,
.nav_3 ul{
display:flex;
justify-content:center;
list-style-type:none;
margin:0;
padding:0;
}

.nav_3 ul{
margin:.5rem 0 0 0;
padding:0;
}

.nav_2 ul li,
.nav_3 ul li{
float:left;
text-align:left;
width:auto;
margin:0;
padding:0 .5em;
}

.nav_2 a,
.nav_3 a{
color:var(--clr-primary-300);
text-decoration:none;
font-weight:normal;
font-size:var(--fs-p);
}

.nav_2 a:hover,
.nav_2 a.on,
.nav_3 a:hover,
.nav_3 a.on{
text-decoration:underline;
}


.subnav_1{
grid-area:subnav;
float:left;
width:16rem;
margin:0 0 2.5rem 0;
padding:0 0 0 1rem;
}

.subnav_1 ul{
float:left;
list-style-type:none;
margin:.25rem 0 .25rem 0;
padding:0;
}

.subnav_1 ul li{
float:left;
text-align:left;
width:14rem;
min-height:2rem;
margin:0;
padding:0;
}

.subnav_1 ul li:last-child{
border-bottom:0;
}

.subnav_1 a{
float:left;
width:100%;
margin:.25rem 0;
padding:.25rem .5rem;
color:var(--clr-primary-100);
text-decoration:none;
font-size:var(--fs-p);
transition:background 50ms;
}

.subnav_1 a:hover,
.subnav_1 a.on{
background:var(--bgr-primary-400);
border-radius:.5rem;
}

.subnav_1 ul ul{
float:left;
width:100%;
display:block;
margin:0;
padding:0;
}

.subnav_1 ul ul > li{
float:left;
text-align:left;
width:14em;
margin:0;
padding:0 0 0 1rem;
border-bottom:var(--brd-gray-500) 1px solid;
}

.subnav_1 ul ul > li a:before{
display:inline-block;
content:'';
width:.45rem;
height:.45rem;
margin:0 .35rem 0 0;
border:var(--clr-primary-300) solid;
border-width:0 1px 1px 0;
border-radius:1px;
position:relative;
top:-.1rem;
}

.subnav_1 ul ul > li a:before{
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}


.subnav_1 ul ul > li a{
float:left;
width:100%;
margin:.25em 0;
padding:.15em .25em;
color:var(--clr-primary-100);
text-decoration:none;
font-size:var(--fs-p);
transition: background 50ms;
}

.subnav_1 ul ul > li a:hover,
.subnav_1 ul ul > li a.on{
background:var(--bgr-primary-400);
border-radius:.5rem;
}

}