User: Buy

<header class="c-header c-header--slim c-header--inverse  u-zindex-5 u-py-base">
    <div class="o-container u-flex u-items-center u-height-full">

        <div class="u-none u-block@md" data-toggle-menu onclick="this.classList && 
			document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
			document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
			document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.toggle('is-open');}) ,
			document.querySelectorAll('[data-body-lock]').forEach( function(oNode){ oNode.classList.toggle('is-locked'); }) ,
			document.querySelectorAll('[data-item-navigation]').forEach( function(oNode){ oNode.classList.toggle('is-visible-from-tablet'); }),
			document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.add('is-hidden');})">

            <svg class="o-icon  o-icon--md c-navbar__controller u-cursor-pointer" data-toggle-menu-open>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use>
            </svg>
            <svg class="o-icon  o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-toggle-menu-close>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
            </svg>
        </div>

        <div class="u-flex u-items-center u-ml-base@md">
            <a href="/">

                <style>
                    @font-face {
                        font-family: 'NovecentoNarrow';
                        src: url("/~shared/files/webfonts/NovecentoSansNarrow.woff") format("woff2"),
                            url("/~shared/files/webfonts/NovecentoSansNarrow.woff") format("woff");
                        font-style: normal;
                        font-display: swap;
                    }
                </style>

                <div class="c-brand c-brand__text u-uppercase u-no-underline c-brand--resize-small  c-brand--alternate">
                    <span class="c-brand__edition">agrigento</span><span class="c-brand__network">notizie</span>
                </div>

            </a>

        </div>

        <div class="u-ml-auto c-navbar__search u-none u-block@md" data-search onclick="this.classList && 
			document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
			document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
			document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.toggle('is-hidden');}),
			document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.remove('is-open');})">

            <svg class="o-icon  o-icon--md u-cursor-pointer" data-search-open>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
            </svg>
            <svg class="o-icon  o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-search-close>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
            </svg>
        </div>

        <div class="u-none@md u-ml-auto" data-toggle-menu onclick="this.classList && 
			document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
			document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
			document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.toggle('is-open');}) ,
			document.querySelectorAll('[data-body-lock]').forEach( function(oNode){ oNode.classList.toggle('is-locked'); }) ,
			document.querySelectorAll('[data-item-navigation]').forEach( function(oNode){ oNode.classList.toggle('is-visible-from-tablet'); }),
			document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.add('is-hidden');})">

            <svg class="o-icon  o-icon--md c-navbar__controller u-cursor-pointer" data-toggle-menu-open>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use>
            </svg>
            <svg class="o-icon  o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-toggle-menu-close>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
            </svg>
        </div>

    </div>
    <div class="c-searchbar u-shadow-bottom u-z-upside u-size-full u-absolute u-px-base u-py-large  is-hidden " data-search-bar>
        <div class="o-container u-px-small@md">

            <div class="u-relative">
                <input class="u-size-full   " type="text" placeholder="Cerca nel sito">
                <button class="c-form-action c-btn c-btn--reset u-absolute u-cursor-pointer" type="submit">

                    <svg class="c-form-icon o-icon o-icon--md">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
                    </svg>

                </button>
            </div>

        </div>
    </div>
</header>
<div class="o-container u-mb-small u-mt-small u-none@xs">

    <span class="u-label-02 u-uppercase u-mb-small"><a class="c-breadcrumb u-px-xxsmall" href="#">item</a>/</span>
</div>
<div class="o-bg-primary u-cover" style="backgrond-size: cover; background-position: center center; background-image: url('/assets/images/site/cities/roma_desktop.jpg')">
    <div class="o-container u-mb-small u-mt-small">
        <h1 class="u-text-light">sdfsf</h1>
    </div>
</div>
<main class="o-page">
    <section class="o-container u-mb-medium" data-section-key="native" data-items-count="5" role="complementary">

        <div class="c-tab u-p-none">
            <!-- tabs module -->
            <div id="intro-form-tab" class="c-tab__content u-size-full u-border-none u-p-large u-p-small@sm u-block">

                <div class="u-text-center u-mb-large">
                    <h1 class="u-heading-03"></h1>
                    <p class="u-mb-large"></p>
                </div>

                <!-- billing shoose-->
                <div class="u-p-base u-mb-large u-border-top-solid u-border-bottom-solid u-border-left-solid u-border-right-solid u-border-gray-light u-border-1">
                    <h4 class="u-mb-none u-color-theme">Abbonamento «nome Testata»</h4>
                    <span class="u-label-07 u-block">Prezzo Promo $</span>
                    <span class="u-label-07 u-block">Prezzo a seguire $</span>
                    <span class="u-label-07 u-block"> Tot. $</span>
                    <span class="u-label-07 u-block u-mb-small">Data prossimo rinnovo.</span>
                    <span class="u-label-07 u-block">Puoi disdire il tuo abbonamento quando vuoi.</span>
                </div>
                <!-- end billing shoose-->

                <!-- -->
                <div class="c-accordion u-mb-large">
                    <label>
                        <input type="checkbox" class="u-none">
                        <div class="u-size-full u-cursor-pointer  c-accordion__label u-label-07 u-p-base u-flex  u-justify-between">
                            Desideo la fattura
                            <svg class="o-icon o-icon--md" data-dd-icon>
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
                            </svg>
                        </div>
                        <div class="c-accordion__body">
                            <!-- start forms -->
                            <label class="c-form-radio">
                                <span class="c-form-label u-label-07" for="">Azienda</span>
                                <span class="c-form-radio__mark"></span>
                                <input type="radio" value="private" id="company-form-radio" name="c-tabs__choice" checked>
                                <div id="company-form-tab" class="c-tab__content u-size-full u-pl-base u-pr-base u-pl-none@md u-pr-none@md">
                                    <!-- form fattura azienda -->
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">Ragione sociale*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">P. IVA*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">Indirizzo*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">N. civico*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">Città*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">CAP*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">Provincia*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">Codice identificativo (SDI) o PEC*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <!-- end form fattura azienda -->
                                </div>
                            </label>

                            <label class="c-form-radio">
                                <span class="c-form-label u-label-07" for="">Privato</span>
                                <span class="c-form-radio__mark"></span>
                                <input type="radio" value="private" id="private-form-radio" name="c-tabs__choice">
                                <div id="private-form-tab" class="c-tab__content u-size-full u-pl-base u-pr-base u-pl-none@md u-pr-none@md">
                                    <!-- form fattura privato -->
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">Nome*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">Cognome*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">Codice fiscale*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">Indirizzo*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">N.civico*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">Città*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">CAP*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">Provincia*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <div class="u-mb-base">
                                        <div class="">
                                            <label class="u-label-04 u-color-base" for="">Codice identificativo (SDI) o PEC*</label>
                                            <input class=" u-block u-size-full" type="text" placeholder="">
                                        </div>
                                    </div>
                                    <!-- end form fattura privato -->
                                </div>
                            </label>
                            <!-- end forms -->
                        </div>
                    </label>
                </div>
                <!-- -->

                <!-- form carta -->
                <div class="u-mb-base">
                    <div class="">

                        <label class="u-label-04 u-color-base" for="">Intestatario*</label>

                        <input class=" u-block u-size-full" type="text" placeholder="">

                    </div>

                    <!-- TODO: REVIEW ICON POSITION -->

                </div>
                <div class="u-mb-base">
                    <div class="">

                        <label class="u-label-04 u-color-base" for="">Numero carta*</label>

                        <input class=" u-block u-size-full" type="text" placeholder="">

                    </div>

                    <!-- TODO: REVIEW ICON POSITION -->

                </div>
                <div class="u-flex u-column u-row@md">
                    <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md">
                        <div class="">

                            <label class="u-label-04 u-color-base" for="">Scadenza*</label>

                            <input class=" u-block u-size-full" type="text" placeholder="">

                        </div>

                        <!-- TODO: REVIEW ICON POSITION -->

                    </div>
                    <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md">
                        <div class="">

                            <label class="u-label-04 u-color-base" for="">CVV*</label>

                            <input class=" u-block u-size-full" type="text" placeholder="">

                        </div>

                        <!-- TODO: REVIEW ICON POSITION -->

                    </div>
                </div>
                <!-- end form carta -->

                <p class="u-mb-base">Proseguendo dichiari di accettare le Condizioni particolari per l'erogazione del servizio richiesto</p>

                <div class="u-mb-base">
                    <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
                        <label class="c-form-radio">
                            <span class="u-label-04 u-color-base u-inline-block" for="">
                                Dichiaro di sottoscrivere specificatamente le clasule N° (Durata dellabbonamento, rinnovo automatico) ;N° (Diritto di recesso) N° (Costi del servizio) N° (Esclusione delle garanzie), N° (Modifica del contratto), N° (Manleva), N° (Responsabilità di RCS), N° (Limitazioni di responsabilità) N° (Codice etico) ai sensi degli articoli N° e N° c.c. del contratto sopracitato.
                            </span>
                            <input type="radio" checked="checked" name="radio">
                            <span class="c-form-radio__mark"></span>
                        </label>
                    </div>
                </div>

                <div class="u-mb-base">
                    <button type="submit" class="c-btn c-btn--primary c-btn--large u-label-04 u-size-full u-cursor-pointer">Carta di credito</button>
                </div>
                <div class="u-mb-base">
                    <button type="submit" class="c-btn c-btn--primary c-btn--large u-label-04 u-size-full u-cursor-pointer">Paypall</button>
                </div>

                <!-- payment method -->
                <h3 class="u-mb-large u-capitalize">Scegli metodo di pagamento</h3>
                <div class="c-accordion u-block u-mb-large">

                    <label>
                        <input type="radio" class="u-none" name="c-accordion__choice">
                        <div class="u-size-full u-cursor-pointer  c-accordion__label u-label-04 u-p-base u-flex  u-justify-between">
                            <img src="/assets/images/site/payments/Mastercard-Small.png" alt="Credit card">
                            <span class="u-label-04 u-color-base">Credit card</span>
                            <svg class="o-icon o-icon--md" data-dd-icon>
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
                            </svg>
                        </div>
                        <div class="c-accordion__body">

                            <!-- -->

                            <div class="c-accordion u-block u-mb-4">
                                <label for="creditcard-private-form-radio" class="u-block u-cursor-pointer">
                                    <input type="radio" value="type" id="creditcard-private-form-radio" class="u-none" name="c-tabs__choice-creditcard" checked>
                                    <div id="creditcard-private-form-tab" class="u-size-full u-cursor-pointer  c-accordion__label u-label-04 u-p-base u-flex  u-justify-between">
                                        <span class="u-label-04 u-color-base">Privati</span>
                                    </div>
                                    <div id="creditcard-private-form-tab" class="c-accordion__body">
                                        <!-- buy form -->

                                        <fieldset data-toggle="[object Object]-buy2021-fw__step" class="fw__inputs o-divider [object Object]-buy2021-fw__step u-pl-none u-pr-none u-mb-medium">
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Numero carta di credito</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-flex u-column u-row@md">
                                                <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">

                                                    <label class="u-label-04 u-color-base u-inline-block" for="">Mese</label>

                                                    <select class=" u-block u-size-full" name="select-name" id="select-id">

                                                        <option>option 1</option>

                                                        <option>option 2</option>

                                                        <option>option 3</option>

                                                        <option>option 4</option>

                                                    </select>

                                                </div>
                                                <div class="u-mb-base u-size-full u-size-1-2 ">

                                                    <label class="u-label-04 u-color-base u-inline-block" for="">Anno</label>

                                                    <select class=" u-block u-size-full" name="select-name" id="select-id">

                                                        <option>option 1</option>

                                                        <option>option 2</option>

                                                        <option>option 3</option>

                                                        <option>option 4</option>

                                                    </select>

                                                </div>
                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Intestatario</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">CVV</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base ">
                                                <label class="c-form-checkbox">

                                                    <span class="u-label-04 u-color-base">Richiesta fattura</span>

                                                    <input type="checkbox" checked="checked">
                                                    <span class="c-form-checkbox__mark"></span>
                                                </label>
                                            </div>

                                            <p class="u-label-07 u-color-secondary u-block u-mb-large">
                                                Proseguendo dichiari di accettare le <a href="">Condizioni di contratto</a> per l'erogazione del servizio richiesto
                                            </p>
                                            <div lass="u-mb-large">

                                                <div class="u-mb-base ">
                                                    <label class="c-form-radio">

                                                        <span class="u-label-04 u-color-base u-inline-block" for="">Dichiaro di sottoscrivere specificatamente le clasule N° (Durata dellabbonamento, rinnovo automatico) ;N° (Diritto di recesso) N° (Costi del servizio) N° (Esclusione delle garanzie), N° (Modifica del contratto), N° (Manleva), N° (Responsabilità di RCS), N° (Limitazioni di responsabilità) N° (Codice etico) ai sensi degli articoli N° e N° c.c. del contratto sopracitato.</span>

                                                        <input type="radio" checked="checked" name="radio">
                                                        <span class="c-form-radio__mark"></span>
                                                    </label>
                                                </div>

                                            </div>

                                            <div class="u-mt-large">

                                                <div class="u-flex u-items-center">

                                                    <div class="u-size-full u-size-1-2 u-text-right">
                                                        <input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="submit" value="Acquista abbonamento" />
                                                    </div>

                                                </div>

                                            </div>
                                        </fieldset>

                                        <!-- end buy form -->
                                    </div>
                                </label>
                            </div>

                            <div class="c-accordion u-block u-mb-4">
                                <label for="creditcard-companies-form-radio" class="u-block u-cursor-pointer">
                                    <input type="radio" value="type" id="creditcard-companies-form-radio" class="u-none" name="c-tabs__choice-creditcard">
                                    <div id="creditcard-companies-form-tab" class="u-size-full u-cursor-pointer  c-accordion__label u-label-04 u-p-base u-flex  u-justify-between">
                                        <span class="u-label-04 u-color-base">Aziende</span>
                                    </div>
                                    <div id="creditcard-companies-form-tab" class="c-accordion__body">
                                        <!-- buy form -->

                                        <fieldset data-toggle="[object Object]-buy2021-fw__step" class="fw__inputs o-divider [object Object]-buy2021-fw__step u-pl-none u-pr-none u-mb-medium">
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Numero carta di credito</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-flex u-column u-row@md">
                                                <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">

                                                    <label class="u-label-04 u-color-base u-inline-block" for="">Mese</label>

                                                    <select class=" u-block u-size-full" name="select-name" id="select-id">

                                                        <option>option 1</option>

                                                        <option>option 2</option>

                                                        <option>option 3</option>

                                                        <option>option 4</option>

                                                    </select>

                                                </div>
                                                <div class="u-mb-base u-size-full u-size-1-2 ">

                                                    <label class="u-label-04 u-color-base u-inline-block" for="">Anno</label>

                                                    <select class=" u-block u-size-full" name="select-name" id="select-id">

                                                        <option>option 1</option>

                                                        <option>option 2</option>

                                                        <option>option 3</option>

                                                        <option>option 4</option>

                                                    </select>

                                                </div>
                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Intestatario</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">CVV</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base ">
                                                <label class="c-form-checkbox">

                                                    <span class="u-label-04 u-color-base">Fattura</span>

                                                    <input type="checkbox" checked="checked">
                                                    <span class="c-form-checkbox__mark"></span>
                                                </label>
                                            </div>

                                            <p class="u-label-07 u-color-secondary u-block u-mb-large">
                                                Proseguendo dichiari di accettare le <a href="">Condizioni di contratto</a> per l'erogazione del servizio richiesto
                                            </p>
                                            <div lass="u-mb-large">

                                                <div class="u-mb-base ">
                                                    <label class="c-form-radio">

                                                        <span class="u-label-04 u-color-base u-inline-block" for="">Dichiaro di sottoscrivere specificatamente le clasule N° (Durata dellabbonamento, rinnovo automatico) ;N° (Diritto di recesso) N° (Costi del servizio) N° (Esclusione delle garanzie), N° (Modifica del contratto), N° (Manleva), N° (Responsabilità di RCS), N° (Limitazioni di responsabilità) N° (Codice etico) ai sensi degli articoli N° e N° c.c. del contratto sopracitato.</span>

                                                        <input type="radio" checked="checked" name="radio">
                                                        <span class="c-form-radio__mark"></span>
                                                    </label>
                                                </div>

                                            </div>

                                            <div class="u-mt-large">

                                                <div class="u-flex u-items-center">

                                                    <div class="u-size-full u-size-1-2 u-text-right">
                                                        <input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="submit" value="Acquista abbonamento" />
                                                    </div>

                                                </div>

                                            </div>
                                        </fieldset>

                                        <!-- end buy form -->
                                    </div>
                                </label>
                            </div>

                            <!-- -->

                        </div>
                    </label>

                    <label>
                        <input type="radio" class="u-none" name="c-accordion__choice">
                        <div class="u-size-full u-cursor-pointer  c-accordion__label u-label-04 u-p-base u-flex  u-justify-between">
                            <img src="/assets/images/site/payments/PayPal-Small.png" alt="Paypal">
                            <span class="u-label-04 u-color-base">Paypal</span>
                            <svg class="o-icon o-icon--md" data-dd-icon>
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
                            </svg>
                        </div>
                        <div class="c-accordion__body">

                            <!-- -->

                            <div class="c-accordion u-block u-mb-4">
                                <label for="paypal-private-form-radio" class="u-block u-cursor-pointer">

                                    <input type="radio" value="type" id="paypal-private-form-radio" class="u-none" name="c-tabs__choice-paypal" checked>
                                    <div id="paypal-private-form-tab" class="u-size-full u-cursor-pointer  c-accordion__label u-label-04 u-p-base u-flex  u-justify-between">
                                        <span class="u-label-04 u-color-base">Privati</span>
                                    </div>
                                    <div id="private-form-tab" class="c-accordion__body">
                                        <!-- buy form -->

                                        <fieldset data-toggle="--fw__step" class="fw__inputs o-divider --fw__step u-pl-none u-pr-none u-mb-medium">
                                            <div class="u-mb-base ">

                                                <label class="u-label-04 u-color-base u-inline-block" for="">Paese</label>

                                                <select class=" u-block u-size-full" name="select-name" id="select-id">

                                                    <option>option 1</option>

                                                    <option>option 2</option>

                                                    <option>option 3</option>

                                                    <option>option 4</option>

                                                </select>

                                            </div>
                                            <div class="u-mb-base ">
                                                <label class="c-form-checkbox">

                                                    <span class="u-label-04 u-color-base">Fattura</span>

                                                    <input type="checkbox" checked="checked">
                                                    <span class="c-form-checkbox__mark"></span>
                                                </label>
                                            </div>
                                            <h3>dati fatturazione</h3>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Nome</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Cognome</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Indirizzo</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Cap</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Provincia</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Località</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Codice fiscale</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Codice fiscale</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Emai (per ricezione fattura)</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>

                                            <p class="u-label-07 u-color-secondary u-block u-mb-large">
                                                Proseguendo dichiari di accettare le <a href="">Condizioni di contratto</a> per l'erogazione del servizio richiesto
                                            </p>
                                            <div lass="u-mb-large">

                                                <div class="u-mb-base ">
                                                    <label class="c-form-radio">

                                                        <span class="u-label-04 u-color-base u-inline-block" for="">Dichiaro di sottoscrivere specificatamente le clasule N° (Durata dellabbonamento, rinnovo automatico) ;N° (Diritto di recesso) N° (Costi del servizio) N° (Esclusione delle garanzie), N° (Modifica del contratto), N° (Manleva), N° (Responsabilità di RCS), N° (Limitazioni di responsabilità) N° (Codice etico) ai sensi degli articoli N° e N° c.c. del contratto sopracitato.</span>

                                                        <input type="radio" checked="checked" name="radio">
                                                        <span class="c-form-radio__mark"></span>
                                                    </label>
                                                </div>

                                            </div>

                                            <div class="u-mt-large">

                                                <div class="u-flex u-items-center">

                                                    <div class="u-size-full u-size-1-2 u-text-right">
                                                        <input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="submit" value="Acquista abbonamento" />
                                                    </div>

                                                </div>

                                            </div>
                                        </fieldset>

                                        <!-- end buy form -->
                                    </div>
                                </label>
                            </div>

                            <div class="c-accordion u-block u-mb-4">
                                <label for="paypal-companies-form-radio" class="u-block u-cursor-pointer">

                                    <input type="radio" value="type" id="paypal-companies-form-radio" class="u-none" name="c-tabs__choice-paypal">
                                    <div id="paypal-companies-form-tab" class="u-size-full u-cursor-pointer  c-accordion__label u-label-04 u-p-base u-flex  u-justify-between">
                                        <span class="u-label-04 u-color-base">Aziende</span>
                                    </div>
                                    <div id="companies-form-tab" class="c-accordion__body">
                                        <!-- buy form -->

                                        <fieldset data-toggle="--fw__step" class="fw__inputs o-divider --fw__step u-pl-none u-pr-none u-mb-medium">
                                            <div class="u-mb-base ">

                                                <label class="u-label-04 u-color-base u-inline-block" for="">Paese</label>

                                                <select class=" u-block u-size-full" name="select-name" id="select-id">

                                                    <option>option 1</option>

                                                    <option>option 2</option>

                                                    <option>option 3</option>

                                                    <option>option 4</option>

                                                </select>

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Codice destinatario</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">PEC</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Ragione sociale</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Indirizzo</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Cap</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Provincia</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base ">

                                                <label class="u-label-04 u-color-base u-inline-block" for="">Località</label>

                                                <select class=" u-block u-size-full" name="select-name" id="select-id">

                                                    <option>option 1</option>

                                                    <option>option 2</option>

                                                    <option>option 3</option>

                                                    <option>option 4</option>

                                                </select>

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">P.IVA</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>
                                            <div class="u-mb-base  gggg">
                                                <div class="">

                                                    <label class="u-label-04 u-color-base" for="">Codice fiscale</label>

                                                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                                                </div>

                                                <!-- TODO: REVIEW ICON POSITION -->

                                            </div>

                                            <p class="u-label-07 u-color-secondary u-block u-mb-large">
                                                Proseguendo dichiari di accettare le <a href="">Condizioni di contratto</a> per l'erogazione del servizio richiesto
                                            </p>
                                            <div lass="u-mb-large">

                                                <div class="u-mb-base ">
                                                    <label class="c-form-radio">

                                                        <span class="u-label-04 u-color-base u-inline-block" for="">Dichiaro di sottoscrivere specificatamente le clasule N° (Durata dellabbonamento, rinnovo automatico) ;N° (Diritto di recesso) N° (Costi del servizio) N° (Esclusione delle garanzie), N° (Modifica del contratto), N° (Manleva), N° (Responsabilità di RCS), N° (Limitazioni di responsabilità) N° (Codice etico) ai sensi degli articoli N° e N° c.c. del contratto sopracitato.</span>

                                                        <input type="radio" checked="checked" name="radio">
                                                        <span class="c-form-radio__mark"></span>
                                                    </label>
                                                </div>

                                            </div>

                                            <div class="u-mt-large">

                                                <div class="u-flex u-items-center">

                                                    <div class="u-size-full u-size-1-2 u-text-right">
                                                        <input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="submit" value="Acquista abbonamento" />
                                                    </div>

                                                </div>

                                            </div>
                                        </fieldset>

                                        <!-- end buy form -->
                                    </div>
                                </label>
                            </div>

                            <!-- -->

                        </div>
                    </label>

                </div>
                <!-- end payment method -->

                <!-- user profile contents-->
            </div>
            <!-- end tabs module -->
        </div>
    </section>
</main>
{% render "@header--slim" %}
<div class="o-container u-mb-small u-mt-small u-none@xs"> 
 {% render "@breadcrumb" %}
</div>
<div class="o-bg-primary u-cover" {% if sidebarImg %}style="backgrond-size: cover; background-position: center center; background-image: url('{{sidebarImg}}')"{% endif %}>
  <div class="o-container u-mb-small u-mt-small"> 
    <h1 class="u-text-light">sdfsf</h1>
  </div>
</div>
<main class="o-page"> 
  <section class="o-container u-mb-medium" data-section-key="native" data-items-count="5" role="complementary">
    {% render "@buy", {
      type: type,
      mode: mode,
      page_title: page_title,
      page_subtitle: page_subtitle,
      actionLabel: actionLabel,
      methods: methods
    }, true %}
  </section>
</main>
{# {% render "@footer", {local: true}, true %} #}
{
  "sidebarImg": "/assets/images/site/cities/roma_desktop.jpg",
  "hName": "RomaToday",
  "hBrand": "/assets/images/site/brands_orizzontal/Property 1=RomaToday.svg",
  "gBrand": "/assets/images/site/horizontal-white-full@2x.png",
  "type": "buy2021",
  "actionLabel": "Acquista abbonamento",
  "page_title": "Acquista abbonamento",
  "page_subtitle": "Reason why to buy",
  "methods": [
    {
      "item": null,
      "slug": "creditcard",
      "name": "Credit card",
      "icon": "/assets/images/site/payments/Mastercard-Small.png",
      "checked": true,
      "type": [
        {
          "item": null,
          "slug": "private",
          "name": "Privati",
          "checked": true
        },
        {
          "item": null,
          "slug": "companies",
          "name": "Aziende"
        }
      ]
    },
    {
      "item": null,
      "slug": "paypal",
      "name": "Paypal",
      "icon": "/assets/images/site/payments/PayPal-Small.png",
      "type": [
        {
          "item": null,
          "slug": "private",
          "name": "Privati",
          "checked": true
        },
        {
          "item": null,
          "slug": "companies",
          "name": "Aziende"
        }
      ]
    }
  ]
}

No notes defined.