@media screen and (min-width:800px) {

  ul { 

    width: 25%; 
  }
  .orientation { 
  
    width:40%; 
    display:inline-block;
  }
  
  .paintingsbox { 
    width:25%;
    display:inline-block;
    margin-left:2em;
  }
}

@media screen and (max-width:799px) {

  .orientation {

    width: 80%;
    margin: 0 auto;
    display:block;
  }

  .paintingsbox {
    width:70%;
    display:block;
    margin:1em auto 0 auto;
  }

  .paintingsbox div {
    margin:0 auto;
    width:fit-content;
    display:block;
  }

  img {
    display:block;
    margin:0 auto;
  }

  ul.year {
    display:block;
    margin:1em auto;
  }
}

.paintingsbox {

  background-clip:padding-box;
  background-color:#f2f6f9!important;
  padding:35px;
  vertical-align: top;
}



.orientation {

  background-color:#f2f6f9!important;
  padding:35px;
  border:2px dotted blue;
}

.orientation p {
  max-width:100%;
}

.orientation p,
.orientation h1 {
  color: black !important;
}

ul {

  display:inline-block;
  margin:10px;
  vertical-align: top;
  background-color:#f2f6f9;
  padding:1em;

  background-clip: padding-box;
}

ul#main h3 {

  text-align:left;
  font-style: italic;
}

ul#main li.nopad {

  padding-top:0px;
  background-clip:border-box;
}

li {

  font-size:.9em;
  list-style-type: none;
  padding:1em 0 0 0;
  margin:0 2em 0 1em;
}

h3 {

  text-align:right;
  padding-right:20px;
}

h3:first-of-type {

  margin-top:0;
}

h2 { margin-top:1em; }
em { font-style: italic; }

/* body {} do some background image stuff here */