.menu{}

body.open-menu{ overflow: hidden;}
.menuBox {
  position: fixed;
  top: 0;
  right:0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  background-color:var(--greenColor);
  overflow-y: auto;
  z-index: 999;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: translateX(100%);
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-duration: 0.9s;
  visibility: hidden;
  color:var(--whiteColor);
}
.menuLogo{
  position:absolute;
  left:40px;
  bottom:40px;
  width:58px;
  height:58px;
}

.scrollArrow{
  position:absolute;
  right:20px;
  bottom:30px;
  width:30px;
  cursor:pointer;
  display:none;
}

body.open-menu .menuBox {
  right: 0;
  visibility: visible;
  transform: translateX(0);
}
.menubtn, .closebtn{
  width:60px;
  height:60px;
  position:absolute;
  right:20px;
  top:20px;
  cursor:pointer;
  z-index:1;
  background-size:60px;
  background-position:center center;
  background-repeat:no-repeat;
}
.menubtn{background-image:url('../images/menu-icon.svg');
/* top:45px; */
top:30px;
}
.closebtn{background-image:url('../images/close-icon.svg'); top:64px; right: 50px;}

.mainMenu{
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;
}
.menuBox ul{ list-style-type: none; margin: 0px; padding: 0px;}
.menuBox ul li{ margin: 0px; padding: 0px;}

.mainMenu{ position: relative;}
.mainMenu::before, .mainMenu::after{
  content:'';
  position:absolute;
  width:1px;
  height:calc(100% - 46px);
  top:0;
  bottom:0;
  margin:auto;
  background-color:var(--whiteColor);
}
.mainMenu::before{left:0;}
.mainMenu::after{left:50.7%;}

.menuBox ul.mainMenu > li{
  padding:16px 40px;
  break-inside: avoid;
}
.menuBox ul.mainMenu > li.gallery-page,
.menuBox ul.mainMenu > li.my-makers-page,
.menuBox ul.mainMenu > li.say-hello-page{padding:30px 40px;}
.mainMenu > li a{
  font-size:52px;
  line-height:60px;
  letter-spacing:-2.704px;
  color:var(--whiteColor);
  text-decoration:none;
}

.mainMenu ul.sub-menu{ padding-top:14px;}
.mainMenu ul.sub-menu li{ padding: 4px 0;}
.mainMenu ul.sub-menu li a{
  font-family:'EDGE-Medium', sans-serif;
  font-weight:500;
  font-style:normal;
  font-display:swap;
  font-size:16px;
  line-height:24px;
  letter-spacing:0.6px;
  text-transform:uppercase;
}

ul.mainMenu li a:hover,
ul.mainMenu li.current-menu-item > a{color:var(--yellowColor);}
ul.mainMenu li.current-menu-item ul.sub-menu li a{ color:var(--whiteColor)}
ul.mainMenu li.current-menu-item ul.sub-menu li a.active-menu-item{color:var(--yellowColor);}

@media screen and (min-width: 0px) and (max-width:1800px){
  .menubtn{right:50px;}
}

@media screen and (min-width: 0px) and (max-width:1100px){
  .menuBox .content_1080{max-width:850px;}
  .menuBox ul.mainMenu > li{padding:16px 30px;}
  .menuBox ul.mainMenu > li.gallery-page,
.menuBox ul.mainMenu > li.my-makers-page,
.menuBox ul.mainMenu > li.say-hello-page{padding:32px 30px;}
  .mainMenu > li a{font-size:42px; line-height:50px; letter-spacing:-1.764px;}
  .mainMenu::before, .mainMenu::after{
    height:calc(100% - 22px);
    top:0;
    bottom:0;
    margin:auto;
  }
}

@media screen and (min-width: 0px) and (max-width: 896px) {

  @media all and (orientation: landscape){
    .closebtn{top:20px; right:20px;}
    .mainMenu > li a{font-size:26px!important; line-height:30px!important; letter-spacing: -0.676px!important;}
    .menuBox ul.mainMenu > li{padding:10px 20px;}
    .menuBox ul.mainMenu > li.gallery-page,
.menuBox ul.mainMenu > li.my-makers-page,
.menuBox ul.mainMenu > li.say-hello-page{padding:26px 20px;}
    .menuLogo{right:20px; left:auto; bottom:20px; width:48px; height:48px;}
    .mainMenu ul.sub-menu{padding-top:4px;}
    .mainMenu ul.sub-menu li{line-height:0;}
    .mainMenu ul.sub-menu li a{font-size:14px!important; line-height:20px!important;}
  }

  @media all and (orientation: portrait){
    .menuBox .content_1080{max-width:650px;}
  }
}

@media screen and (min-width: 0px) and (max-width:880px){
.menuBox ul.mainMenu > li{padding:14px 20px;}
.menuBox ul.mainMenu > li.gallery-page,
.menuBox ul.mainMenu > li.my-makers-page,
.menuBox ul.mainMenu > li.say-hello-page{padding:32px 20px;}
.mainMenu > li a{font-size:32px; line-height:40px; letter-spacing: -1.024px;}
.mainMenu ul.sub-menu{padding-top:8px;}
.mainMenu ul.sub-menu li a{font-size:14px; line-height:20px;}
}

@media screen and (min-width: 0px) and (max-width:767px){
header{position:relative;}
header.scroll{ border-bottom: 0px;}
.logo img, header.scroll .logo img{height:120px!important;}
header.scroll .logo{ opacity: 1; visibility: visible;}
header.scroll .largeLogo{opacity:0;visibility:hidden;}
#page-wrap{ padding-top:20px;}
.menubtn, header.scroll .menubtn{top:40px!important;}
.menubtn, .closebtn{width:52px; height:52px;}
.menubtn{
  background-image: url('../images/white-menu-icon.svg')!important;
  background-color:var(--greenColor);
  border-radius:8px 0 0 8px;
  position: fixed;
  right:0;
  /* top:20px; */
  background-size:36px;
  background-position:center center;
}
.mainMenu ul.sub-menu{padding-left:14px;}
}


@media screen and (min-width: 0px) and (max-width:550px){
.menubtn, .closebtn{width:50px; height:50px;}
.menuLogo{width:48px; height:48px;}
.mainMenu::after{display:none;}
.mainMenu{-webkit-column-count:1; -moz-column-count:1; column-count:1;}
.menuBox .content_1080{padding:0 20px; padding-left:40px;}
.mainMenu > li a{font-size:28px; line-height:34px; letter-spacing:-0.784px;}
.menuBox ul.mainMenu > li{padding:10px 20px;}
.menuBox ul.mainMenu > li.gallery-page,
.menuBox ul.mainMenu > li.my-makers-page,
.menuBox ul.mainMenu > li.say-hello-page{padding:10px 20px;}
.mainMenu ul.sub-menu{padding-left:18px; padding-top:10px; padding-bottom:6px;}
.mainMenu ul.sub-menu li a{font-size:16px; line-height:24px;}
.closebtn{right:20px; top:20px;}
.menuBox .content_1080{height:calc(100% - 140px); overflow:hidden; overflow-y:auto;}
.menuLogo{right:20px; left:auto; bottom:20px;}
.mainMenu::before, .mainMenu::after{height:calc(100% - 20px); top:0;bottom:0;margin:auto;}

.menuLogo{display:none;}
.scrollArrow{display:block;}
}


ul.mainMenu li.gallery-page ul.sub-menu li.current-menu-item a{ color:var(--yellowColor);}