html, body { margin: 0; padding: 0; font-size: 20px; height: 100%; background-color: #fff; width: 100%; color: #222222; overflow:hidden; }

    body.hidden { overflow: hidden; }

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
h1 { font-family: 'Microsoft YaHei',Arial, Verdana; font-weight: normal; font-size: 92px; color: #222222; }
header#top { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; overflow: hidden; }
    header#top #logo { float: left; margin: 16px 0 0 30px; font-weight: normal; font-size: 45px; color: white; text-transform: uppercase; text-shadow: 0 0 15px rgba(0,0,0,0.5); }
.pagewrap { height: 100%; }
.pageblock { width: 100%; }
.pagewrap .fb-like { position: fixed; left: 30px; top: 75px; z-index: 100; }
.pagewrap .githubbuttons { position: fixed; left: 220px; top: 75px; z-index: 100; }
.pagewrap .copy { font-size: 10px; bottom: 20px; left: 30px; z-index: 100; position: absolute; color: white; }
    .pagewrap .copy a, .pagewrap .copy a:hover { color: white; }
.pageblock#fullscreen { height: 100%; background: none; color: white; }
    .pageblock#fullscreen h1 { color: white; font-size: 72px; margin: 0; padding: 0;  font-weight: normal; }
    .pageblock#fullscreen .slider { width: 100%; height: 100%; overflow: hidden; position: relative; }
        .pageblock#fullscreen .slider .slide { width: 100%; height: 100%; top: 0; left: 0; float: left; position: absolute; }
            .pageblock#fullscreen .slider .slide .slidecontent { position: absolute; top: 40%; width: 100%; margin-top: -150px; text-align: center; }
                .pageblock#fullscreen .slider .slide .slidecontent h1 { text-shadow: 0 0 15px rgba(0,0,0,0.3); font-weight: bold; font-size: 60px; padding: 0; line-height: 115px; }
                .pageblock#fullscreen .slider .slide .slidecontent .headersur { font-size: 28px; text-shadow: 0 0 10px rgba(0,0,0,0.3); color: #fff; font-style: italic; display: block; }
                .pageblock#fullscreen .slider .slide .slidecontent .button { padding: 10px 25px; border: 3px solid white; text-transform: uppercase; background: transparent; background: rgba(0,0,0,.2); color: white; font-size: 15px; font-weight: bold; display: inline-block; cursor: pointer; letter-spacing: 1px; margin: 20px 0; line-height: 20px; }
                    .pageblock#fullscreen .slider .slide .slidecontent .button a, .pageblock#fullscreen .slider .slide .slidecontent .button a:hover { text-decoration: none !important; color: white; }
                    .pageblock#fullscreen .slider .slide .slidecontent .button:hover { background: rgba(0,0,0,.3); }
                .pageblock#fullscreen .slider .slide .slidecontent .text { width: 900px; margin: 0 auto; line-height: 28px; }
                    .pageblock#fullscreen .slider .slide .slidecontent .text a { color: white; text-decoration: underline; }
                        .pageblock#fullscreen .slider .slide .slidecontent .text a:hover { text-decoration: none; }
                    .pageblock#fullscreen .slider .slide .slidecontent .text xmp { font-size: 13px; text-align: left; border: 1px solid white; background: rgba(0,0,0,0.1); padding: 10px 15px; }
    .pageblock#fullscreen #slideposition { position: absolute; bottom: 50px; width:100%; text-align:center; }
        .pageblock#fullscreen #slideposition ul { list-style-type: none; margin: 0; padding: 0; display:inline-block; }
            .pageblock#fullscreen #slideposition ul li.indicator { display: inline-block; height: 10px; width: 10px; background: #222; margin: 0px 7px; padding: 0; -webkit-border-radius: 999px; -moz-border-radius: 999px; border-radius: 999px; overflow: hidden; cursor: pointer; }
                .pageblock#fullscreen #slideposition ul li.indicator.active { background: white; }

@media all and (max-width:768px) {
    .pageblock#fullscreen h1 { font-size: 1rem; }
    .pageblock#fullscreen .slider .slide .slidecontent h1 { font-size:0.5rem;}
    .pageblock#fullscreen .slider .slide .slidecontent .headersur { font-size: 0.3rem; }
}