header.landing { display: block; margin: 0; margin-top: 3em; padding: 3vh 15vw; width: 70vw; background-color: #002244; color: #fff; } header.landing .logo { display: block; width: 24vh; height: 24vh; margin: auto; } main { margin-top: 0; } .info { text-align: center; width: 100%; padding: 0; margin: 0; overflow-y: hidden; } .essentials { width: 100%; margin: 1em 0; padding: 0; list-style: none; display: flex; align-items: center; justify-content: center; } .essentials li { display: inline-block; } .essentials a { margin: 0 2em; height: 100%; } .essentials .focus { padding: 0.8em; font-size: 1.2em; } img.float-right { float: right; max-width: 12em; max-height: 12em; vertical-align: baseline; } .calendar-events { padding: 0; margin-bottom: 1.5em; list-style: none; } .calendar-events ul li :not(.date):not(.time) { display: inline-block; width: calc(100% - 7em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calendar-events ul .date { color: rgba(0, 0, 0, 0.5); font-size: 0.8em; margin-top: 0.2em; } .calendar-events > li > p { border-bottom: 0.1em dotted rgba(0, 0, 0, 0.2); } .calendar-events ul { list-style: none; padding: 0; } .calendar-events a, .calendar-events ul .time { color: rgba(0, 0, 0, 0.5); float: right; } .calendar-events ul .icon, .calendar-events ul .date { float: right; margin-right: 0.5em; } main.contentsplit { padding-top: 1em; } .contentsplit { display: grid; grid-template-columns: 2.5fr 2fr; } .gridr { border-left: 0; } @media screen and (max-width: 50rem) { .essentials { flex-direction: column; } .essentials a { margin: 0.2em 0; } } @media screen and (max-width: 65rem) { .contentsplit { display: block; } .gridr { height: auto; padding: 0; margin-left: 0; margin-bottom: 3em; } .gridr br { margin: 0; height: 0px; } .gridl { margin-top: 0; padding: 0; } }