<div id="cookie-bar" class="CookieBar js-CookieBar u-background-95 u-padding-r-all" aria-hidden="true">
    <p class="u-color-white u-text-r-xs u-lineHeight-m u-padding-r-bottom">Questo sito utilizza cookie tecnici, analytics e di terze parti.
        <br>Proseguendo nella navigazione accetti l’utilizzo dei cookie.<br>
    </p>
    <p>
        <button class="Button Button--default u-text-r-xxs js-cookieBarAccept u-inlineBlock u-margin-r-all">Accetto</button>
        <a href="" class="u-text-r-xs u-color-teal-50">Privacy policy</a>
    </p>
</div>

<ul class="Skiplinks js-fr-bypasslinks u-hiddenPrint">
    <li><a href="#main">Vai al Contenuto</a></li>
    <li><a class="js-fr-offcanvas-open" href="#menu" aria-controls="menu" aria-label="accedi al menu" title="accedi al menu">Vai alla navigazione del sito</a></li>
</ul>

<header class="Header Headroom--fixed js-Headroom u-hiddenPrint">

    <div class="Header-banner ">
        <div class="Header-owner Headroom-hideme ">
            <a href=""><span>Nome amministrazione afferente</span></a>
            <div class="Header-languages ">
                <a href="#languages" data-menu-trigger="languages" class="Header-language u-border-none u-zindex-max u-inlineBlock">
            <span class="u-hiddenVisually">lingua attiva:</span>
            <span class="">ITA</span>
            <!-- <span class="u-hidden u-md-inlineBlock u-lg-inlineBlock">Italiano</span> -->
            <span class="Icon Icon-expand u-padding-left-xs"></span>
          </a>
                <div id="languages" data-menu class="Dropdown-menu Header-language-other u-jsVisibilityHidden u-nojsDisplayNone">
                    <span class="Icon-drop-down Dropdown-arrow u-color-white"></span>
                    <ul>
                        <li><a href="#1" class="u-padding-r-all"><span lang="en">English</span></a></li>
                        <li><a href="#1" class="u-padding-r-all"><span lang="ar">عربي</span></a></li>
                        <li><a href="#2" class="u-padding-r-all"><span lang="ch">中文网</span></a></li>
                        <li><a href="#3" class="u-padding-r-all"><span lang="de">Deutsch</span></a></li>
                        <li><a href="#8" class="u-padding-r-all"><span lang="es">Español</span></a></li>
                        <li><a href="#4" class="u-padding-r-all"><span lang="fr">Français</span></a></li>
                        <li><a href="#5" class="u-padding-r-all"><span lang="ja">日本語</span></a></li>
                        <li><a href="#6" class="u-padding-r-all"><span lang="pt">Portuguese</span></a></li>
                        <li><a href="#7" class="u-padding-r-all"><span lang="ru">НА РУССКОМ</span></a></li>
                        <li><a href="#10" class="u-padding-r-all"><span lang="uk">УКРАЇНСЬКA</span></a></li>
                        <li><a href="#9" class="u-padding-r-all"><span lang="tr">TÜRKÇE</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="Header-navbar ">
        <div class="u-layout-wide Grid Grid--alignMiddle u-layoutCenter">
            <div class="Header-logo Grid-cell" aria-hidden="true">
                <a href="" tabindex="-1">
          <img src="//placehold.it/75x80" alt="">
        </a>
            </div>

            <div class="Header-title Grid-cell">
                <h1 class="Header-titleLink">
                    <a href="/">
            Nome della Pubblica Amministrazione<br>
            <small>eventuale sottotitolo</small>
          </a>
                </h1>
            </div>

            <div class="Header-searchTrigger Grid-cell">
                <button aria-controls="header-search" class="js-Header-search-trigger Icon Icon-search " title="attiva il form di ricerca" aria-label="attiva il form di ricerca" aria-hidden="false">
        </button>
                <button aria-controls="header-search" class="js-Header-search-trigger Icon Icon-close u-hidden " title="disattiva il form di ricerca" aria-label="disattiva il form di ricerca" aria-hidden="true">
        </button>
            </div>

            <div class="Header-utils Grid-cell">
                <div class="Header-social Headroom-hideme">
                    <p>Seguici su</p>
                    <ul class="Header-socialIcons">
                        <li><a href="" title="Facebook"><span class="Icon-facebook"></span><span class="u-hiddenVisually">Facebook</span></a></li>
                        <li><a href="" title="Twitter"><span class="Icon-twitter"></span><span class="u-hiddenVisually">Twitter</span></a></li>
                        <li><a href="" title="Youtube"><span class="Icon-youtube"></span><span class="u-hiddenVisually">Youtube</span></a></li>
                    </ul>
                </div>
                <div class="Header-search" id="header-search">
                    <form class="Form">
                        <div class="Form-field Form-field--withPlaceholder Grid u-background-white u-color-grey-30 u-borderRadius-s" role="search">
                            <input class="Form-input Form-input--ultraLean Grid-cell u-sizeFill u-text-r-s u-color-black u-text-r-xs u-borderRadius-s" required id="cerca">
                            <label class="Form-label u-color-grey-50 u-text-r-xxs" for="cerca">cerca nel sito</label>
                            <button class="Grid-cell u-sizeFit Icon-search Icon--rotated u-color-grey-50 u-padding-all-s u-textWeight-700" title="Avvia la ricerca" aria-label="Avvia la ricerca">
  </button>
                        </div>
                    </form>

                </div>
            </div>

            <div class="Header-toggle Grid-cell">
                <a class="Hamburger-toggleContainer js-fr-offcanvas-open u-nojsDisplayInlineBlock u-lg-hidden u-md-hidden" href="#menu" aria-controls="menu" aria-label="accedi al menu" title="accedi al menu">
          <span class="Hamburger-toggle" role="presentation"></span>
          <span class="Header-toggleText" role="presentation">Menu</span>
        </a>
            </div>

        </div>
    </div>
    <!-- Header-navbar -->

</header>

<section class="Offcanvas Offcanvas--right Offcanvas--modal js-fr-offcanvas u-jsVisibilityHidden u-nojsDisplayNone u-hiddenPrint" id="menu">
    <h2 class="u-hiddenVisually">Menu di navigazione</h2>
    <div class="Offcanvas-content u-background-white">
        <div class="Offcanvas-toggleContainer u-background-70 u-jsHidden">
            <a class="Hamburger-toggleContainer u-block u-color-white u-padding-bottom-xxl u-padding-left-s u-padding-top-xxl js-fr-offcanvas-close" aria-controls="menu" aria-label="esci dalla navigazione" title="esci dalla navigazione" href="#">
        <span class="Hamburger-toggle is-active" aria-hidden="true"></span>
      </a>
        </div>
        <nav>
            <ul class="Linklist Linklist--padded Treeview Treeview--default js-Treeview u-text-r-xs">
                <li><a href="https://example.com">Nulla rerum magni</a>
                    <ul>
                        <li><a href="https://example.com">Earum rem culpa</a></li>
                        <li><a href="https://example.com">Numquam sit veniam</a></li>
                        <li>
                            <a href="https://example.com">Voluptatem quia cum</a>
                            <ul>
                                <li><a href="https://example.com">Totam et amet</a></li>
                                <li><a href="https://example.com">Quo illo molestiae</a>
                                    <ul>
                                        <li><a href="https://example.com">Quo illo molestiae</a></li>
                                        <li><a href="https://example.com">Dolorum quod quia</a></li>
                                        <li><a href="https://example.com">Aliquid deleniti quae</a></li>
                                    </ul>
                                </li>
                                <li><a href="https://example.com">Aut illum aliquid</a></li>
                            </ul>
                        </li>
                        <li><a href="https://example.com">Consequatur eius molestiae</a></li>
                        <li><a href="https://example.com">Nulla rerum magni</a></li>
                    </ul>
                </li>
                <li><a href="https://example.com">Aut illum aliquid</a>
                    <ul>
                        <li><a href="https://example.com">Voluptatem quia cum</a></li>
                        <li><a href="https://example.com">Numquam sit veniam</a></li>
                        <li><a href="https://example.com">Earum rem culpa</a>
                            <ul>
                                <li><a href="https://example.com">Dolorum quod quia</a></li>
                                <li><a href="https://example.com">Quo illo molestiae</a></li>
                                <li><a href="https://example.com">Totam et amet</a></li>
                            </ul>
                        </li>
                        <li><a href="https://example.com">Aliquid deleniti quae</a></li>
                        <li><a href="https://example.com">Aut illum aliquid</a>
                            <ul>
                                <li><a href="https://example.com">Consequatur eius molestiae</a></li>
                                <li><a href="https://example.com">Earum rem culpa</a></li>
                                <li><a href="https://example.com">Numquam sit veniam</a></li>
                                <li><a href="https://example.com">Voluptatem quia cum</a></li>
                                <li><a href="https://example.com">Totam et amet</a></li>
                                <li><a href="https://example.com">Quo illo molestiae</a></li>
                                <li><a href="https://example.com">Dolorum quod quia</a></li>
                                <li><a href="https://example.com">Aliquid deleniti quae</a></li>
                                <li><a href="https://example.com">Aut illum aliquid</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li data-megamenu-class="u-hidden">
                    <a class="Button u-border-none u-color-95 u-background-compl u-text-r-xxs" href="#">Accedi</a>
                </li>
            </ul>

        </nav>
    </div>
</section>

<div id="main">
    <section>
        <p class="u-md-hidden u-lg-hidden u-padding-r-all u-text-m u-background-grey-20">
            <span class="Icon-list u-text-r-xl u-alignMiddle u-padding-r-right" aria-hidden="true"></span>
            <a href="#subnav" class="js-scrollTo u-text-r-s u-textClean u-color-grey-50 u-alignMiddle">Esplora contenuti correlati</a>
        </p>

        <div class="u-layout-wide u-layoutCenter u-layout-withGutter u-padding-r-bottom u-padding-r-top">
            <nav aria-label="sei qui:" role="navigation">
                <ul class="Breadcrumb">
                    <li class="Breadcrumb-item"><a class="Breadcrumb-link u-color-50" href="/">Home</a></li>
                    <li class="Breadcrumb-item"><a class="Breadcrumb-link u-color-50" href="/">pagina interna</a></li>
                    <li class="Breadcrumb-item"><a class="Breadcrumb-link u-color-50" href="/">pagina interna</a></li>
                    <li class="Breadcrumb-item"><a class="Breadcrumb-link u-color-50" href="#main">pagina corrente</a></li>
                </ul>
            </nav>

        </div>

        <div class="u-layout-wide u-layoutCenter u-layout-withGutter u-padding-r-top u-padding-bottom-xxl">
            <h1 class="u-text-h2">
                Titolo della sezione
            </h1>
            <div class="Grid Grid--withGutter">
                <div class="Grid-cell u-md-size8of12 u-lg-size8of12">
                    <article class="Prose u-layout-prose">
                        <p>
                            Illo voluptates debitis omnis necessitatibus quaerat. Pariatur architecto cumque. Delectus eius fuga. Sequi voluptatibus voluptatum nisi rem aut. Amet perferendis est vitae est facere consequatur officiis praesentium. Id quas ut reprehenderit provident
                            porro qui odio delectus. Et odit atque doloribus alias aut facere pariatur. In corporis aspernatur aliquam et quibusdam id natus. Voluptatem eius aut vel vel aliquam sit. Voluptatem autem labore aut debitis rem quae delectus
                            maxime consequuntur. Voluptate et labore ratione.
                        </p>
                        <p>
                            Quae ut error veniam aspernatur occaecati. A eos amet assumenda placeat ut rerum autem quia est. Voluptatibus dolorem est deleniti debitis aperiam. Sed similique quam ut sunt tenetur in. Fuga totam eveniet accusamus. Quis est totam ipsa voluptatem repudiandae
                            laboriosam ab aspernatur porro. Perferendis nulla omnis deserunt ad esse eligendi. Sit tempore optio est enim non autem dicta. Cumque incidunt eum tenetur dolores ea quidem pariatur corrupti.
                        </p>
                        <p>
                            Sapiente magni in est et sed doloremque iste perferendis et. Voluptas ipsum aliquid. Fugit et odit et sunt et veritatis. Ratione rem dolore laudantium dolor doloribus aut assumenda eveniet aspernatur. Quia consectetur delectus. Soluta enim asperiores.
                            Rerum odit non fuga aut libero odit aut nisi quo. Eligendi quasi minus quis. Iste quasi nulla assumenda. Earum quo sunt doloribus pariatur quia distinctio voluptatem quo. Aperiam enim numquam. Dolores ipsam enim unde autem
                            quia explicabo laudantium et et. Nihil accusamus eum recusandae. Ad quia recusandae dolor qui aut voluptates voluptates ratione. Voluptatem aperiam quis nemo atque nemo nesciunt aut corrupti. Ut doloremque quia tenetur voluptatem
                            consequuntur expedita.
                        </p>
                    </article>
                </div>
                <div class="Grid-cell u-sizeFull u-md-size4of12 u-lg-size4of12">
                    <div class="u-cf u-padding-bottom-xxl">
                        <div class="Share">
                            <div class="Share-reveal js-Share">
                                <a href="#share-options" class="Share-revealText" data-menu-trigger="share-options" data-menu-inline>
      <span class="Share-revealIcon Icon Icon-share"></span>
      Condividi
    </a>
                            </div>
                            <ul id="share-options" class="Dropdown-menu" data-menu>
                                <li><a href="#" title=""><span class="Icon Icon-facebook"></span><span class="u-hiddenVisually">Facebook</span></a></li>
                                <li><a href="#"><span class="Icon Icon-twitter"></span><span class="u-hiddenVisually">Twitter</span></a></li>
                                <li><a href="#"><span class="Icon Icon-googleplus"></span><span class="u-hiddenVisually">Google Plus</span></a></li>
                                <li><a href="#"><span class="Icon Icon-youtube"></span><span class="u-hiddenVisually">Youtube</span></a></li>
                                <li><a href="#"><span class="Icon Icon-flickr"></span><span class="u-hiddenVisually">Flickr</span></a></li>
                                <li><a href="#"><span class="Icon Icon-slideshare"></span><span class="u-hiddenVisually">Slideshare</span></a></li>
                                <li><a href="#"><span class="Icon Icon-whatsapp"></span><span class="u-hiddenVisually">Whatsapp</span></a></li>
                            </ul>
                        </div>

                    </div>
                    <div class="u-sizeFull u-md-size11of12 u-lg-size11of12" id="subnav">
                        <ul class="Linklist Linklist--padded u-layout-prose u-text-r-xs">
                            <li>
                                <a class="Linklist-link Linklist-link--lev1" href="">Tempore voluptatem ut aut.</a>
                            </li>
                            <li><a class="Linklist-link Linklist-link--lev2 is-expanded" href="">A architecto qui et veritatis.</a>
                                <ul>
                                    <li><a href="" class="Linklist-link Linklist-link--lev3">Sequi quo rerum velit saepe.</a></li>
                                    <li><a href="">Rerum est laborum quis distinctio.</a></li>
                                    <li><a href="">Praesentium beatae totam iste atque sit quae.</a></li>
                                    <li><a href="">Dolores et itaque voluptas quas laudantium molestias.</a></li>
                                </ul>
                            </li>
                            <li><a href="">Aut exercitationem magni minus eum temporibus.</a></li>
                            <li><a href="">Officiis dolores dolore.</a></li>
                            <li><a href="" class="Linklist-link is-collapsed">Iusto inventore asperiores deserunt eum est ut dolores.</a></li>
                            <li><a href="">Exercitationem quia deserunt sequi.</a></li>
                        </ul>

                    </div>
                    <a href="#" title="torna all'inizio del contenuto" class="u-hiddenVisually">torna all'inizio del contenuto</a>
                </div>
            </div>
        </div>
    </section>

    <div class="u-background-95 u-hiddenPrint">
        <div class="u-layout-wide u-layoutCenter u-layout-r-withGutter">
            <footer class="Footer u-background-95">

                <div class="u-cf">
                    <img class="Footer-logo" src="//placehold.it/75x80?text=placeholder" alt="">
                    <p class="Footer-siteName">
                        Nome della pubblica amministrazione
                    </p>
                </div>

                <div class="Grid Grid--withGutter">

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Argomento 1</h2>
                        <ul>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                            <li><a href="">quo illo molestiae</a></li>
                        </ul>
                    </div>

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Argomento 2</h2>
                        <ul>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                            <li><a href="">quo illo molestiae</a></li>
                        </ul>
                    </div>

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Argomento 3</h2>
                        <ul>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                            <li><a href="">quo illo molestiae</a></li>
                        </ul>
                    </div>

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Argomento 4</h2>
                        <ul>
                            <li><a href="">numquam sit veniam</a></li>
                            <li><a href="">voluptatem quia cum</a></li>
                            <li><a href="">totam et amet</a></li>
                            <li><a href="">quo illo molestiae</a></li>
                        </ul>
                    </div>

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Contatti</h2>
                        <div class="Footer-subBlock">
                            <h3 class="Footer-subTitle">Recapiti</h3>
                            <address>
          Via earum rem culpa<br>
          earum rem culpa<br>
          Tel. (+00) 00.0000.0000
        </address>
                        </div>
                    </div>

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Contatti</h2>
                        <div class="Footer-subBlock">
                            <h3 class="Footer-subTitle">Recapiti</h3>
                            <address>
          Via numquam sit veniam<br>
          numquam sit veniam<br>
          Tel. (+00) 00.0000.0000
        </address>
                        </div>
                    </div>

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Contatti</h2>
                        <div class="Footer-subBlock">
                            <h3 class="Footer-subTitle">Indirizzo PEC</h3>
                            <p><a href="">indirizzo.pec@gov.it</a></p>
                        </div>
                    </div>

                    <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
                        <h2 class="Footer-blockTitle">Seguici su</h2>
                        <div class="Footer-subBlock">
                            <ul class="Footer-socialIcons">
                                <li><a href=""><span class="Icon Icon-facebook"></span><span class="u-hiddenVisually">Facebook</span></a></li>
                                <li><a href=""><span class="Icon Icon-twitter"></span><span class="u-hiddenVisually">Twitter</span></a></li>
                                <li><a href=""><span class="Icon Icon-youtube"></span><span class="u-hiddenVisually">Youtube</span></a></li>
                            </ul>
                        </div>
                    </div>

                </div>

                <ul class="Footer-links u-cf">
                    <li><a href="" title="Privacy policy">Privacy</a></li>
                    <li><a href="" title="Note legali">Note legali</a></li>
                    <li><a href="" title="Contatti">Contatti</a></li>
                    <li><a href="" title="nulla rerum magni">nulla rerum magni</a></li>
                    <li>earum rem culpa</li>
                </ul>

            </footer>

        </div>
    </div>

    <a href="#" title="torna all'inizio del contenuto" class="ScrollTop js-scrollTop js-scrollTo">
  <i class="ScrollTop-icon Icon-collapse" aria-hidden="true"></i>
  <span class="u-hiddenVisually">torna all'inizio del contenuto</span>
</a>

</div>