/* Стиль для центрирования */
	  body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  width: 90%;
  padding-left: 5%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transition: background-image 1s ease; /* Плавный переход в течение 1 секунды */
}

@media (max-width: 1170px) {
    .body {
	max-width: 1400px;
    }
}

.box {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory; /* Прокрутка будет происходить с фиксацией по x */
  width: 100vw;
  white-space: nowrap;
  scroll-behavior: smooth; /* Добавляет плавную анимацию прокрутки */
}



.slaid {
  width: 100vw;
  height: 100vh;
  margin-right: 10px;
  scroll-snap-align: center; /* Фиксация по центру экрана */
}

@media (max-width: 1170px) {
    .slaid {
	max-width: 320px;
    }
}

.image1 {
  background-image: url('../268789715.jpg');
}

.image2 {
  background-image: url('../268789714.jpg');
}

.image3 {
  background-image: url('../268789713.jpg');
}

.image4 {
  background-image: url('../268789712.jpg');
}
	  #difference {
		font-size: 18px; /* Увеличиваем размер шрифта для оставшегося времени */
		margin-bottom: 20px; /* Добавляем отступ снизу */
		text-align: center; /* Выравниваем текст по центру */
		line-height: 1.5; /* Увеличиваем межстрочный интервал для читаемости */
	  }
	  #countdown {
		  font-size: 18px; /* Увеличиваем размер шрифта для оставшегося времени */
		  margin-bottom: 20px; /* Добавляем отступ снизу */
		  text-align: center; /* Выравниваем текст по центру */
		  line-height: 1.5; /* Увеличиваем межстрочный интервал для читаемости */
	  }
	  .form-container {
		  display: flex;
		  flex-direction: row; /* Располагаем элементы формы горизонтально */
		  justify-content: center;
		  align-items: flex-start; /* Выравниваем элементы по верхнему краю */
	  }
	  form {
		  display: flex;
		  flex-direction: column; /* Располагаем элементы формы вертикально */
		  align-items: flex-start; /* Выравниваем элементы по левому краю */
		  margin-right: 20px; /* Добавляем отступ справа между формами */
	  }
	  form label {
		  font-size: 16px; /* Устанавливаем размер шрифта для меток */
		  font-weight: bold; /* Делаем текст жирным */
		  color: #333; /* Цвет текста */
		  margin-bottom: 8px; /* Отступ снизу */
		  background-color: rgba(255, 255, 255, 0.5); /* Прозрачная заливка */
		  padding: 5px 10px; /* Подобрано для улучшения внешнего вида */
		  border-radius: 5px; /* Скругление углов */
      width: 150px; /* Ширина поля */
		  text-align: left;
		  line-height: 1;
	  }
	  
	  .names {
		  font-size: 16px; /* Устанавливаем размер шрифта для меток */
		  font-weight: bold; /* Делаем текст жирным */
		  color: #333; /* Цвет текста */
		  margin-bottom: 8px; /* Отступ снизу */
		  background-color: rgba(255, 255, 255, 0.5); /* Прозрачная заливка */
		  padding: 5px 10px; /* Подобрано для улучшения внешнего вида */
		  border-radius: 5px; /* Скругление углов */
		  width: 90%; /* Ширина поля */
	  }
	  .grin {
  background-color: #3FBF90; /* Прозрачная заливка */
		  color: #fff;
}
	  .red {
  background-color: #F23054; /* Прозрачная заливка */
		  color: #fff;
}
	  .blue {
  background-color: #049DD9; /* Прозрачная заливка */
		  color: #fff;
	  }

form input[type="radio"] {
	appearance: none; /* Отменяет стандартные стили браузера */
	-webkit-appearance: none; /* Для WebKit-браузеров (Chrome, Safari) */
	-moz-appearance: none; /* Для Firefox */
	width: 20px; /* Увеличиваем размер переключателя */
	height: 20px;
	border: 2px solid #fff; /* Цвет обводки радиокнопки */
	border-radius: 50%; /* Делает кружочек */
	outline: none; /* Убирает обводку при фокусе */
	margin-right: 5px; /* Добавляем отступ между переключателями */
		  margin-bottom: 0px; /* Отступ снизу */
	  }

  /* Стили для отмеченного состояния */
  input[type="radio"]:checked {
    background-color: #d44450; /* Задайте цвет фона для отмеченной радиокнопки */
	border: 2px solid #fff; /* Цвет обводки радиокнопки */
  }

    form input {
      padding: 8px; /* Добавляем внутренний отступ */
      border: 1px solid #ccc; /* Граница с тонкой серой линией */
      border-radius: 5px; /* Скругление углов */
      width: 150px; /* Ширина поля */
      font-size: 14px; /* Размер шрифта */
      margin-bottom: 15px; /* Отступ снизу */
    }
	  form input[type="checkbox"] {
		  appearance: none; /* Отменяет стандартные стили браузера */
		  -webkit-appearance: none; /* Для WebKit-браузеров (Chrome, Safari) */
		  -moz-appearance: none; /* Для Firefox */
		  width: 10px;
		  height: 10px; 
		  border: 2px solid #fff; /* Цвет обводки галочки */
		  border-radius: 4px; /* Закругление углов */
		  outline: none; /* Убирает обводку при фокусе */
		  cursor: pointer; /* Курсор при наведении */
		  margin-bottom: 0px; /* Отступ снизу */
	  }

/* Стили для отмеченного состояния */
input[type="checkbox"]:checked {
		  border: 2px solid #fff; /* Цвет обводки галочки */
  background-color: #44A2D4; /* Задайте цвет фона для отмеченной галочки */
}
form input[type="submit"] {
  border: solid 2px black;
  padding: 10px 20px; /* Добавлено для улучшения внешнего вида кнопки */
  border-radius: 8px; /* Добавлен скругленный угол */
  cursor: pointer; /* Добавлен указатель при наведении */
  transition: background-color 0.3s ease; /* Анимация при наведении */
}

form input[type="submit"]:hover {
  background-color: #2980b9; /* Цвет фона при наведении */
}
	  #mes {
  width: 25px; /* Ширина поля ввода */
  white-space: nowrap; /* Предотвращение переноса текста на новую строку */
  overflow: hidden; /* Скрытие текста, выходящего за пределы поля */
      margin-bottom: 0px;
		  display: inline;
}
    #backgroundFill {

      width: 93%;
      height: 50px;
      border: 1px solid black; /* Граница */
    position: relative; /* Позиционируем, чтобы дочерний элемент был относительно этого блока */
    }
	  #backgroundFill2 {

      width: 93%;
      height: 50px;
      border: 1px solid black; /* Граница */
    position: relative; /* Позиционируем, чтобы дочерний элемент был относительно этого блока */
    }

    #percentage {
      position: absolute; /* Позиционируем относительно блока */
      top: 50%; /* Располагаем по вертикали на 50% */
      left: 50%; /* Располагаем по горизонтали на 50% */
      transform: translate(-50%, -50%); /* Центрируем относительно собственных размеров */
      font-size: 18px; /* Установим размер шрифта */
      color: white; /* Белый текст */
    }
	  #percentage2 {
      position: absolute; /* Позиционируем относительно блока */
      top: 50%; /* Располагаем по вертикали на 50% */
      left: 50%; /* Располагаем по горизонтали на 50% */
      transform: translate(-50%, -50%); /* Центрируем относительно собственных размеров */
      font-size: 18px; /* Установим размер шрифта */
      color: white; /* Белый текст */
    }
	  .fond_min {
		  font-size: 12px;
	  }