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);
}
*/
!
