* {
    box-sizing: border-box;
}
/* Education is the Key to ALL Success - November 3rd 2015 */

body {
	margin: 0px;
	padding: 0px;
}



.left-splash-panel { grid-area: menu; }
.item3 { grid-area: marj; }
.item4 { grid-area: main; }
.item5 { grid-area: right; }
.item6 { grid-area: foot; }
.item7 { grid-area: mog; }
.item8 { grid-area: mid2; }
.item9 { grid-area: right2; }

.item10 { grid-area: mid; }
.item11 { grid-area: footend; }
.item12 { grid-area: mig; }
.item13 { grid-area: pop; }


.grid-container 
{
  display: grid;
/*  grid-template-rows: 70px 460px 460px 460px 460px 460px; */
  grid-template-rows: 460px 460px 460px 460px 460px;
  grid-template-columns: 300px 300px 300px 300px;
  grid-template-areas:
    'menu marj main right'
    'foot mog mid2 right2'
    'mid footend mig pop';
/*    'marj foot mog footend'; */
  grid-gap: 10px;
  background-color: white;
  padding: 10px;
  width: 1220px;
  margin: auto;
}

/*    'header header header header' */
	


.grid-container > div {
/*
  background-color: rgba(247,127,77,0.6); 

  text-align: center;
/*  padding: 10px 0;
  font-size: 20px; */
	font-family: arial, sans-serif;
	border: solid 1px black;

}

.archive 
{
	grid-area: header;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	grid-gap: 2px;
	/*	grid-template-columns: auto auto auto auto auto auto auto auto;
	grid-template-areas:
    'article article article article nav5 nav6 nav7 nav8';
 ignored for some reason- parent seems to override 
	background-color: black; 
	border: solid 2px blue; 
	padding: 0px; */
	font-family: arial;
	font-size: 16px;
}

.archive a {
	color:black;
    text-decoration: none;
}

.archive a:hover {
    color: white;
}






.article 
{
	/*grid-area:nav1; */
	background-color: #F77F4D;
	padding: 25px;
}


@media (max-width: 680px) {
  .archive {
    display: flex;
    flex-direction: column;
  }

  .article {
    margin-bottom: 2em;
  }
}


/* Element 1 */
/* Top Banner */



.header-promo-wrapper {
	padding: 10px;
	background-color: red;
}

.header-promo-text {
	color: white;
	text-align: center;
	font-family: gigi;
	font-size: 32px;
}
/* END Top Banner */
/* END Element 1 */

/* Element 2 */
/* Branding/Logo */
.branding {
		border: solid 0px red;
		margin: auto;
		margin-top: 60px;
/*		display: inline-block; */
		vertical-align: middle;
		text-align: left;
		width: 1220px;
		padding: 0 10px;
/*		width: calc(100% - 440px); */
}

@media (max-width: 1020px) 
{ 

	.branding {
		width: 100%
	}
}

/* END Branding/Logo */
/* END Element 2 */



/* Mainheading styling initially lifted from NFI */

#mainheading {
		text-align: center;
		font-family: arial;
		color: white;
		clear: both;
		position: relative;
		display: block;
		top: 0%; 
		left: 0%;
		width:100%; 
		background-color: rgba(0,0,0,0.8); 
		padding:10px;
}

.panelheading {
	float: left;
	margin-left: 10px;
	margin-top: 0px;
}

.panelheading h1, .panelheading h3 {
		font-family: "century gothic";
		color: black;
		font-weight: normal;
		display: inline;
		border: solid 0px green;
}


/* Mobile Navigator */
#navbay {
		float: right;
		display: block;
		margin-top:10%;
		margin-right:10%;
		top: 10%; 
		right: 5%;
		width:15%; 
/*		background-color: rgba(0,0,0,0.5); */
		background-color: black; 
		padding:10px;
}

	.storypicimage {
	display: block;
	margin: auto;
	max-width: 100%;
	}



/* Media Query specific styling for Mobile Viewports */

@media only screen and (max-width: 768px) 
{
	#mainheading {
		clear: both;
		top: 50%; 
		left: 0%;
		width:100%; 
		background-color: rgba(0,0,0,0.5); 
		padding:10px;
	}

.article
{
	display: none;
}


.grid-container {
		height: 640px;
	}

	.branding {
	margin-top: 20px;
}

/* Mobile Navigator */
#navbay {
		float: right;
		display: block;
		margin-top:5%;
		margin-right:5%;
/*		top: 10%; 
		right: 5%;
*/
		width:15%; 
/*		background-color: black;
		background-color: rgba(0,0,0,0.5); 
 */
		padding:10px;
}


.left-splash-panel
{
	height: 320px;
	background-attachment: scroll;
}	



}



/* Make NavBay Invisible on Desktop */
@media screen and (min-width: 760px) {
	#navbay {
		display: none;
	}	

}
/* End */



/* V02 Changes start */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-family: "Lato", sans-serif;
    font-size: 25px;
	color: white;
/*	
    color: #818181;
*/
    display: block;
    transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
    color: black; 
/*
    color: #f1f1f1; 
*/
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* V02 Changes End */


@media (max-width: 680px) {
  .grid-container {
    display: flex;
    flex-direction: column;	
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	width: 100%;
  }


  .archive {
    display: flex;
    flex-direction: column;
  }

  .article {
    margin-bottom: 2em;
  }
}