#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;
    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;
    }
  }