#gallery{
  position:relative;
  width:100vw;
  height:100%;
  min-height:100%;
  display:table;
  transition: all ease 1s;
  background-color:#000;
}
#gallery .item{
  width: 20%;
  display:block;
  float: left;
  transition: all ease 400ms;
  background-color:#000;
  position: relative;
}
#gallery .item figure{
  transition: all ease 1s;
  overflow:hidden;
  height:300px;
  width: 450px;;
  padding:0;
  margin:0;
  position: relative;
}
#gallery .item figure img{
  transform:rotate(-30deg) scale(1.4);
  transition: all ease 1s;
}
#gallery .item:hover figure{
  transition: all ease 400ms;
}
#gallery .item:hover figure img{
  transform:rotate(-20deg) scale(1.4);
  transition: all ease 1s;
}
#gallery.hover{
  transition: all ease 1s;
/*   opacity:.7; */
}
#gallery.hover .item{
  opacity:.7;
  filter: blur(1px);
}
#gallery.hover .item:hover{
  opacity:1;
  filter: blur(0);
}
#gallery .item figcaption{
  position:absolute;
  font-size:18px;
  color:#fff;
  width:100%;
  height:100%;
  padding:10%;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  top:0;
  left:0;
  transform:scale(1.3);
  filter: blur(4px);
  opacity:0;
  transition:500ms;
  background-color: rgba(0,154,178,.6);
  text-transform:uppercase;
  font-weight:bold;
}
#gallery .item:hover figcaption{
  transform:scale(1);
  filter: blur(0);
  opacity:1;
  transition:300ms;}
@media (max-width:1368px){
  #gallery .item{width:25%;}
}
@media (max-width:1080px){
  #gallery .item{width:33.3%;}
}
@media (max-width:800px){
  #gallery .item{width:50%;}
  #gallery .item figure{
    height:250px;
  }
  #gallery .item figure img{
    transform:rotate(0) scale(1);
    transition: all ease 1s;
    width:auto;
    min-width:100%;
    height:100%;
    min-height:250px;
  }
  #gallery .item:hover figure img{
    transform:rotate(0) scale(1);
    
  }
}
@media (max-width:500px){
  #gallery .item{width:100%;}
  #gallery .item figure{
    height:250px;
  }
}