/*************************************************/
header, main, article, section, aside, nav, footer {
	display: block;
}
body {
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	color: #564b47;
	padding: 40px;
/* Abstand vom Rand */background-image: url('P1090189.JPG');
	overflow: scroll;   /* Scrollbar erzwingen, sonst sprint die Seite */
}
img {
	max-width: 100%;
	height: auto;
}
/* ----------header for logo
	background: yellow;
	background-repeat: inherit;

-------------- */
header {
	padding: 5px;
	background-image: url('P1090189.JPG');
}
header p {
	text-transform: uppercase;
	font-size: 15px;
}
header img {
	position : absolute;
	z-index: auto;
	left: 10px;
	top: 20px;
}
header ul#header-top {
	position : absolute;
	text-transform: uppercase;
	font-size: 15px;
	border-top: 10px solid red;
	border-left: 10px solid blue;
	top: 20px;
	float: right;
	right: 10px;
}
.logo {
	font-size: 22px;
	padding-top: 10 px;
	text-align: left;
	text-decoration: none;
	font-style: italic;

}
/*************************************************/
main {
	font-size: 16px;
}
/**	background: #00FFFF;    **/
article {
	font-size: 16px;
}
div#breadcrumbs, section#intro, section#motivation, section#subpage1 {
	padding-left: 40px; /* Abstand vom Rand */;
	padding-right: 40px; /* Abstand vom Rand */;
	left: 22%; /* Abstand von links in % */; /*	width: 50%;               durch class col_* Angabe ersetzt */;
	margin-left: 21%;
	margin-right: 15%;
}
/*************
section#intro, section#motivation {
	padding: 40px;   /* Abstand vom Rand *
	font-size: 16px;
	left: 22%; /* Abstand von links in % *;
	width: 50%;
	margin-left: 21%;
	margin-right: 15%;
}
***********/
section#intro, section#motivation, section#subpage1 {
	background: #669999;
}
nnav {
	float: right;
}
aside {
	/** background-color: #808000;  **/
	width: 150 px;
	hight: 400 px; /**	left: 90%; **/;
	float: right;
}
/*************************************************/
.headertext {
	background-position: center 28%;
	margin: 15px 0px 15px 100px;
	position: relative; /**	background: #0099FF;    **/;
	clear: both;
	text-align: center; /*	width: 700px;   */;
	border: 10px solid rgba(0,0,0,.3);
	padding: 10px 15px;
	box-shadow: 0px 1px 3px rgba(0,0,0,.2);
	font-style: italic;
	background-image: url('dsc_0339.JPG');
	background-image: url('p1010506.jpg');
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
}
/*********
h1 {
	border-right-style: groove;
	border-top-style: double;
	padding-bottom: 10px;
}
********/
h2 {
	border-right-style: groove;
	border-bottom-style: double;
	font-style: italic;
	padding-left: 20px;
}

/************** Animation *****/
h1 {
	animation-duration: 3s;
	animation-name: slidein;
	animation-play-state: running;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}
.box {
	border-style: solid;
	border-width: 1px;
	display: block;
	width: 100px;
	height: 100px;
	background-color: #0000FF;
	-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
	transition: width 2s, height 2s, background-color 2s, transform 2s;
	background-image: url('img/1448234168_twitter.png');
}
.box:hover {
	background-color: #FFCCCC;
	width: 200px;
	height: 200px; //;
	-webkit-transform: rotate(180deg); //;
	transform: rotate(180deg);
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
/*************************************************

/***section#hinweis { 
//	margin: 10% auto 0em auto;
//width: 40em; //;
//	height: 10em;
//	visibility: hidden;
style="right: -67%; top: -79px; width: 86%; height: 106px"
style="right: -96%; top: -59px" 
***/
section#hinweis {
	padding: 5px 15px 5px 5px;
	background: #f1f3f4;
	border-left: 10px solid #c32e04;
	left: 30%; /* Abstand von links in % */;
	position: relative;
	width: 60%;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	z-index: 17;
	color: #FF0000;
	visibility: hidden;
	float: right;
	right: -67%;
	top: -120px;
	width: 86%;
}
/*************************************************/
/* -------------- navigavtion------------- */
nav#mynav {
	font-size: 16px;
	background: white;
	padding: 16px;
/* Abstand vom Rand */left: 2%;
	top: 150px;
	float: left;
	list-style-type: square;
}
#mynav ul {
	margin: 0;
	padding: 0;
	text-align: left;
	float: left;
	list-style-type: square;
	position: relative;
	background: width: 100%;
	background-color: #FFFFCC;
	background-color: pink;

}
#mynav li {
	/* kleiner Balken vor dem Text */ 
	list-style: none;
	position: relative;
	margin: 0 0 .5em 0;
	padding: 8 px;
	border: 3px solid #73AD21;
	box-shadow: 0 5px 10px white inset;
	color: #00FF00;
}
#mynav ul ul {
	top: 0em;
	left: 99%;
	font: 0/0 serif; /*Unternavigation ausblenden*/;
	z-index: -1;
	transition: font 0.5s;
	background-color: #FFFFCC;
	float: left;
	position: absolute;
	width: 100%;
}
#mynav li li {
	list-style: none;
	position: relative;
	margin: 0 0 .2em 0;
	padding: 0;
}
#mynav ul li a:before {
	content: " ";
	display: inline-block;
	width: 10px;
	height: 15px;
	border-left: 5px solid #CCC;
}
#mynav ul li:hover ul {
	font: inherit;
	z-index: auto;
	/*Unternavigation einblenden*/
}
#mynav ul ul {
	display: none;
}
#mynav ul li:hover ul {
	display: block;
}
#mynav a:hover {
	/* aktuelle Unterseite kennzeichnen */
	
	background-color: gold;
}
/* For desktop: */
.colheader-1 {
	width: 8.33%;
}
.colheader-10 {
	width: 83.33%;
}
.colheader-12 {
	width: 100%;
}
.col-1 {
	width: 8.33%;
}
.col-2 {
	width: 16.66%;
}
.col-3 {
	width: 25%;
}
.col-4 {
	width: 33.33%;
}
.col-5 {
	width: 41.66%;
}
.col-6 {
	width: 50%;
}
.col-7 {
	width: 58.33%;
}
.col-8 {
	width: 66.66%;
}
.col-9 {
	width: 75%;
}
.col-10 {
	width: 83.33%;
}
.col-11 {
	width: 91.66%;
}
.col-12 {
	width: 100%;
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
	width: 70%;
	clear: left;
}
[class=colheader-1] {
	width: 16.66%;;
	clear: left;
}
[class=colheader-10] {
	width: 100%;
	clear: left;
}
nav#mynav ul ul {
	display: none;
	margin: 0 0 0 -10em;
}
section#intro, section#motivation, section#subpage1 {
	padding-left: 20px;
	left: 22%;
	width: 91.66%;
	margin-left: 2%;
	font-size: 16px;
}
h1.headertext {
	margin: 85px 0px 20px 10px;   /* oben, links, unten, rechts */
}
section#hinweis {
	clear: left;
}
aside {
	background-color: #808000;
	width: 350 px;
	float: right;
	overflow: auto;
	margin-right: -9%;
}
}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
section#motivation, section#subpage1 {
	padding-left: 40px; /* Abstand vom Rand */;
	font-size: 16px;
	left: 22%; /* Abstand von links in % */ //;
	width: 83.33%;
	margin-left: 21%;
	margin-right: 5%;
}
}
/*************************************************/
div#breadcrumbs {
	content: "";
	border-top: 10px solid red;
	border-left: 10px solid blue;
	top: 0;
	font-size: 10px;
}
/*** Buttons**************************************/
.button {
	display: inline-block;
	padding: 15px 25px;
	font-size: 24px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	outline: none;
	color: #fff;
	background-color: #4CAF50;
	border: none;
	border-radius: 15px;
	box-shadow: 0 9px #999;
}
.button:hover {
	background-color: #3e8e41;
}
.button:active {
	background-color: #3e8e41;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
}
/*************************************************/
/* -----------footer--------------------------- */
footer {
	clear: both;
	background-color: darkgray;
	color: #FFFFFF;
	text-decoration: blink;
	padding-bottom: 20px;
	text-align: center;
	bottom : 0px;
/****	   position: fixed;
	   width: 80%     ***/
}
section#ipv6 {
	padding: 5px;
	background-color: #3399FF;
	float: right;
	text-align: left;
	clear: right;
	color: #000000;
}
.datum {
	float: left;
	padding: 5px;
	background: #ddd;
	text-align: right;
	border: 3px solid #3399ff;
	overflow: auto;
	color: #339;
}
.floating-box {
	float: inherit;
	text-align: center;
}
toplink {
	border: 3px solid #0000FF;
	font-size: 18px;
}
/*************************************************/
.dummy {
	opacity: 0.5;
	display: block;
}
div#vorher {
	visibility: visible;
}
.fadein, .fadeout {
	opacity: 0;
	-moz-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	-webkit-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
}
.fadein {
	opacity: 1;
}