body{
	background-color: #DCDCDC;
}
.wrapper{
	  display: grid;
	  grid-template-columns: 1fr 1fr 1fr 1fr;
	  grid-gap: 6px;
	  width: 900px;
		background-color: #feffff;
		box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5);
		margin: auto;
	}
	.gridcontainer{
		grid-column: 1/6;
		display: grid;
	  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	color: Yellow;
	  grid-gap: 4px;
	  width: 876px;
		padding-right: 12px;
		padding-left: 12px;
		grid-auto-flow: column;
	}

	.gridcontainer > div {
	width: 90px;
	height: 45px;
	background-color: Gray;

}

	.standardtext{
	 font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		text-align: justify;
		text-rendering: optimizeLegibility;
		line-height: 1.2;
		 padding: 12px;
	}
	.pagebanner {
		grid-column-start: 1;
		grid-column-end: 5;
		background-color: #fffae6;
		background-image: url("./images/banner.jpg");
		background-repeat: no-repeat; /* Do not repeat the image */
		height: 90px;
		 background-position: left top;
		 background-size: cover
	}
	.pagebanner > h1{
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		padding-left: 24px;
		 line-height: 2;
		 	color: #fffae6;
			font-stretch: ultra-expanded;
	}
	.banner {
	  grid-column-start: 1;
	  grid-column-end: 5;
	background-color: #fffae6;
		background-image: url("./images/studio.jpg");
		background-repeat: no-repeat; /* Do not repeat the image */
		height: 274px;
		 background-position: left top;
		 background-size: cover
	}
	.banner > h1{
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		padding-left: 24px;
		 line-height: 3;
		 	color: #fffae6;
			font-stretch: ultra-expanded;
			 letter-spacing: 3px;
	}

	.columnleft {
	margin-left:6px;
	  grid-column-start: 1;
	  grid-column-end: 3;
	}
	.columnright {
		margin-right:6px;
		grid-column-start: 3;
		grid-column-end: 5;
	}

	.footer {
		display:grid;
	  grid-column-start: 1;
	  grid-column-end: 5;
		grid-template-columns: auto  auto  auto;
		grid-column-gap:12px;
		justify-content: left;
		border-top: 3px ridge #FAEBD7;
		background-color: #fffae6;
		Height: 32px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14px;
		color: #FFFFFF;
		text-decoration: none;
		line-height: 2;
		padding-right: 12px;
		padding-left: 12px;
		width: 876px;

	}
#email{
	cursor:pointer;
}
	/* select the last div in the container */
	/* .footer div:last-child{

	} */

	.topicChoice {
	    display:grid;
	    grid-template-columns: auto  auto  80px;
	    height:80px;
	  background-color: Gray;
	  background-image: linear-gradient(to right, #f2f2f2 , #e6fffd);
		margin-bottom:1em;
	}
	.topicChoice:hover {
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
cursor: pointer;
	}

.topicText{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding-left: 24px;
	font-size: 16px;
	 align-self: center;
}
.menuImg{
	 align-self: right;
}
.popupinfo{
	position:absolute;
	width: 600px;
	height:auto;
	border-width: 2px;
	border-style: double;
	background-color: white;
			padding-left:1em;
			padding-right:1em;
			padding-bottom: 1em;
		font-size: 1.2em;
			font-family: Georgia times serif;
			 font-size: 18px;
			 text-align: justify;
			 text-rendering: optimizeLegibility;
				line-height: 1.2;
				box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5);
				display: none;
				z-index: 100;
}
.closeThis{
	text-align:right;
	cursor: pointer;
	color:blue;
}
#blackout {
position:absolute;
display:block;
width:900px;
height:100px;
top:0px;
left:0px;
background-color:gray;
z-index: 90;
visibility: hidden;
opacity:0;
}