.masonry
{
  margin: 0;
  padding: 0;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  column-gap: 20px;
}

.masonry a
{
  color: #000;
}

.masonry a:hover .title
{
  border-left-color: #b0b;
}

.masonry .block:active
{
  background: #ccc;
  color: #707;
}

.masonry .block
{
  display: inline-block;
  background: #fff;
  margin: 0 0 22px;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.masonry a .title
{
  padding: 14px 14px;
  border-left: #ccc 4px solid;
}

.masonry img, .masonry iframe
{
  /* max-width: 100%; */
  width: 100%;
  height: auto;
  display: block;
}

/*@media only screen and (min-width: 16px)
{
  .masonry
  {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}*/

@media only screen and (min-width: 512px)
{
  .masonry
  {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

@media only screen and (min-width: 640px)
{
  .masonry
  {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media only screen and (min-width: 800px)
{
  .masonry
  {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media only screen and (min-width: 840px)
{
  .masonry
  {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}
          
@media only screen and (min-width: 1024px)
{
  .masonry
  {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}
          
          @media only screen and (min-width: 1024px) {
              .wrapper {
                  width: 960px;
              }