<!--


/* Naviagtion

*/

/* hide the checkbox and the label */
input#responsive-nav,
label.responsive-nav-label {
  display: none;
}


/* declarations for the not-responsive-menu */

nav {
  float: left;
  width: auto;
  /*background: #3a3a3a;*/
  background: transparent;
  /* font-family:      arial, sans-serif; */
  font-size: 1.2em;
  border: 0px solid blue;
}

nav ul {
  float: left;
  margin-top: 0px;
  padding: 0;
  border: 0px solid pink;
}

nav a {
  display: block;
  color: #fff;
  text-decoration: none;
}

nav ul li {
  position: relative;
  float: left;
  list-style: none;
  color: #fff;
  transition: 0.5s;
}

nav ul li a {
  padding: 20px;
}

nav ul > li.submenu > a:after {
  position: relative;
  float: right;
  content: '';
  margin-left: 10px;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}

nav ul ul li.submenu > a:after {
  margin-left: auto;
  margin-right: -10px;
  border-left: 5px solid #fff;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

nav ul li a:hover {
  background: transparent;
  /* background: #808080; */
  color: #eee;
}

nav ul ul {
  position: absolute;
  top: -9999px;
  left: -9999px;
  /* background: #333; */
  background: #15171a;;
  /*box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);*/
  z-index: 1;
}

nav ul ul li {
  float: none;
  width: 200px;
  border-bottom: 0px solid #555;
}

nav ul ul li a {
  padding: 10px 20px;
}

nav ul ul li:last-child {
  border-bottom: none;
}

nav ul li:hover > ul {
  top: 100%;
  left: 0;
}

nav ul ul li:hover > ul {
  top: 0;
  left: 200px;
}


#nav_main_box {
  position: relative; 
  z-index: 2;
}  


/* declarations for the responsive-menu */

@media (max-width: 440px) {
  
  nav {
    
    font-size: 0.8em;

  }

}


@media screen and (max-width: 25px) 
{

  label.responsive-nav-label {
    position: relative;
    display: block;
    margin-top: 54px;
    padding: 20px;
    background: #3a3a3a;
    color: white;
    cursor: pointer;
    font-family:      arial, sans-serif;
  }
    
  label.responsive-nav-label span {
    margin-right: 10px;  
  }

  nav {
    position: absolute;
    float: left;
    top: -9999px;
    padding: 10px;
    
  }
          
  input#responsive-nav[type=checkbox]:checked ~ nav {
    position: relative;
    top: 0;
  }

  nav a:after {
    display: none;
  }

  nav li {
    float: none !important;
    width: 100% !important;
    border-bottom: none !important; 
  }
      
  nav li a {
    margin-bottom: 10px !important;
    padding: 10px 20px !important; 
    background: #4a4a4a;
  }
    
  nav ul li:hover {
    background: none;
  }
      
  nav ul li a:hover {
    background: #4096ee;
  }  

  nav ul ul {
    position: relative !important;
    width: 100%;
    left: 0 !important;
    top: 0 !important;
    background: none !important;
    box-shadow: none;
  }  

  nav ul ul li {
    padding-left: 20px;
  }
}
  

nav_short {
  box-sizing: border-box;
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /*background: #90999d;
  background: black;*/
  border: 0px solid white;
  font-family: arial, sans-serif;
  padding: 1rem;
}

nav_short ul {
  margin: 0px;
  padding: 0px;
}
   
nav_short a {
  display: block;
  color: #6F6F6F;
  text-decoration: none;
}
  
  
nav_short ul li {
  position: relative;
  float: left;
  list-style: none;
  transition: all ease 0.5s;
}
   
xnav_short ul li:hover {
  /*background: #848e92;*/
  background: transparent; /* Background Main */
  color: white; 
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5); 
}

nav_short ul li a:hover {
  color: white;  
}
  
nav_short ul li a {
  padding: 10px;	
}
  
nav_short ul ul {
  position: absolute;
  top: -9999px;
  left: -9999px;
  /*background: #ededed;*/  
  background: black;  /* background Submenue */
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.6);
}
  
nav_short ul ul li {
  float: none;
  width: 200px;
  border-bottom: 0px solid #ccc;
}
  
nav_short ul ul li a {
  padding: 10px 20px;
}

nav_short ul li:hover > ul {
  top: 100%;
  left: 0;
}

nav_short ul ul li:hover > ul {
  top: 0;
  left: 200px;
}

nav_short ul li.submenu > a:after {
  position: relative;
  top: 10px;
  content: '';
  margin-left: 10px;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #c0c0c0;
  border-bottom: 5px solid transparent;
}

nav_short ul ul li.submenu a:after {
  margin-left: auto;
  margin-right: -10px;
  border-left: 5px solid #fff;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

nav_short ul ul li:last-child {
  border-bottom: none;
}  

-->