/*nav {
  margin: 0;
  padding: 0;
}

#logo {
  display: block;
  padding: 0 30px;
  float: left;
  font-size: 20px;
  line-height: 40px;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {  
   width:100%;
   list-style:none;
   white-space: nowrap;
   display: table;
   margin: 0;
   overflow:visible; 
   position:relative;
   table-layout:fixed;
}

nav ul li {
    padding: 5px 0px;
	text-align: center;
	width: auto;
	font: Roboto;
	font-size: 18px;
	color: #444;
	font-weight: bold;
	display: table-cell;
}

nav a {
  display: block;
  padding: 0 20px;
   font: Roboto;
  color: #444;
  font-size: 20px;
   font-weight: bold;
  line-height: 40px;
  text-decoration: none;
  
}

nav ul li ul li:hover { background: #708C84; }

nav a:hover { 
  background: #708C84;
  color: #FFFFFF; 
}

nav ul li:hover > ul { 
  display: inherit; 
  }

nav ul ul li {
  background: #555; 
  width: 250px;
  color: #fff;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -40px;
  left: 170px;
}

nav ul li ul li a{ 
  font-size: 16px;
  background: #555; 
  display: block; 
  color: #fff;
}

li > a:after { content: ' +'; }
.toggle, [id^=drop] {
 display: none;
}
li > a:only-child:after { content: ''; }
*/

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.menu-toggle {
   display: none;
   cursor: pointer;
}

 .toggle, [id^=drop] {
 display: none;
}

nav {
  margin: 0;
  padding: 0;
  
}

#logo {
  display: block;
  padding: 0 30px;
  float: left;
  font-size: 20px;
  line-height: 40px;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
   width:100%;
   list-style:none;
   white-space: nowrap;
   display: table;
   margin: 0;
   overflow:visible; 
   position:relative;
   table-layout:fixed;
}

nav ul li {
    text-overflow: ellipsis;
    padding: 5px 0px;
	text-align: center;
	width: auto;
	font: Roboto;
	font-size: 18px;
	white-space: nowrap;
	overflow: hidden;
	color: #444;
	font-weight: bold;
	display: table-cell;
}


nav a {
  text-overflow: ellipsis;
  display: block;
  padding: 0 20px;
	white-space: nowrap;
	overflow: hidden;
   font: Roboto;
  color: #444;
  font-size: 18px;
   font-weight: bold;
  line-height: 40px;
  text-decoration: none;
 
   -webkit-transition: none;
   -moz-transition: none;
   transition: none;
   -ms-transition: none;
   -o-transition: color 0 ease-in-out;
 
}

nav ul li ul li:hover { background: #708C84; }

nav a:hover { 
-webkit-animation: fadein .3s; /* Safari and Chrome */
    -moz-animation: fadein .3s; /* Firefox */
    -ms-animation: fadein .3s; /* Internet Explorer */
    -o-animation: fadein .3s; /* Opera */
    animation: fadein .3s;
  background: #708C84;
  color: #FFFFFF; 
}

nav ul ul li a:hover { 
-webkit-animation: none .5s; /* Safari and Chrome */
    -moz-animation: none .5s; /* Firefox */
    -ms-animation: none .5s; /* Internet Explorer */
    -o-animation: none .5s; /* Opera */
    animation: none .5s;
  background: #708C84;
  color: #FFFFFF; 
}

nav ul ul {
  z-index:100;
  width: 300px;
  background: #555;
  display: none;
  position: absolute;
  top: 40px;
}

nav ul ul a {
    
	color: #FFF;
	text-align:left;
	font-size: 16px;
}

nav ul li:hover > ul { 
    -webkit-animation: fadein .7s; /* Safari and Chrome */
    -moz-animation: fadein .7s; /* Firefox */
    -ms-animation: fadein .7s; /* Internet Explorer */
    -o-animation: fadein .7s; /* Opera */
    animation: fadein .7s;
	display: inherit; }

nav ul ul li {
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -40px;
  left: 250px;
}

li > a:after {
font-family: 'FontAwesome'; content: "\f0d7"; padding-left:8px; }

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

@media all and (max-width : 800px) {
.line_header {
	/** keep this in check with media devices....**/
  height: 4px;
  margin: 0px 0px 0px;
  padding: 0px;
  width: 100%;
}

#logo {
  display: block;
  padding: 0;
  width: 100%;
  text-align: center;
  float: none;
}

nav { margin: 0; }

nav a {
  text-overflow: ellipsis;
  display: block;
  padding: 0 20px;
   font: Roboto;
  color: #000;
  font-size: 18px;
   font-weight: bold;
  line-height: 40px;
  text-decoration: none;
  
}

.toggle + a,
 .menu_top { display: none; }

.toggle {
  display: block;
  /*background-color: #254441;*/
  padding: 0 20px;
  color: #000;
  font-weight:bold;
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  border: none;
}

.toggle:hover { background-color: #708C84; color:#FFF;}

[id^=drop]:checked + ul { display: block; }
nav ul {
	margin-bottom: 10px;
    width: auto;
	border: 2px solid #254441;
}

nav ul li {

  text-align: left;
  display: block;
  width: 100%;
}

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

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

nav a:hover,
 nav ul ul ul a { 
 
-webkit-animation: fadein 0s; /* Safari and Chrome */
    -moz-animation: fadein 0s; /* Firefox */
    -ms-animation: fadein 0s; /* Internet Explorer */
    -o-animation: fadein 0s; /* Opera */
	background-color: #708C84; 
	
}

nav ul li ul li:hover { background: #708C84; }
nav ul li:hover > a { 
  
	background-color: #708C84;
} 

nav ul li ul li .toggle,
 nav ul ul a { background-color: #254441; }

nav ul ul { 
  margin-bottom: 0px;
  float: none;
  width: 100%;
  position: static;
  color: #ffffff;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { 

-webkit-animation: fadein 0s; /* Safari and Chrome */
    -moz-animation: fadein 0s; /* Firefox */
    -ms-animation: fadein 0s; /* Internet Explorer */
    -o-animation: fadein 0s; /* Opera */
  display: none; }

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

nav ul ul ul li { position: static;

}
}

.menu-button:before {
      right: 36px;
      position: absolute;
  display: block;
  color: #e0e0e0;
  content: "\f0c9";
  font-family: fontawesome;
  font-size: 22px;
  position: absolute;
  margin-top: 8px;
  top: -10px;
}

@media all and (max-width : 330px) {

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

}