/* 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%;
}
/* **************************************** */



/* ***** A Heading with rainbow colour scale underlining ***** */
.underlined_container {
	padding-top:8vw;
	margin-right:10px;
	
	display: flex;
	justify-content: center;
	align-items: center;

	/* Rainbow colour underline definition */
	padding-bottom:3px;
	border-bottom: 3px solid ;
	border-image: linear-gradient(to right,#013EEF,#03F000,#FFE70B,#FD0B00,#FE00B8 ) 1;
	border-radius: 2px;

	/* Text definition */
	position: relative;
	color: #2e1a46; /*Dark purple*/
	font-weight: bold;
	margin-bottom:0px;
	text-align: center;
	font-size: 20px;
   font-size: clamp(20px, 3.5vw, 30px);

}


/* **************************************** */


/* ********** 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;

}


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



/**************** 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%;
	left: 50%;
	transform: translate(-50%, -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 : 481px) 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;*/ /* <<<- this makes the menu line at the top jump - WTF!*/
		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: 951px){
	/* 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"
	}

}