$dark-grey-blue:#2A2E39;

// put some global class here ------
body,html{
  font-family: Lato,Helvetica Neue,"Hiragino Sans GB","Microsoft YaHei","微软雅黑","STHeiti","WenQuanYi Micro Hei",SimSun,sans-serif,Arial;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
h1,h2,h3,h4,h5,*{
  // really thin
  font-weight: 200;
}
::selection {
  // background: #44FFB4;
  background-color: map-get($color-green,'300');
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}


// =---------------------------------- nav and logo -------------
#gf-app{
  width:100%;
  height:100%;
}
#gf-main{
  width:100%;
  height: 100%;
  overflow:hidden;
  background-color:  $dark-grey-blue;//$darker_blue;
  color: #fff;

  transition: margin-left 0.3s ease-out;
  &>section, &>.gf-view{
    width: 100%;
    height:100%;
    overflow-y: auto;
    animation:fade-in 1s ease-out;
    animation-fill-mode: forwards;
    // clearfix
    &:before,
    &:after {
      content: " "; /* 1 */
      display: table; /* 2 */
    }
    &:after {
      clear: both;
    }

  }
}
#gf-logo{
  z-index: $index-logo;
  position: absolute;
  top: 2em;
  left: 2em;
  width: 200px;
  user-select:none;
}
#gf-nav-toggle{
  // position: static;
  position: absolute;
  z-index: $index-nav-toggle;
  top: 1em;
  right: 1.5em;
}
#gf-nav{
  position: absolute;
  right:-305px;
  top: 0;
  height: 100%;
  width: 300px;
  // background-color: map-get($color-teal,'500');
  background-color: #fff;
  // background-color:$blue_grey;
  // color: #fff;
  // box-shadow: -2px 0 6px rgba(0,0,0,0.1);
  z-index: $index-nav;

  transition: right 0.3s ease;
  #nav-svg-wrap{
    pointer-events:none;
  }
  #gf-nav-main-link{
    font-size: 2em;
    padding: 1em;
    li{
      margin-bottom: 0.2em;
    }
  }

}
#gf-nav-backdrop{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  visibility:hidden;
  background-color: rgba(0,0,0,0.3);
  z-index: 100;
  cursor: e-resize;
}
#gf-nav-bottom{
  text-align: center;
  position:absolute;
  bottom:0;
  z-index: 5;
  color: #999;
}
#gf-nav-social-link{
  width: 100%;
  // text-align: center;
  li{
    display: inline-block;
  }
}
// --------------- side nav open and close ----
#gf-app.show-nav{
    #gf-nav{
      right:0;
    }
    #gf-main{
       margin-left: -100px;
    }
    #gf-nav-backdrop{
      visibility:visible
    }
    #gf-nav-bottom{
      left:-60px;
    }
}
// ------------------ nav triangle svg
#nav-svg-wrap{
  position: absolute;
  top: 0;
  left:-198px;
  width:200px;
  height:100%;
  // background:red;
}

// --------------- route cover 
#gf-route-cover{
  width:100%;
  height: 100%;
  position:absolute;
  top: 0;
  left:0;
  z-index: 99;
  display: none;
}