@charset "utf-8";

html, body {
		height: 100%;
		width: 100%;
	}
		header {
			border-style: solid;
			background-color: #f60;
			font-family: sans-serif;
			text-align: center;
			color: #fff;
			border-color: #000;
			-webkit-box-shadow: 4px 3px 7px 0px rgba(50, 50, 50, 0.95);
			-moz-box-shadow:    4px 3px 7px 0px rgba(50, 50, 50, 0.95);
			box-shadow:         4px 3px 7px 0px rgba(50, 50, 50, 0.95);
			min-height: 15%;
		}

		#main {
			height: 70%;
		}

		.container {
			height: 70%;
			display: -webkit-flex;
			display:         flex;
			flex-flow: row;
			padding: 1%;
		}

		.fotito {
			flex: 1 1 20%;
			order: 1;
			padding: 2%;
			margin: 2%;
		}

		video {
			flex: 1 1 20%;
			order: 3;
			padding: 2%;
			margin: 2%;
		}

		iframe {
			flex: 1 1 20%;
			order: 2;
			padding: 2%;
			margin: 2%;
		}

		ul {
			list-style-type: none;
			margin: 0px;
			padding: 0px;

		}

		li {
			display: inline;
		}

		ul li a {
			padding: 0.5%;
			text-decoration: none;
			font-family: sans-serif;
			display: block;
			float: left;
			-webkit-box-shadow: 4px 3px 7px 0px rgba(50, 50, 50, 0.95);
			-moz-box-shadow:    4px 3px 7px 0px rgba(50, 50, 50, 0.95);
			box-shadow:         4px 3px 7px 0px rgba(50, 50, 50, 0.95);
		}

		#FotoPeter {
			max-width: 20%;
			float: left;
		}

		img {
			max-width: 100%;
			max-height: 100%;
		}

		.clear {
			clear: both;
		}

		footer {
			text-align: center;
			display: block;
			position: bottom;
			min-height: 15%;
		}