/* Two image containers (use 25% for four, and 50% for two, etc) */
.eventcolumn {
  float: left;
  width: 50%;
  padding: 5px;
}

.eventcolumnverticalposter {
  float: left;
  width: 33%;
  padding: 5px;
}

.eventcolumnphotonexttoverticalposter {
  float: left;
  width: 65%;
  padding: 5px;
}

.eventcolumn4 {
  float: left;
  width: 25%;
  padding: 5px;
}

.virtualseminarspeakerimage {
  float: left;
  width: 125px;
  padding: 5px;
}

.virtualseminartalkinfo {
  float: left;
  padding: 5px;
}

.memberimage {
  float: left;
  width: 18%;
  padding: 5px;
}

.memberinfo {
  float: left;
  width: 80%;
  padding: 5px;
}

.publicseminarposter {
  float: left;
  width: 185px;
  padding: 5px;
}

.publicseminartalkinfo {
  float: left;
  padding: 5px;
}

.platformspeakerimage {
  float: left;
  width: 125px;
  padding: 5px;
}

.platformtalkinfo {
  float: left;
  padding: 5px;
}

/* Clear floats after image containers */
.eventrow::after {
  content: "";
  clear: both;
  display: table;
  margin-bottom: 20px;
}

/* Clear floats after image containers */
.memberrow::after {
  content: "";
  clear: both;
  display: table;
  margin-bottom: 20px;
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}