.filmShowcaseBody p {
  font-size: 1.2em;
}

.filmShowcaseBody {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 1%, rgba(255, 255, 255, 0.5) 99%, rgba(255, 255, 255, 0) 100%);
  display: block;
  width: 100%;
}
  
.vids {
  display: block;
  padding-top: 20px;
  margin: auto;
  width: 99%;
  max-width: 800px;
}
  
.vidstwo {
  display: block;
  position: relative; 
  width: 99%;
  margin: auto;
  padding-top: 56.25%; 
}
  
.vidstwo iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 99%; /*Keep at 99% for mobile optimization*/
  height: 99%;
  margin: auto;
  border: none; 
}
  
.vidsSD iframe {
  width: 99%; /*Keep at 99% for mobile optimization*/
  height: 99%;
  margin: auto;
  border: none; 
}
  
.designs {
  display: block;
  padding-top: 20px;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  width: 80%;
}

.designsMisc img {
  display: block;
  width: 75%;
  margin: 5px auto;
}

.designsMisc2 img {
  display: block;
  max-width: 75%;
  margin: 5px auto;
}

.inlineDesigns img {
  display: inline-block;
  width: 49%;
}

img.inlineSmall {
  width: 38%;
}
  
img.inlineBig {
  width: 60%
}

.designs img:hover { /*Change cursor when hovering over image*/
  cursor: pointer;
}

.designs img:focus { /*Enlarge image on click*/
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.5); /*Box shadow used to grey out background when image is enlarged*/
  margin-left: 0 !important; /*Keep smaller images centered when clicked*/
}
 
  @media screen and (max-width: 850px) { 
  .headerImg {
    width: 90%;
    padding-left: 0;
    margin: auto;
  }
    
  .designs {
    width: 95%;
    margin: auto;
    padding: 0;
  }
    
  .designs img {
    width: 100%;
  }
      
  .inlineDesigns img {
    display: block;
    width: 100%;
  }
}