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

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

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

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

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

@font-face {
    font-family: MyriadPro-Light;
    src: url("/learn-english-smakprov/learnEnglish-1/content/fonts/MyriadPro-Light.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;
}

#t1_7 {
    left: 22px;
    top: 147px;
    letter-spacing: -11.8px;
    word-spacing: -2.4px;
}

#t2_7 {
    left: 21px;
    top: 146px;
    letter-spacing: -11.8px;
    word-spacing: -2.4px;
}

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

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

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

#t4_7 {
    left: 259px;
    top: 1160px;
    letter-spacing: 1px;
    word-spacing: 0.2px;
}

#t5_7 {
    left: 334px;
    top: 1160px;
    letter-spacing: 0.9px;
    word-spacing: 0.5px;
}

#t6_7 {
    left: 425px;
    top: 95px;
    letter-spacing: -0.1px;
    word-spacing: 0.1px;
}

#t7_7 {
    left: 603px;
    top: 718px;
}

#t8_7 {
    left: 687px;
    top: 718px;
}

#t9_7 {
    left: 700px;
    top: 718px;
    letter-spacing: -0.3px;
}

#ta_7 {
    left: 472px;
    top: 822px;
}

#tb_7 {
    left: 897px;
    top: 822px;
}

#tc_7 {
    left: 954px;
    top: 822px;
}

#td_7 {
    left: 259px;
    top: 187px;
    letter-spacing: -0.3px;
    word-spacing: 0.4px;
}

#te_7 {
    left: 259px;
    top: 224px;
    letter-spacing: -0.2px;
}

#tf_7 {
    left: 328px;
    top: 224px;
    letter-spacing: -0.2px;
    word-spacing: 0.1px;
}

#tg_7 {
    left: 259px;
    top: 260px;
    letter-spacing: 0.1px;
}

#th_7 {
    left: 328px;
    top: 260px;
    letter-spacing: 0.1px;
    word-spacing: -0.1px;
}

#ti_7 {
    left: 259px;
    top: 297px;
    letter-spacing: -0.2px;
}

#tj_7 {
    left: 328px;
    top: 297px;
    letter-spacing: -0.3px;
    word-spacing: 0.5px;
}

#tk_7 {
    left: 259px;
    top: 333px;
    letter-spacing: 0.1px;
}

#tl_7 {
    left: 328px;
    top: 333px;
    letter-spacing: -0.5px;
    word-spacing: 0.7px;
}

#tm_7 {
    left: 259px;
    top: 369px;
    letter-spacing: -0.2px;
}

#tn_7 {
    left: 328px;
    top: 369px;
    letter-spacing: -0.1px;
    word-spacing: 0.2px;
}

#to_7 {
    left: 259px;
    top: 406px;
    letter-spacing: 0.1px;
}

#tp_7 {
    left: 328px;
    top: 406px;
    letter-spacing: -0.2px;
}

#tq_7 {
    left: 259px;
    top: 442px;
    letter-spacing: -0.2px;
}

#tr_7 {
    left: 328px;
    top: 442px;
    letter-spacing: -0.2px;
    word-spacing: 0.3px;
}

#ts_7 {
    left: 259px;
    top: 479px;
    letter-spacing: 0.1px;
}

#tt_7 {
    left: 328px;
    top: 479px;
    letter-spacing: -0.2px;
    word-spacing: 0.2px;
}

#tu_7 {
    left: 259px;
    top: 515px;
    letter-spacing: -0.2px;
}

#tv_7 {
    left: 328px;
    top: 515px;
    letter-spacing: -1px;
    word-spacing: 1.5px;
}

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

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

.s8_7 {
    FONT-SIZE: 67.2px;
    FONT-FAMILY: JLMDBY-MyriadPro-Bold7;
    color: rgb(0, 0, 0);
}

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

.s6_7 {
    FONT-SIZE: 67.2px;
    FONT-FAMILY: JLMDBY-MyriadPro-Bold7;
    color: rgb(116, 202, 242);
}

.s5_7 {
    FONT-SIZE: 103.9px;
    FONT-FAMILY: VDCXNA-MyriadPro-Regular7;
    color: rgb(0, 0, 0);
}

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

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

.s10_7 {
    FONT-SIZE: 85.6px;
    FONT-FAMILY: JLMDBY-MyriadPro-Semibold7;
    color: rgb(0, 0, 0);
}

.s9_7 {
    FONT-SIZE: 85.6px;
    FONT-FAMILY: JLMDBY-MyriadPro-Bold7;
    color: rgb(0, 0, 0);
}

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

.s7_7 {
    FONT-SIZE: 67.2px;
    FONT-FAMILY: VDCXNA-MyriadPro-Regular7;
    color: rgb(0, 0, 0);
}

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

#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;
}

#call_page3_3 {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 60px;
    top: 494px;
    width: 46px;
    height: 42px;
    text-align: left;
    background: transparent;
    background-image: url("/learn-english-smakprov/learnEnglish-1/ebook/Grade3/images/Previous.png");
    background-repeat: no-repeat;
    font: normal 27px Arial, Helvetica, sans-serif;
}

#call_page3_4 {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 126px;
    top: 494px;
    width: 46px;
    height: 42px;
    text-align: left;
    background: transparent;
    background-image: url("/learn-english-smakprov/learnEnglish-1/ebook/Grade3/images/Next.png");
    background-repeat: no-repeat;
    font: normal 27px Arial, Helvetica, sans-serif;
}

#playVideo {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 256px;
    top: 84px;
    width: 47px;
    height: 46.5px;
    text-align: left;
    background: transparent;
    background-repeat: no-repeat;
    border-color: #6C6565;
    border-style: inset;
    border-width: 0.15em;
}

#playVideo: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);
}

#video_1 {
    z-index: 2;
    position: absolute;
    left: 15%;
    top: 2%;
    width: 70%;
    height: 80.35%;
    background: black;
    border: 4px solid black;
    display: none;
}

#closeVideo {
    border-style: none;
    z-index: 2;
    position: absolute;
    right: 13%;
    top: 0%;
    width: 3.5%;
    height: 7%;
    text-align: left;
    background: transparent;
    background-image: url("/learn-english-smakprov/learnEnglish-1/ebook/Grade3/wildanimals/page5/img/BtnClose.png");
    background-repeat: no-repeat;
    font: normal 27px Arial, Helvetica, sans-serif;
    display: none;
    background-size: contain;
    background-repeat: no-repeat;
}

.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/page5/img/BtnClose.png");
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
}

#popup1 {
    z-index: 2;
    left: 35.5%;
    top: 13.6%;
    width: 38%;
    height: 40%;
    border-radius: 1em;
    cursor: pointer;
}

#popup2 {
    z-index: 2;
    left: 36%;
    top: 60.5%;
    width: 38%;
    height: 35%;
    border-radius: 1em;
    cursor: pointer;
}

#popup3 {
    z-index: 2;
    left: 35.5%;
    top: 13.6%;
    width: 38%;
    height: 40%;
    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;
    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;
}

#popup2.clicked {
    top: 2% !important;
    height: auto;
    max-height: 90%;
    cursor: default;
}

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

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

#playAudio_3_5 {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 59px;
    top: 726px;
    width: 97px;
    height: 91px;
    text-align: left;
    background: transparent;
}

#playAudio_1_5 {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 59px;
    top: 726px;
    width: 97px;
    height: 91px;
    text-align: left;
    background: transparent;
}

#audio {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 17.5%;
    top: 21%;
    display: none;
}

#ballon_wildanimals {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 59px;
    top: 854px;
    width: 97px;
    height: 83px;
    text-align: left;
    background: transparent;
}

#playAudio_song1 {
    border-style: none;
    z-index: 0;
    position: absolute;
    left:15.9%;
    top: 34px;
    width: 62px;
    height: 64px;
    text-align: left;
    background: transparent;
    background-repeat: no-repeat;
    border-color: #6C6565;
    border-style: inset;
    border-width: 0.15em;
    display: none;
    background-size: contain;
    background-image: url("/learn-english-smakprov/learnEnglish-1/ebook/Grade3/images/songImg1.png");
}

#playAudio_song1: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);
}

#playAudio_song2 {
    border-style: none;
    z-index: 0;
    position: absolute;
    left:19.55%;
    top: 34px;
    width: 62px;
    height: 64px;
    text-align: left;
    background: transparent;
    background-repeat: no-repeat;
    border-color: #6C6565;
    border-style: inset;
    border-width: 0.15em;
    display: none;
    background-size: contain;
    background-image: url("/learn-english-smakprov/learnEnglish-1/ebook/Grade3/images/songImg2.png");
}

#playAudio_song2: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);
}

#txtbgColor {
    left: 15.1%;
    width: 70%;
    top: 51.3%;
    height: 10% !important;
    z-index: -1;
    background-color: #d5effd;
    display: none;
    position: absolute;
}

.songText {
    position: absolute;
    -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: nowrap;
    overflow: visible;
    FONT-SIZE:100px;
    FONT-FAMILY: MyriadPro-Light;
    font-weight: bold;
    /*color: rgb(0,0,0);*/
    color: #B2AFAD;
    cursor: pointer;
}

#line_1,
#line_2,
#line_3,
#line_4,
#line_5,
#line_6,
#line_7,
#line_8,
#line_9,
#line_10,
#line_11,
#line_12,
#line_13,
#line_14,
#line_15,
#line_16,
#line_17,
#line_18,
#line_19,
#line_20,
#line_21,
#line_22,
#line_23,
#line_24,
#line_25,
#line_26,
#line_27,
#line_28,
#line_29,
#line_30,
#line_31,
#line_32,
#line_33,
#line_34 {
    left: 21%;
    display: none;
    z-index: -1;
}




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

@media (device-width: 2880px) and (device-height: 1800px) {
    #popup1 {
        left: 33%;
        top: 13.6%;
        width: 46%;
        height: 40%;
    }
    #popup2 {
        left: 34%;
        top: 61.2%;
        width: 44%;
        height: 32%;
    }
    #playAudio_song1 {
        left: 470px;
        top: 49px;
        width: 46px;
        height: 54px;
    }
    #playAudio_song2 {
        left: 540px;
        top: 49px;
        width: 46px;
        height: 54px;
    }
    #txtbgColor {
        height: 8.5% !important;
        top: 50.8%;
    }
    #popup3.clicked {
        height: 80% !important;
    }
    #line_1,
    #line_2,
    #line_3,
    #line_4,
    #line_5,
    #line_6,
    #line_7,
    #line_8,
    #line_9,
    #line_10,
    #line_11,
    #line_12,
    #line_13,
    #line_14,
    #line_15,
    #line_16,
    #line_17,
    #line_18,
    #line_19,
    #line_20,
    #line_21,
    #line_22,
    #line_23,
    #line_24,
    #line_25,
    #line_26,
    #line_27,
    #line_28,
    #line_29,
    #line_30,
    #line_31,
    #line_32,
    #line_33,
    #line_34 {
        display: none;
        z-index: -1;
        left: 19%;
    }
     .mac .songText{
                font-size: 160px !important;
             }
}




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

@media (device-width: 2560px) and (device-height: 1600px) {
    #popup1 {
        left: 33%;
        top: 13.6%;
        width: 46%;
        height: 40%;
    }
    #popup2 {
        left: 34%;
        top: 61.2%;
        width: 44%;
        height: 32%;
    }
    #playAudio_song1 {
        left: 420px;
        top: 45px;
        width: 46px;
        height: 54px;
    }
    #playAudio_song2 {
        left: 480px;
        top: 45px;
        width: 46px;
        height: 54px;
    }
    #txtbgColor {
        height: 8% !important;
    }
    #popup3.clicked {
        height: 80% !important;
    }
    #line_1,
    #line_2,
    #line_3,
    #line_4,
    #line_5,
    #line_6,
    #line_7,
    #line_8,
    #line_9,
    #line_10,
    #line_11,
    #line_12,
    #line_13,
    #line_14,
    #line_15,
    #line_16,
    #line_17,
    #line_18,
    #line_19,
    #line_20,
    #line_21,
    #line_22,
    #line_23,
    #line_24,
    #line_25,
    #line_26,
    #line_27,
    #line_28,
    #line_29,
    #line_30,
    #line_31,
    #line_32,
    #line_33,
    #line_34 {
        display: none;
        z-index: -1;
        left: 19%;
    }
}




/*media query css  1920px  and 1200px*/

@media (device-width: 1920px) and (device-height: 1200px) {
    #popup1 {
        left: 33.5%;
        top: 13.6%;
        width: 43%;
        height: 40%;
    }
    #popup2 {
        left: 34.8%;
        top: 61.5%;
        width: 41.5%;
        height: 32%;
    }
    #popup3.clicked {
        top: 2% !important;
        width: 70% !important;
        height: 82% !important;
    }
    #playAudio_song1 {
        left: 15.9%;
        top: 40px;
        width: 55px;
        height: 65px;
    }
    #playAudio_song2 {
        left: 19.2%;
        top: 40px;
        width: 55px;
        height: 65px;
    }
    #txtbgColor {
        top: 51%;
    }
    .songText {
        FONT-SIZE:120px!important;
        left: 20% !important;
    }
    #video_1 {
        left: 15%;
        top: 2%;
        width: 70%;
    }
    #closeVideo {
        right: 13%;
    }
}




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

@media (device-width: 1280px) and (device-height: 1050px) {
    #popup1 {
        left: 28.5%;
        top: 13.6%;
        width: 55%;
        height: 40%;
    }
    #popup2 {
        left: 30%;
        top: 61%;
        width: 54%;
        height: 32%;
    }
    .clicked {
        width: 84% !important;
        left: 8% !important;
        height: auto!important;
    }
    #popup3.clicked {
        width: 84% !important;
        left: 7.5% !important;
        height: 80% !important;
    }
    .closeBtn {
        right: 5.5% !important;
    }
    #close_popup3 {
        left: 89% !important;
    }
    #playAudio_song1 {
        left:8.9%;
        top: 34px;
        width: 45px;
        height: 50px;
    }
    #playAudio_song2 {
        left:13.5%;
        top: 34px;
        width: 45px;
        height: 50px;
    }
    #txtbgColor {
        top: 50.5%;
        left: 7.7%;
        width: 83.7%;
    }
    .songText {
        left: 15% !important;
        FONT-SIZE: 100px!important;
    }
    #video_1 {
        left: 8%;
        top: 2%;
        width: 84%;
    }
    #closeVideo {
        right: 6%;
    }
}




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

@media (device-width: 2560px) and (device-height: 1440px) {
    #popup1.clicked {
        height: 72% !important;
    }
    #popup3.clicked {
        top: 2% !important;
        width: 70% !important;
        height: 83% !important;
    }
    #playAudio_song1 {
        left:15.9%;
        top: 53px;
        width: 60px;
        height: 65px;
    }
    #playAudio_song2 {
        left:19%;
        top: 53px;
        width: 60px;
        height: 65px;
    }
    #txtbgColor {
        left:15.08%;
        top: 51%;
        height: 9% !important;
        width:70% !important;
    }
    .songText {
        left: 20% !important;
        FONT-SIZE: 130px!important;
    }
}




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

@media (device-width: 1600px) and (device-height: 1200px) {
    #popup1 {
        left: 30.5%;
        top: 13.6%;
        width: 51%;
        height: 40%;
    }
    #popup2 {
        left: 31.5%;
        top: 60.5%;
        width: 50%;
        height: 33%;
    }
    .clicked {
        width: 84% !important;
        left: 8% !important;
    }
    #popup3.clicked {
        width: 84% !important;
        left: 8% !important;
        height: 82% !important;
    }
    #popup3.clicked {
        width: 84% !important;
        left: 8% !important;
        height: 82% !important;
    }
    .closeBtn {
        right :6.8% !important;
    }
    #playAudio_song1 {
        left:9.9%;
        top: 40px;
        width: 55px;
        height: 60px;
    }
    #playAudio_song2 {
        left:14.3%;
        top: 40px;
        width: 55px;
        height: 60px;
    }
    #txtbgColor {
        left: 8.2%;
        width: 83.9%;
        top: 51%;
    }
    .songText {
        left: 15% !important;
        FONT-SIZE:120px!important;
    }
    #video_1 {
        left: 8%;
        top: 2%;
        width: 84%;
    }
    #closeVideo {
        right: 6%;
    }
}

@media (device-width: 1680px) and (device-height: 1050px) {
    #popup1 {
        left: 34.7%;
        top: 13.3%;
        width: 42%;
        height: 38.5%;
    }
    #popup2 {
        left: 35%;
        width: 41.3%;
    }
    #popup3.clicked {
        width: 69.8% !important;
        left: 15% !important;
        height: 84.5% !important;
    }
    .closeBtn {
        right: 14% !important;
    }
    #playAudio_song1 {
        left: 15.9%;
        top: 35px;
        width: 50px;
        height: 55px;
    }
    #playAudio_song2 {
        left: 19.55%;
        top: 35px;
        width: 50px;
        height: 55px;
    }
    #txtbgColor {
        top: 51% !important;
        left: 15.2%;
        width: 69.7%;
    }
    .songText {
        left: 20% !important;
        FONT-SIZE: 120px!important;
    }
}

@media (device-width: 1920px) and (device-height: 1080px) {
    #popup1.clicked {
        top: 2% !important;
        height: 60% !important;
    }
    #popup2.clicked {
        top: 2% !important;
        height: 70% !important;
    }
    #popup3.clicked {
        top: 2% !important;
        width: 70% !important;
        height: 85% !important;
        left: 15% !important;
    }
    #playAudio_song1 {
        left: 15.9%;
        top: 35px;
        width: 60px;
        height: 65px;
    }
    #playAudio_song2 {
        left: 19.55%;
        top: 35px;
        width: 60px;
        height: 65px;
    }
    .songText {
        left: 20% !important;
        FONT-SIZE: 120px!important;
    }
    #txtbgColor {
        left: 15.1%;
        width: 70%;
        top: 51.3%;
        height: 10% !important;
    }
    .closeBtn {
        right: 14% !important;
    }
}




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

@media (device-width: 1366px) and (device-height: 768px) {
    #popup1 {
        left: 35.5%;
        top: 13.6%;
        width: 37%;
        height: 40%;
    }
    #popup2 {
        left: 36%;
        top: 60.5%;
        width: 36.5%;
        height: 35%;
    }
    #popup3.clicked {
        top: 2% !important;
        width: 70% !important;
        height: 85% !important;
        left: 15% !important;
    }
    #playAudio_song1 {
        left: 15.9%;
        top: 25px;
        width: 40px;
        height: 45px;
    }
    #playAudio_song2 {
        left: 19.55%;
        top: 25px;
        width: 40px;
        height: 45px;
    }
    #txtbgColor {
        left: 15.2%;
        width: 69.7%;
        top: 51%;
        height: 10% !important;
    }
    .songText {
        FONT-SIZE: 90px!important;
        left: 20% !important;
    }
    .closeBtn {
        right: 14% !important;
    }
}




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

@media (device-width: 1280px) and (device-height: 1024px) {
    #video_1 {
        left: 6%;
        width: 88%;
    }
    #closeVideo {
        right: 4%;
    }
    #popup1 {
        left: 28.5%;
        top: 13.6%;
        width: 55%;
        height: 40%;
    }
    #popup2 {
        left: 30%;
        top: 61%;
        width: 54%;
        height: 33%;
    }
    .clicked {
        width: 86% !important;
        left: 7% !important;
    }
    #popup3.clicked {
        width: 88% !important;
        left: 6% !important;
        height: 80% !important;
    }
    #playAudio_song1 {
        left: 8%;
        top: 35px;
        width: 45px;
        height: 50px;
    }
    #playAudio_song2 {
        left: 12%;
        top: 35px;
        width: 45px;
        height: 50px;
    }
    #txtbgColor {
        left: 6.2%;
        width: 87.8%;
        top: 51%;
    }
    .songText {
        FONT-SIZE: 100px!important;
        left: 15% !important;
    }
    .closeBtn {
        right: 5% !important;
    }
}




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

@media (device-width: 1280px) and (device-height: 960px) {
    #video_1 {
        left: 8%;
        width: 84%;
    }
    #closeVideo {
        right: 6%;
        width: 3.5%;
    }
    #popup1 {
        left: 30.5%;
        top: 13.6%;
        width: 51%;
        height: 40%;
    }
    #popup2 {
        left: 31%;
        top: 60.5%;
        width: 50%;
        height: 35%;
    }
    .clicked {
        width: 84% !important;
        left: 8% !important;
    }
    #popup3.clicked {
        width: 84% !important;
        left: 8% !important;
        height: 82.1% !important;
    }
    #playAudio_song1 {
        left: 9.5%;
        top: 33px;
        width: 45px;
        height: 50px;
    }
    #playAudio_song2 {
        left: 14.3%;
        top: 33px;
        width: 45px;
        height: 50px;
    }
    #txtbgColor {
        top: 51%;
        left: 8.2%;
        width: 83.8%;
    }
    .songText {
        FONT-SIZE: 100px!important;
        left: 15% !important;
    }
    .closeBtn {
        left: 90%;
    }
}




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

@media (device-width: 1440px) and (device-height: 900px) {
    #popup1 {
        left: 34%;
        top: 13.6%;
        width: 42%;
        height: 40%;
    }
    #popup2 {
        left: 35%;
        top: 60.5%;
        width: 40.2%;
        height: 35%;
    }
    #popup3.clicked {
        top: 2% !important;
        width: 70% !important;
        height: 82.9% !important;
        margin-left: 0.5% !important;
    }
    #playAudio_song1 {
        left: 15.9%;
        top: 35px;
        width: 45px;
        height: 50px;
    }
    #playAudio_song2 {
        left: 19.55%;
        top: 35px;
        width: 45px;
        height: 50px;
    }
    #txtbgColor {
        top: 51%;
        left: 15.7%;
        width: 69.8%;
    }
    .songText {
        FONT-SIZE: 100px!important;
        left: 20% !important;
    }
    .closeBtn {
        right:13.5% !important;
    }
}




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

@media (device-width: 1600px) and (device-height: 900px) {
    #popup3.clicked {
        width: 69.8% !important;
        left: 15% !important;
        height: 84.5% !important;
    }
    #playAudio_song1 {
        left: 15.9%;
        top: 30px;
        width: 45px;
        height: 50px;
    }
    #playAudio_song2 {
        left: 19.55%;
        top: 30px;
        width: 45px;
        height: 50px;
    }
    #txtbgColor {
        left: 15.2%;
        width: 69.7%;
    }
    .songText {
        FONT-SIZE: 100px!important;
        left: 20% !important;
    }
}




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

@media (device-width: 1280px) and (device-height: 800px) {
    #popup1 {
        left: 34%;
        top: 13.6%;
        width: 42%;
        height: 40%;
    }
    #popup2 {
        left: 35%;
        top: 60.5%;
        width: 40%;
        height: 34%;
    }
    #popup3.clicked {
        top: 2% !important;
        width: 70% !important;
        height: 84% !important;
        left: 15% !important;
    }
    #playAudio_song1 {
        left: 15.9%;
        top: 27px;
        width: 40px;
        height: 45px;
    }
    #playAudio_song2 {
        left: 19.55%;
        top: 27px;
        width: 40px;
        height: 45px;
    }
    #txtbgColor {
        left: 15.2%;
        width: 69.85%;
    }
    .songText {
        FONT-SIZE:80px!important;
        left: 20% !important;
    }
    .closeBtn {
        right: 14%;
    }
}




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

@media (device-width: 1280px) and (device-height: 720px) {
    #popup1 {
        left: 35.5%;
        top: 13.6%;
        width: 37%;
        height: 40%;
    }
    #popup2 {
        left: 36.5%;
        top: 60.5%;
        width: 36%;
        height: 35%;
    }
    #popup3.clicked {
        top: 2% !important;
        width: 70% !important;
        height: 85% !important;
        left: 15% !important;
    }
    #playAudio_song1 {
        left: 15.9%;
        top: 25px;
        width: 38px;
        height: 42px;
    }
    #playAudio_song2 {
        left: 19.55%;
        top: 25px;
        width: 38px;
        height: 42px;
    }
    #txtbgColor {
        top: 51%;
        left: 15.2%;
        width: 69.7%;
    }
    .songText {
        FONT-SIZE: 80px!important;
        left: 20% !important;
    }
    .closeBtn {
        right: 14%;
    }
}




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

@media (device-width: 1024px) and (device-height: 768px) {
    #video_1 {
        left: 8% !important;
        width: 84% !important;
    }
    #closeVideo {
        right: 6% !important;
    }
    #popup1 {
        left: 30.5%;
        top: 13.6%;
        width: 50%;
        height: 40%;
    }
    #popup2 {
        left: 32%;
        top: 60.5%;
        width: 48%;
        height: 33%;
    }
    .clicked {
        width: 84% !important;
        left: 8% !important;
    }
    #popup3.clicked {
        width: 84% !important;
        left: 8% !important;
        height: 84% !important;
    }
    #playAudio_song1 {
        left: 10%;
        top: 27px;
        width: 38px;
        height: 42px;
    }
    #playAudio_song2 {
        left: 14%;
        top: 27px;
        width: 38px;
        height: 42px;
    }
    #txtbgColor {
        left: 8.2%;
        width: 84%;
    }
    .songText {
        top: 51%;
        FONT-SIZE: 80px!important;
        left: 15% !important;
    }
    .closeBtn {
        left: 90%;
    }
}

@media (device-width: 1600px) and (device-height: 1024px) {
    #popup1 {
        left: 34.5%;
        width: 41%;
    }
    #popup2 {
        left: 34.2%;
        width: 42.3%;
    }
    /*.songText {
        left: 27%;
    }*/
    /*#playAudio_song1 {
        left: 258px;
    }
    #playAudio_song2 {
        left: 325px;
    }*/
   #popup3.clicked {
        width:69.75% !important;
        left: 15% !important;
        height: 84.1% !important;
    }
    #playAudio_song1 {
        left: 15.9%;
        top: 30px;
        width: 45px;
        height: 50px;
    }
    #playAudio_song2 {
        left: 19.55%;
        top: 30px;
        width: 45px;
        height: 50px;
    }
   #txtbgColor {
    left: 15.1%;
    width: 69.75%;
}
    .songText {
        FONT-SIZE:100px!important;
        left: 20% !important;
    }
    .closeBtn {
        right:14.5% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    #playVideo {
        width: 45px;
    }
    #video_1 {
        width: 90% !important;
        left: 5% !important;
        max-height: 90%;
        height: auto !important;
    }

    #closeVideo {
        left: 93%;
        top: 1% !important;
        width: 3% !important;
        height: 3% !important;
    }

    #popup1 {
        left: 21.5% !important;
        top: 11.5% !important;
        width: 74% !important;
        height: 30% !important;
    }
    #popup2 {
      left: 22% !important;
  top: 49.5% !important;
  width: 74% !important;
  height: 27% !important;
    }
    #popup3.clicked {
        /*top: 3% !important;*/
        top: 2% !important;
        width: 90% !important;
        height: 52% !important;
        margin-left: -10%;
    }
    #popup1.clicked,
    #popup2.clicked {
        top: 2% !important;
        width: 90% !important;
        left: 5% !important;
        height: auto!important;
    }
    #playAudio_song1 {
        left: 49px;
        /*top: 40px;*/
        top: 30px;
        width: 36px;
        height: 43px;
    }
    #playAudio_song2 {
        left: 91px;
        /*top: 40px;*/
        top: 30px;
        width: 45px;
        height: 43px;
    }
    #close_popup3 {
        /*top: 2% !important;*/
        top: 1.25% !important;
        margin-right: -10% !important;
    }
    #close_popup1,
    #close_popup2 {
        top: 1% !important;
        right: 4% !important;
    }
    #txtbgColor {
       left: 5.3%;
        width: 89.8%;
        top: 27.5%;
        height: 6% !important;
    }
    .songText {
        FONT-SIZE: 80px!important;
    }
    #line_1,
    #line_2,
    #line_3,
    #line_4,
    #line_5,
    #line_6,
    #line_7,
    #line_8,
    #line_9,
    #line_10,
    #line_11,
    #line_12,
    #line_13,
    #line_14,
    #line_15,
    #line_16,
    #line_17,
    #line_18,
    #line_19,
    #line_20,
    #line_21,
    #line_22,
    #line_23,
    #line_24,
    #line_25,
    #line_26,
    #line_27,
    #line_28,
    #line_29,
    #line_30,
    #line_31,
    #line_32,
    #line_33,
    #line_34,
    #line_35,
    #line_36,
    #line_37,
    #line_38,
    #line_39,
    #line_40,
    #line_41,
    #line_42,
    #line_43,
    #line_44,
    #line_45,
    #line_46,
    #line_47,
    #line_48,
    #line_49,
    #line_50,
    #line_51,
    #line_52,
    #line_53,
    #line_54,
    #line_55,
    #line_56,
    #line_57,
    #line_58,
    #line_59,
    #line_60,
    #line_61,
    #line_62,
    #line_63,
    #line_64 {
        left: 13%;
    }
}
/*for 13 version*/
@media all and (device-width: 810px) and (device-height: 1080px) and (orientation:portrait) {
  #popup1 {
    left: 23.5% !important;
    width: 70% !important;
    height: 29% !important;
    top: 10.6% !important;
}
#popup2 {
    left: 23% !important;
    top: 46.5% !important;
    width: 71% !important;
    height: 26% !important;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    #video_1 {
        width: 86% !important;
        left: 7% !important;
        height: auto !important;
    }

    #closeVideo {
        right: 5%;
    }
    #popup1 {
      left: 31% !important;
    top: 14% !important;
    width: 50% !important;
    height: 38% !important;
    }
    #popup2 {
      left: 31% !important;
  top: 61% !important;
  height: 34% !important;
  width: 51% !important;
    }
    #popup3.clicked {
       height: 80% !important;
        width: 84% !important;
        left: 3% !important;
        margin-left: 4%;
    }
    #playAudio_song1 {
        left: 84px;
        top: 28px;
        width: 35px;
        height: 37px;
    }
    #playAudio_song2 {
       left: 125px;
        top: 28px;
        width: 38px;
        height: 37px;
    }
    #close_popup3 {
          top: 1% !important;
        margin-right: -7% !important;
    }
    #txtbgColor {
        left: 7.15% !important;
        top: 45% !important;
        width: 84% !important;
        height: 6% !important;
    }
    .songText {
        FONT-SIZE: 80px !important;
    }
    #line_1,
    #line_2,
    #line_3,
    #line_4,
    #line_5,
    #line_6,
    #line_7,
    #line_8,
    #line_9,
    #line_10,
    #line_11,
    #line_12,
    #line_13,
    #line_14,
    #line_15,
    #line_16,
    #line_17,
    #line_18,
    #line_19,
    #line_20,
    #line_21,
    #line_22,
    #line_23,
    #line_24,
    #line_25,
    #line_26,
    #line_27,
    #line_28,
    #line_29,
    #line_30,
    #line_31,
    #line_32,
    #line_33,
    #line_34,
    #line_35,
    #line_36,
    #line_37,
    #line_38,
    #line_39,
    #line_40,
    #line_41,
    #line_42,
    #line_43,
    #line_44,
    #line_45,
    #line_46,
    #line_47,
    #line_48,
    #line_49,
    #line_50,
    #line_51,
    #line_52,
    #line_53,
    #line_54,
    #line_55,
    #line_56,
    #line_57,
    #line_58,
    #line_59,
    #line_60,
    #line_61,
    #line_62,
    #line_63,
    #line_64 {
        left: 22% !important;
        margin-top: -5%;
    }
    #popup1.clicked, #popup2.clicked {
    top: 2% !important;
    width: 84% !important;
    left: 9% !important;
    height: auto!important;
}


  #close_popup1 {
        top: 0% !important;
        /*margin-right: 4% !important;*/
        left: 91% !important;
    }
    #close_popup2 {
        top: 0% !important;
        /*margin-right: 4% !important;*/
        left: 91% !important;
    }
}
/*for 13 version*/
@media all and (device-width: 810px) and (device-height: 1080px) and (orientation:landscape) {
  #popup1 {
    left: 31% !important;
    top: 14% !important;
    width: 50% !important;
    height: 35% !important;
}
#popup2 {
    left: 32% !important;
    top: 57.5% !important;
    width: 48% !important;
    height: 32% !important;
  }
}
@media (device-width: 1536px) and (device-height: 864px) {

      .chromebook #playAudio_song1 {
        left: 15.4% !important;
        top: 34px !important;
        width: 62px !important;
        height: 64px !important;
    }
    .chromebook #popup3.clicked{
      height:83% !important;
      left: 15% !important;
      top: 2% !important;
      width: 70.2% !important;
  }

}