/******************************************************/
/******************** Desain Menu *********************/
/******************************************************/
body {
  background-color: #ece8e5;
}
nav {
  height: 40px;
 width: 100%;
  background: #3498db;
  font-size: 11pt;
  font-family: 'PT Sans', Arial, sans-serif;
  font-weight: bold;
  position: relative;
}
nav ul {
  padding: 0;
 margin: 0 auto;
 width: 500px;
 height: 40px;
}
nav li {
  display: inline;
  float: left;
}
nav a {
  color: #ffffff;
 display: inline-block;
  width: 100px;
 text-align: center;
 text-decoration: none;
  line-height: 40px;
}
nav a:hover, nav a:active {
  background-color: #ecf0f1;
  color: #333;
}
nav a#pull {
 display: none;
}


@media screen and (max-width: 600px) {
  nav {
     height: auto;
     border-bottom: 0;
     background: #3498db;
    }
   nav ul {
      width: 100%;
      display: none;
      height: auto;
   }
   nav li {
      width: 100%;
      float: none;
      display: block;
     background: #ffffff;
    }
   nav li a {
    border-bottom: 1px solid #f0f0f0;
   border-right: 1px solid #f0f0f0;
  }
   nav a {
     text-align: left;
     width: 100%;
      text-indent: 25px;
      color: #333333;
   }
   nav a#pull {
    display: block;
   background-color: #3498db;
    width: 100%;
    position: relative;
   color: #ffffff;
 }
 nav a#pull:after {
    content:"";
   background: url('nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
   display: inline-block;
    position: absolute;
   right: 15px;
    top: 10px;
  }
}