/* Table with 2 cells used to show a news item in News.html */
.news-table {
	width:80%;
	margin-left: auto;	margin-right: auto; /* place centred */
	border-collapse:separate;
	border:solid grey 1px;
	border-radius:15px;
	margin-top:10px;
	margin-bottom:30px;
}
.news-table p{
	padding-left:1.5vw;
}

.news-table strong {
    color:black;
}
/* **************************************** */


/* Horizontal rule line with blue-to-green gradient */
.divider-line {
	position: absolute;
	margin-top:5vw;
	margin-bottom:2vw;
	width: 100%;
	left:0;
	height: 2px;
	background-image: url('../Images/Large/Blue-Green-Gradient-Background-horizontal.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
/* **************************************** */



/* ***** For major section headings on pages ***** */
.underlined_container {
	padding-top:8vw;
	display: flex;
	justify-content: center;
	align-items: center;
}
underlined_text{
	position: relative;
	color: #2e1a46; /*Dark purple*/
	font-weight: bold;
	margin-bottom:0px;
	text-align: center;
}

underlined_text::before {
	content: "";
	position: absolute;
	top: 90%;
	width: 100%;
	left:auto;
	height: 3px;
	border-radius: 2px;
	background-image: linear-gradient(90deg,#5D6593,#5A8FBB,#55C0EC, #6DC298);
	background-repeat: no-repeat;
	background-size: 100% 100%;

}
/* **************************************** */


/* ********** For News.htm Items ********** */
.same-height-container-bordered {
	width: 90%; 		/* Set full-width to expand the whole page */
	margin-left: auto;	margin-right: auto; /* place centred */
	outline:1px solid grey;
	border-radius: 20px;
	outline-offset:-10px;
	padding-left: 2vw;
	padding-right: 2vw;
	padding-bottom: 1vw;
	padding-top:1vw;
}
.same-height-container-bordered p{
	padding-left: 1.8vw;
}
.same-height-container-bordered ul{
	padding-left: 7vw;
}
.same-height-container-bordered strong {
	font-weight: 1000;
	color:black;
}
/* **************************************** */



.same-height-container {
	display: table; 	/* Make the container element behave like a table */
	width: 100%; 		/* Set full-width to expand the whole page */
}

.same-height-container strong {
	font-weight: 1000;
	color:black;
}

.same-height-box-3-bordered {      /* for 3 boxes */
	display: table-cell; /* Make elements inside the container behave like table cells */
	width: 33.3%;
	text-align:center;
	outline:1px solid grey;
	border-radius: 20px;
	outline-offset:-10px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.same-height-box2 {      /* for 2 boxes */
	display: table-cell; /* Make elements inside the container behave like table cells */
	width: 50%;
	text-align:center;

	outline:3px solid #73637F;
	background-color: #eeeeee;
	border-radius: 20px;
	outline-offset:-10px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-top: 10px;

}



h1 {
	position: relative;
}


h2{
	padding-left:0;
}

ul {
	padding-left: 3vw;
	padding-right:1vw;
}

ul ul{ /* indentation of 2nd level bullet */
	padding-left: 4vw;
}

/******* Buttons, e.g. for 'Contact Us' Box ******/
input[type=button], input[type=submit], input[type=reset], button {
	background:  #191;
	border: none;
	border-radius: 25px;
	color: white;
	padding: 10px 10px;
	text-decoration: none;
	cursor: pointer;
	transition: 0.5s;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover {
	background: #060;
}

input[type=button]:disabled, input[type=submit]:disabled, input[type=reset]:disabled, button:disabled {
	background: #ccc;
	color: #fff;
	cursor:default;
}
/*---------------------------------------------*/


/*************** Contact Us Button ************/
.btnContactUs {
	display: inline-block;
	position: relative;
	/*background-image: url('../Images/Large/Blue-Green-Gradient-Background.jpg');*/
	/* GREY: background-image: linear-gradient(#555, #777, #555); */
	/* background-image: linear-gradient(#48B06F, #73C694, #48B06F); */
	background-color: #73C694;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: none;
	border-radius: 30px;
	color: white;
	padding: 5px;
	text-decoration: none;
	cursor: pointer;
	font-weight: bolder;
	font-size: 2em;
	margin-left: 10%;
	width: 70%;
	display: table;
	margin: 0 auto;
	text-align: center;

}
a.btnContactUs:hover {
	/*background-image: url('../Images/Large/Blue-Green-Gradient-Background-dark.jpg');*/
	/* GREY: background-image: linear-gradient(#333, #555, #333);*/
	/* background-image: linear-gradient(#307048, #429E65, #307048); */
	background-color: #3F9961;
	color: #131;
}
/*---------------------------------------------*/

/*************** Link Us Button, e.g. "Read more"  ************/
.btnLink {
	display: inline-block;
	position: relative;
	/*background-image: url('../Images/Large/Blue-Green-Gradient-Background.jpg');*/
	/* background-image: linear-gradient(#48B06F, #73C694, #48B06F);*/
	background-color: #73C694;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: none;
	border-radius: 20px;
	color: #242;
	padding: 0px;
	text-decoration: none;
	cursor: pointer;
	font-weight: bolder;
	font-size: 1.5em;

	width: 30%;
	display: table;

	margin-left: 10%;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 15px;
	padding-left:2vw;
	padding-right: 2vw;

}
a.btnLink:hover {
	/* background-image: url('../Images/Large/Blue-Green-Gradient-Background-dark.jpg'); */
	/* background-image: linear-gradient(#307048, #429E65, #307048);*/
	background-color: #3F9961;
	color: #131;
}
/*---------------------------------------------*/



/**************** Contact Us Box ***************/
input {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 90vw;
	max-width: 600px;
}

textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	max-width: 600px;
	margin-bottom: 10px;
}
/*---------------------------------------------*/




/* The boxes with text and
images side by side, alternating left/right */
.grid-container-txt-img {
	display: grid;
	background-color: white;
	grid-template-areas:
	"gridL gridR"
}
.grid-container-img-txt {
	display: grid;
	background-color: white;
	grid-template-areas:
	"gridL gridR"
}

.gridRight {
	grid-area: gridR;
}
.gridLeft {
	grid-area: gridL;

}


.gridRight h1 {
	text-align: left;
	padding-left: 1vw;
}
.gridLeft h1 {
	text-align: left;
	padding-left: 1vw;
}


.gridRight li {
	text-align:left;
	margin-left: 1vw;
	padding-left: 0%;
}
.gridLeft li {
	text-align: left;
	padding-left: 0;
}

.gridRight strong {
    color:black;
}
.gridLeft strong {
    color:black;
}

.gridRight p {
	text-align:justify;
	padding-left: 1vw;
	padding-right: 1em;
}
.gridLeft p {
	text-align:justify;
	padding-right: 1em;
	padding-left: 1vw;
}


.gridRight img {
	display: inline-block;
	object-fit: scale-down;
	position: relative;
	max-width: 99.9%; /* 100% give a slight over-spill */
	height: 90%;    /* Required by Chrome */
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.gridLeft img {
	display: inline-block;
	object-fit: scale-down;
	position: relative;
	max-width: 99.9%; /* 100% give a slight over-spill */
	height: 90%;    /* Required by Chrome */
	top: 50%;
	transform: translate(0%, -50%);
}


.gridRight video {
	max-width: 100%;
	height: auto;
	position:relative;
	top: 50%;
	transform: translate(0%, -50%);
}
.gridLeft video {
	max-width: 100%;
	height: auto;
	position:relative;
	top: 50%;
	transform: translate(0%, -50%);
}




/*********** Mobile Phone Style Definition **********/
@media only screen and (min-width : 0px) and (max-width : 480px) {
	/* containers */
	header {
		width: 100%;
	}

	.same-height-box {
		display: block;
		width: 95%;
	}


	.grid-container-txt-img {
		margin-top: 20px; /* make a bit of a gap to the previous box above */
		grid-template-columns: 100%;
		grid-template-areas:
		"gridL"
		"gridR"
	}
	.grid-container-img-txt {
		margin-top: 20px;
		grid-template-columns: 100%;
		grid-template-areas:
		"gridR"
		"gridL"
	}

}


/*********** Tablet Style Definition **********/
@media only screen and (min-width : 480px) and (max-width : 950px) {
	/* containers */
	header {
		width: 100%
	}

	article {
		float: left;
		width:50%;
		box-sizing: border-box; /* prevents padding being added to width */
	}

	.textmatrix3x3 {
		position:relative;
		float: left;
		width:50%;
		box-sizing: border-box; /* prevents padding being added to width */
	}

	.grid-container-txt-img {
		grid-template-columns: 50% 50%;
		grid-template-areas:
		"gridL gridR"
	}
	.grid-container-img-txt {
		grid-template-columns: 50% 50%;
		grid-template-areas:
		"gridL gridR"
	}
}


/*********** Desktop Style Definition **********/
@media only screen and (min-width: 950px){
	/* containers */
	header {
		width:100%
	}

	article {
		float: left;
		width:33.3%;
		box-sizing: border-box; /* prevents padding being added to width */
	}

	.textmatrix3x3 {
		position:relative;
		float: left;
		width:33.3%;
		box-sizing: border-box; /* prevents padding being added to width */

	}

	.grid-container-txt-img {
		grid-template-columns: 50% 50%;
		grid-template-areas:
		"gridL gridR"
	}
	.grid-container-img-txt {
		grid-template-columns: 50% 50%;
		grid-template-areas:
		"gridL gridR"
	}
}