:root{--blue: #00507f;--green: #b7cc27;--red: #D10000;--yellow: #f7f24d}*{box-sizing:border-box}body,html{padding:0;margin:0}body{font-family:"Titillium Web",sans-serif;height:100vh}img,video,audio{max-width:100%}.content{flex:1}header{background:var(--blue);height:100px;color:#fff;padding:10px 20px;display:flex;align-items:center;font-weight:bold;justify-content:space-between;position:relative;z-index:1}header .logo{height:60px}header .stazione{margin-left:20px;font-size:34px;font-weight:bold}header .info{text-align:right;font-size:24px;white-space:nowrap;width:30%}header .info [data-language]{right:0}header .direction{margin-bottom:10px}#orari .qr{background:#fff;padding:10px;height:200px;position:absolute;bottom:0;right:10%;z-index:999}.cartelli{list-style:none;padding:0}.cartelli li{margin:10px;border:3px solid #333;border-radius:10px;display:inline-block;text-transform:uppercase;font-weight:bold}.cartelli li a{color:inherit;text-decoration:none;padding:10px;display:block;transition:all .3s}.cartelli li a:hover{background:var(--blue);color:#fff}.orari{width:100%;border-collapse:collapse;table-layout:fixed}.orari thead{background:var(--green);font-weight:bold;font-size:clamp(14px,2.5vw,22px);text-transform:uppercase}.orari thead th{padding:15px 15px;text-align:left}.orari thead .connection{font-weight:normal;color:var(--blue);text-transform:none}.orari tbody{font-weight:bold;font-size:4vh}.orari tbody td{padding:25px 15px;line-height:1;border-left:5px solid #fff}.orari tbody tr:nth-child(odd){background:#ddd}.orari tbody tr.leaving,.orari tbody tr.leaving .connection{animation:lampeggio-partenza 3s infinite}.orari tbody tr.hidden{display:none}.orari tbody td:first-child{border-left:none}.orari tbody .ora{position:relative}.orari tbody .rit{color:var(--red);font-weight:600;white-space:nowrap;text-align:right}.orari tbody .destination{position:relative}.orari tbody .dest{text-transform:uppercase}.orari tbody .dest .destination{font-size:clamp(14px,1.7vw,40px);overflow:hidden}.orari tbody .connection{font-weight:normal;color:var(--blue);text-transform:none;font-size:clamp(14px,2vw,20px);margin-top:5px;overflow:hidden;position:relative}.orari tbody .connection p{margin:0;display:inline}.orari tbody .connection p .sep{margin:0 5px;color:#999}.orari tbody .scrolling-text{display:inline-block;position:relative;width:100%;white-space:nowrap}.orari tbody tr:nth-child(odd) .scrollable::before{background:linear-gradient(to right, #ddd 0%, #ddd 20%, rgba(221, 221, 221, 0) 100%) !important}.orari tbody tr:nth-child(odd) .connection::after,.orari tbody tr:nth-child(odd) .destination::after{background:linear-gradient(to left, #ddd 0%, #ddd 20%, rgba(221, 221, 221, 0) 100%) !important}.orari tbody .scrollable::before{content:"";position:absolute;z-index:1;top:0;left:0;width:100px;height:100%;background:linear-gradient(to right, #fff 0%, #fff 20%, rgba(255, 255, 255, 0) 100%)}.orari tbody .connection::after,.orari tbody .destination::after{content:"";position:absolute;top:0;right:0;width:100px;height:100%;background:linear-gradient(to left, #fff 0%, #fff 20%, rgba(255, 255, 255, 0) 100%)}.orari .scroll-animation{animation:scroll-left 20s linear infinite;animation-fill-mode:forwards}.orari .scrollable::before{animation:sfuma 20s linear infinite;animation-fill-mode:forwards}@keyframes lampeggio-partenza{0%,50%,100%{color:initial}25%{color:rgba(0,0,0,0)}}@keyframes in-partenza{0%{background:inherit}50%{background:var(--yellow)}60%{background:inherit}}@keyframes in-partenza-odd{0%{background-color:inherit}50%{background-color:var(--yellow)}60%{background-color:inherit}}@keyframes scroll-left{0%{transform:translateX(0)}40%{transform:translateX(0)}50%{transform:translateX(-50%)}90%{transform:translateX(-50%)}100%{transform:translateX(0)}}@keyframes sfuma{0%{opacity:0}40%{opacity:0}50%{opacity:1}90%{opacity:1}100%{opacity:0}}.orari .rows.page-scroll{animation:cycle-page 40s infinite}@keyframes cycle-page{0%{transform:translateY(0)}60%{transform:translateY(0)}70%{transform:translateY(-80vh)}90%{transform:translateY(-80vh)}100%{transform:translateY(0)}}.orari .ora{width:8%}.orari .dest{width:72%}.orari .rit{width:10%}.orari .area{width:10%}.orari td.area{font-size:.8em;white-space:nowrap;text-align:center}.orari th.area,.orari th.ora{text-align:center}.orari th.area [data-language],.orari th.ora [data-language]{left:0;right:0}.orari th.rit{text-align:right}.orari th.rit [data-language]{width:100%;display:block}footer{background-color:var(--blue);color:#fff;padding:20px 20px;font-size:24px;position:fixed;bottom:0;width:100%}footer p{line-height:1.2;margin:0;top:0;bottom:0;display:flex;align-items:center;opacity:0;transition:all .8s;height:0;interpolate-size:allow-keywords}footer p.active{opacity:1;height:auto}button.speak img{height:16px}button.speak{position:absolute;top:10px;right:10px}[data-trans]{position:relative;height:1em;line-height:1}[data-language]{position:absolute}[data-language=en]{animation:fade 10s infinite}[data-language=it]{animation:fade2 10s infinite}@keyframes fade{0%{opacity:0}10%{opacity:1}50%{opacity:1}60%{opacity:0}100%{opacity:0}}@keyframes fade2{0%{opacity:1}10%{opacity:0}50%{opacity:0}60%{opacity:1}100%{opacity:1}}#adv{background-color:#000;position:absolute;inset:0;display:none}#adv h1{color:#fff;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}#adv video,#adv audio{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}#adv img{object-fit:contain;position:absolute;top:0;left:0;width:100%;height:100%}@media screen and (max-width: 768px){header{height:auto;display:block;text-align:center}header .stazione{margin-left:0}.orari thead{display:none}.orari tbody{font-size:16px}.orari tr{display:flex;flex-wrap:wrap}.orari td{display:block;width:100% !important;border:none !important;padding:10px !important}.orari .ora{font-size:22px;width:30% !important;order:1}.orari td.area{text-align:right !important;font-size:inherit;width:40% !important;order:3}.orari .rit{width:30% !important;order:2}.orari .rit:not(:empty)::before{content:"Ritardo: "}.orari .dest{order:4}.orari tbody .scrolling-text{white-space:normal}.orari tbody .connection::after,.orari tbody .destination::after,.orari tbody .connection::before,.orari tbody .destination::before{display:none}footer{position:static}#orari .qr{display:none}}header.error{justify-content:center;background:var(--blue) url(/static/tabelloni/img/logo.svg) no-repeat 50px center/150px}main.error{background:#f8f8f8;padding:10px;text-align:center;font-size:40px;height:80vh;display:flex;align-items:center;justify-content:center}