html {
	height: 100%;
	// overflow-y: hidden;
	body {
		position: relative;
		width: 100%;
		height: 100%;
		min-height: 100%;
		// overflow-y: hidden;
		.navigation {
			position: fixed;
			top: 0px;
			left: 0px;
			height: 100%;
			width: 60px;
			background: #222;
			overflow: hidden;
			ul {
				position: relative;
				width: 100%;
				li {
					height: 60px;
					width: 100%;
					text-align: center;
					&:hover {
						background: #111;
					}
					a {
						display: block;
						height: 100%;
						width: 100%;
						&:hover {
							img {
								opacity: 1;
							}
						}
						img {
							opacity: 0.8;
						}
					}
				}
			}
			.top {
				position: absolute;
				top: 0px;
				left: 0px;
			}
			.bottom {
				// display: none;
				position: absolute;
				bottom: 0px;
				left: 0px;
				li {
					a {
						img {
							padding: 6px 0px;
						}
					}
				}
			}
		}
		.content {
			position: absolute;
			height: 100%;
			width: 100%;
			width: calc(~'100% - 60px');
			box-sizing: border-box;
			left: 60px;
			.video {
				width: 760px;
				margin: 0 auto;
			}
			#map-canvas {
				height: 100%;
				padding: 0;
				margin: 0;
			}
			.sample {
				position: absolute;
				top: 20px;
				right: -60px;
				width: 200px;
				height: 30px;
				text-align: center;
				background: #DE1F1F;
				color: white;
				font-family: "Roboto";
				font-weight: 700;
				line-height: 30px;
				border-bottom: 4px solid #C20000;
				transform: rotate(45deg);
			}
			.overlay {
				background: rgba(0, 0, 0, 0.5);
				box-shadow: inset 0 0 250px rgba(0, 0, 0, 0.6);
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0px;
				left: 0px;
				z-index: 1000;
				text-align: center;
				h1, h2 {
					font-family: "Roboto", sans-serif;
					color: #FFF;
				}
				h1 {
					font-weight: 700;
					font-size: 4em;
					margin: 100px 0 50px;
				}
				h2 {
					font-weight: 300;
					font-size: 1.5em;
					margin-bottom: 100px;
				}
				p {
					color: #FFF;
					font-family: "Roboto", sans-serif;
					font-size: 1.5em;
					span {
						display: inline-block;
						// width: 200px;
						font-weight: 300;
						text-align: center;
						margin-bottom: 50px;
					}
				}
				.circle {
					display: block;
					width: 76px;
					height: 76px;
					border-radius: 50%;
					margin: 150px auto 0px;
					border: 5px solid white;
					img {
						height: 76px;
						width: 76px;
						margin: 0 auto;
					}
				}
				.text-link {
					display: block;
					margin: 10px auto 0;
					width: 200px;
					text-decoration: none;
					font-family: "Roboto", sans-serif;
					font-size: 1.7em;
					color: #FFF;
				}
			}
			.info {
				background: #EEE;
				position: absolute;
				width: 100%;
				min-height: 100%;
				padding-bottom: 100px;
				top: 0px;
				left: 0px;
				.photogs:after {
					content: ".";
					display: block;
					clear: both;
					visibility: hidden;
					line-height: 0;
					height: 0;
				}
				.photogs {
					display: inline-block;
				}
				.card {
					margin-bottom: 100px;
					position: relative;
					h2 {
						font-family: "Roboto", sans-serif;
						color: #111;
						font-weight: 700;
						font-size: 1.5em;
						line-height: 1.5em;
						margin-bottom: 30px;
						text-align: center;
					}
					p {
						font-family: "Roboto", sans-serif;
						color: #111;
						font-size: 14px;
						margin-bottom: 15px;
						line-height: 1.5em;
					}
					.break {
						padding-bottom: 15px;
						border-bottom: 1px solid #999;
					}
					.link {
						width: calc(~'100% - 60px');
						text-align: center;
						position: absolute;
						bottom: 10px;
					}
				}
				.big-card {
					background: #FFF;
					width: calc(~'100% - 120px');
					margin: 30px;
					padding: 30px 30px 30px;
				}
				.small-card {
					float: left;
					background: #FFF;
					width: calc(~'33.333333% - 100px');
					margin: 0px 15px;
					padding: 30px 30px 50px;
					min-height: 1150px;
					&:first-child {
						margin-left: 30px;
					}
					img {
						max-width: 100%;
						margin-bottom: 20px;
					}
				}
				.sponsors {
					img {
						// max-width: 200px;
						max-height: 200px;
						margin-right: 20px;
					}
				}
			}
			.entry {
				position: absolute;
				width: calc(~'100% - 200px');
				top: 0px;
				left: 0px;
				.wrapper {
					width: 760px;
					margin: 50px auto;
					img {
						margin-bottom: 15px;
						max-width: 760px;
					}
					h3 {
						font-family: "Roboto", sans-serif;
						color: #333;
						font-size: 1.25em;
						font-weight: 700;
						margin-bottom: 4px;
						line-height: 1.5em;
					}
					span {
						display: block;
						font-family: "Roboto", sans-serif;
						color: #999;
						font-size: 14px;
						font-weight: 400;
						margin-bottom: 20px;
					}
					p {
						font-family: "Roboto", sans-serif;
						color: #111;
						font-size: 14px;
						margin-bottom: 10px;
						line-height: 1.5em;
					}
				}
			}
			.right-nav {
				position: fixed;
				right: 0px;
				top: 0px;
				width: 240px;
				min-height: 100%;
				background: #222;
				z-index: 1000;
				overflow-y: scroll;
				height: 100%;
				.entries-heading {
					height: 40px;
					font-family: "Roboto", sans-serif;
					font-weight: 700;
					font-size: 20px;
					text-align: center;
					line-height: 40px;
					color: #FFF;
					background: #222;
				}
				.entry {
					position: relative;
					display: block;
					background: #E55545;
					width: 100%;
					height: 75px;
					text-align: center;
					padding: 10px 0px;
					text-decoration: none;
					color: #111;
					margin-bottom: 2px;
					&:hover {
						background: #DDD;
					}
					h3, p {
						font-family: "Roboto", sans-serif;
					}
					h3 {
						font-weight: 700;
						font-size: 1.5em;
						line-height: 1.5em;
						margin-bottom: 3px;
					}
					p {
						font-size: 0.9em;
						color: #444;
					}
				}
			}
		}
	}
}