* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    font-family: Helvetica, sans-serif; 
      background-color: #ffffff;
      color: #000000;
  }
  
  .p {
    font-family: Helvetica, sans-serif;
    color: #000000;
  }
  
  .splash {
    text-align: center;
  }
  
  .nav {
    text-align: center;
    color: #000000;
  }
  
  a:link { text-decoration: underline; color: #000000; padding-right: 14px;}
  a:active { text-decoration: underline; color: #000000; padding-right: 14px;}  
  a:visited {text-decoration: underline; color: #000000; padding-right: 14px;}
  a:hover {text-decoration: underline; color: #000000; padding-right: 14px;}
  
  
  a.nav {
      font-family: Helvetica, sans-serif; 
      color: #000000;
      text-decoration: underline;
  } 
  
  .row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  .row img {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-height: 25%;
    padding: 0 4px;
    margin-top: 20px;
  }
  
  /* Create four equal columns that sits next to each other */
   .column {
    -ms-flex: 25%; 
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }
  
  /*
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  } */
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .row {
      -ms-flex: 50%;
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two rows stack next to each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .row {
      -ms-flex: 100%;
      flex: 100%;
      max-width: 100%;
    }
  }