cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="wrapper">
  
  <div class="icon">
    <div class="file">
      <div class="flip"></div>
      <div class="holes"></div>
      <div class="lines"></div>
    </div>
  </div>
  
  <div class="icon">
    <div class="mail">
      <div class="shadows"></div>
    </div>
  </div>
  
  <div class="icon">
    <div class="comments">
      <div class="shadow"></div>
    </div>
  </div>
  
  <div class="icon">
    <div class="clock">
      <div class="circle"></div>
      <div class="clockwise"></div>
      <div class="shadows"></div>
    </div>
  </div>
  
  <div class="icon">
    <div class="calendar">
      25
      <div class="holes"></div>
      <div class="flip"></div>
    </div>
  </div>
  
  <div class="icon">
    <div class="letter">
      <div class="fold left"></div>
      <div class="fold right"></div>
    </div>
  </div>
  
  <div class="icon">
    <div class="ticket">
      <div class="square"></div>
      <div class="flip"></div>
    </div>
  </div>
  
  <div class="icon">
    <div class="safe">
      <div class="wheel">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
      <div class="lever"></div>
    </div>
  </div>
  
  <div class="icon">
    <div class="news">
      <div class="content"></div>
      <div class="flip"></div>
    </div>
  </div>
  
  <div class="icon">
    <div class="map">
      <div class="folded">
        <div class="fold">
          <div class="content"></div>
        </div>
        <div class="fold">
          <div class="content">
            <div class="other"></div>
          </div>
        </div>
        <div class="fold">
          <div class="content"></div>
        </div>
      </div>
      <div class="shadow"></div>
      <div class="flip"></div>
      <div class="pin"></div>
    </div>
  </div>
  
  <div class="icon">
    <div class="book">
      <div class="top"></div>
      <div class="pages">
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
      </div>
      A
      <div class="bookmark"></div>
    </div>
  </div>
  
  <div class="icon">
    <div class="media">
      <div class="play"></div>
      <div class="flip"></div>
    </div>
  </div>
  
  <div class="icon">
    <div class="bag">
      <div class="flip left"></div>
      <div class="flip right"></div>
      <div class="holes"></div>
      <div class="handle"></div>
    </div>
  </div>
  
  <div class="icon">
    <div class="photo">
      <div class="frame">
        <div class="content"></div>
      </div>
      <div class="flip"></div>
      <div class="angle"></div>
    </div>
  </div>
  
  <div class="icon">
    <div class="calculator">
      <div class="display"></div>
      <div class="controls">&#10010;&nbsp; <span class="big">-</span> <br> &#10006;&nbsp; <span class="medium">=</span></div>
    </div>
  </div>
    
    <div class="icon">
      <div class="count">
        16
        <div class="flip"></div>
      </div>
    </div>
  
</div><!-- /wrapper -->
            
          
!
            
              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(https://fonts.googleapis.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);
}
*/

            
          
!
            
              // Based on this resourse from Pixeden: 
// http://www.pixeden.com/media-icons/flat-design-icons-set-vol1
            
          
!
999px
Loading ..................

Console