/* Модальный (фон) */
.modal {
  display: none; /* Скрыто по умолчанию */
  position: fixed; /* Оставаться на месте */
  z-index: 1; /* Сидеть на вершине */
  left: 0;
  top: 0;
  width: 100%; /* Полная ширина */
  height: 100%; /* Полная высота */
  overflow: auto; /* Включите прокрутку, если это необходимо */
  background-color: rgb(0,0,0); /* Цвет запасной вариант */
  background-color: rgba(0,0,0,0.4); /* Черный с непрозрачностью */
}

/* Модальное содержание/коробка */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: 15% auto; /* 15% сверху и по центру */
  padding: 20px;
  border: 1px solid #888;
  border-radius: 16px;
  width: 80%; /* Может быть больше или меньше, в зависимости от размера экрана */
  max-width: 768px;
}

/* Кнопка закрытия */
.close {
  position: absolute;
  top: -4%;
  right: -4%;
  color: rgb(255, 255, 255);
  float: right;
  font-size: 38px;
  font-weight: 400;
  border: none;
  background-color: rgba(0,0,0,0);
}

.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.close:hover {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}