.menu-panel { 
	width: 200px;
	height: 200px;
	background: #ffcc00;
	position: fixed;
	-webkit-transform: scale(0);
	transform: scale(0) rotate(45deg);
	z-index: 501;
}

.menu-panel-1 {
	bottom: -100px;
	left: -100px;
}

.menu-panel-2 {
	top: -100px;
	right: -100px;
}

@-webkit-keyframes menu {
	0% {
		-webkit-transform: rotate(45deg) scale(0);
		transform: rotate(45deg) scale(0);
	}
	50% {
		-webkit-transform: rotate(45deg) scale(15);
		transform: rotate(45deg) scale(15);
	}
	100% {
		-webkit-transform: rotate(45deg) scale(0);
		transform: rotate(45deg) scale(0);
	}
}
@keyframes menu {
	0% {
		-webkit-transform: rotate(45deg) scale(0);
		transform: rotate(45deg) scale(0);
	}
	50% {
		-webkit-transform: rotate(45deg) scale(15);
		transform: rotate(45deg) scale(15);
	}
	100% {
		-webkit-transform: rotate(45deg) scale(0);
		transform: rotate(45deg) scale(0);
	}
}

.menu-panel.animate { 
	-webkit-animation: menu 0.6s ease-in-out;
          animation: menu 0.6s ease-in-out;
  -webkit-transform: scale(0) rotate(45deg);
          transform: scale(0) rotate(45deg);
}

.overlay-menu {
	display: block;
	opacity:0;
	width: 100vw;
	height: 100vh;
	background: #000;
	position: fixed;
	z-index: -100;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	background-position: top center;
	background-size:cover;
	overflow-y: scroll;
}

.no-webp .overlay-menu {
  background-image: url(images/menuBackground2.jpg);
}

.webp .overlay-menu {
  background-image: url(images/menuBackground2.webp);
}
  .overlay-menu.open { opacity:1; z-index:500; }
  

@-webkit-keyframes delay {
  0%, 40%, 100% {
    transform: scaleY(0.05);
    -webkit-transform: scaleY(0.05);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}
@keyframes delay {
  0%, 40%, 100% {
    transform: scaleY(0.05);
    -webkit-transform: scaleY(0.05);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}

body:before, body:after {
  content: '';
  height: 60vh;
  width: 100%;
  position: fixed;
  left: 0;
  background: #00192b;
  z-index: 500;
  transition: all 0.5s ease-in-out 0.5s;
}
body:before {
  top: 55%;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
body:after {
  bottom: 55%;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.loader {
  margin: 0 auto;
  width: 60px;
  height: 50px;
  text-align: center;
  font-size: 10px;
  position: fixed;
  top: 50vh;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  z-index: 600;
  opacity: 1;
  transition: opacity 0.5s ease-in-out, top 5s ease-in-out;
}
.loader > div {
  height: 100%;
  width: 8px;
  display: inline-block;
  float: left;
  margin-left: 2px;
  -webkit-animation: delay 0.8s infinite ease-in-out;
          animation: delay 0.8s infinite ease-in-out;
}
.loader .bar1 {
  background-color: #ffcc00;
}
.loader .bar2 {
  background-color: #ffcc00;
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.loader .bar3 {
  background-color: #ffcc00;
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.loader .bar4 {
  background-color: #ffcc00;
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.loader .bar5 {
  background-color: #ffcc00;
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.loader .bar6 {
  background-color: #ffcc00;
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}

.loaded .loader {
	opacity: 0;
	top: -50px;
}

.menu-services-container, .menu-wrapper {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.loaded .menu-services-container, .loaded .menu-wrapper {
	opacity: 1;
}

.loaded:before{
	top:0%;
}
.loaded:after {
	bottom: 0%;
}

.unloaded:before{
	top:55%;
}
.unloaded:after {
	bottom: 55%;
}