<div class="c-tablist c-tablist--destination">
<ul class="c-tablist__tabs">
<li>
<a href="#section-city-description">L’isola d’Elba in breve</a>
</li>
<li>
<a href="#section-city-calendar">Calendario voli</a>
</li>
</ul>
<section class="c-tablist__section" id="section-city-description">
<div class="c-content-expo" grid="grid">
<div class="c-content-expo__item c-content-expo__item--side" grid="4@md offset-9@md">
<div class="c-content-expo__listitem ">
<div class="o-flexgrid-inline o-flexgrid--space-between ">
<div class="c-content-expo__today">
<div class="icon icon--flight"><svg class="c-icon c-icon--48">
<use xlink:href="#ic_flight_takeoff_black_24px"></use>
</svg></div>
<div class="c-content-expo__today-info">
<div>45 min</div>
<strong class="u-typo-level-1-5">Durata volo</strong>
</div>
</div>
<div class="c-content-expo__today is-last">
<div class="c-content-expo__weather-assets">
<img src="../../images/svgs/weather-clouds.svg" alt="Il meteo di oggi è nuvoloso" />
<img src="../../images/logo-epson-meteo.png" alt="Centro Epson Meteo" width="44" />
</div>
<div class="c-content-expo__today-info">
<div>12°C / 24°C</div>
<strong class="u-typo-level-1-5">Oggi, nuvoloso</strong>
</div>
</div>
</div>
</div>
<p class="u-typo-level-4 u-color-night-100">Aeroporti serviti da Bologna</p>
<div class="">
<div class="c-content-expo__listitem ">
<div class="o-flexgrid-inline o-flexgrid--space-between ">
<strong>Elba EBA</strong> <a href="#">www.aia.gr</a>
</div>
</div>
<div class="c-content-expo__listitem">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
<div class="c-trait__el new">
</div>
</div>
</div>
<div class="c-content-expo__listitem">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
<div class="c-trait__el new">
</div>
</div>
</div>
</div>
<div class="">
<div class="c-content-expo__listitem ">
<div class="o-flexgrid-inline o-flexgrid--space-between ">
<strong>Atene ATL</strong> <a href="#">www.aia.gr</a>
</div>
</div>
<div class="c-content-expo__listitem">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
<div class="c-trait__el new">
</div>
</div>
</div>
</div>
<p class="u-typo-level-4 u-color-night-100">Mappa della città</p>
<div class="c-citymap ">
<div class="c-citymap__map">
<img class="static-map" src="https://maps.googleapis.com/maps/api/staticmap?center=Atene,+Grecia&zoom=14&size=600x300&markers=Atene,+Grecia&key=AIzaSyABU478CeE-kWTe9e86eDm9n4ANtibBd3M" width="100%" alt="">
<div class="dynamic-map" tabindex="-1">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d27720.073525969474!2d23.71457427705499!3d37.98734565478933!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14a1bd1f067043f1%3A0x2736354576668ddd!2sAtene%2C+Grecia!5e0!3m2!1sit!2sit!4v1530710163014" width="100%" height="320" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<div class="c-citymap__footer">
<a href="https://www.google.com/maps?ll=37.990837,23.738339&z=13&t=m&hl=it-IT&gl=IT&mapclient=embed&q=Atene+Grecia" target="_blank">Visita la città su Google Maps</a>
</div>
</div>
</div>
<div class="c-content-expo__item c-content-expo__item--main" grid="7@md first@md">
<h2><strong>Voli Bologna Isola d’Elba</strong></h2>
<p>
L'Aeroporto di Bologna offre voli diretti da/per l'Isola d’Elba. In questa pagina trovi tutte le informazioni
utili.</p>
<p>
Isola d’Elba<br />
Sono molteplici le sfaccettature dell’Isola d’Elba che ne fanno da sempre un paradiso insulare a poca distanza dal
“continente”. Selvaggia ed incontaminata, super attrezzata e all’avanguardia, per grandi e piccini.</p>
<p>
Oltre 147 i chilometri di costa che racchiudono più di 150 spiagge, tutte diverse tra loro: dagli arenili dorati
alle calette di sassolini, dalle spiagge nere vulcaniche, a quelle di ciottoli bianchissimi. Spiagge celate da
imponenti scogliere di granito e basalto o che si aprono a ridosso dei centri abitati che punteggiano l’isola. La
Cotaccia, proprio accanto a Patresi, o Fonza, alla sinistra di Marina di Campo, o ancora una delle tante
insenature della penisola del Calamita, solo per citare alcune delle calette imperdibili, si trovano a poca
distanza da tutte le comodità di un soggiorno in pieno relax.</p>
<p>
Le famiglie possono tuffarsi in giornate di mare e divertimento. I campeggiatori, zaini in spalla, possono
soddisfare la loro sete di esplorazione, mentre chi cerca la quiete potrà trovarla nelle località di La Zanca e
Costa dei Gabbiani. E la sera, i colori e gli schiamazzi dei mercatini di Porto Azzurro, sono un invito a
lasciarvi avvolgere dalla vivacità dell’isola.</p>
</p>
<div class="c-content-expo__footer">
<button type="button" class="c-button c-button--submit js-fr-dialogmodal-open" aria-controls="dialog-flights-form">
Acquista il volo
</button>
<div class="c-content-expo__media">
<div class="c-media o-media ">
<img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="PDF orari voli 2022" height="" width="32">
<div class="c-media__body o-media__body">
<a href="#"><strong>Orari voli Estate 2018</strong></a><br>PDF, 577 kb
</div>
</div>
<div class="c-media o-media ">
<img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="PDF orari voli 2022" height="" width="32">
<div class="c-media__body o-media__body">
<a href="#"><strong>Orari voli Estate 2018</strong></a><br>PDF, 577 kb
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="c-tablist__section" id="section-city-calendar">
<div class="c-calendar c-calendar--flights">
<ul class="airports">
<li><a href="#" class="is-active">Aeroporto - Atene Eleftherios (ATH)</a></li>
<li><a href="#">Aeroporto - Atene Eleftherios (ATH)</a></li>
</ul>
<div class="filters c-form">
<div class="filters__child route">
<div role="radiogroup" aria-label="Seleziona la tratta di andata o di ritorno">
<strong class="is-label">Tratta: <span class="required-marker" aria-hidden="true">*</span></strong>
<div><input type="radio" id="andata" name="round-trip-selection" value="andata" class=" u-visuallyhidden">
<label class="" for="andata">BLQ > ATH</label>
</div>
<div><input type="radio" id="ritorno" name="round-trip-selection" value="ritorno" class=" u-visuallyhidden">
<label class="" for="ritorno">ATH > BLQ</label>
</div>
</div>
</div>
<div class="filters__child companies">
<label for="select-flight-companies" class="" aria-label="">
Compagnie aeree: <span class="required-marker" aria-hidden="true">*</span>
<select id="select-flight-companies" class="" aria-describedby="select-flight-companies-note">
<option value="" disabled selected></option>
<option value="option-1" selected>Tutte le compagnie</option>
<option value="option-2">Alitalia</option>
<option value="option-3">Ryanair</option>
</select>
<em class="c-field__note u-visuallyhidden" id="select-flight-companies-note">
Seleziona le compagnie
</em>
</label>
</div>
<div class="filters__child news" role="radiogroup" aria-label="seleziona le novità del mese corrente o dei mesi successivi">
<input type="radio" id="current-month" name="choice" value="current-months" class="js-fr-dialogmodal-open u-visuallyhidden" aria-controls="dialog-button">
<label class="" for="current-month">★ Novità di questo mese</label> <input type="radio" id="next-months" name="choice" value="next-months" class=" u-visuallyhidden">
<label class="" for="next-months">★ Novità dei prossimi mesi</label>
</div>
<div class="filters__child months">
<a href="#"><svg class="c-icon c-icon--24">
<use xlink:href="#ic_chevron_left_black_24px"></use>
</svg>
<p class="u-visuallyhidden">Mese precedente</p>
</a>
<p>Aprile</p>
<a href="#"><svg class="c-icon c-icon--24">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg>
<p class="u-visuallyhidden">Mese successivo</p>
</a>
</div>
</div>
<ul class="c-calendar__weekdays">
<li aria-label="Lunedì">Lun</li>
<li aria-label="Martedì">Mar</li>
<li aria-label="Mercoledì">Mer</li>
<li aria-label="Giovedì">Gio</li>
<li aria-label="Venerdì">Ven</li>
<li aria-label="Sabato">Sab</li>
<li aria-label="Domenica">Dom</li>
</ul>
<ul class="c-calendar__day-grid">
<li class="ghost-day">
<span>29</span>
</li>
<li class="ghost-day">
<span>30</span>
</li>
<li class="ghost-day">
<span>31</span>
</li>
<li class="">
<span>1</span>
</li>
<li class="">
<span>2</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>3</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>4</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>5</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>6</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>7</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>8</span>
</li>
<li class="">
<span>9</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>10</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>11</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>12</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>13</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>14</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>15</span>
</li>
<li class="">
<span>16</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>17</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>18</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>19</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>20</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>21</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>22</span>
</li>
<li class="">
<span>23</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>24</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>25</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>26</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>27</span>
</li>
<li class="active-day">
<a href="#" class="js-fr-dialogmodal-open" aria-controls="dialog-dayflight">
<span>28</span>
<div class="flight-companies">
<div class="company">
<img src="../../images/flights-logos/alitalia.png" alt="Alitalia" width="30">
<p aria-hidden="true">★</p>
</div>
<div class="company"><img src="../../images/flights-logos/ryanair.png" alt="Ryanair" width="30"></div>
</div>
</a>
</li>
<li class="">
<span>29</span>
</li>
<li class="">
<span>30</span>
</li>
<li class="ghost-day">
<span>1</span>
</li>
<li class="ghost-day">
<span>2</span>
</li>
</ul>
<small class="c-calendar__hint">
Clicca sui giorni evidenziati per vedere i voli disponibili in quel giorno.
</small>
</div>
<div class="c-dialog c-dialog--dayflight js-fr-dialogmodal " id="dialog-dayflight">
<div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-dayflight-title">
<div role="document">
<p class="c-dialog__title" id="dialog-dayflight-title">Mercoledì <strong>25 Aprile 2018</strong> Andata BLQ > ATH</p>
<div class="flightDetail">
<p class="flightDetail__companyName">Alitalia</p>
<div class="flightDetail__list">
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
<div class="c-trait__el new">
<span class="c-rounded-label c-rounded-label--grey u-typo-level-1">
<span aria-hidden="true">★</span> <strong>Novità</strong>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
<div class="c-trait__el new">
<span class="c-rounded-label c-rounded-label--grey u-typo-level-1">
<span aria-hidden="true">★</span> <strong>Novità</strong>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
<div class="c-trait__el new">
</div>
</div>
</div>
</div>
</div>
</div>
<p class="flightDetail__companyName">Ryanair</p>
<div class="flightDetail__list">
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
</div>
</div>
</div>
</div>
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
</div>
</div>
</div>
</div>
<div class="flightDetail__route">
<div class="c-transport-hallmark ">
<div class="c-transport-hallmark__item">
<div class="c-trait ">
<div class="c-trait__el livery">
<img src="../../images/flights-logos/ryanair.png" class="c-trait__livery_img" alt="Ryanair">
</div>
<div class="c-trait__el company">
<p class="label">Company</p>
<p class="txt"><strong>Ryanair</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Linea/Charter</p>
<p class="txt"><strong>Linea</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Numero volo</p>
<p class="txt"><strong>SLD 504</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Partenza</p>
<p class="txt"><strong>14:40</strong></p>
</div>
<div class="c-trait__el">
<p class="label">Arrivo</p>
<p class="txt"><strong>15:40</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
</div>
</div>
</section>
</div>
<div class="c-tablist c-tablist--destination">
<ul class="c-tablist__tabs">
<li>
<a href="#section-city-description">L’isola d’Elba in breve</a>
</li>
<li>
<a href="#section-city-calendar">Calendario voli</a>
</li>
</ul>
<section class="c-tablist__section" id="section-city-description">
{{ render "@content-expo--destination" }}
</section>
<section class="c-tablist__section" id="section-city-calendar">
{{ render "@calendar--select-company" }}
</section>
</div>
{
"home-it": true,
"tab": [
{
"anchor-id": "section-1",
"tab-text": "Section 1",
"tab-content-title": "Section title 1",
"tab-content-text": "<p>111 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere nemo nihil dolor reprehenderit blanditiis dignissimos a nostrum. Quam, neque? Omnis non, facere modi adipisci et dicta. Voluptate, quo. Quia, adipisci.</p>"
},
{
"anchor-id": "section-2",
"tab-text": "Section 2",
"tab-content-title": "Section title 2",
"tab-content-text": "<p>222 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere nemo nihil dolor reprehenderit blanditiis dignissimos a nostrum. Quam, neque? Omnis non, facere modi adipisci et dicta. Voluptate, quo. Quia, adipisci.</p>"
},
{
"anchor-id": "section-3",
"tab-text": "Section 3",
"tab-content-title": "Section title 3",
"tab-content-text": "<p>333 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere nemo nihil dolor reprehenderit blanditiis dignissimos a nostrum. Quam, neque? Omnis non, facere modi adipisci et dicta. Voluptate, quo. Quia, adipisci.</p>"
}
]
}
.c-tablist {
position: relative;
text-align: center;
// only IE 10 & 11
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
z-index: 2;
}
main & {
grid-column: main;
}
.c-tablist__tabs {
padding: 0;
display: inline-flex;
position: relative;
z-index: 1;
margin: 0 auto;
border-radius: remify(16px);
border: 4px solid primary(night, 20);
background-color: primary(night, 20);
}
.c-tablist__tabs li,
.c-tablist__tabs a {
display: inline-block;
flex: 1;
border-radius: remify(4px) remify(4px) 0 0;
}
.c-tablist__tabs a {
text-decoration: none;
padding: remify(8px) remify(20px);
color: primary(night, 100);
display: block;
text-align: center;
white-space: nowrap;
min-width: remify(140px);
background-color: primary(night, 20);
color: primary(night, 100);
border-radius: remify(12px);
@include min-screen (bp(tablet)) {
padding: remify(8px) remify(40px);
min-width: remify(220px);
}
.c-icon {
vertical-align: bottom;
color: currentColor;
}
svg {
* {
fill: currentColor;
}
}
}
.c-tablist__tabs [aria-current="true"] {
color: #fff;
background-color: primary(night, 80);
}
.c-tablist__section {
padding: remify(16px);
@include min-screen(bp(tablet-p)) {
padding: 0;
}
.disclaimer {
text-align: center;
font-size: 75%;
margin-top: remify(20px);
}
.c-tablist__empty-message {
color: primary(night, 100);
font-weight: fw(regular);
margin: remify(80px) 0;
font-size: 150%;
text-align: center;
}
}
.c-tablist__section-header {
padding: remify(16px);
display: flex;
flex-direction: column;
gap: remify(16px);
@include min-screen(bp(phone-p)) {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.c-tablist__section-title {
@include font-scale(level-3);
color: #fff;
// padding: remify(16px) 0 0 remify(16px);
text-align: left;
}
}
/*------------------------------------*\
Flights-list modifier
\*------------------------------------*/
.c-tablist--flights-list,
.c-tablist--destination {
.c-tablist__section {
position: relative;
@include min-screen(bp(tablet-l)) {
padding: remify(48px);
}
}
}
/*------------------------------------*\
Destination modifier
\*------------------------------------*/
.c-tablist--destination {
margin-top: remify(40px);
}
/*------------------------------------*\
Flights times modifier
\*------------------------------------*/
.c-tablist--flights-times {
.c-tablist__tabs {
z-index: 0; // To prevent the bug of autocomplete that goes under the tabs
width: 100%;
max-width: remify(450px);
@include min-screen(bp(tablet-p)) {
width: 50%;
max-width: initial;
}
}
.c-tablist__section {
padding: remify(16px) 0;
}
// .c-main--arrivals-departures & {
// margin-top: remify(24px);
// }
.c-tablist__tabs a {
font-size: 75%;
@include min-screen(bp(phone-p)) {
font-size: 100%;
}
}
.status {
text-align: center;
margin-bottom: remify(32px);
position: relative;
@include min-screen(bp(tablet)) {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
// display: flex;
// justify-content: space-between;
// align-items: center;
}
}
.status__child {
&.refresh {
display: none;
@include min-screen(bp(tablet)) {
display: block;
}
}
&.is-alone {
margin-left: auto;
}
}
.status__child+.status__child {
margin-top: remify(16px);
@include min-screen(bp(tablet)) {
margin-top: 0;
}
}
.status .days {
display: flex;
align-items: center;
justify-content: center;
// @include min-screen(bp(tablet-p)) {
// position: absolute;
// left: 50%;
// transform: translateX(-50%);
// }
.today {
text-align: center;
color: primary(night, 100);
}
p {
font-size: 150%;
margin: 0 remify(24px);
}
small {
text-transform: uppercase;
}
a {
max-height: remify(24px);
}
svg * {
fill: primary(night, 100);
}
}
.last-update {
text-align: center;
width: 100%;
}
.last-update--mobile {
display: block;
margin-top: remify(24px);
@include min-screen(bp(tablet)) {
display: none;
}
}
.last-update--desktop {
display: none;
@include min-screen(bp(tablet)) {
display: block;
margin-top: remify(8px);
}
}
.c-tablist__time-switcher {
display: none;
position: sticky;
z-index: 200;
bottom: 0;
@include min-screen(bp(tablet)) {
display: block;
}
}
.flight-items {
max-width: remify(800px);
margin-inline: auto;
padding-inline: remify(16px);
}
}
/*------------------------------------*\
Forms modifier
\*------------------------------------*/
.c-tablist--forms {
.c-tablist__sections {
margin-top: 0;
@include min-screen(bp(tablet)) {
display:0 0 remify(48px);
}
// Dichiara un'altezza minima in modo da evitare il reflow della pagina
min-height: remify(96px);
}
.c-tablist__section {
box-shadow: none;
padding: 0;
margin: 0 auto;
outline: none;
max-width: remify(900px);
background-color: primary(night, 100);
border-radius: 0 0 remify(16px) remify(16px);
&~.c-tablist__section {
display: none;
}
// Rende visibile il tab corrente quando XIAO ha terminato il caricamento
&[aria-label]:not([hidden]) {
display: block;
}
}
.c-tablist__section--flights {
@include min-screen( $bp-form-flights ) {
width: 100%;
max-width: remify(1269px);
border-radius: remify(16px);
margin: 0 auto;
}
}
.c-tablist__tabs {
justify-content: space-between;
flex-wrap: nowrap;
border: none;
border-radius: 0;
width: 100%;
max-width: remify(900px);
border-radius: remify(16px) remify(16px) 0 0;
overflow: hidden;
@include min-screen(bp(tablet)) {
justify-content: center;
flex-wrap: nowrap;
}
}
.c-tablist__tabs li {
flex: 0 1 25%;
border-radius: 0;
}
.c-tablist__tabs a,
.c-tablist__tabs [aria-current="true"] {
padding: remify(16px) remify(4px);
background-color: primary(night, 20);
color: primary(night, 120);
display: block;
text-align: center;
border-radius: 0;
width: 100%;
min-width: remify(40px);
@include font-scale(level-1-5);
}
.c-tablist__tabs [aria-current="true"] {
text-decoration: none;
background-color: primary(night, 100);
color: #fff;
}
.c-tablist__tabs li a:hover,
.c-tablist__tabs [aria-current="true"] {
@include max-screen(bp(tablet)) {
background-color: primary(night, 120);
color: primary(sun, 100);
}
}
.c-tablist__tabs a svg {
display: inline-block;
* {
fill: currentColor;
}
}
.c-tablist__tabs span {
display: none;
@include min-screen(bp(tablet)) {
display: inline-block;
}
}
.c-tablist__tabs .mobile-label {
display: block;
@include min-screen(bp(tablet)) {
display: none;
}
}
.c-tablist__section--express {
.c-form__fields {
padding: remify(16px);
}
}
}
/*------------------------------------*\
HOMEPAGE forms modifier
\*------------------------------------*/
// .c-tablist--forms .c-tablist__section--parkings.has-banner:not([hidden]) {}
.c-tablist--forms .c-tablist__section {
.c-form {
padding: remify(16px);
text-align: left;
label {
color: #fff;
}
.c-field__note {
color: #fff;
}
label.is-negative {
color: status(light-negative);
input {
background-color: status(light-negative);
}
.c-field__note {
color: status(light-negative);
}
}
}
.c-banner {
border-radius: 0 0 remify(16px) remify(16px);
}
.c-form .pax-type label {
color: inherit;
}
}
/*------------------------------------*\
Pax-guide modifier
\*------------------------------------*/
.c-tablist--pax-guide {
*:focus {
outline: none;
}
.c-tablist__section {
margin-top: remify(8px);
border-radius: remify(8px);
background-color: primary(night, 120);
color: #fff;
a {
color: currentColor;
}
}
.c-tablist__tabs a,
.c-tablist__tabs [aria-current="true"] {
padding: remify(16px);
background-color: primary(night, 100);
color: #fff;
display: block;
text-align: center;
height: 100%;
border-radius: remify(4px);
background-color: transparent;
box-shadow: none;
font-size: 150%;
font-weight: fw(light);
}
.c-tablist__tabs [aria-current="true"] {
text-decoration: none;
font-weight: fw(semibold);
&:before {
position: absolute;
@include css-triangle("down", 10px, primary(sun, 100));
bottom: remify(-10px);
left: 50%;
transform: translateX(-50%);
@include min-screen(bp(tablet)) {
content: "";
}
}
}
}
/*------------------------------------*\
titolo-borsa modifier
\*------------------------------------*/
.c-tablist.c-tablist--titolo-borsa {
margin: remify(40px) 0;
.c-tablist__tabs {
@include max-screen(bp(phone-p)) {
align-items: flex-end;
}
}
.c-tablist__tabs a {
font-size: 75%;
&[aria-current="true"] {
border-top: remify(5px) solid;
}
&.departures {
border-color: primary(sky, 100);
}
&.arrivals {
border-color: primary(sun, 100);
}
@include min-screen(bp(phone-p)) {
font-size: 100%;
}
@include min-screen(bp(tablet)) {
font-size: 145%;
line-height: 1.42;
}
}
.iframes-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.iframes-container__item {
flex: 0 1 remify(600px);
padding: remify(8px);
}
}
/*------------------------------------*\
YouFirst modifier
\*------------------------------------*/
.c-tablist--youfirst {
@include shadow(higher);
max-width: remify(900px);
margin: 0 auto;
border: 1px solid primary(night, 20);
border-radius: remify(24px);
.c-tablist__sections {
margin-top: 0;
@include min-screen(bp(tablet)) {
display:0 0 remify(48px);
}
// Dichiara un'altezza minima in modo da evitare il reflow della pagina
min-height: remify(96px);
}
.c-tablist__section {
box-shadow: none;
padding: 0;
margin: 0 auto;
outline: none;
border-radius: 0 0 remify(24px) remify(24px);
background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
& ~ .c-tablist__section {
display: none;
}
// Rende visibile il tab corrente quando XIAO ha terminato il caricamento
&[aria-label]:not([hidden]) {
display: block;
}
}
.c-tablist__tabs {
justify-content: space-between;
flex-wrap: nowrap;
border: none;
border-radius: 0;
width: 100%;
border-radius: remify(24px) remify(24px) 0 0;
overflow: hidden;
@include min-screen(bp(tablet)) {
justify-content: center;
flex-wrap: nowrap;
}
}
.c-tablist__tabs li {
flex: 0 1 100%;
border-radius: 0;
}
.c-tablist__tabs a,
.c-tablist__tabs [aria-current="true"] {
padding: remify(16px) remify(4px);
background-color: primary(night, 10);
color: primary(night, 120);
display: block;
text-align: center;
border-radius: 0;
width: 100%;
min-width: remify(40px);
@include font-scale(level-1-5);
.c-tablist__label--desktop { display: none;}
.c-tablist__label--mobile { display: block;}
@include min-screen(bp(tablet)) {
.c-tablist__label--desktop { display: inline-block;}
.c-tablist__label--mobile { display: none;}
}
}
.c-tablist__tabs [aria-current="true"] {
text-decoration: none;
background-color: #fff;
}
.c-tablist__tabs a svg {
display: inline-block;
* {
fill: currentColor;
}
}
.c-tablist__tabs span {
display: none;
@include min-screen(bp(tablet)) {
display: inline-block;
}
}
.c-tablist__section--express {
.c-form__fields {
padding: remify(16px);
}
}
}
.youfirst_tab {
text-align: left;
padding: remify(24px);
@include min-screen(bp(tablet)) {
padding: remify(24px) remify(48px) remify(48px);
}
.youfirst_tab__title {
@include font-scale(level-4);
color: primary(night, 120);
margin-bottom: remify(24px);
}
.youfirst_tab__container {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.youfirst_tab__item {
@include min-screen(bp(tablet-p)) {
flex: 0 1 50%;
}
p {
margin-bottom: remify(8px);
}
ul li{
@include font-scale(level-1-5);
list-style: disc;
margin-bottom: remify(8px);
margin-left: remify(16px);
}
.c-button--submit {
width: 100%;
margin-top: remify(24px);
}
&:first-child {
@include min-screen(bp(tablet)) {
padding-right: remify(48px);
border-right: 1px solid primary(night, 20);
}
}
&.youfirst_tab__item--images {
display: none;
@include min-screen(bp(tablet)) {
padding-left: remify(48px);
display: flex;
justify-content: space-between;
.youfirst_tab__image {
flex: 0 1 46%;
}
}
}
}
.u-chkbx-showmore ~ .u-chkbx-showmore-target { display: block; max-height: 4rem; overflow: hidden; }
.u-chkbx-showmore:checked ~ .u-chkbx-showmore-target { display: block; max-height: 100%; }
.u-chkbx-showmore ~ label .more { display: inline-block; }
.u-chkbx-showmore:checked ~ label .more { display: none; }
.u-chkbx-showmore ~ label .less { display: none; }
.u-chkbx-showmore:checked ~ label .less { display: inline-block; }
.u-chkbx-showmore-label {
color: primary(sky, 120);
@include font-scale(level-2);
display: inline-block;
margin: remify(8px) 0 remify(16px);
&, & span {
text-decoration: underline;
}
&:hover {
cursor: pointer;
}
}
.youfirst_tab__divider {
text-align: center;
padding: remify(8px) 0;
margin: remify(8px) 0;
position: relative;
span {
padding: 0 remify(16px);
background-color: #fff;
display: inline-block;
position: relative;
z-index: 2;
}
&:after {
content: "";
position: absolute;
left: remify(24px);
right: remify(24px);
top: 50%;
transform: translateY(-50%);
border-bottom: 1px solid primary(night, 20);
z-index: 1;
}
}
}
(function($) {
/*
This JS scrolls the page on the anchors in order to avoid the page goes to the top everytime.
*/
var $tabs = $('.c-tablist__tabs a');
$tabs.on( "click", function(e) {
// console.log($(this).text());
// e.preventDefault();
// $('html,body').animate({
// scrollTop: $(this).offset().top - 10
// }, 500);
});
})(jQuery);
No notes defined.