/* Header */

	#header {
		position: fixed;
		right: 2em;
		top: 2em;
		z-index: 10000;
	}

		#header ul {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			list-style: none;
			margin: 0;
			padding: 0;
		}

			#header ul li {
				display: block;
				padding: 0;
			}

				#header ul li a {
					display: block;
					position: relative;
					height: 3.75em;
					line-height: 3.75em;
					padding: 0 2em 0 0;
					border: 0;
				}

				#header ul li a[href="#menu"] {
					-moz-transition: width 0.2s ease, border-radius 0.2s ease, color 0.2s ease;
					-webkit-transition: width 0.2s ease, border-radius 0.2s ease, color 0.2s ease;
					-ms-transition: width 0.2s ease, border-radius 0.2s ease, color 0.2s ease;
					transition: width 0.2s ease, border-radius 0.2s ease, color 0.2s ease;
					-webkit-tap-highlight-color: transparent;
					background-color: #2795A7;
					border-radius: 100%;
					color: #2795A7;
					overflow: hidden;
					padding: 0;
					text-decoration: none;
					white-space: nowrap;
					font-size: 0.8em;
					text-transform: uppercase;
					letter-spacing: 0.2em;
					text-indent: -4.6875em;
					width: 4.6875em;
					height: 4.6875em;
					line-height: 4.6875em;
				}

					#header ul li a[href="#menu"]:before {
						-moz-transition: all 0.2s ease;
						-webkit-transition: all 0.2s ease;
						-ms-transition: all 0.2s ease;
						transition: all 0.2s ease;
						content: '';
						display: block;
						position: absolute;
						top: 0;
						right: 0;
						background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 6px%3B stroke: %23ffffff%3B %7D%3C/style%3E%3Cline x1='10' y1='30' x2='90' y2='30' /%3E%3Cline x1='10' y1='50' x2='90' y2='50' /%3E%3Cline x1='10' y1='70' x2='90' y2='70' /%3E%3C/svg%3E");
						background-position: center;
						background-repeat: no-repeat;
						width: 4.6875em;
						height: 4.6875em;
						background-size: 2.5em;
					}

					#header ul li a[href="#menu"]:hover {
						color: #ffffff;
						text-indent: 0;
						width: 9.6875em;
						border-radius: 4.6875em;
						padding-left: 1.875em;
					}

						#header ul li a[href="#menu"]:hover:before {
							background-size: 1.5625em;
						}

		@media screen and (max-width: 736px) {

			#header {
				right: 1em;
				top: 1em;
			}

				#header ul li a {
					height: 3em;
					line-height: 3em;
					padding: 0 1em 0 0;
				}

				#header ul li a[href="#menu"] {
					text-indent: -3.75em;
					width: 3.75em;
					height: 3.75em;
					line-height: 3.75em;
				}

					#header ul li a[href="#menu"]:before {
						width: 3.75em;
						height: 3.75em;
						background-size: 2.1875em;
					}

					#header ul li a[href="#menu"]:hover {
						border-radius: 100%;
						padding-left: 0;
						text-indent: -3.75em;
						width: 3.75em;
					}

						#header ul li a[href="#menu"]:hover:before {
							background-size: 2.1875em;
						}

		}

/* Menu */

	#menu {
		background-color: #2795A7;
		color: #ffffff;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		pointer-events: none;
		-moz-transition: opacity 0.25s ease, visibility 0.25s;
		-webkit-transition: opacity 0.25s ease, visibility 0.25s;
		-ms-transition: opacity 0.25s ease, visibility 0.25s;
		transition: opacity 0.25s ease, visibility 0.25s;
		background-color: #ffffff;
		height: 100%;
		opacity: 0;
		overflow: hidden;
		position: fixed;
		right: 0;
		text-align: center;
		top: 0;
		width: 100%;
		z-index: 10000;
		visibility: hidden;
	}
		
		#menu a { color:#fff; }
		
		#menu blockquote {
			border-left-color: rgba(255, 255, 255, 0.25);
		}

		#menu hr {
			border-bottom-color: rgba(255, 255, 255, 0.25);
		}

		#menu code {
			background: rgba(255, 255, 255, 0.075);
		}

		#menu input[type="submit"],
		#menu input[type="reset"],
		#menu input[type="button"],
		#menu button,
		#menu .button {
			background-color: transparent;
		}

			#menu input[type="submit"]:hover,
			#menu input[type="reset"]:hover,
			#menu input[type="button"]:hover,
			#menu button:hover,
			#menu .button:hover {
				background-color: rgba(255, 255, 255, 0.075);
			}

			#menu input[type="submit"].primary,
			#menu input[type="reset"].primary,
			#menu input[type="button"].primary,
			#menu button.primary,
			#menu .button.primary {
				background-color: #ffffff;
				border-color: #ffffff;
				color: #2795A7 !important;
			}

				#menu input[type="submit"].primary:hover,
				#menu input[type="reset"].primary:hover,
				#menu input[type="button"].primary:hover,
				#menu button.primary:hover,
				#menu .button.primary:hover {
					background-color: rgba(255, 255, 255, 0.075);
					color: inherit !important;
				}

		#menu select {
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23ffffff' /%3E%3C/svg%3E");
		}

			#menu select option {
				background: #2795A7;
			}

		#menu input[type="text"],
		#menu input[type="password"],
		#menu input[type="email"],
		#menu select,
		#menu textarea {
			background-color: rgba(255, 255, 255, 0.075);
			border-color: inherit;
		}

			#menu input[type="text"]:focus,
			#menu input[type="password"]:focus,
			#menu input[type="email"]:focus,
			#menu select:focus,
			#menu textarea:focus {
				background: rgba(255, 255, 255, 0.25);
				box-shadow: 0 0 0 1px #ffffff;
			}

		#menu input[type="checkbox"] + label:before,
		#menu input[type="radio"] + label:before {
			background: rgba(255, 255, 255, 0.075);
			border-color: inherit;
		}

		#menu input[type="checkbox"]:focus + label:before,
		#menu input[type="radio"]:focus + label:before {
			background: rgba(255, 255, 255, 0.075);
			box-shadow: 0 0 0 1px #ffffff;
		}

		#menu input[type="checkbox"]:checked + label:before,
		#menu input[type="radio"]:checked + label:before {
			background-color: #ffffff;
			border-color: #ffffff;
			color: #2795A7;
		}

		#menu ul.alt li {
			border-top-color: rgba(255, 255, 255, 0.25);
		}

		#menu ul.icons li a.icon:hover:before {
			background-color: rgba(255, 255, 255, 0.075);
		}

		#menu ul.icons li a.icon:hover:before {
			background-color: rgba(255, 255, 255, 0.075);
		}

		#menu table thead {
			border-bottom-color: rgba(255, 255, 255, 0.25);
		}

		#menu table tfoot {
			border-top-color: rgba(255, 255, 255, 0.25);
		}

		#menu table tbody tr {
			border-color: rgba(255, 255, 255, 0.25);
		}

			#menu table tbody tr:nth-child(2n + 1) {
				background-color: rgba(255, 255, 255, 0.075);
			}

		#menu table.alt tbody tr td {
			border-color: rgba(255, 255, 255, 0.25);
		}

		@media screen and (max-width: 980px) {

			#menu .spotlight:last-of-type {
				border-bottom-color: rgba(255, 255, 255, 0.25);
			}

		}

		#menu:before {
			-moz-transition: width 0.5s linear, height 0.5s linear, top 0.5s linear, right 0.5s linear;
			-webkit-transition: width 0.5s linear, height 0.5s linear, top 0.5s linear, right 0.5s linear;
			-ms-transition: width 0.5s linear, height 0.5s linear, top 0.5s linear, right 0.5s linear;
			transition: width 0.5s linear, height 0.5s linear, top 0.5s linear, right 0.5s linear;
			position: absolute;
			content: '';
			display: block;
			top: 2em;
			right: 2em;
			width: 3.75em;
			height: 3.75em;
			background-color: #2795A7;
			border-radius: 100%;
			z-index: -1;
		}

		#menu > .close {
			-moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease;
			-webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
			-ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease;
			transition: opacity 0.5s ease, transform 0.5s ease;
			-moz-transform: scale(0.25) rotate(-180deg);
			-webkit-transform: scale(0.25) rotate(-180deg);
			-ms-transform: scale(0.25) rotate(-180deg);
			transform: scale(0.25) rotate(-180deg);
			-webkit-tap-highlight-color: transparent;
			display: block;
			position: absolute;
			top: 2em;
			right: 2em;
			width: 3.75em;
			text-indent: 3.75em;
			height: 3.75em;
			border: 0;
			overflow: hidden;
			padding: 0;
			white-space: nowrap;
		}

			#menu > .close:before {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 2em;
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23ffffff%3B %7D%3C/style%3E%3Cline x1='15' y1='15' x2='85' y2='85' /%3E%3Cline x1='85' y1='15' x2='15' y2='85' /%3E%3C/svg%3E");
			}

			@media screen and (max-width: 736px) {

				#menu > .close {
					top: 1em;
					right: 1em;
					width: 3em;
					text-indent: 3em;
					height: 3em;
				}

					#menu > .close:before {
						background-size: 1.75em;
					}

			}

		#menu > .inner {
			-moz-transition: opacity 0.5s ease-in-out;
			-webkit-transition: opacity 0.5s ease-in-out;
			-ms-transition: opacity 0.5s ease-in-out;
			transition: opacity 0.5s ease-in-out;
			-moz-transition-delay: 0.25s;
			-webkit-transition-delay: 0.25s;
			-ms-transition-delay: 0.25s;
			transition-delay: 0.25s;
			padding: 3em 3em 1em 3em ;
			width: 24em;
			max-width: 100%;
			opacity: 0;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

			@media screen and (max-width: 736px) {

				#menu > .inner {
					padding: 3em 2em 1em 2em ;
				}

			}

			@media screen and (max-width: 480px) {

				#menu > .inner {
					padding: 3em 1.5em 1em 1.5em ;
					width: 30em;
				}

			}

			@media screen and (max-width: 360px) {

				#menu > .inner {
					padding: 3em 1em 1em 1em ;
				}

			}

		#menu h2 {
			font-size: 1.75em;
		}

		#menu ul.links {
			list-style: none;
			padding: 0;
		}

			#menu ul.links li {
				padding: 0;
				border-top: solid 1px rgba(255, 255, 255, 0.1);
			}

				#menu ul.links li a {
					text-decoration: none;
					height: 3.5em;
					line-height: 3.5em;
					display: block;
					border: 0;
				}

				#menu ul.links li:first-child {
					border-top: 0;
				}

		#menu.visible {
			pointer-events: auto;
			opacity: 1;
			visibility: visible;
		}

			#menu.visible:before {
				width: 400vw;
				width: 300vmax;
				height: 400vw;
				height: 300vmax;
				top: -150vw;
				right: -150vw;
			}

			#menu.visible > .close {
				-moz-transform: scale(1) rotate(0deg);
				-webkit-transform: scale(1) rotate(0deg);
				-ms-transform: scale(1) rotate(0deg);
				transform: scale(1) rotate(0deg);
			}

			#menu.visible > .inner {
				opacity: 1;
			}