

#container {
  display: block;
  margin: 0 auto;
}
  
  #information {
    color: red;
    font-size: 34px;
  }
  
  #arrow {
    position: absolute;
    left: 50%;
    margin-left: -66px;
    bottom: 10em;
  }
  
  #dock-wrapper {
    bottom: 0;
    width: 100%;
    height: 60px;
    position: fixed;
    -webkit-perspective: 3000px;
       -moz-perspective: 3000px;
        -ms-perspective: 3000px;
         -o-perspective: 3000px;
            perspective: 3000px;
  }
  
    .dock {
      height: 70px;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
          -ms-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
          -ms-transition: -ms-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
    }
  
    .dock-show {
      -webkit-transform: translateZ(-25px) rotateX(-95deg);
         -moz-transform: translateZ(-25px) rotateX(-95deg);
          -ms-transform: translateZ(-25px) rotateX(-95deg);
           -o-transform: translateZ(-25px) rotateX(-95deg);
              transform: translateZ(-25px) rotateX(-95deg);
    }
    
    .dock-front, .dock-top {
       position: absolute;
       display: block;
       width: 100%;
       height: 40px;
       padding: 10px 0;
       box-shadow: 0px -3px 6px rgba(0,0,0,0.3);
    }
  
    .dock-front {
	    background-image: -webkit-gradient(linear, left top, left bottom, from(#434345), to(#161616));
	    background-image: -webkit-linear-gradient(top, #434345, #161616);
	    background-image:    -moz-linear-gradient(top, #434345, #161616); 
       background-image:     -ms-linear-gradient(top, #434345, #161616); 
       background-image:      -o-linear-gradient(top, #434345, #161616); 
       background-image:         linear-gradient(to bottom, #434345, #161616);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434345', endColorstr='#161616',GradientType=0 );
       -webkit-transform: translateZ(30px);
          -moz-transform: translateZ(30px);
           -ms-transform: translateZ(30px);
            -o-transform: translateZ(30px);
               transform: translateZ(30px);
    }
  
    .dock-top {
	    background-image: -webkit-gradient(linear, left top, left bottom, from(#505052), to(#161616));
	    background-image: -webkit-linear-gradient(top, #505052, #161616);
	    background-image:    -moz-linear-gradient(top, #505052, #161616); 
       background-image:     -ms-linear-gradient(top, #505052, #161616); 
       background-image:      -o-linear-gradient(top, #505052, #161616); 
       background-image:         linear-gradient(to bottom, #505052, #161616);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505052', endColorstr='#161616',GradientType=0 );
       -webkit-transform: rotateX(90deg) translateZ(29px);
         -moz-transform: rotateX(90deg) translateZ(29px);
          -ms-transform: rotateX(90deg) translateZ(29px);
           -o-transform: rotateX(90deg) translateZ(29px);
              transform: rotateX(90deg) translateZ(29px);
    }
      
      #arrow-up, #arrow-down {
        cursor: pointer;
        -webkit-transition: all .2s;
           -moz-transition: all .2s;
            -ms-transition: all .2s;
             -o-transition: all .2s;
                transition: all .2s;
      }
      
      #arrow-up:hover {
      	margin-top: -.2em;
      }
      
      #arrow-down:hover {
      	margin-top: .2em;
      }
 
    .item {
    	position: absolute;
    	width: 526px;
    	left: 50%;
    	margin-left: -263px;
    }	
     
      .item img {
        position: absolute;
        z-index: -1;
        cursor: pointer;
      }
      
      .item img:first-child {
      	left: 0;
      }
      
      .item img:nth-child(2) {
      	left: 90px;
      }
      
      .item img:nth-child(3) {
      	left: 180px;
      }
      
      .item img:nth-child(4) {
      	left: 270px;
      }
      
      .item img:nth-child(5) {
      	left: 360px;
      }
      
      .item img:nth-child(6) {
      	left: 450px;
      }