/*================================= 1 Reset Css ( #res ) =================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{text-decoration:none;outline:0;margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:#D46300;transition:all 0.5s ease 0s;}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}hr{display:block;height:1px;border:0;border-top:1px solid #ababab;margin:50px auto; padding:0}

/*================================= 2 Font Face ( #face ) =================================*/

@font-face {
    font-family: Hobo-Std-Medium;
    src: url("../fonts/Hobo-Std-Medium.woff") format('woff');
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Hobo-Std-Medium;
}

/*================================= 3  Inputs ( #input ) =================================*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0;}
::-webkit-input-placeholder {color:#343434; font-style:normal;}
:-moz-placeholder {color:#343434; font-style:normal;}
::-moz-placeholder {color:#343434; font-style:normal;}
:-ms-input-placeholder {color: #343434; font-style:normal;}
button::-moz-focus-inner {border: 0}
:focus {outline:none;border-color: #343434 !important;}
::-moz-focus-inner {border:0;}

ul{list-style:none; margin:0; padding:0;}
li{list-style:none;}
img{max-width: 100%;}
button{cursor: pointer;}
a{cursor: pointer;}

canvas {position: fixed;top: 0;left: 0;pointer-events: none;z-index: 100000;}
  
.main{height: 100svh;height: 100dvh;padding: 60px;display: flex;flex-flow: column;justify-content: space-around;overflow-y: auto;}
.main_bg{background-image: url("../images/where-am-i/main_bg.jpg");background-repeat: no-repeat;background-size: cover;position: relative;background-position: bottom;}
.main_bg::after{content: '';position: fixed;height: 100%;width: 100%;background-image: url(../images/where-am-i/front-bg.png);background-size: cover;background-repeat: no-repeat;left: 0;bottom: 0;z-index: 999;background-position: bottom;pointer-events: none;}
.btn_wrapper{position: absolute;right: 30px;top: 30px;}
img.btn_wrapper, .btn_wrapper img{width: 50px;cursor: pointer;}
.logo{margin: 0 auto 70px;display: block;}

.main_wrapper{height: 100%;display: flex;flex-direction: column;justify-content: space-evenly;}
.container{display: flex;align-items: center;gap: 50px;}
.button_left, .button_right{cursor: pointer;width: 60px;flex: 0 0 auto;}
.level_wrapper{display: flex;flex-wrap: nowrap;gap: 80px;overflow-x: auto;padding-block: 20px;}
.main .main_wrapper::-webkit-scrollbar,.level_wrapper::-webkit-scrollbar {display: none;}

.level_wrapper a{display: inline-block;flex: 0 0 auto;}
.level_wrapper a:nth-child(even){margin-top: 50px;}

@keyframes float {
    0% {transform: translate3d(0, 0, 0);}
    50% {transform: translate3d(10px, -10px, -20px);}
    100% {transform: translate3d(0, 0, 0);}
}

.main_level{display: none;}

.second_logo{max-width: 490px;margin: 0 auto 70px;display: flex;align-items: flex-end;}
.second_logo #levellogo{max-width: 100px;}
.stage_wrapper{display: flex;gap: 50px;align-items: center;justify-content: space-evenly;max-width: 1100px;margin: 0 auto;position: relative;z-index: 9999;}
.stage_wrapper img{width: 350px;animation: movingX 8s linear infinite;}
@-webkit-keyframes movingX {
    0% {-webkit-transform: translateX(0);transform: translateX(0)}
    50% {-webkit-transform: translateX(50px);transform: translateX(50px)}
    100% {-webkit-transform: translateX(0);transform: translateX(0)}
}

@keyframes movingX {
    0% {-webkit-transform: translateX(0);transform: translateX(0)}
    50% {-webkit-transform: translateX(50px);transform: translateX(50px)}
    100% {-webkit-transform: translateX(0);transform: translateX(0)}
}
.stage_wrapper p{font-size: 60px;color: #fff;}
.stage_wrapper p a{display: block;color: #000;padding: 15px 20px;background-color: #fff;text-align: center;max-width: 200px;margin-top: 40px;font-size: 40px;border-radius: 10px;}
.stage_wrapper p a:hover{background-color: #2895db;color: #fff;}

.container_bg{background-repeat: no-repeat;background-position: top left;background-size: cover;}
.button_icon{position: absolute;bottom: 30px;right: 30px;background-color: transparent;border: none;}
.progress1 {position: relative;overflow: hidden;width: 100%;background-color: #a6e3fc;box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);}
.cssProgress{width: 80%;position: absolute;bottom: 30px;right: 0;left: 0;margin: 0 auto;}
.cssProgress .cssProgress-bar {display: block;float: left;width: 100%;height: 100%;background: #2895db;box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.1);transition: width 0.8s ease-in-out;background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);background-size: 35px 35px;height: 18px;-webkit-animation: cssProgressActiveRight 2s linear infinite;animation: cssProgressActiveRight 2s linear infinite;}

@keyframes cssProgressActiveRight {
    0% {background-position: 0 0;}
    100% {background-position: -35px -35px;}
}

.cartoon_wrapper{height: 100%;padding: 10px;}
.popup{position: absolute;width: 100%;top: 0;left: 0;height: 100vh;background-color: rgba(0, 0, 0, 0.7);display: flex;align-items: center;display: none;overflow: hidden;}
.popup_wrapper{max-width: 550px;margin: 0 auto;text-align: center;animation: popout 1s linear;position: relative;}
.popup_wrapper p{font-size: 30px;color: #ffffff;line-height: 40px;position: absolute;left: 0;right: 0;top: 50%;transform: translateY(-50%);max-width: 200px;margin: 30px auto;}
.level_done .popup_wrapper p{font-size: 20px;line-height: 30px;}

.popup .popup_wrapper::after{content: '';position: absolute;background-repeat: no-repeat;background-size: contain;bottom: 57px;right: 10px;width: 170px;height: 170px;pointer-events: none;background-position: bottom;}

.popup.level1 .popup_wrapper::after{background-image: url(../images/where-am-i/level-1/cheer1.gif);}
.popup.level2 .popup_wrapper::after{background-image: url(../images/where-am-i/level-2/cheer2.gif);}
.popup.level3 .popup_wrapper::after{background-image: url(../images/where-am-i/level-3/cheer3.gif);}
.popup.level4 .popup_wrapper::after{background-image: url(../images/where-am-i/level-4/cheer4.gif);}
.popup.level5 .popup_wrapper::after{background-image: url(../images/where-am-i/level-5/cheer5.gif);}
.popup.level6 .popup_wrapper::after{background-image: url(../images/where-am-i/level-6/cheer6.gif);}
.popup.level7 .popup_wrapper::after{background-image: url(../images/where-am-i/level-7/cheer7.gif);}
.popup.level8 .popup_wrapper::after{background-image: url(../images/where-am-i/level-8/cheer8.gif);right: 50px;}
.popup.level9 .popup_wrapper::after{background-image: url(../images/where-am-i/level-9/cheer9.gif);}
.popup.level10 .popup_wrapper::after{background-image: url(../images/where-am-i/level-10/cheer10.gif);}
.popup.level11 .popup_wrapper::after{background-image: url(../images/where-am-i/level-11/cheer11.gif);}

.popup.timeup .popup_wrapper::after{background-image: url(../images/where-am-i/time-up.gif);right: 40px;}

.btn{color: #fff;background-color: #003394;padding: 12px 0;max-width: 150px;font-size: 22px;display: block;margin: 20px auto 0;border-radius: 10px;}
@keyframes popout {
    0%{transform: scale(1);opacity: 0;}
    40%, 50%{transform: scale(1.2);opacity: 1;}
    90%, 100%{transform: scale(1);}
}

#childContainer{display: none;}
.character { position: absolute; width: 100px;}

@media (min-width:1680px) {
    .logo{width: 670px;}
    .level_wrapper a:nth-child(even) {margin-top: 70px;}}

@media (max-width:1280px){
    .main{padding: 40px;overflow: hidden;}
    .btn_wrapper{top: 10px;right: 10px;}
}
@media (max-width:1023px){
    .main{padding: 30px;}
    .main .main_wrapper{overflow-y: auto;overflow-x: hidden;}
    .logo {max-width: 290px;margin-bottom: 60px;}
    .container{justify-content: center;}
    img.btn_wrapper, .btn_wrapper img{width: 30px;}
    .level_wrapper{gap: 30px;justify-content: center;flex-wrap: wrap;}
    .level_wrapper a:nth-child(even) {margin-top: 70px;}
    .level_wrapper a img{width: 120px;}
    .button_left, .button_right{display: none;}  
    
    .second_logo{max-width: 340px;margin-bottom: 100px;}
    .second_logo #levellogo {max-width: 80px;}
    .stage_wrapper{gap: 20px;max-width: 700px;flex-wrap: wrap;}
    .stage_wrapper img {width: 200px;}
    .stage_wrapper p{font-size: 40px;}
    .stage_wrapper p a{margin-top: 20px;padding: 12px 15px;font-size: 30px;}

    .button_icon{bottom: 10px;right: 20px;}
    .button_icon img{width: 25px;}
    .cssProgress{bottom: 10px;}
    .cssProgress .cssProgress-bar{height: 12px;}
    .cartoon_wrapper img {width: 65px;}

    .popup_wrapper{max-width: 450px;}
    .popup_wrapper p{max-width: 170px;font-size: 20px;line-height: 25px;}
    .level_done .popup_wrapper p{font-size: 17px;line-height: 22px;}

    .popup.timeup .popup_wrapper::after{bottom: 47px;width: 100px;}
}
@media (max-width: 1023px) and (orientation:portrait){
    .logo{max-width: 370px;}
}
@media (max-width: 1023px) and (orientation:landscape){
    .main .main_wrapper{overflow: hidden;}
    .button_left, .button_right {display: block;width: 35px;}
    .level_wrapper{flex-wrap: nowrap;justify-content:flex-start;}
    .second_logo {max-width: 260px;margin-bottom: 30px;}
    .second_logo #levellogo {max-width: 60px;}
}
/* @media (max-height:480px){
    .main_bg::after{bottom: -40px;}
} */
@media (max-width:767px){
    .main{overflow-y: hidden;}
    .logo{margin-bottom: 30px;max-width: 270px;}
    .second_logo{max-width: 200px;margin-bottom: 70px;}
    .second_logo > img{margin-left: -20px;}
    .second_logo #levellogo {max-width: 40px;margin-left: 0;}
    .level_wrapper{gap: 20px;}
    .stage_wrapper p {font-size: 30px;}
    .stage_wrapper p a{font-size: 22px;}

    .popup_wrapper{max-width: 350px;}
    .btn{padding: 7px 0;max-width: 120px;}
    .popup_wrapper p{font-size: 18px;max-width: 140px;line-height: 25px;}
    .level_done .popup_wrapper p{font-size: 13px;max-width: 140px;line-height: 18px;}

    .popup .popup_wrapper::after{bottom: 35px;width: 100px;height: 100px;}

    .popup.timeup .popup_wrapper::after {bottom: 37px;width: 80px;}
    
}
@media (max-width: 767px) and (orientation:landscape){
    .logo{margin-bottom: 0;}
    .second_logo{margin-bottom: 30px;}
}

@media screen and (max-width: 767px) and (orientation: portrait){
    .main_bg::after{bottom: -20px;}
    .main .main_wrapper{margin-top: 80px;}
    .main_wrapper .logo{position: fixed;top: 30px;left: 0;right: 0;}
    .main_bg{background-position: top;}
    .level_wrapper{padding-top: 10px;}
    .level_wrapper a:nth-child(even) {margin-top: 30px;}
}
.rotate-message {display: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(0, 0, 0, 0.7);color: white;padding: 20px;border-radius: 10px;z-index: 1000;text-align: center;font-size: 18px;line-height: 25px;}
.portrait .btn_wrapper,.portrait .cssProgress, .portrait .cartoon_wrapper{display: none;}
.hide{display: none !important;}