#menu-wrapper {
  background-color: var(--main-back-color);
  background: -webkit-linear-gradient(
    var(--main-grad-dir),
    var(--main-grad-from),
    var(--main-grad-to)
  );
  background: -moz-linear-gradient(
    var(--main-grad-dir),
    var(--main-grad-from),
    var(--main-grad-to)
  );
  background: linear-gradient(
    var(--main-grad-dir),
    var(--main-grad-from),
    var(--main-grad-to)
  );
  /*border-bottom: var(--small-line) solid var(--alt-back-color);*/
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  width: 100vw;
  width: 100lvw;
}

#menu-wrapper,
#menu {
  gap: var(--smaller-size);
  padding: var(--smaller-size) var(--larger-size);
  padding: var(--smaller-size) calc((100lvw - 100svw) + var(--larger-size));
  z-index: 1000;
}

#menu {
  background-color: inherit;
  background: inherit;
  color: var(--alt-back-color);
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
  height: 100lvh;
  left: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--medium-distance);
  position: fixed;
  width: 100vw;
  width: 100lvw;
  top: 0;
}

#menu-close-button * {
  color: var(--alt-front-color);
}

#menu-lang {
  -webkit-align-items: end;
  -moz-align-items: end;
  -ms-align-items: end;
  align-items: end;
  gap: var(--medium-size);
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  list-style: none;
}

#menu-lang,
#menu-main-list {
  border-top: var(--small-line) solid var(--alt-back-color);
  display: flex;
  font-size: var(--larger-font); 
  padding: var(--medium-size) 0;
}

.menu-button {
  background-color: inherit;
  border: none;
  color: var(--alt-back-color);
  font-size: var(--larger-font);
}

.menu-button * {
  font-size: inherit;
}

.menu-button i {
  font-size: var(--greater-font);
}

.menu-button :is(i, span) {
  line-height: var(--greater-font);
}

.menu-button:hover {
  cursor: pointer;
}

.menu-button:hover * {
  opacity: var(--hover-opacity);
}

.menu-header {
  -webkit-align-self: center;
  -moz-align-self: center;
  -ms-align-self: center;
  align-self: center;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  align-items: stretch;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--small-size);
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  max-width: var(--max-width);
  width: 100%;
}

.menu-item,
.menu-dropdown-item {
  align-items: center;
  display: inline-flex;
  gap: var(--mini-size);
  justify-content: center;
}

.menu-item,
.menu-dropdown-item,
.menu-napiste-nam {
  appearance: none;
  background: initial;
  border: initial;
  font: inherit;
  padding: var(--mini-size) 0;
  text-align: center;
  text-decoration: none;
  width: 100%;
}


.menu-link,
.menu-dropdown-button-closed,
.menu-napiste-nam {
  border-radius: var(--mini-size);
}

.menu-dropdown-button-opened {
  border-radius: var(--mini-size) var(--mini-size) 0 0;
}

.menu-dropdown-list-shown li:last-child .menu-dropdown-item {
  border-radius: 0 0 var(--mini-size) var(--mini-size);
}

.menu-item {
  height: calc(var(--larger-size) + (2 * var(--mini-size)));
  line-height: var(--larger-size);
  text-transform: uppercase;
}

.menu-dropdown-item {
  font-size: var(--large-font);
  height: calc(var(--large-size) + (2 * var(--mini-size)));
  line-height: var(--large-size);
}

:is(.menu-item, .menu-lang-item):hover {
  cursor: pointer;
}

.menu-lang-item {
  height: var(--larger-size);
  max-height: 68px;
}

.menu-link-button {
  border-right: var(--small-line) solid var(--main-front-color);
  margin: auto;
}

.menu-link-button .bi-facebook {
  color: var(--alt-back-color);
}

.menu-link-button .bi-instagram {
  color: var(--alt-front-color);
}

.menu-logo-link {
  -webkit-align-content: center;
  -moz-align-content: center;
  -ms-align-content: center;
  align-content: center;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-shrink: 1;
  -moz-flex-shrink: 1;
  -ms-flex-shrink: 1;
  flex-shrink: 1;
  height: 100%;
  max-width: 40vw;
  max-width: 40svw;
}

.menu-logo {
  object-fit: contain;
}

.menu-logo-circle {
  max-height: min(var(--small-distance), 313px);
  max-width: min(100%, 345px);
}

.menu-logo-long {
  max-height: min(var(--great-size), 89px);
  max-width: min(100%, 362px);
}

.menu-napiste-nam {
  display: inline-flex;
}

.menu-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: end;
  -moz-justify-content: end;
  justify-content: end;
}

.menu-right > *:last-child:not(:first-child) {
  padding-left: var(--smaller-size);
}

.menu-right > :not(:last-child) {
  padding: 0 var(--smaller-size);
}

.menu-toggle-button {
  height: 100%;
}

.menu-toggle-button span {
  line-height: var(--larger-font);
}

:is(.menu-link, .menu-dropdown-button-closed, .menu-napiste-nam):hover,
.menu-dropdown-button-opened,
.menu-dropdown-item {
  background-color: var(--alt-back-color);
  background: -webkit-linear-gradient(var(--alt-grad-dir), var(--alt-grad-from), var(--alt-grad-to));
  background: -moz-linear-gradient(var(--alt-grad-dir), var(--alt-grad-from), var(--alt-grad-to));
  background: linear-gradient(var(--alt-grad-dir), var(--alt-grad-from), var(--alt-grad-to));
  color: var(--main-back-color);
}

:is(.menu-link, .menu-dropdown-button-closed, .menu-napiste-nam):hover,
.menu-dropdown-button-opened {
  opacity: 1;
}

:is(.menu-dropdown-item, .menu-dropdown-button-opened, .menu-lang-item):hover,
.menu-dropdown-item {
  opacity: var(--hover-opacity);
}

.menu-dropdown-item:hover {
  opacity: 1;
}

.menu-list {
  flex-direction: column;
  list-style: none;
}

.menu-dropdown-button {
  padding-right: calc(var(--small-size) / 2);
}

.menu-dropdown-list,
.menu-dropdown-button-opened {
  border-bottom: var(--small-line) solid var(--main-back-color);
}

.menu-dropdown-button-opened {
  border-top: var(--small-line) solid var(--main-back-color);
}

.menu-dropdown-button-closed::before {
  content: "\25BC";
}

.menu-dropdown-button-opened::before {
  content: "\25B2";
}

.menu-opened-header {
  padding: var(--medium-size) 0;
}

:is(.menu-dropdown-button-closed, .menu-dropdown-button-opened)::before {
  display: inline-block;
  width: var(--small-size);
}

.menu-hidden,
.menu-dropdown-list-hidden {
  display: none;
  opacity: 0;
  transform: translateX(-100%);
}

.menu-shown,
.menu-dropdown-list-show {
  display: flex;
  opacity: 1;
  transform: translateX(0);
}

@media (min-height: 481px) {

  #main-content > * {
    scroll-margin-top: calc((2 * var(--medium-size)) + min(var(--great-size), 89px));
  }

  #menu-wrapper {
    position: sticky;
    top: 0;
  }

}

@media (max-width: 480px) {
  
  .menu-text-to-hide-480 {
    display: none;
  }

}

@media (max-width: 768px) {

  .menu-text-to-hide-768 {
    display: none;
  }

}