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

    <div class="Headroom-hideme u-textCenter u-hidden u-sm-hidden u-md-block u-lg-block">

        <nav class="Megamenu Megamenu--default">
            <ul class="Megamenu-list">

                <li class="Megamenu-item"><a href="">Labore facere aut</a></li>
                <li class="Megamenu-item"><a href="">Porro vel rem</a></li>
                <li class="Megamenu-item"><a href="">Culpa nam consequatur</a></li>

            </ul>
        </nav>

    </div>

</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">Deleniti doloribus vel</a>
                    <ul>
                        <li><a href="https://example.com">Labore facere aut</a></li>
                        <li><a href="https://example.com">Porro vel rem</a></li>
                        <li>
                            <a href="https://example.com">Culpa nam consequatur</a>
                            <ul>
                                <li><a href="https://example.com">Ipsa repellendus inventore</a></li>
                                <li><a href="https://example.com">Molestiae laboriosam ea</a>
                                    <ul>
                                        <li><a href="https://example.com">Molestiae laboriosam ea</a></li>
                                        <li><a href="https://example.com">Laboriosam quaerat enim</a></li>
                                        <li><a href="https://example.com">Et ipsum quia</a></li>
                                    </ul>
                                </li>
                                <li><a href="https://example.com">Earum qui hic</a></li>
                            </ul>
                        </li>
                        <li><a href="https://example.com">Suscipit temporibus magnam</a></li>
                        <li><a href="https://example.com">Deleniti doloribus vel</a></li>
                    </ul>
                </li>
                <li><a href="https://example.com">Earum qui hic</a>
                    <ul>
                        <li><a href="https://example.com">Culpa nam consequatur</a></li>
                        <li><a href="https://example.com">Porro vel rem</a></li>
                        <li><a href="https://example.com">Labore facere aut</a>
                            <ul>
                                <li><a href="https://example.com">Laboriosam quaerat enim</a></li>
                                <li><a href="https://example.com">Molestiae laboriosam ea</a></li>
                                <li><a href="https://example.com">Ipsa repellendus inventore</a></li>
                            </ul>
                        </li>
                        <li><a href="https://example.com">Et ipsum quia</a></li>
                        <li><a href="https://example.com">Earum qui hic</a>
                            <ul>
                                <li><a href="https://example.com">Suscipit temporibus magnam</a></li>
                                <li><a href="https://example.com">Labore facere aut</a></li>
                                <li><a href="https://example.com">Porro vel rem</a></li>
                                <li><a href="https://example.com">Culpa nam consequatur</a></li>
                                <li><a href="https://example.com">Ipsa repellendus inventore</a></li>
                                <li><a href="https://example.com">Molestiae laboriosam ea</a></li>
                                <li><a href="https://example.com">Laboriosam quaerat enim</a></li>
                                <li><a href="https://example.com">Et ipsum quia</a></li>
                                <li><a href="https://example.com">Earum qui hic</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">

    <div class="u-layout-wide u-layoutCenter u-text-r-l u-padding-r-top u-margin-r-bottom u-layout-r-withGutter">
        <section class="Grid">

            <div class="Grid-cell u-sizeFull u-md-size1of2 u-lg-size1of2 u-text-r-s u-padding-r-all">
                <div class="Grid Grid--fit u-margin-r-bottom">
                    <p class="Grid-cell">
                        <span class="Dot u-background-50"></span>
                        <strong><a class="u-textClean u-text-r-xs" href="">La categoria</a></strong>
                    </p>
                    <p class="Grid-cell u-textSecondary">
                        12 Dicembre 2012
                    </p>
                </div>
                <div class="u-text-r-l u-layout-prose">
                    <h2 class="u-text-h2 u-margin-r-bottom">
                        <a class="u-text-h2 u-textClean u-color-black" href="">
          Labore facere aut
        </a>
                    </h2>
                    <p class="u-textSecondary u-lineHeight-l">
                        Tempore accusamus eaque rerum est. Ut adipisci iure tempore ullam laborum. Consequuntur est et quo ullam aut omnis aut et. Et vitae qui ullam quis alias quibusdam quos.
                    </p>
                </div>
            </div>

            <div class="Grid-cell u-sizeFull u-md-size1of2 u-lg-size1of2 u-text-r-s u-padding-r-all">
                <img src="//placehold.it/680x480?text=placeholder" class="u-sizeFull" alt="..." />
            </div>

        </section>

    </div>

    <div class="u-layout-wide u-layoutCenter u-padding-r-bottom u-margin-r-bottom u-layout-r-withGutter">
        <div class="Grid Grid--withGutter">
            <div class="Grid-cell u-md-size1of3 u-lg-size1of3">
                <div class="Entrypoint-item u-background-50">
                    <p><a class="u-textClean u-text-h3 u-color-white" href="">Link in evidenza 1</a></p>
                </div>
                <div class="Entrypoint-item u-background-50">
                    <p><a class="u-textClean u-text-h4 u-color-white" href="">Link in evidenza 2</a></p>
                </div>
            </div>
            <div class="Grid-cell u-md-size1of3 u-lg-size1of3 u-flex">
                <div class="Entrypoint-item u-sizeFill u-background-50">
                    <p><a class="u-textClean u-text-h3 u-color-white" href="">Link in evidenza 3</a></p>
                </div>
            </div>
            <div class="Grid-cell u-md-size1of3 u-lg-size1of3 u-flex">
                <div class="Entrypoint-item u-sizeFill u-background-50">
                    <p><a class="u-textClean u-text-h3 u-color-white" href="">Link in evidenza 4</a></p>
                </div>
            </div>
        </div>

    </div>

    <div class="u-background-grey-20 u-text-r-xxl u-padding-r-top u-padding-r-bottom">
        <div class="u-layout-wide u-layoutCenter u-layout-r-withGutter">
            <div class="u-layout-centerContent u-background-grey-20 u-padding-r-bottom">
                <section class="u-layout-wide">
                    <h2 class="u-padding-r-bottom u-padding-r-top u-text-r-l">Labore facere aut</h2>

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

                        <div class="Grid-cell u-nbfc u-md-size3of4 u-lg-size3of4">

                            <div class="Grid u-layout-centerContent">
                                <div class="Grid-cell u-sizeFit">
                                    <img src="//placehold.it/330x330?text=placeholder" class="u-sizeFit" alt="..." />
                                </div>
                                <div class="Grid-cell u-md-sizeFill u-lg-sizeFill u-padding-r-left">
                                    <div class="u-color-grey-30 u-border-top-xxs u-padding-right-xxl u-padding-r-all">
                                        <p class="u-padding-r-bottom">
                                            <span class="Dot u-background-70"></span>
                                            <a class="u-textClean u-textWeight-700 u-text-r-xs u-color-50" href="#">categoria</a>
                                            <span class="u-text-r-xxs u-textSecondary u-textWeight-400 u-lineHeight-xl u-cf">12 Maggio 2016</span>
                                        </p>
                                        <h3 class="u-padding-r-top u-padding-r-bottom"><a class="u-text-h4 u-textClean u-color-black" href="">
    Tempore accusamus eaque rerum est.
    </a>
                                        </h3>
                                        <p class="u-lineHeight-l u-text-r-xs u-textSecondary u-padding-r-right">
                                            Delectus dolor culpa cum. Veniam nobis impedit expedita eos eius. Autem ut optio corporis alias. Modi perferendis dolor aut iste eligendi. Delectus qui natus saepe voluptas velit aliquid qui reiciendis velit. Qui qui et consequuntur et possimus sed.
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="Grid-cell u-md-size1of4 u-lg-size1of4 u-padding-r-left">
                            <div class="u-color-grey-30 u-border-top-xxs u-padding-right-xxl u-padding-r-all">
                                <p class="u-padding-r-bottom">
                                    <span class="Dot u-background-70"></span>
                                    <a class="u-textClean u-textWeight-700 u-text-r-xs u-color-50" href="#">categoria</a>
                                    <span class="u-text-r-xxs u-textSecondary u-textWeight-400 u-lineHeight-xl u-cf">12 Maggio 2016</span>
                                </p>
                                <h3 class="u-padding-r-top u-padding-r-bottom"><a class="u-text-h4 u-textClean u-color-black" href="">
    Odit quos doloribus nemo autem excepturi dolorem explicabo.
    </a>
                                </h3>
                                <p class="u-lineHeight-l u-text-r-xs u-textSecondary u-padding-r-right">
                                    Sed rerum asperiores magni et facilis illo recusandae quia similique. Eos non at. Est sit voluptates. Esse corrupti cupiditate possimus hic quasi consequatur et.
                                </p>
                            </div>

                        </div>

                        <div class="Grid-cell u-md-size1of4 u-lg-size1of4 u-padding-r-left">
                            <div class="u-color-grey-30 u-border-top-xxs u-padding-right-xxl u-padding-r-all">
                                <p class="u-padding-r-bottom">
                                    <span class="Dot u-background-70"></span>
                                    <a class="u-textClean u-textWeight-700 u-text-r-xs u-color-50" href="#">categoria</a>
                                    <span class="u-text-r-xxs u-textSecondary u-textWeight-400 u-lineHeight-xl u-cf">12 Maggio 2016</span>
                                </p>
                                <h3 class="u-padding-r-top u-padding-r-bottom"><a class="u-text-h4 u-textClean u-color-black" href="">
    Odit quos doloribus nemo autem excepturi dolorem explicabo.
    </a>
                                </h3>
                                <p class="u-lineHeight-l u-text-r-xs u-textSecondary u-padding-r-right">
                                    Ipsam ad et voluptates quaerat. Veritatis sed voluptatem sit tempore recusandae accusantium et vero. At laborum eveniet quaerat expedita nihil doloremque assumenda aperiam alias.
                                </p>
                            </div>

                        </div>

                        <div class="Grid-cell u-md-size1of4 u-lg-size1of4 u-padding-r-left">
                            <div class="u-color-grey-30 u-border-top-xxs u-padding-right-xxl u-padding-r-all">
                                <p class="u-padding-r-bottom">
                                    <span class="Dot u-background-70"></span>
                                    <a class="u-textClean u-textWeight-700 u-text-r-xs u-color-50" href="#">categoria</a>
                                    <span class="u-text-r-xxs u-textSecondary u-textWeight-400 u-lineHeight-xl u-cf">12 Maggio 2016</span>
                                </p>
                                <h3 class="u-padding-r-top u-padding-r-bottom"><a class="u-text-h4 u-textClean u-color-black" href="">
    Odit quos doloribus nemo autem excepturi dolorem explicabo.
    </a>
                                </h3>
                                <p class="u-lineHeight-l u-text-r-xs u-textSecondary u-padding-r-right">
                                    At itaque ab. Enim quia libero. Eum accusantium et blanditiis hic. Ratione aut libero sit id quas ut sit dicta. Et quis quo debitis asperiores cumque temporibus est sunt. Autem et dicta amet placeat.
                                </p>
                            </div>

                        </div>

                        <div class="Grid-cell u-md-size1of4 u-lg-size1of4 u-padding-r-left">
                            <div class="u-color-grey-30 u-border-top-xxs u-padding-right-xxl u-padding-r-all">
                                <p class="u-padding-r-bottom">
                                    <span class="Dot u-background-70"></span>
                                    <a class="u-textClean u-textWeight-700 u-text-r-xs u-color-50" href="#">categoria</a>
                                    <span class="u-text-r-xxs u-textSecondary u-textWeight-400 u-lineHeight-xl u-cf">12 Maggio 2016</span>
                                </p>
                                <h3 class="u-padding-r-top u-padding-r-bottom"><a class="u-text-h4 u-textClean u-color-black" href="">
    Odit quos doloribus nemo autem excepturi dolorem explicabo.
    </a>
                                </h3>
                                <p class="u-lineHeight-l u-text-r-xs u-textSecondary u-padding-r-right">
                                    Nostrum maiores soluta porro. Doloremque et sit omnis temporibus architecto consequatur. Nobis voluptatum consequatur id veniam facilis. Repellendus qui est dolorum sint ex tenetur. Eveniet hic laboriosam temporibus sed. Amet dolorum esse aut vero atque.
                                </p>
                            </div>

                        </div>

                        <div class="Grid-cell u-md-size1of4 u-lg-size1of4 u-padding-r-left">
                            <div class="u-color-grey-30 u-border-top-xxs u-padding-right-xxl u-padding-r-all">
                                <p class="u-padding-r-bottom">
                                    <span class="Dot u-background-70"></span>
                                    <a class="u-textClean u-textWeight-700 u-text-r-xs u-color-50" href="#">categoria</a>
                                    <span class="u-text-r-xxs u-textSecondary u-textWeight-400 u-lineHeight-xl u-cf">12 Maggio 2016</span>
                                </p>
                                <h3 class="u-padding-r-top u-padding-r-bottom"><a class="u-text-h4 u-textClean u-color-black" href="">
    Odit quos doloribus nemo autem excepturi dolorem explicabo.
    </a>
                                </h3>
                                <p class="u-lineHeight-l u-text-r-xs u-textSecondary u-padding-r-right">
                                    Tempora delectus veritatis. Officia quia aliquid necessitatibus rem velit. Rerum hic rerum.
                                </p>
                            </div>

                        </div>

                    </div>

                    <p class="u-textCenter u-text-md-right u-text-lg-right u-padding-r-top">
                        <a href="#" class="u-color-50 u-textClean u-text-h4">
          tutti i contenuti <span class="Icon Icon-chevron-right"></span></a>
                    </p>

                </section>
            </div>

        </div>
    </div>

    <div class="u-background-70 u-padding-r-top u-padding-r-bottom">
        <div class="u-layout-centerContent u-background-70 u-padding-r-all">
            <section class="u-layout-medium">
                <div class="Grid">
                    <div class="Grid-cell u-layout-centerLeft">
                        <h2 class="u-text-r-l"><a class="u-color-white" href="">Twitter @amministrazione</a></h2>
                    </div>
                </div>
                <div class="u-text-r-xxl u-padding-r-top">
                    <div class="Grid Grid--withGutter">

                        <div class="Grid-cell u-sizeFull u-md-size1of3 u-lg-size1of3 u-margin-r-bottom u-layout-matchHeight u-padding-r-all">
                            <div class="u-nbfc u-borderRadius-m u-color-grey-30 u-background-white">
                                <section class="u-text-r-l u-padding-r-all u-layout-prose">
                                    <div class="u-text-p u-padding-r-bottom">
                                        <p class="u-color-50 u-text-r-xxs u-textWeight-600">nome account</p>
                                        <p class="u-textSecondary u-text-r-xxs">10 Luglio 2016</p>
                                    </div>
                                    <h3 class="u-text-p u-textWeight-400 u-color-grey-80 u-margin-r-bottom u-padding-r-bottom">
                                        Voluptate blanditiis omnis. Et doloremque et. Debitis suscipit voluptatem est aut consequatur suscipit eos. Nisi sit voluptas quod. Vitae eligendi quasi culpa ut omnis pariatur nihil autem. Ipsam non eum sit omnis ut rerum.
                                    </h3>
                                    <p>
                                        <a title="visualizza su twitter" class="u-color-50 u-textClean u-text-xl" href="http://twitter.com">
        <span class="Icon-twitter" aria-hidden="true"></span>
        <span class="u-hiddenVisually">visualizza su twitter</span>
      </a>
                                    </p>
                                </section>
                            </div>

                        </div>

                        <div class="Grid-cell u-sizeFull u-md-size1of3 u-lg-size1of3 u-margin-r-bottom u-layout-matchHeight u-padding-r-all">
                            <div class="u-nbfc u-borderRadius-m u-color-grey-30 u-background-white">
                                <section class="u-text-r-l u-padding-r-all u-layout-prose">
                                    <div class="u-text-p u-padding-r-bottom">
                                        <p class="u-color-50 u-text-r-xxs u-textWeight-600">nome account</p>
                                        <p class="u-textSecondary u-text-r-xxs">10 Luglio 2016</p>
                                    </div>
                                    <h3 class="u-text-p u-textWeight-400 u-color-grey-80 u-margin-r-bottom u-padding-r-bottom">
                                        Sed rerum asperiores magni et facilis illo recusandae quia similique. Eos non at. Est sit voluptates. Esse corrupti cupiditate possimus hic quasi consequatur et.
                                    </h3>
                                    <p>
                                        <a title="visualizza su twitter" class="u-color-50 u-textClean u-text-xl" href="http://twitter.com">
        <span class="Icon-twitter" aria-hidden="true"></span>
        <span class="u-hiddenVisually">visualizza su twitter</span>
      </a>
                                    </p>
                                </section>
                            </div>

                        </div>

                        <div class="Grid-cell u-sizeFull u-md-size1of3 u-lg-size1of3 u-margin-r-bottom u-layout-matchHeight u-padding-r-all">
                            <div class="u-nbfc u-borderRadius-m u-color-grey-30 u-background-white">
                                <section class="u-text-r-l u-padding-r-all u-layout-prose">
                                    <div class="u-text-p u-padding-r-bottom">
                                        <p class="u-color-50 u-text-r-xxs u-textWeight-600">nome account</p>
                                        <p class="u-textSecondary u-text-r-xxs">10 Luglio 2016</p>
                                    </div>
                                    <h3 class="u-text-p u-textWeight-400 u-color-grey-80 u-margin-r-bottom u-padding-r-bottom">
                                        Ipsam ad et voluptates quaerat. Veritatis sed voluptatem sit tempore recusandae accusantium et vero. At laborum eveniet quaerat expedita nihil doloremque assumenda aperiam alias.
                                    </h3>
                                    <p>
                                        <a title="visualizza su twitter" class="u-color-50 u-textClean u-text-xl" href="http://twitter.com">
        <span class="Icon-twitter" aria-hidden="true"></span>
        <span class="u-hiddenVisually">visualizza su twitter</span>
      </a>
                                    </p>
                                </section>
                            </div>

                        </div>

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

    </div>

    <div class="u-background-grey-60 u-padding-r-top u-padding-r-bottom u-text-r-xxl">
        <section class="u-background-grey-60 u-padding-r-all">
            <div class="u-layout-medium u-layoutCenter">

                <div class="Grid">
                    <h2 id="carousel-heading" class="Grid-cell u-text-h2 u-color-white u-layout-centerLeft">Gallerie</h2>

                    <!-- <next / prev buttons> -->
                    <div class="Grid-cell u-layout-centerRight">
                        <button class="owl-prev u-padding-bottom-xl u-padding-right-xxl u-text-r-xl u-color-teal-50" aria-controls="carousel-1">
            <span class="u-hiddenVisually">Vai alla slide precedente</span>
            <span class="u-alignMiddle Icon Icon-arrow-left" role="presentation"></span>
        </button>
                        <button class="owl-next u-padding-bottom-xl u-padding-left u-text-r-xl u-color-teal-50" aria-controls="carousel-1">
          <span class="u-hiddenVisually">Vai alla slide successiva</span>
          <span class="u-alignMiddle Icon Icon-arrow-right" role="presentation"></span>
        </button>
                        <p class="u-hiddenVisually">È possibile navigare le slide utilizzando i tasti freccia</p>
                    </div>
                    <!-- </next / prev buttons> -->
                </div>

                <div class="owl-carousel owl-theme" role="region" id="carousel-1">

                    <div class="Carousel-item">
                        <div class="u-color-grey-30">
                            <figure>
                                <a href="#img-1" aria-labelledby="desc-1" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=1" class="u-sizeFull" alt="" />
    </a>
                                <figcaption class="u-padding-r-top">
                                    <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                                    <div class="Grid">
                                        <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                        <h3 id="desc-1" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                            Tempore accusamus eaque rerum est.
                                        </h3>
                                    </div>
                                </figcaption>
                            </figure>
                        </div>

                    </div>

                    <div class="Carousel-item">
                        <div class="u-color-grey-30">
                            <figure>
                                <a href="#img-2" aria-labelledby="desc-2" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=2" class="u-sizeFull" alt="" />
    </a>
                                <figcaption class="u-padding-r-top">
                                    <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                                    <div class="Grid">
                                        <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                        <h3 id="desc-2" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                            Ut adipisci iure tempore ullam laborum.
                                        </h3>
                                    </div>
                                </figcaption>
                            </figure>
                        </div>

                    </div>

                    <div class="Carousel-item">
                        <div class="u-color-grey-30">
                            <figure>
                                <a href="#img-3" aria-labelledby="desc-3" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=3" class="u-sizeFull" alt="" />
    </a>
                                <figcaption class="u-padding-r-top">
                                    <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                                    <div class="Grid">
                                        <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                        <h3 id="desc-3" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                            Consequuntur est et quo ullam aut omnis aut et.
                                        </h3>
                                    </div>
                                </figcaption>
                            </figure>
                        </div>

                    </div>

                    <div class="Carousel-item">
                        <div class="u-color-grey-30">
                            <figure>
                                <a href="#img-4" aria-labelledby="desc-4" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=4" class="u-sizeFull" alt="" />
    </a>
                                <figcaption class="u-padding-r-top">
                                    <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                                    <div class="Grid">
                                        <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                        <h3 id="desc-4" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                            Et vitae qui ullam quis alias quibusdam quos.
                                        </h3>
                                    </div>
                                </figcaption>
                            </figure>
                        </div>

                    </div>

                    <div class="Carousel-item">
                        <div class="u-color-grey-30">
                            <figure>
                                <a href="#img-5" aria-labelledby="desc-5" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=5" class="u-sizeFull" alt="" />
    </a>
                                <figcaption class="u-padding-r-top">
                                    <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                                    <div class="Grid">
                                        <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                        <h3 id="desc-5" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                            Libero porro non quasi sunt a dolor voluptatem voluptas ipsam.
                                        </h3>
                                    </div>
                                </figcaption>
                            </figure>
                        </div>

                    </div>

                    <div class="Carousel-item">
                        <div class="u-color-grey-30">
                            <figure>
                                <a href="#img-6" aria-labelledby="desc-6" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=6" class="u-sizeFull" alt="" />
    </a>
                                <figcaption class="u-padding-r-top">
                                    <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                                    <div class="Grid">
                                        <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                        <h3 id="desc-6" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                            Quia quos placeat et.
                                        </h3>
                                    </div>
                                </figcaption>
                            </figure>
                        </div>

                    </div>

                    <div class="Carousel-item">
                        <div class="u-color-grey-30">
                            <figure>
                                <a href="#img-7" aria-labelledby="desc-7" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=7" class="u-sizeFull" alt="" />
    </a>
                                <figcaption class="u-padding-r-top">
                                    <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                                    <div class="Grid">
                                        <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                        <h3 id="desc-7" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                            Magni ut ut quae.
                                        </h3>
                                    </div>
                                </figcaption>
                            </figure>
                        </div>

                    </div>

                </div>
                <p class="u-padding-r-top u-text-r-xl">
                    <a href="" class="u-layout-centerLeft u-padding-r-top u-text-h4 u-textWeight-700 u-color-teal-50">Vedi tutte le gallerie</a>
                </p>
            </div>
        </section>

    </div>

    <div class="u-background-grey-20 u-background-grey-20 u-color-black u-text-xxl u-padding-r-top u-padding-r-bottom">
        <div class="u-layout-wide u-layoutCenter u-layout-r-withGutter">
            <section class="u-padding-r-top u-padding-r-bottom">
                <h2 class="u-text-h3 u-layout-centerLeft">deleniti doloribus vel</h2>
                <ul class="Grid Grid--withGutter">

                    <li class="Grid-cell u-sizeFull u-md-size1of4 u-lg-size1of4">
                        <a class="Leads-link u-color-black" href="">lead 1</a>
                    </li>

                    <li class="Grid-cell u-sizeFull u-md-size1of4 u-lg-size1of4">
                        <a class="Leads-link u-color-black" href="">lead 2</a>
                    </li>

                    <li class="Grid-cell u-sizeFull u-md-size1of4 u-lg-size1of4">
                        <a class="Leads-link u-color-black" href="">lead 3</a>
                    </li>

                    <li class="Grid-cell u-sizeFull u-md-size1of4 u-lg-size1of4">
                        <a class="Leads-link u-color-black" href="">lead 4</a>
                    </li>

                </ul>
            </section>

        </div>
    </div>

    <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="">porro vel rem</a></li>
                            <li><a href="">culpa nam consequatur</a></li>
                            <li><a href="">ipsa repellendus inventore</a></li>
                            <li><a href="">molestiae laboriosam ea</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="">porro vel rem</a></li>
                            <li><a href="">culpa nam consequatur</a></li>
                            <li><a href="">ipsa repellendus inventore</a></li>
                            <li><a href="">molestiae laboriosam ea</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="">porro vel rem</a></li>
                            <li><a href="">culpa nam consequatur</a></li>
                            <li><a href="">ipsa repellendus inventore</a></li>
                            <li><a href="">molestiae laboriosam ea</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="">porro vel rem</a></li>
                            <li><a href="">culpa nam consequatur</a></li>
                            <li><a href="">ipsa repellendus inventore</a></li>
                            <li><a href="">molestiae laboriosam ea</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 labore facere aut<br>
          labore facere aut<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 porro vel rem<br>
          porro vel rem<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="deleniti doloribus vel">deleniti doloribus vel</a></li>
                    <li>labore facere aut</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>

There are no notes for this item.