html{font-family:Roboto,sans-serif;color:#fff}a{color:#fff;text-decoration:none}h1{font-size:64px;margin-bottom:15px}h4{font-size:24px}p{font-size:16px}#mask{z-index:0;height:100vh;width:100vw;position:absolute;overflow:hidden}#container{width:100vw;height:100vh;position:absolute;left:0;top:0;-webkit-transition-property:top,bottom;-webkit-transition-duration:.5s;-moz-property:top,bottom;-moz-duration:.5s;-ms-property:top,bottom;-ms-duration:.5s;-o-property:top,bottom;-o-duration:.5s;transition-property:top,bottom;transition-duration:.5s}section{height:100vh;width:100vw;position:relative}.content{width:1000px;margin:0 auto;text-align:center;padding-top:150px}nav ul{z-index:1;list-style:none;position:fixed;right:10px;top:50%}nav ul li{background:#fff;margin-bottom:10px;height:8px;width:8px}.code{margin-top:15px;background:#fff;border:1px dotted #000;padding:5px 0;color:#000;width:300px}.arrowdown{width:0;height:0;border-style:solid;border-width:100px 100px 0;border-color:#fff transparent transparent;margin:200px auto 0;cursor:pointer}.arrowup{width:0;height:0;border-style:solid;border-width:0 100px 100px;border-color:transparent transparent #fff;margin:200px auto 0;cursor:pointer}.turquoise-bg{background:#1abc9c}.carrot-bg{background:#e67e22}.blue-bg{background:#2980b9}