@font-face {
    font-family: 'Helvetica Neue LT Std';
    src: url('../fonts/Helvetica-Neue-LT/Helvetica-Neue-LT.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

div{
    height: 100%; 
} 
html,body{
    background-color: #1D1C1D;
    max-width: 100%;
    height: 100%;
}
.h-fit-content{
    height: fit-content;
}
.h-fill-available{
    height: -webkit-fill-available;
}
.w-fit-content{
    width: fit-content;
}
.position-relative{
    position: relative;
    height: 100%;
}
.steps{
    position: relative;
    height: 100%;
}
.start_div_gradiant{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(0deg, #000000 45.89%, rgba(35, 31, 32, 0) 84.81%);
}
.hidden{
    display: none;
}
.text-yellow{
    color: #E58E1A;
}
.text-shade-black{
    color: #263238;
}
.bg-white-shade{
    background-color: #fff;
}
.bg-black{
    background-color: #000;
}
.bg-black-shade{
    background-color: #1E1D1E;
}
.bg-black-shade{
    background-color: #231F20;
}
.bg-yellow{
    background-color: #E58E1A;
}
.bg-texture{
    background: url('..//images/bg-texture.png');
    background-size: 100%;
}
.bg_final_rank_image{
    background: url('..//images/rank-bg.png');
    background-size: 100%;
}
.bg_rank_image{
    background: url('..//images/rank-texture.png');
    background-size: 100%;
}
.bg_final_rank_texture{
    background: url('..//images/rank-texture.png');
    background-size: 100%;
}
.bg_screem_texture{
    background: url('..//images/rank-texture.png');
    background-size: 100%;
}
.bg_screem_texture{
    background: url('..//images/screem_texture.png');
    background-size: 100%;
}
.btn-texture{
    background: url('..//images/btn-texture.png') #E58E1A;
    background-size: 100%;
}
.ml-10{
    margin-left: 10px;
}
.cp-1{
    padding: 25px 20px;
    height: fit-content;
}
.cp-2{
    padding: 15px 15px;
    height: fit-content;
}
.cp-3{
    padding: 7px 20px;
}
.cp-4{
    padding: 0 25px;
}
.cp-5{
    padding: 0 30px;
}
.cp-6{
    padding-top: 10%;
}
.cp-7{
    padding: 5px 20px;
}
.title-1{
    font-family: 'Helvetica Neue LT Std';
    font-size: 27.58px;
    font-weight: 700;
    line-height: 33.09px;
    text-align: left;
}
.title-2{
    font-family: 'Helvetica Neue LT Std';
    font-size: 24.82px;
    font-weight: 700;
    line-height: 29.78px;
    text-align: center;
}
.title-3{
    font-family: 'Helvetica Neue LT Std';
    font-size: 33.09px;
    font-weight: 700;
    line-height: 39.71px;
    text-align: center;
}
.title-4{
    font-family: 'Helvetica Neue LT Std';
    font-size: 36px;
    font-weight: 700;
    line-height: 43.2px;
    text-align: center;
}
.title-5{
    font-family: 'Helvetica Neue LT Std';
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}
.title-6{
    font-family: 'Helvetica Neue LT Std';
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
}
.title-7{
    font-family: 'Helvetica Neue LT Std';
    font-size: 48px;
    font-weight: 700;
    line-height: 57.6px;
    text-align: center;
}
.title-8{
    font-family: 'Helvetica Neue LT Std';
    font-size: 96px;
    font-weight: 700;
    line-height: 115.2px;
    text-align: center;
}
.title-9{
    font-family: 'Helvetica Neue LT Std';
    font-size: 24px;
    font-weight: 700;
    line-height: 28.8px;
}

.br-10{
    border-radius: 10px;
}
.br-5{
    border-radius: 5px;
}
.mybtn{
    Width: 356px;
    Height: 67px;
    border-radius: 10px;
    padding: 11px;
}
.mybtn_position{
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
}
.users-list{
    padding: 0 15px;
    max-height: 100%;
    height: 700px !important;
    overflow-y: scroll;
}
.users-list .active{
    background-color: #000;
    border-radius: 10px;
    padding: 5px 15px;
}
.users-list .active *{
    color: #E58E1A;
}
.double_arrow_position{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: fit-content;
    bottom: 30px;
}
.pr-0{
    padding-right: 0;
}
.pl-0{
    padding-left: 0;
}
.text-left{
    text-align: left;
}
.play_instructions li{
    padding: 25px 0;
}
.myinput{
    font-family: Helvetica Neue LT Std;
    font-size: 24px;
    font-weight: 700;
    line-height: 28.8px;
    border: 2px solid #fff;
    border-radius: 10px;
    width: 100%;
    height: 70px;
    background: #000;
    padding: 0 20px;
    color: #fff;
}
.myinput:focus{
    border-color: #E58E1A;
}
.logo_top_right{
    position: absolute;
    top: 20px;
    right: 20px;
    height: fit-content;
}
.btn_mic_div{
    width: 326px;
    height: 326px;
    border-radius: 100%;
    padding: 77px 0;
}
.rank_value_div{
    width: 326px;
    height: 326px;
    background: #E58E1A;
    border-radius: 100%;
    padding: 100px 0;
}
.error_msg{
    color: red;
}
.sound_wave_div{
    width: 75%;
}
.sound_wave{
    width: 15px;
    height: 0;
    background-color: #000;
    border-radius: 20px;
    margin: 0 5px;
    transition: height 0.01s ease-in;
}
.listening_div{
    transition: height 0.01s ease-in;
}
/* .step6,.step4,.step3,.step2,.step1{
    display: none;
}
.step5{
    display: block;
} */
.attemps_summery_div{
    display: none;
    height: fit-content;
}
.attemps_summery{
    display: none;
    padding: 10px 20px;
    position: absolute;
    height: fit-content;
    width: 100%;
    bottom: 0;
}
.attemps_summery>div{
    padding: 0px 20px;
}

.bg_animation { 
    width: 1500px;
    height: 1500px;
    background: transparent url(../images/bg-animation.png) no-repeat;
    background-size: cover;
    position: absolute;
    z-index: 1;
    top: -37%;
    left: -11%;
}

.bg_animation {
  -webkit-animation-name: rotate;
  -webkit-animation-duration:10s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -moz-animation-name: rotate;
  -moz-animation-duration:10s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
}

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to {  -webkit-transform:rotate(360deg);}
}

@-moz-keyframes rotate {
  from {-moz-transform:rotate(0deg);}
  to {  -moz-transform:rotate(360deg);}
}
.bg_animation_main_div{
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}
.animation_content_div{
    position: absolute;
    z-index: 2;
    height: fit-content;
    padding: 40px 0;
}
.btn_waves{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 100%;
    z-index: 0;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .btn_waves {
    -webkit-animation: rotating 10s linear infinite;
    -moz-animation: rotating 10s linear infinite;
    -ms-animation: rotating 10s linear infinite;
    -o-animation: rotating 10s linear infinite;
    animation: rotating 10s linear infinite;
  }

  .party_poper_div{
    width: 100%;
    background-image: url(../images/celebrationa.gif);
    background-size: 100%;
    position: absolute;
    top: 0;
  }