/* Begin embedded font definitions  */

@font-face {
    font-family: JLMDBY-MyriadPro-Semibold4;
    src: url("/learn-english-smakprov/learnEnglish-1/content/fonts/MyriadPro-Semibold.woff") format("woff");
}

@font-face {
    font-family: VDCXNA-MyriadPro-Light4;
    src: url("/learn-english-smakprov/learnEnglish-1/content/fonts/MyriadPro-Light.woff") format("woff");
}

@font-face {
    font-family: JLMDBY-CoreCircus2DDot34;
    src: url("/learn-english-smakprov/learnEnglish-1/content/fonts/Circus-2d-Dot3.woff") format("woff");
}

@font-face {
    font-family: JLMDBY-CoreCircus4;
    src: url("/learn-english-smakprov/learnEnglish-1/content/fonts/Core-Circus.woff") format("woff");
}

@font-face {
    font-family: JLMDBY-MyriadPro-Bold4;
    src: url("/learn-english-smakprov/learnEnglish-1/content/fonts/MyriadPro-Bold.woff") format("woff");
}

@font-face {
    font-family: JLMDBY-GillEducational-Regular4;
    src: url("/learn-english-smakprov/learnEnglish-1/content/fonts/GillEducational-wildanimalsp2.woff") format("woff");
}

@font-face {
    font-family: VDCXNA-MyriadPro-Regular4;
    src: url("/learn-english-smakprov/learnEnglish-1/content/fonts/MyriadPro-Regular.woff") format("woff");
}

.t {
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    -webkit-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -ms-transform: scale(0.25);
    z-index: 2;
    position: absolute;
    white-space: pre;
    overflow: visible;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#index {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 47px;
    top: 216px;
    width: 126px;
    height: 35px;
    text-align: left;
    background: transparent;
    background-repeat: no-repeat;
    font: normal 27px Arial, Helvetica, sans-serif;
}

#index:active {
    background-repeat: no-repeat;
}

#wildanimals {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 47px;
    top: 282px;
    width: 126px;
    height: 35px;
    text-align: left;
    background: transparent;
    background-repeat: no-repeat;
    font: normal 27px Arial, Helvetica, sans-serif;
}

#wildanimals:active {
    background-repeat: no-repeat;
}

#next {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 125px;
    top: 493px;
    width: 50px;
    height: 42px;
    text-align: left;
    background: transparent;
    background-image: url("/learn-english-smakprov/learnEnglish-1/ebook/Grade3/wildanimals/page2/img/17.png");
    background-repeat: no-repeat;
    font: normal 27px Arial, Helvetica, sans-serif;
}

#previous {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 54px;
    top: 493px;
    width: 50px;
    height: 42px;
    text-align: left;
    background: transparent;
    background-image: url("/learn-english-smakprov/learnEnglish-1/ebook/Grade3/wildanimals/page2/img/16.png");
    background-repeat: no-repeat;
    font: normal 27px Arial, Helvetica, sans-serif;
}

#tvalj1 {
    left: 59px;
    top: 224px;
    letter-spacing: 3px;
}

#tvalj2 {
    left: 71px;
    top: 292px;
    letter-spacing: 3px;
}

#popup_btn {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 366px;
    top: 786px;
    width: 45px;
    height: 45px;
    text-align: left;
    background: transparent;
    background-repeat: no-repeat;
    border-color: #6c6565;
    border-style: inset;
    border-width: .15em;
    cursor: pointer;
}

#popup_btn:hover {
    -webkit-box-shadow: 0px 0px 1px 4px rgba(121, 169, 219, 1);
    -moz-box-shadow: 0px 0px 1px 4px rgba(121, 169, 219, 1);
    box-shadow: 0px 0px 1px 4px rgba(121, 169, 219, 1);
}

.closeBtn {
    border-style: none;
    z-index: 2;
    position: absolute;
    width: 3.5%;
    height: 7%;
    background: transparent;
    background-image: url("/learn-english-smakprov/learnEnglish-1/ebook/Grade3/wildanimals/page2/img/BtnClose.png");
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
}

#popup1 {
    z-index: 2;
    left: 36.2%;
    top: 65.2%;
    width: 29.5%;
    height: 25.5%;
    border-radius: 1em;
    cursor: pointer;
}

.popup {
    position: absolute;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

.clicked {
    top: 2% !important;
    width: 70% !important;
    height: auto!important;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
    left: 15% !important;
    right: 15% !important;
    border: 2px solid black!important;
    -webkit-box-shadow: 0px 0px 50px -1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 50px -1px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 50px -1px rgba(0, 0, 0, 0.75);
}

#popup1.clicked {
    cursor: default;
}

#t1_4 {
    left: 267px;
    top: 24px;
}

.ie #t1_4 {
    left: 267px;
    top: 29px;
}

.ieedge #t1_4 {
    left: 267px;
    top: 24px;
}

#t2_4 {
    left: 825px;
    top: 683px;
    letter-spacing: 0.2px;
    word-spacing: -1px;
}

#t3_4 {
    left: 812px;
    top: 721px;
}

#t4_4 {
    left: 259px;
    top: 103px;
}

#t5_4 {
    left: 694px;
    top: 104px;
}

#t6_4 {
    left: 258px;
    top: 447px;
}

#t7_4 {
    left: 800px;
    top: 447px;
}

#t8_4 {
    left: 993px;
    top: 1157px;
    letter-spacing: 1px;
    word-spacing: 0.2px;
}

#t9_4 {
    left: 1068px;
    top: 1157px;
    letter-spacing: 0.9px;
    word-spacing: 0.4px;
}

#ta_4 {
    left: 283px;
    top: 338px;
    letter-spacing: -0.3px;
    word-spacing: 2.3px;
}

#tb_4 {
    left: 283px;
    top: 351px;
    letter-spacing: -0.4px;
    word-spacing: 2px;
}

#tc_4 {
    left: 271px;
    top: 375px;
}

#td_4 {
    left: 494px;
    top: 338px;
    letter-spacing: 0.2px;
    word-spacing: 1.6px;
}

#te_4 {
    left: 494px;
    top: 351px;
    letter-spacing: 0.1px;
    word-spacing: 1.8px;
}

#tf_4 {
    left: 662px;
    top: 375px;
}

#tg_4 {
    left: 720px;
    top: 338px;
    letter-spacing: 0.1px;
    word-spacing: 2.4px;
}

#th_4 {
    left: 720px;
    top: 351px;
    letter-spacing: 0.1px;
    word-spacing: 1.7px;
}

#ti_4 {
    left: 707px;
    top: 375px;
}

#tj_4 {
    left: 930px;
    top: 338px;
    letter-spacing: 0.2px;
    word-spacing: 1.6px;
}

#tk_4 {
    left: 930px;
    top: 351px;
    letter-spacing: 0.2px;
    word-spacing: 1.6px;
}

#tl_4 {
    left: 930px;
    top: 364px;
    letter-spacing: 0.2px;
    word-spacing: 1.6px;
}

#tm_4 {
    left: 1098px;
    top: 375px;
}

#tn_4 {
    left: 283px;
    top: 683px;
    letter-spacing: 0.2px;
    word-spacing: 2.6px;
}

#to_4 {
    left: 283px;
    top: 696px;
    letter-spacing: 0.1px;
    word-spacing: 1.7px;
}

#tp_4 {
    left: 271px;
    top: 721px;
}

#tq_4 {
    left: 494px;
    top: 683px;
    letter-spacing: 0.2px;
    word-spacing: -0.2px;
}

#tr_4 {
    left: 595px;
    top: 683px;
    letter-spacing: -0.5px;
    word-spacing: 2.5px;
}

#ts_4 {
    left: 494px;
    top: 696px;
    letter-spacing: 0.2px;
    word-spacing: 1.6px;
}

#tt_4 {
    left: 662px;
    top: 721px;
}

#tu_4 {
    left: 299px;
    top: 805px;
    letter-spacing: 0.7px;
    word-spacing: 0.2px;
}

#tv_4 {
    left: 799px;
    top: 805px;
}

#tw_4 {
    left: 299px;
    top: 849px;
    letter-spacing: 0.6px;
    word-spacing: 0.3px;
}

#tx_4 {
    left: 799px;
    top: 849px;
}

#ty_4 {
    left: 299px;
    top: 893px;
    letter-spacing: 0.8px;
    word-spacing: 0.1px;
}

#tz_4 {
    left: 799px;
    top: 893px;
}

#t10_4 {
    left: 299px;
    top: 938px;
    letter-spacing: 1px;
    word-spacing: -0.2px;
}

#t11_4 {
    left: 799px;
    top: 938px;
}

#t12_4 {
    left: 299px;
    top: 982px;
    letter-spacing: 0.8px;
    word-spacing: 0.1px;
}

#t13_4 {
    left: 799px;
    top: 982px;
}

#t14_4 {
    left: 299px;
    top: 1026px;
    letter-spacing: 0.5px;
    word-spacing: -0.8px;
}

#t15_4 {
    left: 710px;
    top: 1026px;
    letter-spacing: 0.8px;
    word-spacing: 0.2px;
}

#t16_4 {
    left: 822px;
    top: 810px;
    letter-spacing: 0.5px;
    word-spacing: 0.1px;
}

#t17_4 {
    left: 822px;
    top: 855px;
    letter-spacing: 0.5px;
    word-spacing: 0.1px;
}

#t18_4 {
    left: 822px;
    top: 899px;
    letter-spacing: 0.5px;
    word-spacing: 0.2px;
}

#t19_4 {
    left: 822px;
    top: 944px;
    letter-spacing: 0.5px;
    word-spacing: 0.2px;
}

#t1a_4 {
    left: 822px;
    top: 988px;
    letter-spacing: 0.7px;
}

#t1b_4 {
    left: 822px;
    top: 1032px;
    letter-spacing: 0.5px;
    word-spacing: 0.1px;
}

#t1c_4 {
    left: 40px;
    top: 147px;
    letter-spacing: -12px;
}

#t1d_4 {
    left: 40px;
    top: 147px;
    letter-spacing: -12px;
}

#t1e_4 {
    left: 72px;
    top: 965px;
    letter-spacing: 3.2px;
    word-spacing: 1px;
}

.s2_4 {
    FONT-SIZE: 41.6px;
    FONT-FAMILY: JLMDBY-GillEducational-Regular4;
    color: rgb(0, 0, 0);
}

.s1_4 {
    FONT-SIZE: 150.2px;
    FONT-FAMILY: JLMDBY-MyriadPro-Bold4;
    color: rgb(255, 255, 255);
    line-height: 1.45;
}

.s7_4 {
    FONT-SIZE: 55px;
    FONT-FAMILY: VDCXNA-MyriadPro-Regular4;
    color: rgb(0, 0, 0);
}

.s10_4 {
    FONT-SIZE: 61.1px;
    FONT-FAMILY: JLMDBY-MyriadPro-Semibold4;
    color: rgb(255, 255, 255);
}

.s8_4 {
    FONT-SIZE: 85.6px;
    FONT-FAMILY: JLMDBY-CoreCircus4;
    color: rgb(255, 255, 255);
}

.s5_4 {
    FONT-SIZE: 55px;
    FONT-FAMILY: JLMDBY-MyriadPro-Semibold4;
    color: rgb(0, 0, 0);
}

.s9_4 {
    FONT-SIZE: 85.6px;
    FONT-FAMILY: JLMDBY-CoreCircus2DDot34;
    color: rgb(116, 202, 242);
}

.s3_4 {
    FONT-SIZE: 21.3px;
    FONT-FAMILY: JLMDBY-GillEducational-Regular4;
    color: rgb(0, 0, 0);
}

.s4_4 {
    FONT-SIZE: 128.3px;
    FONT-FAMILY: JLMDBY-MyriadPro-Semibold4;
    color: rgb(116, 202, 242);
}

.s6_4 {
    FONT-SIZE: 85.6px;
    FONT-FAMILY: VDCXNA-MyriadPro-Light4;
    color: rgb(0, 0, 0);
}


/*media query css  2880px  and 1800px*/

@media (device-width: 2880px) and (device-height: 1800px) {
    #popup1 {
        left: 34%;
        top: 65.2%;
        width: 35.5%;
        height: 25.5%;
    }
}


/*media query css  2560px  and 1600px*/

@media (device-width: 2560px) and (device-height: 1600px) {
    #popup1 {
        left: 34%;
        top: 65.2%;
        width: 35%;
        height: 25.5%;
    }
}

@media (device-width: 2560px) and (device-height: 1440px) {
    .clicked {
        top: 2% !important;
        width: 70% !important;
        height: auto!important;
    }
    .closeBtn {
        left: 83%;
    }
    #popup1 {
        left: 36%;
        width: 30.5%;
    }
}

@media (device-width: 1920px) and (device-height: 1200px) {
    #popup1 {
        left: 34.5%;
        width: 33.5%;
    }
    .clicked {
        top: 2% !important;
        width: 70% !important;
        height: auto!important;
    }
    .closeBtn {
        right: 14%;
    }
}

@media (device-width: 1600px) and (device-height: 1200px) {
    .clicked {
        width: 84% !important;
        left: 8% !important;
        height: auto!important;
    }
    .closeBtn {
        left: 90%;
    }
    #popup1 {
        left: 31.5%;
        width: 40%;
    }
}

@media (device-width: 1280px) and (device-height: 1050px) {
    .clicked {
        width: 84% !important;
        left: 8% !important;
        height: auto!important;
    }
    .closeBtn {
        left: 90%;
    }
    #popup1 {
        left: 30.4%;
        width: 42.4%;
    }
}


/*media query css  1680px  and 1050px*/

@media (device-width: 1680px) and (device-height: 1050px) {
    #popup1 {
        left: 35%;
        top: 65.2%;
        width: 32.5%;
        height: 25.5%;
    }
}


/*media query css 1600px and 900px*/

@media (device-width: 1600px) and (device-height: 900px) {
    #popup1 {
        left: 36.5%;
        top: 65.2%;
        width: 29%;
        height: 25.5%;
    }
}


/*media query css 1366px and 768px*/

@media (device-width: 1366px) and (device-height: 768px) {
    #popup1 {
        left: 36.5%;
        top: 65.2%;
        width: 28.5%;
        height: 25.5%;
    }
}


/*media query css  1280px  and 1024px*/

@media (device-width: 1280px) and (device-height: 1024px) {
    #popup1 {
        left: 30.5%;
        top: 65.2%;
        width: 42%;
        height: 25.5%;
    }
    .clicked {
        width: 84% !important;
        left: 8% !important;
        height: auto!important;
    }
    .closeBtn {
        left: 89%;
    }
}


/*media query css  1280px  and 960px*/

@media (device-width: 1280px) and (device-height: 960px) {
    #popup1 {
        left: 32.2%;
        top: 65.2%;
        width: 38.5%;
        height: 25.5%;
    }
    .clicked {
        width: 84% !important;
        left: 8% !important;
        height: auto!important;
    }
    .closeBtn {
        left: 89%;
    }
}


/*media query css 1440px and 900px*/

@media (device-width: 1440px) and (device-height: 900px) {
    #popup1 {
        left: 35.2%;
        top: 65.2%;
        width: 32%;
        height: 25.5%;
    }
}


/*media query css 1280px and 800px*/

@media (device-width: 1280px) and (device-height: 800px) {
    #popup1 {
        left: 35.2%;
        top: 65.2%;
        width: 31.5%;
        height: 25.5%;
    }
}


/*media query css 1280px and 720px*/

@media (device-width: 1280px) and (device-height: 720px) {
    #popup1 {
        left: 36.8%;
        top: 65.2%;
        width: 28%;
        height: 25.5%;
    }
}


/*emdia query css  1024px  and 768px*/

@media (device-width: 1024px) and (device-height: 768px) {
    #popup1 {
        left: 32.2%;
        top: 65.2%;
        width: 37.5%;
        height: 25.5%;
    }
    .clicked {
        width: 84% !important;
        left: 8% !important;
        height: auto!important;
    }
    .closeBtn {
        left: 89%;
    }
}
@media (device-width: 1600px) and (device-height: 1024px)
{
    #popup1
    {
        left: 34.6%;
        width: 33.3%;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    #close_popup1 {
        top: 1.25% !important;
        margin-right: -10% !important;
    }
     #popup1 {
       left: 22.25% !important;
   width: 59% !important;
   top: 53% !important;
   height: 21% !important;
    }
    #popup1.clicked {
        height: 28% !important;
        width: 84% !important;
        left: 8% !important;
        top: 2% !important;
    }
    .closeBtn {
        left: 90% !important;
        top: 1% !important;
    }
    .songText {
          FONT-SIZE: 60px !important;
      }
}
/*for 13 version*/
@media all and (device-width: 810px) and (device-height: 1080px) and (orientation:portrait) {
#popup1 {
    left: 23.25% !important;
    width: 57% !important;
    top: 50% !important;
    height: 21% !important;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    #close_popup1 {
        top: 0.5% !important;
        margin-right: 4% !important;
    }
    #popup1 {
      left: 31.25% !important;
  width: 40% !important;
  top: 65% !important;
  height: 27% !important;
    }
    #popup1.clicked {
        height: 50% !important;
        width: 84% !important;
        left: 9% !important;
        top: 2% !important;
    }
    .closeBtn {
        left: 91%;
    }
    .songText {
          FONT-SIZE: 60px !important;
      }
}
/*for 13 version*/
@media all and (device-width: 810px) and (device-height: 1080px) and (orientation:landscape) {
#popup1 {
    left: 32.25% !important;
    width: 38% !important;
    top: 61% !important;
    height: 26% !important;
  }

}