#kmMainMenu {
	width:100vw;
	height:100vh;
	position:fixed;
	z-index:9999;
	left:0;
	display:none;
	background-color: #002733;
}

#kmMainMenu .kmmainmenu-container {
	display: flex;
	width: 100%;
}

#kmMainMenu .kmMainMenuCol1 {
	flex: 1;
	width: 49%;
	height: 100vh;
	padding: 10%;
    background-color: #002733;
	animation: slide-inL 500ms;
}

#kmMainMenu .kmMainMenuCol2 {
	flex: 1;
	width: 49%;
	height: 100vh;
    padding: 10%;
    background-color: #fff3e2;
	animation: slide-inR 500ms;
}

.kmmainmenu-container .kmMainMenuCol1 .km-main-menu  a {
	color: #f9f3ee;
	font-size: 230%;
	text-transform: uppercase;
}

#kmMainMenu .kmmainmenu-container .kmMainMenuCol1 .km-main-menu li {
	padding-right: 10px;
    border: none !important;
	text-align: right !important;
	box-shadow: inset 0 0 0 0 #957d50;
    -webkit-transition: ease-in-out 0.8s;
    -moz-transition: ease-in-out 0.8s;
    transition: ease-in-out 0.8s;
}

#kmMainMenu .kmmainmenu-container .kmMainMenuCol1 .km-main-menu li:hover {
  box-shadow: inset 100vw 0 1px 0 #fff3e2;
}

#kmMainMenu .kmmainmenu-container .kmMainMenuCol1 .km-main-menu a:hover {
  color: #002733;
	transition: 0.3s ease-in-out;
}

#kmMainMenu .kmlogo img {
	height: 100%;
	width: 80%;
}

#kmMainMenu .openMenuButtonContainer {
	cursor: pointer;
}

#kmMainMenu .closeMenuButtonContainer {
	position: absolute;
	top: 5%;
	right: 5%;
	cursor: pointer;
}


@keyframes slide-inL {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0%);
    }
  }

@keyframes slide-inR {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0%);
    }
  }

/*----------Nav Menu Icon----------*/

.openMenuButtonContainer {
  display: block;
  position: relative;
  height: 70px;
}

.openMenuButtonContainer .checkbox {
  position: absolute;
  display: block;
  height: 40px;
  width: 50px;
  top: 0;
  right: 10px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.openMenuButtonContainer .hamburger-lines {
  display: block;
  height: 25px;
  width: 35px;
  position: absolute;
  top: 20px;
  right: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.openMenuButtonContainer .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #fff3e2;
}

.openMenuButtonContainer .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.openMenuButtonContainer .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.openMenuButtonContainer .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.header-wrapper .stuck .openMenuButtonContainer {
  display: block;
  position: relative;
  height: 50px;
}

.nav-dark .openMenuButtonContainer .hamburger-lines .line {
	background: #fff;
}

#closeMenuButton {
  display: block;
  position: relative;
}

#closeMenuButton .closeMenuButtonLine {
  display: block;
  height: 45px;
  width: 59px;
  position: absolute;
  top: 10px;
  right: 75px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#closeMenuButton .line {
  display: block;
  height: 8px;
  width: 44px;
  border-radius: 10px;
  background: #002733;
}

#closeMenuButton  .closeMenuButtonLine-1 {
  transform: rotate(45deg);
}
#closeMenuButton  .closeMenuButtonLine-2 {
  transform: rotate(-45deg);
}

/*show custom html modules in flatsome mobile header*/
@media (max-width: 985px) {
	.header-main li.html.custom {
		display: block !important;
	}
	#kmMainMenu {
	width:100vw;
	height:100vh;
	position:fixed;
	z-index:9999;
	left:0;
	display:none;
	background-color: #002733;
    }

    #kmMainMenu .kmmainmenu-container {
	display: inline-block;
	height: 100%;
    }

    #kmMainMenu .kmMainMenuCol1 {
	flex: 1;
	width: 100%;
    height: 80%;
    padding: 20% 10% 10% 10%;
    background-color: #002733;
	animation: slide-inL 500ms;
    }

    #kmMainMenu .kmMainMenuCol2 {
	flex: 1;
	width: 100%;
	height: 20%;
    padding: 10%;
    background-color: #f9f3ee;
	animation: slide-inR 500ms;
    }
	
	#kmMainMenu .kmmainmenu-container .kmMainMenuCol1 .km-main-menu li {
	text-align: center !important;
    }
	
	#kmMainMenu .kmlogo {
	width: 100%;
	margin: auto;
	
    }
	
	#kmMainMenu .kmlogo img {
	width: 100%;
    }
	
	
	#kmMainMenu .closeMenuButtonContainer {
   top: 3%;
   right: -16%;
   }
   
   #closeMenuButton .line {
   background: #fff3e2;
   }

	.openMenuButtonContainer .hamburger-lines {
		top: 35px;
	}
	.stuck .openMenuButtonContainer .hamburger-lines {
		top: 25px;
	}
}