/*  all the em & rem measurements start from this setting  
--------------------------------------------------------------------------------------- */
html { font-size: 16px; }


/*  global styles to reset default values  
--------------------------------------------------------------------------------------- */
*,
*:before,
*:after { box-sizing: border-box; }

body, div, ul, li, img, video, section, figure, figcaption, main, footer, 
h1, h2, h3, p, a { margin: 0; padding: 0; border: 0; }

body { background: #ffff; }

html {
  height: 100%;
}
body {
  min-height: 100%;
}

/*  this sets page width: 60em = 960px  75em = 1200px
--------------------------------------------------------------------------------------- */
.container { max-width: 60em; max-width: 75em; }
.container { margin :0 auto; background: #fefefe; }


/* example web font styles using IBM Plex Sans
--------------------------------------------------------------------------------------- */
@font-face {
    font-family: OpenSans;
    src: url(fonts/OpenSans-Regular-webfont.woff);
    font-weight: normal;
}

@font-face {
    font-family: OpenSansItalic;
    src: url(fonts/OpenSans-Italic-webfont.woff);
    font-weight: italic;
}

@font-face {
    font-family: OpenSansSemibold;
    src: url(fonts/OpenSans-Semibold-webfont.woff);
}

@font-face {
    font-family: Fraunces;
    src: url(fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf);
    font-weight: 100 900;
}

@font-face {
    font-family: Fraunces-Italic;
    src: url(fonts/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.ttf);
    font-style: normal;
	font-weight: 100 900;
}


body		{ font-family: OpenSans, Arial, sans-serif; }
h1, h2, h3	{ font-family: OpenSans, Arial, sans-serif; }
p			{ font-family: OpenSans, Fraunces, Georgia, Arial, sans-serif; font-weight: 400;}
figcaption	{ font-family: OpenSans, Georgia, sans-serif; }


nav li, .nav  { font-family: OpenSans, Arial, sans-serif; }


/*  top navigation section  
--------------------------------------------------------------------------------------- */
nav 	{ 
	padding: .5rem 0.5rem 0.5rem 0.5rem;
	margin-bottom: 1rem;
	border-bottom: 2px;
	min-height: 2rem;  
 }
nav h1	{ font-size:1.5em; margin-bottom:.5em;}
nav a	{ white-space: nowrap; }

nav ul		{ list-style-type:none; }
nav ul li	{ display:inline; margin-right:.5rem; }



/*  hero image
--------------------------------------------------------------------------------------- */
.container > figure { margin:0 .5rem 2rem .5rem; }



/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
.container > h2, .container main > h2  		{ line-height: 1.15em; font-size: 1.8em; margin: 0 .5em 1em; }
.container figure h2	{ line-height: 1.15em; font-size: 1.8em; }

.container { padding-bottom: 2em; }

.webcover { padding-top: 4em; }


/*  main content after hero image / main title
--------------------------------------------------------------------------------------- */
section { margin: 0; padding: 0 .5rem 2rem; }

section h3 { font-size: 1em; line-height: 1.5em; text-decoration: underline;
 }

section h4 { font-size: 1.25em; line-height: 1.5em; }

section figure { margin-bottom: 1rem; }

section figcaption { font-size:.75em; font-size:.9em; margin-left: .25em;}

section div { margin-top: -0.45rem; margin-top: -0.375rem; }  /* to adjust type against images */


/*  media defaults to force image & video width to parent element width
--------------------------------------------------------------------------------------- */
img		{ max-width: 100%; height: auto; } /* max-width stops img element going bigger than its actual size */

figure.my-video {  }
figure.my-video video, video	{ max-width: 100%; width: 100%; }


/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p { margin: 0 0 1rem 0; line-height: 1.375em; font-size: 1em; } /* max-width sets line length */

/*section:nth-of-type(1) p:nth-of-type(1) { font-size:1.125em; }  */ /* sets section first para font size */


/*  footer section
--------------------------------------------------------------------------------------- */
footer { font-size: .8em; padding: 1rem .25rem; min-height: 2rem;
border-top: 2px #efefef solid; }

footer ul { list-style-type: none; }
footer li { list-style-type: none; margin: 0 0 .5rem 0;  }

footer h3 { margin: 0 0 1em 0; font-size: 1em; }

footer p { margin: 0 0 1rem 0; line-height: 1.375em; font-size: 1em; } 

/*  force footer to bottom of page
	note: this requires addional markup to work
	see updated contact.html page
--------------------------------------------------------------------------------------- */
.proper-footer {
	display: grid;
	min-height: 100vh;
    grid-template-rows: auto 1fr auto;    
}


/*  link styling
--------------------------------------------------------------------------------------- */
a			{ color: #00e; text-decoration: none; }
a:visited	{ color: #551A8B; color: #00e; }
a:hover		{ color: #e0e; text-decoration: underline; }
a:active	{ color: #0e0; }

/*  back to top
--------------------------------------------------------------------------------------- */
div.back { margin: 1rem 0 0 1rem; }

div.back a			{ color: #fff; background: #000; text-decoration: none; 
						padding: .5rem 1rem; border-radius: ; 
					}
div.back a:visited	{ color: #fff; }
div.back a:hover	{ color: #000; background: #fff; }
div.back a:active	{ color: #fff; background: #000; }

/*  menu selections
--------------------------------------------------------------------------------------- */
div.menu { margin: 1rem 0 0 1rem; }

div.menu a			{ color: #000; background: #fff; text-decoration: none; 
						padding: .5rem 1rem; border-radius: ; 
					}
div.menu a:visited	{ color: #000; }
div.menu a:hover	{ color: #fff; background: #000; }
div.menu a:active	{ color: #000; background: #fff; }

div.our { column-count: 2; column-gap: 5px;
}
/* 
IMPORTANT: media query - switches on grid layout if page width is wider than 550px
--------------------------------------------------------------------------------------- */
@media (min-width: 550px) { 


/*  IMPORTANT: min-width:60em rule will stop the container from resizing  
--------------------------------------------------------------------------------------- */
	.container { min-width: 60rem; min-width: 0; min-height: 100vh; }



/*  top navigation grid
--------------------------------------------------------------------------------------- */	
	nav { 	
		display: grid; 
		grid-template-columns: auto auto auto auto;
		border-bottom: 0 #eee none;
	}

	nav ul { margin-top: .48rem; margin-top: .4rem; }

	
/*  main page title after top navigation
--------------------------------------------------------------------------------------- */
	.container > h2 { line-height: 1.15em; font-size: 1.8em; margin: 0 auto 1em; text-align: center; }



/*  hero image
--------------------------------------------------------------------------------------- */
	.container > figure { margin: 0 0 2rem 0; }

	

/*  section 12 column grid
--------------------------------------------------------------------------------------- */
	section  { 
		display: grid; 
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 1.5rem auto;
		grid-column-gap: 1.5rem;  
		grid-row-gap: 0.625rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
		grid-template-areas:
		"fg fg fg fg hd hd hd hd hd hd hd hd"
		"fg fg fg fg dv dv dv dv dv dv dv dv";
	}
	
	section.wider  { 
	grid-template-areas:
		"hd hd hd hd fg fg fg fg fg fg fg fg"
		"dv dv dv dv fg fg fg fg fg fg fg fg";
	}
	
	section.milk  { 
	grid-template-columns: minmax(240px, 2fr) 3fr;
		grid-template-rows: auto;
		grid-column-gap: 0.625rem;
		grid-row-gap: 0.625rem; 
	grid-template-areas:
		"fg fg fg fg fg fg fg fg dv dv dv dv";
	}
	
	section.pages  { 
	grid-template-rows: auto;
	grid-template-areas:
		"fg fg fg fg fg fg fg fg fg fg fg fg";
	}
	
	section.ourmuseum  { 
	grid-template-columns: repeat(12, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0.625rem;
		grid-row-gap: 0.625rem; 
	grid-template-areas:
	    "hd hd hd .. .. f1 f1 f1 f2 f2 f2 f2"
		"dv dv dv .. .. f1 f1 f1 f2 f2 f2 f2";
	}
	
	section.our  { 
	grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 1.5rem auto;
		grid-column-gap: 0.625rem;
		grid-row-gap: 0.625rem; 
		padding-bottom: 10px;
	grid-template-areas:
	    "hd hd hd hd hd hd hd hd hd hd hd hd"
		"dv dv dv dv dv dv dv dv dv dv dv dv";
	}
	
	section.stmungo  { 
	grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 1.5rem auto;
		grid-column-gap: 0.625rem;
		grid-row-gap: 0.625rem; 
		padding-bottom: 10px;
	grid-template-areas:
	    "hd hd hd hd hd hd hd hd fg fg fg fg"
		"dv dv dv dv dv dv dv dv fg fg fg fg";
	}
	
	section.charour  { 
	grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 1.5rem auto;
		grid-column-gap: 0.625rem;
		grid-row-gap: 0.625rem; 
	grid-template-areas:
	    "fg fg fg fg fg fg fg fg hd hd hd hd"
		"fg fg fg fg fg fg fg fg dv dv dv dv";
		}
	
		section.miro  { 
	grid-template-columns: minmax(240px, 3fr) 3fr;
		grid-template-rows: auto;
		grid-column-gap: 0.625rem;
		grid-row-gap: 0.625rem; 
	grid-template-areas:
		"fg fg fg fg dv dv dv dv fg fg fg fg";
	}
	
	section.website  { 
		display: grid; 
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 1.5rem auto;
		grid-column-gap: 1.5rem;  
		grid-row-gap: 0.625rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
		grid-template-areas:
		"hd hd hd hd hd hd hd hd fg fg fg fg"
		"dv dv dv dv dv dv dv dv fg fg fg fg ";
	}
	
	section.zach  { 
		display: grid; 
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 1.5rem auto;
		grid-column-gap: 1.5rem;  
		grid-row-gap: 0.625rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
		grid-template-areas:
		"fg fg fg fg fg hd hd hd hd hd hd hd"
		"fg fg fg fg fg dv dv dv .. .. .. ..";
	}
	
	section.zach1  { 
		display: grid; 
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 1.5rem auto;
		grid-column-gap: 1.5rem;  
		grid-row-gap: 0.625rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
		grid-template-areas:
		"fg fg fg fg fg hd hd hd hd hd hd hd"
		"fg fg fg fg fg dv dv dv dv dv .. ..";
	}
	
	section.zach2  { 
		display: grid; 
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 1.5rem auto;
		grid-column-gap: 1.5rem;  
		grid-row-gap: 0.625rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
		grid-template-areas:
		"hd hd hd hd fg fg fg fg fg fg fg fg"
		"dv dv dv dv fg fg fg fg fg fg fg fg";
	}
	
	
	section.contact  { 
		display: grid; 
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 1.5rem auto;
		grid-column-gap: 3rem;  
		grid-row-gap: 3rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
		grid-template-areas:
		"hd hd hd hd hd hd hd hd hd hd hd hd"
		"dv dv dv dv dv dv dv dv dv dv dv dv";
	}
	
	/*  default section template areas
--------------------------------------------------------------------------------------- */
	section h3		{ grid-area: hd; }
	section figure	{ grid-area: fg;  }
	section div		{ grid-area: dv; }
	
	section.milk h3		{ grid-area: hd; }
	section.milk figure	{ grid-area: fg;  }
	section.milk div	{ grid-area: dv; }

	section.contact h2 {grid-area: hd;
	font-size: 3em; }
	
	section { padding: 0 2rem; }
	
	section.test  { 
		grid-template-columns: minmax(240px, 2fr) 3fr;
		grid-template-rows: auto;
		grid-column-gap: 0.625rem;
		grid-row-gap: 0.625rem;    /*  .625% of 16 = 10, 0.625em = 10px ...  */
		grid-template-areas:
		"fg dv";
	}
	
	section.test figure { grid-area: fg; }
	section.test div.text-end { grid-area: dv; justify-self:end; }
	
	section.test p, section.test h3 { max-width: 28rem; }


/*  footer grid  
--------------------------------------------------------------------------------------- */	
	footer { 	
		display: grid; 
		grid-template-columns: 1fr;
		grid-template-rows: repeat(minmax(0.5rem, auto));
		grid-gap: 0;
		background: #444; color:#ddd;
		border-top: 0 #eee none;
		margin-top: 4rem;
		padding-top: 1rem;
		padding-left: 1rem;
	}

	footer h3			{ margin: 0; }
	footer ul 			{ padding-right: 1rem; }
	footer li 			{ display: inline; margin-left: .5rem; }
	footer li a 		{ background: #fff; padding: .25em .25em; border-radius: .25em; font-weight:bold; }
	footer li a:hover	{ background: #000; }

	
} /* end 550px media query */


/* 
IMPORTANT: media query - for BIG screens (+1920px) set min-width to 2000px, adjust font size to taste
delete 'off.' from selector
--------------------------------------------------------------------------------------- */
@media (min-width: 2000px) { off.html { font-size: 1.5em; } }

div.test {
padding:25;
}