@media (max-width: 1920px) {
/* COMMON START */
  main {
    position: relative;
    margin: 0 auto;
    aspect-ratio: 9/16;
    width: 67.5rem;
    height: 100vh;
    height: 100svh;
    max-height: 100vh;
    max-height: 100svh;
  }

  section {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
/* COMMON END */

/* PROBIRKA START */
  .probirka {
    position: absolute;
    bottom: 37.75rem;
    left: 50%;
    width: 9.1875rem;
    height: 50rem;
    background: url('../img/svg/probirka.svg') no-repeat 50%/contain  ;
    border-radius: 6.25rem 6.25rem 10rem 10rem;
    transform: translate(-50%, 0);
    overflow: hidden;
  }

  .probirka__zhidkost {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transition: 0.6s;
  }

  /*.probirka__zhidkost::before {
    content:'';
    position: absolute;
    top: -3.375rem;
    left: 0;
    width: 100%;
    height: 6.4375rem;
    background: url('../img/svg/probirka-top.svg') no-repeat 50%/contain;
  }*/

  
  .probirka__up-circle {
    content:'';
    position: absolute;
    top: -3.375rem;
    left: 0;
    width: 100%;
    height: 6.4375rem;
    background: url('../img/svg/probirka-top.svg') no-repeat 50%/contain;
  }

  .probirka__bubbles  {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .bubble {
      position: absolute;
      bottom: -3.125rem;
      border-radius: 50%;
      animation-timing-function: linear;
      pointer-events: none;
      transition: 0.5s;
  }

  .bubble.size-1 { width: 1.25rem; }
  .bubble.size-2 { width: 2.25rem; }
  .bubble.size-3 { width: 4.375rem; }
  .bubble.size-4 { width: 6rem; }
  .bubble.size-5 { width: 7.5rem; }
  .bubble.size-6 { width: 9.75rem; }
  .bubble.size-7 { width: 10.75rem; }
/* PROBIRKA END */

/* WAVES START */
  .waves {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
  }

  .waves i {
    display: block;
    display: block;
    position: absolute;
    left: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: contain;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transition: transform 0.1s linear;
  }

  .waves .wave-1 {
    bottom: -37.5rem;
    width: 145.062rem;
    background-image: url('../img/svg/bg-wave-1.svg');
    z-index: 1;
  }

  .waves .wave-2 {
    bottom: -21.5625rem;
    width: 143.312rem;
    background-image: url('../img/svg/bg-wave-2.svg');
    z-index: 0;
  }
/* WAVES END */

/* BEGINNING START */
  .beginning__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
  }

  .beginning__title p {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 2.625rem;
    width: 15.0625rem;
    height: 5.375rem;
    font-size: 2.9375rem;
    background: linear-gradient(90deg, #a87f36 0%, #f8d490 37.5%, #f8d490 59.5%, #a87f36 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .beginning__title p::before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/svg/beginning-game.svg') no-repeat 50%/contain;
    pointer-events: none;
  }

  .beginning__title h1 {
    margin: 0;
    font-size: 8rem;
    text-transform: uppercase;
    background: linear-gradient(90deg, #a87f36 0%, #f8d490 37.5%, #f8d490 59.5%, #a87f36 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .beginning__loading {
    position: absolute;
    bottom: 39.125rem;
    left: 50%;
    padding: 1.375rem 1.625rem;
    width: 45.8125rem;
    height: 9.5625rem;
    border: 0.0625rem solid #FEF3B7;
    transform: translateX(-50%);
  }

  .beginning__loading::before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(21, 19, 13, 1);
    z-index: 1;
    pointer-events: none;
  }

  .beginning__loading .wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    box-shadow: 0 0.25rem 6.125rem rgba(255, 254, 205, 0.68);
  }

  .beginning__loading .bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    text-align: center;
    background: linear-gradient(90deg, #a87f36 0%, #f8d490 37.5%, #f8d490 59.5%, #a87f36 100%);
    overflow: hidden;
    z-index: 1;
  }

  .beginning__loading .bar p {
    margin: 0;
    color: #000;
    font-size: 3rem;
  }

  .beginning__start .probirka { bottom: 29.375rem; }

  .beginning__start .button {
    position: absolute;
    bottom: 12.875rem;
    left: 50%;
    transform: translateX(-50%);
  }
/* BEGINNING END */

/* RULES START */
  .rules {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
  }

  .rules h4 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 2.625rem;
    width: 15.0625rem;
    height: 5.375rem;
    font-size: 2.9375rem;
    background: linear-gradient(90deg, #a87f36 0%, #f8d490 37.5%, #f8d490 59.5%, #a87f36 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .rules h4::before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/svg/beginning-game.svg') no-repeat 50%/contain;
    pointer-events: none;
  }

  .rules h3 {
    margin-bottom: 3.875rem;
    font-size: 6rem;
    text-transform: uppercase;
    background: linear-gradient(90deg, #a87f36 0%, #f8d490 37.5%, #f8d490 59.5%, #a87f36 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .rules ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .rules ul li:last-child { margin-bottom: 0; }

  .rules ul li p {
    margin-bottom: 3rem;
    font-size: 3rem;
    text-transform: uppercase;
  }

  .rules ul li img {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 10.875rem;
    border-radius: 50%;
    box-shadow: 0 0.3125rem 4rem 0 rgba(248, 212, 144, 0.58);
  }

  .rules .button {
    position: absolute;
    bottom: 12.875rem;
    left: 50%;
    transform: translateX(-50%);
  }
/* RULES END */

/* GAME START */
  .game__btns {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    bottom: 6.875rem;
    left: 0;
    width: 100%;
  }

  .game__btns li { margin: 0 2.3125rem; }

  .game__btns .icon {
    position: relative;
    margin: 0 auto 3.125rem;
    width: 14.75rem;
    height: 14.75rem;
    border-radius: 50%;
    box-shadow: 0 0.3125rem 4rem 0 rgba(248, 212, 144, 0.58);
    cursor: pointer;
  }

  .game__btns .icon svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .game__btns .icon .icon__start { opacity: 0; }
  .game__btns .icon .icon__full { opacity: 1; }

  .game__btns p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 2.375rem;
    text-align: center;
  }

  .game__btns .icon .icon__start,
  .game__btns .icon .icon__full {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.5s ease;
  }
/* GAME END */

/* SATURATION START */
  .saturation {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    top: 4.375rem;
    left: 0;
    width: 100%;
  }

  .saturation li {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 2.5rem;
    text-align: center;
  }

  .saturation li .top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
  }

  .saturation li .top img { margin-right: 1.125rem; }

  .saturation li .top img.ver { width: 0.9375rem; }
  .saturation li .top img.hor { height: 0.9375rem; }

  .saturation li .top svg { margin-right: 1.125rem; }

  .saturation li .top svg.ver { width: 0.9375rem; }
  .saturation li .top svg.hor { height: 0.9375rem; }

  .saturation li .top h3 {
    margin: 0;
    font-size: 4.4375rem;
    background: linear-gradient(90deg, #a87f36 0%, #f8d490 37.5%, #f8d490 59.5%, #a87f36 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .saturation li p {
    margin: 0 0 2.375rem;
    height: 4.375rem;
    font-size: 1.875rem;
    background: linear-gradient(90deg, #a87f36 0%, #f8d490 37.5%, #f8d490 59.5%, #a87f36 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .saturation__bar {
    position: relative;
    margin: 0 auto;
    width: 16.25rem;
    height: 1.125rem;
    background: url('../img/svg/saturation-bar.svg') no-repeat 50%/contain;
  }

  .saturation__bar i {
    display: block;
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: 0.0625rem solid #fff;
    border-radius: 50%;
  }

  .saturation__bar i b {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.75rem;
    height: 0.75rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0.0625rem 1.0625rem rgba(255, 255, 255, 1.0);
    transform: translate(-50%, -50%);
  }
/* SATURATION END */

/* CATONOMETR START */
  .catonometr {
    position: absolute;
    top: 25rem;
    left: 6.25rem;
    width: 13.9375rem;
    height: 13.625rem;
  }

  .catonometr__dashboard {
    width: 13.9375rem;
    height: 11.9375rem;
  }

  .catonometr__arrow {
    position: absolute;
    top: 0.625rem;
    left: 50%;
    width: 1.25rem;
    height: 8.375rem;
    transform: translate(-50%, 0%) rotate(0deg);
  }

  .catonometr__cat {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    width: 5.1875rem;
    transform: translate(-50%, 0);
  }
/* CATONOMETR END */

/* VORTEX START */
  .vortex {
    position: absolute;
    left: 50%;
    width: 40.3125rem;
    height: 21.25rem;
    transform: translateX(-50%);
    z-index: 1;
  }

  .vortex img {
    position: absolute;
    transform-origin: center center;
  }

  .vortex__1 { top: -1.5rem; left: 10.875rem; width: 23.5625rem; }
  .vortex__2 { top: 0; left: -1.625rem; width: 17.375rem; }
  .vortex__3 { top: 0.25rem; right: -1.5rem; width: 21.5625rem; }
  .vortex__4 { top: 4.125rem; left: -0.625rem; width: 27.3125rem; }
  .vortex__5 { top: 7.75rem; left: 11.5rem; width: 24.8125rem; }
  .vortex__6 { top: 9.75rem; left: 10.5rem; width: 24.8125rem; }
  .vortex__7 { bottom: -0.875rem; left: 8.125rem; width: 3.75rem; }
  .vortex__8 { bottom: -0.875rem; right: 6.25rem; width: 4.25rem; }
/* VORTEX END */

/* MODAL START */
  .modal-backdrop.show { display: none; }

  .modal-dialog { margin-left: auto; margin-right: auto; max-width: 53.25rem; }

  .modal-content {
    background: rgba(0, 0, 0, 0.79);
    box-shadow: 0 1.1875rem 9.9375rem 0 rgba(255, 232, 148, 0.36);
    border-width: 0.125rem;
    border-style: solid;
    border-image: linear-gradient(90deg, #a87f36 0%, #f8d490 37.5%, #f8d490 59.5%, #a87f36 100%) 1;
    backdrop-filter: blur(1rem);
  }

  .modal-body { padding: 4.875rem 3.75rem; }
  .modal-ph .modal-body { padding: 5.625rem 5.3125rem 6.25rem; }

  .modal-body :last-child { margin-bottom: 0 !important; }

  .modal-ico {
    margin: 0 auto 3.125rem;
    width: 10.3125rem;
    height: 10.3125rem;
    border-radius: 50%;
    box-shadow: 0 0.25rem 2.125rem 0 rgba(254, 243, 183, 0.5);
  }

  .modal-title {
    margin-bottom: 3.125rem;
    font-weight: 700;
    font-size: 3rem;
    text-transform: uppercase;
    text-align: center;
  }

  .modal-text {
    margin-bottom: 3.125rem;
    color: #fff;
    font-size: 3rem;
    text-align: center;
  }

  .modal-text-small {
    margin-bottom: 1.125rem;
    color: #fff;
    font-size: 2.3rem;
    text-align: center;
  }

  .modal-text b { font-weight: 800; }

  .modal .button { margin-bottom: 4.375rem; }

  .modal-foot {
    margin: 0;
    font-size: 1rem;
    text-align: center;
    opacity: 0.58;
  }

  .ph {
    margin: 0 auto 4.875rem;
    width: 22rem;
  }

  .ph h3 {
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
    text-align: right;
  }

  .ph__table ul { display: flex; }

  .ph__table .numbers { margin-bottom: 1rem; }

  .ph__table .numbers li {
    margin: 0 0.3125rem;
    width: 2.5rem;
    font-size: 1.125rem;
    text-align: center;
  }

  .ph__table .colors { position: relative; }

  .ph__table .colors::before {
    content:'';
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(100% + (0.625rem * 2));
    height: 100%;
    border: 0.125rem solid #FEF3B7;
    transform: translate(-50%, 0);
    z-index: 1;
  }

  .ph__table .colors li {
    position: relative;
    margin: 0 0.3125rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .ph__table .colors li::before {
    content:'';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: calc(100% + (0.625rem * 2));
    border: 0.125rem solid #FEF3B7;
    transform: translate(0, -50%);
    z-index: 1;
  }

  .ph__table .colors li i {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
  }

  .modal-probirka {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 5.625rem;
  }

  .modal-probirka .probirka {
    position: relative;
    bottom: 0;
    left: 0;
    width: 5.5625rem;
    height: 30.1875rem;
    transform: translate(0, 0);
  }

  .modal-probirka .vortex { top: 7.25rem; }
/* MODAL END */
}

@media (max-width: 1080px) {
	main { width: 100%; }
}

@media (orientation: landscape) and (max-width: 1920px) {
	main { width: 67.5rem; }
}