* {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1.55;
}

body {
    -webkit-font-smoothing: antialiased; 
    -webkit-text-size-adjust: 100%;
    font-family: 'TildaSans', Arial, sans-serif;
    position: relative;
    width: 100%;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
  outline: none;
}

html{
	font-size: calc(100vw / 1240 * 10);
}

strong {
  font-weight: 700
}
  
@media screen and (max-width: 1099px) {
	html{font-size: calc(100vw / 1099 * 10);}
}
  
@media screen and (max-width: 959px) {
	html{	font-size: calc(100vw / 959 * 10);	}
}
  
@media screen and (max-width: 639px) {
	html{	font-size: calc(100vw / 639 * 10);	}
}

.logo {
  position: absolute;
  top: 3rem;
  left: calc(50% - 52rem);
  width: 20.3rem;
}

.title {
  position: absolute;
  color: rgb(164, 0, 255);
  left: calc(50% - 22rem);
  font-size: 4.9rem; 
  white-space: nowrap; 
}

.header-text {
  position: absolute;
  top: 8rem;
  left: calc(50% - 22rem);
  width: 55rem;
  color: #5d11e4;
  font-size: 2rem;
}

.first-img {
  position: absolute;
  top: 30rem;
  left: calc(50% - 52rem);
  width: 40rem;   
}

.first-text {
  position: absolute;
  color: #0f30ee;
  top: 30rem;
  left: calc(50% - 5rem);
  width: 52rem;
  font-size: 2rem;
}

.second-img {
  position: absolute;
  top: 80rem;
  left: calc(50% + 6rem);
  width: 44rem;
}

.second-text {
  position: absolute;
    color: #0f30ee;
    top: 80rem;
    left: calc(50% - 54rem);
    width: 56rem;
    font-size: 2rem;
}

.third-img {
  position: absolute;
  top: 120rem;
  left: calc(50% - 60rem + 2.7rem);
  width: 505px;
}

.third-text {
  position: absolute;
  color: #4d0edf;
  top: 120rem;
  left: calc(50%);
  width: 560px;
  font-size: 2rem;
}

.attantion {
  position: absolute;
  color: #ef1111;
  z-index: 29;
  top: 163rem;
  left: calc(50% - 12rem);
  width: 62.4rem;
  height: 43px;
  font-size: 2rem;
}

.attantion2 {
  position: absolute;
  color: #32b1c3;
  top: 167rem;
  left: calc(50% - 28rem);
  width: 560px;
  font-size: 2rem;
}

.bad {
  position: absolute;
  color: #ea1212;
  top: 173rem;
  left: calc(50% - 52rem);
  width: 299px;
  font-size: 2rem;
}

.bad2 {
  position: absolute;
  color: #d128cd;
  z-index: 25;
  top: 173rem;
  left: calc(50% );
  width: 45rem;
  font-size: 2rem;
}

.bad-text {
  position: absolute;
  color: #000000;
  top: 184rem;
  left: calc(50% - 56rem);
  width: 43.7rem;
  font-size: 2rem;
}

.bad-text2 {
  position: absolute;
  color: #000000;
  z-index: 27;
  top: 184rem;
  left: calc(50% - 6rem);
  width: 56rem;
  font-size: 2rem;
}

.checkbox {
  position: absolute;
  color: #000000;
  z-index: 28;
  top: 240rem;
  left: calc(50% - 30rem);
  width: 56rem;
  font-size: 2rem;
}

.signin {
  position: absolute;
  left: calc(50% - 10rem);
  top: 250rem;
  border: 0;
  /*background-color: #00000000;*/
  text-align: center;
  color: #fff;
  font-size: 2rem;
  width: 16rem;
  height: 4rem;
  background-image: linear-gradient(0turn, rgba(239, 10, 10, 1) 70%, rgba(0, 0, 0, 0.102) 100%);
  border-color: transparent;
  border-radius: 30px 30px 30px 30px;
  border-style: solid;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.signin:disabled {
  color: rgb(128, 128, 128);
  background-image: linear-gradient(0turn, rgb(131, 127, 127) 0%, rgba(0, 0, 0, 0) 100%);
}

.bottom-logo {
  position: absolute;
  top: 260rem; 
  left: calc(50% + 16rem);; 
  width: 22.3rem; 
  height: 3.6rem;
}



@media screen and (max-width:1199px) {
  .logo {
    left: calc(50% - 49rem);
    width: 17rem;
  }

  .title {
    left: calc(50% - 20rem);
    font-size: 3.8rem;
  }

  .header-text {
    top: 7rem;
    left: calc(50% - 20rem);
    width: 55rem;
  }

  .first-img {
    top: 30rem;
    left: calc(50% - 52rem);
    width: 38rem;   
  }

  .first-text {
    top: 30rem;
    left: calc(50% - 5rem);
    width: 52rem;
    font-size: 2rem;
  }

  .second-img {
    top: 76rem;
    left: calc(50% + 10rem);
    width: 42rem;
  }
  
  .second-text {
      top: 76rem;
      left: calc(50% - 50rem);
      width: 56rem;
      font-size: 2rem;
  }

  .third-img {
    top: 118rem;
    left: calc(50% - 52rem);
    width: 44rem;
    
  }


  .third-text {
    top: 118rem;
    left: calc(50%);
     
  }

  .attantion {
    top: 160rem;
    left: calc(50% - 8rem);
     
  }

  .attantion2 {
    top: 164rem;
    left: calc(50% - 20rem);
     
  }

  .bad {
    top: 168rem;
    left: calc(50% - 40rem);   
  }

  .bad2 {
    top: 168rem;
    left: calc(50% + 8rem);
     
  }

  .bad-text {
    top: 180rem;
    left: calc(50% - 47rem);
     
  }

  .bad-text2 {
    top: 180rem;
    left: calc(50% + 3rem);
     
  }

  .checkbox {
    top: 230rem;
    left: calc(50% - 480px + 266px);
     
  }

  .singin {
    top: 165rem;
    left: calc(50% - 480px + 639px);
    width: 1rem;
    height: 4rem;
  }

  .bottom-logo {
    top: 250rem; 
    left: calc(50% + 16rem);; 
    width: 22.3rem; 
    height: 3.6rem;
  }

}

@media screen and (max-width:959px) {
  .logo {
    top: 2.6rem;
    left: calc(50% - 43rem);
    width: 17rem;
  }

  .title {
    left: calc(50% - 16rem);
    font-size: 3.8rem;
  }

  .header-text {
    left: calc(50% - 16rem);
  }

  .first-img {
    top: 26rem;
    left: calc(50% - 22rem);
    width: 44rem;   
  }

  .first-text {
    top: 74rem;
    left: calc(50% - 38rem);
    width: 80rem;
    font-size: 2rem;
  }
  .second-img {
    top: 105rem;
    left: calc(50% - 22rem);
    width: 44rem;
  }
  
  .second-text {
      top: 142rem;
      left: calc(50% - 38rem);
      width: 80rem;
      font-size: 2rem;
  }

  .third-img {
    top: 175rem;
    left: calc(50% - 320px + 90px);
    width: 488px;
     
  }

  .third-text {
    top: 215rem;
    left: calc(50% - 37rem);
    width: 75rem;  
  }
  
  .attantion {
    top: 248rem;
    left: calc(50% - 320px + 237px);
     
  }

  .attantion2 {
    top: 252rem;
    left: calc(50% - 320px + 48px);
     
  }

  .bad {
    top: 258rem;
    left: calc(50% - 40rem);
     
  }

  .bad2 {
    top: 258rem;
    left: calc(50%);
     
  }

  .bad-text {
    top: 270rem;
    left: calc(50% - 42rem);
     width: 36rem;
  }

  .bad-text2 {
    top: 270rem;
    left: calc(50% - 4rem);
     
  }

  .checkbox {
    top: 325rem;
    left: calc(50% - 320px + 64px);
     
  }

  .signin {
    top: 335rem;
    left: calc(50% - 5rem);
    width: 14rem;
    height: 4rem;
  }

  .bottom-logo {
    top: 348rem; 
    left: calc(50% + 16rem);; 
    width: 18rem; 
    height: 3.6rem;
  }


}

@media screen and (max-width:639px) {
  .logo {
    top: 2rem;
    left: calc(50% - 28rem);
    width: 14rem;
  }

  .title {
    top: 2rem;
    left: calc(50% - 3rem);

  }

  .header-text {
    top: 14rem;
    left: calc(50% - 20rem);
    width: 64rem;
    font-size: 2.8rem;
  }

  .first-img {
    top: 44rem;
    left: calc(50% - 18rem);
    width: 52rem;   
  }

  .first-text {
    top: 98rem;
    left: calc(50% - 20rem);
    width: 64rem;
    font-size: 2.8rem;
  }

  .second-img {
    top: 162rem;
    left: calc(50% - 20rem);
    width: 58rem;
  }
  
  .second-text {
      top: 210rem;
      left: calc(50% - 20rem);
      width: 64rem;
      font-size: 2.8rem;
  }

  .third-img {
    top: 275rem;
    left: calc(50% - 20rem);
    width: 52rem;
  }


  .third-text {
    top: 322rem;
    left: calc(50% - 20rem);
    width: 64rem;
    height: 341px;
    font-size: 2.8rem;
  }

  .attantion {
    top: 385rem;
    left: calc(50% -12rem);
    font-size: 2.4rem; 
  }

  .attantion2 {
    top: 390rem;
    left: calc(50% - 15rem);
    width: 50rem;
    height: 62px;
    font-size: 2.4rem; 
  }

  .bad {
    top: 400rem;
    left: calc(50% - 12rem);
    font-size: 2.4rem;
    width: 60rem; 
  }

  .bad2 {
    top: 460rem;
    left: calc(50% - 20rem);
    font-size: 2.4rem;
    width: 60rem; 
  }

  .bad-text {
    top: 410rem;
    left: calc(50% - 20rem);
    font-size: 2.4rem;
    width: 60rem; 
  }

  .bad-text2 {
    top: 475rem;
    left: calc(50% - 20rem);
    font-size: 2.4rem; 
  }

  .checkbox {
    top: 515rem;
    left: calc(50% - 20rem);
    font-size: 2.4rem;
  }

  
  .signin {
    top: 530rem;
    left: calc(50% -10rem);
    width: 15rem;
    height: 4rem;
    
  }

  .bottom-logo {
    top: 540rem; 
    left: calc(50% + 16rem);
    width: 22.3rem; 
    height: 3.6rem;
    
  }

}