.header{width:220px;height:100%;background:url(../images/navbar-bg.png);position: fixed;text-align: center; top:0; left:0;z-index:10;min-height:768px;}
.header .logo{margin-top:40px;margin-bottom:30px;text-align: center;}
.header .logo img{width:115px;}
.header .logo .white{display:none;}
.header a{color:#a08c5b;}

.header .phase{color:#a08c5b;font-size:16px;font-family:'Times New Roman','Open Sans',"Microsoft JhengHei"; margin-bottom:20px;}

.header .hr-white{width:70%;margin:10px auto;}
.header .hr-white .hr-middle:before,.header  .hr-white .hr-middle:after {width: 23%;}

.header .navbar {text-align: center;padding: 0 25px;margin-top: 20px;}
.header .navbar a{display:block;font-size:15px;margin:0px 0;border-top:1px solid transparent;border-bottom:1px solid transparent;padding:5px 0px;position: relative;}
.header .navbar a.selected{color:#603913;}
.header .navbar a.selected:before,.header .navbar a.selected:after
{
  content:'';
  width:100%;
  height:1px;
  position: absolute;
  top:0;
  left:0;
  background: #aa937c;
  background: -webkit-linear-gradient(left,rgba(170,147,124,0) 10%,rgba(170,147,124,1) 50%,rgba(170,147,124,0) 90%); /*Safari 5.1-6*/
  background: -o-linear-gradient(right,rgba(170,147,124,0) 10%,rgba(170,147,124,1) 50%,rgba(170,147,124,0) 90%); /*Opera 11.1-12*/
  background: -moz-linear-gradient(right,rgba(170,147,124,0) 10%,rgba(170,147,124,1) 50%,rgba(170,147,124,0) 90%); /*Fx 3.6-15*/
  background: linear-gradient(to right, rgba(170,147,124,0) 10%,rgba(170,147,124,1) 50%,rgba(170,147,124,0) 90%); /*Standard*/
}
.header .navbar a.selected:after{
  top:auto;
  bottom:0;
}

.header .other-phase{display:inline-block;margin:5px auto;margin-bottom: 20px;font-size: 11px;color:#969084;}
.header .lang {font-size:0;position: absolute;bottom: 115px;width: 100%;}
.header .lang a{font-size:14px;padding:0 10px;border-right:1px #a08c5b solid;}
.header .lang a.selected{cursor: default; text-decoration: underline;}
.header .lang a:last-child{border-right:0;}

.header .copyright {position: absolute;bottom:20px;width: 100%;font-size:12px; line-height: 1.4em;}
.header .copyright .spec{margin:0 2px;font-size:14px;color:#a08c5b;}
.header .copyright .last-updated{margin-top:20px;display:block;color: #A08C5B;}

.header:after{content:'';display:block;clear:both;}

.header .btn-navbar{padding:15px;background:#333;display: inline-block;display:none;}

.header.smallMon {position: absolute;}
.header.smallMon .lang{position: relative;bottom:auto;margin-top:60px;}
.header.smallMon .copyright {position: relative; bottom: auto; margin-top:30px;}

.btn-menu-style {display: block;width: 20px;height: 17px;position: relative; }
.btn-menu-style > span {display: block;width: 100%;height: 100%; background: #FFF; }
.btn-menu-style:before, .btn-menu-style:after {display: block;width: 100%;height: 7px;background: #333; }
.btn-menu-style:before, .btn-menu-style:after {content: "";transition: transform 0.2s ease 0s, top 0.2s ease 0s;-moz-transition: -moz-transform 0.2s ease 0s, top 0.2s ease 0s;
  -webkit-transition: -webkit-transform 0.2s ease 0s, top 0.2s ease 0s;position: absolute;top: 1px; }
.btn-menu-style:after {top: 9px; }
.opened .btn-menu-style span {background: #333; }
.opened .btn-menu-style:before, .opened .btn-menu-style:after {background: #FFF;height:1px; }
.opened .btn-menu-style:after {transform: rotateZ(-45deg);-moz-transform: rotateZ(-45deg);-webkit-transform: rotateZ(-45deg);
  position: absolute;top: 9px; }
.opened .btn-menu-style:before {transform: rotateZ(45deg);-moz-transform: rotateZ(45deg);-webkit-transform: rotateZ(45deg);
  position: absolute;top: 9px; }

@media screen and (max-width: 1024px) {
  .header{width:160px;}
  .header .logo {margin-top: 25px;margin-bottom: 20px;}
  .header .logo img{width:100px;}
  .header .navbar {margin-top:20px;padding: 0 15px;}
  .header .navbar a{font-size:13px;margin:5px 0;padding:2.5px 0px;}
  .header .other-phase {margin: 5px auto 20px;}
  .header .hr-white .hr-middle:before,.header  .hr-white .hr-middle:after {width: 15%;}
}
@media screen and (max-width: 980px) {
}
@media screen and (max-width: 640px) {
  .header{width:100%;height:100%;background:none;position: absolute;z-index:10;min-height:0;}
  .header.opened{background:url(../images/navbar-bg.png);height: 100%;}
  .header .logo {margin-bottom: 0px;}
  .header .phase{margin-top:20px;}
  .header .logo .org{display:none;}
  .header .logo .white{display:inline-block;}
  .header.opened .logo .org{display:inline-block;}
  .header.opened .logo .white{display:none;}
  .header .lang {position: relative;bottom:auto;margin-bottom: 30px;margin-top: 30px;}
  .header .copyright {position: relative;bottom:auto;margin-bottom: 30px;margin-top: 30px;}
  .header .nav-holder-m{display:none;}
  .header .btn-navbar{display:inline-block;position: absolute;left: 0;top:0;}
}

@media screen and (max-width: 480px) {
  /*.btn-menu-style {width: 20px;height: 20px;}
  .btn-menu-style:before, .btn-menu-style:after {
      height: 4px; }
  .opened .btn-menu-style:after {
    transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -webkit-transform: rotateZ(-45deg);
    position: absolute;
    top: 7px; }

  .opened .btn-menu-style:before {
    transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    position: absolute;
    top: 7px; } */
}



@media screen and (orientation:landscape) and (max-width: 480px),screen and (orientation:landscape) and (max-width: 640px){
  /*.btn-menu-style {width: 16px;height: 15px;}
  .btn-menu-style:before, .btn-menu-style:after {
      height: 3px; }
  .opened .btn-menu-style:after {
    transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -webkit-transform: rotateZ(-45deg);
    position: absolute;
    top: 7px; }

  .opened .btn-menu-style:before {
    transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    position: absolute;
    top: 7px; } */
}