.mess {
  position: fixed;
  top: 180px;
  z-index: 2;
}
.mobile .mess {
  display: none;
}
  .mess div { 
    position: absolute;
    backface-visibility:hidden;
  }

  .blueprint {
    top: 70px;
    left: 210px;
    width: 160px;
    height: 120px;
    background: url('../images/mess-blueprint.png?1');
    transform: rotateZ(6deg);
  }
  .ruler {
    top: 130px;
    left: 75px;
    width: 161px;
    height: 138px;
    background: url('../images/mess-ruler.png?1');
    transform: rotateZ(21deg);
  }
  .paper1 {
    top: 90px;
    left: 115px;
    width: 58px;
    height: 61px;
    background: url('../images/mess-paper1.png?1');
  }
  .postit {
    top: 115px;
    left: 400px;
    width: 59px;
    height: 40px;
    background: url('../images/mess-postit.png?1');
  }
  .letter2 {
    top: 120px;
    left: 500px;
    width: 155px;
    height: 90px;
    background: url('../images/mess-letter-2.png?1');
    transform: rotate(-10deg);
  }
  .letter1 {
    top: 60px;
    left: 500px;
    width: 155px;
    height: 143px;
    background: url('../images/mess-letter-1.png?1');
    transform: rotate(10deg);
  }
  .photo {
    top: 115px;
    left: 762px;
    width: 125px;
    height: 85px;
    background: url('../images/mess-photo.png?1');
    transform: rotate(18deg);
  }
  .doc1 {
    top: 190px;
    left: 320px;
    width: 120px;
    height: 160px;
    background: url('../images/mess-doc-1.png?1');
    transform: rotate(-50deg);
  }
  .doc2 {
    top: 230px;
    left: 90px;
    width: 120px;
    height: 160px;
    background: url('../images/mess-doc-2.png?1');
    transform: rotate(30deg);
  }
  .doc3 {
    top: 230px;
    left: 565px;
    width: 120px;
    height: 160px;
    background: url('../images/mess-doc-3.png?1');
    transform: rotate(-96deg);
  }
  .folder-1 {
    top: 425px;
    left: 210px;
    width: 176px;
    height: 123px;
    background: url('../images/mess-folder-1.png?1');
    transform: rotate(-2deg);
  }
  .folder-2 {
    top: 255px;
    left: 765px;
    width: 176px;
    height: 123px;
    background: url('../images/mess-folder-2.png?1');
    transform: rotate(25deg);
  }
  .coffee {
    top: 410px;
    left: 425px;
    width: 83px;
    height: 84px;
    background: url('../images/mess-coffee.png?1');
  }
  .pencil {
    top: 365px;
    left: 535px;
    width: 13px;
    height: 134px;
    background: url('../images/mess-pencil.png?1');
    transform: rotate(60deg);
  }
  .paper2 {
    top: 430px;
    left: 695px;
    width: 64px;
    height: 60px;
    background: url('../images/mess-paper2.png?1');
  }
  .arrow {
    width: 50px;
    height: 50px;
    left: 50%;
    bottom: 10px;
    margin-left: -25px;
    position: fixed !important;
    cursor: pointer;
    background: url('../images/arrow-down.png?1');
    animation: bounce 3s infinite;
    opacity: .5;
  }
  @keyframes bounce {
    0%, 5%, 15%, 25%, 100% {transform: translateY(0);}
    10% {transform: translateY(-30px);}
    20% {transform: translateY(-15px);}
  }

.browser,
.ui,
.video {
  position: absolute;
  bottom: 300px;
  left: 50%;
  z-index: 3;
  margin-left: -300px;
  width: 600px;
  height: 500px;
}
.browser {
  z-index: 1;
  background: url('../images/browser.png?1');
}
.mobile .ui .ui-element,
.mobile .video {
  opacity: 1;
  transform: none;
}
  .browser-fixed .browser,
  .browser-fixed .ui,
  .browser-fixed .video {
    position: fixed;
    top: 216px;
  }
  .mobile .video,
  .mobile .ui,
  .mobile .browser {
    position: absolute;
    top: 216px;
  }
  .mobile .video {
    top: 266px;
  }

  .ui-element {
    position: absolute;
    opacity: 0;
    transition: opacity 300ms linear, transform 300ms linear;
    transform: translateY(10px);
  }
  .ui-visible .ui-element {
    opacity: 1;
    transform: translateY(0);
  }

  .activity {
    position: absolute;
    top: 70px;
    left: 20px;
    width: 560px;
    height: 161px;
    background: url('../images/browser-activity.png?1');
    transform: translateY(-10px);
  }
  .step-1 {
    position: absolute;
    top: 240px;
    left: 20px;
    width: 275px;
    height: 241px;
    background: url('../images/browser-step1.png?1');
    transition-delay: 200ms;
  }
  .step-2 {
    position: absolute;
    top: 240px;
    left: 305px;
    width: 275px;
    height: 201px;
    background: url('../images/browser-step2.png?1');
    transition-delay: 400ms;
  }

.video {
  height: 450px;
  border-radius: 0 0 4px 4px;
  background: rgba(64,76,92,.5) url('../images/play.png?1') no-repeat center center;
  font-size: 0;
  opacity: 0;
  transition: opacity 300ms linear;
  transition-delay: 0;
}
  .browser-fixed .video {
    top: 266px;
    opacity: 1;
    transition-delay: 800ms;
  }

.break-down {
  height: 280px;
}
  .break-down .relative {
    height: 280px;
  }
  .break-down .folder {
    position: absolute;
    opacity: 0;
    transition: opacity 300ms linear, transform 300ms linear;
    transform: translateY(-50px);
  }
  .break-down-visible .break-down .folder {
    opacity: 1;
    transform: translateY(0);
  }
  .break-down .folder1 {
    top: 0;
    right: 200px;
    width: 183px;
    height: 129px;
    background: url('../images/step1.png?1');
    transition-delay: 200ms;
  }
  .break-down .folder2 {
    top: 37px;
    right: 0;
    width: 184px;
    height: 139px;
    background: url('../images/step2.png?1');
    transition-delay: 100ms;
  }
  .break-down .folder3 {
    top: 135px;
    right: 150px;
    width: 188px;
    height: 146px;
    background: url('../images/step3.png?1');
  }

.tasks {
  margin: 0 0 0 146px;
  padding: 0;
  perspective: 1000px;
  perspective-origin: center top;
}
  .tasks li {
    margin-bottom: 12px;
    color: #29333C;
    list-style-type: none;
    font-size: 28px;
    font-family: 'Allan', cursive;
    opacity: 0;
    cursor: pointer;
    transition: opacity 300ms linear, transform 300ms linear, color 300ms linear;
    transform: rotateX(-90deg);
    transform-origin: center top;
  }
    .tasks li:nth-child(2) { transition-delay: 100ms,100ms,0s; }
    .tasks li:nth-child(3) { transition-delay: 200ms,200ms,0s; }
    .tasks li:nth-child(4) { transition-delay: 300ms,300ms,0s; }
    .tasks li:nth-child(5) { transition-delay: 400ms,400ms,300ms; }
    .tasks.animation-complete li { transition-delay: 0s,0s,0s; }
  .tasks-visible .tasks li {
    opacity: 1;
    transform: rotateX(0);
  }
  .tasks li:last-child {
    margin-bottom: 0;
  }
  .tasks li:before {
    display: inline-block;
    margin-top: -2px;
    margin-right: 18px;
    width: 25px;
    height: 25px;
    border: 5px solid #0095ff;
    border-radius: 4px;
    color: white;
    content: '';
    vertical-align: middle;
    text-align: center;
    font-size: 28px;
    line-height: 25px;
    transition: border-color 300ms linear, color 300ms linear;
  }
  .tasks li:nth-child(5):before {
    transition-delay: 300ms, 300ms;
  }
    .tasks.animation-complete li:nth-child(5):before { transition-delay: 0s,0s; }
  .tasks li.completed {
    color: #C3C9CD;
    text-decoration: line-through;
  }
  .tasks li.completed:before {
    border-color: #C3C9CD;
    color: #C3C9CD;
    content: '✔';
  }

.discussions {
  height: 210px;
}
  .discussions .relative { height: 210px; }
  .person {
    position: absolute;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
  }
    .stepan {
      top: 10px;
      right: 257px;
      background-image: url('../images/face1.png?1');
    }
    .tanel {
      top: 70px;
      right: 142px;
      background-image: url('../images/face2.png?1');
    }
    .jono {
      top: 160px;
      right: 217px;
      background-image: url('../images/face3.png?1');
    }
    .person blockquote {
      position: absolute;
      padding: 0 16px;
      height: 50px;
      border-radius: 10px;
      background: #0095ff;
      background: linear-gradient(0deg, #0088e9, #0095ff);
      color: white;
      white-space: nowrap;
      font-size: 24px;
      font-family: 'Allan', cursive;
      line-height: 50px;
      opacity: 0;
      transition: opacity 300ms linear, transform 300ms linear;
      transform: translateY(20px);
    }
    .discussions-visible .person blockquote {
      opacity: 1;
      transform: translateY(0);
    }
    .person blockquote:before {
      position: absolute;
      bottom: -11px;
      left: 50%;
      margin-left: -7px;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: #0087e7 transparent transparent transparent;
      content: '';
    }
      .tanel blockquote {
        top: -90px;
        left: -90px;
      }
      .tanel blockquote:before {
        border-width: 11px 12px 0 2px;
      }
      .jono blockquote {
        top: -90px;
        left: -80px;
        transition-delay: 150ms;
      }
      .jono blockquote:before {
        border-width: 11px 2px 0 12px;
      }

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
  .mess div {
    background-size: contain;
  }
    .blueprint {
      background-image: url('../images/mess-blueprint-2x.png?1');
    }
    .ruler {
      background-image: url('../images/mess-rules-2x.png?1');
    }
    .paper1 {
      background-image: url('../images/mess-paper1-2x.png?1');
    }
    .postit {
      background-image: url('../images/mess-postit-2x.png?1');
    }
    .letter2 {
      background-image: url('../images/mess-letter-2-2x.png?1');
    }
    .letter1 {
      background-image: url('../images/mess-letter-1-2x.png?1');
    }
    .photo {
      background-image: url('../images/mess-photo-2x.png?1');
    }
    .doc1 {
      background-image: url('../images/mess-doc-1-2x.png?1');
    }
    .doc2 {
      background-image: url('../images/mess-doc-2-2x.png?1');
    }
    .doc3 {
      background-image: url('../images/mess-doc-3-2x.png?1');
    }
    .folder-1 {
      background-image: url('../images/mess-folder-1-2x.png?1');
    }
    .folder-2 {
      background-image: url('../images/mess-folder-2-2x.png?1');
    }
    .coffee {
      background-image: url('../images/mess-coffee-2x.png?1');
    }
    .pencil {
      background-image: url('../images/mess-pencil-2x.png?1');
    }
    .paper2 {
      background-image: url('../images/mess-paper2-2x.png?1');
    }
    .arrow {
      background-image: url('../images/arrow-down-2x.png?1');
    }

  .browser {
    background-image: url('../images/browser-2x.png?1');
    background-size: contain;
  }
    .ui-element {
      background-size: contain;
    }
    .activity {
      background-image: url('../images/browser-activity-2x.png?1');
    }
    .step-1 {
      background-image: url('../images/browser-step1-2x.png?1');
    }
    .step-2 {
      background-image: url('../images/browser-step2-2x.png?1');
    }
  .video {
    background-image: url('../images/play-2x.png?1');
    background-size: 85px 86px;
  }
  
  .break-down .folder {
    background-size: contain;
  }
  .break-down .folder1 {
    background-image: url('../images/step1-2x.png?1');
  }
  .break-down .folder2 {
    background-image: url('../images/step2-2x.png?1');
  }
  .break-down .folder3 {
    background-image: url('../images/step3-2x.png?1');
  }

  .person {
    background-size: contain;
  }
    .stepan {
      background-image: url('../images/face1-2x.png?1');
    }
    .tanel {
      background-image: url('../images/face2-2x.png?1');
    }
    .jono {
      background-image: url('../images/face3-2x.png?1');
    }
}