* {
  box-sizing: border-box;
  border: 0;
  padding: 0;
  }

.whatsThis {
  margin-top: 16px;
  color: white;
}

.picture {
  background-repeat: no-repeat;
  background-size: cover;
  width: 25%;
  height: 240px;
  float: left;
  margin-bottom: 16px;
  text-align: center;
  }

#id0 {
  background-image: url("img/Guanaco.jpg");
  background-position: 60% 0%;
  padding-left: 1%;
  padding-top: 6%;
}

#id1 {
  background-image: url("img/Armadillo.jpg");
  padding-left: 1%;
  padding-top: 6%;
}

#id2 {
  background-image: url("img/Mother_In_Law_Pillow.jpg");
  padding-left: 1%;
  padding-top: 6%;
}

#id3 {
  background-image: url("img/Granary.jpg");
  padding-left: 1%;
  padding-top: 6%;
}

#id4 {
  background-image: url("img/Seal_Surfacing.jpg");
  background-position: 50% 50%;
  padding-left: 1%;
  padding-top: 6%;
}

#id5 {
  background-image: url("img/Victoria.jpg");
  padding-left: 1%;
  padding-top: 6%;
}

#id6 {
  background-image: url("img/Gourd.jpg");
  background-position: 40% 0%;
  padding-left: 1%;
  padding-top: 6%;
}

#id7 {
  background-image: url("img/Masons_Mark.jpg");
  padding-left: 1%;
  padding-top: 6%;
}

.question {
  background-color: rgba(96,126,139,0.6);
  width: 24.5%;
  height: 240px;
  float: left;
  padding-left: 6%;
  padding-top: 3%;
  margin-right: 0.5%;
  margin-bottom: 16px;
  }

.question:hover, .question:focus {
background-color: olive;
/*
-webkit-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
*/
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 5%;
border-top-right-radius: 50%;
}

@media all and (min-width: 1920px) {
  .question {padding-top: 2%; padding-left: 8%;}
  #id0, #id1, #id2, #id3, #id4, #id5, #id6, #id7 {padding-top: 4%;}
}

@media all and (max-width: 980px) {
  .picture, .question {width: 49.5%;}
  .question {padding-top: 4%; padding-left: 16%;}
}

@media all and (max-width: 800px) {
  .picture, .question {width: 49.5%;}
  .question {padding-top: 5%; padding-left: 15%;}
  #id0, #id1, #id2, #id3, #id4, #id5, #id6, #id7 {padding-top: 10%;}
}

@media all and (max-width: 414px) {
  .picture, .question {width: 100%;}
  .question {padding-top: 10%; padding-left: 30%;}
  #id0, #id1, #id2, #id3, #id4, #id5, #id6, #id7 {padding-top: 20%;}
}