:root {
  --desktop-guttering-y: 80px;
  --desktop-content-padding: 140px;
  --font-primary: #2d2d2d;
}

/* Navigation */
.navigation {
  width: 98%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: fixed;
  top: 50px;
  left: 5px;
  height: 90px;
  -webkit-transition: 1000ms;
  -o-transition: 1000ms;
  transition: 1000ms;
  z-index: 30;
}

.nav-content {
  width: 75%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.item {
  margin: 0 2rem;
  position: relative;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

#decor {
  position: relative;
  height: 2px;
  width: 100%;
  background-color: transparent;
  left: -80px;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
  padding: 0 2rem;
}

.pad {
  padding-bottom: 4px;
}

#product-pad {
  padding: 0;
}

.menu a {
  -webkit-transition: 1000ms;
  -o-transition: 1000ms;
  transition: 1000ms;
  font-size: 20px;
  color: white;
  font-family: "Assistant";
  font-weight: 300;
}

.logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
}

.logo img {
  width: auto;
  height: 65px;
  padding: 5px;
  transition: all 0.4s ease;
}

/* Navigation mobile */
.mobile-nav {
  width: 100%;
  position: fixed;
  top: 0px;
  height: 90px;
  -webkit-transition: 1000ms;
  -o-transition: 1000ms;
  transition: 1000ms;
  background-color: rgba(250, 250, 250, 0.97);
  display: none;
  z-index: 20;
}

.mobile-drop-nav {
  width: 100%;
  position: fixed;
  top: 0px;
  height: 90px;
  -webkit-transition: 1000ms;
  -o-transition: 1000ms;
  transition: 1000ms;
  background-color: rgba(250, 250, 250, 0.97);
  display: none;
  z-index: 20;
}

.mobile-nav img {
  width: 115px;
  padding: 8px;
}

.mobile-nav p {
  font-size: 4rem;
  color: #fdc479;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
  z-index: 21;
}

.mobile-nav p:hover {
  -webkit-transform: rotateZ(90deg);
  -ms-transform: rotate(90deg);
  transform: rotateZ(90deg);
}

.mobile-menu-container {
  display: none;
  position: fixed;
  overflow-y: scroll;
  top: 90px;
  width: 100%;
  background: rgba(250, 250, 250, 0.97);
  z-index: 2;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.mobile-menu-container::-webkit-scrollbar {
  display: none;
}

.mobile-menu {
  width: 100%;
  padding-bottom: 90px;
  padding-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.mobile-menu div {
  padding: 10px;
}

.list-item {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.mobile-menu a {
  color: hsl(0, 0%, 72%);
  font-size: 3.5rem;
  letter-spacing: 2px;
  font-family: "Assistant";
  font-weight: 300;
  text-decoration: none;
}

.mobile-menu a:hover {
  text-decoration: none;
  color: lightgrey;
}

.hidden-list {
  width: 100%;
  display: none;
}

.hidden-list a {
  color: lightgrey;
}

.hidden-list div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* Navigation-Mobile Hovers */
.menu-icon {
  padding: 1px;
  margin: 1rem;
}

.menu-icon span {
  width: 45px;
  height: 4px;
  background: lightgrey;
  display: block;
  margin-bottom: 6px;
  -webkit-box-shadow: 0 1px 2px grey;
  box-shadow: 0 1px 2px grey;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.menu-icon.active span:nth-child(2) {
  -webkit-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  transform: translateX(-50px);
  opacity: 0;
}

.menu-icon.active span:nth-child(1) {
  -webkit-transform: rotateY(180deg) rotateZ(45deg) translate(7px, 7px);
  transform: rotateY(180deg) rotateZ(45deg) translate(7px, 7px);
}
.menu-icon.active span:nth-child(3) {
  -webkit-transform: rotateY(180deg) rotateZ(-45deg) translate(7px, -7px);
  transform: rotateY(180deg) rotateZ(-45deg) translate(7px, -7px);
}

/* Navigation Hovers */
.item:hover #decor {
  left: 0;
  background-color: rgba(250, 250, 250, 0.97);
}

.menu a:hover {
  text-decoration: none;
  color: white;
}

/* Navigation MediaQ */
@media only screen and (max-width: 1550px) {
  .nav-content {
    width: 90%;
  }
}

@media only screen and (max-width: 1200px) {
  .navigation {
    display: none;
  }

  .mobile-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
}
@media only screen and (max-width: 800px) {
  .mobile-menu a {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 600px) {
  .mobile-menu a {
    font-size: 20px;
  }
}

@media only screen and (max-width: 500px) {
  .logo-mobile {
    width: 40%;
  }
}

@media only screen and (max-height: 500px) {
  .mobile-menu {
    padding-top: 20px;
  }
  .mobile-nav {
    height: 70px;
  }
  .mobile-nav img {
    height: 70px;
    width: 35%;
    padding: 6px;
  }
  .mobile-menu-container {
    margin-top: 70px;
  }
}

/* Popnav */
.popnav {
  width: 100%;
  background-color: rgba(250, 250, 250, 0.97);
  -webkit-transition: 800ms;
  -o-transition: 800ms;
  transition: 800ms;
  position: fixed;
  top: 0px;
  left: 0px;
  -webkit-transition: 1000ms;
  -o-transition: 1000ms;
  transition: 1000ms;
  -webkit-box-shadow: 0em 0.2em 0.6em grey;
  box-shadow: 0em 0.2em 0.6em grey;
  z-index: 30;
}

.popnav .menu .item a {
  color: #9e9e9e;
  -webkit-transition: 1000ms;
  -o-transition: 1000ms;
  transition: 1000ms;
}

.popnav .menu {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.popnav #decor {
  position: relative;
  height: 2px;
  width: 100%;
  background-color: transparent;
  left: -80px;
  -webkit-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.popnav .logo img {
  height: 65px;
  padding: 5px;
  margin: 10px;
  width: unset !important;
  object-fit: unset !important;
}

/* Layout */

body {
  overflow-y: scroll;
}

.wrapper {
  width: 80%;
  margin: var(--desktop-guttering-y) auto;
}

.page {
  padding: var(--desktop-content-padding) 0;
  background-color: rgba(250, 250, 250, 0.97);
}

/* Typography */

.paragraph {
  color: var(--font-primary);
  font-family: "Assistant";
  font-weight: 300;
  font-size: 2.3rem;
}

.paragraph > * {
  font-family: "Assistant";
  font-weight: 300;
  font-size: 2.3rem;
}

/* Flexbox */
.d-flex {
  display: flex;
  gap: 30px;
}

/* Typography */
p {
  font-size: 16px;
}

/* Announcements*/

.anouncement-wrapper {
  background: rgba(0, 0, 0, 0.585);
  padding: 15px 20px;
  text-align: center;

  @media (max-width: 1200px) {
    position: absolute;
    top: 90px;
    left: 0px;
    width: 100%;
  }

  p {
    color: white;
    margin: 0;
    
    a {
      color: #f7a63b;
      text-decoration: none;
    }
  }
}