.geodir-image-container{
  ul.geodir-images{
    list-style: none;
    clear: both;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    li{
      box-sizing: border-box;
      position: relative;
      width: 100%;
      display: inline-block;
      text-align: center;
      //border: 1px solid #CCCCCC;
      overflow: hidden;
      padding:0;
      border-radius: 4px;
      min-width: 110px;

      &:after{
        content: '';
        display: block;
        margin-top: 65%;
      }
      img{
        padding: 0;
        float: left;
        min-width: 92%;
        max-width: 100%;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        transition: transform .5s;
        transition-timing-function: ease-in-out;
      }

      a.geodir-lightbox-image{


        &:hover:after{
          content: "\f00e";
          display: block;
          font: normal normal normal 14px/1 FontAwesome;
          text-rendering: auto;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          position: absolute;
          color: #ffffffbd;
          background: #0000002b;
          width: 100%;
          height: 100%;
          padding-top: 25%;
          font-size: 25px;
        }
        &:hover img{
          transform: scale(1.1);
        }
      }

      img{
        border-radius: 4px;
      }
    }



    // if we want to show a background image instead of the actual image for background cover/contain, use: https://css-tricks.com/replace-the-image-in-an-img-with-css/
    &.geodir-slides{
      li{

        a.geodir-lightbox-image{
          &:hover:after{
            font-size: 25px;
            padding-top: 30%;

          }
        }

      }
    }
    &.geodir-gallery{
      li{
        box-sizing: border-box;
        position: relative;
        width: 24%;
        margin-right: 1%;
        margin-bottom: 1%;
        display: inline-block;
        text-align: center;
        border: 1px solid #CCCCCC;
        overflow: hidden;
        padding:0;

      }
    }
  }
}


// only show first image of gallery on cat list view
.geodir-category-list-view{
  .geodir-image-container {
    ul.geodir-images {
      &.geodir-gallery{
        li {
            display: none;
            width: 100%;
          &:first-child{
            display: block;
          }
        }
      }

    }
  }
}