/** Emotionbild im Hintergrund
-------------------------------*/

	html {
		overflow-x: hidden;
		background-color: #EEEEEE;
		background-repeat: no-repeat;
		background-position: center 50px;
		background-size: 1170px auto;
	}

	html.nonukj{
		background-position-y: 170px;
	}

	body {
		background: url('../images/bgrfull.png') no-repeat;
		background-position: center top;
	}

	/* Silbentrennung */
	body {
		hyphens: auto;
	}


/* Wrapper-Container
---------------------*/

	.wrapper {
		width: 1170px;
		margin: 0 auto;
		position: relative;	/*  */
	}

/* Header
----------*/

	header {
		height: 120px;
		position: relative;
	}

	.logo-wrapper {
		display: block;
		position: absolute;
		z-index: 1;
		left: -725px;
		top: -710px;
		width: 1000px;
		height: 1000px;
		background-color: #fff;
		-webkit-transform: rotate(-30deg);
		-moz-transform: rotate(-30deg);
		-ms-transform: rotate(-30deg);
		-o-transform: rotate(-30deg);
		transform: rotate(-30deg);
		-webkit-box-shadow: 10px 10px 46px -27px rgba(0,0,0,0.29);
		-moz-box-shadow: 10px 10px 46px -27px rgba(0,0,0,0.29);
		box-shadow: 10px 10px 46px -27px rgba(0,0,0,0.29);
	}

	.logo {
		position: absolute;
		z-index: 2;
		top: 0;
	}

	.logo img {
		max-height: 100%;
		max-width: 100%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

		 .logo a {
			 display: inline-block;
			 margin: 35px 0 0 40px;
			 width: 192px;
			 background-image: none !important;
			 height: 95px;
		 }

	/* Headerlinks
	---------------*/

	.headerlinks {
		height: 50px;
		background-color: #0056a2;
	}

	.externPage .headerlinks {
		height: 50px;
		background-color: #f28130;
	}

		.headerlinks a, .headerlinks .printPDF {
			float: right;
			display: inline-block;
			height: 50px;
			cursor: pointer;
			line-height: 50px;
			padding: 0 13px 0 13px;
			position: relative;
		}

		.headerlinks .printPDF.spinner, .headerlinks .printPDF.error_pdf {
			display: flex;
			width: 42px;
		}

		.headerlinks .printPDF.error_pdf i::before {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			color: yellow;
		}

		.spinner:before {
			content: '';
			box-sizing: border-box;
			position: absolute;
			top: 50%;
			left: 50%;
			width: 20px;
			height: 20px;
			margin-top: -10px;
			margin-left: -10px;
			border-radius: 50%;
			border: 2px solid #ccc;
			border-top-color: #333;
			animation: spinner .6s linear infinite;
		}

		@keyframes spinner {
			to {transform: rotate(360deg);}
		}

		.headerlinks *:hover {
			color: #8dd449;
		}

		.headerlinks * {
			color: #FFFFFF;
		}

	/* Mobile Navigationtoolbar
	----------------------------*/

		.nav-mobile {
			display: none;
		}


	/* Notfall-Link
	----------------*/

		.notfall {
			position: absolute;
			display: block;
			right: 60px;
			top: 245px;
			z-index: 1;
		}

/* Hauptcontainer
------------------*/

	.wrapper-container {
		margin-top: 310px;
		position: relative;	/* damit innere Elemente absolute zu dieser DIV positioniert wörden können*/
		background-color: transparent;
	}

	main {
		position: relative;
		z-index: 1;
	}

/* Footer
----------*/

	footer {
		background-color: #0056a2;
		position: relative;
	}

	.externPage footer {
		background-color: #f28130;
	}

	footer * {
		color: #FFFFFF;
	}

	footer a {
		display: block;
	}

	footer a.caption {
		margin: 30px 0 15px 0;
		font-size: 14px;
		font-weight: bold;
	}

		/* Bei nonukj Mandanten die Abstände anpassen
		----------------------------------------------*/

			.nonukj footer {
				padding-top: 30px;
			}

			.nonukj footer a.caption {
				margin-top: 10px;
			}

	footer li  {
		display: block;
		list-style-type: none;
		padding-bottom: 3px;
	}

	.footer-links {
		padding: 0 50px 0 50px;
	}

	.footer-partners {
		display: flex;
		align-items: center;
		min-height: 100px;
		padding: 15px 60px;
		margin-top: 20px;
		background-color: #FFFFFF;
	}

	/* Logos mittig zentrieren
	---------------------------*/

	.footer-partners a {
		display: inline-block;
		vertical-align: middle;
		float: left;
		height: 70px;
		padding: 0 20px 0 20px;
	}

		.footer-partners a img {
			max-height: 70px;
		}

	.footer-partners .helper {
		display: inline-block;
		vertical-align: middle;
	}

	.footer-partners a img {
		max-height: 70px;
		vertical-align: middle;
		padding-top: 10px;
	}

		.footer-socials-desktop {
			float: left;
		}

			.footer-socials-desktop a {
				padding: 0px;

			}

	/* Icons in der weißen Footerbar
	---------------------------------*/

	.footer-socials-desktop .fa,
	.footer-socials-mobile .fa {
		display: inline-block;
		float: left;
		padding: 15px;
		font-size: 40px;
		color: #0056a2;
	}

	.externPage .footer-socials-desktop .fa {
		color: #f28130;
	}

	/* ToTop-Sprunglink
	--------------------*/

	.gototop {
		position: absolute;
		right: 0;
		top: 20px;
		cursor: pointer;
		width: 42px;
		height: 42px;
		background: rgba(255, 255, 255, 0.2);
		font-size: 24px;
		padding: 6px;
		text-align: center;
	}

	.gototop:hover {
		background-color: #8DD449;
	}

/* Sidebar Navigation
---------------------*/

	.top-corner {
		width: 296px;
		height: 171px;
		margin: -191px 0 0 0;
		background-image: url("../images/nav-top.png");
		background-repeat: no-repeat;
	}

	.bottom-corner {
		width: 296px;
		height: 171px;
		background-image: url("../images/nav-bottom.png");
		background-repeat: no-repeat;
		background-position: left top;
		margin-bottom: 20px;	/* Abstand zum Footer bei zu langer Navigation */
	}

	.sidebar-left .navroot {
		font-size: 30px;
		width: 100%;
		padding: 0 20px 5px;
		color: rgb(224, 224, 224);
		background: #fff;
	}

	/* Linke Navigation
	--------------------*/

		.sidebar-left ul {
			padding: 0;
			margin: 0;
			clear: both;
			list-style-type: none;
			background-color: #FFFFFF;
		}

		/* Allgemeine Styles für Einträge
		----------------------------------*/

			.sidebar-left ul a {
				display: block;
				padding: 6px 0 6px 0;
				clear: both;
			}

				.sidebar-left ul a .text {
					display: block;
					padding-left: 15px;
					padding-right: 15px;
					color: #000000;
				}

		/* Hover-Effekt für alle Einträge
		----------------------------------*/

			.sidebar-left a:hover,
			.sidebar-left li.current > a,
			.sidebar-left a:hover .text,
			.sidebar-left li.current > a .text {
				background-color: #8DD449;
				color: #FFFFFF;
				text-shadow: 0px 0px 2px darkgray;	/* SHei */
			}

	.externPage .sidebar-left a:hover,
	.externPage .sidebar-left li.current > a,
	.externPage .sidebar-left a:hover .text,
	.externPage .sidebar-left li.current > a .text {
		background-color: #e9167c;
	}

			.sidebar-left > nav > ul > li:hover {
				border-left: 5px solid #8DD449;
			}

	.externPage .sidebar-left > nav > ul > li:hover {
		border-left: 5px solid #e9167c;
	}


		/* Abstand oben und unten zu den weißen Ecken
		----------------------------------------------*/

			.sidebar-left > nav > ul {
				padding-top: 10px;
				padding-bottom: 10px;
			}

		/* Linker grüner Streifen
		--------------------------*/

			.sidebar-left > nav > ul > li {
				border-left: 5px solid #FFFFFF;
			}

			.sidebar-left > nav > ul > li.inpath {
				border-left: 5px solid #8DD449;
			}

			.externPage .sidebar-left > nav > ul > li.inpath {
				border-left: 5px solid #e9167c;
			}

		/* Hintergrundfarben
		---------------------*/

			/* 1. Ebene */
			.sidebar-left > nav > ul > li {
				background-color: #FFFFFF;
			}

			/* 2. Ebene */
			.sidebar-left > nav > ul > li.inpath,
			.sidebar-left nav ul ul li {
				background-color: #EFEFEF;
			}

			/* 3. Ebene **/
			.sidebar-left > nav > ul > li > ul > li.inpath,
			.sidebar-left nav ul ul ul li {
				background-color: #E1E1E1;
			}

			/* 4.Ebene **/
			.sidebar-left > nav > ul > li > ul > li > ul > li.inpath,
			.sidebar-left nav ul ul ul ul li {
				background-color: #C8C8C8;
			}

		/* Abstände
		------------*/

			/* 2.Ebene **/
			.sidebar-left nav ul li a {
				padding-left: 15px; /* Hier nicht 20px da immer ein 5px Rand links existiert */
			}

			/* 3.Ebene **/
			.sidebar-left nav ul ul li a {
				padding-left: 40px;
			}

			/* 4.Ebene **/
			.sidebar-left nav ul ul ul li a {
				padding-left: 60px;
			}

			/* 5.Ebene **/
			.sidebar-left nav ul ul ul ul li a {
				padding-left: 80px;
			}

			/* 6.Ebene **/
			.sidebar-left nav ul ul ul ul ul li a {
				padding-left: 100px;
			}

		/* Expander
		------------*/

			.sidebar-left .expander {
				display: inline-block;
				float: left;
				width: 15px;
				height: 16px;
				background-image: none;
				background-repeat: no-repeat;
				background-position: left center;
				cursor: pointer;
			}

				.sidebar-left .expander.closed {
					background-image: url("../images/nav-arrow-closed.png");
				}

				.sidebar-left .expander.closed:hover {
					background-image: url("../images/nav-arrow-closed-hover.png");
				}

				.sidebar-left .expander.open {
					background-image: url("../images/nav-arrow-open.png");
				}

				.sidebar-left .expander.open:hover {
					background-image: url("../images/nav-arrow-open-hover.png");
				}

/* Brotkrumennavigation
-------------------------*/

	.breadcrumb {
		padding: 10px 20px 10px 20px;
		margin-bottom: 20px;
		background-color: #FFFFFF;
	}

		.breadcrumb a {
			margin: 0 4px 0 0;
			font-size: 12px;
			color: #585858;
			text-decoration: none;
		}

		.breadcrumb a.active {
/* egotec		color: #8dd449; */
			color: #585858; /* SHei */
		}

/* Hauptinhalt-Container
-------------------------*/

	.content {
		/*
		margin-bottom: 20px;
		padding-left: 10px;
		padding-right: 10px;
		*/
	}

	/* Bilderbreite maximal
	------------------------*/

		.content video,
		.content img {
			max-width: 100% !important;
			height: auto;
		}

/* Cookie-Leiste
-----------------*/

	.cookie-bar {
		display: none;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		background: #E2E2E2;
		line-height:24px;
		color: #555555;
		text-align:center;
		padding: 10px;
		z-index: 100;
	}

		.cookie-bar * {
			cursor: pointer;
			color: #FFFFFF;
		}

		.cookie-bar .fa {
			padding-right: 5px;
		}

		.cookie-bar span {
			display: inline-block;
			padding: 2px 10px;
			margin-left: 20px;
			background-color: #0056A2;
			border-radius: 5px;
		}

		.cookie-bar span:hover {
			opacity: 0.8;
		}

/* Browser-Meldung
-------------------*/

	.browser-bar {
		display: none;
		position: fixed;
		height:auto;
		top: 0;
		right: 0;
		left: 0;
		background-color: #EA212E;
		line-height:24px;
		color: #FFFFFF;
		text-align:center;
		padding: 10px;
		z-index: 1000;
	}

		.browser-bar .fa {
			display: inline-block;
			float: right;
			cursor: pointer;
			font-size: 18px;
			color: #FFFFFF;
			margin-right: 10px;
		}

/* Hintergrund-Klasse
----------------------*/

	.bgr-white {
		/**
		 * Alle Child-Elemente einheitlich 10px margin-bottom besitzen und darinliegende p-Tag ebenso 10px Abstand nach unten
		 */
		padding: 20px 20px 0 20px;
		margin-bottom: 20px;
		background-color: #FFFFFF;
	}

/* Datumauswahl
----------------*/

	.content select {
		border: 1px solid #CCCCCC;
		padding: 3px 5px;
	}

/* UKJ-Pagination
------------------*/

	.ukj-pagination {
		clear: both;
		margin-top: 20px;
		color: #0056a2;
		font-size: 16px;
	}

		.ukj-pagination a {
			margin: 5px 3px;
			padding: 0px;
			text-align: center;
			color: #0056a2;
			text-decoration: none;
		}

		.ukj-pagination a.active, .ukj-pagination a:hover, .ukj-pagination .pageination_text:hover {
			color: #8dd449;
		}

/* Artikel-Liste
-----------------*/
	.block-container .newslist {
		float: left !important
	}
	.ukj-newslist {
		clear: both;
	}

	.ukj-newslist article {
		display: block;
		padding-top: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid #CCCCCC;
	}

	.ukj-newslist article .img {
		display: inline-block;
		width: 120px;
		height: 70px;
		float: left;
/*		background-image: url("http://i.stack.imgur.com/2OrtT.jpg"); */
    	background-size: cover;
    	background-repeat: no-repeat;
	    background-position: 50% 50%;
	}

	.ukj-newslist article:after {
		clear: both;
	}

		.ukj-newslist article h2 {
			display: block;
			margin-top: -5px;
			margin-left: 140px;
			margin-bottom: 0;
		}

		.ukj-newslist article h2 a {
			display: inline-block;
			margin: -5px 0 5px 0;
			font-size: 16px;
			line-height: 20px;
			color: #0056a2;
			font-weight: normal;
			text-transform: none;
		}

		.ukj-newslist article span {
			display: block;
			margin-left: 140px;
			padding-bottom: 5px;
			font-weight: bold;
			font-size: 12px;
		}

		.ukj-newslist article p {
			margin-left: 140px;
			margin-bottom: 0;
		}

		.ukj-newslist article p a {
			color: #585858;
		}



/* Hauptnavigation
-------------------*/

@media (min-width: 1181px) {	/* Desktop-Viewport beginnt mit 1181px Breite */

	html {
		overflow-x: hidden;
		background-color: #EEEEEE;
		background-repeat: no-repeat;
		background-position: center 120px;
		background-size: 1170px auto;
	}

	html.nonukj{
		background-position-y: 120px;
	}

	/* nur für Desktop-Ansicht */
	header nav {
		position: absolute;
		top: 50px;
		right: 0;
		height: 70px;
		width: 100%;
		background-color: #FFFFFF;
		padding-left: 180px;
	}

	/* Erste Ebene als Hauptkategorien anzeigen
	---------------------------------------------*/

		.externPage .ukj-newslist article h2 a {
			display: inline-block;
			margin: -5px 0 5px 0;
			font-size: 16px;
			line-height: 20px;
			color: #F28130;
			font-weight: normal;
			text-transform: none;
		}
		
		.externPage .ukj-newslist article h2 a:hover {
			color: #ec3e93;
			text-decoration: underline;
		}
		.externPage a:hover{
			color: #e9167c;
			text-decoration: underline;
		}

	.externPage header nav ul li ul a:hover, .externPage header nav ul li ul a:hover * {
		color: #e9167c;
		text-decoration: none!important;
	}
		
		.externPage footer a:hover{
			color: #e9167c;
			text-decoration: none;
		}

		.externPage div.sidebar-left a {
			text-decoration: none;
		}
		
		.externPage header > nav > ul > li:hover,
		.externPage header > nav > ul >li:hover a * {
			color: black;
		}
		
		.externPage .content h1, .externPage .content h1 span,
		.externPage .content h3, .externPage .content h3 span,
		.externPage .content h4, .externPage .content h4 span,
		.externPage .content h5, .externPage .content h5 span,
		.externPage h1, .externPage h3, .externPage h4, .externPage h5, .externPage .contact-head {
			color: #f28130;
		}
		.externPage .content h2, .externPage .content h2 span, .externPage h2{
			color: black;
		}

		.externPage i.fa.fa-caret-left, .externPage i.fa.fa-caret-right {
			color: #f28130!important;
		}

		.externPage i.fa.fa-caret-left:hover, .externPage i.fa.fa-caret-right:hover {
			color: #e9167c!important;
		}

		.externPage .headerlinks :hover{
			color: #e9167c;
			text-decoration: none;
		}
		.externPage header > nav > ul > li:hover, header > nav > ul > li:hover > a *, .externPage .gototop:hover{
			background-color: #e9167c;
			color: white;
		}

		.externPage header ul ul a {
			text-decoration:none!important;
		}
		
		.externPage header nav > ul > li:not(.schnelleinstieg) > ul > li:hover a *, .externPage header > nav > ul > li:hover, header > nav > ul > li:hover > a *  {
			color: #e9167c;
			text-decoration: underline;
		}
		
		.externPage header nav .schnelleinstieg li:hover, .externPage .btn {
			background-color: #ec3e93;
			color: #FFFFFF;
		}

		header nav > ul > li {
			display: inline-block;
			float: left;
			height: 70px;
			border-left: 1px solid #DDDDDD;
		}

		header nav ul > li > a {
			display: block;
			height: 70px;
			vertical-align: middle;
			text-align: left;
			padding: 17px 15px 0px 15px;
		}

	/* Breiten und Abständer der ersten Hauptnavigationspunkte
	-----------------------------------------------------------*/

		/* erster Punkte muss links Abstand bekommen */
		header > nav > ul > li:nth-child(1) {
			padding-left: 120px;
			width: 230px;
		}

		header > nav > ul > li:nth-child(1) a {
			border-left: none !important;
		}

		/* Standardbreite ist 80px */
		header > nav > ul > li {
			width: 90px;
		}

		header > nav > ul > li:nth-child(2) {
			width: 120px;
		}

		header > nav > ul > li:nth-child(6) {
			width: 100px;
		}

		header > nav > ul > li:nth-child(7) {
			width: 100px;
		}

		header nav li.schnelleinstieg,
		header nav li.suche {
			width: 85px;
		}

	/* Allgemeine Styles
	---------------------*/

		header nav ul {
			list-style-type: none;
			width: 100%;
		}

	/* Hover-Effekt 1.Ebene
	------------------------*/

		header > nav > ul > li:hover,
		header > nav > ul > li:hover > a * {
			background-color: #8DD449;
			color: #FFFFFF;
		}
		.externPage header > nav > ul > li:hover,
		.externPage header > nav > ul > li:hover > a *  {
			background-color: #e9167c;
			color: #FFFFFF;
		}
		
		.externPage h5 {
			color: #f28130 !important;
		}
	/* 2. Ebene
	-------------*/

		/* Alle darunterliegendene Ebenen ausblenden
		---------------------------------------------*/

			header nav ul ul {
				display: none;
			}

		/* Bei Mouseover 2.Ebene einblenden
		-----------------------------------*/

			header nav > ul > li:hover > ul {
				display: block;
				z-index: 2;
			}

		/* 2.Ebene immer fix positionieren
		-----------------------------------*/

			header nav > ul > li > ul {
				position: absolute;
				width: 705px;	/* 705px damit der Text aus Subnavigation in einer Fluchtlinie mit darüberliegenden Menü */
				right: 170px;
				background-color: #FFFFFF;
				border: 0;
				padding-bottom: 20px;
			}

		/* Alle Elemente sind fließend mit 20px Abstand
		------------------------------------------------*/

			header nav > ul > li > ul > li {
				width: 33.3330%;
				float: left;
				padding: 0;
			}

				header nav > ul > li > ul > li a {
					color: #555555;
					height: auto;
					padding: 20px 20px 0 20px;
				}

				/* Farbe bei Mouseover */
				header nav > ul > li > ul > li:hover a * {
					color: #8DD449;
				}

		/* In der Desktop-Ansicht werden Überschriften für 2-Ebene eingeblendet
		------------------------------------------------------------------------*/

			header nav li.caption {
				display: block !important;
				float: none;
			}

			header nav li.caption h5 {
				width: 100%;
				color: #0056a2;
				font-size: 11px;
				padding: 20px 20px 0 20px;
			}

	/* 2. Ebene Schnelleinstieg
	----------------------------*/

		header nav .schnelleinstieg > ul {
			width: 170px;
			top: 70px;
			right: 0;
			position: absolute;
			display: none;
			z-index: 2;
			background-color: #FFFFFF;
			padding-bottom: 0;
		}

	/* Suche
	---------*/

		header nav .suche a {
			padding: 5px 10px 0px 10px;
		}

}

/* Schnelleinstieg - Bildelemente
-----------------------------------*/

@media (min-width: 480px) {

	/* Bilder
	----------*/

		header nav .schnelleinstieg img.img2 {
			display: none;
		}

		header nav .schnelleinstieg a:hover > img.img2 {
			display: block;
		}

		header nav .schnelleinstieg li .expander {
			display: none;
		}

		header nav .schnelleinstieg li {
			display: block;
			height: 85px;
			width: 85px;
			position: relative;
			float: left;
			text-align: center;
		}

		/* a auch als Block darstellen, damit bei Mouseover in den Randbereich das Bild auch wechselt  */
		header nav .schnelleinstieg li a {
			display: block;
			height: 85px;
			width: 85px;
			text-align: center;
		}

		header nav .schnelleinstieg a img {
			left: 0;
			right: 0;
			top: 5px;
			position: absolute;
			margin: 0 auto;
		}

		header nav .schnelleinstieg li a span {
			bottom: 5px;
			left:0;
			right: 0;
			position: absolute;
		}

	/* Hover-Effekt
	------------------------*/

		header nav .schnelleinstieg li:hover {
			background-color: #8DD449;
			color: #FFFFFF;
		}
}

/* Schnelleinstieg-Link:
 * Beim Mouseover Pfeilsymbol hinzufügen
 -----------------------------------------*/

	@media (min-width : 480px) {
		header nav .schnelleinstieg > a {
			background-image: url("../images/arrow-down-white.png");
			background-repeat: no-repeat;
			background-position: center bottom 20px;
		}
	}

	@media only screen and (min-width : 960px) {
		header nav .schnelleinstieg > a {
			background-image: url("../images/arrow-down-white.png");
			background-repeat: no-repeat;
			background-position: center bottom 20px;
		}
	}

	@media only screen and (min-width : 1180px) {
		header nav .schnelleinstieg {
			background-image: url("../images/arrow-down.png");
			background-repeat: no-repeat;
			background-position: center bottom 8px;
		}

		/* Pfeil-Grafik bei Hover weiß */
		header nav .schnelleinstieg:hover {
			background-image: url("../images/arrow-down-white.png");
		}
	}

/** Markierung, wo $page->field.content noch vorhanden ist
-----------------------------------------------------------*/

	*[data-oldcontent='1'],
	*[data-oldcontent='1'] * {
		color: orange !important;
	}

/* Lupen-Symbol bei Hover
---------------------------*/

	.media.has-lightbox {
		background-image: url("../images/lupe.png");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: auto !important;
	}

	.media.has-lightbox:hover img {
		opacity: 0.5;
	}

/* Fancybox
------------*/

	/* Scrollbars ausblenden */
	.fancybox-lock .fancybox-overlay {
		overflow: hidden !important;
	}

	.fancybox-lock{
		margin-right:0 !important;
	}

	.fancybox-title {
		padding-top: 5px;
	}

	.fancybox-container * {
		color : white;
	}

	.fancybox-content {
		border: white 5px solid;
	}


/* Accesskey
-------------*/

	.acceskeys {
		position: absolute;
		color: white;
		background-color: white;
		top: -1000px;
		width: 1px;
		height: 1px;
	}