* {
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body{
    margin: 0;
    background-color: #ccc;
}
picture{
  background-color: #e8e8e8;
}
.container{
    margin: 0 auto 0 auto;
    max-width: calc(100% - 60px);
    position: relative;
  img {
    padding: 0;
    box-shadow: 6pt 6pt 8pt #888;
  }
}
.container2{
    max-width: min(calc(100% - 60px), 1460px);
    margin: 0 auto 0 auto;
    background-color: #dddddd;
    border: #888 1px solid;
    box-shadow: 5pt 5pt 8pt #aaa;
    overflow: hidden;
    padding-top: 1em;
}
.blanche{
    background-color: rgba(255, 255, 255, .5);
    padding-right: 1em;
    box-shadow:2pt 1pt 6pt rgba(255, 255, 255, .75);
    border-radius: 1em;
}
.flex-container{
    display: flex;
    margin: 0 auto 1em auto;
    justify-content: space-between;
    max-width: 95%;

}
.two{
  picture { 
    max-width: 49%;
  }
}
.three {
  picture { 
    max-width: 32%;
  }
}
.column {
  width: 100%;
}
p{
    padding: 0 1em 1em 1em;
    margin: 0;
}
.title {
    font-size: 1.5em;
}
.big{
    font-size: 2em;
}
cite{
    margin-left: 8pt;
    font-size: .85em;
}
.densify{
    padding-bottom: 1em;
}
.densify>p{
  padding: 0 0 0 1em;
}
img {
    padding: 0;
    max-width: 100%;
}
.smallish{
    max-width: 634px;
    width: 33vw;
    margin: 1em;
}
.midish{
  width: 65vw;
  max-width: 968px;
  margin: 1em;
}
.midish-plus{
  padding-top: 3em;
  width: 65vw;
  max-width: 1218px;
}
._800{
  display: block;
  max-width: 800px;
  margin: 1em;
}
.right{
  float: right;
}
.left{
  float: left; 
}
h1{
  margin: 0 0 4pt 4pt;
}
h2{
  padding: 1em 0 4pt 6pt;
}
h3{
  padding: 6pt 0 8pt 8pt;
  margin: 0;
}
h4{
  margin: 1em 0 3pt 12pt;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.clear-both{
    clear: both;
}
.clear-left{
    clear: left;
}
.clear-right{
    clear: right;
}
.center-me{
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.bigbreak{
    margin-top: 2em;
    margin-bottom: 1em;
}
figcaption{
    text-align: left;
      p {
      margin-top: 6pt;
      font-size: smaller;
  }
}
.bigshot-caption{
  margin-top: 6pt;
}
figure{
    background-color: #edeaea;
    margin: 0;    
    figcaption{
      font-size: smaller;
  }
}
li{
  word-wrap: break-word;
}
#top{
  position: absolute;
  width: 28em;
  padding: .5em;
  top: 2pt;
  right: 2pt;
  background-color: rgba(255, 255, 255, .75);
  box-shadow:2pt 1pt 6pt rgba(255, 255, 255, .75);
  border-radius: 1em;
}  
@media (max-width: 1280px) {
  #top {
    position: relative;
    width: unset;
    background-color: unset;
    box-shadow: unset;
  }
  .smallish{
    float: unset;
    width: unset;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}
@media (max-width: 960px) {
  .flex-container{
    flex-direction: column; 
    align-items: center;
    picture{
      max-width: 634px;
    }
  }
  .column{
    width: unset;
  }
  .right{
    float: unset;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .left{
    float: unset;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  ._800{
    float: unset;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .midish {
    width: 100%;
  }
  .column{
    width: unset;
  }
}
@media (max-width: 430px) {
  .container{
    max-width: 100%;
  }
  .container2{
    max-width: calc(100% - 10px);
  }
  .midish {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .smallish {
    display: flex;
    flex-direction: column;
  }
  ._800 {
    display: flex;
    flex-direction: column;
  }
  .flex-container{
    flex-direction: column;
    align-items: center;
  }
}
