.menu{
  width: 100%;
  min-height: 65px;
  padding: var(--defaultSpace);
  background: var(--bgDefault);
  color: #fff;
  font-size: 0.9em;
  font-weight: var(--fwNormal);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  display: block;
  cursor: pointer;
}

.menu .container{z-index: 2;}

.menuFlex{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.logo{width: 100px;}
.btAnchor{display: none;}

.boxMenu.activated .menuList{
  opacity: 1;
  height: auto;
  overflow: visible;
  padding: var(--defaultSpace);
}

.boxMenu.activated .btMenu{color: var(--mainColor);}
.boxMenu.activated .btMenu img{filter: invert(15%) sepia(38%) saturate(5110%) hue-rotate(107deg) brightness(96%) contrast(90%);}

.btMenu{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  text-transform: uppercase;
  cursor: pointer;
}

.btMenu span{margin-right: 8px;}

.btMenu img{
  width: 2.5px;
  margin-top: -2px;
}

.menuList{
  width: 100%;
  max-width: 240px;
  height: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  top: 48px;
  right: 0;
  background: var(--bgDefault);
  opacity: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 8px;
  border-top-right-radius: 0;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.75);
  transition: 0.15s;
}

.menuList li{cursor: pointer;}
.menuList li:hover{color: var(--mainColor);}
.menuList li:last-child{margin-bottom: 0;}

@media only screen and (min-width: 768px){
  .menu{
    min-height: unset;
    padding: unset;
  }

  .menuFlex{
    width: calc(100% -  220px);
    justify-content: flex-start;
  }

  .menu .btn{
    max-width: 220px;
    border-radius: 0;
  }

  .logo, .boxMenu{margin-right: 35px;}
  .btAnchor{display: block;}
  .btAnchor:hover{color: var(--mainColor);}
  .btMenu{text-align: right;}
  .btMenu img{margin-top: 0;}

  .menuList{
    top: 40px;
    right: unset;
    left: 50px;
    border-radius: 8px;
  }

  .btOpt{display: none;}
}