* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
figure {
  margin: 0;
}

ul,
li {
  padding: 0;
  margin: 0;
}

a,
a:hover {
  text-decoration: none;
  transition: 0.2s ease-in-out;
}

.buttonsContainer {
  display: flex;
}

button,
button:focus,
a:focus,
input,
input:focus {
  outline: none;
  box-shadow: none;
}

body,
html {
  height: 100%;
  background: #122d24;
}

.text-center {
  text-align: center;
}

.initalPg {
   /* background-image: url(../images/splashbg.png);  */
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-attachment: fixed;
  z-index: 9;
}

.topEgg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100%;
}

.bottomEgg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
width: 100%;
}



.rightEgg {
position: absolute;
    right: 0%;
    transform: translateX(0%);
    bottom: 0;
    width: initial;
    height: 100%;
}


.leftEgg {
position: absolute;
    left: 0%;
    transform: translateX(0%);
    bottom: 0;
    width: initial;
    height: 100%;
}





.initalPglogo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 3%;
}

.initalPglogo img {
  max-width: 40vw;
}

/* .initalPg-cnt {
    max-width: 35vw;
    margin: 0 auto;
    height: calc(100% - 16%);
    padding-top: 8.2%;
} */
.initalPg-cnt {
  max-width:26vw;
  margin: 0 auto;
  height: 100%;
   padding-top: 8.2%; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.prize li {
  margin: 0 16px;
}

.prize {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 11px;
}

.prize img {
  width: 100%;
  max-width: 99%;
  height: 100%;
  object-fit: contain;
}

.initalPg-cnt h1 {
  font-family: "Be Vietnam Pro", sans-serif;
  /* font-size: 40px; */
  font-size: 3vw;
  text-transform: uppercase;
  font-weight: 900;
  line-height: normal;
  color: #fff;
}

.initalPg-cnt h2 {
  font-family: "Be Vietnam Pro", sans-serif;
  /* font-size: 12px; */
  font-size: 0.9vw;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  line-height: normal;
  margin-bottom: 0.2vh;
}

.initalPg-cnt h2 span {
  font-weight: 400;
}

.initalPg-cnt p {
  color: #fff;
  position: relative;
  /* font-size: 16px; */
  font-size: 1.2vw;
  font-weight: 300;
  font-family: "Big Shoulders Display", cursive;
  /* margin: 5px auto; */
  margin: 1vh auto;
}

.initalPg-cnt h1+p {
  max-width: 85%;
}

.prize h3 {
  font-family: "Be Vietnam Pro", sans-serif;
  /* font-size: 12px; */
  font-size: 0.9vw;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
}

.runnerupPrize {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.runnerupPrize li {
  position: relative;
  /* font-size: 16px; */
  font-size: 1.2vw;
  color: #fff;
  font-weight: 500;
  font-family: "Big Shoulders Display", cursive;
  padding: 0 14px;
  line-height: normal;
}

.runnerupPrize li:not(:last-child):before {
  content: "";
  position: absolute;
  width: 1px;
  top: 2px;
  bottom: 2px;
  right: 0;
  background: #fff;
}

.getCracking {
  font-family: "Be Vietnam Pro", sans-serif;
  /* font-size: 14px; */
  font-size: 0.9vw;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  border: 1px solid #fff;
  padding: 7px 11px;
  display: inline-block;
  /* margin: 16px 0 16px; */
  margin: 2vh 0;
  background-color: transparent;
  cursor: pointer;
  width: 192px;
}

.getCracking:hover {
  background: #fff;
  border-color: #fff;
  color: #f60939;
}
.initalPg-outer .wrongansCnt .buttonsContainer a.retry:hover, 
.initalPg-outer .wrongansCnt a.show:hover, .continue:hover{
  background: #fff;
  border-color: #fff;
  color: #f60939;
}
.terms {
  /* font-size: 11px; */
  font-size: 0.7vw;
  font-weight: 400;
  font-family: "Big Shoulders Display", cursive;
  color: #fff;
  display: block;
}

.prize+p {
  margin-top: 11px;
}

.order {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 0.9vw;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
  background: #007eff;
  /* width: 30px;
    height: 30px; */
  width: 2.5vw;
  height: 2.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 2px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
}

.prize li p {
  background: rgb(131, 174, 181);
  background: linear-gradient(77deg,
      rgba(131, 174, 181, 1) 0%,
      rgba(131, 91, 168, 1) 92%,
      rgba(94, 42, 148, 1) 100%);
  border-radius: 50%;
  /* width: 141px;
    height: 141px; */
  width: 10vw;
  height: 10vw;
  padding: 1px;
}

.quizPg {
  margin: 0 auto;
  height: 100vh;
  overflow: hidden;
  /* opacity: 0; */
}

/* .move + .quizPg {
  opacity: 1;
}
.initalPg.move {
  display: none;
} */
body,
html {
  height: 100vh;
  overflow: hidden;
}

.puzzleBg #myimage {
  width: 100%;
  
   /* height:100%;
  object-fit: cover;  */
}

.imagePosition {
  width: 100%;
  height: 70px;
}

.puzzleBg {
  /* padding-top: 70px; */
  width: 100%;
  height: 100%;
  position: relative;
}

.headerSec {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 150px;

  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  /* position: relative; */
  /* position: absolute;
  right: 0;
  left: 0;
  top: 0; */
  z-index: 9;
  background-color: #122d24;
  margin-top: 8px;
}

.headerFixed {
  /* width: 640px; */
  /* margin: 0% -320px; */
  height: 60px;
  position: fixed;
  /* left: 50%; */
  /* top: 0%; */
}

.footerSec {
  justify-content: center;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  background-size: cover;
  left: 0;
  right: 0;
  padding: 10px 15px;
  background-color:#122d24;
  background-repeat: no-repeat;

}

.footerFixed {
  /* width: 640px; */
  /* margin: 0% -320px; */
  height: 53px;
  position: fixed;
  /* left: 50%; */
  bottom: 0%;
}

.lives ul {
  display: flex;
  align-items: center;
}

.scoreOuter {
  display: flex;
  align-items: flex-end;
  align-items: center;
}

.lives {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.score {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.score p {
  display: flex;
  align-items: baseline;
}

.logo img {
  max-width: 1.7vw;
}

.hdrTxt {
  font-family: "Be Vietnam Pro", sans-serif;
  text-transform: uppercase;
  color: #fff;
  font-weight: 900;
  font-size: 1.5vw;
  position: absolute;
  line-height: 26px;
  left: 50%;
  transform: translate(-50%, -47%);
  -webkit-transform: translate(-50%, -47%);
  top: 50%;
  text-align:center;
}


.hdrTxt img {width: 68%;}

.hdrTxt span {
  font-weight: 400;
}

.scoreOuter h3 {
  font-family: "Be Vietnam Pro", sans-serif;
  text-transform: uppercase;
  color: #7da634;
  font-weight: 900;
  font-size: 1.1vw;
  margin: 0 7px 0 0;
}

.scoreOuter span {
  font-family: "Be Vietnam Pro", sans-serif;
  text-transform: uppercase;
  color: #f7d59b;
  font-weight: 900;
  font-size: 1vw;
}

.lives li img {
  height: 4vh;
}

.lives {
  margin-left: 16px;
}

.lives li:not(:last-child) {
  margin: 0 4px 0 0;
}

.inputcss {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-family: "Big Shoulders Display", cursive;
  font-weight: 400;
  min-height: 45px;
  min-width: 70%;
  border-radius: 14px;
  padding: 4px 11px;
  font-size: 1.2vw;
  letter-spacing: .5px;
}

.inputcss-mobile {
  min-height: 24px;
  font-size: 1vw;
}

.submit {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 900;
  min-height: 45px;
  border-radius: 14px;
  padding: 4px 11px;
  transition: 0.2s ease-in-out;
  text-transform: uppercase;
  font-size: 1vw;
  min-width: 170px;
  margin-left: 24px;
  cursor: pointer;
}

.submit-mobile {
  min-height: 24px;
  font-size: 1vw;
}

.submit:hover {
  background: #fff;
  border-color: #fff;
  color: #7da634
}

::placeholder {
  color: #fff;
}

.footerSec form {
  min-width: 50vw;
  max-width: 50vw;
  display: flex;
  align-items: center;
}

/* PRELOADER CSS */
.page-loader {
  width: 100%;
  height: 100vh;
  position: absolute;
  background: #112F25;
  z-index: 1000;
}

/* SPINNER ANIMATION */
/* .spinner {
  position: relative;
  top: 40%;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  -webkit-animation: sk-scaleout 1s infinite ease-in-out;
  animation: sk-scaleout 1s infinite ease-in-out;
} */

.spinner {
  position: relative;
  top: 35%;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1s infinite ease-in-out;
  animation: sk-scaleout 1s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1.2);
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

.topEgg1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
 width: 100%;
}

.bottomEgg1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
width: 100%;
}

.initalPglogo1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 3%;
}

.initalPglogo1 img {
  max-width: 2.5vw;
}

.wrongAns,
.correctAns,
.outofLives,
.successMessage {
  position: absolute;
  left: 0;
  /* display: none; */
  right: 0;
  top: 0;
  bottom: 0;
  /* background-image: url(../images/splashbg.png); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 9;
}

span.total {
  font-size: 1.0vw;
  padding-left: 5px;
  line-height: 20px;
}

.scoreOuter #userTotal {
  font-family: "Be Vietnam Pro", sans-serif;
  text-transform: uppercase;
  color: #f7d59b;
  font-weight: 900;
  font-size: 0.8vw;
}

.anssubHdng {
  color: #fff;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.7vw;
}

.answerHdng {
  line-height: normal;
  text-align: center;
  color: #fff;
  position: relative;
  font-size: 1.5vw;
  font-weight: 400;
  font-family: "Big Shoulders Display", cursive;
  margin: 1vh auto 0 auto;
  width: 40vw;
  text-transform: inherit;
}

.ansTxt {
  color: #fff;
  font-family: "Big Shoulders Display", cursive;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.7vw;
  max-width: 27vw;
  text-align: center;
  margin: 16px 0 0;
}
.answerHdng #movieTitle {
  display: inline;
}
.continue {
  font-family: "Be Vietnam Pro", sans-serif;
  /* font-size: 14px; */
  font-size: 0.9vw;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  border: 1px solid #fff;
  padding: 7px 11px;
  display: inline-block;
  /* margin: 16px 0 16px; */
  margin: 2vh 0;
  background-color: transparent;
  cursor: pointer;
  width: 192px;
}

.continue:hover {
  background: #fff;
  border-color: #fff;
  color: #f60939;
}

.retry {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 900;
  padding: 9px 30px;
  text-transform: uppercase;
  font-size: 1.4vw;
  margin-top: 42px;
  margin-right: 10px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

.retry:hover {
  background: #fff;
  border-color: #fff;
  color: #760eff
}

.home {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 900;
  padding: 9px 30px;
  text-transform: uppercase;
  font-size: 1.4vw;
  margin-top: 42px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home:hover {
  background: #fff;
  border-color: #fff;
  color: #760eff
}

.share {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 900;
  padding: 9px 30px;
  text-transform: uppercase;
  font-size: 1.4vw;
  margin-top: 42px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share:hover {
  background: #fff;
  border-color: #fff;
  color: #760eff
}

.wrongansCnt {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.answerHdng.correctTitleArrow:before {
  content: "<";
  font-size: 6vw;
  top: -2px;
  position: absolute;
  left: -52px;
}

.answerHdng.correctTitleArrow:after {
  content: ">";
  font-size: 6vw;
  top: -2px;
  position: absolute;
  right: -52px;
}

.rotatedevice {
  display: flex;
  background: #7da634;
  align-items: center;
  justify-content: center;
  /* display: none; */
  height: 100%;
}

.img-magnifier-container {
  position: relative;
}

.img-magnifier-container-mobile {
  transform: scale(0.65);
  top: -68px;
}

.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  width: 7vw;
  height: 7vw;
}

/* .rotate .initalPg,
.rotate .quizPg {
  display: none;
} */
.rotate {
  display: flex;
}

.hide {
  position: absolute;
}

.hide {
  display: none;
}

.hide img {
  height: 4vh;
}

#icon1 {
  top: 37.5vw;
    left: 19vw;
}

#icon2 {
  top: 13vw;
  left: 21vw;
}

#icon3 {
  top: 37.5vw;
    left: 31vw;
}

#icon4 {
  top: 20vw;
    left: 30.2vw;
}

#icon5 {
  top: 34.7vw;
    left: 35vw;
}

#icon6 {
  top: 33vw;
    right: 55vw;
}

#icon7 {
  top: 43.5vw;
  right: 81vw;
}

#icon8 {
  top: 37vw;
  left: 42vw;
}

#icon9 {
  top: 22vw;
  left: 44vw;
}

#icon10 {
  top: 34vw;
  left: 48vw;
}

#icon11 {
  top: 19vw;
  right: 46vw;
}

#icon12 {
  top: 11vw;
  right: 62.5vw;
}

#icon13 {
  top: 26vw;
  right: 48vw;
}

#icon14 {
  top: 37vw;
  left: 54.5vw;
}

#icon15 {
  top: 29.5vw;
  left: 56.5vw;
}

#icon16 {
  top: 19vw;
  left: 59vw;
}

#icon17 {
  top: 32vw;
  left: 62.5vw;
}

#icon18 {
  top: 44vw;
  left: 64vw;
}

#icon19 {
  top: 33vw;
  left: 69vw;
}

#icon20 {
  top: 40vw;
  right: 15.5vw;

}

#icon21 {
  top: 21.5vw;
    right: 25vw;

}

#icon22 {
  top: 14vw;
    right: 21.5vw;

}

#icon23 {
  top: 36vw;
  right: 23vw;

}

#icon24 {
  top: 11vw;
  right: 40vw;
}


 .initalPg-outer {
  position: absolute;
  display: inline-block;
  z-index: 999;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

 .initalPg-outer a.initalPglogo {
  position: static !important;
  transform: none !important;
}

 .initalPg-outer a.initalPglogo img {
  max-width: 40vw;
}

 .initalPg-outer .initalPg-cnt.text-center {
  padding-top: 2%;
}
.initalPg-outer a.initalPglogo1, .initalPg-outer a.initalPglogo1, .initalPg-outer a.initalPglogo2,  .initalPg-outer  a.initalPglogo1 {
  position: static !important;
  transform: none !important;
}

.initalPg-outer a.initalPglogo1 img, .initalPg-outer a.initalPglogo1 img, .initalPg-outer a.initalPglogo2 img,  .initalPg-outer  a.initalPglogo1  img{
  max-width: 45vw;
}

.initalPg-outer .wrongansCnt {
  padding-top: 3%;
}
.initalPg-outer a.correctimage {
  position: static !important;
  transform: none !important;
}

.initalPg-outer a.correctimage img {
  max-width: 50vw;
}
.initalPg-outer .wrongansCnt h3.anssubHdng {
  color: #fff;
  position: relative;
  font-size: 1.5vw;
  font-weight: 400;
  font-family: "Big Shoulders Display", cursive;
  width: 40vw;
  text-transform: inherit;
}

.initalPg-outer .wrongansCnt a.share {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 0.9vw;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  border: 1px solid #fff;
  padding: 7px 11px;
  display: inline-block;
  margin: 2vh 0.25rem;
  background-color: transparent;
  cursor: pointer;
  display: inline-block;
  width:192px;
}

.initalPg-outer .wrongansCnt a.show {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 0.9vw;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
  border: 1px solid #fff;
  padding: 7px 11px;
  display: inline-block;
  margin:0 8px;
  background-color: transparent;
  cursor: pointer;
  display: inline-block;
  width:192px;
}
.initalPg-outer .wrongansCnt a.show:hover, .initalPg-outer .wrongansCnt a.share:hover {
  background: #fff;
  border-color: #fff;
  color: #f60939;
}
.initalPg-outer .wrongansCnt .wrongansCnt-btns {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.allanswer {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 0;
  z-index: 9;
  right: 0;
  top: 0;
  background-color: #102e24;
}

.allanswer img {
  width: 100%;
  height: 90%;
  object-fit: cover;
  object-position: center;
}

.initalPg-outer a.incorrect3 {
  position: static !important;
  transform: none !important;
  left: 50%;
  top: 3%;
}

.initalPg-outer a.incorrect3 img {
  max-width: 45vw;
}
.initalPg-outer .wrongansCnt .buttonsContainer a.retry {

  font-family: "Be Vietnam Pro", sans-serif;
  /* font-size: 14px; */
  font-size: 0.9vw;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  border: 1px solid #fff;
  padding: 7px 11px;
  display: inline-block;
  /* margin: 16px 0 16px; */
  margin: 0 8px;
  background-color: transparent;
  cursor: pointer;
  height: auto;
  width:192px;
}
.initalPg-outer .wrongansCnt p.ansTxt {
  color: #fff;
  position: relative;
  font-size: 1.2vw;
  font-weight: 400;
  font-family: "Big Shoulders Display", cursive;
  margin: 1vh auto;
  text-transform: inherit;
}
.initalPg-outer .wrongansCnt p.ansTxt2 {
  color: #fff;
  position: relative;
  font-size: 1.2vw;
  font-weight: 400;
  font-family: "Big Shoulders Display", cursive;
  margin: 1vh auto;
  text-transform: inherit;
}
#outofLives .initalPg-outer .wrongansCnt h2.answerHdng {
  margin-top: 0;
}

#outofLives .initalPg-outer .wrongansCnt p.ansTxt {margin-top: 4vh;margin-bottom: 2.5vh;}

.allanswer a.back {
  display: inline-block !important;
  margin: 0 auto !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;

  font-family: "Be Vietnam Pro", sans-serif;
    font-size: 0.9vw;
    text-transform: uppercase;
    font-weight: 900;
    color: #fff;
    cursor: pointer;
    border: 1px solid #fff;
    padding: 7px 11px;
    background-color: transparent;
    cursor: pointer;
    min-width:175px;
    width: 175px;
    text-align: center;
}
.allanswer a.back:hover {
  background: #fff;
  border-color: #fff;
  color: #f60939;
}

@media (max-width: 1445px) {
  .img-magnifier-container-mobile {
    transform: none;
    top: inherit;
}

.headerSec {
  padding: 0px 108px;
  margin-top: 14px;
}

}

@media (max-width: 1180px) {
.img-magnifier-container-mobile {
  transform: scale(0.95);
  top: -30px;
}

}

@media (max-height: 785px) {
  .footerSec {
    position: fixed;
  
  }

 .quizPg {

  overflow: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

}

.quizPg ::-webkit-scrollbar {
  display: none;
}

.headerSec {
  padding: 10px 150px;
  margin-top: 0px;
}

.allanswer {
  text-align:center;
}

.allanswer img {
  width: 175vh;
  height: 88%;
}

  }