/**** Common Code ****/
*{
	margin:0;
	padding:0;
}

body{
	overflow-y:hidden;
}

.square {
    cursor: pointer;
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 2px solid #8c8b8b;
    font-size: 20px !important;
    text-align: center;
    line-height: 25px;
    font-weight: bold;
}

.square1 {
    cursor: pointer;
    position: absolute;
    top: 122px;
    left: 525px;
    font-size: 60px;
    cursor: pointer;
}

.square1:before {
    cursor: pointer;
    content: "True";
    font-size: 18px;
    font-family: helvetica;
    color: #fff;
    position: absolute;
    top: -26px;
    background-color: rgb(7,77,161);
    width: 50px;
    text-align: center;
    left: -12px;
    padding: 2px;
    line-height: 18px;
    font-weight: normal;
}

.square2 {
    cursor: pointer;
    position: absolute;
    top: 155px;
    left: 525px;
    font-size: 60px;
    cursor: pointer;
}

.square3 {
    cursor: pointer;
    position: absolute;
    top: 188px;
    left: 525px;
    font-size: 60px;
    cursor: pointer;
}

.quest .square4 {
    position: absolute;
    cursor: pointer;
    top: 122px;
    left: 585px;
    font-size: 60px;
    cursor: pointer;
}

.quest .square4:before {
    content: "False";
    font-size: 18px;
    font-family: f5generic;
    color: #fff;
    position: absolute;
    top: -26px;
    background-color: rgb(7,77,161);
    width: 50px;
    text-align: center;
    left: -12px;
    padding: 2px;
    line-height: 18px;
    font-weight: normal;
    cursor: pointer;
}

.quest .square5 {
    position: absolute;
    cursor: pointer;
    top: 155px;
    left: 585px;
    font-size: 60px;
    cursor: pointer;
}

.quest .square6 {
    position: absolute;
    cursor: pointer;
    top: 188px;
    left: 585px;
    font-size: 60px;
    cursor: pointer;
}

.tick {
    cursor: pointer;
    display: inline-block;
    width: 27px;
    height: 27px;
    border: 2px solid #ccc;
    cursor: pointer;
    line-height: 27px;
    font-size: 20px !important;
    text-align: center;
    font-weight: bold;
}

.tick1 {
    cursor: pointer;
    position: absolute;
    top: 302px;
    left: 98px;
    font-size: 30px;
}

.tick2 {
    cursor: pointer;
    position: absolute;
    top: 302px;
    left: 442px;
    font-size: 30px;
}

.tick3 {
    cursor: pointer;
    position: absolute;
    top: 340px;
    left: 98px;
    font-size: 30px;
}

.tick4 {
    cursor: pointer;
    position: absolute;
    top: 340px;
    left: 442px;
    font-size: 30px;
}

.tick5 {
    cursor: pointer;
    position: absolute;
    top: 439px;
    left: 96px;
    font-size: 30px;
}

.tick6 {
    cursor: pointer;
    position: absolute;
    top: 439px;
    left: 441px;
    font-size: 30px;
}

.tick7 {
    cursor: pointer;
    position: absolute;
    top: 480px;
    left: 96px;
    font-size: 30px;
}

.tick8 {
    cursor: pointer;
    position: absolute;
    top: 479px;
    left: 441px;
    font-size: 30px;
}

.tick9 {
    cursor: pointer;
    position: absolute;
    top: 558px;
    left: 97px;
    font-size: 30px;
}

.tick10 {
    cursor: pointer;
    position: absolute;
    top: 597px;
    left: 97px;
    font-size: 30px;
}

.tick11 {
    cursor: pointer;
    position: absolute;
    top: 638px;
    left: 97px;
    font-size: 30px;
}

.tick12 {
    cursor: pointer;
    position: absolute;
    top: 678px;
    left: 97px;
    font-size: 30px;
}

.hint {
    position: absolute;
    top: 519px;
    left: 465px;
}

.submit1 {
    position: absolute;
    top: 650px;
    left: 587px;
}

.practice {
    position: absolute;
    top: 700px;
    left: 585px;
}

.submit2 {
    position: absolute;
    top: 959px;
    left: 538px;
    cursor: pointer;
}

.textbox1 {
    position: absolute;
    top: 895px;
    left: 234px;
}

.textbox2 {
    position: absolute;
    top: 895px;
    left: 382px;
}

.textbox3 {
    position: absolute;
    top: 935px;
    left: 244px;
}

.textbox4 {
    position: absolute;
    top: 935px;
    left: 446px;
}

.submit3 {
    position: absolute;
    top: 813px;
    left: 212px;
}

.circle1 {
    position: absolute;
    top: 813px;
    left: 65px;
    width: 1%;
    padding: 5px 10px 5px 10px;
    margin: 0 auto;
    border: 1px solid #000000;
    border-radius: 25px;
    background-color: #fac090;
    cursor: pointer;
}

.circle2 {
    position: absolute;
    top: 813px;
    left: 100px;
    width: 1%;
    padding: 5px 10px 5px 10px;
    margin: 0 auto;
    border: 1px solid #000000;
    border-radius: 25px;
    background-color: #fac090;
    cursor: pointer;
}

.circle3 {
    position: absolute;
    top: 813px;
    left: 135px;
    width: 1%;
    padding: 5px 10px 5px 10px;
    margin: 0 auto;
    border: 1px solid #000000;
    border-radius: 25px;
    background-color: #fac090;
    cursor: pointer;
}

.circle4 {
    position: absolute;
    top: 813px;
    left: 170px;
    width: 1%;
    padding: 5px 10px 5px 10px;
    margin: 0 auto;
    border: 1px solid #000000;
    border-radius: 25px;
    background-color: #fac090;
    cursor: pointer;
}

.circle_selected {
    background-color: #ff7f00;
}

.text1 {
    position: absolute;
    top: 416px;
    left: 95px;
    width: 136px;
    text-align: center;
    height: 45px;
    box-sizing: border-box;
    padding-top: 15px;
}

.text2 {
    position: absolute;
    top: 428px;
    left: 511px;
    width: 136px;
    text-align: center;
    height: 45px;
    box-sizing: border-box;
    padding-top: 15px;
}

.text3 {
    position: absolute;
    top: 927px;
    left: 104px;
    width: 136px;
    text-align: center;
    height: 45px;
    box-sizing: border-box;
    padding-top: 15px;
}

.text4 {
    position: absolute;
    top: 927px;
    left: 468px;
    width: 136px;
    text-align: center;
    height: 45px;
    box-sizing: border-box;
    padding-top: 15px;
}

.text5 {
    position: absolute;
    top: 362px;
    left: 231px;
    font-size: 1.2em;
    background-color: rgb(150, 191, 152);
    box-shadow: 0 0 0 4px rgb(150, 191, 152);
    border-radius: 1px;
}

.text6 {
    position: absolute;
    top: 362px;
    left: 322px;
    font-size: 1.2em;
    background-color: rgb(150, 191, 152);
    box-shadow: 0 0 0 4px rgb(150, 191, 152);
    border-radius: 1px;
}

.text7 {
    position: absolute;
    top: 362px;
    left: 412px;
    font-size: 1.2em;
    background-color: rgb(150, 191, 152);
    box-shadow: 0 0 0 4px rgb(150, 191, 152);
    border-radius: 1px;
}

.text8 {
    position: absolute;
    top: 362px;
    left: 497px;
    font-size: 1.2em;
    background-color: rgb(150, 191, 152);
    box-shadow: 0 0 0 4px rgb(150, 191, 152);
    border-radius: 1px;
}

.drop-item.correct, .drag-item.correct {
    background-color: #fff;
    color: rgb(150, 191, 152);
    box-shadow: 0 0 0 4px #fff;
}

.drop-item.wrong, .drag-item.wrong {
    background-color: #fff;
    color: rgb(197, 114, 114);
    box-shadow: 0 0 0 4px #fff;
}

.drop-item.hide {
    opacity: 0.01;
}

.drag-item.hide {
    visibility: hidden;
}

.submit4 {
    position: absolute;
    top: 360px;
    left: 680px;
}

.square4 {
    cursor: pointer;
    position: absolute;
    top: 874px;
    left: 382px;
    font-size: 50px;
}

.square5 {
    cursor: pointer;
    position: absolute;
    top: 907px;
    left: 382px;
    font-size: 50px;
}

.square6 {
    cursor: pointer;
    position: absolute;
    top: 940px;
    left: 382px;
    font-size: 50px;
}

.square7 {
    cursor: pointer;
    position: absolute;
    top: 973px;
    left: 382px;
    font-size: 50px;
}

.tick13 {
    cursor: pointer;
    position: absolute;
    top: 869px;
    left: 388px;
    font-size: 24px;
}

.tick14 {
    cursor: pointer;
    position: absolute;
    top: 904px;
    left: 388px;
    font-size: 24px;
}

.tick15 {
    cursor: pointer;
    position: absolute;
    top: 937px;
    left: 388px;
    font-size: 24px;
}

.tick16 {
    cursor: pointer;
    position: absolute;
    top: 970px;
    left: 388px;
    font-size: 24px;
}

.tick17 {
    cursor: pointer;
    position: absolute;
    top: 896px;
    left: 388px;
    font-size: 24px;
}

.tick18 {
    cursor: pointer;
    position: absolute;
    top: 896px;
    left: 600px;
    font-size: 24px;
}

.tick19 {
    cursor: pointer;
    position: absolute;
    top: 936px;
    left: 388px;
    font-size: 24px;
}

.tick20 {
    cursor: pointer;
    position: absolute;
    top: 936px;
    left: 600px;
    font-size: 24px;
}

.tick21 {
    cursor: pointer;
    position: absolute;
    top: 896px;
    left: 641px;
    font-size: 24px;
}

.tick22 {
    cursor: pointer;
    position: absolute;
    top: 936px;
    left: 641px;
    font-size: 24px;
}

.square8 {
    cursor: pointer;
    position: absolute;
    top: 900px;
    left: 382px;
    font-size: 50px;
}

.square9 {
    cursor: pointer;
    position: absolute;
    top: 900px;
    left: 594px;
    font-size: 50px;
}

.square10 {
    cursor: pointer;
    position: absolute;
    top: 940px;
    left: 382px;
    font-size: 50px;
}

.square11 {
    cursor: pointer;
    position: absolute;
    top: 940px;
    left: 594px;
    font-size: 50px;
}

.square12 {
    cursor: pointer;
    position: absolute;
    top: 900px;
    left: 635px;
    font-size: 50px;
}

.square13 {
    cursor: pointer;
    position: absolute;
    top: 940px;
    left: 635px;
    font-size: 50px;
}

.correct_option {
    background-color: #6fbb16;
    color: #fff;
}

.wrong_option {
    background-color: #fb0101;
    color: #fff;
}

.page005_act1_popup, .page005_act2_popup {
    position: absolute;
    z-index: 100;
    background-color: rgba(0,0,0,0.3);
    left: 0px;
    top: 0px;
    width: 817px;
    height: 1020px;
    display: none;
}

.popup_box {
    position: absolute;
    background-color: #fff;
    width: 400px;
    height: 200px;
    border-radius: 10px;
    margin: auto;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    text-align: center;
    border: 5px solid #074da1;
    box-shadow: 5px 5px 2px rgba(0,0,0,0.5);
}

.popup_msg {
    font-family: f6generic;
    font-size: 23px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 64px;
}

.popup_ok {
    font-size: 20px;
    width: 70px;
    margin-right: 30px;
    cursor: pointer;
    position: absolute;
    bottom: 43px;
    left: 105px;
    border: 3px solid #f05a89;
    background-color: #16c1f3;
    border-radius: 5px;
    padding: 3px;
    color: #fff;
}

.popup_no {
    font-size: 20px;
    width: 70px;
    cursor: pointer;
    bottom: 43px;
    position: absolute;
    right: 101px;
    border: 3px solid #f05a89;
    background-color: #16c1f3;
    border-radius: 5px;
    padding: 3px;
    color: #fff;
}

.page005_ack {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    font-weight: bold;
    line-height: 26px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transform: scale(0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
}

.page005_ack_correct {
    background-color: #4CAF50;
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
}

.page005_ack_wrong {
    background-color: #F44336;
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
}

.page005_ack_q1 {
    left: 625px;
    top: 123px;
}

.page005_ack_q2 {
    left: 625px;
    top: 156px;
}

.page005_ack_q3 {
    left: 625px;
    top: 188px;
}

.page005_ack_q4 {
    left: 565px;
    top: 263px;
}

.page005_ack_q5 {
    left: 512px;
    top: 405px;
}

.page005_ack_q6 {
    left: 422px;
    top: 520px;
}

.page005_hints {
    position: absolute;
    font-family: f7generic;
    left: 526px;
    top: 520px;
    z-index: 10;
    width: 180px;
    height: 60px;
    line-height: 18px;
    background-color: #fcc799;
    padding: 10px;
    border: 2px solid #ffad65;
    border-radius: 10px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transform: scale(0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
}

.page005_animateHint {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
}

.page005_mp {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 816px;
    height: 1020px;
    background-color: rgba(0,0,0,0.3);
    z-index: 310;
    display: none;
}

.page005_mp_box {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 690px;
    height: 400px;
    background-color: #fff;
    background-image: url("../images/more_practice.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    margin: auto;
    right: 0px;
    bottom: 0px;
    border: 2px solid #6eb355;
    background-position: 0px 49px;
}

.page005_mp_title {
    position: relative;
    font-family: f6generic;
    padding: 10px;
    font-size: 20px;
}

.page005_mp_ws {
}

.p005_mp_txt {
    font-family: f6generic;
    font-size: 22px;
    border: none;
    text-align: center;
    position: absolute;
    height: 60px;
    padding: 0px;
    width: 200px;
}

.p005_mp_txt input {
    width: 190px;
    height: 57px;
    font-family: inherit;
    font-size: 20px;
    text-align: center;
    border: none;
    outline: none;
    background-color: transparent;
}

.p005_mp_ack {
    position: absolute;
    width: 30px;
    height: 30px;
    right: -10px;
    top: 20px;
    border-radius: 50%;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transform: scale(0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    line-height: 34px;
}

.p005_mp_ack_correct {
    background-color: #4CAF50;
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
}

.p005_mp_ack_wrong {
    background-color: #F44336;
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
}

#p005_mp_txt1 {
    top: 203px;
    left: 95px;
}

#p005_mp_txt2 {
    top: 270px;
    left: 95px;
}

#p005_mp_txt3 {
    top: 132px;
    left: 382px;
}

#p005_mp_txt4 {
    top: 270px;
    left: 382px;
}

#p005_mp_submit {
    font-family: f6generic;
    font-size: 20px;
    width: 150px;
    height: 40px;
    top: 355px;
    position: absolute;
    left: 260px;
    cursor: pointer;
    background-color: #4f81bd;
    color: #fff;
}

#p005_mp_showAns {
    font-family: f6generic;
    font-size: 20px;
    width: 170px;
    height: 40px;
    top: 355px;
    position: absolute;
    left: 494px;
    cursor: pointer;
    background-color: #4f81bd;
    color: #fff;
    display: none;
}

#page005_mp_close {
    position: absolute;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 37px;
    background-color: #fff;
    font-size: 20px;
    font-weight: bold;
    border-radius: 50%;
    right: -20px;
    top: -21px;
    cursor: pointer;
    border: 2px solid #6eb355;
}

.page5_a2_txt {
    font-family: f16generic;
    font-size: 18px;
    padding-top: 3px;
    box-sizing: border-box;
}

.page5_a2_ack {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    right: -10px;
    top: -13px;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    color: #fff;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transform: scale(0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
}

.page5_a2_correct {
    background-color: #4caf50;
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
}

.page5_a2_wrong {
    background-color: #f44336;
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
}

#videoBtn {
    position: absolute;
    background-image: url(../assets/images/video.png);
    left: 720px;
    top: 81px;
    z-index: 10;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.video_popup {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0,0,0,0.5);

}

.video_box {
    position: absolute;
    left: 0px;
    right: 0px;

    background-color: #fff;
    padding: 5px;
    margin: auto;
    top: 0px;
    bottom: 0px;
}

.video_box video {
    width: 100%;
    height: 100%;
}

.video_close {
    position: absolute;
    width: 30px;
    height: 30px;
    top: -30px;
    background-color: #fff;
    right: 0;
    text-align: center;
    line-height: 30px;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
}

.drop-item {
    color: transparent;
}

.drag-item {
    cursor: pointer;
    width: 70px;
    height: 35px;
    text-align: center;
    line-height: 35px;
}

#submitBtn13 {
    display: none;
}

#showAnsBtn13 {
    position: absolute;
    z-index: 200;
    left: 640px;
    top: 360px;
    background-color: rgb(79, 129, 189);
    color: #fff;
    padding: 8px;
    border-radius: 5px;
    font-size: 15px;
    cursor: pointer;
    display: none;
}

#showAnsBtn5 {
    position: absolute;
    z-index: 200;
    padding: 8px;
    font-size: 15px;
    background-color: #4f81bd;
    color: #fff;
    border-radius: 5px;
    top: 700px;
    left: 700px;
    display: none;
    cursor: pointer;
}

#audioBtn13 {
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url(../assets/images/audio.png);
    z-index: 202;
    left: 69px;
    top: 355px;
    cursor: pointer;
}

.disableButton {
    opacity: 0.5;
    pointer-events: none;
}

.popup_ok:hover, .popup_no:hover {
    background-color: #ff7f00;
}

.flip {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.flip_cont {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  /*  background-color:transparent; */

    /*display: none;*/
}
.flip_box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0px;
    margin: auto;
    background-color: #fff;
    width: 800px;
    height: 600px;
    font-family: Helvetica;
}


.flip_cover {
    position: absolute;
    width: 440px;
    height: 450px;
    margin: auto;
    left: 0px;
    right: 0px;
    top: 63px;
    border-radius: 20px;
    perspective: 800px;
    -moz-perspective: 800px;
    -webkit-perspective: 800px;
    -ms-perspective: 800px;
    cursor: pointer;
}

.flip_holder {
    transform-style: preserve-3d;
    position: absolute;
    width: 100%;
    height: 100%;
}

.front_cover img {
	max-width: 100%;
	max-height: 94%;
    vertical-align: middle;
}

.f_audioBtn {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #2D93E3;
    top: 400px;
    left: 201px;
    background-image: url("../assets/images/play2.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border: none;
    cursor: pointer;
    z-index: 100;
}

.front_cover {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 450px;
    background-color: #fff;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
    border: 3px solid #3E52B7;
    border-radius: 15px;
}

.back_cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    text-align: center;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    border: 3px solid #3E52B7;
    border-radius: 15px;
    transform: rotateY( 180deg );
}

#nextFlashCard {
    position: absolute;
    right: 10px;
    width: 40px;
    height: 30px;
    bottom: 8px;
    cursor: pointer;
    background-image: url("../assets/images/arrow-right.svg");
    background-position: right;
    background-repeat: no-repeat;
    border: none;
    background-color: transparent;
}

#prevFlashCard {
    position: absolute;
    left: 10px;
    bottom: 8px;
    width: 40px;
    height: 30px;
    cursor: pointer;
    background-image: url("../assets/images/arrow-left.svg");
    background-repeat: no-repeat;
    background-position: left;
    background-color: transparent;
    border: none;
}

#shuffleFlashCard {
    position: absolute;
    width: 80px;
    height: 40px;
    margin: auto;
    left: 0px;
    right: 0px;
    bottom: 4px;
    font-size: 18px;
    cursor: pointer;
    background-color: #fff;
    border-radius: 10px;
    background-image: url("../assets/images/shuffle_icon.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
}

.flip_title {
    position: relative;
    width: 100%;
    background-color: #d2db0e;
    color: #fff;
    padding: 8px;
    box-sizing: border-box;
    font-weight: bold;
}

#flip_close {
    position: absolute;
    right: 2px;
    background-image: url("../assets/images/cross.svg");
    width: 30px;
    height: 30px;
    border: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 2px;
    cursor: pointer;
    display: none;
}

.flip_controls {
    position: absolute;
    width: 100%;
    bottom: 0px;
    background-color: #d2db0e;
    height: 50px;
}

.fc_desc_cont {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: table;
}

.fc_desc {
    display: table-cell;
    vertical-align: middle;
    font-size: 58px;
}

.fc_animation {
    transition: transform 1s;
    -moz-transition: transform 1s;
    -ms-transition: transform 1s;
    -webkit-transition: transform 1s;
}

.back_fc_flipped {
    z-index: 1;
    transform: rotateY( 0deg );
    -webkit-transform: rotateY( 0deg );
    -moz-transform: rotateY( 0deg );
    -ms-transform: rotateY( 0deg );
}

.front_fc_flipped {
    z-index: 2;
    transform: rotateY( -180deg );
    -webkit-transform: rotateY( -180deg );
    -moz-transform: rotateY( -180deg );
    -ms-transform: rotateY( -180deg );
}

#flashCardBtn {
    position: absolute;
    width: 77px;
    height: 77px;
    left: 510px;
    top: 58px;
    cursor: pointer;
    color: #fff;
    background-image: url("../images/flash_card_btn.jpg");
    background-size: 100%;
}

#txtArea {
    position: absolute;
    width: 100%;
    height: 330px;
    bottom: 100px;
    left: 0px;
}

.p_panel {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: none;
    z-index: 10;
}

.p_box {
    position: absolute;
    background-color: #fff;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 800px;
    height: 600px;
    margin: auto;
    font-family:  Helvetica;
}

.p_title {
    padding: 8px;
    background-color: #673AB7;
    color: #fff;
}

.p_close {
    position: absolute;
    right: 10px;
    top: 7px;
    background-image: url(../assets/images/cross.svg);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.p_body {
    position: relative;
    width: 100%;
    height: 565px;
}

iframe {
    border: none;
}

.tap_icon {
    position: absolute;
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/tap_icon.png");
    bottom: 5px;
    right: 5px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #3E52B7;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

.y_hig{
	    background-color: #FFDF4F;
}
.specific_font{font-family: calibri;}

/***********Medi queries**********/

@media only screen and (min-width:1024px) {}

@media only screen
and (min-width: 1025px)
and (max-width: 1280px)


{
  .flip_cover{

	}

}



@media only screen and (min-width:1024px) and (max-width:1366px) and (orientation : portrait) {
	.flip_box{
	top: 25%;
	}
}

@media only screen and (min-width:1024px) and (max-width:1366px) and (orientation : landscape) {
	.flip_box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
	}
}

@media only screen and (max-width: 980px) and (orientation : landscape) {}

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {

	.flip_box{
	top: 0%;
	width: 767px;
	}

}

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {

	 .flip_box{

	}
	 .flip_cover{top: 8%;}
}

@media only screen and (max-width: 640px) and (orientation : landscape) {
	.flip_cover{top: 68px;}

}
@media screen and (min-height: 1px) and (max-height: 600px) and (min-width: 1px) and (max-width: 960px) {
	.flip_cover {
		top: -20px;
		transform: scale(0.6);
}

		 .flip_box {    height: 420px;}
}

@media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {

body{display:none;}

}

/* Nexus 6p */
@media only screen and (min-width: 412px) and (max-width: 435px) and (min-height: 732px) and (max-height: 773px) and (orientation:portrait) {
	/* .flip_box{
	top: 48%;
    bottom: auto;
    height: 621px;

	}
	.flip_cont{
		width:800px;
	}
	.flip_cover {top: 10%;} */
	body{display:none;}
}

@media only screen and (min-height: 412px) and (max-height: 435px) and (min-width: 732px) and (max-width: 773px) and (orientation:landscape) {
	/* .flip_box{top:0px; bottom: auto; height: 350px; border: 1px solid green;}
	.flip_cover {top: 11%; width: 426px; height: 329px; border: 1px solid red;} */
	body{display:none;}
}
