.menu {
	display: block;
	position: absolute;
	top: 0;
    width: 100%;
	max-height: 600px;
	z-index: 1;
	-webkit-transition: -webkit-transform 0.5s linear;
	-moz-transition: -moz-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear;
	-webkit-transform: translateY(-600px);
	-moz-transform: translateY(-600px);
	-ms-transform: translateY(-600px);
	overflow: hidden;
}

/*
==============================================
slideDown
==============================================
*/

.slideDown{
	display: block;
	position: absolute;
	top: 0;
    width: 100%;
    z-index: 1;
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 0.5s;	
	-webkit-animation-duration: 0.5s;

	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;	

	visibility: visible !important;						
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
}

/*
==============================================
slideUp
==============================================
*/

.slideUp{
	display: block;
	position: absolute;
	top: 0;
    width: 100%;
    z-index: 1;
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	

	animation-duration: 0.4s;	
	-webkit-animation-duration: 0.4s;

	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;	

	visibility: visible !important;						
}

@keyframes slideUp {
	100% {
		transform: translateY(-100%);
	}
}

@-webkit-keyframes slideUp {
	100% {
		-webkit-transform: translateY(-100%);
	}
}


/*
==============================================
slideLeft
==============================================
*/


.slideLeft{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;		

	visibility: visible !important;	
}

@keyframes slideLeft {
	0% {
		transform: translateX(150%);
	}
	50%{
		transform: translateX(0%);
	}
	65%{
		transform: translateX(0%);
	}
	80%{
		transform: translateX(0%);
	}
	95%{
		transform: translateX(0%);
	}			
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideLeft {
	0% {
		-webkit-transform: translateX(150%);
	}
	50%{
		-webkit-transform: translateX(0%);
	}
	65%{
		-webkit-transform: translateX(0%);
	}
	80%{
		-webkit-transform: translateX(0%);
	}
	95%{
		-webkit-transform: translateX(0%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -ms-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}