/* ----------------------------------------------------------------------------- *
 *                           Styles fuer Navigation                              *
 * ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------- *
 *                                  Navigation Fuss                              *
 * ----------------------------------------------------------------------------- */
footer {              /* Fuss  */
    clear: left;
    /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
    overflow: hidden;
}

nav.footer-link {
	height: 100%;
	background-color: #008578; /* light HKS52  */
	padding: 0.5em;
	width: 9.5em;
}

nav.footer-link li {
	border-bottom: none;
}


nav.footer-link p {
	color: #fff;
	font-size: 0.875em;
	font-weight: bold;
	line-height: 1em;
}

nav.footer-link p.copyright {
	color: #fff;
	font-size: 0.625em;
	line-height: 1.25em;
}

nav.footer-link a {
	color: #fff;
	text-decoration: none;
	font-size: 0.75em;
}

/* ----------------------------------------------------------------------------- *
 *                                  Navigation Mobil                             *
 * ----------------------------------------------------------------------------- */

	nav#headernav {
		display: none;
	}
    
	.nav_mobil {
		position: absolute;
		z-index: 300;
		top: 10px;
		right: 10px;
		background-color: #c7e4db;
		overflow-x: hidden;
	}

	nav#tools {
		display: none;
	}

	.tools_img {
		width: 80%;
	}

	#nav_mobil {
		width: 0px;
		margin-top: 0px;
	}
	
	.JSnav_mobil {
		height: auto;
		position: absolute;
		z-index: 250;
		top: 10px;
		right: 10px;
		background-color: #c7e4db;
		overflow-x: hidden;
	}

	.JSnav_mobil > ul {
		padding: 16px 4px 0 0;
		border-left: solid 30px #83c7b7
	}

	.nav_mobil > ul {
		padding: 0 10px;
	}

	.mitJS_off {
		font-weight: bold;
		color: #00594e;
		margin-bottom: 0.8em;
		text-align: center;
	}

	nav li {
		list-style: none;
		border-bottom: 1px solid #fff;
	}

	.borderbottomoff {
		border-bottom: none;
	}

	nav ul {
		padding: 0;
		margin: 0;
	}
	
	nav ul li ul {
		position: relative;
	}

	ul.ohneJS {
		right: -800px;
		display: none;
	}

	nav ul li:hover > ul.ohneJS {
		right: 0;
		display: block;
	}

	.JSnav_mobil a, .nav_mobil a {
		padding: 0.5em;
		text-decoration: none;
		font-size: 0.875em;
		color: #00594e;
		font-weight: bold;
		display: block;
		transition: 0.3s;
		background-color: #c7e4db;
	}

	.JSnav_mobil a:hover, .nav_mobil a:hover {
		color: #c7e4db;
		background-color: #008578;
	}

	.menuJS {
		display:none;
		position: absolute;
		top: 10px;
		right: 10px;
		float: right; 
		padding: 0.5em 0.125em 0em 0.125em;
		cursor:pointer;
		color: #008578;
		background-color: #c7e4db;
		border: 1px solid #008578;
	}

	.menuJS:hover {
		color: #c7e4db;
		background-color: #83c7b7;
		border: 1px solid #c7e4db;
	}

	.crossJS {
		display: none;
		margin-left: -34px;
		font-size: 1.5em;
		font-weight: bold;
		width: 22px;
	}

	#js-switch {
		display: block;
		padding: 0 0 3em 0;
		line-height: 1em;
		font-size: 1em;
	}

	#js-switch-alt {
		display: block;
		line-height: 1em;
		font-size: 1em;
	}

	.sprache a {
		float: left;
		font-size: 1em;
		margin: 0 0 0 0.4em;
		padding: 0.4em;
		border: 1px solid #fff;
	}

	.crossJS a {
		float: left;
		padding: 0.4em;
	}
	
	.nav_search {
			display: none;
			height: 0;
			position: relative;
			float: right;
			top: -9999px;
			right: -0px;
		    z-index: 400;
	}

	.SearchField {
                width: 120px;
				margin: 10px 0 16px 3px;
				height: 25px;
				border: 1px solid #efefef;
				padding: 2px;
                }
				
	.SearchButton {
				margin: 10px 0 16px 3px;
				width: 25px;
				height: 25px;
				padding: 2px;
				background: url(https://www.Connection-eV.org/img/lupedet.jpg) no-repeat;
				background-size: contain;
	}
	.SearchButton:hover  {
				background: url(https://www.Connection-eV.org/img/haken.png) no-repeat;
				cursor: pointer;
				background-size: contain;
	}	

	.menuSearch {
		position: absolute;
		top: -9999px;
		right: -0px;
	}

/* ----------------------------------------------------------------------------- *
 *                           Styles für Zwischenversion klein                    *
 *                          400px / 16px/em = 25em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 25em) {
	nav.footer-link {
		height: 220px;
		width: 50%;
		float: left;
	}

}

 /* ----------------------------------------------------------------------------- *
 *                           Styles für Zwischenversion                            *
 *                          500px / 16px/em = 31.25em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 31.25em) {

}



 /* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 46.875em) {
    
    /* Schriftverkleinerung wird für große Screens wieder aufgehoben */
    @media only screen and (max-width: 78em) {
}

    /* ----------------------------------------------------------------------------- *
     *                                  Navigation  Tablet Version                   *
     * ----------------------------------------------------------------------------- */

	footer {
        padding: 0.8em 20px;
    }

	div#head_art {
		display: none;
	}

	nav.nav_mobil {
		display: none;
	}

	.JSnav_mobil{
		display: none;
	}

	nav#tools {
		display: block;
		width: 100%;
	}

	.beiJSistan {
		display: none;
	}

	.bm_addtoany_y {
		display: none;
	}

	.menuJS {
		right: -0px;
		top: -9999px;
	}

	nav#headernav {
		position: relative;
		right: 8px;
		display: block;
		background: #fff;
		padding-top: 10px;
		z-index: 500;
	}

	nav#headernav ul {
		padding: 0;
		float: right;
		margin-right: 0;
	}

	nav#headernav ul li.buttonnav {
		border-right: none;
		}
	
	nav#headernav a {
		display: inline-block;
		color: #00594e;
		text-decoration: none;
	}

	nav#headernav a:hover {
		color: #e3f2f1;
		background: #008578;
		transition: 0.6s;
	}

	nav#headernav ul li.searchmenu  a{
		padding: 0;
		margin: 0;
	}

	nav#headernav ul li.searchmenu a:hover {
		background: #e3f2f1;
	}

	nav#headernav ul li {
		position: relative;
		float: left;
		transition: 0.1s;
		border-right: solid 1px #008578;
		}

	nav#headernav ul li:last-child{
		border-right: none;
	}

	nav#headernav ul li a {
		padding: 10px 8px;
		display: inline-block;
	}

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

	nav#headernav ul ul li.submenu > a:after {
		display: inline-block;
		float: right;
		margin-right: -10px;
		border-left: 7px solid #008578;
		border-right: 7px solid transparent;
		border-top: 7px solid transparent;
		border-bottom: 7px solid transparent;
	}
	
	nav#headernav ul ul {
		position: absolute;
		visibility: hidden;
		background: #c7e4db;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
		z-index: 1;
		transition: 0.6s;
	}

	nav#headernav ul li.searchmenu ul {
		position: absolute;
		opacity: 0;
		left: -200px;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
		z-index: 1;
		transition: 10s;
	}

	nav#headernav ul ul li {
		float: none;
		width: 200px;
		border-bottom: 2px solid #fff;
		border-right: none;
		}

	nav#headernav ul li.searchmenu ul li {
		width: 240px;
		padding: 10px;
		}

	nav#headernav ul ul li a {
		padding: 8px 14px;
		display: block;
	}

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

	nav#headernav ul li:hover > ul {
		top: 100%;
		transition: 0.6s;
		visibility: visible;
	}

	nav#headernav ul li.searchmenu:hover > ul {
		top: 100%;
		left: -200px;
		transition: 0.6s;
		opacity: 1;
	}

	nav#headernav ul ul li:hover > ul, nav#headernav ul ul li > ul  {
		top: 0;
		left: 202px;
	}
	
	nav#headernav ul li ul li.nav-sprache{
		width: 70px;
	}

	.menuSearch {
		display: none;
		position: relative;
		top: 10px;
		right: 10px;
		float: right; 
		padding: 0.1em;
		cursor:pointer;
		z-index: 400;
	}

	.menuSearch:hover {
		background-color: #c7e4db;
	}

	.nav_search {
			top: 80px;
			right: 10px;
	}

	.crossSearch {
		font-size: 1.5em;
		color: #bdbdbd;
		cursor: pointer;
	}

	.crossSearch:hover {
		font-weight: bold;
	}
	
	.SearchField {
			width: 180px;
			margin: 4px 0 4px 3px;
	}

	.SearchButton {
			margin: 4px 0 4px 3px;
			width: 30px;
			height: 30px;
	}
		
	nav.footer-link {
		width: 30%;
		float: left;
	}

/* ----------------------------------------------------------------------------- *
 *                                  Navigation Tools Tablet Version              *
 * ----------------------------------------------------------------------------- */
	#headerright {
		 position: absolute; 
		 bottom: 3px; 
		 right: 18px;
	}
	
	nav#tools ul li {
		position: relative;
		float: left;
		list-style: none;
	}

	.tools_btn {
		color: #87888a; 
		font-weight: bold; 
		border: none; 
		background-color: #fff; 
		font-size: 1em; 
	}
	
	.tools_li {
		margin: 0 0.5em;
	}

	
	
}

/* ----------------------------------------------------------------------------- *
 *                           Styles der Kleinen Desktopversion                   *
 *                          880px / 16px/em = 55em                               *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 55em) {

    @media only screen and (max-width: 78em) {
        body {
            font-size: 0.938em; /* 15px */
        }
    }
	
	nav#headernav ul {
		padding: 0;
		float: right;
		margin-right: 6px;
	}

	nav#headernav ul li a {
		padding: 1em;
	}

	nav.footer-link {
		width: 16.6%;
		float: left;
	}

}


/* ----------------------------------------------------------------------------- *
 *                          Styles für kleine Desktops                           *
 *                           1024px / 16px/em = 64em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 64em) {

	nav#headernav {
		display: block;
		background: #fff;
		transition: 0.5s;
	}

	.tools_img {
		width: 100%;
	}

	.bm_addtoany_x {
		display: none;
	}
	
	.bm_addtoany_y {
		display: block;
	}

}
/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops                            *
 *                           1248px / 16px/em = 78em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 78em) {
}