BODY, HTML {
	width:100%;
	height:100%;
}
BODY {
	position:relative;
	color:#FFF;
	background:#012841;
	padding:0px;
	margin:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: min(2vw, 3.2vh);
	-webkit-text-size-adjust:none;
	overflow:hidden;
}
P {
}
A {
	text-decoration:none;
}
A:link, A:visited {
	color:#f1d338;
}
B {
	font-weight:bold;
}
SMALL {
}
SUP {
	vertical-align: super;
	font-size: smaller;
}
H1 {
}
H2 {
}
IMG {  
	user-drag: none;  
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: moz-none;
	-ms-user-select: none;
	user-select: none;
	
	-webkit-tap-highlight-color: transparent;
}
.preventvertical {
	display:none;
	background-color:#000000;
	z-index:9999;
}
.page {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	overflow:hidden;
	display:none;
	z-index:1;
}
.page.pop {
	background-color: rgba(0, 40, 65, 0.8);
}
.page.active {
	display:block;
}
.page.game {
	display: block;
	background: #2e9dff url(../images/grnd.jpg) no-repeat top left;
	background-size: cover;
	z-index:0;
}
.loading {
	color:#FFF;
	font-weight:bold;
	background-color:#012841;
	z-index:9;
}
.loading div {
	animation: flashing 1.0s infinite;
}
@keyframes flashing {
	0%    { opacity:1.0; }
	50%   { opacity:0.0; }
	100%  { opacity:1.0; }
}
.background {
	background-repeat:repeat;
	background-position:center center;
	background-size: cover;
	z-index:-1;
	pointer-events: none;
}
.button {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
@-webkit-keyframes introani {
	from { background-position: 0px 0px; }
	to { background-position: -500% 0px; }
}
@-moz-keyframes introani {
	from { background-position: 0px 0px; }
	to { background-position: -500% 0px; }
}
@-ms-keyframes introani {
	from { background-position: 0px 0px; }
	to { background-position: -500% 0px; }
}
@-o-keyframes introani {
	from { background-position: 0px 0px; }
	to { background-position: -500% 0px; }
}
@keyframes introani {
	from { background-position: 0px 0px; }
	to { background-position: -500% 0px; }
}

@-webkit-keyframes doubleintroani {
	from { background-position: 0px 0px; }
	to { background-position: -1200% 0px; }
}
@-moz-keyframes doubleintroani {
	from { background-position: 0px 0px; }
	to { background-position: -1200% 0px; }
}
@-ms-keyframes doubleintroani {
	from { background-position: 0px 0px; }
	to { background-position: -1200% 0px; }
}
@-o-keyframes doubleintroani {
	from { background-position: 0px 0px; }
	to { background-position: -1200% 0px; }
}
@keyframes doubleintroani {
	from { background-position: 0px 0px; }
	to { background-position: -1200% 0px; }
}
.overlay {
	position:relative;
	z-index:10;
}
.overflow {
	overflow: hidden;
}
.relative {
	position:relative;
}
._hide {
	display:none;
}
._fullscreen {
	width:100%;
	height:100%;
}
._width1 {
	width: calc(100% * 1 / 13);
}
._width2 {
	width: calc(100% * 2 / 13);
}
._width3 {
	width: calc(100% * 3 / 13);
}
._width4 {
	width: calc(100% * 4 / 13);
}
._width5 {
	width: calc(100% * 5 / 13);
}
._width6 {
	width: calc(100% * 6 / 13);
}
._width7 {
	width: calc(100% * 7 / 13);
}
._width8 {
	width: calc(100% * 8 / 13);
}
._width9 {
	width: calc(100% * 9 / 13);
}
._width10 {
	width: calc(100% * 10 / 13);
}
._width11 {
	width: calc(100% * 11 / 13);
}
._width12 {
	width: calc(100% * 12 / 13);
}
._fullwidth, ._width12 {
	width:100%;
}
._top, ._bottom, ._left, ._right, ._middle {
	position:absolute;
}
._top {
	top:0;
}
._right {
	right:0;
}
._bottom {
	bottom:2%;
}
._left {
	left:0;
}
._left0 {
	left: 0;
}
._left1 {
	left: calc(100% * 1 / 13);
}
._left2 {
	left: calc(100% * 2 / 13);
}
._left3 {
	left: calc(100% * 3 / 13);
}
._left35 {
	left: calc(100% * 3.5 / 13);
}
._left4 {
	left: calc(100% * 4 / 13);
}
._left5 {
	left: calc(100% * 5 / 13);
}
._left6 {
	left: calc(100% * 6 / 13);
}
._left7 {
	left: calc(100% * 7 / 13);
}
._left8 {
	left: calc(100% * 8 / 13);
}
._left9 {
	left: calc(100% * 9 / 13);
}
._left10 {
	left: calc(100% * 10 / 13);
}
._left11 {
	left: calc(100% * 11 / 13);
}
._left12 {
	left: calc(100% * 12 / 13);
}
._top0 {
	top: 0;
}
._top1 {
	top: calc(0.5625 * 100% * 1 / 13);
}
._top2 {
	top: calc(0.5625 * 100% * 2 / 13);
}
._top3 {
	top: calc(0.5625 * 100% * 3 / 13);
}
._top4 {
	top: calc(0.5625 * 100% * 4 / 13);
}
._top5 {
	top: calc(0.5625 * 100% * 5 / 13);
}
._top6 {
	top: calc(0.5625 * 100% * 6 / 13);
}
._top7 {
	top: calc(0.5625 * 100% * 7 / 13);
}
._top8 {
	top: calc(0.5625 * 100% * 8 / 13);
}
._top9 {
	top: calc(0.5625 * 100% * 9 / 13);
}
._top10 {
	top: calc(0.5625 * 100% * 10 / 13);
}
._top11 {
	top: calc(0.5625 * 100% * 11 / 13);
}
._top12 {
	top: calc(0.5625 * 100% * 12 / 13);
}
._spacex0 {
	margin-left: 0;
}
._spacex1 {
	margin-left: calc(100% * 1 / 13);
}
._spacex2 {
	margin-left: calc(100% * 2 / 13);
}
._spacex3 {
	margin-left: calc(100% * 3 / 13);
}
._spacex4 {
	margin-left: calc(100% * 4 / 13);
}
._spacex5 {
	margin-left: calc(100% * 5 / 13);
}
._spacex6 {
	margin-left: calc(100% * 6 / 13);
}
._spacex7 {
	margin-left: calc(100% * 7 / 13);
}
._spacex8 {
	margin-left: calc(100% * 8 / 13);
}
._spacex9 {
	margin-left: calc(100% * 9 / 13);
}
._spacex10 {
	margin-left: calc(100% * 10 / 13);
}
._spacex11 {
	margin-left: calc(100% * 11 / 13);
}
._spacex12 {
	margin-left: calc(100% * 12 / 13);
}
._spacey0 {
	margin-top: 0;
}
._spacey1 {
	margin-top: calc(1.7778 * 100% * 1 / 13);
}
._spacey2 {
	margin-top: calc(1.7778 * 100% * 2 / 13);
}
._spacey3 {
	margin-top: calc(1.7778 * 100% * 3 / 13);
}
._spacey4 {
	margin-top: calc(1.7778 * 100% * 4 / 13);
}
._spacey5 {
	margin-top: calc(1.7778 * 100% * 5 / 13);
}
._spacey6 {
	margin-top: calc(1.7778 * 100% * 6 / 13);
}
._spacey7 {
	margin-top: calc(1.7778 * 100% * 7 / 13);
}
._spacey8 {
	margin-top: calc(1.7778 * 100% * 8 / 13);
}
._spacey9 {
	margin-top: calc(1.7778 * 100% * 9 / 13);
}
._spacey10 {
	margin-top: calc(1.7778 * 100% * 10 / 13);
}
._spacey11 {
	margin-top: calc(1.7778 * 100% * 11 / 13);
}
._spacey12 {
	margin-top: calc(1.7778 * 100% * 12 / 13);
}
._middle {
	top:50%;
	-webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
         -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}
._centertext {
	text-align:center;
}
.baby {
	position:absolute;
	width: calc(100% * 2 / 13);
	left: calc(100% / 13);
	z-index:3;
	pointer-events: none;
}
.baby span {
	position:absolute;
	width:100%;
	height:100%;
	background: url('../images/baby.png') no-repeat center center;
	background-size: 100% 100%;
	z-index:1;
}
.baby span:nth-child(1) {
	background-image: url('../images/circle_1.png');
	z-index:2;
}
.baby span:nth-child(2) {
	background-repeat: repeat-x;
	background-potition: top left;
}
.baby span:nth-child(3) {
	background-image: url('../images/circle_2.png');
	z-index:0;
}
.baby.walk span:nth-child(2), .baby.catch span:nth-child(2) {
	background-image: url('../images/baby_ani_walk.png');
	background-size: 500% 100%;
	-webkit-animation: introani 0.5s steps(5) infinite;
	   -moz-animation: introani 0.5s steps(5) infinite;
		-ms-animation: introani 0.5s steps(5) infinite;
		 -o-animation: introani 0.5s steps(5) infinite;
			animation: introani 0.5s steps(5) infinite;
}
.baby.stand span:nth-child(2) {
	background-image: url('../images/baby_ani_stand.png');
	background-size: 500% 100%;
	-webkit-animation: introani 0.5s steps(5) infinite;
	   -moz-animation: introani 0.5s steps(5) infinite;
		-ms-animation: introani 0.5s steps(5) infinite;
		 -o-animation: introani 0.5s steps(5) infinite;
			animation: introani 0.5s steps(5) infinite;
}
.baby.catch span:nth-child(2) {
	background-image: url('../images/baby_ani_catch.png');
}
.baby.jump span:nth-child(2) {
	background-image: url('../images/baby_ani_jump.png');
	background-size: 500% 100%;
	-webkit-animation: introani 1s steps(5) forwards;
	   -moz-animation: introani 1s steps(5) forwards;
		-ms-animation: introani 1s steps(5) forwards;
		 -o-animation: introani 1s steps(5) forwards;
			animation: introani 1s steps(5) forwards;
}
.object {
	position:absolute;
	width: calc(100% * 1 / 5);
	height: calc(0.5625 * 100% * 1 / 13);
	background-repeat: repeat-x;
	background-position: bottom left;
	background-size: 100% 100%;
	z-index:1;
}
.object.milk, .object.animal_gir, .object.animal_ele, .object.pill, .object.balloon, .object.month {
	z-index:2;
}
.object.bonus {
	z-index:4;
}
.object.hide {
	display:none;
}
.object.break {
	background-size: 600% 100%;
	-webkit-animation: introani 0.5s steps(5) forwards;
	   -moz-animation: introani 0.5s steps(5) forwards;
		-ms-animation: introani 0.5s steps(5) forwards;
		 -o-animation: introani 0.5s steps(5) forwards;
			animation: introani 0.5s steps(5) forwards;
}

.earth {
}
.animal_gir, .animal_ele {
	background-image: url('../images/animal_giraffe.png');
	background-size: 500% 100%;
	-webkit-animation: introani 0.5s steps(5) infinite;
	   -moz-animation: introani 0.5s steps(5) infinite;
		-ms-animation: introani 0.5s steps(5) infinite;
		 -o-animation: introani 0.5s steps(5) infinite;
			animation: introani 0.5s steps(5) infinite;
	z-index:9;
}
.animal_ele {
	background-image: url('../images/elephant_ani.png');
}
.popup {
	z-index:9;
}

FORM {
	margin:0px 2%;
}
.inputtext {
	background: url(../images/input.png) no-repeat center center;
	background-size: 100% 100%;
}
.inputtext INPUT[type='text'] {
	display: block;
	margin:0px;
	padding:10px;
	border: none;
	width: calc(100% - 20px);
	background: transparent;
	color:#FFF;
	font-size:150%;
	font-weight: bold;
	text-align:center;
	outline:none;
}
.statbar {
	position: absolute;
	top:5%;
	left: calc(100% * 3 /13);
	width: calc(100% * 6 /13);
	height: calc(100% * 0.075);
	z-index:1;
}
.statbar span {
	position:absolute;
	display: block;
	width:100%;
	height:100%;
	background-repeat: repeat-x;
	background-position:top left;
	background-size:100% 100%;
}
.statbar span:nth-child(1) {
	background-image: url(../images/bar_2.png);
	z-index:3;
}
.statbar span:nth-child(2) {
	left:2%;
	width:87%;
	background-image: url(../images/bar_1.png);
	z-index:2;
}
.statbar span:nth-child(3) {
	background-image: url(../images/bar_0.png);
	z-index:1;
}
.score {
	position: absolute;
	top:6%;
	left: calc(100% * 9.1 / 13);
	font-family: 'Asap', Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 120%;
	color:#FFF;
	white-space: nowrap;
	z-index:1;
}
.score b {
	display: inline-block;
	text-shadow: -2px -2px 2px #f76414, 2px -2px 2px #f76414, -2px 2px 2px #f76414, 2px 2px 2px #f76414;
}
.score span {
	display: inline-block;
	text-shadow: -2px -2px 2px #547823, 2px -2px 2px #547823, -2px 2px 2px #547823, 2px 2px 2px #547823;
}
.bigscore {
	color:#FFF;
	font-family: 'Asap', Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 400%;
	text-shadow: -5px -5px 5px #f76414, 5px -5px 5px #f76414, -5px 5px 5px #f76414, 5px 5px 5px #f76414;
}
ul.answer {
	list-style-type: none;
	margin:0px 5%;
	margin-bottom:2%;
	padding:0px;
}
ul.answer li {
	display: block;
	cursor: pointer;
}
ul.answer li.active {
	opacity:0.5;
}
ul.ranking {
	list-style-type: none;
	margin:0px 10%;
	margin-bottom:0%;
	padding:0px;
}
ul.ranking li {
	display: block;
	color:#FFF;
	font-family: 'Asap', Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 130%;
	padding-bottom:1.5%;
	margin-bottom:1.5%;
	white-space: nowrap;
	background: url(../images/line_ranking.png) no-repeat bottom center;
	background-size: 100% auto;
}
ul.ranking li span {
	display:inline-block;
	white-space: nowrap;
	text-shadow: -2px -2px 2px #f76414, 2px -2px 2px #f76414, -2px 2px 2px #f76414, 2px 2px 2px #f76414;
}
ul.ranking li span:nth-child(1) {
	width: 15%;
}
ul.ranking li span:nth-child(2) {
	width: 68%;
}
ul.ranking li span:nth-child(3) {
	width: 15%;
	text-align:right;
}
.cloud {
	position:absolute;
	width:200%;
	height:100%;
	top:0;
	left:0;
	background: url(../images/cloud.png) repeat-x top left;
	background-size:50% auto;
	pointer-events: none;
	z-index:0;
}
.speaker {
	position:absolute;
	bottom:20px;
	left:10px;
	width: 40px;
	height:40px;
	cursor: pointer;
	z-index:2;
}
.speaker:before {
	position:absolute;
	content: "";
	width:100%;
	bottom:0;
	padding-bottom:100%;
	background: url(../images/btn_volume.png) no-repeat center left;
	background-size: 200% 100%;
}
.speaker.active:before {
	background-position: center right;
}
.btnstart, .btnnext, .btnconfirm, .creep {
	background-size: 500% 100%;
	-webkit-animation: introani 1s steps(5) infinite;
	   -moz-animation: introani 1s steps(5) infinite;
		-ms-animation: introani 1s steps(5) infinite;
		 -o-animation: introani 1s steps(5) infinite;
			animation: introani 1s steps(5) infinite;
}
.btnstart {
	background-image: url('../images/btn_start_ani.png');
}
.btnnext {
	background-image: url('../images/btn_next_ani.png');
}
.btnconfirm {
	background-image: url('../images/btn_confirm_ani.png');
}
.shield {
	background-size: 1200% 100%;
	-webkit-animation: doubleintroani 4s steps(12) infinite;
	   -moz-animation: doubleintroani 4s steps(12) infinite;
		-ms-animation: doubleintroani 4s steps(12) infinite;
		 -o-animation: doubleintroani 4s steps(12) infinite;
			animation: doubleintroani 4s steps(12) infinite;
	z-index:9;
}
.firework {
	background-size: 1200% 100%;
	-webkit-animation: doubleintroani 1s steps(12) infinite;
	   -moz-animation: doubleintroani 1s steps(12) infinite;
		-ms-animation: doubleintroani 1s steps(12) infinite;
		 -o-animation: doubleintroani 1s steps(12) infinite;
			animation: doubleintroani 1s steps(12) infinite;
	z-index:0;
}
.copyright {
	position:absolute;
	left:10px;
	bottom:10px;
	color:#FFF;
	font-size:30%;
	z-index:9;
}