HyperCube/Pages/Index.razor

@inherits LayoutComponentBase
@page "/"

@inject NavigationManager NavigationManager

@*@inject Microsoft.JSInterop.IJSRuntime jsRuntime*@

@*@using Microsoft.AspNetCore.Identity;
    @inject AuthenticationStateProvider AuthenticationStateProvider
    @inject UserManager<IdentityUser> UserManager*@


@code{
    IList<Item> items = new List<Item> {
        new Item {
            Source = "/img/slider_main_01.png",
            Alt ="First Slide",
            Caption = "Slide 1",
            Header = "Slide 1 Header"
        },
        new Item {
            Source = "/img/slider_main_02.png",
            Alt ="Second Slide",
            Caption = "Slide 2",
            Header = "Slide 2 Header"
        },
        new Item {
            Source = "/img/slider_main_03.png",
            Alt ="Second Slide",
            Caption = "Slide 3",
            Header = "Slide 3 Header"
        },
        new Item {
            Source = "/img/slider_main_04.png",
            Alt ="Second Slide",
            Caption = "Slide 4",
            Header = "Slide 4 Header"
        },
        new Item {
            Source = "/img/slider_main_05.png",
            Alt ="Second Slide",
            Caption = "Slide 5",
            Header = "Slide 5 Header"
        },
        new Item {
            Source = "/img/slider_main_06.png",
            Alt ="Second Slide",
            Caption = "Slide 6",
            Header = "Slide 6 Header"
        },
        new Item {
            Source = "/img/slider_main_07.png",
            Alt ="Second Slide",
            Caption = "Slide 7",
            Header = "Slide 7 Header"
        }
        ,
        new Item {
            Source = "/img/slider_main_08.png",
            Alt ="Second Slide",
            Caption = "Slide 8",
            Header = "Slide 8 Header"
        }
    };

    IList<Item> q_items = new List<Item> {
        new Item {
            Source = "/img/slider_q_01.png",
            Alt ="Slide 1",
            Caption = "Slide 1",
            Header = "Slide 1 Header"
        },
        new Item {
            Source = "/img/slider_q_02.png",
            Alt ="Slide 2",
            Caption = "Slide 2",
            Header = "Slide 2 Header"
        },
        new Item {
            Source = "/img/slider_q_03.png",
            Alt ="Slide 3",
            Caption = "Slide 3",
            Header = "Slide 3 Header"
        }
    };

    class Item
    {
        public string Source { get; set; }
        public string Alt { get; set; }
        public string Caption { get; set; }
        public string Header { get; set; }
    }

    void Login()
    {
        NavigationManager.NavigateTo("Identity/Account/Login", true);
    }

    void Register()
    {
        NavigationManager.NavigateTo("Identity/Account/Register", true);
    }
}

<nav class="menu">
    <div class="menu-container">
        <div class="wrapmain">
            <div class="menu-box">
                <div class="menu__logo">
                    <img class="menu__logo__item" src="img/logo_light.svg">
                </div>
                <div class="menu__href">
                    @*<a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('marketplace').scrollIntoView({behavior:'smooth'})">MarketPlace знаний</a>
                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('blog').scrollIntoView({behavior:'smooth'})">Блог</a>
                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('community').scrollIntoView({behavior:'smooth'})">Экспертное сообщество</a>
                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('quantinium').scrollIntoView({behavior:'smooth'})">Quantinium</a>
                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('contacts').scrollIntoView({behavior:'smooth'})">Контакты</a>
                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('sign-in').scrollIntoView({behavior:'smooth'})">Авторизоваться</a>*@

                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('marketplace')">MarketPlace знаний</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('blog')">Блог</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('community')">Экспертное сообщество</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('quantinium')">Quantinium</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('contacts')">Контакты</a>
                    <AuthorizeView>
                        <Authorized>
                            <a class="menu__href__item link" href="desktop">Личный кабинет</a>
                        </Authorized>
                        <NotAuthorized>
                            @*<a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('sign-in')">Контакты</a>*@
                            <a class="menu__href__item link" style="cursor:pointer" @onclick="Login">Авторизоваться</a>
                        </NotAuthorized>
                    </AuthorizeView>
                </div>
            </div>
        </div>
    </div>
</nav>

<header class="main-slider">
    <BSCarousel NumberOfItems="@items.Count">
        <div class="carousel-inner">            
            @for (int i = 0; i < items.Count; i++)
            {
                <BSCarouselItem src="@items[i].Source" alt="@items[i].Alt" />
            }
        </div>
        <BSCarouselIndicators NumberOfItems="@items.Count" />
        <BSCarouselControl CarouselDirection="CarouselDirection.Previous" NumberOfItems="@items.Count"/>
        <BSCarouselControl CarouselDirection="CarouselDirection.Next" NumberOfItems="@items.Count"/>
    </BSCarousel>
</header>

<section class="market-place" id="marketplace">
    <div class="wrapmain">
        <h1 class="block__header">MarketPlace знаний</h1>
        <p class="block__info">
            <b>Digital Data Hypercube (2DH)</b> – это модуль цифровой инженерии знаний децентрализованной системы Quantinium,
            который содержит инструменты создания, продвижения и коммерциализации цифровых активов на базе блокчейн технологий.
            С использованием данного модуля предоставляются “открытые и бесшовные” консалтинговые,  научно-технические и
            инженерно-проектные услуги с защитой авторских и патентных прав на результаты интеллектуальной деятельности.
        </p>
        <p class="block__info">
            <b>Модуль 2DH</b> позволяет формировать рабочие и экспертные сообщества пользователей, создающие
            <a style="cursor:pointer; text-decoration:underline" onclick="ScrollToSection('narrative')">цифровые нарративы знаний и информационные продукты</a>.
            Пользователи могут коммерциализировать созданные результаты в форме NFT (non-fungible token) через MarketPlace знаний.
        </p>
        <p class="block__info">
            В модуле <b>2DH</b> предусмотрены три ключевые роли пользователей:
        </p>
        <ul class="block__info__list">
            <li style="margin-left:80px">
                Старатель - участник системы, осуществляющий  загрузку и разметку неструктурированных данных с последующим формированием блока информации;
            </li>
            <li style="margin-left:80px">
                Эксперт - участник системы, осуществляющий верификацию, экспертизу и рецензирование блоков информации, а также другие действия
                направленные на извлечения нарративов знаний или формирования информационных продуктов;
            </li>
            <li style="margin-left:80px">
                Инвестор (Заказчик, Спонсор) - пользователь, создающий бизнес-заказ на нарративы знаний или другие информационные продукты.
            </li>
        </ul>
        <p class="block__info">
            Пользователь может иметь одну или несколько ролей в системе <a style="cursor:pointer; text-decoration:underline">(см. правила системы)</a>.
        </p>
        <img src="img/logo_dark.svg" alt="" class="market-place__logo">
        <button class="btn-blue btn-blue_mt">Расскажи о цифровых мероприятиях</button>
        <button class="btn-blue">Скачай презентацию в pdf</button>
        <button class="btn-blue">Скачай White Paper в pdf</button>
        <button class="btn-blue" @onclick="Register">Регистрируйся в системе 2DH</button>
        <h2 class="block__subtitle">Ценность данных</h2>
        <p class="block__info" style="margin-bottom:0px">
            <b>Digital Data Hypercube (2DH)</b> направлен на:
        </p>
        <ul class="block__info__list">
            <li style="margin-left:80px">
                "бесшовное" привлечение Старателей и Экспертов в систему;
            </li>
            <li style="margin-left:80px">
                обработку больших массивов неструктурированных данных;
            </li>
            <li style="margin-left:80px">
                "открытую" генерацию новой или модификацию старой информации;
            </li>
            <li style="margin-left:80px">
                создание цифровых нарративов и информационных продуктов.
            </li>
        </ul>
        <p class="block__info" style="margin-bottom: 0px; margin-top: 30px">
            <b>2DH ДЛЯ БИЗНЕСА.</b> <a style="cursor:pointer; text-decoration:underline" onclick="ScrollToSection('narrative')">
                Цифровые нарративы знаний и информационные продукты
            </a> модуля 2DH позволяют Инвесторам (Заказчикам, Спонсорам) менять правила игры
            на рынке, раскрывая потенциал для своего бизнеса. Здесь новые продукты и услуги создаются  с помощью:
        </p>
        <ul class="block__info__list">
            <li style="margin-left:80px">
                Результатов мониторинга рынка;
            </li>
            <li style="margin-left:80px">
                Инсайтов развития и инклюзивных знаний;
            </li>
            <li style="margin-left:80px">
                Прототипирования и тестирования решений;
            </li>
            <li style="margin-left:80px">
                Коммерциализации  разработок.
            </li>
        </ul>
        <p class="block__info">
            Модуль 2DH  обеспечивает защищенность, масштабность и многомерность инклюзивных знаний для бизнеса. Цифровой след смарт-контракта -
            это гарантия качества и защита созданных продуктов технологией блокчейн.
        </p>
        <p class="block__info" style="margin-top: 30px">
            <b>2DH ДЛЯ ПОЛЬЗОВАТЕЛЯ</b>. Цифровые инструменты модуля 2DH позволяют Старателям и Экспертам, творческим  научным и инженерно-техническим  специалистам, "бесшовно" подключится к выполнению поставленных задач бизнеса.
        </p>
        <p class="block__info">
            <b>Вознаграждение пользователей регулирует <a style="cursor:pointer; text-decoration:underline">Смарт-контракт</a></b>. За выполненную работу
            по формированию блоков информации, создание цифровых нарративов знаний и информационных продуктов пользователям на кошелек начисляется
            криптовалюта <a style="cursor:pointer; text-decoration:underline" onclick="ScrollToSection('quantinium')">Quantinium (QNM)</a> при условии достижения
            <a href="https://docs.google.com/document/d/1Rl8J8csrtIZetog_fQz4sjTjMIJHedB2dA8S69kHdOM/edit?usp=sharing">консенсуса смарт-контракта (см. White Paper)</a>.
        </p>

        <img class="block__img" src="img/fill_01.png">
        <img class="market-place__img" src="img/plate.png" alt="">
    </div>
</section>

<div class="fixed-crossbrowser-background"></div>
<div style="width: 100%; height: 400px; position: relative">
    <img style="width: 100%; height: 400px" src="img/border_main.png">
    <div class="bg__img" data-image='marketplace'></div>
</div>

<section class="libary">
    <div class="wrapmain">
        <h1 class="block__header">Цифровая инженерия знаний</h1>
        <p class="block__info">
            Цифровые Знания - это комбинация структурированных данных и информации, к которым добавлено мнение, мастерство, опыт и экспертиза пользователей. 
            В модуле <b>Digital Data Hypercube</b> знания становятся цифровыми.
        </p>
        <p class="block__info">
            База цифровых знаний создается Старателями. Они обрабатывают неструктурированные данные, записывая их в блоки информации.  Далее Эксперты извлекают 
            из блоков информации графы, онтологии и <a style="cursor:pointer; text-decoration:underline" onclick="ScrollToSection('narrative')">нарративы знаний</a>.
            Каждое действие пользователей формирует цифровой след смарт-контракта.
            Полученные результаты модуль 2DH записывает в <u>NFT (non-fungible token)</u>, который является завершенным информационным продуктом.
            Он коммерциализируются через MarketPlace знаний и применяются для обучения расширенного интеллекта по имени "Q".
        </p>
        <p class="block__info">
            Каждый блок информации в системе является транзакцией. Его путь регулируется смарт-контрактом.  В зависимости от качества и ценности блока информации
            система по открытой методике оценки стоимости  рассчитывает размер вознаграждения участникам и направляет его на исполнение. Вознаграждение при
            достижении консенсуса распределяется между участниками системы - Старатель, Эксперт, Модуль 2DH. Вознаграждение при достижении консенсуса 
            выплачивается участникам системы: Старателем, Экспертом, и Модулем 2DH. Вознаграждение модуля 2DH является комиссией или Gas-ом для проведения 
            транзакции пользователей, защиты их прав на созданные продукты, а также для развития и обучения "Q" 
            <a href="https://docs.google.com/document/d/1Rl8J8csrtIZetog_fQz4sjTjMIJHedB2dA8S69kHdOM/edit?usp=sharing">(см. White Paper)</a>.
        </p>
        <img class="block__img" src="img/fill_02.png">
        <h2 class="block__subtitle" id="narrative">Нарратив знаний</h2>
        <p class="block__info">
            Нарратив знаний - один из главных цифровых продуктов системы. Он является образом или цифровым вектором знаний. Закономерность его направления 
            определяется множеством сведений, фактов и взаимосвязей истины. Вектор формируется группой пользователей (Экспертами с привлечением Старателей) 
            и возникает при условии достижения полного консенсуса содержимого формулы нарратива знания Для формирования нарратива
            знаний модуль 2DH случайным образом выбирает 3 и более пользователей, которые  в течение заданного промежутка времени должны совместно составить
            текст нарратива в соответствии с инструкцией и руководствуясь примерами
            <a href="https://docs.google.com/document/d/1Rl8J8csrtIZetog_fQz4sjTjMIJHedB2dA8S69kHdOM/edit?usp=sharing">(см. White Paper)</a>.
        </p>
        <p class="block__info">
            Нарратив знаний записывается в <u>NFT (non-fungible token)</u> c открытой и закрытой частью блока информации. Открытая часть NFT нарратива может 
            представляться в внешних информационных системах, с целью продвижения, анонсирования и привлечения внимания. Вся остальная часть NFT (закрытая) 
            предоставляется только на коммерческой основе через MarketPlace знаний.
        </p>
        <img class="block__img" src="img/fill_03.png">
        <img class="libary__img" src="img/lib_img.png" alt="">
    </div>
</section>

<div style="width: 100%; height: 400px; position: relative">
    <img style="width: 100%; height: 400px" src="img/border_main.png">
    <div class="bg__img" data-image='libary' id="blog"></div>
</div>

<section class="blog">
    <div class="wrapmain">
        <h1 class="block__header">Блог</h1>
        <p class="block__info">
            Мы команда 2DН готовы рассказывать о технологиях и цифровизации. Мы ведем для удобства телеграмм-канал, на котором мы
            рассказываем новости и анонсируем события, которые будут происходить в системе 2DН!
        </p>
        <div class="blog-container">
            <div class="blog__item">
                <div class="blog__img">
                    <img class="blog__img__item" src="img/blog_01.png">
                </div>
                <div class="blog__text">
                    <h3 class="blog__title">События</h3>
                    <h3 class="blog__subtitle">№1</h3>
                    <p class="blog__info">
                        События, которые создаются в сервисе 2DH, основаны на структурировании загружаемой информации и данных в пределах одной тематики.
                        В рамках темы идет квалификационный отбор, выявляются профессиональные компетенции Старателей и Экспертов и выстраиваются
                        интеллектуальные связи. Вся эта кропотливая работа представляет так называемое цифровое событие.
                    </p>
                    <p class="blog__info">
                        Цель цифрового события - создать или сгенерировать цифровую библиотеку данных, систематизировать информацию, находящуюся в ней по близким тематикам.
                    </p>                    
                    <p class="blog__info">
                        Каждое Цифровое событие имеет как свою уникальную, так и общую глобальную цели. Любое событие направлено на решение ряда научных,
                        инженерно-технических и производственных задач, на поиск лучших решений, на вычленение неправильных и некорректных данных, на
                        формирование фундаментальных знаний.  Для этого в 2DH разработаны различные формы взаимодействия участников системы. Приглашаем
                        присоединиться к любому из них:
                        <ul class="block__info__list">
                            <li style="margin-left:80px">
                                Цифровый Коллоквиум
                            </li>
                            <li style="margin-left:80px">
                                Цифровой Марафон
                            </li>
                            <li style="margin-left:80px">
                                Цифровой Хакатон
                            </li>
                        </ul>
                    </p>                    
                </div>
            </div>
        </div>
        @*<div class="blog-nav">
            <button class="blog-nav__arrows left__arrows">Назад</button>
            <div class="slider-dots"></div>
            <button class="blog-nav__arrows right__arrows">Вперед</button>
        </div>*@
        <img src="img/line.png" alt="" class="blog__lines">
        <h2 class="block__subtitle">Наши соцсети</h2>
        <div class="blog__href">
            <a class="blog__href__item"><img src="img/facebook_icon.svg" alt=""></a>
            <a class="blog__href__item"><img src="img/twitter_icon.svg" alt=""></a>
            <a class="blog__href__item"><img src="img/instagram_icon.svg" alt=""></a>
            <a class="blog__href__item"><img src="img/youtube_icon.svg" alt=""></a>
            <a class="blog__href__item"><img src="img/telegram.svg" alt=""></a>
        </div>
        <img class="blog__bottom__img" src="img/blog__img.png">
    </div>
</section>

<div style="width: 100%; height: 400px; position: relative">
    <img style="width: 100%; height: 400px" src="img/border_main.png">
    <div class="bg__img" data-image='blog' id="community"></div>
</div>

<section class="community">
    <div class="wrapmain">
        <h1 class="block__header">Экспертное сообщество</h1>
        <p class="block__info">
            Привет, <b>Это Кью ("Q")</b>. Цифровизация - это бессердечная штука. Как бы цифрой мир не приближался к реальному миру, разрыв между нами фундаментален. 
            Нулями и единицами не описать весь мир, он уникален, так же как и опыт человечества. <b>Модуль 2DH</b>… [peak-peak], мы вместе - это комьюнити программистов, 
            инженеров, научных сотрудников и преподавателей ВУЗов, которые верят в то, что появление “разумности” машины возможно, если она научится понимать смысл 
            информации.  ...[peak-peak] для <b>"Q"</b>, необходимо перенесение здравого смысла, механики человеческого мышления, устройство мира, ментальности создания в 
            цифровой мир. Безусловно сотворение <b>"Q"</b> знаменует собой новую эру - неоиндустриальное общество.
        </p>
        <p class="block__info">
            Цель модуля <b>2DH</b> является построение электронной площадки для создания и развития  расширенного интеллекта по имени "Q". <b>Модуль 2DH - это среда,
            предшествующая рождению "Q"</b>. Она объединяет в себе сознания людей, формирует распределенный  научно-технический и инженерно-проектный кибер-физический 
            интеллект. Разработчики  модуля <b>2DH</b>  создали систему инжиниринга знаний, включающую алгоритмы автоматизированной обработки неструктурированных данных; 
            алгоритмы машинного «размышления» и оценки ценности сведений; методы синтеза новых знаний и оценки их здравого смысла. Накопление структурированной 
            информации, цифровой след пользователей и развитие системы инжиниринга знаний необходимы для рождения “Q”.
        </p>
        <img class="block__img" src="img/fill_04.png">
        <h2 class="block__subtitle">Приглашаем тебя в эксперты</h2>
        <p class="block__info">
            Пройдите регистрацию - подтвердите при верификации ваше экспертное мнение и участвуйте в событиях системы 2DН. Думаю тут нужно сделать пару строчек.
            Для объема информации.
        </p>
        <button class="btn-blue" @onclick="Register">Пройди регистрацию</button>
        <h2 class="block__subtitle">Путь и миссия эксперта</h2>
        <p class="block__info">
            Цифровые инструменты понимают только цифры и  буквы. Время, Пространство, Причинность - вот те основные свойства мира, которые необходимы для появления 
            знаний. Гуру в этой области Эксперты. Как же "Q" научить понимать эти свойства? Проблема в том, что текущие инструменты решают узкие механические задачи, 
            такие как: поиск плагиата; проверка не подтвержденных или неправильно загруженных данных; поиск первоисточников и др. Даже правильно настроенные алгоритмы 
            нейросетей которые могут за секунды сопоставить миллионы данных и через несколько минут выдать результат, не поймут что такое "когнитивность", или "здравый смысл".
        </p>
        <p class="block__info">
            Мы уверены, что наше сообщество пользователей будет генерировать знания и цифровой след, которые будут накапливаться и становится все более разносторонними.
            В то же время цифровые инструменты будут становится все умнее, высвобождая время пользователей на размышления и научно-техническое творчество. С каждым обновлением
            модуля 2DH расширенный интеллект "Q" будет брать на себя больше рутинной, механической работы, обучаясь на цифровом следе <u>Пользователей</u>. Знания <u>Экспертов</u>,
            внесенные в систему научат "Q" понимать "время", "пространство" и "причинность".
        </p>
        <p class="block__info">
            Путь Эксперта это сотворение расширенного интеллекта "Q". Путь Старателя это поддержка развития "Q". Присоединяйся! Твое время, опыт и знания станут частью "Q",
            а ты его прародителем.
        </p>
        <img class="block__img" src="img/fill_05.png">
        <img src="img/chair.png" alt="" class="community__img">
    </div>
</section>

<img src="img/line.png" alt="" class="lines">

<div class="main-slider main-slider_quant" id="quantinium">
    <BSCarousel NumberOfItems="@q_items.Count">
        <div class="carousel-inner">
            @for (int i = 0; i < q_items.Count; i++)
            {
                <BSCarouselItem src="@q_items[i].Source" alt="@q_items[i].Alt" />
            }
        </div>
        <BSCarouselIndicators NumberOfItems="@q_items.Count" />
        <BSCarouselControl CarouselDirection="CarouselDirection.Previous" NumberOfItems="@q_items.Count" />
        <BSCarouselControl CarouselDirection="CarouselDirection.Next" NumberOfItems="@q_items.Count" />
    </BSCarousel>
</div>

<section class="quantinium">
    <div class="wrapmain">
        <img class="quantinium__logo" src="img/quantinium_logo.png">
        <h1 class="block__header block__header_mt90">Quantinium</h1>        
        <p class="block__info">
            <b>"Q"</b> в процессе своего обучения вырабатывает криптовалюту <b>"Quantinium"</b> - вознаграждение для пользователей. Вы тратите свое время и создаете цифровые знания и продукты. 
            За это Вы получаете электронные токены <b>"QNM"</b>, которые можете обменять на реальное вознаграждение или потратить их в системе <b>Quantinium</b>. Размер Вашего вознаграждения 
            зависит от количества времени, блоков информации, качества сгенерированной информации, полноты и надежности нарративов знаний. В любом случае <b>"Q"</b> осуществит 
            вознаграждение за Вашу усердность и экспертность в работе.
        </p>
        <img class="block__img" src="img/fill_06.png">
        <h2 class="block__subtitle">Блокчейн</h2>
        <p class="block__info">
            Чтобы обеспечить безопасность Вашего взаимодействия с <b>"Q"</b>, разработчики предусмотрели блокчейн технологию оценки ценности выполняемой работы. Ценность всех сведений 
            и цифровой след пользователей, когда либо созданные в системе, оцифровываются по метрикам смарт-контракта. Результат консенсуса записывается через смарт-контракт в 
            сеть блокчейн. <b>Консенсус "Proof of Knowledge"</b> используется для проверки метрик ценности и  качества знаний, предоставляемых в модуль 2DH. Запись консенсуса в 
            блокчейн гарантирует авторское и патентное право пользователя на продукты. Знания и продукты дополнительно защищаются в форме <b>NFT-токенов</b>. Блокчейн гарантирует 
            пользователям прозрачность сведений по использованию их знаний, историческую бессрочную идентификацию собственника или соавтора знаний, надежность и безопасность 
            операций с их вознаграждением.
        </p>
        <img class="block__img" src="img/fill_07.png">
        <img class="quantinium__img" src="img/quantinium_img.png">
    </div>
</section>

<AuthorizeView>
    <NotAuthorized>
        <div style="width: 100%; height: 400px; position: relative">
            <img style="width: 100%; height: 400px" src="img/border_main.png">
            <div class="bg__img" data-image='quantinium' id="sign-in"></div>
        </div>

        <section class="sign-in">
            <div class="wrapmain">
                <h1 class="block__header">Авторизация</h1>
                <form action="" class="sign-in__form">
                    <div class="sign-in__container">
                        <input type="text" class="form__input" placeholder="Введите ваш ID">
                        <input type="text" class="form__input form__input_nomargin" placeholder="Пароль">
                    </div>
                    <button class="btn-bg">Авторизоваться</button>
                </form>
                <p class="form__text">
                    Забыли ID или пароль? Бывает...
                    Можно восстановить. напишите почту на которую вы регистрировались
                    и мы вышлем вам регистрационные данные
                </p>
                <form action="" class="sign-in__form">
                    <input type="text" class="form__input" placeholder="Почта потеряшки.ру">
                    <button class="btn-bg">Вспомнить</button>
                </form>
                <img src="img/sign-in_img.png" alt="" class="sign-in__img">
            </div>
        </section>

        <img src="img/lines2.png" alt="" class="lines">

        <div style="width: 100%; height: 400px; position: relative">
            <img style="width: 100%; height: 400px" src="img/border_main.png">
            <div class="bg__img bg__img_nomargin" data-image='sign-in'></div>
        </div>

        <section class="sign-up">
            <div class="wrapmain">
                <h1 class="block__header">Регистрация</h1>
                <form action="" class="sign-in__form">
                    <input type="text" class="form__input" placeholder="Напишите вашу фамилию и имя">
                    <p class="form__text form__text_mt">
                        Забыли ID или пароль? Бывает...
                        Можно восстановить. напишите почту на которую вы регистрировались
                        и мы вышлем вам регистрационные данные
                    </p>
                    <input type="text" class="form__input" placeholder="Пароль">
                    <input type="text" class="form__input" placeholder="Повторим пароль">
                    <input type="text" class="form__input" placeholder="Почта@новенького.ру">
                    <input type="text" class="form__input" placeholder="Почта@новенького.ру">
                    <textarea type="text" class="form__input form__input_areasign" placeholder="Кратко о себе. Предпочительно ваш статус в профессиональной деятельности"></textarea>
                    <div class="capcha">
                        <button class="capcha__button">Капча</button>
                        <input class="capcha__input" placeholder="Код капчи">
                    </div>
                    <input name="file" type="file" class="form__file__input" id="form__file">
                    <p class="form__text">
                        Этого достаточно, что бы система зарегистровала ваш Личный аккаунт.
                        Вам придет письмо на вашу почту. Советуем прочитать данное письмо.
                        При дальнейшей авторизации система присвоит вам [0 номер,
                        по которому высможете заходить в Личный кабинет
                        и участвовать в мероприятиях системы 2DН.

                    </p>
                    <button class="btn-bg btn-bg_orange">Зарегистрироваться</button>
                </form>
                <p class="form__text">
                    Уже зарегистрованы? Потеряли ID или пароль? Случается...
                    Можно все восстановить, напишите почту на которую вы регистрировались
                    и мы вышлем вам регистрационные данные
                </p>
                <form action="" class="sign-in__form">
                    <input type="text" class="form__input form__input_mt" placeholder="Почта потеряшки.ру">
                    <button class="btn-bg">Вспомнить</button>
                </form>
                <img src="img/sign-up_img.png" alt="" class="sign-in__img">
            </div>
        </section>
    </NotAuthorized>
</AuthorizeView>

<div style="width: 100%; height: 400px; position: relative">
    <img style="width: 100%; height: 400px" src="img/border_main.png">
    <div class="bg__img" data-image='contacts' id="contacts"></div>
</div>

<section class="contacts">
    <div class="wrapmain">
        <h1 class="block__header">Контакты</h1>
        <p class="block__info block__info_tc">
            <a href="mailto:q@qhash.ru">q@qhash.ru</a>
        </p>
        <p class="block__info block__info_tc">
            Начнем работу над Вашим запросом в течении 24 часов.
        </p>
        <form action="" class="sign-in__form">
            <textarea type="text" class="form__input form__input_area" placeholder="Пишите сообщения в этом окне, как напишите, ниже нажмите кнопку отправить"></textarea>
            <button class="btn-bg">Отправить</button>
        </form>
        <h2 class="block__subtitle">Наши соцсети</h2>
        <div class="blog__href">
            <a href="" class="blog__href__item"><img src="img/facebook_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/vk_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/instagram_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/youtube_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/telegram.svg" alt=""></a>
        </div>
        <h2 class="block__subtitle">Наша команда</h2>
        <div class="team-container">
            <div class="team__item">
                <div class="team__img">
                    <img src="img/team_01.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Артём Власов</p>
                <p class="team__desc">Co-founder</p>
            </div>
            <div class="team__item">
                <div class="team__img">
                    <img src="img/team_02.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Дима Гапт</p>
                <p class="team__desc">Co-founder</p>
            </div>
            <div class="team__item">
                <div class="team__img">
                    <img src="img/team_03.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Иван Синицын</p>
                <p class="team__desc">Co-founder</p>
            </div>
            <div class="team__item team__item_last">
                <div class="team__img">
                    <img src="img/team_04.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Кирилл Лопурко</p>
                <p class="team__desc">Co-founder</p>
            </div>
        </div>
    </div>
</section>

<footer>
    <div class="wrapmain">
        <h2 class="block__subtitle block__subtitle_white block__subtitle_nomargin">Полезная информация</h2>
        <div class="footer-container">
            <p class="footer__text">
                <a href="" class="footer__text">Страница 2DН в агентстве Интерфакс по раскрытию информации.</a>
                <a href="" class="footer__text">
                    Список лиц, под контролем либо значительным влиянием которых находится система 20Н 2DH.
                </a>
                <a href="" class="footer__text">
                    Раскрытие информации о системе как о профессиональном
                    участнике рынка цифровых активов
                </a>
            </p>
            <div class="footer__picture">
                <img class="footer__logo" src='img/logo_light.svg'>
                <p class="footer__info">©2021 ООО "Прок"</p>
            </div>
        </div>
        <img src="img/footer_img.png" alt="" class="footer__img">
    </div>
</footer>

<style>
    @@font-face {
        font-family: 'Bahn';
        src: url("../fonts/Bahnschrift.ttf") format("truetype");
    }

    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    :focus {
        outline: none;
    }

    textarea {
        resize: none;
    }

    html {
        position: absolute;
        width: 100%;
        height: auto;
        margin: 0px;
        padding: 0px;
        top: 0;
        left: 0;
        min-height: 100%;
        display: block;
    }

    .fixed-crossbrowser-background {
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background-position: bottom center;
        background-image: url("../img/test3.jpg");
        background-size: cover;
        opacity: 1;
        z-index: -1;
    }

    .wrapmain {
        max-width: 1160px;
        padding: 0px 10px;
        margin: 0px auto;
        width: inherit;
        min-height: inherit;
        -webkit-box-pack: inherit;
        justify-content: inherit;
    }

    .menu {
        width: 100%;
        background: #f27e00;
        padding-top: 6px;
        position: fixed;
        top: 0;
        z-index: 5;
    }

    .menu-container {
        background: #3a474d;
    }

    .menu-box {
        overflow: auto;
        white-space: nowrap;
        padding: 20px 0px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .menu__logo {
        width: 160px;
        height: auto;
        margin-right: 50px;
    }

    .menu__logo__item {
        width: 160px;
        height: 100%;
        object-fit: cover;
    }

    .menu__href__item {
        color: #fff !important;
        font-family: 'Bahn';
        font-size: 18px;
        margin-right: 30px;
        text-decoration: none;
    }

    .menu__href__item:hover {
        color: #fff !important;
        font-family: 'Bahn';
        font-size: 18px;
        margin-right: 30px;
        text-decoration: none;
    }

        .menu__href__item:last-child {
            margin-right: 10px;
        }

    .slick-track {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .slick-list {
        overflow: hidden;
    }

    .main-slider {
        padding-top: 80px;
        background-color: #fff;
        margin-top: 30px;
        width: 100%;
    }

    .main-slider__item {
        width: 100%;
        position: relative;
        height: 400px;
        border-top: 2px solid #3a474d;
        border-bottom: 2px solid #3a474d;
    }

        .main-slider__item img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }

    .main-slider__item_quant {
        border-bottom: 7px solid #3a474d;
    }

    .main-slider_quant {
        padding-top: 0px;
        background-color: #fdb148;
        margin-top: -5px;
    }

    .main-slider .slick-dots {
        text-align: center;
        margin-top: 30px;
    }

        .main-slider .slick-dots li {
            list-style: none;
            margin-right: 17px;
            display: inline;
        }

            .main-slider .slick-dots li:last-child {
                margin-right: 0px;
            }

            .main-slider .slick-dots li.slick-active button {
                background-color: #f27e00;
            }

        .main-slider .slick-dots button {
            background-color: #3a474d;
            font-size: 0px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
        }

    .block__header {
        text-align: center;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 46px;
        font-weight: 500;
    }

    .block__header_mt90 {
        margin-top: 90px;
    }

    .block__header_white {
        color: #fff;
    }

    .block__info {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 16px;
        margin-top: 0px;
        margin-bottom: 0px;
        line-height: 1.4;
        text-indent: 40px;
        text-align: justify;
    }

    .block__info__list {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 0px;
    }

    .block__info a {
        color: inherit;
    }

    .block__info_tc {
        text-align: center;
    }

    .block__subtitle {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 36px;
        margin-top: 70px;
        line-height: 1.4;
        text-align: center;
        font-weight: 500;
    }

    .block__subtitle_quant {
        margin-top: 10px;
    }

    .block__subtitle_white {
        color: #fff;
    }

    .block__subtitle_nomargin {
        margin-top: 0px;
    }

    .block__img {
        display: block;
        width: 65%;
        display: block;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;        
    }

    .market-place {
        background-color: #fff;
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .market-place__logo {
        display: block;
        width: 33%;
        margin-top: 70px;
        margin-left: auto;
        margin-right: auto;
    }

    .market-place__img {
        display: block;
        width: 10%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 170px;
    }

    .btn-blue {
        margin-top: 20px;
        display: block;
        background: none;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 21px;
        border: 2px solid #3a474d;
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        padding: 7px 10px;
        cursor: pointer;
        border-radius: 20px;
    }

    .btn-blue_mt {
        margin-top: 60px;
    }

    .btn-blue_lib {
        margin: 70px auto;
    }

    .btn-blue_blog {
        margin-left: 0px;
        margin-top: 25px;
        width: 65%;
    }

    .bg__img {
        width: 100%;
        height: 400px;
/*        border-top: 5px solid #3a474d;
        border-bottom: 5px solid #3a474d;*/
    }

    .bg__img_nomargin {
        margin-top: -5px;
    }

    .bg__img__item {
        position: fixed;
        height: 600px;
        width: 100%;
        top: 30%;
        left: 0;
        background-repeat: no-repeat;
        background-position: bottom center;
        background: url(../img/test.jpg);
        opacity: 1;
        z-index: -1;
    }

    .libary {
        padding-top: 100px;
        background: #fff;
        padding-bottom: 70px;
    }

    .libary__img {
        display: block;
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
    }

    .community {
        padding-top: 120px;
        background: #fff;
    }

    .community__img {
        width: 14%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 120px;
    }

    .lines {
        width: 100%;
        padding-top: 90px;
        background-color: #fff;
        padding-bottom: 90px;
    }

    .quantinium {
        background: #fdb148;
        padding: 100px 0px 140px 0px;
    }

    .quantinium__logo {
        width: 50%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .quantinium__img {
        width: 35%;
        margin-top: 130px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .blog {
        position: relative;
        padding: 100px 0px 150px 0px;
        background: #ececedff;
    }

    .blog-container {
        z-index: 2;
        position: relative;
        width: 100%;
        border: 2px solid #3a474d;
        padding: 20px;
        margin-top: 100px;
        background: #fff;
        height: 606px;
        overflow: scroll;
    }

        .blog-container::-webkit-scrollbar {
            width: 0;
        }

    .blog__item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .blog__img {
        display: block;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .blog__img__item {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        border: 2px solid #3a474d;
    }

    .blog__text {
        -webkit-box-flex: 2;
        -ms-flex: 2;
        flex: 2;
        margin-left: 25px;
    }

    .blog__title {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 24px;
        line-height: 1.4;
    }

    .blog__subtitle {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 16px;
        line-height: 1.4;
        margin-top: 5px;
    }

    .blog__info {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 16px;
        line-height: 1.4;
        margin-top: 20px;
    }

    .blog__lines {
        position: absolute;
        top: 35%;
        left: 0;
        width: 100%;
    }

    .blog-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 35px;
    }

    .blog-nav__arrows {
        border: none;
        background: none;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 16px;
        line-height: 1.4;
        margin-top: 7px;
        cursor: pointer;
    }

    .slider-dots .slick-dots {
        margin: 0px 40px;
    }

        .slider-dots .slick-dots li {
            list-style: none;
            margin-right: 17px;
            display: inline;
        }

            .slider-dots .slick-dots li:last-child {
                margin-right: 0px;
            }

            .slider-dots .slick-dots li.slick-active button {
                background-color: #f27e00;
            }

        .slider-dots .slick-dots button {
            background-color: #3a474d;
            font-size: 0px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
        }

    .blog__href {
        margin-top: 15px;
        text-align: center;
    }

    .blog__href__item {
        margin-right: 35px;
    }

        .blog__href__item img {
            width: 45px;
            height: 45px;
        }

        .blog__href__item:last-child {
            margin-right: 0px;
        }

    .blog__bottom__img {
        display: block;
        width: 15%;
        margin-top: 120px;
        margin-left: auto;
        margin-right: auto;
    }

    .sign-in {
        background: #fff;
        padding-top: 90px;
    }

    .sign-in__container {
        width: 100%;
        background-color: #ececedff;
        padding: 50px 0px;
        margin-left: auto;
        margin-right: auto;
    }

    .sign-in__form {
        margin-top: 40px;
    }

    .sign-in__img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        width: 25%;
    }

    .form__input {
        display: block;
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        border: 2px solid #3a474d;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 18px;
        background: #fff;
        text-align: center;
        margin-bottom: 20px;
        padding: 7px;
    }

    .form__input_nomargin {
        margin-bottom: 0px;
    }

    .form__input:focus::-webkit-input-placeholder {
        font-size: 0px;
    }

    .form__input:focus::-moz-placeholder {
        font-size: 0px;
    }

    .form__input:focus:-ms-input-placeholder {
        font-size: 0px;
    }

    .form__input:focus:-ms-input-placeholder {
        font-size: 0px;
    }

    .form__input:focus::placeholder {
        font-size: 0px;
    }

    .form__input_area {
        text-align: left;
        padding: 15px;
        height: 170px;
        width: 45%;
    }

    .form__input_areasign {
        padding: 15px;
        height: 170px;
        width: 40%;
    }

    .form__input_mt {
        margin-top: 40px;
    }

    .sign-up {
        padding-top: 90px;
        background: #fff;
        padding-bottom: 70px;
    }

    .capcha {
        width: 40%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-left: auto;
        margin-right: auto;
    }

    .capcha__button {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: block;
        background-color: #3a474d;
        font-family: 'Bahn';
        font-size: 18px;
        color: #fff;
        border: none;
        padding: 15px;
        margin-right: 25px;
        cursor: pointer;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
    }

        .capcha__button:hover {
            background: #475b64;
        }

    .capcha__input {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: block;
        border: 2px solid #3a474d;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 18px;
        background: #fff;
        text-align: center;
    }

    .form__file__input {
        opacity: 0;
        visibility: hidden;
        position: absolute;
    }

    .form__file__label {
        width: 40%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        background-color: #3a474d;
        padding: 20px;
        text-align: center;
        margin-top: 20px;
        cursor: pointer;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
    }

    .form__file__label__text {
        color: #fff;
        font-family: 'Bahn';
        font-size: 18px;
    }

    .form__file__label:hover {
        background: #475b64;
    }

    .btn-bg {
        display: block;
        background-color: #3a474d;
        width: 25%;
        font-family: 'Bahn';
        font-size: 18px;
        color: #fff;
        border: none;
        margin-left: auto;
        margin-right: auto;
        padding: 15px;
        margin-top: 25px;
        cursor: pointer;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
    }

        .btn-bg:hover {
            background-color: #475b64;
        }

    .btn-bg_orange {
        background-color: #f27e00;
    }

        .btn-bg_orange:hover {
            background: #ff992c;
        }

    .form__text {
        font-family: 'Bahn';
        font-size: 21px;
        color: #3a474d;
        text-align: center;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
    }

    .form__text_mt {
        margin: 20px auto;
    }

    .contacts {
        padding-top: 90px;
        background-color: #ececedff;
        padding-bottom: 180px;
    }

    .team-container {
        margin-top: 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .team__item {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-right: 35px;
    }

    .team__item_last {
        margin-right: 0px;
    }

    .team__img {
        width: 100%;
        padding-top: 100%;
        background-color: black;
        position: relative;
        border: 2px solid #3a474d;
        border-radius:20px;
    }

    .team__img__item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .team__name {
        margin-top: 15px;
        font-family: 'Bahn';
        font-size: 21px;
        color: #3a474d;
        text-align: center;
    }

    .team__desc {
        margin-top: 3px;
        text-align: center;
        font-family: 'Bahn';
        font-size: 16px;
        color: #3a474d;
    }

    .sign-in__img {
        margin-top: 80px;
        width: 25%;
        margin-left: auto;
        margin-right: auto;
    }

    footer {
        background-color: #3a474d;
        padding: 50px 0px;
        text-align: inherit;
        position: inherit;
        bottom: inherit;
        left: inherit;
        font-weight: inherit;
        font-style: inherit;
    }

    .footer-container {
        margin-top: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .footer__text {
        -webkit-box-flex: 3;
        -ms-flex: 3;
        flex: 3;
        font-family: 'Bahn';
        font-size: 16px;
        color: #fff;
        margin-right: 50px;
        text-decoration: none;
        display: block;
        margin-bottom: 5px;
        text-decoration: underline
    }

        .footer__text:hover {
            text-decoration: none
        }


    .footer__picture {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .footer__logo {
        width: 65%;
    }

    .footer__info {
        font-family: 'Bahn';
        font-size: 18px;
        color: #fff;
        margin-top: 10px;
    }

    .footer__img {
        margin-top: 100px;
        display: block;
        width: 14%;
        margin-left: auto;
        margin-right: auto;
    }

    @@media (max-width: 960px) {
        .btn-blue {
            width: 60%;
        }

        .block__img {
            width: 80%;
        }

        .market-place__img {
            width: 15%;
        }

        .blog__item {
            display: block;
        }

        .blog__text {
            margin-top: 40px;
            margin-left: 0px;
        }

        .blog__bottom__img {
            width: 17%;
        }

        .blog-container {
            height: 1050px;
        }

        .form__input {
            width: 60%;
        }

        .btn-bg {
            width: 40%;
        }

        .capcha {
            width: 60%;
        }

        .form__file__label {
            width: 60%;
        }

        .team-container {
            display: block;
        }

        .team__item {
            width: 45%;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 70px;
        }

        .menu__logo {
            width: 160px;
        }
    }

    @@media (max-width: 768px) {
        .btn-blue {
            width: 100%;
        }

        .market-place__logo {
            width: 50%;
        }

        .block__img {
            width: 100%;
        }

        .market-place__img {
            width: 25%;
        }

        .libary__img {
            width: 60%;
        }

        .blog__bottom__img {
            width: 30%;
        }

        .blog-container {
            height: 1030px;
        }

        .community__img {
            width: 25%;
        }

        .quantinium__logo {
            width: 65%;
        }

        .quantinium__img {
            width: 50%;
        }

        .form__input {
            width: 100%;
        }

        .btn-bg {
            width: 100%;
        }

        .sign-in__img {
            width: 40%;
        }

        .capcha {
            width: 100%;
        }

        .form__file__label {
            width: 100%;
        }

        .team__item {
            width: 60%;
        }

        .contacts {
            padding-bottom: 80px;
        }

        .footer-container {
            display: block;
        }

        .footer__text {
            margin-right: 0px;
            text-align: center;
        }

        .footer__picture {
            margin-top: 30px;
        }

        .footer__logo {
            display: block;
            width: 40%;
            margin-left: auto;
            margin-right: auto;
        }

        .footer__info {
            text-align: center;
        }

        .footer__img {
            width: 30%;
        }

        @@media (max-width: 540px) {
            .menu__href__item {
                font-size: 16px;
            }

            .block__header {
                font-size: 36px;
            }

            .market-place__logo {
                width: 70%;
            }

            .btn-blue {
                font-size: 18px;
            }

            .block__subtitle {
                font-size: 32px;
            }

            .market-place__img {
                width: 35%;
                margin-top: 80px;
            }

            .libary__img {
                width: 85%;
                margin-top: 80px;
            }

            .blog__href__item {
                width: 40px;
                height: 40px;
                margin-right: 17px;
            }

                .blog__href__item img {
                    width: 40px;
                    height: 40px;
                }

            .blog-container {
                height: 800px;
            }

            .blog__bottom__img {
                margin-top: 80px;
                width: 40%;
            }

            .blog {
                padding-bottom: 80px;
            }

            .community__img {
                width: 40%;
                margin-top: 70px;
            }

            .lines {
                margin-top: 0px;
            }

            .main-slider_quant {
                margin-top: -5px;
            }

            .quantinium__logo {
                width: 80%;
            }

            .quantinium__img {
                width: 80%;
                margin-top: 80px;
            }

            .quantinium {
                padding-bottom: 80px;
            }

            .form__text {
                font-size: 18px;
                width: 100%;
            }

            .sign-in__img {
                margin-top: 60px;
                width: 60%;
            }

            .bg__img {
                margin-top: 0px;
            }

            .bg__img_nomargin {
                margin-top: -5px;
            }

            .capcha__button {
                margin-right: 10px;
                width: 30%;
            }

            .capcha__input {
                display: block;
                width: 100%;
            }

            .team__item {
                width: 100%;
            }

            .contacts {
                padding-bottom: 50px;
            }

            .footer__logo {
                width: 60%;
            }

            .footer__img {
                margin-top: 80px;
                width: 45%;
            }

            .menu__logo {
                width: 140px;
            }
        }
    }
</style>