/* wrapper and banner */


.wrapper {
	margin: 0 auto;
}

.wrapper > header {
	background-color: #eee;
	margin: 0;
	padding: 10px;
}

.logo img {
	width: 150px;
}
.logo a:hover, .logo a:focus {
	background-color: white;
}

nav > ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.smaller {
	font-size: 10px;
}


/* ==== Heydon's grid for the gallery https://github.com/Heydon/fukol-grids/ ====*/
.fukol-grid {
  display: flex; 
  flex-wrap: wrap; 
  margin: -0.5em;
}

.fukol-grid > * {
  flex: 1 0 15em; 
  margin: 0.5em; 
}

ul.fukol-grid {
	list-style-type: none;
	margin: 0;
	padding: 0;
}


/* =========== Pixel layout 1 ============= */
.pixel-layout .wrapper {
	width: 1000px;
}

/* Percentage layout */

.percentage-layout .wrapper {
	max-width: 1100px;
}

/* Percentages-RWD layout */

.percentage-rwd .wrapper {
	padding: 0 1em;
}



@media screen and (min-width: 900px) and (min-height: 300px) {

/* wrapper and banner */
	nav > ul {
		display: flex;
		align-items: center;
	}

	nav > ul li {
		flex: 1 0 auto;
		display: flex;
	  	flex-direction: column;
	}
	.smaller {
		font-size: 16px;
	}

	/* Put the logo in the middle, effect & code from https://www.christianheilmann.com/ */
	nav > ul li:first-child {
		order: 1;
		margin-bottom: 10px;
	}
	nav > ul li:nth-of-type(n+5) {
		order: 2;
	}

	nav a {
		display: block;
		text-align: center;
		text-decoration: none;
		padding: 3px 0;
		height: 100%;
	}
	nav a:hover, nav a:focus {
		text-decoration: underline;
	}

	/* =========== General layout ============= */

	.row {
		display: flex;
	}

	.row main {
		flex: 9;
		padding: 1em 2em 1em 1em;
	}
	.row aside {
		flex: 4;
		padding: 1em;
	}
	.row.panels {
		justify-content: space-between;
	}
	.panel {
		width: 31%;
		padding: 0.5em;
		outline: 1px grey solid;
	}

	/* Misc content layout */

	main .img-right {
		max-width: 40%;
		float: right;
		margin: 0 0 1em 1em;
	}


}