纯CSS3实现iOS7扁平化图标

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是纯CSS3实现iOS7扁平化图标的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
    <title>iOS 7 icons</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
    <div class="wrapper">

        <div class="icon phone">
            <span class="receiver">
                <span class="inner-part part-1"></span>
                <span class="inner-part part-2"></span>
            </span>
        </div>

        <div class="icon reminders">
            <span class="list-item i1"></span>
            <span class="list-item i2"></span>
            <span class="list-item i3"></span>
            <span class="list-item i4"></span>
        </div>

        <div class="icon passbook">
            <span class="plane">
                <span class="picto"></span>
                <span class="knob"></span>
            </span>
            <span class="movie">
                <span class="picto"></span>
            </span>
            <span class="coffee">
                <span class="picto"></span>
            </span>
        </div>

        <div class="icon mail">
            <span class="picto">
                <span class="inner i1"></span>
                <span class="inner i2"></span>
            </span>
        </div>

        <div class="icon photos">
            <span class="fan f1"></span>
            <span class="fan f2"></span>
            <span class="fan f3"></span>
            <span class="fan f4"></span>
            <span class="fan f5"></span>
            <span class="fan f6"></span>
            <span class="fan f7"></span>
            <span class="fan f8"></span>
        </div>

        <div class="icon facetime">
            <span class="picto"></span>
            <span class="lens"></span>
        </div>

        <div class="icon safari">
            <span class="compass">
                <span class="scale">
                    <span class="line l1"></span>
                    <span class="line l2"></span>
                    <span class="line l3"></span>
                    <span class="line l4"></span>
                    <span class="line l5"></span>
                    <span class="line l6"></span>
                    <span class="line l7"></span>
                    <span class="line l8"></span>
                    <span class="line l9"></span>
                    <span class="line l10 s"></span>
                    <span class="line l11 s"></span>
                    <span class="line l12 s"></span>
                    <span class="line l13 s"></span>
                    <span class="line l14 s"></span>
                    <span class="line l15 s"></span>
                    <span class="line l16 s"></span>
                    <span class="line l17 s"></span>
                    <span class="line l18 s"></span>
                </span>
            </span>
        </div>

        <div class="icon maps">
            <span class="block b1"></span>
            <span class="block b2"></span>
            <span class="block b3">
                <span class="sign"></span>
                <span class="mask m1">
                    <span class="road r1"></span>
                </span>
                <span class="mask m2">
                    <span class="road r2"></span>
                </span>
            </span>
            <span class="block b4"></span>
            <span class="block b5"></span>
            <span class="block b6"></span>
            <span class="dot"></span>
        </div>

        <div class="icon notes"></div>

        <div class="icon stocks">
            <span class="dot"></span>
            <span class="line l1"></span>
            <span class="line l2"></span>
            <span class="line l3"></span>
            <span class="line l4"></span>
            <span class="line l5"></span>
            <span class="line l6"></span>
            <span class="line l7"></span>
            <span class="line l8"></span>
            <span class="line l9"></span>
            <span class="line l10"></span>
            <span class="line l11"></span>
            <span class="line l12"></span>
            <span class="line l13"></span>
        </div>

        <div class="icon appstore">
            <span class="picto">
                <span class="pencil"></span>
                <span class="crayon"></span>
            </span>
        </div>

        <div class="icon weather">
            <span class="cloud"></span>
        </div>

        <div class="icon clock">
            <div class="numbers">
                <ol>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
        </div>

        <div class="icon newsstand">
            <div class="news">
                <span>News</span>
            </div>
            <div class="art">
                <span>Art</span>
            </div>
            <div class="travel">
                <span class="label">Travel</span>
                <span class="picto"></span>
            </div>
            <div class="sports">
                <span class="label">Sports</span>
            </div>
        </div>

        <div class="icon music"></div>

        <div class="icon videos"></div>

        <div class="icon messages"></div>

        <div class="icon gamecenter">
            <div class="bubble blue"></div>
            <div class="bubble yellow"></div>
            <div class="bubble purple"></div>
            <div class="bubble pink"></div>
        </div>

        <div class="icon itunes"></div>

        <div class="icon calendar">
            <span class="one"></span>
        </div>

        <div class="icon calculator">
            <span class="sign plus"></span>
            <span class="sign minus"></span>
            <span class="sign mul"></span>
            <span class="sign eq"></span>
        </div>

        <div class="icon camera">
            <span class="upper"></span>
            <span class="case"></span>
            <span class="knob"></span>
        </div>
    </div>
</body>
</html>

CSS代码(style.css):

html,body{width:100%;height:100%;margin:0;padding:0;}
.wrapper{position:relative;width:420px;margin:0 auto;padding:0;font-size:0;}
.icon{position:relative;display:inline-block;width:100px;height:100px;margin:20px;border-radius:18px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.phone{background:-webkit-linear-gradient(top,#86fe65 0%,#06d315 100%);background:-moz-linear-gradient(top,#86fe65 0%,#06d315 100%);background:-ms-linear-gradient(top,#86fe65 0%,#06d315 100%);background:-o-linear-gradient(top,#86fe65 0%,#06d315 100%);background:linear-gradient(top,#86fe65 0%,#06d315 100%);box-shadow:0 0 0 1px rgba(134,254,101,0.1),0 0 0 1px rgba(0,0,0,0.05) inset;}
.phone .receiver{position:absolute;width:80px;height:26px;top:50%;left:50%;margin:-10px 0 0 -40px;overflow:hidden;-webkit-transform:rotateZ(225deg);-moz-transform:rotateZ(225deg);-ms-transform:rotateZ(225deg);-o-transform:rotateZ(225deg);transform:rotateZ(225deg);}
.phone .receiver .inner-part{position:absolute;width:100%;overflow:hidden;}
.phone .receiver .inner-part.part-1{height:12px;top:0;left:0;z-index:2;}
.phone .receiver .inner-part.part-1:before{position:absolute;content:'';width:160px;height:160px;top:1px;left:50%;margin:0 0 0 -80px;border-radius:80px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1);}
.phone .receiver .inner-part.part-2{height:24px;top:8px;left:0;z-index:1;}
.phone .receiver .inner-part.part-2:before,.phone .receiver .inner-part.part-2:after{position:absolute;content:'';top:-1px;width:24px;height:16px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1);}
.phone .receiver .inner-part.part-2:before{left:0;-webkit-transform:rotateZ(-10deg);-moz-transform:rotateZ(-10deg);-ms-transform:rotateZ(-10deg);-o-transform:rotateZ(-10deg);transform:rotateZ(-10deg);}
.phone .receiver .inner-part.part-2:after{right:0;-webkit-transform:rotateZ(10deg);-moz-transform:rotateZ(10deg);-ms-transform:rotateZ(10deg);-o-transform:rotateZ(10deg);transform:rotateZ(10deg);}
.phone .receiver:before{position:absolute;content:'';width:36px;height:18px;top:10px;left:50%;margin:0 0 0 -18px;z-index:3;border-radius:8px 8px 0 0;box-shadow:0 1px 0 0 rgba(0,0,0,0.1) inset;background:-webkit-linear-gradient(-45deg,#63f056 0%,#3be13e 100%);background:-moz-linear-gradient(-45deg,#63f056 0%,#3be13e 100%);background:-ms-linear-gradient(-45deg,#63f056 0%,#3be13e 100%);background:-o-linear-gradient(-45deg,#63f056 0%,#3be13e 100%);background:linear-gradient(-45deg,#63f056 0%,#3be13e 100%);}
.reminders{border:1px #cfcfcf solid;background:#fafafa;overflow:hidden;}
.reminders .list-item{position:absolute;width:66px;height:20px;left:32px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.reminders .list-item:before{position:absolute;content:'';width:14px;height:14px;top:50%;left:-24px;margin:-7px 0 0 0;border-radius:8px;}
.reminders .list-item:after{position:absolute;content:'';width:10px;height:10px;top:50%;left:-21px;margin:-4px 0 0 0;border-radius:8px;}
.reminders .list-item.i1{top:11px;border-top:2px #dbdbdb solid;border-bottom:1px #dbdbdb solid;}
.reminders .list-item.i1:before{margin:-9px 0 0 0;border:1px #fa9700 solid;}
.reminders .list-item.i1:after{margin:-6px 0 0 0;background:#fa9700;box-shadow:0 0 0 2px rgba(250,151,0,0.3);}
.reminders .list-item.i2{top:29px;border-bottom:2px #dbdbdb solid;}
.reminders .list-item.i2:before{border:1px #28b3ed solid;}
.reminders .list-item.i2:after{background:#28b3ed;box-shadow:0 0 0 2px rgba(40,179,237,0.3);}
.reminders .list-item.i3{top:47px;border-bottom:1px #dbdbdb solid;}
.reminders .list-item.i3:before{margin:-8px 0 0 0;border:1px #69dc42 solid;}
.reminders .list-item.i3:after{margin:-5px 0 0 0;background:#69dc42;box-shadow:0 0 0 2px rgba(105,220,66,0.3);}
.reminders .list-item.i4{top:65px;border-bottom:2px #dbdbdb solid;}
.reminders .list-item.i4:before{border:1px #be62d9 solid;}
.reminders .list-item.i4:after{background:#be62d9;box-shadow:0 0 0 2px rgba(190,98,217,0.3);}
.passbook{overflow:hidden;}
.passbook .plane{position:absolute;width:100%;height:33px;top:0;left:0;z-index:3;background:#59bbf5;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;border-radius:18px 18px 0 0;}
.passbook .plane .picto{position:absolute;width:16px;height:4px;top:14px;left:12px;background:#fff;border-radius:0 3px 3px 0;}
.passbook .plane .picto:before{position:absolute;content:'';width:0;height:0;top:-3px;left:0;border-color:transparent transparent transparent white;border-width:5px;border-style:solid;}
.passbook .plane .picto:after{position:absolute;content:'';width:8px;height:8px;top:-3px;left:0;border-right:2px white solid;border-bottom:2px white solid;-webkit-transform:rotateZ(-45deg);-moz-transform:rotateZ(-45deg);-ms-transform:rotateZ(-45deg);-o-transform:rotateZ(-45deg);transform:rotateZ(-45deg);}
.passbook .plane .knob{position:absolute;width:20px;height:10px;bottom:-9px;left:50%;margin:0 0 0 -10px;z-index:1;overflow:hidden;}
.passbook .plane .knob:before{position:absolute;content:'';width:20px;height:20px;top:-10px;left:50%;margin:0 0 0 -10px;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;background:#59bbf5;}
.passbook .movie{position:absolute;width:100%;height:34px;top:33px;left:0;z-index:1;box-shadow:0 1px 0 0 rgba(69,214,0,0.8) inset;background:-webkit-linear-gradient(top,#44cf01 0%,#37bc00 100%);background:-moz-linear-gradient(top,#44cf01 0%,#37bc00 100%);background:-ms-linear-gradient(top,#44cf01 0%,#37bc00 100%);background:-o-linear-gradient(top,#44cf01 0%,#37bc00 100%);background:linear-gradient(top,#44cf01 0%,#37bc00 100%);}
.passbook .movie .picto{position:absolute;width:9px;height:7px;top:16px;left:12px;background:#fff;box-shadow:0 0 0 1px rgba(24,187,0,0.8);}
.passbook .movie .picto:before{position:absolute;content:'';width:0;height:0;top:0;right:-4px;border-color:transparent white transparent transparent;border-width:4px;border-style:solid;}
.passbook .movie .picto:after{position:absolute;content:'';width:20px;height:10px;top:-10px;left:-6px;background-size:10px 10px;background-repeat:repeat-x;background-position:0 0;background-image:-webkit-radial-gradient(50% 50%,circle cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,white 26%,white 50%,rgba(24,187,0,0.7) 65%,rgba(24,187,0,0) 80%);background-image:-moz-radial-gradient(50% 50%,circle cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,white 26%,white 50%,rgba(24,187,0,0.7) 65%,rgba(24,187,0,0) 80%);background-image:-ms-radial-gradient(50% 50%,circle cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,white 26%,white 50%,rgba(24,187,0,0.7) 65%,rgba(24,187,0,0) 80%);background-image:-o-radial-gradient(50% 50%,circle cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,white 26%,white 50%,rgba(24,187,0,0.7) 65%,rgba(24,187,0,0) 80%);background-image:radial-gradient(50% 50%,circle cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,white 26%,white 50%,rgba(24,187,0,0.7) 65%,rgba(24,187,0,0) 80%);}
.passbook .coffee{position:absolute;width:100%;height:33px;top:67px;left:0;z-index:2;border-radius:0 0 18px 18px;box-shadow:0 -1px 0 0 rgba(254,151,0,0.8) inset;background:-webkit-linear-gradient(top,#ffa003 0%,#fea000 100%);background:-moz-linear-gradient(top,#ffa003 0%,#fea000 100%);background:-ms-linear-gradient(top,#ffa003 0%,#fea000 100%);background:-o-linear-gradient(top,#ffa003 0%,#fea000 100%);background:linear-gradient(top,#ffa003 0%,#fea000 100%);}
.passbook .coffee .picto{position:absolute;width:18px;height:9px;top:10px;left:8px;background-size:18px 18px;background-repeat:no-repeat;background-position:0 -9px;background-image:-webkit-radial-gradient(50% 50%,circle contain,white 0%,white 80%,transparent 81%);background-image:-moz-radial-gradient(50% 50%,circle contain,white 0%,white 80%,transparent 81%);background-image:-ms-radial-gradient(50% 50%,circle contain,white 0%,white 80%,transparent 81%);background-image:-o-radial-gradient(50% 50%,circle contain,white 0%,white 80%,transparent 81%);background-image:radial-gradient(50% 50%,circle contain,white 0%,white 80%,transparent 81%);}
.passbook .coffee .picto:before{position:absolute;content:'';width:3px;height:3px;top:0;left:0;border:1px white solid;border-radius:3px;}
.passbook .coffee .picto:after{position:absolute;content:'';width:10px;height:1px;bottom:1px;left:4px;background:#fff;}
.passbook .coffee:before{position:absolute;content:'';width:100%;height:6px;top:-2px;z-index:2;background-size:4px 4px;background-repeat:repeat-x;background-position:-3px 0;background-image:-webkit-radial-gradient(50% 50%,circle cover,#37bc00 0%,#37bc00 60%,rgba(55,188,0,0) 61%);background-image:-moz-radial-gradient(50% 50%,circle cover,#37bc00 0%,#37bc00 60%,rgba(55,188,0,0) 61%);background-image:-ms-radial-gradient(50% 50%,circle cover,#37bc00 0%,#37bc00 60%,rgba(55,188,0,0) 61%);background-image:-o-radial-gradient(50% 50%,circle cover,#37bc00 0%,#37bc00 60%,rgba(55,188,0,0) 61%);background-image:radial-gradient(50% 50%,circle cover,#37bc00 0%,#37bc00 60%,rgba(55,188,0,0) 61%);}
.mail{box-shadow:0 0 0 1px rgba(11,70,238,0.1) inset;background:-webkit-linear-gradient(top,#1a51f0 0%,#03e4fe 100%);background:-moz-linear-gradient(top,#1a51f0 0%,#03e4fe 100%);background:-ms-linear-gradient(top,#1a51f0 0%,#03e4fe 100%);background:-o-linear-gradient(top,#1a51f0 0%,#03e4fe 100%);background:linear-gradient(top,#1a51f0 0%,#03e4fe 100%);}
.mail .picto{position:absolute;width:68px;height:46px;top:50%;left:50%;margin:-23px 0 0 -34px;overflow:hidden;border-radius:3px;box-shadow:0 0 0 1px rgba(5,64,234,0.1);}
.mail .picto:before,.mail .picto:after{position:absolute;content:'';width:0;height:0;border-width:23px;border-style:solid;}
.mail .picto:before{top:0;left:0;border-color:transparent transparent transparent white;}
.mail .picto:after{top:0;right:0;border-color:transparent white transparent transparent;}
.mail .picto .inner{position:absolute;}
.mail .picto .inner.i1{width:50px;height:50px;top:-29px;left:9px;z-index:2;background:#fff;border-radius:4px;box-shadow:0 0 0 2px #1ca4f7;-webkit-transform:rotateZ(45deg);-moz-transform:rotateZ(45deg);-ms-transform:rotateZ(45deg);-o-transform:rotateZ(45deg);transform:rotateZ(45deg);}
.mail .picto .inner.i2{width:50px;height:50px;bottom:-29px;left:9px;z-index:1;background:#fff;border-radius:8px;box-shadow:0 0 0 1px rgba(5,64,234,0.1);-webkit-transform:rotateZ(45deg);-moz-transform:rotateZ(45deg);-ms-transform:rotateZ(45deg);-o-transform:rotateZ(45deg);transform:rotateZ(45deg);}
.photos{border:1px #cfcfcf solid;overflow:hidden;}
.photos .fan{position:absolute;width:26px;height:40px;top:50%;left:50%;border-radius:22px;-webkit-transform-origin:center center;-moz-transform-origin:center center;-ms-transform-origin:center center;-o-transform-origin:center center;transform-origin:center center;}
.photos .f1{margin:-42px 0 0 -13px;z-index:8;box-shadow:0 1px 0 0 rgba(250,144,29,0.8) inset;background:-webkit-linear-gradient(top,rgba(250,144,29,0.9) 0%,rgba(250,144,29,0.7) 100%);background:-moz-linear-gradient(top,rgba(250,144,29,0.9) 0%,rgba(250,144,29,0.7) 100%);background:-ms-linear-gradient(top,rgba(250,144,29,0.9) 0%,rgba(250,144,29,0.7) 100%);background:-o-linear-gradient(top,rgba(250,144,29,0.9) 0%,rgba(250,144,29,0.7) 100%);background:linear-gradient(top,rgba(250,144,29,0.9) 0%,rgba(250,144,29,0.7) 100%);}
.photos .f2{margin:-38px 0 0 4px;z-index:1;box-shadow:0 1px 0 0 rgba(252,228,0,0.8) inset;-webkit-transform:rotateZ(45deg);-moz-transform:rotateZ(45deg);-ms-transform:rotateZ(45deg);-o-transform:rotateZ(45deg);transform:rotateZ(45deg);background:-webkit-linear-gradient(top,rgba(252,228,0,0.9) 0%,rgba(252,228,0,0.7) 100%);background:-moz-linear-gradient(top,rgba(252,228,0,0.9) 0%,rgba(252,228,0,0.7) 100%);background:-ms-linear-gradient(top,rgba(252,228,0,0.9) 0%,rgba(252,228,0,0.7) 100%);background:-o-linear-gradient(top,rgba(252,228,0,0.9) 0%,rgba(252,228,0,0.7) 100%);background:linear-gradient(top,rgba(252,228,0,0.9) 0%,rgba(252,228,0,0.7) 100%);}
.photos .f3{margin:-20px 0 0 10px;z-index:2;box-shadow:0 1px 0 0 rgba(187,213,41,0.8) inset;-webkit-transform:rotateZ(90deg);-moz-transform:rotateZ(90deg);-ms-transform:rotateZ(90deg);-o-transform:rotateZ(90deg);transform:rotateZ(90deg);background:-webkit-linear-gradient(top,rgba(187,213,41,0.9) 0%,rgba(187,213,41,0.7) 100%);background:-moz-linear-gradient(top,rgba(187,213,41,0.9) 0%,rgba(187,213,41,0.7) 100%);background:-ms-linear-gradient(top,rgba(187,213,41,0.9) 0%,rgba(187,213,41,0.7) 100%);background:-o-linear-gradient(top,rgba(187,213,41,0.9) 0%,rgba(187,213,41,0.7) 100%);background:linear-gradient(top,rgba(187,213,41,0.9) 0%,rgba(187,213,41,0.7) 100%);}
.photos .f4{margin:-4px 0 0 2px;z-index:3;box-shadow:0 1px 0 0 rgba(86,189,118,0.8) inset;-webkit-transform:rotateZ(135deg);-moz-transform:rotateZ(135deg);-ms-transform:rotateZ(135deg);-o-transform:rotateZ(135deg);transform:rotateZ(135deg);background:-webkit-linear-gradient(top,rgba(86,189,118,0.9) 0%,rgba(86,189,118,0.7) 100%);background:-moz-linear-gradient(top,rgba(86,189,118,0.9) 0%,rgba(86,189,118,0.7) 100%);background:-ms-linear-gradient(top,rgba(86,189,118,0.9) 0%,rgba(86,189,118,0.7) 100%);background:-o-linear-gradient(top,rgba(86,189,118,0.9) 0%,rgba(86,189,118,0.7) 100%);background:linear-gradient(top,rgba(86,189,118,0.9) 0%,rgba(86,189,118,0.7) 100%);}
.photos .f5{margin:2px 0 0 -13px;z-index:4;box-shadow:0 1px 0 0 rgba(88,165,228,0.8) inset;-webkit-transform:rotateZ(180deg);-moz-transform:rotateZ(180deg);-ms-transform:rotateZ(180deg);-o-transform:rotateZ(180deg);transform:rotateZ(180deg);background:-webkit-linear-gradient(top,rgba(88,165,228,0.9) 0%,rgba(88,165,228,0.7) 100%);background:-moz-linear-gradient(top,rgba(88,165,228,0.9) 0%,rgba(88,165,228,0.7) 100%);background:-ms-linear-gradient(top,rgba(88,165,228,0.9) 0%,rgba(88,165,228,0.7) 100%);background:-o-linear-gradient(top,rgba(88,165,228,0.9) 0%,rgba(88,165,228,0.7) 100%);background:linear-gradient(top,rgba(88,165,228,0.9) 0%,rgba(88,165,228,0.7) 100%);}
.photos .f6{margin:-4px 0 0 -31px;z-index:5;box-shadow:0 1px 0 0 rgba(140,127,195,0.8) inset;-webkit-transform:rotateZ(225deg);-moz-transform:rotateZ(225deg);-ms-transform:rotateZ(225deg);-o-transform:rotateZ(225deg);transform:rotateZ(225deg);background:-webkit-linear-gradient(top,rgba(140,127,195,0.9) 0%,rgba(140,127,195,0.7) 100%);background:-moz-linear-gradient(top,rgba(140,127,195,0.9) 0%,rgba(140,127,195,0.7) 100%);background:-ms-linear-gradient(top,rgba(140,127,195,0.9) 0%,rgba(140,127,195,0.7) 100%);background:-o-linear-gradient(top,rgba(140,127,195,0.9) 0%,rgba(140,127,195,0.7) 100%);background:linear-gradient(top,rgba(140,127,195,0.9) 0%,rgba(140,127,195,0.7) 100%);}
.photos .f7{margin:-20px 0 0 -36px;z-index:6;box-shadow:0 1px 0 0 rgba(194,126,172,0.8) inset;-webkit-transform:rotateZ(270deg);-moz-transform:rotateZ(270deg);-ms-transform:rotateZ(270deg);-o-transform:rotateZ(270deg);transform:rotateZ(270deg);background:-webkit-linear-gradient(top,rgba(194,126,172,0.9) 0%,rgba(194,126,172,0.7) 100%);background:-moz-linear-gradient(top,rgba(194,126,172,0.9) 0%,rgba(194,126,172,0.7) 100%);background:-ms-linear-gradient(top,rgba(194,126,172,0.9) 0%,rgba(194,126,172,0.7) 100%);background:-o-linear-gradient(top,rgba(194,126,172,0.9) 0%,rgba(194,126,172,0.7) 100%);background:linear-gradient(top,rgba(194,126,172,0.9) 0%,rgba(194,126,172,0.7) 100%);}
.photos .f8{margin:-36px 0 0 -31px;z-index:7;box-shadow:0 1px 0 0 rgba(244,73,82,0.8) inset;-webkit-transform:rotateZ(315deg);-moz-transform:rotateZ(315deg);-ms-transform:rotateZ(315deg);-o-transform:rotateZ(315deg);transform:rotateZ(315deg);background:-webkit-linear-gradient(top,rgba(244,73,82,0.9) 0%,rgba(244,73,82,0.7) 100%);background:-moz-linear-gradient(top,rgba(244,73,82,0.9) 0%,rgba(244,73,82,0.7) 100%);background:-ms-linear-gradient(top,rgba(244,73,82,0.9) 0%,rgba(244,73,82,0.7) 100%);background:-o-linear-gradient(top,rgba(244,73,82,0.9) 0%,rgba(244,73,82,0.7) 100%);background:linear-gradient(top,rgba(244,73,82,0.9) 0%,rgba(244,73,82,0.7) 100%);}
.facetime{background:-webkit-linear-gradient(top,#86fe65 0%,#06d315 100%);background:-moz-linear-gradient(top,#86fe65 0%,#06d315 100%);background:-ms-linear-gradient(top,#86fe65 0%,#06d315 100%);background:-o-linear-gradient(top,#86fe65 0%,#06d315 100%);background:linear-gradient(top,#86fe65 0%,#06d315 100%);box-shadow:0 0 0 1px rgba(134,254,101,0.1),0 0 0 1px rgba(0,0,0,0.05) inset;}
.facetime:before{position:absolute;content:'';width:2px;height:6px;top:38px;left:12px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,0.05);}
.facetime .picto{position:absolute;width:49px;height:42px;top:28px;left:15px;border-radius:5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,0.05);}
.facetime .picto:before{position:absolute;content:'';width:1px;height:34px;top:4px;right:-20px;background:#fff;}
.facetime .lens{position:absolute;width:16px;height:34px;top:32px;left:66px;overflow:hidden;background:#fff;}
.facetime .lens:before,.facetime .lens:after{position:absolute;content:'';left:0;border-style:solid;border-width:16px;}
.facetime .lens:before{border-color:transparent transparent transparent #63f158;top:-17px;-webkit-transform:rotateZ(10deg);-moz-transform:rotateZ(10deg);-ms-transform:rotateZ(10deg);-o-transform:rotateZ(10deg);transform:rotateZ(10deg);}
.facetime .lens:after{border-color:transparent transparent transparent #35e234;bottom:-17px;-webkit-transform:rotateZ(-10deg);-moz-transform:rotateZ(-10deg);-ms-transform:rotateZ(-10deg);-o-transform:rotateZ(-10deg);transform:rotateZ(-10deg);}
.safari{border:1px #cfcfcf solid;}
.safari .compass{position:absolute;width:86px;height:86px;top:50%;left:50%;overflow:hidden;margin:-43px 0 0 -43px;border-radius:43px;box-shadow:0 0 0 1px rgba(0,0,0,0.05) inset;-webkit-transform:rotateZ(45deg);-moz-transform:rotateZ(45deg);-ms-transform:rotateZ(45deg);-o-transform:rotateZ(45deg);transform:rotateZ(45deg);background:-webkit-linear-gradient(135deg,#00e3fe 0%,#1b53f0 100%);background:-moz-linear-gradient(135deg,#00e3fe 0%,#1b53f0 100%);background:-ms-linear-gradient(135deg,#00e3fe 0%,#1b53f0 100%);background:-o-linear-gradient(135deg,#00e3fe 0%,#1b53f0 100%);background:linear-gradient(135deg,#00e3fe 0%,#1b53f0 100%);}
.safari .compass:before,.safari .compass:after{position:absolute;content:'';border-style:solid;border-width:43px;z-index:3;-webkit-transform:scaleX(0.15);-moz-transform:scaleX(0.15);-ms-transform:scaleX(0.15);-o-transform:scaleX(0.15);transform:scaleX(0.15);}
.safari .compass:before{top:43px;left:0;border-color:white transparent transparent transparent;}
.safari .compass:after{top:-43px;left:0;border-color:transparent transparent #fe3b2f transparent;}
.safari .scale{position:absolute;width:80px;height:80px;top:50%;left:50%;margin:-40px 0 0 -40px;-webkit-transform:rotateZ(-45deg);-moz-transform:rotateZ(-45deg);-ms-transform:rotateZ(-45deg);-o-transform:rotateZ(-45deg);transform:rotateZ(-45deg);}
.safari .scale .line{position:absolute;width:80px;height:80px;top:0;left:0;}
.safari .scale .line:after,.safari .scale .line:before{position:absolute;content:'';}
.safari .scale .line:before{width:1px;height:80px;top:0;left:50%;background:-webkit-linear-gradient(top,rgba(255,255,255,0.7) 10%,rgba(255,255,255,0) 11%,rgba(255,255,255,0) 89%,rgba(255,255,255,0.7) 90%,rgba(255,255,255,0.7) 100%);background:-moz-linear-gradient(top,rgba(255,255,255,0.7) 10%,rgba(255,255,255,0) 11%,rgba(255,255,255,0) 89%,rgba(255,255,255,0.7) 90%,rgba(255,255,255,0.7) 100%);background:-ms-linear-gradient(top,rgba(255,255,255,0.7) 10%,rgba(255,255,255,0) 11%,rgba(255,255,255,0) 89%,rgba(255,255,255,0.7) 90%,rgba(255,255,255,0.7) 100%);background:-o-linear-gradient(top,rgba(255,255,255,0.7) 10%,rgba(255,255,255,0) 11%,rgba(255,255,255,0) 89%,rgba(255,255,255,0.7) 90%,rgba(255,255,255,0.7) 100%);background:linear-gradient(top,rgba(255,255,255,0.7) 10%,rgba(255,255,255,0) 11%,rgba(255,255,255,0) 89%,rgba(255,255,255,0.7) 90%,rgba(255,255,255,0.7) 100%);}
.safari .scale .line:after{width:80px;height:1px;top:50%;left:0;background:-webkit-linear-gradient(left,rgba(255,255,255,0.7) 10%,rgba(255,255,255,0) 11%,rgba(255,255,255,0) 89%,rgba(255,255,255,0.7) 90%,rgba(255,255,255,0.7) 100%);background:-moz-linear-gradient(left,rgba(255,255,255,0.7) 10%,rgba(255,255,255,0) 11%,rgba(255,255,255,0) 89%,rgba(255,255,255,0.7) 90%,rgba(255,255,255,0.7) 100%);background:-ms-linear-gradient(left,rgba(255,255,255,0.7) 10%,rgba(255,255,255,0) 11%,rgba(255,255,255,0) 89%,rgba(255,255,255,0.7) 90%,rgba(255,255,255,0.7) 100%);background:-o-linear-gradient(left,rgba(255,255,255,0.7) 10%,rgba(255,255,255,0) 11%,rgba(255,255,255,0) 89%,rgba(255,255,255,0.7) 90%,rgba(255,255,255,0.7) 100%);background:linear-gradient(left,rgba(255,255,255,0.7) 10%,rgba(255,255,255,0) 11%,rgba(255,255,255,0) 89%,rgba(255,255,255,0.7) 90%,rgba(255,255,255,0.7) 100%);}
.safari .scale .line.s:before{background:-webkit-linear-gradient(top,rgba(255,255,255,0.7) 7%,rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,rgba(255,255,255,0.7) 93%,rgba(255,255,255,0.7) 100%);background:-moz-linear-gradient(top,rgba(255,255,255,0.7) 7%,rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,rgba(255,255,255,0.7) 93%,rgba(255,255,255,0.7) 100%);background:-ms-linear-gradient(top,rgba(255,255,255,0.7) 7%,rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,rgba(255,255,255,0.7) 93%,rgba(255,255,255,0.7) 100%);background:-o-linear-gradient(top,rgba(255,255,255,0.7) 7%,rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,rgba(255,255,255,0.7) 93%,rgba(255,255,255,0.7) 100%);background:linear-gradient(top,rgba(255,255,255,0.7) 7%,rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,rgba(255,255,255,0.7) 93%,rgba(255,255,255,0.7) 100%);}
.safari .scale .line.s:after{background:-webkit-linear-gradient(left,rgba(255,255,255,0.7) 7%,rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,rgba(255,255,255,0.7) 93%,rgba(255,255,255,0.7) 100%);background:-moz-linear-gradient(left,rgba(255,255,255,0.7) 7%,rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,rgba(255,255,255,0.7) 93%,rgba(255,255,255,0.7) 100%);background:-ms-linear-gradient(left,rgba(255,255,255,0.7) 7%,rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,rgba(255,255,255,0.7) 93%,rgba(255,255,255,0.7) 100%);background:-o-linear-gradient(left,rgba(255,255,255,0.7) 7%,rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,rgba(255,255,255,0.7) 93%,rgba(255,255,255,0.7) 100%);background:linear-gradient(left,rgba(255,255,255,0.7) 7%,rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,rgba(255,255,255,0.7) 93%,rgba(255,255,255,0.7) 100%);}
.safari .scale .line.l1{-webkit-transform:rotateZ(0deg);-moz-transform:rotateZ(0deg);-ms-transform:rotateZ(0deg);-o-transform:rotateZ(0deg);transform:rotateZ(0deg);}
.safari .scale .line.l2{-webkit-transform:rotateZ(10deg);-moz-transform:rotateZ(10deg);-ms-transform:rotateZ(10deg);-o-transform:rotateZ(10deg);transform:rotateZ(10deg);}
.safari .scale .line.l3{-webkit-transform:rotateZ(20deg);-moz-transform:rotateZ(20deg);-ms-transform:rotateZ(20deg);-o-transform:rotateZ(20deg);transform:rotateZ(20deg);}
.safari .scale .line.l4{-webkit-transform:rotateZ(30deg);-moz-transform:rotateZ(30deg);-ms-transform:rotateZ(30deg);-o-transform:rotateZ(30deg);transform:rotateZ(30deg);}
.safari .scale .line.l5{-webkit-transform:rotateZ(40deg);-moz-transform:rotateZ(40deg);-ms-transform:rotateZ(40deg);-o-transform:rotateZ(40deg);transform:rotateZ(40deg);}
.safari .scale .line.l6{-webkit-transform:rotateZ(50deg);-moz-transform:rotateZ(50deg);-ms-transform:rotateZ(50deg);-o-transform:rotateZ(50deg);transform:rotateZ(50deg);}
.safari .scale .line.l7{-webkit-transform:rotateZ(60deg);-moz-transform:rotateZ(60deg);-ms-transform:rotateZ(60deg);-o-transform:rotateZ(60deg);transform:rotateZ(60deg);}
.safari .scale .line.l8{-webkit-transform:rotateZ(70deg);-moz-transform:rotateZ(70deg);-ms-transform:rotateZ(70deg);-o-transform:rotateZ(70deg);transform:rotateZ(70deg);}
.safari .scale .line.l9{-webkit-transform:rotateZ(80deg);-moz-transform:rotateZ(80deg);-ms-transform:rotateZ(80deg);-o-transform:rotateZ(80deg);transform:rotateZ(80deg);}
.safari .scale .line.l10{-webkit-transform:rotateZ(5deg);-moz-transform:rotateZ(5deg);-ms-transform:rotateZ(5deg);-o-transform:rotateZ(5deg);transform:rotateZ(5deg);}
.safari .scale .line.l11{-webkit-transform:rotateZ(15deg);-moz-transform:rotateZ(15deg);-ms-transform:rotateZ(15deg);-o-transform:rotateZ(15deg);transform:rotateZ(15deg);}
.safari .scale .line.l12{-webkit-transform:rotateZ(25deg);-moz-transform:rotateZ(25deg);-ms-transform:rotateZ(25deg);-o-transform:rotateZ(25deg);transform:rotateZ(25deg);}
.safari .scale .line.l13{-webkit-transform:rotateZ(35deg);-moz-transform:rotateZ(35deg);-ms-transform:rotateZ(35deg);-o-transform:rotateZ(35deg);transform:rotateZ(35deg);}
.safari .scale .line.l14{-webkit-transform:rotateZ(45deg);-moz-transform:rotateZ(45deg);-ms-transform:rotateZ(45deg);-o-transform:rotateZ(45deg);transform:rotateZ(45deg);}
.safari .scale .line.l15{-webkit-transform:rotateZ(55deg);-moz-transform:rotateZ(55deg);-ms-transform:rotateZ(55deg);-o-transform:rotateZ(55deg);transform:rotateZ(55deg);}
.safari .scale .line.l16{-webkit-transform:rotateZ(65deg);-moz-transform:rotateZ(65deg);-ms-transform:rotateZ(65deg);-o-transform:rotateZ(65deg);transform:rotateZ(65deg);}
.safari .scale .line.l17{-webkit-transform:rotateZ(75deg);-moz-transform:rotateZ(75deg);-ms-transform:rotateZ(75deg);-o-transform:rotateZ(75deg);transform:rotateZ(75deg);}
.safari .scale .line.l18{-webkit-transform:rotateZ(85deg);-moz-transform:rotateZ(85deg);-ms-transform:rotateZ(85deg);-o-transform:rotateZ(85deg);transform:rotateZ(85deg);}
.maps{overflow:hidden;}
.maps .block{position:absolute;}
.maps .block.b1{width:68px;height:16px;top:0;left:0;background:#75c63b;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;}
.maps .block.b2{width:16px;height:16px;top:0;right:0;background:#fbc5cf;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;}
.maps .block.b3{width:69px;height:68px;top:30px;left:-4px;border:3px white solid;overflow:hidden;z-index:9;background:#e4ddca;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;}
.maps .block.b3 .sign{position:absolute;width:38px;height:26px;top:8px;left:18px;z-index:20;border:2px white solid;border-radius:0 0 20px 20px;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;background:-webkit-linear-gradient(top,#d40308 9%,white 10%,white 11%,#007aff 12%,#007aff 100%);background:-moz-linear-gradient(top,#d40308 9%,white 10%,white 11%,#007aff 12%,#007aff 100%);background:-ms-linear-gradient(top,#d40308 9%,white 10%,white 11%,#007aff 12%,#007aff 100%);background:-o-linear-gradient(top,#d40308 9%,white 10%,white 11%,#007aff 12%,#007aff 100%);background:linear-gradient(top,#d40308 9%,white 10%,white 11%,#007aff 12%,#007aff 100%);}
.maps .block.b3 .sign:before{position:absolute;content:'280';width:28px;height:14px;top:5px;left:4px;font-family:"Helvetica Neue",Helvetica,Arial;font-size:14px;font-weight:bold;text-align:center;text-shadow:0 0 1px rgba(0,0,0,0.1);line-height:14px;color:#fff;}
.maps .block.b3 .mask{position:absolute;overflow:hidden;}
.maps .block.b3 .mask.m1{width:49px;height:50px;top:18px;left:0;z-index:2;}
.maps .block.b3 .mask.m2{width:36px;height:28px;bottom:0;right:0;}
.maps .block.b3 .road{position:absolute;}
.maps .block.b3 .road.r1{width:112px;height:112px;top:0;left:-56px;border-radius:112px;border:2px #fdc208 solid;background-image:-webkit-radial-gradient(50% 50%,circle cover,#e4ddca 0%,#e4ddca 45%,#fdc208 46%,#fdc208 48%,#fdd633 49%,#fdd633 98%,#fdc208 100%);background-image:-moz-radial-gradient(50% 50%,circle cover,#e4ddca 0%,#e4ddca 45%,#fdc208 46%,#fdc208 48%,#fdd633 49%,#fdd633 98%,#fdc208 100%);background-image:-ms-radial-gradient(50% 50%,circle cover,#e4ddca 0%,#e4ddca 45%,#fdc208 46%,#fdc208 48%,#fdd633 49%,#fdd633 98%,#fdc208 100%);background-image:-o-radial-gradient(50% 50%,circle cover,#e4ddca 0%,#e4ddca 45%,#fdc208 46%,#fdc208 48%,#fdd633 49%,#fdd633 98%,#fdc208 100%);background-image:radial-gradient(50% 50%,circle cover,#e4ddca 0%,#e4ddca 45%,#fdc208 46%,#fdc208 48%,#fdd633 49%,#fdd633 98%,#fdc208 100%);}
.maps .block.b3 .road.r2{width:112px;height:112px;top:-69px;left:-8px;border-radius:112px;border:2px #fdc208 solid;background-image:-webkit-radial-gradient(50% 50%,circle cover,#e4ddca 0%,#e4ddca 45%,#fdc208 46%,#fdc208 48%,#fdd633 49%,#fdd633 98%,#fdc208 100%);background-image:-moz-radial-gradient(50% 50%,circle cover,#e4ddca 0%,#e4ddca 45%,#fdc208 46%,#fdc208 48%,#fdd633 49%,#fdd633 98%,#fdc208 100%);background-image:-ms-radial-gradient(50% 50%,circle cover,#e4ddca 0%,#e4ddca 45%,#fdc208 46%,#fdc208 48%,#fdd633 49%,#fdd633 98%,#fdc208 100%);background-image:-o-radial-gradient(50% 50%,circle cover,#e4ddca 0%,#e4ddca 45%,#fdc208 46%,#fdc208 48%,#fdd633 49%,#fdd633 98%,#fdc208 100%);background-image:radial-gradient(50% 50%,circle cover,#e4ddca 0%,#e4ddca 45%,#fdc208 46%,#fdc208 48%,#fdd633 49%,#fdd633 98%,#fdc208 100%);}
.maps .block.b4{width:17px;height:30px;top:32px;right:-1px;background:#e4ddca;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;}
.maps .block.b5{width:16px;height:22px;bottom:0;right:0;overflow:hidden;background:#e4ddca;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;}
.maps .block.b5:before{position:absolute;content:'';width:12px;height:8px;left:0;bottom:0;background:#ffd634;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;}
.maps .block.b6{width:81px;height:41px;top:19px;left:0;z-index:1;background:#3f9bfe;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;}
.maps .dot{position:absolute;width:20px;height:20px;top:58px;left:65px;z-index:20;border-radius:10px;border:1px rgba(255,255,255,0.4) solid;background:#007bff;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;}
.maps .dot:before,.maps .dot:after{position:absolute;content:'';}
.maps .dot:before{top:-14px;left:-6px;z-index:1;border-style:solid;border-color:transparent transparent white transparent;border-width:16px;-webkit-transform:scaleX(0.3) scaleY(0.9);-moz-transform:scaleX(0.3) scaleY(0.9);-ms-transform:scaleX(0.3) scaleY(0.9);-o-transform:scaleX(0.3) scaleY(0.9);transform:scaleX(0.3) scaleY(0.9);}
.maps .dot:after{top:7px;left:4px;z-index:2;border-style:solid;border-color:transparent transparent #0477f9 transparent;border-width:6px;}
.notes{overflow:hidden;background:#fafafa;border:1px #cfcfcf solid;background:-webkit-linear-gradient(top,#ffdb44 0%,#ffcc00 29%,#d3b64a 30%,#d5dbf2 31%,#fafafa 32%);background:-moz-linear-gradient(top,#ffdb44 0%,#ffcc00 29%,#d3b64a 30%,#d5dbf2 31%,#fafafa 32%);background:-ms-linear-gradient(top,#ffdb44 0%,#ffcc00 29%,#d3b64a 30%,#d5dbf2 31%,#fafafa 32%);background:-o-linear-gradient(top,#ffdb44 0%,#ffcc00 29%,#d3b64a 30%,#d5dbf2 31%,#fafafa 32%);background:linear-gradient(top,#ffdb44 0%,#ffcc00 29%,#d3b64a 30%,#d5dbf2 31%,#fafafa 32%);}
.notes:before{position:absolute;content:'';width:100%;height:38px;top:47px;left:0;border-top:2px #e4e4e4 solid;border-bottom:2px #e4e4e4 solid;background:-webkit-linear-gradient(top,transparent 49%,gainsboro 50%,gainsboro 51%,transparent 52%);background:-moz-linear-gradient(top,transparent 49%,gainsboro 50%,gainsboro 51%,transparent 52%);background:-ms-linear-gradient(top,transparent 49%,gainsboro 50%,gainsboro 51%,transparent 52%);background:-o-linear-gradient(top,transparent 49%,gainsboro 50%,gainsboro 51%,transparent 52%);background:linear-gradient(top,transparent 49%,gainsboro 50%,gainsboro 51%,transparent 52%);}
.notes:after{position:absolute;content:'';width:100%;height:3px;top:34px;left:0;background-repeat:repeat-x;background-position:0 0;background-size:3px 3px;background-image:-webkit-radial-gradient(50% 50%,circle contain,#c3c3c3 50%,transparent 51%);background-image:-moz-radial-gradient(50% 50%,circle contain,#c3c3c3 50%,transparent 51%);background-image:-ms-radial-gradient(50% 50%,circle contain,#c3c3c3 50%,transparent 51%);background-image:-o-radial-gradient(50% 50%,circle contain,#c3c3c3 50%,transparent 51%);background-image:radial-gradient(50% 50%,circle contain,#c3c3c3 50%,transparent 51%);}
.stocks{overflow:hidden;background-repeat:repeat-x;background-size:20px 100%;background-position:-10px 0;background-image:-webkit-linear-gradient(left,#282828 5%,black 6%);background-image:-moz-linear-gradient(left,#282828 5%,black 6%);background-image:-ms-linear-gradient(left,#282828 5%,black 6%);background-image:-o-linear-gradient(left,#282828 5%,black 6%);background-image:linear-gradient(left,#282828 5%,black 6%);}
.stocks:before{position:absolute;content:'';width:120px;height:53%;top:47%;left:0;background:-webkit-linear-gradient(top,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 80%);background:-moz-linear-gradient(top,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 80%);background:-ms-linear-gradient(top,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 80%);background:-o-linear-gradient(top,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 80%);background:linear-gradient(top,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 80%);-webkit-transform:rotateZ(-8deg);-moz-transform:rotateZ(-8deg);-ms-transform:rotateZ(-8deg);-o-transform:rotateZ(-8deg);transform:rotateZ(-8deg);}
.stocks .dot{position:absolute;width:7px;height:7px;top:28px;right:26px;z-index:100;border-radius:9px;border:1px #00f0ff solid;background:#04c9f8;}
.stocks .dot:before{position:absolute;content:'';width:1px;height:100px;top:-28px;right:3px;background:#04c9f8;}
.stocks .line{position:absolute;height:1px;background:#fff;z-index:10;}
.stocks .line.l1{width:14px;top:56px;left:0;-webkit-transform:rotateZ(18deg);-moz-transform:rotateZ(18deg);-ms-transform:rotateZ(18deg);-o-transform:rotateZ(18deg);transform:rotateZ(18deg);}
.stocks .line.l2{width:14px;top:54px;left:12px;-webkit-transform:rotateZ(-40deg);-moz-transform:rotateZ(-40deg);-ms-transform:rotateZ(-40deg);-o-transform:rotateZ(-40deg);transform:rotateZ(-40deg);}
.stocks .line.l3{width:7px;top:53px;left:24px;-webkit-transform:rotateZ(35deg);-moz-transform:rotateZ(35deg);-ms-transform:rotateZ(35deg);-o-transform:rotateZ(35deg);transform:rotateZ(35deg);}
.stocks .line.l4{width:14px;top:50px;left:27px;-webkit-transform:rotateZ(-61deg);-moz-transform:rotateZ(-61deg);-ms-transform:rotateZ(-61deg);-o-transform:rotateZ(-61deg);transform:rotateZ(-61deg);}
.stocks .line.l5{width:16px;top:52px;left:33px;-webkit-transform:rotateZ(67deg);-moz-transform:rotateZ(67deg);-ms-transform:rotateZ(67deg);-o-transform:rotateZ(67deg);transform:rotateZ(67deg);}
.stocks .line.l6{width:7px;top:61px;left:44px;-webkit-transform:rotateZ(26deg);-moz-transform:rotateZ(26deg);-ms-transform:rotateZ(26deg);-o-transform:rotateZ(26deg);transform:rotateZ(26deg);}
.stocks .line.l7{width:14px;top:56px;left:48px;-webkit-transform:rotateZ(-54deg);-moz-transform:rotateZ(-54deg);-ms-transform:rotateZ(-54deg);-o-transform:rotateZ(-54deg);transform:rotateZ(-54deg);}
.stocks .line.l8{width:5px;top:51px;left:59px;-webkit-transform:rotateZ(-5deg);-moz-transform:rotateZ(-5deg);-ms-transform:rotateZ(-5deg);-o-transform:rotateZ(-5deg);transform:rotateZ(-5deg);}
.stocks .line.l9{width:19px;top:42px;left:57px;-webkit-transform:rotateZ(-70deg);-moz-transform:rotateZ(-70deg);-ms-transform:rotateZ(-70deg);-o-transform:rotateZ(-70deg);transform:rotateZ(-70deg);}
.stocks .line.l10{width:18px;top:42px;left:64px;-webkit-transform:rotateZ(70deg);-moz-transform:rotateZ(70deg);-ms-transform:rotateZ(70deg);-o-transform:rotateZ(70deg);transform:rotateZ(70deg);}
.stocks .line.l11{width:7px;top:48px;left:76px;-webkit-transform:rotateZ(-40deg);-moz-transform:rotateZ(-40deg);-ms-transform:rotateZ(-40deg);-o-transform:rotateZ(-40deg);transform:rotateZ(-40deg);}
.stocks .line.l12{width:14px;top:52px;left:79px;-webkit-transform:rotateZ(59deg);-moz-transform:rotateZ(59deg);-ms-transform:rotateZ(59deg);-o-transform:rotateZ(59deg);transform:rotateZ(59deg);}
.stocks .line.l13{width:22px;top:50px;left:85px;-webkit-transform:rotateZ(-57deg);-moz-transform:rotateZ(-57deg);-ms-transform:rotateZ(-57deg);-o-transform:rotateZ(-57deg);transform:rotateZ(-57deg);}
.appstore{box-shadow:0 0 0 1px rgba(6,65,233,0.3) inset;background:-webkit-linear-gradient(top,#03e4fe 0%,#1b52ef 100%);background:-moz-linear-gradient(top,#03e4fe 0%,#1b52ef 100%);background:-ms-linear-gradient(top,#03e4fe 0%,#1b52ef 100%);background:-o-linear-gradient(top,#03e4fe 0%,#1b52ef 100%);background:linear-gradient(top,#03e4fe 0%,#1b52ef 100%);}
.appstore:before{position:absolute;content:'';width:56px;height:6px;top:50%;left:50%;margin:-3px 0 0 -28px;background:#fff;border-radius:1px;box-shadow:0 0 0 1px rgba(0,0,0,0.1);}
.appstore .picto{position:absolute;width:78px;height:78px;top:50%;left:50%;margin:-43px 0 0 -43px;border:4px white solid;border-radius:43px;box-shadow:0 0 0 1px rgba(0,0,0,0.1);}
.appstore .crayon{position:absolute;width:27px;height:7px;top:32px;left:11px;z-index:2;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,0.3);-webkit-transform:rotateZ(-60deg);-moz-transform:rotateZ(-60deg);-ms-transform:rotateZ(-60deg);-o-transform:rotateZ(-60deg);transform:rotateZ(-60deg);}
.appstore .crayon:before{position:absolute;top:-7px;left:-21px;content:'';border-width:10px;border-style:solid;border-color:transparent white transparent transparent;-webkit-transform:scaleY(0.3);-moz-transform:scaleY(0.3);-ms-transform:scaleY(0.3);-o-transform:scaleY(0.3);transform:scaleY(0.3);}
.appstore .crayon:after{position:absolute;content:'';width:6px;height:7px;top:0;right:-7px;background:#fff;border-radius:0 1px 1px 0;box-shadow:0 0 0 1px rgba(0,0,0,0.3);}
.appstore .pencil{position:absolute;width:32px;height:7px;top:22px;right:15px;z-index:2;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,0.3);-webkit-transform:rotateZ(60deg);-moz-transform:rotateZ(60deg);-ms-transform:rotateZ(60deg);-o-transform:rotateZ(60deg);transform:rotateZ(60deg);}
.appstore .pencil:before{position:absolute;top:-7px;right:-28px;content:'';border-width:10px;border-style:solid;border-color:transparent transparent transparent white;border-radius:14px;-webkit-transform:scaleY(0.7);-moz-transform:scaleY(0.7);-ms-transform:scaleY(0.7);-o-transform:scaleY(0.7);transform:scaleY(0.7);}
.appstore .pencil:after{position:absolute;content:'';width:6px;height:7px;top:0;right:-7px;background:#fff;border-radius:0 1px 1px 0;box-shadow:0 0 0 1px rgba(0,0,0,0.3);}
.weather{box-shadow:0 0 0 1px rgba(31,118,237,0.3) inset;background:-webkit-linear-gradient(top,#1f76ed 0%,#70edfe 100%);background:-moz-linear-gradient(top,#1f76ed 0%,#70edfe 100%);background:-ms-linear-gradient(top,#1f76ed 0%,#70edfe 100%);background:-o-linear-gradient(top,#1f76ed 0%,#70edfe 100%);background:linear-gradient(top,#1f76ed 0%,#70edfe 100%);}
.weather:before{position:absolute;content:'';width:38px;height:38px;top:20px;left:14px;z-index:1;border-radius:19px;box-shadow:0 0 0 1px rgba(253,239,84,0.5) inset;background:-webkit-linear-gradient(top,#ffc700 0%,#fdef54 100%);background:-moz-linear-gradient(top,#ffc700 0%,#fdef54 100%);background:-ms-linear-gradient(top,#ffc700 0%,#fdef54 100%);background:-o-linear-gradient(top,#ffc700 0%,#fdef54 100%);background:linear-gradient(top,#ffc700 0%,#fdef54 100%);}
.weather .cloud{position:absolute;width:36px;height:36px;top:32px;left:32px;z-index:2;border-radius:18px;background:rgba(255,255,255,0.8);}
.weather .cloud:before{position:absolute;content:'';width:22px;height:22px;top:14px;left:-5px;z-index:1;border-radius:11px;background:rgba(255,255,255,0.8);}
.weather .cloud:after{position:absolute;content:'';width:30px;height:30px;top:8px;right:-9px;z-index:2;border-radius:15px;background:rgba(255,255,255,0.8);}
.clock{background:#000;}
.clock:before{position:absolute;content:'';z-index:10;width:4px;height:4px;top:50%;left:50%;margin:-2px 0 0 -2px;border-radius:2px;background:#ce322b;}
.clock:after{position:absolute;content:'';width:2px;height:24px;top:50%;left:50%;z-index:5;margin:0 0 0 -1px;background:rgba(206,50,43,0.4);}
.clock .numbers{position:absolute;width:86px;height:86px;top:50%;left:50%;margin:-43px 0 0 -43px;border-radius:43px;background:#fff;}
.clock .numbers:before{position:absolute;content:'';width:16px;height:1px;top:50%;left:50%;margin:-4px 0 0 -15px;background:#000;-webkit-transform:rotateZ(23deg);-moz-transform:rotateZ(23deg);-ms-transform:rotateZ(23deg);-o-transform:rotateZ(23deg);transform:rotateZ(23deg);}
.clock .numbers:after{position:absolute;content:'';width:28px;height:1px;top:50%;left:50%;margin:6px 0 0 -27px;background:#000;-webkit-transform:rotateZ(-24deg);-moz-transform:rotateZ(-24deg);-ms-transform:rotateZ(-24deg);-o-transform:rotateZ(-24deg);transform:rotateZ(-24deg);}
.clock .numbers ol{position:absolute;width:100%;height:100%;top:0;left:0;margin:0;padding:0;list-style:none;counter-reset:clock-counter;}
.clock .numbers ol li{position:absolute;width:12px;height:12px;top:0;left:0;}
.clock .numbers ol li:before{position:absolute;content:counter(clock-counter);counter-increment:clock-counter;width:100%;height:100%;font-family:"Helvetica Neue",Helvetica,Arial;font-size:9px;font-weight:normal;text-align:center;line-height:10px;color:#1c1c1c;}
.clock .numbers ol li:nth-child(1){top:10px;left:53px;}
.clock .numbers ol li:nth-child(2){top:22px;left:65px;}
.clock .numbers ol li:nth-child(3){top:37px;left:72px;}
.clock .numbers ol li:nth-child(4){top:52px;left:65px;}
.clock .numbers ol li:nth-child(5){top:65px;left:53px;}
.clock .numbers ol li:nth-child(6){top:72px;left:37px;}
.clock .numbers ol li:nth-child(7){top:65px;left:22px;}
.clock .numbers ol li:nth-child(8){top:52px;left:10px;}
.clock .numbers ol li:nth-child(9){top:37px;left:2px;}
.clock .numbers ol li:nth-child(10){top:22px;left:7px;}
.clock .numbers ol li:nth-child(11){top:10px;left:20px;}
.clock .numbers ol li:nth-child(12){top:6px;left:37px;}
.newsstand{border:1px #cfcfcf solid;overflow:hidden;background:-webkit-linear-gradient(top,white 0%,#dbdbdb 81%,white 82%);background:-moz-linear-gradient(top,white 0%,#dbdbdb 81%,white 82%);background:-ms-linear-gradient(top,white 0%,#dbdbdb 81%,white 82%);background:-o-linear-gradient(top,white 0%,#dbdbdb 81%,white 82%);background:linear-gradient(top,white 0%,#dbdbdb 81%,white 82%);}
.newsstand .news{position:absolute;width:47px;height:52px;top:13px;left:12px;z-index:1;background:#d0d2d1;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;}
.newsstand .news span{position:absolute;width:100%;height:10px;top:2px;left:0;font-family:"Helvetica Neue",Helvetica,Arial;font-size:10px;font-weight:bold;text-align:center;line-height:10px;letter-spacing:-1px;text-align:center;text-shadow:0 0 1px white;color:#1c1c1c;}
.newsstand .news:before{position:absolute;content:'';width:14px;height:4px;top:14px;left:4px;background:#c0c1c3;}
.newsstand .news:after{position:absolute;content:'';width:9px;height:2px;top:19px;left:4px;background:#c0c1c3;}
.newsstand .art{position:absolute;width:34px;height:45px;top:35px;left:6px;z-index:2;background:#fecb00;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;}
.newsstand .art span{position:absolute;width:100%;height:10px;top:3px;left:0;font-family:"Helvetica Neue",Helvetica,Arial;font-size:10px;font-weight:bold;text-align:center;line-height:10px;letter-spacing:-1px;text-align:center;text-transform:uppercase;text-shadow:0 0 1px #ffe708;color:#1a1a1a;}
.newsstand .art span:before{position:absolute;content:'';top:12px;left:16px;border-color:transparent transparent white transparent;border-style:solid;border-width:10px;}
.newsstand .art:before{position:absolute;content:'';width:10px;height:10px;top:18px;left:10px;border-radius:6px;background:#01acea;}
.newsstand .art:after{position:absolute;content:'';width:10px;height:10px;top:30px;left:3px;background:#ff3b2f;}
.newsstand .travel{position:absolute;width:38px;height:54px;top:26px;left:30px;z-index:3;overflow:hidden;background:#27aae0;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;}
.newsstand .travel .label{position:absolute;width:100%;height:10px;top:3px;left:0;font-family:"Helvetica Neue",Helvetica,Arial;font-size:10px;font-weight:bold;text-align:center;line-height:10px;letter-spacing:-1px;text-align:center;text-transform:uppercase;text-shadow:0 0 1px #22bae5;color:#303493;}
.newsstand .travel .label:before{position:absolute;content:'';width:40px;height:40px;top:29px;left:-1px;background:#7dcceb;box-shadow:0 0 0 1px rgba(0,0,0,0.1);-webkit-transform:rotateZ(45deg);-moz-transform:rotateZ(45deg);-ms-transform:rotateZ(45deg);-o-transform:rotateZ(45deg);transform:rotateZ(45deg);}
.newsstand .travel .picto{position:absolute;width:16px;height:4px;top:50%;left:50%;margin:-2px 0 0 -8px;background:#fff;border-radius:0 3px 3px 0;-webkit-transform:rotateZ(-90deg);-moz-transform:rotateZ(-90deg);-ms-transform:rotateZ(-90deg);-o-transform:rotateZ(-90deg);transform:rotateZ(-90deg);}
.newsstand .travel .picto:before{position:absolute;content:'';width:0;height:0;top:-3px;left:0;border-color:transparent transparent transparent white;border-width:5px;border-style:solid;}
.newsstand .travel .picto:after{position:absolute;content:'';width:8px;height:8px;top:-3px;left:0;border-right:2px white solid;border-bottom:2px white solid;-webkit-transform:rotateZ(-45deg);-moz-transform:rotateZ(-45deg);-ms-transform:rotateZ(-45deg);-o-transform:rotateZ(-45deg);transform:rotateZ(-45deg);}
.newsstand .sports{position:absolute;width:32px;height:40px;top:40px;left:60px;z-index:4;background:#38b349;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;}
.newsstand .sports .label{position:absolute;width:100%;height:10px;top:3px;left:0;font-family:"Helvetica Neue",Helvetica,Arial;font-size:8px;font-weight:bold;text-align:center;line-height:10px;letter-spacing:-1px;text-align:center;text-transform:uppercase;text-shadow:0 0 1px #2fac48;color:#fff;}
.newsstand .sports .label:before{position:absolute;content:'';width:12px;height:12px;top:12px;left:11px;background:#ebe11b;border-radius:14px;box-shadow:0 0 0 1px rgba(0,0,0,0.1);}
.music{overflow:hidden;box-shadow:0 0 0 1px rgba(255,76,40,0.5) inset;background:-webkit-linear-gradient(top,#ff2666 0%,#ff5b39 100%);background:-moz-linear-gradient(top,#ff2666 0%,#ff5b39 100%);background:-ms-linear-gradient(top,#ff2666 0%,#ff5b39 100%);background:-o-linear-gradient(top,#ff2666 0%,#ff5b39 100%);background:linear-gradient(top,#ff2666 0%,#ff5b39 100%);}
.music:before{position:absolute;content:'\266B';width:100%;height:100px;font-family:"Helvetica Neue",Helvetica,Arial;font-size:72px;font-weight:bold;text-align:center;line-height:100px;text-align:center;text-shadow:0 0 1px #fb2e22;color:#fff;-webkit-transform:scaleX(1.2);-moz-transform:scaleX(1.2);-ms-transform:scaleX(1.2);-o-transform:scaleX(1.2);transform:scaleX(1.2);}
.videos{overflow:hidden;box-shadow:0 0 0 1px rgba(72,195,248,0.5) inset;background:-webkit-linear-gradient(top,#50ebc2 0%,#50ebc2 33%,#59c7fd 100%);background:-moz-linear-gradient(top,#50ebc2 0%,#50ebc2 33%,#59c7fd 100%);background:-ms-linear-gradient(top,#50ebc2 0%,#50ebc2 33%,#59c7fd 100%);background:-o-linear-gradient(top,#50ebc2 0%,#50ebc2 33%,#59c7fd 100%);background:linear-gradient(top,#50ebc2 0%,#50ebc2 33%,#59c7fd 100%);}
.videos:before{position:absolute;content:'';width:100%;height:16px;top:0;left:0;z-index:2;background-color:#fff;background-size:36px 32px;background-repeat:repeat-x;background-position:-18px -16px;box-shadow:0 1px 0 1px rgba(0,0,0,0.4);background-image:-webkit-linear-gradient(45deg,transparent 25%,black 26%,black 50%,transparent 51%);background-image:-moz-linear-gradient(45deg,transparent 25%,black 26%,black 50%,transparent 51%);background-image:-ms-linear-gradient(45deg,transparent 25%,black 26%,black 50%,transparent 51%);background-image:-o-linear-gradient(45deg,transparent 25%,black 26%,black 50%,transparent 51%);background-image:linear-gradient(45deg,transparent 25%,black 26%,black 50%,transparent 51%);}
.videos:after{position:absolute;content:'';width:100%;height:16px;top:16px;left:0;background-color:#fff;background-size:36px 32px;background-repeat:repeat-x;background-position:-18px -16px;box-shadow:0 1px 0 0 rgba(0,0,0,0.4);background-image:-webkit-linear-gradient(-45deg,transparent 25%,black 26%,black 50%,transparent 51%);background-image:-moz-linear-gradient(-45deg,transparent 25%,black 26%,black 50%,transparent 51%);background-image:-ms-linear-gradient(-45deg,transparent 25%,black 26%,black 50%,transparent 51%);background-image:-o-linear-gradient(-45deg,transparent 25%,black 26%,black 50%,transparent 51%);background-image:linear-gradient(-45deg,transparent 25%,black 26%,black 50%,transparent 51%);}
.messages{background:-webkit-linear-gradient(top,#86ff65 0%,#06d315 100%);background:-moz-linear-gradient(top,#86ff65 0%,#06d315 100%);background:-ms-linear-gradient(top,#86ff65 0%,#06d315 100%);background:-o-linear-gradient(top,#86ff65 0%,#06d315 100%);background:linear-gradient(top,#86ff65 0%,#06d315 100%);}
.messages:before{position:absolute;content:'';width:74px;height:74px;top:50%;left:50%;margin:-37px 0 0 -37px;background:#fff;border-radius:37px;box-shadow:0 0 0 1px rgba(0,0,0,0.1);-webkit-transform:scaleY(0.81);-moz-transform:scaleY(0.81);-ms-transform:scaleY(0.81);-o-transform:scaleY(0.81);transform:scaleY(0.81);}
.messages:after{position:absolute;content:'';bottom:8px;left:16px;border-width:8px;border-style:solid;border-color:white transparent transparent transparent;-webkit-transform:rotateZ(35deg) scaleX(0.5) scaleY(1.6);-moz-transform:rotateZ(35deg) scaleX(0.5) scaleY(1.6);-ms-transform:rotateZ(35deg) scaleX(0.5) scaleY(1.6);-o-transform:rotateZ(35deg) scaleX(0.5) scaleY(1.6);transform:rotateZ(35deg) scaleX(0.5) scaleY(1.6);}
.gamecenter{border:1px #cfcfcf solid;}
.gamecenter .bubble{position:absolute;border-radius:99px;}
.gamecenter .bubble.blue{width:62px;height:62px;top:12px;left:10px;z-index:3;box-shadow:0 0 1px 0 rgba(129,135,241,0.6) inset,0 -2px 4px 0 rgba(28,210,255,0.4) inset,0 2px 3px 0 rgba(160,155,243,0.6) inset;background:-webkit-linear-gradient(top,rgba(92,154,243,0.8) 0%,rgba(107,209,229,0.8) 100%);background:-moz-linear-gradient(top,rgba(92,154,243,0.8) 0%,rgba(107,209,229,0.8) 100%);background:-ms-linear-gradient(top,rgba(92,154,243,0.8) 0%,rgba(107,209,229,0.8) 100%);background:-o-linear-gradient(top,rgba(92,154,243,0.8) 0%,rgba(107,209,229,0.8) 100%);background:linear-gradient(top,rgba(92,154,243,0.8) 0%,rgba(107,209,229,0.8) 100%);}
.gamecenter .bubble.blue:before{position:absolute;content:'';width:38px;height:38px;top:-7px;left:50%;margin:0 0 0 -19px;border-radius:20px;box-shadow:0 0 1px 0 rgba(91,138,243,0.1);background:-webkit-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 80%);background:-moz-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 80%);background:-ms-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 80%);background:-o-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 80%);background:linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 80%);-webkit-transform:scaleY(0.65);-moz-transform:scaleY(0.65);-ms-transform:scaleY(0.65);-o-transform:scaleY(0.65);transform:scaleY(0.65);}
.gamecenter .bubble.yellow{width:48px;height:48px;top:8px;left:36px;z-index:1;box-shadow:0 0 1px 0 rgba(232,190,0,0.6) inset,0 -2px 4px 0 rgba(253,234,70,0.4) inset,0 2px 3px 0 rgba(160,155,243,0.6) inset;background:-webkit-linear-gradient(top,rgba(244,204,1,0.8) 0%,rgba(251,233,77,0.8) 100%);background:-moz-linear-gradient(top,rgba(244,204,1,0.8) 0%,rgba(251,233,77,0.8) 100%);background:-ms-linear-gradient(top,rgba(244,204,1,0.8) 0%,rgba(251,233,77,0.8) 100%);background:-o-linear-gradient(top,rgba(244,204,1,0.8) 0%,rgba(251,233,77,0.8) 100%);background:linear-gradient(top,rgba(244,204,1,0.8) 0%,rgba(251,233,77,0.8) 100%);}
.gamecenter .bubble.yellow:before{position:absolute;content:'';width:38px;height:38px;top:-7px;left:50%;margin:0 0 0 -19px;border-radius:20px;box-shadow:0 0 1px 0 rgba(91,138,243,0.1);background:-webkit-linear-gradient(top,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 80%);background:-moz-linear-gradient(top,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 80%);background:-ms-linear-gradient(top,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 80%);background:-o-linear-gradient(top,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 80%);background:linear-gradient(top,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 80%);-webkit-transform:scaleY(0.65);-moz-transform:scaleY(0.65);-ms-transform:scaleY(0.65);-o-transform:scaleY(0.65);transform:scaleY(0.65);}
.gamecenter .bubble.purple{width:30px;height:30px;top:60px;left:22px;z-index:2;box-shadow:0 0 1px 0 rgba(118,55,252,0.6) inset,0 -2px 3px 0 rgba(143,126,253,0.6) inset,0 2px 3px 0 rgba(160,155,243,0.6) inset;background:-webkit-linear-gradient(top,rgba(155,38,223,0.8) 0%,rgba(143,48,255,0.8) 100%);background:-moz-linear-gradient(top,rgba(155,38,223,0.8) 0%,rgba(143,48,255,0.8) 100%);background:-ms-linear-gradient(top,rgba(155,38,223,0.8) 0%,rgba(143,48,255,0.8) 100%);background:-o-linear-gradient(top,rgba(155,38,223,0.8) 0%,rgba(143,48,255,0.8) 100%);background:linear-gradient(top,rgba(155,38,223,0.8) 0%,rgba(143,48,255,0.8) 100%);}
.gamecenter .bubble.purple:before{position:absolute;content:'';width:38px;height:38px;top:-7px;left:50%;margin:0 0 0 -19px;border-radius:20px;box-shadow:0 0 1px 0 rgba(91,138,243,0.1);background:-webkit-linear-gradient(top,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 80%);background:-moz-linear-gradient(top,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 80%);background:-ms-linear-gradient(top,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 80%);background:-o-linear-gradient(top,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 80%);background:linear-gradient(top,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 80%);-webkit-transform:scaleY(0.65);-moz-transform:scaleY(0.65);-ms-transform:scaleY(0.65);-o-transform:scaleY(0.65);transform:scaleY(0.65);}
.gamecenter .bubble.pink{width:42px;height:42px;top:44px;left:44px;z-index:4;box-shadow:0 0 1px 0 rgba(254,11,132,0.6) inset,0 -2px 3px 0 rgba(143,126,253,0.6) inset,0 2px 3px 0 rgba(160,155,243,0.6) inset;background:-webkit-linear-gradient(top,rgba(255,29,75,0.8) 0%,rgba(255,29,170,0.8) 60%,rgba(254,153,42,0.8) 100%);background:-moz-linear-gradient(top,rgba(255,29,75,0.8) 0%,rgba(255,29,170,0.8) 60%,rgba(254,153,42,0.8) 100%);background:-ms-linear-gradient(top,rgba(255,29,75,0.8) 0%,rgba(255,29,170,0.8) 60%,rgba(254,153,42,0.8) 100%);background:-o-linear-gradient(top,rgba(255,29,75,0.8) 0%,rgba(255,29,170,0.8) 60%,rgba(254,153,42,0.8) 100%);background:linear-gradient(top,rgba(255,29,75,0.8) 0%,rgba(255,29,170,0.8) 60%,rgba(254,153,42,0.8) 100%);}
.gamecenter .bubble.pink:before{position:absolute;content:'';width:38px;height:38px;top:-7px;left:50%;margin:0 0 0 -19px;border-radius:20px;box-shadow:0 0 1px 0 rgba(255,46,94,0.1);background:-webkit-linear-gradient(top,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 80%);background:-moz-linear-gradient(top,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 80%);background:-ms-linear-gradient(top,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 80%);background:-o-linear-gradient(top,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 80%);background:linear-gradient(top,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 80%);-webkit-transform:scaleY(0.65);-moz-transform:scaleY(0.65);-ms-transform:scaleY(0.65);-o-transform:scaleY(0.65);transform:scaleY(0.65);}
.itunes{overflow:hidden;box-shadow:0 0 0 1px rgba(156,48,255,0.5) inset;background:-webkit-linear-gradient(top,#ff57c6 0%,#a542fd 100%);background:-moz-linear-gradient(top,#ff57c6 0%,#a542fd 100%);background:-ms-linear-gradient(top,#ff57c6 0%,#a542fd 100%);background:-o-linear-gradient(top,#ff57c6 0%,#a542fd 100%);background:linear-gradient(top,#ff57c6 0%,#a542fd 100%);}
.itunes:before{position:absolute;content:'\266B';width:100%;height:100px;font-family:"Helvetica Neue",Helvetica,Arial;font-size:56px;font-weight:bold;text-align:center;line-height:100px;text-align:center;text-shadow:0 0 1px #c238e7;color:#fff;-webkit-transform:scaleX(1.2);-moz-transform:scaleX(1.2);-ms-transform:scaleX(1.2);-o-transform:scaleX(1.2);transform:scaleX(1.2);}
.itunes:after{position:absolute;content:'';width:76px;height:76px;top:50%;left:50%;margin:-42px 0 0 -42px;border:4px white solid;border-radius:84px;box-shadow:0 0 1px 0 rgba(206,66,223,0.8);}
.calendar{border:1px #cfcfcf solid;}
.calendar:before{position:absolute;content:'Monday';width:100%;height:12px;top:14px;left:0;font-family:"Helvetica Neue",Helvetica,Arial;font-weight:normal;font-size:15px;text-align:center;line-height:12px;letter-spacing:-1px;text-shadow:0 0 1px #f2c1bf;color:#d41a26;}
.calendar:after{position:absolute;content:'';width:46px;height:46px;top:35px;left:38px;border:1px #0b0b0b solid;border-radius:22px;box-shadow:0 0 1px 0 rgba(11,11,11,0.7);-webkit-transform:scaleX(0.7);-moz-transform:scaleX(0.7);-ms-transform:scaleX(0.7);-o-transform:scaleX(0.7);transform:scaleX(0.7);}
.calendar .one{position:absolute;width:14px;height:46px;top:35px;left:22px;overflow:hidden;border-right:1px #0b0b0b solid;}
.calendar .one:before{position:absolute;content:'';width:108px;height:108px;top:-91px;left:-81px;border:1px #0b0b0b solid;border-radius:100px;box-shadow:0 0 1px 0 rgba(11,11,11,0.7);}
.calculator{background:#ff9600;box-shadow:0 0 0 1px rgba(251,138,0,0.5) inset;overflow:hidden;}
.calculator .sign{position:absolute;width:49px;height:49px;border:2px black solid;box-shadow:0 0 1px 1px rgba(255,160,2,0.5) inset;}
.calculator .sign.plus{top:-2px;left:-2px;}
.calculator .sign.plus:before,.calculator .sign.plus:after{position:absolute;content:'';width:20px;height:1px;top:50%;left:50%;margin:0 0 0 -10px;background:#fff;box-shadow:0 0 1px 1px #fb8900;}
.calculator .sign.plus:after{-webkit-transform:rotateZ(90deg);-moz-transform:rotateZ(90deg);-ms-transform:rotateZ(90deg);-o-transform:rotateZ(90deg);transform:rotateZ(90deg);}
.calculator .sign.minus{top:-2px;right:-2px;}
.calculator .sign.minus:before{position:absolute;content:'';width:20px;height:1px;top:50%;left:50%;margin:0 0 0 -10px;background:#fff;box-shadow:0 0 1px 1px #fb8900;}
.calculator .sign.mul{bottom:-2px;left:-2px;}
.calculator .sign.mul:before,.calculator .sign.mul:after{position:absolute;content:'';width:20px;height:1px;top:50%;left:50%;margin:0 0 0 -10px;background:#fff;box-shadow:0 0 1px 1px #fb8900;}
.calculator .sign.mul:before{-webkit-transform:rotateZ(-45deg);-moz-transform:rotateZ(-45deg);-ms-transform:rotateZ(-45deg);-o-transform:rotateZ(-45deg);transform:rotateZ(-45deg);}
.calculator .sign.mul:after{-webkit-transform:rotateZ(45deg);-moz-transform:rotateZ(45deg);-ms-transform:rotateZ(45deg);-o-transform:rotateZ(45deg);transform:rotateZ(45deg);}
.calculator .sign.eq{bottom:-2px;right:-2px;background:#c6c7cb;box-shadow:0 0 1px 1px rgba(255,255,255,0.5) inset;}
.calculator .sign.eq:before,.calculator .sign.eq:after{position:absolute;content:'';width:20px;height:1px;top:50%;left:50%;margin:0 0 0 -10px;background:#000;box-shadow:0 0 1px 1px rgba(255,255,255,0.4);}
.calculator .sign.eq:before{margin:-3px 0 0 -10px;}
.calculator .sign.eq:after{margin:3px 0 0 -10px;}
.camera{box-shadow:0 0 0 1px rgba(126,127,132,0.1) inset;background:-webkit-linear-gradient(top,#f7f7f7 0%,#898b91 100%);background:-moz-linear-gradient(top,#f7f7f7 0%,#898b91 100%);background:-ms-linear-gradient(top,#f7f7f7 0%,#898b91 100%);background:-o-linear-gradient(top,#f7f7f7 0%,#898b91 100%);background:linear-gradient(top,#f7f7f7 0%,#898b91 100%);}
.camera:before{position:absolute;content:'';width:4px;height:4px;top:35px;left:66px;z-index:10;border-radius:4px;background:#ffd700;box-shadow:0 0 1px 0 rgba(34,43,67,0.8);}
.camera:after{position:absolute;content:'';width:22px;height:7px;top:18px;left:39px;z-index:20;background:#454545;border-top:1px #191918 solid;}
.camera .upper{position:absolute;width:36px;height:10px;top:16px;left:32px;z-index:10;overflow:hidden;}
.camera .upper:before,.camera .upper:after{position:absolute;content:'';width:12px;height:12px;border:1px #191918 solid;background:#454545;box-shadow:0 0 1px 1px rgba(255,255,255,0.6);}
.camera .upper:before{top:5px;left:0;-webkit-transform:rotateZ(48deg);-moz-transform:rotateZ(48deg);-ms-transform:rotateZ(48deg);-o-transform:rotateZ(48deg);transform:rotateZ(48deg);}
.camera .upper:after{top:5px;right:0;-webkit-transform:rotateZ(-48deg);-moz-transform:rotateZ(-48deg);-ms-transform:rotateZ(-48deg);-o-transform:rotateZ(-48deg);transform:rotateZ(-48deg);}
.camera .case{position:absolute;width:70px;height:48px;top:50%;left:50%;z-index:2;margin:-25px 0 0 -36px;border:1px #191918 solid;border-radius:5px;box-shadow:0 0 1px 1px rgba(255,255,255,0.6);background:-webkit-linear-gradient(top,#454545 0%,#2b2b2a 100%);background:-moz-linear-gradient(top,#454545 0%,#2b2b2a 100%);background:-ms-linear-gradient(top,#454545 0%,#2b2b2a 100%);background:-o-linear-gradient(top,#454545 0%,#2b2b2a 100%);background:linear-gradient(top,#454545 0%,#2b2b2a 100%);}
.camera .case:before{position:absolute;content:'';width:26px;height:26px;top:50%;left:50%;margin:-16px 0 0 -16px;border:3px white solid;border-radius:16px;box-shadow:0 0 1px 1px rgba(0,0,0,0.7),0 0 1px 1px rgba(0,0,0,0.4) inset;}
.camera .case:after{position:absolute;content:'';width:70px;height:36px;top:4px;left:0;border-top:2px #8a8a8a solid;border-bottom:2px #8a8a8a solid;box-shadow:0 0 1px 1px rgba(0,0,0,0.5) inset;}
.camera .knob{position:absolute;width:6px;height:4px;top:21px;left:22px;z-index:1;background:#454545;border-radius:2px 2px 0 0;box-shadow:0 0 1px 1px rgba(255,255,255,0.6);}

附件:下载该文件资源,减少时间成本(增值服务)