@font-face {
  font-family: 'primary';
  src: url('../fonts/primary.ttf') format('truetype');
}
/* @font-face {
  font-family: 'm_reg_bold';
  src: url('../fonts/m_reg_bold.ttf') format('truetype');
} */
@font-face {
  font-family: 'game';
  src: url('../fonts/game.ttf') format('truetype');
}
@font-face {
  font-family: 'game_dot';
  src: url('../fonts/game_dot.ttf') format('truetype');
}
/* @font-face {
  font-family: 'm_light';
  src: url('../fonts/myriad/m_light.otf') format('truetype');
}
@font-face {
  font-family: 'm_reg';
  src: url('../fonts/myriad/m_reg.otf') format('truetype');
}
@font-face {
  font-family: 'm_bold';
  src: url('../fonts/myriad/m_bold.otf') format('truetype');
} */

@font-face {
  font-family: 'm_light';
  src: url('../fonts/roboto/Roboto-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'm_reg';
  src: url('../fonts/roboto/Roboto-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'm_bold';
  src: url('../fonts/roboto/Roboto-Bold.ttf') format('truetype');
}



* {
    scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar in WebKit (Chrome, Safari, etc.) */
*::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

/* Optional: hide scrollbar in other browsers */
* {
    overflow: -moz-scrollbars-none; /* Older versions of Firefox */
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'm_reg';
  }
  img {
    width: 100%;
    height: auto;
  }
  #main {
    box-sizing: border-box;
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    max-width: 100vw;
    max-height: 100vh;
    background-color: #ffeec5;
    overflow: hidden;
    padding: 17px;
  }
  /* border 1 style starts */
  #border_cont1 {
    background-image: url("../img/border1.png");
    height: 10px;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 10px;
    width: calc(100vw - 20px);
    /* left: 0;
    width: 100vw; */
  }
  #border_cont2 {
    background-image: url("../img/border1.png");
    height: 10px;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 10px;
    width: calc(100vw - 20px);
    /* left: 0;
    width: 100vw; */
  }
  #border_cont3 {
    background-image: url("../img/border1.png");
    height: 10px;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vh;
    transform: rotate(90deg) translate(calc(50% - 10px), calc(50vh - 5px));
  }
  #border_cont4 {
    background-image: url("../img/border1.png");
    height: 10px;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 0;
    width: 100vh;
    transform: rotate(90deg) translate(calc(50% - 10px), calc(-50vh + 5px));
  }
  /* border 2 style ends !!! */

  /* border 2 style starts */
  #border2_cont1 {
    background-image: url("../img/border2_top_bottom.png");
    height: 7px;
    background-size: contain;
    position: absolute;
    top: 10px;
    /* left: 0;
    width: 100vw; */
    left: 10px;
    width: calc(100vw - 20px);
  }
  #border2_cont2 {
    background-image: url("../img/border2_top_bottom.png");
    height: 7px;
    background-size: contain;
    position: absolute;
    bottom: 10px;
    /* left: 0;
    width: 100vw; */
    left: 10px;
    width: calc(100vw - 20px);
  }
  #border2_cont3 {
    background-image: url("../img/border2_left_right.png");
    height: 7px;
    background-size: contain;
    position: absolute;
    top: 24px;
    left: 25px;
    width: calc(100vh - 34px);
    /* top: 0;
    left: 0;
    width: 100vh; */
    transform: rotate(90deg) translate(calc(50% - 10px), calc(50vh - 5px));
  }
  #border2_cont4 {
    background-image: url("../img/border2_left_right.png");
    height: 7px;
    background-size: contain;
    position: absolute;
    /* top: 0;
    right: 0;
    width: 100vh; */
    top: 24px;
    right: 25px;
    width: calc(100vh - 34px);
    transform: rotate(90deg) translate(calc(50% - 10px), calc(-50vh + 5px));
  }
  /* border 2 style ends !!! */

  /* border 3 style starts */
  #border3_cont1 {
    background-image: url("../img/border4.png");
    height: 98px;
    max-height: 97px;
    background-size: contain;
    position: absolute;
    top: 20px;
    left: 17px;
    width: calc(100vw - 40px);
    z-index: 33;
}
  #border3_cont2 {
    background-image: url("../img/border3.png");
    height: 7px;
    background-size: contain;
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: calc(100vw - 40px);
    z-index: 33;
  }
  div#border3_cont2_play_screen1 {
    background-image: url(../img/game_screen_border_left.png);
    height: 45px;
    max-height: 46px;
    background-size: contain;
    position: absolute;
    left: 20px;
    max-width: 800px;
    z-index: 33;
    background-repeat: no-repeat;
    width: calc(100vw - 62vw);
  }
  div#border3_cont2_play_screen2 {
    background-image: url(../img/game_screen_border_right.png);
    height: 45px;
    max-height: 46px;
    background-size: contain;
    position: absolute;
    right: 32px;
    max-width: 750px;
    z-index: 33;
    background-repeat: no-repeat;
    width: calc(100vw - 55vw);
}


#border_lights {
  background-image: url("../img//lights.png");
  height: 12px;
    background-size: contain;
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100vw - 40px);
}

#border_round_lights {
  /*background-image: url(../img/bg_round_lights.png);*/
  background-image: url(../img/light1.png);
  position: absolute;
  top: 32px;
  max-width: calc(100vw - 64px);
  /*aspect-ratio: 1500 / 172;*/
  z-index: 13;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 300px;
  left: 50%;
  transform: translateX(-50%);
  max-height: 100%;
      width: calc(90vw - 65px);
}
  /* border 3 style ends !!! */
  /* div#festive-hunt_star1 {c
    background-image: url("/assets/img/festive-hunt_star1.png") ;
       height: 140px;
    max-height: 140px;
    top: 40px;
    left: 40px;
    width: calc(100vw - 73px);
    position: absolute;
    color: #fff;
    background:#fff;
}
div#festive-hunt_star1 {
  background-image: url("../img/festive-hunt_star1.png");
  height: 140px;
  max-height: 140px;
  top: 40px;
  left: 40px;
  width: calc(100vw - 73px);
  position: absolute;
  color: #fff;
  background:#fff;
} */
button.T\&C.Apply {
  height: 31px;
  bottom: 0px;
  left: 34px;
  position: absolute;
  background-color: #e82429;
  border: none;
  padding: 0px 12px;
  color: #ffeec5;
  border-radius: 6px;
  cursor: pointer;
  z-index: 33;
  font-size: 16px;
}


@media(min-width: 1200px) {

  #main {
    /* width: calc(100vw - 64px);
    height: calc(100vh - 64px); */
    padding: 32px;
}
  /* border 1 style starts */
  #border_cont1 {
    height: 15px;
    left: 15px;
    width: calc(100vw - 34px);
  }
  #border_cont2 {
    height: 15px;
    left: 15px;
    width: calc(100vw - 34px);
  }
  #border_cont3 {
    height: 15px;
    transform: rotate(90deg) translate(calc(50% - 10px), calc(50vh - 9px));
  }
  #border_cont4 {
    height: 15px;
    transform: rotate(90deg) translate(calc(50% - 10px), calc(-50vh + 9px));
  }
  /* border 2 style ends !!! */

  /* border 2 style starts */
  #border2_cont1 {
    height: 13px;
    top: 18px;
    left: 17px;
    width: calc(100vw - 34px);
  }
  #border2_cont2 {
    height: 13px;
    bottom: 18px;
    left: 17px;
    width: calc(100vw - 34px);
  }
  #border2_cont3 {
    height: 13px;
    top: 34px;
    left: 51px;
    width: calc(100vh - 62px);
  }
  #border2_cont4 {
    height: 13px;
    top: 34px;
    right: 51px;
    width: calc(100vh - 62px);
  }
  /* border 2 style ends !!! */

  /* border 3 style starts */
  #border3_cont1 {
    height: 160px;
    max-height: 160px;
    top: 40px;
    left: 40px;
    width: calc(100vw - 80px);
}
  #border3_cont2 {
    height: 17px;
    bottom: 47px;
    left: 40px;
    width: calc(100vw - 80px);
  }

  #border_lights {
    height: 24px;
    top: 30px;
    left: 32px;
    width: calc(100vw - 64px);
}
  /* border 3 style ends !!! */
}
  /*  festive_hunt _ start   */
  .festive_hunt_page_centre {
    width: 100%;
}
  .festive-hunt_image {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin: 0 auto;
    /*height: 100vh;*/
    height: calc(100vh + 130px);
    justify-content: center;
    padding: 0 5px;
    z-index: 33;
}
.festive-hunt_backgroundimage {
  background-image: url(../img/background_festive_hunt.png);
  z-index: 100;
  padding: 30px;
  background-repeat: no-repeat;
  width: 560px;
  background-position: center center;
  background-size: 100% 100%;
  max-width: 35vw;
  max-height: 37vh;
  position: relative;
}
.festive-hunt_backgroundimage::after, .layerhowto_main::after {
  content: "";
  background-image: url(../img/background_border.png);
  position: absolute;
  bottom: -11px;
  width: 98%;
  height: 6px;
  left: 0px;
  margin: 0px 5px;
  background-repeat: repeat-x;
}
.festive-hunt_backgroundimage::before, .layerhowto_main::before {
  content: "";
  background-image: url(../img/background_border.png);
  position: absolute;
  top: -11px;
  width: 98%;
  height: 6px;
  left: 0px;
  margin: 0px 5px;
  background-repeat: repeat-x;
  transform: rotate(180deg);
}

.festive-hunt_image img {
  height: auto;
  width: 100%;
  max-width: 100%;
}
.festive-hunt_image p {
  color: #ffeec5;
  /*color: #fdd301;*/
  font-family: 'm_light' !important;
  padding: 15px 40px;
  margin: 0;
  padding-top: 25px;
  font-weight: 100;
}
button#btn_Play {
  padding: 15px 20px;
  font-size: 36px;
  color: #99030c;
  background-color: #ffedc5;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: 'game_dot' !important;
  margin: 8px 0;
}
button#btn_How_to_Play {
  display: block;
      position: relative;
    z-index: 14;
  margin: 15px auto;
  padding: 5px 13px;
  font-size: 18px;
  color: #ffeec5;
 background-color: #e82428;
    border: 2px solid #e82428;
    border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  font-family: 'm_reg' !important;
}

  /*  festive_hunt _ ends!!!   */

/* play_ground_screen start */
/* left side answer start */
  .interactive-image-container {
    width: 90%;
    max-width: calc(100% - 140px);
    margin: 35px 10px;
    margin-bottom: 40px;
    border-radius: 37px;
    border: 2px solid #d32929;
    position: relative;
}

div#leaderBoardContainer {
    z-index: 100;
}


/* right side answer start */
.outer-container {
  width: 120px;
  padding: 30px 0px;
  max-width: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
      position: relative;
}
.answer, .timer {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  padding: 10px;
  width: fit-content;
  min-width: 90%;
}
.all_answers {
  max-height: calc(100% - 112px);
  overflow: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  cursor: grab;
  height: fit-content !important;
}
.answers_object {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  border-radius: 20px;
  width: fit-content;
  min-width: 85%;
      height: fit-content !important;
    padding: 0 !important;
    margin: 0 !important;
}
.timer {
  margin: 0 auto;
  margin-bottom: 40px;
  padding: 0;
  max-width: 105px;
      margin-bottom: auto !important;
}
.answer_info {
  margin-bottom: 7px;
  font-size: 19px;
  text-align: center;
}
/* .outer-container .Leaderboard {
  margin: 20px 0;
  background-color: #e25b00;
  padding: 8px 12px;
  font-family: 'm_reg' !important;
  color: white;
  font-size: 14px;
  border-radius: 30px;
} */
.completion_counter p {
  color: #ffeec5;
  text-align: center;
  line-height: 1.4;
  margin: 0;
  font-family: 'm_light' !important;
  /*padding-bottom: 4px;*/
  font-size: 16px;
  line-height: 2;
}

div#answer-1 p.obj_heading {
  margin-top: 30px;
  color: #9e000c;
  font-size: 20px;
  font-family: 'm_light' !important;
  text-align: center;
  /*font-weight: 600;*/
      margin: 0 !important;
    padding: 10px 0;
}
span#countPopupDiv {
    display: block;
    width: fit-content;
    margin: auto;
    margin-top: 10px;
    background: rgba(226, 91, 0, 0.5);
    border-radius: 16px;
    padding: 4px 10px;
}
.completion_counter {
  text-align: center;
  padding: 11px 5px;
  font-family: 'game_dot' !important;
  display: flex;
  flex-direction: column;
  background: #9e000c;
  border: 1px solid #f4a903;
  border-radius: 16px;
  width: calc(100% - 18px);
  /*max-width: calc(100% - 10px);*/
  /*min-width: calc(100% - 10px);*/
      display: block;
}
.times {
  color: #ffeec5;
  font-size: 1.25rem;
      /*scale: 0.85;*/
    /*  width: 100%;*/
    /*display: block;*/
}
.MINUTES_inwords {
  color: #ffeec5 !important;
  padding-top: 8px;
  font-size: 18px;
  font-family: 'm_light' !important;
  text-transform: lowercase;
  line-height: 2;
}
ul.answer_list{
  padding: 0;
  margin: 0;
  width: fit-content;
  gap: 0 !important;
      max-height: 100% !important;
    overflow: hidden !important;
}
li.listitem {
  width: 120px;
  list-style: none;
          margin-bottom: 4%;
}
button.list_answer_button {
  height: 90px;
  width: 90px;
  border: 2px solid #e25b00;
  border-style: dotted;
  cursor: pointer;
  position: relative;
  margin: 15px;
  aspect-ratio: 1 / 1;
  background-image: url(../img/object_back.png);
    background-size: contain;
    background-color: #720037;
}
button.list_answer_button::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #e25b00;
  top: 0;
  left: 0;
  rotate: 45deg;
  scale: 0.9;
  border: 2px solid #720037;
  border-radius: 10px;
}
button.list_answer_button img {
  z-index: 2;
  position: relative;
  width: 75px;
    height: 75px;
    object-fit: contain;
}


button.list_answer_button:focus::after {
  background: #720037;
  border-color: #e25b00;
 }
/* @keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
 button.list_answer_button:focus img {
  animation: shake 1.5s linear;
  animation-iteration-count: 2;
  transition: all ease-in-out;
}  */


/* left side answer start  */



/* starting layers css */
#layerstart {
  position: absolute;
  top: 32px;
  left: 32px;
  width: calc(100% - 64px);
  height: calc(100% - 64px);
  background-color: #9e010c;
  background-image: url(../img/background_startpage.png);
  opacity: 0;
  display: none;
  background-position: center center;
  background-size:100%;
}
#layerhowto {
  /* width: 100%;
  justify-content: space-evenly; */
  position: absolute;
    top: 32px;
    left: 32px;
    width: calc(100% - 64px);
    height: calc(100% - 64px);
    z-index: 12;
    display: none;
    opacity: 0;
    background-color: #9e010c;
    background-image: url(../img/background_startpage.png);
    background-position: center center;
    background-size:100%;
    
}

.layerhowto_main {
  margin: auto;
  /* background-image: url(../img/background_festive_hunt.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%; */
    background: #ffedc5;
  border: 3px dotted #e36616;
    padding:20px;
    position: relative;
}

.layerhowto_main h1 {
  text-align: center;
  color: #9e010c;
  padding-bottom: 20px;
  font-family: 'game_dot' !important;
    text-transform: uppercase;
    font-weight: 100;
    font-size: 2.5rem;

}
.howto_container {
  display: flex;
  max-width: calc(100vw - 140px);
  width: 670px;
  gap: 15px;
  justify-content: space-around;
}
.single_howto {
  width: 33%;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  color: #fff;
  max-width: calc(33% - 55px); 
   background: #9e010c;
}
.single_howto p {
    font-family: "m_light" !important;
    font-size: 20px;
        color: #ffeec5;
}
#layermain {
  opacity: 0;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;  
  justify-content: space-evenly;
  /* z-index: 14; */
    background: inherit;
}
.showing {
  opacity: 1 !important;
  display: flex !important;
  transition: all 0.5s;
}
.mute-container {
  width: fit-content;
  position: absolute;
  bottom: 18px;
  left: 10px;
}
.mute-container button {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #ffeec5;
  border: none;
  display: flex;
  align-items: center;
  margin: 12px;
  cursor: pointer;
  border: 2px solid #9e000c;
}
.mute-container button path {
  fill: #9e000c; 
}
.mute-container button.hide {
  display:none;
}
.zoom-in-out-container button {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #ffeec5;
  border: none;
  display: flex;
  align-items: center;
  margin: 12px;
  cursor: pointer;
  border: 2px solid #9e000c;
}
.zoom-in-out-container button path {
  fill: #9e000c; 
}

.zoom-in-out-container {
  width: fit-content;
  position: absolute;
  bottom: 18px;
  right: 10px;
}

/*@keyframes pop {*/
/*  0% {*/
/*    transform: translateY(40px) translateX(-50%) scale(0.9);*/
/*  }*/
/*  50% {*/
/*    transform: translateX(-50%)scale(1.1);*/
/*  }*/
/*  100% {*/
/*    transform: translateX(-50%)scale(1);*/
/*  }*/
/*}*/
/*@keyframes pop_out {*/
/*  0% {*/
/*    transform: translateX(-50%)scale(1);*/
/*  }*/
/*  50% {*/
/*    transform: translateY(40px) translateX(-50%)scale(0.5);*/
/*  }*/
/*  100% {*/
/*    transform: translateY(40px) translateX(-50%) scale(0);*/
/*  }*/
/*}*/

@keyframes pop {
  0% {
    transform: translateY(40px) translateX(-50%) scale(0.9);
  }
  2.5% {
    transform: translateX(-50%)scale(1.1);
  }
  5% {
    transform: translateX(-50%)scale(1);
  }
/* before 15% */

  /* after 90% */
  96.66% {
    transform: translateX(-50%)scale(1);
  }
  98.33% {
    transform: translateY(40px) translateX(-50%)scale(0.5);
  }
  100% {
    transform: translateY(40px) translateX(-50%) scale(0);
  }
}
@keyframes popmobile {
  0% {
    transform: translateY(40px) scale(0.9);
  }
  2.5% {
    transform: scale(1.1);
  }
  10% {
    transform: scale(1);
  }
/* before 15% */

  /* after 90% */
  96.66% {
    transform: scale(1);
  }
  98.33% {
    transform: translateY(40px) scale(0.5);
  }
  100% {
    transform: translateY(40px) scale(0);
  }
}
.main_hint_container {
  /* background-image: url(../img/inpuBoxt_image.png); */
  position: absolute;
  bottom: 40px;
  border: 1px solid #720037;
  left: 50%;
  max-width: 95%;
  max-height: 20%;
  overflow: scroll;
  scrollbar-width: none;
  border-radius: 7px;
  background-repeat: repeat-y;
  background-color: #ffeec5;
  transform: translateX(-50%);
  transition: all ease-in-out;
  animation: none;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  opacity:0;
}
.main_hint_container.active {
  animation: pop 6s forwards;
  opacity:1;
}
/*.main_hint_container.activeout {*/
/*  animation: pop_out 0.2s forwards;*/
/*  opacity:1;*/
/*}*/
.main_hint_container p {
  font-size: 14px;
  color: #720037;
}
.hint_box {
  padding: 12px;
}
.hint_box p {
   
    display: flex;
    align-items: center;
  font-family: 'm_light' !important;
  margin: 0;
  line-height: 1.4;
  /* font-size: 14px; */
  font-size: 17px;
  max-width: 400px;
}
 .hint_box p b{
                  width: 40px;
    display: flex;
    white-space: nowrap;
    margin-right: 7px;font-weight: 400;
 }

#top_logo {
  position: absolute;
  top: -27px;
  width: 350px;
  max-width: 350px;
  left: 50%;
  z-index: 101;
  transform: translateX(-50%);
}

div#terms_box, #no_winner_box {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
    left: 0;
}
#terms_box .terms_cont, #no_winner_box .no_winner_cont {
  width: 50%;
  height: 40%;
  background: #ffeec5;
  padding: 40px;
  border-radius: 20px;
      border: 4px dotted #e36616;
}
#no_winner_box .no_winner_cont {
    background: no-repeat;
    border: none;
        display: flex;
    justify-content: center;
    align-items: center;
        padding: 0;
        height: fit-content;
}
#no_winner_box .no_winner {
    background-image: url(../img/no_winner_back.png);
    aspect-ratio: 750 / 256;
    background-size: 100%;
    max-width: 100%;
    width: 750px;
        align-items: center;
    justify-content: center;
    display: flex;
    position: relative;
    
}
#no_winner_close {
        position: absolute;
    right: -1.8rem;
    top: -1.8rem;
    width: 2rem;
    height: 2rem;
    fill: #ffeec5;
    cursor: pointer;
}
#no_winner_box .no_winner p {
    margin: 0;
    color: red;
    font-size: 2rem;
    width: 70%;
}


#terms_box h1 {
  font-size: 2vw;
  font-family: 'game_dot';
    color: #99030c;
    text-align: center;
    font-weight: 200;
}
#terms_box h4 {
  font-family: 'game_dot';
  color: #99030c;
  text-align: center;
  font-weight: 200;
  font-size: 1.5vw;
}
#terms_box .terms_cont ol {
   overflow: scroll;
    max-height: 80%;
    scrollbar-width: none;
}
#terms_box .terms_cont ol li {
    padding-bottom: 15px;
    font-size: 1vw;
    font-family: 'm_light';
    font-weight: 300;
    line-height: 1.4;
    color: #666;
}
#terms_box p {
  font-size: 1.25vw;
  line-height: 1.4;
  max-height: 80%;
  overflow-y: scroll;
  scrollbar-width: none;
  color: #9e000c;
}

/* object found  */

.object_found_container {
  background: rgba(158, 0, 12, 0.85);;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 35px;
  display: flex;
  justify-content: center;
  align-items:center;
}

/*@keyframes pop_obj_found {*/
/*  0% {*/
/*    max-height: 0;*/
/*    transform: translateY(40px) scale(0.5);*/
/*  }*/
/*  40% {*/
    /* max-height: 20px; */
/*    transform: translateY(-20px) scale(1);*/
/*  }*/
/*  80% {*/
    /* max-height: 500px; */
/*    transform: translateY(0) scale(1.1);*/
/*    overflow: initial;*/
/*  }*/
/*  100% {*/
/*    max-height: 500px;*/
/*    transform: translateY(0) scale(1);*/
/*    overflow: initial;*/
/*  }*/
/*}*/
@keyframes pop_obj_found {
  0% {
    max-height: 0;
    transform: translateY(40px) scale(0.5);
  }
  10% {
    transform: translateY(-20px) scale(1);
  }
  20% {
    transform: translateY(0) scale(1.1);
    overflow: initial;
  }
  25% {
    max-height: 500px;
    transform: translateY(0) scale(1);
    overflow: initial;
  }

  90% {
    transform: scale(1);
  }
  95% {
    transform: translateY(40px)scale(0.5);
  }
  100% {
    transform: translateY(40px)scale(0);
  }
}
.object_cont {
  max-width: calc(80% - 40px);
  max-height: calc(80% - 40px);
  position: relative;
  /*overflow: hidden;*/
  /* padding: 20px; */
  /* background-image: url(../img/inpuBoxt_image.png);
  border: 1px solid #720037;
  padding-left: 30px;
  scrollbar-width: none;
  background-repeat: repeat-y;
  background-color: #ffeec5;
  display: flex;
  align-items: center;
  transition: all ease-in-out;
  transition: max-height ease-in-out;
  animation: pop_obj_found 0.7s forwards;
  height: auto; */
}


@keyframes tooltip_anim {
    20% {
            transform: translateX(-70px);
    opacity: 0;
    }
    25% {
            transform: none;
    opacity: 1;
    }
    95% {
            transform: none;
    opacity: 1;
    }
    100% {
            transform: translateX(-70px);
    opacity: 0;
    }
}
@keyframes tooltip_anim_mobile {
    20% {
            transform: translateY(-70px);
    opacity: 0;
    }
    25% {
            transform: none;
    opacity: 1;
    }
    95% {
            transform: none;
    opacity: 1;
    }
    100% {
            transform: translateY(-70px);
    opacity: 0;
    }
}
span#toolTiptext {
    visibility: hidden;
    width: auto;
    background-color: #9e000c;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    z-index: 52;
    bottom: 35%;
    left: -145%;
    margin-left: -60px;
    opacity: 1;
    animation: tooltip_anim 5s forwards;
        transition: all 0.5s;
}
span#toolTiptext::after {
    height: 100%;
    width: 25px;
    background: #9e000c;
    z-index: 100;
    content: "";
    position: absolute;
    top: 0;
    right: -20px;
    clip-path: polygon(34% 0, 100% 50%, 34% 100%, 0 100%, 0 0);
}
.object_cont p {
  /* padding-left: 5px;
  padding: 20px;
  margin: 0;
   */
    padding: 20px;
    margin: auto;
    background-image: url(../img/objectfound_bottom_design.png);
    border: 1px solid #720037;
    padding-left: 36px;  
    scrollbar-width: none;
    /*background-repeat: repeat-y;*/
    background-color: #ffeec5;
    transition: max-height ease-in-out;
    animation: pop_obj_found 2s forwards;
    height:auto;

    width: calc(86% - 56px);
    text-align: center;
    font-family: 'm_light';
    font-weight: 200;
    color: #720037;
    
    padding: 25px 12px;
    border-radius: 20px;
    background-position: bottom;
    background-repeat: no-repeat;
    font-size: 1.5rem;
    padding: 2rem 1rem;
}
.share_screen {
  display: flex;
  list-style: none;
  border: 5px solid #e25b00;
  border-style: dotted;
  width: fit-content;
  margin: auto;
  flex-direction: column;
  padding: 10px 60px;
  background-color: #ffeec5;
}
.share_screen_text p {
  text-align: center;
  padding-bottom: 30px;
  padding-top: 20px;
    color: #9e000c;
 font-family: "m_light" !important;
    line-height: 1.4;
    font-size: 1.4rem;

}
.share_screen_container {
  background-color: rgba(158, 0, 12, 0.85);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items:center;
  border-radius: 33px;
  background-image: url(../img/back_stars_form.png);
    background-repeat: no-repeat;
    background-position: center;
}

ul.share p {
font-family: "m_light" !important;
    padding-left: 5px;
    color: #9e000c;
    font-size: 1.1rem;
    padding-right: 7px;
    /*text-transform: lowercase;*/
    padding: 0 15px;
}
/*@keyframes pop_obj_foundimg {*/
/*  0% {*/
/*    opacity: 1;*/
/*    transform: rotate(0deg);*/
/*  }*/
/*  10% {*/
/*    opacity: 1;*/
/*    transform: rotate(0deg);*/
/*  }*/
/*  20% {*/
/*    opacity: 1;*/
/*    transform: rotate(0deg);*/
/*  }*/
/*  30% {*/
/*    opacity: 1;*/
/*    transform: rotate(5deg);*/
/*  }*/
/*  35% {*/
/*    opacity: 1;*/
/*    transform: rotate(5deg);*/
/*  }*/
/*  45% {*/
/*    opacity: 1;*/
/*    transform: rotate(-15deg);*/
/*  }*/
/*  55% {*/
/*    opacity: 1;*/
/*    transform: rotate(5deg);*/
/*  }*/
/*  60% {*/
/*    opacity: 1;*/
/*    transform: rotate(5deg);*/
/*  }*/
/*  70% {*/
/*    opacity: 1;*/
/*    transform: rotate(-15deg);*/
/*  }*/
/*  80% {*/
/*    opacity: 1;*/
/*    transform: rotate(0deg);*/
/*  }*/
/*  85% {*/
/*    opacity: 1;*/
/*    transform: rotate(0deg);*/
/*  }*/
/*  100% {*/
/*    opacity: 1;*/
/*    transform: rotate(0deg);*/
/*  }*/
/*}*/

@keyframes pop_obj_foundimg {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }
  5% {
    opacity: 1;
    transform: rotate(0deg);
  }
  10% {
    opacity: 1;
    transform: rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: rotate(5deg);
  }
  30% {
    opacity: 1;
    transform: rotate(5deg);
  }
  37.5% {
    opacity: 1;
    transform: rotate(-15deg);
  }
  45% {
    opacity: 1;
    transform: rotate(5deg);
  }
  50% {
    opacity: 1;
    transform: rotate(5deg);
  }
  55% {
    opacity: 1;
    transform: rotate(-15deg);
  }
  65% {
    opacity: 1;
    transform: rotate(0deg);
  }
  70% {
    opacity: 1;
    transform: rotate(0deg);
  }
  75% {
    opacity: 1;
    transform: rotate(0deg);
  }

  
  90% {
    transform: scale(1);
  }
  95% {
    transform: translateY(40px)scale(0.5);
  }
  100% {
    transform: translateY(40px)scale(0);
  }
}

@keyframes huntcomplete_bg {
  0% {
    background: conic-gradient(
    #ac65ea 0deg 10deg, 
    #bf83ff 10deg 20deg,
    #ac65ea 20deg 30deg, 
    #bf83ff 30deg 40deg,
    #ac65ea 40deg 50deg,
    #bf83ff 50deg 60deg,
    #ac65ea 60deg 70deg,
    #bf83ff 70deg 80deg,
    #ac65ea 80deg 90deg,
    #bf83ff 90deg 100deg,
    #ac65ea 100deg 110deg,
    #bf83ff 110deg 120deg,
    #ac65ea 120deg 130deg,
    #bf83ff 130deg 140deg,
    #ac65ea 140deg 150deg,
    #bf83ff 150deg 160deg,
    #ac65ea 160deg 170deg,
    #bf83ff 170deg 180deg,
    #ac65ea 180deg 190deg,
    #bf83ff 190deg 200deg,
    #ac65ea 200deg 210deg,
    #bf83ff 210deg 220deg,
    #ac65ea 220deg 230deg,
    #bf83ff 230deg 240deg,
    #ac65ea 240deg 250deg,
    #bf83ff 250deg 260deg,
    #ac65ea 260deg 270deg,
    #bf83ff 270deg 280deg,
    #ac65ea 280deg 290deg,
    #bf83ff 290deg 300deg,
    #ac65ea 300deg 310deg,
    #bf83ff 310deg 320deg,
    #ac65ea 320deg 330deg,
    #bf83ff 330deg 340deg,
    #ac65ea 340deg 350deg,
    #bf83ff 350deg 360deg
);
  }
  20% {
    background: conic-gradient(
      #bf83ff 0deg 4deg,
    #ac65ea 4deg 14deg, 
    #bf83ff 14deg 24deg,
    #ac65ea 24deg 34deg, 
    #bf83ff 34deg 44deg,
    #ac65ea 44deg 54deg,
    #bf83ff 54deg 64deg,
    #ac65ea 64deg 74deg,
    #bf83ff 74deg 84deg,
    #ac65ea 84deg 94deg,
    #bf83ff 94deg 104deg,
    #ac65ea 104deg 114deg,
    #bf83ff 114deg 124deg,
    #ac65ea 124deg 134deg,
    #bf83ff 134deg 144deg,
    #ac65ea 144deg 154deg,
    #bf83ff 154deg 164deg,
    #ac65ea 164deg 174deg,
    #bf83ff 174deg 184deg,
    #ac65ea 184deg 194deg,
    #bf83ff 194deg 204deg,
    #ac65ea 204deg 214deg,
    #bf83ff 214deg 224deg,
    #ac65ea 224deg 234deg,
    #bf83ff 234deg 244deg,
    #ac65ea 244deg 254deg,
    #bf83ff 254deg 264deg,
    #ac65ea 264deg 274deg,
    #bf83ff 274deg 284deg,
    #ac65ea 284deg 294deg,
    #bf83ff 294deg 304deg,
    #ac65ea 304deg 314deg,
    #bf83ff 314deg 324deg,
    #ac65ea 324deg 334deg,
    #bf83ff 334deg 344deg,
    #ac65ea 344deg 354deg,
    #bf83ff 354deg 364deg
);

  }
  40% {
    background: conic-gradient(
      #bf83ff 0deg 8deg,
    #ac65ea 8deg 18deg, 
    #bf83ff 18deg 28deg,
    #ac65ea 28deg 38deg, 
    #bf83ff 38deg 48deg,
    #ac65ea 48deg 58deg,
    #bf83ff 58deg 68deg,
    #ac65ea 68deg 78deg,
    #bf83ff 78deg 88deg,
    #ac65ea 88deg 98deg,
    #bf83ff 98deg 108deg,
    #ac65ea 108deg 118deg,
    #bf83ff 118deg 128deg,
    #ac65ea 128deg 138deg,
    #bf83ff 138deg 148deg,
    #ac65ea 148deg 158deg,
    #bf83ff 158deg 168deg,
    #ac65ea 168deg 178deg,
    #bf83ff 178deg 188deg,
    #ac65ea 188deg 198deg,
    #bf83ff 198deg 208deg,
    #ac65ea 208deg 218deg,
    #bf83ff 218deg 228deg,
    #ac65ea 228deg 238deg,
    #bf83ff 238deg 248deg,
    #ac65ea 248deg 258deg,
    #bf83ff 258deg 268deg,
    #ac65ea 268deg 278deg,
    #bf83ff 278deg 288deg,
    #ac65ea 288deg 298deg,
    #bf83ff 298deg 308deg,
    #ac65ea 308deg 318deg,
    #bf83ff 318deg 328deg,
    #ac65ea 328deg 338deg,
    #bf83ff 338deg 348deg,
    #ac65ea 348deg 358deg,
    #bf83ff 358deg 368deg
);

  }
  60% {
    background: conic-gradient(
      #ac65ea 0deg 2deg, 
      #bf83ff 2deg 12deg,
    #ac65ea 12deg 22deg, 
    #bf83ff 22deg 32deg,
    #ac65ea 32deg 42deg, 
    #bf83ff 42deg 52deg,
    #ac65ea 52deg 62deg,
    #bf83ff 62deg 72deg,
    #ac65ea 72deg 82deg,
    #bf83ff 82deg 92deg,
    #ac65ea 92deg 102deg,
    #bf83ff 102deg 112deg,
    #ac65ea 112deg 122deg,
    #bf83ff 122deg 132deg,
    #ac65ea 132deg 142deg,
    #bf83ff 142deg 152deg,
    #ac65ea 152deg 162deg,
    #bf83ff 162deg 172deg,
    #ac65ea 172deg 182deg,
    #bf83ff 182deg 192deg,
    #ac65ea 192deg 202deg,
    #bf83ff 202deg 212deg,
    #ac65ea 212deg 222deg,
    #bf83ff 222deg 232deg,
    #ac65ea 232deg 242deg,
    #bf83ff 242deg 252deg,
    #ac65ea 252deg 262deg,
    #bf83ff 262deg 272deg,
    #ac65ea 272deg 282deg,
    #bf83ff 282deg 292deg,
    #ac65ea 292deg 302deg,
    #bf83ff 302deg 312deg,
    #ac65ea 312deg 322deg,
    #bf83ff 322deg 332deg,
    #ac65ea 332deg 342deg,
    #bf83ff 342deg 352deg,
    #ac65ea 352deg 362deg
);

  }
  80% {
    background: conic-gradient(
      #ac65ea 0deg 6deg, 
      #bf83ff 6deg 16deg,
    #ac65ea 16deg 26deg, 
    #bf83ff 26deg 36deg,
    #ac65ea 36deg 46deg, 
    #bf83ff 46deg 56deg,
    #ac65ea 56deg 66deg,
    #bf83ff 66deg 76deg,
    #ac65ea 76deg 86deg,
    #bf83ff 86deg 96deg,
    #ac65ea 96deg 106deg,
    #bf83ff 106deg 116deg,
    #ac65ea 116deg 126deg,
    #bf83ff 126deg 136deg,
    #ac65ea 136deg 146deg,
    #bf83ff 146deg 156deg,
    #ac65ea 156deg 166deg,
    #bf83ff 166deg 176deg,
    #ac65ea 176deg 186deg,
    #bf83ff 186deg 196deg,
    #ac65ea 196deg 206deg,
    #bf83ff 206deg 216deg,
    #ac65ea 216deg 226deg,
    #bf83ff 226deg 236deg,
    #ac65ea 236deg 246deg,
    #bf83ff 246deg 256deg,
    #ac65ea 256deg 266deg,
    #bf83ff 266deg 276deg,
    #ac65ea 276deg 286deg,
    #bf83ff 286deg 296deg,
    #ac65ea 296deg 306deg,
    #bf83ff 306deg 316deg,
    #ac65ea 316deg 326deg,
    #bf83ff 326deg 336deg,
    #ac65ea 336deg 346deg,
    #bf83ff 346deg 356deg,
    #ac65ea 356deg 366deg
);

  }
  100% {
    background: conic-gradient(
    #ac65ea 0deg 10deg, 
    #bf83ff 10deg 20deg,
    #ac65ea 20deg 30deg, 
    #bf83ff 30deg 40deg,
    #ac65ea 40deg 50deg,
    #bf83ff 50deg 60deg,
    #ac65ea 60deg 70deg,
    #bf83ff 70deg 80deg,
    #ac65ea 80deg 90deg,
    #bf83ff 90deg 100deg,
    #ac65ea 100deg 110deg,
    #bf83ff 110deg 120deg,
    #ac65ea 120deg 130deg,
    #bf83ff 130deg 140deg,
    #ac65ea 140deg 150deg,
    #bf83ff 150deg 160deg,
    #ac65ea 160deg 170deg,
    #bf83ff 170deg 180deg,
    #ac65ea 180deg 190deg,
    #bf83ff 190deg 200deg,
    #ac65ea 200deg 210deg,
    #bf83ff 210deg 220deg,
    #ac65ea 220deg 230deg,
    #bf83ff 230deg 240deg,
    #ac65ea 240deg 250deg,
    #bf83ff 250deg 260deg,
    #ac65ea 260deg 270deg,
    #bf83ff 270deg 280deg,
    #ac65ea 280deg 290deg,
    #bf83ff 290deg 300deg,
    #ac65ea 300deg 310deg,
    #bf83ff 310deg 320deg,
    #ac65ea 320deg 330deg,
    #bf83ff 330deg 340deg,
    #ac65ea 340deg 350deg,
    #bf83ff 350deg 360deg
);
  }
}
.object_cont img {
  /* width: 180px;
  height: auto;
  right: -110px;
  position: absolute; */
  /* animation: pop_obj_foundimg 2s forwards; */
  animation: pop_obj_found 2s forwards;
  max-width: 80%;
  max-height: 40vh;
  margin: auto;
    display: block;
    margin-bottom: 20px;
}

button.list_answer_button.found::after {
  background: #ac65ea;
}

/* form page   */
.form_container {
  /*background: rgba(0, 0, 0, 0.5);*/
  /*position: absolute;*/
  /*top: 0;*/
  /*left: 0;*/
  /*width: 100%;*/
  /*height: 100%;*/
  /*border-radius: 35px;*/
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items:center;*/
  background-color: rgba(158, 0, 12, 0.85);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../img/back_stars_form.png);
    background-repeat: no-repeat;
    background-position: center;
}
.form_cont {
  max-width: calc(90% - 40px);
  max-height: calc(90% - 40px);
  background: #ffeec5;
  padding: 20px;
  font-family: "game_dot" !important;
  border: 5px dotted #f4a903;
  width: 600px;
      overflow: scroll;
    scrollbar-width: none;
}
.form_cont.leaderboard_main_container {
    overflow: initial;
}
form {
  padding: 10px 0;
}

.form_item label {
    display: flex;
}
label {
  color: rgb(255, 238, 197);
  text-align: center;
  padding: 2px 5px;
}
/* input#fname {
  width: 100%;
  height: 25px;
  outline: none;
}
input#phone {
    height: 25px;
    outline: none;
    width:69%;
} */
ul.share {
  display: flex;
  justify-content: space-evenly;
  list-style: none;
}


/* leaderboard */


.form_cont.leaderboard_main_container{
  margin: auto;
  background: #ffedc5;
  border: 3px dotted #e36616;
  padding: 20px;
  position: relative;
  }
  .form_cont.leaderboard_main_container::before{
  content: "";
  background-image: url(../img/background_border.png);
  position: absolute;
  top: -11px;
  width: 98%;
  height: 6px;
  left: 0px;
  margin: 0px 5px;
  background-repeat: repeat-x;
  transform: rotate(180deg);
  }
  
  .form_cont.leaderboard_main_container::after {
    content: "";
    background-image: url(../img/background_border.png);
    position: absolute;
    bottom: -11px;
    width: 98%;
    height: 6px;
    left: 0px;
    margin: 0px 5px;
    background-repeat: repeat-x;
  }
  .leaderboard_container h1 {
    text-align: center;
    font-family: 'game_dot';
    font-size: 3rem;
    color: #9e000c;
    padding: 1.5rem;
    margin: 0;
  }
  
  .leaderboard_best_times {
    display: grid;
    grid-template-columns: 47% 47%;
    gap: 0 6%;
    justify-content: center;
    width: 100%;
  }
  
  .leaderboard_best_times p {
    font-size: 1.5rem;
    display: flex;
    background: #e25b00;
    align-items: center;
    color: #ffeec5;
    font-family: 'm_reg';
    font-weight: 300;
    margin: 1rem;
    justify-content: space-between;
    padding-left: 1rem;
    border-radius: 20px;
    white-space: nowrap;
  }
  .leaderboard_best_times span.best_time {
    background-color: #9e000c;
    padding: 1rem;
    font-family: 'game_dot';
    font-size: 1.5rem;
    border-radius: 20px;
    margin-left: 1rem;
  }
  .form_cont.leaderboard_main_container {
    width: 930px;
    margin: 80%;
    min-width: 700px;
  }

  span.error {
    color: red;
   padding: 0px 5% 10px 5%;
    display: block;
    font-size: 0.8rem;
    line-height: 1.4;
}


/* leaderboard */





#main_image_canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 35px;
  touch-action: none;
  min-width: 100%;
  min-height: 100%;
}
/* #main_image_canvas {
  position: absolute;
  border-radius: 35px;
  touch-action: none;
}
.interactive-grid {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 35px;
} */

.fa svg {
    max-width: 80%;
    max-height: 80%;
    fill: #fff;
        width: 80%;
    height: 80%;
}
svg.icon {
  margin: 0 auto;
  height: 25px;
  min-width: 20px;
  min-height: 20px;
  width: 25px;
}


.form_container {
  /*background: rgba(0, 0, 0, 0.5);*/
  /*background: rgba(158, 0, 12, 0.85);*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 35px;
  display: flex;
  justify-content: center;
  align-items:center;
}
.form_cont {
  max-width: calc(90% - 40px);
  max-height: calc(90% - 40px);
  background: #ffeec5;
  padding: 20px;
  font-family: "game_dot" !important;
  /*border: 4px dotted #f4a903;*/
          border: 4px dotted #e36616;
  width: 600px;
}
form {
  padding: 10px 0;
}
form p {
  TEXT-ALIGN: center;
  padding-bottom: 20px;
  color: #9e000c;
  font-family: 'game_dot';
  font-size: larger;
  line-height: 1.7;
  text-transform: uppercase;
  margin: 0;
}
.form_item {
  display: flex;
  width: 90%;
  margin: 5px 0;
  padding: 0 5%;
     justify-content: stretch;
}
.form_item label {
  background: #9e000c;
  padding: 3px;
  line-height: 1;
  color: #fff;
  display: inline-flex;
  font-size: 16px;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  font-family: 'm_reg';
}
input {
  width: 100%;
  border: 2px solid #9e000c;
  padding: 6px 12px;
  font-size: 16px;
}
button.Submit {
  color: rgb(255, 238, 197);
  font-size: 18px;
  background-color: #ec1c24;
  border: 1px solid #ec1c24;
  padding: 5px 15px;
  border-radius: 8px;
  font-family: 'm_reg';
  display: block;
  margin: auto;
  margin-top: 12px;
  cursor: pointer;
}
span.asterisk {
  padding-left: 2px;
}
.form_item label {
  background: #9e000c;
  padding: 0 10px;
  line-height: 1;
  color: #fff;
  display: inline-flex;
  font-size: 18px;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  font-family: 'm_light';
}

ul.share {
  display: flex;
  list-style: none;
  align-items: center;
  border: 2px solid #9e000e;
  width: fit-content;
  padding: 0px 5px;
  border-radius: 35px;
  margin: 0 auto;
}
ul.share li .fa {
  padding: 8px;
  text-align: center;
  text-decoration: none;
  margin: 5px 5px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form_item ul.share {
  margin: 0;
  padding: 0;
      border: none;
}


.form_item ul.share li .fa {
  width: 15px;
    height: 15px;
    margin: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 4px;
}

ul.share li .fa:hover {
    opacity: 0.7;
}
ul.share li .fa-facebook {
  background: #3B5998;
  color: white;
}
ul.share li .fa-whatsapp {
  background: #0ee932;
  color: white;
}
ul.share li .fa-instagram {
  background: #f40083;
  color: white;
}

ul.share li .fa-clipboard {
  background: #07a012;
}


#main_image_canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 35px;
  touch-action: none;
  min-width: 100%;
  min-height: 100%;
   -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    outline: none !important;
    background: #ffeec5 !important;
    background-color: #ffeec5 !important;
}
#main_image_canvas:focus {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    outline: none !important;
    background: #ffeec5 !important;
    background-color: #ffeec5 !important;
}
#main_image_canvas:focus-visible {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    outline: none !important;
    background: #ffeec5 !important;
    background-color: #ffeec5 !important;
}
#main_image_canvas:hover {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    outline: none !important;
    background: #ffeec5 !important;
    background-color: #ffeec5 !important;

}
/* #main_image_canvas {
  position: absolute;
  border-radius: 35px;
  touch-action: none;
}
.interactive-grid {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 35px;
} */

svg.icon {
  margin: 0 auto;
  height: 25px;
  min-width: 20px;
  min-height: 20px;
  width: 25px;
}
/* 
WON PAGE
*/

@keyframes popforwin {
  0% {
    transform: translateY(40px)  scale(0.9);
  }
  5% {
    transform: scale(1.1);
  }
  10% {
    transform: scale(1);
  }
/* before 15% */

  /* after 90% */
  93.33% {
    transform: scale(1);
  }
  96.66% {
    transform: translateY(40px) scale(0.5);
  }
  100% {
    transform: translateY(40px)  scale(0);
  }
}

.won_container {
  /*background: rgba(0, 0, 0, 0.5);*/
  background: rgba(158, 0, 12, 0.85);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 33px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.won_cont {
  width: 1220px;
  max-width: 80%;
  /* background-image: url(../img/Hunt-Completed.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%; */
  height: 100%;
  display: flex;
  position: relative;
  animation: popforwin 3s forwards;
}

.won_text {
  max-width: calc(60% - 80px);
  height: fit-content;
  margin: auto;
  animation: huntcomplete_bg 2s infinite;
  transition: all 0.1s;
  width: 60%;
  position: relative;
}
.won_content_start {
  padding: 65px 40px;
      border: 3px dotted #e25b00;
}

.won_text p {
  background: #ffeec5;
    padding: 15px 30px;
    border-radius: 15px;
    color: #720037;
    font-size: 2rem;
    text-align: center;
    z-index: 5;
    position: relative;
    margin: auto;
    font-family: 'game_dot';
    text-shadow: 0 0 5px #720037;
}

.won_text p img {
        display: block;
    height: 45px;
    width: auto;
    margin: auto;
}
.won_cont span#timeLeft {
  font-family: 'game_dot';
}
.won_text span#time_finished {
      background: #9e000c;
    color: #fff;
    padding: 15px;
    margin: auto;
    display: block;
    width: fit-content;
    border-radius: 10px;
    padding-top: 110px;
    margin-top: -95px;
    font-size: 25px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.won_text span#time_finished::after {
  content: "";
  position: absolute;
  width: calc(100% - 10px);
  height: 15px;
  background: #9e000c;
  top: 10px;
  left: 5px;
  border-radius: 6px;
  z-index: 5;
}
.win_additionalscreens {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  background-image: url(../img/upperstar_Hunt-Completed.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
}
.win_additionalscreens::before {
  content: "";
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  background-image: url(../img/innerstar_Hunt-Completed.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
}
.win_additionalscreens::after {
  content: "";
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  background-image: url(../img/outerstar_Hunt-Completed.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
}
@media(min-width: 1920px) {
  #top_logo {
    width: 20vw;
    max-width: 20vw;
    top: -55px;
  }
  .interactive-image-container {
    margin: 35px 0;
    margin-top: 55px;
  }
 
#layerstart {
  background-position: bottom;
}
.timer {
  margin: 0;
  margin-bottom: 80px;
}
.completion_counter p {
  font-size: 16px;
}
.times {
  font-size: 1.5vw;
}
.MINUTES_inwords {
  font-size: .8vw;
  text-transform: lowercase;
}
.completion_counter {
  max-width: 250px;
  margin: auto;
}
.answer, .timer {
  min-width: 98%;
}
.outer-container {
  max-width: calc(10% - 37px);
  justify-content: flex-start;
}

button.list_answer_button {
  width: calc(100% - 30px);
  height: auto;
  aspect-ratio: 1 / 1;
}
li.listitem {
  list-style: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
div#answer-1 p.obj_heading {
  margin: 0;
}

div#answer-1 {
  width: 100%;
}
ul#answer_list {
  width: 100%;
  padding: 0;
  margin: 0;
  gap: 3%;
  display: grid;
}
button.list_answer_button img {
  width: 80%;
  height: 80%;
}
.form_item label {
  padding: 0 9px;
}
span.asterisk {
  padding-left: 7px;
}
.form_cont {
          border: 4px dotted #e36616;
}
}
 /*=============== HOME SCREEN ===================*/
@media(max-width: 1900px) {
    /*#border_round_lights {height: 110px;background-size: contain; background-position: top center;}*/
    .festive-hunt_backgroundimage {width: 250px;}
    .festive-hunt_image {height: calc(100vh + 50px);}
    button#btn_Play {padding: 10px 20px; font-size: 26px;}
    button#btn_How_to_Play {margin: 10px auto;padding: 4px 13px;font-size: 11px;}
    .festive-hunt_image p {font-size: 12px;}
    
    #border_round_lights {width: 65%;background-size: contain; background-position: top center;}
    
    button.T\&C.Apply {font-size: 0.8rem;
    height: 1.5rem;}
    
    div#answer-1 p.obj_heading {font-size: 1.25rem;}
    
    .festive-hunt_backgroundimage {width: 60%;}
    .layerhowto_main {margin-bottom: auto;}
    div#main-timer {margin: 0;margin-bottom: 40px;}
div#answer-1, .all_answers, div#main-timer {max-width: 110px;}
.hint_box p {font-size: 15px;}
.won_text span#time_finished {padding-top: 95px;margin-top: -80px;}
.won_text p img {height: 30px;}
    .share_screen {margin-bottom: auto;}
div#answer-1, .all_answers, div#main-timer, .outer-container {max-width: 100px;}
li.listitem {width: 100px;margin-bottom: 6%;}
button.list_answer_button {height: 80px;width: 80px;margin: 10px;}
button.list_answer_button img {width: 95%;height: 95%;margin: auto;display: block;}
.leaderboard_best_times p {font-size: 1.3rem;margin: 15px;width: 88%;}
.object_cont { width: 400px;}
span#toolTiptext {left: -170%;}
.completion_counter p, .MINUTES_inwords {font-size: 15px;}
}


@media (max-width: 1600px) {
    .festive-hunt_image {
        height: calc(100vh + 0px);
    }
    span#toolTiptext {
    /*bottom: 20px;*/
            left: -130%;
    font-size: 0.8rem;
}
}
@media (max-width: 1400px) and (min-width: 1200px){
    
.layerhowto_main h1 {padding-bottom: 0px;font-size: 2rem;}
.howto_container {gap: 10px;}
.layerhowto_main {margin-bottom: 100px;}
.single_howto p { margin: 0;}
button.T\&C.Apply {font-size: 12px;}
div#answer-1 p.obj_heading {font-size: 16px;}
button.list_answer_button { height: 80px;  width: 80px;}
button.list_answer_button img { width: 60px; height: 60px;}
#top_logo {top: -38px; width: 300px;}
.form_item label {  font-size: 15px;}
#userDetailsForm input {padding: 5px 12px;}
.form_cont {  margin-bottom: -80px;}
.share_screen {margin-bottom: 40px;}


div#answer-1, .all_answers, div#main-timer {max-width: 100px;}
li.listitem {width: 90px;}
button.list_answer_button {height: 60px;width: 60px;}
button.list_answer_button img {width: 95%;height: 95%;margin: auto;display: block;}
}

 /*=============== END HOME SCREEN ===================*/
 
 
 
 @media (min-height: 1080px) {
  .all_answers {
    height: 100%;
}   
 }
 

/*@media(min-width: 3000px) {*/
/*  #top_logo {*/
/*    width: 18vw;*/
/*    max-width: 18vw;*/
/*  }*/
/*  .form_item label {*/
/*    font-size: 1vw;*/
/*    padding: 0.5vw 1vw;*/
/*}*/
/*form p {*/
/*  font-size: 1vw;*/
/*}*/
/*.form_cont {*/
/*  width: 1200px;*/
/*}*/
/*.form_cont input {*/
/*    font-size: 2.5rem;*/
/*}*/
/*button.Submit {*/
/*  font-size: 1vw;*/
/*}*/
/*.form_item {*/
/*  margin: 25px 0;*/
/*}*/
/*  svg.icon {*/
/*    margin: 0 auto;*/
/*    height: 45px;*/
/*    min-width: 40px;*/
/*    min-height: 40px;*/
/*    width: 45px;*/
/*  }*/
/*  .mute-container button, .zoom-in-out-container button , .zoom-in-out-container button{*/
/*    width: 61px;*/
/*    height: 61px;*/
/*  }*/
/*  .layerhowto_main h1 {*/
/*    font-size: 2vw;*/
/*  }*/
/*  .layerhowto_main {*/
/*    padding: 20px 2vw;*/
/*    position: relative;*/
/*}*/
/*  .howto_container {*/
/*    justify-content: space-evenly;*/
/*    width: 1400px;*/
/*}*/
/*.single_howto p {*/
/*  font-size: 1vw;*/
/*}*/
/*  .interactive-image-container {*/
/*    margin-bottom: 5vh;*/
/*  }*/
/*  button.T\&C.Apply {*/
/*    font-size: 1vw;*/
/*    bottom: 45px;*/
/*    height: auto;*/
/*    padding: 8px;*/
/*  }*/
/*  .outer-container {*/
/*    width: 500px;*/
/*    padding: 30px 10px;*/
/*    max-width: calc(10% - 60px);*/
/*}*/
/*.festive-hunt_backgroundimage::before, .layerhowto_main::before {*/
/*  top: -24px;*/
/*  height: 15px;*/
/*  background-size: auto 100%;*/
/*}*/
/*.festive-hunt_backgroundimage::after, .layerhowto_main::after {*/
/*  bottom: -24px;*/
/*  height: 15px;*/
/*  background-size: auto 100%;*/
/*}*/
/*#border_round_lights {*/
  /*max-height: 260px;*/
  /*height: 260px;*/
  /*height: 100%;*/
/*}*/
/*.festive-hunt_image {*/
/*  margin-top: 90px;*/
/*}*/
/*.festive-hunt_image p {*/
/*  font-size: 1vw;*/
/*  padding: 1vw;*/
/*}*/
/*button#btn_Play {*/
/*  font-size: 2vw;*/
/*  padding: 0.5vw;*/
/*}*/
/*button#btn_How_to_Play {*/
/*  font-size: 0.8vw;*/
/*  margin: 1.5vw auto;*/
/*}*/
/*#layerstart {*/
/*  background-position: initial;*/
/*}*/
/*.festive-hunt_backgroundimage {*/
/*  min-width: 22vw;*/
/*  padding: 3vw;*/
/*}*/
/*.timer {*/
/*  margin: 0;*/
/*  margin-bottom: 40px;*/
/*}*/
/*.completion_counter p {*/
/*  font-size: 1vw;*/
/*}*/
/*.times {*/
/*  font-size: 1.75vw;*/
/*}*/
/*.MINUTES_inwords {*/
/*  font-size: 1vw;*/
/*  text-transform: lowercase;*/
/*}*/
/*.completion_counter {*/
/*  max-width: 250px;*/
/*  margin: auto;*/
/*}*/
/*.answer, .timer {*/
/*  min-width: 98%;*/
/*}*/
/*.outer-container {*/
/*  max-width: calc(10% - 37px);*/
/*  justify-content: flex-start;*/
/*}*/

/*button.list_answer_button {*/
/*  width: calc(100% - 80px);*/
/*  height: auto;*/
/*  aspect-ratio: 1 / 1;*/
/*}*/
/*li.listitem {*/
/*  list-style: none;*/
/*  width: 100%;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*}*/
/*div#answer-1 p.obj_heading {*/
/*color: #9e000c;*/
/*font-family: 'm_light' !important;*/
/*text-align: center;*/
/*font-weight: 600;*/
/*font-size: 1.25vw;*/
/*margin: 35px 0;*/
/*margin-bottom: 10px;*/
/*}*/
/*div#answer-1 {*/
/*  width: 100%;*/
/*}*/
/*ul#answer_list {*/
/*  width: 100%;*/
/*  padding: 0;*/
/*  margin: 0;*/
/*  gap: 5%;*/
/*  display: grid;*/
/*}*/
/*button.list_answer_button img {*/
/*  width: 80%;*/
/*  height: 80%;*/
/*}*/
/*.object_cont p {*/
/*  font-size: 1vw;*/
/*}*/
/*.hint_box p {*/
/*  font-size: 1vw;*/
/*}*/
/*}*/


@media (max-width: 1199px) {
  #layerstart, #layerhowto {
      top: 36px;
      left: 18px;
      width: calc(100% - 36px);
      height: calc(100% - 54px);
  }
  button.T\&C.Apply {
    height: 30px;
    bottom: 0px;
    left: 40px;
    position: absolute;
    background-color: #e82429;
    border: none;
    padding: 0px 12px;
    color: #ffeec5;
    border-radius: 6px;
    cursor: pointer;
}
/*.times {*/
/*      scale: 0.75;*/
/*}*/
}
@media(max-width: 1050px) {
  .howto_container {
    flex-wrap: wrap;
    justify-content: center;
    max-height: 50vh;
    overflow: scroll;
    scrollbar-width: none;
}
  .single_howto {
    width: 50%;
    max-width: calc(50% - 55px);
}
}


@media(max-width: 767px) {
  #layermain.showing {
    flex-direction: column;
}
.interactive-image-container {
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
  height: calc(100% - 152px);
  max-height: calc(100% - 152px);
  margin: 15px 10px;
}
.outer-container {
  height: 170px;
  max-width: calc(100% - 20px);
  align-items: center;
  width: calc(100% - 20px);
  /* flex-direction: row; */
  margin: 10px;
  padding: 0;
}
div#main-timer {
  max-width: calc(100vw - 60px);
  width: calc(100vw - 60px);
  display: flex;
  height: 50px;
  overflow: hidden;
  padding: 0 9px;
  margin: 0;
  justify-content: space-between;
  align-items: center;
}
div#main-timer span  {
  display: block;
  padding: 3px 0;
  padding-left: 15px;
  text-align: center;
}
.answer_info {
  margin: 0;
}
.completion_counter {
  margin: 0;
  padding: 7px;
  flex-direction: row;
  align-items: center;
}

.share_screen {
  padding: 12px 6px;
}

.answers_object {
  padding: 0;
}
.answers_object ul li {
  padding: 0;
  flex: 0 0 100px;
}
.all_answers {
  max-height: fit-content;
  scrollbar-width: none;
  overflow-y: hidden;
  height: 90px;
  max-width: 100%;
}
.hint_box {
  padding: 3px 7px;
}
.hint_box p {
  font-size: 12px;
}
ul.answer_list {
  display: flex;
  padding: 0;
  max-height: 90px;
}
li.listitem {
  width: 100%;
  list-style: none;
}
button.list_answer_button {
  margin: 10px !important;
  max-height: 70px;
  max-width: 70px;
  width: 70px;
  height: 70px;
}
button.list_answer_button img {
  width: 60px;
  height: 60px;
}

p.obj_heading {
  display: none;
}
.outer-container p {
  margin: 0;
  padding: 0;
}
p.Leaderboard {
  margin: 0;
  padding: 5px;
  height: fit-content;
}
#layerstart,#layerhowto {
  top: 18px;
  left: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
}
#border_round_lights {
  background-size: 100%;
  height: 100px;
  max-height: 100px;
}
.festive-hunt_backgroundimage {
  background-image: url(../img/background_festive_hunt.png);
  padding: 20px;
  width: 400px;
}
#border_round_lights {
  height: 100px;
  max-height: 100px;
          top: 18px;
        width: 100%;
}
button#btn_How_to_Play {
  display: block;
  margin: 4px auto;
  padding: 4px 13px;
  font-size: 15px;
  color: #fff;
  background-color: #e82429;
  border: 2px solid #e82429;
  border-radius: 11px;
  text-decoration: none;
  cursor: pointer;
  font-family: 'm_reg' !important;
}
.layerhowto_main #btn_How_to_Play {
          margin-top: 30px;
}
.leaderboard_best_times {
    display: block;
    width: 100%;
}
.leaderboard_best_times p {
    font-size: 1.2rem;
    margin: 10px;
    height: 50px;
}
.leaderboard_best_times span.best_time {
   
    padding: 10px 20px;
    font-size: 1.5rem;
    height: 30px;
    line-height: 30px;
}
.leaderboard_container h1 {
   
    font-size: 2rem;
    padding: 1rem;
}
.form_cont.leaderboard_main_container {
    margin-bottom: 66%;
}
div#answer-1 {
    padding-bottom: 5px !important;
}
}


@media(max-width: 580px) {
    #no_winner_box .no_winner_cont {
    width: 70%;
    }
    #no_winner_box .no_winner_cont p {
    font-size: 1rem;
    }
  .single_howto {
    width: 100%;
    max-width: calc(100% - 55px);
}
#top_logo {
  width: 150px;
  max-width: 150px;
}
}
.won_container ,.form_container,.object_found_container,.share_screen_container{
  display:none;
}
canvas {
  cursor: pointer;
}

@media(max-width: 350px) {

.howto_container {
  display: flex;
  max-width: calc(100vw - 91px);
  width: 917px;
  gap: 10px;
  justify-content: space-around;
}
div#main-timer span.times {
  display: block;
  padding: 3px 5px;
  padding-left: 5px;
  text-align: center;
  padding-right: 0px;
}
div#main-timer span {
  display: block;
  padding: 3px 0px;
  text-align: center;
}
}
#userDetailsForm input{padding: 10px 12px;  background: transparent;border-radius: 0 !important;outline: none !important;margin: 0;}
#userDetailsForm input:focus-visible {
  border: 2px solid #9e000c;
}

span.fbinstainfo {
    font-family: 'm_light';
    font-size: 14px;
    color: red;
    padding-left: 5%;
}

@media(min-width: 2000px) {
    .festive-hunt_backgroundimage { width: 750px;padding: 4rem;}
    .festive-hunt_image p {font-size: 2rem;padding: 3rem 0;}
    button#btn_Play {font-size: 4rem;}
    button#btn_How_to_Play {font-size: 1.6rem;margin: 2.5rem auto;}
    .howto_container { width: 900px;}
    .single_howto p { font-size: 30px;}
    .layerhowto_main h1 { font-size: 3.5rem;}
    .outer-container { width: 150px; max-width: 150px;padding-bottom: 1.5rem;padding-top: 3.5rem;}
    .hint_box p {font-size: 1.8rem; max-width: 700px;}
    .hint_box p b { width: 70px;}
    .object_cont p {font-size: 1.8rem;}
    .form_cont {width: 900px;}
    .form_cont {font-size: 1.8rem;}
    .form_item label, input, .share_screen_text p, ul.share p, button.T\&C.Apply, button.Submit {font-size: 1.8rem;}
    p.obj_heading {font-size: 2rem !important;margin-bottom: 30px !important;}
    div#answer-1 p.obj_heading, .MINUTES_inwords, .completion_counter p {font-size: 1.5rem !important;}
        div#answer-1 p.obj_heading {font-size: 2rem !important;}
        .times {font-size: 2.25rem;}
    .form_item {margin: 1rem 0;}
    .form_container, .share_screen_container {background-size: 1600px;}
    form p {
        font-size: 1.7rem;
    }
    .object_cont p {
    padding: 2.5rem;
    border-radius: 2rem;
}
    
    .won_cont {
    width: 1650px;
}
    .won_text span#time_finished {
    padding-top: 140px;
    margin-top: -120px;
    font-size: 2.5rem;
}
.won_text p img {
    height: 70px;
}
ul.share li .fa {
    font-size: 40px;
    width: 50px;
    height: 50px;
}
.form_item ul.share li .fa {
  width: 25px;
  height: 25px;
}
ul.share {
    border-radius: 50px;
}

    .timer {
        margin-bottom: auto;
    }
.answers_object {
    margin-bottom: 100px;
}
.all_answers {
        height: fit-content;
        /*overflow: visible;*/
    }
    button.T\&C.Apply {
        height: 2.25rem;
    }
    #terms_box .terms_cont ol li {
    font-size: 1.75rem;
}
.won_text {
    max-width: calc(80% - 80px);
    width: auto;
}
svg.icon {
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    width: 3rem;
}
.mute-container button, .zoom-in-out-container button {
    width: 4rem;
    height: 4rem;
}

.form_cont.leaderboard_main_container {min-width: 950px;}
.leaderboard_best_times p {font-size: 2rem;}
.leaderboard_best_times span.best_time {font-size: 2rem;}
span#toolTiptext {font-size: 1.25rem;}

span.fbinstainfo {font-size: 1.5rem;}
#no_winner_box .no_winner {width: 1500px;}
#no_winner_close {width: 4rem;height: 4rem;}
}

/*@media only screen and (min-width: 2000px) and (max-height: 1300px) {*/
/*    ul#answer_list {*/
/*    max-height: calc(100vh - 400px);*/
/*    overflow-y: scroll;*/
/*    overflow-x: hidden;*/
/*}*/
/*}*/

@media(min-width: 3200px) {
    .festive-hunt_backgroundimage { width: 1200px;padding: 6.5rem 4rem;}
    #border_round_lights {height: 350px;}
    .festive-hunt_image p {font-size: 3rem;padding: 4rem 0;}
    button#btn_Play {font-size: 6rem;}
    button#btn_How_to_Play {font-size: 2.6rem;margin: 3.5rem auto;}
    .howto_container { width: 1200px;}
    .single_howto p { font-size: 38px;}
    .layerhowto_main h1 { font-size: 4.5rem;}
    .outer-container { width: 225px; max-width: 225px;padding-bottom: 3rem;}
    .hint_box p {font-size: 2.5rem; max-width: 1000px;}
    .hint_box p b { width: 120px;}
    .object_cont p {font-size: 2.8rem;}
    .form_cont {width: 1250px;}
    .form_cont {font-size: 2.25rem;}
    .form_item label, input, .share_screen_text p, ul.share p, button.T\&C.Apply, button.Submit {font-size: 2.5rem;}
    div#answer-1 p.obj_heading, .MINUTES_inwords, .completion_counter p {font-size: 2.25rem !important;}
    div#answer-1 p.obj_heading {font-size: 3rem !important;}
        .times {font-size: 3.25rem;}
    .form_item {margin: 2rem 0;}
    .form_container, .share_screen_container {background-size: 2200px;}
        form p {
        font-size: 2.5rem;
    }
    button.list_answer_button {width: calc(100% - 50px);margin: 25px;}
        li.listitem {
        margin-bottom: 3rem;
    }
    
    .won_cont {
    width: 2150px;
}
    .won_text span#time_finished {
    padding-top: 215px;
        margin-top: -185px;
        font-size: 4rem;
        gap: 1rem;
}
.won_text p img {
    height: 120px;
}
ul.share li .fa {
    font-size: 55px;
    width: 70px;
    height: 70px;
}
.form_item ul.share li .fa {
  width: 35px;
  height: 35px;
}
ul.share {
    border-radius: 70px;
}

    .timer {
        margin-bottom: auto;
    }
.answers_object {
    margin-bottom: 100px;
}
.all_answers {
        height: fit-content;
        /*overflow: visible;*/
    }
    button.T\&C.Apply {
        height: 3.25rem;
    }
    #terms_box .terms_cont ol li {
    font-size: 2.5rem;
}
.won_text {
    max-width: calc(80% - 80px);
    width: auto;
}
.won_content_start {
    padding: 7rem;
}
svg.icon {
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    width: 3rem;
}
.mute-container button, .zoom-in-out-container button {
    width: 4rem;
    height: 4rem;
}
span.error {  font-size: 2rem;}
    .form_cont.leaderboard_main_container {
        min-width: 1250px;
    }
    .leaderboard_container h1 {
    font-size: 4rem;
}
    .leaderboard_best_times p {
        font-size: 3rem;
    }
        .leaderboard_best_times span.best_time {
        font-size: 3rem;
    }
    span#toolTiptext {font-size: 1.8rem;}
    span.fbinstainfo {font-size: 2.5rem;}
#no_winner_close {width: 7rem;height: 7rem;right: -5rem;}
}

@media only screen and (min-width: 1900px) and (max-height: 2000px) {
    .form_cont.leaderboard_main_container {min-width: 950px;}
.leaderboard_best_times p {font-size: 2rem;}
.leaderboard_best_times span.best_time {font-size: 2rem;}
}

/*for devices lower than 1440px px */
/*for devices lower than 1440px px */
/*for devices lower than 1440px px */

/*@media (max-width: 1440px) {*/
/*    .festive-hunt_backgroundimage {width: 60%;}*/
/*    .layerhowto_main {margin-bottom: auto;}*/
/*    div#main-timer {margin: 0;margin-bottom: 40px;}*/
/*div#answer-1, .all_answers, div#main-timer {max-width: 110px;}*/
/*.hint_box p {font-size: 15px;}*/
/*.won_text span#time_finished {padding-top: 95px;margin-top: -80px;}*/
/*.won_text p img {height: 30px;}*/
/*    .share_screen {margin-bottom: auto;}*/
/*}*/
















@media (max-width: 1300px) {
    .won_text {max-width: calc(75% - 80px);width: 75%;}
    .win_additionalscreens {top: -20px !important;}
    #terms_box h1{font-size: 2rem;}
    #terms_box h4{font-size: 1.5rem;}
    #terms_box .terms_cont ol li {font-size: 0.8rem;}
}
@media (max-width: 1199px) {
        button.list_answer_button {margin: 10px 5px !important;}
}


@media (max-width: 1024px) {
    .form_cont.leaderboard_main_container {
                min-width: 70%;
        width: fit-content;
}
    .leaderboard_best_times {
        display: block;
        width: 100%;
    }
    
    .won_text {width: 90%;max-width: 90%;}
    .won_text p img {height: 75px;}
        .won_text span#time_finished {padding-top: 140px;margin-top: -120px;}
        .win_additionalscreens {top: -50px !important;}
}

@media (max-width:767px){
.single_howto p { margin: 0;}
.howto_container {margin: 0 auto;}
button.T\&C.Apply {width: 90px;left: 0;right: 0; margin: 0 auto;}
.festive-hunt_backgroundimage { max-width: 50vw;}
div#answer-1, .all_answers, div#main-timer {max-width: 100%;    }
.all_answers {overflow-x: auto;}
div#main-timer {margin-bottom: 0px;}
button.T\&C.Apply { bottom: 0px;        z-index: 99;          height: 17px;       font-size: 11px;}
.completion_counter {    border-radius: 10px;     margin-left: auto !important;}
/*.main_hint_container { transform: none !important; margin: 0 auto;right: 0; left: 0;transform: translateX(0%) !important;max-width: fit-content;}*/   
.main_hint_container.active {
    animation: popmobile 6s forwards;
}

button.list_answer_button {
  margin: 10px !important;
}
    .main_hint_container {
        margin: 0 auto;
        right: 0;
        left: 0;
        max-width: 90%;
    }

.interactive-image-container {margin: 15px 10px 0px;}
#terms_box .terms_cont {
    width: 80%;
    height: 55%;
    background: #ffeec5;
    padding: 10px;
    border-radius: 20px;
    border: 4px dotted #e36616;
}
span#countPopupDiv {    display: inline;}

#terms_box h1 {
    font-size: 1.25rem;line-height: 1.4;}
    #terms_box h4 {font-size: 1rem;}
    #terms_box .terms_cont ol li {
    padding-bottom: 15px;
    font-size: 14px;}
    #terms_box .terms_cont ol  {padding-left: 30px;    max-height: 85%;}
    form#userDetailsForm p {font-size: 15px;}
    .share_screen_text p { font-size: 1.1rem;}
    .share_screen_text p br{display: none;}
    button.Submit {font-size: 14px}
    
    .won_text {
    max-width: calc(100% - 0px);
    width: 100%;
    margin-bottom: 50px;
}
.won_content_start {
    padding: 65px 0px;
}
.won_text p {
        width: calc(85% - 40px);
    padding: 20px;
}
    .won_text p img {   max-width: 100%;    height: 60px;
    }
     .won_text span#time_finished {
        padding-top: 125px;
        margin-top: -115px;
        font-size: 18px;
    }
.completion_counter p {font-size: 11px;line-height: 1;
}
.MINUTES_inwords {font-size: 11px;line-height: 1;}
.times { font-size: 14px;}
div#main-timer span { padding-left: 5px;}
div#answer-1 {
    position: relative;
    width: 100%;
}
  div#answer-1  p.obj_heading {
        display: block;
        position: absolute;
        top: -30px;
        left: 0;
        font-size: 14px !important;
    }
    .layerhowto_main h1 {
   font-size: 2rem;
}

.zoom-in-out-container button, .mute-container button {
  
    line-height: 35px;
    display: flex;
    align-items: center;
    margin: 12px;
    cursor: pointer;
    justify-content: center;
    text-align: center;
}
.win_additionalscreens::before{display: none;}
/*.win_additionalscreens::after {*/
/*    background-image: url(../img/start_mobile-min.png);*/
/*}*/
    button.list_answer_button {
        width: 55px;
        height: 55px;
                text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;padding-left: 12px;
    }
        button.list_answer_button img {
        width: 45px;
        height: 45px;        margin: 0 auto;
    }
.answers_object ul li {
        flex: 0 0 70px;
    }
        ul.answer_list {
        margin-left: -6px;
    }
        .outer-container {
        height: 120px;}
        .form_item label {font-size: 13px;border-radius: 0px;}
        .win_additionalscreens {
    background-size: auto;
    z-index: 9;
    top: 60px !important;
}
#userDetailsForm input {
    padding: 4px;font-size: 16px;}
    .form_item {
    margin: 2px 0;
            border-radius: 0px;
}
.form_cont { padding: 10px 10px}
    .completion_counter {margin: 0;padding: 3px 7px;margin-bottom: -10px;display: flex;max-width: 47%;justify-content: center;width: fit-content;}
        input {
    font-size: 12px;
}
/*.share_screen { width: 85%;}*/
.festive-hunt_image p{text-wrap: balance;font-size: 16px;}
ul.share p { font-size: 1.1rem;}
ul.share li .fa {
    width: 26px;
    height: 26px;}
    .share_screen_text p {
    padding-bottom: 10px;
    padding-top: 10px;}

.object_cont p {
    width: calc(100% - 24px);
            font-size: 1.25rem;
        padding: 1rem;
}
.form_container, .share_screen_container, .win_additionalscreens::after {
    background-image: url(../img/thank_you_bg_mobile.png);
    background-size: 250% 100%;
}
.share_screen {
        max-width: 80%;
}
.share_screen p {
        padding: 5%;
}
    span#toolTiptext {
    left: 20%;
    bottom: 70%;
    animation: tooltip_anim_mobile 5s forwards;
}
span#toolTiptext::after {
    top: 20px;
    right: 45%;
    transform: rotate(90deg);
}
    
}


  @media only screen and (max-width: 1024px) 
{
   div.zoom-in-out-container{
       display:none;
   }
    
}


/*============================SUMIT================================*/

  
 

  @media only screen and (min-width: 1500px) and (max-width: 1700px) 
{
   div#answer-1 p.obj_heading { font-size: 18px;} 
   .interactive-image-container { margin-bottom: 20px;}
    
}
@media only screen and (min-width: 1400px) and (max-width: 1499px) 
{
   div#answer-1 p.obj_heading { font-size: 18px;} 
   .interactive-image-container { margin-bottom: 20px;}
   .festive-hunt_image p {font-size: 14px;}
    .completion_counter p {  font-size: 14px;}
    .won_cont {  width: 950px; margin: 60px auto;}
    #userDetailsForm input {  padding: 5px 12px}
    .form_item label {font-size: 14px;}
    .form_cont { padding: 10px 20px;margin-top: 60px;}
}
@media only screen and (min-width: 1300px) and (max-width: 1399px) 
{
   div#answer-1 p.obj_heading { font-size: 14px;} 
   .interactive-image-container { margin-bottom: 20px;}
   .festive-hunt_image p {font-size: 14px;}
    .completion_counter p {  font-size: 14px;}
    .won_cont {  width: 950px; margin: 60px auto;}
    #userDetailsForm input {  padding: 3px 12px}
    .form_item label {font-size: 12px;}
    .form_cont { padding: 10px 20px;margin-top: 0px;}
    button.list_answer_button { margin: 10px 15px;}
    .won_text {  margin-bottom:  100px;}
    .win_additionalscreens {  top: 30px;}
    span.error {padding: 0px 5% 5px 5%;}
    .share_screen { margin-bottom: 60px;}
}
@media only screen and (min-width: 1100px) and (max-width: 1299px) 
{
   .layerhowto_main {margin-bottom: auto;}
   div#answer-1 p.obj_heading { font-size: 14px;} 
   .interactive-image-container { margin-bottom: 20px;}
   .festive-hunt_image p {font-size: 14px;}
    .completion_counter p, .MINUTES_inwords {  font-size: 14px;}
    .won_cont {  width: 950px; margin: 60px auto;}
    #userDetailsForm input {  padding: 3px 12px}
    .form_item label {font-size: 12px;}
    .form_cont { padding: 10px 20px;margin-top: 0px;        margin-bottom: 0;}
    button.list_answer_button { margin: 10px 15px;}
    .won_text {  margin-top: auto;}
    .win_additionalscreens {  top: 30px;}
    span.error {padding: 0px 5% 5px 5%;}
    .share_screen {margin-bottom: auto;   }
}
@media only screen and (min-width: 1000px) and (max-width: 1099px) 
{
  .single_howto {
        width: 33%;
        max-width: calc(33% - 55px);
    }
        .layerhowto_main {margin-bottom: auto;}
   div#answer-1 p.obj_heading { font-size: 14px;} 
   .interactive-image-container { margin-bottom: 0px;}
   .festive-hunt_image p {font-size: 14px;}
    .completion_counter p {  font-size: 14px;}
    .won_cont {  width: 950px; margin: 60px auto;}
    #userDetailsForm input {  padding: 3px 12px}
    .form_item label {font-size: 12px;}
    .form_cont { padding: 10px 20px;margin-top: 0px;        margin-bottom: 0;}
    button.list_answer_button { margin: 10px 15px;}
    .won_text {  margin-top: auto;}
    .win_additionalscreens {  top: 30px;}
    span.error {padding: 0px 5% 5px 5%;}
    .share_screen {margin-bottom: auto;   }
   #top_logo { width: 200px;}
    /*.outer-container {*/
    /*    height: 110px;*/
    /*    margin-top: 0;*/
    /*}*/
    .won_text {
    width: 80%;}
}


    div#answer-1 {
        padding-bottom: 15px;
    }
    .MINUTES_inwords {
    text-transform: lowercase;
}



/*============================SUMIT================================*/


@media only screen and (min-width: 768px) and (max-width: 1200px) {
        button.T\&C.Apply {
        height: 20px;
    }
}
@media only screen and (min-width: 581px) and (max-width: 999px) {
        #top_logo {
    width: 250px;
}
}

@media screen and (min-width: 1480px) and (max-width: 1919px) {
    .completion_counter {
        width: calc(100% - 12px);
    }
}

@media (max-width: 440px) {
        .leaderboard_container h1 {font-size: 1.25rem;}
    .leaderboard_best_times p {font-size: 0.8rem;
        height: fit-content;}
    .leaderboard_best_times span.best_time {        font-size: 0.8rem;
        padding: 8px;
        height: fit-content;}
        
        .won_text span#time_finished {padding-top: 118px;margin-top: -108px;font-size: 15px;}
            .won_text p img {height: 50px;}
}



@media (max-width: 375px) {
  div#answer-1 p.obj_heading {max-width: 40%;top: -47px;line-height: 1.6;}
div#main-timer{overflow: initial;}
.completion_counter{max-width: 50%;overflow: hidden;}
span.fbinstainfo {font-size: 12px;}
}


.error_field label{
    background: #e25b00 !important;
}
.error_field input{
    border-color: #e25b00 !important;
}