body{ /*Edit styling for body tag*/
	position: relative;
	margin:0 0 0; /*Make margin of body be 0px top, 0px left and right, 100px bottom. This is for the footer*/
	background-color: #f8f8ff; /*Make background colour an off-white colour*/
	font-family: "Calibri Body", Georgia, Arial; /*These are the fonts to use in order of availability*/
	font-size: 14px; /*This is the general font size of everything in the body*/
	overflow: auto;
}

html{
	position: relative;
	min-height: 100%;
}

.bottomPad5{
	padding-bottom: 2%;
}

.indexBody{
	height:100%;
}

.pricingTable{
	width: 100%; 
	border: 0;
	border-spacing: 20; 
	padding: 5;
	text-align: center
}

.header{ /*Edit styling for the class "header"*/
	position:relative;
	background-color:#D3D3D3;
	z-index:-1; /*header will be pushed to background*/
	height:100px;
}

.leftHeaderImg { /*Edit styling for img in class "header"*/
  float: left; /*makes image move to the left of the container*/
  background: #D3D3D3;
  height: 100%;
  z-index:100; /*Makes image appear on top of header*/
}

.rightHeaderImg{
  float: right; /*makes image move to the left of the container*/
  background: #D3D3D3;
  height: 100%;
  z-index:100; /*Makes image appear on top of header*/
}


.header h1 { /*Edit styling for h1 in class "header"*/
  width:91%;
  margin-top:0px; /*Make margin on the top of h1 equal 0 pixels*/
  font-family: "Lucida Sans Typewriter",Georgia,Arial; /*Change font family from body default*/
  color:#545454; /*Change colour of h1 to a dark grey*/
  position: relative;
  top: 25px; /*Set top of h1 to 25 pixels below nearest positioned object*/
  left: 10px; /*Set left of h1 to 10 pixels right nearest positioned object*/
  text-align:center; /*Align text to be centered*/
  z-index:-1; /*Push to background*/
  background-color: #D3D3D3;
}

nav{ /*Edit styling for nav*/
	position: center;
	padding-top: 0px;
	width: 100%;
	margin: auto;
}

nav ul { /*Edit styling for ul inside nav*/
    list-style: none; /*specify no marker*/
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f8f8ff;
	text-align: center; 
}

nav ul li {
	height: 40px;
	font-family: "Lucida Sans Typewriter",Georgia,Arial;
	font-size: 16px;
	width: 20%;
    float: left;
	line-height: 40px; /*Set line height to 40 pixels*/
}

nav li a {
    display: block;
	color: #2C3539;
    text-decoration: none; /*Specify no text decoration*/
}

nav li a:hover:not(.active) { /*Check if the list item is being hovered over and isn't active*/
    background-color: #56567f; /*Make background purple*/
	color: #f8f8ff; /*make text off-white*/
}

nav ul li ul { 
    position: absolute;
    background: #ccc;
    width: 19%; 
    margin: 0;
    padding: 0;
    display: none; }
nav ul li ul li { 
    text-align: center;
    width: 100%; }
nav ul li ul a { padding: 0px 0; }
nav ul li:hover ul { display: block; }

.active{ /*Edit styling for elements with active class*/
    background-color: #56567f; /*Background to be purple*/
	font-weight: bold; /*Font is now as thick as bold text*/
	color: #f8f8ff !important; /*Make text off-white with important tag to over-ride over text colours*/
}

#container{ /* Creation of grid*/
	margin-left:auto;
	margin-right:auto;
	padding-top:2.5%;
	padding-right: 5%;
	width:90%;
	height:auto;
	display: grid; /*Display the grid*/
	grid-template-columns:20% 20% 20% 20% 20%; /*Setting width and number of columns*/
	grid-column-gap:1%; /*Setting a gap to be between the columns of 0.25%*/
	grid-template-areas:
        "image1 image2 image3 image4 image5"
        "image6 image7 image8 image9 image10"
        "image11 image12 image13 image14 image15"
        "image16 image17 image18 image19 image20"
        "image21 image22 image23 image24 image25"
        "image26 image27 image28 image29 image30"
        "image31 image32 . . .";
	padding-bottom: 100px;
}

.productImg{
	max-width: 100%;
	height: auto;
}

.fig1{ /*Edit fig1 class*/
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image1;
}

.fig2{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image2;
}

.fig3{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image3;
}

.fig4{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image4;
}

.fig5{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image5;
}

.fig6{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image6;
}
.fig7{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image7;
}

.fig8{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image8;
}

.fig9{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image9;
}

.fig10{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image10;
}

.fig11{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image11;
}

.fig12{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image12;
}

.fig13{ /*Edit fig1 class*/
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image13;
}

.fig14{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image14;
}

.fig15{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image15;
}

.fig16{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image16;
}

.fig17{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image17;
}

.fig18{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image18;
}
.fig19{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image19;
}

.fig20{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image20;
}

.fig21{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image21;
}

.fig22{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image22;
}

.fig23{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image23;
}

.fig24{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image24;
}

.fig25{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image25;
}

.fig26{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image26;
}

.fig27{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image27;
}
.fig28{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image28;
}

.fig29{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image29;
}

.fig30{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image30;
}

.fig31{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image31;
}

.fig32{
	vertical-align:top;
	margin:0px;
	text-align:center;
	padding-bottom:7%;
	grid-area:image32;
}

figcaption{
	font-family:arial, calibri-body;
	min-height:36px;
	margin-top: 2%;
	font-size: 16px;
}

.footerContainer{
	height:100px;
	text-align:center; 
	background-color:#D3D3D3;
	position:relative; /*Footer is now positioned relative to the first element (header)*/
	width:100%;
	bottom:0; /*Set bottom edge to be on the bottom of the screen*/
	overflow: hidden;
}

.footerContainer2{
	height:100px;
	text-align:center; 
	background-color:#D3D3D3;
	position:absolute; /*Footer is now positioned relative to the first element (header)*/
	width:100%;
	bottom:0; /*Set bottom edge to be on the bottom of the screen*/
	overflow: hidden;
}

.moreInfPic{
	position: fixed;
	top: 58%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 55%;
	z-index:-1;
}

.moreInfH1{
  width:100%;
  font-family: "Lucida Sans Typewriter",Georgia,Arial; /*Change font family from body default*/
  color:#545454; /*Change colour of h1 to a dark grey*/
  position: relative;
  top: 25px; /*Set top of h1 to 25 pixels below nearest positioned object*/
  text-align:center; /*Align text to be centered*/
  z-index:-1;
}

.moreInfH2{
	padding-top:10%;
	padding-left:8%;
}

.moreInfAdd{
	padding-left:8%;
}

.textstyle1 {
	font: bold normal 2em/normal Verdana, Geneva, sans-serif;
	letter-spacing: normal;
	text-align: justify;
	text-indent: 40px;
	vertical-align: middle;
	word-spacing: normal;
	width: auto;
	position: relative;
	visibility: visible;
	height: auto;
	top: auto;
	clip: rect(auto,auto,auto,auto);
	font-size: 1em;
}