header {
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  display: flex;
  align-items: center;
  z-index: 100;

  font-weight: 500;
  font-style: normal;

  width: 100%;
}

header .main-menu {
  display: flex;
  height: 100%;
  align-items: center;
}

header .logo-box {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

header .logo-box img {
  height: 100%;
}

header .ue-promotion-info {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85% !important;
  margin-top: 0.5em;
}

header .ue-promotion-info .img-box img {
  width: 100%;
}

header nav {
  position: fixed;
}

header nav ul {
  list-style-type: none;
  display: flex;
  align-items: center;
}

header nav ul a {
  color: black;
  text-decoration: none;
}

header nav ul a {
  display: inline-block;
}

header nav ul a:hover li {
  text-decoration: underline;
  text-decoration-color: #ccd615;
}

.button {
  position: fixed;
  visibility: hidden;
  align-items: center;

  cursor: pointer;
  z-index: 100;
}

#active-menu-button {
  background: url(../../img/header/menu-button.png);
  background-position: center;
  background-repeat: no-repeat;
}

#disactive-menu-button {
  position: absolute;
  background: url(../../img/header/close-button.png);
  background-position: center;
  background-repeat: no-repeat;
}

.sidebar {
  position: fixed;
  visibility: visible;

  font-weight: 500;
  font-style: normal;

  width: 100%;
  height: 100%;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 10;

  transform: translateY(-100%);

  background: rgba(255, 255, 255, 0.6);

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.sidebar.active {
  transform: translateY(0);
  transition: 0.2s;
}

.sidebar ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  visibility: hidden;
}

.sidebar.active ul {
  visibility: visible;
}

.sidebar ul li a {
  color: black;

  font-weight: 500;
  font-style: normal;
  line-height: normal;
  text-decoration: none;
}

.sidebar ul li a:hover {
  text-decoration: underline;
  text-decoration-color: #ccd615;
}

/* ---------------------------------DESKTOP-VERSION--------------------------------------- */
@media (min-width: 1026px) {
  main {
    margin-top: 4vw;
  }

  header {
    height: 4vw;

    border-bottom: 0.2vw solid #ccd615;
    /* box-shadow: 0 0.2vw 0.2vw -0.1vw rgba(0, 0, 0, 0.3);*/

    font-size: 1vw;
  }

  header nav {
    right: 10%;
  }

  header .logo-box {
    left: 10%;
    height: 3vw;
  }

  header nav ul a {
    font-size: 1.1em;
    margin: 0 1vw;
  }

  header nav ul a:hover li {
    text-underline-offset: 0.3em;
  }

  header .ue-promotion-info .img-box {
    width: 6em;
    margin: 0 1em;
  }
}

/* ----------------------------------MOBILE-VERSION--------------------------------------- */
@media (max-width: 1025px) {
  main {
    margin-top: 60px;
  }

  header {
    justify-content: left;
    height: 60px;

    border-bottom: 2px solid #ccd615;
    /* box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.3); */
  }

  header .logo-box {
    position: relative;
    top: 16px;
    left: 10%;
    height: 32px;
  }

  header .main-menu {
    visibility: hidden;
  }

  .sidebar {
    top: 0;
    font-size: 1.75em;
  }

  .button {
    visibility: visible;
  }

  body.open {
    overflow: hidden;
  }

  .sidebar ul {
    padding-right: 1.75em;
  }

  .sidebar ul li {
    margin: 0.3em 0;
  }

  .sidebar ul li a {
    font-size: 1em;
    text-decoration-thickness: 2px !important;
  }

  .sidebar ul li a:hover {
    text-underline-offset: 0.3em;
  }

  #active-menu-button {
    top: 15px;
    right: 10%;
    background-size: 24px;
  }

  #disactive-menu-button {
    top: 80px;
    right: 20px;
    background-size: 26px;
  }

  .button {
    width: 30px;
    height: 30px;
  }

  header .ue-promotion-info {
    margin-right: 10%;
    margin-left: 2.5%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  header .ue-promotion-info .img-box {
    width: 7em;
    margin: 1em;
  }
}

@media (max-width: 550px) {
  header .ue-promotion-info .img-box:nth-child(1),
  header .ue-promotion-info .img-box:nth-child(2) {
    display: none;
  }

  header .ue-promotion-info .img-box {
    width: 10em;
  }
}