/* Блок «Российский сканер для проверки подлинности паспорта» */
/*
xs  < 576px — базовые стили
sm  ≥ 576px
md  ≥ 768px
lg  ≥ 992px
xl  ≥ 1200px
xxl ≥ 1400px
*/

.scaner-section {

  .scaner-black-circle {
    position: absolute;
    z-index: -1;
    background: #101a18;
    border-radius: 50%;
    top: 50%;
    right: 50%;
    transform: translateX(40%) translateY(-60%);
    width: 755px;
    height: 755px;
  }

  .raspoznavanie-passporta-collage {
    display: flex;
    justify-content: right;
    position: relative;
    width: 100%;
    max-width: 568px;

    .raspoznavanie-passporta-scanner {
      position: relative;
      width: 305px;
      height: auto;
    }
  }
}


/* ========================================
   (≥ 576px)
   ======================================== */
@media only screen and (min-width: 576px) {

}

/* ========================================
   (≥ 768px)
   ======================================== */
@media only screen and (min-width: 768px) {
  .scaner-section {
    margin-bottom: 270px;
    padding-top: 150px;

    .scaner-black-circle {
      top: 50%;
      right: 0;
      transform: translateX(40%) translateY(-50%);
      width: 1227px;
      height: 1227px;
    }

    .raspoznavanie-passporta-collage {
      display: block;

      .raspoznavanie-passporta-scanner {
        max-width: none;
        width: 450px;
        height: auto;
        left: -160px;
        top: 3px;
      }
    }
  }
}

/* ========================================
   (≥ 992px)
   ======================================== */
@media only screen and (min-width: 992px) {
  .scaner-section {

    .scaner-black-circle {
      top: 50%;
      right: 0;
      transform: translateX(30%) translateY(-50%);
      width: 1300px;
      height: 1300px;
    }

    .scaner-white-circle {
      position: absolute;
      z-index: -1;
      background: white;
      border-radius: 50%;
      top: 50%;
      left: 0;
      transform: translateX(-100%) translateY(-50%);
      width: 440px;
      height: 440px;
    }


    .raspoznavanie-passporta-collage {

      .raspoznavanie-passporta-scanner {
        max-width: none;
        width: 562px;
        height: auto;
        left: -147px;
        top: -215px;
      }

      .raspoznavanie-passporta-v-trekh-diapazonah {
        position: absolute;
        width: 284px;
        left: 0;
        top: 50px;
      }

      .raspoznavanie-passporta-green-frame {
        position: absolute;
        width: 308px;
        height: 412px;
        border: 6px solid #00b09a;
        left: -12px;
        top: 38px;
      }
    }
  }

  .scaner-section .scaner-black-circle {
    transform: translateX(1200px) translateY(-50%) scale(1);
    opacity: 0;
    transition: opacity 0.9s ease, transform 0.9s ease;
  }

  .scaner-section.animation-on .scaner-black-circle {
    transform: translateX(30%) translateY(-50%);
    opacity: 1;
  }

  .scaner-section .scaner-white-circle {
    transform: translateX(-1200px) scale(1);
    opacity: 0;
    transition: opacity 0.9s ease, transform 0.9s ease;
  }

  .scaner-section.animation-on .scaner-white-circle {
    transform: translateX(-100%) translateY(-50%) scale(1);
    opacity: 1;
  }
}

/* ========================================
   (≥ 1200px)
   ======================================== */
@media only screen and (min-width: 1200px) {
  .scaner-section {
    margin-bottom: 400px;

    .raspoznavanie-passporta-collage {
      left: 100px;

      .raspoznavanie-passporta-v-trekh-diapazonah {
        width: 284px;
        left: -160px;
        top: -30px;
      }

      .raspoznavanie-passporta-green-frame {
        left: -172px;
        top: -42px;
      }
    }
  }
}

/* ========================================
   (≥ 1400px)
   ======================================== */
@media only screen and (min-width: 1400px) {

}