@font-face {
	font-family: 'Conv_ComicSansMS3';
	src: 	url('font/ComicSansMS3.eot'),
			url('font/ComicSansMS3.woff')format('woff'),
			url('fonts/ComicSansMS3.ttf') format('truetype'),
			url('fonts/ComicSansMS3.svg') format('svg');
	font-weight: normal;
}
@font-face {
	font-family: 'Conv_Oswald-Bold';
	src: url('font/oswald-bold.eot');
	src:url('font/oswald-bold.woff') format('woff'), url('font/oswald-bold.ttf') format('truetype'), url('font/oswald-bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
body {
	margin: 0px;
	padding: 0px;
	overflow-x: hidden;
}
body *:not(textarea):not(input){
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.disabled {
	cursor: default;
}

.tabbed:focus{
    box-shadow: 0px 0px 0px 2px #ffff00;
    border-radius: 2px !important;
    outline: 0;
}
.focus{
    box-shadow: 0px 0px 0px 2px #ffff00;
    border-radius: 2px !important;
    outline: 0;
}

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

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

.container a{
	text-decoration:none;
}
.container #mainGame {
	position: relative;
	width: 816px;
	height: 611px;
	overflow: hidden;
	border:1px solid #000000;
	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);
}
#mainGame .screen {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	display: none;
}
#mainGame .screen.active {
	display: block;
}

/*--------------------------------------------------------------preloader-------------------------------------------------------------*/
#preloader
{
	background:#FFFFFF;
}
#preloader .process 
{
    height: 66px;
    width: 142px;
	position:absolute;
	bottom:35px;
	left:0;
	right:0;
	margin:auto;
}
#preloader .process span
{
	font-size:28px;
	font-weight:bold;
	font-family:Arial;
	font-style:italic;
}
/*--------------------------------------------------------------screen1-------------------------------------------------------------*/
#screen1 
{
	background:url(../images/screen1/screen1bg.png) no-repeat;
	background-size:100% auto;
}

#screen1 .title
{
    font-size: 53px;
    font-family: Arial;
    position: absolute;
    top: 10px;
    left: 132px;
}
#screen1 .title .subtitle
{
    font-size: 40px;
    font-family: Arial;
    position: absolute;
    top: 54px;
    left: 236px;
}
.popup
{
	background:url(../images/screen1/mainpopup.svg) no-repeat;
    background-size: 100% 100%;
    width: 426px;
    height: 321px;
    position: absolute;
    top: 122px;
    left: 200px;
}
#screen1 .popup .pop1text 
{
    height: auto;
    width: auto;
    position: absolute;
    top: 46px;
    left: 40px;
    text-align: left;
}
#screen1 .popup .pop1text span
{
    font-size: 18px;
    font-family: Arial;
    letter-spacing: .1px;
	line-height: 20px;
}
#screen1 .popup .pop1text .playername
{
    border: 1px solid #000000;
    height: 16px;
    width: 248px;
    font-size: 17px;
    padding: 3px;
}

#screen1 .popup .pop1text .playername:focus
{
	border:none;
	outline:4px solid #ffff00;
}
#screen1 .popup .pop1text input::-webkit-input-placeholder 
{
	color:#000000;
	font-size:18px;
	font-style:italic;
	font-family:arial;
	padding:0;
}
#screen1 .popup .pop1text .inputdiv
{
	position:absolute;
	bottom:-12px;
	left:0;
}
.playername
{
    position: absolute;
    bottom: -12px;
    left: 68px;
}
.nxtbtndiv {
    height: 185px;
    width: 150px;
    position: absolute;
    bottom: 0px;
    right: 28px;
}


.nxtbtndiv:not(.disabled):active .arrowanimation{
	display:none;
}
.nextbtn{
	background:url(../images/screen1/next.svg) no-repeat;
    background-size: 100% auto;
    width: 136px;
    height: 216px;
    position: absolute;
    top:0;
    left:0;
    color: #330066;
	z-index:0;
	pointer-events:none;
}
.nxtbtndiv.disabled{
	opacity:0.6;
	cursor:default;
}
.nxtbtndiv:not(.disabled):hover .nextbtn,.nxtbtndiv:not(.disabled):focus .nextbtn{
	background:url(../images/screen1/next_hover.svg) no-repeat;
	background-size:100% auto;
}
.nxtbtndiv:not(.disabled):active .nextbtn{
	background:url(../images/screen1/next_active.svg) no-repeat;
	background-size:100% auto;
}
.nxtbtndiv .nextbtn span{
    font-family: Arial;
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    top: 74px;
    left: 23px;
	pointer-events:none;
}
.nxtbtndiv:not(.disabled):hover .nextbtn span,.nxtbtndiv:not(.disabled):focus .nextbtn span{
    transform:scale(1.10);
    -webkit-transform:scale(1.10);
    -moz-transform:scale(1.10);
    -ms-transform:scale(1.10);
    -o-transform:scale(1.10);
	top:65px;
}
.nxtbtndiv:not(.disabled):active .nextbtn span{
    transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
	top:74px;
}
.arrowanimation{
	background:url(../images/screen1/arrowanimation.png) no-repeat;
	width: 120px; height:146px;
	position:absolute;
    top: -2px;
    left: 28px;
	pointer-events:none;
}
.arrowanimation:hover{cursor:pointer;} 
 
 .nxtbtndiv:not(.disabled):hover .arrowanimation , .nxtbtndiv:not(.disabled):focus .arrowanimation{
	animation:arrowAnimation 0.8s steps(20) forwards;
	-webkit-animation:arrowAnimation 0.8s steps(20) forwards;
	-moz-animation:arrowAnimation 0.8s steps(20) forwards;
	-o-animation:arrowAnimation 0.8s steps(20) forwards;
	-ms-animation:arrowAnimation 0.8s steps(20) forwards;
}
@keyframes arrowAnimation {
  from{background-position: 0 0;}
   to{background-position:-2400px 0;}
}
@-webkit-keyframes arrowAnimation {
   from{background-position: 0 0;}
   to{background-position:-2400px 0;}
}
@-moz-keyframes arrowAnimation {
  from{background-position: 0 0;}
   to{background-position:-2400px 0;}
}
@-o-keyframes arrowAnimation {
  from{background-position: 0 0;}
   to{background-position:-2400px 0;}
}
@-ms-keyframes arrowAnimation {
  from{background-position: 0 0;}
   to{background-position:-2400px 0;}
}

/*--------------------------------------------------------------screen2-------------------------------------------------------------*/
#screen2{
	background:url(../images/screen2/bg.svg) no-repeat;
	background-size:100% 100%;
}
#screen2 .title{
	background:url(../images/screen2/popup1.svg) no-repeat;
    background-size: 100% 100%;
    width: 580px;
    height: 78px;
    position: absolute;
    top: 14px;
    left: 115px;
    color: #2e2f29;
}
#screen2 .title span{
    font-size: 18px;
    font-family: Arial;
    font-weight: 500;
    position: absolute;
    top: 14px;
    left: 42px;
}
.bgpop{
    height: 380px;
    width: 548px;
    position: absolute;
    top: 126px;
    left: 132px;
    font-family: Arial;
}
.bgpop .text1{
    font-size: 19px;
    font-weight: bold;
    position: absolute;
    top: 62px;
    left: 32px;
}
.bgpop .text2{
    font-size: 18px;
    position: absolute;
    top: 102px;
    left: 32px;
    letter-spacing: 0.1px;
    line-height: 1.3;
}
.bgpop .text3{
    font-size: 18px;
    position: absolute;
    top: 193px;
    left: 32px;
    letter-spacing: 0.1px;
    line-height: 1.3;
}
.bgpop .text4{
	font-size: 18px;
    position: absolute;
    top: 306px;
    left: 32px;
	letter-spacing: 0.1px;
	line-height: 1.3;
}

#screen2 .cardboard
{
    height: 397px;
    width: 559px;
    position: absolute;
    left: 113px;
    top: 127px;
	display: none;
}
.cardboard .cardbg{ position:absolute;}
.cardboard .cardbg .card
{
	background:url(../images/button/cartooncard_btn/card.svg) no-repeat;
	background-size:100% 100%;
	width: 97px;
    height: 132px;
	position:absolute;
	z-index:1;
}
.cardboard .card:hover{
	transform:scale(1.08);
	-webkit-transform:scale(1.08);
	-moz-transform:scale(1.08);
	-ms-transform:scale(1.08);
	-o-transform:scale(1.08);
	cursor:pointer;
}
.cardboard .card:focus{
	transform:scale(1.08);
	-webkit-transform:scale(1.08);
	-moz-transform:scale(1.08);
	-ms-transform:scale(1.08);
	-o-transform:scale(1.08);
}
.cardboard .card:active{
	background:url(../images/button/cartooncard_btn/card_active.svg) no-repeat;
	background-size:100% 100%;
	transform:scale(1);
}
.cardboard .cardbg .design{
	background-size: 100% 100%;
    width: 83px;
    height: 123px;
    position: absolute;
    top: 4px;
    left: 7px;
}
.cardboard .cardbg .design.cross{background:url(../images/button/cartooncard_btn/card_cross.svg) no-repeat;}
.cardboard .cardbg .design.pantagon{background:url(../images/button/cartooncard_btn/card_pantagon.svg) no-repeat;}
.cardboard .cardbg .design.circule{background:url(../images/button/cartooncard_btn/card_circle.svg) no-repeat;background-size:100% 100%;}
.cardboard .cardbg .design.rectangle{background:url(../images/button/cartooncard_btn/card_ractangle.svg) no-repeat;}
.cardboard .cardbg .design.square{background:url(../images/button/cartooncard_btn/card_square.svg) no-repeat;}
.cardboard .cardbg .design.star{background:url(../images/button/cartooncard_btn/card_star.svg) no-repeat;}
.cardboard .cardbg .design.triangle{background:url(../images/button/cartooncard_btn/card_triangle.svg) no-repeat;}
.cardboard .cardbg .design.zigzag1{background:url(../images/button/cartooncard_btn/card_zigzag1.svg) no-repeat;}
.cardboard .cardbg .design.zigzag2{background:url(../images/button/cartooncard_btn/card_zigzag2.svg) no-repeat;}

.cardboard .cardbg.one{
	top:0;
	left:0;
}
.cardboard .cardbg.two{
	top:0;
	left:92px;
}
.cardboard .cardbg.three{
	top:0;
	left:184px;
}
.cardboard .cardbg.four{
	top:0;
	left:276px;
}
.cardboard .cardbg.five{
	top:0;
	left:368px;
}
.cardboard .cardbg.six{
	top:0;
	left:460px;
}
.cardboard .cardbg.seven{
    top: 132px;
	left:0;
}
.cardboard .cardbg.eight{
    top: 132px;
	left:92px;
}
.cardboard .cardbg.nine{
    top: 132px;
	left:184px;
}
.cardboard .cardbg.ten{
    top: 132px;
	left:276px;
}
.cardboard .cardbg.eleven{
    top: 132px;
	left:368px;
}
.cardboard .cardbg.twelve{
    top: 132px;
	left:460px;
}
.cardboard .cardbg.thirteen{
    top: 263px;
	left:0;
}
.cardboard .cardbg.fourteen{
    top: 263px;
	left:92px;
}
.cardboard .cardbg.fifteen{
    top: 263px;
	left:184px;
}
.cardboard .cardbg.sixteen{
    top: 263px;
	left:276px;
}
.cardboard .cardbg.seventeen{
    top: 263px;
	left:368px;
}
.cardboard .cardbg.eightteen{
    top: 263px;
	left:460px;
}
/*------------btnnext------------*/
.btn{
	background:url(../images/button/next_btn/btn.svg) no-repeat;
	background-size:100% 100%;
    width: 110px;
    height: 40px;
	color:#ffffff;
	font-family:arial;
	position: absolute;
}
.btn.disabled{
	opacity: 0.5;
	cursor:default;
}
.btn:not(.disabled):hover,.btn:not(.disabled):focus{
	background-size:100% 100%;
	transform:scale(1.07);
	-webkit-transform:scale(1.07);
	-moz-transform:scale(1.07);
	-ms-transform:scale(1.07);
	-o-transform:scale(1.07);
	transform-origin: left bottom;
	-webkit-transform-origin: left bottom;
	-moz-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	-o-transform-origin: left bottom;
}
.btn:not(.disabled):active{
	background:url(../images/button/next_btn/btn3.svg) no-repeat;
	background-size:100% 100%;
    transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
}

.btn span {
    font-size: 19px;
    position: absolute;
    top: 9px;
    left: 19px;
}
#screen8 .btn.skipbtn {
    bottom: 11px;
    right: 17px;
    z-index: 10;
}
#screen2 .btn.nextbtn1{
    bottom: 23px;
    right: 32px;
}
/*--------------------------------------------------------------screen3-------------------------------------------------------------*/
#screen3{
	background:url(../images/screen3/bg.png) no-repeat;
	background-size:100% 100%;
}
#screen3 .nxtbtndiv.nextbtn2 {
    right: 5px;
    bottom: 0px;
}
#screen3 .pop{
	background:url(../images/screen3/pop.svg) no-repeat;
	background-size:100% 100%;
    width: 502px;
    height: 240px;
    position: absolute;
    top: 5px;
    left: 160px;
    z-index: 1;
}
#screen3 .pop span{
    font-size: 18px;
    font-family: Arial;
    position: absolute;
    top: 52px;
    left: 70px;
	letter-spacing: 0.1px;
}
.boy1{
	background:url(../images/screen3/boy1.png) no-repeat;
    background-size: 100% 100%;
    width: 353px;
    height: 410px;
    position: absolute;
    bottom: -1px;
    left: -19px;
}
.pannyparktxt{
    height: 242px;
    width: 186px;
    position: absolute;
    top: 258px;
    left: 445px;
}
.pannyparktxt .text1{
    font-size: 37px;
    font-family: impact;
    position: absolute;
    top: 13px;
    left: 10px;
    color: #333366;
}
.pannyparktxt .text2{
    font-size: 23px;
    font-family: Arial;
    position: absolute;
    top: 188px;
    left: 38px;
    color: #003333;
    font-weight: bold;
    letter-spacing: 4px;
    -moz-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
    line-height: 1; 
	font-style: italic;
	text-align: center;
}

/*--------------------------------------------------------------screen4-------------------------------------------------------------*/
#screen4{
	background:url(../images/screen3/bg.png) no-repeat;
	background-size:100% 100%;
}
.nxtbtndiv.nextbtn2 {
    right: 5px;
    bottom: 0px;
}
.pop1{
	background:url(../images/screen4/pop.svg) no-repeat;
	background-size: 100% 100%;
    width: 330px;
    height: 224px;
    position: absolute;
    top: 24px;
    left: 22px;
    z-index: 1;
	color:#002b00;
}
.pop1 span{
    font-size: 18px;
    font-family: Arial;
    position: absolute;
    top: 39px;
    left: 26px;
}
.pop2{
    background: url(../images/screen4/pop2.svg) no-repeat;
    background-size: 100% 100%;
    width: 446px;
    height: 126px;
    position: absolute;
    top: 56px;
    right: 10px;
    z-index: 1;
    color: #000000;
}
.pop2 .text1{
    font-size: 19px;
    font-family: Arial;
    position: absolute;
    top: 28px;
    left: 59px;
	color: #006600;
}
.dropdown{
    height: 25px;
    width: 392px;
    border: 2px solid #000000;
    position: absolute;
    top: 61px;
    left: 29px;
	color: #000000;
	background: url(../images/screen4/droparrow.svg) no-repeat #ffffff right;
	text-align:center;font-family: arial;
    font-size:18px;
	line-height: 26px;
	background-position: top right;
}
.dropdown.disabled{
	opacity:0.5;
	cursor:default;
}
.dropdown:not(.disabled):hover{
	background: url(../images/screen4/droparrow.svg) no-repeat #000000 right;
	color:#ffffff;
	z-index:1;
	cursor:pointer;
}
.dropdown:not(.disabled):focus{
    background: url(../images/screen4/droparrow.svg) no-repeat #000000 right;
	color:#ffffff;
}

.select{
	background: #ffffff;
	height:66px;
	width: 392px;
	position:absolute;
    top: 91px;
    left: 29px;
	font-size:18px;
	text-align:center;
	display:none;
	z-index: 6;
}
.select .option{
	background: #ffffff;
    height: 22px;
    width: 390px;
    border: 2px solid #000000;
    color: #000000;
	font-size:18px;
	width:100%;
	display:block;
	text-align:center;
    font-family: arial;
	position:absolute;
	left:0;
}
.select .option:hover,.select .option:focus{
	background: #000000;
	color:#ffffff;
	border: 2px solid #fff;
	cursor:pointer;
}
.select .option1{top:-3px;}
.select .option2{top:21px;}
.select .option3{top:45px;}
.boy2{
	background:url(../images/screen4/boy2.svg) no-repeat;
    background-size: 100% 100%;
    width: 334px;
    height: 410px;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

/*--------------------------------------------------------------screen5-------------------------------------------------------------*/
#screen5{
	background:url(../images/screen3/bg.png) no-repeat;
	background-size:100% 100%;
}
.boy2{
	background:url(../images/screen4/boy2.png) no-repeat;
    background-size: 100% 100%;
    width: 353px;
    height: 410px;
    position: absolute;
    bottom: -1px;
    left: -19px;
}
/*--------------------------------------------------------------screen6-------------------------------------------------------------*/
#screen6{
	background:url(../images/screen3/bg.png) no-repeat;
	background-size:100% 100%;
}
.pop2.poptwo{
	width: 407px;
    height: 160px;
    position: absolute;
    top: 58px;
    right: 26px;
}
.pop2.poptwo .text1{
	font-size: 19px;
    font-family: Arial;
    position: absolute;
    top: 22px;
    left: 38px;
	color: black;
}
.pop2.poptwo .text2{
    font-size: 19px;
    font-family: Arial;
    position: absolute;
    top: 53px;
    left: 38px;
}
/*--------------------------------------------------------------screen7-------------------------------------------------------------*/
#screen7{
	background:url(../images/screen3/bg.png) no-repeat;
	background-size:100% 100%;
}
/*--------------------------------------------------------------screen8-------------------------------------------------------------*/
#screen8{
/* 	background:url(../images/screen5/bg.svg) no-repeat;
	background-size:100% 100%; */
}
.boypop{
	background:url(../images/screen5/boypopup.png) no-repeat;
	background-size:100% 100%;
    width: 498px;
    height:164px;
    position: absolute;
    top: 200px;
	left:126px;
    z-index: 15;
}
.overlay{
	background:rgba(0,0,0,.5);
	position:absolute; 
	height:100%; 
	width:100%; 
	top:0; 
	left:0;
    z-index: 14;
}
.boypop span{
    font-size: 19px;
    font-family: Arial;
    position: absolute;
    top: 55px;
    left: 155px;
}
.closebtn{
	background:url(../images/screen5/closebtn/btn1.svg) no-repeat;
	background-size:100% 100%;
    width: 39px;
    height: 34px;
    position: absolute;
    top: 32px;
    right: 18px;
	color:transparent;
}
.closebtn:hover,.closebtn:focus{
	transform:scale(1.1);
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
}
.closebtn:active{
	background:url(../images/screen5/closebtn/btn3.svg) no-repeat;
	background-size:100% 100%;
	transform:scale(1);
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
}
.pannylogo{
	background:url(../images/screen5/panny.svg) no-repeat;
	background-size:100% 100%;
    width: 129px;
    height: 169px;
    position: absolute;
    top: 5px;
    left: 5px;
} 
 .pannylogo .text1{
    font-size: 23.5px;
    font-family: impact;
    position: absolute;
    top: 10px;
    left: 8px;
    color: #333366;
}
 .pannylogo .text2{
    font-size: 16px;
    font-family: Arial;
    position: absolute;
    top: 118px;
    left: 27px;
    color: #043636;
    font-weight: bold;
    letter-spacing: 1.5px;
    font-style: italic;
}
 .element1{
	/* background:url(../images/screen5/map/1.svg) no-repeat;
    background-size: 100% 100%; */
    width: 238px;
    height: 138px;
    position: absolute;
    bottom: 145px;
    left: 2px;
    z-index: 1;
}
 .element2{
/* 	background:url(../images/screen5/map/2.svg) no-repeat;
    background-size: 100% 100%;
 */    width: 192px;
    height: 212px;
    position: absolute;
    bottom: 238px;
    left: 81px;
}
 .element3{
/* 	background:url(../images/screen5/map/3.svg) no-repeat;
    background-size: 100% 100%; */
    width: 262px;
    height: 147px;
    position: absolute;
    top: 64px;
    left: 148px;	
}

.element4 {
/*     background: url(../images/screen5/map/4.svg) no-repeat;
    background-size: 100% 106%; */
    width: 392px;
    height: 151px;
    position: absolute;
    top: 110px;
    right: 40px;
    z-index: 2;
}
 #screen8 .home,#screen12 .home{
	background:url(../images/screen5/map/home.svg) no-repeat;
    background-size: 100% 100%;
    width: 125px;
    height: 102px;
    position: absolute;
    top: 99px;
    right: 103px;
	z-index	:12;
	display:none;
	cursor:pointer;
}
#screen8 .coloranimate,#screen12 .coloranimate{
	background:url(../images/glow.svg) no-repeat;
    background-size: 100% 100%;
    z-index: 1;
    width: 138px;
    height: 105px;
    position: absolute;
    opacity: 0;
    animation: blink 0.8s infinite;
    -webkit-animation: blink 0.8s infinite;
    -moz-animation: blink 0.8s infinite;
    -ms-animation: blink 0.8s infinite;
    -o-animation: blink 0.8s infinite;
    top: 102px;
    z-index: 10;
    right: 97px;	
	cursor:pointer;
	display:none;
}
#screen12 .home{
	display:block;
}
@keyframes blink{0%{opacity:0;}25%{opacity:0.5;}50%{opacity:1;}75%{opacity:0.5;}100%{opacity:0;}}
@-webkit-keyframes blink{0%{opacity:0;}25%{opacity:0.5;}50%{opacity:1;}75%{opacity:0.5;}100%{opacity:0;}}
@-moz-keyframes blink{0%{opacity:0;}25%{opacity:0.5;}50%{opacity:1;}75%{opacity:0.5;}100%{opacity:0;}}
@-ms-keyframes blink{0%{opacity:0;}25%{opacity:0.5;}50%{opacity:1;}75%{opacity:0.5;}100%{opacity:0;}}
@-o-keyframes blink{0%{opacity:0;}25%{opacity:0.5;}50%{opacity:1;}75%{opacity:0.5;}100%{opacity:0;}}

 .element5{
/* 	background:url(../images/screen5/map/5.svg) no-repeat;
    background-size: 100% 100%; */
    width: 204px;
    height: 169px;
    position: absolute;
    top: 291px;
    right: 186px;
    z-index: 2;
}
 .element6{
/* 	background:url(../images/screen5/map/6.svg) no-repeat;
    background-size: 100% 100%; */
    width: 256px;
    height: 218px;
    position: absolute;
    top: 177px;
    right: 4px;
}
 .element7{
/* 	background:url(../images/screen5/map/7.svg) no-repeat;
    background-size: 100% 100%; */
    width: 238px;
    height: 247px;
    position: absolute;
    top: 345px;
    right: -3px;	
}
 .element8{
/* 	background:url(../images/screen5/map/8.svg) no-repeat;
    background-size: 100% 100%; */
	width: 295px;
    height: 178px;
    position: absolute;
    bottom: 14px;
    right: 187px;
}
 .element9{
/* 	background:url(../images/screen5/map/9.svg) no-repeat;
    background-size: 100% 100%; */
    width: 303px;
    height: 284px;
    position: absolute;
    top: 149px;
    left: 152px;	
}
.man{
 	background:url(../images/boy.png) no-repeat;
	width: 30px;
	height: 21px;
    position: absolute;
    bottom: 41px;
    left: 44px;
}
.man.manAnimate{
	animation:manAnimate 0.5s steps(2) infinite;
	-webkit-animation:manAnimate 0.5s steps(2) infinite;
	-moz-animation:manAnimate 0.5s steps(2) infinite;
	-ms-animation:manAnimate 0.5s steps(2) infinite;
	-o-animation:manAnimate 0.5s steps(2) infinite;
}
@keyframes manAnimate{
	from{background-position: 0 0;}
	to{background-position: -60px 0;}
}
@-webkit-keyframes manAnimate {
 from{background-position: 0 0;}
	to{background-position: -60px 0;}
}
@-moz-keyframes manAnimate {
 from{background-position: 0 0;}
	to{background-position: -60px 0;}
}
@-o-keyframes manAnimate {
 from{background-position: 0 0;}
	to{background-position: -60px 0;}
}
.pop3{
	background:url(../images/screen5/pop.svg) no-repeat;
    background-size: 100% 100%;
    width: 390px;
    height: 90px;
    position: absolute;
    top: 4px;
    right: 11px;
}
.pop3 span{
    font-size: 19px;
    font-family: Arial;
    position: absolute;
    top: 16px;
    left: 25px;
}
.controller{
	width: 259px;
    height: 118px;
    position: absolute;
    bottom: 18px;
    left: 80px;
}
.controller .text1{
    width: 144px;
    height: 90px;
    font-size: 18px;
    font-family: Arial;
    position: absolute;
    top: 18px;
    left: 20px;
}
.controller .text2{
    width: 144px;
    height: 65px;
    font-size: 17px;
    font-family: Arial;
    position: absolute;
    top: 43px;
    left: 17px;
    line-height: 1.12;
}
.controller .buttons{
    width: 103px;
    height: 103px;
    position: absolute;
    top: 7px;
    right: 1px;
	z-index: 11;
}
.controller .buttons .btns{
	background:url(../images/screen5/button/btn1.svg) no-repeat;
    background-size: 100% 100%;
    width: 42px;
    height: 47px;
    position: absolute;
}
.controller .buttons .btns:hover{
	background:url(../images/screen5/button/btn2.svg) no-repeat;
    background-size: 100% 100%;
}
.controller .buttons .btns:focus{
	background:url(../images/screen5/button/btn2.svg) no-repeat;
    background-size: 100% 100%;
}	
.controller .buttons .btns:active{
	background:url(../images/screen5/button/btn3.svg) no-repeat;
    background-size: 100% 100%;
}
.controller .buttons .btns.up{
	left: 29px;
    top: -4px;
}
.controller .buttons .btns.down{
    bottom: -6px;
    left: 26px;
	-o-transform: rotate(180deg); 
	-ms-transform: rotate(180deg); 
	-moz-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.controller .buttons .btns.left{
	left: -6px;
    top: 27px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg); 
	-ms-transform: rotate(-90deg); 
	-o-transform: rotate(-90deg); 
}
.controller .buttons .btns.right{
	right:0;
	top: 27px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg); 
	-ms-transform: rotate(90deg); 
	-o-transform: rotate(90deg); 
}
.controller .buttons .btns.active{
	background:url(../images/screen5/button/btn3.svg) no-repeat;
    background-size: 100% 100%;
}

/*--------------------------------------------------------------screen9-------------------------------------------------------------*/
#screen9{
/* 	background:url(../images/screen6/bg.svg) no-repeat;
	background-size:100% 100%; */
}
.boyone{
    width: 348px;
    height: 402px;
    left: -3px;
    bottom: 0px;
}
 .pannylogo.panny{
    width: 147px;
    height: 195px;
    top: 202px;
    left: 125px;
}
 .panny .txt1{
	font-size: 28px;
    font-family: 'Conv_Oswald-Bold';
    position: absolute;
    top: 5px;
    left: 10px;
    color: #404070;
    font-weight: bolder;
	width: 130px;
	white-space: nowrap;
}
 .pannylogo .txt2
{
    font-size: 18px;
    font-family: Arial;
    position: absolute;
    top: 136px;
    left: 34px;
    color: #043636;
    font-weight: bold;
    letter-spacing: 1.5px;
    font-style: italic;
}
 .nxtbtndiv.nextbtn3 {
    right: 26px;
    bottom:0px;
}
 .pop4{
	background:url(../images/screen6/pop.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    width: 369px;
    height: 141px;
    top: 159px;
    left: 231px;
}
.pop4 span{
    font-size: 19px;
    font-family: Arial;
    position: absolute;
    top: 34px;
    left: 56px;
}
/*--------------------------------------------------------------screen10-------------------------------------------------------------*/
#screen10{
/* 	background:url(../images/screen6/bg.svg) no-repeat;
	background-size:100% 100%; */
}
#screen10 .pop4.popfour{
    position: absolute;
    width: 343px;
    height: 164px;
    top: 133px;
    left: 226px;
}
#screen10 .pop4.popfour span{
    top: 29px;
    left: 46px;
}

/*--------------------------------------------------------------screen11-------------------------------------------------------------*/
#screen11{
/* 	background:url(../images/screen6/bg.svg) no-repeat;
	background-size:100% 100%; */
}
#screen11 .pop4.popfive{
    position: absolute;
    width: 354px;
    height: 316px;
    top: 72px;
    left: 218px;
}
#screen11 .pop4.popfive span{
    top: 51px;
    left: 51px;
}
/*--------------------------------------------------------------screen12-------------------------------------------------------------*/
#screen12
{
	background:url(../images/screen5/bg.svg) no-repeat;
	background-size:100% 100%;
}
.boypop.boypopone span{
    top: 55px;
    left: 144px;
}
.pop3.popthree
{
    width: 417px;
    height: 91px;
    top: -3px;
    right: -16px;
}
.redlight{
	background:url(../images/redlight.png) no-repeat;
    position: absolute;
    width: 47px; 
	height: 47px;
	z-index: 11;
	cursor:pointer;
	white-space: pre;
}
.redlight.active{
	cursor:default;
}
.redlight.ani{
	animation:redlight .8s steps(19) infinite;
	-webkit-animation:redlight .8s steps(19) infinite;
	-moz-animation:redlight .8s steps(19) infinite;
	-ms-animation:redlight .8s steps(19) infinite;
	-o-animation:redlight .8s steps(19) infinite;
}
@keyframes redlight
{
	from{background-position: 0 0;}
	to{background-position: -893px 0;}
}
@-webkit-keyframes redlight {
  from{background-position: 0 0;}
	to{background-position: -893px 0;}
}
@-moz-keyframes redlight {
 from{background-position: 0 0;}
	to{background-position: -893px 0;}
}
@-ms-keyframes redlight {
 from{background-position: 0 0;}
	to{background-position: -893px 0;}
}
@-o-keyframes redlight {
 from{background-position: 0 0;}
	to{background-position: -893px 0;}
}
.redlight.disabled
{
	animation:none;
	-webkit-animation:none;
	-moz-animation:none;
	-ms-animation:none;
	-o-animation:none;
}
.redlight.disabled .complete
{
	background:url(../images/right.svg) no-repeat;
	background-size:100% 100%;
	position:absolute;
    width: 35px;
    height: 35px;
    top: -12px;
    left: 21px;
}
.redlight.one {
    top: 59px;
    left: 196px;
}
.redlight.two{
    top: 247px;
    left: 50px;
}
.redlight.three{
    top: 246px;
    right: 261px;
}
.redlight.four{
    bottom: 52px;
    left: 372px;
}
.redlight.five{
    bottom: 22px;
    left: 571px;
}
/*--------------------------------------------------------------screen13-------------------------------------------------------------*/
#screen13{
	background:url(../images/screen7/bg.svg) no-repeat;
	background-size:100% 100%;
}
.warningtxt{
	font-size: 19px;
    font-family: Arial;
    position: absolute;
    top: 21px;
    right: 53px;
}
.popupfour{
	background:url(../images/screen7/pop.svg) no-repeat;
	background-size:100% 100%;
    width: 307px;
    height: 64px;
    position: absolute;
    top: 14px;
    left: 13px;
}
.popupfour span{
    font-size: 19px;
    font-family: Arial;
    position: absolute;
    top: 13px;
    left: 32px;
}
.pic1{
/* 	background:url(../images/screen7/img01.svg) no-repeat;
	background-size:100% 100%; */
    width: 293px;
    height: 358px;
    position: absolute;
    top: 83px;
    left: 15px;
    color: #ffffff;
    font-family: arial;
}
.pic1 .text1{
    font-size: 52px;
    font-family: impact;
    position: absolute;
    top: 29px;
    left: 58px;
    transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
}
.pic1 .text2
{
	color: #660099;
    font-size: 21px;
    position: absolute;
    top: 110px;
    left: 52px;
    font-weight: bold;
    transform: rotate(-2deg);
    -webkit-transform: rotate(-17deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
}
 .pic1 .text3
{
    color: #98012b;
    font-size: 21px;
    position: absolute;
    top: 112px;
    left: 120px;
    font-weight: bold;
    transform: rotate(-2deg);
    -webkit-transform: rotate(11deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
}
.pic1 .text4
{
    color: #997700;
    font-size: 21px;
    position: absolute;
    top: 111px;
    left: 184px;
    font-weight: bold;
    transform: rotate(-2deg);
    -webkit-transform: rotate(-16deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
}
.pic1 .text5
{
    color: #004d99;
    font-size: 21px;
    position: absolute;
    top: 260px;
    left: 57px;
    font-weight: bold;
    transform: rotate(-2deg);
    -webkit-transform: rotate(16deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
}
.pic1 .text6
{
	color: #174b01;
    font-size: 21px;
    position: absolute;
    top: 259px;
    left: 187px;
    font-weight: bold;
    transform: rotate(-2deg);
    -webkit-transform: rotate(-18deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
}
.pic1 .text7
{
    color: #000000;
    font-size: 21px;
    position: absolute;
    top: 290px;
    left: 49px;
    font-family: impact;
    letter-spacing: 1px;
}
.board-area {
	height: 546px;
    width: 486px;
    position: absolute;
    top: 57px;
    left: 319px;
}
.question{
    font-size: 19px;
    font-family: Arial;
    position: absolute;
    font-weight: bold;
}
.question.one{ top: 18px;left: 10px;}
.question.two{top: 12px;left: 120px;}
.question.three{top: 12px;left: 233px;}
.question.four{top: 12px;left: 347px;}

.questionsarea{
	height: 400px;
    width: 400px;
    position: absolute;
    top: 62px;
    left: 40px;
}
.questionsarea .que{
    height: 65px;
    width: 400px;
    position: absolute;
    color: #002b00;
}
.questionsarea .que span{
	font-size: 19px;
    font-family: Arial;
    position: absolute;
	top: 0px;
    left:3px;
}
.questionsarea .que.one{
    top: 75px;
    left: -2px;
}
.questionsarea .que.two{
    top: 164px;
    left: -2px;
	display:none;
}
.questionsarea .que.three{
    top: 253px;
    left: -2px;
	display:none;
}
.questionsarea .que.four{
    top: 342px;
    left: -2px;
	display:none;
}
.questionsarea .dropdown.dropdownthree
{
    width: 368px;
    top: 23px;
    left: -2px;
}
.questionsarea .select.selectthree{
    width: 368px;
    top: 53px;
    left: -2px;
}
.select.selectthree span{
    left: 0px;
    width: 368px;
}

.select.selectthree .option1{top:-3px;}
.select.selectthree .option2{top:21px;}
.select.selectthree .option3{top:45px;}
.dropdown.dropdownthree.three{top:45px;}
.select.selectthree.three{top:74px;}
.questionsarea .mainquestion{
	font-size: 19px;
    font-family: Arial;
    position: absolute;
}
.questionsarea .que.queboard3{
	 height: 100px;
    width: 410px;
}

.questionsarea .que.queboard3.one{
    top: 56px;
    left: -3px;
}
.questionsarea .que.queboard3.two{
	top: 163px;
    left: -3px;
    display: block;
}
.questionsarea .que.queboard3.three{
    top: 295px;
    left: -3px;
	display:block;
}
.questionsarea .que .questiontxt.one{
    top: 134px;
    left: 5px;
    width: 407px;
}
.questionsarea .que .radio{
    height: 54px;
    width: 116px;
    position: absolute;
    top: 23px;
    font-size: 20px;
    font-family: Arial;
	left:-14px;
	white-space: nowrap;
}
.radio input[type=radio]{
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	-o-appearance:none;
	appearance:none;
	width:20px;
	height:20px;
	border:2px solid #000000;
	border-radius:50%;
	outline:none;
	background:#ffffff;
}
.radio input[type='radio']:not([disabled]):hover {
  transform:scale(1.05);
  -webkit-transform:scale(1.05);
  -moz-transform:scale(1.05);
  -ms-transform:scale(1.05);
  -o-transform:scale(1.05);
  cursor:pointer;
}
.radio input[type='radio']:focus {
  transform:scale(1.05);
  -webkit-transform:scale(1.05);
  -moz-transform:scale(1.05);
  -ms-transform:scale(1.05);
  -o-transform:scale(1.05);
  cursor:pointer;
}

.radio input[type='radio']:before {
  content:'';
  display:block;
  width:60%;
  height:60%;
  margin: 20% auto;    
  border-radius:50%;    
}
.radio input[type='radio']:checked:before {
  background:#000000;
}
.questionsarea .que .radio.radioone{
	top:45px
}
.questionsarea .que .radio.radiotwo{
	width:427px;
	font-size: 19px;
	top: 25px;
}
.feedback{
	border: 1px solid #000000;
    height: 68px;
    width: 289px;
    position: absolute;
    top: 25px;
    left: 112px;
    resize: none;
	font-family:arial;
}
.feedback.disabled{
	border: 1px solid #000000;
	outline:none;
}
.feedback:not(.disabled):focus{
	border:0px;
	outline:4px solid #ffff00;
}
 textarea::-webkit-input-placeholder{
	color:#000000;
	font-size:18px;
	font-style:italic;
}
.questionsarea .que .feedback.feedbackone{
	top:45px;
}
.questionsarea .que .feedback.feedbacktwo{
	top: 163px;
    left: -14px;
    width: 415px;
    height: 190px;
    font-family: arial;
}
.questionsarea .que .feedback.feedbacktwo::-webkit-input-placeholder{
	color:#000000;
	font-size:18px;
	font-style:italic;
}
.board-area .questionboard1{
	background:url(../images/screen7/board1.svg) no-repeat;
    background-size: 100% 100%;
    width: 457px;
    height: 524px;
    position: absolute;
    top: -5px;
    left:0px;
	z-index:4;
}
.questionboard1.disabled, .questionboard2.disabled, .questionboard3.disabled,.questionboard4.disabled{ opacity:0.5;} 

.board-area .questionboard2{
	background:url(../images/screen7/board2.svg) no-repeat;
    background-size: 100% 100%;
    width: 457px;
    height: 519px;
    position: absolute;
    top: 0px;
    left:0px;
	z-index:3;
}
.board-area .questionboard3
{
	background:url(../images/screen7/board3.svg) no-repeat;
    background-size: 100% 100%;
    width: 457px;
    height: 519px;
    position: absolute;
    top: 0px;
    left:0px;
	z-index:2;	
}


.board-area .questionboard4
{
	background:url(../images/screen7/board4.svg) no-repeat;
    background-size: 100% 100%;
    width: 457px;
	height: 519px;
    position: absolute;
    top: 0px;
    left:0px;
	z-index:1;
}
.popupfive
{
	background:url(../images/screen7/pop2.svg) no-repeat;
    background-size: 100% 100%;
    width: 309px;
    height: 165px;
    position: absolute;
    bottom: 4px;
    left: 5px;
    color: #002b00;
}
.popupfive span
{
	font-size:19px;
    font-family: Arial;
    position: absolute;
    top: 23px;
    left: 34px;
	width: 266px;
}
.btn.nextbtn2
{
    position: absolute;
    bottom: 10px;
    right: 15px;
    z-index: 5;
}
.boypoptwo
{    
	height: 180px;
    width: 535px;
    left: 104px;
    top: 212px;
	display:none;
}
.boypoptwo .boypoptwotxt
{
    top: 42px;
    left: 172px;
}
.btn.nextbtn4
{
	position: absolute;
    bottom: 3px;
    right: 5px;
}
.boypoptwo .nextbtn4 .nextbtntxt
{
	position:absolute;
    top: 10px;
    left: 20px;
}

.overlayone{display:none;}
.sendreportbtn
{
	background:url(../images/screen7/sendreportbtn/btn1.svg) no-repeat;
	background-size:100% 100%;
    width: 168px;
    height: 43px;
	color:#ffffff;
	font-family:arial;
	position: absolute;
    bottom: 10px;
    right: 15px;
    z-index: 4;
	display:none;
}
.sendreportbtn.disabled
{
	opacity: 0.5;
	cursor:default;
}
.sendreportbtn:not(.disabled):hover,.sendreportbtn:not(.disabled):focus
{
	background-size:100% 100%;
	transform:scale(1.07);
	-webkit-transform:scale(1.07);
	-moz-transform:scale(1.07);
	-ms-transform:scale(1.07);
	-o-transform:scale(1.07);
	transform-origin: center;
	-webkit-transform-origin: center;
	-moz-transform-origin: center;
	-ms-transform-origin: center;
	-o-transform-origin: center;
}
.sendreportbtn:not(.disabled):active
{
	background:url(../images/screen7/sendreportbtn/btn3.svg) no-repeat;
	background-size:100% 100%;
    transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
}

.sendreportbtn span{
    font-size: 19px;
    position: absolute;
    top: 11px;
    left: 23px;
}
/*--------------------------------------------------------------screen14-------------------------------------------------------------*/
#screen14{
	background:url(../images/screen7/bg.svg) no-repeat;
	background-size:100% 100%;
}
.pic2{
/* 	background:url(../images/screen7/img02.svg) no-repeat;
	background-size:100% 100%; */
    width: 293px;
    height: 358px;
    position: absolute;
    top: 83px;
    left: 15px;
    color: #ffffff;
    font-family: arial;
}
.pic2 .text1{
	color: #000000;
	font-size: 19px;
    position: absolute;
    top: 96px;
    left: 139px;
    font-family: arial;
    letter-spacing: 0px;
    font-weight: bold;
}
#screen14 .board-area .questionboard1 .que.two .select.selectthree.two{
	height:92px;
}
#screen14 .board-area .questionboard1 .que.two .select.selectthree.two .option.option1{
	height: 43px;
}
#screen14 .board-area .questionboard1 .que.two .select.selectthree.two .option.option2{
	top:42px;
}
#screen14 .board-area .questionboard1 .que.two .select.selectthree.two .option.option3{
	top:66px;
}
#screen14 .board-area .questionboard2 .que.two .select.selectthree.two{
	top:74px;
}
#screen14 .board-area .questionboard2 .que.two .dropdown.dropdownthree.two{
	top:44px;
}
#screen14 .board-area .questionboard2 .que.three .quethreespan{
	top:22px;
}
#screen14 .board-area .questionboard2 .que.three .select .option.option2{
	height:44px;
}
#screen14 .board-area .questionboard2 .que.three .select .option.option3{
	top:67px;
}
#screen14 .board-area .questionboard3  .que.queboard3.one .radio ,#screen14 .board-area .questionboard3 .que.queboard3.one .feedback{
	top: 47px;
}
#screen14 .board-area .que.queboard3.two{
	top: 185px;
}
#screen14 .board-area .que.queboard3.three{
	top:315px;
}
#screen14 .board-area .questionboard4 .questionsarea .mainquestion,#screen14 .board-area .questionboard4 .questionsarea .questiontxt.two{
	left: -11px;
    top: -5px;
}
#screen14 .boypop .boypoptwotxt{
	top: 45px;
    left: 163px;
}
/*--------------------------------------------------------------screen15-------------------------------------------------------------*/
#screen15
{
	background:url(../images/screen7/bg.svg) no-repeat;
	background-size:100% 100%;
}
.pic3
{
/* 	background:url(../images/screen7/img03.svg) no-repeat;
	background-size:100% 100%; */
    width: 293px;
    height: 358px;
    position: absolute;
    top: 83px;
    left: 15px;
    color: #ffffff;
    font-family: arial;
}
.pic3 .text1{
	color: #ffffff;
    font-size: 23px;
    position: absolute;
    top: 58px;
    left: 16px;
    font-family: impact;
    letter-spacing: 3px;
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
}
.pic3 .text2{
    color: #000000;
    font-size: 17px;
    position: absolute;
    top: 247px;
    left: 12px;
    font-family: arial;
    letter-spacing: 0px;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
    font-weight: bold;
}
#screen15 .board-area .questionboard1 .questionsarea .que.three .dropdownthree.three{
	top:25px;
}
#screen15 .board-area .questionboard1 .questionsarea .que.three .selectthree.three{
	top:55px;
}
#screen15 .board-area .questionboard1 .questionsarea .que.four {
	top: 320px;
}
#screen15 .board-area .questionboard1 .questionsarea .que.four .selectthree.four{
	top:74px;
}
#screen15 .board-area .questionboard1 .questionsarea .que.four .dropdownthree.four{
	top:44px;
}

#screen15 .board-area .questionboard2 .questionsarea .que.three {
	top: 230px;
}
#screen15 .board-area .questionboard3  .que.queboard3.one .radio ,#screen15 .board-area .questionboard3 .que.queboard3.one .feedback{
	top: 47px;
}
#screen15 .board-area .que.queboard3.two{
	top: 185px;
}
#screen15 .board-area .que.queboard3.two .questiontxt,#screen15 .board-area .que.queboard3.three .questiontxt{
	top: 20px;
}
#screen15 .board-area .que.queboard3.three{
	top:315px;
}
#screen15 .board-area .questionboard4 .questionsarea .mainquestion,#screen15 .board-area .questionboard4 .questionsarea .questiontxt.two{
	left: -11px;
    top: -5px;
}
/*--------------------------------------------------------------screen16-------------------------------------------------------------*/
#screen16{
	background:url(../images/screen7/bg.svg) no-repeat;
	background-size:100% 100%;
}
.pic4
{
/* 	background:url(../images/screen7/img04.svg) no-repeat;
	background-size:100% 100%; */
    width: 293px;
    height: 358px;
    position: absolute;
    top: 82px;
    left: 15px;
    color: #000000;
    font-family: arial;
}

.pic4 .text1{
    position: absolute;
    top: 105px;
    left: 136px;
    color: #5c0101;
    font-size: 18px;
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    letter-spacing: -1px;
}
.pic4 .text2,.pic4 .text3,.pic4 .text4
{
    position: absolute;
    top: 123px;
    left: 122px;
	font-family:impact;
    font-size:44px;
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    letter-spacing: -1px;
}
.pic4 .text3
{
    top: 170px;
    left: 120px;
    font-size: 45px;
}
.pic4 .text4
{
   
	top: 215px;
    left: 117px;
	font-size:46px;
}
.pic4 .text5
{
    position: absolute;
    top: 277px;
    left: 116px;
    color: #5c0101;
    font-size: 22px;
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    letter-spacing: -1px;
}
#screen16 .board-area .questionboard1 .questionsarea .que.one{
	top: 72px;
}
#screen16 .board-area .questionboard1 .questionsarea .que.two{
	top: 132px;
}
#screen16 .board-area .questionboard1 .questionsarea .que.three{
    top: 195px;
}
#screen16 .board-area .questionboard1 .questionsarea .que.four{
    top: 255px;
}
#screen16 .board-area .questionboard1 .questionsarea .que.three .dropdownthree.three{
    top:24px;
}
#screen16 .board-area .questionboard1 .questionsarea .que.three .selectthree.three{
    top: 54px;
}
#screen16 .board-area .questionboard1 .questionsarea .que.four .dropdownthree.four{
    top:45px;
}
#screen16 .board-area .questionboard1 .questionsarea .que.four .selectthree.four{
    top: 74px;
}
#screen16 .board-area .questionboard1 .questionsarea .que.five{	
	display:none;
	top: 338px;
}
#screen16 .board-area .questionboard2 .questionsarea .que.three{	
	top:244px;
}
#screen16 .board-area .questionboard2 .questionsarea .que.four{	
	top:330px;
}
#screen16 .board-area .questionboard2 .questionsarea .que.three .dropdownthree.three{
    top:24px;
}
#screen16 .board-area .questionboard2 .questionsarea .que.three .selectthree.three{
    top:54px;
}
#screen16 .board-area .questionboard3 .questionsarea .que.one{
    top:82px;
}
#screen16 .board-area .questionboard3 .questionsarea .que.two{
    top:178px;
}
#screen16 .board-area .questionboard3 .questionsarea .que.three{
    top:318px;
}
#screen16 .board-area .questionboard3 .questionsarea .que.two .questiontxt,#screen16 .board-area .questionboard3 .questionsarea .que.three .questiontxt{
    top:20px;
}
#screen16 .board-area .questionboard4 .questionsarea .mainquestion{
	left: -11px;
    top: -5px;
}
#screen16 .board-area .questionboard4 .questionsarea .questiontxt.two{
    left: -8px;
    top: -16px;
}
/*--------------------------------------------------------------screen17-------------------------------------------------------------*/
#screen17{
	background:url(../images/screen7/bg.svg) no-repeat;
	background-size:100% 100%;
}
.pic5{
/* 	background:url(../images/screen7/img05.svg) no-repeat;
	background-size:100% 100%; */
	width: 293px;
    height: 362px;
    position: absolute;
    top: 80px;
    left: 15px;
    color: #000000;
    font-family: arial;
	text-align:center;
}
.pic5 .text1{
	position: absolute;
    top: 98px;
    left: 112px;
    color: #ffffff;
    font-family: arial;
    font-size: 17.5px;
    font-weight: bold;
}
.pic5 .text2{
    position: absolute;
    top: 142px;
    left: 112px;
    color: #000000;
    font-family: arial;
    font-size: 19px;
    font-weight: bold;
}
.pic5 .text3{
    position: absolute;
    top: 187px;
    left: 34px;
    color: #000000;
    font-family: arial;
    font-size: 19px;
    font-weight: bold;
}
.pic5 .text4{
    position: absolute;
    top: 227px;
    left: 60px;
    color: #000000;
    font-family: arial;
    font-size: 17px;
    letter-spacing: -1px;
}
#screen17 .board-area .questionboard1 .questionsarea .que.three .dropdownthree.three{
    top:24px;
}
#screen17 .board-area .questionboard1 .questionsarea .que.three .selectthree.three{
    top:54px;
}
#screen17 .board-area .questionboard1 .questionsarea .que.four {
    top: 320px;
}
#screen17 .board-area .questionboard1 .questionsarea .que.four .dropdownthree.four{
    top:44px;
}
#screen17 .board-area .questionboard1 .questionsarea .que.four .selectthree.four{
    top:74px;
}
#screen17 .board-area .questionboard2 .questionsarea .que.one .dropdownthree.one{
    top:44px;
}
#screen17 .board-area .questionboard2 .questionsarea .que.one .selectthree.one{
    top:74px;
}
#screen17 .board-area .questionboard2 .questionsarea .que.two{
   top: 175px;
}
#screen17 .board-area .questionboard2 .questionsarea .que.three .dropdownthree.three{
    top:24px;
}
#screen17 .board-area .questionboard2 .questionsarea .que.three .selectthree.three{
    top:54px;
}
#screen17 .board-area .questionboard4 .questionsarea .mainquestion{
	left: -11px;
    top: -5px;
}
#screen17 .board-area .questionboard4 .questionsarea .questiontxt.two{
    left: -8px;
    top: -16px;
}
/*--------------------------------------------------------------screen18-------------------------------------------------------------*/
#screen18{
/* 	background:url(../images/screen6/bg.svg) no-repeat;
	background-size:100% 100%; */
}
#screen18 .pop4.popfour{
	background:url(../images/screen7/pop3.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 39px;
    left: 268px;
    height: 218px;
    width: 462px;
}
#screen18 .pop4.popfour span{
    left: 61px;
    top: 51px;
	font-size:18px;
}

/*--------------------------------------------------------------screen19-------------------------------------------------------------*/
#screen19{
	background:url(../images/screen8/bg.svg) no-repeat;
	background-size:100% 100%;
}
#screen19 .pannylogo{
    top: 56px;
    left: 515px;
    width: 190px;
    height: 240px;
}
#screen19 .pannylogo .text1{
	font-size: 36px;
    left: 13px;
    top: 8px;
    transform: scaleY(0.85);
    -webkit-transform: scaleY(0.85);
    -moz-transform: scaleY(0.85);
    -ms-transform: scaleY(0.85);
    -o-transform: scaleY(0.85);
}
#screen19 .pannylogo .text2{
	top: 171px;
    left: 40px;
	font-size: 22px;
	letter-spacing: 2.8px;
}
#screen19 .radiopop{
	background:url(../images/screen8/pop1.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 312px;
    right: 7px;
    height: 102px;
    width: 408px;
	font-size:19px;
	font-family:arial;
}
#screen19 .radiopop .text1
{
	position:absolute;
    top: 15px;
    left: 15px;
}
.radio .radio1
{
	width: 36px;
    position: absolute;
    top: 42px;
    left: 103px;
}
.radio .radio2
{
	width: 36px;
    position: absolute;
    top: 42px;
    left: 190px;
}
.radio .radio3
{
    width: 76px;
    position: absolute;
    top: 42px;
    left: 251px;
    text-align: center;
}
#screen19 .pop2
{
    top: 429px;
    width: 410px;
    right: 7px;
}
#screen19 .pop2 span
{
    top: 20px;
    left: 57px;
}
#screen19 .headertxt
{
	position: absolute;
    top: 11px;
    left: 11px;
    font-family: arial;
    font-weight: bold;
    font-size: 18px;
}
#screen19  .mainBoard
{
	background:url(../images/screen8/lastboard.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 36px;
    left: 4px;
    height: 568px;
    width: 388px;
	font-size:19px;
	font-family: arial;
	color: #000;
}

#screen19  .mainBoard .thead1{
	position:absolute;
    left: 20px;
    top: 7px;font-size:18px;
	font-weight:bold;color: #fff;
}
#screen19  .mainBoard .thead2{
	position:absolute;
    left: 98px;
    top: 7px;font-size:18px;
	font-weight:bold;color: #fff;
}
#screen19  .mainBoard .thead3{
	position:absolute;
    left: 313px;
    top: 7px;font-size:18px;
	font-weight:bold;color: #fff;
}
#screen19  .mainBoard .pic1{
	transform: scale(0.26);
    top: -104px;
    left: -102px;
    height: 374px;
}
#screen19  .mainBoard .pic2{
	transform: scale(0.26);
	-webkit-transform: scale(0.26);
	-moz-transform: scale(0.26);
	-ms-transform: scale(0.26);
	-o-transform: scale(0.26);
    top: 4px;
    left: -102px;
    height: 374px;
}
#screen19  .mainBoard .pic3
{
	transform: scale(0.26);
	-webkit-transform: scale(0.26);
	-moz-transform: scale(0.26);
	-ms-transform: scale(0.26);
	-o-transform: scale(0.26);
    top: 110px;
    left: -102px;
    height: 374px;
}
#screen19  .mainBoard .pic4
{
	transform: scale(0.26);
	-webkit-transform: scale(0.26);
	-moz-transform: scale(0.26);
	-ms-transform: scale(0.26);
	-o-transform: scale(0.26);
    top: 217px;
    left: -102px;
    height: 374px;
}
#screen19  .mainBoard .pic5
{
	transform: scale(0.26);
	-webkit-transform: scale(0.26);
	-moz-transform: scale(0.26);
	-ms-transform: scale(0.26);
	-o-transform: scale(0.26);
    top: 322px;
    left: -102px;
    height: 374px;
}
#screen19  .mainBoard .txt1
{
	position:absolute;
    top: 36px;
    left: 96px;
}
#screen19  .mainBoard .txt2
{
	position:absolute;
    top: 148px;
    left: 96px;
}
#screen19  .mainBoard .txt3
{
	position:absolute;
    top: 255px;
    left: 96px;
}
#screen19  .mainBoard .txt4
{
	position:absolute;
    top: 362px;
    left: 96px;
}
#screen19  .mainBoard .txt5
{
	position:absolute;
    top: 467px;
    left: 96px;
}
#screen19 .mainBoard .right
{
	background:url(../images/right.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    height: 62px;
    width: 62px;
}
#screen19 .mainBoard .right.one
{
    top: 43px;
    left: 314px;
}
#screen19 .mainBoard .right.two
{
    top: 148px;
    left: 314px;
}
#screen19 .mainBoard .wrong
{
	background:url(../images/wrong.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    height: 62px;
    width: 62px;
}
#screen19 .mainBoard .wrong.one
{
    left: 314px;
    top: 254px;
}
#screen19 .mainBoard .wrong.two
{
    left: 314px;
    top: 360px;
}
#screen19 .mainBoard .wrong.three
{
    left: 314px;
    top: 465px;
}
#screen19 .mainBoard .notesbtn
{
	background:url(../images/screen8/notebtn/1.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    height: 26px;
    width: 77px;
	color:#000000;
}
#screen19 .mainBoard .notesbtn:hover,#screen19 .mainBoard .notesbtn:focus
{
	background:url(../images/screen8/notebtn/2.svg) no-repeat;
    background-size: 100% 100%;
}
#screen19 .mainBoard .notesbtn:active
{
	background:url(../images/screen8/notebtn/3.svg) no-repeat;
    background-size: 100% 100%;
}
#screen19 .mainBoard .notesbtn.one
{
    top: 109px;
    left: 305px;
}
#screen19 .mainBoard .notesbtn.two
{
    top: 217px;
    left: 305px;
}
#screen19 .mainBoard .notesbtn.three
{
    top: 323px;
    left: 305px;
}
#screen19 .mainBoard .notesbtn.four
{
    top: 429px;
    left: 305px;
}
#screen19 .mainBoard .notesbtn.five
{
    top: 534px;
    left: 305px;
}
#screen19 .mainBoard .notesbtn span
{
	position:absolute;
    top: 3px;
    left: 14px;
    font-size: 18px;
}
#screen19 .mainBoard .notesbtn:hover span{
	transform:scale(1.1);
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
}
#screen19 .mainBoard .notesbtn:focus span{
	transform:scale(1.1);
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
}
#screen19 .mainBoard .notesbtn:active span
{
	transform:scale(1);
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
}
#screen19 .nextbtn1
{
    bottom: 12px;
    right: 8px;
}
/*--------------------------------------------------------------screen20-------------------------------------------------------------*/
#screen20
{
	background:url(../images/screen8/bg.svg) no-repeat;
	background-size:100% 100%;
}
.closebtn.two
{
    right: 11px;
    top: 12px;
    width: 42px;
    height: 36px;
}
.resultbox {
    height: 25px;
    width: 368px;
    border: 1px solid #000000;
    position: absolute;
    top: 23px;
    left: 0px;
    color: #002b00;
    font-family: arial;
    font-size: 18px;
    background: #fff;
    line-height: 25px;
    text-indent: 2px;
}

#screen20 .que{display:block;}
.questionboard1.one
{
    width: 486px;
    height: 552px;
}
.questionboard2.one
{
	width: 485px;
    height: 547px;
}
.questionboard3.one
{
	width: 485px;
    height: 547px;
}
.questionboard4.one
{
	width: 485px;
    height: 547px;
}


.menu
{
    height: 34px;
    width: 480px;
    position: absolute;
    top: 52px;
    left: 323px;
	z-index:6;
}
.menu .question
{
	top:5px;
    height:25px;
    width: 100px;
}
.menu .question.two
{
	left: 124px;
}
.menu .question.three
{
	left: 243px;
}
.menu .question.four
{
	left:363px;
}
.questionsarea .que .feedback.feedbacktwo.feedback2
{
    width: 442px;
    height: 215px;
}
.questionsarea .que .feedback.feedbk
{
	width:315px;
}
/*--------------------------------------------------------------screen21-------------------------------------------------------------*/
#screen21
{
	background:url(../images/screen8/bg.svg) no-repeat;
	background-size:100% 100%;
}
#screen21 .que{display:block;}
#screen21 .board-area .questionboard3 .questionsarea .que.queboard3.one .radio
{
    top: 50px;
}
#screen21 .board-area .questionboard3 .questionsarea .que.queboard3.one .feedback
{
	top: 50px;
}
#screen21 .board-area .questionboard3 .questionsarea .que.queboard3.two
{
    top: 196px;
}
#screen21 .board-area .questionboard3 .questionsarea .que.queboard3.three
{
	top: 330px;
}
/*--------------------------------------------------------------screen22-------------------------------------------------------------*/
#screen22
{
	background:url(../images/screen8/bg.svg) no-repeat;
	background-size:100% 100%;
}
#screen22 .que{display:block;}
#screen22 .resultbox{left:18px;}
#screen22 .questionboard1 .que.four .resultbox{top:46px;}
#screen22 .questionboard2 .que.three .resultbox{top:46px;}
#screen22 .questionboard2 .que.four{top:355px;}
#screen22 .board-area .questionboard3 .questionsarea .que.queboard3.one .radio
{
    top: 50px;
}
#screen22 .board-area .questionboard3 .questionsarea .que.queboard3.one .feedback
{
	top: 50px;
}
#screen22 .board-area .questionboard3 .questionsarea .que.queboard3.two
{
    top: 196px;
}
#screen22 .board-area .questionboard3 .questionsarea .que.queboard3.three
{
	top: 330px;
}
/*--------------------------------------------------------------screen23-------------------------------------------------------------*/
#screen23
{
	background:url(../images/screen8/bg.svg) no-repeat;
	background-size:100% 100%;
}
#screen23 .que{display:block;}
#screen23 .resultbox{left:18px;}
#screen23 .questionboard1 .que.two{top:135px;}
#screen23 .questionboard1 .que.three{top:200px;}
#screen23 .questionboard1 .que.four{top:270px;}
#screen23 .questionboard1 .que.four .resultbox{top:46px;}
#screen23 .questionboard1 .que.five{top:360px;}
#screen23 .questionboard3 .que.one{top:70px;}
#screen23 .questionboard3 .que.two{top:185px;}
#screen23 .questionboard3 .que.three{top:320px;}
#screen23 .questionboard3 .que.two .questiontxt,#screen23 .questionboard3 .que.three .questiontxt{top:15px;}

/*--------------------------------------------------------------screen24-------------------------------------------------------------*/
#screen24
{
	background:url(../images/screen8/bg.svg) no-repeat;
	background-size:100% 100%;
}
#screen24 .que{display:block;}
#screen24 .questionboard1 .que.four .resultbox{top:44px;}
#screen24 .questionboard2 .que.one .resultbox{top:44px;}
#screen24 .questionboard4 .que.one .radiotwo{top:30px;left:0;}
/*--------------------------------------------------------------screen25-------------------------------------------------------------*/
#screen25
{
/* 	background:url(../images/screen6/bg.svg) no-repeat;
	background-size:100% 100%; */
}
#screen25 .pop1.pop
{
	width: 373px;
    height: 255px;
    top: 10px;
    left: 1px;
    z-index: 1;
}
#screen25 .pop1.pop span{left:30px;top:42px;}
#screen25 .popsix
{
	background:url(../images/screen9/pop.svg) no-repeat;
	background-size:100% 100%;
    width: 427px;
    height: 446px;
    position: absolute;
    left: 384px;
    top: 4px;
}
#screen25 .popsix span
{
    font-size: 18.5px;
    font-family: Arial;
    position: absolute;
    top: 15px;
    left:15px;
}
#screen25 .feedback.feedbacktwo.feedback3
{
    top: 197px;
    left: 8px;
    border: 3px solid;
    width: 401px;
    height: 230px;
}
#screen25 .feedback.feedbacktwo.feedback3:focus
{
	border:none;
	outline:4px solid #ffff00;
}
.printbtn
{
	background:url(../images/screen9/printbtn/1.svg) no-repeat;
	background-size:100% 100%;
    width:128px;
    height: 190px;
    position: absolute;
    left: 443px;
    bottom: -39px;
	color: #330066;
}
.printbtn.disabled
{
	background:url(../images/screen9/printbtn/3.svg) no-repeat;
	background-size:100% 100%;
	cursor:default;
}
.printbtn:not(.disabled):hover,.printbtn:not(.disabled):focus
{
	transform:scale(1.1);
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
}
.printbtn:not(.disabled):active
{
	background:url(../images/screen9/printbtn/3.svg) no-repeat;
	background-size:100% 100%;
	transform:scale(1);
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
}
.printbtn span
{
    font-family: Arial;
    font-size: 18px;
    position: absolute;
    top: 48px;
    left: 22px;
}

.startagainbtn
{
	background:url(../images/screen9/startagainbtn/1.svg) no-repeat;
	background-size:100% 100%;
    width: 131px;
    height: 220px;
    position: absolute;
    left: 663px;
    bottom: -72px;
    color: #fff;
}
.startagainbtn.disabled
{
	background:url(../images/screen9/startagainbtn/3.svg) no-repeat;
	background-size:100% 100%;
	cursor:default;
}
.startagainbtn:not(.disabled):hover,.startagainbtn:not(.disabled):focus{
	transform:scale(1.1);
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
}
.startagainbtn:not(.disabled):active{
	background:url(../images/screen9/startagainbtn/3.svg) no-repeat;
	background-size:100% 100%;
	transform:scale(1);
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
}
.startagainbtn span{
    font-family: Arial;
    font-size: 18px;
    position: absolute;
    top: 72px;
    left: 46px;
	-moz-transform: rotate(-6deg);
	-o-transform: rotate(-6deg);
	-ms-transform: rotate(-6deg);
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
}
.startagainbtn .arrowsp{
	background:url(../images/arrowstartagain.png) no-repeat;
	width: 68px; height: 40px; 
    position: absolute;
    left: 19px;
    top: 32px;
	-moz-transform: rotate(-6deg);
	-o-transform: rotate(-6deg);
	-ms-transform: rotate(-6deg);
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
}
.startagainbtn:not(.disabled):hover .arrowsp,.startagainbtn:not(.disabled):focus .arrowsp{
	animation:arrowsp 0.49s steps(9) infinite;
	-webkit-animation:arrowsp 0.49s steps(9) infinite;
	-moz-animation:arrowsp 0.49s steps(9) infinite;
	-ms-animation:arrowsp 0.49s steps(9) infinite;
	-o-animation:arrowsp 0.49s steps(9) infinite;
}
.startagainbtn:not(.disabled):active .arrowsp{
	animation:none;
	-webkit-animation:none;
	-moz-animation:none;
	-o-animation:none;
}
@-webkit-keyframes arrowsp {
   from{background-position: 0 0;}
   to{ background-position: -612px 0; }
}
@-moz-keyframes arrowsp {
  from{background-position: 0 0;}
   to{ background-position: -612px 0; }
}
@-o-keyframes arrowsp {
  from{background-position: 0 0;}
   to{ background-position: -612px 0; }
}
@-ms-keyframes arrowsp {
  from{background-position: 0 0;}
   to{ background-position: -612px 0; }
}

@keyframes arrowsp {
  from{background-position: 0 0;}
   to{ background-position: -612px 0; }
}

.right .rightanimate{
	background:url(../images/right.svg) no-repeat;
	background-size:100% 100%;
    width: 98px;
    height: 95px;
    position: absolute;
    left: 123px;
    top: 48px;
	animation:rightanimate 1.5s forwards;
	-webkit-animation:rightanimate 1.5s forwards;
	-moz-animation:rightanimate 1.5s forwards;
	-ms-animation:rightanimate 1.5s forwards;
	-o-animation:rightanimate 1.5s forwards;
}
@keyframes rightanimate {
  100%{left: -41px;top: 17px;transform: scale(0.4);}
}

@-webkit-keyframes rightanimate {
  100%{left: -41px;top: 17px;-webkit-transform: scale(0.4);}
}
@-moz-keyframes rightanimate {
  100%{left: -41px;top: 17px;-moz-transform: scale(0.4);}
}
@-ms-keyframes rightanimate {
  100%{left: -41px;top: 17px;-ms-transform: scale(0.4);}
}
@-o-keyframes rightanimate {
  100%{left: -41px;top: 17px;-o-transform: scale(0.4);}
}


.wrong .wronganimate{
	background:url(../images/wrong.svg) no-repeat;
	background-size:100% 100%;
    width: 98px;
    height: 95px;
    position: absolute;
    left: 123px;
    top: 48px;
	-webkit-animation:wronganimate 1.5s forwards;
	-moz-animation:wronganimate 1.5s forwards;
	-ms-animation:wronganimate 1.5s forwards;
	-o-animation:wronganimate 1.5s forwards;
	animation:wronganimate 1.5s forwards;
}

@keyframes wronganimate {
   100%{left: -41px;top: 17px;transform: scale(0.4);}
}

@-webkit-keyframes wronganimate {
   100%{left: -41px;top: 17px;-webkit-transform: scale(0.4);}
}
@-moz-keyframes wronganimate {
   100%{left: -41px;top: 17px;-moz-transform: scale(0.4);}
}
@-ms-keyframes wronganimate {
   100%{left: -41px;top: 17px;-ms-transform: scale(0.4);}
}
@-o-keyframes wronganimate {
   100%{left: -41px;top: 17px;-o-transform: scale(0.4);}
}

.popupfive.right .rightanimate2{
	background:url(../images/right.svg) no-repeat;
	background-size:100% 100%;
    width: 98px;
    height: 95px;
    position: absolute;
    left: 80px;
    top: 63px;
	animation:rightanimate2 1.5s forwards;
	-webkit-animation:rightanimate2 1.5s forwards;
	-moz-animation:rightanimate2 1.5s forwards;
	-ms-animation:rightanimate2 1.5s forwards;
	-o-animation:rightanimate2 1.5s forwards;
}
@keyframes rightanimate2 {
   100%{left: -34px;top: -18px;transform: scale(0.37);}
}
@-webkit-keyframes rightanimate2 {
   100%{left: -34px;top: -18px;-webkit-transform: scale(0.37);}
}
@-moz-keyframes rightanimate2 {
   100%{left: -34px;top: -18px;-moz-transform: scale(0.37);}
}
@-ms-keyframes rightanimate2 {
   100%{left: -34px;top: -18px;-ms-transform: scale(0.37);}
}
@-o-keyframes rightanimate2 {
   100%{left: -34px;top: -18px;-o-transform: scale(0.37);}
}

.popupfive.wrong .wronganimate2{
	background:url(../images/wrong.svg) no-repeat;
	background-size:100% 100%;
    width: 98px;
    height: 95px;
    position: absolute;
    left: 80px;
    top: 63px;
	animation:wronganimate2 1.5s forwards;
	-webkit-animation:wronganimate2 1.5s forwards;
	-moz-animation:wronganimate2 1.5s forwards;
	-ms-animation:wronganimate2 1.5s forwards;
	-o-animation:wronganimate2 1.5s forwards;
}

@keyframes wronganimate2 {
   100%{left: -34px;top: -18px;transform: scale(0.37);}
}
@-webkit-keyframes wronganimate2 {
   100%{left: -34px;top: -18px;-webkit-transform: scale(0.37);}
}
@-moz-keyframes wronganimate2 {
   100%{left: -34px;top: -18px;-moz-transform: scale(0.37);}
}
@-ms-keyframes wronganimate2 {
   100%{left: -34px;top: -18px;-ms-transform: scale(0.37);}
}
@-o-keyframes wronganimate2 {
   100%{left: -34px;top: -18px;-o-transform: scale(0.37);}
}
/*--------------------------------------------------------------footer-------------------------------------------------------------*/

.footer {
    position: absolute;
	top: 620px;
	min-width: 816px;
    height: 50px;
    
	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);
}

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

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

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

.footer .link {
	position: absolute;
    width: 88px;
    height:31px;
    background: url('../images/support_files/link.png') no-repeat;
    top:0;
	right:0;
	cursor:pointer;
}
.footer .link a {
	position:absolute;
    width: 88px;
    height:31px;
}



.checkTab {
    width: 38px;
    height: 38px;
    background: url(../images/right.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 6px;
	display:none;
}

.questionboard1 .checkTab{
    left: 42px;
}
.questionboard2 .checkTab {
    left: 150px;
    top: 2px;
}
.questionboard3 .checkTab {
    left: 259px;
    top: 1px;
}
.disabled{
	cursor:default;
}


#screen20 .question,#screen21 .question ,#screen22 .question,#screen23 .question ,#screen24 .question  {
    color: #000;
    width: 120px;
    height: 49px;
    line-height: 49px;
    text-align: center;
}

#screen20 .question.one {
	top:5px;
	left:0px;
}
#screen20 .question.two {
    top: 2px;
    left: 118px;
}
#screen20 .question.three {
	  top: 2px;
    left: 235px;
}
#screen20 .question.four {
	top: 2px;
    left: 358px;
}
#screen20 .question:hover,#screen20 .question:focus{
	background: radial-gradient(white,transparent);
    background: -webkit-radial-gradient(white,transparent);
    background: -moz-radial-gradient(white,transparent);
    background: -ms-radial-gradient(white,transparent);
    background: -o-radial-gradient(white,transparent);
    
}
#screen21 .question.one {
	top:5px;
	left:0px;
}
#screen21 .question.two {
    top: 2px;
    left: 118px;
}
#screen21 .question.three {
	  top: 2px;
    left: 235px;
}
#screen21 .question.four {
	top: 2px;
    left: 358px;
}
#screen21 .question:hover,#screen21 .question:focus{
	background: radial-gradient(white,transparent);
	background: -webkit-radial-gradient(white,transparent);
	background: -moz-radial-gradient(white,transparent);
	background: -ms-radial-gradient(white,transparent);
	background: -o-radial-gradient(white,transparent);
}




#screen22 .question.one {
	top:5px;
	left:0px;
}
#screen22 .question.two {
    top: 2px;
    left: 118px;
}
#screen22 .question.three {
	  top: 2px;
    left: 235px;
}
#screen22 .question.four {
	top: 2px;
    left: 358px;
}
#screen22 .question:hover,#screen22 .question:focus{
	background: radial-gradient(white,transparent);
	background: -webkit-radial-gradient(white,transparent);
	background: -moz-radial-gradient(white,transparent);
	background: -ms-radial-gradient(white,transparent);
	background: -o-radial-gradient(white,transparent);
}


#screen23 .question.one {
	top:5px;
	left:0px;
}
#screen23 .question.two {
    top: 2px;
    left: 118px;
}
#screen23 .question.three {
	  top: 2px;
    left: 235px;
}
#screen23 .question.four {
	top: 2px;
    left: 358px;
}
#screen23 .question:hover,#screen23 .question:focus{
	background: radial-gradient(white,transparent);
	background: -webkit-radial-gradient(white,transparent);
	background: -moz-radial-gradient(white,transparent);
	background: -ms-radial-gradient(white,transparent);
	background: -o-radial-gradient(white,transparent);
}




#screen24 .question.one {
	top:5px;
	left:0px;
}
#screen24 .question.two {
    top: 2px;
    left: 118px;
}
#screen24 .question.three {
	  top: 2px;
    left: 235px;
}
#screen24 .question.four {
	top: 2px;
    left: 358px;
}
#screen24 .question:hover,#screen24 .question:focus{
	background: radial-gradient(white,transparent);
	background: -webkit-radial-gradient(white,transparent);
	background: -moz-radial-gradient(white,transparent);
	background: -ms-radial-gradient(white,transparent);
	background: -o-radial-gradient(white,transparent);
	
}




@media print { 
	
	div{	
		position:absolute;
		color:#2f492f;
		font-size: 21px;
		font-weight:bold;
		word-break: break-all;
		font-family:arial;
	}
	.c1{
		top:220px;
		left:228px;
	}
	.c2{
		top:371px;
		left:310px;
	}
	.c3{
		top:520px;
		left:425px;
	}
	.c4{
		top:247px;
		left:228px;
		width:500px;
/* 		background:red;
		-webkit-print-color-adjust: exact; 
 */	}
	.c5{
		top:397px;
		left:228px;
		width:500px;
	}
	.c6{
		top:548px;
		left:228px;
		width:500px;
	}
	.c7{
		top:247px;
		left:775px;
		width:315px;
		font-weight:100;
	}
	
	
	
	
	
	.d1{
		top:675px;
		left:310px;
	}
	.d2{
		top:825px;
		left:228px;
	}
	.d3{
		top:980px;
		left:228px;
	}

	.d4{
		top:700px;
		left:228px;
		width:500px;
	}
	.d5{
		top:852px;
		left:228px;
		width:500px;
	}
	.d6{
		top:1007px;
		left:228px;
		width:500px;
	}
	
	.d7{
		top:700px;
		left:775px;
		width:315px;
		font-weight:100;
	}

	
	.e1{
		top:1137px;
		left:345px;
	}
	.e2{
		top:1274px;
		left:558px;
	}
	.e3{
		top:1425px;
		left:228px;
	}
	
	.e4{
		top:1164px;
		left:228px;
		width:500px;
	}
	.e5{
		top:1297px;
		left:228px;
		width:500px;
	}
	.e6{
		top:1452px;
		left:228px;
		width:500px;
	}

	.e7{
		top:1165px;
		left:775px;
		width:315px;
		font-weight:100;
	}
	
	.f1{
		top:1870px;
		left:228px;
	}
	.f2{
		top:2022px;
		left:228px;
	}
	.f3{
		top:2175px;
		left:228px;
	}

	.f4{
		top:1900px;
		left:228px;
		width:500px;
	}
	.f5{
		top:2049px;
		left:228px;
		width:500px;
	}
	.f6{
		top:2200px;
		left:228px;
		width:500px;
	}

	.f7{
		top:1900px;
		left:775px;
		width:315px;
		font-weight:100;
	}
	

	.g1{
		top:2304px;
		left:550px;
	}

	.g2{
		top:2455px;
		left:320px;
	}
	
	.g3{
		top:2611px;
		left:365px;
	}



	.g4{
		top:2327px;
		left:228px;
		width:500px;
	}

	.g5{
		top:2477px;
		left:228px;
		width:500px;
	}
	
	.g6{
		top:2638px;
		left:228px;
		width:500px;
	}
	
	.g7{
		top:2354px;
		left:775px;
		width:315px;
		font-weight:100;
	}

	.name1{
		font-family:arial;
		font-weight:bold;
		top:91px;
		left:130px;
		color:black;
		font-size:28px;
		font-weight:100;
		background:white;
		-webkit-print-color-adjust: exact; 
		
	}	

	.name2{
				font-family:arial;
		font-weight:bold;

		top:1746px;
		left:130px;
		color:black;
		font-size:28px;
		font-weight:100;
		background:white;
		-webkit-print-color-adjust: exact; 
		
	}	
	
	.text{
		top:2860px;
		left:42px;
		width:1000px;
		font-weight:100;
	}
	
}



#man{
	width:31px;
	height:20px;
	position:absolute;
	background:url(../images/man0001.png) no-repeat;
	background-size:100% 100%;
	top: 554px;
    left: 45px;
	transform-origin:center center;
	-webkit-transform-origin:center center;
	-moz-transform-origin:center center;
	-ms-transform-origin:center center;
	-o-transform-origin:center center;
	transform:scale(0.9);
	-webkit-transform:scale(0.9);
	-moz-transform:scale(0.9);
	-ms-transform:scale(0.9);
	-o-transform:scale(0.9);
	z-index:4;
}

#man1{
	width:31px;
	height:20px;
	position:absolute;
	background:url(../images/man0001.png) no-repeat;
	background-size:100% 100%;
	top: 554px;
    left: 45px;
	transform-origin:center center;
	-webkit-transform-origin:center center;
	-moz-transform-origin:center center;
	-ms-transform-origin:center center;
	-o-transform-origin:center center;
	transform:scale(0.9);
	-webkit-transform:scale(0.9);
	-moz-transform:scale(0.9);
	-ms-transform:scale(0.9);
	-o-transform:scale(0.9);
	z-index:4;
}

#man1{
	transform: rotate(-104deg) scale(0.9);
	-webkit-transform: rotate(-104deg) scale(0.9);
	-moz-transform: rotate(-104deg) scale(0.9);
	-ms-transform: rotate(-104deg) scale(0.9);
	-o-transform: rotate(-104deg) scale(0.9);
	left: 611px;
    top: 219px;
}
#man.move,#man1.move{
	animation:move 0.4s linear infinite; 
	-webkit-animation:move 0.4s linear infinite; 
	-moz-animation:move 0.4s linear infinite; 
	-o-animation:move 0.4s linear infinite; 
	-ms-animation:move 0.4s linear infinite; 
}
@keyframes move{
	0%{
		background:url(../images/man0001.png) no-repeat;
		background-size:100% 100%;		
	}
	49%{
		background:url(../images/man0001.png) no-repeat;
		background-size:100% 100%;		
	}
	50%{
		background:url(../images/man0002.png) no-repeat;
		background-size:100% 100%;		
	}
	99%{
		background:url(../images/man0002.png) no-repeat;
		background-size:100% 100%;		
	}
	
}

@-webkit-keyframes move{
	0%{
		background:url(../images/man0001.png) no-repeat;
		background-size:100% 100%;		
	}
	49%{
		background:url(../images/man0001.png) no-repeat;
		background-size:100% 100%;		
	}
	50%{
		background:url(../images/man0002.png) no-repeat;
		background-size:100% 100%;		
	}
	99%{
		background:url(../images/man0002.png) no-repeat;
		background-size:100% 100%;		
	}
	
}


@-moz-keyframes move{
	0%{
		background:url(../images/man0001.png) no-repeat;
		background-size:100% 100%;		
	}
	49%{
		background:url(../images/man0001.png) no-repeat;
		background-size:100% 100%;		
	}
	50%{
		background:url(../images/man0002.png) no-repeat;
		background-size:100% 100%;		
	}
	99%{
		background:url(../images/man0002.png) no-repeat;
		background-size:100% 100%;		
	}
	
}


@-ms-keyframes move{
	0%{
		background:url(../images/man0001.png) no-repeat;
		background-size:100% 100%;		
	}
	49%{
		background:url(../images/man0001.png) no-repeat;
		background-size:100% 100%;		
	}
	50%{
		background:url(../images/man0002.png) no-repeat;
		background-size:100% 100%;		
	}
	99%{
		background:url(../images/man0002.png) no-repeat;
		background-size:100% 100%;		
	}
	
}

@-o-keyframes move{
	0%{
		background:url(../images/man0001.png) no-repeat;
		background-size:100% 100%;		
	}
	49%{
		background:url(../images/man0001.png) no-repeat;
		background-size:100% 100%;		
	}
	50%{
		background:url(../images/man0002.png) no-repeat;
		background-size:100% 100%;		
	}
	99%{
		background:url(../images/man0002.png) no-repeat;
		background-size:100% 100%;		
	}
	
}

#screen8 .e{
	opacity:0;
}

#screen8 .e .coloranimate{
	display:none;
}

#screen4 .select,#screen5 .select{
	top: 84px;
}

#screen4 .dropdownone,#screen5 .dropdowntwo{
	top: 54px
}

.radio input[type="radio"] {
    position: relative;
    top: 4px;
}

#screen12 .element4 .coloranimate {
	display:none;
}


.btn.nextbtn2 {
    position: absolute;
    z-index: 5;
    bottom: -20px;
    right: -29px;
}

#screen8 #a {
    width: 155px;
    height: 115px;
    position: absolute;
    left: 261px;
    top: 320px;
    z-index: 10;
}


#screen8 #b {
    width: 155px;
    height: 115px;
    position: absolute;
    left: 326px;
    top: 177px;
    z-index: 10;
}


#screen8 #c {
    width: 155px;
    height: 153px;
    position: absolute;
    left: 281px;
    top: 244px;
    z-index: 10;
}

textarea{
	font-size: 20px;
}
#screen12 .block{
	width:100px;
	height:100px;
	position:absolute;
}
#screen12 .block.block1{top: 32px;left: 167px;}
#screen12 .block.block2{top: 226px;left: 20px;}
#screen12 .block.block3{top: 219px;left: 483px;}
#screen12 .block.block4{top: 487px;left: 339px;}
#screen12 .block.block5{top: 520px;left: 542px;}

input[disabled]{
	cursor:default;
}


#screen18 .pop4 span{
	width: 380px;
}


#svg8{
	width:100%;
	height:100%;
}

#man{
	z-index:9;
}
#movepath,#movesvg12
{
	z-index:10;
	top:0px;
	left:0px;
}

#screen8 .e svg,#screen12 .e svg{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}


#svgscreen9,#svgscreen10,#svgscreen11,#svgscreen18,#svgscreen25,#svgscreen13,#svgscreen14,#svgscreen15,#svgscreen16,#svgscreen17{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}

#screen9{
	background:url(../images/screen6/bg.png) no-repeat;
	background-size:100% 100%;
}