@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: 14px; 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; background: #fff;}
img{ max-width: 100%;}
.game-1, .game-2, .game-3 { position: relative; overflow: hidden;}
.element-1, .element-2, .element-3, .element-4, .element-5, .element-6{position: absolute; width: 26%; cursor: pointer; }
.hover-img{ position: absolute; display: none; top: 0;}
.instruction{ position: absolute; top:0 ; left: 0; right:0; }
.instruction{ color: #fff; font-size: 20px; }
.instruction .step{ font-size: 33px; position: absolute; top: 11%; left: 7%;}
.instruction .content{ position: absolute; top: 15%; right: 4%; width: 80%; text-align: right; font-size: 16px;}

.game-1 .element-1 { bottom: 0; left: 0; width: 48%; }
.game-1 .element-2 { bottom: 12%; right: 30%; width: 20%; }
.game-1 .element-3 { bottom: 14%; right: 4%; width: 13%; }
.game-1 .element-4 { bottom: 36.5%; left: 26.5%; width: 21.5%; }
.game-1 .element-5 { top: 28.5%; right: 31%; width: 17%; cursor: inherit; }
.game-1 .element-6 { bottom: 26%; right: 21%; width: 18%; }
.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; }
.next-cta{position: absolute; bottom: 20px; right: 20px; z-index: 1000; width: 216px; 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; }

.text-height { height: 22px;}
.text-22 { height: 22px;}
.text-24 { height: 24px;}
.game-2 .left{ float: left; width: 544px; padding: 20px;}
.game-2 .right{ float: left; width: 440px;  position: relative;}
.game-2 .heading-text, .game-3 .heading-text{ color: #717171; text-align: center; }
.game-2 .content-box{ background: #f6f6f6; min-height: 100px; padding: 25% 10px; margin: 24px 0px; font-size: 16px; line-height: 44px;}
.game-2 .draggable-content{ list-style: none; padding: 0; margin: 0; display: inline-block; vertical-align: middle;}
.game-2 .draggable-content li{ text-align: center; display: inline-block; vertical-align: bottom; color: #fff; cursor: pointer; max-width: 150px;}
.game-2 .draggable-content li:last-child{ margin-right: 0; }
.game-2 .buttons { text-align: center;}
.game-2 .buttons > button, .submit-buttons{ display: inline-block; background: transparent; width: 148px; border: none; margin: 0 30px; cursor: pointer;}
.game-2 .plant-grow img{ width: 74px; position: absolute; bottom: 44%; left: -54px; right: 0; margin: 0 auto; display: none;}
.game-2 .plant-grow img.img3 { width: 124px; left: 0px; }
.slider { position: relative ;}
.ans-img { position: absolute; width: 50px; right: 0; top: -50px;}
.ans-img img { display: none;}
.slide02, .slide03, #slide02, #slide03 { display: none;}
.submit-buttons button { background: transparent; border: none; cursor: pointer;}
.disabled { pointer-events: none; cursor: not-allowed; }

.game-3 .heading-text, .game-3 .element{ position: absolute; left:0; right: 0;}
.game-3 .heading-text{ color: #000; top: 26px; font-size: 16px; padding: 0 20px; }
.game-3 .element{ bottom: 62px; }
.cartoon{ text-align: right; position: relative; z-index: 2;}
.cartoon img{ width: 330px; margin-right: 20%; }
.question{ font-size: 16px; text-align: center; color: #fff; position: relative;}
.question .ans-placeholder{ width: 200px; display: inline-block;  margin: 0 6px; position: relative; z-index: 1; height: 29px;}
.question .ans-placeholder:before{ content: ""; width: 200px; height: 67px; background: url(../images/Game_03/dug_ground.png) no-repeat top left; position: absolute;  top: 0px; z-index: -1; background-size: 200px; left: 0;top: -12px; }
.question .ans-placeholder span{ display: none; position: absolute; left: 0; right: 0; top: 8px; font-weight: 600; }
.answers{ margin: 0; padding: 0; list-style: none; text-align: center; margin-top: 46px;}
.answers li{ display: inline-block; position: relative; width: 180px; margin: 0 18px; cursor: pointer;}
.answers li img.check{ display: none; position: absolute; bottom: -30px; right: -16px; width: 56px; }
.green{ color: #19c126; }
.red{ color: #e1484d; }
.game-3 .slide2 .cartoon{ text-align: left; }
.game-3 .slide2 .cartoon img{ margin: auto; margin-left: 23%; }
.game-3 .slide2, .game-3 .slide3, .game-3 .slide4{ display: none;}
img.bg-success{ display: none; }
.question .ans-placeholder.ans-inside {position: absolute;	right: 267px; top: -7px; width: 174px;}
.question .ans-placeholder.ans-inside:before { width: 174px; background-size: 174px;}

.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; }
*:focus { outline: none; }

.game-end { position: relative; overflow: hidden; width: 100%; height: 100%; }
.game-end img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }