.grid-masonry { list-style: none; margin: 20px auto; padding: 0 }
.grid-masonry li { display: block; float: left;  width: 302px; box-sizing: border-box; }
.grid-masonry li .mod-masonry-item { background: none repeat scroll 0 0 #fff; border: 1px solid #bcbcbc; border-radius: 3px; box-shadow: 0 0 10px #bcbcbc; position: relative; }
.grid-masonry li.shown, .no-js .grid-masonry li, .no-cssanimations .grid-masonry li { opacity: 1; }
.grid-masonry li img { outline: none; max-width: 100%; border-radius: 3px 3px 0 0; }
.grid-masonry li img:hover { opacity: 0.8; transition: opacity 0.4s ease-out 0s; }
.grid-masonry li .mod-masonry-item h3 { height: 40px; line-height: 40px; overflow: hidden; padding: 0 75px 0 10px; position: relative; font-weight:normal }
.grid-masonry li .mod-masonry-item h3 .unit-focus { position: absolute; right: 0; top: 0; height: 40px; display: inline-block; font-weight: normal; width: 70px; overflow: hidden; color: #999 }
.grid-masonry li p { padding: 10px 10px 5px 10px; line-height: 26px; color: #999 }
.grid-masonry li .unit-tags { padding: 10px; color: #999 }
.grid-masonry-1 li .mod-masonry-item {  border:none; overflow:hidden}
.grid-masonry-1 li img{ border-radius:3px; margin:0 auto}
.grid-masonry-1 .mod-img-meta { bottom: -90px; height: 65px; left: 0; position: absolute; transition: bottom 0.3s linear 0s; width: 100%; color:#FFF }
.grid-masonry-1 li .mod-masonry-item h3 { padding: 0 75px 0 100px; height:35px; line-height:35px;}
.grid-masonry-1 .mod-img-meta .unit-meta-bg { background: none repeat scroll 0 0 #000; height: 100%; left: 0; opacity: 0.7; position: absolute; top: 0; width: 100%; }
.grid-masonry-1 li .unit-tags { padding:0 10px 0 100px; color: #989a97;}
.grid-masonry-1 li .unit-tags a,.grid-masonry-1 li .unit-focus a{ color:#FFF}
.grid-masonry-1 li .unit-tags a:hover,.grid-masonry-1 li .unit-focus a:hover{ color:#d5010f}
.mod-meta-inner{ position:relative; z-index:99}
.grid-masonry-1 .unit-img-author{ position:absolute; left:10px; top:-25px; width:80px; z-index:100}
.grid-masonry-1 .unit-img-author img{ border-radius:30px; height:50px;}
.grid-masonry-1 .unit-img-author a{ color:#FFF}
.grid-masonry li .mod-masonry-item:hover{ border:1px solid #e94b55}
/**
 * Progress bar for imagesLoaded
 */
.progress-bar {
  background-color: #0BC20B;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 0;
  -webkit-box-shadow: 0 1px 3px rgba(11, 194, 11, 0.2);
     -moz-box-shadow: 0 1px 3px rgba(11, 194, 11, 0.2);
          box-shadow: 0 1px 3px rgba(11, 194, 11, 0.2);
  -webkit-transition: width 0.1s ease-out;
     -moz-transition: width 0.1s ease-out;
       -o-transition: width 0.1s ease-out;
          transition: width 0.1s ease-out;
}

/**
 * Placerholder css
 */
.wookmark-placeholder {
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
  background-color: #eee;
  border: 1px solid #dedede;
  z-index: -1;
}
/**
 * Grid container
 */
.tiles-wrap {
  position: relative; /** Needed to ensure items are laid out relative to this container **/
  margin: 10px 0;
  padding: 0;
  list-style-type: none;
  display: none;
}


/**
 * Grid items
 */
.tiles-wrap li {
  display: block;
  opacity: 1;
  float: left;
  cursor: pointer;
  width: 302px;
}
.tiles-wrap.animated li {
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.tiles-wrap li.wookmark-inactive {
  visibility: hidden;
  opacity: 0;
}

.tiles-wrap li:hover {
  background-color: #fafafa;
}

.tiles-wrap img {
  display: block;
}

.tiles-wrap a {
}

.tile-loading:after {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #ddd;
  content: "Loading\2026";
  padding-top: 20px;
  color: #999;
}

/**
 * Filters
 */
#filters {
  list-style-type: none;
  text-align: center;
  margin: 0 5% 0 5%;
}

#filters:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#filters li {
  font-size: 12px;
  float: left;
  padding: 6px 8px 4px;
  cursor: pointer;
  margin: 0 10px;
  -webkit-transition: all 0.15s ease-out;
     -moz-transition: all 0.15s ease-out;
       -o-transition: all 0.15s ease-out;
          transition: all 0.15s ease-out;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

#filters li:hover {
  background: #4281f5;
  color: #ffffff;
}

#filters li.active {
  background: #4281f5;
  color: #ffffff;
}