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

article .tab{
float:left;
width:100%;
margin:.75rem 0;
padding:.25rem 0 .75rem 0;
}

article .tab ul{
list-style:none;
display:block;
margin:0;
padding:0;
}

article .tab li{
float:left;
width:100%;
text-align:left;
margin:.25rem 0;
padding:0;
}


article .tab a{
float:left;
width:100%;
font-size:var(--m-font-size);
color:var(--base-font-color);
padding:.15rem 0 .15rem 0;
font-weight:bold;
border-bottom:var(--base-border-color) 1px solid;
}

article .tab a:hover,
article .tab a.on,
article .tab a.on:hover{
border-bottom:var(--dark-border-color) 1px solid;
}

article .tab a.on,
article .tab a.on:hover{
font-weight:bold;
}

}

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

article .tab a{
font-size:var(--s-font-size);
}

}

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

article .tab a{
font-size:var(--m-font-size);
}


}

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

article .tab a{
font-size:var(--l-font-size);
}

}


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

article .tab{
float:left;
width:100%;
padding:.25rem 0 1rem 0;
}

article .tab ul{
list-style:none;
display:inline;
}

article .tab li{
float:left;
text-align:left;
margin:0;
padding:0 .35rem
}

article .tab li:first-of-type{
float:left;
text-align:left;
margin:0;
padding:0 .35rem 0 0;
}

article .tab a{
color:var(--base-font-color);
padding:.15rem 0 .15rem 0;
font-weight:normal;
border-bottom:var(--base-border-color) 1px solid;
}

article .tab a:hover,
article .tab a.on,
article .tab a.on:hover{
border-bottom:var(--dark-border-color) 1px solid;
}

article .tab a.on,
article .tab a.on:hover{
font-weight:bold;
}

}