@charset "UTF-8";
/* CSS Document */


	/*-----All thumbnail images for the gallery sections.  Hover shows title and slightly fades image behind----*/
	
	.thumb-grid{
		display:grid;
        grid-gap:1rem;
        grid-template-columns: 1fr 1fr 1fr;
		justify-content: center;
		align-items: center;
        width:70%;
        margin:30px auto;
		
         }
	
	.thumbs{
		display:inline-block;
		position: relative;
	}
	
	.image-title{
	display: flex;
    align-items: center;
    justify-content: center;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	text-align: center;
	background: rgba(238, 226, 236, 0);
    color: #fff;
    visibility: hidden;
    opacity: 0;
  /* transition effect. not necessary */
  transition: opacity 2s, visibility 2s;
	}
	
	.thumbs:hover .image-title {
  visibility: visible;
  opacity: 1;
		cursor: pointer;
		background: rgba(75, 75, 75, 0.5);
}

.img__wrap:hover .img__description {
  transform: translateY(0);
}
	
	
	.responsive{
		width:100%;
	max-width:500px;
	}
	
	
	
	
	
	@media(max-width:750px){
		.thumb-grid{
        grid-gap:1rem;
        grid-template-columns: 1fr 1fr; 
		justify-content: center;
		align-items: center;
        width:100%;
        margin:30px auto;
		
         }
	}