html, body {
	margin: 0 0 0 0;
	border: 0 0 0 0;
	padding: 0 0 0 0;
	font-family: Comic_Sans_MS, arial, verdana, helvetica, sans-serif, tahoma;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	 -khtml-user-select: none; 
	   -moz-user-select: none; 
		-ms-user-select: none; 
			user-select: none; 
}



/* @media all and (max-width: 1024px) { */
    body.lock{
        /* pointer-events: none; */
    }
  /* } */


.container{
	width: 760px;
    height: 537px;
    background: #35335f;
    position: relative;
    margin: auto;
    border: 1px solid #c3bcbc;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    top: 10px;
}
.loading{
    width:100%;
    height:100%;
    position: absolute;
    top:0px;
    left:0px;
    z-index: 1000;
    background-color: rgba(0, 0, 0,0.8);
   
}
.headerTag{
	width: 760px;
	height: 70px;	
    background:linear-gradient(#990a0a, #ff1111);
	position: absolute;
    top: 0px;
    left: 0px;    
}
.logo{
    width: 278px;
	height: 88px;	
    background:url(../images/logo.png);
    position: absolute;
    transform: scale(0.5);
    top: -17px;
    left: -60px;
}
.logo:after {
    content: "deep brain stimulation";
    position: absolute;
    font-size: 32px;
    white-space: nowrap;
    color: white;
    top: 89px;
    text-shadow: 1px 1px 6px #000;
}
.footerTag{
	width: 760px;
	height: 45px;	
    background:linear-gradient(#9d9d9d, #f3f3f3);
	position: absolute;
    bottom: 0px;
    left: 0px;    
}
.mainScene{
	width: 760px;
	height: 422px;	
    background:#000000;
	position: absolute;
    top: 70px;
    left: 0px;
}


.startGame{
    width: 165px;
    height: 83px;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0;
    right: 0px;
    background: url(../images/startBtn0001.png);
    cursor: pointer;
    border-bottom: 1px solid #436e9a;
    background-position: -1px ;
    margin: auto;
    transform: scale(.5);
}
.menuoption{
    cursor: pointer;
}
.menuoption1{
    width: 79px;
    height: 45px;
    position: absolute;
    left: 220px;
    top: 10px;
    color: white;
    font-size: 14px;
    font-family: arial;
    text-align: center;
    line-height: 45px;
    text-decoration: underline;
}
.menuoption2{
    width: 92px;
    height: 45px;
    position: absolute;
    left: 306px;
    top:10px;
    color: white;
    font-size:14px;
    font-family: arial;
    text-align: center;
    line-height: 45px;
    text-decoration: underline;
}
.menuoption3{
    width: 86px;
    height: 45px;
    position: absolute;
    left: 425px;
    top:10px;
    color:white;
    font-size:14px;
    font-family: arial;
    text-align: center;
    line-height: 45px;
    text-decoration: underline;
}
.menuoption4{
    width: 110px;
    height: 45px;
    position: absolute;
    left: 546px;
    top:10px;
    color: white;
    font-size:14px;
    font-family: arial;
    text-align: center;
    line-height: 45px;
    text-decoration: underline;
}
.menuoption:hover{
    background-color: #d60e0e;
}




.screen{
	position: absolute;
    top: 10px;
    left: 10px;
    width: 740px;
    height: 402px;
    background: linear-gradient(#999999, #5d5d5d);
    overflow: hidden;
}
.imgGroup{
	width: 386px;
    height: 402px;
    position: absolute;
    left: -80px;
    top: 0px;
	animation:imgGroup 0.25s 0.1s linear forwards;
}
@keyframes imgGroup{
	0%{left: -80px;}
	100%{left: 0px;}
}
.imgrow{
    width: 366px;
    height: 78px;
    position: absolute;
    left: 20px;
    top: 20px;
    bottom: 0;
    right: 0px;
}

.imgrow1{top: 20px;left: 20px;animation:imgrow1 0.5s 0.5s linear forwards;}
.imgrow2{top: 28px;left: 28px;animation:imgrow2 0.5s 0.5s linear forwards;}
.imgrow3{top: 36px;left: 36px;animation:imgrow3 0.5s 0.5s linear forwards;}
.imgrow4{top: 44px;left: 44px;animation:imgrow4 0.5s 0.5s linear forwards;}

@keyframes imgrow1{0%{top: 20px;left: 20px;}100%{top: 20px;left: 20px;}}
@keyframes imgrow2{0%{top: 28px;left: 28px;}100%{top: 115px;left: 20px;}}
@keyframes imgrow3{0%{top: 36px;left: 36px;}100%{top: 210px;left: 20px;}}
@keyframes imgrow4{0%{top: 44px;left: 44px;}100%{top: 305px;left: 20px;}}

.bigPhotoInfo{
	width: 337px;
    height: 331px;
    position: absolute;
    top: 20px;
    right: -320px;
    background: url(../images/photo/img2.png);
	transform: scale(0.9) rotate(10deg);
    transform-origin: left bottom;
	animation:bigPhotoInfo 0.35s 1.1s linear forwards;
}
@keyframes bigPhotoInfo{100%{top: 20px;right:0px;transform: scale(0.9) rotate(0deg);}}

.photo{
	width: 78px;
    height: 78px;
    position: absolute;
    left: 0px;
    top: 0px;
    background: url(../images/photo/img3.png);
	cursor:pointer;
}
.photo2{left: 96px;}
.photo3{left: 193px;}
.photo4{left: 289px;}
.photo:hover{
	transform:scale(1.05);
}
.photo img{
	position: absolute;
    top: 7px;
    left: 7px;
	opacity:0;
	animation:opacity 0.01s 1.1s linear forwards;
}
.photo span{
	position: absolute;
    bottom: 3px;
    left: 36px;
    font-size: 10px;
	opacity:0;
	animation:opacity 0.01s 1.1s linear forwards;
}
@keyframes opacity{100%{opacity:1;}}

.selectphoto{
	width: 268px;
    height: 223px;
    position: absolute;
    top: 25px;
    left: 32px;
    
}
.selectphoto[data-selected="1"]{background: url(../images/photo/b1.jpg);}
.selectphoto[data-selected="2"]{background: url(../images/photo/b2.jpg);}
.selectphoto[data-selected="3"]{background: url(../images/photo/b3.jpg);}
.selectphoto[data-selected="4"]{background: url(../images/photo/b4.jpg);}
.selectphoto[data-selected="5"]{background: url(../images/photo/b5.jpg);}
.selectphoto[data-selected="6"]{background: url(../images/photo/b6.jpg);}
.selectphoto[data-selected="7"]{background: url(../images/photo/b7.jpg);}
.selectphoto[data-selected="8"]{background: url(../images/photo/b8.jpg);}
.selectphoto[data-selected="9"]{background: url(../images/photo/b9.jpg);}
.selectphoto[data-selected="10"]{background: url(../images/photo/b10.jpg);}
.selectphoto[data-selected="11"]{background: url(../images/photo/b11.jpg);}
.selectphoto[data-selected="12"]{background: url(../images/photo/b12.jpg);}
.selectphoto[data-selected="13"]{background: url(../images/photo/b13.jpg);}
.selectphoto[data-selected="14"]{background: url(../images/photo/b14.jpg);}
.selectphoto[data-selected="15"]{background: url(../images/photo/b15.jpg);}
.selectphoto[data-selected="16"]{background: url(../images/photo/b16.jpg);}
.selectphotoinfo{
	position: absolute;
    top: 254px;
    left: 33px;
    font-size: 13px;
    width: 264px;
}

.surgerymenu{
	width: 108px;
    height: 27px;
    position: absolute;
	right: 15px;
    top: 9px;
    background: url(../images/menu_btn0001.png);
	cursor:pointer;
}
.surgerymenu:hover{
    background: url(../images/menu_btn0002.png);
}
.surgerymenu:active{
    background: url(../images/menu_btn0003.png);
}


.menuscreen{
	position: absolute;
    top: 10px;
    left: 10px;
    width: 740px;
    height: 402px;
    background: rgba(0,0,0, 0.4);
    overflow: hidden;
    z-index: 99;
	display:none;
}
.menuarea{
	width: 213px;
    height: 404px;
    position: absolute;
	right: -213px;
    top: 0px;
    background: url(../images/menu.png);
}

.menu_op{
	border: 2px solid transparent;
    position: absolute;
    width: 190px;
    height: 26px;
    top: 54px;
    line-height: 26px;
    left: 10px;
    border-radius: 4px;
    text-indent: 6px;
    font-size: 15px;
	cursor:pointer;
	transition: background 0.25s, border 0.25s;
}
.menu_op1{top: 54px;}
.menu_op2{top: 94px;}
.menu_op3{top: 134px;}
.menu_op4{top: 174px;}
.menu_op5{top: 214px;}
.menu_op6{top: 254px;}
.menu_op7{top: 294px;}
.menu_op8{top: 334px;}

.menu_op:hover{
	background: #fe8787;
	border: 2px solid #c02f2f;
}

#video1{
	width: 740px;
    height: 402px;
}

.screen5{
	display:none;
}
.screen2{
    background: url(../images/reception.png);
}
.receptionimg1{
	width: 327px;
    height: 586px;
    position: absolute;
    right: -82px;
    top: -10px;
    background: url(../images/reception/img1.png);	
}
.receptionimg1 .menu{
	width: 213px;
    height: 374px;
    position: absolute;
	right: 97px;
    top: 26px;
    background: url(../images/reception/menu1.png);	
}
.menutext{
	font-size:18px;
	font-weight:bold;
	position:absolute;
	top: 20px;
    left: 81px;
}
.menuheader1{
	font-size: 15px;
    font-weight: bold;
    position: absolute;
    top: 54px;
    left: 19px;
    white-space: nowrap;
}
.menuheader2{
	font-size: 15px;
    font-weight: bold;
    position: absolute;
    top: 174px;
    left: 19px;
    white-space: nowrap;
}
.menutext1{
	font-size: 15px;
    position: absolute;
    top: 77px;
    left: 19px;
    width: 185px;
    line-height: 20px;
    cursor: pointer;
}
.menutext2{
	font-size: 15px;
    position: absolute;
    top: 194px;
    left: 19px;
    width: 185px;
    line-height: 20px;
    cursor: pointer;
}
.menutext2:hover,.menutext1:hover{
    background: #E3E3E3;
    cursor: pointer;
}
#video2{
    position: absolute;
    top: 95px;
    left: 202px;
}

.introduction{
    width:100%;
    height:100%;
    position: absolute;
    top:0px;
    left:0px;
    	
}
.introduction[data-bg="1"]{
    background: url(../images/introduction/bg1.png);
}
.introduction[data-bg="2"]{
    background: url(../images/introduction/bg2.png);
}
.introduction[data-bg="3"]{
    background: url(../images/introduction/bg3.png);
    background-position: -68px -12px;
    background-size: 122%;
    animation: bg3 1s linear forwards;
}
@keyframes bg3{
	from{background-position: -50px -12px;}
	to{ background-position: -68px -12px; }
}
.introduction[data-bg="4"]{
    background: url(../images/introduction/bg4.png);
}
.introduction[data-bg="5"]{
    background: url(../images/introduction/bg5.png);
}
.introduction[data-bg="6"]{
    background: url(../images/introduction/bg6.png);
}
.introduction[data-bg="7"]{
    background: url(../images/introduction/bg7.png);
}
.introduction[data-bg="8"]{
    background: url(../images/introduction/bg8.png);
}
.surgeon1{
    width: 240px;
    height: 454px;
    position: absolute;
    top: 45px;
    left: 42px;
    transform: scale(0.90);
    z-index: 1;
}
.surgeon1.zoom1{
    top: 161px;
    left: 110px;
    transform: scale(1.80);
}
.surgeon1.zoom2{
    top: 205px;
    left: 27px;
    transform: scale(1.9);
    z-index: 1;
}
.surgeon1.zoom3 {
    top: 293px;
    left: 300px;
    transform: scale(2.5);
    z-index: 1;
}
.surgeon1 img{
    position: absolute;
    top:0px;
    left: 0px;
    z-index: 2;
}
.surgeon1 .lefthand{
    width: 94px;
    height: 90px;
    position: absolute;
	left: 123px;
    top: 99px;
    background: url(../images/introduction/sprite2.png);	
    z-index: 1;
}
.surgeon1 .lefthand[data-val="1"]{
    animation: lefthand1 1.2s steps(17) forwards;
}
@keyframes lefthand1{
	from{background-position: 0 0;}
	to{ background-position: -1598px 0; }
}
.surgeon1 .lefthand[data-val="2"]{
    animation: lefthand2 1.2s steps(17) forwards;
}
@keyframes lefthand2{
	to{background-position: 0 0;}
	from{ background-position: -1598px 0; }
}

.screen3Testing .surgeon1 .lefthand{
    width: 123px; 
    height: 117px;
    position: absolute;
	left: 109px;
    top: 87px;
    background: url(../images/img/f_arm_02_back_scrubs0001.png);
    z-index: 1;
    transform: scale(0.75);
    animation: none;
}

.screen3Testing .surgeon1 .lefthand[data-val="1"]{
    background: url(../images/img/f_arm_02_back_scrubs0021.png);
}

.surgeon1 .righthand{
    width: 68px;
    height: 87px;
    position: absolute;
	left: 41px;
    top: 98px;
    background: url(../images/introduction/sprite1.png);	
    z-index: 3;
}
.surgeon1 .righthand[data-val="1"]{
    animation: righthand1 1.2s 1s steps(17) forwards;
}
@keyframes righthand1{
	from{background-position: 0 0;}
	to{ background-position: -1156px 0; }
}
.surgeon1 .righthand[data-val="2"]{
    animation: righthand2 1.2s steps(17) forwards;
}
@keyframes righthand2{
	to{background-position: 0 0;}
	from{ background-position: -1156px 0; }
}



.screen3Testing .surgeon1 .righthand{
    width: 88px; 
    height: 112px;
    position: absolute;
	left: 29px;
    top: 85px;
    background: url(../images/img/f_arm_front_02_scrubs0001.png);
    z-index: 3;
    transform: scale(0.75);
    animation: none;
}
.screen3Testing .surgeon1 .righthand[data-val="1"]{
    background: url(../images/img/f_arm_front_02_scrubs0020.png);
}


.surgeon1 .mouth{
    width: 14px;
    height: 8px;
    position: absolute;
    left: 103px;
    top: 73px;
    background: url(../images/introduction/sprite3.png);
    z-index: 4;
    transform: scale(.75);
}
.surgeon1 .mouth[data-val="1"]{
    animation: mouth 0.7s steps(9) infinite;
}
@keyframes mouth{
	from{background-position: 0 0;}
	to{ background-position: -126px 0; }
}
.surgeon1 .eye{
    width: 33px;
    height: 13px;
    position: absolute;
    left: 91px;
    top: 55px;
    background: url(../images/introduction/sprite4.png);
    z-index: 4;
    transform: scale(.75);
}
.surgeon1 .eye[data-val="1"]{
    animation: eye1 8s steps(211) infinite;
}
@keyframes eye1{
	from{background-position: 0 0;}
	to{ background-position: 0 -2743px; }
}
.board1{
    width: 402px;
    height: 539px;
    position: absolute;
    left: 343px;
    top: 405px;
    background: url(../images/introduction/img1.png);
    animation: board1 0.75s linear forwards;
    display: none;
}
@keyframes board1{
	to{ top: -21px; }
}
.pin1{
    width: 59px;
    height: 95px;
    position: absolute;
    right: -59px;
    top: -95px;
    background: url(../images/introduction/img2.png);
    animation: pin1 0.5s 2.5s linear forwards;
    display: none;
}
@keyframes pin1{
	to{ right: 75px;top: 80px; }
}


.pin2{
    width: 165px;
    height: 58px;
    position: absolute;
    right: 291px;
    top: -60px;
    background: url(../images/introduction/img3.png);
    animation: pin2 0.5s 3.5s linear forwards;
    display: none;
}
@keyframes pin2{
	to{ right: 291px;top: 30px; }
}


.pin3{
    width: 309px;
    height: 53px;
    position: absolute;
    right: 225px;
    top: 400px;
    background: url(../images/introduction/img4.png);
    animation: pin3 0.5s 4.5s linear forwards;
    display: none;
}
@keyframes pin3{
	to{ right: 225px;top: 241px; }
}

.pin4{
    width: 167px;
    height: 65px;
    position: absolute;
    right: 281px;
    top: 400px;
    background: url(../images/introduction/img5.png);
    animation: pin4 0.5s 5s linear forwards;
    display: none;
}
@keyframes pin4{
	to{ right: 281px;top: 318px; }
}
#video3{
    position: absolute;
    width: 42%;
    left: 270px;
    top: 67px;
    display: none;
}
.screen3 .qoption, .testingOptionscreen .qoption{
    font-size: 16px;
    position: absolute;
    font-weight: bold;
    font-style: italic;
    height: 40px;
    left: 285px;
    width: 415px;
    cursor: pointer;
    display: none;
    z-index: 11;
}
.screen3 .qoption1,.testingOptionscreen .qoption1{
    top: 101px;
    line-height: 40px;
}
.screen3 .qoption2,.testingOptionscreen .qoption2{
    top: 149px;
    line-height: 20px;
}
.screen3 .qoption3,.testingOptionscreen .qoption3{
    top: 196px;
    line-height: 20px;
}
.screen3 .qoption4,.testingOptionscreen .qoption4{
    top: 240px;
    line-height: 40px;
}
.screen3 .qoption:hover,.testingOptionscreen .qoption:hover{
    background-color: #ccd6e2;
}
.continueBox1{
    width: 399px;
    height: 194px;
    position: absolute;
    left: 70%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url(../images/introduction/img6.png);
    font-size: 16px;
    text-align: center;
}
.continuebtn1,.continuebtn2{
    width: 126px;
    height: 29px;
    position: absolute;
    left: 34%;
    bottom: -9px;
    background: url(../images/introduction/playbutton0001.png);
    cursor: pointer;
}
.continuebtn1:hover,.continuebtn2:hover{
    background: url(../images/introduction/playbutton0002.png);
}
.continuebtn1:active,.continuebtn2:active{
    background: url(../images/introduction/playbutton0003.png);
}

.toolarea{
    position:absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background: url(../images/introduction/bg7.png);
    display: none;
}
.toolBox{
    width:610px;
    height:118px;
    position: absolute;
    bottom: -125px;
    left: 62px;
    z-index: 10;
}
.toolBox .toolbtn{
    width: 93px;
    height: 118px;
    position: absolute;
    left: 0;
    bottom: 0px;
    background: url(../images/introduction/toolbkg0001.png);
    cursor: pointer;  
}
.toolBox .toolbtn:hover{
    background: url(../images/introduction/toolbkg0002.png);
}
.toolBox .toolbtn:active{
    background: url(../images/introduction/toolbkg0003.png);
}
.toolBox .toolbtn1{left: 0;}
.toolBox .toolbtn2{left: 103px;}
.toolBox .toolbtn3{left: 207px;}
.toolBox .toolbtn4{left: 311px;}
.toolBox .toolbtn5{left: 415px;}
.toolBox .toolbtn6{left: 518px;}

.toolBox .toolbtn1 img{position: absolute;top: 22px;left: 22px;}
.toolBox .toolbtn2 img{position: absolute;top: 16px;left: 28px;}
.toolBox .toolbtn3 img{position: absolute;top: 16px;left: 22px;}
.toolBox .toolbtn4 img{position: absolute;top: 15px;left: 22px;}
.toolBox .toolbtn5 img{position: absolute;top: 12px;left: 25px;}
.toolBox .toolbtn6 img{position: absolute;top: 15px;left: 27px;}

.interact_face{
    width: 81px;
    height: 87px;
    position: absolute;
    left: 4px;
    top: 44px;
    background: url(../images/introduction/interact_face.png); 
}
.interact_face .mouth1, .profile1 .mouth1,.conclusion .mouth2,.mouth3, .mouth4, .mouth5,.mouth6,.mouth7,.mouth8 {
    width: 14px;
    height: 8px;
    position: absolute;
    left: 39px;
    top: 46px;
    background: url(../images/introduction/sprite3.png);
    z-index: 4;
    animation: mouth1 0.7s steps(9) infinite;
    transform: scale(0.85);
}
@keyframes mouth1{
	from{background-position: 0 0;}
	to{ background-position: -126px 0; }
}

.profile1 .mouth1{
    display: none;
}
.conclusion .mouth2{
    left: 46px;
    top: 88px;
    transform: scale(0.75);
    display: none;
}
.mouth3,.mouth8{
    left: 125px;
    top: 134px;
    display: none;
    transform: scale(1.2);
}
.mouth8{
    left: 127px;
}
.mouth4,.mouth5,.mouth6,.mouth7{
    left: 43px;
    top: 90px;
    display: none;
    transform: scale(0.8);
}
.mouth7{
    left: 56px;
}
.mouth4.move1{
    left: 125px;
    top: 134px;
    display: none;
    transform: scale(1.2);
}

.interact_face .eye1,.profile1 .eye1{
    width: 33px;
    height: 13px;
    position: absolute;
    left: 28px;
    top: 25px;
    background: url(../images/introduction/sprite4.png);
    transform: scale(.85);
    animation: eye11 8s steps(211) infinite;
}
@keyframes eye11{
	from{background-position: 0 0;}
	to{ background-position: 0 -2743px; }
}
.interact_face .msg2{
    width: 218px;
    height: 85px;
    position: absolute;
    left: 62px;
    top: -44px;
    background: url(../images/introduction/msg2.png);
    background-size: 100% 100%;
}
.interact_face .msg2 .text{
    width: 194px;
    height: 50px;
    position: absolute;
    top: 6px;
    left: 7px;
    font-size: 14px;
}

.toolbtn.toolbtn1:after {
    content: "sponge";
    position: absolute;
    top: 88px;
    font-size: 18px;
    left: 15px;
}
.toolbtn.toolbtn2:after {
    content: "marker";
    position: absolute;
    top: 88px;
    font-size: 18px;
    left: 18px;
}
.toolbtn.toolbtn3:after {
    content: "syringe";
    position: absolute;
    top: 88px;
    font-size: 18px;
    left: 17px;
}
.toolbtn.toolbtn4:after {
    content: "screw driver";
    position: absolute;
    top: 85px;
    font-size: 18px;
    left: 22px;
    line-height: 15px;
}
.toolbtn.toolbtn5:after {
    content: "scalpel";
    position: absolute;
    top: 88px;
    font-size: 18px;
    left: 17px;
}
.toolbtn.toolbtn6:after {
    content: "bovie";
    position: absolute;
    top: 88px;
    font-size: 18px;
    left: 27px;
}

.syringe, .penimg14{
    position: absolute;
    width: 509px;
    height: 539px;
    background: url(../images/introduction/sprite5.png);
    transform: rotate(90deg) scale(0.85);
    display: none;
}
.syringe.ani, .penimg14.ani{
    animation: syringe 1s steps(21) forwards;
}
@keyframes syringe{
	from{background-position: 0 0;}
	to{ background-position: -10689px 0; }
}


.redarrow{
    position: absolute;
    width: 36px;
    height: 36px;
    background: url(../images/introduction/arrow.png);
    top: 50px;
    left: 271px;
    cursor: pointer;
    display: none;
}
.redarrow1{top: 50px;left: 271px }
.redarrow2{top: 48px;left: 408px;transform: rotate(70deg);}
.redarrow3{top: 284px;left: 224px;transform: rotate(-65deg);}
.redarrow4{top: 339px;left: 278px;transform: rotate(-116deg);}
.redarrow5{top: 325px;left: 420px;transform: rotate(-140deg);}
.redarrow6{top: 271px;left: 463px;transform: rotate(-200deg);}


.blood{
    position: absolute;
    width: 56px;
    height: 58px;
    border-radius: 50%;
    top: 45px;
    left: 289px;
    background: url(../images/introduction/sprite6.png);
    display: none;
}
.blood1{top: 45px;left: 289px;}
.blood2{top: 50px;left: 392px;}
.blood3{top: 248px;left: 250px;}
.blood4{top: 284px;left: 288px;}
.blood5{top: 267px;left: 412px;}
.blood6{top: 233px;left: 430px;}

.blood[data-ani="1"]{animation: blood1 0.75s steps(21) forwards;}
@keyframes blood1{
	from{background-position: 0 0;}
	to{ background-position: -1176px 0; }
}
.blood[data-ani="2"]{
    animation: blood2 0.5s 1s steps(12) forwards;
    background: url(../images/introduction/sprite7.png);
}
@keyframes blood2{
	from{background-position: 0 0;}
	to{ background-position: -672px 0; }
}

.scalpel{
    position: absolute;
    width: 568px;
    height: 1093px;
    background: url(../images/introduction/hand_scalpel0001.png);
    transform: rotate(0deg) scale(0.85);
    border-top-left-radius: 299px;
    display: none;
}
.sponge{
    position: absolute;
    width: 1425px; 
    height: 1442px;
    background: url(../images/introduction/sprite8.png);
    transform: rotate(0deg) scale(0.85);
    top: -109px;
    left: 106px;
    display: none;
}
.sponge.ani{display:block; animation: sponge 1s 0.1s steps(20) forwards;}
@keyframes sponge{
	from{background-position: 0 0;}
	to{ background-position: -28500px 0; }
}

.screwdriver{
    position: absolute;
    width: 673px;
    height: 1199px;
    background: url(../images/introduction/sprite9.png);
    transform: rotate(0deg) scale(0.85);
    top: 314px;
    left: 400px;
    z-index: 1;
}
.screwdriver.ani{
    animation: screwdriver 1.5s 0.1s steps(23) forwards;
}
@keyframes screwdriver{
	from{background-position: 0 0;}
	to{ background-position: -15479px 0; }
}




.redarrow-1{
    position: absolute;
    width: 52px;
    height: 87px;
    background: url(../images/introduction/sprite10.png);
    top: 50px;
    left: 271px;
    cursor: pointer;
    display: none;
}
.redarrow11{top: 19px;left: 293px;}
.redarrow12{top: 48px;left: 416px;transform: rotate(70deg);}
.redarrow13{top: 228px;left: 224px;transform: rotate(-65deg);}
.redarrow14{top: 289px;left: 256px;transform: rotate(-116deg);}
.redarrow15{top: 286px;left: 386px;transform: rotate(-140deg);z-index: 1;}
.redarrow16{top: 261px;left: 427px;transform: rotate(-200deg);}

.redarrow-1[data-ani="1"]{
    animation: redarrow-1 2s steps(16) forwards;
}
@keyframes redarrow-1{
	from{background-position: 0 0;}
	to{ background-position: -832px 0; }
}
.redarrow-1[data-ani="2"]{
    background: url(../images/introduction/sprite11.png);
    animation: redarrow-2 1.5s steps(45) forwards;
}
@keyframes redarrow-2{
	from{background-position: 0 0;}
	to{ background-position: -2340px 0; }
}

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

.trajectoryscreen{
    position: absolute;
    width: 740px;
    height: 402px;
    left: 0px;
    top: 0px;
    background: url(../images/introduction/img15.png);
}

.trajectoryscreen .trajectory{
    position: absolute;
    width: 156px;
    height: 39px;
    left: 48px;
    top: 350px;
    background: url(../images/introduction/gen_btn0001.png);
    font-size: 23px;
    line-height: 39px;
    text-align: center;
    font-family: arial;
    font-style: italic;
    cursor: pointer;
}
.trajectoryscreen .trajectory:hover{ background: url(../images/introduction/gen_btn0002.png);}
.trajectoryscreen .trajectory:active{ background: url(../images/introduction/gen_btn0003.png);}
.trajectoryscreen .trajectory1{ left: 48px;color: #33FF00;}
.trajectoryscreen .trajectory2{left: 225px;color: #FF9900;}
.trajectoryscreen .trajectory3{left: 403px;color: #FF33CC;}

.img16Line{
    position: absolute;
    width: 383px;
    height: 206px;
    background: url(../images/introduction/img16.png);
    top: 42px;
    left: 242px;
}
.img17Line{
    position: absolute;
    width: 461px;
    height: 203px;
    background: url(../images/introduction/img17.png);
    top: 51px;
    left: 189px;
    display: none;
}
.img18Line{
    position: absolute;
    width: 365px;
    height: 144px;
    background: url(../images/introduction/img18.png);
    top: 47px;
    left: 229px;
    display: none;
}
.profile1{
    position: absolute;
    width: 81px;
    height: 87px;
    background: url(../images/introduction/interact_face.png);
    top: 59px;
    left: 13px;
}
.profile1 .msg1{
    position: absolute;
    width: 250px;
    height: 90px;
    background: url(../images/introduction/msg1.png);
    top: -56px;
    left: 53px;
}
#videoTesting1,#videoTesting2{
    position: absolute;
    width: 740px;
    height: 420px;
    z-index: 11;
    left: 0px;
    top: -9px;
    z-index: 1;
}
#videoTesting2{z-index: 3;}

.testingOptionscreen{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: url(../images/testing/img1.png);
    display: none;
}
.testingOptionscreen .qoption{
    display: block;
}
.testingOptionscreen .qoption4 {
    top: 240px;
    line-height: 20px;
}
.testingOptionscreen .qoption1 {
    top: 101px;
    line-height: 20px;
}

.closingscreen .mouth {
    left: 208px;
    top: 144px;
    z-index: 4;
    transform: scale(1.25);
}
.closingscreen .eye {
    left: 194px;
    top: 112px;
    z-index: 4;
    transform: scale(1.5);
}

.rightSidebegins .toolBox{
    width: 510px;
    left: 110px;
}
.rightSidebegins .toolBox .toolbtn1 img{position: absolute;top: 15px;left: 15px;}
.rightSidebegins .toolBox .toolbtn2 img{position: absolute;top: 16px;left: 19px;}
.rightSidebegins .toolBox .toolbtn3 img{position: absolute;top: 16px;left: 22px;}
.rightSidebegins .toolBox .toolbtn4 img{position: absolute;top: 15px;left: 19px;}
.rightSidebegins .toolBox .toolbtn5 img{position: absolute;top: 20px;left: 13px;}
.rightSidebegins .toolBox .toolbtn6 img{position: absolute;top: 15px;left: 27px;}

#videorightSidebegins2{
    position: absolute;
    width: 740px;
    height: 420px;
    z-index: 11;
    left: 0px;
    top: -9px;
    z-index: 1;   
}
.rightSidebegins .activity1{
    position: absolute;
    width: 740px;
    height: 402px;
    z-index: 2;
    left: 0px;
    top: 0px;
    background: url(../images/testing/img2.png);
    display: none;
}
.rightSidebegins .interact_face{top:53px;left:5px;}
.rightSidebegins .interact_face .msg2 {width: 205px;background-size: 100% 100%;}
.rightSidebegins .interact_face .msg2 .text {width: 192px;}
.rightSidebegins .toolbtn.toolbtn1:after {
    content: "tower";
    top: 88px;
    left: 25px;
    font-size: 16px;
}
.rightSidebegins .toolbtn.toolbtn2:after {
    content: "scalpel";
    top: 88px;
    left: 20px;
    font-size: 16px;
}
.rightSidebegins .toolbtn.toolbtn3:after {
    content: "bovie";
    top: 88px;
    left: 28px;
    font-size: 16px;
}
.rightSidebegins .toolbtn.toolbtn4:after {
    content: "PacMan";
    top: 91px;
    left: 17px;
    font-size: 16px;
}
.rightSidebegins .toolbtn.toolbtn5:after {
    content: "tower base";
    top: 88px;
    left: 7px;
    white-space: nowrap;
    font-size: 16px;
}

.hand_pac_man{
    position: absolute;
    width: 504px;
    height: 946px;
    background: url(../images/testing/hand_pac_man0001.png);
    top: 330px;
    left: 406px;
    display: none;
}
.redpoint{
    position: absolute;
    width: 36px;
    height: 36px;
    background: url(../images/introduction/arrow.png);
    top: 95px;
    left: 350px;
    cursor: pointer;
    transform: rotate(30deg);
}

.rightSidebegins .circle1{
    position: absolute;
    width: 60px;
    height: 60px;
    background: transparent;
    top: 123px;
    left: 377px;
    transform: rotate(45deg);
    overflow: hidden;
    cursor: pointer;
}
.rightSidebegins .circle1 .hidecircle{
    transform: scale(0.75);
    position: absolute;
    top: 12px;
    left: 6px;
    display: none;
}
#videorightSidebegins2{
    z-index: 3;
}
.closingscreen .activity2,.closingscreen .activity3{
    position: absolute;
    width: 740px;
    height: 402px;
    z-index: 2;
    left: 0px;
    top: 0px;
    background: url(../images/closing/bg1.png);
    display: none;
}
.closingscreen .activity3{
    background: url(../images/closing/bg2.png);
}

.closingscreen .toolBox{
    width: 510px;
    left: 110px;
}
.closingscreen .toolBox .toolbtn1 img{position: absolute;top: 15px;left: 15px;}
.closingscreen .toolBox .toolbtn2 img{position: absolute;top: 16px;left: 19px;}
.closingscreen .toolBox .toolbtn3 img{position: absolute;top: 16px;left: 22px;}
.closingscreen .toolBox .toolbtn4 img{position: absolute;top: 15px;left: 19px;}
.closingscreen .toolBox .toolbtn5 img{position: absolute;top: 20px;left: 13px;}
/* .closingscreen .toolBox .toolbtn6 img{position: absolute;top: 15px;left: 27px;} */

.closingscreen .toolbtn.toolbtn1:after {
    content: "tower";
    top: 88px;
    left: 25px;
    font-size: 16px;
}
.closingscreen .toolbtn.toolbtn2:after {
    content: "suture";
    top: 88px;
    left: 20px;
    font-size: 16px;
}
.closingscreen .toolbtn.toolbtn3:after {
    content: "bovie";
    top: 88px;
    left: 28px;
    font-size: 16px;
}
.closingscreen .toolbtn.toolbtn4:after {
    content: "PacMan";
    top: 91px;
    left: 17px;
    font-size: 16px;
}
.closingscreen .toolbtn.toolbtn5:after {
    content: "tower base";
    top: 88px;
    left: 7px;
    white-space: nowrap;
    font-size: 16px;
}

.closingscreen .interact_face{
    z-index: 2;
}

.hand_pac_man1{
    position: absolute;
    width: 503px;
    height: 945px;
    background: url(../images/closing/hand_pac_man0001.png);
    top: 330px;
    left: 406px;
    display: none;
}
.closingscreen .interact_face{top:53px;left:5px;}
.closingscreen .interact_face .msg2 {width: 205px;background-size: 100% 100%;}
.closingscreen .interact_face .msg2 .text {width: 192px;}

.closingscreen .redpoint{
    
    transform: rotate(80deg);
    top: 181px;
    left: 382px;
    display: none;
    animation:redpoint 0.3s linear forwards;
}
@keyframes redpoint {
    from {top: 181px;left: 382px;}
    to{top: 193px;left: 375px;}
}

.closingscreen .circle1{
    position: absolute;
    width: 60px;
    height: 60px;
    background: transparent;
    top: 202px;
    left: 300px;
    transform: rotate(45deg);
    overflow: hidden;
    cursor: pointer;
}
.closingscreen .circle1 .hidecircle{
    transform: scale(0.75);
    position: absolute;
    top: 5px;
    left: 7px;
    display: none;
}
.activity3 .scru{
    position: absolute;
    width: 424px;
    height: 147px;
    background: url(../images/closing/fiducial0001.png);
}
.activity3 .scru1{
    top: 70px;
    left: 387px;
    transform: rotate(180deg);
}
.activity3 .scru2{
    top: -159px;
    left: 159px;
    transform: rotate(100deg);
}
.activity3 .scru3{
    top: 197px;
    left: -151px;
    transform: rotate(0deg);
}
.activity3 .scru4{
    top: 229px;
    left: -121px;
    transform: rotate(0deg);
}
.activity3 .scru5{
    top: 451px;
    left: 175px;
    transform: rotate(-90deg);
}
.activity3 .scru6{
    top: 401px;
    left: 321px;
    transform: rotate(-128deg);
}
.activity3 .scru.ani{
    background: url(../images/closing/sprite4.png);
    animation: scru11 1.2s steps(73) forwards;
}
@keyframes scru11 {
    from{ background-position: 0 0; }
    to{ background-position: 0 -10731px; }
}


.chira{
    position: absolute;
    width: 82px;
    height: 120px;
    background: url(../images/closing/incision_left0001.png);
   
}
.chira.chira1{ top: 160px;left: 220px;}
.chira.chira2{ top: 160px;left: 394px;transform: scale(-1, 1);}

.chira.chira1[data-ani="1"]{
    background: url(../images/closing/sprite1.png);
    animation: chira11 1.5s steps(31) forwards;
    
}
.chira.chira2[data-ani="1"]{
    background: url(../images/closing/sprite1.png);
    animation: chira11 1.5s 0.5s steps(31) forwards;
}
@keyframes chira11 {
    from{ background-position: 0 0;}
    to{background-position: -2542px 0;}
}

.chira.chira1[data-ani="2"]{
    background: url(../images/closing/sprite2.png);
    animation: chira22 3s steps(74) forwards;
    
}
.chira.chira2[data-ani="2"]{
    background: url(../images/closing/sprite2.png);
    animation: chira22 3s steps(74) forwards;
}
@keyframes chira22 {
    from{ background-position: 0 0;}
    to{background-position: -6068px 0;}
}


.cirImage1,.cirImage2{
    position: absolute;
    width: 89px;
    height: 90px;
    background: url(../images/closing/img1.png);
    opacity: 0.7;
}
.cirImage1{
    top: 400px;
    left: 160px;
}
.cirImage2{
    top: 400px;
    left: 430px;
}
.cirImage1.ani{animation:cirImage1 1.2s 5.2s linear forwards; }
.cirImage2.ani{animation:cirImage2 1.2s 5s linear forwards; }

@keyframes cirImage1 {
    0% { top: 400px;left: 160px; transform: scale(1);}
    50% { top: 178px;left: 220px; transform: scale(1);}
    90% { top: 178px;left: 220px; transform: scale(1);}
    100% { top: 178px;left: 220px; transform: scale(0.5);}
}
@keyframes cirImage2 {
    0% { top: 400px;left: 430px; transform: scale(1);}
    50% { top: 178px;left: 386px; transform: scale(1);}
    90% { top: 178px;left: 386px; transform: scale(1);}
    100% { top: 178px;left: 386px; transform: scale(0.5);}
}
.tb001,.tb002{
    position: absolute;
    width: 353px;
    height: 352px;
    background: url(../images/closing/tb0047.png);
}
.tb001{
    top: 60px;
    left: 82px;
    transform: scale(0.35);
}
.tb001.ani{
    animation:tb001 1.2s linear forwards;
}
@keyframes tb001 {
    0%{
        top: 60px;
        left: 82px;
        transform: scale(0.35);
    }
    25%{
        transform: scale(0.4);
        top: 60px;
        left: 75px;
    }
    45%{
        transform: scale(0.4);
        top: 60px;
        left: 75px;
    }
    100%{
        transform: scale(0.4);
        top: 60px;
        left: -250px;
    }
}
.tb002{
    transform: scale(-0.35,0.35);
    top: 59px;
    left: 257px;
}
.tb002.ani{
    animation:tb002 1.2s linear forwards;
}
@keyframes tb002 {
    0%{
        transform: scale(-0.35,0.35);
        top: 59px;
        left: 257px;
    }
    25%{
        transform: scale(-0.4,0.4);
        top: 59px;
        left: 270px;
    }
    45%{
        transform: scale(-0.4,0.4);
        top: 59px;
        left: 270px;
    }
    100%{
        transform: scale(-0.4,0.4);
        top: 59px;
        left: 635px;
    }
}


.tb003,.tb004{
    position: absolute;
    width: 634px;
    height: 479px;
    background: url(../images/closing/tb0001.png);
    transform: scale(0.35);
}
.tb003{
    transform: scale(0.34);
    top: 0px;
    left: -93px;
}
.tb003.ani{
    animation:tb003 1.2s linear forwards;
}
@keyframes tb003 {
    0%{
        transform: scale(0.34);
        top: 0px;
        left: -93px;
    }
    25%{
        transform: scale(0.4);
        top: 0px;
        left: -100px;
    }
    45%{
        transform: scale(0.4);
        top: 0px;
        left: -100px;
    }
    100%{
        transform: scale(0.4);
        top: 0px;
        left: -440px;
    }
}

.tb004{
    transform: scale(-0.34,0.34);
    top: -1px;
    left: 151px;
}
.tb004.ani{
    animation:tb004 1.2s linear forwards;
}
@keyframes tb004 {
    0%{
        transform: scale(-0.34,0.34);
        top: -1px;
        left: 151px;
    }
    25%{
        transform: scale(-0.4,0.4);
        top: -1px;
        left: 161px;
    }
    45%{
        transform: scale(-0.4,0.4);
        top: -1px;
        left: 161px;
    }
    100%{
        transform: scale(-0.4,0.4);
        top: -1px;
        left: 550px;
    }
}

.green1{
    position: absolute;
    width: 39px;
    height: 33px;
    background: url(../images/closing/img3.png);
    top: 400px;
    left: 289px;
    transform: scale(0.8) rotate(-90deg);
}
.green1.ani{
    animation:green1 1.2s 0.2s linear forwards;
}
.green2{
    position: absolute;
    width: 36px;
    height: 36px;
    background: url(../images/closing/img2.png);
    top: 400px;
    left: 368px;
    transform: scale(0.8) rotate(90deg);
}
.green2.ani{
    animation:green2 1.2s linear forwards;
}
@keyframes green1 {
    0%{
        top: 400px;
        left: 289px;
        transform: scale(0.8) rotate(-90deg);
    }
    50%{
        top: 255px;
        left: 289px;
        transform: scale(0.8) rotate(0deg);
    }
    70%{
        top: 255px;
        left: 289px;
        transform: scale(0.8) rotate(0deg);
    }
    100%{
        top: 225px;
        left: 245px;
        transform: scale(0.2) rotate(-38deg);
    }   
}
@keyframes green2 {
    0%{
        top: 400px;
        left: 368px;
        transform: scale(0.8) rotate(90deg);
    }
    50%{
        top: 255px;
        left: 368px;
        transform: scale(0.8) rotate(0deg);
    }
    70%{
        top: 255px;
        left: 368px;
        transform: scale(0.8) rotate(0deg);
    }
    100%{
        top: 224px;
        left: 414px;
        transform: scale(.2) rotate(48deg);
    }   
}
 
.activity3 .arrow1, .activity3 .arrow2{
    position: absolute;
    width: 36px;
    height: 36px;
    background: url(../images/introduction/arrow.png);
    cursor: pointer;
}
.activity3 .arrow1{
    top: 145px;
    left: 263px;
    transform: rotate(90deg) scale(0.8);
}
.activity3 .arrow2{
    top: 145px;
    left: 394px;
    transform: scale(0.8);
}

.click1,.click2{
    width: 150px;
    height: 150px;
    position: absolute;
    top: 164px;
    left: 175px;
    cursor: pointer;
}
.click2{
    left: 373px;
}
.suturehand{
    position: absolute;
    width: 1172px;
    height: 983px;
    background: url(../images/closing/suturehand0032.png);
    top: 271px;
    left: 135px;
    display: none;
}
.suturehand.ani{
    background: url(../images/closing/sprite3.png);
    animation: suturehand 0.5s steps(11) 4;
}
@keyframes suturehand {
    from{ background-position: 0 0;}
    to{ background-position: -12892px 0;}
}
.activity3 .arrow3, .activity3 .arrow4, .activity3 .arw1{
    position: absolute;
    width: 36px;
    height: 36px;
    background: url(../images/introduction/arrow.png);
    cursor: pointer;
    top: 140px;
    left: 241px;
    transform: rotate(45deg);
    display: none;
}
.activity3 .arrow4{
    top: 140px;
    left: 420px;
}

.activity3 .arw1.arrow5{
    top: 60px;
    left: 395px;
    transform: rotate(70deg);
}
.activity3 .arw1.arrow6{
    top: 59px;
    left: 268px;
    transform: rotate(16deg);
}
.activity3 .arw1.arrow7{
    top: 288px;
    left: 212px;
    transform: rotate(-42deg);
}
.activity3 .arw1.arrow8{
    top: 350px;
    left: 257px;
    transform: rotate(-107deg);
}
.activity3 .arw1.arrow9{
    top: 329px;
    left: 424px;
    transform: rotate(186deg);
}
.activity3 .arw1.arrow10{
    top: 284px;
    left: 451px;
    transform: rotate(150deg);
}
#videoconclusion3, #videotwoweekslater3, #videotwoweekslater4 {
    position: absolute;
    width: 748px;
    height: 432px;
    left: -1px;
    top: -15px;
    display: none;
}
.conclusion .scale{
    font-family: arial;
    font-size: 16px;
    font-style: italic;
    position: absolute;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    cursor: pointer;
    left: 76px;
    width: 280px;
    background: white;
}
.conclusion .scale1{
    top: 245px;
}
.conclusion .scale2{
    top: 287px;
}
.conclusion .scale3{
    top: 331px;
}
.conclusion .scale4{
    top: 379px;
    height: 46px;
    line-height: 20px;
}
.conclusion .scale5{
    top: 433px;
}
.conclusion .scale:hover{
    background-color: #D5DFEA;
}
.scale.scale:after {
    position: absolute;
    left: -20px;
    background: white;
}
.scale.scale1:after {content: "A.";}
.scale.scale2:after {content: "B.";}
.scale.scale3:after {content: "C.";}
.scale.scale4:after {content: "D.";top: 0px;}
.scale.scale5:after {content: "E.";}
.conclusionQ,.conclusionQ1{
    font-family: arial;
    font-size: 18px;
    font-style: italic;
    position: absolute;
    height: 30px;
    line-height: 23px;
    font-weight: bold;
    left: 70px;
    width: 280px;
    background: white;
    top: 140px;
}
.conclusionQ1{
    top: 163px;
    height: 53px;
    width: 180px;
}
.conclusionQ:after {
    content: "Q:";
    position: absolute;
    left: -27px;
    background: white;
}


.blueOption{
    position: absolute;
    font-size: 12pt;
    background-color: #009C21;
    color: #00FF00;
    text-align: center;
    font-weight: bold;
    transform: rotate(-3deg);
    border-radius: 8px;
    height: 18px;
    line-height: 19px;
    cursor: pointer;
    display: none;
}
.blueOption1{
    top: 92px;
    left: 336px;
    width: 67px;
 }
 .blueOption2{
    top: 120px;
    left: 322px;
    width: 95px;
    border-radius: 8px;
 }
 .blueOption3{
    top: 148px;
    left: 313px;
    width: 108px;
    text-indent: 10px
 }
 .blueOption4{
    top: 177px;
    left: 306px;
    width: 131px;
    border-radius: 17px;
    border-top-right-radius: 30px;
    text-indent: 7px
 }
 .blueOption5{
    top: 206px;
    left: 301px;
    width: 148px;
    text-indent: 4px
 }
.blueOption:hover{
background-color: #9BDA46;
}

.twoweekslater .page1, .twoweekslater .page2{
    background: url(../images/twoweek/bg1.png);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: none;
}
.twoweekslater .page2{
    background: url(../images/twoweek/bg2.png);
}
.twoweekslater .page1 .open_wound1{
    background: url(../images/twoweek/open_wound0059.png);
    position: absolute;
    top: 165px;
    left: 239px;
    width: 52px;
    height: 120px;
}
.twoweekslater .page1 .open_wound2{
    background: url(../images/twoweek/open_wound0059.png);
    position: absolute;
    top: 167px;
    left: 401px;
    width: 52px;
    height: 120px;
    transform: scale(-1,1);
}


.twoweekslater .toolBox{
    width: 510px;
    left: 110px;
}
.twoweekslater .toolBox .toolbtn1 img{position: absolute;top: 15px;left: 15px;}
.twoweekslater .toolBox .toolbtn2 img{position: absolute;top: 16px;left: 19px;}
.twoweekslater .toolBox .toolbtn3 img{position: absolute;top: 16px;left: 22px;}
.twoweekslater .toolBox .toolbtn4 img{position: absolute;top: 15px;left: 19px;}
.twoweekslater .toolBox .toolbtn5 img{position: absolute;top: 10px;left: 13px;}

.twoweekslater .toolbtn.toolbtn1:after {
    content: "tower";
    top: 88px;
    left: 25px;
    font-size: 16px;
}
.twoweekslater .toolbtn.toolbtn2:after {
    content: "scalpel";
    top: 88px;
    left: 20px;
    font-size: 16px;
}
.twoweekslater .toolbtn.toolbtn3:after {
    content: "bovie";
    top: 88px;
    left: 28px;
    font-size: 16px;
}
.twoweekslater .toolbtn.toolbtn4:after {
    content: "drill";
    top: 91px;
    left: 32px;
    font-size: 16px;
}
.twoweekslater .toolbtn.toolbtn5:after {
    content: "suture";
    top: 88px;
    left: 25px;
    white-space: nowrap;
    font-size: 16px;
}
.page1 .knife1, .page1 .knife2 {
    background: url(../images/twoweek/sprite1.png);
    position: absolute;
    top: 1px;
    left: 26px;
    width: 894px;
    height: 791px;
    display: none;
}
.page1 .knife2{
    left: -232px;
    transform: scale(-1,1);
}
.page1 .knife1[data-ani="1"], .page1 .knife2[data-ani="1"]{
    animation: knife1 2s steps(34) forwards;
}
@keyframes knife1 {
    from{background-position: 0 0;}
	to{ background-position: 0 -26894px;  } 
}

/* .page1 .knife1[data-ani="2"], .page1 .knife2[data-ani="2"]{
    background: url(../images/twoweek/sprite2.png);
    animation: knife2 3s steps(63) forwards;
}
@keyframes knife2 {
    from{ background-position: 0 0; }
	to{ background-position: 0 -49833px;  } 
} */


.hand_pac_man2{
    background: url(../images/twoweek/scalp_cutleft0002.png);
    position: absolute;
    top: 187px;
    left: 26px;
    width: 437px;
    height: 426px;
    display: none;
}
.page1 .redpoint11{
    top: 146px;
    left: 228px;
}
.page1 .redpoint12{    
    top: 153px;
    left: 425px;
    transform: rotate(70deg);
}
.transparent1, .transparent2,.transparent3, .transparent4, .transparent5, .transparent6, .transparent7, .transparent8 {
    position: absolute;
    width: 40px;
    height: 100px;
    top: 165px;
    left: 233px;
    cursor: pointer;
    display: none;
}
.transparent2 {
    left: 410px;
}
.transparent3 {
    left: 203px;
    top: 71px;
    transform: rotate(-90deg);
    width: 60px;
    height: 120px;
}
.transparent4 {
    left: 458px;
    top: 71px;
    transform: rotate(-90deg);
    width: 60px;
    height: 120px;
}
.transparent5 {
    left: 237px;
    top: 167px;
}
.transparent6 {
    left: 420px;
    top: 173px;
}
.transparent7 {
    left: 220px;
    top: 81px;
    transform: rotate(-90deg);
}
.transparent8 {
    left: 469px;
    top: 81px;
    transform: rotate(-90deg);
}
#videotwoweekslater2{
    position: absolute;
    top: 167px;
    left: 183px;
    width: 346px;
    height: 240px;
    display: none;
}

.page2 .redpoint11{
    top: 104px;
    left: 141px;
    transform: rotate(-40deg);
}
.page2 .redpoint12{    
    top: 130px;
    left: 393px;
    transform: rotate(-67deg);
}
.twoweekslater .page3{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: none;
}
.dragArea{
    position: absolute;
    width: 400px;
    height: 70px;
    top: 207px;
    left: 157px;
    transform: rotate(-33deg);
    display: none;
}
.dragArea .drag1{
    position: absolute;
    width: 70px;
    height: 70px;
    top: 0px;
    right: 0px;
    cursor: pointer;
}

.transparentclick{
    position: absolute;
    width: 138px;
    height: 115px;
    top: 121px;
    left: 370px;
    display: none;
    cursor: pointer;
}

.niddlehand{
    background: url(../images/twoweek/hand.png);
    position: absolute;
    top: 340px;
    left: 714px;
    width: 494px;
    height: 955px;
    display: none;
}

.page3 .redpoint11{
    top: 151px;
    left: 225px;
    display: none;
}
.page3 .redpoint12{    
    top: 153px;
    left: 435px;
    transform: rotate(60deg);
    display: none;
}

.page3 .q11, .begins1 .q11, .begins2 .q11{
    position: absolute;
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    font-family: arial;
    background: #eeedef;
    top: 43px;
    left: 250px;
    width: 446px;
    height: 22px;
    border-bottom: 2px dotted black;
    display: none;
}
.page3 .opt, .begins1 .opt, .begins2 .opt{
    position: absolute;
    font-size: 15px;
    font-style: italic;
    font-weight: bold;
    font-family: arial;
    background: #f3f2f3;
    left: 282px;
    line-height: 18px;
    width: 418px;
    cursor: pointer;
    display: none;
}
.page3 .opt1{
    top: 74px;
}
.page3 .opt2{
    top: 157px;
}
.page3 .opt3{
    top: 200px;
}
.page3 .opt4{
    top: 242px;
}
.page3 .opt:hover, .begins1 .opt:hover, .begins2 .opt:hover{
    background-color: #ccd6e2;
}

.page3 .opt:after,.begins1 .opt:after,.begins2 .opt:after{
    content: "A.";
    font-size: 15px;
    font-style: italic;
    font-weight: bold;
    font-family: arial;
    position: absolute;
    left: -19px;
    top: -1px;
    background: #efeef0;
}

.page3 .opt1:after{content: "A.";}
.page3 .opt2:after{content: "B.";}
.page3 .opt3:after{content: "C.";}
.page3 .opt4:after{content: "D.";}

.beginsurgery .begins1,.beginsurgery .begins2,.beginsurgery .begins3{
    background: url(../images/begins/bg1.png);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: none;
}

.beginsurgery .begins2,.beginsurgery .begins3{
    background: url(../images/begins/bg2.png);
}

.beginsurgery .toolBox{
    width: 510px;
    left: 110px;
}
.beginsurgery .toolBox .toolbtn1 img{position: absolute;top: 15px;left: 15px;}
.beginsurgery .toolBox .toolbtn2 img{position: absolute;top: 16px;left: 19px;}
.beginsurgery .toolBox .toolbtn3 img{position: absolute;top: 16px;left: 22px;}
.beginsurgery .toolBox .toolbtn4 img{position: absolute;top: 15px;left: 19px;}
.beginsurgery .toolBox .toolbtn5 img{position: absolute;top: 23px;left: 13px;}

.beginsurgery .toolbtn.toolbtn1:after {
    content: "tower";
    top: 88px;
    left: 25px;
    font-size: 16px;
}
.beginsurgery .toolbtn.toolbtn2:after {
    content: "scalpel";
    top: 88px;
    left: 20px;
    font-size: 16px;
}
.beginsurgery .toolbtn.toolbtn3:after {
    content: "bovie";
    top: 88px;
    left: 28px;
    font-size: 16px;
}
.beginsurgery .toolbtn.toolbtn4:after {
    content: "drill";
    top: 91px;
    left: 32px;
    font-size: 16px;
}
.beginsurgery .toolbtn.toolbtn5:after {
    content: "tower base";
    top: 88px;
    left: 8px;
    white-space: nowrap;
    font-size: 16px;
}
.begins1 .rp1, .begins1 .rp2{
    width: 50px;
    height: 100px;
    position: absolute;
    top: 170px;
    left: 237px;
    cursor: pointer;
}
.begins1 .rp2{
    top: 170px;
    left: 405px;
    transform: rotate(29deg);
}
.begins1 .rt1{
    top: 151px;
    left: 235px;
    display: none;
}
.begins1 .rt2{
    top: 152px;
    left: 428px;
    transform: rotate(72deg);
    display: none;
}
.scalp_cut1{
    background: url(../images/begins/scalp_cut.png);
    position: absolute;
    top: 240px;
    left: 214px;
    width: 350px;
    height: 425px;
    display: none;
}
.scalp_cut21{
    width: 1455px;
    height: 845px;
    position: absolute;
    top: 15px;
    left: -634px;
    background: url(../images/begins/sprite1.png);
    animation: scalp_cut2 2s steps(28) forwards;
    transform: rotate(-16deg);
    display: none;
}
.scalp_cut22 {
    width: 1455px;
    height: 845px;
    position: absolute;
    top: -42px;
    left: -523px;
    background: url(../images/begins/sprite1.png);
    animation: scalp_cut2 2s steps(28) forwards;
    display: none;
}
@keyframes scalp_cut2 {
    from{background-position: 0 0; }
    to{background-position: 0 -23660px;}
    
}
.bovie_hand{
    background: url(../images/begins/bovie_hand.png);
    position: absolute;
    top: 240px;
    left: 214px;
    width: 698px;
    height: 951px;
    display: none;
}
.begins1 .steam1, .begins1 .steam2{
    background: url(../images/begins/sprite2.png);
    position: absolute;
    top: 109px;
    left: 257px;
    width: 17px;
    height: 140px;
    animation: steam1 2s steps(22) forwards;
    display: none;
}
.begins1 .steam2{
    left: 422px;
}
@keyframes steam1 {
    from{background-position: 0 0; }
    to{background-position: -594px 0; }
}
.img11,.img12{
    background: url(../images/begins/img1.png);
    position: absolute;
    top: 180px;
    left: 416px;
    width: 23px;
    height: 107px;
    display: none;
}
.img12{
    left: 256px;
    transform: scale(-1,1);
}
#videobegins3{
    position: absolute;
    width: 302px;
    height: 284px;
    top: 136px;
    left: 196px;
    display: none;
}

.tool_drill_hand1{
    background: url(../images/begins/tool_drill_hand0001.png);
    position: absolute;
    top: 480px;
    left: 416px;
    width: 958px;
    height: 693px; 
    display: none;
}
.tool_drill_hand1.scale{
    transform: scale(-1, 1);
}
.begins1 .open_wound12, .begins1 .open_wound11{
    background: url(../images/begins/open_wound.png);
    position: absolute;
    width: 82px;
    height: 120px;
    display: none;
}

.begins1 .open_wound11{
    top: 168px;
    left: 223px;
}
.begins1 .open_wound12{
    top: 167px;
    left: 388px;
    transform: scale(-1,1);
}
.begins1 .open_wound13, .begins1 .open_wound14{
    background: url(../images/begins/scalp_cut1.png);
    position: absolute;
    width: 82px;
    height: 120px;
    background-size: 90%;
    display: none;
}
.begins1 .open_wound13{
    top: 175px;
    left: 223px;
    transform: scale(-1,1);
}
.begins1 .open_wound14{
    top: 173px;
    left: 388px;
}

.blank1, .blank2, .blank3{
    position: absolute;
    width: 82px;
    height: 120px;
    top: 168px;
    left: 223px;
    cursor: pointer;
    display: none;
}
.blank2{
    top: 167px;
    left: 388px;
}
#videobegins4, #videobegins5, #videobegins6,#videobegins7, #videobegins8, #videobegins15{
    position: absolute;
    width: 744px;
    height: 419px;
    left: -2px;
    top: -8px;
    display: none;
}
.begins1 .rt3{
    top: 212px;
    left: 223px;
    display: none;
    transform: rotate(-45deg);
}
.begins1 .rt4{
    top: 210px;
    left: 432px;
    transform: rotate(130deg);
    display: none;
}

.begins1 .q11{
    top: 43px;
    left: 248px;
    width: 446px;
    height: 52px;
}
.begins1 .opt1{
    top: 116px;
    left: 279px 
}
.begins1 .opt2{
    top: 152px;
    left: 279px 
}
.begins1 .opt3{
    top: 200px;
    left: 279px 
}
.begins1 .opt4{
    top: 245px;
    left: 279px 
}
.begins1 .opt1:after{content: "A.";}
.begins1 .opt2:after{content: "B.";}
.begins1 .opt3:after{content: "C.";}
.begins1 .opt4:after{content: "D.";height: 25px;}

.towerbase1{
    background: url(../images/begins/img2.png);
    position: absolute;
    top: 180px;
    left: 416px;
    width: 523px;
    height: 945px;
    display: none;
}
.towerbase2{
    background: url(../images/begins/img3.png);
    position: absolute;
    top: 180px;
    left: 416px;
    width: 523px;
    height: 804px;
    display: none;
}

.begins2 .rt5{
    top: 210px;
    left: 204px;
    transform: rotate(-43deg);
    display: none;
}
.dragleft{
    position: absolute;
    width: 170px;
    height: 54px;
    top: 105px;
    left: 154px;
    display: none;
}
.dragEle{
    position: absolute;
    width: 53px;
    height: 54px;
    top: 0px;
    left: 117px;
    cursor: pointer;
}

.begins2 .q11{
    top: 43px;
    left: 247px;
    width: 446px;
    height: 70px;
}
.begins2 .opt1{
    top: 135px;
    left: 279px
}
.begins2 .opt2{
    top: 167px;
    left: 279px
}
.begins2 .opt3{
    top: 213px;
    left: 279px
}
.begins2 .opt4{
    top: 246px;
    left: 279px;
}
.begins2 .opt1:after{content: "A.";}
.begins2 .opt2:after{content: "B.";}
.begins2 .opt3:after{content: "C.";}
.begins2 .opt4:after{content: "D.";height: 25px;}

.begins3 .img111,.begins3 .img112{
    background: url(../images/begins/bg3.png);
    position: absolute;
    top: 54px;
    left: 87px;
    width: 356px;
    height: 353px;
    background-size: 100%;
    transform: scale(.38);
    cursor: pointer;
}
.begins3 .img112{
    left: 248px;
    transform: scale(-0.38,0.38);
    cursor: unset;
}
.begins3 .rt6{
    top: 147px;
    left: 217px;
    transform: rotate(13deg);
    display: none;
} 
.gen_btn1,.gen_btn2,.gen_btn3{
    background:#605f60;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 156px;
    height: 39px;
    cursor: pointer;
    font-weight: bold;
    font-style: italic;
    font-size: 21px;
    line-height: 19px;
    text-align: center;
    border-radius: 10px;
    top: 344px;
    display: none;
} 
.gen_btn1:hover,.gen_btn2:hover,.gen_btn3:hover{
    background: #a09ea1;
}
.gen_btn1{ 
    top: 343px;
    left: 71px;
    color: #33FF00;
}
.gen_btn2{ 
    top: 344px;
    left: 250px;
    text-align: center;
    line-height: 39px;
    color: #FF9900;
}
.gen_btn3{
    top: 344px;
    left: 424px;
    text-align: center;
    line-height: 39px;
    color: #FF33CC;
}

.continue1{
    background: url(../images/begins/playbutton0001.png);
    position: absolute;
    top: 349px;
    left: 605px;
    width: 125px;
    height: 28px;
    cursor: pointer;
    display: none;
} 

.continue1:hover{
    background: url(../images/begins/playbutton0002.png);
}
.downArrow1{
    position: absolute;
    width: 47px;
    height: 83px;
    right: 6px;
    top: 206px;
    cursor: pointer;
    display: none;
}
.prep1, .prep2, .prep3, .prep4, .prep5, .prep6{
    width:100%;
    height: 100%;
    position: absolute;
    top:0px;
    left:0px;
    background: url(../images/prep/bg1.png);
    display: none;
}
.prep2{
    background: url(../images/prep/bg2.png);
}
.prep3,.prep4,.prep5, .prep6{
    background: url(../images/prep/bg3.png);
}
.prep7{
    width:100%;
    height: 100%;
    position: absolute;
    top:0px;
    left:0px;
    background: url(../images/prep/bg4.png);
    display: none;
}

.surgeryprep .toolBox{
    width: 740px;
    height:118px;
    position: absolute;
    bottom: -125px;
    left: 0px;
    z-index: 10;
}
.surgeryprep .toolBox .toolbtn{
    width: 93px;
    height: 118px;
    position: absolute;
    left: 0;
    bottom: 0px;
    background: url(../images/introduction/toolbkg0001.png);
    cursor: pointer;  
}
.surgeryprep .toolBox .toolbtn:hover{
    background: url(../images/introduction/toolbkg0002.png);
}
.surgeryprep .toolBox .toolbtn:active{
    background: url(../images/introduction/toolbkg0003.png);
}
.surgeryprep .toolBox .toolbtn1{left: 11px;}
.surgeryprep .toolBox .toolbtn2{left: 114px;}
.surgeryprep .toolBox .toolbtn3{left: 217px;}
.surgeryprep .toolBox .toolbtn4{left: 321px;}
.surgeryprep .toolBox .toolbtn5{left: 425px;}
.surgeryprep .toolBox .toolbtn6{left: 530px;}
.surgeryprep .toolBox .toolbtn7{left: 635px;}

.surgeryprep .toolBox .toolbtn1 img{position: absolute;top: 6px;left: 13px;}
.surgeryprep .toolBox .toolbtn2 img{position: absolute;top: 17px;left: 17px;}
.surgeryprep .toolBox .toolbtn3 img{position: absolute;top: 16px;left: 22px;}
.surgeryprep .toolBox .toolbtn4 img{position: absolute;top: 10px;left: -3px;}
.surgeryprep .toolBox .toolbtn5 img{position: absolute;top: 25px;left: 25px;}
.surgeryprep .toolBox .toolbtn6 img{position: absolute;top: 15px;left: 18px;}
.surgeryprep .toolBox .toolbtn7 img{position: absolute;top: 9px;left: 13px;}

.surgeryprep .toolbtn.toolbtn1:after {
    content: "GPS Probe";
    position: absolute;
    top: 90px;
    font-size: 16px;
    left: 5px;
}
.surgeryprep .toolbtn.toolbtn2:after {
    content: "marker";
    position: absolute;
    top: 88px;
    font-size: 16px;
    left: 16px;
}
.surgeryprep .toolbtn.toolbtn3:after {
    content: "syringe";
    position: absolute;
    top: 88px;
    font-size: 16px;
    left: 17px;
}
.surgeryprep .toolbtn.toolbtn4:after {
    content: "IO ban";
    position: absolute;
    top: 90px;
    font-size: 16px;
    left: 19px;
    line-height: 15px;
}
.surgeryprep .toolbtn.toolbtn5:after {
    content: "sponge";
    position: absolute;
    top: 88px;
    font-size: 16px;
    left: 18px;
}
.surgeryprep .toolbtn.toolbtn6:after {
    content: "Duraprep";
    position: absolute;
    top: 88px;
    font-size: 16px;
    left: 13px;
}
.surgeryprep .toolbtn.toolbtn7:after {
    content: "hair clippers";
    position: absolute;
    top: 88px;
    font-size: 16px;
    left: 4px;
    text-align: center;
}
.haircut,.haircut1,.haircut2,.haircut3,.haircut4{
    position: absolute;
    width: 310px;
    height: 344px;
    top: 40px;
    left: 192px;
    border-radius: 165px;
    cursor: pointer;
    display: none;
}
#canvas{
    width: 310px;
    height: 344px; 
}
.hairclippers{
    width: 732px;
    height: 1196px;
    position: absolute;
    left: 249px;
    top: 341px;
    background: url(../images/prep/img8.png);
    cursor: pointer;
    display: none;  
}
#videosurgeryprep2, #videosurgeryprep3, #videosurgeryprep5, #videosurgeryprep6, #videosurgeryprep7{
    display: none;
    width: 740px;
    height: 445px;
    position: absolute;
    top: -22px;
    left: 0px;
}
.prep2 .img9{
    width: 153px;
    height: 265px;
    position: absolute;
    right: -154px;
    top: 158px;
    background: url(../images/prep/img9.png);
}
.prep2 .img10{
    width: 250px;
    height: 295px;
    position: absolute;
    left: -245px;
    top: 158px;
    background: url(../images/prep/img10.png);
}
.prep2 .img111{
    width: 475px;
    height: 916px;
    position: absolute;
    left: 375px;
    top: 202px;
    background: url(../images/prep/img11.png);
    display: none;
}
.prep2 .p1{top: 282px;left: 453px;transform: rotate(145deg);}
.prep2 .p2{top: 339px;left: 417px;transform: rotate(205deg);}
.prep2 .p3{top: 355px;left: 255px;transform: rotate(-112deg);}
.prep2 .p4{top: 311px;left: 214px;transform: rotate(-82deg);}
.prep2 .p5{top: 57px;left: 395px;transform: rotate(69deg);}
.prep2 .p6{top: 55px;left: 272px;}
.prep2 .redpoint{
    display: none;
}

.prep2 .c{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 95px;
    left: 350px;
    cursor: pointer;
    display: none;
}

.prep2 .c1{top: 286px;left: 428px;}
.prep2 .c2{top: 316px;left: 414px;}
.prep2 .c3{top: 330px;left: 279px;}
.prep2 .c4{top: 297px;left: 248px;}
.prep2 .c5{top: 96px;left: 389px;}
.prep2 .c6{top: 95px;left: 289px;}

.gps_pulse{
    width: 137px; 
    height: 72px;
    position: absolute;
    left: 9px;
    top: -14px;
    background: url(../images/prep/sprite1.png);
    transform: rotate(2deg);
    animation:gps_pulse 1s steps(20);
    display: none;
}
@keyframes gps_pulse {
    from{background-position: 0 0;}
    to{background-position: 0 -1440px;}
}
.img10 .msg11{
    width: 142px; 
    height: 94px;
    position: absolute;
    left: 52px;
    top: 50px;
    background: url(../images/prep/mm_counter0001.png);
    display: none;
}
.img10 .msg11[data-select="1"]{background: url(../images/prep/mm_counter0002.png);}
.img10 .msg11[data-select="2"]{background: url(../images/prep/mm_counter0003.png);}
.img10 .msg11[data-select="3"]{background: url(../images/prep/mm_counter0004.png);}
.img10 .msg11[data-select="4"]{background: url(../images/prep/mm_counter0005.png);}
.img10 .msg11[data-select="5"]{background: url(../images/prep/mm_counter0006.png);}
.img10 .msg11[data-select="6"]{background: url(../images/prep/mm_counter0007.png);}

.prep3 .penimg12{
    width: 510px;
    height: 946px;
    position: absolute;
    left: 375px;
    top: 202px;
    background: url(../images/prep/img12.png);
    display: none;
}
.continuebtn2{
    bottom: 10px;
    right: 10px;
    left: unset;
    display: none;
}
.penimg13{
    width: 457px;
    height: 934px;
    position: absolute;
    left: 375px;
    top: 202px;
    background: url(../images/prep/img13.png);
    display: none;
}

.prep5 .p51{top: 282px;left: 453px;transform: rotate(145deg);}
.prep5 .p52{top: 339px;left: 417px;transform: rotate(205deg);}
.prep5 .p53{top: 355px;left: 255px;transform: rotate(-112deg);}
.prep5 .p54{top: 311px;left: 214px;transform: rotate(-82deg);}
.prep5 .p55{top: 57px;left: 395px;transform: rotate(69deg);}
.prep5 .p56{top: 55px;left: 272px;}

.prep5 .c{
    width: 60px;
    height: 60px;
    position: absolute;
    top: 95px;
    left: 350px;
    cursor: pointer;
    display: none;
}
.prep5 .c1{top: 271px;left: 413px;}
.prep5 .c2{top: 301px;left: 399px;}
.prep5 .c3{top: 315px;left: 264px;}
.prep5 .c4{top: 282px;left: 233px;}
.prep5 .c5{top: 81px;left: 374px;}
.prep5 .c6{top: 80px;left: 274px;}

.penimg15{
    width: 955px;
    height: 704px;
    position: absolute;
    left: 375px;
    top: 202px;
    background: url(../images/prep/img14.png);
    display: none;
}
.penimg16{
    width: 569px;
    height: 929px;
    position: absolute;
    left: 375px;
    top: 202px;
    background: url(../images/prep/img15.png);
    display: none;
}
.page3img1{
    width: 82px;
    height: 120px;
    position: absolute;
    left: 214px;
    top: 166px;
    transform: scale(-1, 1);
    background: url(../images/twoweek/incision_left0032.png);
    display: none;
}
.page3img2{
    width: 82px;
    height: 120px;
    position: absolute;
    left: 403px;
    top: 171px;
    background: url(../images/twoweek/incision_left0032.png);
    display: none;
}
.page3img1.ani, .page3img2.ani{
    background: url(../images/twoweek/incision_left0119.png);
}


.cover1{
    width: 325px;
    height: 448px;
    position: absolute;
    left: 101px;
    top: 4px;
    background: url(../images/twoweek/cover1.png);
    display: none;
    transform: scale(.45);
}
.cover2{
    width: 270px;
    height: 322px;
    position: absolute;
    left: 320px;
    top: 60px;
    background: url(../images/twoweek/cover2.png);
    display: none;
    transform: scale(.42);
}

.cover3,.cover4{
    width: 467px;
    height: 153px;
    position: absolute;
    background: url(../images/twoweek/cover3.png);
    display: none;
    transform: scale(.42);
}
.cover3{
    left: 0px;
    top: 57px;
    transform: scale(.42) scale(-1, 1);
}
.cover4{
    left: 262px;
    top: 51px;
}


.page3img3{
    width: 149px;
    height: 41px;
    position: absolute;
    left: 154px;
    top: 111px;
    transform: scale(-1, 1);
    background: url(../images/twoweek/suture_clav0001.png);
    display: none;
}
.page3img4{
    width: 149px;
    height: 41px;
    position: absolute;
    left: 424px;
    top: 105px;
    background: url(../images/twoweek/suture_clav0001.png);
    display: none;
}
.page3img3.ani, .page3img4.ani{
    background: url(../images/twoweek/suture_clav0088.png);
}
.prep5 .p56 {
    top: 120px;
    left: 266px;
    transform: rotate(-8deg);
}
.prep5 .p55 {
    top: 115px;
    left: 405px;
    transform: rotate(69deg);
}
.prep5 .p51 {
    top: 230px;
    left: 444px;
    transform: rotate(160deg);
}
.prep5 .p52 {
    top: 301px;
    left: 390px;
    transform: rotate(205deg);
}
.prep5 .p54 {
    top: 235px;
    left: 232px;
    transform: rotate(-82deg);
}
.prep5 .p53 {
    top: 312px;
    left: 276px;
    transform: rotate(-125deg);
}
.prep5 .c1 {
    top: 215px;
    left: 403px;
}
.prep5 .c2 {
    top: 274px;
    left: 375px;
}
.prep5 .c3 {
    top: 283px;
    left: 270px;
}
.prep5 .c4 {
    top: 210px;
    left: 239px;
}
.prep5 .c5 {
    top: 117px;
    left: 374px;
}
.prep5 .c6 {
    top: 121px;
    left: 274px;
}
.twoweekslater .interact_face .msg2{
    width: 232px;
    height: 85px;
    position: absolute;
    left: 62px;
    top: -44px;
    background: url(../images/introduction/msg2.png);
    background-size: 100% 100%;
}
.twoweekslater .interact_face .msg2 .text{
    width: 205px;
}
.beginsurgery .interact_face{
    display: none;
}
.surgeryprep .interact_face{
    display: none;
}

.surgeryprep .interact_face .msg2.w{
    width: 200px;
    background-size: 100% 100%;
}

.surgeryprep .interact_face .w .text{
    width: 187px;
}
#videobegins10{
    position: absolute;
    width: 132px;
    height: 260px;
    left: 365px;
    top: 135px;
    display: none;
}
#videobegins9{
    position: absolute;
    width: 132px;
    height: 258px;
    left: 200px;
    top: 137px;
    transform: scale(-1, 1);
    border-top-left-radius: 45px;
    display: none;
}

.begins1 .k1{
    top: 174px;
    left: 220px;
    transform: rotate(-2deg);
}
.begins1 .k2{
    top: 210px;
    left: 216px;
    transform: rotate(-45deg);
}
.begins1 .k3{
    top: 247px;
    left: 227px;
    transform: rotate(-76deg);
}
.begins1 .k4{
    top: 174px;
    left: 442px;
    transform: rotate(-256deg);
}
.begins1 .k5{
    top: 207px;
    left: 445px;
    transform: rotate(-224deg);
}
.begins1 .k6{
    top: 246px;
    left: 436px;
    opacity: 0.5;
    transform: rotate(-194deg);
}


.begins1 .b{
    position: absolute;
    width: 40px;
    height: 20px;
    display: none;
    cursor: pointer;
}
.begins1 .b1{
    top: 191px;
    left: 228px;
    transform: rotate(32deg);
}
.begins1 .b2{
    top: 217px;
    left: 223px;
    transform: rotate(0deg);
}
.begins1 .b3{
    top: 250px;
    left: 233px;
    transform: rotate(-32deg);
}
.begins1 .b4{
    top: 183px;
    left: 436px;
    transform: rotate(-32deg);
}
.begins1 .b5{
    top: 216px;
    left: 436px;
    transform: rotate(0deg);
}
.begins1 .b6{
    top: 246px;
    left: 423px;
    opacity: 0.5;
    transform: rotate(32deg);
}

.screen6{
    background: url(../images//loading.png);
    background-size: 100% 100%;
}

.introductionLast,.testing1,.testing2{
    position: absolute;
    width: 740px;
    height: 403px;
    left: 0px;
    top: 0px;
    background: url(../images/img/bg1.png);
}
.testing2{
    background: url(../images/img/bg2.png);
    display: none;
}
.intro-img1 {
    position: absolute;
    width: 230px;
    height: 240px;
    left: 247px;
    top: 40px;
    background: url(../images/img/img1.png);
    display: none;
}

.intro-img2 {
    position: absolute;
    width: 222px;
    height: 240px;
    left: 484px;
    top: 40px;
    background: url(../images/img/img2.png);
    display: none;
}

.intro-img3 {
    position: absolute;
    width: 253px;
    height: 236px;
    left: 247px;
    top: 42px;
    background: url(../images/img/img3.png);
    display: none;
}

.intro-img4 {
    position: absolute;
    width: 258px;
    height: 299px;
    left: 470px;
    top: 18px;
    background: url(../images/img/img4.png);
    display: none;
}

.intro-img5 {
    position: absolute;
    width: 466px;
    height: 243px;
    left: 244px;
    top: 39px;
    background: url(../images/img/img5.png);
    display: none;
}

.intro-img6 {
    position: absolute;
    width: 282px;
    height: 166px;
    left: 320px;
    top: 40px;
    background: url(../images/img/img6.png);
    display: none;
}

.testing-img1{
    position: absolute;
    width: 466px;
    height: 243px;
    left: 244px;
    top: 39px;
    background: url(../images/img/img5.png);
    display: none;
}
.testing-img2{
    position: absolute;
    width: 304px;
    height: 201px;
    left: 332px;
    top: 46px;
    background: url(../images/img/img7.png);
    display: none;
}
.testing-img3{
    position: absolute;
    width: 194px;
    height: 258px;
    left: 266px;
    top: 36px;
    background: url(../images/img/img8.png);
    display: none;
}
.testing-img4{
    position: absolute;
    width: 194px;
    height: 258px;
    left: 498px;
    top: 36px;
    background: url(../images/img/img9.png);
    display: none;
}



#videoTesting1 {
    position: absolute;
    width: 749px;
    height: 424px;
    z-index: 11;
    left: -2px;
    top: -11px;
    z-index: 1;
}
.surgeon1 {
    display: none;
}

.twoweekslater .page4{
    background: url(../images/img/bg3.png);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: none;
}
.greyoverlay{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(128, 128, 106, 0.5);
    display: none;
}
.greyoverlay img{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 166px;
    right: 0px;
    margin: auto;
}
.newimg11{
    position: absolute;
    width: 268px;
    height: 287px;
    left: 466px;
    top: 5px;
    background: url(../images/img/img11.png);
    display: none;
}
.newimg12{
    position: absolute;
    width: 170px;
    height: 138px;
    left: 170px;
    top: 78px;
    background: url(../images/img/img12.png);
    display: none;
}
.newimg12.ani{
    animation: newimg12 0.5s linear forwards;
}
@keyframes newimg12 {
    100%{
        left: 299px;
        top: 240px;
        transform: rotateZ(51deg) rotateY(-60deg) scale(.5);
        opacity: 0.7;
    }
}
.newimg13{
    position: absolute;
    width: 279px;
    height: 195px;
    left: 397px;
    top: 115px;
    background: url(../images/img/img13.png);
    display: none;
}
.twoweekslater .surgeon1.zoom1 {
    top: 176px;
    left: -11px;
    transform: scale(1.80);
}

.twoweekslater .page5{
    background: url(../images/twoweek/bg1.png);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: none;
}

.newcutimg1,.newcutimg3{
    position: absolute;
    width: 52px;
    height: 120px;
    left: 255px;
    top: 155px;
    background: url(../images/img/open_wound0059.png);
    display: none;
}
.newcutimg2,.newcutimg4{
    position: absolute;
    width: 52px;
    height: 120px;
    left: 255px;
    top: 155px;
    background: url(../images/img/open_wound0002.png);
}
.newcutimg3{
    left: 404px;
    top: 160px;
    transform: scale(-1, 1);
}
.newcutimg4{
    left: 404px;
    top: 160px;
    transform: scale(-1, 1);
}
.activity4{
    background: url(../images/img/bg5.png);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 3;
}
.man_mask{
    position: absolute;
    width: 54px;
    height: 41px;
    left: 200px;
    top: 162px;
    background: url(../images/img/sprite1.png);
    transform: scale(1.7);
    animation: man_mask 1s steps(14) infinite;
}
@keyframes man_mask {
    0%{background-position: 0 0; }
    100%{ background-position: 0 -574px;}
}
.man_eye{
    position: absolute;
    width: 45px;
    height: 18px;
    left: 213px;
    top: 135px;
    background: url(../images/img/eyes0001.png);
    transform: scale(1.8);
    animation: man_eye 2s linear infinite;
}
@keyframes man_eye {
    0%{background: url(../images/img/eyes0001.png);transform: scale(1.8); }
    95%{background: url(../images/img/eyes0001.png);transform: scale(1.8); }
    96%{background: url(../images/img/eyes0201.png); transform: scale(1.8);}
    100%{background: url(../images/img/eyes0201.png);transform: scale(1.8); }
}
.man_glass{
    position: absolute;
    width: 44px;
    height: 18px;
    left: 212px;
    top: 130px;
    background: url(../images/img/img14.png);
    transform: scale(1.9);
}
.prep8,.prep9,.prep10,.prep31,.prep32,.begins4,.conclusion1,.conclusion2,.conclusion3,.video3page{
    background: url(../images/img/bg6.png);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: none;
}
.prep9{
    background: url(../images/img/bg7.png);
}
.prep31{
    background: url(../images/img/bg9.png);
}
.prep10,.prep32{
    background: url(../images/img/bg1.png);
}
.begins4{
    background: url(../images/img/bg10.png);
}
.prep9.zoom{
    background: url(../images/img/bg8.png);
}
.video3page{
    background: url(../images/img/bg18.png);
}
.surgeryprep .surgeon1{
    left:0px;
}
.prep8img15{
    position: absolute;
    width: 583px;
    height: 117px;
    left: 85px;
    top: 130px;
    background: url(../images/img/img15.png);
    display: none;
}
.prep10img16,.prep3img17{
    position: absolute;
    top: 39px;
    left: 244px;
}
.beginsurgery .surgeon1{
    left:0px;
}
.whiteoverlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.85;
}
.beginbg11,.beginbg12{
    position: absolute;
    top: 0px;
    left: 0px;
}
.beginimg18{
    position: absolute;
    top: 155px;
    left: 173px;
}
.conclusion1{
    background: url(../images/img/bg13.png);
}
.conclusion2{
    background: url(../images/img/bg14.png);
}

.conclusion1 .mouth1{
    width: 39px;
    height: 52px;
    position: absolute;
    background: url(../images/img/sprite2.png);
    top: 16px;
    left: 235px;
    transform: scale(1.1);
    animation: conclusion1mouth 2s steps(23) infinite;
}
@keyframes conclusion1mouth {
    0%{background-position: 0 0;}
    100%{background-position: -897px 0;}
}
.conclusion1 .eye1{
    width: 26px;
    height: 20px;
    position: absolute;
    background: url(../images/img/sprite3.png);
    top: 38px;
    left: 248px;
    animation: conclusion1eye1 4s steps(101) infinite;
    transform: scale(1.2);
}
@keyframes conclusion1eye1 {
    0%{background-position: 0 0;}
    100%{background-position: -2626px 0;}
}
.conclusion1 .eye2{
    width: 34px;
    height: 20px;
    position: absolute;
    background:transparent;
    top: 110px;
    left: 512px;
    animation: conclusion1eye2 4s linear infinite;
}
@keyframes conclusion1eye2 {
    0%{background: transparent;}
    90%{background: transparent;}
    91%{background: url(../images/img/img22.png);}
    94%{background: url(../images/img/img22.png);}
    95%{background: transparent;}
    100%{background: transparent;}
}
.conclusion1 .hand1{
    width: 69px;
    height: 112px;
    position: absolute;
    background: url(../images/img/img19.png);
    top: 89px;
    left: 293px;
}
.conclusion1 .hand2{
    width: 118px;
    height: 114px;
    position: absolute;
    background: url(../images/img/img21.png);
    top: 86px;
    left: 289px;
    display: none;
}
.conclusion1[data-zoom='1']{
    transform: scale(1.96);
    transform-origin: 0 0;
    left: -118px;
}
.conclusion1[data-zoom='2'] {
    transform: scale(1.9);
    transform-origin: 0 0;
    left: -623px;
    top: -130px;
}
.img23{
    position: absolute;
    top: -14px;
    left: 740px;
}
.img24{
    width: 505px;
    height: 485px;
    position: absolute;
    background: url(../images/img/img24.png);
    top: 40px;
    left: 140px;
}
.img24.write{
    background: url(../images/img/sprite4.png);
    animation: img24 2.5s steps(22) forwards;
}
@keyframes img24 {
    0%{background-position: 0 0;}
    100%{background-position: -11110px 0;}
}
.img25{
    width: 549px;
    height: 478px;
    position: absolute;
    background: url(../images/img/sprite5.png);
    top: 53px;
    left: 131px;
    animation: img25 3s 2s steps(31) forwards;
    display: none;
}
@keyframes img25 {
    0%{background-position: 0 0;}
    100%{background-position: -17019px 0;}
}

.img26{
    width: 500px;
    height: 557px;
    position: absolute;
    background: url(../images/img/img26.png);
    top: -79px;
    left: 745px;
}

.conclusion3, .conclusion3[data-bg="0"]{
    background: url(../images/img/bg15.png);
}
.conclusion3[data-bg="1"]{
    background: url(../images/img/bg16.png);
}
.conclusion3[data-bg="2"]{
    background: url(../images/img/bg17.png);
}
.img27{
    width: 780px;
    height: 515px;
    position: absolute;
    background: url(../images/img/img27.png);
    top: 37px;
    left: -63px;
}

.img27 .lefthand1{
    width: 123px; 
    height: 117px;
    position: absolute;
	left: 470px;
    top: 290px;
    background: url(../images/img/f_arm_02_back_scrubs0001.png);
    z-index: 1;
    transform: scale(2);
    animation: none;
}

.img27 .lefthand1[data-val="1"]{
    background: url(../images/img/f_arm_02_back_scrubs0021.png);
}
.img28{
    position: absolute;
    top: 200px;
    left: 547px;
    opacity: 0;
}
.img27 .man_mask{
    left: 309px;
    top: 114px;
}

.screen1{
    background: url(../images/img/bg19.png);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: none;
    background-size: 100% 100%;
}
.prep9 .lips{
    width: 100px; 
    height: 49px;
    position: absolute;
	left: 469px;
    top: 115px;
    background: url(../images/img/sprite6.png);
    z-index: 1;
    transform: scale(1.3) rotate(20deg);
    display: none;
    animation: lips 1s steps(10) infinite;
}
@keyframes lips {
    0%{background-position: 0 0;}
    100%{background-position: 0 -490px;}
}
.screen3Testing .surgeon1{
    z-index: 2;
}
.img29{
    position: absolute;
    top: 178px;
    left: 214px; 
    display: none;
}
.img30{
    position: absolute;
    top: 171px;
    left: 365px;
    display: none;
}