#greeting .parabox p { text-align: justify; }
#greeting .signature { text-align: right; }

@media screen and (max-width: 767px) { #greeting { display: flex; flex-direction: column; }
  #greeting .parabox { order: 1; }
  #greeting .parabox ul { font-size: 16px; line-height: 28px; margin-top: 0.5em; margin-bottom: -0.4em; }
  #greeting .photo { order: 2; margin-top: 1.75em; padding: 0 3em; }
  #greeting .signature { margin-top: 1em; }
  #greeting .signature .name { font-size: 18px; } }
@media screen and (min-width: 768px), print { #greeting .photo { float: right; padding-left: 2em; padding-bottom: 1em; }
  #greeting .parabox ul { margin-top: 0.5em; margin-bottom: -0.6em; }
  #greeting .parabox span { display: inline-block; }
  #greeting .signature { margin-top: 1.25em; } }
@media screen and (min-width: 768px) and (max-width: 991px), print { #greeting .photo { width: 228px; }
  #greeting .parabox, #greeting .signature { font-size: 14px; line-height: 28px; }
  #greeting .parabox ul { font-size: 16px; line-height: 28px; }
  #greeting .signature .name { font-size: 20px; } }
@media screen and (min-width: 992px) { #greeting .photo { width: 286px; }
  #greeting .parabox, #greeting .signature { font-size: 16px; line-height: 32px; }
  #greeting .parabox ul { font-size: 18px; line-height: 32px; }
  #greeting .signature .name { font-size: 22px; } }
#profile > div > div { border: #ccc 1px solid; border-radius: 8px; padding: 1em 1em 1.2em; }
#profile h3 { text-align: center; border-bottom: #ccc 1px solid; font-size: 16px; line-height: 24px; padding-bottom: 4px; }
#profile dl { display: flex; flex-direction: column; margin-top: 0.7em; }
#profile dl dt { font-weight: bold; }
#profile dl dd { margin-left: 1em; }

@media screen and (max-width: 767px) { #profile dl dd + dt { margin-top: 0.4em; } }
@media screen and (min-width: 768px), print { #profile > div > div { padding: 1.375em 2em 1.625em; }
  #profile h3 { font-size: 18px; line-height: 30px; padding-bottom: 4px; }
  #profile dl { flex-direction: row; margin-top: 1.125em; }
  #profile dl dt { flex-grow: 0; padding-right: 0.5em; }
  #profile dl dd { flex-grow: 1; margin-left: 0; } }
@media screen and (min-width: 768px) and (max-width: 991px), print { #profile dl dt { font-size: 13px; }
  #profile dl dd { font-size: 13px; line-height: 16px; flex-basis: 10em; margin-top: 4px; margin-right: 1em; }
  #profile dl dd li + li { margin-top: 7px; } }
@media screen and (min-width: 992px) { #profile dl dd { flex-basis: 12em; margin-right: 1.5em; } }
#df { text-align: center; }
#df a { display: inline-block; background-color: #1e8e43; color: #fff; font-weight: bold; line-height: 2em; padding-left: 1em; padding-right: 1em; }

@media screen and (max-width: 767px) { #df a { font-size: 16px; margin-top: 0.25em; margin-bottom: 0.25em; } }
@media screen and (min-width: 768px), print { #df { font-size: 16px; line-height: 26px; }
  #df a { font-size: 18px; margin-left: 0.5em; margin-right: 0.5em; } }
@media screen and (min-width: 992px) { #df { font-size: 18px; line-height: 28px; }
  #df a { font-size: 20px; } }
#staff .parabox { margin-top: 1em; }
#staff .parabox p { text-align: center; }

@media screen and (min-width: 768px), print { #staff .photo img { max-width: 80%; } }