@font-face
{
    font-display: swap;
    font-family: 'Audiowide';
    font-style: normal;
    font-weight: 400;
    src: url('../assets/audiowide-v20-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Big Shoulders';
    font-style: normal;
    font-weight: 700;
    src: url('../assets/big-shoulders-v2-latin-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Big Shoulders';
    font-style: normal;
    font-weight: 800;
    src: url('../assets/big-shoulders-v2-latin-800.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Big Shoulders';
    font-style: normal;
    font-weight: 900;
    src: url('../assets/big-shoulders-v2-latin-900.woff2') format('woff2');
}


:root
{
    --colBlue:#044d6e;
}

.f-audio{font-family:'Audiowide';}
.flex{display:flex;flex-wrap:wrap;}

*{margin:0;padding:0;box-sizing:border-box}

body{background:#333;margin:0;padding:0 15px;border:5px solid var(--colBlue);border-top:0;width:1920px;min-height:1080px;}

.wrapper{width:1880px;height:1040px;}

.header{width:calc(100% + 40px);margin:0 -20px 40px;background:var(--colBlue);padding:20px;}
.hLogo{border-radius:100%;margin:0 40px 0 0;}
.headerDeparture{}
.hdTop{font-size:48px;line-height:48px;color:#fff;}
.hdBot{font-size:23px;line-height:23px;color:#fff;}
.hdTime{font-size:48px;line-height:48px;color:#fff;margin:0 0 0 auto;}

.departureNavigation{margin:0 0 40px;width:100%;}
.dnItem{font-size:23px;line-height:23px;color:#fff;letter-spacing:1px;}
.dnItem span{font-size:16px;line-height:18px;}
.dnTime{margin:0 98px 0 26px;}
.dnFlight{margin:0 163px 0 0;}
.dnDestination{margin:0 20px 0 0;}
.dnCheckIn{margin:0 38px 0 740px;}
.dnGate{margin:0 26px 0 0;}
.dnRemarks{margin:0 20px 0 0;}

.departure-board{
    width:100%;
    padding: 0;
    display: inline-block;
    line-height: 32px;
    background: transparent;
    border-radius: 4px;
    color: #eee;
    font-family:'Big Shoulders';
    font-size: 29px;
    font-weight: 700;
}

.departure-board span.letter {
    display: inline-block;
    width: 22.4px;
    margin: 0 2px;
    height: 32px;
    text-align: center;
    position: relative;
}

.departure-board span.letter {
    box-shadow:
            inset 0 -1px 0 rgba(50, 50, 50, .7),
            inset 0 -2px 0 rgba(0, 0, 0, .7),
            inset 2px 0 5px rgba(0, 0, 0, .9),
            inset -2px 0 5px rgba(0, 0, 0, .9),
            0 1px 0 rgba(255, 255, 255, .2);
}

.departure-board span.letter:before {
    border-top: 1px solid rgba(0, 0, 0, .4);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    height: 0;
    position: relative;
    width: 100%;
    left: 0;
    top: 17px;
    content: " ";
    display: block;
    z-index: 2;
    transform: translate(0, -1px);
}

.departure-board span.fold {
    display: block;
    position: absolute;
    height: 0;
    top: 23px;
}

.departure-board span.flap {
    display: block;
    position: absolute;
    top: 0px;
    width: 22px;
    height: 32px;
    margin: 0;
    overflow: hidden;
}

.departure-board span.text {
    width: 100%;
}

.departure-board span.bottom {
    top: 10px;
}

.departure-board span.bottom span.text {
    position: relative;
    top: -10px;
}

.departure-board span.flap.falling {
    display: none;
    bottom: 0;
    top: auto;
}

.departure-board span.flap.falling span.text {
    backface-visibility: hidden;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    background: #333;
    display: block;
    position: relative;

    transform: scaleY(1);
    transition: transform linear;
}

.letter .falling {
    transition: transform 0.1s ease-in-out;
}

.departure-board .row{position:relative;margin:0 0 35px;}
.departure-board .row:last-of-type{margin:0;}
.departure-board .row:not(:last-of-type)::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,0.5);bottom:-17px;}
.departure-board .row:not(.noData)::before{content:'';width:8px;height:8px;position:absolute;border-radius:100%;left:9px;top:8px;background:radial-gradient(circle, rgba(226,255,0,1) 0%, rgba(46,255,0,1) 100%);transition:all .4s ease;box-shadow:0 0 10px #2eff00;}
.departure-board .row.redDot::before{background:radial-gradient(circle, rgba(255,177,0,1) 0%, rgba(255,0,0,1) 100%);top:19px;box-shadow:0 0 10px #ff0000}
.departure-board .row > span:nth-of-type(1),
.departure-board .row > span:nth-of-type(7),
.departure-board .row > span:nth-of-type(16),
.departure-board .row > span:nth-of-type(51),
.departure-board .row > span:nth-of-type(57),
.departure-board .row > span:nth-of-type(61){opacity:0;}

/*colorize some letters - example*/
.departure-board .row.dummyCode span:nth-child(n+4){color:red;}
.departure-board .row.dummyCode span:nth-child(n+10){color:#fff;}

.departure-board .row > span{transition:all 0s ease;transition-delay:2s;}

/*
.departure-board .row.ausfall > span,
.departure-board .row.delay > span:nth-last-child(-n+10),
.departure-board .row.past > span:nth-last-child(-n+10){color:red!important;}

.departure-board .row.boarding > span:nth-last-child(-n+10){color:green!important;}

.departure-board .row.lastcall > span:nth-last-child(-n+10){color:yellow!important;}
*/

.departure-board .row.ausfall span,
.departure-board .row.delay span:nth-child(n+61),
.departure-board .row.past span:nth-child(n+61){color:#ff4c30;}

.departure-board .row.lastcall span:nth-child(n+61){color:#f1c40f;}

.departure-board .row.boarding span:nth-child(n+61){color:#28b463;}