.l-header__head {
  position: absolute;
  top: 0;
  right: 0 !important;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  width: 10%;
  padding: 20px 15px 0;
}

@media (max-width: 768px) {
  .l-header__head {
    padding: 20px 100px 0 0;
    width: 50%;
    right: 60px;
  }
}

.l-header__head:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 75px;
  pointer-events: none;
  content: "";
  /* background: linear-gradient(180deg, #000 0%, transparent 100%); */
  opacity: .7;
  transition: opacity .3s var(--ease-out-sine)
}

@media (min-width: 768px) {
  .l-header__head:before {
    height: 160px
  }
}
.l-header__head .language-controller {
  margin: 10px 0 0 auto;
  pointer-events: auto
}

@media (min-width: 768px) {
  .l-header__head .language-controller {
    position: relative;
    margin: 15px 0 0 30px
  }
}

.l-header__head .language-controller__btn {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0 5px;
  align-items: center
}

@media (min-width: 768px) {
  .l-header__head .language-controller__btn {
    gap: 0 10px;
    pointer-events: none
  }
}

.l-header__head .language-controller__btn:before,
.l-header__head .language-controller__btn:after {
  content: "";
  background: #cbcbcb
}

.l-header__head .language-controller__btn:before {
  width: 15px;
  height: 15px;
  mask: url(/wp-content/themes/mecdesign/assets/images/pages/icons/icon_languages.svg) no-repeat center/contain
}

@media (min-width: 768px) {
  .l-header__head .language-controller__btn:before {
    width: 20px;
    height: 20px
  }
}
.l-header__head .language-controller__btn:after {
  width: 7px;
  height: 4px;
  content: "";
  mask: url(/wp-content/themes/mecdesign/assets/images/pages/icons/icon_arw-languages.svg) no-repeat center/contain
}

@media (min-width: 768px) {
  .l-header__head .language-controller__btn:after {
    width: 9px;
    height: 5px
  }
}

@media (hover: hover) and (pointer: fine) {
  .l-header__head .language-controller__btn:hover {
    opacity: .6
  }
}

.l-header__head .language-controller__btn {
  transition: opacity .4s var(--ease-out-sine);
  border: none;
  background-color: transparent;
}

.l-header__head .language-controller__list {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  padding: 90px 40px 20px;
  background: #eaeaea;
  opacity: 0;
  transition: opacity .3s var(--ease-out-sine), visibility .3s var(--ease-out-sine)
}

@media (min-width: 768px) {
  .l-header__head .language-controller__list {
    position: absolute;
    top: 40px;
    left: -40px;
    width: 120px;
    padding: 15px 0
  }
}

@media (min-width: 768px) {
  .l-header__head .language-controller__list:before {
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 40px;
    content: ""
  }
}

@media (min-width: 768px) {
  .l-header__head .language-controller .language-list__item {
    text-align: center
  }
}

.l-header__head .language-controller .language-list__item+.language-list__item {
  border-top: 1px solid rgba(68, 64, 63, .08)
}

@media (min-width: 768px) {
  .l-header__head .language-controller .language-list__item+.language-list__item {
    margin: 10px 0 0;
    border-top: none
  }
}

.l-header__head .language-controller .language-list__btn {
  width: 100%;
  height: 50px;
  font-size: 14px;
  font-weight: 400;
  color: #6a6a6a;
  text-align: center;
  letter-spacing: .06em
}

@media (min-width: 768px) {
  .l-header__head .language-controller .language-list__btn {
    width: auto;
    height: auto
  }
}

.l-header__head .language-controller .language-list__btn.selected {
  opacity: .6
}

@media (hover: hover) and (pointer: fine) {
  .l-header__head .language-controller .language-list__btn:hover {
    opacity: .6
  }
}

.l-header__head .language-controller .language-list__btn {
  transition: opacity .4s var(--ease-out-sine)
}