﻿
/* Navigation */
/* *************************************************************************** */
/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
	position: fixed;
	top: 0;
	width: 100%;
	color:#FFFFFF!important;
	transition: .33s all ease-out;
	border-bottom:0px #B8B8B8 solid;
	background-color:#000000;
	opacity:.9;
	z-index:9999;	
}
.useite .sticky {
	position: fixed;
	top: 0;
	width: 100%;
	color:#FFFFFF!important;
	transition: .33s all ease-out;
	border-bottom:0px #B8B8B8 solid;
	background-color:#000000;
	opacity:.9;
	z-index:9999;
}
.loguseite .sticky {
	position: fixed;
	top: 0;
	width: 100%;
	height:60px;
	color:#FFFFFF!important;
	transition: .33s all ease-out;
	border-bottom:0px #B8B8B8 solid;
	background-color:#000000;
	opacity:.9;
	z-index:9999;
}

.sticky .logo{

}
.useite_log .menu{
	background:#3A4539;
}

.useite_log .sticky{
	background:#3A4539!important;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 102px;
}
/*
.menu {
	background: rgba(255,255,255, 0.2);
	border-top:0px #F4F4F4 solid;
}
.useite .menu {
	background: #123810!important;
	border-top:1px #B8B8B8 solid;
}
*/
/* Navigation */
/* *************************************************************************** */

nav ul{
	float:left!important;
}
nav#main>.container {
	margin:0!important;
	padding:0!important;
	width:100%!important;
}
nav#main {
/*background:#ffffff;
margin-top:-10px;*/
}

nav#main ul.rex-navi1{
	float:left!important;
	padding:0em 0 0em 0;
	margin-top:0px;/* Abstand nach oben*/
	/*text-shadow: 2px 4px 3px rgba(0,0,0,0.3);*/
}

nav#main li {
display:inline-block;
position:relative;
}

nav#main a {
font-size:16px;
color:#ffffff!important;
padding:0 1.2em;
height:2.5em;
line-height:2.5em;
text-decoration:none;
white-space:nowrap;
display:block;
position:relative;
z-index:20;
transition:all 0.5s;
font-weight:600;
}
.sticky nav#main a{
	color:#FFFFFF!important;
}
/* Aktueller Menüpunkt */
nav#main a.rex-current,
nav#main a.rex-active,
nav#main a:hover {
color:#cccccc!important;
background:transparent;
}
/* Aktueller Menüpunkt */
.sticky nav#main a.rex-current,
.sticky nav#main a.rex-active,
.sticky nav#main a:hover {
color:#CCCCCC!important;
/*background:#5B6D58!important;*/
}

/* Für breite Bildschirme */
@media screen and (min-width:50em) {
  /* Schatten für alle Untermenüs */
  nav#main .rex-navi2 li {
  box-shadow:1px 2px 3px 1px rgba(0,0,0,0.3);
  }
  /* Zweite Menüebene */
  /* *************************************************************************** */
  nav#main .rex-navi2 {
  position:absolute;
  bottom:0;
  padding-top:5px;
  left:-1px;
  z-index:10;
  transition:all 0.5s;
  transform:translateY(100%);
  opacity:0;
  visibility:hidden; /* Element ausblenden */
  }

  nav#main .rex-navi1>.has-submenu::after { /* Pfeil nach unten */
  content:'\f107';
  font-family:FontAwesome;
  position:absolute;
  bottom:-0.5em;
  left:50%;
  transform:translateX(-50%);
  color:#cccccc;
  z-index:20;
  }
  
  nav#main .rex-navi2 li a:hover:after {/**/
  content: '';
  width: 86%;
  position: absolute;
  left:50%;
  transform:translate(-50%);
  bottom: 0px;
  border-width: 0px 0 0px 0;
  border-style: solid;
  border-color:transparent;
  }

  nav#main li:hover .rex-navi2 {
  opacity:1;
  visibility:visible; /* Element einblenden */
  }

  nav#main .rex-navi2 li:first-child a {
  border-top:0px solid #fff;
  }

  nav#main .rex-navi2 li:last-child a {
  border-bottom:0px solid #fff;
  }

  nav#main .rex-navi2>li {
  display:block;
  }

  nav#main .rex-navi2>li a {
  background:#F0F0F0;
  color:#2C383B!important;
  border-bottom:1px #4E6469 solid;
  border-left:0px solid #fff;
  border-right:0px solid #fff;
  font-size:14px;
  height:4em;
  line-height:4em;
  transition:all 0.2s;
  border-radius:0px!important;
  }
  
  nav#main .rex-navi2>li a:hover,
  nav#main .rex-navi2>li .rex-current{
  /*background:#4E6469;*/
  color:#FFFFFF!important;
  background:#FB940B;
  border-radius:0px!important;
  }

  nav#main .rex-navi2 a.rex-current:after,
  nav#main .rex-navi2 a.rex-active:after { /* +++++++++++++++++++++++++ */
    content: '';
    border-width: 0px 0 0px 0;
  }

  nav#main li:hover .rex-navi2>li a {
  height:3em;
  line-height:3em;
  }

  /* Dritte Menüebene */
  /* *************************************************************************** */

  nav#main .rex-navi2>.has-submenu::after {
  content:'\f105';
  font-family:FontAwesome;
  position:absolute;
  right:0.5em;
  top:50%;
  transform:translateY(-50%);
  color:#16376D;
  z-index:20;
  }

  nav#main .rex-navi3>li {
  display:block;
  }

  nav#main .rex-navi3 {
  position:absolute;
  right:0;
  top:0;
  transform:translateX(100%);
  padding-left:5px;
  opacity:0;
  transition:all 0.5s;
  visibility:hidden; /* Element ausblenden */
  }

  nav#main li:hover>.rex-navi3 {
  opacity:1;
  visibility:visible; /* Element einblenden */
  }
   nav#main .rex-navi3 a.rex-current:after { /* +++++++++++++++++++++++++ */
    content: '';
    border-width: 0px 0 0px 0;
}

  /* Vierte Menüebene */
  /* *************************************************************************** */
  .rex-navi3>.has-submenu::after {
  content:'\f105';
  font-family:FontAwesome;
  position:absolute;
  right:0.5em;
  top:50%;
  transform:translateY(-50%);
  color:#16376D;
  z-index:20;
  }
  
  
  nav#main .rex-navi4>li {
  display:block;
  }

  nav#main .rex-navi4 {
  position:absolute;
  right:0;
  top:0;
  transform:translateX(100%);
  padding-left:5px;
  opacity:0;
  transition:all 0.5s;
  visibility:hidden; /* Element ausblenden */
  }

  nav#main li:hover>.rex-navi4 {
  opacity:1;
  visibility:visible; /* Element einblenden */
  }
  nav#main .rex-navi4 a.rex-current:after { /* +++++++++++++++++++++++++ */
    content: '';
    border-width: 0px 0 0px 0;
}

  /* Responsive Navigation */
  /* *************************************************************************** */
}

nav#main input, nav#main label, #mobile-nav, label[for=mobile-nav] {
display:none;
}
/* Mobile Menü */
/* Für schmale Bildschirme */
/* *************************************************************************** */
@media screen and (max-width:50em) {
  /* Altanweisungen rückgängig machen */
  nav#main .rex-navi1>.has-submenu::after,
  nav#main .rex-navi2>.has-submenu::after {
  display:none;
  }
  nav#main ul.rex-navi1{ /* Floet rechts und padding wieder aufheben für das Untermenü*/
	float:none!important;
	padding:0!important;
}
nav#main li a:hover:after,
nav#main a.rex-current:after,
nav#main a.rex-active:after {
    content: '';
    width: 86%;
    position: absolute;
	left:50%;
	transform:translate(-50%);

    bottom: 13px;
    border-width: 0px 0 0px 0!important;
    border-style: solid;
    border-color:#82C300;
}



  nav#main {
  min-height:50px;
  position:fixed;
  margin-top:0px!important;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:306;
  background:#333333;
  }
  
  nav#main>.container {
  display:none;
  }
  nav#main:before{
  position:absolute;
  content:'';
  color:#ffffff;
  font-family:  'Lato', sans-serif;;
  font-size:18px;
  left:10px;
  top: 15px;	
}
 
  /* Menü-Icon mit Wechsel zum X */
  label[for=mobile-nav] {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  height:100%;
  min-width:50px;
  display:block;
  cursor:pointer;
  z-index:50;
  display:block!important;
  }

  label[for=mobile-nav]::before {
  content:'\f0c9';
  font-family:FontAwesome;
  color:#fff;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:2em;
  }
  
  #mobile-nav:checked + nav#main label[for=mobile-nav]::before {
  content:'\f00d';
  }
  
  /* Responsive Menü */
 nav#main>.container {
  display:block;
  position:absolute;
  top:0;
  left:0;
  /*transform:translateY(100%);*/
  background:#2C383B;
  transform:translateX(-100%);
  transition:all 0.5s;
  width:100%;
  height:100vh;
  box-sizing:border-box;
  border-top:3em solid #333;
  overflow:auto;
  }
  
  #mobile-nav:checked+nav#main>.container {
  transform:translateX(0%);
  }
  
  nav#main>.container li {
  display:block;
  }
  
  nav#main>.container a {
  border-bottom:1px solid #ccc;
  }
  
  nav#main>.container .rex-navi1>li:last-child a {
  border-bottom:none;
  }
  
  
  nav#main>.container>ul>li:last-child::after {
  display:none;
  }
  
  nav#main li ul {
  position:static;
  border:none;
  color:#ffffff!important;  
  }
   nav#main li a{
	color:#FFFFFF!important;
}
nav#main li a.rex-current,
nav#main li a.rex-active{
  color:#ffffff!important;
  background:#4E6469;	
}

  nav#main li:hover ul {
  transform:none;
  color:#ffffff!important;
  background:#2C383B;
  box-shadow:none;
  }
  
  nav#main li:hover a {
  background:#2C383B;
  }
  
  nav#main li a:hover {
  background:#4E6469;
  color:#ffffff!important;
  }
  
  nav#main .rex-navi2>li a {
  padding-left:4em;
  color:#ffffff!important;
  }
  
  nav#main .rex-navi3>li a {
  padding-left:4em;
  color:#ffffff!important;  
  }
  
  nav#main li>label {
  display:block;
  position:absolute;
  top:0;
  right:0;
  z-index:30;
  padding:0 1em;
  height:3em;
  line-height:3em;
  cursor:pointer;
  border-left:1px solid #ccc;
  }
  
  nav#main li>label::before {
  content:'\f078';
  font-family:FontAwesome;
  display:block;
  color:#fff;
  }
  
  nav#main input:checked+label::before {
  content:'\f077';
  font-family:FontAwesome;
  }
  
  nav#main ul ul {
  display:none;
  }
  
  nav#main ul input:checked~ul {
  display:block;
  
  /*nav#main ul ul {
  height:0;
  overflow:hidden;
  }
  
  nav#main input:checked~ul.rex-navi-has-1-elements {height:3em;}
  nav#main input:checked~ul.rex-navi-has-2-elements {height:6em;}
  nav#main input:checked~ul.rex-navi-has-3-elements {height:9em;}
  nav#main input:checked~ul.rex-navi-has-4-elements {height:12em;}
  nav#main input:checked~ul.rex-navi-has-5-elements {height:15em;}
  nav#main input:checked~ul.rex-navi-has-6-elements {height:18em;}
  nav#main input:checked~ul.rex-navi-has-7-elements {height:21em;}
  nav#main input:checked~ul.rex-navi-has-8-elements {height:24em;}
  nav#main input:checked~ul.rex-navi-has-9-elements {height:27em;}*/
}





