%css
	.shadow-1 {
		box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
	}
	/**
	 *  1. Fix Webkit border-radius cropping for children.
	 */
	.Button,
	.Checkbox,
	.Fab,
	.material {
		font-size: 14px;
		font-weight: 500;
		position: relative;
		text-transform: uppercase;
		transition: all .2s cubic-bezier(.4,0,.2,1);
		perspective: 1px;                                         /* 1 */
	}
	.Button:focus,
	.Fab:focus {
		outline: none;
	}
	.Button,
	.Button:disabled:hover {
		background: transparent;
		border: none;
		min-width: 64px;
		height: 36px;
		line-height: 36px;
		border-radius: 2px;
		padding: 0 16px;
		letter-spacing: 0;
		text-align: center;
	}
	.Button.raised,
	.Button:hover {
		background-color: rgba(158,158,158, 0.20);
	}
	.Button:focus {
		background-color: #ddd;
	}
	.raised:focus:not(:active) {
		box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
	}
	.Button:disabled {
		color: #aaa;
		background: transparent;
	}
	.Fab {
		border: none;
		border-radius: 50%;
		font-size: 24px;
		height: 56px;
		line-height: 56px;
		width: 56px;
		padding: 0;
		background: rgba(158,158,158,.2);
	}
	.Button.is-warning,
	.Fab--red {
		color: #fff;
		background-color: #f40;
	}
	.Button.is-warning>.waves-ripple,
	.Fab--red>.waves-ripple {
		background-color: #fff;
	}
	.Fab--red>.waves-ripple--play {
		opacity: .6;
	}
	.raised {
		box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
	}
	.Checkbox {
		display: block;
		height: 56px;
		line-height: 56px;
		width: 56px;
	}
	.Checkbox-icon {
		overflow: visible;
		display: block;
		height: 50%;
		width: 50%;
		top: 25%;
		left: 25%;
	}

%el Checkbox
	label.Checkbox
		input[type=checkbox].hide
		i.Checkbox-icon.waves

%el Button
	button[type=button].Button.waves Button

%el Fab
	button[type=button].Fab.waves.raised

%el Radio
	button[type=button].Radio.waves

%css
	.MenuBtn {
		position: relative;
		width: 30px;
		height: 30px;
		background: transparent;
		color: #fff;
	}
	.MenuBtn-x,
	.MenuBtn-x:before,
	.MenuBtn-x:after {
		display: block;
		content: "";
		background-color: currentColor;
		position: absolute;
		width: 100%;
		height: .3em;
		border-radius: .3em;
		pointer-events: none;
		transition-property: transform;
	}
	.MenuBtn-x:before {
		transform: translate(0, -.6em);
	}
	.MenuBtn-x:after {
		transform: translate(0, .6em);
	}
	.MenuBtn--back > .MenuBtn-x,
	.MenuBtn--close > .MenuBtn-x {
		color: #666;
		transform: rotateZ(-180deg);
	}
	.MenuBtn--back > .MenuBtn-x:before {
		transform: rotateZ(45deg) scaleX(.75) translate(0, -230%);
	}
	.MenuBtn--back > .MenuBtn-x:after {
		transform: rotateZ(-45deg) scaleX(.75) translate(0, 230%)
	}
	.MenuBtn--close > .MenuBtn-x {
		background-color: transparent;
	}
	.MenuBtn--close > .MenuBtn-x:before {
		transform: rotateZ(45deg) translate(0, 0);
	}
	.MenuBtn--close > .MenuBtn-x:after {
		transform: rotateZ(-45deg) translate(0, 0);
	}

%el MenuBtn
	button[type=button].MenuBtn.reset.noselect
		.MenuBtn-x.anim