/* Menu Appearance */

[data-pushy] {
	position: fixed;
	width: 200px;
	height: 100%;
	top: 0;
	z-index: 9999;
	background: #ffffff;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	opacity: 0;
}

.pushy-left,
.pushy-right {
    opacity: 1;
}

.pushy-left {
	left: 0;
}

.pushy-right {
	right: 0;
}

/* Menu Movement */

.pushy-left {
	-webkit-transform: translate3d(-200px,0,0);
	-ms-transform: translate3d(-200px,0,0);
	transform: translate3d(-200px,0,0);
}

.pushy-left-active .pushy-container {
	-webkit-transform: translate3d(200px,0,0);
	-ms-transform: translate3d(200px,0,0);
	transform: translate3d(200px,0,0);
}

.pushy-right {
	-webkit-transform: translate3d(200px,0,0);
	-ms-transform: translate3d(200px,0,0);
	transform: translate3d(200px,0,0);
}

.pushy-right-active .pushy-container {
	-webkit-transform: translate3d(-200px,0,0);
	-ms-transform: translate3d(-200px,0,0);
	transform: translate3d(-200px,0,0);
}

.pushy-left-active .pushy-left,
.pushy-right-active .pushy-right {
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* Menu Transitions */

.pushy-container,
[data-pushy] {
	transition:
	    transform .2s cubic-bezier(0.16,0.68,0.43,0.99),
	    opacity .2s linear .2s;
}

/* Body */

.pushy-active {
    overflow-x: hidden;
}

/* Site Overlay */

.site-overlay {
	display: none;
}

.pushy-active .site-overlay {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9998;
	background-color: rgba(0,0,0,0.5);
	-webkit-animation: fade 500ms;
	animation: fade 500ms;
}

@keyframes fade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}