.menu{}
.menuBox {
  position:fixed;
  right:0;
  top:0;
  width:100%;
  height:100%;
  overflow:hidden;
  padding:0 0px;
  padding-top:0px;
  padding-top:130px;
  padding-bottom:58px;
  z-index:99;
  opacity:0;
  visibility:hidden;
  }

  .menuHolder{ width: 100%; height: 100%; overflow-y: auto; display: flex;
  align-items: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  -webkit-transition-delay:0.2s;
-moz-transition-delay:0.2s;
transition-delay:0.2s;
}

.menuHolder nav{ padding-left:40%;}

.responsiveLink{ position:absolute; right:140px; top:50px; z-index: 999; width: 46px; height: 46px; 
  /* background-color:#fff;  */
  border-radius:50%;
}

.menuoverlay{ width:46px; height:46px; right:140px; top:50px; background-color: #172B36; border-radius:50%; content:''; position: fixed;}
body.open-menu .menuoverlay{ right: 0; top:0;
-webkit-transform: scale(150);
-moz-transform: scale(150);
transform: scale(150);}
body.open-menu .menuHolder{ opacity: 1;
visibility: visible;}
body.open-menu .responsiveLink{ background-color:transparent;}
body.open-menu .menuBox{opacity:1; visibility:visible;}
/* menu icon start here */
.hamburger--slider .hamburger-inner{top:15px; left: 10px;}
.hamburger--slider .hamburger-inner::before {
   top: 8px;
   transition-property: opacity, -webkit-transform;
   transition-property: transform, opacity;
   transition-property: transform, opacity, -webkit-transform;
   transition-timing-function: ease;
   transition-duration: 0.2s;
   left:0px;
 }
.hamburger--slider .hamburger-inner::after { top: 16px; }
.hamburger--slider.is-active .hamburger-inner {
  -webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
  transform: translate3d(0, 10px, 0) rotate(45deg);
  background-color: #fff;
}
.hamburger--slider.is-active .hamburger-inner::before {
  -webkit-transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  opacity: 0;
  background-color: #fff;
}
.hamburger--slider.is-active .hamburger-inner::after {
  -webkit-transform: translate3d(0, -20px, 0) rotate(-90deg);
  transform: translate3d(0, -20px, 0) rotate(-90deg);
  background-color: #fff;
}

.hamburger--slider.is-active .hamburger-inner{ top:13px; left: 10px;}
.hamburger--slider.is-active .hamburger-inner::after{ top:20px;}

.hamburger {
   display: inline-block;
   cursor: pointer;
   border-radius:4px;
   transition-property: opacity, -webkit-filter;
   transition-property: opacity, filter;
   transition-property: opacity, filter, -webkit-filter;
   transition-duration: 0.15s;
   transition-timing-function: linear;
   font: inherit;
   color: inherit;
   text-transform: none;
   border: 0;
   margin: 0;
   overflow: visible;
   width: 46px; height: 46px;
}
.hamburger:hover {/*opacity: 0.7;*/ }
.hamburger-box {width:46px; height:46px; display: inline-block;position: relative; border-radius: 4px;}

.hamburger-inner {display:block; top:50%; margin-top:-2px; width: 44px; height: 44px;}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
   width:26px;
   height:3px;
   background-color: #172C35;
   border-radius: 0px;
   position: absolute;
   transition-property: -webkit-transform;
   transition-property: transform;
   transition-property: transform, -webkit-transform;
   transition-duration: 0.15s;
   transition-timing-function: ease;
 }
.hamburger-inner::before, .hamburger-inner::after {content: ""; display: block; }
.hamburger-inner::before {top: -10px; }
.hamburger-inner::after {bottom: -10px; }

header.scroll .hamburger-inner, header.scroll .hamburger-inner::before, header.scroll .hamburger-inner::after {
  background-color:#fff;
}



body.page-template-template-home .hamburger-inner, 
body.page-template-template-home .hamburger-inner::before, 
body.page-template-template-home .hamburger-inner::after,
body.page-template-template-local-area .hamburger-inner, 
body.page-template-template-local-area .hamburger-inner::before, 
body.page-template-template-local-area .hamburger-inner::after,
body.page-template-template-retail .hamburger-inner, 
body.page-template-template-retail .hamburger-inner::before, 
body.page-template-template-retail .hamburger-inner::after{
background-color:#fff;
}
/* menu icon end here */

.menuBox ul{ list-style-type: none;}
.menuBox ul, .menuBox ul li{ margin: 0px; padding: 0px;}
.menuBox ul li{padding:0 0 18px 0;}
.menuBox ul li a{font-family: 'TT-Norms-Pro-Bold', sans-serif; color:#ffffff; text-decoration:none; font-size:60px; line-height:68px; letter-spacing: -2.4px;}
.menuBox ul li.current-menu-item a, .menuBox ul li a:hover{color:#87E0C7;}

@media screen and (min-width: 0px) and (max-width:1800px) {
  .menuBox ul li{ padding-bottom: 14px;}
  .menuBox ul li a{font-size:54px; line-height:62px; letter-spacing: -2.16px;}
}
@media screen and (min-width: 0px) and (max-width:1600px) {
  .responsiveLink, .menuoverlay{ right: 80px;}
}
@media screen and (min-width: 0px) and (max-width:1536px){
  .menuBox ul li a{
    font-size: 40px;
    line-height: 46px;
  }
  .menuBox{
  padding-top:106px;
  padding-bottom:58px;
  }
}
@media screen and (min-width: 0px) and (max-width:1366px) {
  .responsiveLink, .menuoverlay{right: 40px;}
}
@media screen and (min-width: 0px) and (max-width:1290px) {
  .menuBox{padding-top:120px; padding-bottom:60px;}
  .menuBox ul li{padding-bottom:12px;}
  .menuBox ul li a{font-size:40px; line-height:48px;}
}
@media screen and (min-width: 0px) and (max-width:1100px) {
  .responsiveLink, .menuoverlay{right:20px;}
  .menuHolder nav{padding-left:0;}
  .menuBox ul li a{font-size:50px; line-height:60px; letter-spacing: -2px;}
}

@media screen and (min-width: 0px) and (max-width:900px) {
  .responsiveLink, header.scroll .responsiveLink, .menuoverlay{ top:20px;}
  header.scroll{padding:16px 0;}
  .menuBox{ padding-top:92px;}
  .menuBox ul li a{font-size:46px; line-height:54px; letter-spacing: -1.84px;}

}

@media screen and (min-width: 0px) and (max-width: 896px) {
@media all and (orientation: landscape) {
  .menuBox ul li a{font-size:38px; line-height:44px;}
}
}

@media screen and (min-width: 0px) and (max-width:640px) {
  .menuBox ul li a{font-size:34px; line-height:42px; letter-spacing: -1.6px;}
  .responsiveLink, header.scroll .responsiveLink, .menuoverlay{ top:14px;}
}

@media screen and (min-width: 0px) and (max-width:550px) {
  .menuBox ul li {padding-bottom:6px;}
  .menuBox ul li a{font-size:32px; line-height:40px; letter-spacing: -1.6px;}
}
