.event-box {
  display: flex;
  flex-direction: row;
  border: 2px solid black; }
  .event-box #event-column-left {
    width: 33.33%;
    background-color: #dcddde;
    display: flex;
    flex-direction: column;
    align-items: center; }
  .event-box #event-column-right {
    width: 66.66%;
    border-left: 2px solid black;
    display: flex;
    flex-direction: column; }
  .event-box .event-title {
    word-break: break-word;
    background-color: #00339A;
    color: white;
    text-align: center;
    padding: 20px;
    overflow-wrap: break-word;
    font-size: 24px;
    max-width: 100%; }
    .event-box .event-title .event-type {
      text-transform: uppercase;
      margin-bottom: 15px; }
  .event-box .event-host {
    text-align: center;
    padding: 20px;
    background-color: #dcddde;
    border-bottom: 1px solid black; }
  .event-box .event-hosted-by {
    font-weight: 600;
    font-size: 1.5em; }
  .event-box .event-description {
    display: flex;
    padding: 20px;
    flex: 1;
    align-items: center; }
    .event-box .event-description .aui p {
      margin-bottom: 0px; }
  .event-box .event-time-wrapper {
    text-transform: uppercase; }
  .event-box .event-generic-field {
    padding: 5px 10px;
    width: 95%; }
  .event-box .event-generic-field + .event-generic-field::before {
    content: '';
    border-bottom: 1px solid black;
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px; }
  .event-box .event-generic-field-name {
    font-weight: 600;
    margin: 0px 10px; }
  .event-box .event-generic-field-ptag-content {
    margin: 0px 10px; }
  .event-box .time-separator {
    padding: 0px 5px; }

@media screen and (max-width: 600px) {
  .event-box {
    display: flex;
    flex-direction: column;
    background-color: #dcddde; }
    .event-box #event-column-right {
      order: -1;
      border-left-width: 0px; }
    .event-box #event-column-left {
      border-right-width: 0px;
      background-color: #dcddde; }
    .event-box .event-title {
      border-bottom-width: 0px;
      background-color: #00339A; }
    .event-box .event-description {
      border-bottom-width: 0px; } }