/* Gallery CSS Document */

* {
   box-sizing: border-box;
}

.ImgThumbnail {
   border-radius: 10px;
   cursor: pointer;
   transition: 0.3s;
   height: auto;
   width: 350px;
	
	
}
.ImgThumbnail:nth-of-type(1) {
   margin-left: 0px;
}
.modal {
   display: none;
   position: fixed;
   z-index: 1;
   padding-top: 100px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgb(0, 0, 0);
   background-color: rgba(0, 0, 0, 0.9);
}
.modalImage {
	border-radius: 10px;
	margin: auto;
	display: block;
	width: 100%;
	max-width: 800px;
	animation:fadein .75s;
}
#caption {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 700px;
   text-align: center;
   color: #ccc;
   padding: 10px 0;
   height: 150px;
}
.close {
   position: absolute;
   top: 60px;
   right: 45px;
   color: #f1f1f1;
   font-size: 45px;
   font-weight: normal;
   transition: 0.3s;
}
.close:hover,
.close:focus {
   color: rgb(78, 255, 210);
   cursor: pointer;
}
@media only screen and (max-width: 700px) {
   .modalImage {
      width: 100%;
   }
}

/* Arrangement CSS */
.grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  grid-gap: 25px;
  align-items: start;
  }
.grid img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  max-width: 100%;
}

@keyframes fadein {
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}