.scroller-frame {
   position: absolute;
   top: 80%;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   width: 34px;
   height: 55px;
   display: none;
}

.mouse {
   width: 3px;
   padding: 10px 15px;
   height: 35px;
   border: 2px solid #fff;
   border-radius: 25px;
   opacity: 0.75;
   box-sizing: content-box;
   display: block;
   transition: box-shadow 1000ms, transform 150ms;
}

.mouse:hover {
   transform: scale( 1.3, 1.3 );
   -ms-transform: scale( 1.3, 1.3 );
}

.scroll-wheel {
   width: 3px;
   height: 10px;
   border-radius: 25%;
   background-color: #fff;
   animation-name: scroll;
   animation-duration: 2.2s;
   animation-timing-function: cubic-bezier(.15, .41, .69, .94);
   animation-iteration-count: infinite;
}

@keyframes scroll {
   0% {
      opacity: 0;
   }
   10% {
      transform: translateY(0);
      opacity: 1;
   }
   100% {
      transform: translateY(15px);
      opacity: 0;
   }
}

@media screen and ( max-height: 620px ) {
   .scroller-frame,
   .mouse,
   .scroll-wheel {
      display: none;
   }
}