@charset "utf-8";
/* CSS Document 

font-family: itc-avant-garde-gothic-pro,sans-serif;
font-weight: 700;
font-style: normal;

font-family: itc-avant-garde-gothic-pro,sans-serif;
font-weight: 300;
font-style: normal;

*/

body {
	padding: 1em;
}

.container {
	/* font-family: itc-avant-garde-gothic-pro,sans-serif; */
	/* font-weight: 300; */
	font-family: Helvetica, Arial, Lucida, sans-serif;
	font-style: normal;
}

#menu {
}

#main {
	margin: 3em 0;
	font-size: 1em;
	line-height: 1.5em;
}

footer {
}

#logo {
	width: 4em;
}

h1 {
	font-family: itc-avant-garde-gothic-pro,sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 2em;
}


h2 {
	font-family: itc-avant-garde-gothic-pro,sans-serif;
	font-weight: 300;
	font-style: normal;
}

h1 > span {
    display: block;
}

h2 > span {
    display: block;
}

a {
	color: black;
	background: yellow;
}

a:hover {
	background: pink;
}

@media only screen and (min-width: 706px) {
	
	.container {
		display: grid;
		grid-gap: 3em;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		/* font-family: itc-avant-garde-gothic-pro,sans-serif; */
		font-weight: 300;
		font-style: normal;
	}

	#menu {
		grid-column: 1 ;
		grid-row: 1 / span 2;
	}
	
	#main {
		margin: 4em 0 0;
		font-size: 1em;
		grid-column: 2 / span 3;
		grid-row: 1;
	}
	
	
	footer {
		grid-column: 2 / span 2;
		grid-row: 2;
	}

}

@media only screen and (min-width: 1000px) {
	
	body {
		padding: 3em;
	}	
	#main {
		grid-column: 2 / span 2;
	}
}