ul.topnav { overflow: hidden; margin: 0px 0 0 0; padding: 0; list-style-type: none; position:relative; z-index:9999 }
ul.topnav li { display:inline-block; }
ul.topnav li a { text-transform: uppercase;   color: #fff; text-decoration: none; }
ul.topnav li a:hover { color: #fff; }
ul.topnav li.icon { display: none; }


.nav { position:absolute; z-index:999999; top:0px; right:20px; z-index:99999 }
.nav li { display:inline-block; position:relative; }
.nav li a { color:#fff; text-decoration:none; font-weight:500; font-size:14px; letter-spacing:1px; text-transform:uppercase; position:relative; display:block; padding:25px 15px; }
.nav li a:hover { color:#ffb636}

.nav li a:before {
  content: "";
  position: absolute;
  width: 70%;
  height: 1px;
  bottom: 18px;
  left: 0;
  right: 0;
  margin: auto;
  background: #ffffff;
  visibility: hidden;
  border-radius: 7px;
  transform: scaleX(0);
  -moz-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  -o-transform: scaleX(0);
  transition: .25s linear;
  -moz-transition: .25s linear;
  -webkit-transition: .25s linear;
  -webkit-transition: .25s linear;
}

.nav li a:hover:before,
.nav li a:focus:before {
  visibility: visible;
  transform: scaleX(1);
  -moz-transform: scaleX(1);
  -webkit-transform: scaleX(1);
  -o-transform: scaleX(1);
}


 @media screen and (max-width:800px) {

ul.topnav li { display: none; }

ul.topnav li.icon { float: right; display: inline-block; }

}



 @media screen and (max-width:800px) {

ul.topnav.responsive { position: relative; }

ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; }

ul.topnav.responsive li { float: none; display: block; }

ul.topnav.responsive li a { display: block; text-align: left; }

}