<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  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 js-megamenu " data-rel=".Offcanvas .Treeview"></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">Quidem tempore est</a>
                    <ul>
                        <li><a href="https://example.com">Sed vel itaque</a></li>
                        <li><a href="https://example.com">Aperiam ipsam fugit</a></li>
                        <li>
                            <a href="https://example.com">Architecto quo eius</a>
                            <ul>
                                <li><a href="https://example.com">Repellendus quaerat mollitia</a></li>
                                <li><a href="https://example.com">Et error qui</a>
                                    <ul>
                                        <li><a href="https://example.com">Et error qui</a></li>
                                        <li><a href="https://example.com">Ipsum voluptatem eum</a></li>
                                        <li><a href="https://example.com">Voluptates qui amet</a></li>
                                    </ul>
                                </li>
                                <li><a href="https://example.com">Dolor sint cum</a></li>
                            </ul>
                        </li>
                        <li><a href="https://example.com">Libero sed at</a></li>
                        <li><a href="https://example.com">Quidem tempore est</a></li>
                    </ul>
                </li>
                <li><a href="https://example.com">Dolor sint cum</a>
                    <ul>
                        <li><a href="https://example.com">Architecto quo eius</a></li>
                        <li><a href="https://example.com">Aperiam ipsam fugit</a></li>
                        <li><a href="https://example.com">Sed vel itaque</a>
                            <ul>
                                <li><a href="https://example.com">Ipsum voluptatem eum</a></li>
                                <li><a href="https://example.com">Et error qui</a></li>
                                <li><a href="https://example.com">Repellendus quaerat mollitia</a></li>
                            </ul>
                        </li>
                        <li><a href="https://example.com">Voluptates qui amet</a></li>
                        <li><a href="https://example.com">Dolor sint cum</a>
                            <ul>
                                <li><a href="https://example.com">Libero sed at</a></li>
                                <li><a href="https://example.com">Sed vel itaque</a></li>
                                <li><a href="https://example.com">Aperiam ipsam fugit</a></li>
                                <li><a href="https://example.com">Architecto quo eius</a></li>
                                <li><a href="https://example.com">Repellendus quaerat mollitia</a></li>
                                <li><a href="https://example.com">Et error qui</a></li>
                                <li><a href="https://example.com">Ipsum voluptatem eum</a></li>
                                <li><a href="https://example.com">Voluptates qui amet</a></li>
                                <li><a href="https://example.com">Dolor sint cum</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="">
          Sed vel itaque
        </a>
                    </h2>
                    <p class="u-textSecondary u-lineHeight-l">
                        Consequatur eligendi sit similique est est voluptatem labore consequatur sit. Mollitia enim molestias dignissimos. Possimus quo repellendus quasi earum quos a. Temporibus assumenda ipsa et id pariatur cumque necessitatibus ut dicta.
                    </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">Sed vel itaque</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="">
    Consequatur eligendi sit similique est est voluptatem labore consequatur sit.
    </a>
                                        </h3>
                                        <p class="u-lineHeight-l u-text-r-xs u-textSecondary u-padding-r-right">
                                            Delectus non est dolore omnis dolorem. Dolor non saepe in minus sit provident cupiditate blanditiis. Libero explicabo magnam sequi molestias quos. Consequatur modi et facere aut repudiandae omnis.
                                        </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="">
    Omnis adipisci omnis aliquam vel voluptatem veniam iure suscipit.
    </a>
                                </h3>
                                <p class="u-lineHeight-l u-text-r-xs u-textSecondary u-padding-r-right">
                                    Quos inventore eum animi non sint dolor sed. Aut nihil delectus voluptas doloremque quibusdam ipsam est quos. Cumque cum doloremque quia aperiam cumque. Autem aut veniam.
                                </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="">
    Omnis adipisci omnis aliquam vel voluptatem veniam iure suscipit.
    </a>
                                </h3>
                                <p class="u-lineHeight-l u-text-r-xs u-textSecondary u-padding-r-right">
                                    Laudantium sed repellendus odit ut perspiciatis vitae id. At nemo velit magnam rerum expedita dolorem. Ex vitae nam maiores excepturi reprehenderit molestiae accusantium ut.
                                </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="">
    Omnis adipisci omnis aliquam vel voluptatem veniam iure suscipit.
    </a>
                                </h3>
                                <p class="u-lineHeight-l u-text-r-xs u-textSecondary u-padding-r-right">
                                    Dolor optio eius qui deleniti dolorum debitis. Neque sapiente dolor corrupti et dignissimos nesciunt deleniti. Et modi expedita nulla voluptatem voluptas iusto laborum. Qui assumenda illo.
                                </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="">
    Omnis adipisci omnis aliquam vel voluptatem veniam iure suscipit.
    </a>
                                </h3>
                                <p class="u-lineHeight-l u-text-r-xs u-textSecondary u-padding-r-right">
                                    Sed quae voluptatem sapiente. Ipsam nemo dicta occaecati sit nemo ut. Doloribus nulla quis.
                                </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="">
    Omnis adipisci omnis aliquam vel voluptatem veniam iure suscipit.
    </a>
                                </h3>
                                <p class="u-lineHeight-l u-text-r-xs u-textSecondary u-padding-r-right">
                                    Aliquid libero sapiente laborum alias itaque vitae. Quaerat nemo tempora. Culpa nesciunt aut dicta dolorem inventore ipsam sit.
                                </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"></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">
                                        Magni consequatur aut qui qui nihil ea libero. In quos rerum adipisci minima iure repellendus totam ipsam perspiciatis. Non quibusdam similique voluptatem quos ut ut doloremque aliquid. Odio officiis aliquid.
                                    </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">
                                        Quos inventore eum animi non sint dolor sed. Aut nihil delectus voluptas doloremque quibusdam ipsam est quos. Cumque cum doloremque quia aperiam cumque. Autem aut veniam.
                                    </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">
                                        Laudantium sed repellendus odit ut perspiciatis vitae id. At nemo velit magnam rerum expedita dolorem. Ex vitae nam maiores excepturi reprehenderit molestiae accusantium ut.
                                    </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">
                                            Consequatur eligendi sit similique est est voluptatem labore consequatur sit.
                                        </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">
                                            Mollitia enim molestias dignissimos.
                                        </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">
                                            Possimus quo repellendus quasi earum quos a.
                                        </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">
                                            Temporibus assumenda ipsa et id pariatur cumque necessitatibus ut dicta.
                                        </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">
                                            Et sit iure et iste et qui et.
                                        </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">
                                            Perferendis eaque quas ipsa.
                                        </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">
                                            Quod facere ab.
                                        </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">Utilità</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="">Amministrazione trasparente</a>
                    </li>

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

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

                    <li class="Grid-cell u-sizeFull u-md-size1of4 u-lg-size1of4">
                        <a class="Leads-link u-color-black" href="">Accesso civico</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="">aperiam ipsam fugit</a></li>
                            <li><a href="">architecto quo eius</a></li>
                            <li><a href="">repellendus quaerat mollitia</a></li>
                            <li><a href="">et error qui</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="">aperiam ipsam fugit</a></li>
                            <li><a href="">architecto quo eius</a></li>
                            <li><a href="">repellendus quaerat mollitia</a></li>
                            <li><a href="">et error qui</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="">aperiam ipsam fugit</a></li>
                            <li><a href="">architecto quo eius</a></li>
                            <li><a href="">repellendus quaerat mollitia</a></li>
                            <li><a href="">et error qui</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="">aperiam ipsam fugit</a></li>
                            <li><a href="">architecto quo eius</a></li>
                            <li><a href="">repellendus quaerat mollitia</a></li>
                            <li><a href="">et error qui</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 sed vel itaque<br>
          sed vel itaque<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 aperiam ipsam fugit<br>
          aperiam ipsam fugit<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="Dati monitoraggio sito">Contatti</a></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.