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

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

#nav_toggle{
display:flex;
justify-content:center;
align-items:center;
width:3.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(--clr-nav-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:block;
z-index:100;
}

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

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

#nav,
#nav.open,
#nav.close{
background:var(--bgr-nav-300);
-webkit-backdrop-filter:var(--backdrop-filter-default);
backdrop-filter:var(--backdrop-filter-default);
}


@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;
margin:0;
padding:0;
}

#nav nav ul{
display:block;
list-style:none;
margin:0;
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 !important;
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,
#nav nav li > ul.hide{
float:left;
width:100%;
margin:0;
padding:0;
max-height:0;
transition:max-height 350ms ease-out;
overflow:hidden;
animation:fade-out 850ms ease-out forwards;
}

#nav nav li > ul.show{
float:left;
width:100%;
margin:0;
padding:0;
max-height:13rem;
transition:max-height 550ms ease-in;
animation:fade-in 850ms ease-in forwards;
}

#nav nav li > ul li a:before{
display:inline-block;
content:'';
width:.45rem;
height:.45rem;
margin:0 .35rem 0 0;
border:var(--brd-gray-600) 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% - 4.5rem);
margin:0;
padding:.25rem .5rem .25rem 1.5rem;
font-weight:normal;
}

#nav nav li .arrow{
float:right;
position:relative;
top:.25em;
right:.65em;
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% - 4.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;
pointer-events: none;
}

#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 ul,
.nav_3 ul{
float:left;
width:100%;
list-style-type:none;
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;
}

}

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

.nav_2{
float:right;
display:flex;
width:auto;
height:2rem;
justify-content:flex-end;
align-items:center;
}

.nav_2 ul{
display:flex;
justify-content:flex-end;
list-style-type:none;
margin:0 .75rem 0 0;
padding:0;
}

.nav_2 ul li{
float:left;
width:auto;
margin:0 .85rem 0 0;
padding:.5rem 0;
}

.nav_2 ul li:last-of-type{
margin:0;
}

}


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

#nav_toggle{
display:block
}

.nav_1{
float:left;
width:80%;
margin:.75rem 0 0 0;
}

.nav_1 ul{
display:flex;
justify-content:space-between;
align-items:flex-start;
list-style-type:none;
margin:0;
padding:.35rem 0;
}

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


.nav_1 li:first-of-type:after{
content: '';
margin:0 0 0 .25rem;
padding:0 1rem 0 0;
background:url('/assets/img/nav/icon/arrow.svg') no-repeat right top;
background-size:90%;
}

.nav_1 li .arrow em{
position:absolute;
top:.35rem;
right:-1.25rem;
width:auto;
height:auto;
display:inline-block;
transform:rotate(90deg);
}

.nav_1 li .arrow em:after{
content: '';
margin:0 0 0 .25rem;
padding:0 1rem 0 0;
background:url('/assets/img/nav/icon/arrow.svg') no-repeat right top;
background-size:90%;
-webkit-transform:rotate(45deg);
transition:all ease-in-out 250ms;
}

/*
.nav_1 li .arrow em{
position:absolute;
top:.75rem;
right:-1rem;
width:.5rem;
height:.5rem;
border:var(--clr-nav-300) 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;
font-family:var(--nav-font-family);
color:var(--clr-nav-300);
text-decoration:none;
font-weight:normal;
font-size:1.25rem;
text-transform:uppercase;
width:auto;
padding:.35rem 0 .25rem 0;
transition:border ease-in-out 50ms;
border-bottom:transparent 1px solid;
}

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

.nav_1 .active{
font-family:var(--nav-bold-font-family);
border-bottom:var(--brd-nav-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,.98);
border:var(--brd-gray-500) 1px solid;
border-radius:var(--brd-radius-5);
}

.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:first-of-type:after{
display:none;
}

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

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


.nav_1 ul ul li > a:hover,
.nav_1 ul ul li > a.on{
background:var(--brd-nav-400);
color:var(--clr-nav-400);
border-radius:var(--brd-radius-25);
font-weight:bold;
border:0;
}

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


.nav_2{
float:right;
display:flex;
height:2rem;
justify-content:flex-end;
align-items:center;
}

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


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

.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{
text-decoration:none;
font-weight:normal;
font-size:var(--fs-p);
}

.nav_2 a{
color:var(--clr-primary-400);
font-family:var(--secondary-font-family);
}

.nav_3 a{
color:var(--clr-primary-300);
font-family:var(--primary-font-family);
text-transform:uppercase;
}

.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:var(--brd-radius-5);
}

.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:var(--brd-radius-5);
}

}