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

.navigation{
display: none;
}

}

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

.navigation{
display: none;
}

}

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

.navigation{
margin:.5rem 0 2rem 0;
padding:0;
}

.navigation ul{
all: unset;
display:flex;
justify-content:space-between;
list-style-type:none;
margin:0;
padding:0 .5rem;
}

.navigation ul li{
float:left;
width:100%;
display:block;
text-align:left;
margin:0;
padding:.15rem 0;
}

.navigation ul li:before{
display:none;
}

.navigation ul li a{
margin:0;
padding:0 .25rem;
color:var(--clr-primary-300);
font-weight:bold;
text-decoration:none;
}

.navigation ul li a:hover{
text-decoration:underline;
}

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

.navigation ul ul > li{
all:unset;
float:left;
width:100%;
display:block;
text-align:left;
margin:0;
padding:.15rem 0;
}

.navigation ul ul > li a{
all: revert;
float:left;
width:100%;
margin:0;
padding:0 .25rem;
color:var(--clr-primary-300);
font-weight:normal;
text-decoration:none;
}


}

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

#nav_footer{
float:left;
width:100%;
max-width:100rem;
}

.navigation{
float:left;
width:100%;
margin:.5rem 0 2rem 0;
padding:0;
}

.navigation ul{
all: unset;
display:flex;
justify-content:space-between;
list-style-type:none;
margin:0;
padding:0 .5rem;
}

.navigation ul li{
float:left;
width:100%;
display:block;
text-align:left;
margin:0;
padding:.15rem 0;
}

.navigation ul li:before{
display:none;
}

.navigation ul li a{
margin:0;
padding:0 .25rem;
color:var(--clr-primary-300);
font-weight:bold;
text-decoration:none;
}

.navigation ul li a:hover{
text-decoration:underline;
}

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

.navigation ul ul > li{
all:unset;
float:left;
width:100%;
display:block;
text-align:left;
margin:0;
padding:.15rem 0;
}

.navigation ul ul > li a{
all: revert;
float:left;
width:100%;
margin:0;
padding:0 .25rem;
color:var(--clr-primary-300);
font-weight:normal;
text-decoration:none;
}

}