*{margin:0;padding:0;}

body{
  background:#EC2D2D; 
  overflow:hidden;
}

#container{
  width:800px;
  height:200px;
  margin-top:100px;
  position:relative;
  -webkit-animation:peek 1s linear 1;
  -moz-animation:peek 1s linear 1;
  animation:peek 1s linear 1;
}

#arm{
  width:400px;
  height:200px;
  background:#56C540;
  border-radius:0 30px 30px 0;
  float:left;
}
.sleeve{
  width:50px;
  height:160px;
  background:#56C540;
  float:left;
  margin:20px 0 0 390px;
  list-style:none;
  border-radius:0 10px 10px 0;
}
.sleeve li{
  width:30px;
  height:3px;
  background:#569F40;
  position:relative;
  margin-left:10px;
  margin-top:30px;
}
.sleeve li:before{
  content:"";
  position:absolute;
  width:30px;
  height:3px;
  background:#569F40;
  top:10px;
}
.sleeve li:after{
  content:"";
  position:absolute;
  width:30px;
  height:3px;
  background:#569F40;
  bottom:10px;
}

.watch{
  position:absolute;
  z-index:4;
  width:100px;
  height:100px;
  border-radius:50%;
  background:#313945;
  top:50px;
  left:450px;
  box-shadow:-5px 2px 0px rgba(0, 0, 0, .3)
}
.watch:before{
  content:"";
  position:absolute;
  z-index:1;
  width:50px;
  height:50px;
  background:#313945;
  left:25px;
  top:-40px;
  border-radius:10px 10px 0 0;
}
.watch:after{
  content:"";
  position:absolute;
  width:50px;
  height:50px;
  background:#313945;
  left:25px;
  top:90px;
  border-radius:0 0 10px 10px;
  box-shadow:-5px 2px 0px rgba(0, 0, 0, .3)
}
.inside{
  width:80px;
  height:80px;
  border-radius:50%;
  background:#242424;
  margin:10px auto;
  position:relative;
  z-index:2;
}
.inside:before{
  content:"";
  position:absolute;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:30px solid #93714B;
  left:34px;
  top:10px;
  outline:1px solid transparent;;
}
.inside:after{
  content:"";
  position:absolute;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:30px solid #93714B;
  left:34px;
  top:10px;
  -webkit-transform-origin:bottom;
  -webkit-transform:rotate(90deg);
  transform-origin:bottom;
  transform:rotate(90deg);
  -moz-transform-origin:bottom;
  -moz-transform:rotate(90deg);
}
.mid{
  width:15px;
  height:15px;
  border-radius:50%;
  position:absolute;
  margin:auto;left:0;right:0;
  top:32.5px;
  background:#93714B;
}
.mid:before{
  content:"";
  position:absolute;
  width:2px;
  height:30px;
  background:#93714B;
  top:-4px;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
  -moz-transform:rotate(45deg);
}

.hand{
  height:150px;
  width:200px;
  background:#F8CDAE;
  position:relative;
  z-index:-1;
  left:430px;
  top:25px;
}
.small-fing{
  width:100px;
  height:34.5px;
  background:#F8CDAE;
  position:relative;
  left:198px;
  margin-bottom:4px;
}
.small-fing:before{
  content:"";
  position:absolute;
  height:34.5px;
  width:34.5px;
  border-radius:50%;
  background:#F8CDAE;
  left:80px;
}
.finger{
  width:120px;
  height:34.5px;
  background:#F8CDAE;
  position:relative;
  left:198px;
  margin-top:4px;
}
.finger:before{
  content:"";
  position:absolute;
  height:34.5px;
  width:34.5px;
  border-radius:50%;
  background:#F8CDAE;
  left:100px;
}
.mid-fing{
  width:140px;
  height:34.5px;
  background:#F8CDAE;
  position:relative;
  left:198px;
  margin-top:4px;
}
.mid-fing:before{
  content:"";
  position:absolute;
  height:34.5px;
  width:34.5px;
  border-radius:50%;
  background:#F8CDAE;
  left:120px;
}
.thumb{
  width:50px;
  height:80px;
  background:#F8CDAE;
  position:relative;
  left:130px;
  top:-30px;
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
}
.thumb:before{
  content:"";
  position:absolute;
  height:50px;
  width:50px;
  border-radius:50%;
  background:#F8CDAE;
  left:0;
  top:55px;
}

@-webkit-keyframes peek{
  from{left:-800px;}
  to{left:0px;}
}
@keyframes peek{
  from{left:-800px;}
  to{left:0px;}
}
@-moz-keyframes peek{
  from{left:-800px;}
  to{left:0px;}
}