.image-columns{
	display:flex;
	flex-wrap:wrap;
  justify-content:center;
}

.image-columns a.image-column{
  flex: 1 1 250px;
  position: relative;
  overflow: hidden;
  max-width: 430px;
  min-width: 300px;
  max-height:350px;
}

.image-columns figure{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
}

.image-columns .overlay{
	background-color:rgba(0, 0, 0, 0.5);
	position:absolute;
	z-index:2;
	top:0;
	left:0;
	width:100%;
	height:100%;

	opacity:1;
	transition-duration:0.5s;
}

.image-columns figure:hover .overlay{
	opacity:0;
}

.image-columns figure img{

  width: 100%;
  transition-duration: 8s;
  max-width: none;

}

.image-columns figure:hover img{
	transform:scale(1.3);
}

.image-columns figure figcaption{
	position:absolute;
	z-index:2;
	top:0;
	left:0;
	width:90%;
	height:90%;
	margin:5%;
	
	color:white;
}

.image-columns figure figcaption h3{
	text-transform:uppercase;
	transition:opacity 0.5s, margin-top 0.5s;
  margin-top:7px;
}
	
.image-columns figure:hover figcaption h3{
	margin-top:50px;
	opacity:0;
}

.image-columns figure figcaption p.subtitle{
	position:absolute;
	left:0;
	bottom:0;
	padding:0;
	margin:0;
	text-transform:uppercase;
	transform:rotate(-90deg);
	transform-origin:0 0;
	transition:letter-spacing 0.5s, opacity 0.5s;
}

.image-columns figure:hover figcaption p.subtitle{
	letter-spacing:2em;
	opacity:0;
}

.image-columns figure p.press{
	background-color:#ffcd00;
	color:black;
	font-size:30px;
	border-radius:50%;
	width:50px;
	height:50px;
	display:flex;
	justify-content:Center;
	align-items:center;
	
	position:absolute;

	right:0;
	
	opacity:0;
	transition-duration:0.5s;
}

.image-columns figure:hover p.press{
	opacity:1;
}


@media only screen  
and (max-width : 1024px) {
  .image-columns figure img{
    width:100%;
    height:auto;
  }
}



@media only screen  
and (max-width : 1024px) {


  .image-columns a.image-column{
    flex: 1 1 160px;

    max-width: 300px;
    min-width: 150px;

  }



  .image-columns a.image-column{
  	height:auto;
  }

  .image-columns figure:hover .overlay{
    opacity:1;
  }



  .image-columns figure:hover img{
    transform:none;
  }

  .image-columns figure figcaption h3{
    transform:none;
  }

  .image-columns figure:hover figcaption h3{
      margin-top:7px;
      opacity:1;
    }

  .image-columns figure figcaption p.subtitle{
    transform:none;
    bottom:20px;
  }

  .image-columns figure:hover figcaption p.subtitle{
    letter-spacing:normal;
    opacity:1;
  }

  .image-columns figure p.press{
    opacity:1;
  }


} /* max-width 768px */