html, body {
	height: 100%;
/*color: grey;*/
}

body {
	display: table;
	width: 100%;
	margin: 0 auto;
	background-color: white; /* yellow; */
}

.section {
	background-color: white; /* orange; */
	display: table-row;
}

a:link {
	color: #555; /* #ffffff; black #000  color: #4C281A;*/
	text-decoration: none;
}

a:visited {
	color: #555; /* grey */
	text-decoration: none;
}

a:hover {
	color: red;   /* #B6D4DE;*/
	text-decoration: none;
}

a:focus {
	outline: none; /*gepunktete Linie um geklickte Links wird unsichtbar*/
}

div.header {
	width: 100%;
	height: 40px;
	background-color: white;
        /*color: grey;*/
/*margin: 1.0em 1.0em 0.0em 0.0em; oben,rechts,unten,links */
	/*text-align: left;*/
        /*text-decoration: none; none; solid; double; dotted; dashed; wavy; */
	/* clear: both; clear bewirkt, dass das Ende fließender Spalten erkannt und Inhalt übernommen wird. */
}

div.textheader {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 28px;
	color: grey; /* black #000 */
        /*display: flex;*/
	text-align: left;
        margin-left: 1.6em;
	/*padding: 2px 0 0 0;*/
        padding: 1.0em 0.0em 1.0em 0.0em; /* oben,rechts,unten,links */
}

nav {
  background-color: white !important; 
  /*color: white;*/
  text-align: center;
  /*text-decoration: none; none; solid; double; dotted; dashed; wavy; */
height: 24px;
}

.main {
	height: 100%;
        width: 100%; 
	background-color: white; /* deepskyblue; */
}

div.footer {
	width: 100%;
	height: 40px;
	background-color: white;
        color: #555;
	/*text-align: center;*/
}

div.textfooter {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	/*font-size: 28px;*/
        /*margin: 1.0em 1.0em 0.0em 0.0em;  oben,rechts,unten,links */
	color: #555; /* black #000 */
        /*display: flex;*/
	text-align: center;
        /*margin-left: 1.6em;*/
	padding: 3.0em 1.0em 2.0em 0.0em; /* oben,rechts,unten,links */
}

* {
    margin: 0;
    padding: 0;
}



@media all and (min-width: 10em) {
/*@media all and (min-width: 10em) {*/
/*@media screen and (max-width: 600px) {*/
/*@media screen and (max-width: 992px) {*/

	button {
        margin-top: 2.0em; /*margin-right; margin-bottom; margin-left;*/
        margin-left: 0.6em;
        margin-bottom: 0em;
        margin-right: 1.4em;
        border: 0px solid #fff; /* frame thickness + color*/
        background: #fff;                
        /*padding-top; padding-right; padding-bottom; padding-left;*/
        /*float: left;*/
	width: 15em;
	height: 15em;
        color: grey;  /* text color*/
        font-size: 24px; /* text */
	/*position: relative;*/ 
	}

	button img {
        border: 0px solid #fff; /* white */
        box-shadow: 16px 16px 19px #888888; /* +-hor, +-ver, blur, color */
        cursor: pointer; /*pointer; all-scroll;*/
	width: 12em; /* 55% */ 
        /*position: relative;*/ 	
	z-index: 1;
	transition: all ease 1s;
	}

    button:focus img, 
    button:hover img {
	border: 0px solid #fff; /*frame thickness + color*/
	/*border-radius: 1em;*/
        /*padding-left: 1.6em; padding-top; padding-right; padding-bottom; padding-left;*/
	box-shadow: 19px 19px 19px #888888;
	width: 250%;
        /*max-width: 200%;*/
        position: relative;
        margin: 0px auto;
        background-position: center 0px;
        z-index: 5;
	transition: all ease 1s; 
        /*transform: rotate(360deg); */		
	}
}