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

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

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

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

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

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

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

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

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

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

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

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

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

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

#t4_6 {
    left: 382px;
    top: 803px;
    letter-spacing: 2.1px;
    word-spacing: 0.3px;
}

#t5_6 {
    left: 963px;
    top: 1160px;
    letter-spacing: 1px;
    word-spacing: 0.2px;
}

#t6_6 {
    left: 1035px;
    top: 1160px;
    letter-spacing: 0.9px;
    word-spacing: 0.5px;
}

#t7_6 {
    left: 315px;
    top: 744px;
    letter-spacing: -0.1px;
    word-spacing: 0.1px;
}

#t8_6 {
    left: 367px;
    top: 95px;
    letter-spacing: -0.1px;
    word-spacing: 0.1px;
}

#t9_6 {
    left: 363px;
    top: 487px;
    letter-spacing: 0.7px;
}

#ta_6 {
    left: 673px;
    top: 489px;
    letter-spacing: -0.4px;
}

#tb_6 {
    left: 975px;
    top: 488px;
    letter-spacing: 0.5px;
}

#tc_6 {
    left: 675px;
    top: 206px;
    letter-spacing: 0.3px;
}

#td_6 {
    left: 975px;
    top: 206px;
    letter-spacing: 0.6px;
}

#te_6 {
    left: 365px;
    top: 206px;
    letter-spacing: 0.6px;
}

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

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

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

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

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

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

.s7_6 {
    FONT-SIZE: 61.1px;
    FONT-FAMILY: VDCXNA-MyriadPro-Regular6;
    color: rgb(0, 0, 0);
}

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

.s4_6 {
    FONT-SIZE: 220px;
    FONT-FAMILY: JLMDBY-MajemaSkolGlesPrickad6;
    color: rgb(0, 0, 0);
    line-height: 0.3;
}

#form6_1 {
    z-index: 2;
    border-style: none;
    position: absolute;
    left: 106px;
    top: 885px;
    width: 8px;
    height: 8px;
    text-align: left;
    background: transparent;
    font: normal 6px Arial, Helvetica, sans-serif;
}

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

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

#call_page4_3 {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 57px;
    top: 493px;
    width: 47px;
    height: 44px;
    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_page4_4 {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 121px;
    top: 493px;
    width: 47px;
    height: 44px;
    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;
}

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

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

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

#popup1 {
    z-index: 2;
    left: 35.7%;
    top: 12%;
    width: 38%;
    height: 48%;
    border-radius: 1em;
    cursor: pointer;
}

#popup2 {
    z-index: 2;
    left: 36.5%;
    top: 65.8%;
    width: 37%;
    height: 29%;
    border-radius: 1em;
    cursor: pointer;
}

#popup3 {
    z-index: 2;
    left: 35.7%;
    top: 12%;
    width: 38%;
    height: 48%;
    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);
    cursor: default;
}

#popup1.clicked {
    cursor: default;
}

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

#popup3.clicked {
    top: 2% !important;
    height: auto !important;
    cursor: default;
}

#popup4.clicked {
    top: 2% !important;
    height: auto !important;
    cursor: default;
}

#playAudio_4_5 {
    z-index: 2;
    position: absolute;
    left: 258px;
    top: 85px;
    width: 45px;
    height: 48px;
    text-align: left;
    background: transparent;
    background-repeat: no-repeat;
    border-color: #6C6565;
    border-style: inset;
    border-width: 0.15em;
}

#playAudio_4_5: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_4_6 {
    border-style: none;
    z-index: 2;
    position: absolute;
    left: 59px;
    top: 726px;
    width: 97px;
    height: 91px;
    text-align: left;
    background: transparent;
}

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

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

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

#playAudio_song1 {
    border-style: none;
    z-index: 0;
    position: absolute;
    left: 15.9%;
    top: 34px;
    width: 58px;
    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 (device-width: 1920px) and (device-height: 1080px) {
    #popup1.clicked {
        top: 2% !important;
        height: 85% !important;
    }

    #popup2.clicked {
        top: 2% !important;
        height: auto !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 (device-width: 1680px) and (device-height: 1050px) {
    #popup1 {
        left: 33.7%;
        top: 12%;
        width: 43%;
        height: 47%;
    }

    #popup2 {
        left: 36.5%;
        top: 65.8%;
        width: 40%;
        height: 29%;
    }

    #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 query css 1600px and 900px*/

@media (device-width: 1600px) and (device-height: 900px) {
    #popup1.clicked {
        height: 85% !important;
    }

    #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 1366px and 768px*/

@media (device-width: 1366px) and (device-height: 768px) {
    #popup1 {
        left: 35.7%;
        top: 12%;
        width: 37%;
        height: 48%;
    }

    #popup2 {
        left: 36.5%;
        top: 65.8%;
        width: 36%;
        height: 29%;
    }

    #popup1.clicked {
        top: 2% !important;
        width: 70% !important;
        height: 85% !important;
    }

    #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.18%;
        width:69.95%;
        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) {
    #popup1 {
        left: 28.7%;
        top: 12%;
        width: 56%;
        height: 48%;
    }

    #popup2 {
        left: 32.5%;
        top: 65.8%;
        width: 52%;
        height: 29%;
    }

    .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.5% !important;
    }
}


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

@media (device-width: 1280px) and (device-height: 960px) {
    #popup1 {
        left: 30.7%;
        top: 12%;
        width: 51%;
        height: 48%;
    }

    #popup2 {
        left: 34.5%;
        top: 65.8%;
        width: 47%;
        height: 29%;
    }

    .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: 33.7%;
        top: 12%;
        width: 43%;
        height: 48%;
    }

    #popup2 {
        left: 36.5%;
        top: 65.8%;
        width: 39%;
        height: 29%;
    }

    #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 1280px and 800px*/

@media (device-width: 1280px) and (device-height: 800px) {
    #popup1 {
        left: 33.7%;
        top: 12%;
        width: 42%;
        height: 48%;
    }

    #popup2 {
        left: 36.5%;
        top: 65.8%;
        width: 39%;
        height: 29%;
    }

    #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.7%;
        top: 12%;
        width: 37%;
        height: 48%;
    }

    #popup2 {
        left: 36.5%;
        top: 65.8%;
        width: 36%;
        height: 29%;
    }

    #popup1.clicked {
        top: 2% !important;
        width: 70% !important;
        height: 85% !important;
    }

    #popup3.clicked {
        top: 2% !important;
        width: 70% !important;
        height: 85% !important;
        left: 15% !important;
    }

    #playAudio_song1 {
        left: 204px;
        top: 25px;
        width: 38px;
        height: 42px;
    }

    #playAudio_song2 {
        left: 248px;
        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) {
    #popup1 {
        left: 30.7%;
        top: 12%;
        width: 50%;
        height: 48%;
    }

    #popup2 {
        left: 34.5%;
        top: 65.8%;
        width: 46%;
        height: 29%;
    }

    .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 query css  1280px  and 1050px*/

@media (device-width: 1280px) and (device-height: 1050px) {
    #popup1 {
        left: 28.7%;
        top: 12%;
        width: 56%;
        height: 48%;
    }

    #popup2 {
        left: 32.5%;
        top: 65.8%;
        width: 52%;
        height: 29%;
    }

    .clicked {
        width: 84% !important;
        left: 8% !important;
        height: auto !important;
    }

    #popup3.clicked {
        width: 84% !important;
        left: 7.5% !important;
        height: 80% !important;
    }

    .closeBtn {
        left: 90%;
    }

    #close_popup3 {
        left: 89% !important;
    }

    #playAudio_song1 {
        left: 115px;
        top: 34px;
        width: 45px;
        height: 50px;
    }

    #playAudio_song2 {
        left: 170px;
        top: 34px;
        width: 45px;
        height: 50px;
    }

    #txtbgColor {
        top: 50.5%;
        left: 7.7%;
        width: 83.7%;
    }

    .songText {
        left: 15% !important;
        FONT-SIZE: 100px!important;
    }
}




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

@media (device-width: 2560px) and (device-height: 1600px) {
    #popup1 {
        left: 32%;
        top: 12%;
        width: 47%;
        height: 48%;
    }

    #popup2 {
        left: 36.5%;
        top: 65.8%;
        width: 42%;
        height: 29%;
    }

    #playAudio_song1 {
        left: 400px;
        top: 49px;
        width: 46px;
        height: 54px;
    }

    #playAudio_song2 {
        left: 460px;
        top: 49px;
        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  2880px  and 1800px*/

@media (device-width: 2880px) and (device-height: 1800px) {
    #popup1 {
        left: 32%;
        top: 12%;
        width: 47%;
        height: 48%;
    }

    #popup2 {
        left: 36.5%;
        top: 65.8%;
        width: 42%;
        height: 29%;
    }

    #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 1440px*/

@media (device-width: 2560px) and (device-height: 1440px) {
    #popup1 {
        left: 35%;
        top: 12%;
        width: 39.5%;
        height: 48%;
    }

    #popup1.clicked {
        height: 78% !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.7%;
        top: 12%;
        width: 52%;
        height: 48%;
    }

    #popup2 {
        left: 34.5%;
        top: 65.8%;
        width: 47%;
        height: 29%;
    }

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



@media (device-width: 1600px) and (device-height: 1024px) {
    #popup1 {
        left: 34.3%;
        top: 12%;
        width: 42%;
    }
    #popup2 {
        left: 36.5%;
        width: 39.3%;
    }
     #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 (device-width: 1920px) and (device-height: 1200px) {
    #popup1 {
        left: 33.7%;
        top: 12%;
        width: 43%;
        height: 48%;
    }

    #popup2 {
        left: 36.5%;
        top: 65.8%;
        width: 40%;
        height: 29%;
    }

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

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    #playAudio_4_5 {
        width: 45px;
    }

    #popup1 {
      left: 22% !important;
  width: 75% !important;
  top: 10.5% !important;
  height: 37.5% !important;
    }

    #popup2 {
      left: 24% !important;
  top: 54% !important;
  width: 73% !important;
  height: 22% !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: -11% !important;
    }

    #close_popup1,
    #close_popup2 {
        top: 1% !important;
        right: 4% !important;
    }

    #txtbgColor {
       left: 5.3% !important;
        width: 89.8% !important;
        top: 27.5% !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: 18% !important;
    }
}
/*for 13 version*/
@media all and (device-width: 810px) and (device-height: 1080px) and (orientation:portrait) {
  #popup1 {
      left: 23% !important;
      width: 71% !important;
      height: 35.5% !important;
      top: 10% !important;
}
#popup2 {
    left: 24% !important;
    top: 51% !important;
    width: 70% !important;
    height: 20% !important;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    #popup1 {
      left: 31% !important;
  top: 13% !important;
  width: 51% !important;
  height: 47% !important;
    }
    #popup2 {
      left: 32% !important;
  top: 67% !important;
  width: 50% !important;
  height: 27% !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 {
           right: 7% !important;
    }

    #txtbgColor {
        left: 7.15% !important;
        top: 45% !important;
        width: 84% !important;
        height: 6% !important;
    }
    .closeBtn {
        right: 4% !important;
    }

    .songText {
        FONT-SIZE: 80px;
    }

    #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: 12% !important;
    width: 49% !important;
    height: 45% !important;
}
#popup2 {
    left: 32% !important;
    top: 63% !important;
    width: 48% !important;
    height: 25% !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;
  }

}