body{
  background:#37353a;
}

.wrapper {
  width:704px;
  margin: 0 auto;
}

.icon {
  width:175px;
  height:175px;
  float:left;
  position:relative;
  border:1px solid rgba(0,0,0,.15);
  box-shadow: inset -1px -1px 0px 0px rgba(255,255,255,0.04);
  border-left:0;
  border-top:0;
}


/****************** file ****************/

.file {
  width:80px;
  height:108px;
  background:#9e99c4;
  position:absolute;
  left:50%;
  margin-left:-40px;
  top:50%;
  margin-top:-54px;
  border-radius:6px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
}

.file:before{
  content:"";
  width:25px;
  height:25px;
  background:#37353a;
  position:absolute;
  right:0;
  top:0;
}

.file .flip {
  position:absolute;
  right:0;
  width: 0;
	height: 0;
	border-bottom: 25px solid #bbb7dc;
	border-right: 25px solid transparent;
}
.file .flip:after {
  content:"";
  width:0;
  height:0;
  border-top: 25px solid rgba(0,0,0,0.3);
	border-left: 25px solid transparent;
  position:absolute;
  top:25px;
}

.file .holes {
  width:8px;
  height:8px;
  background:#37353a;
  border-radius:50%;
  box-shadow: inset 0 2px 0 0px rgba(0,0,0,0.25), 0 1px 0 0 rgba(255,255,255,0.2);
  position:absolute;
  left:10px;
  top:50%;
  margin-top:-4px;
}

.file .holes:before {
  content:"";
  width:8px;
  height:8px;
  background:#37353a;
  border-radius:50%;
  box-shadow: inset 0 2px 0 0px rgba(0,0,0,0.25), 0 1px 0 0 rgba(255,255,255,0.2);
  position:absolute;
  top:-30px;
}

.file .holes:after {
  content:"";
  width:8px;
  height:8px;
  background:#37353a;
  border-radius:50%;
  box-shadow: inset 0 2px 0 0px rgba(0,0,0,0.25), 0 1px 0 0 rgba(255,255,255,0.2);
  position:absolute;
  top:30px;
}

.file .lines {
  width:34px;
  height:9px;
  border-top: 5px solid rgba(255,255,255,0.5);
  border-bottom: 5px solid rgba(255,255,255,0.5);
  position:absolute;
  left:28px;
  top:30px;
}

.file .lines:after {
  content:"";
  width:34px;
  height:9px;
  border-top: 5px solid rgba(255,255,255,0.5);
  border-bottom: 5px solid rgba(255,255,255,0.5);
  position:absolute;
  top:23px;
}

.file .lines:before{
  content:"";
  width:7px;
  height:9px;
  background:#9e99c4;
  position:absolute;
  top:35px;
  z-index:2;
  right:0;
}

/****************** mail ****************/

.mail{
  width:108px;
  height:78px;
  background:#eeecdf;
  border-radius:6px;
  position:absolute;
  left:50%;
  margin-left:-54px;
  top:50%;
  margin-top:-39px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
  overflow:hidden;
}

.mail:before {
  content:"";
  width: 0;
	height: 0;
  position:absolute;
  top:6px;
	border-left: 54px solid transparent;
	border-right: 54px solid transparent;
	border-top: 50px solid rgba(0,0,0,0.3);
}

.mail:after {
  content:"";
  width: 0;
	height: 0;
  position:absolute;
  top:6px;
	border-left: 54px solid transparent;
	border-right: 54px solid transparent;
	border-top: 39px solid #eeecdf;
}

.mail .shadows {
  width: 0;
	height: 0;
	border-left: 42px solid transparent;
	border-right: 42px solid transparent;
	border-bottom: 30px solid rgba(0,0,0,0.12);
  position:absolute;
  bottom:0;
  left:50%;
  margin-left:-42px;
}
.mail .shadows:after {
  content:"";
  position:absolute;
  left:-54px;
  top:-41px;
  width: 0;
	height: 0;
	border-top: 41px solid transparent;
	border-left: 54px solid rgba(0,0,0,0.06);
	border-bottom: 39px solid transparent;
}
.mail .shadows:before {
  content:"";
  position:absolute;
  right:-54px;
  top:-42px;
  width: 0;
	height: 0;
	border-top: 42px solid transparent;
	border-right: 54px solid rgba(0,0,0,0.2);
	border-bottom: 39px solid transparent;
}

/****************** comments ****************/

.comments {
  width:86px;
  height:64px;
  background:#f15f4c;
  border-radius:6px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
  position:absolute;
  left:50%;
  margin-left:-54px;
  top:50px;
}

.comments:after{
  content:"";
  width:0;
  height:0;
  border-top: 22px solid #f15f4c;
	border-right: 34px solid transparent;
  position:absolute;
  bottom:-21px;
  left:22px;
  border-bottom-left-radius:3px;
}

.comments:before{
  content:"";
  width:86px;
  height:64px;
  background:#bd4232;
  border-radius:6px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
  position:absolute;
  left:22px;
  top:-11px;
  z-index:-1;
}

.comments .shadow {
  width:22px;
  height:49px;
  background:rgba(0,0,0,0.2);
  right:-22px;
  top:4px;
  border-bottom-right-radius:6px;
  position:absolute;
}

.comments .shadow:after {
  content:"";
  width:0;
  height:0;
  border-top: 22px solid #bd4232;
	border-left: 22px solid transparent;
  position:absolute;
}

/****************** clock ****************/

.clock{
  width:108px;
  height:108px;
  background:#45c1ae;
  border-radius:50%;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
  position:absolute;
  left:50%;
  margin-left:-54px;
  top:50%;
  margin-top:-54px;
  cursor:pointer;
}

.clock .circle{
  content:"";
  width:84px;
  height:84px;
  background:#cccabf;
  border-radius:50%;
  position:absolute;
  left:50%;
  margin-left:-42px;
  overflow:hidden;
  top:50%;
  margin-top:-42px;
}

.clock .circle:before{
  content:"";
  width:84px;
  height:84px;
  background:#edebde;
  border-radius:50%;
  position:absolute;
  left:50%;
  margin-left:-42px;
  overflow:hidden;
  top:50%;
  margin-top:-37px;
}

.clock .circle:after {
  content:"";
  width:14px;
  height:14px;
  background:#4b494f;
  position:absolute;
  border-radius:50%;
  left:50%;
  margin-left:-7px;
  top:50%;
  margin-top:-7px;
  z-index:5;
}

.clock .clockwise {
  width:29px;
  height:4px;
  background:#4b494f;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:6px;
  margin-top:-2px;
  transform-origin:-5px 2px;
  transition:transform 0.5s;
}

.clock .clockwise:after{
  content:"";
  width:21px;
  height:4px;
  background:#4b494f;
  position:absolute;
  left:-33px;
  transform-origin:26px center;
  transform:rotate(30deg);
}

.clock .clockwise:before{
  content:"";
  width:28px;
  height:4px;
  background:#9f9ba7;
  position:absolute;
  transform-origin:-6px center;
  transform:rotate(-90deg);
}

.clock .shadows {
  width:14px;
  height:14px;
  background:rgba(0,0,0,0.2);
  position:absolute;
  border-radius:50%;
  left:50%;
  margin-left:-7px;
  top:50%;
  margin-top:-3px;
  z-index:3;
  transition:transform 0.5s;
}

.clock .shadows:after {
  content:"";
  width:21px;
  height:4px;
  background:rgba(0,0,0,0.2);
  position:absolute;
  top:4px;
  left:-21px;
  transform-origin:26px center;
  transform:rotate(30deg);
}

.clock .shadows:before {
  content:"";
  width:29px;
  height:4px;
  left:13px;
  top:4px;
  background:rgba(0,0,0,0.2);
  position:absolute;
}

.clock:hover .clockwise, .clock:hover .shadows {
  transform:rotate(1060deg);
}

/****************** calendar ****************/

.calendar {
  width:108px;
  height:96px;
  background:#eeecdf;
  position:absolute;
  left:50%;
  margin-left:-54px;
  top:50%;
  margin-top:-48px;
  border-radius:6px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
  font-family:Arial, helvetica, 'sans';
  font-size:45px;
  line-height:112px;
  text-align:center;
}

.calendar:after {
  content:"";
  width:108px;
  height:27px;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.2);
  background:#d64646;
  position:absolute;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  top:0; left:0;
}

.calendar:before {
  content:"";
  width:0;
  height:0;
  border-bottom: 23px solid #37353a;
	border-left: 23px solid transparent;
  position:absolute;
  bottom:-2px;
  right:0;
}

.calendar .flip {
  position:absolute;
  right:0;
  bottom:0;
  width: 0;
	height: 0;
	border-top: 23px solid #fff;
	border-right: 23px solid transparent;
}
.calendar .flip:after {
  content:"";
  width:0;
  height:0;
  border-bottom: 23px solid rgba(0,0,0,0.25);
	border-left: 23px solid transparent;
  position:absolute;
  top:-23px;
  right:0;
}


.calendar .holes {
  width:8px;
  height:8px;
  position:absolute;
  border-radius:50%;
  background:#37353a;
  left:22px;
  top:10px;
  z-index:10;
  box-shadow: inset 0 2px 0 0px rgba(0,0,0,0.25), 0 1px 0 0 rgba(255,255,255,0.2);
}

.calendar .holes:after {
  content:"";
  width:8px;
  height:8px;
  position:absolute;
  border-radius:50%;
  background:#37353a;
  left:56px;
  box-shadow: inset 0 2px 0 0px rgba(0,0,0,0.25), 0 1px 0 0 rgba(255,255,255,0.2);
}


/****************** letter ****************/

.letter {
  width:96px;
  height:96px;
  background:#ffde8d;
  border-radius:6px;
  position:absolute;
  left:50%;
  margin-left:-48px;
  top:50%;
  margin-top:-48px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
}

.letter:after {
  content:"";
  width:100%;
  background:rgba(0,0,0,0.25);
  height:25px;
  position:absolute;
}

.letter:before {
  content:"";
  width:100%;
  background:rgba(0,0,0,0.25);
  height:23px;
  position:absolute;
  top:49px;
}

.letter .fold {
  width: 0;
	height: 0;
  position:absolute;
  z-index:10;
}

.letter .fold.left {
  top:10px;
  left:0;
  border-top: 15px solid transparent;
	border-left: 5px solid #37353a;
	border-bottom: 22px solid transparent;
}

.letter .fold.left:after {
  content:"";
  width: 0;
	height: 0;
  position:absolute;
  border-top: 22px solid transparent;
	border-left: 5px solid #37353a;
	border-bottom: 15px solid transparent;
  left:-5px;
  top:25px;
}

.letter .fold.right {
  top:10px;
  right:0px;
  border-top: 15px solid transparent;
	border-right: 5px solid #37353a;
	border-bottom: 22px solid transparent;
}

.letter .fold.right:after {
  content:"";
  width: 0;
	height: 0;
  position:absolute;
  border-top: 22px solid transparent;
	border-right: 5px solid #37353a;
	border-bottom: 15px solid transparent;
  left:0;
  top:25px;
}

/****************** ticket ****************/

.ticket {
  width:83px;
  height:73px;
  background:#95b849;
  border-bottom-right-radius:6px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
  position:absolute;
  transform:rotate(45deg);
  margin-left:47px;
  margin-top:54px;
}

.ticket:before {
  content:"";
  width:55px;
  height:55px;
  background:#95b849;
  top:9px;
  left:-28px;
  position:absolute;
  transform:rotate(45deg);
  border-radius:6px;
  box-shadow: -1px 2px 0 0px rgba(0,0,0,0.25);
}

.ticket:after {
  content:"";
  width:0;
  height:0;
  border-top: 25px solid #37353a;
	border-left: 25px solid transparent;
  position:absolute;
  top:-2px;
  right:-1px;
}

.ticket .flip {
  position:absolute;
  right:0;
  top:0;
  width: 0;
	height: 0;
	border-bottom: 23px solid #b5d763;
	border-right: 23px solid transparent;
}
.ticket .flip:after {
  content:"";
  width:0;
  height:0;
  border-top: 23px solid rgba(0,0,0,0.25);
	border-left: 23px solid transparent;
  position:absolute;
  top:23px;
  right:-23px;
}

.ticket .square {
  width:56px;
  height:36px;
  background:rgba(255,255,255,0.25);
  position:absolute;
  top:50%;
  margin-top:-18px;
  left:50%;
  margin-left:-29px;
}

.ticket .square:after {
  content:"";
  width:9px;
  height:9px;
  background:#37353a;
  position:absolute;
  border-radius:50%;
  left:-30px;
  top:16px;
  box-shadow: inset 0 2px 0 0px rgba(0,0,0,0.25), 0 1px 0 0 rgba(255,255,255,0.2);
}

/****************** safe ****************/

.safe {
  width:104px;
  height:82px;
  background:#dddacb;
  border-radius:6px;
  position:absolute;
  left:50%;
  margin-left:-52px;
  top:50%;
  margin-top:-47px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
  cursor:pointer;
}

.safe:after, .safe:before {
  content:"";
  width:22px;
  height:22px;
  border-radius:50%;
  position:absolute;
  background:#adaca2;
  bottom:-11px;
  z-index:-10;
}

.safe:after {  left:10px; }
.safe:before {  right:10px; }

.safe .wheel {
  width:55px;
  height:55px;
  background:#edebde;
  position:absolute;
  border-radius:50%;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
  top:13px;
  left:10px;
  transition:transform 0.5s;
}

.safe .wheel:after {
  content:"";
  width:25px;
  height:25px;
  background:#cb3131;
  position:absolute;
  border-radius:50%;
  left:50%;
  margin-left:-13px;
  top:50%;
  margin-top:-12px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25);
}

.safe .wheel:before {
  content:"";
  width:12px;
  height:3px;
  background:#cb3131;
  position:absolute;
  transform-origin:center right;
  transform:rotate(45deg);
  top:16px;
  left:7px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25);
  z-index:10;
}

.safe .wheel .line {
  width:3px;
  height:46px;
  background:#adaca2;
  position:absolute;
  left:50%;
  margin-left:-1px;
  top:50%;
  margin-top:-23px;
  transform-origin:center center;
}

.safe .wheel .line:first-child {
  transform:rotate(45deg);  
}

.safe .wheel .line:last-child {
  transform:rotate(-45deg);  
}

.safe .wheel .line:nth-child(2) {
  transform:rotate(90deg);  
}

.safe .lever {
  width:15px;
  height:15px;
  background:#cb3131;
  border-radius:50%;
  position:absolute;
  top:17px;
  right:12px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
}

.safe .lever:before {
  content:"";
  width:5px;
  height:20px;
  background:#adaca2;
  position:absolute;
  left:5px;
  top:17px;
}

.safe:hover .wheel {
  transform:rotate(30deg);
}

.safe:hover .lever {
  transform:translateY(3px);
}
.safe:hover .lever:before {
 height:16px; 
}

/****************** news ****************/

.news {
  width:108px;
  height:94px;
  background:
        linear-gradient(-135deg, #37353a 7px, transparent 0),
        linear-gradient(135deg, #37353a 7px, #cccabf 0);
    background-color: #333538;
    background-position: -9px top;
    background-repeat: repeat-x;
    background-size: 14px 94px;
    border-radius:6px;
  position:absolute;
  left:50%;
  margin-left:-54px;
  top:50%;
  margin-top:-47px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25);    
}

.news:after {
  content:"";
  width:0;
  height:0;
  border-bottom: 30px solid #37353a;
	border-left: 30px solid transparent;
  position:absolute;
  bottom:-2px;
  right:-2px;
}

.news .flip {
  position:absolute;
  right:0;
  bottom:0;
  width: 0;
	height: 0;
	border-top: 28px solid #e3e1d4;
	border-right: 28px solid transparent;
}
.news .flip:after {
  content:"";
  width:0;
  height:0;
  border-bottom: 28px solid rgba(0,0,0,0.3);
	border-left: 28px solid transparent;
  position:absolute;
  bottom:0;
  left:-28px;
}

.news .content {
  width:86px;
  height:10px;
  background:#539ebe;
  position:absolute;
  left:50%;
  margin-left:-43px;
  top:20px;
}

.news .content:before {
  content:"";
  width:40px;
  height:50px;
  position:absolute;
  background-color: transparent;
  background-image: linear-gradient(#37353a 40px, transparent 40px, transparent 45px, rgba(255,255,255,.25) 45px, rgba(255,255,255,.25) 48px);
  background-size: 40px 50px;
  top:15px;
}

.news .content:after {
  content:"";
  width:40px;
  height:50px;
  position:absolute;
  background-color: transparent;
  background-image: linear-gradient(rgba(255,255,255,.25) 0px, rgba(255,255,255,.25) 4px, transparent 4px, transparent 8px);
  background-size: 40px 9px;
  top:15px;
  right:0;
}

/****************** map ****************/

.map {
  width:108px;
  height:88px;
  position:absolute;
  left:50%;
  margin-left:-54px;
  top:50%;
  margin-top:-44px;
  cursor:pointer;
}

.map:after {
  content:"";
  width:0;
  height:0;
  border-bottom: 38px solid #37353a;
	border-left: 38px solid transparent;
  position:absolute;
  bottom:-10px;
  right:-2px;
  
}

.map .folded{
  position:absolute;
}
.map .fold {
  width:36px;
  height:88px;
  background:#eae8db;
  float:left;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
  position:relative;
}

.map .fold:first-child, .map .fold:last-child {
  transform-origin:center left;
  transform:skewY(15deg);
}

.map .fold:nth-child(2) {
  transform-origin:center right;
  transform:skewY(-15deg);
}

.map .fold:first-child{
  border-top-left-radius:6px;
}

.map .fold .content {
  width:32px;
  height:80px;
  position:absolute;
  left:4px;
  top:4px;
  overflow:hidden;
}

.map .fold:first-child .content:after {
  content:"";
  width:66px;
  height:66px;
  background:#9ebec7;
  position:absolute;
  transform:rotate(45deg);
  left:-33px;
}

.map .fold:first-child .content:before {
  content:"";
  width:21px;
  height:21px;
  background:#9ebec7;
  position:absolute;
  transform:rotate(45deg);
  left:16px;
  bottom:-10px;
}

.map .fold:first-child .content{
  border-top-left-radius:3px;
}

.map .fold:nth-child(2) .content{
  left:0;
  width:36px!important;
}

.map .fold:last-child .content{
  left:0;
  width:32px!important;
}

.map .fold:nth-child(2) .content:after {
  content:"";
  width:47px;
  height:47px;
  background:#9ebec7;
  position:absolute;
  transform:rotate(48deg);
  top:-28px;
  left:-2px;
}

.map .fold:nth-child(2) .content:before {
  content:"";
  width:47px;
  height:47px;
  background:#9ebec7;
  position:absolute;
  transform:rotate(50deg);
  left:-42px;
  top:10px;
}

.map .fold:nth-child(2) .content .other {
  width:98px;
  height:98px;
  background:#9ebec7;
  position:absolute;
  transform:rotate(50deg);
  left:25px;
  top:15px
}

.map .fold:nth-child(2) .content .other:after {
  content:"";
  width:23px;
  height:23px;
  background:#9ebec7;
  position:absolute;
  bottom:-35px;
}

.map .fold:last-child .content:after {
  content:"";
  width:98px;
  height:98px;
  background:#9ebec7;
  position:absolute;
  transform:rotate(40deg);
  left:-7px;
  top:9px
}

.map .fold:last-child .content:before {
  content:"";
  width:49px;
  height:49px;
  background:#9ebec7;
  position:absolute;
  transform:rotate(40deg);
  left:-27px;
  top:-46px
}

.map .flip {
  position:absolute;
  right:0;
  bottom:-2px;
  width: 0;
	height: 0;
	border-top: 28px solid #fff;
	border-right: 28px solid transparent;
}
.map .flip:after {
  content:"";
  width:0;
  height:0;
  border-bottom: 32px solid rgba(0,0,0,0.3);
	border-left: 28px solid transparent;
  position:absolute;
  bottom:-3px;
  left:-28px;
}

.map .shadow {
  width:36px;
  height:88px;
  background:rgba(0,0,0,0.2);
  position:relative;
  transform-origin:center right;
  transform:skewY(-15deg);
  position:absolute;
  left:36px
}

.map .pin {
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  background: #d65746;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -16px;
  transition:transform 0.5s;
  -webkit-backface-visibility: hidden;
}
.map .pin:after {
  content: "";
  width: 14px;
  height: 14px;
  margin: 9px 0 0 9px;
  background: rgba(0,0,0,0.35);
  position: absolute;
  border-radius: 50%;
}

.map:hover .pin {
  transform: rotate(-45deg) translateY(-4px) translateX(4px);
}

/****************** book ****************/

@import url(http://fonts.useso.com/css?family=Headland+One);

.book {
  width:96px;
  height:104px;
  background:#73a0bd;
  border-radius:6px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
  position:absolute;
  left:50%;
  margin-left:-48px;
  top:50%;
  margin-top:-52px;
  font-size:50px;
  color:#4b494f;
  line-height:130px;
  text-align:center;
  font-family: 'Headland One', serif;
  cursor:pointer;
}

.book .pages {
  width:91px;
  height:30px;
  position:absolute;
  top:5px;
  right:0;
  border-top-right-radius:5px;
  border-top-left-radius:2px;
  border-bottom-left-radius:2px;
  overflow:hidden;
  background:#73a0bd;
}

.book .pages .page {
  width:91px;
  height:91px;
  position:absolute;
  border-top-right-radius:6px;
}
.book .pages .page:nth-child(odd){
  background:#eeecdf;
}

.book .pages .page:nth-child(even){
  background:#d6d4c8;
}

.book .pages .page:nth-child(2){ top:2px; }
.book .pages .page:nth-child(3){ top:4px; }
.book .pages .page:nth-child(4){ top:6px; }
.book .pages .page:nth-child(5){ top:8px; }
.book .pages .page:nth-child(6){ top:10px; }
.book .pages .page:nth-child(7){ top:12px; }
.book .pages .page:nth-child(8){ top:14px; }
.book .pages .page:nth-child(9){ top:16px; }
.book .pages .page:nth-child(10){ 
  top:18px;
background-image: -webkit-linear-gradient(left, #51768f 0px, #51768f 2px, #749cb5 2px, #749cb5 4px, #95b4c9 4px);
background-image: -moz-linear-gradient(left, #51768f 0px, #51768f 2px, #749cb5 2px, #749cb5 4px, #95b4c9 4px);
background-image: -o-linear-gradient(left, #51768f 0px, #51768f 2px, #749cb5 2px, #749cb5 4px, #95b4c9 4px);
background-image: linear-gradient(left, #51768f 0px, #51768f 2px, #749cb5 2px, #749cb5 4px, #95b4c9 4px);
}

.book .pages .page:nth-child(11){ 
  top:23px;
background-image: -webkit-linear-gradient(left, #51768f 0px, #51768f 2px, #749cb5 2px, #749cb5 4px, #73a0bd 4px);
background-image: -moz-linear-gradient(left, #51768f 0px, #51768f 2px, #749cb5 2px, #749cb5 4px, #73a0bd 4px);
background-image: -o-linear-gradient(left, #51768f 0px, #51768f 2px, #749cb5 2px, #749cb5 4px, #73a0bd 4px);
background-image: linear-gradient(left, #51768f 0px, #51768f 2px, #749cb5 2px, #749cb5 4px, #73a0bd 4px);
}

.book .top {
  width:96px;
  height:28px;
  background:rgba(255,255,255,0.3);
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  border-bottom-left-radius:6px;
  position:absolute;
}

.book .top:after {
  content:"";
  width:2px;
  height:73px;
  background:#51768f;
  position:absolute;
  left:5px;
  top:31px;
}

.book .top:before {
  content:"";
  width:2px;
  height:73px;
  background:#749cb5;
  position:absolute;
  left:7px;
  top:31px;
}

.bookmark {
  width:20px;
  height:21px;
  background:#d64646;
  position:absolute;
  top:-4px;
  left:9px;
}

.bookmark:after {
  content:"";
  width:20px;
  height:30px;
  background:rgba(0,0,0,0.25);
  position:absolute;
  transform:skewX(-45deg);
  top:21px;
  left:-15px;
}

.bookmark:before{
  content:"";
  width:20px;
  height:30px;
  background:#37353a;;
  position:absolute;
  z-index:10;
  left:-29px;
  top:21px;
}

.book:hover .bookmark {
  transform:translateY(2px);
  height:19px;
}
.book:hover .bookmark:after {
  transform:translateY(-2px) skewX(-45deg);
}

/****************** media ****************/

.media {
  width:100px;
  height:100px;
  background:#e5b742;
  border-radius:6px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
  position:absolute;
  left:50%;
  margin-left:-50px;
  top:50%;
  margin-top:-50px;
}

.media:after {
  content:"";
  width:0;
  height:0;
  border-bottom: 33px solid #37353a;
	border-left: 33px solid transparent;
  position:absolute;
  bottom:-2px;
  right:-2px;
}

.media .flip {
  position:absolute;
  right:0;
  bottom:0;
  width: 0;
	height: 0;
	border-top: 30px solid #fce366;
	border-right: 30px solid transparent;
}
.media .flip:after {
  content:"";
  width:0;
  height:0;
  border-bottom: 30px solid rgba(0,0,0,0.25);
	border-left: 30px solid transparent;
  position:absolute;
  bottom:0;
  left:-30px;
}

.media .play {
  width:64px;
  height:64px;
  background:#eae8db;
  border-radius:50%;
  position:absolute;
  left:50%;
  margin-left:-32px;
  top:50%;
  margin-top:-32px;
}

.media .play:after {
  content:"";
  width:0;
  height:0;
  border-top:12px solid transparent;
  border-left:19px solid #37353a;
  border-bottom:12px solid transparent;
  position:absolute;
  left:50%;
  margin-left:-7px;
  top:50%;
  margin-top:-12px;
}



/****************** bag ****************/

.bag {
  width:96px;
  height:102px;
  background:#ebca79;
  border-radius:6px;
  position:absolute;
  left:50%;
  margin-left:-48px;
  top:50%;
  margin-top:-51px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
  cursor:pointer;
}

.bag:before {
  content:"";
  width:90px;
  height:22px;
  background:#9e8549;
  position:absolute;
  left:50%;
  margin-left:-45px;
  border-top-right-radius:3px;
  border-top-left-radius:3px;
}

.bag:after {
  content:"";
  width:96px;
  height:55px;
  background:rgba(0,0,0,0.12);
  position:absolute;
  top:22px;
  border-top:1px solid rgba(255,255,255,0.2);
}

.bag .flip.left {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 11px 0 5px 8px;
  border-color: transparent transparent transparent #ba9d58;
  position:absolute;
  left:1px;
  border-top-left-radius:5px;
}

.bag .flip.left:before {
  content:"";
  width:3px;
  height:21px;
  background:#37353a;
  position:absolute;
  left:-9px;
  top:-10px;
}

.bag .flip.left:after {
  content:"";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 0 11px 9px;
  border-color: transparent transparent #dcbb6a transparent;
  position:absolute;
  left:-9px
}

.bag .flip.right {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 11px 8px 5px 0px;
  border-color: transparent #ba9d58 transparent transparent;
  position:absolute;
  right:1px;
  border-top-left-radius:5px;
}

.bag .flip.right:before {
  content:"";
  width:3px;
  height:21px;
  background:#37353a;
  position:absolute;
  right:-9px;
  top:-10px;
}

.bag .flip.right:after {
  content:"";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 9px 11px 0;
  border-color: transparent transparent #dcbb6a transparent;
  position:absolute;
  right:-9px
}

.bag .handle {
  width:45px;
  height:40px;
  position:absolute;
  border-style:solid;
  border-width:4px;
  border-color:transparent #fff #fff #fff;
  border-radius:0 0 50% 50%;
  left:22px;
  top:39px;
  z-index:10;
  box-shadow: 0 4px 0 0px rgba(0,0,0,0.20);
  transition:transform 0.5s, height 0.5s;
}

.bag .handle:before {
  content:"";
  width:4px;
  height:5px;
  border-radius:50%;
  background:#fff;
  position:absolute;
  left:-4px;
  top:-4px;
}

.bag .handle:after {
  content:"";
  width:4px;
  height:5px;
  border-radius:50%;
  background:#fff;
  position:absolute;
  right:-4px;
  top:-4px;
}

.bag .holes {
  width:8px;
  height:8px;
  background:#37353a;
  position:absolute;
  border-radius:50%;
  left:20px;
  top:36px;
}

.bag .holes:after {
  content:"";
  width:8px;
  height:8px;
  background:#37353a;
  position:absolute;
  border-radius:50%;
  left:49px;
}

.bag:hover .handle {
  height:10px;
  transform:translateY(-1px);
}

/****************** photo ****************/

.photo {
  width:96px;
  height:84px;
  background:#edebde;
  border-radius:6px;
  position:absolute;
  left:50%;
  margin-left:-48px;
  top:50%;
  margin-top:-42px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
}

.photo:before {
  content:"";
  width:96px;
  height:84px;
  background:#b6b5aa;
  border-radius:6px;
  position:absolute;
  z-index:-1;
  transform:rotate(-10deg);
  transform-origin:bottom right;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
}

.photo .frame {
  width:77px;
  height:63px;
  background:#9ebec7;
  border-radius:3px;
  position:absolute;
  left:9px;
  top:10px;
  overflow:hidden;
}

.photo .frame .content {
  width:96px;
  height:96px;
  border-radius:50%;
  background:#708d30;
  position:absolute;
  top:42px;
  left:-30px;
  
}

.photo .frame .content:after {
  content:"";
  width:111px;
  height:111px;
  border-radius:50%;
  background:#8fb243;
  position:absolute;
  top:-10px;
  left:50px;
}

.photo .frame .content:before {
  content:"";
  width:16px;
  height:16px;
  background:#ebe9dc;
  border-radius:50%;
  left:79px;
  top:-32px;
  position:absolute;
} 

.photo .flip {
  position:absolute;
  right:0;
  bottom:0;
  width: 0;
	height: 0;
	border-top: 24px solid #ffffff;
	border-right: 24px solid transparent;
}
.photo .flip:after {
  content:"";
  width:0;
  height:0;
  border-bottom: 24px solid rgba(0,0,0,0.25);
	border-left: 24px solid transparent;
  position:absolute;
  bottom:0;
  left:-24px;
}

.photo .angle {
  width:36px;
  height:36px;
  background:#37353a;
  transform:rotate(45deg);
  position:absolute;
  right:-19px;
  bottom:-19px;
  overflow:hidden;
}

.photo .angle:after {
   content:"";
  width:41px;
  height:26px;
  background:#b6b5aa;
  border-radius:6px;
  position:absolute;
  z-index:-1;
top:-7px;
  left:-25px;
  transform:rotate(-55deg);
  transform-origin:bottom right;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
}

/****************** calculator ****************/

.calculator {
  width:90px;
  height:108px;
  background:#d7d4c5;
  border-radius:6px;
  position:absolute;
  left:50%;
  margin-left:-45px;
  top:50%;
  margin-top:-54px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
}

.calculator:after {
  content:"";
  width:90px;
  height:31px;
  background:rgba(0,0,0,0.1);
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  position:absolute;
  top:4px;
}

.calculator .display {
  width:74px;
  height:20px;
  background:#868d83;
  position:absolute;
  left:50%;
  margin-left:-37px;
  top:11px;
  border-radius:2px;
  background-image: linear-gradient(45deg, transparent 37px, rgba(0,0,0,0.1) 37px);
  box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2);
}

.calculator .controls {
  font-size:30px;
  font-weight:bold;
  color:#908e86;
  line-height:1em;
  margin-top:41px;
  margin-left:15px;
}

.calculator .controls .big {
  font-size:50px;
  line-height:0em;
}

.calculator .controls .medium {
  font-size:35px;
  line-height:0em;
  color:#8fb243;
  font-weight:bold;
}


/****************** count ****************/

.count {
  width:87px;
  height:108px;
  background:#988da7;
  border-radius:6px;
  box-shadow: 0 2px 0 0px rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.2);
  position:absolute;
  left:50%;
  margin-left:-44px;
  top:50%;
  margin-top:-54px;
  font-family:Arial,Helvetica,'sans';
  color:#fff;
  text-align:center;
  font-size:54px;
  font-weight:bold;
  line-height:108px;
  text-shadow: 0 2px rgba(0,0,0,0.25);
}

.count:before {
  content:"";
  width:100%;
  height:50%;
  background: rgba(0,0,0,0.16);
  position:absolute;
}

.count:after {
  content:"";
  width:0;
  height:0;
  border-bottom: 27px solid #37353a;
	border-left: 27px solid transparent;
  position:absolute;
  bottom:-2px;
  right:-2px;
}

.count .flip {
  position:absolute;
  right:0;
  bottom:0;
  width: 0;
	height: 0;
	border-top: 24px solid #beb4cb;
	border-right: 24px solid transparent;
}
.count .flip:after {
  content:"";
  width:0;
  height:0;
  border-bottom: 24px solid rgba(0,0,0,0.30);
	border-left: 24px solid transparent;
  position:absolute;
  bottom:0;
  left:-24px;
}

.count .flip:before {
  content:"";
  width:87px;
  height:2px;
  background:#37353a;
  position:absolute;
  top:-55px;
  left:-63px;
}

/* ANIMATIONS */
/*
.icon {
  transition:transform 0.5s;
}
.icon:hover {
  transform:translateY(-5px);
}
*/