body {
  padding: 20px;
  max-width: 1024px;
  margin: auto;
  background-color: #efefef;
  font-family: "Barlow";
  font-size: 22px;
}
.portrait {
  width: 444px;
  float: right;
  margin: 16px 0 16px 16px;
  padding 0px;
  background-color: white;
  border: #ccc 1px solid;
}
.portrait .inner {
  margin: 20px 20px 0 20px;
  width: 400px;
}
.portrait img {
  width: 400px;
  border: #aaa 1px solid;
}
.portrait .caption {
  text-align: center;
  padding: 4px;
}

/* Barlow family */
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow/woff2/BarlowSemiCondensed-Light.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow/woff2/BarlowSemiCondensed-Light.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow/woff2/BarlowSemiCondensed-Light.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow/woff2/BarlowSemiCondensed-LightItalic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow/woff2/BarlowSemiCondensed-SemiBold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow/woff2/BarlowSemiCondensed-SemiBoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
}