@font-face {
    font-family: 'Geologica';
    src: url('../fonts/Geologica/GeologicaRoman-Black.woff');
  }

@font-face {
    font-family: 'Geologica Regular';
    src: url('../fonts/Geologica/GeologicaRoman-Regular.woff');
}
form, main {
    text-align: center;
}
.row-mini {
  padding-left: 18rem !important;
  padding-right: 18rem !important;
}
.step-title {
    margin-top: 0.5;
    margin-bottom: 2.5rem;
    font-size: 1.875rem;
    letter-spacing: .35px;
    font-weight: 600;
    text-align: center;
    font-family: Geologica;
    color: white;
}
.step-test {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.main-test {

  text-align: center;
}

.checkbox {
  margin: 15px;
}

ul {
  padding-left: 60px !important;
  list-style-type: none;
}

label {
  letter-spacing: 1px;
}

@keyframes pull {
  0% {
    height: 0;
  }
  100% {
    height: 1.2rem;
  }
}
@keyframes pop {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
  }
}
.checkbox-flip, .checkbox-pop, .checkbox-pull, .checkbox-spin {
  display: none;
}

.checkbox-flip + label span,
.checkbox-pop + label span,
.checkbox-pull + label span,
.checkbox-spin + label span {
  display: inline-block;
  width: 25px;
  height: 20px;
  /*layout relationship between check and label*/
}
.checkbox-flip + label span:before, .checkbox-flip + label span:after,
.checkbox-pop + label span:before,
.checkbox-pop + label span:after,
.checkbox-pull + label span:before,
.checkbox-pull + label span:after,
.checkbox-spin + label span:before,
.checkbox-spin + label span:after {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  content: "";
  position: absolute;
  z-index: 1;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: 2px solid #e0e0e0;
}

.checkbox-flip2 + label span:before {
  border: 2px solid #f37500 !important;
}

.checkbox-flip + label span:after,
.checkbox-pop + label span:after,
.checkbox-pull + label span:after,
.checkbox-spin + label span:after {
  z-index: 0;
  border: none;
}

.checkbox-flip:checked + label span:before {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background: #e0e0e0;
}

.checkbox-pop:checked + label span:before {
  animation: pop 0.3s ease;
  z-index: 100;
  background: #e0e0e0;
}

.checkbox-pull:checked + label span:after {
  width: 1.2rem;
  height: 1.2rem;
  background: #e0e0e0;
  animation: pull 0.4s linear;
}

.checkbox-spin:checked + label span:before {
  -webkit-transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  -ms-transform: rotateZ(180deg);
  -o-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
  background: #e0e0e0;
}
li span {
    margin-right: 1.6rem !important;
}
li {
    font-family: Geologica Regular !important;
    color: #ffffff;
    text-align: left;
    font-size: 1.4rem;
}


/*VARIABLE*/
/*END VARIABLE
---------------------------------------------------------*/
/*GENERAL*/
* {
    box-sizing: border-box;
  }
  
  body {
    background: #e8e8e8;
  }
  
  .button {
    position: absolute;
    /* прижимаем блок к нижней границе относительно блока с position: relative*/
    bottom: 80px;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
  }
  .button2 {
    margin-top: 3.8rem;
    position: relative;
    display: flex;
    justify-content: center;
  }
  .form-swap {
    opacity: 0;
    animation: fade 1s forwards;
  }
  /*END GENERAL
  ---------------------------------------------------------*/
  /*BUTTONS CREATION*/
  .back,
  .next {
    position: relative;
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    border: solid #999 3px;
    border-radius: 100%;
  }
  #page_form {
    position: relative;
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    font-family: Geologica;
    font-size: 2rem;
    border-radius: 100%;
  }
  #send {
    font-family: Geologica Regular;
    
  }
  .next, #send {
    margin-left: 40px;
  }
  .back {
    margin-right: 40px;
  }
  .back:before,
  .next:before {
    content: " ";
    display: block;
    position: absolute;
    width: 35%;
    height: 35%;
    border: solid #999 3px;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg) skewX(10deg) skewY(10deg);
  }
  
  .back:before {
    border-right: none;
    border-bottom: none;
    left: 58%;
  }
  
  .next:before {
    border-top: none;
    border-left: none;
    left: 42%;
  }
  
  /*END BUTTONS CREATION
  ---------------------------------------------------------*/
  /*EFFECT*/
  .back,
  .next {
    cursor: pointer;
    /*transition: all $btTransiTime linear;*/
  }
  .back:before,
  .next:before {
    /*transition: all $btTransiTime linear;*/
  }
  .back:hover,
  .next:hover {
    border-width: 4px;
    border-color: #ffffff;
  }
  .back:hover:before,
  .next:hover:before {
    border-width: 4px;
    border-color: #ffffff;
  }
  
  .back:active:before {
    left: 52%;
  }
  
  .next:active:before {
    left: 48%;
  }
  
  .btclick {
    border-width: 5px;
    border-color: #ffffff;
  }

  .center-block{
    margin-left: auto;
    margin-right: auto;
    padding-top: 12rem;
    height: 100dvh;
  }
  .numberPhone:focus {
    border-color: #ffffff;
  }
  .numberPhone {
    color: rgba( 255, 255, 255, 1) !important;
    background: rgba( 255, 255, 255, .5 ) !important;
  }
  .form-control {
    background: rgba( 255, 255, 255, .2 ) !important;
  }
  .person, .numberPhone {
    font-family: Geologica Regular;
    font-size: 1.2rem;
  }
  .mi > span {
    margin-right: 20px;
  } 
  .mi {
    text-align: justify;
  }
  .person {
    width: 27vw;
  }
  .person-perant {
    display: flex !important;
    align-items: center;
    flex-direction: column;
  }
  .btn2 {
    margin-top: 2px;
    white-space: nowrap;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    line-height: 1.5;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
    margin-right: 1.5rem !important;
    border-radius: 4px;
    box-shadow: none !important;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba( 255, 255, 255, 0 );
    border: 1px solid #7a7a7a;
    color: #7a7a7a;
    cursor: pointer;
  }
  .mainBody {
    top: 0;
    left: 0;
    margin: 0;
    width: 100dvw !important;
    height: 100dvh !important;
    background-size: cover;
    background-repeat: no-repeat;
    position: inherit;
    background-position: 50% 50%;
  }
  .btn2:hover{
    background: #7a7a7a !important;
    border: 1px solid #7a7a7a !important;
    color:#ffffff !important;
  }
  .btn2:active {
    background: #7a7a7a !important;
    border: 1px solid #7a7a7a !important;
    color:#ffffff !important;
  }
  .confirm-radio[type=radio] {
    --s: 1em;     /* control the size */
    --c: #939393; /* the active color */
    
    height: var(--s);
    aspect-ratio: 1;
    border: calc(var(--s)/8) solid #939393;
    padding: calc(var(--s)/8);
    background: 
       radial-gradient(farthest-side,var(--c) 94%,#0000) 
       50%/0 0 no-repeat content-box;
    border-radius: 50%;
    outline-offset: calc(var(--s)/10);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    font-size: inherit;
    transition: .3s;
  }
  .confirm-radio[type=radio]:checked {
    border-color: var(--c);
    background-size: 100% 100%;
  }
  
  
  @media print {
    .confirm-radio[type=radio] {
      -webkit-appearance: auto;
      -moz-appearance: auto;
      appearance: auto;
      background: none;
    }
  }

  .confirm {
    text-align: justify;
    margin-top: 10px;
    cursor: pointer;
  }
  
  .borderError{
    border: 1px solid #f37500 !important;
  }

  #survey {
    opacity: 0;
    animation: fade 1s forwards;
  }
  /* #end {
    opacity: 0;
    animation: fade 1s forwards;
  } */
  .startShake {
    animation: horizontal-shaking 0.3s forwards;
  }
  @keyframes fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

  @keyframes horizontal-shaking {
    0% { transform: translateX(0) }
    25% { transform: translateX(5px) }
    50% { transform: translateX(-5px) }
    75% { transform: translateX(5px) }
    100% { transform: translateX(0) }
   }

   .tg-info{
    position: absolute;
    right: 40px;
    bottom: 40px;
    font-family: Geologica Regular;
    font-size: 1.7rem;
    color: rgba(49, 22, 1, 0.61);
    border-radius: 20px;
    padding-top: auto;
    padding-bottom: auto;
    background: rgba( 255, 255, 255, 0.75);
    border: 1px solid rgba( 255, 255, 255, 1);
    box-shadow: 2px 2px 4px rgba(0, 0.4, 0, 0.4);
   }
   .tg-info-text{
    text-align: left;
    margin-left: 20px;
    float: left;
	color:#000000;
   }
   .bi-telegram{
    font-size: 3.5rem !important;
    margin-left: 20px;
    margin-right: 20px;
    float: right;
   }
   .tg-info > a {
      text-decoration: none;
      color: rgba(49, 22, 1, 0.61);
   } 

   @media ((max-height: 900px)) {
    .center-block  {
      padding-top: 7rem;
    }
    .slider-text h1 {
      font-size: 2.75rem;
    }
    .tg-info {
      font-size: 1.3rem;
    }
    .bi-telegram {
      font-size: 3rem !important;
   }

  }
  @media ((max-height: 650px)) {
    .center-block  {
      padding-top: 4rem;
    }
    .step-title  {
      margin-bottom: 10px;
    }
  }
  @media ((max-height: 591px)) {
    .step-title  {
      margin-bottom: 10px;
    }
    .center-block  {
      padding-top: 3rem;
    }
    .back, .next {
      width: 40px;
      height: 40px;
    }
    #page_form {
      position: relative;
      display: block;
      float: left;
      width: 20px;
      height: 20px;
      font-family: Geologica;
      font-size: 1.6rem;
      border-radius: 100%;    
    }
    label {
      margin-bottom: 0rem !important;
    }
  }
  @media ((max-width: 1075px)) {
    .button {
      bottom: 8px;
    }
    .col-md-6{
      flex: 0 0 100% !important;
      max-width: 100dvw !important;
      width: 100dvw !important;

    }
    .slider-text h1 {
      font-size: 3rem;
    }
    .btn {
      font-size: 28px !important;
     }
  }
  @media ((max-width: 771px)) {
    .close{
      top: 10px;
    }
    .step-title {
      font-size: 1.8rem;
    }
    li {
      font-size: 1.2rem;
    }
    .slider-text h1 {
      font-size: 2.2rem;
    }
    .tg-info {
      font-size: 1.2rem;
    }
    .bi-telegram {
      font-size: 2.5rem !important;
   }
    .col-md-6{
      text-align: center;
    }
    .tg-info {
      right: auto;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, 0%);
    }
    .btn {
      font-size: 20px !important;
     }
     h2 {
      font-size: 1.7rem !important;
     }
  }
  @media ((max-width: 1609px)) {
    .person {
      width: 33vw;
  }
  }
  @media ((max-width: 1309px)) {
    .person {
      width: 38vw;
  }
  }
  @media ((max-width: 1383px)) {
    .row-mini {
      padding-left: 12rem !important;
      padding-right: 12rem !important;
    }
  }
  
  @media ((max-width: 1100px)) {
    .person {
      width: 43vw;
  }
    .row-mini {
      padding-left: 8rem !important;
      padding-right: 8rem !important;
    }
  }

  @media ((max-width: 965px)) {
    .person {
      width: 50vw;
  }
    .row-mini {
      padding-left: 4rem !important;
      padding-right: 4rem !important;
    }
  }
  @media ((max-width: 835px)) {
    .person {
      width: 60vw;
  }
    .row-mini {
      padding-left: 16px !important;
      padding-right: 4px !important;
    }
    .close {
      right: 5px;
      top: 5px;
      padding: 0px !important;
      margin: 0px !important;
    }
    .step-title  {
      margin-bottom: 10px;
    }
  }
  @media ((max-width: 625px)) {
    .person {
      width: 70vw;
  }
  .close {
    right: 5px;
    top: 5px;
    padding: 0px !important;
    margin: 0px !important;
  }
  .step-title  {
    margin-bottom: 10px;
  }
}
  @media ((max-width: 520px)) {
      .person {
        width: 80vw;
    }
    .row-mini {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
    .step-title {
      margin-bottom: 10px;
    }
    .close {
      right: 5px;
      top: 5px;
      padding: 0px !important;
      margin: 0px !important;
    }

    .slider-text h1 {
      font-size: 1.8rem;
    }
    .tg-info {
      font-size: 1.1rem;
    }
    .bi-telegram {
      font-size: 2.2rem !important;
   }
    .btn {
      font-size: 16px !important;
     }
     h2 {
      font-size: 1.3rem !important;
     }
  }
  
  @media ((max-width: 430px)) {
    .close {
      right: 5px;
      top: 5px;
      padding: 0px !important;
      margin: 0px !important;
    }
    .person {
      width: 95vw;
  }
  .back {
    margin-right: 15px;
  }

  .next, #send {
    margin-left: 15px;
  }

    .tg-info {
      font-size: 1rem;
    }
    .bi-telegram {
      font-size: 2rem !important;
   }

  }

  @media ((max-width: 397px)) {
    select {
      font-size: 16px !important;
    }
    h2 {
      font-size: 1.2rem !important;
     }
    .slider-text h1 {
      font-size: 1.8rem;
    }
    .btn {
      font-size: 13px !important;
     }
    .tg-info {
      font-size: 0.9rem;
    }
    .bi-telegram {
      font-size: 1.8rem !important;
   }

  }

  @media ((max-width: 361px)) {
    h2 {
      font-size: 1.1rem !important;
     }
    .slider-text h1 {
      font-size: 1.55rem;
    }
    .btn {
      font-size: 13px !important;
     }
    .tg-info {
      font-size: 0.8rem;
    }
    .bi-telegram {
      font-size: 1.7rem !important;
   }

  }

  @media ((max-width: 330px)) {
    .step-title {
      font-size: 1.35rem;
      margin-bottom: 10px;
    }
    ul {
      padding-left: 5px !important;
    }
    li {
      font-size: 0.9rem;
  }
  .btn2{ margin-right: 0px !important;}
    h2 {
      font-size: 1.1rem !important;
     }
    .slider-text h1 {
      font-size: 1.55rem;
    }
    .btn {
      font-size: 13px !important;
     }
    .tg-info {
      font-size: 0.8rem;
    }
    .bi-telegram {
      font-size: 1.7rem !important;
      margin-left: 1px;
      margin-right: 1px;
   }
   .tg-info-text {
    margin-left: 3px;
   }
  }

  input[type="date"]{
    background:  rgba( 255, 255, 255, 0.2 );
    font-family: Geologica Regular;
    color: #ffffff;
    font-size: 23px;
    text-align: center;
    border: none;
    outline: none;
    border-radius: 8px;
}
.redBorder {
  border: 2px solid #f37500 !important;
}
::-webkit-calendar-picker-indicator{
  margin-top: 2px;
  margin-right: 8px;
  filter: invert(1);
  color: #999;
  cursor: pointer;
}

.date-step {
  padding-left: 8px !important;
}

.date-step > li {
  text-align: center;
}

select {
  margin-top: 1rem;
  padding: 10px 5px;
  border: 1px solid white;
  background: rgba( 255, 255, 255, 0 );
  font-family: Geologica Regular;
  color: #ffffff;
  font-size: 23px;
  text-align: center;
  outline: none;
  border-radius: 8px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: no-repeat right url('../images/down-arrow.png')
}

select option {
  font-family: Geologica Regular;
  margin: 40px;
  padding-top: 3px;
  padding-bottom: 3px;
  background: rgb(255, 255, 255);
  color: #2d2d2d;
  text-shadow: 0 1px 0 rgb(119, 117, 117);
}

select::-ms-expand {
  display: none;
  /* remove default arrow on ie10 and ie11 */
}
@media screen and (min-width:0\0) {
  select {
    background: none\9;
    padding: 5px\9;
  }
}