/* Menu */

	#content {
		-moz-transform: translateX(-20em);
		-webkit-transform: translateX(-20em);
		-ms-transform: translateX(-20em);
		transform: translateX(-20em);
		-moz-transition: -moz-transform 0.5s ease, visibility 0.5s;
		-webkit-transition: -webkit-transform 0.5s ease, visibility 0.5s;
		-ms-transition: -ms-transform 0.5s ease, visibility 0.5s;
		transition: transform 0.5s ease, visibility 0.5s;
		-webkit-overflow-scrolling: touch;
		background: #25a2c3;
		color: #ffffff;
		height: 100%;
		max-width: 80%;
		overflow-y: auto;
		padding: 3em 2em;
		position: fixed;
		left: 0;
		top: 0;
		visibility: hidden;
		width: 20em;
		z-index: 10002;
	}

		#content > ul {
			margin: 0 0 1em 0;
		}

			#content > ul.links {
				list-style: none;
				padding: 0;
			}

				#content > ul.links > li {
					padding: 0;
				}

					#content > ul.links > li > a:not(.button) {
						border: 0;
						border-top: solid 1px rgba(255, 255, 255, 0.25);
						color: inherit;
						display: block;
						line-height: 3.5em;
						text-decoration: none;
					}

					#content > ul.links > li > .button {
						display: block;
						margin: 0.5em 0 0 0;
					}

					#content > ul.links > li:first-child > a:not(.button) {
						border-top: 0 !important;
					}

			#content > ul.actions {
				display: none;
			}

		#content .close {
			text-decoration: none;
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			-webkit-tap-highlight-color: transparent;
			border: 0;
			color: #a7d9e7;
			cursor: pointer;
			display: block;
			height: 3.25em;
			line-height: 3.25em;
			padding-right: 1.25em;
			position: absolute;
			right: 0;
			text-align: right;
			top: 0;
			vertical-align: middle;
			width: 7em;
		}

			#content .close:before {
				content: "";
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
			}

			#content .close:before {
				font-size: 1.25em;
			}

			#content .close:hover {
				color: #ffffff;
			}

			@media screen and (max-width: 736px) {

				#content .close {
					height: 4em;
					line-height: 4em;
				}

			}

		#content.visible {
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
			visibility: visible;
		}

		@media screen and (max-width: 980px) {

			#content ul.actions {
				display: block;
			}

		}

		@media screen and (max-width: 736px) {

			#content {
				padding: 2.5em 1.75em;
			}

		}