:root {
	--dropshadow: rgb(189, 189, 189);
	--white: #ffffff;
	--textcolour: black;
	--textcolourHover: rgb(89, 89, 89);
	--accent: #902a2a;
  }



* {
	box-sizing: border-box;
  }



body {
	margin-left: 10%;
	margin-right: 10%;

	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;

	background-color: var(--white);

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}







.single_grid {
	display: inline-grid;
	grid-template-columns: 100%;
}

.single_item {
	width: 100%;

	padding-top: 25px;
	padding-bottom: 25px;

	background-color: var(--white);
	width: 100%;

	padding-left:4%;
	padding-right:4%;
}

.double_grid {
	display: inline-grid;
	grid-template-columns: 50% 50%;
	align-items: center; /* Vertically align items */
  }
  
  .double_item {
	background-color: var(--white);
	width: 100%;
	padding-top: 25px;
	padding-left: 8%;
	padding-right: 8%;
  }

  .topalign {
	align-items: start; /* Vertically align items at the top within topalign */
}
  
  

.triple_grid {
	display: inline-grid;
	grid-template-columns: 33.33333% 33.33333% 33.33333%;
}

.triple_item {
	width: 100%;

	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
	margin-top: 5px;
	
	padding-left:10%;
	padding-right:10%;
	padding-top:35px;
	padding-bottom:15px;

	background-color: var(--white);
	width: 80%;

	border-radius: 15px;
	overflow:visible;

	box-shadow: 0px 4px 12px var(--dropshadow);

	transition: 0.3s;
}


.triple_item:hover {margin-top: 0px; margin-bottom: 20px;}

.triple_item p, .triple_item h3 {
	text-align: center;
	color: var(--textcolour);
	transition: 0.3s;
}
.triple_item:hover p {
	text-align: center;
	color: var(--textcolourHover);
}



.row {
	background-color: var(--white);
}
/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
  }

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
	.triple_grid {
		display: inline-grid;
		grid-template-columns: 100%;
		row-gap: 15px;
	}
} 
@media screen and (max-width:600px) {
	.single_grid {
		display: inline-grid;
		grid-template-columns: 100%;
		row-gap: 15px;
	}
	.double_grid {
		display: inline-grid;
		grid-template-columns: 100%;
		row-gap: 15px;
	}
}




img.rounded {
	object-fit: cover;
	border-radius: 20%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 4px 6px var(--dropshadow);
  }

  img.fit {
	border-radius: 10%;
	width: 100%;
	box-shadow: 0px 4px 6px lightgrey;
  }



  footer {
	text-align: center;
	padding: 3px;
	background-color: var(--accent);
	color: var(--white);
	border-radius: 12px;
  }













th {
	padding-right: 25px;
	font-size: 36px;
	vertical-align: middle;
}

h1
{
    border-bottom:3px solid var(--accent);
    float:left;
    width:100%;
    padding-bottom:20px;
}




/*



HEADER



*/

.header_grid {
	display: inline-grid;
	grid-template-columns: 25% 75%;

	padding-left:4%;
	padding-right:4%;

	width: 100%;
}

.header_item {
	background-color: var(--white);

	margin-left: 0px;
	margin-right: auto;
}

.header_logo {
	padding-top: 6px;
	padding-bottom: unset;
	border-radius: 12px;

}

/* Add a black background color to the top navigation */
.topnav {
	background-color: var(--white);
	overflow: hidden;
	padding-top: 25px;
	padding-bottom: 25px;
	width: 100%;
	align-self: center;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
	float: right;
	color: var(--textcolour);
	border-radius: 12px;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;

	margin-left: auto;
	margin-right: 0;

	transition: 0.3s;
  }

  @media screen and (max-width:700px) {
	.header_grid {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-left: 4%;
		padding-right: 4%;
	}

	.header_item {
		margin-left: auto;
		margin-right: auto;
	}
	
	.topnav a {
		width: 100%;
	}
}
  
  /* Change the color of links on hover */
  .topnav a:hover {
	background-color: #ddd;
	color: black;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
	background-color: #04AA6D;
	color: white;
  }