@charset "UTF-8";
/* CSS Document */

/* a { color: #FFF; } */
.toggle, [id^=drop] { display: none; }

#logo { padding: 10px 0; float: left; width: 50%; display: block; }
#logo .imgDiv, #logo .imgDiv2 { float: left; padding: 0; width: 14%; display: block; }
#logo .textDiv, #logo .textDiv2 { float: left; padding: 0; width: 85%; text-align: left; display: block; }
#logo .imgDiv2 { width: 22%; }
#logo .textDiv2 { width: 77%; margin-top: 15px; }
#logo h1 { font-size: 1.3em; }
#logo a, #logo a:visited, #logo a:active, #logo a:hover { background-color: transparent; color: #ddd197; text-decoration: none; }
nav a, nav a:visited, nav a:active, nav a:hover { background-color: transparent; color: #ddd197; text-decoration: none; }

#main-toggle {
  cursor: pointer;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}
.nav-icon {
  background: #d2c690; /* colour of hamburger icon part 1 */
  display: block;
  height: 2px;
  position: relative;
  width: 18px;
}
.nav-icon:before,
.nav-icon:after {
  background: #d2c690; /* colour of hamburger icon part 2 */
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}
.nav-icon:before {
  top: 5px;
}
.nav-icon:after {
  top: -5px;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}
nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
nav ul li {
  margin: 0px;
  float: left;
  background-color: #412d11; /* Colour same as background e.g. Brown */
}
nav a {
  display: block;
  padding: 0 20px;
  color: #ddd197; /* Text Colour e.g. Gold */
  font-size: 16px;
  line-height: 60px;
  text-decoration: none;
}
nav ul li ul li:hover {
  background: #634f33; /* Colour 2 steps lighter than the background */
}
nav a:hover {
  background-color: #523e22; /* Colour 1 step lighter than the background */
}

nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
}
/* list items */
nav ul ul li {
  width: 250px;
    text-align: left;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 160px;
}
nav ul li:hover>ul {
  display: inherit;
}
li>a:after {
    /* content: ' *'; */
  content: '';
}

li>a:only-child:after {
  content: '';
}


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {
#logo { width: 79%; }
#logo .imgDiv { width: 25%; }
#logo .textDiv { width: 74%; }
#logo .imgDiv2 { width: 26%; }
#logo .textDiv2 { width: 73%; }


  nav { margin: 0; }
  nav a { font-size: 20px; text-align: right; padding: 0 25px 0 0; }
  nav ul { float:none; }
  .toggle+a,
  .menu {
    display: none;
  }

  .toggle {
    display: block;
    background-color: #412d11; /* Colour same as background e.g. Brown */
    padding: 0 20px;
      margin: 1px 0;
    color: #ddd197; /* Text Colour e.g. Gold */
    font-size: 20px;
    line-height: 60px;
    text-decoration: none;
    /* border: none; */
  }

  .toggle:hover { background-color: #523e22; } /* Colour 1 step lighter than the background */
    
/* Looks for all ID's starting with "drop" and desplays a blook */
  [id^=drop]:checked+ul {
    display: block;
  }

  nav ul li { text-align: right;
    display: block;
    width: 100%;
      border-top: 1px #523e22 solid;
      border-bottom: 1px #301c00 solid;
  }

  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
  }

  nav ul ul ul a {
    padding: 0 80px;
  }

  nav ul ul ul a {
    background-color: #745f44; /* Colour 2 steps lighter than the background */
  }

  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: #634f33; /* Colour 2 steps lighter than the background */
  }

  nav ul ul {
    float: none;
    position: static;
    color: #ddd197; /* Text Colour e.g. Gold */
  }

  nav ul ul li:hover>ul,
  nav ul li:hover>ul {
    display: none;
  }

  nav ul ul li {
    display: block;
    width: 100%;
  }

  nav ul ul ul li {
    position: static;

  }    
    
}