/* Hover Shadow */
@-webkit-keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@-webkit-keyframes  .topmenu .level1 > li > a {
  0% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }

  50% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }
}

@keyframes  .topmenu .level1 > li > a {
  0% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }

  50% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }
}

.topmenu .level1 > li > a {
  display: inline-block;
  border-radius:8px;
  color:#fff
}

.topmenu {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.85) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.85) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.topmenu ul {
  list-style: none;text-align: center; margin:0; padding:0; 
}
.topmenu .level1 > li {
  display: inline-block;
  position: relative;
}
.topmenu .level1 > li > a {
  text-decoration: none;
  line-height: 30px;
  font-weight: 400;
  font-size: 16px;
  outline: 0;
  display: block;
  padding: 0px 20px;
  border: 2px solid #FFF; 
  margin: 10px 5px; 
  box-shadow: 0px 1px 2px #333;  
  letter-spacing:1px;
  background-color:#FFF;
 }
 .topmenu .level1 > li > a:hover {
color:#FFF;}
.topmenu .level1 > li.active ul li a {background:none}
.topmenu .level1 > li:hover > a,
.topmenu .level1 > li > a:hover {
  text-decoration: none;
  display: inline-block;  
}
.topmenu .level1 > .current > a,
.topmenu .level1 > .selected > a {
  text-decoration: none;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
.topmenu li:hover > ul {
  display: block; 
}
.topmenu .level1 ul {
  display: none;
  margin-left: 5px;
  min-width: 150%;
  padding: 2px 0;
  position: absolute;
  z-index: 10;
  text-align:left;
  border:2px solid #FFF;
}
.topmenu .level2 ul {
  margin-left: 100%;
  min-width: 0;
  margin-top:-25px;
}
.topmenu ul ul li {

}
.topmenu .level2 ul li {
  position: relative;
}
.topmenu .level1 .level2 {line-height: 38px;} 

.topmenu .level2 a {
  text-decoration: none;
  font-weight: 400;
  line-height: 38px;
  color: #fff;
  font-size: 16px;
  text-shadow: none;
  padding: 0px 15px;
}
.topmenu .level2 a:hover {
  text-decoration: none;
}
.topmenu .level2 .subnodes > a:after {
  content: '\25BC';
  position: absolute;
  right: 5px;
}
.topmenu .level2 .current a {
  text-decoration: none;
}