body {
  font-family: "Helvetica Neue";
  font-size: 13px; }

.refreshed {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  border: 1px solid #ccc;
  -webkit-transition: 1s;
          transition: 1s;
  display: block;
  padding: 3px 5px;
  border-bottom-right-radius: 3px; }

.wrap {
  margin: 50px; }

.loaded .refreshed {
  opacity: 0; }

.media {
  width: 150px;
  height: 150px;
  margin: 0 50px 50px 0;
  cursor: pointer;
  -webkit-transition: .5s;
          transition: .5s;
  float: left;
  border: 0px solid transparent;
  overflow: hidden; }

.media-inner,
.media .image {
  position: relative;
  -webkit-transition: .5s;
          transition: .5s;
  width: 100%;
  height: 100%;
  border: 0px solid transparent;
  z-index: -1;
  overflow: hidden; }

.media .image {
  background-size: cover;
  background-position: center center; }

.media {
  -webkit-transform: rotateZ(-22.5deg);
          transform: rotateZ(-22.5deg); }

.media .media-inner {
  -webkit-transform: rotateZ(-45deg);
          transform: rotateZ(-45deg); }

.media .image {
  -webkit-transform: rotateZ(67.5deg) scale(1.4);
          transform: rotateZ(67.5deg) scale(1.4); }

.media:hover,
.media:hover .media-inner,
.media:hover .image {
  -webkit-transform: rotateZ(0deg) scale(1);
          transform: rotateZ(0deg) scale(1); }

body {
  font-size: 14px; }

h1, h2, h3, h4, h5, h6, p {
  line-height: 1; }

h1 {
  margin: 0 0 30px 0;
  font-size: 3.5em;
  line-height: 1;
  text-align: center; }

.content {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2; }

p {
  margin: 0 0 30px 0;
  line-height: 1.3; }