@import url(http://fonts.lug.ustc.edu.cn/css?family=Roboto:400,700,400italic);
@import url(http://fonts.lug.ustc.edu.cn/css?family=Roboto+Slab:700);

* {
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
}

body {
  padding:0;
  margin:0;
  position:relative;
  background:#2c3e50;
  font-family: 'Roboto', sans-serif;
  color:rgba(0,0,0,0.6);
}

header, h1, h2 {
  font-family: 'Roboto Slab', sans-serif;
}

header {
  width:100%;
  height:100px;
  position:fixed;
  top:0;
  background:#2980b9;
  text-align:center;
  line-height:100px;
  font-size:20px;
}
section {
  padding:3em;
  width:90%;
  max-width:1040px;
  margin:0 auto;
}
section:nth-of-type(1) {
  padding-top:130px;
}
section:nth-child(even) {
  background:#e74c3c;
}
section:nth-child(odd) {
  background:#c0392b;
}
footer {
  padding:1em 3em;
  background:#34495e;
  width:90%;
  max-width:1040px;
  margin:0 auto;
  
}

header.header-show {
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
-webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
   -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
     -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
        transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
}
header.header-hide {
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
-webkit-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
   -moz-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
     -o-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
        transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190); /* easeInCubic */
}