/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/roboto-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/roboto-cyrillic.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/roboto-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/roboto-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
  height: 100%;
  background-color: black;
}

.modal {
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

.modal-body {
  display: flex;
  width: 420px;
  height: 420px;
  border-radius: 210px;
  background: white;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.modal-title {
  font-family: Roboto;
  font-size: 24px;
  line-height: 28px;
}

.modal-btn-wrapper {
  margin: 32px;
}

.modal-btn {
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -ms-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
  opacity: 0.3;
  font-family: Roboto;
  font-size: 16px;
  line-height: 19px;
  border: 2px solid black;
  padding: 6px 32px;
  color: black !important;
  cursor: pointer;
  text-decoration: none;
}

.ready {
  opacity: 1;
}

.audio-loading {
  position: absolute;
  margin-left: -10px;
  margin-top: 12px;
  font-family: Roboto;
  color: black;
  opacity: 0.3;
  font-size: 12px;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -ms-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.modal-icon {
  font-size: 52px;
  line-height: 61px;
  margin: 16px;
  font-family: Roboto;
}

.background-shadow {
  height: 100%;
  background-color:rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
}

.light {
  background-color:rgba(0, 0, 0, 0);
}

.text {
  width: 92%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  color: white;
  font-family: Roboto;
  font-size: 24px;
  line-height: 40px;
}

@media (min-width: 600px) {
  .text {
    padding: 80px 80px;
    font-size: 50px;
    line-height: 64px;
  }
}

.background-img {
  width: 100%;
  height: 100%;
  background-color: black;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
}

.img-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.img-content {
  background-color:rgba(0, 0, 0, 0.3);
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
}