{
   margin: 0;
   box-sizing: border-box;
}
body {
   background: #39383F;
   font-family: 'Montserrat Alternates', sans-serif;
}
.post-wrap {
   max-width: 1120px;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}
.post-item {
   padding: 15px;
   cursor: pointer;
}
.post-item * {
   transition: .3s linear;
}
.item-content {
   background: #413D4C;
   padding: 40px;
}
.item-icon {
   margin-bottom: 20px;
}
.item-icon:before {
   content: "";
   font-family: FontAwesome;
   color: #F09EA3;
   font-size: 50px;
   line-height: 1;
}
.item-icon.photo:before {
   content: "\f030";
}
.item-icon.video:before {
   content: "\f03d";
}
.item-icon.gift:before {
   content: "\f06b";
}
.item-icon.group:before {
   content: "\f0c0";
}
.item-icon.tree:before {
   content: "\f1bb";
}
.item-icon.anchor:before {
   content: "\f13d";
}
.post-item:hover .item-icon, .post-item:hover .item-body h3, .post-item:hover .item-body p {
   transform: translateY(-8px);
}
.item-body {
   color: #F5E2CD;
   font-size: 14px;
}
.item-body h3 {
   font-weight: 500;
   margin-bottom: 15px;
   transition-delay: .05s;
}
.item-body p {
   transition-delay: .1s;
}
.item-footer {
   padding-top: 15px;
}
.link {
   text-decoration: none;
   display: inline-block;
   overflow: hidden;
   position: relative;
   padding-right: 30px;
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 600;
   color: #F5E2CD;
}
.link:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   bottom: 0;
   height: .125rem;
   margin: auto;
   background: #F09EA3;
   transform: scaleX(.2);
   transform-origin: left center;
   z-index: 0;
   transition: .6s cubic-bezier(.6, .01, 0, 1);
}
.link span {
   display: inline-block;
   position: relative;
   transform: translateX(-200%);
   transition: .6s cubic-bezier(.6, .01, 0, 1);
}
.post-item:hover .link span {
   transform: translateX(0%);
}
.post-item:hover .link:before {
   transform-origin: right center;
}
@media (min-width: 768px) {
   .post-item {
      flex-basis: 50%;
      flex-shrink: 0;
   }
}
@media (min-width: 960px) {
   .post-item {
      flex-basis: 33.333333333%;
   }
}

body {margin:0;}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px; /* Used in this example to enable scrolling */
}