@media (min-width: 1500px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1800px) {
  .container {
    max-width: 1440px;
  }
}
@media only screen and (max-width: 1920px) {
}

@media only screen and (max-width: 1600px) {
}

@media only screen and (max-width: 1440px) {
  html{
    font-size: 14px;
  }
}

@media only screen and (max-width: 1366px) {
  html{
    font-size: 13px;
  }
}

@media only screen and (max-width: 1199px) {
  html{
    font-size: 12px;
  }
  .main-header{padding: 0;}
  .menuWrap .menu a{ padding: 16px 10px; }
	.main-header{ position: relative;  }
	.menu-Bar{ display: block; top: 50%; bottom: initial; transform: translateY(-50%); }
	.menuWrap.open{ display:flex; left:0px }
	.menuWrap{position:fixed;left:-210%;right:0;top:0;/* bottom:0; */margin:auto;background:var(--theme-color);height:100vh;display:flex;align-items:center;justify-content:center;flex-flow:column;transition:all 0.4s ease;z-index:3;width:100vw}
	ul.menu li{ display:block }
	ul.menu li a{ margin-bottom:10px;padding:0;display:block;text-align:center;margin-bottom:15px;padding-right:0px;margin-right:0px;color:#fff;font-size:15px;text-transform:capitalize}

	.menuWrap .menu{ display: block; }
	.menu li:hover a, .menu li.active a{ background: var(--black); }
	.menu-Bar span{ background: var(--white); }

	.menu li:hover > a, .menu li.active > a , .menu > li.menu-item-has-children > .sub-menu > li.current-menu-item > a{   background: var(--black) !important; }
	.menu > li.menu-item-has-children > .sub-menu > li{ background: transparent !important; }
}

@media only screen and (max-width: 991px) {
  .menuWrap .menu a{ padding: 8px 10px; margin-bottom: 6px; }

}

@media only screen and (max-width: 767px) {

}

@media only screen and (max-width: 575px) {
}