.program-date ul { padding: 0; } .timeslot { display: block; border-bottom: 1px solid rgba(0,0,0,.05); } .timeslot h3 { margin: 0; font-size: 1.3em; font-weight: 400; } .timeslot h3 .icon { vertical-align: -0.125em; margin-right: 2px; } .timeslot-container { position: relative; padding-top: 40px; } .timeslot-time { position: absolute; top: 0; height: 40px; } .timeslot-time :is(.start, .end) { display: none; } .timeslot-time .full { font-size: 26px; } .timeslot .icon, p .icon { height: 1.1em; vertical-align: text-bottom; fill: currentColor; } .annotation { background-color: rgba(255, 139, 0, 0.06); border: 1px solid #ff8b00; border-radius: 3px; width: fit-content; padding: .5em 1em; font-weight: 500; } .annotation .icon { color: #ff8b00; margin-right: .5em; } .location .icon { margin-right: .2em; } @media (width < 640px) { .timeslot { margin-bottom: 2.5rem; } } @media (width >= 640px) { .timeslot:last-child { border-bottom: none; } .timeslot-container { padding: 2rem 3rem; margin-left: 14rem; } .timeslot-time { height: auto; width: 14rem; left: -14rem; text-align: right; padding: 2rem 3rem; } .timeslot-time .start { display: block; font-size: 38px; } .timeslot-time .end { display: block; font-size: 21px; } .timeslot-time .full { display: none; } }