/*---------- NAV Trigger ----------*/
.nav-trigger {
	border-radius: 2px;
	height: 44px;
	margin: 11px auto 7px;
	position: relative;
	width: 44px;
	background-color: transparent !important;
	border: 0px !important;
}

.nav-trigger .menu-text {
  color: #333;
  text-transform: uppercase;
  font-weight: 700;
  display: none;   /* hide the text on small devices */
}

/* this span is the central line of the menu icon */
.nav-trigger .menu-icon {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  width: 22px;
  height: 4px;
  background-color: #333;
  -webkit-transform: translateX(-50%) translateY(-50%);
	   -moz-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		 -o-transform: translateX(-50%) translateY(-50%);
			   transform: translateX(-50%) translateY(-50%);
  -webkit-transition: background-color 0.3s;
	   -moz-transition: background-color 0.3s;
			 transition: background-color 0.3s;
}

/* these are the upper and lower lines in the menu icon */
.nav-trigger .menu-icon::before, .nav-trigger .menu-icon:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #333;
  right: 0;
  -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
	  -moz-transition: -moz-transform .3s, top .3s, background-color 0s;
		  transition: transform .3s, top .3s, background-color 0s;
}

.nav-trigger .menu-icon::before { top: -6px; }
.nav-trigger .menu-icon::after { top: 6px; }

.nav-trigger .menu-icon.is-clicked { background-color: rgba(255, 255, 255, 0); }
.nav-trigger .menu-icon.is-clicked::before,
.nav-trigger .menu-icon.is-clicked::after { background-color: #333; }
.nav-trigger .menu-icon.is-clicked::before {
  top: 0;
  -webkit-transform: rotate(135deg);
	   -moz-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		 -o-transform: rotate(135deg);
			   transform: rotate(135deg);
}

.nav-trigger .menu-icon.is-clicked::after {
  top: 0;
  -webkit-transform: rotate(225deg);
	   -moz-transform: rotate(225deg);
		-ms-transform: rotate(225deg);
		 -o-transform: rotate(225deg);
			   transform: rotate(225deg);
}