@media only screen and (min-width: 480px), only screen and (min-device-width: 480px) {
#nav
{
    /* container */
   z-index: 20;
}

#nav > a
{
    display: none;
}

#nav li
{
    position: relative;
    padding-left: 1.3em;
    padding-right: 1.3em;
    z-index: 20;
}

#nav a {
    text-decoration: none;
    color: white;
    font-family: franklin gothic medium, franklin gothic, helvetica, sans serif, arial;
    font-size: 10pt;
    width: 200px;
}

/* first level */
 
#nav > ul
{
    background-color: #3b3b41;
    height: 3em;
    padding: 0;
    list-style: none;
}

#nav > ul > li
{
    height: 3em;
    float: left;
    line-height: 3em;
}
 
    /* second level */
 
    #nav li ul
    {
        display: none;
        position: absolute;
        top: 100%;
        background-color: #e15a1f;
        padding: 0;
    	list-style: none;
    }
    
   #nav > ul > li > ul > li {
      width: 250px;
      line-height: 2em;
      border-top: 1px solid #cb4f19;
   }

   #nav > ul > li > ul > li:hover {
      line-height: 2em;
      color: #efefef;
      background-color: #cb4f19;
      border-top: 1px solid #cb4f19;
   }

   #nav li:hover ul
   {
         display: block;
   }

   #nav li:hover ul a
   {
         display: block;
   }

    #nav #homebutton {
       min-width: 10px;
       width: 70px;
    }

    #hamburgerbutton {
      display: none;
    }
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
 #nav {
   display:none;
   width: 100%;
   background-color: #e15a1f;
   padding: 10px;
   list-style: none;
   color: #FFFFFF;
   font-size: 16pt;
 }

 #nav li {
    list-style: none;
    color: #FFFFFF;
    float: none;
 }

 #nav ul li a {
    list-style: none;
    color: #FFFFFF;
    line-height: 3em;
 }

 .menusublink {
    display:none;
 }


 #socialbuttons {
   display:none;
 }

 #hamburgerbutton {
  display: block;
  float:right;
 }
}