@charset "utf-8";

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
	padding: 0;
	margin: 0;
}

/*** Landing ***/

#slide_1 {
	width: 100%;
	height: 100vh;
	background: #5077ae;
	position: relative;
}

.info-bubble {
	width: 960px;
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	padding: 25px;
	background: #ffffff;
	box-shadow: inset 0 0 0 5px #222222;
	-webkit-box-shadow: inset 0 0 0 5px #222222;
	-moz-box-shadow: inset 0 0 0 5px #222222;
	z-index: 101;
}

.info-bubble-top-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-intro-corner.png);
	transform: rotate(90deg);
}

.info-bubble-btm-left {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-intro-corner.png);
}

.info-bubble-top-right {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-intro-corner.png);
	transform: rotate(180deg);
}

.info-bubble-btm-right {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-intro-corner.png);
	transform: rotate(270deg);
}

.info {
	color: #222222;
	font-family: 'Press Start 2P', cursive;
	font-size: 1em;
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5em;
}

.info-close {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 15px;
	height: 15px;
	background-image: url(../img/close.png);
	cursor: pointer;
}

.logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 590px;
	height: 150px;
	background-image: url(../img/johnnys.png);
}

.hat {
	position: absolute;
	top: -60px;
	left: 450px;
	width: 170px;
	height: 40px;
}

.arrow {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateY(-50%);
	width: 35px;
	height: 45px;
	cursor: pointer;
	
	animation-name: down;
	-webkit-animation-name: down;	
	
	animation-duration: 5s;	
	-webkit-animation-duration: 5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

/*** /Landing ***/

/*** Sky ***/

#slide_2 {
	width: 100%;
	height: 100vh;
	background: #5077ae;
	position: relative;
}

.cloud1 {
	position: absolute;
	bottom: 140px;
	left: -500px;
	width: 700px;
	height: 170px;
	background-image: url(../img/cloud1.png);
	
	animation-name: cruising;
	-webkit-animation-name: cruising;	
	
	animation-duration: 8s;	
	-webkit-animation-duration: 8s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.cloud2 {
	position: absolute;
	top: 140px;
	right: -600px;
	width: 730px;
	height: 200px;
	background-image: url(../img/cloud2.png);
	
	animation-name: cruising2;
	-webkit-animation-name: cruising2;	
	
	animation-duration: 8s;	
	-webkit-animation-duration: 8s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

/* Intro */

.intro-bubble1 {
	max-width: 520px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 25px;
	background: #ffffff;
	box-shadow: inset 0 0 0 5px #222222;
	-webkit-box-shadow: inset 0 0 0 5px #222222;
	-moz-box-shadow: inset 0 0 0 5px #222222;
	z-index: 101;
	cursor: pointer;
}

.intro-bubble-top-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-intro-corner.png);
	transform: rotate(90deg);
}

.intro-bubble-btm-left {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-intro-corner.png);
}

.intro-bubble-top-right {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-intro-corner.png);
	transform: rotate(180deg);
}

.intro-bubble-btm-right {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-intro-corner.png);
	transform: rotate(270deg);
}

.intro {
	color: #222222;
	font-family: 'Press Start 2P', cursive;
	font-size: 1em;
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5em;
}

#slide_3 {
	width: 100%;
	height: 100vh;
	background: linear-gradient(#5077ae, #a1c79e);
	position: relative;
}

.cloud3 {
	position: absolute;
	bottom: 80px;
	left: -500px;
	width: 700px;
	height: 170px;
	background-image: url(../img/cloud1.png);
	
	animation-name: cruising;
	-webkit-animation-name: cruising;	
	
	animation-duration: 8s;	
	-webkit-animation-duration: 8s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.cloud4 {
	position: absolute;
	top: 40px;
	right: -500px;
	width: 730px;
	height: 200px;
	background-image: url(../img/cloud2.png);
	
	animation-name: cruising2;
	-webkit-animation-name: cruising2;	
	
	animation-duration: 8s;	
	-webkit-animation-duration: 8s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.intro-bubble2 {
	max-width: 520px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 25px;
	background: #ffffff;
	box-shadow: inset 0 0 0 5px #222222;
	-webkit-box-shadow: inset 0 0 0 5px #222222;
	-moz-box-shadow: inset 0 0 0 5px #222222;
	z-index: 101;
	cursor: pointer;
}

.intro-bubble2-top-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-intro2-corner.png);
	transform: rotate(90deg);
}

.intro-bubble2-btm-left {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-intro2-corner.png);
}

.intro-bubble2-top-right {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-intro2-corner.png);
	transform: rotate(180deg);
}

.intro-bubble2-btm-right {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-intro2-corner.png);
	transform: rotate(270deg);
}

.intro2 {
	color: #222222;
	font-family: 'Press Start 2P', cursive;
	font-size: 1em;
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5em;
}


/* /Intro */

/*** /Sky ***/

/*** Frame ***/

#slide_4 {
	width: 100%;
	height: 30vh;
	background: #a1c79e;
	position: relative;
}

#slide_5 {
	width: 100%;
	height: 100vh;
	background: #a1c79e;
	position: relative;
}

#left-hand {
	position: absolute;
	bottom: 0;
	left: -180px;
	width: 1200px;
	height: 680px;
	background-image: url(../img/left-hand.png);
	background-repeat: no-repeat;
	z-index: 1001;
}

#right-hand {
	position: absolute;
	bottom: 0;
	right: -180px;
	width: 740px;
	height: 680px;
	background-image: url(../img/right-hand.png);
	background-repeat: no-repeat;
	z-index: 1001;
}

#frame-tree-place {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 360px;
	height: 460px;
	z-index: 1;
}

#frame-tree {
	position: absolute;
	width: 360px;
	height: 460px;
	background-image: url(../img/tree-para.png);
	z-index: 101;
}

#frame-bravo {
	position: absolute;
	width: 360px;
	height: 460px;
	background-image: url(../img/bravo-para.png);
	z-index: 100;
}

.intro-bubble3 {
	max-width: 520px;
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	padding: 25px;
	background: #ffffff;
	box-shadow: inset 0 0 0 5px #222222;
	-webkit-box-shadow: inset 0 0 0 5px #222222;
	-moz-box-shadow: inset 0 0 0 5px #222222;
	z-index: 1002;
	cursor: pointer;
}

.intro-bubble3-top-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble2-corner.png);
	transform: rotate(90deg);
}

.intro-bubble3-btm-left {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble2-corner.png);
}

.intro-bubble3-top-right {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble2-corner.png);
	transform: rotate(180deg);
}

.intro-bubble3-btm-right {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble2-corner.png);
	transform: rotate(270deg);
}

.intro3 {
	color: #222222;
	font-family: 'Press Start 2P', cursive;
	font-size: 1em;
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5em;
}

/*** /Frame ***/

/*** Big Ornaments ***/

#slide_6 {
	width: 100%;
	height: 100vh;
	background: #a1c79e;
	position: relative;
}

.intro-bubble4 {
	max-width: 520px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 25px;
	background: #ffffff;
	box-shadow: inset 0 0 0 5px #222222;
	-webkit-box-shadow: inset 0 0 0 5px #222222;
	-moz-box-shadow: inset 0 0 0 5px #222222;
	z-index: 101;
	cursor: pointer;
}

.intro-bubble4-top-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble2-corner.png);
	transform: rotate(90deg);
}

.intro-bubble4-btm-left {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble2-corner.png);
}

.intro-bubble4-top-right {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble2-corner.png);
	transform: rotate(180deg);
}

.intro-bubble4-btm-right {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble2-corner.png);
	transform: rotate(270deg);
}

.intro4 {
	color: #222222;
	font-family: 'Press Start 2P', cursive;
	font-size: 1em;
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5em;
}

#orn-lime1 {
	position: absolute;
	top: 0;
	left: 45%;
	width: 400px;
	height: 400px;
	background-image: url(../img/orn-lime.png);
	background-repeat: no-repeat;
}

#orn-orange1 {
	position: absolute;
	top: 0;
	left: 3%;
	width: 400px;
	height: 400px;
	background-image: url(../img/orn-orange.png);
	background-repeat: no-repeat;
}

#orn-yellow1 {
	position: absolute;
	top: 35%;
	right: 3%;
	width: 200px;
	height: 200px;
	background-image: url(../img/orn-yellow.png);
	background-repeat: no-repeat;
}

#orn-blue1 {
	position: absolute;
	bottom: 4%;
	left: 3%;
	width: 300px;
	height: 300px;
	background-image: url(../img/orn-blue.png);
	background-repeat: no-repeat;
}

#orn-pink1 {
	position: absolute;
	bottom: 0;
	right: 30%;
	width: 300px;
	height: 300px;
	background-image: url(../img/orn-pink.png);
	background-repeat: no-repeat;
}

#slide_7 {
	width: 100%;
	height: 100vh;
	background: linear-gradient(#a1c79e, #a2c5ca);
	position: relative;
}

.intro-bubble5 {
	max-width: 520px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 25px;
	background: #ffffff;
	box-shadow: inset 0 0 0 5px #222222;
	-webkit-box-shadow: inset 0 0 0 5px #222222;
	-moz-box-shadow: inset 0 0 0 5px #222222;
	z-index: 101;
	cursor: pointer;
}

.intro-bubble5-top-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-corner.png);
	transform: rotate(90deg);
}

.intro-bubble5-btm-left {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-corner.png);
}

.intro-bubble5-top-right {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-corner.png);
	transform: rotate(180deg);
}

.intro-bubble5-btm-right {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-corner.png);
	transform: rotate(270deg);
}

.intro5 {
	color: #222222;
	font-family: 'Press Start 2P', cursive;
	font-size: 1em;
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5em;
}

#orn-orange2 {
	position: absolute;
	top: 0;
	left: 3%;
	width: 300px;
	height: 300px;
	background-image: url(../img/orn-orange-brkn.png);
	background-repeat: no-repeat;
}

#orn-blue2 {
	position: absolute;
	top: 0;
	right: 15%;
	transform: translateX(-15);
	width: 300px;
	height: 300px;
	background-image: url(../img/orn-blue.png);
	background-repeat: no-repeat;
}

#orn-pink2 {
	position: absolute;
	bottom: 18%;
	left: 7%;
	width: 300px;
	height: 300px;
	background-image: url(../img/orn-pink.png);
	background-repeat: no-repeat;
}

#orn-lime2 {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 400px;
	height: 400px;
	background-image: url(../img/orn-lime.png);
	background-repeat: no-repeat;
}

#orn-yellow2 {
	position: absolute;
	bottom: 0;
	left: 40%;
	width: 200px;
	height: 200px;
	background-image: url(../img/orn-yellow.png);
	background-repeat: no-repeat;
}

/*** /Big Ornaments ***/

/*** Tree with Ornaments ***/

#slide_8 {
	width: 100%;
	height: 100vh;
	background: #a2c5ca;
	position: relative;
}

#tree_place {
	height: 460px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
}

.tree {
	position: relative;
	width: 300px;
	height: 460px;
	float: left;
	background-image: url(../img/tree.png);
}

.drop1 {
	position: absolute;
	top: 140px;
	left: 150px;
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.4);
}

.drop2 {
	position: absolute;
	top: 180px;
	left: 110px;
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.4);
}

.drop3 {
	position: absolute;
	top: 190px;
	left: 180px;
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.4);
}

.drop4 {
	position: absolute;
	top: 230px;
	left: 160px;
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.4);
}

.drop5 {
	position: absolute;
	top: 240px;
	left: 110px;
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.4);
}

.drop6 {
	position: absolute;
	top: 270px;
	left: 210px;
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.4);
}

.drop7 {
	position: absolute;
	top: 280px;
	left: 100px;
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.4);
}

.drop8 {
	position: absolute;
	top: 290px;
	left: 50px;
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.4);
}

.drop9 {
	position: absolute;
	top: 300px;
	left: 160px;
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.4);
}

.drop10 {
	position: absolute;
	top: 320px;
	left: 110px;
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.4);
}

.drop11 {
	position: absolute;
	top: 320px;
	left: 250px;
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.4);
}

.drop12 {
	position: absolute;
	top: 340px;
	left: 200px;
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.4);
}

.drop13 {
	position: absolute;
	top: 340px;
	left: 60px;
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.4);
}

.drop14 {
	position: absolute;
	top: 360px;
	left: 150px;
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.4);
}

.highlight {
	width: 10px;
	height: 10px;
	background: rgba(255,255,255,0.15);
	float: left;
}

.broken1 {
	width: 10px;
	height: 10px;
	background: rgba(0,0,0,0.1);
	float: left;
}

.broken2 {
	width: 10px;
	height: 10px;
	background: rgba(0,0,0,0.18);
	float: left;
}

.broken3 {
	width: 10px;
	height: 10px;
	background: rgba(0,0,0,0.4);
	float: left;
}

.orange3 {
	position: absolute;
	bottom: 7%;
	right: 46%;
	width: 20px;
	height: 20px;
	background: #eb9515;
	z-index: 10;
	cursor: pointer;
}

.yellow1 {
	position: absolute;
	top: 30%;
	left: 25%;
	width: 20px;
	height: 20px;
	background: #fbdc5a;
	z-index: 10;
	cursor: pointer;
}

.blue1 {
	position: absolute;
	top: 5%;
	left: 30%;
	width: 20px;
	height: 20px;
	background: #3faee2;
	z-index: 10;
	cursor: pointer;
}

.orange1 {
	position: absolute;
	top: 15%;
	left: 50%;
	width: 20px;
	height: 20px;
	background: #eb9515;
	z-index: 10;
	cursor: pointer;
}

.magenta1 {
	position: absolute;
	top: 15%;
	left: 5%;
	width: 20px;
	height: 20px;
	background: #dd3270;
	z-index: 10;
	cursor: pointer;
}

.lime1 {
	position: absolute;
	top: 47%;
	left: 14%;
	width: 20px;
	height: 20px;
	background: #a3e146;
	z-index: 10;
	cursor: pointer;
}

.orange2 {
	position: absolute;
	bottom: 4%;
	left: 15%;
	width: 20px;
	height: 20px;
	background: #eb9515;
	z-index: 10;
	cursor: pointer;
}

.yellow2 {
	position: absolute;
	top: 3%;
	right: 3%;
	width: 20px;
	height: 20px;
	background: #fbdc5a;
	z-index: 10;
	cursor: pointer;
}

.magenta2 {
	position: absolute;
	top: 37%;
	right: 15%;
	width: 20px;
	height: 20px;
	background: #dd3270;
	z-index: 10;
	cursor: pointer;
}

.lime2 {
	position: absolute;
	top: 6%;
	right: 22%;
	width: 20px;
	height: 20px;
	background: #a3e146;
	z-index: 10;
	cursor: pointer;
}

.blue2 {
	position: absolute;
	top: 55%;
	right: 18%;
	width: 20px;
	height: 20px;
	background: #3faee2;
	z-index: 10;
	cursor: pointer;
}

.blue3 {
	position: absolute;
	bottom: 32%;
	left: 4%;
	width: 20px;
	height: 20px;
	background: #3faee2;
	z-index: 10;
	cursor: pointer;
}

.magenta3 {
	position: absolute;
	bottom: 20%;
	left: 28%;
	width: 20px;
	height: 20px;
	background: #dd3270;
	z-index: 10;
	cursor: pointer;
}

.yellow3 {
	position: absolute;
	top: 65%;
	right: 4%;
	width: 20px;
	height: 20px;
	background: #fbdc5a;
	z-index: 10;
	cursor: pointer;
}

.lime3 {
	position: absolute;
	bottom: 10%;
	right: 24%;
	width: 20px;
	height: 20px;
	background: #a3e146;
	z-index: 10;
	cursor: pointer;
}

.bravo {
	position: relative;
	top: 130px;
	left: 30px;
	width: 160px;
	height: 330px;
	background-image: url(../img/bravo.png);
	float: left;
}

.bravo_brow {
	position: absolute;
	top: 130px;
	right: 50px;
	width: 30px;
	height: 10px;
	background: #e79168;
	
	animation-name: eyebrow;
	-webkit-animation-name: eyebrow;	
	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

/* Bubble */

.bubble {
	position: absolute;
	top: 20%;
	right: 10%;
	width: 450px;
	height: 120px;
	background: #ffffff;
	box-shadow: inset 0 0 0 5px #222222;
	-webkit-box-shadow: inset 0 0 0 5px #222222;
	-moz-box-shadow: inset 0 0 0 5px #222222;
	z-index: 101;
}

.bubble-top-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-corner.png);
	transform: rotate(90deg);
}

.bubble-btm-left {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-corner.png);
}

.bubble-top-right {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-corner.png);
	transform: rotate(180deg);
}

.bubble-btm-right {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background-image: url(../img/bubble-corner.png);
	transform: rotate(270deg);
}

.bubble-cone {
	position: absolute;
	bottom: -30px;
	left: 150px;
	width: 35px;
	height: 35px;
	background-image: url(../img/bubble-cone.png);
	z-index: 102;
}

.answer1 {
	cursor: pointer;
	animation-name: flashing;
	-webkit-animation-name: flashing;	
	
	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.answer2 {
	cursor: pointer;
	animation-name: flashing;
	-webkit-animation-name: flashing;	
	
	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.hey {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 400px;
	font-family: 'Press Start 2P', cursive;
	font-size: 1em;
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #222222;
}

.ans-yes {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 400px;
	font-family: 'Press Start 2P', cursive;
	font-size: 1em;
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #222222;
	display: none;
}

.ans-no {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 400px;
	font-family: 'Press Start 2P', cursive;
	font-size: 1em;
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #222222;
	display: none;
}

.dinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 400px;
	font-family: 'Press Start 2P', cursive;
	font-size: 1em;
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #222222;
	display: none;
}

.ans-no-answer1 {
	cursor: pointer;
	animation-name: flashing;
	-webkit-animation-name: flashing;	
	
	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.ans-no-answer2 {
	cursor: pointer;
	animation-name: flashing;
	-webkit-animation-name: flashing;	
	
	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.ans-no2-answer1 {
	cursor: pointer;
	animation-name: flashing;
	-webkit-animation-name: flashing;	
	
	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.ans-no2-answer2 {
	cursor: pointer;
	animation-name: flashing;
	-webkit-animation-name: flashing;	
	
	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.still-no {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 400px;
	font-family: 'Press Start 2P', cursive;
	font-size: 1em;
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #222222;
	display: none;
}

/* /Bubble */

.to-top {
	position: absolute;
	bottom: 30px;
	right: 30px;
	width: 35px;
	height: 45px;
	cursor: pointer;
	
	animation-name: down;
	-webkit-animation-name: down;	
	
	animation-duration: 5s;	
	-webkit-animation-duration: 5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

/*** /Tree with Ornaments ***/