.container #template_Wrapper {
    position: relative;
    /*     background-image: url(../assets/image/codezebra_image_01.png); */
    background-color: black;
    width: 100%;
    height: 100%;
    right: 0px;
    margin: auto;
    background-size: contain;
}

.container #template_Wrapper .leftSide {
    position: absolute;
    background-image: url(../assets/image/prepreloaderbg.png);
    width: 900px;
    height: 100%;
    margin: auto;
    background-repeat: no-repeat;
    /* background-position-x: 4px; */
    left: 0px;
    z-index: 12;
}

.container #template_Wrapper .leftSide #enterSprite {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 502px;
    left: 470px;
    z-index: 1;
}

.container #template_Wrapper .rightSide {
    position: absolute;
    background-color: #bdacac;
    width: 100%;
    height: 100%;
    left: 0px;
    /* margin: auto; */
    /* background-position-x: -900px; */
    background-repeat: no-repeat;
    /* background-size: contain; */
    background-image: url(../assets/image/BG_2.jpg);
    z-index: 11;
}

.container #template_Wrapper .leftSide .imageclick {
    position: absolute;
    background-image: url(../assets/image/prepreloadertitle_bg_image.png);
    width: 100%;
    height: 100%;
    left: 159px;
    top: 245px;
    /* margin: auto; */
    /* background-size: contain; */
    pointer-events: none;
    background-repeat: no-repeat;
    /* transform: scale(0.8); */
}

#template_Wrapper .newzebratrattis {
    position: absolute;
    top: 280px;
    width: 160px;
    height: 111px;
    left: 603px;
    background-color: transparent;
    cursor: pointer;
        z-index: 2;
}

#template_Wrapper .enterbtn {
    position: absolute;
    width: 118px;
    height: 25px;
    left: 463px;
    top: 544px;
    background-color: transparent;
    cursor: pointer;
    z-index: 2;
}

#template_Wrapper .enterbtn:hover {
    position: absolute;
    border-bottom: #98c330 solid 1px;
}

#template_Wrapper .highanimation {
    position: absolute;
    top: 544px;
    left: 605px;
    width: 150px;
    height: 27px;
    background-color: transparent;
    cursor: pointer;
}

#template_Wrapper .highanimation:hover {
    position: absolute;
    border-bottom: #98c330 solid 1px;
}

#template_Wrapper .lowanimation {
    position: absolute;
    left: 608px;
    width: 170px;
    height: 27px;
    top: 584px;
    background-color: transparent;
    cursor: pointer;
}

#template_Wrapper .lowanimation:hover {
    position: absolute;
    border-bottom: #98c330 solid 1px;
}

#template_Wrapper #iconAnimQuiz {
    width: 185px;
    height: 100px;
    position: absolute;
    left: 109px;
    top: 180px;
    transform: scale(0.5);
}

#template_Wrapper .textanchr {
    display: block;
    color: red;
}

#template_Wrapper .textanchrzebra {
    display: block;
    color: blue;
}

.container #imgZebra {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 193px;
    left: 198px;
    z-index: 1;
}

.tabContent,
#leap {
    display: none;
}

.menu_content {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    z-index: 1;
}


/* Leap page start*/

#leap {
    position: absolute;
    background-image: url(../assets/image/animation/codezebra_image_02.png);
    width: 101%;
    height: 100%;
    margin: auto;
    background-repeat: no-repeat;
    left: 0px;
}

#leap #highAnimationLeap {
    position: absolute;
    width: 217px;
    height: 172px;
    top: 305px;
    left: 533px;
}

#highAnimationLeap1 {
    position: absolute;
    width: 217px;
    height: 172px;
    top: 305px;
    left: 533px;
}

#leap #leapClick {
    position: absolute;
    width: 217px;
    height: 90px;
    top: 413px;
    left: 533px;
    background-color: transparent;
    cursor: pointer;
    -ms-transform: rotate(20deg);
    transform: rotate(32deg);
    z-index: 1;
}


/* Leap page End*/


/* No Animation start*/

.container #tabContent_2 {
    position: absolute;
    background-image: url(../assets/image/animation/codezebra_image_02.png);
    width: 101%;
    height: 100%;
    margin: auto;
    background-repeat: no-repeat;
    left: 0px;
}

.container #tabContent_3 {
    position: absolute;
    background-image: url(../assets/image/animation/codezebra_image_02.png);
    width: 101%;
    height: 100%;
    margin: auto;
    background-repeat: no-repeat;
    left: 0px;
}

.container #tabContent_4 {
    position: absolute;
    background-image: url(../assets/image/noAnimation/codezebra-no_animate_bg_02.png);
    width: 101%;
    height: 100%;
    margin: auto;
    background-repeat: no-repeat;
    left: 0px;
}


/* sprite animation start*/

.container #highAnimationButterfly {
    position: absolute;
    width: 209px;
    height: 200px;
    top: 460px;
    left: 313px;
    pointer-events: none;
}

.container #highAnimationGreenfly {
    position: absolute;
    width: 215px;
    height: 202px;
    top: 398px;
    left: 92px;
}

.container #highAnimationfish1 {
    position: absolute;
    width: 205px;
    height: 41px;
    top: 610px;
    left: 51px;
}

.container #highAnimationfish2 {
    position: absolute;
    width: 295px;
    height: 117px;
    top: 1187px;
    left: 586px;
}

#highAnimationGreenfly_canvas {
    height: 200px !important;
    width: 237px !important;
}

#highAnimationButterfly_canvas {
    height: 221px !important;
    width: 350px !important;
}

#highAnimationfish1_canvas {
    height: 340px !important;
    width: 275px !important;
}

.container #highAnimationButterfly_leap {
    position: absolute;
    width: 209px;
    height: 200px;
    top: 460px;
    left: 313px;
}

.container #highAnimationGreenfly_leap {
    position: absolute;
    width: 215px;
    height: 202px;
    top: 398px;
    left: 92px;
}

.container #highAnimationfish1_leap {
    position: absolute;
    width: 205px;
    height: 41px;
    top: 610px;
    left: 51px;
}

.container #highAnimationfish2_leap {
    position: absolute;
    width: 295px;
    height: 117px;
    top: 1187px;
    left: 586px;
}

#highAnimationGreenfly_leap_canvas {
    height: 200px !important;
    width: 237px !important;
}

#highAnimationButterfly_leap_canvas {
    height: 221px !important;
    width: 350px !important;
}

#highAnimationfish1_leap_canvas {
    height: 340px !important;
    width: 275px !important;
}


/* sprite animation End*/

.tabContent .whatIs {
    position: absolute;
    width: 180px;
    height: 125px;
    background-image: url(../assets/image/noAnimation/btn_01.png);
    top: 440px;
    left: 121px;
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: 0.9;
    z-index: 3;
}

.tabContent .whatIs:hover {
    position: absolute;
    opacity: 1;
}

.tabContent .softwear {
    position: absolute;
    width: 211px;
    height: 55px;
    background-image: url(../assets/image/noAnimation/btn_02.png);
    top: 728px;
    left: 187px;
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: 0.9;
    z-index: 1;
}

.tabContent .softwear:hover {
    position: absolute;
    opacity: 1;
}

.tabContent .software {
    position: absolute;
    width: 153px;
    height: 104px;
    background-image: url(../assets/image/noAnimation/323.png);
    top: 560px;
    left: 317px;
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: 0.9;
}

.tabContent .software:hover {
    position: absolute;
    opacity: 1;
}

.tabContent .games {
    position: absolute;
    width: 206px;
    height: 100px;
    background-image: url(../assets/image/noAnimation/btn_04.png);
    top: 805px;
    left: 650px;
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: 0.9;
}

.tabContent .games:hover {
    position: absolute;
    opacity: 1;
}

.tabContent .experience {
    position: absolute;
    width: 173px;
    height: 47px;
    background-image: url(../assets/image/noAnimation/btn_05.png);
    top: 391px;
    left: 728px;
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: 0.9;
}

.tabContent .chatandStream {
    position: absolute;
      width: 287px;
      height: 46px;
    background-image: url(../assets/image/noAnimation/btn_03.png);
        top: 1134px;
        left: 503px;
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: 0.9;
}

.tabContent .experience:hover {
    position: absolute;
    opacity: 1;
}


/* No Animation End*/

/* zebra trails */
#tabContent_1 .bg_image {
    background-image: url(../assets/image/15.png);
      width: 778px;
      height: 1102px;
      z-index: 1;
      position: relative;
      pointer-events: none;
}
.content_bg {
    /* background-color: #382222; */
    width: 200px;
    height: 60px;
    position: absolute;
    top: 322px;
    left: 90px;
    z-index: 0;
}
.content_link{
     position: absolute;
     z-index: 0;
      left: 90px;
      cursor: pointer;
}
.content_link:hover{
    background-color: #ff9999;
}
#tabContent_1_link_1{
        width: 310px;
        top: 310px;
        height: 75px;
}
#tabContent_1_link_2{
    width: 420px;
    top: 392px;
    height: 218px;
}
#tabContent_1_link_3{
    width: 400px;
    top: 618px;
    height: 88px;
}
#tabContent_1_link_4{
        width: 313px;
        top: 718px;
        height: 139px;
}
#tabContent_1 #highAnimationLeap1{
   position: absolute;
   z-index: 4;
   left: 285px;
   top: 187px;
   pointer-events: none;
}
#new_sprite{
        width: 158px;
        height: 226px;
        position: absolute;
        left: 605px;
        top: 278px;
        z-index: 1;
        pointer-events: none;
}


.blink#experienceId{
    background-image: url(../assets/image/noAnimation/btn_05a.png)
}
.blink#whatIsId{
    background-image: url(../assets/image/noAnimation/btn_01a.png)
}
.blink#softwearId {
    background-image: url(../assets/image/noAnimation/btn_02a.png)
}
.blink#chatandStreamId {
    background-image: url(../assets/image/noAnimation/btn_03a.png)
}
.main_page_click{
    z-index: 2;
    position: absolute;
    width: 350px;
    height: 140px;
    top: 142px;
    left: 39px;
    cursor: pointer;
}
.zebra_trail .main_page_click {
    background-image: url(../../common/popup/assets/image/11.png);
    width: 92px;
    height:30px;
    top: 72px;

}
.main_page{
    display: none;
}