html,body {
    margin: 0;
}
body {
    padding: 0;
}
		.container {
		overflow-x: hidden;
	 min-width: 0;
	 flex-basis: content;
	  display: flex; 
  flex-wrap: wrap;
  align-items: stretch;
  flex-direction: row;

 align-content: stretch;
width: 100%;

height: auto;

}

  
img { 
opacity: 1;
   max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

 img:hover { 
opacity: 0.7;

}

.facebook-photo  > a.tooltip > img { 
    position:relative;
display: block;/*Setting display to block removed the gap that was under the images */

 height: 50vh;
  padding: 0 !important;

 flex-basis:25%;
 flex-grow:1;
flex-shrink: 0;
 }

.facebook-photo  { 
    
	  flex-grow: 1; /*setting flex-grow removed the extra padding that was on the right side of the container */

   margin: 0 0 0 0;
  padding: 0 !important;
  }
  
span, a {
display: block;
}
footer {
height: 20vh;
background-color: black;
color: white;
padding-top: 30px;
text-align: center;
}
footer a {
color: white;
text-decoration: none;
}
@media screen and (max-width: 600px) {

  .container {
    flex-wrap: nowrap;
 flex-direction: column;
	  width: 100%;
	    -webkit-flex-wrap: nowrap;
  }

  
.facebook-photo  > a.tooltip > img { 
width: 100%; 
  height: 100%;
  margin: 0;

 }
  }