html { 
	background: #6B88FF; 
}

body {
	background: #6B88FF;
}

@-webkit-keyframes header-rotate { 0% { -webkit-transform: rotate(-100deg); } 50% { -webkit-transform: rotate(-80deg); } 100% { -webkit-transform: rotate(-100deg); } }
@-khtml-keyframes header-rotate { 0% { -khtml-transform: rotate(-100deg); } 50% { -khtml-transform: rotate(-80deg); } 100% { -khtml-transform: rotate(-100deg); } }
@-moz-keyframes header-rotate { 0% { -moz-transform: rotate(-100deg); } 50% { -moz-transform: rotate(-80deg); } 100% { -moz-transform: rotate(-100deg); } }
@-ms-keyframes header-rotate { 0% { -ms-transform: rotate(-100deg); } 50% { -ms-transform: rotate(-80deg); } 100% { -ms-transform: rotate(-100deg); } }
@-o-keyframes header-rotate { 0% { -o-transform: rotate(-100deg); } 50% { -o-transform: rotate(-80deg); } 100% { -o-transform: rotate(-100deg); } }
@keyframes header-rotate { 0% { transform: rotate(-100deg); } 50% { transform: rotate(-80deg); } 100% { transform: rotate(-100deg); } }

header {
	position: absolute;
	bottom: 500px; left: 200px; right: -200px;
	margin: auto;
	-webkit-transform-origin: 100% 50%; -webkit-animation: header-rotate ease 2s infinite; 
	-khtml-transform-origin: 100% 50%; -khtml-animation: header-rotate ease 2s infinite; 
	-moz-transform-origin: 100% 50%; -moz-animation: header-rotate ease 2s infinite; 
	-ms-transform-origin: 100% 50%; -ms-animation: header-rotate ease 2s infinite; 
	-o-transform-origin: 100% 50%; -o-animation: header-rotate ease 2s infinite; 
	transform-origin: 100% 50%; animation: header-rotate ease 2s infinite; 
	width: 500px;
	padding: 25px 0px;
	text-align: center;
	font-size: 42px;
	font-family: 'Press Start 2P', cursive;
	color: white;
	text-shadow: 5px 5px 2px black;
	background: #6B88FF;
	box-shadow: 5px 5px 5px 0px black;
	z-index: 2;
}

header > small {
	display: block;
	color: #8060C0;
	font-size: 18px;
	text-shadow: 3px 3px 1px black;
	text-indent: 25px;
}

#background {
	position: absolute;
	top: 50px; right: -300px; bottom: 0px; left: -300px;
	background: url('../images/cartoon-tom-world.jpg') 0px 0px;
	background-size: auto 635px;
}

#foreground {
	position: relative;
	width: 100%;
	height: 100%;
	background: url('../images/cartoon-tom.png') no-repeat 50% 0%;
}

#foreground:before {
	content: '';
	position: absolute;
	left: 250px; top: 225px;
	background: url('../images/construction.jpg') no-repeat 50% 50%;
	width: 570px; height: 162px;
	-webkit-transform: rotate(-35deg);
	-khtml-transform: rotate(-35deg);
	-moz-transform: rotate(-35deg);
	-ms-transform: rotate(-35deg);
	-o-transform: rotate(-35deg);
	transform: rotate(-35deg);
}

#foreground:after {
	content: 'Coming Soon...';
	position: absolute;
	left: 0px; right: 0px;
	bottom: 15px;
	margin: auto;
	font-size: 72px;
	color: white;
	text-align: center;
	text-indent: 50px;
	text-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black, 
				0px 0px 15px black, 0px 0px 15px black, 0px 0px 15px black;
}

@-webkit-keyframes cartoon-tom { 0% { height: 0px; -webkit-animation-timing-function: ease-in; } 75% { height: 0px; -webkit-animation-timing-function: ease-in; } 76% { height: 190px; -webkit-animation-timing-function: ease-in; } 80% { height: 190px; -webkit-animation-timing-function: ease-in; } 81% { height: 0px; -webkit-animation-timing-function: ease-in; } 100% { height: 0px; -webkit-animation-timing-function: ease-in; } }
@-khtml-keyframes cartoon-tom { 0% { height: 0px; -khtml-animation-timing-function: ease-in; } 75% { height: 0px; -khtml-animation-timing-function: ease-in; } 76% { height: 190px; -khtml-animation-timing-function: ease-in; } 80% { height: 190px; -khtml-animation-timing-function: ease-in; } 81% { height: 0px; -khtml-animation-timing-function: ease-in; } 100% { height: 0px; -khtml-animation-timing-function: ease-in; } }
@-moz-keyframes cartoon-tom { 0% { height: 0px; -moz-animation-timing-function: ease-in; } 75% { height: 0px; -moz-animation-timing-function: ease-in; } 76% { height: 190px; -moz-animation-timing-function: ease-in; } 80% { height: 190px; -moz-animation-timing-function: ease-in; } 81% { height: 0px; -moz-animation-timing-function: ease-in; } 100% { height: 0px; -moz-animation-timing-function: ease-in; } }
@-ms-keyframes cartoon-tom { 0% { height: 0px; -ms-animation-timing-function: ease-in; } 75% { height: 0px; -ms-animation-timing-function: ease-in; } 76% { height: 190px; -ms-animation-timing-function: ease-in; } 80% { height: 190px; -ms-animation-timing-function: ease-in; } 81% { height: 0px; -ms-animation-timing-function: ease-in; } 100% { height: 0px; -ms-animation-timing-function: ease-in; } }
@-o-keyframes cartoon-tom { 0% { height: 0px; -o-animation-timing-function: ease-in; } 75% { height: 0px; -o-animation-timing-function: ease-in; } 76% { height: 190px; -o-animation-timing-function: ease-in; } 80% { height: 190px; -o-animation-timing-function: ease-in; } 81% { height: 0px; -o-animation-timing-function: ease-in; } 100% { height: 0px; -o-animation-timing-function: ease-in; } }
@keyframes cartoon-tom { 0% { height: 0px; animation-timing-function: ease-in; } 75% { height: 0px; animation-timing-function: ease-in; } 76% { height: 190px; animation-timing-function: ease-in; } 80% { height: 190px; animation-timing-function: ease-in; } 81% { height: 0px; animation-timing-function: ease-in; } 100% { height: 0px; animation-timing-function: ease-in; } }

.cartoon-tom {
	display: block;
	width: 168px;
	background: url('../images/index-tom-popup.png') no-repeat 50% 0px;
	background-size: 100% auto;
	position: absolute;
}

.cartoon-tom:nth-child(2n+1) {
	bottom: 38px;
	left: 237px;
	-webkit-transform: rotate(-30deg); -webkit-animation: cartoon-tom 60s infinite;
	-khtml-transform: rotate(-30deg); -khtml-animation: cartoon-tom 60s infinite;
	-moz-transform: rotate(-30deg); -moz-animation: cartoon-tom 60s infinite;
	-ms-transform: rotate(-30deg); -ms-animation: cartoon-tom 60s infinite;
	-o-transform: rotate(-30deg); -o-animation: cartoon-tom 60s infinite;
	transform: rotate(-30deg); animation: cartoon-tom 60s infinite;
}
.cartoon-tom:nth-child(2n+2) {
	bottom: 40px;
	right: 225px;
	-webkit-transform: rotate(28deg); -webkit-animation: cartoon-tom 60s infinite; -webkit-animation-delay: 30s;
	-khtml-transform: rotate(28deg); -khtml-animation: cartoon-tom 60s infinite; -khtml-animation-delay: 30s;
	-moz-transform: rotate(28deg); -moz-animation: cartoon-tom 60s infinite; -moz-animation-delay: 30s;
	-ms-transform: rotate(28deg); -ms-animation: cartoon-tom 60s infinite; -ms-animation-delay: 30s;
	-o-transform: rotate(28deg); -o-animation: cartoon-tom 60s infinite; -o-animation-delay: 30s;
	transform: rotate(28deg); animation: cartoon-tom 60s infinite; animation-delay: 30s;
}

#thumb-container {
	display: block;
	position: absolute;
	left: 0px; right: 0px;
	top: 0px; bottom: 0px;
	padding: 0px; margin: 0px;
	overflow: hidden;
}

.thumb {
	display: block;
	position: absolute;
	width: 100px; height: 75px;
	background: black;
	opacity: 0;
}