body {
  width: 100%;
  height: 57vw;
  background: #000;
  overflow: hidden;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 1vw;
}
@font-face {
  font-family: "CraftGothic-BlackCondensed";
  src: url("fonts/MicroSquare Regular.ttf") format("truetype");
}

@font-face {
  font-family: Moire-extra-bold;
  src: url(fonts/MoireW01ExtraBold.ttf);
}
@font-face {
  font-family: Moire-bold;
  src: url(fonts/MoireBold.ttf);
}
@font-face {
  font-family: euro;
  src: url(fonts/eurostilecnd.woff);
}
@font-face {

  font-family: euro-regular;
  src: url(fonts/euro-regular.otf);
}
@font-face {
  font-family: good-times;
  src: url(fonts/good_times.otf);
}

#main-container {
  margin-top: 0;
  width: 100%;
  height: 57vw;
  display: flex;
  align-items: center;
}

#sub-container {
  width: 100%;
  height: 57vw;
  display: flex;
  flex-direction: row;
  position: relative;
}
#video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 57vw;
  object-fit: cover;
  z-index: 12;
}

#left-container {
  padding-left: 0.5%;
  display: none;
  flex-basis: 58%;
  position: relative;
  height: 100%;
 background: linear-gradient(90deg, #980100 8%, #DF0200 25%, #ff1900 57%);
}
#right-container {
  display: none;
  flex-basis: 42%;
  position: relative;
  background: #ff1b00;
  height: 100%;
}
.top-left {
  position: relative;
  margin-top: 8rem;
  margin-left: 2rem;
  width: 100%;
  z-index: 2;
}
.abs{
  position: absolute;
  top: 2.5rem;
  left: 1rem;
  display: flex;
  z-index: 50;
  display:none;
}
.gold {
  flex-basis: 20%;
  font-family: Moire-extra-bold;
  letter-spacing: 0.1rem;
  text-align: center;
  background: -webkit-linear-gradient(top, #fce300 30%, #796719 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.9rem;
  filter: drop-shadow(0rem -0.05rem 0.2rem #000);
  filter: drop-shadow(0rem 0rem 0.2rem rgb(28, 26, 26));
  z-index: 2;
  margin-left: 2rem;
}
.draw-number {
  flex-basis: 38%;
  color: #f2f2f2;
  font-family: Moire-extra-bold;
  font-size: 3.9rem;
  font-weight: 900;
  margin-left: 1rem;
  z-index: 2;
  opacity: 0.8;
  filter: drop-shadow(0rem -0.05rem 0.2rem #000);
  filter: drop-shadow(0rem 0rem 0.2rem rgb(28, 26, 26));
}
.head-holder {
  position: absolute;
  right: 3.4rem;
  top: -4.1rem;
  background: #af0100;
  min-height: 4rem;
  width: 13rem;
  align-items: center;
  border-radius: 0.5rem;
  text-align: center;
  line-height: 5rem;
  font-size: 3rem;
  font-weight: bold;
  flex-basis: 22%;
  margin-left: 2rem;
  z-index: 2;
}
.mid-left {
  margin-right: 1rem;
  margin-left: 2rem;
  margin-top: 0.5rem;
}
.mid-left {
  margin-right: 1rem;
  margin-left: 2rem;
  margin-top: 0.5rem;
}

.number-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  margin-bottom: 0.1rem;
}
.number-text {
  position: relative;
  width: 5.3rem;
  height: 5rem;
  line-height: 4.8rem;
  letter-spacing: 0.2rem;
  border: none;
  margin-top: 0.15rem;
  padding-top: 0.1rem;
  color:  rgba(253, 2, 0, 0.6);
  border-radius: 1.2rem;
  text-align: center;
  font-size: 3.5rem;
  font-family: euro-regular, sans-serif;
  font-weight: bolder;
  font-style: normal;
  margin-right: 0.05rem;
  background-image:  url('../images/number-unselected-bg-2.png');
  background-size: cover;
  opacity: 1;
  z-index: 1; /* Ensure the text is on top of other elements */
}

.number-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to top,
    rgba(253, 2, 0, 0.1) 0%,
    rgba(253, 2, 0, 0.3) 50%,
    rgba(253, 2, 0, 0.6) 80%,
    rgba(253, 2, 0, 0.7) 90%,
    rgba(253, 2, 0, 0.9) 100% /* Third segment */
);
border-radius: 1.3rem;
  z-index:0 !important;;
}
#a1.number-text::before,
#a11.number-text::before,
#a21.number-text::before,
#a31.number-text::before,
#a41.number-text::before,
#a51.number-text::before,
#a61.number-text::before,
#a71.number-text::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to top,
    rgba(253, 2, 0, 0) 0%,   /* 0 opacity */
    rgba(253, 2, 0, 0.1) 50%,  /* 0 opacity */
    rgba(253, 2, 0, 0.2) 80%,  /* 0 opacity */
    rgba(253, 2, 0, 0.3) 90%,  /* 0 opacity */
    rgba(253, 2, 0, 0.3) 100%  /* 0 opacity */
  ) ;
  border-radius: 1.3rem;
  z-index: 0;
}

#a2.number-text::before,
#a12.number-text::before,
#a22.number-text::before,
#a32.number-text::before,
#a42.number-text::before,
#a52.number-text::before,
#a62.number-text::before,
#a72.number-text::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to top,
    rgba(253, 2, 0, 0.1) 0%,   /* 0 opacity */
    rgba(253, 2, 0, 0.2) 50%,  /* 0 opacity */
    rgba(253, 2, 0, 0.3) 80%,  /* 0 opacity */
    rgba(253, 2, 0, 0.4) 90%,  /* 0 opacity */
    rgba(253, 2, 0, 0.4) 100%  /* 0 opacity */
  );
  border-radius: 1.3rem;
  z-index: 0;  
}

#a43.number-text::before,
#a3.number-text::before,
#a13.number-text::before,
#a23.number-text::before,
#a63.number-text::before,
#a33.number-text::before,
#a53.number-text::before,
#a73.number-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to top,
    rgba(253, 2, 0, 0.1) 0%,   /* 0 opacity */
    rgba(253, 2, 0, 0.2) 50%,  /* 0 opacity */
    rgba(253, 2, 0, 0.3) 80%,  /* 0 opacity */
    rgba(253, 2, 0, 0.4) 90%,  /* 0 opacity */
    rgba(253, 2, 0, 0.5) 100%  /* 0 opacity */
  );
  border-radius: 1.3rem;
  z-index: 0;
}



.bottom-left {
  position: relative;
  margin-top: 1rem;
  width: 100%;
}
.keno-logo {
  position: absolute;
  top: 0;
  left: 3rem;
  z-index: 2;
}
.keno-logo img {
  height: 3.8rem;
 
}
.tail-holder {
  position: absolute;
  right: 1rem;
  top: -0.7rem;
  background: #af0100;
  min-height: 4rem;
  width: 13rem;
  align-items: center;
  border-radius: 0.5rem;
  text-align: center;
  line-height: 5rem;
  font-size: 3rem;
  font-weight: bold;
  flex-basis: 22%;
  z-index: 2;
}
#init-image{
  top: 0;
  left: 0;
  position: absolute;
  background-image: url("../images/init.png");
  background-size: cover;
  z-index: 400;
  height: 100vh;
  width: 100%;
}
.text-overlay {
  position: absolute;
  top: 10px; /* adjust as needed */
  left: 10px; /* adjust as needed */
  color: #b2b2b2;
  font-size: 1rem;
  opacity:0.5;
}
.bottom-right-text {
  position: absolute;
  bottom: 20px; /* adjust as needed */
  right: 20px; /* adjust as needed */
  color: #b2b2b2;
  font-size: 1.2rem;
  font-weight: bold;
  opacity:0.5;
}
.layer {
  position: absolute;
  background: linear-gradient(
      to right,
      /* Horizontal gradient from left to right */ rgba(149, 0, 1, 1) 20%,
      rgba(255, 12, 4, 0.7) 30%,
      rgba(255, 12, 4, 1) 62%
    );


  opacity: 0.8;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/********** right div**********/
.gr-bg {
  display: none;
  height: 57vw;
  width: 100%;
  position: absolute;
  left: 0;
  background: rgb(89, 23, 6);
  background: linear-gradient(
    180deg,
    rgba(89, 23, 6, 1) 35%,
    rgba(0, 9, 10, 1) 100%
  );
  z-index: 300;
}
#top-right {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  margin-left: 2rem;
}
.time-counter {
  margin-top: 0.5rem;
  font-size: 7.5rem;
  font-weight: 200;
  width: 100%;
  margin-left: 13rem;
  font-family: euro;
  letter-spacing: 0.2rem;

  background: linear-gradient(
    to top,
    rgb(105, 86, 34),
    rgb(253, 216, 93),
    rgb(255, 247, 130)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.1rem #fdd85d;
  filter: drop-shadow(0rem -0.05rem 0.3rem #2d0505);
  -webkit-transform: scale(1.15, 1);
  -moz-transform: scale(1.15, 1);
  -o-transform: scale(1.15, 1);
  transform: scaleX(1.15);
}

.countdown-animation {
  animation: blink 1s;
  animation-iteration-count: infinite;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.win-table {
  margin-left: 4.6rem;
  margin-top: 1rem;
  border-collapse: separate;
  font-size: 3rem;
}
.pick-number {
  font-family: good-times;
  color: red;
  font-size: 4rem;
  letter-spacing: 0.1rem;
  margin-left: 2rem;
}

.Win-head {
  font-family: euro;
  font-size: 3.5rem;
  background-color: #fef110;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0rem 0rem 0.2rem #333);
  margin-top: 1rem;
  width: 17rem;
  display: flex;
  font-weight: 500;
  justify-content: space-between;
}
.win-value {
  color: #fff;
  font-size: 3.2rem;
  font-family: euro;
  text-shadow: 0rem 0rem 0.5rem rgb(74 9 4);
  display: flex;
  justify-content: space-between;
  width: 20rem;
  margin-top: 0.5rem;
}
.gold1 {
  flex-basis: 20%;
  letter-spacing: 0.1rem;
  text-align: center;
  background-color: #fef110;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4.5rem;
  font-weight: 500;
  z-index: 2;
}

.bet-info {
  font-family: good-times;
  color: #fff;
  font-weight: 900;
  line-height: 5rem;
  font-size: 3.5rem;
  letter-spacing: 0.4rem;
  text-align: center;
  margin-left: 3rem;
  margin-top: 1.5rem;
}
#bet-info-2 {
  text-align: center;
  font-weight: 100;
  font-size: 4rem;
  line-height: 6rem;
  margin-left: -8rem;
  display: none;
}
#bet-info-3 {
  font-family: euro-regular;
  letter-spacing: 0rem;
  font-size: 3.8rem;
  font-weight: 900;
}
#bet-info-3 span {
  font-family: good-times;
  color: red;
}
#bet-info-4 {
  font-family: euro-regular;
  letter-spacing: 0rem;
  line-height: 4rem;
  font-size: 4rem;

}

/************** page**************/

.result-page {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-image: url("../images/result.png");
  background-size: cover;
  background-color: rgba(106,21,9,255);
  z-index: 99;
  display: none;
}
.all-results {
  width: 100%;
  height: 100%;
  padding-top: 2rem;
  margin-top: 3%;
}
.result-page .result-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 94%;
  align-items: center;
  margin-right: 3%;
  margin-left: 3%;
}

.result {
  display: inline-flex;
  margin-right: 0.2rem;
  align-items: center;
  position: relative;
}

.result-Id {
  color: #fff;
  font-size: 3rem;
  font-weight: 900;
  margin-right: 1rem;
  margin-left: 1.7rem;
  font-family: Moire-extra-bold;
  text-shadow: 0rem 0rem 0.3rem #333;
}
.win-value{
  font-family: euro-regular, sans-serif; 
  font-weight: 900;
}
.result-number {
  font-size: 2.5rem;
  width: 3.8rem;
  height: 3.8rem;
  line-height: 3.8rem;
  font-weight: 500;
  font-family: euro-regular, sans-serif;
  border-radius: 50%;
  text-align: center;
  -webkit-text-stroke: 0.1rem #000;
  margin-left: 0.25rem;
  padding: 0.1rem;

}
.first-part {
  background-color: #fff20c;
  box-shadow: inset -1px -2px 10px #eadc00;
}
.divider {
  width: 0.3rem;
  height: 4.4rem;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  background-color: #ccc;
  opacity: 0.5;
}
.hr {
 border: none;
  height: 1px; 
  width: 94%;
  margin-right: 3%;
  margin-left: 3%;
  background: linear-gradient(to right, transparent 0%, #ccc 30%,  #ccc 50%,  #ccc 70%, transparent 100%);
  opacity: 0.5;
}
.result1 {
  margin-right: 0.4rem;
}
.second-part {
  background: #ff9a22;
  box-shadow: inset -1px -3px 4px #ec7d00;
}

/********************blower********************/

.ball-blower {
  width: 39rem;
  height: 57vw;
  left: 1rem;
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
}
.ball-blower-top {
  width: 39rem;
  height: 57vw;
  left: 1rem;
  position: absolute;
  z-index: 50;
  top: 0;
}

.balls {
  bottom: 30rem;
  width: 0;
  left: 15.2rem;
  position: absolute;
  z-index: 30;
}

.animate-draw-ball {
  animation-name: draw-ball;
  animation-duration: 1.3s;
}
.animate-shake-ball {
  animation: shake-ball 0.1s;
  animation-iteration-count: infinite;
}

@keyframes draw-ball {
  0% {
    bottom: -50rem;
    width: 8.5rem;
    height: 8.5rem;
    left: 14.2rem;
  }
  7% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }

  8% {
    width: 32rem;
    height: 6rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  8.5% {
    width: 32rem;
    height: 12rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }

  10% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  13% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  15% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  17% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  19% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  21% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  23% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  25% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  27% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  29% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  31% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  33% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  35% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  37% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  39% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  41% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  43% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  45% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  47% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  49% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  51% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  53% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  55% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  57% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  59% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  61% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  63% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  65% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  67% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  69% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  71% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  73% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 5rem;
  }
  75% {
    width: 32rem;
    height: 32rem;
    bottom: 12.3rem;
    left: 4.9rem;
  }
  80% {
    bottom: 12.3rem;
    width: 32rem;
    height: 32rem;
    left: 5rem;
  }
  to {
    bottom: 200rem;
    width: 10.5rem;
    height: 10.5rem;
    left: 15.2rem;
  }
}

/*********************blowings**************/
/*********************blowings**************/
@keyframes animateDiagonals {
  from {
    opacity: 0;
    transform: translateX(-700px) translateY(680px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.a10 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 0.1s;
  
}
.a9,
.a20 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 0.2s;
}
.a8,
.a19,
.a30 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 0.3s;
}
.a7,
.a18,
.a29,
.a40 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 0.4s;
}
.a6,
.a17,
.a28,
.a39,
.a50 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 0.5s;
}
.a5,
.a16,
.a27,
.a38,
.a49,
.a60 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 0.6s;
}
.a4,
.a15,
.a26,
.a37,
.a48,
.a59,
.a70 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 0.7s;
}
.a3,
.a14,
.a25,
.a36,
.a47,
.a58,
.a69,
.a80 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 0.8s;
}
.a2,
.a13,
.a24,
.a35,
.a46,
.a57,
.a67,
.a68,
.a79 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 0.9s;
}
.a1,
.a12,
.a23,
.a34,
.a45,
.a56,
.a66,
.a78 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 1s;
}

.a11,
.a22,
.a33,
.a44,
.a55,
.a65,
.a77 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 1.1s;
}
.a21,
.a32,
.a43,
.a54,
.a64,
.a76 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 1.2s;
}
.a31,
.a42,
.a53,
.a63,
.a75 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 1.3s;
}
.a41,
.a52,
.a62,
.a74 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 1.4s;
}
.a51,
.a73 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 1.5s;
}
.a61,
.a72 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 1.6s;
}
.a71 {
  opacity: 0;
  animation: animateDiagonals 0.5s ease-out forwards;
  animation-delay: 1.7s;
}


/**********************background for selectig Numbers**********************/
.bg1 {
 
  width: 5.3rem;
  height: 5rem;
  line-height: 4.9rem;
  background-color: #ff0 !important;
   background-image: url("../images/number-selected-yellow-bg.png") ;
   background-size: 92%;
   background-position: center;
  animation: effect 0.5s ease-out ;
  color: #000;
  z-index: 10;
  opacity: 1 !important;
}
.bg1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(253, 2, 0, 0), transparent) !important;
  z-index: -10; /* Pushes the pseudo-element below the content */
}

.bg2 {
  width: 5.3rem;
  height: 5rem;
  line-height: 4.9rem;
  background-color: #ffc12b !important;
   background-image: url("../images/number-selected-orange-bg.png");
   background-size: 92%;
  background-position: center 5px; /* Adjust as needed */
  color: #000;
  animation: effect 0.5s ease-out ;
  z-index: 10;
  opacity: 1 !important;
}
.bg2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(253, 2, 0, 0), transparent) !important;
  z-index: -10; /* Pushes the pseudo-element below the content */
}
@keyframes effect {
  0% {
    transform: scale(1.7);
    opacity: 0;
  }
  30% {
    opacity: 0.5;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: scale(1.7);
  }
  60% {
    opacity: 1;
    transform: scale(1.5);
  }
  80% {
    opacity: 1;
    transform: scale(1.25);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
  .count_num{
    position: absolute;
    margin: auto;
    right: 4vw;
    font-size: 4.5vw;
    color: #ffffff;
    top: 7vw;
    z-index: 100;
    font-family: 'CraftGothic-BlackCondensed';
    font-weight: 900;
    font-style: normal;

    }