<div class="l-boxed">
    <div class="l-boxed__header u-z-undercover">
        <div class="u-p-base">
            <a class="u-block" 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  ">
                    <span class="c-brand__edition">agrigento</span><span class="c-brand__network">notizie</span>
                </div>

            </a>
        </div>
    </div>
    <div class="l-boxed__sidebar" style="backgrond-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('/assets/images/site/cities/roma_desktop.jpg')">
    </div>
    <div class="l-boxed__content u-z-cover">
        <div class="l-boxed__inner u-my-large">

            <div class="c-tab u-p-none">
                <!-- tabs module -->
                <input type="radio" value="intro" id="intro-form-radio" class="u-none" name="c-tabs__choice" checked>
                <div id="intro-form-tab" class="c-tab__content u-size-full u-pl-base u-pr-base u-pl-none@md u-pr-none@md">
                    <!-- email form -->

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

                        <div class="c-stepper  u-relative u-overflow-x-auto u-mb-large">
                            <div class="c-stepper__line u-size-full u-absolute u-left"></div>
                            <ul class="u-flex u-row u-justify-between u-p-none u-m-none u-nowrap u-list-none u-z-base">

                                <li class="c-stepper__element c-stepper__element--active o-link-primary u-flex u-items-center u-justify-center u-z-undercover">

                                    <span class="u-label-11">1</span>

                                </li>

                                <li class="c-stepper__element c-stepper__element--active o-link-primary u-flex u-items-center u-justify-center u-z-undercover">

                                    <span class="u-label-11">2</span>

                                </li>

                                <li class="c-stepper__element c-stepper__element--active o-link-primary u-flex u-items-center u-justify-center u-z-undercover">

                                    <span class="u-label-11">3</span>

                                </li>

                            </ul>
                        </div>

                    </div>

                    <form id="email-buysignup-form" class="fw__wrapper u-mb-large" onsubmit="window.ga && ga( 'send', 'event', 'Community');" method="POST" action="myPage.php" novalidate>
                        <fieldset data-toggle="email-buysignup-fw__step" class="fw__inputs o-divider email-buysignup-fw__step u-pl-none u-pr-none u-mb-medium">

                            <!-- hgroup -->
                            <div class="u-text-center u-mb-large">
                                <h1 class="u-heading-03">Crea il tuo profilo personale</h1>
                                <p class="u-mb-large u-color-secondary">Scegli una modalità di registrazione</p>
                            </div>
                            <!-- end hgroup -->
                            <!-- social logins -->
                            <div class="u-flex u-row">
                                <div class="u-mb-base u-wrap-row">
                                    <a href="user--edit2021" class="c-btn c-btn--google u-justify-center u-flex u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">
                                        <svg class="o-icon o-icon--fill o-icon--sm u-mr-small@lg u-self-center">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-google"></use>
                                        </svg>
                                        <span class="u-none u-inline-block@sm">Google</span>
                                    </a>
                                </div>
                                <div class="u-mb-base u-mr-small u-ml-small u-wrap-row">
                                    <a href="user--edit2021" class="c-btn c-btn--facebook u-justify-center u-flex u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">
                                        <svg class="o-icon o-icon--fill o-icon--sm u-mr-small@lg u-self-center">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook"></use>
                                        </svg>
                                        <span class="u-none u-inline-block@sm">Facebook</span>
                                    </a>
                                </div>
                                <div class="u-mb-base u-wrap-row">
                                    <a href="user--edit2021" class="c-btn c-btn--apple u-justify-center u-flex u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">
                                        <svg class="o-icon o-icon--fill o-icon--sm u-mr-small@lg u-self-center">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-apple"></use>
                                        </svg>
                                        <span class="u-none u-inline-block@sm">Apple</span>
                                    </a>
                                </div>
                            </div>
                            <!-- end social logins -->
                            <p class="o-text-overline u-text-center">
                                <span class="o-text u-color-secondary">oppure registrati con la tua email</span>
                            </p>
                            <!-- native login -->
                            <div class="u-flex u-column u-row@md">
                                <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
                                    <div class="">

                                        <label class="u-label-04 u-color-base" for="">Email*</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="">Password*</label>

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

                                    </div>

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

                                </div>
                            </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 ">
                                    <div class="">

                                        <label class="u-label-04 u-color-base" for="">Nome*</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="">Cognome*</label>

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

                                    </div>

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

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

                            </div>
                            <div class="u-my-large">
                                <strong class="u-mb-base">Autorizzo al trattamento dei miei dati per:</strong>

                                <div class="c-accordion c-accordion--borderless u-label-07">
                                    <p class="u-mb-base">
                                        Acconsento al trattamento dei miei dati personali per finalità di marketing &quot;diretto&quot; consistenti nell&#39;invio, anche tramite modalità automatiche, di newsletters, comunicazioni commerciali e/o promozionali e materiale pubblicitario.
                                    </p>
                                </div>
                                <div class="u-flex u-column u-row@md 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="">Do il consenso</span>

                                            <input type="radio" checked="checked" name="radio">
                                            <span class="c-form-radio__mark"></span>
                                        </label>
                                    </div>
                                    <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md ">
                                        <label class="c-form-radio">

                                            <span class="u-label-04 u-color-base u-inline-block" for="">Non do il consenso</span>

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

                                <div class="c-accordion c-accordion--borderless u-label-07">
                                    <p class="u-mb-base">
                                        Acconsento al trattamento dei miei dati personali per finalità di profilazione e ricerche di mercato, tramite strumenti di rilevazione dei gusti, delle preferenze, delle abitudini e/o del grado di soddisfazione della clientela.
                                    </p>
                                </div>
                                <div class="u-flex u-column u-row@md 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="">Do il consenso</span>

                                            <input type="radio" checked="checked" name="radio">
                                            <span class="c-form-radio__mark"></span>
                                        </label>
                                    </div>
                                    <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md ">
                                        <label class="c-form-radio">

                                            <span class="u-label-04 u-color-base u-inline-block" for="">Non do il consenso</span>

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

                                <div class="c-accordion c-accordion--borderless u-label-07">
                                    <p class="u-mb-base">
                                        Dichiaro di aver letto e compreso l&#39;informativa sul trattamento dei dati personali, accettando integralmente i termini e condizioni per l&#39;utilizzo del servizio.
                                    </p>
                                </div>
                                <div class="u-flex u-column u-row@md 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="">Accetto</span>

                                            <input type="radio" checked="checked" name="radio">
                                            <span class="c-form-radio__mark"></span>
                                        </label>
                                    </div>
                                    <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md ">
                                        <label class="c-form-radio">

                                            <span class="u-label-04 u-color-base u-inline-block" for="">Non accetto</span>

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

                            </div>
                            <p class="u-label-07 u-color-secondary u-block u-mb-large">
                                Completando la registrazione dichiaro di essere maggiorenne e di aver preso visione dell’ <a class="o-link-primary" href="https://citynews.it/privacy#gdpr&_ga=2.195002985.558624410.1646066405-2053839960.1623412359">Informativa Privacy</a> redatta ai sensi del Regolamento UE 679/2016 e di accettare i termini e le <a class="o-link-primary" href="https://citynews.it/termini-servizio#_ga=2.195002985.558624410.1646066405-2053839960.1623412359">condizioni del servizio</a>.
                            </p>
                            <div class="fw__inputs o-divider__error">
                                <p class="fw__inputs o-divider__error--message"></p>
                            </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="button" value="Avanti →" onclick="next()" />
                                    </div>

                                </div>

                            </div>
                            <!-- end native login -->
                            <div class="u-text-center u-mt-large u-pl-large u-pr-large u-pl-none@md u-pr-none@md">
                                <span class="u-label-07 u-color-secondary u-block u-mb-small">
                                    Sei già registrato?
                                    <a class="o-link-primary" href="user--login2021">Accedi col tuo profilo</a>
                                </span>
                                <span class="u-label-07 u-color-secondary u-block u-mb-small">
                                    Non hai ancora attivato il tuo profilo?
                                    <a class="o-link-primary" href="user--activate2021">Attiva il tuo profilo</a>
                                </span>
                            </div>
                        </fieldset>
                        <fieldset data-toggle="email-buysignup-fw__step" class="fw__inputs o-divider email-buysignup-fw__step u-pl-none u-pr-none u-mb-medium">
                            <!-- page hgroup -->
                            <div class="u-mb-large">
                                <h2 class="u-heading-03 u-text-center">Inserisci il codice di attivazione</h2>
                                <p class="u-mb-large u-text-center">
                                    Inserisci il codice di attivazione che hai ricevuto per email.<br />
                                    Non hai ancora ricevuto il codice? Richiedi un nuovo <a class="o-link-primary" href="#">codice di attivazione</a>
                                </p>
                            </div>
                            <!-- end page hgroup -->
                            <!-- form activate -->
                            <div class="u-mb-base ">
                                <div class="">

                                    <label class="u-label-03 c-form-label u-color-base" for="">Codice di attivazione*</label>

                                    <div class="u-flex">
                                        <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="placeholderfieldLabel">
                                        <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="placeholderfieldLabel">
                                        <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="placeholderfieldLabel">
                                        <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall " data-label="placeholderfieldLabel">
                                        <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="placeholderfieldLabel">
                                        <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center" data-label="placeholderfieldLabel">
                                    </div>

                                </div>

                                <script>
                                    const inputElements = [...document.querySelectorAll('input.code-input')]
                                    inputElements.forEach((ele, index) => {
                                        ele.addEventListener('keydown', (e) => {
                                            if (e.keyCode === 8 && e.target.value === '') inputElements[Math.max(0, index - 1)].focus()
                                        })
                                        ele.addEventListener('input', (e) => {
                                            const [first, ...rest] = e.target.value
                                            e.target.value = first ?? ''
                                            if (index !== inputElements.length - 1 && first !== undefined) {
                                                inputElements[index + 1].focus()
                                                inputElements[index + 1].value = rest.join('')
                                                inputElements[index + 1].dispatchEvent(new Event('input'))
                                            }
                                        })
                                    })
                                </script>
                            </div>
                            <div class="fw__inputs o-divider__error">
                                <p class="fw__inputs o-divider__error--message"></p>
                            </div>
                            <div class="u-mt-large">

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

                                    <div class="u-size-full u-size-1-2 ">
                                        <input class="c-btn c-btn--default u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="← Indietro" onclick="back()" />
                                    </div>

                                    <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="Registrati" />
                                    </div>

                                </div>

                            </div>
                            <!-- end form activate -->
                        </fieldset>
                        <fieldset data-toggle="email-buysignup-fw__step" class="fw__inputs o-divider email-buysignup-fw__step u-pl-none u-pr-none u-mb-medium">

                            <div class="u-mb-large">
                                <h2 class="u-heading-03 u-text-center">Ti ringraziamo per la tua iscrizione</h2>
                                <p class="u-mb-large u-text-center">Acquista il tuo abbonamento</p>
                            </div>

                            <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]-buysignup-fw__step" class="fw__inputs o-divider [object Object]-buysignup-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" />
                                                                </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]-buysignup-fw__step" class="fw__inputs o-divider [object Object]-buysignup-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" />
                                                                </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" />
                                                                </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" />
                                                                </div>

                                                            </div>

                                                        </div>
                                                    </fieldset>

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

                                        <!-- -->

                                    </div>
                                </label>

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

                        </fieldset>
                        <fieldset data-toggle="email-buysignup-fw__step" class="fw__inputs o-divider email-buysignup-fw__step u-pl-none u-pr-none u-mb-medium">
                            <!-- page hgroup -->
                            <div class="u-mb-large">
                                <h2 class="u-heading-03 u-text-center">Completa il tuo profilo personale</h2>
                                <p class="u-mb-large u-text-center">Modifica le informazioni del profilo personale</p>
                            </div>
                            <!-- end page hgroup -->
                            <!-- complete profile form -->
                            <div class="u-mb-xlarge u-flex u-items-center u-column ">
                                <div class="">

                                    <div class="c-form-avatar u-relative ">
                                        <svg class="u-absolute u-overflow-hidden" style="width: 0; height: 0;">
                                            <defs>
                                                <clipPath id="mask" clipPathUnits="objectBoundingBox">
                                                    <path d="M0.5,1 C0.856900994,1 1,0.856900994 1,0.5 C1,0.143099006 0.856900994,0 0.5,0 C0.143099006,0 0,0.143099006 0,0.5 C0,0.856900994 0.143099006,1 0.5,1 Z" />
                                                </clipPath>
                                            </defs>
                                        </svg>
                                        <input class="u-none" type="file" name="image" accept="image/*" />
                                        <div class="c-form-avatar__mask u-size-full"></div>
                                        <div class="c-form-avatar__uploader u-absolute u-cursor-pointer u-p-xsmall u-radius-circle u-border-none" aria-labelledby="image" aria-describedby="image">
                                            <svg class="o-icon o-icon--md o-link-text">
                                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-upload-cloud"></use>
                                            </svg>
                                        </div>
                                    </div>

                                    <script>
                                        const UPLOAD_BUTTON = document.querySelector(".c-form-avatar__uploader");
                                        const FILE_INPUT = document.querySelector("input[type=file]");
                                        const AVATAR = document.querySelector(".c-form-avatar__mask");
                                        UPLOAD_BUTTON.addEventListener("click", () => FILE_INPUT.click());
                                        FILE_INPUT.addEventListener("change", event => {
                                            const file = event.target.files[0];
                                            const reader = new FileReader();
                                            reader.readAsDataURL(file);
                                            reader.onloadend = () => {
                                                AVATAR.setAttribute("aria-label", file.name);
                                                AVATAR.style.background = `url(${reader.result}) center center/cover`;
                                            };
                                        });
                                    </script>

                                </div>
                                <div class="u-mt-base u-mt-none@sm u-ml-base@sm">
                                    <h3 class="u-title-05 u-mb-xsmall">Nome Cognome</h3>
                                    <span class="u-label-07 u-color-secondary u-block">email@mailservice.com</span>
                                </div>
                            </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="">Sesso</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 ">
                                <div class="">

                                    <label class="u-label-04 u-color-base" for="">Anno di nascita</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-mr-xsmall@md  ">
                                    <div class="">

                                        <label class="u-label-04 u-color-base" for="">Impiego</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="">Settore</label>

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

                                    </div>

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

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

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

                                    <div class="u-size-1-2 ">
                                        <input class="c-btn c-btn--default u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="Salta passaggio" onclick="next()" />
                                    </div>

                                    <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="button" value="Completa profilo" onclick="next()" />
                                    </div>

                                </div>

                            </div>
                            <!-- end complete profile form -->
                        </fieldset>
                        <section data-toggle="email-buysignup-fw__step" class="fw__result email-buysignup-fw__step">

                            <div class="u-mb-large">
                                <h2 class="u-heading-03 u-text-center">Grazie e Benvenuto</h2>
                                <p class="u-mb-large u-text-center">A breve riceverai una mail con il riepilogo dell’abbonamento attivato</p>
                            </div>

                            <div class="u-mb-large">
                                <div class="u-mb-base">
                                    <a href="user--edit2021" class="c-btn c-btn--primary u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Torna all'articolo</a>
                                </div>
                                <div class="u-mb-base">
                                    <a href="homepage--cover" class="c-btn c-btn--default u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Vai al canale spotlight</a>
                                </div>
                                <div class="u-mb-base">
                                    <a href="#" class="c-btn c-btn--default u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Invia una segnalazione</a>
                                </div>
                            </div>

                            <!-- app CTA -->
                            <p class="o-text-overline u-text-center">
                                <span class="o-text">Scarica l'app</span>
                            </p>
                            <a href="https://www.romatoday.it/~shared/do/api/mobile-app/get/?campaign=user_signup">
                                <div class="u-flex u-row@md">
                                    <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall">
                                        <img class="u-size-full" src="/assets/images/site/app/google_play_store.svg" alt="googlePlayStoreImg">
                                    </div>
                                    <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall">
                                        <img class="u-size-full" src="/assets/images/site/app/ios_app_store.svg" alt="iosAppStoreImg">
                                    </div>
                                </div>
                            </a>
                            <!-- end app CTA -->

                            <div id="results" class="u-mb-large u-mt-large"></div>
                        </section>
                    </form>

                    <script>
                        window.onload = function() {
                            var stepIndex = 0;
                        }
                        // var modeToggle = document.getElementsByClassName("input:radio[name=c-tabs__choice]:checked");
                        // const stepElements = document.querySelector('[data-toggle-step]');
                        var stepElements = document.getElementsByClassName("email-buysignup-fw__step");
                        var form = document.getElementById("email-buysignup-form");
                        var breadcrumbsItems = document.getElementsByClassName("c-stepper__element");
                        // Initialise the form
                        function init() {
                            // Reset the step
                            stepIndex = 0;
                            // Clear all fields
                            form.reset();
                            toggleBreadcrumbsStep();
                            showCurrentStep();
                            breadcrumbsItems.classList.add("c-stepper__element--active");
                        }
                        // Indicate the current step with breadcrumbs
                        function toggleBreadcrumbsStep() {
                            Array.from(breadcrumbsItems).forEach(function(el, index) {
                                if (index <= stepIndex) {
                                    el.classList.add("c-stepper__element--active");
                                } else {
                                    el.classList.remove("c-stepper__element--active");
                                }
                            });
                        }
                        // Show the current step and hide the rest
                        function showCurrentStep() {
                            Array.from(stepElements).forEach(function(el, index) {
                                if (index !== stepIndex) {
                                    el.classList.add("u-none");
                                } else {
                                    el.classList.remove("u-none");
                                }
                            });
                        }
                        // Next step action, all fields in current step must be validated before proceed to next step.
                        function next() {
                            const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
                            // Increment step
                            stepIndex++;
                            toggleBreadcrumbsStep();
                            showCurrentStep();
                        }
                        // Back button action to navigate 1 step back
                        function back() {
                            // Clear all fields in current step
                            const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
                            Array.from(fields).forEach(function(field) {
                                const tagName = field.tagName;
                                if (tagName.localeCompare("INPUT") === 0) {
                                    field.value = '';
                                } else if (tagName.localeCompare("SELECT") === 0) {
                                    field.selectedIndex = 0;
                                }
                            });
                            // Decrement step
                            stepIndex--;
                            toggleBreadcrumbsStep();
                            showCurrentStep();
                        }
                        form.addEventListener('submit', function(e) {
                            e.preventDefault();
                            const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
                            // all fields in current step must be validated before submission.
                            // Prepare the result in next view
                            showResult();
                            // Navigate to result
                            stepIndex++;
                            // toggleBreadcrumbsStep();
                            showCurrentStep();
                        }, false);

                        function showResult() {
                            const resultsContainer = document.getElementById("results");
                            // Make sure the result page is empty
                            resultsContainer.innerHTML = "";
                            const fields = form.querySelectorAll("input:not([type=button]):not([type=submit]), select");
                            // List out all data
                            fields.forEach(field => {
                                const fieldLabel = field.getAttribute("data-label");
                                const fieldValue = field.value;
                                const resultItem = document.createElement("li");
                                resultItem.setAttribute("class", "fw__result__item");
                                resultItem.innerHTML = '<span class="fw__result__label">' + fieldLabel + ':</span> <strong class="fw__result__value">' + fieldValue + '</strong>';
                                resultsContainer.append(resultItem);
                            });
                        }
                        init();
                    </script>
                    <!-- end email form -->
                </div>
                <!-- end tabs module -->
            </div>

        </div>
    </div>
    <div class="l-boxed__footer u-z-undercover">
        <!-- -->
        <div class="u-mt-xlarge@md u-p-base">
            <a href="www.citynews.it" class="c-footer-brand">

                <svg class="o-icon--fill" width="91" height="24">
                    <use xlink:href="#brand-citynews"></use>
                </svg>
            </a>
            <p class="u-label-07">
                © Copyright 2009-2021 RomaToday <br />
                plurisettimanale telematico reg. tribunale di Roma n. 93/2010 <br />
                P.iva 10786801000 <br />
                Testata iscritta all'USPI
            </p>
            <ul class="u-list-none u-list-reset u-label-07">
                <li class="u-size-full"><a class="o-link-primary" href="https://citynews.it/privacy#_ga=2.195002985.558624410.1646066405-2053839960.1623412359" targhet="_blank">Cookie & Privacy policy</a></li>
                <li class="u-size-full"><a class="o-link-primary" href="https://citynews.it/termini-servizio#_ga=2.195002985.558624410.1646066405-2053839960.1623412359" targhet="_blank">Termini e condizioni</a></li>
            </ul>
        </div>
        <!-- -->
    </div>
</div>
<div class="l-boxed">
	<div class="l-boxed__header u-z-undercover">
		<div class="u-p-base">
			<a class="u-block" href="/">
				{% render "@brand", {
					inverse:false, 
					modifier: 'resize-small',
					local: false,
					logo: false
				}, true %}
			</a>
		</div>
	</div>
	<div class="l-boxed__sidebar" {% if sidebarImg %}style="backgrond-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('{{sidebarImg}}')"{% endif %}>
	</div>
	<div class="l-boxed__content u-z-cover">
		<div class="l-boxed__inner u-my-large">
			{% if type == "login" %}
			{% render "@login", {
					type: type,
					mode: mode,
					page_title: page_title,
					page_subtitle: page_subtitle,
					actionLabel: actionLabel
				}, true %}
			{% elif type == "logout" %}
			{% render "@logout", {
					type: type,
					page_title: page_title,
					page_subtitle: page_subtitle,
					actionLabel: actionLabel
				}, true %}
			{% elif type == "signup" %}
			{% render "@signup", {
					type: type,
					page_title: page_title,
					page_subtitle: page_subtitle,
					actionLabel: actionLabel,
					methods: methods
				}, true %}
			{% elif type == "buysignup" %}
			{% render "@buysignup", {
					type: type,
					page_title: page_title,
					page_subtitle: page_subtitle,
					actionLabel: actionLabel,
					methods: methods
				}, true %}
			{% elif type == "activate" %}
			{% render "@activate", {
					type: type,
					page_title: page_title,
					page_subtitle: page_subtitle,
					actionLabel: actionLabel
				}, true %}
			{% elif type == "recovery" %}
			{% render "@recovery", {
					type: type,
					page_title: page_title,
					page_subtitle: page_subtitle,
					actionLabel: actionLabel
				}, true %}
			{% elif type == "delete" %}
			{% render "@delete", {
					type: type,
					page_title: page_title,
					page_subtitle: page_subtitle,
					actionLabel: actionLabel
				}, true %}
			{% elif type == "view" %}
			{% render "@view", {
					type: type,
					page_title: page_title,
					page_subtitle: page_subtitle,
					actionLabel: actionLabel
				}, true %}
			{% endif %}
		</div>
	</div>
	<div class="l-boxed__footer u-z-undercover">
		<!-- -->
		<div class="u-mt-xlarge@md u-p-base">
			<a href="www.citynews.it" class="c-footer-brand">
				{# <img class="u-size-1-4" src="{{gBrand}}" alt="Citynews"> #}
				<svg class="o-icon--fill" width="91" height="24">
					<use xlink:href="#brand-citynews"></use>
				</svg>
			</a>
			<p class="u-label-07">
				© Copyright 2009-2021 {{hName}} <br />
				plurisettimanale telematico reg. tribunale di Roma n. 93/2010 <br />
				P.iva 10786801000 <br />
				Testata iscritta all'USPI
			</p>
			<ul class="u-list-none u-list-reset u-label-07">
				<li class="u-size-full"><a class="o-link-primary" href="https://citynews.it/privacy#_ga=2.195002985.558624410.1646066405-2053839960.1623412359" targhet="_blank">Cookie & Privacy policy</a></li>
				<li class="u-size-full"><a class="o-link-primary" href="https://citynews.it/termini-servizio#_ga=2.195002985.558624410.1646066405-2053839960.1623412359" targhet="_blank">Termini e condizioni</a></li>
			</ul>
		</div>
		<!-- -->
	</div>
</div>
{
  "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": "buysignup",
  "zoneRequired": false,
  "actionLabel": "Registrati",
  "errors": false,
  "page_title": "Crea il tuo profilo personale",
  "page_subtitle": "Scegli una modalità di registrazione",
  "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.