.bioparagraph {
  display: flex;
  max-width: 100%;
  margin: 1em;
}

.bioparagraph>div.left,
.bioparagraph>div.right {
  display: none;
}

.bioparagraph>div.left#chrisbutlerinitials {
  display: block;
}

.bioparagraph>div {
  margin: 0.5em;
}

.bioparagraph img {
  max-width: 100%;
}

.bioparagraph figcaption {
  text-align: center;
}

.bioparagraph .right {
  width: 220px;
  max-width: 30%;
}

.bioparagraph .left {
  width: 180px;
  max-width: 20%;
}

.blue {
  border-top: 10px solid blue;
}

.red {
  border-top: 10px solid red;
}

.yellow {
  border-top: 10px solid yellow;
}

.bioparagraph .main {
  flex-grow: 1;
  padding: 0 1em;
  width: 500px;
}

q {
  font-size: 1.2em;
}

q:before {
  content: "\201C";
  font-size: 1.2em;
  color: blue;
}

q:after {
  content: "\201D";
  font-size: 1.2em;
  color: blue;
}

.bioparagraph.header {
  height: 220px;
}

.bioparagraph.header .main {
  display: flex;
  justify-content: flex-end;
  align-items: self-end;
  padding-right: 0.5em;
}

@media (min-width: 500px) {
  .bioparagraph>div.right {
    display: unset;
  }
}


@media (min-width: 768px) {

  .bioparagraph {
    max-width: 750px;
  }

  .bioparagraph .main {
    width: 700px;
  }

  .bioparagraph>div.left {
    display: unset;
  }
}