.nav{ display:none;}

@media (max-width:768px){

.nav {

  position: relative;

  display: block;

  font-family: "Helvetica", Arial, sans-serif;

  font-size: 14px;

  font-weight: 100;  z-index:9;

}



.nav ul {

  list-style: none;

  padding: 0;

  text-align: left;

  position: relative;

  margin-top: 0;

}

.nav ul li {

  float: left;

  *display: inline;

  zoom: 1;

  position: relative;

}

.nav ul li span.arrow {

  display: block;

  /* "display:none" to hide arrows for the non-mobile nav */

  position: absolute;

  top: 32px;

  color: #ffffff;

  width: 20px;

  left: 50%;

  margin-left: -10px;

  text-align: center;

  font-size: 7px;

  z-index: 5;

  cursor: pointer;

}

.nav ul li a {

  display: block;

  color: #ffffff;

  padding: 15px 20px;

  background: #464646;

  border-bottom: 1px solid #535353;

  text-decoration: none;

}

.nav ul li ul {

  list-style: none;

  padding: 0;

  display: none;

  position: absolute;

  left: 0;

  width: 160px;

}

.nav ul li ul li {

  width: 160px;

}

.nav ul li ul li a {

  background: #535353;

  border-bottom: 1px solid #606060;

  display: block;

  padding: 15px;

}

.nav ul li ul li a:hover {

  background: #606060;

}

.nav ul li:hover a {

  background: #535353;

}

.nav ul li:hover a:hover {

  background: #535353;

}

.nav ul li:hover ul {

  display: block;

}

.nav ul li:hover ul a {

  background: #535353;

}

.nav ul li:hover ul a:hover {

  background: #606060;

}

.nav .nav-bars {

  display: none;

  position: absolute;

  top:20px;

  right: 0;

  color: #464646;

  font-size: 24px;

  cursor: pointer;

}

.nav .nav-bars i {

  font-weight: bold;

}

.nav.mobile {

  width: 96%;

  padding-top:105px; margin:0 auto;

}

.nav.mobile ul {

  display: none;

}

.nav.mobile ul li {

  width: 100%;

  float: none;

}

.nav.mobile ul li span.arrow {

  display: block;

  top: 6px;

  font-size: 16px;

  margin: 0;

  right: 2px;

  left: auto;

  padding: 10px;

}

.nav.mobile ul li span.arrow:hover {

  color: #aaa;

}

.nav.mobile ul li span.arrow.arrow-rotate {

  -webkit-transform: rotate(180deg);

      -ms-transform: rotate(180deg);

          transform: rotate(180deg);

}

.nav.mobile ul li a {

  padding: 15px;

}

.nav.mobile ul li ul {

  position: static;

  width: 100%;

}

.nav.mobile ul li ul li {

  width: 100%;

}

.nav.mobile ul li:hover a {

  background: #464646;

  border-bottom: 1px solid #606060;

}

.nav.mobile ul li:hover a:hover {

  background: #535353;

}

.nav.mobile ul li:hover ul {

  display: none;

}

.nav.mobile ul li:hover ul a {

  background: #535353;

}

.nav.mobile ul li:hover ul a:hover {

  background: #606060;

}

.nav.mobile .nav-bars {

  display: block;

}

}