@font-face {
    font-family: 'Pavanam';
    src: url('fonts/Pavanam-Regular.eot');
    src: url('fonts/Pavanam-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Pavanam-Regular.woff2') format('woff2'),
        url('fonts/Pavanam-Regular.woff') format('woff'),
        url('fonts/Pavanam-Regular.ttf') format('truetype'),
        url('fonts/Pavanam-Regular.svg#Pavanam-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'TSCuSaiIndira';
  src: url('TSCuSaiIndira.eot?#iefix') format('embedded-opentype'),  url('TSCuSaiIndira.woff') format('woff'), url('TSCuSaiIndira.ttf')  format('truetype'), url('TSCuSaiIndira.svg#TSCuSaiIndira') format('svg');
  font-weight: normal;
  font-style: normal;
}

body{ margin: 0 auto; font-size: 12px; font-family: 'TSCuSaiIndira', sans-serif;}
.overlay-page{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5);}
.container{ width: 1024px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 576px; z-index: 1; overflow: hidden;}
.small{ width: 767px; }
img{ max-width: 100%;}
.game-1, .game-2, .game-3, .scroll{ position: relative; overflow: hidden;}
.fill-text{position: absolute; cursor: pointer; }
.hover-img, .wrong-answer, .cross, .tick{ position: absolute; display: none; top: 0;}
.element-1:hover .hover-img, .element-2:hover .hover-img, .element-3:hover .hover-img, .element-4:hover .hover-img, .element-5:hover .hover-img{ display: block; }
/*Instruction*/
.instruction{ position: absolute; top:0 ; left: 0; right:0; z-index: 99; }
.instruction{ color: #fff; font-size: 20px; }
.instruction .step{ font-size: 32px; position: absolute; top: 11%; left: 7%;}
.instruction .content{ position: absolute; top: 15%; right: 3%; font-size: 16px; text-align: right; max-width: 64%;}
/*Game 1*/
.question, .fill-text{ color: #fff; position: absolute; top: 28%; left: 0; right: 0; margin: auto; font-size: 18px; text-align: center; }
.fill-text{ top: 52%; }
.question .ans{ display: inline-block; margin: 0 10px; height: 32px; vertical-align: middle; width: 150px; text-align: center; position: absolute; top: -3px; left: 45%; }
.question .ans span{ display: none; }
.question .ans.ans-2 { left: 39%; }
.question .ans.ans-3 { left: 17%; }
.game-1 .element-1, .game-1 .element-2, .game-1 .element-3, .game-1 .element-4{ width: 210px; display: inline-block; position: relative; margin: 0 20px; }
/* .game-1 .element-1{ left: 3%; }
.game-1 .element-2{ left: 27%; }
.game-1 .element-3{ right: 27%; }
.game-1 .element-4{ right: 3%; } */
.cross, .tick{ width: 66px; left: 0; right: 0; margin: 0 auto; bottom: -58px; top: inherit;}
.slider .content{ text-align: center; position: absolute; bottom: 70px; left: 0; right: 0;}
.game-1 .title{ position: absolute; top: 20px; left: 0; right: 0; text-align: center; font-size: 18px; color: #fff; margin: auto; max-width: 80%;}
.slider{display: none;}
.slider.slider1{display: block;}

.next-cta{position: absolute; bottom: 14px; right: 20px; z-index: 1000; color: #fff; width: 220px; cursor: pointer;}
.video-content{ position: relative; }
.start-game{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0,0,0,0.5); text-align: center; }
.start-cta{ position: absolute; width: 300px; height: 70px; margin: auto; top: 0; bottom: 0; left: 0; right: 0; cursor: pointer; }


/*Game 2*/
.game-2 .element-1, .game-2 .element-2, .game-2 .element-3, .game-2 .element-03, .game-2 .element-4{ position: absolute; cursor: pointer;}
.game-2 .element-1 { top: 8%; left: 30%; width: 400px; z-index: 1;}
.game-2 .element-2 { bottom: 8%; right: 46%; width: 40px; z-index: 2; left: 0; right: 0; margin: auto;}
.game-2 .element-03 { top: 47%; left: 52%; width: 60px; z-index: 3; cursor: default;}
.game-2 .element-3 { top: 66%; left: 55%; width: 38px; z-index: 3; }
.game-2 .element-4 { left: 54.3%; top: 48%; width: 56px; z-index: 4; }
/*Game 3*/
/*.game-3{ height: 590px; overflow-y: auto;}*/
.questions{ font-size: 12px; color: #000; line-height: 28px;}
.drop-word{ position: relative; background: url(../images/Game_03/green_box.png) no-repeat top left; background-size: 100% 100%; display: inline-block; margin: 0 2px; width: 140px; height: 28px; vertical-align: bottom;}
.game-3 .element-1, .game-3 .element-2, .game-3 .element-3, .game-3 .element-4, .game-3 .element-5{ position: absolute; left: 11%; top: 6%; cursor: default; }
.game-3 .element-2{ top: 20.5%; }
.game-3 .element-3{ top: 35%; }
.game-3 .element-4{ top: 49.5%; }
.game-3 .element-5{ top: 64.5%; }
.ans-box{ background: url(../images/Game_03/Inventory\ box\ In.png) no-repeat top left; background-size: 100% 100%; padding: 20px 0px; border-radius: 0px 40px 40px 0px; width: 320px; height: 144px; position: absolute; bottom: 0px; left: -274px; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; }
.ans-box .answers{ width: 270px; text-align: center; }
.drag-word{ position: relative; z-index: 2; font-size: 12px; text-align: center; width: 140px; height: 28px; margin-bottom: 2px; display: inline-block; line-height: 28px; cursor: pointer; }
.ans-click{ position: absolute; right: -42px; top: 76px; font-size: 20px; line-height: 0px; color: #fff; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); height: 44px; cursor: pointer; opacity: 0;}
.ans-click span{ width: 40px; height: 16px; background: url(../images/game3/scroll_down_button.png) no-repeat top left; display: inline-block; background-size: 40px; }
.ans-box.open{ left: 0;  background: url(../images/Game_03/Inventory\ box\ Out.png) no-repeat top left; background-size: 100% 100%; }
.ans-box.open .ans-click span{ background: url(../images/game3/scroll_up_button.png) no-repeat top left; background-size: 40px;}
.drop-word .drag-word{ margin: 0px; }
.game-3 button{ width: 114px; position: absolute; right: 32%; bottom: 18px; cursor: pointer; padding: 0; background: transparent; border: none; }
/* .game03-content{ width: 767px; margin: auto;} */
.ans-img {position: absolute; top: -30px; right: -10px; width: 40px; z-index: 4;}
.ans-img img { display: none;}
/*Overlay*/
.overlay{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0, 0, 0, 0.5); display: none; z-index: 1000;}
.modal{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; height: 420px; max-width: 620px; margin: auto; display: none; z-index: 1000;}
.modal .close{ position: absolute; right: 0; top: 0; width: 80px; cursor: pointer; }
.modal .img{ max-width: 230px; border-right: 5px solid #7accc8; float: left;}
/* .modal .content{ max-width: 356px; float: left;  padding: 14px; } */
.modal .content h2, .modal .content h3{ font-weight: 500; margin: 0; font-size: 20px;}
.modal .content h2{ text-transform: uppercase; margin-bottom: 24px;}
.modal .content h3{ margin-bottom: 6px; }
.modal .content .padding-left h3:first-child{ margin-bottom: 24px; }
.padding-left{ padding-left: 20px;}

.nano { height: 590px; }
.disabled { pointer-events: none; cursor: not-allowed;}
*:focus { outline: none;}

.text-20 { height: 20px; display: inline-block; vertical-align: middle;}
.text-24 { height: 24px; }
.text-26 { height: 26px; position: relative; z-index: 1;}
.game-end { position: relative; overflow: hidden; width: 100%; height: 100%; background: #fff;}
.game-end img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }