<div class="c-billboards_tablist c-tablist">
<ul class="c-billboards_tabs c-tablist__tabs" role="tablist">
<li>
<a href="#partenze" role="tab" aria-current="true"><svg class="c-icon c-icon--24">
<use xlink:href="#ic_flight_takeoff_black_24px"></use>
</svg> Partenze</a>
</li>
<li>
<a href="#arrivi" role="tab"><svg class="c-icon c-icon--24">
<use xlink:href="#ic_flight_land_black_24px"></use>
</svg> Arrivi</a>
</li>
</ul>
<div class="c-billboards ">
<div class="c-billboards__item c-tablist__section" id="partenze">
<div class="c-billboard c-billboard--departures ">
<input class="c-billboard__toggle" type="checkbox" name="billboard" id="radio-toggle-billboard-departures" aria-hidden="true">
<label class="c-billboard__label" for="radio-toggle-billboard-departures">
<div class="icon"><svg class="c-icon c-icon--32">
<use xlink:href="#ic_flight_takeoff_black_24px"></use>
</svg></div>
<div class="text">
<p>Partenze</p>
<small>Ultimo aggiornamento 10:10</small>
</div>
<div class="status">
<div class='c-status c-status--delay'>
<div class='c-status__img'>
<svg height='69' viewBox='0 0 69 69' width='69' xmlns='http://www.w3.org/2000/svg'>
<g fill='none' fill-rule='evenodd'>
<circle cx='34.5' cy='34.5' fill='#e8ecf2' r='34.5'></circle>
<g fill-rule='nonzero'>
<g transform='translate(11 28.96)'>
<path d='m30.7721607 21.4158365c2.2189691.839156 1.9580818 3.757661.003183 5.0503395-1.5308386 1.0122683-4.6580008 1.0122683-9.3814866 0-.8940848-.0000222-1.7454867-.429994-2.3394757-1.1814733l-3.0583814-3.8692307-15.996.000208v-18.450432h13.768882l2.2117455-1.76942938c.7010315-.56081379 1.5720533-.86634662 2.4698045-.86634662h14.6916754c1.1108814 0 2.0114286 1.18007711 2.0114286 2.635776s-.9005472 2.635776-2.0114286 2.635776h2.1371429c1.3886016 0 2.5142857 1.18007711 2.5142857 2.635776s-1.1256841 2.635776-2.5142857 2.635776h2.3885714c1.5274618 0 2.7657143 1.1800771 2.7657143 2.635776s-1.2382525 2.635776-2.7657143 2.635776h1.5085714c1.666322 0 3.0171429 1.1800771 3.0171429 2.635776s-1.3508209 2.635776-3.0171429 2.635776z' fill='#fecd05'></path>
<rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472'></rect>
<rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472' y='16.4736'></rect>
<rect fill='#2b72b0' height='12.519936' rx='2.306304' width='11.202048' x='1.317888' y='5.930496'></rect>
<path d='m5.76177737 14.669171-1.32383065-1.3238307c-.38235783-.3886368-.52634303-.7502363-.14083294-1.1357464.38551008-.3855101 1.18857604.3159297 1.57721282.6982875l.5143082.5143082 1.29884335-1.7318187c.32900917-.4386788 1.02957775-1.3957871 1.55630478-1.0605269.52672703.3352603.32900915.8466666 0 1.2853455l-1.98574597 2.6476613c-.17268596.2302592-.43679316.3742518-.72388715.394667-.02360831.0016548-.04707872.0024822-.07041124.0024822-.26329289 0-.51579118-.1046467-.7019612-.290829z' fill='#fff'></path>
</g>
<g transform='translate(30.36 14)'>
<path d='m22.528 11.264c0 2.9968125-1.1634219 5.8172813-3.2757656 7.942-2.1111407 2.123-4.9214688 3.3025781-7.9143281 3.3214844-.0073907 0-.0154688.0005156-.0228594 0-.0166719.0005156-.0338594.0005156-.0510469.0005156-3.00832814 0-5.83704686-1.1713281-7.96451564-3.2991406-2.1278125-2.1272969-3.29948436-4.9561875-3.29948436-7.9648594 0-3.00867186 1.17167186-5.83704686 3.29948436-7.96485936 2.12746878-2.12746878 4.9561875-3.29914064 7.96451564-3.29914064.0171875 0 .0338594 0 .0510469.00051563.0079062 0 .0158125 0 .0237187.00034374 2.9925157.0194219 5.8026719 1.19865627 7.9134688 3.32165627 2.1123437 2.12471872 3.2757656 4.94501563 3.2757656 7.94148436z' fill='#ff4a05'></path>
<g fill='#fff'>
<path d='m13.1965625 6.62028127v5.03525003c0 1.0350312-.8418438 1.8770468-1.8767031 1.8770468h-.0048125c-.4834844-.0140937-.9826094-.2093437-1.32257817-.5494844-.35423437-.3545781-.54965623-.8258593-.54965623-1.3275624v-5.03525003c0-1.02351563.84975-1.84765627 1.8722344-1.87704691h.0048125c1.0348593 0 1.8767031.8421875 1.8767031 1.87704691z'></path>
<path d='m13.0961875 15.9121875c0 .9798594-.7968125 1.7766719-1.7766719 1.7766719h-.0044687c-.9772813-.0022344-1.7718594-.7981875-1.7718594-1.7766719 0-.9781406.7945781-1.7740938 1.7718594-1.7763281h.0044687c.9798594 0 1.7766719.7968125 1.7766719 1.7763281z'></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class='c-status__txt'>
<strong>Presentati con ampio anticipo in aeroporto</strong>
<small>Causa controlli aggiuntivi dovuti al Covid-19</small>
</div>
</div>
</div>
</label>
<div class="c-billboard__table">
<table class="c-table c-table--flights">
<caption class="u-visuallyhidden"></caption>
<thead>
<tr>
<th class="no-mobile">Compagnia</th>
<th>Destinazione</th>
<th>N° Volo</th>
<th>Orario stimato</th>
<th>Stato</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
</td>
<td>
<a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
</td>
<td>14:00</td>
<td class="situation">Check-in C 45→48</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
</td>
<td>
<a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
</td>
<td>14:00</td>
<td class="situation">Check-in C 45→48</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
</td>
<td>
<a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
</td>
<td>14:00</td>
<td class="situation">Check-in C 45→48</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Swiss International Air Lines</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp"><strong>MARSA ALAM / SHARM EL SHEIKH</strong></div>
</td>
<td>
<a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info FRANKFURT YU9001">YU9001</a>
</td>
<td>14:00</td>
<td class="situation">Check-in C 45→48</td>
</tr>
<tr>
<td class="no-mobile"><a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a></td>
<td><strong>LONDON LHR</strong></td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info LONDON LHR CP9827">CP9827</a></td>
<td>14:00 <strong class="is-negative">14:20</strong></td>
<td class="situation">Check-in C 45→48</td>
</tr>
</tbody>
</table>
<p class="foot">
<a href="../preview/page-arrivals-departures#section-departures.html">Tutte le partenze</a>
</p>
</div>
</div>
<div class="c-billboard__status status">
<div class='c-status c-status--delay'>
<div class='c-status__img'>
<svg height='69' viewBox='0 0 69 69' width='69' xmlns='http://www.w3.org/2000/svg'>
<g fill='none' fill-rule='evenodd'>
<circle cx='34.5' cy='34.5' fill='#e8ecf2' r='34.5'></circle>
<g fill-rule='nonzero'>
<g transform='translate(11 28.96)'>
<path d='m30.7721607 21.4158365c2.2189691.839156 1.9580818 3.757661.003183 5.0503395-1.5308386 1.0122683-4.6580008 1.0122683-9.3814866 0-.8940848-.0000222-1.7454867-.429994-2.3394757-1.1814733l-3.0583814-3.8692307-15.996.000208v-18.450432h13.768882l2.2117455-1.76942938c.7010315-.56081379 1.5720533-.86634662 2.4698045-.86634662h14.6916754c1.1108814 0 2.0114286 1.18007711 2.0114286 2.635776s-.9005472 2.635776-2.0114286 2.635776h2.1371429c1.3886016 0 2.5142857 1.18007711 2.5142857 2.635776s-1.1256841 2.635776-2.5142857 2.635776h2.3885714c1.5274618 0 2.7657143 1.1800771 2.7657143 2.635776s-1.2382525 2.635776-2.7657143 2.635776h1.5085714c1.666322 0 3.0171429 1.1800771 3.0171429 2.635776s-1.3508209 2.635776-3.0171429 2.635776z' fill='#fecd05'></path>
<rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472'></rect>
<rect fill='#013860' height='7.907328' rx='.988416' width='7.248384' x='3.29472' y='16.4736'></rect>
<rect fill='#2b72b0' height='12.519936' rx='2.306304' width='11.202048' x='1.317888' y='5.930496'></rect>
<path d='m5.76177737 14.669171-1.32383065-1.3238307c-.38235783-.3886368-.52634303-.7502363-.14083294-1.1357464.38551008-.3855101 1.18857604.3159297 1.57721282.6982875l.5143082.5143082 1.29884335-1.7318187c.32900917-.4386788 1.02957775-1.3957871 1.55630478-1.0605269.52672703.3352603.32900915.8466666 0 1.2853455l-1.98574597 2.6476613c-.17268596.2302592-.43679316.3742518-.72388715.394667-.02360831.0016548-.04707872.0024822-.07041124.0024822-.26329289 0-.51579118-.1046467-.7019612-.290829z' fill='#fff'></path>
</g>
<g transform='translate(30.36 14)'>
<path d='m22.528 11.264c0 2.9968125-1.1634219 5.8172813-3.2757656 7.942-2.1111407 2.123-4.9214688 3.3025781-7.9143281 3.3214844-.0073907 0-.0154688.0005156-.0228594 0-.0166719.0005156-.0338594.0005156-.0510469.0005156-3.00832814 0-5.83704686-1.1713281-7.96451564-3.2991406-2.1278125-2.1272969-3.29948436-4.9561875-3.29948436-7.9648594 0-3.00867186 1.17167186-5.83704686 3.29948436-7.96485936 2.12746878-2.12746878 4.9561875-3.29914064 7.96451564-3.29914064.0171875 0 .0338594 0 .0510469.00051563.0079062 0 .0158125 0 .0237187.00034374 2.9925157.0194219 5.8026719 1.19865627 7.9134688 3.32165627 2.1123437 2.12471872 3.2757656 4.94501563 3.2757656 7.94148436z' fill='#ff4a05'></path>
<g fill='#fff'>
<path d='m13.1965625 6.62028127v5.03525003c0 1.0350312-.8418438 1.8770468-1.8767031 1.8770468h-.0048125c-.4834844-.0140937-.9826094-.2093437-1.32257817-.5494844-.35423437-.3545781-.54965623-.8258593-.54965623-1.3275624v-5.03525003c0-1.02351563.84975-1.84765627 1.8722344-1.87704691h.0048125c1.0348593 0 1.8767031.8421875 1.8767031 1.87704691z'></path>
<path d='m13.0961875 15.9121875c0 .9798594-.7968125 1.7766719-1.7766719 1.7766719h-.0044687c-.9772813-.0022344-1.7718594-.7981875-1.7718594-1.7766719 0-.9781406.7945781-1.7740938 1.7718594-1.7763281h.0044687c.9798594 0 1.7766719.7968125 1.7766719 1.7763281z'></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class='c-status__txt'>
<strong>Presentati con ampio anticipo in aeroporto</strong>
<small>Causa controlli aggiuntivi dovuti al Covid-19</small>
</div>
</div>
</div>
</div>
<div class="c-billboards__item c-tablist__section" hidden id="arrivi">
<div class="c-billboard c-billboard--arrivals ">
<input class="c-billboard__toggle" type="checkbox" name="billboard" id="radio-toggle-billboard-arrivals" aria-hidden="true">
<label class="c-billboard__label" for="radio-toggle-billboard-arrivals">
<div class="icon"><svg class="c-icon c-icon--32">
<use xlink:href="#ic_flight_land_black_24px"></use>
</svg></div>
<div class="text">
<p>Arrivi</p>
<small>Ultimo aggiornamento 10:10</small>
</div>
</label>
<div class="c-billboard__table">
<table class="c-table c-table--flights">
<caption class="u-visuallyhidden"></caption>
<thead>
<tr>
<th class="no-mobile">Compagnia</th>
<th>Provenienza</th>
<th>N° Volo</th>
<th>Orario stimato</th>
<th>Stato</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp">
<strong>VIENNA</strong>
</div>
</td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
<td>14:00</td>
<td class="situation">Atterrato</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp">
<strong>VIENNA</strong>
</div>
</td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
<td>14:00</td>
<td class="situation">Atterrato</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp">
<strong>VIENNA</strong>
</div>
</td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
<td>14:00</td>
<td class="situation">Atterrato</td>
</tr>
<tr>
<td class="no-mobile c-table__cell-to-clamp">
<div class="clamp">
<a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a>
</div>
</td>
<td class="c-table__cell-to-clamp">
<div class="clamp">
<strong>VIENNA</strong>
</div>
</td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info VIENNA BE3783">BE3783</a></td>
<td>14:00</td>
<td class="situation">Atterrato</td>
</tr>
<tr>
<td class="no-mobile"><a href="../../ /components/preview/page-flight-companies.html"><strong>Alitalia</strong></a></td>
<td><strong>MADRID</strong></td>
<td><a href="../../ /components/preview/page-myflight-arrival-pax.html" aria-label="Info MADRID AZ8783">AZ8783</a></td>
<td>14:00 <strong class="is-positive">13:50</strong></td>
<td class="situation">Atterrato</td>
</tr>
</tbody>
</table>
<p class="foot">
<a href="../preview/page-arrivals-departures#section-arrivals.html">Tutti gli arrivi</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="c-billboards_tablist c-tablist">
<ul class="c-billboards_tabs c-tablist__tabs" role="tablist">
<li>
<a href="#partenze" role="tab" aria-current="true"><svg class="c-icon c-icon--24"><use xlink:href="#ic_flight_takeoff_black_24px"></use></svg> Partenze</a>
</li>
<li>
<a href="#arrivi" role="tab"><svg class="c-icon c-icon--24"><use xlink:href="#ic_flight_land_black_24px"></use></svg> Arrivi</a>
</li>
</ul>
<div class="c-billboards {{ modifier }}">
<div class="c-billboards__item c-tablist__section" id="partenze">
{{ render "@billboard--departures" }}
</div>
<div class="c-billboards__item c-tablist__section" hidden id="arrivi">
{{ render "@billboard--arrivals" }}
</div>
</div>
</div>
/* No context defined. */
.c-tablist.c-billboards_tablist .c-billboards_tabs {
display: inline-flex;
margin-bottom: remify(16px);
@include min-screen(bp(tablet-p)) {
display: none;
}
}
.c-billboards {
@include min-screen(bp(tablet-p)) {
display: flex;
}
main & {
grid-column: main;
}
}
.c-billboards__item {
flex: 1 1 50%;
@include min-screen(bp(tablet-p)) {
display: flex;
flex-direction: column;
}
&:first-child {
@include min-screen(bp(tablet-p)) {
margin-right: remify(16px);
}
}
}
No notes defined.