.instagram-container {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #333;
  box-sizing: border-box; }

img {
  margin: 0; }

.instagram-container {
  position: relative;
  float: left;
  margin: 0 0 20px 100px;
  width: 640px;
  min-height: 640px; }

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97); }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97); }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

.feed-item {
  float: left;
  margin-bottom: 60px;
  width: 100%;
  overflow: hidden; }
  .feed-item > img {
    width: 100%;
    min-height: 640px;
    background-color: #e3e6e8;
    height: auto; }
  .feed-item .feed-item-footer {
    float: left;
    width: 100%;
    margin: 5px 0 10px; }
    .feed-item .feed-item-footer > div {
      height: 25px;
      line-height: 25px;
      font-size: 14px;
      font-weight: bold; }
    .feed-item .feed-item-footer .feed-item-likes,
    .feed-item .feed-item-footer .feed-item-comments {
      float: left;
      margin-right: 15px; }
      .feed-item .feed-item-footer .feed-item-likes:before,
      .feed-item .feed-item-footer .feed-item-comments:before {
        content: " ";
        float: left;
        width: 15px;
        height: 15px;
        margin: 5px 5px 0 0; }
    .feed-item .feed-item-footer .feed-item-likes:before {
      background-image: url("../img/instagram-likes-count-icon.gif");
      background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path d="M450.703,124.225C410.233,41.419,287.288,47.821,256,119.967 c-31.288-72.146-154.233-78.548-194.703,4.257C13.59,221.837,124.309,314.82,256,448.014 C387.691,314.82,498.41,221.837,450.703,124.225z"/></svg>') center, -webkit-linear-gradient(transparent, transparent) center;
      background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path d="M450.703,124.225C410.233,41.419,287.288,47.821,256,119.967 c-31.288-72.146-154.233-78.548-194.703,4.257C13.59,221.837,124.309,314.82,256,448.014 C387.691,314.82,498.41,221.837,450.703,124.225z"/></svg>') center, linear-gradient(transparent, transparent) center;
      background-size: cover; }
    .feed-item .feed-item-footer .feed-item-comments:before {
      background-image: url("../img/instagram-comments-count-icon.gif");
      background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path d="M256,73.001c-113.771,0-206,76.075-206,169.918c0,39.766,16,76.371,41.666,102.537l-29,93.543 l117.168-37.597C342.826,444.623,462,347.32,462,242.919C462,149.076,369.771,73.001,256,73.001z"/></svg>') center, -webkit-linear-gradient(transparent, transparent) center;
      background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path d="M256,73.001c-113.771,0-206,76.075-206,169.918c0,39.766,16,76.371,41.666,102.537l-29,93.543 l117.168-37.597C342.826,444.623,462,347.32,462,242.919C462,149.076,369.771,73.001,256,73.001z"/></svg>') center, linear-gradient(transparent, transparent) center;
      background-size: cover; }
    .feed-item .feed-item-footer .feed-item-source {
      float: right; }
      .feed-item .feed-item-footer .feed-item-source > * {
        float: left; }
      .feed-item .feed-item-footer .feed-item-source img {
        margin-right: 10px;
        width: 25px;
        height: 25px; }
  .feed-item .feed-item-description {
    float: left;
    width: 100%;
    font-size: 12px; }

.loading .feed-item {
  -webkit-animation: none;
          animation: none;
  opacity: .2;
  -webkit-transform: scale3d(0, 0, 0);
          transform: scale3d(0, 0, 0); }

.feed-item.animate {
  opacity: 0;
  -webkit-transform: scale3d(0, 0, 0);
          transform: scale3d(0, 0, 0);
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
  -webkit-animation-name: bounceIn;
          animation-name: bounceIn;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  opacity: 0;
  -webkit-transform: scale3d(0.3, 0.3, 0.3);
          transform: scale3d(0.3, 0.3, 0.3); }

@-webkit-keyframes instagramLoader {
  0% {
    background-size: 80px; }
  40% {
    background-size: 80px; }
  50% {
    background-size: 100px; }
  60% {
    background-size: 80px; }
  100% {
    background-size: 80px; } }

@keyframes instagramLoader {
  0% {
    background-size: 80px; }
  40% {
    background-size: 80px; }
  50% {
    background-size: 100px; }
  60% {
    background-size: 80px; }
  100% {
    background-size: 80px; } }

.instagram-loader {
  opacity: 0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: all 0.8s ease-in-out 2s;
          transition: all 0.8s ease-in-out 2s;
  width: 100%;
  height: 640px;
  position: absolute;
  z-index: 1;
  -webkit-animation: instagramLoader 0.8s linear infinite;
          animation: instagramLoader 0.8s linear infinite;
  background-color: #e3e6e8;
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-41 164.9 512 512" style="enable-background:new -41 164.9 512 512;" xml:space="preserve"><path id="instagram-icon" style="fill:#FFF;" class="st0" d="M300.2,362h119.7v183.8c0,44.8-36.3,81.1-81.1,81.1H91.1c-44.8,0-81.1-36.3-81.1-81.1V362 h119.2c-12.2,17.1-19.4,38.1-19.4,60.7c0,57.9,47,104.9,104.9,104.9c57.9,0,104.9-47,104.9-104.9C319.6,400.1,312.4,379.2,300.2,362 z M419.9,296v53.2H289.4c-19-19.3-45.5-31.3-74.7-31.3c-29.3,0-55.7,12-74.7,31.3H10.1V296c0-27.3,13.5-51.5,34.2-66.2v87.3h16.6 v-96.4c3.8-1.5,7.7-2.8,11.7-3.7v100.1h16.6V214.9c0.6,0,1.2,0,1.9,0h9.6v102.2h16.6V214.9h221.5C383.6,214.9,419.9,251.2,419.9,296 z M382.9,261.8c0-7.2-5.8-13-13-13h-43.8c-7.2,0-13,5.8-13,13v44.8c0,7.2,5.8,13,13,13h43.8c7.2,0,13-5.8,13-13L382.9,261.8 L382.9,261.8z M133.9,422.8c0-24.2,10.7-45.9,27.6-60.7c5.9-5.2,12.6-9.5,19.9-12.8c10.2-4.6,21.4-7.2,33.3-7.2 c11.9,0,23.2,2.6,33.3,7.2c7.3,3.3,14,7.6,19.9,12.8c16.9,14.8,27.6,36.5,27.6,60.7c0,44.5-36.2,80.8-80.8,80.8 C170.2,503.6,133.9,467.3,133.9,422.8z M155.3,422.8c0,33,26.7,59.7,59.7,59.7s59.7-26.7,59.7-59.7c0-33-26.7-59.7-59.7-59.7 C182,363,155.3,389.8,155.3,422.8z"/></svg>'), -webkit-linear-gradient(transparent, transparent);
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-41 164.9 512 512" style="enable-background:new -41 164.9 512 512;" xml:space="preserve"><path id="instagram-icon" style="fill:#FFF;" class="st0" d="M300.2,362h119.7v183.8c0,44.8-36.3,81.1-81.1,81.1H91.1c-44.8,0-81.1-36.3-81.1-81.1V362 h119.2c-12.2,17.1-19.4,38.1-19.4,60.7c0,57.9,47,104.9,104.9,104.9c57.9,0,104.9-47,104.9-104.9C319.6,400.1,312.4,379.2,300.2,362 z M419.9,296v53.2H289.4c-19-19.3-45.5-31.3-74.7-31.3c-29.3,0-55.7,12-74.7,31.3H10.1V296c0-27.3,13.5-51.5,34.2-66.2v87.3h16.6 v-96.4c3.8-1.5,7.7-2.8,11.7-3.7v100.1h16.6V214.9c0.6,0,1.2,0,1.9,0h9.6v102.2h16.6V214.9h221.5C383.6,214.9,419.9,251.2,419.9,296 z M382.9,261.8c0-7.2-5.8-13-13-13h-43.8c-7.2,0-13,5.8-13,13v44.8c0,7.2,5.8,13,13,13h43.8c7.2,0,13-5.8,13-13L382.9,261.8 L382.9,261.8z M133.9,422.8c0-24.2,10.7-45.9,27.6-60.7c5.9-5.2,12.6-9.5,19.9-12.8c10.2-4.6,21.4-7.2,33.3-7.2 c11.9,0,23.2,2.6,33.3,7.2c7.3,3.3,14,7.6,19.9,12.8c16.9,14.8,27.6,36.5,27.6,60.7c0,44.5-36.2,80.8-80.8,80.8 C170.2,503.6,133.9,467.3,133.9,422.8z M155.3,422.8c0,33,26.7,59.7,59.7,59.7s59.7-26.7,59.7-59.7c0-33-26.7-59.7-59.7-59.7 C182,363,155.3,389.8,155.3,422.8z"/></svg>'), linear-gradient(transparent, transparent);
  background-position: center;
  background-size: 80px;
  background-repeat: no-repeat; }

.loading .instagram-loader {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1); }

.mock-header {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 87px;
  background-color: #FFF;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0; }
  .mock-header .mock-header-inner {
    width: 960px;
    margin: 21px auto 0 auto; }
    .mock-header .mock-header-inner .mock-header-logo {
      margin-left: -40px;
      width: 184px;
      height: 29px;
      background-color: #a1abb2; }
    .mock-header .mock-header-inner .mock-header-links {
      width: 100%;
      height: 12px;
      margin-top: 13px; }
      .mock-header .mock-header-inner .mock-header-links .mock-header-link {
        float: left;
        width: 85px;
        height: 100%;
        margin-right: 15px;
        background-color: #a1abb2; }

.mock-wrapper {
  width: 940px;
  margin: 130px auto 100px auto; }
  .mock-wrapper .mock-image {
    float: left;
    width: 100%;
    height: 250px;
    background-color: #a1abb2;
    margin-bottom: 30px; }
  .mock-wrapper .mock-left {
    float: left;
    width: 740px;
    margin-right: 20px; }
    .mock-wrapper .mock-left .mock-headline {
      border-top: 1px solid #d6d6d6;
      font-size: 12px;
      margin-bottom: 30px; }
      .mock-wrapper .mock-left .mock-headline h1 {
        margin: 7px 0 3px 0;
        text-transform: uppercase;
        font-size: 18px; }
  .mock-wrapper .mock-right {
    float: right;
    width: 180px; }
    .mock-wrapper .mock-right .mock-right-item {
      width: 100%;
      height: 200px;
      margin-bottom: 30px;
      background-color: #a1abb2; }

.mock-footer-wrapper {
  position: relative;
  float: left;
  width: 100%;
  margin: 200px 0 150px;
  padding-left: 100px; }
  .mock-footer-wrapper .mock-footer-left {
    float: left;
    width: 648px; }
    .mock-footer-wrapper .mock-footer-left .mock-footer-small {
      float: left;
      width: 208px;
      height: 150px;
      margin-bottom: 40px;
      background-color: #a1abb2;
      margin-right: 8px; }
    .mock-footer-wrapper .mock-footer-left .mock-footer-big {
      float: left;
      width: 100%;
      height: 230px;
      margin-bottom: 40px;
      background-color: #a1abb2;
      margin-right: 8px; }
  .mock-footer-wrapper .mock-footer-right {
    float: right;
    width: 180px;
    height: 50px; }
    .mock-footer-wrapper .mock-footer-right div {
      float: left;
      width: 100%;
      height: 200px;
      margin-bottom: 40px;
      background-color: #a1abb2; }