:root {
  --white: #fff;
  --orange: #DD9224;
  --blue: #179BD7;
  --blue-hover: #7BBAE4;
  --grey: #7D7D7D;
  --grey-dark: #474747;
  --red: #E50B13;
  --light: #F2F2F2;
  --grey-light: #A2A2A2;
  
  --bg: #E2E2E2;
}

* {
  box-sizing: border-box;
}

body {
  font-size: 4.071239vmin;
  font-family: Yandex Sans, Verdana, 'sans serif';
  margin: 0;
  padding: 0;
  overflow-X: hidden;
}
a {
  text-decoration: none;
}
h1, h2, h3 {
  font-family: Yandex Sans, Verdana, 'sans serif';
  font-weight: 700;
}

.orange {
  color: var(--orange);
}

main {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100vw;
  overflow: hidden;
}

section {
  padding: 20px;
}
.section__inner {
  position: relative;
}

.btn {
  border: none;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5.08904vmin;
  color: var(--white);
  padding: 4.071232vmin;
  position: relative;
  gap: 1.526712vmin;
  border-radius: 4.071232vmin;
  overflow: hidden;
  cursor: pointer;
}
.ico-svg {
  display: flex;
}
.ico-svg svg {
  width: 7.124656vmin;
  height: 7.124656vmin;
}
.btn span {
  position: relative;
  z-index: 2;
}
.btn span.btn-bg {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transition: .3s ease;
  z-index: 1;
}
.btn:hover span.btn-bg {
  width: 100%;
}

.design-elem {
  position: absolute;
}
.design-elem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.top__box {
  background: linear-gradient(270.19deg, #7BBAE4 0.17%, #179BD7 112.53%);
  border-radius: 8.142464vmin;
  padding: 5.08904vmin 5.08904vmin 74.80889vmin;
  color: var(--white);
}
.top__logo img {
  height: 7.888012vmin;
}
.top__preffix {
  color: var(--light);
  font-weight: 700;
  margin: 8.142464vmin 0 2.54452vmin;
}
.top__title {
  font-size: 8.142464vmin;
  font-weight: 700;
  line-height: 10.68698vmin;
}
.top__datebox {
  margin:  8.142464vmin 0 6.106848vmin;
}
.top__date {
  font-size: 8.142464vmin;
  font-weight: 700;
  line-height: 10.68698vmin;
  color: var(--grey-dark);
}
.top__moscow-time {
  margin-top: 1.017808vmin;
  font-size: 3.053424vmin;
}
.top__btn {
  display: flex;
}
.top__btn .btn {
  flex: 1 1 auto;
}
.top__btn .btn span.btn-bg {
  background: var(--grey-dark);
}

.top__animation {
  position: absolute;
  bottom: 0;
  right: 50%;
  width: 89.82156vmin;
  height: 64.63081vmin;
  transform: translateX(50%);
}

.animate__elem-comp {
  width: 62.34074vmin;
  height: 52.16266vmin;
  bottom: 0;
  left: 15.77602vmin;
}
.animate__elem-2 {
  width: 8.038139vmin;
  height: 10.96434vmin;
  left: 9.200984vmin;
  top: 11.33864vmin;
  animation: top-elem-2 2s 5;
  transform-origin: 68.5% 50.8%;
}
.animate__elem-3 {
  width: 19.45031vmin;
  height: 13.86vmin;
  left: 19.02029vmin;
  top: 2.354452vmin;
  animation: top-elem-3 2s 5;
  transform-origin: 50% 66.4%;
}
.animate__elem-4 {
  width: 22.82406vmin;
  height: 16.99994vmin;
  left: 43.44005vmin;
  top: 3.203551vmin;
  animation: top-elem-4 2s 5;
  transform-origin: 49.59% 64.03%;
}
.animate__elem-5 {
  width: 30.00498vmin;
  height: 33.7556vmin;
  left: .366411vmin;
  top: 24.02027vmin;
  animation: top-elem-5 2s 5;
  transform-origin: 57.52% 50%;
}
.animate__elem-6 {
  width: 27.48082vmin;
  height: 30.78869vmin;
  left: 62.08629vmin;
  top: 32.7378vmin;
  animation: top-elem-6 2s 5;
  transform-origin: 45.18% 49.11%;
}

@keyframes top-elem-2 {
  from {transform: rotate(0)}
  25% {transform: rotate(0)}
  50% {transform: rotate(18deg)}
  75% {transform: rotate(0)}
  to {transform: rotate(0)}
}
@keyframes top-elem-3 {
  from {transform: rotate(0)}
  25% {transform: rotate(0)}
  50% {transform: rotate(-17deg)}
  75% {transform: rotate(0)}
  to {transform: rotate(0)}
}
@keyframes top-elem-4 {
  from {transform: rotate(0)}
  25% {transform: rotate(0)}
  50% {transform: rotate(9.4deg)}
  75% {transform: rotate(0)}
  to {transform: rotate(0)}
}
@keyframes top-elem-5 {
  from {transform: rotate(0)}
  25% {transform: rotate(0)}
  50% {transform: rotate(14.45deg)}
  75% {transform: rotate(0)}
  to {transform: rotate(0)}
}
@keyframes top-elem-6 {
  from {transform: rotate(0)}
  25% {transform: rotate(0)}
  50% {transform: rotate(16.15deg)}
  75% {transform: rotate(0)}
  to {transform: rotate(0)}
}

h2 {
  font-size: 7.124656vmin;
  text-align: left;
  color: var(--blue);
  font-weight: 700;
  margin: 0 0 4.071232vmin;
}
.common__box {
  position: relative;
}
.common__block {
  position: relative;
  background: var(--white);
  border-radius: 8.142464vmin;
  overflow: hidden;
  padding: 8.142464vmin 5.08904vmin;
}
.program__elem-1 {
  position: absolute;
  top: -13.48596vmin;
  right: 6.870204vmin;
  width: 29.00753vmin;
  height: 20.10171vmin;
}
.program__elem-2 {
  position: absolute;
  top: 0;
  right: -6.122361vmin;
  width: 16.66661vmin;
  height: 22.52155vmin;
}

.program__item {
  display: flex;
  flex-direction: column;
  gap: 4.071232vmin;
}
.program__item + .program__item {
  margin-top: 3.053424vmin;
  padding-top: 3.053424vmin;
  border-top: .254452vmin solid var(--bg);
}
.program__item-title {
  font-size: 7.124656vmin;
  font-weight: 700;
  color: var(--blue);
  line-height: 9.669176vmin;
}
.program__item-text {
  list-style: none;
  margin: 3.562328vmin 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4.071232vmin;
  color: var(--grey);
  font-size: 5.08904vmin;
  font-weight: 500;
}

.speaker__elem-1 {
  top: -17.77602vmin;
  right: 0;
  width: 32.06095vmin;
  height: 35.87773vmin;
}
.speaker__elem-2 {
  display: none;
}
.speaker__block {
  display: flex;
  flex-direction: column;
  gap: 6.106848vmin;
}
.speaker__img {
  width: 62.08629vmin;
  height: 59.28732vmin;
  border-radius: 4.071232vmin;
  overflow: hidden;
}
.speaker__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.speaker__text {
  display: flex;
  flex-direction: column;
  gap: 2.54452vmin;
}
.speaker__name {
  font-size: 7.124656vmin;
  font-weight: 700;
  color: var(--blue);
  line-height: 9.669176vmin;
}
.speaker__post {
  color: var(--grey);
  font-size: 5.08904vmin;
  font-weight: 500;
}

.form__box {
  background: var(--grey-dark);
  border-radius: 8.142464vmin;
  overflow: hidden;
  padding: 8.142464vmin 5.08904vmin;
}
.form__box h2 {
  color: var(--white);
}
.form__block {
  margin-top: 8.142464vmin;
  display: flex;
  flex-direction: column;
  gap: 8.142464vmin;
}
.form__inputs {
  display: flex;
  flex-direction: column;
  gap: 4.071232vmin;
}
.form__input {
  position: relative;
}
.inputtext {
  border: .763356vmin solid var(--white);
  border-radius: 3.053424vmin;
  display: flex;
  align-items: center;
  font-family: Yandex Sans, Verdana, 'sans serif';
  padding: 4.071232vmin 5.08904vmin;
  width: 100%;
  font-weight: 500;
  color: var(--grey-dark);
  font-size: 4.071232vmin;
  outline: none;
  transition: .2s ease;
}
.inputtext::placeholder {
  font-weight: 500;
  color: var(--grey-light);
  font-size: 4.071232vmin;
}
.inputtext:hover {
  color: var(--orange);
  border-color: var(--orange);
}
.inputtext:hover::placeholder {
  color: var(--orange);
}
.inputtext-clear {
  position: absolute;
  top: 3.226712vmin;
  right: 3.053424vmin;
  display: none;
  width: 8.142464vmin;
  height: 8.142464vmin;
  color: var(--red);
  cursor: pointer;
}
.inputtext-clear svg {
  width: 100%;
  height: 100%;
}
.is--filled .inputtext-clear {
  display: flex;
}
.is--filled .inputtext {
  color: var(--red);
  border-color: var(--red);
}
.form__btn {
  display: flex;
}
.form__btn .btn {
  flex: 1 1 auto;
  font-weight: 400;
}
.form__btn .btn .btn-bg {
  background: var(--blue-hover);
}

@media all and (min-width: 768px) {
  body {
    font-size: 1.111104vw;
  }
  main {
    gap: 8.33328vw;
  }
  section {
    padding: 1.38888vw 2.708316vw;
  }
  .btn {
    font-size: 1.666656vw;
    padding: 1.527768vw 2.08332vw;
    border-radius: 1.38888vw;
    gap: .416664vw;
  }
  .ico-svg svg {
    width: 2.222208vw;
    height: 2.222208vw;
  }
  .top__box {
    border-radius: 3.611088vw;
    padding: 5.347188vw 21.80542vw 4.930524vw 4.444416vw;
  }
  .top__logo img {
    height: 2.77776vw;
  }
  .top__preffix {
    margin: 3.333312vw 0 .833328vw;
    font-size: 1.666656vw;
  }
  .top__title {
    font-size: 4.166664vw;
    line-height: 4.86108vw;
  }
  .top__datebox {
    margin: 2.77776vw 0 3.333312vw;
  }
  .top__date {
    font-size: 2.77776vw;
    line-height: 3.4722vw;
  }
  .top__moscow-time {
    font-size: .972216vw;
    margin-top: .416664vw;
  }
  .top__btn .btn {
    flex: 0 0 auto;
  }
  .top__animation {
    right: 4.444416vw;
    transform: unset;
    width: 35.347vw;
    height: 25.604vw;
  }
  .animate__elem-comp {
    width: 24.4304vw;
    height: 19.71237vw;
    bottom: 0;
    left: 6.180516vw;
  }
  .animate__elem-2 {
    width: 3.575672vw;
    height: 4.858997vw;
    top: 5.295109vw;
    left: 3.93053vw;
  }
  .animate__elem-3 {
    width: 8.652722vw;
    height: 6.524264vw;
    top: 1.2vw;
    left: 8.297864vw;
  }
  .animate__elem-4 {
    width: 9.963131vw;
    height: 7.534674vw;
    top: 1.819435vw;
    left: 19.16238vw;
  }
  .animate__elem-5 {
    width: 13.34783vw;
    height: 14.95824vw;
    top: 10.44577vw;
    left: .5vw;
  }
  .animate__elem-6 {
    width: 8.731889vw;
    height: 9.785354vw;
    top: 15.58046vw;
    left: 25.89705vw;
  }
  h2 {
    font-size: 3.4722vw;
    line-height: 4.16664vw;
    margin-bottom: 1.666656vw;
  }
  .common__block {
    border-radius: 3.611088vw;
    padding: 5.347188vw 4.444416vw 3.958308vw;
  }
  .program__elem-1 {
    width: 11.00687vw;
    height: 8.237447vw;
    top: -5.420104vw;
    right: 2.812482vw;
  }
  .program__elem-2 {
    width: 4.162473vw;
    height: 6.749262vw;
    top: 2.343041vw;
    right: -2.586369vw;
    transform: rotate(10deg);
  }
  .program__item {
    flex-direction: row;
    gap: 13.2638vw;
  }
  .program__item + .program__item {
    margin-top: 3.81942vw;
    padding-top: 3.81942vw;
    border-width: .138888vw;
  }
  .program__item-title {
    font-size: 3.12498vw;
    line-height: 3.81942vw;
  }
  .program__item-text {
    margin: 1.666656vw 0 0;
    font-size: 2.222208vw;
    line-height: 2.916648vw;
    gap: 1.111104vw;
  }
  .speaker__section {
    padding-bottom: 6.041628vw;
  }
  .speaker__elem-1 {
    width: 12.08395vw;
    height: 13.54158vw;
    top: -7.24996vw;
    right: 2.847204vw;
  }
  .speaker__elem-2 {
    display: block;
    width: 12.70825vw;
    height: 8.635361vw;
    top: 23.16999vw;
    left: 2.569428vw;
  }
  .speaker__block {
    flex-direction: row;
    gap: 5.347188vw;
  }
  .speaker__img {
    width: 17.77766vw;
    height: 17.49989vw;
    border-radius: 1.111104vw;
  }
  .speaker__text {
    justify-content: center;
    gap: 1.666656vw;
  }
  .speaker__name {
    font-size: 3.81942vw;
    line-height: 4.51386vw;
  }
  .speaker__post {
    font-size: 2.222208vw;
  }
  .form__box {
    padding: 4.930524vw 4.444416vw 3.958308vw;
    border-radius: 3.611088vw;
  }
  .form__box h2 {
    padding-right: 27vw;
    margin-bottom: 0;
  }
  .form__block {
    margin-top: 0;
    padding-left: 23.12485vw;
    gap: 3.888864vw;
  }
  .form__inputs {
    gap: 1.38888vw;
  }
  .inputtext {
    border-width: .208332vw;
    border-radius: 1.111104vw;
    font-size: 1.944432vw;
    padding: 1.944432vw 1.38888vw;
  }
  .inputtext::placeholder {
    font-size: 1.944432vw;
  }
  .inputtext-clear {
    width: 3.888864vw;
    height: 3.888864vw;
    top: 1.38888vw;
    right: 1.527768vw;
  }
}

@media all and (min-width: 1920px) {
  body {
    font-size: 16px;
  }
  main {
    gap: 40px;
  }
  section {
    padding: 70px 74px;
  }
  .btn {
    font-size: 24px;
    padding: 24px 38px;
    border-radius: 20px;
    gap: 6px;
  }
  .ico-svg svg {
    width: 32px;
    height: 32px;
  }
  .top__box {
    border-radius: 62px;
    padding: 124px 500px 128px 166px;
  }
  .top__logo img {
    height: 44px;
  }
  .top__preffix {
    margin: 56px 0 24px;
    font-size: 24px;
  }
  .top__title {
    font-size: 80px;
    line-height: 90px;
  }
  .top__datebox {
    margin: 48px 0 56px;
  }
  .top__date {
    font-size: 55px;
    line-height: 65px;
  }
  .top__moscow-time {
    font-size: 18px;
    margin-top: 6px;
  }
  .top__btn .btn {
    flex: 0 0 auto;
  }
  .top__animation {
    right: 170px;
    width: 664px;
    height: 469px;
  }
  .animate__elem-comp {
    width: 447px;
    height: 373px;
    bottom: 0;
    left: 127px;
  }
  .animate__elem-2 {
    width: 65.5px;
    height: 89px;
    top: 86px;
    left: 72px;
  }
  .animate__elem-3 {
    width: 158.5px;
    height: 119.5px;
    top: 10px;
    left: 152px;
  }
  .animate__elem-4 {
    width: 182.5px;
    height: 139px;
    top: 26px;
    left: 351px;
  }
  .animate__elem-5 {
    width: 244.5px;
    height: 274px;
    top: 195px;
    left: 0;
  }
  .animate__elem-6 {
    width: 190px;
    height: 212.92px;
    top: 240.04px;
    left: 474px;
  }
  h2 {
    font-size: 70px;
    line-height: 90px;
    margin-bottom: 34px;
  }
  .common__block {
    border-radius: 62px;
    padding: 60px 164px 50px;
  }
  .program__elem-1 {
    width: 158.5px;
    height: 119.22px;
    top: -85.24px;
    right: 11.5px;
  }
  .program__elem-2 {
    width: 65.5px;
    height: 88.79px;
    top: 33.65px;
    right: -50.5px;
    transform: rotate(0);
  }
  .program__item {
    gap: 271px;
  }
  .program__item + .program__item {
    margin-top: 55px;
    padding-top: 55px;
    border-width: 2px;
  }
  .program__item-title {
    font-size: 55px;
    line-height: 65px;
  }
  .program__item-text {
    margin: 32px 0 0;
    font-size: 40px;
    line-height: 50px;
    gap: 24px;
  }
  .speaker__section {
    padding-bottom: 147px;
  }
  .speaker__elem-1 {
    width: 190px;
    height: 212.92px;
    top: -113px;
    right: 0;
  }
  .speaker__elem-2 {
    width: 183px;
    height: 126.83px;
    top: 311.15px;
    left: 55px;
  }
  .speaker__block {
    gap: 177px;
  }
  .speaker__img {
    width: 262px;
    height: 252px;
    border-radius: 16px;
  }
  .speaker__text {
    gap: 32px;
  }
  .speaker__name {
    font-size: 55px;
    line-height: 65px;
  }
  .speaker__post {
    font-size: 40px;
  }
  .form__box {
    padding: 114px 164px 106px;
    border-radius: 62px;
  }
  .form__box h2 {
    padding-right: 315px;
  }
  .form__block {
    margin-top: 100px;
    padding-left: 440px;
    gap: 55px;
  }
  .form__inputs {
    gap: 32px;
  }
  .inputtext {
    border-width: 3px;
    border-radius: 16px;
    font-size: 32px;
    padding: 22px 20px;
  }
  .inputtext::placeholder {
    font-size: 32px;
  }
  .inputtext-clear {
    width: 50px;
    height: 50px;
    top: 21px;
    right: 20px;
  }
}