@charset "utf-8";
/* CSS Document */
.hljs-comment{color:#898ea4}
.hljs-variable,.hljs-tag,.hljs-regexp,.hljs-name,.ruby .hljs-constant,.xml .hljs-tag .hljs-title,.xml .hljs-pi,.xml .hljs-doctype,.html .hljs-doctype,.css .hljs-id,.css .hljs-class,.css .hljs-pseudo{color:#00bfff}
.hljs-attribute{color:#87cefa}
.hljs-number,.hljs-preprocessor,.hljs-built_in,.hljs-literal,.hljs-params,.hljs-constant{color:#c76b29}
.ruby .hljs-class .hljs-title,.css .hljs-rule .hljs-attribute{color:#c08b30}
.hljs-string,.hljs-value,.hljs-inheritance,.hljs-header,.ruby .hljs-symbol,.xml .hljs-cdata{color:#ff8c00}
.hljs-title,.css .hljs-hexcolor{color:#22a2c9}
.hljs-function,.python .hljs-decorator,.python .hljs-title,.ruby .hljs-function .hljs-title,.ruby .hljs-title .hljs-keyword,.perl .hljs-sub,.javascript .hljs-title,.coffeescript .hljs-title{color:#3d8fd1}
.hljs-keyword,.javascript .hljs-function{color:#6679cc}
.hljs{display:block;overflow-x:auto;background:#202746;color:#979db4;padding:.5em;-webkit-text-size-adjust:none}
.coffeescript .javascript,.javascript .xml,.tex .hljs-formula,.xml .javascript,.xml .vbscript,.xml .css,.xml .hljs-cdata{opacity:.5}
body{font-family:"Microsoft YaHei","微软雅黑",Helvetica,Tahoma;margin:0;padding:0;overflow-x:hidden}
*,*:before,*:after{box-sizing:border-box}
a{text-decoration:none;}
.backgrounds{width:100%;height:100%;position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:-1}
.backgrounds .background{width:100%;height:100%;background-size:cover;position:absolute;left:0;top:0;background-attachment:fixed}
.overlay:after{content:'';position:absolute;left:0;right:0;bottom:0;top:0;background:#3f51b5;opacity:.8}
.hero{width:100%;height:100vh;position:relative;overflow:hidden;color:#fff;text-align:center}
.hero-center{width:100%;position:absolute;top:40%;left:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}
.hero__logo{font-size:60px;color:rgba(0,0,0,.5)}
.hero__text{font-weight:400;opacity:.8}
.hero_scroll{position:absolute;bottom:30px;width:200px;margin:auto;display:block;cursor:pointer;padding-bottom:40px;left:0;right:0;text-transform:uppercase; text-align:center;}
.hero_scroll .chevron{margin-top:20px;display:block;-webkit-animation:pulse 2s infinite;animation:pulse 2s infinite; color:#FFF; cursor:pointer;/*color:#ff4081;*/}
@-webkit-keyframes pulse{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
50%{-webkit-transform:translate(0,10px);transform:translate(0,10px)}
100%{-webkit-transform:translate(0,0);transform:translate(0,0)}
}
@keyframes pulse{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
50%{-webkit-transform:translate(0,10px);transform:translate(0,10px)}
100%{-webkit-transform:translate(0,0);transform:translate(0,0)}
}
.octocat{position:absolute;top:20px;right:20px;width:80px}
.octocat img{display:block;width:100%}
.chevron::before{border-style:solid;border-width:.25em .25em 0 0;content:'';display:inline-block;height:20px;position:relative;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);vertical-align:top;width:20px}
.chevron.right:before{left:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.chevron.bottom:before{top:0;-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg)}
.chevron.left:before{left:.25em;-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg)}
.section{width:100%;float:left}
.section-title{text-align:center;color:#fff;text-transform:uppercase;font-weight:400;padding:30px 0;border-top:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3);width:100%;clear:both}
.container{width:970px;margin:0 auto;max-width:90%;-webkit-transform:translateZ(1000px);transform:translateZ(1000px)}
.code{width:40%;clear:both;height:200px;background:#fff;border-radius:2px;margin:12vh 0;padding:10px}
.code pre,.code code{height:100%;margin:0}
.code code{padding:20px 0 0 20px}
.code--small code{padding-top:75px}
.code--left{float:left}
.code--right{float:right}
.code--wider{width:60%}
.code--wider code{padding-top:60px}
.section--more{color:#fff;background:#0e0f34;padding:20px 0 40px}
.section-group{border-bottom:1px solid rgba(255,255,255,.2);padding:30px 0}
.section-group h3{margin:0 0 20px;text-transform:uppercase}
.section-group h4{font-weight:400;color:rgba(255,255,255,.6)}
.section-group code{padding:20px;font-size:1.2em}
.section-group .btn{margin-right:20px}
.btn{padding:10px 20px;border:1px solid #ff4081;display:inline-block;position:relative;-webkit-transition:all .2s ease;transition:all .2s ease;overflow:hidden}
.btn:before{content:'';position:absolute;left:0;right:0;width:1px;top:0;bottom:0;margin:auto;background:#ff4081;-webkit-transition:-webkit-transform .2s ease;transition:transform .2s ease;z-index:0;opacity:0}
.btn span{position:relative;z-index:5}
.btn:hover{color:#fff}
.btn:hover:before{-webkit-transform:scaleX(200);-ms-transform:scaleX(200);transform:scaleX(200);opacity:1}