/* Non-grid specific CSS */
body {
  margin: 10px;
  color: #000000;
  background-color: #000000;
  font-family:  Futura, 'Open Sans Condensed', sans-serif;
  font-size: 1.15em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* HEADINGS */
.headings {
  "display": table;
}

#vis-title-number {
  padding: 10px 10px 10px 50px;
  font-size: 150px;
  font-weight: normal;
  color: #ef3340;
  display: table-cell;
}
#nihe-title-number {
  padding: 10px 10px 10px 50px;
  font-size: 150px;
  font-weight: normal;
  color: #417b5a;
  display: table-cell;
}
#vis-title {
  padding: 10px 10px 10px 10px;
  font-size: 50px;
  line-height: 1.4em;
  font-weight: normal;
  color: #706f6f;
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;
}

/* GRID */
.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  grid-auto-rows: 20px;
}

/* GRID CONTENT */
.content {
  background-color: #ffffff;
}
.photothumb{
  width: 100%;
}
.title {
  padding: 15px;
}
.title h3{
  font-size: 1.2em;
  color: #ffffff;
  text-transform: uppercase;
}
.text1 .title{
  background-color: #090446;
}
.text2 .title{
  background-color: #1f2041;
}
.text3 .title{
  background-color: #417b5a;
}
.photo .title{
  background-color: #ef3340;
}
.intro {
  padding: 10px 10px 10px 10px;
}
.desc{
  padding: 10px 10px 20px 10px;
}
.credit{
  padding: 0px 10px 10px 10px;
  font-size: 11px;
}


/* LINKS */
a {
  color: #090446;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:visited {
  color: #090446;
}

/* LAPTOP */
@media screen and (max-width: 1025px) {
  #vis-title-number  {
    font-size: 140px;
  }
  #vis-title {
    font-size: 40px;
  }
}

/* TABLET */
@media screen and (max-width: 770px) {
  #vis-title-number  {
    font-size: 120px;
  }
  #vis-title {
    font-size: 30px;
  }
  .credit{
    font-size: 10px;
  }
}

/* MOBILE */
@media screen and (max-width: 430px) {
  #vis-title-number  {
    padding: 5px 5px 5px 10px;
    font-size: 100px;
  }
  #vis-title {
    padding: 5px 5px 5px 5px;
    font-size: 20px;
  }
  .title {
    padding: 8px;
  }
  .intro {
    padding: 5px 5px 5px 5px;
  }
  .desc{
    padding: 5px 5px 20px 5px;
  }
  .credit{
    padding: 0px 5px 5px 5px;
    font-size: 9px;
  }
  .credit > p {
    margin: 2px;
  }
}