@import url(http://fonts.googleapis.com/css?family=Raleway);
 /* NAV STYLE */
nav#navigation {position: relative;top: 0;left: 0;width: 50%;max-width: 1366px;height: auto;margin: 0 ;padding:0;font-weight: 500;background-color:transparent;box-shadow: none;}

/* RESPONSIVE NAV STYLE */
  /* Remove margins and padding from the list, and add a black background color */
ul.topnav {position: relative;left: 0;list-style-type: none;margin: 0 auto;padding: 0;width: 90%;max-width: 1366px;overflow: hidden;background-color:#663399;}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {display: inline-block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;transition: 0.3s;font-size: 90%;}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #663399;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

@media screen and (max-width:800px) {
  nav#navigation{position: relative;top: 5%;left: 0;width: 60%;}
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {float: right;display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:800px) {
  ul.topnav.responsive {position: relative;left: 5%;}
  ul.topnav.responsive li.icon {position: absolute;right: 0;top: 0;}
  ul.topnav.responsive li {float: none;display: inline;}
  ul.topnav.responsive li a {display: block;text-align: left;}
}
/* END NAV */