.tran3s {
    transition: all .3s ease-in-out
}

.tran5s {
    transition: all .5s ease-in-out
}

img {
    max-width: 100%;
    display: block
}

.style-none {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0
}

#isotop-gallery-wrapper {
    margin: 0 -20px
}

#isotop-gallery-wrapper .grid-sizer,#isotop-gallery-wrapper .isotop-item {
    padding: 0 20px
}

#isotop-gallery-wrapper.column-two .grid-sizer,#isotop-gallery-wrapper.column-two .isotop-item {
    width: 50%
}

.portfolio-block-one .img-holder {
    position: relative;
    overflow: hidden
}

.portfolio-block-one .img-holder.round-border {
    border-radius: 30px
}

.portfolio-block-one .img-holder .expend {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.7);
    font-size: 25px;
    opacity: 0
}

.portfolio-block-one .img-holder i {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: #fff;
    color: #000;
    text-align: center;
    border-radius: 50%;
    transition: all .3s ease-in-out 0s
}

.portfolio-block-one .img-holder i:hover {
    background: #dfff5e
}

.portfolio-block-one:hover .expend {
    opacity: 1
}

.portfolio-block-one:hover .img-meta {
    transform: scale(1.1) rotate(5deg)
}

.portfolio-block-one:hover .pj-title {
    text-decoration: underline
}

.portfolio-block-one .caption {
    margin-top: 35px
}

.portfolio-block-one .caption .tag {
    margin: 0 -3px
}

.portfolio-block-one .caption .tag li {
    margin: 0 3px;
    font-size: 14px;
    text-transform: uppercase;
    color: #b8b8b8;
    padding: 0 14px;
    line-height: 21px;
    border: 1px solid #b8b8b8;
    border-radius: 15px
}

.portfolio-block-one .caption .pj-title {
    font-size: 32px;
    color: #000;
    margin-top: 15px
}

.portfolio-block-one .caption .arrow {
    font-size: 26px;
    color: #000
}

.portfolio-block-one .caption .arrow:hover {
    color: #0c3a30
}

.portfolio-two {
    z-index: 1
}


/* 3 column layout */
#isotop-gallery-wrapper.column-three .grid-sizer,
#isotop-gallery-wrapper.column-three .isotop-item {
    width: 33.3333%;
}


@media(max-width: 992px) {
  #isotop-gallery-wrapper.column-three .grid-sizer,
  #isotop-gallery-wrapper.column-three .isotop-item {
      width: 50%; /* 2 per row on tablet */
  }
}

@media(max-width: 576px) {
  #isotop-gallery-wrapper.column-three .grid-sizer,
  #isotop-gallery-wrapper.column-three .isotop-item {
      width: 100%; /* 1 per row on mobile */
  }
}