@import url('https://fonts.googleapis.com/css?family=Itim');

html{
	font-family: "Itim", cursive;
	background: #1b5e20
}
#the_team article{
	width: 300px;
	margin: 1em;
}
#the_team *{
	margin: 0;
}
#the_team h2{
	text-align: center;
	margin: 0.25em;
}
figure{
	display:inline;
}
img{
	margin:1em;
}
header{
	font-family:new times roman;
	color:white;
	border:.2em;
	border-color:#1b5e20;
	border-style:solid;
	border-radius:1em;
	text-align:center;
	background:linear-gradient(#1b5e20,#00c853);
	margin:1em;
}

th, td{
	border:solid 1px black;
}
caption{
	border: solid black 2px;
	border-bottom: none;
} 
table{
	border: solid black 2px;
	margin:1em;
}
textarea{
	display:block;
}
.hidden{
	display:none;
}
.slide_show img+img{display:none;}
/*form .parent{
	display:none;
}*/
header canvas{
    border-radius:1.5em 1em;
    margin-bottom:1em;
}
#the_team *{
	border: none;
}
#the_team p{
	padding: 1em;
}
aside,main{
	background-color:white;
	border:0.5em;
	border-color:white;
	border-radius: 1em;
	padding:1em;
	margin:1em;
}
nav a{
    text-decoration: none;
    color: black;
}
nav > ul{
    list-style: none;
    text-align: center;
    padding: 0em;
	
}
nav{
    background: linear-gradient(to right,#43a047,#66bb6a,#43a047);
    border-radius: 0.5em;
    padding: 0.5em 0em;
	margin: 1em;
	height:175px;
}    
nav li{
    padding: 0.25em;
}
nav li:nth-child(odd) {
    background: linear-gradient(to right,#43a047,#388e3c,#43a047);
    
}
nav a:hover{color:red;}
#address{
	list-style-type: none;
	padding: 0em;
}
#map{
	padding-top:2em;
	padding-left:1em;
	max-width: 100%;
}
@supports (display: grid){
	@media screen and (min-width:530px){
		body{
			display:grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: auto;
			grid-template-areas: "top top" "left right" "bottom bottom";
		}
		header{grid-area:top;}
		nav{grid-area:left;}
		aside{grid-area:right;}
		main{grid-area:bottom;}
	}
	@media screen and (min-width:1028px){
		body{
			display:grid;
			grid-template-columns: 25% 75%;
			grid-template-rows: auto;
			grid-template-areas: "top top" "middle-left right" "bottom-left right";
		}
		header{grid-area:top;}
		nav{grid-area:middle-left;}
		aside{grid-area:bottom-left;}
		main{grid-area:right;}
	}
}
@supports not (display: grid){
	header{order:1;}
	nav{order:2;}
	aside{order:3;}
	main{order:4;}
	@media screen and (min-width:530px){
		body{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
		header {
		    flex-basis: 100%;
		}

		nav, aside {
		    flex-grow: 1;
		}

		main { 
		    flex-grow: 3;
		}
	}
	@media screen and (min-width:1028px){
		body{
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
		}
		header{
		    width: 100%;
		}

		nav, aside {
		    width: 25%;
		}

		main { 
		    width: 75%;
		}
	}
}