.clearfix:after {
  content: '.';
  line-height: 0;
  height: 0;
  overflow: hidden;
  display: block;
  clear: both;
  width: 100%;
  visibility: hidden;
}

.content {
  max-width: 100%;
  margin: 0 auto;
  padding: 15px;
  overflow: hidden;
  position: relative;
}

.block {
  float: left;
  width: 100%;
  min-height: 0px;
}

.gutter {
  margin: 15px;
  min-height: 200px;
}

.block:nth-child(3n+1) .gutter { background: #2c3e50; }

.block:nth-child(3n+2) .gutter { background: #3498db; }

.block:nth-child(3n+3) .gutter { background: #f1c40f; }

.full-block {
  width: 100%;
  min-height: 300px;
  background: #e74c3c;
}

.fly {
  opacity: 0;
  transition: all 600ms ease-in-out;
  transform: translateY(100px) scale(1.05) translate3d(0, 0, 0);
}

.show-block {
  opacity: 1;
  transform: translateY(0) scale(1) translate3d(0, 0, 0);
}


 @media screen and ( max-width: 640px ) {

.block {
  float: none;
  width: 100%;
}
}