.filter_grey{
  width:100vw;
  height:100vh;
  position:fixed;
  transform: scale(0) translate(0, 0);
  top:0;
  left:0;
  z-index:1000;
  transform: scale(0) translate(0, 0);
  background-color:#856E50;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  opacity: 0;
}

.menu{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:90vh;
  transform: scale(0) translate(0, 0);
  display:flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
  transform: scale(0) translate(0, 0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  z-index:2000;
  gap:5vh;
  opacity: 0;
}

.menu a{
  max-width:80%;
 max-height:15vh;
 -webkit-transition:  0.5s;
 transition:  0.5s;
 
 display: contents;
}

.menu a:hover{
 max-height:20vh;
}

.menu a img{
  max-width:65%;
 max-height:13vh;
 -webkit-transition:  0.5s;
 transition:  0.5s;

}

.menu a img:hover{
 max-height:20vh;
}

.menu_socialMedia{
  width:100%;
  position:fixed;
  bottom:5%;
  height:5vw;
  transform: scale(0) translate(0, 0);
  display:flex;
  flex-direction:flex-start;
  justify-content: center;
  align-items:center;
  z-index:2000;
  font-size:25px;
  gap:20px;
}



.facebook,.facebook img,.instagram,.instagram img,.wechat,.wechat img,.weibo,.weibo img,.redbook, .redbook img{
  width:30px;
  height:30px;
  max-width:30px;
  max-height:30px;
  min-width:30px;
  min-height:30px;
  }

.menu_socialMedia a:hover{
filter:brightness(0.7) !important; 
}

 /* mobile */
 @media screen and (max-height: 625px){
  .facebook,.facebook img,.instagram,.instagram img,.wechat,.wechat img,.weibo,.weibo img,.redbook, .redbook img{
    width:20px;
    height:20px;
    max-width:20px;
    max-height:20px;
    min-width:20px;
    min-height:20px;
    }

 } 


 /* mobile */
 @media screen and (max-width: 425px){
  .menu{
    height:93vh;
  }
 } 

 .menuIcon{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:10%;
  min-width:76px;
  height:40px;
  max-height:40px;
  position:absolute;
  right:5%;
}



@media only screen and (max-width: 500px) { 
  .menuIcon{
    gap:3.5px;
    width:7.5% !important;
    min-width:48px;
    height:30px;
    max-height:30px;
    right:15px;
  }
  
  .menuIcon img{
    max-height:7.66px !important;
    max-width:48px !important;
  }
}

/*animation*/
.topBar_anime{
  animation: topBar 0.5s linear 0s 1 normal forwards;
  }
  
  .middleBar_anime{
    animation: middleBar 0.5s linear 0s 1 normal forwards;
  }
  
  .bottomBar_anime{
    animation: bottomBar 0.5s linear 0s 1 normal forwards;
  }

  .topBar_anime_reverse{
    animation: topBar_reverse 0.5s linear 0s 1 normal forwards;
    }
    
    .middleBar_anime_reverse{
      animation: middleBar_reverse 0.5s linear 0s 1 normal forwards;
    }
    
    .bottomBar_anime_reverse{
      animation: bottomBar_reverse 0.5s linear 0s 1 normal forwards;
    }