@charset "UTF-8";
/* autoprefixed 100822 */

nav {
   grid-area: head;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 0 0 3rem;
   margin: 0 1rem;
   transition: padding 1.2s ease 0.4s;
   background-image: url(/images/uploads/bg-images/nav-bg-12.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   transition: margin 0.6s ease 0.4s;
}

nav a,
a:visited {
   color: #dd8345;
   text-decoration: none;
   text-shadow: 0 0 2px white;
}

nav a:hover {
   color: #ae4f10;
}

.navLinks {
   display: flex;
   justify-content: space-around;
   width: 50%;
   padding: 0.5rem;
}

.navLinks li {
   list-style: none;
}

.burger {
   display: none;
   cursor: pointer;
   z-index: 1;
}

.burger div {
   width: 30px;
   height: 4px;
   background-color: #dd8345;
   margin: 5px;
   transition: all 0.4s ease;
}

.line4 {
   opacity: 0;
}

.logoBiggy {
   display: block;
   margin: 0;
   margin: 0 4rem 0 0;
   transition: margin 1.2s ease 0.4s;
}
.logoMedium {
   display: none;
   margin: 0 2rem 0 0;
}
.logoSmall {
   display: none;
   margin: 0 2rem 0 0;
}

@media only screen and (max-width: 1024px) {
   nav {
      padding: 0;
   }

   .logoBiggy {
      margin: 0 2rem 0 0;
   }
}

@media only screen and (max-width: 768px) {
   body {
      overflow-x: hidden;
   }

   .logoBiggy {
      display: none;
   }
   .logoMedium {
      display: block;
   }

   .navLinks {
      flex-direction: column;
      width: auto;
      position: fixed;
      left: 0;
      top: 0;
      padding: 4rem 0 2rem 0;
      min-height: 180px;
      height: 100vh;
      border-radius: 0 0 1rem 0;
      width: 40%;
      background-color: #dd8345;
      opacity: 0.9;
      transform: translateX(-100%);
      transition: transform 0.5s ease-in;
   }

   .navLinks li {
      text-align: center;
      opacity: 0;
   }

   nav a,
   a:visited {
      color: #e4e9ea;
      text-shadow: none;
   }

   nav a:hover {
      color: white;
   }

   .burger {
      display: block;
      margin: 0 0 0 4rem;
      transition: margin 1.2s ease 0.4s;
   }

   .navActive {
      transform: translateX(0);
   }
}

@media only screen and (max-width: 600px) {
   .logoMedium {
      display: none;
   }
   .logoSmall {
      display: block;
   }
   .burger {
      margin: 0 0 0 2rem;
   }
   nav {
      margin: 0;
   }
}

@-webkit-keyframes navLinkFade {
   from {
      opacity: 0;
      transform: translateX(-50px);
   }
   to {
      opacity: 1;
      transform: translateX(0px);
   }
}

@keyframes navLinkFade {
   from {
      opacity: 0;
      transform: translateX(-50px);
   }
   to {
      opacity: 1;
      transform: translateX(0px);
   }
}

.switch .line1 {
   transform: rotate(-90deg) translate(-14px, 13px);
}
.switch .line2 {
   transform: translate(0, -8px);
}
.switch .line3 {
   transform: rotate(90deg) translate(-4px, 13px);
}
.switch .line4 {
   opacity: 1;
}
.switch div {
   background-color: #e4e9ea;
}