body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #000;
	overflow: hidden;
}

body.portrait {
	width: 768px;
	height: 936px;
}

body.landscape {
	width: 1024px;
	height: 680px;
}

#video-container {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}

#placeholder-image {
	position: absolute;
	width: 1280px;
	height: 720px;
	opacity: 0;
	z-index: 2;
}

#dot-screen {
	position: absolute;
	width: 1545px;
	height: 720px;
	opacity: 0;
	z-index: 3;
}

#play-button {
	position: absolute;
	width: 102px;
	height: 102px;
	display: none;
	cursor: pointer;
	z-index: 4;
}

#play-button.active {
	display: block;
}

#main-video {
	position: absolute;
	width: 1280px;
	height: 720px;
	visibility: hidden;
	z-index: 1;
}

#nav-tab {
	position: absolute;
	width: 316px;
	height: 300px;
	bottom: 10%;
	left: -316px;
	z-index: 2;
	background-color: rgba(0,0,0,0.3);
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

#nav-tab.final {
	left: 0px;
}

#logo {
	position: absolute;
	top: 30px;
	right: 316px;
}

#logo.final {
	right: 37px;
}

#email-link {
	position: absolute;
	top: 185px;
	right: 316px;
	font-family: 'Muli', sans-serif;
	font-size: 14px;
	color: #fff;
	text-align: right;
	text-decoration: none;
	white-space: nowrap;
}

#email-link.final {
	right: 44px;
}

#email-link:hover {
	color: #7cbe31;
}

#replay-button {
	position: absolute;
	bottom: 32px;
	right: 316px;
	opacity: 0.3;
}

#replay-button.final {
	right: 43px;
}

#replay-button.active {
	opacity: 1;
	cursor: pointer;
}

#replay-button img {
	position: absolute;
	right: 0;
	bottom: 0;
}

#replay-button #normal {
	visibility: visible;
}

#replay-button #over {
	visibility: hidden;
}

#replay-button.over #normal {
	visibility: hidden;
}

#replay-button.over #over {
	visibility: visible;
}