/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : Jul 8, 2018, 9:51:37 AM
    Author     : Shaam
    Email      : shaam.mno@gmail.com
*/
div#wPaint-demo1 canvas {
    width: 100%;
    height: 100%;
}
.abs {
    /*    position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/vvv.jpg);*/
}
.magazine-viewport .page img[title="black"]{
    /* left: 29%;*/
    /*top: 50%;*/
    top: 64%;
    left: 1%;
    transform: rotate(52deg);
    width: 3.5%;
}
.magazine-viewport .page img[title="red"]{
    /*top: 81%;*/
    /*left: 26%;*/
    top: 70%;
    left: 3%;
    transform: rotate(45deg);
    width: 3.5%;
}
.magazine-viewport .page img[title="blue"]{
    /*top: 44%;*/
    /*left: 10%;*/
    top: 49%;
    left: 4%;
    transform: rotate(29deg);
    width: 3.5%;
}
.magazine-viewport .page img[title="brown"]{
    /*top: 78%;*/
    top: 27%;
    left: 5%;
    transform: rotate(23deg);
    width: 3.5%;
}
.magazine-viewport .page img[title="green"]{
    /*top: 68%;*/
    /*top: 30%;*/
    /*left: 8%;*/
    top: 19%;
    left: 3%;
    transform: rotate(24deg);
    width: 3.5%;
}
.magazine-viewport .page img[title="orange"]{
    /*top: 60%;*/
    top: 54%;
    left: 5%;
    transform: rotate(48deg);
    width: 3.5%;
}
td img {
    vertical-align: bottom;
}
.textbox{
    position:absolute;
    opacity:0;
    z-index:0;
}

.textbox2, .textbox3, .textbox4 , .textbox5{
    position:absolute;
    opacity:0;
    z-index:0;
}

.activetext{
    opacity:1;
    z-index:21;
}

.explainor{
}

img.topperbook2 {
    z-index: 30;
    position: absolute;
    margin-left: 30px;
    margin-top: 20px;
}

.wPaint-canvas{
    opacity:0.7;}

.p12 {
    overflow:visible !important;}

.wPaint-menu{
    display:none !important;
}


.eraser {

    position: absolute;
    width: 130px;
    height: 84px;
    cursor:pointer;
}

.eraser{
    position: absolute;
    width: 20%;
    height: 11.5%;
    cursor: pointer;
    top: 42%;
}

button.jp-stop {
    width: 49px;
    height: 31px;
    background-color: transparent;
    border: hidden;
    color: transparent;
}

#jquery_jplayer_1{
    display:none;
}

.inactive_click{
    display:none;
}

div#jp_container_1 {
    position: absolute;
    top: 720px;
    left: 670px;
}




button.jp-play {
    width: 49px;
    height: 31px;
    background-color: transparent;
    border: hidden;
    color: transparent;
}
.boxz {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
}
.boxx img{
    opacity: 0;
    position: absolute;
    transition: all ease-in-out 0.5s;
    max-width: 100%;
}
.left-box-1{
    width: 28%;
    height: 64%;
    left: 10%;
    bottom: 0;
    position: absolute;
    cursor: pointer;
    z-index: 8;
}
.left-box-1 img {
    max-width: 50%;
    left: 89%;
    bottom: 16%;
}
.left-box-3 img {
    max-width: 41%;
    right: -20%;
    bottom: 13%;
}
.left-box-4 img {
    max-width: 100%;
    top: -44%;
    left: 10%;
}
.left-box-5 img {
    max-width: 95%;
}
.left-box-2 img {
    max-width: 77%;
    top: -35%;
}
.left-box-1 img.animatBoxx{
    opacity: 1;
    z-index: 1;
    position: absolute;
    bottom: 10%;
    right: 0;
    top:auto;
    left:auto;
}
.page.p6 .left-box-1,.page.p6 .left-box-2{
    display: none;
}

.left-box-2 {
    width: 22%;
    height: 26%;
    left: 0%;
    position: absolute;
    cursor: pointer;
    top: 41%;
    z-index: 9;
}
.left-box-2 img.animatBoxx{
    opacity: 1;
    z-index: 1;
    position: absolute;
    left: 3%;
    top: 30%;
}

.left-box-3 {
    width: 34%;
    height: 40%;
    left: 0%;
    position: absolute;
    cursor: pointer;
    bottom: 0;
}
.left-box-3 img.animatBoxx {
    opacity: 1;
    z-index: 1;
    position: absolute;
    right: -37%;
    left:auto;
    top: 8%;
}
.left-box-4 {
    width: 22%;
    height: 19%;
    left: 0%;
    position: absolute;
    cursor: pointer;
    top: 41%;
    z-index: 9;
}

.left-box-4 img.animatBoxx{
    opacity: 1;
    z-index: 1;
    position: absolute;
    right: -76%;
    left:auto;
    top: 37%;
}

.left-box-5 {
    width: 22%;
    height: 19%;
    left: 27%;
    position: absolute;
    cursor: pointer;
    top: 16%;
    z-index: 9;
}
.left-box-5 img.animatBoxx{
    opacity: 1;
    z-index: 1;
    position: absolute;
    right: 0%;
    left:auto;
    top: 29%;
}

.page.p7 .left-box-3,.page.p7 .left-box-4,.page.p7 .left-box-5{
    display: none;
}

.boxzz {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
}
.boxxx img{
    opacity: 0;
    position: absolute;
    transition: all ease-in-out 0.5s;
    width:auto;
}
.left-boxx-1{
    width: 30%;
    height: 42%;
    left: -11%;
    position: absolute;
    cursor: pointer;
    z-index: 8;
    top: 13%;
}

.boxxx .left-boxx-2 img{
    max-width: 56%;
}
.boxxx .left-boxx-5 img{
    max-width: 50%;
}
.boxxx .left-boxx-4 img {
    max-width: 56.5%;
}
.boxxx .left-boxx-3 img {
    max-width: 68%;
}
.boxxx .left-boxx-1 img {
    max-width: 62%;
}
.left-boxx-1 img.animatBoxx {
    opacity: 1;
    z-index: 1;
    position: absolute;
    top: 4%;
    left: 100%;
    max-width: 60%;
}
.page.p8 .left-boxx-1,
.page.p8 .left-boxx-3,
.page.p9 .left-boxx-4,
.page.p9 .left-boxx-2,
.page.p9 .left-boxx-5{
    display: none;
}

.left-boxx-2 {
    width: 38%;
    height: 39%;
    left: 0%;
    position: absolute;
    cursor: pointer;
    top: 24%;
    z-index: 9;
}
.left-boxx-2 img.animatBoxx {
    opacity: 1;
    z-index: 1;
    position: absolute;
    left: 61%;
    top: 50%;
    max-width: 60%;
}

.left-boxx-3 {
    width: 31%;
    height: 48%;
    position: absolute;
    cursor: pointer;
    bottom: 0;
    left: 19%;
}
.left-boxx-3 img.animatBoxx {
    opacity: 1;
    z-index: 1;
    position: absolute;
    right: auto;
    left: -27%;
    top: 40%;
    max-width: 67%;
}
.left-boxx-4 {
    width: 26%;
    height: 38%;
    left: 26%;
    position: absolute;
    cursor: pointer;
    z-index: 10;
    bottom: 0;
    top: auto;
}

.left-boxx-4 img.animatBoxx {
    opacity: 1;
    z-index: 1;
    position: absolute;
    right: auto;
    left: 13%;
    top: 0;
    max-width: 60%;
}

.left-boxx-5 {
    width: 22%;
    height: 34%;
    left: 0;
    position: absolute;
    cursor: pointer;
    top: auto;
    z-index: 9;
    bottom: 0;
}
.left-boxx-5 img.animatBoxx{
    opacity: 1;
    z-index: 1;
    position: absolute;
    left: 76%;
    top: 23%;
    max-width: 53%;
}

.p11 .blink_me[sid='5'],.p11 .blink_me[sid='6'],.p11 .blink_me[sid='7'],.p10 .blink_me[sid='1'] ,.p10 .blink_me[sid='2'] ,.p10 .blink_me[sid='3'] ,.p10 .blink_me[sid='4']{ display:none;}

.mybox {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
}
.boxy img{
    opacity: 0;
    position: absolute;
    transition: all ease-in-out 0.5s;
}
.left-boxy-1{
    width: 14%;
    height: 28%;
    left: 36%;
    position: absolute;
    cursor: pointer;
    z-index: 8;
    top: 44%;
}
.left-boxy-1 img.animatBoxx{
    opacity: 1;
    z-index: 1;
    position: absolute;
    top: -36%;
    left: 0;
    max-width: 66%;
}


.left-boxy-2 {
    width: 16%;
    height: 25%;
    left: 20%;
    position: absolute;
    cursor: pointer;
    top: 46%;
    z-index: 9;
}
.left-boxy-2 img.animatBoxx{
    opacity: 1;
    z-index: 1;
    position: absolute;
    left: 0;
    top: -50%;
    max-width: 58%;
}

.left-boxy-3 {
    width: 15%;
    height: 29%;
    position: absolute;
    cursor: pointer;
    left: 2%;
    top: 47%;
}
.left-boxy-3 img.animatBoxx {
    opacity: 1;
    z-index: 1;
    position: absolute;
    right: auto;
    left: 0;
    top: -50%;
    max-width: 64%;
}

.left-boxy-4 {
    width: 26%;
    height: 30%;
    left: 11%;
    position: absolute;
    cursor: pointer;
    z-index: 10;
    bottom: 0;
    top: auto;
}

.left-boxy-4 img.animatBoxx{
    opacity: 1;
    z-index: 1;
    position: absolute;
    right: -38%;
    top: 36%;
    max-width: 35%;
}

.left-boxy-5 {
    width: 22%;
    height: 30%;
    left: 25%;
    position: absolute;
    cursor: pointer;
    top: 57%;
    z-index: 9;
}
.left-boxy-5 img.animatBoxx{
    opacity: 1;
    z-index: 1;
    position: absolute;
    left: 52%;
    top: -35%;
    max-width: 37%;
}

.left-boxy-6 {
    width: 22%;
    height: 23%;
    left: 0;
    position: absolute;
    cursor: pointer;
    top: auto;
    z-index: 9;
    bottom: 0;
}
.left-boxy-6 img.animatBoxx{
    opacity: 1;
    z-index: 1;
    position: absolute;
    left: 65%;
    top: 25%;
    max-width: 50%;
}

.left-boxy-7 {
    width: 32%;
    height: 50%;
    left: 0;
    position: absolute;
    cursor: pointer;
    top: 19%;
    z-index: 9;
}
.left-boxy-7 img.animatBoxx{
    opacity: 1;
    z-index: 1;
    position: absolute;
    left: 48%;
    top: 50%;
    max-width: 28%;
}

.page.p10 .left-boxy-1,
.page.p10 .left-boxy-2,
.page.p10 .left-boxy-3,
.page.p10 .left-boxy-4,
.page.p11 .left-boxy-5,
.page.p11 .left-boxy-6,
.page.p11 .left-boxy-7{
    display: none;
}

img.area {
    width: 17px;
    position: absolute;
    cursor:pointer;
}
img.book2_cat[sid="3"] {
    width: 45%;
    left: 52.5%;
    position: absolute;
    bottom: 2%;
    height: auto;
}


img.book2_cat[sid="4"] {
    width: 27%;
    height: auto;
    bottom: 5%;
    left: 18.2%;
    position: absolute;
}

img.book2_cat[sid="2"] {
    width: 45%;
    height: auto;
    bottom: auto;
    left: 9%;
    position: absolute;
    top: 23.3%;
}

img.book2_cat[sid="1"] {
    width: 40%;
    height: auto;
    bottom: auto;
    left: 53.8%;
    position: absolute;
    top: 12.7%;
}

.book2_cat{
    opacity:0;
}
.book2_cat.coloredImage{
    opacity: 1;
    transition: all linear 0.3s;
}
.book2_selectors {
    position: absolute;
    width: 25px;
    height: 27px;
    cursor: pointer;
    font-size: 100%;
    font-family: Arial;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    color: green;
    font-weight: 800;
}
.findword{
    font-size: 20px;
}
.book2_selectors[ids="1"] {
    top: 22.5%;
    left: 38.5%;
    width: 4%;
    height: 3%;
}

.book2_selectors[ids="2"] {
    top: 22.5%;
    left: 50.2%;
    width: 4.7%;
    height: 3%;
}

.book2_selectors[ids="3"] {
    top: 34.8%;
    left: 58.7%;
    width: 3.5%;
    height: 3%;
}

.book2_selectors[ids="4"] {
    top: 34.8%;
    left: 65.7%;
    width: 5%;
    height: 3%;
}

.book2_selectors[ids="5"] {
    top: 49.8%;
    left: 32.5%;
    width: 3.5%;
    height: 3%;
}
.book2_selectors[ids="6"] {
    top: 49.8%;
    left: 44.5%;
    width: 3.2%;
    height: 3%;
}
.book2_selectors[ids="7"] {
    top: 49.8%;
    left: 51.4%;
    width: 3.5%;
    height: 3%;
}

.book2_selectors[ids="8"] {
    top: 60.4%;
    left: 55%;
    width: 3.5%;
    height: 3%;
}

.book2_selectors[ids="9"] {
    top: 60.4%;
    left: 62%;
    height: 3%;
    width: 3.5%;
}

.book2_selectors[ids="10"] {
    top: 81.2%;
    left: 68.7%;
    width: 3%;
    height: 3%;
}

.book2_selectors[ids="11"] {
    top: 81.2%;
    left: 75.5%;
    width: 3.5%;
    height: 3%;
}
.book2_selectors img{
    top:50% !important;
    left:50% !important;
    transform: translate(-50%,-50%);
    width: 50% !important;
}
.choiser {
    position: relative;
    top: 100%;
    width: 300%;
    height: 100%;
    left: 0;
    background-color: #952490;
    opacity: 0;
    z-index: 10;
    display: none;
    line-height: 1.5;
    padding-bottom: 10%;
}

.book2_choise {
    width: 30%;
    float: left;
    font-size: 80%;
    text-transform: uppercase;
    font-family: Arial;
    color: #fff;
    font-weight: 800;
    text-align: center;
    border: solid 1px #fff;
    box-sizing: border-box;
    padding: 0;
    height: 100%;
    margin: 2% 1.5%;
}

.choiser_active{
    opacity:1 !important;
    z-index:20 !important;
    display:block !important;
}

.edgeLoad-EDGE-20871626 { visibility:hidden; }
.clicker {
    top:33%;
}

#Stage{
    position: relative;
    transform: translateZ(0px);
    width: 477px;
    height: 244px;
    top: 118px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0);
    margin: auto
}

img.area {
    width: 17px;
    position: absolute;
    cursor:pointer;
}

.wPaint-menu{
    display: visible !important;
}


#diagramContainer {
    padding: 0px;
    width: auto;
    height: auto;
    position: absolute;
}

#mido {
    padding: 0px;
    width: 100%;
    height: 500px;
    position: relative;
}


.p9{
    background-image:url(../../images/level1/page9.jpg);
    background-size:100%}

.p8{
    background-image:url(../../images/level1/animation2_1.png);
    background-size:100%}





.p14{
    background-image:url(../../images/level1/page14.jpg);
    background-size:100%}

.p15{
    background-image:url(../../images/level1/page15.png);
    background-size:100%}

.p16{
    background-image:url(../../images/level1/page16.jpg);
    background-size:100%}


#page9 {
    padding: 0px;
    width: 100%;
    height: 500px;
    position: relative;
    opacity:0;
}

.item {
    height:80px; width: 80px;
    float: left;
    position:absolute;
}

/* */


div#second_left3 {
    top: 433px;
    left: 110px;
}

div#second_right2 {
    top: 310px;
    left: 290px;
}

div#second_left2 {
    top: 310px;
    left: 100px;
}

div#second_right1 {
    top: 200px;
    left: 260px;
}

div#second_left1 {
    top: 200px;
    left: 100px;
}

div#second_right3 {
    top: 410px;
    left: 270px;
}

/*   */


div#page9_left3 {
    top: 553px;
    left: 150px;
}

div#page9_right2 {
    top: 400px;
    left: 290px;
}

div#page9_left2 {
    top: 400px;
    left: 100px;
}

div#page9_right1 {
    top: 270px;
    left: 260px;
}

div#page9_left1 {
    top: 200px;
    left: 100px;
}

div#page9_right3 {
    top: 530px;
    left: 270px;
}


/*    */


div#second_left4 {
    top: 540px;
    left: 100px;
}

div#second_right4 {
    top: 540px;
    left: 260px;
}

/*  */

div#item_left3 {
    top: 262px;
    left: 110px;
}

div#item_right2 {
    top: 370px;
    left: 260px;
}

div#item_left2 {
    top: 400px;
    left: 100px;
}

div#item_right1 {
    top: 270px;
    left: 260px;
}

div#item_left1 {
    top: 550px;
    left: 110PX;
}

div#item_right3 {
    top: 550px;
    left: 270px;
}

div#item_left4 {
    top: 122px;
    left: 110px;
}

div#item_right4 {
    top: 140px;
    left: 240px;
}



.green{
    background-image:url(../../images/icons/correct1.png)}
.red{
    background-image:url(../../images/icons/wrong1.png)}
.jsplumb-endpoint.jsplumb-endpoint-anchor.jsplumb-draggable.jsplumb-droppable.jsplumb-endpoint-connected.jsplumb-endpoint-full {
    z-index: 1;
}

.p3 .page-map{
    width:100% !important;
    margin:0 !important;;
}

.p2 .page-map{
    width:100% !important;
    margin:0 !important;;
}
.page-map img{
    width:100%;
}

.p7 .blink_me[sid='5'], .p7 .blink_me[sid='4'], .p7 .blink_me[sid='3'],.p6 .blink_me[sid='1'], .p6 .blink_me[sid='2']{
    display:none;}

img.topperbook2 {
    max-width: 100%;
}
.boxzz img{
    max-width: 80%;
}
.boxy img {
    /*max-width: 50% !important;*/
}

.desert-box{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.desert-box .left-box-1{
    width: 65%;
    left: 25%;
    top: 11%;
    height: 39%;
}
.desert-box img{
    width:auto;
}
.desert-box .left-box-1 img{
    left: -26%;
    top: 17%;
    max-width: 33%;
}
.desert-box .left-box-2{
    width: 39%;
    left: 1%;
    top: 55%;
    height: 23%;
}
.desert-box .left-box-2 img{
    max-width: 70%;
    top: -53%;
    left: 29%;
}

.desert-box .left-box-3{
    left: 48%;
    top: 50%;
    width: 53%;
    height: 34%;
}
.desert-box .left-box-3 img{
    top: -63%;
    left: auto;
    max-width: 54%;
    right: 5%;
}

.desert-box .left-box-4{
    top: auto;
    bottom: 0;
    width: 49%;
}
.desert-box .left-box-4 img{
    max-width: 76%;
    top: auto;
    bottom: 0;
    left: 103%;
}


.desert-box .left-box-5{
    left: 4%;
    height: 26%;
    width: 37%;
    top: 9%;
}
.desert-box .left-box-5 img{
    max-width: 76%;
    top: 75%;
    left: 0;
}


.desert-box .left-box-6{
    height: 35%;
    width: 40%;
    top: 13%;
    position: absolute;
    left: 47%;
}
.desert-box .left-box-6 img{
    top: -14%;
    max-width: 50%;
    left: -43%;
}


.desert-box .left-box-7{
    width: 36%;
    top: auto;
    left: 0;
    bottom: 19%;
    position: absolute;
    height: 13%;
}
.desert-box .left-box-7 img{
    top: auto;
    bottom: -146%;
    max-width: 80%;
    left: 0;
}

.desert-box .left-box-8{
    position: absolute;
    left: 44%;
    bottom: 0;
    top: auto;
    height: 48%;
    width: 37%;
}
.desert-box .left-box-8 img {
    max-width: 66%;
    left: 74%;
    top: 52%;
}
.desert-box .blink_me,.boxzz .blink_me{
    top:30%;
    left:50%;
}


.sea-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.sea-box img{
    width:auto;
}
.sea-box .blink_me{
    top:50%;
    left:50%;
}

.sea-box .left-box-1{
    width: 53%;
    left: 0;
    top: 0;
    height: 25%;
}
.sea-box .left-box-1 img{
    left: 65%;
    top: 76%;
    max-width: 78%;
    height: auto;
    bottom: auto;
}

.sea-box .left-box-2{
    width: 47%;
    left: 59%;
    top: 38%;
    height: 22%;
}
.sea-box .left-box-2 img{
    left: auto;
    top: 44%;
    max-width: 89%;
    right: 21%;
}

.sea-box .left-box-3{
    width: 47%;
    left: 55%;
    top: auto;
    height: 22%;
    bottom: 0;
}
.sea-box .left-box-3 img{
    left: auto;
    top: auto;
    max-width: 89%;
    right: 27%;
    bottom: 18%;
}

.sea-box .left-box-4{
    width: 45%;
    left: 46%;
    top: 4%;
    height: 17%;
}
.sea-box .left-box-4 img{
    left: -100%;
    top: 33%;
    max-width: 93%;
}

.sea-box .left-box-5{
    width: 72%;
    left: auto;
    top: 29%;
    height: 20%;
    right: 3%;
}
.sea-box .left-box-5 img{
    left: -27%;
    top: 60%;
    max-width: 58%;
}

.sea-box .left-box-6{
    width: 74%;
    left: auto;
    top: 54%;
    height: 25%;
    position: absolute;
    right: 3%;
}
.sea-box .left-box-6 img{
    left: -29%;
    top: 63%;
    max-width: 56%;
}

.sea-box .left-box-7{
    width: 66%;
    left: auto;
    top: auto;
    height: 22%;
    position: absolute;
    right: 3%;
    bottom: 0;
}
.sea-box .left-box-7 img{
    left: -17%;
    top: 28%;
    max-width: 67%;
}


.boxz .blink_me{
    position: absolute;
    top: 50%;
    left:50%;
}

.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 0.6s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 0.6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    width: 5px;
    height: 5px;
    border-radius: 25px;
    border: solid 2px rgba(255,255,255,0.6);
    background-color: rgba(255,255,255,0.3);
    position: absolute;
    display: inline-block;
    z-index: 1;

    right: 0;
    left: 50%;
    margin: 0 auto;
    top: 50%;
    bottom: 0;
    transform: translate(0, -50%);
}
.double{
    width:200% !important;
}

.p9 .double,.p11 .double,.p13 .double,.p19 .double{
    margin-left: -100% !important;
}

#Image-Maps-Com-image-maps-2015-12-20-070538,
#Image-Maps-Com-image-maps-2015-12-20-075252,
#Image-Maps-Com-image-maps-2015-12-23-022342{
    width: 100%;
    height: 100%;
}
#Image-Maps-Com-image-maps-2015-12-23-022342,
#Image-Maps-Com-image-maps-2015-12-23-022342{
    width:200%;
    height:100%;
    margin-top: 10px;
}

img.topperbook2 {
    max-width: 40%;
    top: 4%;
    left: 3%;
}
.p9 img.topperbook2,.p11 img.topperbook2{
    display: none;
}


@media(max-width:768px){
    /*    .boxy img {
            max-width: 46%;
        }*/

}
@media(max-width:450px){
    /*    .left-box-1 img.animatBoxx{
            max-width: 60%;
        }*/

    button.jp-play {
        background-size: 55% auto;
        background-repeat: no-repeat;
        background-position: center center;
    }
    /*    .boxz .left-box-2 .animatBoxx
        {
            max-width: 45%;
        }*/
}


.wPaint-demo55{
    position: absolute;
    width: 492px;
    top: 50%;
    height: 276px;
    left: 15%;
    overflow: hidden;
}
.wPaint-demo66{
    position: absolute;
    width: 583px;
    /*top: 15%;*/
    height: 734px;
    top: 12%;
}
.wPaint-demo77{
    position: absolute;
    width: 445px;
    top: 54%;
    height: 247px;
    left: 19%;
}
.wPaint-demo88{
    position: absolute;
    width: 440px;
    top: 48.5%;
    height: 304px;
    left: 19%;
}
#Stage.EDGE-20871626{
    position: absolute !important;
    top: 14%;
    transform-origin: left;
    -webkit-transform-origin: left;
    -moz-transform-origin: left;
    -webkit-transform-origin-y: top;
}


/*level 1 page 14 color tools*/

.eraser.eraser-ico{
    background: url('../../images/eraser.png') no-repeat center;
    background-size: contain;
    top: 0;
    right: 50%;
}

.magazine-viewport .page .image-maps-2015-12-23-02234212-15 img[title="black"]{
    top: 0;
    right: 43%;
    left: auto;
    transform: rotate(27deg);
    width: 2.5%;
}
.magazine-viewport .page .image-maps-2015-12-23-02234212-15  img[title="red"]{
    top: 0;
    right: 76%;
    left: auto;
    transform: rotate(45deg);
    width: 2.5%;
}
.magazine-viewport .page .image-maps-2015-12-23-02234212-15  img[title="blue"]{
    top: 0;
    right: 23%;
    left: auto;
    transform: rotate(40deg);
    width: 2.5%;
}
.magazine-viewport .page .image-maps-2015-12-23-02234212-15  img[title="brown"]{
    top: 0;
    right: 30%;
    left: auto;
    transform: rotate(23deg);
    width: 2.5%;
}
.magazine-viewport .page .image-maps-2015-12-23-02234212-15 img[title="green"]{
    top: 0;
    right: 37%;
    left: auto;
    transform: rotate(24deg);
    width: 2.5%;
}
.magazine-viewport .page .image-maps-2015-12-23-02234212-15 img[title="orange"]{
    top: 0;
    right: 87%;
    left: auto;
    transform: rotate(14deg);
    width: 2.5%;
}