/* ------------------------------ */
/* ------------------------------ */
/* NAV */
#Nav .links {
   display: flex;
   flex-direction: row;
   gap: 0px;
   width: 100%;
   height: auto;
   overflow: visible;
}

#Nav .link {
   display: flex;
   justify-content: center;
   align-items: center;
   width: auto;
   height: calc(62px * var(--scale));
   padding: calc(20px * var(--scale)) calc(30px * var(--scale));
   background-color: var(--background-a);
   border: 1px solid var(--border-color);
   border-right: none;
   color: var(--text-color-a);
   font-size: calc(var(--font-size-4) * var(--scale));
   font-weight: var(--font-weight-3);
   text-transform: uppercase;
}

#Nav .link.x,
#Nav .link:hover {
   cursor: pointer;
   background-color: var(--background-c);
   color: var(--primary-color);
}

#Nav .link.hl {
   background-color: var(--primary-color);
   border-color: var(--primary-color);
   color: var(--text-color-b);
   font-size: calc(var(--font-size-3) * var(--scale));
   font-weight: var(--font-weight-3);
   line-height: 0.9;
   text-align: center;
   text-transform: uppercase;
}

#Nav .link:first-child {
   border-radius: calc(var(--border-radius-2) * var(--scale)) 0px 0px calc(var(--border-radius-2) * var(--scale));
}

#Nav .link:last-child {
   border-right: 1px solid var(--border-color);
   border-radius: 0px calc(var(--border-radius-2) * var(--scale)) calc(var(--border-radius-2) * var(--scale)) 0px;
}

#Nav .search {
   display: flex;
   width: calc(300px * var(--scale));
   height: calc(62px * var(--scale));
   padding: calc(20px * var(--scale));
   background-color: var(--background-a);
   border: 1px solid var(--border-color);
   border-radius: calc(var(--border-radius-2) * var(--scale));
   color: var(--text-color-a);
   font-size: calc(var(--font-size-4) * var(--scale));
   font-weight: var(--font-weight-3);
   text-align: left;
   text-transform: uppercase;
}

/* ------------------------------ */
/* BREAK 1 */
@media only screen and (max-width: 1000px) {
      
   #Nav .link {
      width: 100%;
      height: calc(50px * var(--scale));
      padding: calc(20px * var(--scale)) calc(20px * var(--scale));
      font-size: calc(var(--font-size-3) * var(--scale));
      font-weight: var(--font-weight-3);
   }

   #Nav .search {
      width: 100%;
      height: calc(50px * var(--scale));
      padding: calc(20px * var(--scale)) calc(20px * var(--scale));
      font-size: calc(var(--font-size-3) * var(--scale));
      font-weight: var(--font-weight-2);
      text-transform: uppercase;
   }

}

/* ------------------------------ */
/* BREAK 1 */
@media only screen and (max-width: 350px) {
      
   #Nav .links {
      display: flex;
      flex-direction: column;
      gap: 0px;
      width: 100%;
      height: auto;
      overflow: visible;
   }

   #Nav .link {
      border-right: 1px solid var(--border-color);
      border-bottom: none;
   }

   #Nav .link:first-child {
      border-radius: calc(var(--border-radius-2) * var(--scale)) calc(var(--border-radius-2) * var(--scale)) 0px 0px;
   }

   #Nav .link:last-child {
      border-bottom: 1px solid var(--border-color);
      border-radius: 0px 0px calc(var(--border-radius-2) * var(--scale)) calc(var(--border-radius-2) * var(--scale));
   }

}