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

        /* Модальное содержание */
        .modal-content {
            position: fixed;
            bottom: 0;
            background-color: #fefefe;
            width: 100%;
            -webkit-animation-name: slideIn;
            -webkit-animation-duration: 0.4s;
            animation-name: slideIn;
            animation-duration: 0.4s
        }

        /* Кнопка закрытия */
        .close {
            color: black;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

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


        .modal-body {
            text-align: center;
            padding: 2px 16px;
        }


        /* Добавить анимацию */
        @-webkit-keyframes slideIn {
            from {bottom: -300px; opacity: 0}
            to {bottom: 0; opacity: 1}
        }

        @keyframes slideIn {
            from {bottom: -300px; opacity: 0}
            to {bottom: 0; opacity: 1}
        }

        @-webkit-keyframes fadeIn {
            from {opacity: 0}
            to {opacity: 1}
        }

        @keyframes fadeIn {
            from {opacity: 0}
            to {opacity: 1}
        }