body{
	display: grid;
	grid-template-columns: auto 10% 50% auto;
	grid-template-rows: auto auto auto auto ;
	grid-template-areas:
		". header header ."
		". nav nav ."
		". sidebar main. "
		". footer footer .";

}

header{
	grid-area: header;
	text-align: center;
}

nav{
	grid-area: nav;
}

.sidebar{
	grid-area: sidebar;
}

main{
	grid-area: main;
	text-align: center;
}

main h2{
	text-align: center;
}

footer{
	grid-area: footer;
}

main .staffselect{
	display: inline;
	margin-left: auto;
	margin-right: auto;
}

main button{
	background: none;
	border: none;
	outline: none;
	padding: none;
	text-decoration: none;
	background-color: #009639;
	padding: 10px 20px 10px 20px;
	margin-right: 20px;
	margin-left: 20px;
	border: solid 0px;
	border-radius: 15px;
	color: white;
}


main #pictures{
	margin: 20px;
	border: solid #009639 2px;
	display: grid;
	grid-template-columns: 50% 50%;
}

main #mieke{
	margin:20px;
	border: solid 2px #009639;
	display: grid;
	grid-template-columns: 50% 50%;
	text-align: left;
	display: none;
}

main #trevor{
	margin: 20px;
	border: solid 2px #009639;
	display: grid;
	grid-template-columns: 50% 50%;
	text-align: left;
	display:none;
}

#mieke p{
	padding: 20px;

}

#trevor p{
	padding: 20px;
}



.trevor-text{
	background-image: url(../../../images/mieke-opaque.png);
	background-size: 100%;
}

.mieke-text{
	background-image: url(../../../images/trevor-opaque.png);
	background-size: 100%;
}

#mieke-photo{
	margin: 0px;
	padding: 0px;
	width:100%;
}

#trevor-photo{
	margin: 0px;
	padding: 0px;
	width:100%;
}