* {box-sizing: border-box; }

html, body {
  display: flex;
  height: 100%;
  flex-direction: column;
  /*background-color: #ffffcc; *//* Pale yellow background color */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

body { display: flex; flex-direction: column;} 

main {flex: 1 0 auto;}

header {
  position: sticky;
  background: #99CCCC; 
  height: 45px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -10px 10px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

header, nav {padding: 0.5em;}

footer {
/*	flex-shrink: 0;
	padding: 1.5em; 
	background: #99CCCC; 
    height: 45px;
    */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #99CCCC;
    border-top: 1px solid #ccc;
    position: fixed;
    bottom: 0;
    width: 100%;
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
	/*box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -10px 10px 0px inset; rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;*/
}

.footer-link {
  text-decoration: none;
  color: #000;
  font-size: 16px;
  transition: color 0.3s ease;
  font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
}

.footer-link:hover {
  color: #0056b3;
}

.current-page { /* Used in the footer */
  font-size: 16px;
  font-weight: bold;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
}

.back_colour1 {background-color: #CCCCFF}
.back_colour2 {background-color: #CCCCCC} /* background grey - maserati */
.sticky { position:sticky;} /* Used to stick the top header to the screen */
.screentop {top:0}
.site-logo img {width: 2em;}
.logo {opacity: 0.5;} /* for top LH logo */

/* Positions the top bar navigation options at the top right part of the screen */
.site-nav {
  position: relative;
  float: right;
  top: 0;
  left: 0;
  display: block !important;
  width: 90%;
  padding: .1em 1em 0 0;
  opacity: .95;
  background: none;
}
.site-nav ul {
  list-style-type: none;
  margin: 0;
  text-align: right;
}
.site-nav ul li {
  display: inline-block;
  margin-bottom: 0;
  margin-left: 1.5em;
}
/* used to format the site-nav text */
.site-nav ul li a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8em;
  padding-bottom: .2em;
  text-decoration: none;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #000000;
  -webkit-transition: color .3s;
  transition: color .3s;
}
/* Underlines the site-nav text when in hover */
.site-nav ul li a:hover {
  outline: none;
  border-bottom: 1px solid white;
}

h1, h2, h3, h4, h5, h6 {font-family: Arial,sans-serif;font-weight:400;margin:10px 0}

.text1 {font-size: 16px;line-height: 24px;} /* 4px +16px + 4px */
.text14  {font-size: 14px;line-height: 20px;} /* 3px +14px + 3px */
.text2 {font-size: 12px;line-height: 12px;} /* 2px +12px + 2px */
.text3 {font-size: 12px;line-height: 16px;} /* 2px +12px + 2px */
.text1, .text2, .text3 ,.text14{
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000;
	text-decoration: none;
}
.txt_shadow {
  text-shadow: 2px 4px 4px black;
}
.ltblue {
	color: #CCFFCC;
}
.head1 {
	font-size: 38px;
	line-height: 46px; /* 4px +16px + 4px */
	font-weight: 600;
}
.head2 {
	font-size: 32px;
	line-height: 36px; /* 2px +12px + 2px */
	font-weight: 500;
}
.head3 {
	font-size: 22px;
	line-height: 26px; /* 2px +12px + 2px */
	font-weight: 400;
}
.head1, .head2, .head3 {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	/*font-weight: 600;*/
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
}
.txt_shadow {text-shadow: 2px 4px 4px black;}
.ltblue {color: #CCFFCC;}
.normal {font-style: normal;}
.italic {font-style: italic;}
.oblique {font-style: oblique;}
.centered {text-align:center;}
.bolder {font-weight: bold;}

.af {
  text-decoration: none;
  color: #000;
  font-size: 18px;
  transition: color 0.3s, background-color 0.3s;
}

.af:hover {
  color: #ff5722;
  text-shadow: 0px 0px 10px rgba(255, 87, 34, 0.8);
}

ul.indexlist li {
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	/*font-weight: 600;*/
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
}

.container2 {
  max-width: 1000px;
  margin: 0 auto;
}

.gallery2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.item2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Align items to the top */
  margin: 10px;
  background-color: ivory;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); /* Box shadow property */

  width: 100%; /* Initially set width to 100% */
  border-radius: 10px;
}

.item2 img {
  width: 100%; /* Set image width to 100% */
  height: auto; /* Allow image height to adjust automatically */
  border-radius: 10px;
}

.gallery3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: stretch;
}
.item3 { /* aligns everything left */
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: flex-start; /* Align items to the top */
  margin: 10px;
  padding: 30px;
  background-color: ivory;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Box shadow property */
  width: 100%; /* Initially set width to 100% */
  border-radius: 10px;
}

.item3 img {
  width: 100%; /* Set image width to 100% */
  border: 1px solid black;
  height: auto; /* Allow image height to adjust automatically */
  border-radius: 10px;
}

/*img2 {width: 800px;height: auto;}*/

.description2 {
  font-family: Arial,sans-serif;
  margin-top: 10px;
  font-weight: 600;
  text-align: center;
  margin-top: auto; /* Push the description to the bottom */
}

@media (min-width: 400px) {
.item2 {width: calc(70% - 20px);}
}

@media (min-width: 800px) {
.item2 {width: calc(30% - 20px);}
}

.top2 > a:hover img {
  box-shadow: 0 0 50px rgb(17 17 17 / 50%);
  transform: rotate(-2deg) translateY(-5px) scale(1.035);
  -webkit-transform: rotate(-2deg) translateY(-5px) scale(1.035);
  -moz-transform: rotate(-2deg) translateY(-5px) scale(1.035);
  -ms-transform: rotate(-2deg) translateY(-5px) scale(1.035);
  -o-transform: rotate(-2deg) translateY(-5px) scale(1.035);
}

/*.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px; /* Adjust the height as needed */

*/
/* used in histories. Resizes an image to 150px height max */
.resized-image {
  height: 150px; /* Maintain the aspect ratio */
	width: auto; /* Set the desired width */
	vertical-align: top;
	object-fit: contain; /* Preserve aspect ratio and fit within the specified height */
  }
  .resized-width {
    height: auto; /* Maintain the aspect ratio */
    width: 150px; /* Set the desired width */
    vertical-align: top;
    justify-content: center;
    object-fit: contain; /* Preserve aspect ratio and fit within the specified height */
    }
.centred {
  justify-content: centre;
}
.container_outer1 {
  display: flex;
  justify-content: center; /* horizontally center the container */
  margin: 0 auto; /* horizontally center the container within the viewport */
  width: 50%; /* set the width to one-third of the viewport */
}
/* used on histories. Used with 'grid-container_02' and 'grid-item2' */
.container_outer3 {
  display: flex;
  vertical-align: top;
  justify-content: center; /* horizontally center the container */
  margin: 0 auto; /* horizontally center the container within the viewport */
  width: 75%; /* set the width to one-third of the viewport */
}
.container_outer100 {
  display: flex;
  justify-content: center; /* horizontally center the container */
  margin: 0 auto; /* horizontally center the container within the viewport */
  width: 100%; /* set the width to one-third of the viewport */
}
.grid-container_01 {
  display: grid;
  grid-template-rows: auto; /* define the size of rows */
  grid-row-gap: 20px; /* Add padding between rows */
  grid-template-columns: 200px 350px; /* Specify the width for each column */
}
/* used in 'container_outer3' in histories */
.grid-container_02 {
  display: grid;
  grid-template-rows: auto; /* define the size of rows */
  grid-row-gap: 20px; /* Add padding between rows */
  grid-template-columns: 350px 200px; /* Specify the width for each column */
  margin-bottom: 20px; /* Add a vertical gap between containers */
}
.grid-container_03 {
  display: grid;
  grid-template-rows: max-content; /* define the size of rows */
  grid-row-gap: 10px; /* Add padding between rows */
  grid-template-columns: 600px 350px; /* Specify the width for each column */
  margin-bottom: 20px; /* Add a vertical gap between containers */
}
.grid-container_04 {
  display: grid;
  grid-template-rows: max-content; /* define the size of rows */
  grid-row-gap: 10px; /* Add padding between rows */
  grid-template-columns: 600px 350px; /* Specify the width for each column */
  margin-bottom: 0px; /* NO vertical gap between containers */
}
/* used within 'grid-container_03' */
.grid-item {
  display: flex;
  background-color: #eee;
  padding: 10px;
  justify-content: left; /* horizontally center the content */
  align-items: top; /* vertically center the content */
  
}
/* used with grid-item to bias content to the left. */
div.a {
  text-align: right; /* center the text horizontally within the grid item */
  margin: 0; /* remove any default margin */
  justify-content: right;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000; /* Add a border line at the bottom of each grid item */
}
/* used with grid-item to bias content to the right */
div.b {
  font-family: Arial, Helvetica, sans-serif;
  text-align: left; /* center the text horizontally within the grid item */
  margin: 0; /* remove any default margin */
  line-height: 1.5;
  justify-content: left;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000; /* Add a border line at the bottom of each grid item */
}
/* used with grid-item to bias content to the right with no borders*/
div.c {
  font-family: Arial, Helvetica, sans-serif;
  text-align: left; /* justify text left within the grid item */
  margin: 0; /* remove any default margin */
  line-height: 1.5;
  justify-content: left;
  border-right: 1px solid #000;
}

div.d {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center; /* justify text left within the grid item */
  margin: 0; /* remove any default margin */
  line-height: 1.5;
  justify-content: center;
  border-right: 1px solid #000;
}

.columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  }

@media (min-width: 800px) {
.columns {flex-direction: row;}
}

.columns > * {
	/*flex-shrink: 1;*/
	flex-basis: 800px;
}
  
.cards {
	/*width: 800px;*/
	height: auto;
}

.card {
  /* Add shadows to create the "card" effect */
  align-items: center;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  display: block;
  max-width: 120px;
  height: max-content;
  border-radius: 5px;
  background-color:#f1f1f1;
  overflow: hidden;
  padding: 0px 0px; /* Create gap around the image */
}
/* wide card - used on histories */
.card240 {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  display: block;
  max-width: 240px;
  height: max-content;
  border-radius: 5px;
  background-color:#f1f1f1;
  overflow: hidden;
  padding: 0px 0px; /* Create gap around the image */
}
/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 12px 20px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.con_card {
  padding: 1px 1px;
}