body.overflow-hidden{
  overflow: hidden;
}

#menuBar{
  position: fixed;
  top: 0;
  left: 0;
  width: 3.5em;
  z-index: 2000;
}

#menuBar .menuSwitchers{
  z-index: 35;
  position: relative;
  background-color: var(--darkOrange);
  -webkit-transition: background .3s ease-in-out;
  -moz-transition: background .3s ease-in-out;
  -o-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
  cursor: pointer;
}

#menuBar.active .menuSwitchers, #menuBar .menuSwitchers:hover, #menuBar.closing .menuSwitchers{
  background-color: white;
}

#menuBar .menuSwitchers .menuLabel{
  font-family: 'Amarante', sans-serif;
  font-size: 20px;
  line-height: 1em;
  -webkit-transform: rotate(-90deg) translateY(-50%);
  -moz-transform: rotate(-90deg) translateY(-50%);
  -o-transform: rotate(-90deg) translateY(-50%);
  transform: rotate(-90deg) translateY(-50%);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  bottom: 0em;
  margin-left: 50%;
  position: absolute;
}

#menuBar .menuSwitchers .menuLabel{
  display: none;
}

#menuBar .menuSwitchers .menuLabel.active{
  display: block;
}

#menuBar .menuContainer{
  position: fixed;
  top: 0;
  left: 0;
  width: inherit;
  height: var(--menubarh);
  overflow: hidden;
  z-index: 30;
  -webkit-transition: width var(--menuOpeningTime) ease-in-out, height var(--menuOpeningTime) ease-in-out;
  -moz-transition: width var(--menuOpeningTime) ease-in-out, height var(--menuOpeningTime) ease-in-out;
  -o-transition: width var(--menuOpeningTime) ease-in-out, height var(--menuOpeningTime) ease-in-out;
  transition: width var(--menuOpeningTime) ease-in-out, height var(--menuOpeningTime) ease-in-out;
  background: white;
  color: var(--green);
}

#menuBar .menuContainer[data-status=opening], #menuBar .menuContainer[data-status=opened]{
  width: 100%;
  height: 100%;
}

#menuBar .menuContainer::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 25vw;
  height: 19vw;
  background-image: url(../images/menu-bg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  -webkit-transform: translate(100%, 0);
  -moz-transform: translate(100%, 0);
  -o-transform: translate(100%, 0);
  transform: translate(100%, 0);
  -webkit-transition: transform calc(.25 * var(--menuOpeningTime)) ease-out, opacity calc(.25 * var(--menuOpeningTime)) ease-out;
  -moz-transition: transform calc(.25 * var(--menuOpeningTime)) ease-out, opacity calc(.25 * var(--menuOpeningTime)) ease-out;
  -o-transition: transform calc(.25 * var(--menuOpeningTime)) ease-out, opacity calc(.25 * var(--menuOpeningTime)) ease-out;
  transition: transform calc(.25 * var(--menuOpeningTime)) ease-out, opacity calc(.25 * var(--menuOpeningTime)) ease-out;
}

#menuBar .menuContainer[data-status=opening]::after{
  -webkit-transition-delay: calc(.7 * var(--menuOpeningTime));
  -moz-transition-delay: calc(.7 * var(--menuOpeningTime));
  -o-transition-delay: calc(.7 * var(--menuOpeningTime));
  transition-delay: calc(.7 * var(--menuOpeningTime));
}

#menuBar .menuContainer[data-status=opening]::after, #menuBar .menuContainer[data-status=opened]::after{
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

#menuBar .menuContainer a{
  color: var(--orange);
}

#menuBar .menuContainer a:hover{
  color: var(--green);
}

#menuBar .menuContainer > .content{
  position: relative;
  height: calc(100 * var(--vh));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#menuBar .menuContainer > .content > div{
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

#menuBar #mainMenu li > a, #menuBar #mainMenu li > span{
  font: inherit;
  line-height: inherit;
}

#mainMenu li{
  position: relative;
  font-family: 'Amarante', sans-serif;
  line-height: 1.2em;
  opacity: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all calc(var(--menuOpeningTime) / 2) ease-out;
  -moz-transition: all calc(var(--menuOpeningTime) / 2) ease-out;
  -o-transition: all calc(var(--menuOpeningTime) / 2) ease-out;
  transition: all calc(var(--menuOpeningTime) / 2) ease-out;
  border-bottom: 1px solid var(--sand);
  padding-top: .5em;
  color: var(--orange);
}

#menuBar .menuContainer #mainMenu li.active > a{
  color: var(--green);
}

#menuBar .menuContainer[data-status=opening] #mainMenu li, #menuBar .menuContainer[data-status=opened] #mainMenu li{
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

#menuBar .menuContainer[data-status=opening] li:nth-child(1){
  -webkit-transition-delay: calc(var(--menuOpeningTime) / 2);
  -moz-transition-delay: calc(var(--menuOpeningTime) / 2);
  -o-transition-delay: calc(var(--menuOpeningTime) / 2);
  transition-delay: calc(var(--menuOpeningTime) / 2);
}
#menuBar .menuContainer[data-status=opening] li:nth-child(2){
  -webkit-transition-delay: calc(0.2s + var(--menuOpeningTime) / 2);
  -moz-transition-delay: calc(0.2s + var(--menuOpeningTime) / 2);
  -o-transition-delay: calc(0.2s + var(--menuOpeningTime) / 2);
  transition-delay: calc(0.2s + var(--menuOpeningTime) / 2);
}
#menuBar .menuContainer[data-status=opening] li:nth-child(3){
  -webkit-transition-delay: calc(0.4s + var(--menuOpeningTime) / 2);
  -moz-transition-delay: calc(0.4s + var(--menuOpeningTime) / 2);
  -o-transition-delay: calc(0.4s + var(--menuOpeningTime) / 2);
  transition-delay: calc(0.4s + var(--menuOpeningTime) / 2);
}
#menuBar .menuContainer[data-status=opening] li:nth-child(4){
  -webkit-transition-delay: calc(0.6s + var(--menuOpeningTime) / 2);
  -moz-transition-delay: calc(0.6s + var(--menuOpeningTime) / 2);
  -o-transition-delay: calc(0.6s + var(--menuOpeningTime) / 2);
  transition-delay: calc(0.6s + var(--menuOpeningTime) / 2);
}
#menuBar .menuContainer[data-status=opening] li:nth-child(5){
  -webkit-transition-delay: calc(0.8s + var(--menuOpeningTime) / 2);
  -moz-transition-delay: calc(0.8s + var(--menuOpeningTime) / 2);
  -o-transition-delay: calc(0.8s + var(--menuOpeningTime) / 2);
  transition-delay: calc(0.8s + var(--menuOpeningTime) / 2);
}

.menuContainer .socialBar > ul{
  display: inline-block;
}

.menuContainer .socialBar > ul > li{
  display: inline-block;
  margin-right: .5em;
}

.menuContainer .socialBar > ul > li:last-child{
  margin-right: 0;
}

.lang-switches li{
  padding: 0 .25em;
  display: inline-block;
}

#menuBar .menuContainer .lang-switches li > a.active{
  color: var(--green);
}

.lang-switches li:first-child{
  padding-left: 0;
}

.lang-switches li:last-child{
  padding-right: 0;
}

/* xs, sm*/
@media (max-width: 767px){

  :root{
    --menuOpeningTime: .7s;
  }

  #mainMenu li{
    font-size: 34px;
  }
  #menuBar .menuContainer > .content {
    left: 10vw;
    width: 80vw;
  }

  .menuContainer .socialBar, .menuContainer .lang-switches{
    font-size: 24px;
  }
  #menuBar .menuContainer::after {
    width: 65vw;
    height: 49vw;
  }

  #menuBar .menuSwitchers{
    padding: .5em .5em 4.5em .5em;
  }
}

/* md */
@media (min-width: 768px){

  :root{
    --menuOpeningTime: .9s;
  }
  #mainMenu li{
    font-size: 55px;
  }
  #menuBar .menuContainer > .content{
    margin: auto;
    width: 70vw;
  }

  .menuContainer .socialBar, .menuContainer .lang-switches{
    font-size: 30px;
  }
  #menuBar .menuContainer::after{
    width: 25vw;
    height: 19vw;
  }

  #menuBar .menuSwitchers{
    padding: .5em .5em 4em .5em;
  }
}

/* lg */
@media (min-width: 992px){
  #menuBar .menuContainer > .content{
    width: 50vw;
  }
}

/* xl */
@media (min-width: 1200px){

  :root{
    --menuOpeningTime: 1s;
  }
  #menuBar .menuSwitchers{
    padding: .5em .5em 3.5em .5em;
  }
}