/* Main CSS file for the site eish.de */
	* {
		box-sizing: border-box;
	}
	html {
		font-family:sans-serif;
	}
	BODY {
		color:#C0C0C0;
		background-color: #FFFFFF;
	}
	A {
		text-decoration: none;
		color: #F0F0F0;
	}
	DIV {
		border-style: double;
		border-width: 0.5em;
		border-radius: 1em;
		border-color: transparent;
	}
	.row::after {
		content: "";
		clear: both;
		display: block;
	}
	[class*="col-"] {
		float: left;
		padding: 0.5em;
		background-color: #3a3b3a;
	}
	.header {
		width: 100%;
		background-color: #797a79;
		padding: unset;
	}
	.header::after {
		content: "CSS is sometimes enough";
	}
	.menu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: inline-flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.menu li {
		background-color: #4d4f4e;
		padding: 0.5em;
		margin-bottom: 0.5em;
		font-style: italic;
		border-radius: 1em;
		display: list-item;
	}
	.menu li:hover {
		background-color: #8d8f8e;

	}
	.menu A {
		font-style: normal;
		padding: 0.25em;
		color: #F0F0F0;
		font-weight: bold;
		display: block;
		border-radius: 1em;
	}
	.menu A:hover {
		color: #4d4f4e;
		font-weight: bold;
		background-color: #7b92b8;
		border: 0.25em solid #32496e;
		display: block;
		padding: 0;
	}
	.footer {
		background-color: #797a79;
		padding: 1em;
	}
	[class*="col-"] {
		width: 100%;
	}
	.trademark {
		border: 1px solid silver;
		background-color: gold;
		color: black;
		padding: 0 0.5em;
		border-radius: 0.5em;
	}
	@media only screen and (max-width: 799px) {
	/* For mobile: */
		.header H1::before {
			content: "Mobile ";
		}
		.header {
			background: url("/img/mobile.svg") left top no-repeat;
			background-size: 48px 72px;
		}	
		.menu LI A {
			font-weight: bold;
			border-radius: 3em;
			padding: unset;
		}
		.menu LI A:hover {
			border-radius: 3em;
			border: unser;
			padding: unset;
			color: #4d4f4e;
			font-weight: normal;
			background-color: #7b92b8;
		}
		.menu {
			text-align: center;
		}

		.menu li {
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			justify-content: center;
			margin: 1em;
			padding: unset;
			border-radius: 3em;
		}
	}
	@media only screen and (min-width: 800px) {
	/* For tablets : */
		.menu A {
			width: 100%;

		}
		.menu ul {
			display: inline-flex;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: flex-end;
		}
		.menu li {
			display: inline-block;
		}
		.header H1::before {
			content: "Tablet ";
		}
		.header {
			background: url("/img/tablet.svg") left top no-repeat;
			background-size: 53px 75px;
		}
	}
	@media only screen and (min-width: 1024px) {
	/* For desktop: */
		.header H1::before {
			content: "Desktop ";
		}
		.header {
			background: url("/img/desktop-monitor.svg") left top no-repeat;
			background-size: 74px 105px;
		}
		.menu ul {
			display: block;
		}
		.menu li {
			display: inline-block;
		}
		.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%;}
	}