.menu-opener {
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  position: relative;
  text-indent: -9999px;
  height: 21px;
  width: 32px;
  z-index: 199999999;
}

.menu-opener span {
  background: white;
  height: 3px;
  left: 0;
  position: absolute;
  transform-origin: 0% 0%;
  transition: 0.3s ease;
  width: 100%;
  will-change: auto;
}

.menu-opener span:nth-of-type(1) {
  top: 0;
}

.menu-opener.open span {
  background: #fff !important;
}

/*  .menu-opener span {
  background: #121416;
}*/

.menu-opener:hover span:nth-of-type(1) {
  transform: translateY(-3px);
}


.menu-opener.open span:nth-of-type(1) {
  top: 50%;
  transform: rotate(45deg) translate(-50%, -50%);
  left: 50%;
}
.menu-opener.open span:nth-of-type(2) {
  transition: 0s linear;
  opacity: 0;
}

.menu-opener span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}

.menu-opener.open span:nth-of-type(3) {
  bottom: auto;
  top: 50%;
  transform: rotate(-45deg) translate(-50%, -50%);
  left: 50%;
}


.menu-opener.open ~ .menu-mobile {
  display: flex;
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

.menu-mobile {
  align-items: center;
  background: var(--main-regal-dark-color);
  box-sizing: border-box;
  display: flex;
  height: 100vh;
  justify-content: center;
  opacity: 0;
  overflow: scroll;
  padding: 120px 20px;
  pointer-events: none;
  top: 0;
  transition: opacity 0.5s ease-in, visibility 0.5s ease-in;
  text-align: center;
  visibility: hidden;
  z-index: 19999999;
}

.menu-mobile {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}


.menu-mobile nav ul {
  display: flex;
  flex-flow: column;
  list-style: none;
}

.menu-mobile nav ul {
 margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

.menu-mobile nav ul li {
  opacity: 0;
  padding: 12% 0;
  transform: translateY(50%);
  transition: opacity 0.1s ease-in, transform 0.1s ease-in;
  transition-delay: 0s;
  will-change: opacity transform;
}

.menu-opener.open ~ .menu-mobile ul li {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.menu-opener.open ~ .menu-mobile ul li:nth-of-type(1) {
  transition-delay: 0.1s;
}

.menu-opener.open ~ .menu-mobile ul li:nth-of-type(2) {
  transition-delay: 0.2s;
}

.menu-opener.open ~ .menu-mobile ul li:nth-of-type(3) {
  transition-delay: 0.3s;
}

.menu-opener.open ~ .menu-mobile ul li:nth-of-type(4) {
  transition-delay: 0.4s;
}

.menu-opener.open ~ .menu-mobile ul li:nth-of-type(5) {
  transition-delay: 0.5s;
}

.menu-opener.open ~ .menu-mobile ul li:nth-of-type(6) {
  transition-delay: 0.5s;
}

.menu-opener.open ~ .menu-mobile ul li:nth-of-type(7) {
  transition-delay: 0.5s;
}

@media (max-width: 860px){
.menu-opener {
    display: inline-block;
}
}

.menu-mobile nav ul li a {
color: #f2f2f2;
}

.menu-mobile nav ul li a {
  font-size: 6vw;
  font-weight: 300;
}

@media (max-width: 600px){
  .menu-mobile nav ul li a {
      font-size: 8vw;
  }
}





div.burger {
	height: 30px; 
	width: 40px;
	/*position: absolute;
	top: 11px; 
	right: 21px;
	cursor: pointer;
	z-index: 999;*/

	position: fixed;
    right: 19px;
    height: 14px;
    line-height: 30px;
    text-decoration: none !important;
    top: 21px;
    width: 23px;
    cursor: pointer;
    z-index: 199999999;
}
	
div.x,
div.y,
div.z {
	position: absolute; margin: auto;
	top: 0px; bottom: 0px;		
	background: #231f20;
	border-radius:2px;
	-webkit-transition: all 200ms ease-out;
	   -moz-transition: all 200ms ease-out;
	    -ms-transition: all 200ms ease-out;
	     -o-transition: all 200ms ease-out;
	        transition: all 200ms ease-out;
}	

div.x.collapsed,
div.z.collapsed{
	background: white;
}


div.x, div.y, div.z { height: 3px; width: 26px; }
div.y{top: 18px;}
div.z{top: 37px;}

div.collapsed{
	top: 20px;
	-webkit-transition: all 70ms ease-out;
	   -moz-transition: all 70ms ease-out;
	    -ms-transition: all 70ms ease-out;
	     -o-transition: all 70ms ease-out;
	        transition: all 70ms ease-out;
}
 

div.rotate30{
	-ms-transform: rotate(30deg); 
	-webkit-transform: rotate(30deg); 
    transform: rotate(30deg);	
	-webkit-transition: all 50ms ease-out;
	   -moz-transition: all 50ms ease-out;
	    -ms-transition: all 50ms ease-out;
	     -o-transition: all 50ms ease-out;
	        transition: all 50ms ease-out;					
}
div.rotate150{
	-ms-transform: rotate(150deg); 
	-webkit-transform: rotate(150deg); 
    transform: rotate(150deg);	
	-webkit-transition: all 50ms ease-out;
	   -moz-transition: all 50ms ease-out;
	    -ms-transition: all 50ms ease-out;
	     -o-transition: all 50ms ease-out;
	        transition: all 50ms ease-out;					
}

div.rotate45{
	-ms-transform: rotate(45deg); 
	-webkit-transform: rotate(45deg); 
    transform: rotate(45deg);	
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
	    -ms-transition: all 100ms ease-out;
	     -o-transition: all 100ms ease-out;
	        transition: all 100ms ease-out;					
}
div.rotate135{
	-ms-transform: rotate(135deg); 
	-webkit-transform: rotate(135deg); 
    transform: rotate(135deg);	
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
	    -ms-transition: all 100ms ease-out;
	     -o-transition: all 100ms ease-out;
	        transition: all 100ms ease-out;					
}

div.navbar{height:73px;background:#fff;}

div.menu-bg{	
	
	width: 320px;
	height: 568px; 
	position:absolute;	
  top:0;
  left:0;
	background:#bed62e;
	opacity:0;
	-webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);	
}
div.menu-bg.animate{
	opacity:0.9;
	-webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);					
	
}

div.menu {
	height: 568px; 
	width: 160px;
}

.menu-splitL, .menu-splitR{
	overflow:hidden;
	position: absolute;
	top: 90px;	
	left: 0px;
	width:160px;
}
.menu-splitR{left:160px;}

div.menu ul li {
	list-style: none;
	width:320px;
	margin-top:40px;
	text-align:center;
	font-size:19px;
	-webkit-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
div.menu ul li a {
	color:#231f20;
	text-transform:uppercase;
	text-decoration:none;	
	letter-spacing:0px;	
}

section > div {
    transition: transform 1s;
    transform: translateX(0px);
}

div.menu li.animate{
	color: white;
	font-size:19px;
	opacity:1;
	-webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}