@charset "UTF-8";

/****************Global*******************/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
    background-color: #E9F7E3;
    max-width: 1200px;
    margin: 0 auto;
	padding: 0;
	-webkit-font-smoothing: subpixel-antialiased;
}
/************Header*****************/
header {
    visibility: visible;
    margin: 2em auto;
}
h1 {
    font-family: objektiv-mk1, sans-serif;
    font-size: 2.5rem;
	text-align: center;
    margin: 0;
}
h2 {
    font-family:"park-lane", serif;
	font-size: 1.3rem;
    letter-spacing: .1em;
	text-align: center;
}
/*************Navigation Roundels*************/
#grid-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    grid-template-rows: repeat(3, minmax(100px, auto));
    grid-gap: 1vw;
    max-width: 75%;
    height: auto;
	margin: 0 auto;
}
.fig-item {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	margin: 0;
}
.caption, 
.base-fig,
.hover-fig {
	grid-column: 1;
	grid-row: 1;
}
.caption {
	font-family:"park-lane", serif;
    font-size: 1.2vw;
}
.hover-fig > img {
	opacity: 0;
    transition: opacity .2s;
	transition-timing-function: linear;
 }
.hover-fig > img:hover {
    opacity: 1;
}
/*************Footer*****************/
footer {
/*    visibility: hidden;*/
	margin: 3em auto;	
	text-align: center;
}
/*************media Queries***************/
@media screen and (max-width: 650px) {
	h1 {
		font-size: 2rem;
	}
	h2 {
		font-size: 1.2rem;
	}
	.grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(4, auto);
		grid-gap: 1vw;
		width: 75%;
		margin: auto;
	}
    .caption {
    font-size: 25%;
}
    header {
        margin: 2em auto;
    }
    footer {
        margin: 2em auto;
    }
.contact {
	text-align: center;
}
}