/* стилизация содержимого страницы */
        /*body {
            font-family: Roboto;
            font-size: 24px;
            font-weight: 400;
            line-height: 1.5;
            color: #292b2c;
            background-color: #fff;
        }*/

        /* свойства модального окна по умолчанию */
        .modal {

            position:absolute;
            /* фиксированное положение */
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            /* цвет фона */
            z-index: 1050;
            opacity: 0;
            /* по умолчанию модальное окно прозрачно */
            -webkit-transition: opacity 200ms ease-in;
            -moz-transition: opacity 200ms ease-in;
            transition: opacity 0.1s ease-in;
            /* анимация перехода */
            pointer-events: none;
            /* элемент невидим для событий мыши */
            margin: 0;
            padding: 0;
            z-index: 1000;
        }

        /* при отображении модального окно */
        .modal:target {
            opacity: 1;
            /* делаем окно видимым */
            pointer-events: auto;
            /* элемент видим для событий мыши */
            overflow-y: auto;
            /* добавляем прокрутку по y, когда элемент не помещается на страницу */
        }

        /* ширина модального окна и его отступы от экрана */
        .modal-dialog {
            /* position: relative; */
            width: 80%;
            /* vertical-align: middle; */
            /* margin: 10px; */
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

        @media (min-width: 576px) {
            .modal-dialog {
                max-width: 1300px;
                /* margin: 30px auto; */
                /* для отображения модального окна по центру */
                /* vertical-align: middle; */
            }
        }

        /* свойства для блока, содержащего контент модального окна */
        .modal-content {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;

            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            background-color: #fff;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border: 5px solid #3dbb95;
            border-radius: 0.5rem;
            outline: 0;
        }

        @media (min-width: 768px) {
            .modal-content {
                -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
                box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
                /* width: 80%; */
            }
        }

        /* свойства для заголовка модального окна */
        .modal-header {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding: 15px;
            border-bottom: 1px solid #eceeef;
        }

        .modal-title {
            margin-top: 0;
            margin-bottom: 0;
            line-height: 1.5;
            font-size: 2rem;
            font-weight: 500;
            color: #10575b;
        }

        /* свойства для кнопки "Закрыть" */
        .close {
            /*--------круглая сверху окна-----------*/
            /* position: absolute;
            font-size: 24px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #10575b;
            top: -20px;
            right: -20px;
            color: #fff;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            cursor: pointer; */

            /* ----------квадрат-------------*/
            float: right; 
            font-family: sans-serif;
            font-size: 24px;
            font-weight: 700;
            line-height: 1;
            color: #10575b;
            text-shadow: 0 1px 0 #fff;
            opacity: .5;
            text-decoration: none;
            width: 3rem;
            height: 3rem;
            font-weight: 300;
            border-radius: 30%;
            background-color: #0A0A0A;
            z-index: 4;
            color: #fff;
            line-height: 3rem;
            text-align: center;
            cursor: pointer;
            /* transition: opacity .8s ease; */

        }

        /* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
        .close:focus,
        .close:hover {
            text-decoration: none;
            cursor: pointer;
            opacity: 1;
            background-color: #10575b;
        }

        /* свойства для блока, содержащего основное содержимое окна */
        .modal-body {
            position: relative;
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 15px;
            overflow: auto;
            height: 600px;
            width: auto;

            font-size: 24px;
            font-weight: 400;
            user-select: none;

        }