body {
            font-family: Arial, sans-serif;
            margin: 0;
		}
		 .header {
			display: grid;
			grid-template-columns: 80px 275px 1fr;
			grid-template-rows: 50px;
			border-top: 3px solid #888;
			border-bottom: 3px solid #888;
			background-color: #000;
		}
		
		.header img {
            grid-column: 1;
			grid-row: 1;
			background-color: #000;
			width: 80px;
			height: 50px;
		}
				
        .header-content {
			display: flex;
            background-color: #000;
            color: #fff;
			grid-column: 2;
            font-size: 1.55em;
			align-items: center;
		}
		
		.header a {
			color: white;
			text-decoration: none;
		}       				
		     
        .subject {
			position: relative; /* Ensure the overlay is positioned relative to this container */
			width: 358px;
			height: 94px;
			border-top: 0px solid #888;
			border-left: 1px solid #888; 
			border-right: 1px solid #888;
			border-bottom: 2px solid #888;
		}
		
		.subject img {
			width: 358px;
			height: 94px;
		}
		
		.subject-overlay {
			position: absolute;
			width: 180px;
			top: 50%; /* Position at the vertical center */
			left: 50%; /* Position at the horizontal center */
			transform: translate(-50%, -50%); /* Center the text precisely */
			color: rgba(255, 255, 255, 1.0); /* Transparent white text */
			font-size: 1.50em; /* Adjust the font size as needed */
			font-weight: bold;
		}
		
		.project {
			position: relative; /* Ensure the overlay is positioned relative to this container */
			height: 60px;
			width: 356px;
			border-top: 2px solid #ccc;
			border-left: 2px solid #ccc; 
			border-right: 2px solid #ccc;
			border-bottom: 2px solid #ccc;
		}
		
		.project img {			
			height: 60px;
			width: 356px;
			background-color: #fff;
			transition: border-color 0.3s ease; /* Add a smooth transition effect */
		}
		
		.project img:hover {			
			border-color: #000;
		}
		
		.project-overlay {
			position: absolute;
			width: 200px;
			top: 50%; /* Position at the vertical center */
			left: 50%; /* Position at the horizontal center */
			transform: translate(-50%, -50%); /* Center the text precisely */
			color: #000;
			font-size: 1.25em; /* Adjust the font size as needed */
			font-weight: bold;
			white-space: nowrap;
		}
				
		.type {
			display: grid;
			grid-template-columns: 5px 54px 19px 33px 43px 35px 42px 10px 42px 72px 5px;
			grid-template-rows: 46px 46px;
			padding-top: 10px;
			margin-bottom: 5px;
			background-color: #fff;
		}
		
		.websites {
			grid-column: 2;
			grid-row: 1;
			display: flex;
			width: 54px;
			align-items: center;
			justify-content: left; 
			font-size: .75em;
			font-weight: bold;
			color: red;
			text-decoration: underline;
		}
		
		.video-audio {
			grid-column: 5 /span 2;
			grid-row: 1;
			display: flex;
			width: 78px;
			align-items: center;
			justify-content: left;
		    font-size: .75em;
			font-weight: bold;
			color: grey;
			text-decoration: none;
		}
		
		.books-documents {
			grid-column: 9 /span 3;
			grid-row: 1;
			display: flex;
			width: 114 px;
			align-items: center;
			justify-content: left; 
		    font-size: .75em;
			font-weight: bold;
			color: grey;
			text-decoration: none;
		}
		
		.blogs-news {
			grid-column: 4;
			grid-row: 2;
			display: flex;
			width: 76px;
			align-items: center;
			justify-content: left;
		    font-size: .75em;
			font-weight: bold;
			color: grey;
			text-decoration: none;
		}
		
		.database {
			grid-column: 8 / span 2;
			grid-row: 2;
			display: flex;
			width: 52px;
			align-items: center;
			justify-content: left;
		    font-size: .75em;
			font-weight: bold;
			color: grey;
			text-decoration: none;
		}
				
		.pages {
            display: flex;
			align-items: center;
			text-align: center;
			gap: 22px; /* Adjust the gap as needed */
			margin-left: 10px;
			margin-bottom: 5px;
        }

       .pages-content {
			height: 20px; /* Ensure each cell takes the full height */
			font-size: 0.75em;
			text-align: center;
			font-weight: bold;
			color: grey;
			text-decoration: none;
		}
		
		.category-content {
			font-family: Helvetica Neue, sans-serif;
			font-size: .75em;
			font-weight: bold;
			justify-self: end;
		}
		
		.ottawa-navigator {	
			display: grid;
			margin-top: -35px;
			grid-template-columns: 5px 150px 10px 190px 5px;
			grid-template-rows: 30px 40px 40px 40px 40px 10px;
			align-items: center;
			background-color: #add8e6;
		}
		
		.ottawa-header {
			grid-row: 1;
            grid-column: 1 / span 5;
			font-family: Helvetica Neue, sans-serif;
			font-size: 1.0em;
			font-weight: bold;
			text-align: center;
		}
				
		.ottawa1 {
			grid-row: 2;
            grid-column: 2;
		}
		
		.ottawa2 {
			grid-row: 2;
            grid-column: 4;
		}
		
		.ottawa3 {
			grid-row: 3;
            grid-column: 2;
		}
		
		.ottawa4 {
			grid-row: 3;
            grid-column: 4;
		}
		
		.ottawa5 {
			grid-row: 4;
            grid-column: 2;
		}
		
		.ottawa6 {
			grid-row: 4;
            grid-column: 4;
		}
		
		.ottawa7 {
			grid-row: 5;
            grid-column: 2;
		}
		
		.ottawa8 {
			grid-row: 5;
            grid-column: 4;
		}
		
		.category {	
			display: grid;
			grid-template-columns: 10px 110px 5px 110px 5px 110px 10px;
			grid-template-rows: 40px 40px 40px 40px 40px 40px 40px 10px;
			align-items: center;
		}
						
		.category1 {
			grid-row: 1;
            grid-column: 2;
		}
		
		.category2 {
			grid-row: 1;
            grid-column: 4;
		}
		
		.category3 {
			grid-row: 1;
            grid-column: 6;
		}
		
		.category4 {
			grid-row: 2;
            grid-column: 2;
		}
		
		.category5 {
			grid-row: 2;
            grid-column: 4;
		}
		
		.category6 {
			grid-row: 2;
            grid-column: 6;
		}
		
		.category7 {
			grid-row: 3;
            grid-column: 2;
		}
		
		.category8 {
			grid-row: 3;
            grid-column: 4;
		}
		
		.category9 {
			grid-row: 3;
            grid-column: 6;
		}
		
		.category10 {
			grid-row: 4;
            grid-column: 2;
		}
		
		.category11 {
			grid-row: 4;
            grid-column: 4;
		}
		
		.category12 {
			grid-row: 4;
            grid-column: 6;
		}
		
		.category13 {
			grid-row: 5;
            grid-column: 2;
		}
		
		.category14 {
			grid-row: 5;
            grid-column: 4;
		}
		
		.category15 {
			grid-row: 5;
            grid-column: 6;
		}
		
		.category16 {
			grid-row: 6;
            grid-column: 2;
		}
		
		.category17 {
			grid-row: 6;
            grid-column: 4;
		}
		
		.category18 {
			grid-row: 6;
            grid-column: 6;
		}
		
		.category19 {
			grid-row: 7;
            grid-column: 2;
		}
		
		.category20 {
			grid-row: 7;
            grid-column: 4;
		}
		
		.category21 {
			grid-row: 7;
            grid-column: 6;
		}
		
		.category22 {
			grid-row: 8;
            grid-column: 2;
		}
		
		.category23 {
			grid-row: 8;
            grid-column: 4;
		}
		
		.category24 {
			grid-row: 8;
            grid-column: 6;
		}
		
		.category25 {
			grid-row: 9;
            grid-column: 2;
		}
		
		.category26 {
			grid-row: 9;
            grid-column: 4;
		}
		
		.category27 {
			grid-row: 9;
            grid-column: 6;
		}
		
		.category28 {
			grid-row: 10;
            grid-column: 2;
		}
		
		.category29 {
			grid-row: 10;
            grid-column: 4;
		}
		
		.category30 {
			grid-row: 10;
            grid-column: 6;
		}
		
		.construction {
			display: grid;
			grid-template-columns: 5px 312px 10px 20px 5px;
			grid-template-rows: 10px 20px;
		}
		
		.construction-text {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: .75em;
			font-weight: bold;
			width: 360px;
			align-items: center;
		}
		
		.construction-image {
			display: grid;
			grid-column: 4;
			grid-row: 2;
			height: 20px;
			width: 20px;
		}
		
		.garden {
			display: grid;
			grid-template-columns: 5px 1fr 5px;
			grid-template-rows: 15px 30px 10px 20px 15px 55px 20px 1fr;
		}
		
		.garden-title {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: 2.0em;
			font-weight: bold;
			text-align: center;
			height: 30px;
			color: red;
		}
		
		.garden-date {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: 1.00em;
			font-weight: bold;
			text-align: center;
			width: 100%;
		}
		
		.garden-pictures {
			display: grid;
			grid-column: 2;
			grid-row: 6;
			grid-template-columns: 72px 72px 72px 72px 72px 2px;
			grid-template-rows: 53px;
			justify-content: center;
			
		}

		.garden img {
			width: 70px;
			height: 53px;
			border: 1px solid #888; /* Grey color */
		}
		
		.garden1 {
			display: grid;
			grid-column: 1;
			grid-row: 1;
		}
		
		.garden2 {
			display: grid;
			grid-column: 2;
			grid-row: 1;
		}
		
		.garden3 {
			display: grid;
			grid-column: 3;
			grid-row: 1;
		}
		
		.garden4 {
			display: grid;
			grid-column: 4;
			grid-row: 1;
		}
		
		.garden5 {
			display: grid;
			grid-column: 5;
			grid-row: 1;
		}
		
		.garden-text {
			display: grid;
			grid-column: 2;
			grid-row: 8;
			font-size: .85em;
			width: 100%;
			font-weight: bold;
			text-align: left;
		}
						
		.harvests {
			display: grid;
			grid-template-columns: 5px 1fr 5px;
			grid-template-rows: 40px 5px 30px 30px;
		}
		
		.harvests-line5 {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			width: 80%;
			height: 5px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvests-title {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: 1.75em;
			font-weight: bold;
			color: red;
			text-align: center;
		}
		.harvest {
			display: grid;
			grid-template-columns: 5px 1fr 5px;
			grid-template-rows: 10px 20px 15px 1fr 15px 229px 20px 1px 30px 229px 20px 1px 30px 229px 20px 1px 30px 229px 20px 1px 30px 229px 20px 30px;
		}
		
		.harvest-date {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: 1.0em;
			font-weight: bold;
			text-align: center;
		}
		
		.harvest-text {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: .85em;
			width: 100%;
			font-weight: bold;
			text-align: left;
		}
		
		.harvest-picture1 {
			display: grid;
			grid-column: 2;
			grid-row: 6;
			justify-content: center;
		}
		
		.harvest-picture1 img {
			width: 300px;
			height: 225px;
			border: 2px solid #888; /* Grey color */
		}
		
		.harvest-line1 {
			display: grid;
			grid-column: 2;
			grid-row: 8;
			width: 80%;
			height: 1px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvest-picture2 {
			display: grid;
			grid-column: 2;
			grid-row: 10;
			justify-content: center;
		}
		
		.harvest-picture2 img {
			width: 300px;
			height: 225px;
			border: 2px solid #888; /* Grey color */
		}
		
		.harvest-line2 {
			display: grid;
			grid-column: 2;
			grid-row: 12;
			width: 80%;
			height: 1px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvest-picture3 {
			display: grid;
			grid-column: 2;
			grid-row: 14;
			justify-content: center;
		}
		
		.harvest-picture3 img {
			width: 300px;
			height: 225px;
			border: 2px solid #888; /* Grey color */
		}
				
		.harvest-line3 {
			display: grid;
			grid-column: 2;
			grid-row: 16;
			width: 80%;
			height: 1px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
				
		.harvest-picture4 {
			display: grid;
			grid-column: 2;
			grid-row: 18;
			justify-content: center;
		}
		
		.harvest-picture4 img {
			width: 300px;
			height: 225px;
			border: 2px solid #888; /* Grey color */
		}
		
		.harvest-line4 {
			display: grid;
			grid-column: 2;
			grid-row: 20;
			width: 80%;
			height: 1px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvest-picture5 {
			display: grid;
			grid-column: 2;
			grid-row: 22;
			justify-content: center;
		}
		
		.harvest-picture5 img {
			width: 300px;
			height: 225px;
			border: 2px solid #888; /* Grey color */
		}
						
		.archives {
			display: grid;
			grid-template-columns: 5px 1fr 5px;
			grid-template-rows: 50px 5px 15px 30px;
		}
		
		.archives-title {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: 1.75em;
			font-weight: bold;
			color: red;
			text-align: center;
		}
		.archive {
			display: grid;
			grid-template-columns: 5px 1fr 5px;
			grid-template-rows: 10px 20px 15px 227px 15px 1fr 20px 1px;
		}
		
		.archive-date {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: 1.0em;
			font-weight: bold;
			text-align: center;
		}
		
		.archive-picture {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			justify-content: center;
		}
		
		.archive-picture img {
			width: 300px;
			height: 225px;
			border: 2px solid #888; /* Grey color */
		}
		
		.archive-text {
			display: grid;
			grid-column: 2;
			grid-row: 6;
			font-size: .85em;
			width: 100%;
			font-weight: bold;
			text-align: left;
		}
				
		.attribution {
			display: grid;
			grid-column: 1;
			grid-row: 1;
			align-items: center;
			justify-content: center;
			background-color: #000;
			color: #fff;
			font-size: .75em;
			border-top: 3px solid #888; /* Grey color */
		}
		
		.attribution a {
			color: green;
		}
		
 		.cc {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr 1fr;
			box-sizing: border-box;
		}
		
		.cc-content {
			grid-column: 1;
			grid-row: 2;
			background-color: #000;
			color: #fff;
			font-size: .60em;
		}
		
		.cc-content a {
			color: green;
		}
			
		.artist {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 40px 1fr;
			box-sizing: border-box;
			margin-top: 20px;
		}
		
		.artist-title {
			height: 20px;
			background-color: #fff;
			color: #000;
			font-size: .95em;
			font-weight: bold;
			text-align: center;
			text-decoration: underline;
		}
		
		.artist-text {
			background-color: #ccc;
			color: #000;
			padding-left: 10px;
			font-size: .85em;
			font-weight: bold;
			margin-bottom: 20px;
		}
				
		.copyright {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr;
			box-sizing: border-box;
			margin-top: 5px;
			height: 50px;
		}
		
		.copyright-content {
			background-color: #fff;
			color: #000;
			font-size: .75em;
			font-weight: bold;
			text-align: center;
		}
		
        		
/* **************************************************************************** */		
		
		@media screen and (min-width: 550px) and (max-width: 767px) {
		

		body {
            font-family: Arial, sans-serif;
            margin: 0;
		}
		
		 .header {
			display: grid;
			grid-template-columns: 80px 344px 1fr;
			grid-template-rows: 50px;
			border-top: 3px solid #888;
			border-bottom: 3px solid #888;
			background-color: #000;
		}
		
		.header img {
            grid-column: 1;
			grid-row: 1;
			background-color: #000;
			width: 80px;
			height: 50px;
		}
				
        .header-content {
			display: flex;
            background-color: #000;
            color: #fff;
			grid-column: 2;
            font-size: 2.00em;
			align-items: center;
		}
		
		.header a {
			color: white;
			text-decoration: none;
		}       	   
		
        .subject {
			position: relative; /* Ensure the overlay is positioned relative to this container */
			width: 548px;
			height: 94px;
			border-top: 0px solid #888;
			border-left: 1px solid #888; 
			border-right: 1px solid #888;
			border-bottom: 2px solid #888;
		}
		
		.subject img {
			width: 548px;
			height: 94px;
		}
		
		.subject-overlay {
			width: 200px;
			position: absolute;
			top: 50%; /* Position at the vertical center */
			left: 50%; /* Position at the horizontal center */
			transform: translate(-50%, -50%); /* Center the text precisely */
			color: rgba(255, 255, 255, 1.0); /* Transparent white text */
			font-size: 1.60em; /* Adjust the font size as needed */
			font-weight: bold;
		}
		
		.project {
			position: relative; /* Ensure the overlay is positioned relative to this container */
			height: 60px;
			width: 546px;
			border-top: 2px solid #ccc;
			border-left: 2px solid #ccc; 
			border-right: 2px solid #ccc;
			border-bottom: 2px solid #ccc;
		}
		
		.project img {			
			height: 60px;
			width: 546px;
			background-color: #fff;
			transition: border-color 0.3s ease; /* Add a smooth transition effect */
		}
		
		.project img:hover {			
			border-color: #000;
		}
		
		.project-overlay {
			position: absolute;
			width: 220px;
			top: 50%; /* Position at the vertical center */
			left: 50%; /* Position at the horizontal center */
			transform: translate(-50%, -50%); /* Center the text precisely */
			color: #000;
			font-size: 1.37em; /* Adjust the font size as needed */
			font-weight: bold;
			white-space: nowrap;
		}
		
		.type {
			display: grid;
			grid-template-columns: 5px 72px 51px 57px 43px 57px 72px 38px 32px 118px 5px;
			grid-template-rows: 46px 46px;
			padding-top: 10px;
			margin-bottom: 5px;
			background-color: #fff;
		}
		
		.websites {
			grid-column: 2;
			grid-row: 1;
			display: flex;
			width: 72px;
			align-items: center;
			justify-content: left; 
			font-size: 1.0em;
			font-weight: bold;
			color: red;
			text-decoration: underline;
		}
		
		.video-audio {
			grid-column: 5;
			grid-row: 1;
			display: flex;
			width: 102px;
			align-items: center;
			justify-content: left;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: none;
		}
		
		.books-documents {
			grid-column: 9 / span 2;
			grid-row: 1;
			display: flex;
			width: 150px;
			align-items: center;
			justify-content: left; 
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: none;
		}
		
		.blogs-news {
			grid-column: 4;
			grid-row: 2;
			display: flex;
			width: 100px;
			align-items: center;
			justify-content: left;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: none;
		}
		
		.database {
			grid-column: 8;
			grid-row: 2;
			display: flex;
			width: 70px;
			align-items: center;
			justify-content: left;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: none;
		}
		
		.pages {
            display: flex;
			align-items: center;
			text-align: center;
			gap: 42px; /* Adjust the gap as needed */
			margin-left: 10px;
			margin-bottom: 5px;
        }

       .pages-content {
			height: 20px; /* Ensure each cell takes the full height */
			font-size: 0.75em;
			text-align: center;
			font-weight: bold;
			color: grey;
			text-decoration: none;
		}
		
		.category-content {
			font-family: Helvetica Neue, sans-serif;
			font-size: .75em;
			font-weight: bold;
			justify-self: end;
		}
		
		.ottawa-navigator {	
			display: grid;
			grid-template-columns: 70px 150px 70px 190px 70px;
			grid-template-rows: 30px 40px 40px 40px 40px 10px;
			align-items: center;
			background-color: #add8e6;
		}
		
		.ottawa-header {
			grid-row: 1;
            grid-column: 1 / span 5;
			font-family: Helvetica Neue, sans-serif;
			font-size: 1.0em;
			font-weight: bold;
			text-align: center;
		}
		
		.ottawa1 {
			grid-row: 2;
            grid-column: 2;
		}
		
		.ottawa2 {
			grid-row: 2;
            grid-column: 4;
		}
		
		.ottawa3 {
			grid-row: 3;
            grid-column: 2;
		}
		
		.ottawa4 {
			grid-row: 3;
            grid-column: 4;
		}
		
		.ottawa5 {
			grid-row: 4;
            grid-column: 2;
		}
		
		.ottawa6 {
			grid-row: 4;
            grid-column: 4;
		}
		
		.ottawa7 {
			grid-row: 5;
            grid-column: 2;
		}
		
		.ottawa8 {
			grid-row: 5;
            grid-column: 4;
		}		
		
		.category {	
			display: grid;
			grid-template-columns: 10px 110px 25px 110px 25px 110px 26px 110px 10px;
			grid-template-rows: 40px 40px 40px 40px 40px 40px 10px;
			align-items: center;
		}
		
		.category1 {
			grid-row: 1;
            grid-column: 2;
			margin-top: 8px;
		}
		
		.category2 {
			grid-row: 1;
            grid-column: 4;
			margin-top: 8px;
		}
		
		.category3 {
			grid-row: 1;
            grid-column: 6;
			margin-top: 8px;
		}
		
		.category4 {
			grid-row: 1;
            grid-column: 8;
			margin-top: 10px;
		}
		
		.category5 {
			grid-row: 2;
            grid-column: 2;
			margin-top: 10px;
		}
		
		.category6 {
			grid-row: 2;
            grid-column: 4;
			margin-top: 10px;
		}
		
		.category7 {
			grid-row: 2;
            grid-column: 6;
			margin-top: 10px;
		}
		
		.category8 {
			grid-row: 2;
            grid-column: 8;
			margin-top: 10px;
		}
		
		.category9 {
			grid-row: 3;
            grid-column: 2;
			margin-top: 10px;
		}
		
		.category10 {
			grid-row: 3;
            grid-column: 4;
			margin-top: 10px;
		}
		
		.category11 {
			grid-row: 3;
            grid-column: 6;
			margin-top: 10px;
		}
		
		.category12 {
			grid-row: 3;
            grid-column: 8;
			margin-top: 10px;
		}
		
		.category13 {
			grid-row: 4;
            grid-column: 2;
			margin-top: 10px;
		}
		
		.category14 {
			grid-row: 4;
            grid-column: 4;
			margin-top: 10px;
		}
		
		.category15 {
			grid-row: 4;
            grid-column: 6;
			margin-top: 10px;
		}
		
		.category16 {
			grid-row: 4;
            grid-column: 8;
			margin-top: 10px;
		}
		
		.category17 {
			grid-row: 5;
            grid-column: 2;
			margin-top: 10px;
		}
		
		.category18 {
			grid-row: 5;
            grid-column: 4;
			margin-top: 10px;
		}
		
		.category19 {
			grid-row: 5;
            grid-column: 6;
			margin-top: 10px;
		}
		
		.category20 {
			grid-row: 5;
            grid-column: 8;
			margin-top: 10px;
		}
		
		.category21 {
			grid-row: 6;
            grid-column: 2;
			margin-top: 10px;
		}
		
		.category22 {
			grid-row: 6;
            grid-column: 4;
			margin-top: 10px;
		}
		
		.category23 {
			grid-row: 6;
            grid-column: 6;
			margin-top: 10px;
		}
		
		.category24 {
			grid-row: 6;
            grid-column: 8;
			margin-top: 10px;
		}
		
		.category25 {
			grid-row: 7;
            grid-column: 2;
			margin-top: 10px;
		}
		
		.category26 {
			grid-row: 7;
            grid-column: 4;
			margin-top: 10px;
		}
		
		.category27 {
			grid-row: 7;
            grid-column: 6;
			margin-top: 10px;
		}
		
		.category28 {
			grid-row: 7;
            grid-column: 8;
			margin-top: 10px;
		}
		
		.category29 {
			grid-row: 8;
            grid-column: 2;
			margin-top: 10px;
		}
		
		.category30 {
			grid-row: 8;
            grid-column: 4;
			margin-top: 10px;
		}
		
		.construction {
			display: grid;
			grid-template-columns: 5px 312px 10px 20px 5px;
			grid-template-rows: 10px 20px;
		}
		
		.construction-text {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: .75em;
			font-weight: bold;
			width: 312px;
			align-items: center;
		}
		
		.construction-image {
			display: grid;
			grid-column: 4;
			grid-row: 2;
			height: 20px;
			width: 20px;
		}		
		
		.garden {
			display: grid;
			grid-template-columns: 5px 1fr 5px;
			grid-template-rows: 15px 30px 15px 20px 20px 79px 15px 1fr;
		}
		
		.garden-title {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: 2.0em;
			font-weight: bold;
			text-align: center;
			height: 30px;
			color: red;
		}
		
		.garden-date {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: 1.0em;
			font-weight: bold;
			text-align: center;
			width: 100%;
		}
		
		.garden-pictures {
			display: grid;
			grid-column: 2;
			grid-row: 6;
			grid-template-columns: 102px 102px 102px 102px 102px;
			grid-template-rows: 79px;
			justify-content: center;
		}

		.garden img {
			width: 100px;
			height: 75px;
			border: 2px solid #888; /* Grey color */
		}
		
		.garden1 {
			display: grid;
			grid-column: 1;
			grid-row: 1;
		}
		
		.garden2 {
			display: grid;
			grid-column: 2;
			grid-row: 1;
		}
		
		.garden3 {
			display: grid;
			grid-column: 3;
			grid-row: 1;
		}
		
		.garden4 {
			display: grid;
			grid-column: 4;
			grid-row: 1;
		}
		
		.garden5 {
			display: grid;
			grid-column: 5;
			grid-row: 1;
		}
		
		.garden-text {
			display: grid;
			grid-column: 2;
			grid-row: 8;
			font-size: .90em;
			width: 100%;
			font-weight: bold;
			text-align: left;
		}
				
		.harvests {
			display: grid;
			grid-template-columns: 5px 1fr 5px;
			grid-template-rows: 40px 5px 30px 30px;
		}
		
		.harvests-line5 {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			width: 80%;
			height: 5px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvests-title {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: 1.75em;
			font-weight: bold;
			color: red;
			text-align: center;
		}
		.harvest {
			display: grid;
			grid-template-columns: 5px 1fr 5px;
			grid-template-rows: 10px 20px 15px 1fr 15px 229px 20px 1px 30px 229px 20px 1px 30px 229px 20px 1px 30px 229px 20px 1px 30px 229px 20px 30px;
		}
		
		.harvest-date {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: 1.0em;
			font-weight: bold;
			text-align: center;
		}
		
		.harvest-text {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: .85em;
			width: 100%;
			font-weight: bold;
			text-align: left;
		}
		
		.harvest-picture1 {
			display: grid;
			grid-column: 2;
			grid-row: 6;
			justify-content: center;
		}
		
		.harvest-picture1 img {
			width: 300px;
			height: 225px;
			border: 2px solid #888; /* Grey color */
		}
		
		.harvest-line1 {
			display: grid;
			grid-column: 2;
			grid-row: 8;
			width: 80%;
			height: 1px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvest-picture2 {
			display: grid;
			grid-column: 2;
			grid-row: 10;
			justify-content: center;
		}
		
		.harvest-picture2 img {
			width: 300px;
			height: 225px;
			border: 2px solid #888; /* Grey color */
		}
		
		.harvest-line2 {
			display: grid;
			grid-column: 2;
			grid-row: 12;
			width: 80%;
			height: 1px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvest-picture3 {
			display: grid;
			grid-column: 2;
			grid-row: 14;
			justify-content: center;
		}
		
		.harvest-picture3 img {
			width: 300px;
			height: 225px;
			border: 2px solid #888; /* Grey color */
		}
		
		.harvest-line3 {
			display: grid;
			grid-column: 2;
			grid-row: 16;
			width: 80%;
			height: 1px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
				
		.harvest-picture4 {
			display: grid;
			grid-column: 2;
			grid-row: 18;
			justify-content: center;
		}
		
		.harvest-picture4 img {
			width: 300px;
			height: 225px;
			border: 2px solid #888; /* Grey color */
		}
		
		.harvest-line4 {
			display: grid;
			grid-column: 2;
			grid-row: 20;
			width: 80%;
			height: 1px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvest-picture5 {
			display: grid;
			grid-column: 2;
			grid-row: 22;
			justify-content: center;
		}
		
		.harvest-picture5 img {
			width: 300px;
			height: 225px;
			border: 2px solid #888; /* Grey color */
		}
				
		.attribution {
			display: grid;
			grid-column: 1;
			grid-row: 1;
			align-items: center;
			justify-content: center;
			background-color: #000;
			color: #fff;
			font-size: .85em;
			border-top: 3px solid #888; /* Grey color */
		}

		.cc-content {
			grid-column: 1;
			grid-row: 2;
			background-color: #000;
			color: #fff;
			font-size: .75em;
		}
		}
		
/* **************************************************************************** */
		
		@media screen and (min-width: 768px) and (max-width: 1023px) {
		
		body {
            font-family: Arial, sans-serif;
            margin: 0;
		}
		
		  .header {
			display: grid;
			grid-template-columns: 80px 344px 1fr;
			grid-template-rows: 50px;
			border-top: 3px solid #888;
			border-bottom: 3px solid #888;
			background-color: #000;
		}
		
		.header img {
            grid-column: 1;
			grid-row: 1;
			background-color: #000;
			width: 80px;
			height: 50px;
		}
				
        .header-content {
			display: flex;
            background-color: #000;
            color: #fff;
			grid-column: 2;
            font-size: 2.00em;
			align-items: center;
		}
		
		.header a {
			color: white;
			text-decoration: none;
		}       	 
		
		.pv1 {
			display: grid;
			grid-template-columns: 10px 95px 21px 95px 21px 8px 12px 10px 10px 45px 25px 5px 16px 55px 25px 15px 21px 78px 17px 8px 13px 63px 26px 6px 48px 10px;
			grid-template-rows: 30px 40px 27px 62px 45px 40px 40px 40px 40px 40px 40px 40px 40px 5px 40px 40px 20px;
			margin-top: 10px;
			margin-left: 10px;
			background-color: #fff;
			position: relative; /* Ensure relative positioning for absolute positioning */
		}

		.subject {
			display: grid;
			grid-column: 1 / span 6;
			grid-row: 1 / span 3;
			position: relative; /* Ensure the overlay is positioned relative to this container */
			width: 250px;
			height: 94px;
			border-top: 1px solid #888;
			border-left: 1px solid #888; 
			border-right: 1px solid #888;
			border-bottom: 2px solid #888;
		}
		
		.subject img {
			width: 250px;
			height: 94px;
		}
				
		.subject-overlay {
			position: absolute;
			width: 170px;
			top: 50%; /* Position at the vertical center */
			left: 50%; /* Position at the horizontal center */
			transform: translate(-50%, -50%); /* Center the text precisely */
			color: rgba(255, 255, 255, 1.0); /* Transparent white text */
			font-size: 1.40em; /* Adjust the font size as needed */
			font-weight: bold;
		}
		
		.project {
			display: grid;
			grid-column: 1 / span 6;
			grid-row: 4;
			width: 246px;
			height: 60px;
			position: relative; /* Ensure the overlay is positioned relative to this container */
			border-top: 2px solid #ccc;
			border-left: 3px solid #ccc; 
			border-right: 3px solid #ccc;
			border-bottom: 2px solid #ccc;
		}
		
		.project img {			
			position: relative; /* Ensure the overlay is positioned relative to this container */
			width: 246px;
			height: 60px;
			background-color: #fff;
			transition: border-color 0.3s ease; /* Add a smooth transition effect */
		}
		
		.project img:hover {			
			border-color: #000;
		}
		
		.project-overlay {
			width: 200px;
			position: absolute;
			top: 50%; /* Position at the vertical center */
			left: 50%; /* Position at the horizontal center */
			transform: translate(-50%, -50%); /* Center the text precisely */
			color: #000;
			font-size: 1.25em; /* Adjust the font size as needed */
			font-weight: bold;
			white-space: nowrap;
		}
		
		.type {
			display: grid;
			grid-template-columns: 10px 10px 10px 45px 25px 5px 16px 55px 25px 15px 21px 78px 17px 8px 13px 63px 26px 6px 48px 10px;
			grid-template-rows: 30px 40px 27px;
		}
		
		.websites {
			display: grid;
			grid-column: 3 / span 2;
			grid-row: 1;
			height: 30px;
			width: 55px;
			font-size:.75em;
			font-weight: bold;
			color: red;
			align-items: center;
			justify-content: center; 
			text-decoration: underline;
		}
		
		.video-audio {
			display: grid;
			grid-column: 6 / span 2;
			grid-row: 1;
			height: 30px;
			width: 76px;
		    font-size: .75em;
			font-weight: bold;
			color: grey;
			align-items: center;
			justify-content: center; 
			text-decoration: underline;
		}
		
		.books-documents {
			display: grid;
			grid-column: 10 / span 2;
			grid-row: 1;
			height: 30px;
			width: 114px;
		    font-size: .75em;
			font-weight: bold;
			color: grey;
			align-items: center;
			justify-content: center; 
			text-decoration: underline;
		}
		
		.blogs-news {
			display: grid;
			grid-column: 15 / span 2;
			grid-row: 1;
			height: 30px;
			width: 76px;
		    font-size: .75em;
			font-weight: bold;
			color: grey;
			align-items: center;
			justify-content: center; 
			text-decoration: underline;
		}
		
		.database {
			display: grid;
			grid-column: 18 / span 2;
			grid-row: 1;
			height: 30px;
			width: 54px;
		    font-size: .75em;
			font-weight: bold;
			color: grey;
			align-items: center;
			justify-content: center; 
			text-decoration: underline;
		}
				
		.pages {
            display: grid;
            grid-template-columns: 9px 9px 9px 9px 9px 9px 9px 9px 17px 17px 30px;
            grid-template-rows: 17px;
			grid-row: 3;
            grid-column: 9; 
            gap: 33px; /* Adjust the gap as needed */
			margin-left: 10px;
        }

       .pages-content {
			height: 15px; /* Ensure each cell takes the full height */
			font-size: .75em;
			color: grey;
			align-items: center;
			justify-content: center;
			text-decoration: none;
		}
		
		.slider1 {
			display: grid;
			grid-column: 8 / span 18;		
			grid-row: 4 / span 6;
  		}
		
		.category-content {
			font-family: Helvetica Neue, sans-serif;
			font-size: .75em;
			font-weight: bold;
			justify-self: end;
		}
		
		.ottawa-navigator {	
			display: grid;
			margin-top: 5px;
			grid-column: 1 / span 6;
			grid-row: 5 / span 10;
			grid-template-columns: 30px 190px 30px;
			grid-template-rows: 40px 40px 40px 40px 40px 40px 40px 40px 40px;
			align-items: center;
			background-color: #add8e6;
		}
		
		.ottawa-header {
			grid-row: 1;
            grid-column: 1 / span 5;
			font-family: Helvetica Neue, sans-serif;
			font-size: 1.0em;
			font-weight: bold;
			text-align: center;
		}
				
		.ottawa1 {
			grid-row: 2;
            grid-column: 2;
		}
		
		.ottawa2 {
			grid-row: 3;
            grid-column: 2;
		}
		
		.ottawa3 {
			grid-row: 4;
            grid-column: 2;
		}
		
		.ottawa4 {
			grid-row: 5;
            grid-column: 2;
		}
		
		.ottawa5 {
			grid-row: 6;
            grid-column: 2;
		}
		
		.ottawa6 {
			grid-row: 7;
            grid-column: 2;
		}
		
		.ottawa7 {
			grid-row: 8;
            grid-column: 2;
		}
		
		.ottawa8 {
			grid-row: 9;
            grid-column: 2;
		}
				
		.category {
			margin: 0px;
			display: grid;
			grid-column: 8;
			grid-row: 11 / span 8;
			grid-template-columns: 110px 14px 110px 14px 110px 15px 110px;
			grid-template-rows: 40px 40px 40px 40px 40px 40px 10px;
			align-items: center;
		}
		
		.category1 {
			grid-row: 1;
            grid-column: 1;
		}
		
		.category2 {
			grid-row: 1;
            grid-column: 3;
		}
		
		.category3 {
			grid-row: 1;
            grid-column: 5;
		}
		
		.category4 {
			grid-row: 1;
            grid-column: 7;
		}
		
		.category5 {
			grid-row: 2;
            grid-column: 1;
		}
		
		.category6 {
			grid-row: 2;
            grid-column: 3;
		}
		
		.category7 {
			grid-row: 2;
            grid-column: 5;
		}
		
		.category8 {
			grid-row: 2;
            grid-column: 7;
		}
		
		.category9 {
			grid-row: 3;
            grid-column: 1;
		}
		
		.category10 {
			grid-row: 3;
            grid-column: 3;
		}
		
		.category11 {
			grid-row: 3;
            grid-column: 5;
		}
		
		.category12 {
			grid-row: 3;
            grid-column: 7;
		}
		
		.category13 {
			grid-row: 4;
            grid-column: 1;
		}
		
		.category14 {
			grid-row: 4;
            grid-column: 3;
		}
		
		.category15 {
			grid-row: 4;
            grid-column: 5;
		}
		
		.category16 {
			grid-row: 4;
            grid-column: 7;
		}
		
		.category17 {
			grid-row: 5;
            grid-column: 1;
		}
		
		.category18 {
			grid-row: 5;
            grid-column: 3;
		}
		
		.category19 {
			grid-row: 5;
            grid-column: 5;
		}
		
		.category20 {
			grid-row: 5;
            grid-column: 7;
		}
		
		.category21 {
			grid-row: 6;
            grid-column: 1;
		}
		
		.category22 {
			grid-row: 4;
            grid-column: 8;
		}
		
		.category23 {
			grid-row: 4;
            grid-column: 10;
		}
		
		.category24 {
			grid-row: 4;
            grid-column: 12;
		}
		
		.category25 {
			grid-row: 5;
            grid-column: 2;
		}
		
		.category26 {
			grid-row: 5;
            grid-column: 4;
		}
		
		.category27 {
			grid-row: 5;
            grid-column: 6;
		}
		
		.category28 {
			grid-row: 5;
            grid-column: 8;
		}
		
		.category29 {
			grid-row: 5;
            grid-column: 10;
		}
		
		.category30 {
			grid-row: 5;
            grid-column: 12;
		}
				
		.construction {
			display: grid;
			grid-template-columns: 5px 416px 10px 30px 5px;
			grid-template-rows: 10px 30px;
		}
		
		.construction-text {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: 1.0em;
			font-weight: bold;
			width: 416px;
			align-items: center;
		}
		
		.construction-image {
			display: grid;
			grid-column: 4;
			grid-row: 2;
			height: 30px;
			width: 30px;
		}	
		
		.garden {
			display: grid;
			grid-template-columns: 10px 1fr 10px;
			grid-template-rows: 15px 30px 15px 20px 15px 104px 20px 1fr;
		}
		
		.garden-title {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: 2.0em;
			font-weight: bold;
			text-align: center;
			height: 30px;
			color: red;
		}
		
		.garden-date {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: 1.15em;
			font-weight: bold;
			text-align: center;
			width: 100%;
		}
		
		.garden-pictures {
			display: grid;
			grid-column: 2;
			grid-row: 6;
			grid-template-columns: 133px 133px 133px 133px 133px;
			grid-template-rows: 102px;
			justify-content: center;
		}

		.garden img {
			width: 130px;
			height: 98px;
			border: 3px solid #888; /* Grey color */
		}
		
		.garden1 {
			display: grid;
			grid-column: 1;
			grid-row: 1;
		}
		
		.garden2 {
			display: grid;
			grid-column: 2;
			grid-row: 1;
		}
		
		.garden3 {
			display: grid;
			grid-column: 3;
			grid-row: 1;
		}
		
		.garden4 {
			display: grid;
			grid-column: 4;
			grid-row: 1;
		}
		
		.garden5 {
			display: grid;
			grid-column: 5;
			grid-row: 1;
		}
		
		.garden-text {
			display: grid;
			grid-column: 2;
			grid-row: 8;
			font-size: 1.0em;
			width: 100%;
			font-weight: bold;
			text-align: left;
		}
						
		.harvests {
			display: grid;
			grid-template-columns: 10px 1fr 10px;
			grid-template-rows: 40px 5px 30px 30px;
		}
		
		.harvests-line5 {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			width: 80%;
			height: 5px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvests-title {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: 1.75em;
			font-weight: bold;
			color: red;
			text-align: center;
		}
		.harvest {
			display: grid;
			grid-template-columns: 5px 1fr 1fr 5px;
			grid-template-rows: 10px 20px 15px 1fr 15px 231px 20px 1px 30px 231px 20px 1px 30px 231px 30px;
		}
		
		.harvest-date {
			display: grid;
			grid-column: 2 / span 2;
			grid-row: 2;
			font-size: 1.0em;
			font-weight: bold;
			text-align: center;
		}
		
		.harvest-text {
			display: grid;
			grid-column: 2 /span 2;
			grid-row: 4;
			font-size: .85em;
			width: 100%;
			font-weight: bold;
			text-align: left;
		}
		
		.harvest-picture1 {
			display: grid;
			grid-column: 2;
			grid-row: 6;
			justify-content: center;
		}
		
		.harvest-picture1 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line1 {
			display: none;
		}
		
		.harvest-picture2 {
			display: grid;
			grid-column: 3;
			grid-row: 6;
			justify-content: center;
		}
		
		.harvest-picture2 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line2 {
			display: grid;
			grid-column: 2 / span 2;
			grid-row: 8;
			width: 80%;
			height: 1px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvest-picture3 {
			display: grid;
			grid-column: 2;
			grid-row: 10;
			justify-content: center;
		}
		
		.harvest-picture3 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line3 {
			display:none;
		}
			
		.harvest-picture4 {
			display: grid;
			grid-column: 3;
			grid-row: 10;
			justify-content: center;
		}
		
		.harvest-picture4 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line4 {
			display: grid;
			grid-column: 2 /span 2;
			grid-row: 12;
			width: 80%;
			height: 1px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvest-picture5 {
			display: grid;
			grid-column: 2;
			grid-row: 14;
			justify-content: center;
		}
		
		.harvest-picture5 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.cc {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr 1fr;
			box-sizing: border-box;
		}
		
		.cc-content {
			grid-column: 1;
			grid-row: 2;
			background-color: #000;
			color: #fff;
			font-size: .60em;
		}
		
		.cc-content a {
			color: green;
		}
		
		.attribution {
			display: grid;
			grid-column: 1;
			grid-row: 1;
			align-items: center;
			justify-content: center;
			background-color: #000;
			color: #fff;
			font-size: .75em;
			border-top: 3px solid #888; /* Grey color */
		}
		
		.attribution a {
			color: green;
		}		
		
		.artist {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 40px 1fr;
			box-sizing: border-box;
			margin-top: 20px;
		}
		
		.artist-title {
			height: 20px;
			background-color: #fff;
			color: #000;
			font-size: .95em;
			font-weight: bold;
			text-align: center;
			text-decoration: underline;
		}
		
		.artist-text {
			background-color: #ccc;
			color: #000;
			padding-left: 10px;
			font-size: .85em;
			font-weight: bold;
			margin-bottom: 20px;
		}
		
		
		.copyright {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr;
			box-sizing: border-box;
			margin-top: 5px;
			height: 50px;
		}
		
		.copyright-content {
			background-color: #fff;
			color: #000;
			font-size: .75em;
			font-weight: bold;
			text-align: center;
		}
		}
		
/* **************************************************************************** */
		
		@media screen and (min-width: 1024px) and (max-width: 1365px) {		
		
		body {
            font-family: Arial, sans-serif;
            margin: 0;
		}
		
		 .header {
			display: grid;
			grid-template-columns: 80px 344px 1fr;
			grid-template-rows: 50px;
			border-top: 3px solid #888;
			border-bottom: 3px solid #888;
			background-color: #000;
		}
		
		.header img {
            grid-column: 1;
			grid-row: 1;
			background-color: #000;
			width: 80px;
			height: 50px;
		}
				
        .header-content {
			display: flex;
            background-color: #000;
            color: #fff;
			grid-column: 2;
            font-size: 2.00em;
			align-items: center;
		}
		
		.header a {
			color: white;
			text-decoration: none;
		}       	
						
		.pv1 {
			display: grid;
			grid-template-columns: 13px 110px 27px 110px 27px 5px 10px 15px 10px 72px 27px 17px 93px 12px 15px 29px 81px 27px 44px 44px 22px 27px 55px 28px 17px 10px 67px;
			grid-template-rows: 30px 40px 26px 64px 5px 40px 40px 40px 40px 40px 40px 40px 40px 40px 5px 40px 40px 40px 10px;
			padding: 0px;
			margin-top: 10px;
			margin-left: 10px;
			background-color: #fff;
		}

		.subject {
			grid-column: 1 / span 7;
			grid-row: 1 / span 3;
			position: relative; /* Ensure the overlay is positioned relative to this container */
			width: 300px;
			height: 94px;
			border-top: 1px solid #888;
			border-left: 1px solid #888; 
			border-right: 1px solid #888;
			border-bottom: 1px solid #888;
			
		}
		
		.subject img {
			width: 300px;
			height: 94px;
		}
				
		.subject-overlay {
			width: 180px;
			position: absolute;
			top: 50%; /* Position at the vertical center */
			left: 50%; /* Position at the horizontal center */
			transform: translate(-50%, -50%); /* Center the text precisely */
			color: rgba(255, 255, 255, 1.0); /* Transparent white text */
			font-size: 1.50em; /* Adjust the font size as needed */
			font-weight: bold;
		}
		
		.project {
			grid-column: 1 / span 7;
			grid-row: 4;
			position: relative; /* Ensure the overlay is positioned relative to this container */
			width: 298px;
			height: 60px;
			border-top: 2px solid #ccc;
			border-left: 2px solid #ccc; 
			border-right: 2px solid #ccc;
			border-bottom: 2px solid #ccc;
		}
		
		.project img {			
			position: relative; /* Ensure the overlay is positioned relative to this container */
			width: 298px;
			height: 60px;
			background-color: #fff;
			transition: border-color 0.3s ease; /* Add a smooth transition effect */
		}
		
		.project img:hover {			
			border-color: #000;
		}
		
		.project-overlay {
			width: 180px;
			position: absolute;
			top: 50%; /* Position at the vertical center */
			left: 50%; /* Position at the horizontal center */
			transform: translate(-50%, -50%); /* Center the text precisely */
			color: #000;
			font-size: 1.15em; /* Adjust the font size as needed */
			font-weight: bold;
			white-space: nowrap;
		}
		
		.type {
			display: grid;
			grid-template-columns: 15px 10px 72px 27px 17px 93px 12px 15px 29px 81px 27px 44px 44px 22px 27px 55px 28px 16px 10px 69px;
			grid-template-rows: 30px 40px 25px;
		}
		
		.websites {
			display: grid;
			grid-column: 3;
			grid-row: 1;
			height: 30px;
			width: 72px;
			font-size: 1.0em;
			font-weight: bold;
			color: red;
			text-decoration: underline;
		}
		
		.video-audio {
			display: grid;
			grid-column: 6 / span 2;
			grid-row: 1;
			height: 30px;
			width: 105px;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: underline;
		}
		
		.books-documents {
			display: grid;
			grid-column: 10 / span 2;
			grid-row: 1;
			height: 30px;
			width: 152px;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: underline;
		}
		
		.blogs-news {
			display: grid;
			grid-column: 14 / span 2;
			grid-row: 1;
			height: 30px;
			width: 104px;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: underline;
		}
		
		.database {
			display: grid;
			grid-column: 19 / span 2;
			grid-row: 1;
			height: 30px;
			width: 96px;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: underline;
		}
				
		.pages {
            display: grid;
            grid-template-columns: 9px 9px 9px 9px 9px 9px 9px 9px 17px 17px 40px;
            grid-template-rows: 17px;
			grid-row: 3;
            grid-column: 9; 
            gap: 53px; /* Adjust the gap as needed */
			margin-left: 10px;
        }

       .pages-content {
			height: 15px; /* Ensure each cell takes the full height */
			font-size: .95em;
			color: grey;
			align-items: center;
			justify-content: center;
			text-decoration: none;
		}
		
		.slider1 {
			display: grid;
			grid-column: 9 / span 19;		
			grid-row: 4 / span 10;
  		}
		
		
		.category-content {
			font-family: Helvetica Neue, sans-serif;
			font-size: .75em;
			font-weight: bold;
			justify-self: end;
		}
				
		.ottawa-navigator {
			display: grid;
			margin-top: 0px;
			grid-column: 1 / span 7;
			grid-row: 6 / span 10;
			grid-template-columns: 56px 190px 56px;
			grid-template-rows: 5px 30px 40px 40px 40px 40px 40px 40px 40px 40px 10px;
			align-items: center;
			background-color: #add8e6;
		}
		
		.ottawa-header {
			grid-row: 2;
            grid-column: 1 / span 3;
			font-family: Helvetica Neue, sans-serif;
			font-size: 1.0em;
			font-weight: bold;
			text-align: center;
		}
		
		.ottawa1 {
			grid-row: 3;
            grid-column: 2;
		}
		
		.ottawa2 {
			grid-row: 4;
            grid-column: 2;
		}
		
		.ottawa3 {
			grid-row: 5;
            grid-column: 2;
		}
		
		.ottawa4 {
			grid-row: 6;
            grid-column: 2;
		}
		
		.ottawa5 {
			grid-row: 7;
            grid-column: 2;
		}
		
		.ottawa6 {
			grid-row: 8;
            grid-column: 2;
		}
		
		.ottawa7 {
			grid-row: 9;
            grid-column: 2;
		}
		
		.ottawa8 {
			grid-row: 10;
            grid-column: 2;
		}
		
		.category {	
			margin: 0px;
			display: grid;
			grid-column: 1;
			grid-row: 15;
			grid-template-columns: 15px 110px 30px 125px 37px 110px 27px 110px 27px 110px 27px 110px 27px 110px;
			grid-template-rows: 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 20px;
			align-items: center;
		}
		
		.category1 {
			grid-row: 1;
            grid-column: 2;
		}
		
		.category2 {
			grid-row: 1;
            grid-column: 4;
		}
		
		.category3 {
			grid-row: 1;
            grid-column: 6;
		}
		
		.category4 {
			grid-row: 1;
            grid-column: 8;
		}
		
		.category5 {
			grid-row: 1;
            grid-column: 10;
		}
		
		.category6 {
			grid-row: 1;
            grid-column: 12;
		}
		
		.category7 {
			grid-row: 1;
            grid-column: 14;
		}
		
		.category8 {
			grid-row: 2;
            grid-column: 2;
		}
		
		.category9 {
			grid-row: 2;
            grid-column: 4;
		}
		
		.category10 {
			grid-row: 2;
            grid-column: 6;
		}
		
		.category11 {
			grid-row: 2;
            grid-column: 8;
		}
		
		.category12 {
			grid-row: 2;
            grid-column: 10;
		}
		
		.category13 {
			grid-row: 2;
            grid-column: 12;
		}
		
		.category14 {
			grid-row: 2;
            grid-column: 14;
		}
		
		.category15 {
			grid-row: 3;
            grid-column: 2;
		}
		
		.category16 {
			grid-row: 3;
            grid-column: 4;
		}
		
		.category17 {
			grid-row: 3;
            grid-column: 6;
		}
		
		.category18 {
			grid-row: 3;
            grid-column: 8;
		}
		
		.category19 {
			grid-row: 3;
            grid-column: 10;
		}
		
		.category20 {
			grid-row: 3;
            grid-column: 12;
		}
		
		.category21 {
			grid-row: 3;
            grid-column: 14;
		}
		
		.category22 {
			grid-row: 5;
            grid-column: 8;
		}
		
		.category23 {
			grid-row: 5;
            grid-column: 10;
		}
		
		.category24 {
			grid-row: 5;
            grid-column: 12;
		}
		
		.category25 {
			grid-row: 5;
            grid-column: 14;
		}
		
		.category26 {
			grid-row: 6;
            grid-column: 2;
		}
		
		.category27 {
			grid-row: 6;
            grid-column: 4;
		}
		
		.category28 {
			grid-row: 6;
            grid-column: 6;
		}
		
		.category29 {
			grid-row: 6;
            grid-column: 8;
		}
		
		.category30 {
			grid-row: 6;
            grid-column: 10;
		}
		
		.cc-content {
			grid-column: 1;
			grid-row: 2;
			background-color: #000;
			color: #fff;
			font-size: .85em;
		}
		
		.cc-content a {
			color: green;
		}
		
		.construction {
			display: grid;
			grid-template-columns: 5px 416px 10px 30px 5px;
			grid-template-rows: 10px 30px;
		}
		
		.construction-text {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: 1.0em;
			font-weight: bold;
			width: 416px;
			align-items: center;
		}
		
		.construction-image {
			display: grid;
			grid-column: 4;
			grid-row: 2;
			height: 30px;
			width: 30px;
		}	
		
		.garden {
			display: grid;
			grid-template-columns: 10px 1fr 10px;
			grid-template-rows: 15px 30px 15px 20px 15px 151px 20px 1fr;
		}
		
		.garden-title {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: 2.0em;
			font-weight: bold;
			text-align: center;
			height: 30px;
			color: red;
		}
		
		.garden-date {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: 1.15em;
			font-weight: bold;
			text-align: center;
			width: 100%;
		}
		
		.garden-pictures {
			display: grid;
			grid-column: 2;
			grid-row: 6;
			grid-template-columns: 194px 194px 194px 194px 194px;
			grid-template-rows: 151px;
			justify-content: center;
		}

		.garden img {
			width: 190px;
			height: 143px;
			border: 4px solid #888; /* Grey color */
		}
		
		.garden1 {
			display: grid;
			grid-column: 1;
			grid-row: 1;
		}
		
		.garden2 {
			display: grid;
			grid-column: 2;
			grid-row: 1;
		}
		
		.garden3 {
			display: grid;
			grid-column: 3;
			grid-row: 1;
		}
		
		.garden4 {
			display: grid;
			grid-column: 4;
			grid-row: 1;
		}
		
		.garden5 {
			display: grid;
			grid-column: 5;
			grid-row: 1;
		}
		
		.garden-text {
			display: grid;
			grid-column: 2;
			grid-row: 8;
			font-size: 1.0em;
			width: 100%;
			font-weight: bold;
			text-align: left;
		}
						
		.harvests {
			display: grid;
			grid-template-columns: 10px 1fr 10px;
			grid-template-rows: 40px 5px 30px 30px;
		}
		
		.harvests-line5 {
			display: grid;
			grid-column: 2 / span 2;
			grid-row: 2;
			width: 80%;
			height: 5px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvests-title {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: 2.0em;
			font-weight: bold;
			color: red;
			text-align: center;
		}
		.harvest {
			display: grid;
			grid-template-columns: 5px 1fr 1fr 5px;
			grid-template-rows: 15px 20px 15px 1fr 30px 231px 20px 1px 30px 231px 20px 1px 30px 231px 30px;
		}
		
		.harvest-date {
			display: grid;
			grid-column: 2 / span 2;
			grid-row: 2;
			font-size: 1.15em;
			font-weight: bold;
			text-align: center;
		}
		
		.harvest-text {
			display: grid;
			grid-column: 2 /span 2;
			grid-row: 4;
			font-size: 1.0em;
			width: 100%;
			font-weight: bold;
			text-align: left;
		}
		
		.harvest-picture1 {
			display: grid;
			grid-column: 2;
			grid-row: 6;
			justify-content: center;
		}
		
		.harvest-picture1 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line1 {
			display: none;
		}
		
		.harvest-picture2 {
			display: grid;
			grid-column: 3;
			grid-row: 6;
			justify-content: center;
		}
		
		.harvest-picture2 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line2 {
			display: grid;
			grid-column: 2 / span 2;
			grid-row: 8;
			width: 80%;
			height: 1px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvest-picture3 {
			display: grid;
			grid-column: 2;
			grid-row: 10;
			justify-content: center;
		}
		
		.harvest-picture3 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line3 {
			display:none;
		}
			
		.harvest-picture4 {
			display: grid;
			grid-column: 3;
			grid-row: 10;
			justify-content: center;
		}
		
		.harvest-picture4 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line4 {
			display: grid;
			grid-column: 2 /span 2;
			grid-row: 12;
			width: 80%;
			height: 1px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvest-picture5 {
			display: grid;
			grid-column: 2;
			grid-row: 14;
			justify-content: center;
		}
		
		.harvest-picture5 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.attribution {
			display: grid;
			grid-column: 1;
			grid-row: 1;
			align-items: center;
			justify-content: center;
			background-color: #000;
			color: #fff;
			font-size: 1.0em;
			border-top: 3px solid #888; /* Grey color */
		}
		
		.attribution a {
			color: green;
			width: 300px;
		}		
		
		.artist {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 40px 1fr;
			box-sizing: border-box;
			margin-top: 20px;
			border-bottom: 3px solid #888; /* Grey color */
		}
		
		.artist-title {
			height: 20px;
			background-color: #fff;
			color: #000;
			font-size: .95em;
			font-weight: bold;
			text-align: center;
			text-decoration: underline;
		}
		
		.artist-text {
			background-color: #ccc;
			color: #000;
			padding-left: 10px;
			font-size: .85em;
			font-weight: bold;
			margin-bottom: 20px;
		}
				
		.copyright {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr;
			box-sizing: border-box;
			margin-top: 5px;
			height: 50px;
		}
		
		.copyright-content {
			background-color: #fff;
			color: #000;
			font-size: .75em;
			font-weight: bold;
			text-align: center;
		}
		}
		
/* *********************************************************************** */
	
		@media screen and (min-width: 1366px) and (max-width: 1919px) {

		body {
            font-family: Arial, sans-serif;
            margin: 0;
		}
		
		  .header {
			display: grid;
			grid-template-columns: 80px 344px 1fr;
			grid-template-rows: 50px;
			border-top: 3px solid #888;
			border-bottom: 3px solid #888;
			background-color: #000;
		}
		
		.header img {
            grid-column: 1;
			grid-row: 1;
			background-color: #000;
			width: 80px;
			height: 50px;
		}
				
        .header-content {
			display: flex;
            background-color: #000;
            color: #fff;
			grid-column: 2;
            font-size: 2.00em;
			align-items: center;
		}
		
		.header a {
			color: white;
			text-decoration: none;
		}       	 	

        .pv1 {
			display: grid;
			grid-template-columns: 10px 412px 20px 900px 14px 10px;
			grid-template-rows: 97px 32px 30px 5px 40px 50px 50px 50px 50px 10px 50px 50px 50px 50px 50px 50px 50px 10px;
			padding: 0px;
			margin-top: 10px;
			background-color: #fff;
		}
		
		.subject {
			grid-column: 2;
			grid-row: 1;
			width: 410px;
			height: 94px;
			position: relative; /* Ensure the overlay is positioned relative to this container */
			border-top: 1px solid #888;
			border-left: 1px solid #888; 
			border-right: 1px solid #888;
			border-bottom: 2px solid #888;
		}
		
		.subject img {
			width: 410px;
			height: 94px;
		}
				
		.subject-overlay {
			width: 200px;
			position: absolute;
			top: 50%; /* Position at the vertical center */
			left: 50%; /* Position at the horizontal center */
			transform: translate(-50%, -50%); /* Center the text precisely */
			color: rgba(255, 255, 255, 1.0); /* Transparent white text */
			font-size: 1.65em; /* Adjust the font size as needed */
			font-weight: bold;
		}
		
		.project {
			grid-column: 2;
			grid-row: 2;
			position: relative; /* Ensure the overlay is positioned relative to this container */
			width: 408px;
			height: 60px;
			border-top: 0px solid #ccc;
			border-left: 0px solid #ccc; 
			border-right: 0px solid #ccc;
			border-bottom: 0px solid #ccc;
		}
		
		.project img {			
			position: relative; /* Ensure the overlay is positioned relative to this container */
			width: 408px;
			height: 60px;
			background-color: #fff;
			border: 2px solid #ccc;
			transition: border-color 0.3s ease; /* Add a smooth transition effect */
		}
		
		.project img:hover {			
			border-color: #000;
		}
		
		.project-overlay {
			width: 220px;
			position: absolute;
			top: 50%; /* Position at the vertical center */
			left: 50%; /* Position at the horizontal center */
			transform: translate(-50%, -50%); /* Center the text precisely */
			color: #000;
			font-size: 1.40em; /* Adjust the font size as needed */
			font-weight: bold;
			white-space: nowrap;
		}
		
		.type {
			display: grid;
			margin: 0px;
			padding: 0px;
			grid-column: 3 / span 20;
			grid-row: 1;
			grid-template-columns: 20px 72px 82px 106px 82px 152px 82px 102px 82px 70px 20px 20px;
			grid-template-rows: 33px 30px 33px;
		}
		
		.websites {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			height: 30px;
			width: 72px;
			font-size: 1.0em;
			font-weight: bold;
			color: red;
			text-decoration: underline;
		}
		
		.video-audio {
			display: grid;
			grid-column: 4;
			grid-row: 2;
			height: 30px;
			width: 105px;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: underline;
		}
		
		.books-documents {
			display: grid;
			grid-column: 6;
			grid-row: 2;
			height: 30px;
			width: 152px;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: underline;
		}
		
		.blogs-news {
			display: grid;
			grid-column: 8;
			grid-row: 2;
			height: 30px;
			width: 104px;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: underline;
		}
		
		.database {
			display: grid;
			grid-column: 10;
			grid-row: 2;
			height: 30px;
			width: 70px;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: underline;
		}
				
		.pages {
            display: grid;
            grid-template-columns: 9px 9px 9px 9px 9px 9px 9px 9px 17px 17px 40px;
            grid-template-rows: 17px;
			grid-row: 3;
            grid-column: 4; 
            gap: 72px; /* Adjust the gap as needed */
			margin-left: 10px;
        }

       .pages-content {
			height: 15px; /* Ensure each cell takes the full height */
			font-size: .95em;
			color: grey;
			align-items: center;
			justify-content: center;
			text-decoration: none;
		}
		
		.slider1 {
			display: grid;
			grid-column: 4;		
			grid-row: 4 / span 13;
  		}
				
		.category-content {
			font-family: Helvetica Neue, sans-serif;
			font-size: .75em;
			font-weight: bold;
			justify-self: end;
		}
		
		.ottawa-navigator {
			display: grid;
			margin-top: 0px;
			grid-column: 2;
			grid-row: 5 / span 6;
			grid-template-columns: 20px 150px 32px 190px 20px;
			grid-template-rows: 40px 50px 50px 50px 50px 10px;
			align-items: center;
			background-color: #add8e6;
		}
		
		.ottawa-header {
			grid-row: 1;
            grid-column: 1 / span 5;
			font-family: Helvetica Neue, sans-serif;
			font-size: 1.0em;
			font-weight: bold;
			text-align: center;
		}
		
		.ottawa1 {
			grid-row: 2;
            grid-column: 2;
		}
		
		.ottawa2 {
			grid-row: 2;
            grid-column: 4;
		}
		
		.ottawa3 {
			grid-row: 3;
            grid-column: 2;
		}
		
		.ottawa4 {
			grid-row: 3;
            grid-column: 4;
		}
		
		.ottawa5 {
			grid-row: 4;
            grid-column: 2;
		}
		
		.ottawa6 {
			grid-row: 4;
            grid-column: 4;
		}
		
		.ottawa7 {
			grid-row: 5;
            grid-column: 2;
		}
		
		.ottawa8 {
			grid-row: 5;
            grid-column: 4;
		}
		
		.category {	
			margin: 0px;
			display: grid;
			grid-column: 1;
			grid-row: 11 / span 6;
			grid-template-columns: 10px 125px 30px 110px 30px 110px 35px 110px 35px 110px 35px 110px 35px 110px 35px 110px 35px 110px 20px; 
			grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 10px;
			align-items: center;
		}
		
		.category1 {
			grid-row: 1;
            grid-column: 2;
		}
		
		.category2 {
			grid-row: 1;
            grid-column: 4;
		}
		
		.category3 {
			grid-row: 1;
            grid-column: 6;
		}
		
		.category4 {
			grid-row: 2;
            grid-column: 2;
		}
		
		.category5 {
			grid-row: 2;
            grid-column: 4;
		}
		
		.category6 {
			grid-row: 2;
            grid-column: 6;
		}
		
		.category7 {
			grid-row: 3;
            grid-column: 2;
		}
		
		.category8 {
			grid-row: 3;
            grid-column: 4;
		}
		
		.category9 {
			grid-row: 3;
            grid-column: 6;
		}
		
		.category10 {
			grid-row: 4;
            grid-column: 2;
		}
		
		.category11 {
			grid-row: 4;
            grid-column: 4;
		}
		
		.category12 {
			grid-row: 4;
            grid-column: 6;
		}
		
		.category13 {
			grid-row: 5;
            grid-column: 2;
		}
		
		.category14 {
			grid-row: 5;
            grid-column: 4;
		}
		
		.category15 {
			grid-row: 5;
            grid-column: 6;
		}
		
		.category16 {
			grid-row: 6;
            grid-column: 2;
		}
		
		.category17 {
			grid-row: 6;
            grid-column: 4;
		}
		
		.category18 {
			grid-row: 6;
            grid-column: 6;
		}
		
		.category19 {
			grid-row: 7;
            grid-column: 2;
		}
		
		.category20 {
			grid-row: 7;
            grid-column: 4;
		}
		
		.category21 {
			grid-row: 7;
            grid-column: 6;
		}
		
		.category22 {
			grid-row: 7;
            grid-column: 8;
		}
		
		.category23 {
			grid-row: 7;
            grid-column: 10;
		}
		
		.category24 {
			grid-row: 7;
            grid-column: 12;
		}
		
		.category25 {
			grid-row: 7;
            grid-column: 14;
		}
		
		.category26 {
			grid-row: 7;
            grid-column: 16;
		}
		
		.category27 {
			grid-row: 7;
            grid-column: 18;
		}
		
		.category28 {
			grid-row: 8;
            grid-column: 2;
		}
		
		.category29 {
			grid-row: 8;
            grid-column: 4;
		}
		
		.category30 {
			grid-row: 8;
            grid-column: 6;
		}
				
		.cc {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr 1fr;
			box-sizing: border-box;
		}
		
		.cc-content {
			grid-column: 1;
			grid-row: 2;
			background-color: #000;
			color: #fff;
			font-size: .85em;
		}
		
		.cc-content a {
			color: green;
		}
		
		.attribution {
			display: grid;
			grid-column: 1;
			grid-row: 1;
			align-items: center;
			justify-content: center;
			background-color: #000;
			color: #fff;
			font-size: 1.0em;
			border-top: 3px solid #888; /* Grey color */
		}
		
		.attribution a {
			color: green;
			width: 300px;
		}		
		
		.construction {
			display: grid;
			grid-template-columns: 30px 416px 10px 30px 30px;
			grid-template-rows: 10px 30px;
		}
		
		.construction-text {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: 1.0em;
			font-weight: bold;
			width: 416px;
			align-items: center;
		}
		
		.construction-image {
			display: grid;
			grid-column: 4;
			grid-row: 2;
			height: 30px;
			width: 30px;
		}	
		
		.garden {
			display: grid;
			grid-template-columns: 30px 1fr 30px;
			grid-template-rows: 15px 30px 15px 20px 15px 196px 20px 1fr;
		}
		
		.garden-title {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: 2.0em;
			font-weight: bold;
			text-align: center;
			height: 30px;
			color: red;
		}
		
		.garden-date {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: 1.15em;
			font-weight: bold;
			text-align: center;
			width: 100%;
		}
		
		.garden-pictures {
			display: grid;
			grid-column: 2;
			grid-row: 6;
			grid-template-columns: 254px 254px 254px 254px 254px;
			grid-template-rows: 194px;
			justify-content: center;
		}

		.garden img {
			width: 250px;
			height: 188px;
			border: 4px solid #888; /* Grey color */
		}
		
		.garden1 {
			display: grid;
			grid-column: 1;
			grid-row: 1;
		}
		
		.garden2 {
			display: grid;
			grid-column: 2;
			grid-row: 1;
		}
		
		.garden3 {
			display: grid;
			grid-column: 3;
			grid-row: 1;
		}
		
		.garden4 {
			display: grid;
			grid-column: 4;
			grid-row: 1;
		}
		
		.garden5 {
			display: grid;
			grid-column: 5;
			grid-row: 1;
		}
		
		.garden-text {
			display: grid;
			grid-column: 2;
			grid-row: 8;
			font-size: 1.0em;
			width: 100%;
			font-weight: bold;
			text-align: left;
		}
				
		.harvests {
			display: grid;
			grid-template-columns: 30px 1fr 30px;
			grid-template-rows: 40px 5px 30px 30px;
		}
		
		.harvests-line5 {
			display: grid;
			grid-column: 2 / span 2;
			grid-row: 2;
			width: 80%;
			height: 5px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvests-title {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: 2.0em;
			font-weight: bold;
			color: red;
			text-align: center;
		}
		.harvest {
			display: grid;
			grid-template-columns: 30px 1fr 1fr 1fr 30px;
			grid-template-rows: 15px 20px 15px 1fr 30px 231px 20px 1px 30px 231px 30px;
		}
		
		.harvest-date {
			display: grid;
			grid-column: 2 / span 3;
			grid-row: 2;
			font-size: 1.15em;
			font-weight: bold;
			text-align: center;
		}
		
		.harvest-text {
			display: grid;
			grid-column: 2 /span 3;
			grid-row: 4;
			font-size: 1.0em;
			width: 100%;
			font-weight: bold;
			text-align: left;
		}
		
		.harvest-picture1 {
			display: grid;
			grid-column: 2;
			grid-row: 6;
			justify-content: center;
		}
		
		.harvest-picture1 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line1 {
			display: none;
		}
		
		.harvest-picture2 {
			display: grid;
			grid-column: 3;
			grid-row: 6;
			justify-content: center;
		}
		
		.harvest-picture2 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line2 {
			display: grid;
			grid-column: 2 / span 3;
			grid-row: 8;
			width: 80%;
			height: 1px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvest-picture3 {
			display: grid;
			grid-column: 4;
			grid-row: 6;
			justify-content: center;
		}
		
		.harvest-picture3 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line3 {
			display:none;
		}
			
		.harvest-picture4 {
			display: grid;
			grid-column: 2;
			grid-row: 10;
			justify-content: center;
		}
		
		.harvest-picture4 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line4 {
			display:none;
		}
		
		.harvest-picture5 {
			display: grid;
			grid-column: 3;
			grid-row: 10;
			justify-content: center;
		}
		
		.harvest-picture5 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.attribution {
			display: grid;
			grid-column: 1;
			grid-row: 1;
			align-items: center;
			justify-content: center;
			background-color: #000;
			color: #fff;
			font-size: 1.0em;
			border-top: 3px solid #888; /* Grey color */
		}
		
		.attribution a {
			color: green;
			width: 300px;
		}		
		
		.artist {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 40px 1fr;
			box-sizing: border-box;
			margin-top: 20px;
			border-bottom: 3px solid #888; /* Grey color */
		}
		
		.artist-title {
			height: 20px;
			background-color: #fff;
			color: #000;
			font-size: .95em;
			font-weight: bold;
			text-align: center;
			text-decoration: underline;
		}
		
		.artist-text {
			background-color: #ccc;
			color: #000;
			padding-left: 10px;
			font-size: .85em;
			font-weight: bold;
			margin-bottom: 20px;
		}
				
		.copyright {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr;
			box-sizing: border-box;
			margin-top: 5px;
			height: 50px;
		}
		
		.copyright-content {
			background-color: #fff;
			color: #000;
			font-size: .75em;
			font-weight: bold;
			text-align: center;
		}
		}
		
/* **************************************************************************** */
		
		@media screen and (min-width: 1920px) and (max-width: 5000px) {

		body {
            font-family: Arial, sans-serif;
            margin: 0;
		}
		
		 .header {
			display: grid;
			grid-template-columns: 80px 344px 1fr;
			grid-template-rows: 50px;
			border-top: 3px solid #888;
			border-bottom: 3px solid #888;
			background-color: #000;
		}
		
		.header img {
            grid-column: 1;
			grid-row: 1;
			background-color: #000;
			width: 80px;
			height: 50px;
		}
				
        .header-content {
			display: flex;
            background-color: #000;
            color: #fff;
			grid-column: 2;
            font-size: 2.00em;
			align-items: center;
		}
		
		.header a {
			color: white;
			text-decoration: none;
		}       	

        .pv1 {
			display: grid;
			grid-template-columns: 10px 412px 20px 900px 14px 10px;
			grid-template-rows: 97px 32px 32px 50px 50px 50px 50px 50px 55px 50px 50px 50px 50px 50px 50px 20px;
			padding: 0px;
			margin-top: 10px;
			background-color: #fff;
		}
		
		.subject {
			grid-column: 2;
			grid-row: 1;
			position: relative; /* Ensure the overlay is positioned relative to this container */
			width: 410px;
			height: 94px;
			border-top: 1px solid #888;
			border-left: 1px solid #888; 
			border-right: 1px solid #888;
			border-bottom: 2px solid #888;
		}
		
		.subject img {
			width: 410px;
			height: 94px;
		}
				
		.subject-overlay {
			width: 200px;
			position: absolute;
			top: 50%; /* Position at the vertical center */
			left: 50%; /* Position at the horizontal center */
			transform: translate(-50%, -50%); /* Center the text precisely */
			color: rgba(255, 255, 255, 1.0); /* Transparent white text */
			font-size: 1.65em; /* Adjust the font size as needed */
			font-weight: bold;
		}
		
		.project {
			grid-column: 2;
			grid-row: 2;
			position: relative; /* Ensure the overlay is positioned relative to this container */
			width: 408px;
			height: 60px;
			border-top: 0px solid #ccc;
			border-left: 0px solid #ccc; 
			border-right: 0px solid #ccc;
			border-bottom: 0px solid #ccc;
		}
		
		.project img {			
			position: relative; /* Ensure the overlay is positioned relative to this container */
			width: 408px;
			height: 60px;
			background-color: #fff;
			border: 2px solid #ccc;
			transition: border-color 0.3s ease; /* Add a smooth transition effect */
		}
		
		.project img:hover {			
			border-color: #000;
		}
		
		.project-overlay {
			width: 220px;
			position: absolute;
			top: 50%; /* Position at the vertical center */
			left: 50%; /* Position at the horizontal center */
			transform: translate(-50%, -50%); /* Center the text precisely */
			color: #000;
			font-size: 1.40em; /* Adjust the font size as needed */
			font-weight: bold;
			white-space: nowrap;
		}
		
		.type {
			display: grid;
			margin: 0px;
			padding: 0px;
			grid-column: 3 / span 20;
			grid-row: 1;
			grid-template-columns: 20px 72px 82px 106px 82px 152px 82px 102px 82px 70px 20px 20px;
			grid-template-rows: 33px 30px 33px;
		}
		
		.websites {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			height: 30px;
			width: 72px;
			font-size: 1.0em;
			font-weight: bold;
			color: red;
			text-decoration: underline;
		}
		
		.video-audio {
			display: grid;
			grid-column: 4;
			grid-row: 2;
			height: 30px;
			width: 105px;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: underline;
		}
		
		.books-documents {
			display: grid;
			grid-column: 6;
			grid-row: 2;
			height: 30px;
			width: 152px;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: underline;
		}
		
		.blogs-news {
			display: grid;
			grid-column: 8;
			grid-row: 2;
			height: 30px;
			width: 104px;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: underline;
		}
		
		.database {
			display: grid;
			grid-column: 10;
			grid-row: 2;
			height: 30px;
			width: 70px;
		    font-size: 1.0em;
			font-weight: bold;
			color: grey;
			text-decoration: underline;
		}
				
		.pages {
            display: grid;
            grid-template-columns: 9px 9px 9px 9px 9px 9px 9px 9px 17px 17px 40px;
            grid-template-rows: 17px;
			grid-row: 3;
            grid-column: 4; 
            gap: 72px; /* Adjust the gap as needed */
			margin-left: 10px;
        }

       .pages-content {
			height: 15px; /* Ensure each cell takes the full height */
			font-size: .95em;
			color: grey;
			align-items: center;
			justify-content: center;
			text-decoration: none;
		}
		
		.slider1 {
			display: grid;
			grid-column: 4;		
			grid-row: 4 / span 13;
  		}
		
		
		.category-content {
			font-family: Helvetica Neue, sans-serif;
			font-size: .80em;
			font-weight: bold;
			justify-self: end;
		}
		
		.ottawa-navigator {
			display: grid;
			margin-top: 5px;
			grid-column: 2;
			grid-row: 4 / span 5;
			grid-template-columns: 10px 150px 32px 200px 20px;
			grid-template-rows: 40px 50px 50px 50px 55px;
			align-items: center;
			background-color: #add8e6;
		}
		
		.ottawa-header {
			grid-row: 1;
            grid-column: 1 / span 5;
			font-family: Helvetica Neue, sans-serif;
			font-size: 1.0em;
			font-weight: bold;
			text-align: center;
		}
		
		.ottawa1 {
			grid-row: 2;
            grid-column: 2;
		}
		
		.ottawa2 {
			grid-row: 2;
            grid-column: 4;
		}
		
		.ottawa3 {
			grid-row: 3;
            grid-column: 2;
		}
		
		.ottawa4 {
			grid-row: 3;
            grid-column: 4;
		}
		
		.ottawa5 {
			grid-row: 4;
            grid-column: 2;
		}
		
		.ottawa6 {
			grid-row: 4;
            grid-column: 4;
		}

		.ottawa7 {
			grid-row: 5;
            grid-column: 2;
		}
		
		.ottawa8 {
			grid-row: 5;
            grid-column: 4;
		}
		
		.category {	
			margin: 0px;
			display: grid;
			grid-column: 1;
			grid-row: 9 / span 6;
			grid-template-columns: 13px 110px 30px 125px 30px 110px 35px 110px 35px 110px 35px 110px 35px 110px 35px 110px 35px 110px 40px; 
			grid-template-rows: 50px 50px 50px 50px 50px 50px 50px;
		}
				
        .category1 {
			grid-row: 1;
            grid-column: 2;
		}
		
		.category2 {
			grid-row: 1;
            grid-column: 4;
		}
		
		.category3 {
			grid-row: 1;
            grid-column: 6;
		}
		
		.category4 {
			grid-row: 2;
            grid-column: 2;
		}
		
		.category5 {
			grid-row: 2;
            grid-column: 4;
		}
		
		.category6 {
			grid-row: 2;
            grid-column: 6;
		}
		
		.category7 {
			grid-row: 3;
            grid-column: 2;
		}
		
		.category8 {
			grid-row: 3;
            grid-column: 4;
		}
		
		.category9 {
			grid-row: 3;
            grid-column: 6;
		}
		
		.category10 {
			grid-row: 4;
            grid-column: 2;
		}
		
		.category11 {
			grid-row: 4;
            grid-column: 4;
		}
		
		.category12 {
			grid-row: 4;
            grid-column: 6;
		}
		
		.category13 {
			grid-row: 5;
            grid-column: 2;
		}
		
		.category14 {
			grid-row: 5;
            grid-column: 4;
		}
		
		.category15 {
			grid-row: 5;
            grid-column: 6;
		}
		
		.category16 {
			grid-row: 6;
            grid-column: 2;
		}
		
		.category17 {
			grid-row: 6;
            grid-column: 4;
		}
		
		.category18 {
			grid-row: 6;
            grid-column: 6;
		}
		
		.category19 {
			grid-row: 7;
            grid-column: 2;
		}
		
		.category20 {
			grid-row: 7;
            grid-column: 4;
		}
		
		.category21 {
			grid-row: 7;
            grid-column: 6;
		}
		
		.category22 {
			grid-row: 7;
            grid-column: 8;
		}
		
		.category23 {
			grid-row: 7;
            grid-column: 10;
		}
		
		.category24 {
			grid-row: 7;
            grid-column: 12;
		}
		
		.category25 {
			grid-row: 7;
            grid-column: 14;
		}
		
		.category26 {
			grid-row: 7;
            grid-column: 16;
		}
		
		.category27 {
			grid-row: 7;
            grid-column: 18;
		}
		
		.category28 {
			grid-row: 8;
            grid-column: 2;
		}
		
		.category29 {
			grid-row: 8;
            grid-column: 4;
		}
		
		.category30 {
			grid-row: 8;
            grid-column: 6;
		}
				
		.cc {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr 1fr;
			box-sizing: border-box;
		}
		
		.cc-content {
			grid-column: 1;
			grid-row: 2;
			background-color: #000;
			color: #fff;
			font-size: .85em;
		}
		
		.cc-content a {
			color: green;
		}
		
		.attribution {
			display: grid;
			grid-column: 1;
			grid-row: 1;
			align-items: center;
			justify-content: center;
			background-color: #000;
			color: #fff;
			font-size: 1.0em;
			border-top: 3px solid #888; /* Grey color */
		}
		
		.attribution a {
			color: green;
			width: 300px;
		}		
		
		.construction {
			display: grid;
			grid-template-columns: 50px 478px 10px 40px 50px;
			grid-template-rows: 10px 40px;
		}
		
		.construction-text {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: 1.15em;
			font-weight: bold;
			width: 478px;
			align-items: center;
		}
		
		.construction-image {
			display: grid;
			grid-column: 4;
			grid-row: 2;
			height: 40px;
			width: 40px;
		}	
		
		.garden {
			display: grid;
			grid-template-columns: 50px 1fr 50px;
			grid-template-rows: 30px 30px 30px 30px 30px 233px 40px 1fr;
		}
		
		.garden-title {
			display: grid;
			grid-column: 2;
			grid-row: 2;
			font-size: 2.25em;
			font-weight: bold;
			text-align: center;
			height: 30px;
			color: red;
		}
		
		.garden-date {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: 1.40em;
			font-weight: bold;
			text-align: center;
			width: 100%;
		}
		
		.garden-pictures {
			display: grid;
			grid-column: 2;
			grid-row: 6;
			grid-template-columns: 304px 304px 304px 304px 304px;
			grid-template-rows: 233px;
			justify-content: center;
		}

		.garden img {
			width: 300px;
			height: 225px;
			border: 4px solid #888; /* Grey color */
		}
		
		.garden1 {
			display: grid;
			grid-column: 1;
			grid-row: 1;
		}
		
		.garden2 {
			display: grid;
			grid-column: 2;
			grid-row: 1;
		}
		
		.garden3 {
			display: grid;
			grid-column: 3;
			grid-row: 1;
		}
		
		.garden4 {
			display: grid;
			grid-column: 4;
			grid-row: 1;
		}
		
		.garden5 {
			display: grid;
			grid-column: 5;
			grid-row: 1;
		}
		
		.garden-text {
			display: grid;
			grid-column: 2;
			grid-row: 8;
			font-size: 1.25em;
			width: 100%;
			font-weight: bold;
			text-align: left;
		}
				
		.harvests {
			display: grid;
			grid-template-columns: 50px 1fr 50px;
			grid-template-rows: 40px 5px 30px 30px;
		}
		
		.harvests-line5 {
			display: grid;
			grid-column: 2 / span 2;
			grid-row: 2;
			width: 80%;
			height: 5px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvests-title {
			display: grid;
			grid-column: 2;
			grid-row: 4;
			font-size: 2.25em;
			font-weight: bold;
			color: red;
			text-align: center;
		}
		.harvest {
			display: grid;
			grid-template-columns: 50px 1fr 1fr 1fr 1fr 50px;
			grid-template-rows: 30px 30px 30px 1fr 30px 231px 20px 1px 30px 231px 30px;
		}
		
		.harvest-date {
			display: grid;
			grid-column: 2 / span 4;
			grid-row: 2;
			font-size: 1.40em;
			font-weight: bold;
			text-align: center;
		}
		
		.harvest-text {
			display: grid;
			grid-column: 2 /span 4;
			grid-row: 4;
			font-size: 1.25em;
			width: 100%;
			font-weight: bold;
			text-align: left;
		}
		
		.harvest-picture1 {
			display: grid;
			grid-column: 2;
			grid-row: 6;
			justify-content: center;
		}
		
		.harvest-picture1 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line1 {
			display: none;
		}
		
		.harvest-picture2 {
			display: grid;
			grid-column: 3;
			grid-row: 6;
			justify-content: center;
		}
		
		.harvest-picture2 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line2 {
			display: grid;
			grid-column: 2 / span 4;
			grid-row: 8;
			width: 80%;
			height: 1px;
			margin: 0px auto;
			background-color: #ccc; /* Grey color */
		}
		
		.harvest-picture3 {
			display: grid;
			grid-column: 4;
			grid-row: 6;
			justify-content: center;
		}
		
		.harvest-picture3 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line3 {
			display:none;
		}
			
		.harvest-picture4 {
			display: grid;
			grid-column: 5;
			grid-row: 6;
			justify-content: center;
		}
		
		.harvest-picture4 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.harvest-line4 {
			display:none;
		}
		
		.harvest-picture5 {
			display: grid;
			grid-column: 2;
			grid-row: 10;
			justify-content: center;
		}
		
		.harvest-picture5 img {
			width: 300px;
			height: 225px;
			border: 3px solid #888; /* Grey color */
		}
		
		.attribution {
			display: grid;
			grid-column: 1;
			grid-row: 1;
			align-items: center;
			justify-content: center;
			background-color: #000;
			color: #fff;
			font-size: 1.0em;
			border-top: 3px solid #888; /* Grey color */
		}
		
		.attribution a {
			color: green;
			width: 300px;
		}		
		
		.artist {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 40px 1fr;
			box-sizing: border-box;
			margin-top: 20px;
		}
		
		.artist-title {
			height: 20px;
			background-color: #fff;
			color: #000;
			font-size: .95em;
			font-weight: bold;
			text-align: center;
			text-decoration: underline;
		}
		
		.artist-text {
			background-color: #ccc;
			color: #000;
			padding-left: 10px;
			font-size: .85em;
			font-weight: bold;
			margin-bottom: 20px;
		}
				
		.copyright {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr;
			box-sizing: border-box;
			margin-top: 5px;
			height: 50px;
		}
		
		.copyright-content {
			background-color: #fff;
			color: #000;
			font-size: .75em;
			font-weight: bold;
			text-align: center;
		}
		}