@font-face {
	font-family: 'DIN17EFRegular';
	src: url('../fonts/din17efregular.ttf');
}
@font-face {
	font-family: 'DIN17EFRegular';
	src: 	url('../fonts/din17efregular.eot'),
			url('../fonts/din17efregular.woff') format('woff'),
			url('../fonts/din17efregular.ttf') format('truetype'),
			url('../fonts/din17efregular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

body{
	margin: 0px;
	padding: 0px;
	overflow-x: hidden;
}

body *:not(input) {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

/* body *:not(textarea){
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
} */


textarea {
-webkit-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	-o-user-select: auto;
	user-select: auto;


}

.container {
	position: fixed;
	top: 0px;
	left: 0px;
}

.transparentText{
	position: absolute;
	top: 0; left: 0;
	color: rgba(0,0,0,0);
	display: block;
    width: 100%;
    height: 100%;
	opacity: 0;
}
.empty{
	position: relative;
	top: 0;left: 0;
	width: 100%;height: 100%;
}

#mainGame .highlighter{
	outline: 3px solid #ffff00;
    box-shadow: 0px 0px 0px 4px #000, inset 0px 0px 0px 1px #000;
    box-sizing: border-box;

    z-index: 11;
}


.container #mainGame{
	position: relative;
	/* margin: 0px auto; */
	width: 816px;
	height: 611px;
	background-size: 100% auto;
	overflow: hidden;
	border: 1px solid #000;
	
	left: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

/* #mainGame .volume{
	position: absolute;
	top: 30px;
	left: 30px;
	background: url('../images/volume1.png') no-repeat;
	background-position: 0 0;
	width: 43px; height: 43px;
	cursor: pointer;
}

#mainGame .volume:hover{
	background-position: -43px 0;
}
#mainGame .volume:active{
	background-position: -86px 0;
}
#mainGame .volume.disable{
	background-position: -129px 0;
} */

#mainGame .acknowledgements{
	position: absolute;
    bottom: 12px;
    left: 19px;
    width: 107px;
    height: 18px;
    cursor: pointer;
    font-family: 'DIN17EFRegular';
    font-size: 12px;
}
#mainGame .acknowledgements:hover, #mainGame .acknowledgements.highlighter{
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
    font-weight: bold;
}
#mainGame .acknowledgements.disable:hover{
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
#mainGame .acknowledgements:active{
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	font-weight: normal;
}
#mainGame .acknowledgements:active span{
    border: none;
}
#mainGame .acknowledgements span {
	border-bottom: thin solid #000;
    height: 12px;
    display: inline-block;
}

#mainGame #acknowledgementsPopup.active{
    display: block;
	background: rgba(0, 0, 0, 0.29);
    z-index: 100;
}
#mainGame #acknowledgementsPopup .alert_popup{
	position: absolute;
    top: 44%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
	width: 508px;
    height: 248px;
	background: url('../images/acknowledgementspopup.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#mainGame #acknowledgementsPopup .alert_popup .close{
	position: absolute;
	top: 20px;
    right: 23px;
	width: 40px; height: 40px;
	background: url('../images/ack_close.png') no-repeat;
	background-position: 0 0;
	cursor: pointer;
}
#mainGame #acknowledgementsPopup .alert_popup .close:hover{
	background-position: -40px 0;
}
#mainGame #acknowledgementsPopup .alert_popup .close:active{
	background-position: -80px 0;
}
#mainGame #acknowledgementsPopup .alert_popup .header_text{
	position: absolute;
    top: 25px;
    left: 24px;
    font-size: 18px;
    font-family: arial;
}
#mainGame #acknowledgementsPopup .alert_popup .body_text{
	position: absolute;
    top: 61px;
    left: 24px;
    width: 467px;
    font-size: 15px;
    font-family: arial;
}


#mainGame .volume{
	position: absolute;
	top: 30px;
	left: 30px;
	background: url('../images/volume.png') no-repeat;
	background-position: 0 0;
	width: 39px; height: 37px;
	cursor: pointer;
}

#mainGame .volume:hover{
	background-position: -40px 0;
}
#mainGame .volume.highlighter{
	background-position: -40px 0;
	width: 30px; height: 30px;
}
#mainGame .volume:active{
	background-position: -80px 0;
	-webkit-animation: buttonAniForModule 0.3s forwards;
	-moz-animation: buttonAniForModule 0.3s forwards;
	-ms-animation: buttonAniForModule 0.3s forwards;
	-o-animation: buttonAniForModule 0.3s forwards;
	animation: buttonAniForModule 0.3s forwards;
}
#mainGame .volume.disable{
	background-position: -120px 0;
}

#mainGame .volume .sound{
	background: url('../images/sound.png') no-repeat;
	background-position: 0 0;
	width: 27px; height: 24px;
	position: relative;
    top: 7px;
    left: 6px;
}

#mainGame .btn{
	position: absolute;
	top: 30px;
	left: 30px;
	background: url('../images/nextbtn.png') no-repeat;
	background-position: 0 0;
	width: 107px; height: 64px;
	cursor: pointer;
}

#mainGame .btn:hover{
	background-position: -107px 0;
}
#mainGame .btn.highlighter{
	background-position: -107px 0;
	width: 102px; height: 60px;
}
#mainGame .btn.ani{
	background-position: -214px 0;
	-webkit-animation: buttonAniForModule 0.3s forwards;
	-moz-animation: buttonAniForModule 0.3s forwards;
	-ms-animation: buttonAniForModule 0.3s forwards;
	-o-animation: buttonAniForModule 0.3s forwards;
	animation: buttonAniForModule 0.3s forwards;
}
#mainGame .btn.disable{
	background-position: -321px 0;
	cursor: default;
}
#mainGame .btn .text{
	position: absolute;
    top: 15px;
    left: 15px;
    width: 71px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-family: "DIN17EFRegular";
    font-size: 19px;
	font-weight: bold;
}


#mainGame .playBtn{
	position: absolute;
	top: 30px;
	left: 30px;
	cursor: pointer;
}

#mainGame .startBtn{
	position: absolute;
	top: 30px;
	left: 30px;
	cursor: pointer;
}




#mainGame .screen{
	position: absolute;
	width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
	display: none;
}


#mainGame #loadingScreen.active{
	display: block;
}
#loadingScreen .loading{
	background: url('../images/loading.png') no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 142px;
    height: 142px;
}
#loadingScreen .loading .text{
	font-family: 'DIN17EFRegular';
    position: absolute;
    top: 112px;
    left: 32px;
    font-size: 24px;
}

/* ----------------------------- start splashScreen --------------------------------------------------------- */
#mainGame #splashScreen.active{
	display: block;
}

#mainGame #splashScreen.active .splash1{
	width: 100%;
	height: 100%;
	background: url('../images/splashscreen/splash1.png') no-repeat;
	background-size: 816px 611px;
	background-position: 0 0;
	-webkit-animation: splash1 0.7s forwards;
	-moz-animation: splash1 0.7s forwards;
	-ms-animation: splash1 0.7s forwards;
	-o-animation: splash1 0.7s forwards;
	animation: splash1 0.7s forwards;
	
}
@-webkit-keyframes splash1 {
	to {
		background-size: 975px 801px;
		background-position: -98px -50.5px;
	}
}
@-moz-keyframes splash1 {
	to {
		background-size: 975px 801px;
		background-position: -98px -50.5px;
	}
}
@-ms-keyframes splash1 {
	to {
		background-size: 975px 801px;
		background-position: -98px -50.5px;
	}
}
@-ms-keyframes splash1 {
	to {
		background-size: 975px 801px;
		background-position: -98px -50.5px;
	}
}
@keyframes splash1 {
	to {
		background-size: 975px 801px;
		background-position: -98px -50.5px;
	}
}

#splashScreen.active .splash_side_icons{
	position: absolute;
	width: 85px; height: 170px;
	top: 4%;
    right: 5%;
    
	background: url('../images/splashscreen/splash_side_icons1.svg') no-repeat;
	background-position: 0 0;
	
	-webkit-transform: scale(0.65);
	-moz-transform: scale(0.65);
	-ms-transform: scale(0.65);
	-o-transform: scale(0.65);
	transform: scale(0.65);
	
	
	-webkit-animation: splash_side_icons 0.7s forwards;
	-moz-animation: splash_side_icons 0.7s forwards;
	-ms-animation: splash_side_icons 0.7s forwards;
	-o-animation: splash_side_icons 0.7s forwards;
	animation: splash_side_icons 0.7s forwards;
	background-size: 100% auto;
}
#splashScreen.active .splash_side_icons.active{
	background: url('../images/splashscreen/splash_side_icons2.svg') no-repeat;
	background-size: 100% auto;
}

@-webkit-keyframes splash_side_icons {
	to {
		-webkit-transform: scale(0.8);
		top: 1%;
		right: 0%;
	}
}
@-moz-keyframes splash_side_icons {
	to {
		-moz-transform: scale(0.8);
		top: 1%;
		right: 0%;
	}
}
@-ms-keyframes splash_side_icons {
	to {
		-ms-transform: scale(0.8);
		top: 1%;
		right: 0%;
	}
}
@-o-keyframes splash_side_icons {
	to {
		-o-transform: scale(0.8);
		top: 1%;
		right: 0%;
	}
}
@keyframes splash_side_icons {
	to {
		transform: scale(0.8);
		top: 1%;
		right: 0%;
	}
}

#splashScreen.active .cursor{
	position: absolute;
	width: 27px; height: 40px;
	top: 15%;
    left: 16%;
    
	background: url('../images/splashscreen/cursor.png') no-repeat;
	background-position: 0 0;
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	-o-transform: scale(0.7);
	transform: scale(0.7);
	
	-webkit-animation: cursor 0.7s forwards;
	-moz-animation: cursor 0.7s forwards;
	-ms-animation: cursor 0.7s forwards;
	-o-animation: cursor 0.7s forwards;
	animation: cursor 0.7s forwards;
	z-index: 1;
}
@-webkit-keyframes cursor {
	to {
		-webkit-transform: scale(0.8);
		top: 12%;
		left: 7%;
	}
}
@-moz-keyframes cursor {
	to {
		-moz-transform: scale(0.8);
		top: 12%;
		left: 7%;
	}
}
@-ms-keyframes cursor {
	to {
		-ms-transform: scale(0.8);
		top: 12%;
		left: 7%;
	}
}
@-o-keyframes cursor {
	to {
		-o-transform: scale(0.8);
		top: 12%;
		left: 7%;
	}
}
@keyframes cursor {
	to {
		transform: scale(0.8);
		top: 12%;
		left: 7%;
	}
}

#splashScreen.active .cursor.secondAnimation{
	background: url('../images/splashscreen/secondanimation.png') no-repeat;
	width: 904px; height: 221px;
	top: 11%;
	left: 21px;
	-webkit-animation: secondAnimation 0.8s steps(15) forwards;
	-moz-animation: secondAnimation 0.8s steps(15) forwards;
	-ms-animation: secondAnimation 0.8s steps(15) forwards;
	-o-animation: secondAnimation 0.8s steps(15) forwards;
	animation: secondAnimation 0.8s steps(15) forwards;
}
@-webkit-keyframes secondAnimation {
   from { background-position:    0px;}
     to { background-position: -13560px;}
}
@-moz-keyframes secondAnimation {
   from { background-position:    0px;}
     to { background-position: -13560px;}
}
@-ms-keyframes secondAnimation {
   from { background-position:    0px;}
     to { background-position: -13560px;}
}
@-o-keyframes secondAnimation {
   from { background-position:    0px;}
     to { background-position: -13560px;}
}
@keyframes secondAnimation {
   from { background-position:    0px;}
     to { background-position: -13560px;}
}

#splashScreen.active .thirdAnimation.active{
	background: url('../images/splashscreen/thirdanimation.png') no-repeat;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
	width: 1039px; height: 519px;
	
    position: absolute;
	top: 40px;
	left: -106px;
	z-index: 0;
	
	-webkit-animation: thirdAnimation 2s steps(25) forwards;
	-moz-animation: thirdAnimation 2s steps(25) forwards;
	-ms-animation: thirdAnimation 2s steps(25) forwards;
	-o-animation: thirdAnimation 2s steps(25) forwards;
	animation: thirdAnimation 2s steps(25) forwards;
}

@-webkit-keyframes thirdAnimation {
   from { background-position:    0px;}
     to { background-position: -25975px;}
}
@-moz-keyframes thirdAnimation {
   from { background-position:    0px;}
     to { background-position: -25975px;}
}
@-ms-keyframes thirdAnimation {
   from { background-position:    0px;}
     to { background-position: -25975px;}
}
@-o-keyframes thirdAnimation {
   from { background-position:    0px;}
     to { background-position: -25975px;}
}
@keyframes thirdAnimation {
   from { background-position:    0px;}
     to { background-position: -25975px;}
}

#splashScreen .heading, #splashScreen .sideContent, #splashScreen .volume, #splashScreen .nextBtn, #splashScreen .startBtn{
	display: none;
}

#splashScreen.active .heading.active{
	position: absolute;
    display: inline-block;
    top: 255px;
    left: 57px;
    letter-spacing: 1px;
    font-family: 'DIN17EFRegular';
    font-size: 26px;
    line-height: 31px;
	display: none;
}
#splashScreen.active .sideContent.active{
	position: absolute;
    display: inline-block;
    top: 179px;
    left: 543px;
    font-family: 'DIN17EFRegular';
    font-size: 22px;
    line-height: 22px;
    letter-spacing: 1px;
    width: 244px;
    height: 200px;
	background: #fff;
}
/* #splashScreen.active .sideContent1.active{
	display: none;
} */

#splashScreen.active .volume.active{
	display: block;
	top: 141px;
    left: 539px;
}
#splashScreen.active .nextBtn.active, #splashScreen.active .startBtn.active{
	display: block;
	top: 362px;
	left: 684px;
}
#video {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
}
/* ----------------------------- end splashScreen --------------------------------------------------------- */

/* ----------------------------- start screen1 ------------------------------------------------------------ */

#mainGame #screen1.active{
	display: block;
	background: url('../images/splashscreen/splash1.png') no-repeat;
	background-size: 975px 801px;
	background-position: -98px -50.5px;
}

#screen1 .tabs_container{
	position: absolute;
	top: 2px;
    left: 5px;
	width: 130px;
	height: 100%;
}
#screen1 .tabs_container.highlighter{
	width: 121px;
	height: 602px;
	outline: 4px solid #ffff00;
	box-shadow: 0px 0px 0px 5px #000, inset 0px 0px 0px 1px #000;
}

#screen1 .tabs_container .tabs{
	position: absolute;
	left: 0px;
	background: url('../images/screen1/tabbtn.png') no-repeat;
	background-position: 0 0;
	width: 126px; height: 70px;
	cursor: pointer;
}
#screen1 .tabs_container .tabs:hover, #screen1 .tabs_container .tabs.highlighter{
	background-position: -126px 0;
}
#screen1 .tabs_container .tabs:active{
	background-position: -252px 0;
}
#screen1 .tabs_container .tabs.active{
	background-position: -378px 0;
	cursor: default;
	-webkit-animation: buttonAniForModule 0.3s forwards;
	-moz-animation: buttonAniForModule 0.3s forwards;
	-ms-animation: buttonAniForModule 0.3s forwards;
	-o-animation: buttonAniForModule 0.3s forwards;
	animation: buttonAniForModule 0.3s forwards;
}
@-webkit-keyframes buttonAniForModule {
	from {
		-webkit-transform: scale(0.90) translateX(-7px) translateY(-3px);
	}
	to {
		-webkit-transform: scale(1) translateX(0px) translateY(0px);
	}
}
@-moz-keyframes buttonAniForModule {
	from {
		-moz-transform: scale(0.90) translateX(-7px) translateY(-3px);
	}
	to {
		-moz-transform: scale(1) translateX(0px) translateY(0px);
	}
}
@-ms-keyframes buttonAniForModule {
	from {
		-ms-transform: scale(0.90) translateX(-7px) translateY(-3px);
	}
	to {
		-ms-transform: scale(1) translateX(0px) translateY(0px);
	}
}
@-o-keyframes buttonAniForModule {
	from {
		-o-transform: scale(0.90) translateX(-7px) translateY(-3px);
	}
	to {
		-o-transform: scale(1) translateX(0px) translateY(0px);
	}
}
@keyframes buttonAniForModule {
	from {
		transform: scale(0.90) translateX(-7px) translateY(-3px);
	}
	to {
		transform: scale(1) translateX(0px) translateY(0px);
	}
}
#screen1 .tabs_container .tabs .activity_status{
	position: absolute;
	top: 3px;
    left: 4px;
    width: 38px;
    height: 37px;
	background: url('../images/screen1/tabs_done.png') no-repeat;
	background-position: 0 0;
	z-index: 1;
	display: none;
}
#screen1 .tabs_container .tabs .activity_status.active{
	display: block;
}

#screen1 .tabs_container .tabs.disable{
	background-position: -504px 0;
	opacity: 0.5;
	cursor: default;
}
#screen1 .tabs_container .tabs.visited{
	background-position: -630px 0; height: 72px;
}
#screen1 .tabs_container .innerImgTab{
	position: relative;
	top: 16px;
    left: 18px;
    width: 85px;
    height: 37px;
}


#screen1 .tabs_container .tabs1{
	top: 3px;
}
#screen1 .tabs_container .tabs1 .innerImgTab{
	background: url('../images/screen1/tab1_inner.png') no-repeat;
	background-size: 100% auto;
}

#screen1 .tabs_container .tabs2{
	top: 69px;
}
#screen1 .tabs_container .tabs2 .innerImgTab{
	background: url('../images/screen1/tab2_inner.png') no-repeat;
	background-size: 100% auto;
}

#screen1 .tabs_container .tabs3{
	top: 135px;
}
#screen1 .tabs_container .tabs3 .innerImgTab{
	background: url('../images/screen1/tab3_inner.png') no-repeat;
	background-size: 100% auto;
	width: 85px;
    height: 47px;
    top: 11px;
}


#screen1 .tabs_container .tabs4{
	top: 201px;
}
#screen1 .tabs_container .tabs4 .innerImgTab{
	background: url('../images/screen1/tab4_inner.png') no-repeat;
	background-size: 100% auto;
}


#screen1 .tabs_container .tabs5{
	top: 267px;
}
#screen1 .tabs_container .tabs5 .innerImgTab{
	background: url('../images/screen1/tab5_inner.png') no-repeat;
	background-size: 100% auto;
}


#screen1 .tabs_container .tabs6{
	top: 334px;
}
#screen1 .tabs_container .tabs6 .innerImgTab{
	background: url('../images/screen1/tab6_inner.png') no-repeat;
	background-size: 100% auto;
}


#screen1 .tabs_container .tabs7{
	top: 401px;
}
#screen1 .tabs_container .tabs7 .innerImgTab{
	background: url('../images/screen1/tab7_inner.png') no-repeat;
	background-size: 100% auto;
}


#screen1 .tabs_container .tabs8{
	top: 467px;
}
#screen1 .tabs_container .tabs9{
	top: 533px;
}
#screen1 .tabs_container .innerImgTab{
	background: url('../images/screen1/tab8_inner.png') no-repeat;
	background-size: 100% auto;
}
#screen1 .tabs_container .innerImgTab .text{
	position: absolute;
    top: 1px;
    left: 1px;
    width: 83px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-family: "DIN17EFRegular";
    font-size: 22px;
    font-weight: bold;
}




#screen1 .rightSideInterface{
	position: absolute;
	top: 7px;
    right: 7px;
	width: 683px;
    height: 786px;
}

#screen1 .rightSideInterface .interface1{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url('../images/interface1.png') no-repeat;
	background-size: 100% auto;
	display: none;
}
#screen1 .rightSideInterface .interface1.active{
	display: block;
}
#screen1 .rightSideInterface .interface1 .top{
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 42%;
}
#screen1 .rightSideInterface .down{
	position: absolute;
	top: 329px;
	left: 0px;
	width: 100%;
	height: 34%;
}

#screen1 .rightSideInterface .down .volume{
	position: absolute;
	top: 13px;
	left: 13px;
	background: url('../images/screen1/volume.png') no-repeat;
	background-position: 0 0;
	width: 40px; height: 40px;
	cursor: pointer;
	z-index: 20;
}

#screen1 .rightSideInterface .down .volume:hover{
	background-position: -40px 0;
}
#screen1 .rightSideInterface .down .volume.highlighter{
	background-position: -40px 0;
	width: 34px; height: 34px;
}
#screen1 .rightSideInterface .down .volume:active{
	background-position: -80px 0;
}
#screen1 .rightSideInterface .down .volume.disable{
	background-position: -120px 0;
	animation: none;
	cursor: default;
}

#screen1 .down .message{
    position: absolute;
    top: 18px;
    left: 60px;
    letter-spacing: 1px;
    font-size: 24px;
    font-family: 'DIN17EFRegular';
}

#screen1 .interface1 .down .down_options{
    position: absolute;
    top: 49px;
    left: 4px;
    width: 675px;
    height: 145px;
	
	-webkit-animation: downAniForModule 1s forwards;
	-moz-animation: downAniForModule 1s forwards;
	-ms-animation: downAniForModule 1s forwards;
	-o-animation: downAniForModule 1s forwards;
	animation: downAniForModule 1s forwards;
}
@-webkit-keyframes downAniForModule {
   from { opacity: 0; }
     to { opacity: 1; }
}
@-moz-keyframes downAniForModule {
   from { opacity: 0; }
     to { opacity: 1; }
}
@-ms-keyframes downAniForModule {
   from { opacity: 0; }
     to { opacity: 1; }
}
@-o-keyframes downAniForModule {
   from { opacity: 0; }
     to { opacity: 1; }
}
@keyframes downAniForModule {
   from { opacity: 0; }
     to { opacity: 1; }
}
#screen1 .interface1 .down .down_options .option{
	position: absolute;
	top: 0px;
	width: 173px; height: 153px;
	background: url('../images/screen1/tab1/down_menu.png') no-repeat;
	background-position: 0 0;
	cursor: pointer;
}
#screen1 .interface1 .down .down_options .option:hover{
	background-position: -173px 0;
}
#screen1 .interface1 .down .down_options .option.highlighter{
	background-position: -173px 0;
	width: 170px; height: 150px;
}
#screen1 .interface1 .down .down_options .option:active{
	background-position: -346px 0;
}
#screen1 .interface1 .down .down_options .option.active{
	background-position: -519px 0;
	cursor: default;
}
#screen1 .interface1 .down .down_options .option.disable{
	background-position: -692px 0;
}
#screen1 .interface1 .down .down_options .option.ani{
	-webkit-animation: buttonAniForModule 0.3s forwards;
	-moz-animation: buttonAniForModule 0.3s forwards;
	-ms-animation: buttonAniForModule 0.3s forwards;
	-o-animation: buttonAniForModule 0.3s forwards;
	animation: buttonAniForModule 0.3s forwards;
}

#screen1 .interface1 .down .down_options .option .img{
	position: absolute;
	top: 18px;
	left: 18px;
	width: 133px;
    height: 82px;
}

#screen1 .interface1 .down .down_options .option .volume{
	top: 104px;
	left: 12px;
}

#screen1 .interface1 .down .down_options .option1Volume{
	top: 104px;
	left: 12px;
}
#screen1 .interface1 .down .down_options .option2Volume{
	top: 104px;
	left: 180px;
}
#screen1 .interface1 .down .down_options .option3Volume{
	top: 104px;
	left: 349px;
}
#screen1 .interface1 .down .down_options .option4Volume{
	top: 104px;
	left: 517px;
}


#screen1 .interface1 .down .down_options .option .title{
	position: absolute;
    top: 104px;
    left: 53px;
    width: 109px;
    height: 37px;
    line-height: 37px;
    color: #fff;
    font-family: 'DIN17EFRegular';
    font-size: 22px;
    letter-spacing: 1px;
    font-weight: normal;
}



#screen1 #tabs1_interface .down .down_options .option1 .img{
	background: url('../images/screen1/tab1/cat_happy.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#screen1 #tabs1_interface .down .down_options .option2 .img{
	background: url('../images/screen1/tab1/cat_excited.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#screen1 #tabs1_interface .down .down_options .option3 .img{
	background: url('../images/screen1/tab1/cat_grumpy.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#screen1 #tabs1_interface .down .down_options .option4 .img{
	background: url('../images/screen1/tab1/cat_sleepy.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}

#screen1 #tabs2_interface .down .down_options .option1 .img{
	background: url('../images/screen1/tab2/cat_small.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#screen1 #tabs2_interface .down .down_options .option2 .img{
	background: url('../images/screen1/tab2/cat_medium.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#screen1 #tabs2_interface .down .down_options .option3 .img{
	background: url('../images/screen1/tab2/cat_large.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#screen1 #tabs2_interface .down .down_options .option4 .img{
	background: url('../images/screen1/tab2/cat_giant.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}




#screen1 .interface1 .down .down_options .option1{
	left: 0;
}
#screen1 .interface1 .down .down_options .option2{
	left: 168px;
}
#screen1 .interface1 .down .down_options .option3{
	left: 337px;
}
#screen1 .interface1 .down .down_options .option4{
	left: 505px;
}

#screen1 .interface1 .down .down_options .controller{
	position: absolute;
    top: -21px;
    left: 257px;
    width: 175px;
    height: 175px;
    background: url('../images/screen1/tab3/controller.png') no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
}
#screen1 .interface1 .down .down_options .controller .left{
	position: absolute;
	top: 59px;
    left: 102px;
	background: url('../images/screen1/tab3/left_arrow.png') no-repeat;
	width: 67px; height: 64px;
	cursor: pointer;
}
#screen1 .interface1 .down .down_options .controller .left:hover{
	background-position: -67px 0;
}
#screen1 .interface1 .down .down_options .controller .left.highlighter{
	background-position: -67px 0;
	width: 62px;
    height: 57px;
}
#screen1 .interface1 .down .down_options .controller .left:active{
	background-position: -134px 0;
}
#screen1 .interface1 .down .down_options .controller .left.disable{
	background-position: -201px 0;
	cursor: default;
}

#screen1 .interface1 .down .down_options .controller .right{
	position: absolute;
	top: 59px;
    left: 15px;
	background: url('../images/screen1/tab3/right_arrow.png') no-repeat;
	width: 67px; height: 64px;
	cursor: pointer;
}
#screen1 .interface1 .down .down_options .controller .right:hover{
	background-position: -67px 0;
}
#screen1 .interface1 .down .down_options .controller .right.highlighter{
	background-position: -67px 0;
	width: 61px;
    height: 57px;
}
#screen1 .interface1 .down .down_options .controller .right:active{
	background-position: -134px 0;
}
#screen1 .interface1 .down .down_options .controller .right.disable{
	background-position: -201px 0;
	cursor: default;
}

#screen1 .interface1 .down .down_options .controller .top{
	position: absolute;
	top: 10px;
    left: 56px;
	background: url('../images/screen1/tab3/top_arrow.png') no-repeat;
	width: 67px; height: 70px;
	cursor: pointer;
}
#screen1 .interface1 .down .down_options .controller .top:hover{
	background-position: -67px 0;
}
#screen1 .interface1 .down .down_options .controller .top.highlighter{
	background-position: -67px 0;
	width: 63px; height: 68px;
}
#screen1 .interface1 .down .down_options .controller .top:active{
	background-position: -134px 0;
}
#screen1 .interface1 .down .down_options .controller .top.disable{
	background-position: -201px 0;
	cursor: default;
}

#screen1 .interface1 .down .down_options .controller .bottom{
	position: absolute;
	top: 101px;
    left: 56px;
	background: url('../images/screen1/tab3/bottom_arrow.png') no-repeat;
	width: 67px; height: 70px;
	cursor: pointer;
}
#screen1 .interface1 .down .down_options .controller .bottom:hover{
	background-position: -67px 0;
}
#screen1 .interface1 .down .down_options .controller .bottom.highlighter{
	background-position: -67px 0;
	width: 61px;
    height: 63px;

}
#screen1 .interface1 .down .down_options .controller .bottom:active{
	background-position: -134px 0;
}
#screen1 .interface1 .down .down_options .controller .bottom.disable{
	background-position: -201px 0;
	cursor: default;
}


#screen1 .color_controller{
	position: absolute;
	top: 18px;
    left: 11px;
    width: 411px;
	height: 56px;
	background: url('../images/screen1/tab4/color_controller.png') no-repeat;
	background-size: 100% auto;
}
#screen1 .color_controller .ani{
	-webkit-animation: colorAniForModule 0.3s forwards;
	-moz-animation: colorAniForModule 0.3s forwards;
	-ms-animation: colorAniForModule 0.3s forwards;
	-o-animation: colorAniForModule 0.3s forwards;
	animation: colorAniForModule 0.3s forwards;
}

@-webkit-keyframes colorAniForModule {
   from { -webkit-transform: scale(0.90); }
     to { -webkit-transform: scale(1); }
}
@-moz-keyframes colorAniForModule {
   from { -moz-transform: scale(0.90); }
     to { -moz-transform: scale(1); }
}
@-ms-keyframes colorAniForModule {
   from { -ms-transform: scale(0.90); }
     to { -ms-transform: scale(1); }
}
@-o-keyframes colorAniForModule {
   from { -o-transform: scale(0.90); }
     to { -o-transform: scale(1); }
}
@keyframes colorAniForModule {
   from { transform: scale(0.90); }
     to { transform: scale(1); }
}

#screen1 .color_controller .color_protect{
	position: absolute;
    top: 44px;
    width: 100%;
    height: 29px;
    z-index: 2;
}
#screen1 .color_controller .color_protect_right{
	position: absolute;
    top: 0px;
    width: 30px;
    height: 100%;
    z-index: 2;
}
#screen1 .color_controller .color_protect1{
	left: 58px;
}
#screen1 .color_controller .color_protect2{
	left: 124px;
}
#screen1 .color_controller .color_protect3{
	left: 191px;
}
#screen1 .color_controller .color_protect4{
	left: 258px;
}
#screen1 .color_controller .color_protect5{
	left: 324px;
}
#screen1 .color_controller .color_protect6{
	left: 390px;
}

#screen1 .color_controller .color{
	position: absolute;
	top: 2px;
	width: 57px; height: 57px;
	cursor: pointer;
}
#screen1 .color_controller .color:hover{
	background-position: -57px 0;
}
#screen1 .color_controller .color.highlighter{
	background-position: -57px 0;
	width: 54px;
    height: 51px;
}
#screen1 .color_controller .color.active{
	background-position: -114px 0;
	cursor: default;
}

#screen1 .color_controller .color1{
	background: url('../images/screen1/tab4/color1.png') no-repeat;
	left: 14px;
}
#screen1 .color_controller .color2{
	background: url('../images/screen1/tab4/color2.png') no-repeat;
	left: 81px;
}
#screen1 .color_controller .color3{
	background: url('../images/screen1/tab4/color3.png') no-repeat;
	left: 148px;
}
#screen1 .color_controller .color4{
	background: url('../images/screen1/tab4/color4.png') no-repeat;
	left: 215px;
}
#screen1 .color_controller .color5{
	background: url('../images/screen1/tab4/color5.png') no-repeat;
	left: 281px;
}
#screen1 .color_controller .color6{
	background: url('../images/screen1/tab4/color6.png') no-repeat;
	left: 347px;
}


/* start screen1 tab 5 */

#screen1 .interface1 .down .down_options .option_without_text{
	position: absolute;
	top: 0px;
	width: 170px; height: 115px;
	background: url('../images/screen1/tab5/option_without_text.png') no-repeat;
	background-position: 0 0;
	cursor: pointer;
}
#screen1 .interface1 .down .down_options .option_without_text:hover{
	background-position: -175px 0;
}
#screen1 .interface1 .down .down_options .option_without_text.highlighter{
	background-position: -175px 0;
}
#screen1 .interface1 .down .down_options .option_without_text:active{
	background-position: -350px 0;
}
#screen1 .interface1 .down .down_options .option_without_text.active{
	background-position: -525px 0;
	cursor: default;
}
#screen1 .interface1 .down .down_options .option_without_text.disable{
	background-position: -700px 0;
}
#screen1 .interface1 .down .down_options .option_without_text.ani{
	-webkit-animation: buttonAniForModule 0.3s forwards;
	-moz-animation: buttonAniForModule 0.3s forwards;
	-ms-animation: buttonAniForModule 0.3s forwards;
	-o-animation: buttonAniForModule 0.3s forwards;
	animation: buttonAniForModule 0.3s forwards;
}

#screen1 .interface1 .down .down_options .option1{
	left: 0;
}
#screen1 .interface1 .down .down_options .option2{
	left: 168px;
}
#screen1 .interface1 .down .down_options .option3{
	left: 337px;
}
#screen1 .interface1 .down .down_options .option4{
	left: 505px;
}

 
#screen1 .interface1 .down .down_options .option_without_text .img{
	position: absolute;
    top: 17px;
    left: 19px;
    width: 130px;
    height: 80px;
}
#screen1 #tabs5_interface .option_without_text .img{
	background: url('../images/screen1/tab5/sound.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}

/* end screen1 tab 5 */


/* start screen1 tab 6 */

#screen1 #tabs6_interface .option_without_text .img{
	background: url('../images/screen1/tab6/voice.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}

/* end screen1 tab 6 */


/* start screen1 tab 7 */

#screen1 #tabs7_interface .option_without_text .place1{
	background: url('../images/screen1/tab7/place1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#screen1 #tabs7_interface .option_without_text .place2{
	background: url('../images/screen1/tab7/place2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#screen1 #tabs7_interface .option_without_text .place3{
	background: url('../images/screen1/tab7/place3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#screen1 #tabs7_interface .option_without_text .place4{
	background: url('../images/screen1/tab7/place4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}

/* end screen1 tab 7 */


/* Start screen1 tab 8 */

#screen1 .rightSideInterface .interface2{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url('../images/interface2.png') no-repeat;
	background-size: 100% auto;
	display: none;
}
#screen1 .rightSideInterface .interface2.active{
	display: block;
}

#screen1 .rightSideInterface .interface2 .down{
	top: 375px;
}

#screen1 .rightSideInterface .interface2 .down .message {
	font-size: 22px;
}

#screen1 .interface2  .color_controller{
	top: 59px;
    left: 15px;
}


#screen1 .interface2 .textBox{
	position: absolute;
	top: 125px;
    left: 15px;
    width: 349px;
    height: 62px;
	background: url('../images/screen1/tab8/textbox.png') no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
}
#screen1 #tabs9_interface.interface2 .textBox{
	background-size: 403px 59px;
    width: 403px;
}
#screen1 #tabs9_interface.interface2 .textBox .input2Poition{
	font-size: 17px;
    width: 374px;
}
#screen1 .interface2 .textBox.highlighter{
	height: 61px;
}
#screen1 .interface2 .textBox .input1Poition{
	position: relative;
    top: -180px;
    left: 0px;
    width: 339px;
    height: 29px;
    line-height: 29px;
    background: transparent;
    border: none;
    font-family: 'DIN17EFRegular';
    font-size: 27px;
    letter-spacing: 1px;
    padding: 7px;
}
#screen1 #tabs9_interface.interface2 .textBox .input1Poition{
	width: 640px;
    font-size: 25px;
}
#screen1 .interface2 .textBox input:focus{
	outline: none;
}

#screen1 .interface2 .textBox .input2Poition{
	position: absolute;
    top: 4px;
    left: 7px;
    width: 339px;
    height: 38px;
    line-height: 38px;
    background: transparent;
    border: none;
    font-family: 'DIN17EFRegular';
    font-size: 34px;
    letter-spacing: 1px;
    padding: 7px;
}

#screen1 #tabs8_interface .color_controller .color{
	width: 57px; height: 57px;
}
#screen1 #tabs8_interface .color_controller .color:hover, #screen1 #tabs8_interface .color_controller .color.highlighter{
	background-position: -57px 0;
}
#screen1 #tabs8_interface .color_controller .color.active{
	background-position: -114px 0;
}

#screen1 #tabs9_interface .color_controller .color{
	width: 57px; height: 57px;
}
#screen1 #tabs9_interface .color_controller .color:hover, #screen1 #tabs9_interface .color_controller .color.highlighter{
	background-position: -57px 0;
}
#screen1 #tabs9_interface .color_controller .color.active{
	background-position: -114px 0;
}

#screen1 #tabs8_interface .color_controller .color.highlighter, #screen1 #tabs9_interface .color_controller .color.highlighter{
	width: 54px;
    height: 52px;
}

#screen1 #tabs8_interface .color_controller .color1, #screen1 #tabs9_interface .color_controller .color1{
	background: url('../images/screen1/tab8/color1.png') no-repeat;
	left: 14px;
}
#screen1 #tabs8_interface .color_controller .color2, #screen1 #tabs9_interface .color_controller .color2{
	background: url('../images/screen1/tab8/color2.png') no-repeat;
	left: 81px;
}
#screen1 #tabs8_interface  .color_controller .color3, #screen1 #tabs9_interface  .color_controller .color3{
	background: url('../images/screen1/tab8/color3.png') no-repeat;
	left: 148px;
}
#screen1 #tabs8_interface  .color_controller .color4, #screen1 #tabs9_interface  .color_controller .color4{
	background: url('../images/screen1/tab8/color4.png') no-repeat;
	left: 215px;
}
#screen1 #tabs8_interface  .color_controller .color5, #screen1 #tabs9_interface  .color_controller .color5{
	background: url('../images/screen1/tab8/color5.png') no-repeat;
	left: 281px;
}
#screen1 #tabs8_interface  .color_controller .color6, #screen1 #tabs9_interface  .color_controller .color6{
	background: url('../images/screen1/tab8/color6.png') no-repeat;
	left: 347px;
}







/* End screen1 tab 8 */





/* Start container background */

#mainGame #myCharacterPlay{
	position: absolute;
    top: 22px;
    left: 140px;
    width: 655px;
    height: 302px;
    z-index: 10;
	overflow: hidden;
}
#mainGame #myCharacterPlay .myCharacter{
	width: 100%;
	height: 100%;
	transition: 1s all;
}
/* #myCharacterPlay .background.show{
	display: block;
} */
#myCharacterPlay .background1 {
	background: url('../images/screen1/tab7/bg-1.png') no-repeat;
	width: 655px;
	height: 302px;
	background-size:100% 100%;
	position: absolute;
	display: none;
}
#myCharacterPlay .background1 .bowl {
	background:url('../images/screen1/tab7/bowl.png') no-repeat;
	width:143px;
	height:89px;
	background-size:100%;
	position:absolute;
	bottom:30px;
	left:65px;
	z-index:2;
}
#myCharacterPlay .background1.active .move {
	position:absolute;
	top:200px;
	left:-100px;
	-webkit-animation: swim 7s linear forwards;
	-moz-animation: swim 7s linear forwards;
	-ms-animation: swim 7s linear forwards;
	-o-animation: swim 7s linear forwards;
	animation: swim 7s linear forwards;
	z-index:1;
}
#myCharacterPlay .background1.active .rat {
	background:url('../images/screen1/tab7/rat-sprite.png') no-repeat top left;
	width:143px;
	height:89px;
	width: 68px;
	height: 35px;
	-webkit-animation:walk 0.7s steps(8) infinite;
	-moz-animation:walk 0.7s steps(8) infinite;
	-ms-animation:walk 0.7s steps(8) infinite;
	-o-animation:walk 0.7s steps(8) infinite;
	animation:walk 0.7s steps(8) infinite;
}
@-webkit-keyframes walk {
	from { background-position: 0 0; }
	to { background-position: -544px 0; }
}
@-moz-keyframes walk {
	from { background-position: 0 0; }
	to { background-position: -544px 0; }
}
@-ms-keyframes walk {
	from { background-position: 0 0; }
	to { background-position: -544px 0; }
}
@-o-keyframes walk {
	from { background-position: 0 0; }
	to { background-position: -544px 0; }
}
@keyframes walk {
	from { background-position: 0 0; }
	to { background-position: -544px 0; }
}

@-webkit-keyframes swim {
	from { left:-100px; }
	to { left:700px; }
}
@-moz-keyframes swim {
	from { left:-100px; }
	to { left:700px; }
}
@-ms-keyframes swim {
	from { left:-100px; }
	to { left:700px; }
}
@-o-keyframes swim {
	from { left:-100px; }
	to { left:700px; }
}
@keyframes swim {
	from { left:-100px; }
	to { left:700px; }
}


#myCharacterPlay .background2{
	background: url('../images/screen1/tab7/bg-2.png') no-repeat;
	width: 655px;
	height: 302px;
	background-size: 100% 100%;
	position: absolute;
	display: none;
}
#myCharacterPlay .background2 .fish-tank{
	background: url('../images/screen1/tab7/fish-tank-sprite.png') no-repeat top left;
	width: 167px; height: 129px;
	position:absolute;
	bottom:60px;
	left:50px;
	background-position: -11523px 0;
}

#myCharacterPlay .background2.active .fish-tank{
	-webkit-animation: fish-swim 4s steps(100) infinite;
	-moz-animation: fish-swim 4s steps(100) infinite;
	-ms-animation: fish-swim 4s steps(100) infinite;
	-o-animation: fish-swim 4s steps(100) infinite;
	animation: fish-swim 4s steps(100) infinite;
}

@-webkit-keyframes fish-swim {
	from { background-position: 0 0; }
	to { background-position: -16700px 0; }
}
@-moz-keyframes fish-swim {
	from { background-position: 0 0; }
	to { background-position: -16700px 0; }
}
@-ms-keyframes fish-swim {
	from { background-position: 0 0; }
	to { background-position: -16700px 0; }
}
@-o-keyframes fish-swim {
	from { background-position: 0 0; }
	to { background-position: -16700px 0; }
}
@keyframes fish-swim {
	from { background-position: 0 0; }
	to { background-position: -16700px 0; }
}


#myCharacterPlay .background3{
	width: 655px;
	height: 302px;
	position: absolute;
	display: none;
}
.background3 .sky{
	background: url('../images/screen1/tab7/sky.png') no-repeat;
	position:absolute;
	top:0; left:0; width:100%;
	height:253px;
	z-index:1;
}
.background3 .trees{
	background: url('../images/screen1/tab7/trees.png') no-repeat;
	width: 655px;
	height: 302px;
	background-size:100% 100%;
	position:absolute;
	top:0;
	left:0;
	z-index:3;
}
.background3 .clouds{
	background: url('../images/screen1/tab7/cloud.png') no-repeat;
	width:580px; height:85px;
	position:absolute;
	top:25px;
	right:25px;
	z-index:2;
}

.background3.active .clouds{
	-webkit-animation: clouds 10s linear forwards;
	-moz-animation: clouds 10s linear forwards;
	-ms-animation: clouds 10s linear forwards;
	-o-animation: clouds 10s linear forwards;
	animation: clouds 10s linear forwards;
}
@-webkit-keyframes clouds {
 	from { right:25px; }
 	to { right:100px; }
}
@-moz-keyframes clouds {
 	from { right:25px; }
 	to { right:100px; }
}
@-ms-keyframes clouds {
 	from { right:25px; }
 	to { right:100px; }
}
@-o-keyframes clouds {
 	from { right:25px; }
 	to { right:100px; }
}
@keyframes clouds {
 	from { right:25px; }
 	to { right:100px; }
}

.background3 .butterfly1{
	background: url('../images/screen1/tab7/butter-fly1-sprite.png') no-repeat top left;
	background-position:0 0;
	width: 139px; height: 139px;
	position:absolute;
	z-index:4;
	top: 60px;
	left: 117px;
	-webkit-transform: scale(0.8) rotate(-25deg);
	-moz-transform: scale(0.8) rotate(-25deg);
	-ms-transform: scale(0.8) rotate(-25deg);
	-o-transform: scale(0.8) rotate(-25deg);
	transform: scale(0.8) rotate(-25deg);
}
.background3.active .butterfly1{
	-webkit-animation:fly 5s steps(100) infinite;
	-moz-animation:fly 5s steps(100) infinite;
	-ms-animation:fly 5s steps(100) infinite;
	-o-animation:fly 5s steps(100) infinite;
	animation:fly 5s steps(100) infinite;
}

.background3 .butterfly2{
	background: url('../images/screen1/tab7/butter-fly1-sprite.png') no-repeat top left;
	width: 139px; height: 139px;
	position:absolute;
	z-index:4;
	top:103px;
	left:447px;
	background-position:0 0;
	-webkit-transform: rotate(-17deg) scale(-0.6, 0.6);
	-moz-transform: rotate(-17deg) scale(-0.6, 0.6);
	-ms-transform: rotate(-17deg) scale(-0.6, 0.6);
	-o-transform: rotate(-17deg) scale(-0.6, 0.6);
	transform: rotate(-17deg) scale(-0.6, 0.6);
	
}
.background3.active .butterfly2{
	-webkit-animation:fly 5s steps(100) infinite;
	-moz-animation:fly 5s steps(100) infinite;
	-ms-animation:fly 5s steps(100) infinite;
	-o-animation:fly 5s steps(100) infinite;
	animation:fly 5s steps(100) infinite;
}
@-webkit-keyframes fly {
	from { background-position: 0 0; }
	to { background-position: -13900px 0; }
}
@-moz-keyframes fly {
	from { background-position: 0 0; }
	to { background-position: -13900px 0; }
}
@-ms-keyframes fly {
	from { background-position: 0 0; }
	to { background-position: -13900px 0; }
}
@-o-keyframes fly {
	from { background-position: 0 0; }
	to { background-position: -13900px 0; }
}
@keyframes fly {
	from { background-position: 0 0; }
	to { background-position: -13900px 0; }
}

#myCharacterPlay .background4{
	background: url('../images/screen1/tab7/bg-3.png') no-repeat;
	width: 655px;
	height: 302px;
	background-size:100% 100%;
	position: absolute;
	display: none;
}

#myCharacterPlay .background4 .clouds2{
	background: url('../images/screen1/tab7/cloud2.png') no-repeat;
	width:680px; height:85px;
	position:absolute;
	top:28px; right:50px;
}
#myCharacterPlay .background4.active .clouds2{
	-webkit-animation: clouds2 10s linear infinite;
	-moz-animation: clouds2 10s linear infinite;
	-ms-animation: clouds2 10s linear infinite;
	-o-animation: clouds2 10s linear infinite;
	animation: clouds2 10s linear infinite;
}
@-webkit-keyframes clouds2 {
	from { right:50px; }
	to { right:100px; }
}
@-moz-keyframes clouds2 {
	from { right:50px; }
	to { right:100px; }
}
@-ms-keyframes clouds2 {
	from { right:50px; }
	to { right:100px; }
}
@-o-keyframes clouds2 {
	from { right:50px; }
	to { right:100px; }
}
@keyframes clouds2 {
	from { right:50px; }
	to { right:100px; }
}

#myCharacterPlay .background4 .fish-bucket{
	background: url('../images/screen1/tab7/fish-bucket-sprite.png') no-repeat top left;
	width: 172px; height: 199px;
	position:absolute;
	bottom:58px; right:-8px;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}
#myCharacterPlay .background4.active .fish-bucket{
	-webkit-animation: swing 3s steps(100) infinite;
	-moz-animation: swing 3s steps(100) infinite;
	-ms-animation: swing 3s steps(100) infinite;
	-o-animation: swing 3s steps(100) infinite;
	animation: swing 3s steps(100) infinite;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}

@-webkit-keyframes swing {
	from { background-position: 0 0; }
	to { background-position: -17200px 0; }
}
@-moz-keyframes swing {
	from { background-position: 0 0; }
	to { background-position: -17200px 0; }
}
@-ms-keyframes swing {
	from { background-position: 0 0; }
	to { background-position: -17200px 0; }
}
@-o-keyframes swing {
	from { background-position: 0 0; }
	to { background-position: -17200px 0; }
}
@keyframes swing {
	from { background-position: 0 0; }
	to { background-position: -17200px 0; }
}

#myCharacterPlay .background4 .water{
	background: url('../images/screen1/tab7/water-sprite.png') no-repeat top left;
	width: 788px; height: 62px;
	position:absolute;
	bottom:-25px; left:-55px;
}
#myCharacterPlay .background4.active .water{
	-webkit-animation:flow 7s  steps(200) infinite;
	-moz-animation:flow 7s  steps(200) infinite;
	-ms-animation:flow 7s  steps(200) infinite;
	-o-animation:flow 7s  steps(200) infinite;
	animation:flow 7s  steps(200) infinite;
}

@-webkit-keyframes flow {
	from { background-position: 0 0; }
	to { background-position:0 -12400px; }
}
@-moz-keyframes flow {
	from { background-position: 0 0; }
	to { background-position:0 -12400px; }
}
@-ms-keyframes flow {
	from { background-position: 0 0; }
	to { background-position:0 -12400px; }
}
@-o-keyframes flow {
	from { background-position: 0 0; }
	to { background-position:0 -12400px; }
}
@keyframes flow {
	from { background-position: 0 0; }
	to { background-position:0 -12400px; }
}


#screen1 .rightSideInterface .interface3{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url('../images/interface3.png') no-repeat;
	background-size: 100% auto;
	display: none;
}
#screen1 .rightSideInterface .interface3.active{
	display: block;
}

#mainGame .interface3 .playBtn{
	top: 145px;
    left: 279px;
}
#mainGame .interface3 .nextBtn{
	top: 204px;
    left: 567px;
}
/* #screen1 .rightSideInterface .interface1 .top{
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 42%;
}
#screen1 .rightSideInterface .down{
	position: absolute;
	top: 329px;
	left: 0px;
	width: 100%;
	height: 34%;
} */


/* End container background */







/* Start Cats animation */
#myCharacterPlay #cat{
	position: absolute;
	left: 206px;
    top: 32px;
	width: 241px;
	height: 260px;
	display: none;
	z-index: 8;
}
#myCharacterPlay #cat.show{
	display: block;
	/* transition: 0.7s all cubic-bezier(0.67, 0.01, 0.26, 0.99);
	transform-origin: center center; */
}


#myCharacterPlay #cat.esmall{
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	-ms-transform: scale(0.4);
	-o-transform: scale(0.4);
	transform: scale(0.4);
}
#myCharacterPlay #cat.small{
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
}
#myCharacterPlay #cat.medium{
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}
#myCharacterPlay #cat.large{
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
#myCharacterPlay #cat.giant{
	-webkit-transform: scale(1.2);    
	-moz-transform: scale(1.2);    
	-ms-transform: scale(1.2);    
	-o-transform: scale(1.2);    
	transform: scale(1.2);    
}

#myCharacterPlay .face{
	z-index: 5;
}

#myCharacterPlay #catBody .face.happy{
	background: url('../images/screen1/cat/tab5/happy-face.svg') no-repeat;
	width: 205px; height: 66px;
	background-position: 0 0;
	position: absolute;
	left: 12px;
    top: 38px;
}
#myCharacterPlay #catBody .face.happy.active{
	-webkit-animation: catHappyFaceSound 0.7s steps(13) forwards;
	-moz-animation: catHappyFaceSound 0.7s steps(13) forwards;
	-ms-animation: catHappyFaceSound 0.7s steps(13) forwards;
	-o-animation: catHappyFaceSound 0.7s steps(13) forwards;
	animation: catHappyFaceSound 0.7s steps(13) forwards;
}

@-webkit-keyframes catHappyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -2665px 0;}
}
@-moz-keyframes catHappyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -2665px 0;}
}
@-ms-keyframes catHappyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -2665px 0;}
}
@-o-keyframes catHappyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -2665px 0;}
}
@keyframes catHappyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -2665px 0;}
}

#myCharacterPlay #catBody .face.happy.fullActive{
	/*top: 36px;*/
	width: 206px; height: 68px;
	background: url('../images/screen1/cat/tab6/happy-voice-face.svg') no-repeat;
	-webkit-animation: catHappyFaceVoice 1.67s steps(67) infinite;
	-moz-animation: catHappyFaceVoice 1.67s steps(67) infinite;
	-ms-animation: catHappyFaceVoice 1.67s steps(67) infinite;
	-o-animation: catHappyFaceVoice 1.67s steps(67) infinite;
	animation: catHappyFaceVoice 1.67s steps(67) infinite;
}
@-webkit-keyframes catHappyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -14003px 0;}
}
@-moz-keyframes catHappyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -14003px 0;}
}
@-ms-keyframes catHappyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -14003px 0;}
}
@-o-keyframes catHappyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -14003px 0;}
}
@keyframes catHappyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -14003px 0;}
}


#myCharacterPlay #catBody .face.happy.reverse{
	-webkit-animation: catHappyFaceSoundReverse 0.3s steps(13) forwards;
	-moz-animation: catHappyFaceSoundReverse 0.3s steps(13) forwards;
	-ms-animation: catHappyFaceSoundReverse 0.3s steps(13) forwards;
	-o-animation: catHappyFaceSoundReverse 0.3s steps(13) forwards;
	animation: catHappyFaceSoundReverse 0.3s steps(13) forwards;
}
@-webkit-keyframes catHappyFaceSoundReverse {
	from{background-position: -2665px 0;}
	to{background-position: 0 0;}	
}
@-moz-keyframes catHappyFaceSoundReverse {
	from{background-position: -2665px 0;}
	to{background-position: 0 0;}	
}
@-ms-keyframes catHappyFaceSoundReverse {
	from{background-position: -2665px 0;}
	to{background-position: 0 0;}	
}
@-o-keyframes catHappyFaceSoundReverse {
	from{background-position: -2665px 0;}
	to{background-position: 0 0;}	
}
@keyframes catHappyFaceSoundReverse {
	from{background-position: -2665px 0;}
	to{background-position: 0 0;}	
}


#myCharacterPlay #catBody .face.excited{
	background: url('../images/screen1/cat/tab5/excited-face.svg') no-repeat;
	width: 205px; height: 61px;
	background-position: 0 0;
	position: absolute;
	left: 12px;
    top: 41px;
}
#myCharacterPlay #catBody .face.excited.active{
	-webkit-animation: catExcitedFaceSound 0.5s steps(17) forwards;
	-moz-animation: catExcitedFaceSound 0.5s steps(17) forwards;
	-ms-animation: catExcitedFaceSound 0.5s steps(17) forwards;
	-o-animation: catExcitedFaceSound 0.5s steps(17) forwards;
	animation: catExcitedFaceSound 0.5s steps(17) forwards;
}
@-webkit-keyframes catExcitedFaceSound {
	from{background-position: 0 0;}
	to{background-position: -3485px 0;}
}
@-moz-keyframes catExcitedFaceSound {
	from{background-position: 0 0;}
	to{background-position: -3485px 0;}
}
@-ms-keyframes catExcitedFaceSound {
	from{background-position: 0 0;}
	to{background-position: -3485px 0;}
}
@-o-keyframes catExcitedFaceSound {
	from{background-position: 0 0;}
	to{background-position: -3485px 0;}
}
@keyframes catExcitedFaceSound {
	from{background-position: 0 0;}
	to{background-position: -3485px 0;}
}

#myCharacterPlay #catBody .face.excited.fullActive{
	width: 207px; height: 61px;
	background: url('../images/screen1/cat/tab6/excited-voice-face.svg') no-repeat;
	-webkit-animation: catExcitedFaceVoice 1.67s steps(67) infinite;
	-moz-animation: catExcitedFaceVoice 1.67s steps(67) infinite;
	-ms-animation: catExcitedFaceVoice 1.67s steps(67) infinite;
	-o-animation: catExcitedFaceVoice 1.67s steps(67) infinite;
	animation: catExcitedFaceVoice 1.67s steps(67) infinite;
}
@-webkit-keyframes catExcitedFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -14070px 0;}
}
@-moz-keyframes catExcitedFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -14070px 0;}
}
@-ms-keyframes catExcitedFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -14070px 0;}
}
@-o-keyframes catExcitedFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -14070px 0;}
}
@keyframes catExcitedFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -14070px 0;}
}

#myCharacterPlay #catBody .face.excited.reverse{
	-webkit-animation: catExcitedFaceSoundReverse 0.3s steps(17) forwards;
	-moz-animation: catExcitedFaceSoundReverse 0.3s steps(17) forwards;
	-ms-animation: catExcitedFaceSoundReverse 0.3s steps(17) forwards;
	-o-animation: catExcitedFaceSoundReverse 0.3s steps(17) forwards;
	animation: catExcitedFaceSoundReverse 0.3s steps(17) forwards;
}

@-webkit-keyframes catExcitedFaceSoundReverse {
	from{background-position: -3485px 0;}
	to{background-position: 0 0;}	
}
@-moz-keyframes catExcitedFaceSoundReverse {
	from{background-position: -3485px 0;}
	to{background-position: 0 0;}	
}
@-ms-keyframes catExcitedFaceSoundReverse {
	from{background-position: -3485px 0;}
	to{background-position: 0 0;}	
}
@-o-keyframes catExcitedFaceSoundReverse {
	from{background-position: -3485px 0;}
	to{background-position: 0 0;}	
}
@keyframes catExcitedFaceSoundReverse {
	from{background-position: -3485px 0;}
	to{background-position: 0 0;}	
}

#myCharacterPlay #catBody .face.grumpy{
	background: url('../images/screen1/cat/tab5/grumpy-face.svg') no-repeat;
	width: 190px; height: 74px;
	background-position: 0 0;
	position: absolute;
	left: 20px;
    top: 57px;
}
#myCharacterPlay #catBody .face.grumpy.active{
	-webkit-animation: catGrumpyFaceSound 0.5s steps(17) forwards;
	-moz-animation: catGrumpyFaceSound 0.5s steps(17) forwards;
	-ms-animation: catGrumpyFaceSound 0.5s steps(17) forwards;
	-o-animation: catGrumpyFaceSound 0.5s steps(17) forwards;
	animation: catGrumpyFaceSound 0.5s steps(17) forwards;
}
@-webkit-keyframes catGrumpyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -3230px 0;}
}
@-moz-keyframes catGrumpyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -3230px 0;}
}
@-ms-keyframes catGrumpyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -3230px 0;}
}
@-o-keyframes catGrumpyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -3230px 0;}
}
@keyframes catGrumpyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -3230px 0;}
}

#myCharacterPlay #catBody .face.grumpy.fullActive{
	/*top: 57px;
    left: 18px;*/
	width: 194px; height: 74px;
	background: url('../images/screen1/cat/tab6/grumpy-voice-face.svg') no-repeat;
	-webkit-animation: catGrumpyFaceVoice 1.67s steps(67) infinite;
	-moz-animation: catGrumpyFaceVoice 1.67s steps(67) infinite;
	-ms-animation: catGrumpyFaceVoice 1.67s steps(67) infinite;
	-o-animation: catGrumpyFaceVoice 1.67s steps(67) infinite;
	animation: catGrumpyFaceVoice 1.67s steps(67) infinite;
}
@-webkit-keyframes catGrumpyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -12998px 0;}
}
@-moz-keyframes catGrumpyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -12998px 0;}
}
@-ms-keyframes catGrumpyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -12998px 0;}
}
@-o-keyframes catGrumpyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -12998px 0;}
}
@keyframes catGrumpyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -12998px 0;}
}

#myCharacterPlay #catBody .face.grumpy.reverse{
	-webkit-animation: catGrumpyFaceSoundReverse 0.3s steps(17) forwards;
	-moz-animation: catGrumpyFaceSoundReverse 0.3s steps(17) forwards;
	-ms-animation: catGrumpyFaceSoundReverse 0.3s steps(17) forwards;
	-o-animation: catGrumpyFaceSoundReverse 0.3s steps(17) forwards;
	animation: catGrumpyFaceSoundReverse 0.3s steps(17) forwards;
}

@-webkit-keyframes catGrumpyFaceSoundReverse {
	from{background-position: -3230px 0;}
	to{background-position: 0 0;}	
}
@-moz-keyframes catGrumpyFaceSoundReverse {
	from{background-position: -3230px 0;}
	to{background-position: 0 0;}	
}
@-ms-keyframes catGrumpyFaceSoundReverse {
	from{background-position: -3230px 0;}
	to{background-position: 0 0;}	
}
@-o-keyframes catGrumpyFaceSoundReverse {
	from{background-position: -3230px 0;}
	to{background-position: 0 0;}	
}
@keyframes catGrumpyFaceSoundReverse {
	from{background-position: -3230px 0;}
	to{background-position: 0 0;}	
}

#myCharacterPlay #catBody .face.sleepy{
	background: url('../images/screen1/cat/tab5/sleepy-face.svg') no-repeat;
	width: 190px; height: 71px;
	background-position: 0 0;
	position: absolute;
	left: 20px;
    top: 60px;
}
#myCharacterPlay #catBody .face.sleepy.active{
	-webkit-animation: catSleepyFaceSound 0.5s steps(23) forwards;
	-moz-animation: catSleepyFaceSound 0.5s steps(23) forwards;
	-ms-animation: catSleepyFaceSound 0.5s steps(23) forwards;
	-o-animation: catSleepyFaceSound 0.5s steps(23) forwards;
	animation: catSleepyFaceSound 0.5s steps(23) forwards;
}

@-webkit-keyframes catSleepyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -4370px 0;}
}
@-moz-keyframes catSleepyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -4370px 0;}
}
@-ms-keyframes catSleepyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -4370px 0;}
}
@-o-keyframes catSleepyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -4370px 0;}
}
@keyframes catSleepyFaceSound {
	from{background-position: 0 0;}
	to{background-position: -4370px 0;}
}

#myCharacterPlay #catBody .face.sleepy.fullActive{
	/*top: 60px;
    left: 18px;*/
	width: 194px; height: 71px;
	background: url('../images/screen1/cat/tab6/sleepy-voice-face.svg') no-repeat;
	-webkit-animation: catSleepyFaceVoice 1.67s steps(67) infinite;
	-moz-animation: catSleepyFaceVoice 1.67s steps(67) infinite;
	-ms-animation: catSleepyFaceVoice 1.67s steps(67) infinite;
	-o-animation: catSleepyFaceVoice 1.67s steps(67) infinite;
	animation: catSleepyFaceVoice 1.67s steps(67) infinite;
}
@-webkit-keyframes catSleepyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -13199px 0;}
}
@-moz-keyframes catSleepyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -13199px 0;}
}
@-ms-keyframes catSleepyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -13199px 0;}
}
@-o-keyframes catSleepyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -13199px 0;}
}
@keyframes catSleepyFaceVoice {
	from{background-position: 0 0;}
	to{background-position: -13199px 0;}
}

#myCharacterPlay #catBody .face.sleepy.reverse{
	-webkit-animation: catSleepyFaceSoundReverse 0.3s steps(23) forwards;
	-moz-animation: catSleepyFaceSoundReverse 0.3s steps(23) forwards;
	-ms-animation: catSleepyFaceSoundReverse 0.3s steps(23) forwards;
	-o-animation: catSleepyFaceSoundReverse 0.3s steps(23) forwards;
	animation: catSleepyFaceSoundReverse 0.3s steps(23) forwards;
}

@-webkit-keyframes catSleepyFaceSoundReverse {
	from{background-position: -4370px 0;}
	to{background-position: 0 0;}	
}
@-moz-keyframes catSleepyFaceSoundReverse {
	from{background-position: -4370px 0;}
	to{background-position: 0 0;}	
}
@-ms-keyframes catSleepyFaceSoundReverse {
	from{background-position: -4370px 0;}
	to{background-position: 0 0;}	
}
@-o-keyframes catSleepyFaceSoundReverse {
	from{background-position: -4370px 0;}
	to{background-position: 0 0;}	
}
@keyframes catSleepyFaceSoundReverse {
	from{background-position: -4370px 0;}
	to{background-position: 0 0;}	
}

#myCharacterPlay #catBody.happy-esmall .face{
	top: 1px;
    left: -48px;
    -webkit-transform: scale(0.61);
    -moz-transform: scale(0.61);
    -ms-transform: scale(0.61);
    -o-transform: scale(0.61);
    transform: scale(0.61);
}
#myCharacterPlay #catBody.excited-esmall .face{
	top: 18px;
    left: -48px;
    -webkit-transform: scale(0.61);
    -moz-transform: scale(0.61);
    -ms-transform: scale(0.61);
    -o-transform: scale(0.61);
    transform: scale(0.61);
}
#myCharacterPlay #catBody.grumpy-esmall .face{
	top: 7px;
    left: -39px;
    -webkit-transform: scale(0.61);
    -moz-transform: scale(0.61);
    -ms-transform: scale(0.61);
    -o-transform: scale(0.61);
    transform: scale(0.61);
}
#myCharacterPlay #catBody.sleepy-esmall .face{
	top: 7px;
    left: -40px;
    -webkit-transform: scale(0.61);
    -moz-transform: scale(0.61);
    -ms-transform: scale(0.61);
    -o-transform: scale(0.61);
    transform: scale(0.61);
}










#myCharacterPlay #catBody.happy-small .face{
	top: 7px;
    left: -37px;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -o-transform: scale(0.7);
    transform: scale(0.7);
}
#myCharacterPlay #catBody.excited-small .face{
	top: 23px;
    left: -37px;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -o-transform: scale(0.7);
    transform: scale(0.7);
}
#myCharacterPlay #catBody.grumpy-small .face{
	top: 15px;
    left: -29px;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -o-transform: scale(0.7);
    transform: scale(0.7);
}
#myCharacterPlay #catBody.sleepy-small .face{
	top: 17px;
    left: -29px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    -ms-transform: scale(0.75);
    -o-transform: scale(0.75);
    transform: scale(0.75);
}

#myCharacterPlay #catBody.happy-medium .face{
	top: 16px;
    left: -21px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
}
#myCharacterPlay #catBody.excited-medium .face{
	top: 36px;
    left: -21px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
}
#myCharacterPlay #catBody.grumpy-medium .face, #myCharacterPlay #catBody.sleepy-medium .face{
	top: 27px;
    left: -12px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
}
#myCharacterPlay #catBody.sleepy-medium .face{
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
    transform: scale(0.95);
}

#myCharacterPlay #catBody.happy-large .face{
	top: 23px;
    left: -5px;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
#myCharacterPlay #catBody.excited-large .face{
	top: 49px;
    left: -5px;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
#myCharacterPlay #catBody.grumpy-large .face, #myCharacterPlay #catBody.sleepy-large .face{
	top: 39px;
    left: 4px;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
#myCharacterPlay #catBody.sleepy-large .face{
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: scale(1.15);
}

#myCharacterPlay #catBody.happy-giant .face{
	top: 28px;
    left: 13px;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
#myCharacterPlay #catBody.excited-giant .face{
	top: 60px;
    left: 12px;
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
}
#myCharacterPlay #catBody.grumpy-giant .face, #myCharacterPlay #catBody.sleepy-giant .face{
	top: 48px;
    left: 20px;
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
}
#myCharacterPlay #catBody.sleepy-giant .face{
    -webkit-transform: scale(1.30);
    -moz-transform: scale(1.30);
    -ms-transform: scale(1.30);
    -o-transform: scale(1.30);
    transform: scale(1.30);
}


#myCharacterPlay #message{
	position: absolute;
	top: 48px;
    left: 368px;
	width: 213px;
	height: 126px;
	display: none;
	z-index: 50;
}
#myCharacterPlay #message.right{
	display: block;
	background: url('../images/screen1/cat/tab6/message-right.svg') no-repeat;
}
#myCharacterPlay #message.left{
	display: block;
	background: url('../images/screen1/cat/tab6/message-left.svg') no-repeat;
}

#myCharacterPlay #message .text{
	position: absolute;
    top: 24px;
    left: 26px;
    width: 157px;
    height: 66px;
    font-size: 28px;
    font-family: 'DIN17EFRegular';
}



.fontcolor1{
	color: #006600;
}
.fontcolor2{
	color: #ff6600;
}
.fontcolor3{
	color: #cc0000;
}
.fontcolor4{
	color: #990066;
}
.fontcolor5{
	color: #6600cc;
}
.fontcolor6{
	color: #0066cc;
}

#mainGame .readyToShow{
	position: absolute;
    bottom: 9px;
    right: 9px;
	width: 192px; height: 68px;
	background: url('../images/screen1/readytoshow.png') no-repeat;
	background-position: 0 0;
	cursor: pointer;
	z-index: 10;
}
#mainGame .readyToShow:hover, #mainGame .readyToShow.highlighter{
	background-position: -192px 0;
}
#mainGame .readyToShow:active{
	background-position: -384px 0;
}
#mainGame .readyToShow.active{
	background-position: -768px 0;
	cursor: default;
}
#mainGame .readyToShow.disable{
	opacity: 0.5;
	background-position: -576px 0;
}

#mainGame .readyToShow .text{
	position: relative;
    top: 17px;
    left: 22px;
    width: 147px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-family: 'DIN17EFRegular';
    font-weight: bold;
    font-size: 19px;
}







/* #cat.happy{
	background: url('../images/screen1/cat/tab1/happy.svg') no-repeat;
	background-size: 100%;
}
#cat.excited{
	background: url('../images/screen1/cat/tab1/excited.svg') no-repeat;
	background-size: 100%;
}
#cat.grumpy{
	background: url('../images/screen1/cat/tab1/grumpy.svg') no-repeat;
	background-size: 100%;
}
#cat.sleepy{
	background: url('../images/screen1/cat/tab1/sleepy.svg') no-repeat;
	background-size: 100%;
} */


/* End   Cats animation */






/* ----------------------------- end screen1 ------------------------------------------------------------ */



/* ----------------------------- start screen2 ------------------------------------------------------------ */

#mainGame #screen2.active{
	display: block;
	background: url('../images/splashscreen/splash1.png') no-repeat;
	background-size: 975px 801px;
	background-position: -98px -50.5px;
}


#mainGame #screen2.active .headingText {
    width: 573px;
    height: 110px;
    background: url('../images/what.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 34px;
    left: 115px;
}


#mainGame #screen2.active .box{
	width:374px;
	height:280px;
	background: url('../images/box.png') no-repeat;
	background-size:100% 100%;
	position:absolute;
	top: 167px;
}
#mainGame #screen2.active .box.smileBox{
	left:25px;
}

#mainGame #screen2.active .box.textBox{
	right:25px;
}

#mainGame #screen2.active .nextBtn{
	left: 705px;
    top: 540px;
}




#mainGame #screen2.active .smileAudio,#mainGame #screen2.active .textAudio{
	position: absolute;
	top: 12px;
	left: 15px;
	background: url('../images/volume.png') no-repeat;
	background-position: 0 0;
	width: 40px; 
	height: 37px;
	cursor: pointer;
}

#mainGame #screen2.active .smileAudio:hover,#mainGame #screen2.active .textAudio:hover{
	background-position: -40px 0;
}
#mainGame #screen2.active .smileAudio.highlighter,#mainGame #screen2.active .textAudio.highlighter{
	background-position: -40px 0;
	width: 30px;
    height: 30px;
}


#mainGame #screen2.active .smileAudio:active,#mainGame #screen2.active .textAudio:active{
	background-position: -80px 0;
	-webkit-animation: buttonAniForModule1 0.3s forwards;
	-moz-animation: buttonAniForModule1 0.3s forwards;
	-ms-animation: buttonAniForModule1 0.3s forwards;
	-o-animation: buttonAniForModule1 0.3s forwards;
	animation: buttonAniForModule1 0.3s forwards;
	
	-webkit-transform-origin:top left;
	-moz-transform-origin:top left;
	-ms-transform-origin:top left;
	-o-transform-origin:top left;
	transform-origin:top left;
}
#mainGame #screen2.active .smileAudio.disable{
	background-position: -120px 0;
}
#mainGame #screen2.active .textAudio.disable{
	background-position: -120px 0;
}
#mainGame #screen2.active .smileAudio .sound1,#mainGame #screen2.active .textAudio .sound1{
	background: url('../images/sound.png') no-repeat;
	background-position: 0 0;
	width: 27px; height: 24px;
	position: relative;
    top: 7px;
    left: 6px;
}

@keyframes buttonAniForModule1 {
   from { transform: scale(0.95) translateX(-1px) translateY(-1px); }
   to { transform: scale(1) translateX(0px) translateY(0px);}
}

@-webkit-keyframes buttonAniForModule1 {
   from { -webkit-transform: scale(0.95) translateX(-1px) translateY(-1px); }
   to { -webkit-transform: scale(1) translateX(0px) translateY(0px);}
}
@-moz-keyframes buttonAniForModule1 {
   from { -webkit-transform: scale(0.95) translateX(-1px) translateY(-1px); }
   to { -webkit-transform: scale(1) translateX(0px) translateY(0px);}
}
@-ms-keyframes buttonAniForModule1 {
   from { -webkit-transform: scale(0.95) translateX(-1px) translateY(-1px); }
   to { -webkit-transform: scale(1) translateX(0px) translateY(0px);}
}
@-o-keyframes buttonAniForModule1 {
   from { -o-transform: scale(0.95) translateX(-1px) translateY(-1px); }
   to { -o-transform: scale(1) translateX(0px) translateY(0px);}
}


#screen2.active .smileEle {
    position: absolute;
    top: 110px;
    left: 17px;
    background:#fff url('../images/box2.png') no-repeat;
    background-size: 100% 100%;
    width: 340px;
    height: 146px;
	border-radius: 15px;
}
#screen2.active textarea {
    position: absolute;
    top: 63px;
    font-size: 27px;
    left: 17px;
    max-height: 191px;
    min-height: 191px;
    margin: 0px;
    max-width: 334px;
    min-width: 334px;
    line-height: 36px;
	resize: none;
	font-family: DIN17EFRegular;
	-webkit-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	-o-user-select: auto;
	user-select: auto;
}


#screen2.active .smileEle .smile{
	width:80px;
	height:80px;
	position:absolute;
	top:32px;
	cursor:pointer;
	border-radius: 50%;
}
#screen2.active .smileEle .smile.smile1{
	left:38px;
	background:url('../images/smile1.png') no-repeat;
	background-size:100% 100%;
}
#screen2.active .smileEle .smile.smile2{
	left:130px;
	background:url('../images/smile2.png') no-repeat;
	background-size:100% 100%;
}
#screen2.active .smileEle .smile.smile3{
	left:222px;
	background:url('../images/smile3.png') no-repeat;
	background-size:100% 100%;
}
#screen2.active .smileEle .smile:hover, #screen2.active .smileEle .smile.highlighter{
	box-shadow: 0px 0px 0px 1px #990000 inset,0px 0px 0px 3px #990000;
}
#screen2.active .smileEle .smile:active{
	box-shadow: 0px 0px 0px 1px #99046a inset,0px 0px 0px 5px #99046a;
}
#screen2.active .smileEle .smile.active{
	box-shadow: 0px 0px 0px 1px #99046a inset,0px 0px 0px 5px #99046a;
	transform-origin:top left;
	-webkit-transform-origin:top left;
	-moz-transform-origin:top left;
	-ms-transform-origin:top left;
	animation: smile 0.5s forwards;
	-webkit-animation: smile 0.5s forwards;
	-moz-animation: smile 0.5s forwards;
	-ms-animation: smile 0.5s forwards;
	-o-animation: smile 0.5s forwards;
}

@keyframes smile {
   0%{ transform: scale(0.90); }
   34% { transform: scale(1);}
   67% { transform: scale(0.95);}
   100% { transform: scale(1);}
}
@-webkit-keyframes smile {
   0%{ -webkit-transform: scale(0.90); }
   34% { -webkit-transform: scale(1);}
   67% { -webkit-transform: scale(0.95);}
   100% { -webkit-transform: scale(1);}
}
@-moz-keyframes smile {
   0%{ -moz-transform: scale(0.90); }
   34% { -moz-transform: scale(1);}
   67% { -moz-transform: scale(0.95);}
   100% { -moz-transform: scale(1);}
}
@-ms-keyframes smile {
   0%{ -ms-transform: scale(0.90); }
   34% { -ms-transform: scale(1);}
   67% { -ms-transform: scale(0.95);}
   100% { -ms-transform: scale(1);}
}
@-o-keyframes smile {
   0%{ -o-transform: scale(0.90); }
   34% { -o-transform: scale(1);}
   67% { -o-transform: scale(0.95);}
   100% { -o-transform: scale(1);}
}

#screen2 .smilePara{
	font-size: 23px;
    position: absolute;
    top: 46px;
    left: 20px;
    font-family: DIN17EFRegular;
}
#screen2 .textPara {
    font-size: 23px;
    position: absolute;
    top: 11px;
    left: 50px;
    font-family: DIN17EFRegular;
}

#screen2 .backBtn {
	left: 6px;
    top: 540px;
}


#mainGame #screen3.active{
	display: block;
	background: url('../images/splashscreen/splash1.png') no-repeat;
	background-size: 975px 801px;
	background-position: -98px -50.5px;
}

#screen3 .finalHeading {
    width: 596px;
    height: 109px;
    background: #fff url('../images/print2.png') no-repeat;
    position: absolute;
    top: 10px;
    left: 8px;
    border-radius: 11px;
}


 #screen3 .finalAudio{
	position: absolute;
	top: 18px;
	left: 18px;
	background: url('../images/volume.png') no-repeat;
	background-position: 0 0;
	width: 40px; 
	height: 37px;
	cursor: pointer;
}

#screen3 .finalAudio:hover{
	background-position: -40px 0;
}
#screen3 .finalAudio.highlighter{
	background-position: -40px 0;
	width: 30px;
    height: 30px;
}


#screen3 .finalAudio:active{
	background-position: -80px 0;
	animation: sound2 0.3s forwards;
	-webkit-animation: sound2 0.3s forwards;
	-moz-animation: sound2 0.3s forwards;
	-ms-animation: sound2 0.3s forwards;
	transform-origin:top left;
	-webkit-transform-origin:top left;
	-moz-transform-origin:top left;
	-ms-transform-origin:top left;
}
#screen3 .finalAudio.disable{
	background-position: -120px 0;
}

#screen3 .finalAudio .sound2{
	background: url('../images/sound.png') no-repeat;
	background-position: 0 0;
	width: 27px; height: 24px;
	position: relative;
    top: 7px;
    left: 6px;
}

@keyframes sound2 {
   from { transform: scale(0.95) translateX(-1px) translateY(-1px); }
   to { transform: scale(1) translateX(0px) translateY(0px);}
}

@-webkit-keyframes sound2 {
   from { -webkit-transform: scale(0.95) translateX(-1px) translateY(-1px); }
   to { -webkit-transform: scale(1) translateX(0px) translateY(0px);}
}
@-moz-keyframes sound2 {
   from { -webkit-transform: scale(0.95) translateX(-1px) translateY(-1px); }
   to { -webkit-transform: scale(1) translateX(0px) translateY(0px);}
}
@-ms-keyframes sound2 {
   from { -webkit-transform: scale(0.95) translateX(-1px) translateY(-1px); }
   to { -webkit-transform: scale(1) translateX(0px) translateY(0px);}
}


#screen3 .greatwork{
	font-size: 22px;
    font-family: DIN17EFRegular;
    position: absolute;
    left: 58px;
    top: 13px;
    line-height: 42px;	
}

#screen3 .finalImage {
    position: absolute;
    top: 122px;
    left: 84px;
    background:url('../images/print1.png') no-repeat;
    width: 636px;
    height: 309px;
}
#screen3 .finalImage .drawFinalImage {
    position: absolute;
    top: 13px;
    left: 13px;
    background: #fff;
    width: 608px;
    height: 281px;
    border: 1px solid #84919e;
    overflow: hidden;
}

#screen3 #selectedSmile {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 374px;
    left: 667px;
    border-radius: 50%;
    z-index: 15;
	box-shadow: 3px 3px 6px 2px rgba(0,0,0,0.5);
}
#screen3 #selectedSmile.smile1 {
    background: url('../images/smile1.png') no-repeat;
	 background-size: 100% 100%;
}
#screen3 #selectedSmile.smile2 {
    background: url('../images/smile2.png') no-repeat;
	 background-size: 100% 100%;
}
#screen3 #selectedSmile.smile3 {
    background: url('../images/smile3.png') no-repeat;
	 background-size: 100% 100%;
}

#mainGame .smile .highlighter{
	box-shadow: none;
}

#screen3 .finalComments {
    position: absolute;
    top: 363px;
    left: 11px;
    background: url('../images/print3.png') no-repeat;
    width: 292px;
    height: 162px;
    border-radius: 4%;
    background-position: -0px -2px;
    z-index: 15;
}

#screen3 #comments {
    position: absolute;
    top: 12px;
    font-size: 21px;
    left: 11px;
    height: 130px;
    margin: 0px;
    width: 266px;
    line-height: 24px;
    resize: none;
    font-family: DIN17EFRegular;
    border: none;
}



#screen3 .backBtn {
	left: 6px;
    top: 540px;
}

#screen3 .startAgain{
    bottom: 5px;
    right: 5px;
}
#screen3 .printBtn{
	top: 541px;
    left: 486px;
}

/* ----------------------------- end screen2 ------------------------------------------------------------ */


/* start cat sprite animation */
#myCharacterPlay #catBody.happy-esmall{
	width: 122px; height: 146px;
	position: absolute;
	top: 109px;
    left: 65px;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-esmall{
	-webkit-animation: happy-esmall 5s steps(117) forwards;
	-moz-animation: happy-esmall 5s steps(117) forwards;
	-ms-animation: happy-esmall 5s steps(117) forwards;
	-o-animation: happy-esmall 5s steps(117) forwards;
	animation: happy-esmall 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes happy-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@-moz-keyframes happy-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@-ms-keyframes happy-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@-o-keyframes happy-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@keyframes happy-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}


#myCharacterPlay #catBody.happy-small{
	width: 145px; height: 174px;
	position: absolute;
	top: 86px;
    left: 50px;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-small{
	-webkit-animation: happy-small 5s steps(117) forwards;
	-moz-animation: happy-small 5s steps(117) forwards;
	-ms-animation: happy-small 5s steps(117) forwards;
	-o-animation: happy-small 5s steps(117) forwards;
	animation: happy-small 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes happy-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@-moz-keyframes happy-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@-ms-keyframes happy-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@-o-keyframes happy-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@keyframes happy-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}

#myCharacterPlay #catBody.happy-medium{
	width: 182px; height: 219px;
	position: absolute;
	top: 45px;
    left: 29px;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-medium{
	-webkit-animation: happy-medium 5s steps(117) forwards;
	-moz-animation: happy-medium 5s steps(117) forwards;
	-ms-animation: happy-medium 5s steps(117) forwards;
	-o-animation: happy-medium 5s steps(117) forwards;
	animation: happy-medium 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes happy-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@-moz-keyframes happy-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@-ms-keyframes happy-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@-o-keyframes happy-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@keyframes happy-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}

#myCharacterPlay #catBody.happy-large{
	width: 219px; height: 263px;
	position: absolute;
	top: 5px;
    left: 11px;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-large{
	-webkit-animation: happy-large 5s steps(117) forwards;
	-moz-animation: happy-large 5s steps(117) forwards;
	-ms-animation: happy-large 5s steps(117) forwards;
	-o-animation: happy-large 5s steps(117) forwards;
	animation: happy-large 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes happy-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}
@-moz-keyframes happy-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}
@-ms-keyframes happy-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}
@-o-keyframes happy-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}
@keyframes happy-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}

#myCharacterPlay #catBody.happy-giant{
	width: 256px; height: 307px;
	position: absolute;
	top: -27px;
    left: -7px;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-giant{
	-webkit-animation: happy-giant 5s steps(117) forwards;
	-moz-animation: happy-giant 5s steps(117) forwards;
	-ms-animation: happy-giant 5s steps(117) forwards;
	-o-animation: happy-giant 5s steps(117) forwards;
	animation: happy-giant 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes happy-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}
@-moz-keyframes happy-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}
@-ms-keyframes happy-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}
@-o-keyframes happy-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}
@keyframes happy-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}

#myCharacterPlay #catBody.happy-esmall-color1 {
	background: url('../images/screen1/cat/tab4/happy/esmall/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-esmall-color1 {
	background: url('../images/screen1/cat/tab4/happy/esmall/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-esmall-color2 {
	background: url('../images/screen1/cat/tab4/happy/esmall/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-esmall-color2 {
	background: url('../images/screen1/cat/tab4/happy/esmall/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-esmall-color3 {
	background: url('../images/screen1/cat/tab4/happy/esmall/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-esmall-color3 {
	background: url('../images/screen1/cat/tab4/happy/esmall/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-esmall-color4 {
	background: url('../images/screen1/cat/tab4/happy/esmall/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-esmall-color4 {
	background: url('../images/screen1/cat/tab4/happy/esmall/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-esmall-color5 {
	background: url('../images/screen1/cat/tab4/happy/esmall/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-esmall-color5 {
	background: url('../images/screen1/cat/tab4/happy/esmall/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-esmall-color6 {
	background: url('../images/screen1/cat/tab4/happy/esmall/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-esmall-color6 {
	background: url('../images/screen1/cat/tab4/happy/esmall/color6-sprite.png') no-repeat;
	background-position: 0 0;
}

#myCharacterPlay #catBody.happy-small-color1 {
	background: url('../images/screen1/cat/tab4/happy/small/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-small-color1 {
	background: url('../images/screen1/cat/tab4/happy/small/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-small-color2 {
	background: url('../images/screen1/cat/tab4/happy/small/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-small-color2 {
	background: url('../images/screen1/cat/tab4/happy/small/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-small-color3 {
	background: url('../images/screen1/cat/tab4/happy/small/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-small-color3 {
	background: url('../images/screen1/cat/tab4/happy/small/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-small-color4 {
	background: url('../images/screen1/cat/tab4/happy/small/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-small-color4 {
	background: url('../images/screen1/cat/tab4/happy/small/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-small-color5 {
	background: url('../images/screen1/cat/tab4/happy/small/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-small-color5 {
	background: url('../images/screen1/cat/tab4/happy/small/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-small-color6 {
	background: url('../images/screen1/cat/tab4/happy/small/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-small-color6 {
	background: url('../images/screen1/cat/tab4/happy/small/color6-sprite.png') no-repeat;
	background-position: 0 0;
}

#myCharacterPlay #catBody.happy-medium-color1 {
	background: url('../images/screen1/cat/tab4/happy/medium/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-medium-color1 {
	background: url('../images/screen1/cat/tab4/happy/medium/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-medium-color2 {
	background: url('../images/screen1/cat/tab4/happy/medium/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-medium-color2 {
	background: url('../images/screen1/cat/tab4/happy/medium/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-medium-color3 {
	background: url('../images/screen1/cat/tab4/happy/medium/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-medium-color3 {
	background: url('../images/screen1/cat/tab4/happy/medium/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-medium-color4 {
	background: url('../images/screen1/cat/tab4/happy/medium/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-medium-color4 {
	background: url('../images/screen1/cat/tab4/happy/medium/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-medium-color5 {
	background: url('../images/screen1/cat/tab4/happy/medium/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-medium-color5 {
	background: url('../images/screen1/cat/tab4/happy/medium/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-medium-color6 {
	background: url('../images/screen1/cat/tab4/happy/medium/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-medium-color6 {
	background: url('../images/screen1/cat/tab4/happy/medium/color6-sprite.png') no-repeat;
	background-position: 0 0;
}


#myCharacterPlay #catBody.happy-large-color1 {
	background: url('../images/screen1/cat/tab4/happy/large/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-large-color1 {
	background: url('../images/screen1/cat/tab4/happy/large/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-large-color2 {
	background: url('../images/screen1/cat/tab4/happy/large/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-large-color2 {
	background: url('../images/screen1/cat/tab4/happy/large/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-large-color3 {
	background: url('../images/screen1/cat/tab4/happy/large/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-large-color3 {
	background: url('../images/screen1/cat/tab4/happy/large/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-large-color4 {
	background: url('../images/screen1/cat/tab4/happy/large/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-large-color4 {
	background: url('../images/screen1/cat/tab4/happy/large/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-large-color5 {
	background: url('../images/screen1/cat/tab4/happy/large/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-large-color5 {
	background: url('../images/screen1/cat/tab4/happy/large/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-large-color6 {
	background: url('../images/screen1/cat/tab4/happy/large/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-large-color6 {
	background: url('../images/screen1/cat/tab4/happy/large/color6-sprite.png') no-repeat;
	background-position: 0 0;
}


#myCharacterPlay #catBody.happy-giant-color1 {
	background: url('../images/screen1/cat/tab4/happy/giant/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-giant-color1 {
	background: url('../images/screen1/cat/tab4/happy/giant/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-giant-color2 {
	background: url('../images/screen1/cat/tab4/happy/giant/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-giant-color2 {
	background: url('../images/screen1/cat/tab4/happy/giant/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-giant-color3 {
	background: url('../images/screen1/cat/tab4/happy/giant/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-giant-color3 {
	background: url('../images/screen1/cat/tab4/happy/giant/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-giant-color4 {
	background: url('../images/screen1/cat/tab4/happy/giant/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-giant-color4 {
	background: url('../images/screen1/cat/tab4/happy/giant/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-giant-color5 {
	background: url('../images/screen1/cat/tab4/happy/giant/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-giant-color5 {
	background: url('../images/screen1/cat/tab4/happy/giant/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.happy-giant-color6 {
	background: url('../images/screen1/cat/tab4/happy/giant/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.happy-giant-color6 {
	background: url('../images/screen1/cat/tab4/happy/giant/color6-sprite.png') no-repeat;
	background-position: 0 0;
}

#myCharacterPlay #catBody.excited-esmall{
	width: 122px;
    height: 158px;
    position: absolute;
	top: 101px;
	left: 67px;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-esmall{
	-webkit-animation: excited-esmall 5s steps(117) forwards;
	-moz-animation: excited-esmall 5s steps(117) forwards;
	-ms-animation: excited-esmall 5s steps(117) forwards;
	-o-animation: excited-esmall 5s steps(117) forwards;
	animation: excited-esmall 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes excited-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@-moz-keyframes excited-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@-ms-keyframes excited-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@-o-keyframes excited-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@keyframes excited-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}

#myCharacterPlay #catBody.excited-small{
	width: 145px;
    height: 188px;
    position: absolute;
    top: 72px;
    left: 50px;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-small{
	-webkit-animation: excited-small 5s steps(117) forwards;
	-moz-animation: excited-small 5s steps(117) forwards;
	-ms-animation: excited-small 5s steps(117) forwards;
	-o-animation: excited-small 5s steps(117) forwards;
	animation: excited-small 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes excited-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@-moz-keyframes excited-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@-ms-keyframes excited-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@-o-keyframes excited-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@keyframes excited-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}

#myCharacterPlay #catBody.excited-medium{
	width: 182px; height: 236px;
	position: absolute;
	top: 27px;
    left: 29px;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-medium{
	-webkit-animation: excited-medium 5s steps(117) forwards;
	-moz-animation: excited-medium 5s steps(117) forwards;
	-ms-animation: excited-medium 5s steps(117) forwards;
	-o-animation: excited-medium 5s steps(117) forwards;
	animation: excited-medium 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes excited-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@-moz-keyframes excited-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@-ms-keyframes excited-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@-o-keyframes excited-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@keyframes excited-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}

#myCharacterPlay #catBody.excited-large{
	width: 219px; height: 284px;
	position: absolute;
	top: -16px;
    left: 11px;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-large{
	-webkit-animation: excited-large 5s steps(117) forwards;
	-moz-animation: excited-large 5s steps(117) forwards;
	-ms-animation: excited-large 5s steps(117) forwards;
	-o-animation: excited-large 5s steps(117) forwards;
	animation: excited-large 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes excited-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}
@-moz-keyframes excited-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}
@-ms-keyframes excited-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}
@-o-keyframes excited-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}
@keyframes excited-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}

#myCharacterPlay #catBody.excited-giant{
	width: 256px; height: 332px;
	position: absolute;
	top: -52px;
    left: -7px;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-giant{
	-webkit-animation: excited-giant 5s steps(117) forwards;
	-moz-animation: excited-giant 5s steps(117) forwards;
	-ms-animation: excited-giant 5s steps(117) forwards;
	-o-animation: excited-giant 5s steps(117) forwards;
	animation: excited-giant 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes excited-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}
@-moz-keyframes excited-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}
@-ms-keyframes excited-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}
@-o-keyframes excited-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}
@keyframes excited-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}

#myCharacterPlay #catBody.excited-esmall-color1 {
	background: url('../images/screen1/cat/tab4/excited/esmall/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-esmall-color1 {
	background: url('../images/screen1/cat/tab4/excited/esmall/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-esmall-color2 {
	background: url('../images/screen1/cat/tab4/excited/esmall/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-esmall-color2 {
	background: url('../images/screen1/cat/tab4/excited/esmall/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-esmall-color3 {
	background: url('../images/screen1/cat/tab4/excited/esmall/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-esmall-color3 {
	background: url('../images/screen1/cat/tab4/excited/esmall/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-esmall-color4 {
	background: url('../images/screen1/cat/tab4/excited/esmall/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-esmall-color4 {
	background: url('../images/screen1/cat/tab4/excited/esmall/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-esmall-color5 {
	background: url('../images/screen1/cat/tab4/excited/esmall/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-esmall-color5 {
	background: url('../images/screen1/cat/tab4/excited/esmall/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-esmall-color6 {
	background: url('../images/screen1/cat/tab4/excited/esmall/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-esmall-color6 {
	background: url('../images/screen1/cat/tab4/excited/esmall/color6-sprite.png') no-repeat;
	background-position: 0 0;
}

#myCharacterPlay #catBody.excited-small-color1 {
	background: url('../images/screen1/cat/tab4/excited/small/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-small-color1 {
	background: url('../images/screen1/cat/tab4/excited/small/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-small-color2 {
	background: url('../images/screen1/cat/tab4/excited/small/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-small-color2 {
	background: url('../images/screen1/cat/tab4/excited/small/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-small-color3 {
	background: url('../images/screen1/cat/tab4/excited/small/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-small-color3 {
	background: url('../images/screen1/cat/tab4/excited/small/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-small-color4 {
	background: url('../images/screen1/cat/tab4/excited/small/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-small-color4 {
	background: url('../images/screen1/cat/tab4/excited/small/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-small-color5 {
	background: url('../images/screen1/cat/tab4/excited/small/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-small-color5 {
	background: url('../images/screen1/cat/tab4/excited/small/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-small-color6 {
	background: url('../images/screen1/cat/tab4/excited/small/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-small-color6 {
	background: url('../images/screen1/cat/tab4/excited/small/color6-sprite.png') no-repeat;
	background-position: 0 0;
}


#myCharacterPlay #catBody.excited-medium-color1 {
	background: url('../images/screen1/cat/tab4/excited/medium/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-medium-color1 {
	background: url('../images/screen1/cat/tab4/excited/medium/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-medium-color2 {
	background: url('../images/screen1/cat/tab4/excited/medium/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-medium-color2 {
	background: url('../images/screen1/cat/tab4/excited/medium/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-medium-color3 {
	background: url('../images/screen1/cat/tab4/excited/medium/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-medium-color3 {
	background: url('../images/screen1/cat/tab4/excited/medium/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-medium-color4 {
	background: url('../images/screen1/cat/tab4/excited/medium/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-medium-color4 {
	background: url('../images/screen1/cat/tab4/excited/medium/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-medium-color5 {
	background: url('../images/screen1/cat/tab4/excited/medium/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-medium-color5 {
	background: url('../images/screen1/cat/tab4/excited/medium/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-medium-color6 {
	background: url('../images/screen1/cat/tab4/excited/medium/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-medium-color6 {
	background: url('../images/screen1/cat/tab4/excited/medium/color6-sprite.png') no-repeat;
	background-position: 0 0;
}


#myCharacterPlay #catBody.excited-large-color1 {
	background: url('../images/screen1/cat/tab4/excited/large/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-large-color1 {
	background: url('../images/screen1/cat/tab4/excited/large/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-large-color2 {
	background: url('../images/screen1/cat/tab4/excited/large/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-large-color2 {
	background: url('../images/screen1/cat/tab4/excited/large/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-large-color3 {
	background: url('../images/screen1/cat/tab4/excited/large/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-large-color3 {
	background: url('../images/screen1/cat/tab4/excited/large/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-large-color4 {
	background: url('../images/screen1/cat/tab4/excited/large/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-large-color4 {
	background: url('../images/screen1/cat/tab4/excited/large/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-large-color5 {
	background: url('../images/screen1/cat/tab4/excited/large/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-large-color5 {
	background: url('../images/screen1/cat/tab4/excited/large/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-large-color6 {
	background: url('../images/screen1/cat/tab4/excited/large/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-large-color6 {
	background: url('../images/screen1/cat/tab4/excited/large/color6-sprite.png') no-repeat;
	background-position: 0 0;
}


#myCharacterPlay #catBody.excited-giant-color1 {
	background: url('../images/screen1/cat/tab4/excited/giant/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-giant-color1 {
	background: url('../images/screen1/cat/tab4/excited/giant/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-giant-color2 {
	background: url('../images/screen1/cat/tab4/excited/giant/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-giant-color2 {
	background: url('../images/screen1/cat/tab4/excited/giant/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-giant-color3 {
	background: url('../images/screen1/cat/tab4/excited/giant/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-giant-color3 {
	background: url('../images/screen1/cat/tab4/excited/giant/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-giant-color4 {
	background: url('../images/screen1/cat/tab4/excited/giant/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-giant-color4 {
	background: url('../images/screen1/cat/tab4/excited/giant/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-giant-color5 {
	background: url('../images/screen1/cat/tab4/excited/giant/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-giant-color5 {
	background: url('../images/screen1/cat/tab4/excited/giant/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.excited-giant-color6 {
	background: url('../images/screen1/cat/tab4/excited/giant/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.excited-giant-color6 {
	background: url('../images/screen1/cat/tab4/excited/giant/color6-sprite.png') no-repeat;
	background-position: 0 0;
}

#myCharacterPlay #catBody.grumpy-esmall{
	width: 122px; height: 146px;
	position: absolute;
	top: 109px;
    left: 67px;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-esmall{
	-webkit-animation: grumpy-esmall 5s steps(117) forwards;
	-moz-animation: grumpy-esmall 5s steps(117) forwards;
	-ms-animation: grumpy-esmall 5s steps(117) forwards;
	-o-animation: grumpy-esmall 5s steps(117) forwards;
	animation: grumpy-esmall 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes grumpy-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@-moz-keyframes grumpy-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@-ms-keyframes grumpy-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@-o-keyframes grumpy-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@keyframes grumpy-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}

#myCharacterPlay #catBody.grumpy-small{
	width: 145px; height: 174px;
	position: absolute;
	top: 86px;
    left: 50px;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-small{
	-webkit-animation: grumpy-small 5s steps(117) forwards;
	-moz-animation: grumpy-small 5s steps(117) forwards;
	-ms-animation: grumpy-small 5s steps(117) forwards;
	-o-animation: grumpy-small 5s steps(117) forwards;
	animation: grumpy-small 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes grumpy-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@-moz-keyframes grumpy-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@-ms-keyframes grumpy-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@-o-keyframes grumpy-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@keyframes grumpy-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}

#myCharacterPlay #catBody.grumpy-medium{
	width: 182px; height: 219px;
	position: absolute;
	top: 45px;
    left: 29px;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-medium{
	-webkit-animation: grumpy-medium 5s steps(117) forwards;
	-moz-animation: grumpy-medium 5s steps(117) forwards;
	-ms-animation: grumpy-medium 5s steps(117) forwards;
	-o-animation: grumpy-medium 5s steps(117) forwards;
	animation: grumpy-medium 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes grumpy-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@-moz-keyframes grumpy-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@-ms-keyframes grumpy-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@-o-keyframes grumpy-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@keyframes grumpy-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}

#myCharacterPlay #catBody.grumpy-large{
	width: 219px; height: 263px;
	position: absolute;
	top: 5px;
    left: 11px;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-large{
	-webkit-animation: grumpy-large 5s steps(117) forwards;
	-moz-animation: grumpy-large 5s steps(117) forwards;
	-ms-animation: grumpy-large 5s steps(117) forwards;
	animation: grumpy-large 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes grumpy-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}
@-moz-keyframes grumpy-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}
@-ms-keyframes grumpy-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}
@keyframes grumpy-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}

#myCharacterPlay #catBody.grumpy-giant{
	width: 256px; height: 307px;
	position: absolute;
	top: -27px;
    left: -7px;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-giant{
	-webkit-animation: grumpy-giant 5s steps(117) forwards;
	-moz-animation: grumpy-giant 5s steps(117) forwards;
	-ms-animation: grumpy-giant 5s steps(117) forwards;
	animation: grumpy-giant 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes grumpy-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}
@-moz-keyframes grumpy-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}
@-ms-keyframes grumpy-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}
@keyframes grumpy-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}

#myCharacterPlay #catBody.grumpy-esmall-color1 {
	background: url('../images/screen1/cat/tab4/grumpy/esmall/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-esmall-color1 {
	background: url('../images/screen1/cat/tab4/grumpy/esmall/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-esmall-color2 {
	background: url('../images/screen1/cat/tab4/grumpy/esmall/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-esmall-color2 {
	background: url('../images/screen1/cat/tab4/grumpy/esmall/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-esmall-color3 {
	background: url('../images/screen1/cat/tab4/grumpy/esmall/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-esmall-color3 {
	background: url('../images/screen1/cat/tab4/grumpy/esmall/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-esmall-color4 {
	background: url('../images/screen1/cat/tab4/grumpy/esmall/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-esmall-color4 {
	background: url('../images/screen1/cat/tab4/grumpy/esmall/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-esmall-color5 {
	background: url('../images/screen1/cat/tab4/grumpy/esmall/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-esmall-color5 {
	background: url('../images/screen1/cat/tab4/grumpy/esmall/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-esmall-color6 {
	background: url('../images/screen1/cat/tab4/grumpy/esmall/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-esmall-color6 {
	background: url('../images/screen1/cat/tab4/grumpy/esmall/color6-sprite.png') no-repeat;
	background-position: 0 0;
}

#myCharacterPlay #catBody.grumpy-small-color1 {
	background: url('../images/screen1/cat/tab4/grumpy/small/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-small-color1 {
	background: url('../images/screen1/cat/tab4/grumpy/small/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-small-color2 {
	background: url('../images/screen1/cat/tab4/grumpy/small/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-small-color2 {
	background: url('../images/screen1/cat/tab4/grumpy/small/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-small-color3 {
	background: url('../images/screen1/cat/tab4/grumpy/small/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-small-color3 {
	background: url('../images/screen1/cat/tab4/grumpy/small/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-small-color4 {
	background: url('../images/screen1/cat/tab4/grumpy/small/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-small-color4 {
	background: url('../images/screen1/cat/tab4/grumpy/small/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-small-color5 {
	background: url('../images/screen1/cat/tab4/grumpy/small/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-small-color5 {
	background: url('../images/screen1/cat/tab4/grumpy/small/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-small-color6 {
	background: url('../images/screen1/cat/tab4/grumpy/small/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-small-color6 {
	background: url('../images/screen1/cat/tab4/grumpy/small/color6-sprite.png') no-repeat;
	background-position: 0 0;
}


#myCharacterPlay #catBody.grumpy-medium-color1 {
	background: url('../images/screen1/cat/tab4/grumpy/medium/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-medium-color1 {
	background: url('../images/screen1/cat/tab4/grumpy/medium/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-medium-color2 {
	background: url('../images/screen1/cat/tab4/grumpy/medium/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-medium-color2 {
	background: url('../images/screen1/cat/tab4/grumpy/medium/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-medium-color3 {
	background: url('../images/screen1/cat/tab4/grumpy/medium/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-medium-color3 {
	background: url('../images/screen1/cat/tab4/grumpy/medium/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-medium-color4 {
	background: url('../images/screen1/cat/tab4/grumpy/medium/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-medium-color4 {
	background: url('../images/screen1/cat/tab4/grumpy/medium/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-medium-color5 {
	background: url('../images/screen1/cat/tab4/grumpy/medium/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-medium-color5 {
	background: url('../images/screen1/cat/tab4/grumpy/medium/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-medium-color6 {
	background: url('../images/screen1/cat/tab4/grumpy/medium/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-medium-color6 {
	background: url('../images/screen1/cat/tab4/grumpy/medium/color6-sprite.png') no-repeat;
	background-position: 0 0;
}


#myCharacterPlay #catBody.grumpy-large-color1 {
	background: url('../images/screen1/cat/tab4/grumpy/large/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-large-color1 {
	background: url('../images/screen1/cat/tab4/grumpy/large/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-large-color2 {
	background: url('../images/screen1/cat/tab4/grumpy/large/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-large-color2 {
	background: url('../images/screen1/cat/tab4/grumpy/large/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-large-color3 {
	background: url('../images/screen1/cat/tab4/grumpy/large/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-large-color3 {
	background: url('../images/screen1/cat/tab4/grumpy/large/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-large-color4 {
	background: url('../images/screen1/cat/tab4/grumpy/large/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-large-color4 {
	background: url('../images/screen1/cat/tab4/grumpy/large/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-large-color5 {
	background: url('../images/screen1/cat/tab4/grumpy/large/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-large-color5 {
	background: url('../images/screen1/cat/tab4/grumpy/large/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-large-color6 {
	background: url('../images/screen1/cat/tab4/grumpy/large/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-large-color6 {
	background: url('../images/screen1/cat/tab4/grumpy/large/color6-sprite.png') no-repeat;
	background-position: 0 0;
}


#myCharacterPlay #catBody.grumpy-giant-color1 {
	background: url('../images/screen1/cat/tab4/grumpy/giant/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-giant-color1 {
	background: url('../images/screen1/cat/tab4/grumpy/giant/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-giant-color2 {
	background: url('../images/screen1/cat/tab4/grumpy/giant/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-giant-color2 {
	background: url('../images/screen1/cat/tab4/grumpy/giant/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-giant-color3 {
	background: url('../images/screen1/cat/tab4/grumpy/giant/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-giant-color3 {
	background: url('../images/screen1/cat/tab4/grumpy/giant/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-giant-color4 {
	background: url('../images/screen1/cat/tab4/grumpy/giant/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-giant-color4 {
	background: url('../images/screen1/cat/tab4/grumpy/giant/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-giant-color5 {
	background: url('../images/screen1/cat/tab4/grumpy/giant/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-giant-color5 {
	background: url('../images/screen1/cat/tab4/grumpy/giant/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.grumpy-giant-color6 {
	background: url('../images/screen1/cat/tab4/grumpy/giant/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.grumpy-giant-color6 {
	background: url('../images/screen1/cat/tab4/grumpy/giant/color6-sprite.png') no-repeat;
	background-position: 0 0;
}


#myCharacterPlay #catBody.sleepy-esmall{
	width: 122px; height: 146px;
	position: absolute;
	top: 109px;
    left: 67px;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-esmall{
	-webkit-animation: sleepy-esmall 5s steps(117) forwards;
	-moz-animation: sleepy-esmall 5s steps(117) forwards;
	-ms-animation: sleepy-esmall 5s steps(117) forwards;
	animation: sleepy-esmall 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes sleepy-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@-moz-keyframes sleepy-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@-ms-keyframes sleepy-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}
@keyframes sleepy-esmall {
	from{background-position: 0 0;}
	to{background-position: -14274px 0;}
}

#myCharacterPlay #catBody.sleepy-small{
	width: 145px; height: 174px;
	position: absolute;
	top: 86px;
    left: 50px;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-small{
	-webkit-animation: sleepy-small 5s steps(117) forwards;
	-moz-animation: sleepy-small 5s steps(117) forwards;
	-ms-animation: sleepy-small 5s steps(117) forwards;
	animation: sleepy-small 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes sleepy-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@-moz-keyframes sleepy-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@-ms-keyframes sleepy-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}
@keyframes sleepy-small {
	from{background-position: 0 0;}
	to{background-position: -16965px 0;}
}

#myCharacterPlay #catBody.sleepy-medium{
	width: 182px; height: 219px;
	position: absolute;
	top: 45px;
    left: 29px;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-medium{
	-webkit-animation: sleepy-medium 5s steps(117) forwards;
	-moz-animation: sleepy-medium 5s steps(117) forwards;
	-ms-animation: sleepy-medium 5s steps(117) forwards;
	animation: sleepy-medium 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes sleepy-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@-moz-keyframes sleepy-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@-ms-keyframes sleepy-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}
@keyframes sleepy-medium {
	from{background-position: 0px 0px;}
	to{background-position: -21294px 0px;}
}

#myCharacterPlay #catBody.sleepy-large{
	width: 219px; height: 263px;
	position: absolute;
	top: 5px;
    left: 11px;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-large{
	-webkit-animation: sleepy-large 5s steps(117) forwards;
	-moz-animation: sleepy-large 5s steps(117) forwards;
	-ms-animation: sleepy-large 5s steps(117) forwards;
	animation: sleepy-large 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes sleepy-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}
@-moz-keyframes sleepy-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}
@-ms-keyframes sleepy-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}
@keyframes sleepy-large {
	from{background-position: 0 0;}
	to{background-position: -25623px 0;}
}

#myCharacterPlay #catBody.sleepy-giant{
	width: 256px; height: 307px;
	position: absolute;
	top: -27px;
    left: -7px;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-giant{
	-webkit-animation: sleepy-giant 5s steps(117) forwards;
	-moz-animation: sleepy-giant 5s steps(117) forwards;
	-ms-animation: sleepy-giant 5s steps(117) forwards;
	animation: sleepy-giant 5s steps(117) forwards;
	z-index: 3;
}
@-webkit-keyframes sleepy-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}
@-moz-keyframes sleepy-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}
@-ms-keyframes sleepy-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}
@keyframes sleepy-giant {
	from{background-position: 0 0;}
	to{background-position: -29952px 0;}
}

#myCharacterPlay #catBody.sleepy-esmall-color1 {
	background: url('../images/screen1/cat/tab4/sleepy/esmall/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-esmall-color1 {
	background: url('../images/screen1/cat/tab4/sleepy/esmall/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-esmall-color2 {
	background: url('../images/screen1/cat/tab4/sleepy/esmall/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-esmall-color2 {
	background: url('../images/screen1/cat/tab4/sleepy/esmall/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-esmall-color3 {
	background: url('../images/screen1/cat/tab4/sleepy/esmall/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-esmall-color3 {
	background: url('../images/screen1/cat/tab4/sleepy/esmall/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-esmall-color4 {
	background: url('../images/screen1/cat/tab4/sleepy/esmall/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-esmall-color4 {
	background: url('../images/screen1/cat/tab4/sleepy/esmall/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-esmall-color5 {
	background: url('../images/screen1/cat/tab4/sleepy/esmall/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-esmall-color5 {
	background: url('../images/screen1/cat/tab4/sleepy/esmall/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-esmall-color6 {
	background: url('../images/screen1/cat/tab4/sleepy/esmall/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-esmall-color6 {
	background: url('../images/screen1/cat/tab4/sleepy/esmall/color6-sprite.png') no-repeat;
	background-position: 0 0;
}

#myCharacterPlay #catBody.sleepy-small-color1 {
	background: url('../images/screen1/cat/tab4/sleepy/small/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-small-color1 {
	background: url('../images/screen1/cat/tab4/sleepy/small/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-small-color2 {
	background: url('../images/screen1/cat/tab4/sleepy/small/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-small-color2 {
	background: url('../images/screen1/cat/tab4/sleepy/small/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-small-color3 {
	background: url('../images/screen1/cat/tab4/sleepy/small/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-small-color3 {
	background: url('../images/screen1/cat/tab4/sleepy/small/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-small-color4 {
	background: url('../images/screen1/cat/tab4/sleepy/small/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-small-color4 {
	background: url('../images/screen1/cat/tab4/sleepy/small/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-small-color5 {
	background: url('../images/screen1/cat/tab4/sleepy/small/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-small-color5 {
	background: url('../images/screen1/cat/tab4/sleepy/small/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-small-color6 {
	background: url('../images/screen1/cat/tab4/sleepy/small/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-small-color6 {
	background: url('../images/screen1/cat/tab4/sleepy/small/color6-sprite.png') no-repeat;
	background-position: 0 0;
}


#myCharacterPlay #catBody.sleepy-medium-color1 {
	background: url('../images/screen1/cat/tab4/sleepy/medium/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-medium-color1 {
	background: url('../images/screen1/cat/tab4/sleepy/medium/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-medium-color2 {
	background: url('../images/screen1/cat/tab4/sleepy/medium/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-medium-color2 {
	background: url('../images/screen1/cat/tab4/sleepy/medium/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-medium-color3 {
	background: url('../images/screen1/cat/tab4/sleepy/medium/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-medium-color3 {
	background: url('../images/screen1/cat/tab4/sleepy/medium/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-medium-color4 {
	background: url('../images/screen1/cat/tab4/sleepy/medium/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-medium-color4 {
	background: url('../images/screen1/cat/tab4/sleepy/medium/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-medium-color5 {
	background: url('../images/screen1/cat/tab4/sleepy/medium/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-medium-color5 {
	background: url('../images/screen1/cat/tab4/sleepy/medium/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-medium-color6 {
	background: url('../images/screen1/cat/tab4/sleepy/medium/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-medium-color6 {
	background: url('../images/screen1/cat/tab4/sleepy/medium/color6-sprite.png') no-repeat;
	background-position: 0 0;
}


#myCharacterPlay #catBody.sleepy-large-color1 {
	background: url('../images/screen1/cat/tab4/sleepy/large/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-large-color1 {
	background: url('../images/screen1/cat/tab4/sleepy/large/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-large-color2 {
	background: url('../images/screen1/cat/tab4/sleepy/large/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-large-color2 {
	background: url('../images/screen1/cat/tab4/sleepy/large/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-large-color3 {
	background: url('../images/screen1/cat/tab4/sleepy/large/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-large-color3 {
	background: url('../images/screen1/cat/tab4/sleepy/large/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-large-color4 {
	background: url('../images/screen1/cat/tab4/sleepy/large/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-large-color4 {
	background: url('../images/screen1/cat/tab4/sleepy/large/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-large-color5 {
	background: url('../images/screen1/cat/tab4/sleepy/large/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-large-color5 {
	background: url('../images/screen1/cat/tab4/sleepy/large/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-large-color6 {
	background: url('../images/screen1/cat/tab4/sleepy/large/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-large-color6 {
	background: url('../images/screen1/cat/tab4/sleepy/large/color6-sprite.png') no-repeat;
	background-position: 0 0;
}


#myCharacterPlay #catBody.sleepy-giant-color1 {
	background: url('../images/screen1/cat/tab4/sleepy/giant/color1.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-giant-color1 {
	background: url('../images/screen1/cat/tab4/sleepy/giant/color1-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-giant-color2 {
	background: url('../images/screen1/cat/tab4/sleepy/giant/color2.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-giant-color2 {
	background: url('../images/screen1/cat/tab4/sleepy/giant/color2-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-giant-color3 {
	background: url('../images/screen1/cat/tab4/sleepy/giant/color3.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-giant-color3 {
	background: url('../images/screen1/cat/tab4/sleepy/giant/color3-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-giant-color4 {
	background: url('../images/screen1/cat/tab4/sleepy/giant/color4.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-giant-color4 {
	background: url('../images/screen1/cat/tab4/sleepy/giant/color4-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-giant-color5 {
	background: url('../images/screen1/cat/tab4/sleepy/giant/color5.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-giant-color5 {
	background: url('../images/screen1/cat/tab4/sleepy/giant/color5-sprite.png') no-repeat;
	background-position: 0 0;
}
#myCharacterPlay #catBody.sleepy-giant-color6 {
	background: url('../images/screen1/cat/tab4/sleepy/giant/color6.png') no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#myCharacterPlay #cat.bodyActive #catBody.sleepy-giant-color6 {
	background: url('../images/screen1/cat/tab4/sleepy/giant/color6-sprite.png') no-repeat;
	background-position: 0 0;
}
/* end cat sprite animation */

/* Start cat animation */

#myCharacterPlay #catBody{
	width: 100%;
	height: 100%;
}
.catTiming *{
	transition: 0.7s all cubic-bezier(0.67, 0.01, 0.26, 0.99);
}

#myCharacterPlay #cat.print .happy-color1{
	background: url('../images/screen1/cat/print/happy-color1.png') no-repeat;
}
#myCharacterPlay #cat.print .happy-color2{
	background: url('../images/screen1/cat/print/happy-color2.png') no-repeat;
}
#myCharacterPlay #cat.print .happy-color3{
	background: url('../images/screen1/cat/print/happy-color3.png') no-repeat;
}
#myCharacterPlay #cat.print .happy-color4{
	background: url('../images/screen1/cat/print/happy-color4.png') no-repeat;
}
#myCharacterPlay #cat.print .happy-color5{
	background: url('../images/screen1/cat/print/happy-color5.png') no-repeat;
}
#myCharacterPlay #cat.print .happy-color6{
	background: url('../images/screen1/cat/print/happy-color6.png') no-repeat;
}

#myCharacterPlay #cat.print .excited-color1{
	background: url('../images/screen1/cat/print/excited-color1.png') no-repeat;
}
#myCharacterPlay #cat.print .excited-color2{
	background: url('../images/screen1/cat/print/excited-color2.png') no-repeat;
}
#myCharacterPlay #cat.print .excited-color3{
	background: url('../images/screen1/cat/print/excited-color3.png') no-repeat;
}
#myCharacterPlay #cat.print .excited-color4{
	background: url('../images/screen1/cat/print/excited-color4.png') no-repeat;
}
#myCharacterPlay #cat.print .excited-color5{
	background: url('../images/screen1/cat/print/excited-color5.png') no-repeat;
}
#myCharacterPlay #cat.print .excited-color6{
	background: url('../images/screen1/cat/print/excited-color6.png') no-repeat;
}

#myCharacterPlay #cat.print .grumpy-color1{
	background: url('../images/screen1/cat/print/grumpy-color1.png') no-repeat;
}
#myCharacterPlay #cat.print .grumpy-color2{
	background: url('../images/screen1/cat/print/grumpy-color2.png') no-repeat;
}
#myCharacterPlay #cat.print .grumpy-color3{
	background: url('../images/screen1/cat/print/grumpy-color3.png') no-repeat;
}
#myCharacterPlay #cat.print .grumpy-color4{
	background: url('../images/screen1/cat/print/grumpy-color4.png') no-repeat;
}
#myCharacterPlay #cat.print .grumpy-color5{
	background: url('../images/screen1/cat/print/grumpy-color5.png') no-repeat;
}
#myCharacterPlay #cat.print .grumpy-color6{
	background: url('../images/screen1/cat/print/grumpy-color6.png') no-repeat;
}

#myCharacterPlay #cat.print .sleepy-color1{
	background: url('../images/screen1/cat/print/sleepy-color1.png') no-repeat;
}
#myCharacterPlay #cat.print .sleepy-color2{
	background: url('../images/screen1/cat/print/sleepy-color2.png') no-repeat;
}
#myCharacterPlay #cat.print .sleepy-color3{
	background: url('../images/screen1/cat/print/sleepy-color3.png') no-repeat;
}
#myCharacterPlay #cat.print .sleepy-color4{
	background: url('../images/screen1/cat/print/sleepy-color4.png') no-repeat;
}
#myCharacterPlay #cat.print .sleepy-color5{
	background: url('../images/screen1/cat/print/sleepy-color5.png') no-repeat;
}
#myCharacterPlay #cat.print .sleepy-color6{
	background: url('../images/screen1/cat/print/sleepy-color6.png') no-repeat;
}

#myCharacterPlay #catBody.happy-nocolor-esmall{
	background: url('../images/screen1/cat/tab1/happy.svg') no-repeat;
	background-size: 122px 146px;
}
#myCharacterPlay #catBody.happy-nocolor-small{
	background: url('../images/screen1/cat/tab1/happy.svg') no-repeat;
	background-size: 145px 174px;
}
#myCharacterPlay #catBody.happy-nocolor-medium{
	background: url('../images/screen1/cat/tab1/happy.svg') no-repeat;
	background-size: 182px 219px;
}
#myCharacterPlay #catBody.happy-nocolor-large{
	background: url('../images/screen1/cat/tab1/happy.svg') no-repeat;
	background-size: 219px 263px;	
}
#myCharacterPlay #catBody.happy-nocolor-giant{
	background: url('../images/screen1/cat/tab1/happy.svg') no-repeat;
	background-size: 256px 307px;
}

#myCharacterPlay #catBody.excited-nocolor-esmall{
	background: url('../images/screen1/cat/tab1/excited.svg') no-repeat;
	background-size: 122px 158px;
}
#myCharacterPlay #catBody.excited-nocolor-small{
	background: url('../images/screen1/cat/tab1/excited.svg') no-repeat;
	background-size: 145px 174px;
}
#myCharacterPlay #catBody.excited-nocolor-medium{
	background: url('../images/screen1/cat/tab1/excited.svg') no-repeat;
	background-size: 182px 219px;
}
#myCharacterPlay #catBody.excited-nocolor-large{
	background: url('../images/screen1/cat/tab1/excited.svg') no-repeat;
	background-size: 219px 263px;	
}
#myCharacterPlay #catBody.excited-nocolor-giant{
	background: url('../images/screen1/cat/tab1/excited.svg') no-repeat;
	background-size: 256px 307px;
}

#myCharacterPlay #catBody.grumpy-nocolor-esmall{
	background: url('../images/screen1/cat/tab1/grumpy.svg') no-repeat;
	background-size: 122px 146px;
}
#myCharacterPlay #catBody.grumpy-nocolor-small{
	background: url('../images/screen1/cat/tab1/grumpy.svg') no-repeat;
	background-size: 145px 174px;
}
#myCharacterPlay #catBody.grumpy-nocolor-medium{
	background: url('../images/screen1/cat/tab1/grumpy.svg') no-repeat;
	background-size: 182px 219px;
}
#myCharacterPlay #catBody.grumpy-nocolor-large{
	background: url('../images/screen1/cat/tab1/grumpy.svg') no-repeat;
	background-size: 219px 263px;	
}
#myCharacterPlay #catBody.grumpy-nocolor-giant{
	background: url('../images/screen1/cat/tab1/grumpy.svg') no-repeat;
	background-size: 256px 307px;
}

#myCharacterPlay #catBody.sleepy-nocolor-esmall{
	background: url('../images/screen1/cat/tab1/sleepy.svg') no-repeat;
	background-size: 122px 146px;
}
#myCharacterPlay #catBody.sleepy-nocolor-small{
	background: url('../images/screen1/cat/tab1/sleepy.svg') no-repeat;
	background-size: 145px 174px;
}
#myCharacterPlay #catBody.sleepy-nocolor-medium{
	background: url('../images/screen1/cat/tab1/sleepy.svg') no-repeat;
	background-size: 182px 219px;
}
#myCharacterPlay #catBody.sleepy-nocolor-large{
	background: url('../images/screen1/cat/tab1/sleepy.svg') no-repeat;
	background-size: 219px 263px;	
}
#myCharacterPlay #catBody.sleepy-nocolor-giant{
	background: url('../images/screen1/cat/tab1/sleepy.svg') no-repeat;
	background-size: 256px 307px;
}




#myCharacterPlay #collarCat{
	position: absolute;
    width: 100%;
	height: 100%;
	width: 142px;
    height: 61px;
    top: 94px;
    left: 45px;
	z-index: 4;
}
#collarCat .text {
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 2px;
    top: 45%;
}

#myCharacterPlay #collarCat.collar-color1{
	background: url('../images/screen1/cat/tab8/collar-color1.svg') no-repeat;
	background-size: 100% auto;
}
#myCharacterPlay #collarCat.collar-color2{
	background: url('../images/screen1/cat/tab8/collar-color2.svg') no-repeat;
	background-size: 100% auto;
}
#myCharacterPlay #collarCat.collar-color3{
	background: url('../images/screen1/cat/tab8/collar-color3.svg') no-repeat;
	background-size: 100% auto;
}
#myCharacterPlay #collarCat.collar-color4{
	background: url('../images/screen1/cat/tab8/collar-color4.svg') no-repeat;
	background-size: 100% auto;
}
#myCharacterPlay #collarCat.collar-color5{
	background: url('../images/screen1/cat/tab8/collar-color5.svg') no-repeat;
	background-size: 100% auto;
}
#myCharacterPlay #collarCat.collar-color6{
	background: url('../images/screen1/cat/tab8/collar-color6.svg') no-repeat;
	background-size: 100% auto;
}

#myCharacterPlay #cat #catBody.happy-esmall #collarCat {
	top: 33px;
    left: -15px;
    -webkit-transform: scale(0.62);
    -moz-transform: scale(0.62);
    -ms-transform: scale(0.62);
    -o-transform: scale(0.62);
    transform: scale(0.62);
}
#myCharacterPlay #cat #catBody.excited-esmall #collarCat {
	top: 57px;
    left: 5px;
    width: 102px;
    -webkit-transform: scale(0.89);
    -moz-transform: scale(0.89);
    -ms-transform: scale(0.89);
    -o-transform: scale(0.89);
    transform: scale(0.89);
}
#myCharacterPlay #cat #catBody.grumpy-esmall #collarCat, #myCharacterPlay #cat #catBody.sleepy-esmall #collarCat{
	top: 42px;
    left: 1px;
    width: 110px;
    -webkit-transform: scale(0.83);
    -moz-transform: scale(0.83);
    -ms-transform: scale(0.83);
    -o-transform: scale(0.83);
    transform: scale(0.83);
}

#myCharacterPlay #cat #catBody.happy-small #collarCat{
	top: 45px;
    left: -5px;
    -webkit-transform: scale(0.72);
    -moz-transform: scale(0.72);
    -ms-transform: scale(0.72);
    -o-transform: scale(0.72);
    transform: scale(0.72);
}
#myCharacterPlay #cat #catBody.excited-small #collarCat{
	top: 67px;
    left: 16px;
    width: 102px;
	-webkit-transform: scale(0.99);
	-moz-transform: scale(0.99);
	-ms-transform: scale(0.99);
	-o-transform: scale(0.99);
	transform: scale(0.99);
}
#myCharacterPlay #cat #catBody.grumpy-small #collarCat, #myCharacterPlay #cat #catBody.sleepy-small #collarCat{
	top: 55px;
    left: 12px;
    width: 110px;
    -webkit-transform: scale(0.96);
    -moz-transform: scale(0.96);
    -ms-transform: scale(0.96);
    -o-transform: scale(0.96);
    transform: scale(0.96);
}

#myCharacterPlay #cat #catBody.happy-medium #collarCat{
	top: 64px;
    left: 13px;
    -webkit-transform: scale(0.91);
    -moz-transform: scale(0.91);
    -ms-transform: scale(0.91);
    -o-transform: scale(0.91);
    transform: scale(0.91);
}
#myCharacterPlay #cat #catBody.excited-medium #collarCat{
	top: 81px;
    left: 13px;
    -webkit-transform: scale(0.89);
    -moz-transform: scale(0.89);
    -ms-transform: scale(0.89);
    -o-transform: scale(0.89);
    transform: scale(0.89);
}
#myCharacterPlay #cat #catBody.grumpy-medium #collarCat, #myCharacterPlay #cat #catBody.sleepy-medium #collarCat{
	top: 68px;
    left: 12px;
    -webkit-transform: scale(0.93);
    -moz-transform: scale(0.93);
    -ms-transform: scale(0.93);
    -o-transform: scale(0.93);
    transform: scale(0.93);
}

#myCharacterPlay #cat #catBody.happy-large #collarCat{
	top: 82px;
    left: 29px;
	-webkit-transform: scale(1.10);
    -moz-transform: scale(1.10);
    -ms-transform: scale(1.10);
    -o-transform: scale(1.10);
    transform: scale(1.10);
}
#myCharacterPlay #cat #catBody.excited-large #collarCat{
	top: 101px;
    left: 30px;
	-webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06);
    transform: scale(1.06);
}
#myCharacterPlay #cat #catBody.grumpy-large #collarCat, #myCharacterPlay #cat #catBody.sleepy-large #collarCat{
	top: 86px;
    left: 29px;
	-webkit-transform: scale(1.12);
    -moz-transform: scale(1.12);
    -ms-transform: scale(1.12);
    -o-transform: scale(1.12);
    transform: scale(1.12);
}

#myCharacterPlay #cat #catBody.happy-giant #collarCat{
	top: 101px;
    left: 46px;
	-webkit-transform: scale(1.30);
    -moz-transform: scale(1.30);
    -ms-transform: scale(1.30);
    -o-transform: scale(1.30);
    transform: scale(1.30);
}
#myCharacterPlay #cat #catBody.excited-giant #collarCat{
	top: 120px;
    left: 47px;
	-webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
}
#myCharacterPlay #cat #catBody.grumpy-giant #collarCat, #myCharacterPlay #cat #catBody.sleepy-giant #collarCat{
	top: 118px;
    left: 46px;
	-webkit-transform: scale(1.30);
    -moz-transform: scale(1.30);
    -ms-transform: scale(1.30);
    -o-transform: scale(1.30);
    transform: scale(1.30);
}




#myCharacterPlay #collarBatchAni{
	position: absolute;
	top: -106px;
	left: -345px;
	width: 1350px; height: 693px;
	z-index: 99;
	transform-origin: 0 0;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	display: none;
}

/* #myCharacterPlay #collarBatchAni.cat-color1{
	background: #b3b3b3;
} */

#myCharacterPlay #collarBatchAni .collar{
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 100%;
}
#myCharacterPlay #collarBatchAni.collar-color1 .collar{	
	background: url('../images/screen1/cat/ani/collar-ani-color1.svg') no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
}
#myCharacterPlay #collarBatchAni.collar-color2 .collar{	
	background: url('../images/screen1/cat/ani/collar-ani-color2.svg') no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
}
#myCharacterPlay #collarBatchAni.collar-color3 .collar{	
	background: url('../images/screen1/cat/ani/collar-ani-color3.svg') no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
}
#myCharacterPlay #collarBatchAni.collar-color4 .collar{	
	background: url('../images/screen1/cat/ani/collar-ani-color4.svg') no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
}
#myCharacterPlay #collarBatchAni.collar-color5 .collar{	
	background: url('../images/screen1/cat/ani/collar-ani-color5.svg') no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
}
#myCharacterPlay #collarBatchAni.collar-color6 .collar{	
	background: url('../images/screen1/cat/ani/collar-ani-color6.svg') no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
}


#myCharacterPlay #collarBatchAni .text{
    position: absolute;
    top: 264px;
    left: 602px;
    width: 142px;
    height: 27px;
    line-height: 27px;
    z-index: 10;
    text-align: center;
    font-family: 'DIN17EFRegular';
}








#myCharacterPlay #collarBatchAni.active{
	/*transition: 2.5s all cubic-bezier(0.67, 0.01, 0.26, 0.99);*/
	/*animation: collarBatchAni 0.7s forwards;*/
	display: block;
}

@keyframes collarBatchAni {
	to{ transform: scale(0.6); }
}





#myCharacterPlay #curtains{
	position: absolute;
	top: 0;
	left: 0;
	width: 660px; height: 308px;
}
#myCharacterPlay #curtains.active{
	background: url('../images/screen1/curtains/curtains.png') no-repeat;
	-webkit-animation: curtains 3s steps(36) forwards;
	-moz-animation: curtains 3s steps(36) forwards;
	-ms-animation: curtains 3s steps(36) forwards;
	animation: curtains 3s steps(36) forwards;
    z-index: 10;
}
@-webkit-keyframes curtains {
	from{background-position: 0 0;}
	to{background-position: 0 -11088px;}
}
@-moz-keyframes curtains {
	from{background-position: 0 0;}
	to{background-position: 0 -11088px;}
}
@-ms-keyframes curtains {
	from{background-position: 0 0;}
	to{background-position: 0 -11088px;}
}
@keyframes curtains {
	from{background-position: 0 0;}
	to{background-position: 0 -11088px;}
}

#myCharacterPlay #banner{
	position: absolute;
	top: 194px;
    left: -35px;
	width: 720px; height: 159px;
    z-index: 10;
    background: url('../images/screen1/banner/banner.png') no-repeat;
    display: none;
}
#myCharacterPlay #banner.active{
	-webkit-animation: banner 2s steps(24) forwards;
	-moz-animation: banner 2s steps(24) forwards;
	-ms-animation: banner 2s steps(24) forwards;
	animation: banner 2s steps(24) forwards;
	display: block;
}
@-webkit-keyframes banner {
	from{background-position: 0 0;}
	to{background-position: 0 -3816px;}
}
@-moz-keyframes banner {
	from{background-position: 0 0;}
	to{background-position: 0 -3816px;}
}
@-ms-keyframes banner {
	from{background-position: 0 0;}
	to{background-position: 0 -3816px;}
}
@keyframes banner {
	from{background-position: 0 0;}
	to{background-position: 0 -3816px;}
}

#myCharacterPlay #bannerText{
	position: absolute;
    top: 247px;
    left: 32px;
    width: 573px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    z-index: 11;
    overflow: hidden;
    display: none;
}
#myCharacterPlay #bannerText.active{
	-webkit-animation: bannerText 2s forwards;
	-moz-animation: bannerText 2s forwards;
	-ms-animation: bannerText 2s forwards;
	animation: bannerText 2s forwards;
	display: block;
}
@-webkit-keyframes bannerText {
	from{ width: 0px;left: 319px; }
	to{ width: 573px;left: 32px; }
}
@-moz-keyframes bannerText {
	from{ width: 0px;left: 319px; }
	to{ width: 573px;left: 32px; }
}
@-ms-keyframes bannerText {
	from{ width: 0px;left: 319px; }
	to{ width: 573px;left: 32px; }
}
@keyframes bannerText {
	from{ width: 0px;left: 319px; }
	to{ width: 573px;left: 32px; }
}

#myCharacterPlay #bannerText.active .text{
	position: absolute;
	top: -3px;
    right: 0;
    left: 0;
    width: 593px;
    font-size: 28px;
	font-family: DIN17EFRegular;
	-webkit-animation: bannerTextandText 2s forwards;
	-moz-animation: bannerTextandText 2s forwards;
	-ms-animation: bannerTextandText 2s forwards;
	animation: bannerTextandText 2s forwards;
	display: block;
}
@-webkit-keyframes bannerTextandText {
	from{ left: -288px; }
	to{ left: 0px; }
}
@-moz-keyframes bannerTextandText {
	from{ left: -288px; }
	to{ left: 0px; }
}
@-ms-keyframes bannerTextandText {
	from{ left: -288px; }
	to{ left: 0px; }
}
@keyframes bannerTextandText {
	from{ left: -288px; }
	to{ left: 0px; }
}

/* End cat animation */

.footer {
    width: 100%;
	min-width: 816px;
    height: 50px;
    position: absolute;
    top: 620px;
	left: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.footer .fter{
	width:816px;
	position:relative;
	margin:auto;	
}

.footer .copyright {
    position: relative;
    text-align: center;
    font-size: 12px;
    margin-top: 9px;
	font-family: arial;
}

.footer .logo{
    width: 108px;
    height:48px;
    background: url('../images/support_files/tlf_logo.png') no-repeat;
    position: absolute;
    top:0px;
	left:0;
	cursor:pointer;
}

.footer .link{
    width: 88px;
    height:31px;
    background: url('../images/support_files/link.png') no-repeat;
    position: absolute;
    top:0px;
	right:0;
	cursor:pointer;
}
.footer .copyright .gameLink{
    width: 100px;
    height: 14px;
    position: relative;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
	text-decoration: underline;
	cursor: pointer;
	color: rgb(0,0,250);
}
.footer .link .gameLink{
    width: 88px;
    height:31px;
	position:absolute;
	cursor: pointer;
}

.btnRemoveMe{
	position: absolute;
    background: url(../images/nextbtn.png) no-repeat;
    background-position: 0 0;
    width: 107px;
    height: 64px;
    cursor: pointer;
    bottom: -39px;
    left: 50%;
    -webkit-transform: translate(-44%, 0);
    -moz-transform: translate(-44%, 0);
    -ms-transform: translate(-44%, 0);
    -o-transform: translate(-44%, 0);
    transform: translate(-44%, 0);
}
.btnRemoveMe:hover{
	background-position: -107px 0;
}
.btnRemoveMe.highlighter{
	background-position: -107px 0;
	width: 102px;
	height: 60px;
}
#loadingScreen .btnRemoveMe .text{
	position: absolute;
    top: 15px;
    left: 15px;
    width: 71px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-family: "DIN17EFRegular";
    font-size: 19px;
    font-weight: bold;
}