html
{
	color: #f0f0f0;
	outline: none;
}

body
{
	background-color: #EEEEEE;
}

.space
{
	height: 75px;
}

h4
{
	font-size: 18px;
	font-weight: bold;
	margin: 0;
	padding-left: 5px;
}

h2
{
	margin-top: 40px;
}

.line-height
{
	line-height: 1.75;
}

.color_red { color: #F00; }

.list_image_smile { list-style-image: url(../images/icons/list_smlie.png); }
.list_image_smile2 { list-style-image: url(../images/icons/list_smlie2.png); }
.list_image_clock { list-style-image: url(../images/icons/list_clock.png); }
.list_image_finger { list-style-image: url(../images/icons/list_finger.png); }
.list_image_platter { list-style-image: url(../images/icons/list_platter.png); }
.list_image_glass { list-style-image: url(../images/icons/list_glass.png); }

.matrix_background
{
	position: relative;
	background-image: url(../images/background.png);
	background-size: 1005px 810px;
	width: 1005px;
}

.matrix
{
	height: 800px;
	margin: 20px 0;
	/* Inner circle elements between the content circles */
	padding: 0 20px;
	background-image: url(../images/circle_inner.png), url(../images/circle_inner.png), url(../images/circle_inner.png), url(../images/circle_inner.png);
	background-size: 138px 80px;
	background-position: 89px 120px,  89px 280px,  89px 440px,  89px 600px;
	background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
}

.matrix .circle_static
{
	display: table;
	float: left;
	position: relative;
	display: block;
	top: 0px;
	width: 165px;
	max-width: 165px;
	max-height: 165px;
	height: 165px;
	background-size: 165px 165px;
	padding: -4px 13.5px;
	margin: -4px -13.5px;
}

.matrix .circle
{
	display: table;
	float: left;
	position: relative;
	top: 0px;
	width: 160px;
	max-width: 160px;
	max-height: 160px;
	height: 160px;
	background-size: 160px 160px;
	padding: 0px 11px;
	margin: 0px -11px;
	border-radius: 80px;
	vertical-align: middle;
	font-size: 12px;
	transition: ease-in-out 250ms;
}

.matrix .circle:hover
{
	top: 10px;
	padding: 21px;
	margin: -21px;
	width: 180px;
	height: 180px;
	max-width: 180px;
	max-height: 180px;
	border-radius: 90px;
	background-size: 180px 180px;
	font-size: 12.3px;
	z-index: 999;
}

.matrix .circle_bg_default 		{ background-image: url(../images/circle.png); border: solid 1px #999; }
.matrix .circle_bg_vitalfeld 	{ background-image: url(../images/vitalfeld.png); }
.matrix .circle_bg_feuer 		{ background-image: url(../images/feuer.png); }
.matrix .circle_bg_luft 		{ background-image: url(../images/luft.png); }
.matrix .circle_bg_erde 		{ background-image: url(../images/erde.png); }
.matrix .circle_bg_wasser 		{ background-image: url(../images/wasser.png); }
.matrix .circle_bg_geist 		{ background-image: url(../images/geist.png); }
.matrix .circle_bg_seele		{ background-image: url(../images/seele.png); }

.matrix .circle .title {
	font-size: 16px;
  	display: table-cell;
  	text-align: center;
  	vertical-align: middle;
	transition: ease-in-out 250ms;
}
.matrix .circle .title:hover {
	font-size: 22px;
}

.matrix .circle span {
  	display: table-cell;
  	text-align: center;
  	vertical-align: middle;
}

.matrix .offset_1 { position:absolute; top: 0px; }
.matrix .offset_2 { position:absolute; top: 160px; }
.matrix .offset_3 { position:absolute; top: 320px; }
.matrix .offset_4 { position:absolute; top: 480px; }
.matrix .offset_5 { position:absolute; top: 640px; }

.matrix .title_matrix
{
	position: absolute;
	right: -106px;
	top: 60px;
	width: 150px;
	font-weight: bold;
	transform: rotate(-90deg);
}


.intro
{
	background-color: #FFF;
}

header
{
	height: 90px;
	background: #FFF;
}

header .header_content
{
	width: 1000px;
	margin: 0 auto;
}

header .header_content .logo
{
	height: 96px;
	margin: 1px auto;
}

.hr_default 			{ border-top: 4px solid #CCCCCC; }
.hr_geist 				{ border-top: 4px solid #3548F9; }
.hr_seele 				{ border-top: 4px solid #8205ff; }
.hr_wasser 				{ border-top: 4px solid #00b0f0; }
.hr_vitalfeld			{ border-top: 4px solid #ff0000; }
.hr_luft				{ border-top: 4px solid #dbd600; }
.hr_erde 				{ border-top: 4px solid #2fc400; }
.hr_feuer 				{ border-top: 4px solid #d67f0c; }

.bg_default				{ background: #CCC; }
.bg_default:hover		{ background: #999; }

.bg_geist				{ background: #7f7fff; }
.bg_geist:hover			{ background: #3548F9; } /*{ background: #0000ff; }*/
.bg_geist_a_2			{ background: rgba(127, 127, 255, 0.5); }
.bg_geist_a				{ background: rgba(0, 0, 255, 0.5); }
.bg_seele				{ background: #c182ff; }
.bg_seele:hover			{ background: #8205ff; }
.bg_seele_a_2			{ background: rgba(193, 130, 255, 0.5); }
.bg_seele_a				{ background: rgba(130, 5, 255, 0.5); }
.bg_wasser				{ background: #7fd7f7; }
.bg_wasser:hover		{ background: #00b0f0; }
.bg_wasser_a_2			{ background: rgba(127, 215, 247, 0.5); }
.bg_wasser_a			{ background: rgba(0, 176, 240, 0.5); }
.bg_vitalfeld			{ background: #ff7f7f; }
.bg_vitalfeld:hover		{ background: #ff0000; }
.bg_vitalfeld_a_2		{ background: rgba(255, 127, 127, 0.5); }
.bg_vitalfeld_a			{ background: rgba(255, 0, 0, 0.5); }
.bg_luft				{ background: #ffff7f; }
.bg_luft:hover			{ background: #dbd600; }
.bg_luft_a_2			{ background: rgba(255, 255, 127, 0.5); }
.bg_luft_a				{ background: rgba(219, 214, 0, 0.5); }
.bg_erde				{ background: #b3ff99; }
.bg_erde:hover			{ background: #2fc400; }
.bg_erde_a_2			{ background: rgba(179, 255, 153, 0.5); }
.bg_erde_a				{ background: rgba(47, 196, 0, 0.5); }
.bg_feuer				{ background: #f8c787; }
.bg_feuer:hover			{ background: #d67f0c; }
.bg_feuer_a_2			{ background: rgba(248, 199, 135, 0.5); }
.bg_feuer_a				{ background: rgba(412, 127, 12, 0.5); }


.container
{
	width: 1200px;
	margin: 0 auto;
}

.sidebar
{
	float: left;
	width: 100px;
}

.sidebar .nav_back
{
	position: relative;
	top: -4px;
	width: 48px;
	z-index: 0;
}

.content
{
	position: relative;
	top: 0px;
	max-width: 1000px;
	margin: 0 auto;
	text-align: justify;
}

.content .link
{
	font-size: 75%;
}

.content .bold
{
	font-weight: bold;
}

.content .quote
{
	font-style: italic;
}

.content img
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.content .noStyle
{
	display: inline-table;
	margin-left: 5px;
	margin-right: 5px;
}

.content .portrait-box
{
	background-color: #e1e8e8;
	padding: 10px 20px;
}

.content .quote-box
{
	background-color: #e1e1e1;
	padding: 20px;
}

.font-color-turquoise
{
	color: #009090;
}

.download
{
	position: fixed;
	right: 0;
	top: 48%;
	width: 64px;
	height: 64px;
	background: #FFF;
	border: solid 1px #CCC;
	border-radius: 5px;
	padding: 10px;
	background-image: url(../images/download_button.png);
	background-size: 64px;
	background-position: 0 0;
	background-repeat: no-repeat;
	transition: ease-in-out 250ms;
}

.download:hover
{
	background-position: 0 -64px;
}

.content .size_small { display: none; }
.content .size_medium  { display: none; }
.content .size_big  { display: block; }

.page-wrap
{
	position: relative;
	margin-right: -50px;
}

.scroller_content
{
	max-width: 1000px;
	transition: ease-in-out 500ms all;
}

.scroller_sidebar 
{
	transition: ease-in-out 500ms all;
	margin-top: 0px;
}

.intro_text
{
	top: 0px;
	margin: 0;
	margin-top: 0px;
	padding: 0 5px;
}

.intro_text .img_1
{
	width: 25%;
	float: left;
	margin-right: 10px;
	padding-bottom: 10px;
}

.intro_text .img_2
{
	float: right;
	margin-top: -75px;
	width: 15%;
}

.title_element
{
	clear: both;
	width: auto;
	min-height: 220px;
	background: #FFF;
	margin: 5px;
	padding: 2px 10px;
	font-size: 16px;
}

.title_element h1
{
	font-size: 24px;
	padding: 0;
}

.title_element .intro
{
	float: left;
	width: 52%;
}

.thema_element
{
	width: auto;
	height: 50px;
	margin: 5px 5px 5px 5px; /* 5% */
	padding: 2px 10px;
	font-size: 16px;
	transition-duration: 500ms;
}

.thema_element:hover
{
	margin: 5px 5px 5px 5%; /* 55% */
	transition-property: margin, background, color;
}

.float_container
{
	overflow: hidden;
	clear: both;
}

.float_left
{
	float: left;
}

.float_right
{
	float: right;
}

footer
{
	float: none;
	padding: 10px 40px;
	padding-top: 0px;
	padding-right: 20px;
	color: #333;
	background-color: #FFF;
}

footer .footer_content
{
	width: 1000px;
	margin: 0 auto;
	padding-left: 10px;
}

footer ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	-webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
}

footer > ul > li 
{
}

footer > ul > li > a 
{
	font-size: 12px;
	padding: 15px 15px;
	color: #999;
	display: inline-block;
}

footer ul li img
{
	width: 16px;
	height: 16px;
	margin-top: 8px;
	margin-right: 6px;
}

ul .home 		{ list-style-image: url(../images/icons/home.png); }
ul .cloud 		{ list-style-image: url(../images/icons/cloud_download.png); }
ul .tv	 		{ list-style-image: url(../images/icons/tv.png); }
ul .telephone 	{ list-style-image: url(../images/icons/telephone2.png); }
ul .paragraph	{ list-style-image: url(../images/icons/symbol_paragraph.png); }
ul .email 		{ list-style-image: url(../images/icons/symbol_at.png); }
ul .printer		{ list-style-image: url(../images/icons/printer.png); }
ul .contact		{ list-style-image: url(../images/icons/id_card.png); }
ul .save 		{ list-style-image: url(../images/icons/floppy_disk.png); }
ul .search 		{ list-style-image: url(../images/icons/magnifying_glass.png); }
ul .puzzle 		{ list-style-image: url(../images/icons/pieces.png); }

/*Formular*/

input
{ 
	font-size: 22px; 
	height: 45px;
	width: 1000px;
	margin: 7px 0 7px 0;
	padding: 0 10px;
	border: none;
	background-color: #FFF;
}

input:focus
{
	background-color: #FFF;
	box-shadow: #666 2px 2px 6px;
}

/* Suchleiste */

nav input
{
	border: 1px solid #CCC;
	width: 150px;
	height: 25px;
	font-size: 15px;
	padding: 5px;
	padding-right: 26px;
	transition: 500ms ease-in-out;
	box-shadow: none;
}

nav input:focus
{
	/*width: 225px;*/
	transition-property: width;
	box-shadow: none;
}

nav button
{
	border: none;
	width: 20px;
	height: 20px;
	padding-top: 10px;
	padding-left: -25px;
	background: none;
	background-image: url(../images/icons/magnifying_glass.png);
	background-size: 23px;
	background-repeat: no-repeat;
}

textarea
{ 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px; 
	min-height: 125px;
	height: 125px;
	width: 1000px;
	padding: 10px;
	border: none;
	margin: 7px 0 7px 0;
	background-color: #FFF;
	resize: vertical;
}

textarea:focus
{
	background-color: #FFF;
	box-shadow: #666 2px 2px 6px;
}

.form_success
{
	width: 400px;
	margin: 10px 0;
}

.form_success img
{
	float: left;
	margin-right: 10px;
}

.form_success span
{
	font-weight: bold;
}

em {
	font-weight: bold;
	font-style: normal;
}

#output a {font-weight: bold;}

.searchword  {color: #222; background-color: #ffd; border: 1px dotted #ffd;}
.searchword0 {color: #222; background-color: #ff0; border: 1px dotted #ff0;}
.searchword1 {color: #222; background-color: #0f0; border: 1px dotted #0f0;}
.searchword2 {color: #222; background-color: #0ff; border: 1px dotted #0ff;}
.searchword3 {color: #222; background-color: #fbb; border: 1px dotted #fbb;}
.searchword4 {color: #222; background-color: #dfd; border: 1px dotted #dfd;}
.searchword5 {color: #222; background-color: #faf; border: 1px dotted #faf;}
.searchword6 {color: #222; background-color: #ccc; border: 1px dotted #ccc;}

.mod {font-size: .85em;}
.mod1 {font-size: .85em;}
.treffer{font-size: .85em; color: #888}

/* Zeilenumbrueche einfuegen: */
/* .treffer:before,  vor der Trefferanzahl */
.mod:before, /* vor der URL */
.mod1:before { /* vor dem Aenderungsdatum */
content: ".";
display:block;
visibility:hidden;
height: 0;
}
	

#searchfooter {
font-size: .8em;
margin-top: 1em;
}

#suchtipheader {display:inline-block;}

#klapp0 {
text-decoration: none;
color: #333;
font-size: .8em;
font-weight:normal !important;
outline:none 0;
}

#suchtipps a:focus, #suchtipps a:hover, #suchtipps a:active {text-decoration: underline;}

#output li {margin: 1em 2.5em  ; clear:left;}

#output li img {
	float:left;
	max-width: 120px;
	margin: 0 1em 1em 0;
}

.weiter, #searchfooter, #output h3 {display:block; clear:left}


/* dfn {display:none;} */
@media screen and (max-width: 1200px) {  


	.matrix_background
	{
		position: relative;
		background-image: url(../images/background.png);
		background-size: 855px 680px;
		width: 850px;
	}

	.matrix
	{
		height: 670px;
		margin: 20px 0;
		/* Inner circle elements between the content circles */
		padding: 0 20px;
		background-image: url(../images/circle_inner.png), url(../images/circle_inner.png), url(../images/circle_inner.png), url(../images/circle_inner.png);
		background-size: 116px 67px;
		background-position: 78px 100px,  78px 234px,  78px 368px,  78px 502px;
		background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
	}

	.matrix .circle_static
	{
		display: table;
		float: left;
		position: relative;
		display: block;
		top: 0px;
		width: 138px;
		max-width: 138px;
		max-height: 138px;
		height: 138px;
		background-size: 138px 138px;
		padding: -4px 11px;
		margin: -4px -11px;
	}
	
	.matrix .circle
	{
		display: table;
		float: left;
		width: 134px;
		max-width: 134px;
		max-height: 134px;
		height: 134px;
		background-size: 134px 134px;
		padding: 0px 9px;
		margin: 0px -9px;
		border: solid 1px #999;
		border-radius: 67px;
		vertical-align: middle;
		font-size: 11px;
		transition: ease-in-out 250ms;
	}
	
	.matrix .circle:hover
	{
		padding: 19px;
		margin: -19px;
		width: 154px;
		height: 154px;
		max-width: 154px;
		max-height: 154px;
		border-radius: 77;
		background-size: 154px 154px;
		font-size: 13px;
	}
	
	.matrix .circle .title {
		font-size: 16px;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		transition: ease-in-out 250ms;
	}
	.matrix .circle .title:hover {
		font-size: 22px;
	}
	
	.matrix .circle span {
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}
	
	.matrix .offset_1 { position:absolute; top: 0px; }
	.matrix .offset_2 { position:absolute; top: 134px; }
	.matrix .offset_3 { position:absolute; top: 268px; }
	.matrix .offset_4 { position:absolute; top: 402px; }
	.matrix .offset_5 { position:absolute; top: 536px; }
	
	.matrix .title_matrix
	{
		position: absolute;
		right: -106px;
		top: 35px;
		width: 150px;
		font-size: 12px;
		font-weight: bold;
		transform: rotate(-90deg);
	}


	header
	{
		height: 100px;
		background: #FFF;
	}
	
	header .header_content .logo
	{
		height: 90px;
		margin: 5px auto;
	}
	
	header .header_content
	{
		width: 800px;
		margin: 0 auto;
	}

	.container
	{
		width: 1000px;
		margin: 0 auto;
	}
	
	.content
	{
		max-width: 800px;
		margin: 0 auto;
	}


	.scroller_content
	{
		max-width: 800px;
	}
	
	footer .footer_content
	{
		width: 800px;
		margin: 0 auto;
	}

	footer ul
	{
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
	}
	
	input
	{ 
		width: 800px;
	}

	nav input:focus
	{
		/*width: 240px;*/
		transition-property: width;
		box-shadow: none;
	}

	textarea
	{ 
		width: 800px;
	}
	
}


@media screen and (max-width: 1000px)
{
	.matrix_background
	{
		position: relative;
		background-image: url(../images/background.png);
		background-size: 605px 485px;
		width: 605px;
	}

	.matrix
	{
		height: 480px;
		width: 600px;
		margin: 20px 0;
		/* Inner circle elements between the content circles */
		padding: 0 20px;
		background-image: url(../images/circle_inner.png), url(../images/circle_inner.png), url(../images/circle_inner.png), url(../images/circle_inner.png);
		background-size: 82px 47px;
		background-position: 60px 72px,  60px 168px,  60px 264px,  60px 361px;
		background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
	}

	.matrix .circle_static
	{
		display: table;
		float: left;
		position: relative;
		display: block;
		top: 0px;
		width: 100px;
		max-width: 100px;
		max-height: 100px;
		height: 100px;
		background-size: 100px 100px;
		padding: -4px -9px;
		margin: -4px -9px;
	}
	
	.matrix .circle
	{
		display: table;
		float: left;
		width: 96px;
		max-width: 96px;
		max-height: 96px;
		height: 96px;
		background-size: 96px 96px;
		padding: 0px 7px;
		margin: 0px -7px;
		border: solid 1px #999;
		border-radius: 52px;
		vertical-align: middle;
		font-size: 9px;
		transition: ease-in-out 250ms;
	}
	
	.matrix .circle:hover
	{
		padding: 12px;
		margin: -12px;
		width: 108px;
		height: 108px;
		max-width: 108px;
		max-height: 108px;
		border-radius: 62;
		background-size: 108px 108px;
		font-size: 9px;
	}
	
	.matrix .circle .title {
		font-size: 16px;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		transition: ease-in-out 250ms;
	}
	.matrix .circle .title:hover {
		font-size: 22px;
	}
	
	.matrix .circle span {
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}
	
	.matrix .offset_1 { position:absolute; top: 0px; }
	.matrix .offset_2 { position:absolute; top: 96px; }
	.matrix .offset_3 { position:absolute; top: 192px; }
	.matrix .offset_4 { position:absolute; top: 288px; }
	.matrix .offset_5 { position:absolute; top: 384px; }
	
	.matrix .title_matrix
	{
		position: absolute;
		right: -97px;
		top: 5px;
		width: 150px;
		font-size: 9px;
		font-weight: bold;
		transform: rotate(-90deg);
	}

	.page-wrap
	{
		position: relative;
		margin-right: 0px;
	}

	header
	{
		height: 100px;
		background: #FFF;
	}
	
	header .header_content .logo
	{
		height: 90px;
		margin: 5px auto;
	}
	
	header .header_content
	{
		width: 600px;
		margin: 0 auto;
	}
	
	.container
	{
		width: 675px;
		margin: 0 auto;
	}
	
	.sidebar
	{
		float: left;
		width: 75px;
	}
	
	.sidebar .nav_back
	{
		position: relative;
		top: 4px;
		width: 32px;
		z-index: 0;
	}
	
	.content
	{
		max-width: 600px;
		margin: 0 auto;
	}
	
	
	.scroller_content
	{
		max-width: 600px;
	}
	
	.content .size_small { display: none; }
	.content .size_medium  { display: block; }
	.content .size_big  { display: none; }
	
	.title_element .intro
	{
		width: auto;
		padding: 8px;
	}
	
	.thema_element
	{
		clear: both;
		width: auto;
		height: 50px;
		margin: 5px 5px 5px 5px;
		padding: 2px 10px;
		font-size: 16px;
		transition-duration: 500ms;
	}
	
	.thema_element:hover
	{
		margin: 5px 5px 5px 5%;
		transition-property: margin, background, color;
	}
	
	footer .footer_content
	{
		width: 600px;
		margin: 0 auto;
	}
	
	input
	{ 
		width: 600px;
	}

	nav input
	{
		width:85px;
		margin-top: 0px;
	}

	nav input:focus
	{
		/*width: 125px;*/
		transition-property: width;
		box-shadow: none;
	}
	
	nav button
	{
		border: none;
		width: 23px;
		height: 23px;
		padding-top: 9px;
		margin-left: -25px;
		background: none;
		background-image: url(../images/icons/magnifying_glass.png);
		background-size: 23px;
		background-repeat: no-repeat;
	}

	textarea
	{ 
		width: 600px;
	}
}

@media screen and (max-width: 600px)
{  
	.content .size_small { display: block; }
	.content .size_medium  { display: none; }
	.content .size_big  { display: none; } 
}