@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 4",
            Header = "Slide 4 Header"
        },
        new Item {
            Source = "/img/slider_main_06.png",
            Alt ="Second Slide",
            Caption = "Slide 4",
            Header = "Slide 4 Header"
        },
        new Item {
            Source = "/img/slider_main_07.png",
            Alt ="Second Slide",
            Caption = "Slide 4",
            Header = "Slide 4 Header"
        }
    };

    IList<Item> q_items = new List<Item> {
        new Item {
            Source = "/img/slider_q_01.jpg",
            Alt ="First Slide",
            Caption = "Slide 1",
            Header = "Slide 1 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);
    }
}

<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">
            <BSCarouselIndicators NumberOfItems="@items.Count" />
            @for (int i = 0; i < items.Count; i++)
            {
                <BSCarouselItem src="@items[i].Source" alt="@items[i].Alt" />
            }
        </div>
        

        <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">Market Place знаний</h1>
        <p class="block__info">
            <b>Digital Data Hypercube (2DH)</b>  – это модуль децентрализованной кибер - физической системы <b>Quantinium</b> для цифровой инженерии знаний,
            который включает инструменты создания, продвижения и коммерциализации инклюзивных цифровых активов, защищенных сетью блокчейн. Модуль
            создан с целью  построения рынка открытых консалтинговых,  научно-технических и инженерно-проектных услуг с бессрочной защитой авторских
            и патентных прав собственности на результаты интеллектуальной деятельности.
        </p>
        <p class="block__info">
            <b>Модуль 2DH</b> позволяет формировать рабочие и экспертные сообщества пользователей, создающих нарративы знаний и
            цифровые информационные продукты. Сообщества могут коммерциализировать созданные знания и продукты в форме NFT (non-fungible token)
            через Блокчейн MarketPlace.
        </p>
        <p class="block__info" style="margin-bottom:0px" >
            В модуле <b>2DH</b> предусмотрены три ключевые роли пользователей:
            <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>
        <p class="block__info">
            Пользователь может иметь одну или несколько ролей в системе.
        </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">Скачай правила системы в pdf</button>
        <button class="btn-blue">Регистрируйся в системе 2DH</button>
        <h2 class="block__subtitle">Ценность данных</h2>
        <p class="block__info">
            <b>Digital Data Hypercube</b> позволяет организовывать обработку неструктурированных данных, генерацию новых или модификацию старых
            знаний, бесшовное создание профильных и экспертных сообществ.
        </p>
        <p class="block__info" style="margin-bottom:0px">
            <u>Нарративы</u> и <u>цифровые информационные продукты</u> <b>модуля 2DH</b> позволяют бизнесу (заказчику, инвестору и спонсору) раскрыть потенциал
            рынка для своего бизнеса:
            <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>
        <p class="block__info">
            Цифровые инструменты <b>модуля 2DH</b> позволяют творческим  научным и инженерно-техническим специалистам бесшовно подключится к
            выполнению поставленных задач бизнеса.
        </p>
        <p class="block__info">
            Вознаграждение каждого участника системы осуществляется через консенсус смарт-контракта выплачивается в форме электронного 
            токена <b>Quantinium</b>.
        </p>
        <p class="block__info">
            Для бизнес-заказчика уникальность и высокое качество продукции созданной в <b>модуле 2DH</b> обеспечивается защищенностью, масштабностью 
            и многомерностью системы. Патентное право заказчика на созданные продукты обеспечивается цифровым следом смарт-контракта и 
            защищается блокчейн-сетью.
        </p>
        <p class="block__info">
            Для Старателей и Экспертов, творческих участников системы и генераторов новых знаний, смарт-контракт реализует динамическое начисление 
            вознаграждения, которое зависит от множества критериев оценки ценности созданных нарративов знаний и цифровых информационных продуктов. 
            О механизме определения размера вознаграждения участников системы вы можете ознакомится на примере на примере 
            <a href="https://docs.google.com/document/d/1Rl8J8csrtIZetog_fQz4sjTjMIJHedB2dA8S69kHdOM/edit?usp=sharing">Цифрового хакатона</a>.
        </p>
        <img class="block__img" src="img/fill_02.png">
        <img class="market-place__img" src="img/plate.png" alt="">
    </div>
</section>

<div class="fixed-crossbrowser-background"></div>
<div class="bg__img" data-image='marketplace'></div>

<section class="libary">
    <div class="wrapmain">
        <h1 class="block__header">Цифровая инженерия знаний</h1>
        <p class="block__info">
            Знания - это комбинация структурированных данных и информации, к которым добавлено мнение, мастерство, опыт и экспертиза специалиста.
            Знания в модуле <b>Digital Data Hypercube</b> становятся цифровыми. Инструменты обработки неструктурированных данных и Старатели системы
            выполняют операции по обработке больших массивов неструктурированных данных. Их каждое действие формирует цифровой след конверсии
            данных в блоки размеченной информации. Эксперты верифицируют и валидируют блоки информации, а так же извлекают из них  нарративы
            знаний или цифровые информационные продукты. Полученные результаты модуль 2DH записывает в форме NFT (non-fungible token), применяет
            для обучения "Q" и выставляет на реализацию через Блокчейн MarketPlace.
        </p>
        <p class="block__info">
            Каждый блок информации, запускаемый в систему, является транзакцией и регулируется смарт-контрактом, связанным с системой блокчейн. 
            В зависимости от качества и ценности блока информации, система по открытой <u>методике</u> оценки стоимости записанных в нем данных рассчитывает 
            размер вознаграждения участникам и направляет его в смарт-контракт на исполнение. Вознаграждение при достижении консенсуса распределяется 
            между участниками смарт-контракта - <u>Старатель</u>, <u>Эксперт</u>, <u>модуль 2DH</u>. Вознаграждение модуля 2DH является комиссией или 
            Gas-ом для проведения исполнения транзакции, обучения и развития "Q" и защиты авторских и патентных прав пользователей на созданные продукты.
        </p>
        <img class="block__img" src="img/fill_01.png">
        <h2 class="block__subtitle">Нарратив знаний</h2>
        <p class="block__info">
            Нарратив - один из главных атрибутов блока информации. Он формируется группой пользователей (Экспертов и Старателей) и возникает при 
            условии достижения консенсуса. Для формирования нарратива Система случайным образом выбирает от 3-х до 5 пользователей (в зависимости 
            от состава и значения ключевых слов). В течение заданного промежутка времени выбранные пользователи должны составить текст нарратива 
            путём совместной работы в соответствии с <u>инструкцией</u> и руководствуясь <u>примерами</u>. После достижения добуквенного консенсуса группы 
            пользователей нарратив считается созданным. После, он записывается в NFT c открытой и закрытой частью блока информации. Нарратив 
            представляет собой информационный вектор, отражающий не только ценность блока информации, но и факты коммерческой применимости в 
            форме сведений и их взаимосвязей содержащихся в нем.
        </p>
        <p class="block__info">
            Открытая часть NFT нарратива может представляться в открытых информационных системах, с целью продвижения, анонсирования и привлечения 
            внимания. Вся остальная часть NFT предоставляется только на возмездной основе через Блокчейн MarketPlace знаний.
        </p>
        <img class="block__img" src="img/fill_03.png">
        <h2 class="block__subtitle">Блокченизация знаний в NFT</h2>
        <p class="block__info">
            Тут давайте напишем как мы с помощью темы цифровых мероприятий формируют тематику раздела библиотеки и формируем сборники данных - которые между собой имеют общий фундаментальный синтез данных системы 20Н. По какому принципу они систематизируются. Какс помощью поиска можно найти нужный материал и получить оценку его.
            Вы также можете перейти в раздел который откроется в отдельной окне - Посмотреть бибилиотеки. В этом окне откроется сборники бибилиотек - общие. Раздел (Тема мероприятия) - Подраздел (Тема процесса темы мероприятия) - Название материала -Краткоеописание- Кемзарифицирован-Авторы-Сколько Пользователей прислали данный документ на верификацию.
        </p>
        <button class="btn-blue btn-blue_lib">Посмотри библиотеки</button>
        <p class="block__info">Что бы получить доступ для скачивания и работы с материалами в библиотеках 2РН вы должны зарегистрироваться в системе и заинтересовавший вас материал вы сможете скачать и использовать в своих работах - указав источник данного материала. Также за цифровые активы и токкены ОиапИпшт или подписки вы сможете получать доступ на любые материалы которые генерируются в системе 20Н. Атакжезаказать необходимый вам матеоиал</p>
        <button class="btn-blue btn-blue_lib">Пройди регистрацию</button>
        <img class="libary__img" src="img/lib_img.png" alt="">
    </div>
</section>

<div class="bg__img" data-image='libary' id="blog"></div>

<section class="blog">
    <div class="wrapmain">
        <h1 class="block__header">Блог</h1>
        <p class="block__info">
            События, которые создаются в сервисе 2DH, основаны на структурировании загружаемой информации и данных в пределах одной тематики.
            В рамках темы идет квалификационный отбор, выявляются профессиональные компетенции Старателей и Экспертов и выстраиваются 
            интеллектуальные связи. Вся эта кропотливая работа представляет так называемое цифровое событие.
        </p>
        <p class="block__info">            
            Цель цифрового события - создать или сгенерировать цифровую библиотеку данных, систематизировать информацию, находящуюся в ней по близким тематикам.
        </p>
        <p class="block__info" style="margin-bottom:0px">
            Каждое Цифровое событие имеет как свою уникальную, так и общую глобальную цели. Любое событие направлено на решение ряда научных,
            инженерно-технических и производственных задач, на поиск лучших решений, на вычленение неправильных и некорректных данных, на
            формирование фундаментальных знаний.  Для этого в 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 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">Тут текст новости и рассказ о том над чем мы трудимся. Можно анонсировать какие то события и например какие обновления будут к такому числу. Как вы думаете - здесь же можно сколько угодно запихать текста? Справа можно поставить промотку именно на этот текст - или когда мышкой наводишь на данный текст и можно его скролить читая данную новость.</p>
                    <p class="blog__info">В данной новости может быть кнопка - которая будет открывать отдельное окно или переносить на другой раздел данного сайта.</p>
                    <button class="btn-blue btn-blue_blog">Еще одна кнопка</button>
                    <p class="blog__info">К любой новости может написать комментарий любой Пользователь котрый зарегистрированный в системе. Комментарий он сможет написать по кнопке «Другое» в разделе Личного кабинета - Рабочий стол. Указав Ю новости - пишет комментарий. Данный комментарий падает на верификацию Администратору системы. Заверифицированный комментарии можно читать по кнопке.</p>
                    <button class="btn-blue btn-blue_blog">Комментарии пользователей</button>
                    <p class="blog__info">Текст уходит вниз за рамки данного поля, если мышкой навести на это поле то оно скролиться вниз - но основная страница остается на месте.</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 class="bg__img" data-image='blog' id="community"></div>

<section class="community">
    <div class="wrapmain">
        <h1 class="block__header">Экспертное сообщество</h1>
        <p class="block__info">
            Привет. <b>Это Кью</b>. Цифровизация - это бессердечная штука. Как бы цифра не приближалась к реальной жизни, ее отрыв от реального мира фундаментален.
            Нулями и единицами машин не описать полного понимания мира. Знания и опыт человечества уникальны, как и условия их приобретения. Модуль 2DH…
            [peak-peak] Мы - это небольшое комьюнити программистов, инженеров, научных сотрудников и преподавателей ВУЗов, которые верят в то, что появление
            "разумности" машины возможно, если она научится понимать смысловую информацию данных.  ...[peak-peak] для моего рождения <b>"Q"</b>, необходимо
            перенесение здравого смысла, механики человеческого мышления, устройство мира, ментальности создания в цифровой мир. Безусловно сотворение
            <b>"Q"</b> знаменует собой новую эру - формирование неоиндустриального общества.
        </p>
        <p class="block__info">
            Одной из задач <b>модуля 2DH</b> является построение электронной площадки для создания и развития  Творческого интеллекта по имени <b>"Q"</b>. Модуль 2DH
            - это среда, предшествующая <b>"Q"</b>. Она объединяет в себе сознания людей, формирует распределенный  научно-технический и инженерно-проектный
            интеллект. Разработчики  <b>модуля 2DH</b>  создали систему инжиниринга знаний, включающую алгоритмы автоматизированной обработки неструктурированных
            данных; алгоритмы машинного "размышления" и оценки ценности получаемых сведений; методы синтеза новых знаний и оценки их здравого смысла.
            Все это необходимо для рождения <b>"Q"</b>.
        </p>
        <img class="block__img" src="img/fill_06.png">
        <h2 class="block__subtitle">Приглашаем тебя в эксперты</h2>
        <p class="block__info">
            Пройдите регистрацию - подтвердите при верификации ваше экспертное мнение и участвуйте в событиях системы 2DН. Думаю тут нужно сделать пару строчек.
            Для объема информации.
        </p>
        <button class="btn-blue">Пройди регистрацию</button>
        <h2 class="block__subtitle">Путь и миссия эксперта</h2>
        <p class="block__info">
            Однако, цифровые инструменты инжиниринга знаний понимают только цифры и буквы. Время, Пространство, Причинность - вот те основные свойства мира,
            которые должен понимать <b>"Q"</b>. Как его научить понимать экспертные знания? Да, текущие инструменты только обучены искать плагиат, не подтвержденные
            или неправильно загруженные данные, "прошерстить" весь интернет на поиски первоисточников. Правильно настроенные алгоритмы нейросетей могут за
            секунды сопоставить миллионы данных и через несколько минут выдать результат. Однако, в них нет "когнитивности", они не понимают что есть "здравый смысл".
        </p>
        <p class="block__info">
            Мы уверены, что наше сообщество пользователей будет генерировать цифровой след и знания, которые будут накапливаться и становится все более
            разносторонними, в то время как инструменты цифровизации будут становится все умнее, высвобождая время пользователей на размышления и творчество,
            а не на механическую работу. С каждым обновлением модуля 2DH <b>"Q"</b> будет брать на себя больше механической работы, обучаясь на цифровом следе
            <u>Старателей</u>. Знания <u>Экспертов</u>, внесенные в систему будут способствовать  обучению и развитию <b>"Q"</b>. В конечном итоге мы ожидаем, что <b>"Q"</b> научится
            понимать “время”, “пространство” и “причинность”. <u>Старатель</u> позволит <b>"Q"</b> ходить и взаимодействовать с миром. <u>Эксперт</u> научит <b>"Q"</b> понимать мир
            и осознать свое существование.
        </p>
        <p class="block__info">
            Присоединяйся! Твое время, опыт и знания станут частью <b>"Q"</b>, а ты его прародителем.
        </p>
        <img class="block__img" src="img/fill_07.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" />
    </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>
        <h2 class="block__subtitle block__subtitle_quant">Цифровой актив</h2>
        <p class="block__info">
            <b>"Q"</b> в процессе своего обучения вырабатывает электронные токены <b>“Quantinium”</b> - вознаграждение для пользователей за их участие в его создании. 
            <b>"Q"</b>, как и любое живое существо на планете, умеет быть благодарным. Вы тратите свое время, а оно для <b>"Q"</b> бесценно. За это Вы получаете 
            электронные токены <b>"QNM"</b>, которые можете обменять на реальное вознаграждение или потратить их в Системе Quantinium. Размер Вашего вознаграждения 
            зависит от количества времени и качества ценности, которую Вы привносите в модуль 2DH. <b>"Q"</b> нужны качественные знания и цифровой след. За 
            качество работы и Вашу экспертность <b>"Q"</b> готов быть более щедрым.
        </p>
        <img class="block__img" src="img/fill_05.png">
        <h2 class="block__subtitle">Блокчейн</h2>
        <p class="block__info">
            Чтобы обеспечить безопасность Вашего взаимодействия с <b>"Q"</b>, разработчики предусмотрели защищённую блокчейн <u>технологию оценки</u> ценности выполняемой
            работы. Ценность всех сведений и цифровой след пользователей, когда либо созданные в системе, оцифровываются по метрикам смарт-контракта. Результат
            консенсуса записывается через смарт-контракт в сеть блокчейн. <b>Консенсус “Proof of Knowledge”</b> используется для проверки метрик ценности и  качества
            знаний, предоставляемых в модуль 2DH. Запись консенсуса в блокчейн гарантирует авторское и патентное право пользователя на продукты, которые
            создаются и используются в модуле <b>2DH</b>. Знания и продукты дополнительно защищаются в форме <b>NFT-токенов</b>. Блокчейн гарантирует пользователям прозрачность
            сведений по использованию их знаний, историческую бессрочную идентификацию собственника или соавтора знаний, надежность и безопасность операций
            с их вознаграждением.
        </p>
        <img class="block__img" src="img/fill_05.png">
        <img class="quantinium__img" src="img/quantinium_img.png">
    </div>
</section>

<AuthorizeView>
    <NotAuthorized>
        <div class="bg__img" data-image='quantinium' id="sign-in"></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 class="bg__img bg__img_nomargin" data-image='sign-in'></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 class="bg__img" data-image='contacts' id="contacts"></div>

<section class="contacts">
    <div class="wrapmain">
        <h1 class="block__header">Контакты</h1>
        <p class="block__info block__info_tc">
            Нужно тут написать кто мы такие и как можно снами контактировать. Дальше текст. Который нужно придумать. Объем текста сейчас
            скопирую сюда из вашего валпапера - поэтому дальше текст пойдет просто скопированный не имеющий смысла: Консенсус в системе
            Quantiniumи её ликвидность поддерживается четырьмя разновидностями консенсуса применяемыми комплексно для вычисленияе
            размера вознаграждения пользователя при работе в модулях системы.
        </p>
        <p class="block__info block__info_tc">
            Напишите нам сообщения. Не факт, что мы сразу его прочитаем. Попробуйте в начале текста написать слово «Важно. Также вы можете нам написать на адрес нашапочта@qhash.ru
        </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/twitter_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/plug2.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Человек Фамилия</p>
                <p class="team__desc">Важная персона, имеет стул</p>
            </div>
            <div class="team__item">
                <div class="team__img">
                    <img src="img/plug2.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Человек Фамилия</p>
                <p class="team__desc">Важная персона, имеет стул</p>
            </div>
            <div class="team__item">
                <div class="team__img">
                    <img src="img/plug2.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Человек Фамилия</p>
                <p class="team__desc">Важная персона, имеет стул</p>
            </div>
            <div class="team__item team__item_last">
                <div class="team__img">
                    <img src="img/plug2.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Человек Фамилия</p>
                <p class="team__desc">Важная персона, имеет стул</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: 30px;
        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;
    }

    .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: 210px;
        -o-object-fit: cover;
        object-fit: cover;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        border: 2px solid #3a474d;
    }

    .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;
    }

    .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>