body {
	background-image: url("images/lake.jpg");
	background-size: 2600px;
}

/* Text */

	html {
		font-size: 16pt;
	}

	body {
		background-color: #fff;
		color: #aaa;
	}

	body, input, select, textarea {
		font-family: "Roboto", Helvetica, sans-serif;
		line-height: 1.65;
		font-weight: 400;
		font-size: 1em;
		color: #aaa;
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	a:hover {
		color: #00D3B7;
	}

	h1 {
		margin: 0 0 0.5em 0;
		line-height: 1.25;
		font-weight: 400;
		color: #555;
	}

/* Main */

	#main {
		transition: opacity 0.75s ease, right 0.75s ease, left 0.75s ease, visibility 0.75s;
		visibility: visible;
		overflow-x: hidden;
		overflow-y: auto;
		text-align: right;
		background: #fff;
		position: fixed;
		z-index: 10000;
		width: 22.5em;
		height: 100%;
		outline: 0;
		right: 0;
		top: 0;
	}

		body.fullscreen #main {
			visibility: hidden;
			right: -22.5em;
		}

/* Header */

	#header {
		padding: 8em 2.25em 1.75em 2.25em ;
	}

		#header h1 {
			font-size: 2.50em;
			font-weight: 700;
		}

/* Footer */

	#footer {
		padding: 2.25em 2.25em 1em 2.25em ;
	}

		#footer .copyright {
			list-style: none;
			padding: 0;
		}

			#footer .copyright li {
				display: inline-block;
				margin-left: 0.35em;
				font-size: 0.8em;
				padding: 0;
			}

/* Viewer */

	#viewer {
		transition: opacity 0.75s ease, width 0.75s ease;
		width: calc(100% - 22.5em);
		position: absolute;
		height: 100%;
		left: 0;
		top: 0;
	}

		#viewer .inner {
			pointer-events: none;
			position: absolute;
			height: 100%;
			width: 100%;
			z-index: 2;
			left: 0;
			top: 0;
		}

			#viewer .inner > * {
				pointer-events: auto;
			}

			#viewer .inner:before {
				background-image: -webkit-linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0)), -webkit-linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0));
				background-image: linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0)), linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0));
				position: absolute;
				display: block;
				height: 100%;
				width: 100%;
				content: '';
				left: 0;
				top: 0;
			}

			#viewer .inner .toggle {
				background-position: calc(100% - 0.75em) 0.75em;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				background-image: url("images/close.svg");
				background-repeat: no-repeat;
				background-size: 64px 64px;
				position: absolute;
				cursor: pointer;
				height: 4em;
				width: 4em;
				z-index: 1;
				right: 0;
				top: 0;
			}

		#viewer .slide {
			-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;
			position: absolute;
			height: 100%;
			width: 100%;
			opacity: 1;
			z-index: 1;
			left: 0;
			top: 0;
		}

			#viewer .slide .image {
				-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;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
				background-size: cover;
				opacity: 0;
			}

			#viewer .slide:before {
				-moz-animation: spinner 1s linear infinite;
				-webkit-animation: spinner 1s linear infinite;
				-ms-animation: spinner 1s linear infinite;
				animation: spinner 1s linear infinite;
				-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;
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				left: 50%;
				width: 3em;
				height: 3em;
				background-image: url("images/spinner.svg");
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				margin: -1.5em 0 0 -1.5em;
				opacity: 0;
			}

			#viewer .slide.loading:before {
				opacity: 1;
			}

			#viewer .slide.active .image {
				opacity: 1;
			}

		body.fullscreen #viewer {
			width: 100%;
		}

			body.fullscreen #viewer .inner .toggle {
				background-image: url("images/open.svg");
			}

		body.is-preload-1 #viewer {
			opacity: 0;
		}

		body.is-preload-2 #viewer .slide {
			opacity: 0;
		}

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

			#viewer {
				width: calc(100% - 19em);
			}

		}

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

			#viewer {
				width: 100%;
			}

				#viewer .inner .toggle {
					-moz-transition: opacity 0.75s ease;
					-webkit-transition: opacity 0.75s ease;
					-ms-transition: opacity 0.75s ease;
					transition: opacity 0.75s ease;
					background-image: url("images/open.svg");
					opacity: 0;
					right: 0;
				}

				body.fullscreen #viewer .inner .toggle {
					opacity: 1;
				}

		}

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

			#viewer .inner .toggle {
				background-size: 32px 32px;
			}

			#viewer .inner .nav-next,
			#viewer .inner .nav-previous {
				background-image: url("images/arrow-small.svg");
				background-size: 32px 32px;
			}

			body.fullscreen #viewer .inner .toggle {
				background-image: url("images/open-small.svg");
			}

		}

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

			#viewer {
				-webkit-transition: opacity 0.5s ease;
				transition: opacity 0.5s ease;
				-moz-transition-delay: 0s;
				-webkit-transition-delay: 0s;
				-ms-transition-delay: 0s;
				transition-delay: 0s;
				opacity: 0;
			}

				#viewer .inner .toggle {
					background-image: url("images/close-small.svg") !important;
					background-size: 32px 32px;
				}

				body.fullscreen #viewer {
					-moz-transition-delay: 0.5s;
					-webkit-transition-delay: 0.5s;
					-ms-transition-delay: 0.5s;
					transition-delay: 0.5s;
					opacity: 1;
				}

		}