/* NAVIGATION BAR */

header {
   height: 59px;
}

nav {
   background: var(--color-bg2);
   background-size: 100vmax;

   position: fixed;
   top:0;
   width: 100%;

   font-family: var(--main-font);/*Futura, "Trebuchet MS", Arial, sans-serif;*/
   font-size: 18px;

   z-index: 1;
}

.burger-nav {
   display: block;
   float: right;
   height: 2.5rem;
   width: 100%;
   padding: 2rem;
   position: fixed;

   box-sizing: border-box;

   background: url("/media/images/th-menu.svg") no-repeat 98% center;
   background-size: 2.5rem;
   filter: invert(100%);

   cursor: pointer;
}

nav ul.nav-bar {
   background-color: var(--color-bg2);

   width: 100%;
   height: 0;

   padding: 0;
   margin: 0;

   list-style-type: none;
   overflow: hidden;

   box-sizing: border-box;

   -webkit-transition-duration: 0.4s;
   transition-duration: 0.4s;
}

nav ul.nav-bar.open {
   height: auto;
}

li.nav-item {
   float: none;
   width: 100%;
}

li.nav-item > a {

   display: block;
   padding: 8px 12px;

   text-align: center;
   text-decoration: none;

   -webkit-transition-duration: 0.4s;
   transition-duration: 0.4s;

}

li.nav-item > a:hover {
   background-color: var(--color-gamma);
   color: white;
}

li.nav-item > a {
   color: white;
}

li.nav-item.active > a {
   color: white;
}

.brand {
   background-color: var(--color-bg2);

   display: block;
   float: left;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;

   box-sizing: border-box;
}

.brand a {
   display: block;
   color: var(--color-contrast);
   padding: 16px 24px;
   text-decoration: none;
}

.brand > h1 {
   margin: 0;
   padding: 0;
    
   font-family: var(--main-font);
   font-size: 24px;
   text-align: center;

   box-sizing: border-box;
}

/* large screens */
@media(min-width:1200px) {

   header {
      height: 0px;
   }

   .burger-nav {
      display: none;
   }

   nav {
      top: 400;
      left: 15;
      bottom: 15;
      width: 15%;
   }

   nav ul.nav-bar {
      display: block;
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
   }

   li.nav-item {
      width: 100%;
      float: left;
   }

   .brand {
      width: 100%;
      height: 61px;
   }

}