@font-face {
    font-family: "Roboto";
    src: url(../font/Roboto-Regular.ttf) format("truetype");
    font-weight: normal;
}
@font-face {
    font-family: "Roboto";
    src: url(../font/Roboto-Bold.ttf) format("truetype");
    font-weight: bold;
}
@font-face {
    font-family: "MicroSquare";
    src: url(../font/MicroSquare-Bold.ttf) format("truetype");
    font-weight: bold;
}
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
}
html, body {
    overflow: hidden;
}
body{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    position: relative;
    background-color: white;
}
.full-block{
    width: 100%;
    height: 100%;
    display: block;
}
.tile-thumbnail {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}
.hide{
    display: none;
}
#container{
    width: 78vw;
    transform-origin: left top;
}
#scale-container{
    transform-origin: left top;
    transition-timing-function: ease-in-out;    
}
#page-container{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: left top;
}
.white-background{
    position: absolute;
    width: 1280px;
    height: 800px;
    background-color: white;
    opacity: 0.4;
    display: none;
}
.intro-frame-container{
    position: absolute;
    top: -800px;
    left: 0;
    width: 1280px;
    height: 800px;
    visibility: visible;
    animation: 600ms cubic-bezier(0.310, 0.645, 0.585, 1.105) intro-frame-container-animation forwards;
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(600px);
}
@keyframes intro-frame-container-animation {
    0%   { top: -800px; }
    100% { top: 0px; }
}
@keyframes intro-frame-container-hide-animation {
    0%   { top: 0px; }
    40%  { top: 0px; }
    100% { top: -800px; }
}
.intro-frame{
    position: absolute;
    top: -200px;
    left: 0;
    width: 1280px;
    height: 800px;
}
.pipe-round{
    position: absolute;
    top: 93.548px;
    left: 283.181px;
    width: 91px;
    height: 91px;
    animation: 3s linear 4s infinite pipe-round-animation;
    transform-origin: center center;
    border-radius: 50%;
}
.pipe-round img{
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
@keyframes pipe-round-animation{
    0%   { box-shadow: none; transform: scale(1,1); }
    40%  { box-shadow: none; transform: scale(1,1);}
    70%  { box-shadow: inset 0 0 20px red,0 0 20px red; transform: scale(1.2,1.2);}
    100% { box-shadow: none; transform: scale(1,1);}
}
.pipe-rotate{
   animation: 800ms linear 0ms pipe-rotate-animation; 
}
@keyframes pipe-rotate-animation{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.intro-text-one{
    position: absolute;
    top: 183.16px;
    left: 372.272px;
    width: 582px;
    height: 363px;
    opacity: 0;
    visibility: visible;
    -webkit-animation: 500ms linear 200ms intro-text-one-animation forwards;
    animation: 500ms linear 200ms intro-text-one-animation forwards;
}
@keyframes intro-text-one-animation{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
.fade-out{
    opacity: 1;
    -webkit-animation: 400ms linear 100ms fade-out-animation forwards;
    animation: 400ms linear 100ms fade-out-animation forwards;
}
@-webkit-keyframes fade-out-animation{
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes fade-out-animation{
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
.intro-text-two{
    position: absolute;
    top: 183.16px;
    left: 390.272px;
    width: 546px;
    height: 388px;
    opacity: 0;
    visibility: visible;
    animation: 300ms linear 610ms intro-text-two-animation forwards;
}
@keyframes intro-text-two-animation{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
.bottom-stages-container{
    position: absolute;
    top: 800px;
    left: 0px;
    width: 1280px;
    height: 400px;
    visibility: visible;
    animation: 300ms cubic-bezier(0.310, 0.645, 0.585, 1.105) 650ms bottom-stages-container-animation forwards;
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(600px);
}
@keyframes bottom-stages-container-animation{
    0%   { top: 800px; }
    100% { top: 400px; }
}
@keyframes bottom-stages-container-hide-animation{
    0%   { top: 400px; }
    100% { top: 800px; }
}
.bottom-stages-background{
    position: absolute;
    top: 244px;
    left: -1px;
    width: 1281px;
    height: 156px;
}
.stage-1-label{
    position: absolute;
    top: 278.228px;
    left: 36.078px;
    width: 244px;
    height: 85px;
}
.stage-2-label{
    position: absolute;
    top: 278.228px;
    left: 351.738px;
    width: 258px;
    height: 85px;
}
.stage-3-label{
    position: absolute;
    top: 278.228px;
    left: 653.369px;
    width: 295px;
    height: 85px;
}
.stage-4-label{
    position: absolute;
    top: 278.228px;
    left: 984.359px;
    width: 277px;
    height: 85px;
}
.lady-popup{
    position: absolute;
    top: -0.783px;
    left: 1003.563px;
    width: 255px;
    height: 320px;
}
.lady-hide{
    top: 320px;
}
@keyframes lady-show-animation{
    0%   { top: 320px; }
    100% { top: -0.783px; }
}
@keyframes lady-hide-animation{
    0%   { top: -0.783px; }
    100% { top: 320px; }
}
.intro-text-score{
    position: absolute;
    top: 179.69px;
    left: 374.778px;
    width: 589px;
    height: 359px;
    opacity: 0;
    visibility: visible;
    animation: 400ms linear 610ms intro-text-score-animation forwards;
}
@keyframes intro-text-score-animation{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
.turn-valve-label{
    position: absolute;
    top: 36.05px;
    left: 21.786px;
    width: 253px;
    height: 208px;
    opacity: 0;
    transform-origin: center center;
}
.turn-next-page-label{
    position: absolute;
    top: 36.05px;
    left: 21.786px;
    width: 253px;
    height: 208px;
    opacity: 0;
    animation: 1000ms linear 3000ms turn-next-page-label-animation forwards;
    transform-origin: center center;
}
@keyframes turn-next-page-label-animation{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes turn-next-page-label-hide-animation{
    0%   { opacity: 1; transform: scale(1,1);}
    100% { opacity: 0; transform: scale(3,3);}
}
.home-button{
    position: absolute;
    top: 25.722px;
    left: 1150.993px;
    width: 108px;
    height: 108px;
    opacity: 0;
    transform-origin: center center;
}
.try-again-button{
    position: absolute;
    top: 157.456px;
    left: 1149.792px;
    width: 111px;
    height: 107px;
    opacity: 0;
    transform-origin: center center;    
}
.fade-expand-into{
    animation: 500ms linear 1000ms fade-expand-animation forwards;
}
.fade-expand-into-slow{
    animation: 500ms linear 3000ms fade-expand-animation forwards;
}
@keyframes fade-expand-animation{
    0%   { opacity: 0; transform: scale(3,3);}
    100% { opacity: 1; transform: scale(1,1);}
}
@keyframes fade-expand-hide-animation{
    0%   { opacity: 1; transform: scale(1,1);}
    100% { opacity: 0; transform: scale(3,3);}
}
.question-frame-container{
    position: absolute;
    top: -800px;
    left: 0;
    width: 1280px;
    height: 800px;
    visibility: visible;
    animation: 600ms cubic-bezier(0.310, 0.645, 0.585, 1.105) question-frame-container-animation forwards;
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(600px);
}
@keyframes question-frame-container-animation {
    0%   { top: -800px; }
    100% { top: 0px; }
}
@keyframes question-frame-container-hide-animation {
    0%   { top: 0px; }
    40%  { top: 0px; }
    100% { top: -800px; }
}
.question-frame{
    position: absolute;
    top: -100px;
    left: 0;
    width: 1280px;
    height: 800px;
    visibility: visible;
    pointer-events: none;
}
.question-home-button{
    position: absolute;
    width: 108px;
    height: 108px;
    left: 63.978px;
    top: 81.637px;
}
.quit-container{
    position: absolute;
    width: 1280px;
    height: 800px;
    left: 0px;
    top: 0px;
    background-color: rgba(255,255,255,.4);
}
.quit-popup{
    position: absolute;
    width: 529px;
    height: 300px;
    left: 375.5px;
    top: 250px;
}
.continue-button{
    position: absolute;
    width: 223px;
    height: 132px;
    left: 378.5px;
    top: 410px;
}
.quit-button{
    position: absolute;
    width: 223px;
    height: 132px;
    left: 675.5px;
    top: 410px;
}
.question-bottom-stages-container{
    position: absolute;
    top: 800px;
    left: 0px;
    width: 1280px;
    height: 400px;
    visibility: visible;
    animation: 600ms cubic-bezier(0.310, 0.645, 0.585, 1.105) 0ms bottom-stages-container-animation forwards;
    pointer-events: none;
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(600px);
}
.inactive-stage-label{
    opacity: 0.3;
}
.score-container-placeholder{
    position: fixed;
    width: 32.448px;
    height: 38.245px;
    left: 960px;
    top: 225.699px;
    overflow: hidden;
    opacity: 0;
}
.score-container-1{
    position: absolute;
    width: 32.448px;
    height: 38.245px;
    left: 1004px;
    top: 225.699px;
    overflow: hidden;
}
.score-container-2{
    position: absolute;
    width: 32.448px;
    height: 38.245px;
    left: 1048px;
    top: 225.699px;
    overflow: hidden;
}
.score-container-3{
    position: absolute;
    width: 32.448px;
    height: 38.245px;
    left: 1091px;
    top: 225.699px;
    overflow: hidden;
}
.score-container-4{
    position: absolute;
    width: 32.448px;
    height: 38.245px;
    left: 1135.839px;
    top: 225.699px;
    overflow: hidden;
}
.score-number{
    font-family: MicroSquare;
    font-weight: bold;
    font-size: 30.9px;
    width: 32.448px;
    height: 38.245px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
.question-container{
    position: absolute;
    width: 727.265px;
    height: 455.453px;
    left: 116.034px;
    top: 134.737px;
    overflow: hidden;
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(600px);
}
.question-inner-container{
    position: absolute;
    left: 68.992px;
    top: 50.429px;
    width: 576.158px;
    height: 371.845px;
    visibility: visible;
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(600px);
}
@keyframes question-inner-container-show-animation {
    0%   { top: 472.274px; }
    100% { top: 50.429px; }
}
@keyframes question-inner-container-hide-animation {
    0%   { top: 50.429px; }
    100% { top: 472.274px; }
}
.question-blue-circle{
    position: absolute;
    width: 70px;
    height: 70px;
}
.question-number{
    position: absolute;
    width: 70px;
    height: 70px;
    left: 2px;
    top: 1px;
    font-family: Roboto;
    font-weight: bold;
    font-size: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
.question-inner-box{
    position: absolute;
    width: 511px;
    height: 371.845px;
    left: 75px;
    top: 5.019px;
}
.question-text{
    font-weight: bold;
    font-family: Roboto;
    font-size: 25.12px;
    color: #004A85;
    margin-bottom: 17.703px;
    min-height: 68px;
    display: flex;
    align-items: center;
}
.answer{
    font-weight: normal;
    font-family: Roboto;
    font-size: 25.12px;
    line-height: 30.15px;
    color: #004A85;
    margin-bottom: 12px;
    min-height: 38px;
}
.answer-droplet{
    position: absolute;
    width: 34px;
    height: 45px;
    margin-left: -40.629px;
    margin-top: -10px;
}
.you-right-box{
    position: absolute;
    width: 715px;
    height: 444px;
    left: 6.1325px;
    top: -444px;
    visibility: visible;
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(600px);
}
@keyframes you-right-box-show-animation {
    0%   { top: -444px; }
    100% { top: 5.7265px; }
}
@keyframes you-right-box-hide-animation {
    0%   { top:  5.7265px; }
    100% { top: -444px; }
}
.you-wrong-box{
    position: absolute;
    width: 723px;
    height: 461px;
    left: 2.1325px;
    top: -461px;
    visibility: visible;
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(600px);
}
@keyframes you-wrong-box-show-animation {
    0%   { top: -461px; }
    100% { top: -2.7735px; }
}
@keyframes you-wrong-box-hide-animation {
    0%   { top: -2.7735px; }
    100% { top: -461px; }
}
.explain-text{
    position: absolute;
    width: 550.472px;
    height: 152.49px;
    left: 88.831px;
    top: 208.637px; 
    text-align: center;
    font-weight: normal;
    font-family: Roboto;
    font-size: 23px;
    line-height: 27.6px;
    color: white;
    opacity: 1;
}
.explain-title-text-one{
    font-size: 30px;
    line-height: 36px;
}
.explain-title-text-two{
    font-size: 30px;
    line-height: 36px;
    font-weight: bold;
    color: #80D4F7;
}
.do-you-know-popup{
    position: absolute;
    top: 8.297px;
    left: 793.996px;
    width: 229px;
    height: 161px;
    opacity: 0;
}
@keyframes do-you-know-popup-hide-animation{
    0%   { top: 8.297px; }
    100% { top: 329.08px; }
}
.do-you-know-text{
    position: absolute;
    font-family: MicroSquare;
    font-weight: bold;
    font-size: 29.22px;
    line-height: 35.06px;
    color: white;
    letter-spacing: 1px;
    left: 39.546px;
    top: 44.607px;
    width: 116.059px;
    height: 66.733px;
    display: none;
}
.next-button{
    position: absolute;    
    top: 372px;
    left: 34px;
    min-width: 100px;
    height: 25px;
    opacity: 0;
    font-size: 25px;
    font-weight: bold;
    font-family: Roboto;
    color: white;
    background-color: #4FB948;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    border: solid 3px white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.next-symbol{
    font-size: 50px;
    display: inline-block;
    margin-top: -6px;
    margin-left: 8px;
}
@keyframes next-button-show-animation {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes next-button-hide-animation {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
.end-stage-container{
    position: absolute;
    top: -800px;
    left: 0;
    width: 1280px;
    height: 800px;
    visibility: visible;
    animation: 600ms cubic-bezier(0.310, 0.645, 0.585, 1.105) end-stage-container-show-animation forwards;
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(0px);
}
@keyframes end-stage-container-show-animation {
    0%   { top: -800px; }
    100% { top: 0px; }
}
@keyframes end-stage-container-hide-animation {
    0%   { top: 0px; }
    20%  { top: 0px; }
    100% { top: -800px; }
}
.end-stage-hand{
    position: absolute;
    top: -13px;
    left: 0;
    width: 1280px;
    height: 800px;
    pointer-events: none;
}
.water-drop{
    position: absolute;
    top: -27.262px;
    left: 557.383px;
    width: 167px;
    height: 261px;
}
.water-drop .tile-thumbnail{
    backface-visibility: visible;
}
@keyframes water-drop-animation {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(2070deg); } 
}
@keyframes water-drop-fade-out-animation {
    0% {opacity:1}
    80% {opacity:1; }
    100% {opacity:0; }   
}
.score-in-drop{
    position: absolute;
    top: 124.051px;
    left: 0.889px;
    width: 147px;
    height: 100px;
    text-align: left; 
    font-size: 85px;
    font-weight: bold;
    font-family: Roboto;
    color: #1C75BC;
    line-height: 102px;
    text-align: center;
    visibility: visible;
    z-index: 999;
}
.result-description{
    position: absolute;
    top: 372.85px;
    left: 403.22px;
    width: 474px;
    height: 232px;
    text-align: center;
    font-size: 42px;
    font-weight: bold;
    font-family: Roboto;
    color: #333333;
    line-height: 50.4px;
}
.result-description-small{
    font-size: 32px;
    line-height: 38.4px;
}
.restart-game-button{
    position: absolute;
    top: 151.456px;
    left: 1144.292px;
    width: 122px;
    height: 119px;
    opacity: 0;
    transform-origin: center center;
}
.restart-game-button-expand-into{
    animation: 800ms cubic-bezier(1, 0, 0, 1) 6850ms star-animation forwards;
}
.next-stage-timer{
    position: absolute;
    top: 151.456px;
    left: 1144.292px;
    width: 122px;
    height: 119px;
    opacity: 0;
    transform-origin: center center;
}
.next-stage-timer div{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 122px;
    height: 119px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
    font-size: 30px;
    font-weight: bold;
    font-family: Roboto;
    z-index: 999;
}
.congratulations{
    position: absolute;
    top: 297.5px;
    left: 427.5px;
    width: 425px;
    height: 75px;
    opacity: 0;
}
.badge-container{
    position: absolute;
    top: 25.8px;
    left: 478.6px;
    width: 317px;
    height: 318px;
}
.badge-background{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 317px;
    height: 318px;
    opacity: 1;
    transform: scale(0,0);
    transform-origin: center center;
}
@keyframes badge-background-animation {
    0%   { transform: scale(0,0); }
    100% { transform: scale(1,1); } 
}
.badge-outer-ring{
    position: absolute;
    top: 47px;
    left: 46.5px;
    width: 224px;
    height: 224px;
    transform-origin: center center;
    transform: rotateY(90deg);
}
@keyframes badge-outer-ring-animation {
    0%   { transform: rotateY(90deg); top:-5px; opacity: .5; }
    100% { transform: rotateY(720deg); top:47px; opacity: 1; } 
}
.inner-ring{
    position: absolute;
    top: 60px;
    left: 59.5px;
    width: 198px;
    height: 198px;
    transform-origin: center center;
    transform: rotateY(90deg);
}
@keyframes inner-ring-animation {
    0%   { transform: rotateY(90deg); top:-5px; opacity: .5; }
    100% { transform: rotateY(720deg); top:60px; opacity: 1; } 
}
@keyframes star-animation{
    0%   { opacity: 0; transform: scale(8,8); margin-top: -100px;}
    100% { opacity: 1; transform: scale(1,1); margin-top: 0px;}
}
.stage-1-star{
    position: absolute;
    top: 177.344px;
    left: 135.4px;
    width: 51px;
    height: 50px;
    opacity: 0;
}
.stage-2-star-1{
    position: absolute;
    top: 82.2px;
    left: 141.4px;
    width: 38px;
    height: 34px;
    opacity: 0;
}
.stage-2-star-2{
    position: absolute;
    top: 202.2px;
    left: 141.4px;
    width: 37px;
    height: 35px;
    opacity: 0;
}
.stage-3-star-1{
    position: absolute;
    top: 184.2px;
    left: 96.4px;
    width: 37px;
    height: 36px;
    opacity: 0;
    transform-origin: center center;
    transform: rotateY(-30deg);
}
.stage-3-star-2{
    position: absolute;
    top: 201.2px;
    left: 142.4px;
    width: 37px;
    height: 36px;
    opacity: 0;
}
.stage-3-star-3{
    position: absolute;
    top: 183.2px;
    left: 188.4px;
    width: 37px;
    height: 36px;
    opacity: 0;
    transform-origin: center center;
    transform: rotateY(-30deg);
}
.stage-4-star-1{
    position: absolute;
    top: 74.2px;
    left: 143.4px;
    width: 36px;
    height: 35px;
    opacity: 0;
}
.stage-4-star-2{
    position: absolute;
    top: 184.2px;
    left: 96.4px;
    width: 37px;
    height: 36px;
    opacity: 0;
    transform-origin: center center;
    transform: rotateY(-30deg);
}
.stage-4-star-3{
    position: absolute;
    top: 201.2px;
    left: 142.4px;
    width: 37px;
    height: 36px;
    opacity: 0;
}
.stage-4-star-4{
    position: absolute;
    top: 183.2px;
    left: 188.4px;
    width: 37px;
    height: 36px;
    opacity: 0;
    transform-origin: center center;
    transform: rotateY(-30deg);
}