@font-face {
    font-family: 'SF';
    font-weight: 400;
    font-style: normal;
    src: url('../font/sf/SF-Pro-Rounded-Regular.woff') format('woff'),
    url('../font/sf/SF-Pro-Rounded-Regular.otf') format("opentype");
    /*src: url('../font/sf/SF-Pro-Rounded-Light.woff') format('woff'),*/
    /*url('../font/sf/SF-Pro-Rounded-Light.otf') format("opentype");*/
}


body {
    font-family: SF, Arial, sans-serif;
    font-size: 2vw;
}

html, body {
    /*height: 100%;*/
    overflow: hidden;
}

.h-100 {
    /*height: 100%;*/
}

hr {
    color: #eee;
}

.col-date, .col-events {
    height: 100vh;
    overflow: hidden;
}

.col-events {
    overflow-y: scroll;
}

.date {
    text-align: center;
    margin: 0 4vw;
}

.events {
    padding: 2vw 0;
}

h1 {
    font-size: 20vw;
}

.date h3 {
    font-size: 4vw;
}

.date h1 {
    line-height: 1;
}

.events h3 {
    font-size: 4vw;
}

.events h5 {
    font-size: 2vw;
    margin-bottom: 0;
}

.event {
    margin: 3vw 0;
}

.today .event-date {
    display: none;
}

.not-today {
    color: #888;
}

.events hr {
    margin: 2vw 0;
}

.events hr.today-changed {
    margin: 6vw 0;
    opacity: 0;
}

.events hr:first-of-type {
    display: none;
}