/* onstage  */
.onstage-mainlayout {
  background: url(../assets/images/onstage/bg-main-2.png);
  /*background-size: cover;*/
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: space-between;
  position: relative;
  margin: 0;
  overflow: hidden;
}

#photo {
  border: 4px solid green;
  padding: 4px;
  position: fixed;
  z-index: 999999;
}

.onstage-layout-footer {
  background: linear-gradient(0deg, #000 50%, rgba(25, 28, 50, 0) 100%);
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  box-shadow: 0px 60px 20px 20px #000;
}

.onstage-mainlayout-content {
  padding: 20px 20px;
  padding-bottom: 100px;
  width: 100%;
  /* height: 100%;
  max-height: 100%;
  min-height: 100vh; */
}

.onstage-image-logo-event {
  width: 100%;
  object-fit: cover;
}

.onstage-layout-txt-header {
  border-radius: 20px;
  border: 1px solid #fff;
  padding: 5px 50px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 30px;
  width: fit-content;
}

.onstage-title {
  font-size: 30px;
  font-weight: 800;
  text-align: center;
  text-shadow: 2px 2px 1px #000;
  color: #ed7935;
  /* line-height: 45px; */
}

.onstage-title-white {
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 1px #000;
  text-transform: uppercase;
}

.onstage-detail-txt {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}

.onstage-txt-note {
  text-align: center;
  font-size: 11px;
  color: #b6b6b6;
}
/* onstage */
/* Hide and Seek  */
.hs-mainlayout {
  background: url(../assets/images/hideandseek/bg-hide-seek.png);
  background-size: cover;
  object-fit: cover;
  position: relative;
  margin: 0;
}

.hs-mainlayout-content {
  padding: 50px 20px;
  padding-bottom: 20px;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 100vh;
}

.dashboard-layout-no {
  width: 90px;
  height: 90px;
  overflow: hidden;
  position: relative;
}

.dashboard-layout-no-img {
  width: 100%;
}

.dashboard-no {
  font-family: Risque;
  font-size: 55px;
  position: absolute;
  top: 2%;
  left: 42%;
}

.dashboard-no-2 {
  font-family: Risque;
  font-size: 55px;
  position: absolute;
  top: 2%;
  left: 35%;
}

.dashboard-no-go {
  font-family: Risque;
  font-size: 55px;
  position: absolute;
  top: 2%;
  left: 10%;
}

.footer-slide {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: #0000004f;
}

.footer-slide-layoutbtn {
  width: 100px;
  height: 50px;
  display: flex;
  align-items: center;
}
/* Hide and Seek  */

/* Modal  */
.progress-acti-modal-mainlayout {
  background: #553d61;
  box-shadow: 2px 2px 6px 0px #000;
  border-radius: 10px;
  padding: 20px;
  display: block;
}

.progress-acti-modal-outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
  background: #00000071;
  margin: 20px;
}

.modal-close-btn {
  font-size: 20px;
}

.progress-acti-modal-layout-HS {
  position: relative;
  width: 100%;
  /* height: 350px; */
}

.progress-acti-modal-layout-HS-item-1 {
  position: absolute;
  top: -4%;
  width: 60%;
  z-index: 5;
}
.progress-acti-modal-layout-HS-item-2 {
  position: absolute;
  top: 1%;
  right: 7%;
  width: 54%;
  z-index: 4;
}
.progress-acti-modal-layout-HS-item-3 {
  position: absolute;
  bottom: 0%;
  right: 5%;
  width: 60%;
  z-index: 3;
}
.progress-acti-modal-layout-HS-item-4 {
  position: absolute;
  bottom: 0%;
  left: -1%;
  width: 60%;
}
.progress-acti-modal-layout-HS-item-5 {
  position: absolute;
  top: 13%;
  right: 16%;
  width: 70%;
  z-index: 10;
}

.fade-in {
  animation: fade-in 4s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.image-container {
  display: none;
}
.animation {
  animation: fade-in 4s;
}
/* @keyframes fadeIn {
  to {
    opacity: 1;
  }
} */