.header
  width: 100%
  height: 88px
  padding: 1em
  background: #fff
  
   
.sub-header
  position: relative
  height: 55px
  width: 100%
  background: #f5f5f5
  border-bottom: 1px solid darken(#f5f5f5, 10%)
  transition: background 100ms ease-in
  
  .logo
    display: inline-block
    height: 55px
    width: 55px
    margin-left: -55px
    background: #DD4B39
    color: #fff
    text-align: center
    padding-top: .25em
    font-size: 2em
    transition: all 100ms ease-in
.on
  background: #fff
  transition: background 100ms ease-in
  
ul
  display: inline-block
  margin-left: 65px
  transition: all 100ms ease-in
        
li
  display: inline-block
  margin-right: 3em
  font-family: lato
  
    
html
  height: 100%
body
  height: 200%
  background: #e5e5e5

  
h1
  font-size: 2.5em
  font-family: lato
  font-weight: 900
  color: darken(#b5b5b5, 10)
  line-height: 1.25em
  margin-bottom: calc(1.25em/2)
    
h2
  font-weight: 900
  font-size: 2em
  font-family: lato
  color: darken(#b5b5b5, 10)
  line-height: 1.14em
  margin-top: 1.14em
  margin-bottom: calc(1.14em/2)
 
p
  font-family: lato
  line-height: 1.66em
  font-size: 1.15em
  color: darken(#b5b5b5, 60)
  
input
  width: 180px
  height: 28px
  border: 1px solid #c8c8c8
  outline: none
  
a 
  color: #DD4B39
  text-decoration: none
  
article
  padding: 2em 1em
*
  box-sizing: border-box
 
@import url(http://fonts.lug.ustc.edu.cn/css?family=Lato:400,900)