@import url('/../admin/css/rootColors.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Initial Classes
----------------------------------------------- */
body {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.1em;
	color: #000;
	font-weight: 300;
	line-height: 120%;
	}

.clear {
	border-top: 1px dashed #333;
	clear: both;
	}
	
/* Initial Typography Classes
----------------------------------------------- */	
/* COLOUR */


a {
	color: hsl(var(--PrimaryColor));
	text-decoration: underline;
	-moz-transition: color 0.3s ease; 
	-o-transition: color 0.3s ease; 
	-webkit-transition: color 0.3s ease; 
	transition: color 0.3s ease; 
	}
	
a:visited {
	color: hsl(var(--Gray));
	}

a:hover {
	text-decoration: none;
	}

p {
	margin: 0 0 13px 0;
	}

	h1,
	h2,
	h3 {
		font-family: 'Montserrat', sans-serif;
		font-weight: 400;
		line-height: 120%;
		color: hsla(var(--PrimaryColor),1);
		margin: 0 0 10px 0;
		}
			
h1 { 
	font-size: 2.6em;
	font-weight: 600;
	line-height: 100%;
	}
	
h2 { 
	font-size: 1.5em;
	color: hsl(var(--SecondaryColor));
	font-weight: 600;
	margin-top: 20px;
	}
	
h3 { 
	font-size: 1em;
	font-weight: 600;
	}

.pullQuo {
	display: block;
	margin: 0 1em 1em 1em;
	}
	
.whiteText,
.whiteText a {
	color: rgba(255,255,255,1);
	text-decoration: none;
	}
	
.whiteText a:hover {
	color: hsl(var(--Teal)); 
	}
	
.PrimaryTextColor,
a,
a:visited,
h1,
h2,
h3 {
	color: hsl(var(--PrimaryColor));
	}
	
.secondaryTextColor,
a:hover {
	color: hsl(var(--SecondaryColor))
	}

.textCenter {
	text-align: center;
	align-items: center;
	}	
	
.right {
	float: right;
	}
	
/* Initial List Classes
----------------------------------------------- */	
ul,
ol {
	margin: 20px 34px;
	}
	
ul li {
	list-style: square;
	}
	
ol li {
	list-style: alpha;
	}

/* Generic WYSIWYG Content Image Classes
----------------------------------------------- */	



.img25 {
	width: 25%;
	display: inline-block;
}
.img50 {
	width: 50%;
	display: inline-block;
}
.img75 {
	width: 75%;
	display: inline-block;
}
.img100 {
	width: 100%;
	display: block;
	}
	.img25, .img50, .img75, .img100 {
		border-radius: 10px;
		}

	@media only screen and (max-width: 768px) {
		.img25,
		.img50,
		.img75,
		.img100 {
			width: 100%;
			box-sizing: border-box;
			}
		}

/* Column Classes */

.twoColumnText {
	column-count: 2;
	column-gap: 20px;
	
	}
.threeColumnText {
	column-count: 3;
	column-gap: 10px;
	
	}
.fourColumnText {
	column-count: 4;
	column-gap: 7px;
	clear: both;
}
.twoColumnText::after, .threeColumnText::after, .fourColumnText::after {
	content: "";
    display: table;
    clear: both;
	}

.clear {
    clear: both;
}

@media only screen and (max-width: 768px) {
	.twoColumnText,
	.threeColumnText,
	.fourColumnText {
		column-count: 1;
		}
	}

/* Button Classes
----------------------------------------------- */	
a.button,
input.button {
    display: inline-block; /* This makes the element flow inline but respect box-model properties */
    width: fit-content;
		height: auto;
    border-radius: 20px;
    line-height: 40px;
    color: rgba(255,255,255,1);
    text-align: center;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin: 0.8em 0.2em;
    padding: 0 0.8em;
    background: hsla(var(--PrimaryColor),1);
    border: none;
    transition: background-color 0.3s ease;
}
	
a.button:hover,
input.button:hover {
	background: hsla(var(--Blue),1);
	cursor: pointer;
	}
	
a.button.auto {
	width: auto;
	height: auto;
	min-width: 120px;
	min-height: 40px;
	
	}

a.button.white {
	background: rgba(255,255,255,1);
	}
	
a.button.whiteText {
	color: rgba(255,255,255,1);
	text-decoration: none;
	}
	
a.button.BlueText {
	color: hsl(var(--Blue));
	}
		
a.button.Blue,
a.button.Blue:visited {
	color: rgba(255,255,255,1);
	background: hsl(var(--PrimaryColor));
	}

a.button.white:hover,	
a.button.Blue:hover {
	color: rgba(255,255,255,1);
	background: hsl(var(--Blue));
	}
	
/* Video iFrame Classes
----------------------------------------------- */	
.intrRatioAM {
	position: relative;
	padding-bottom: 42.5%; /* Anamorphic */
	padding-top: 0;
	margin-top: -5px;
	height: 0;
	}	

.intrRatio16x9 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	padding-top: 0;
	height: 0;
	}
		
.intrRatio16x9 iframe,
.intrRatioAM iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	
.contentDiv15 {
	width: 17%; 
	display: inline-block;
	vertical-align: top;
	margin: 1em;
	}
	
.contentDiv15 p {
	color: hsl(var(--Blue));
	font-weight: 400;
	}
	
.contentDiv15 img {
	width: 100%;
	}

.contentDiv20 {
	width: 20%; 
	display: inline-block; 
	margin: 1em;
	}
	
.contentDiv20 p {
	color: hsl(var(--Blue));
	font-weight: 400;
	}
	
.contentDiv20 img {
	width: 100%;
	}
	
.show {
	color: rgb(255,255,255);
	display: block;
	background: hsl(var(--Blue));
	border: none;
	padding: 0.5em;
	}
	
.hide {
	display: block;
	border: none;
	background: hsl(var(--Gray));
	padding: 1.8em;
	margin: 0;
	}
	
/* CKEDITOR Plugin Classes
----------------------------------------------- */
/* Columns
----------------------------------------------- */	
/*
.impsection {
	clear: both;
	padding: 0px;
	margin: 0px;
}

.impgroup:before,
.impgroup:after {
    content:"";
    display:table;
}
.impgroup:after {
    clear:both;
}
.impgroup {

}

.impcol {
	display: block;
	float:left;
	margin: 0;
}

.impcol:first-child { margin-left: 0; }
*/


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
/*
.colContent {
	min-height: 35px;
	padding: 0 1%;
	outline: 1px solid #00437B;
	}
	
.colContent:first-child {
	padding-left: 0;
	}
	
.colContent:last-child {
	padding-right: 0;
	}	
	
.colDiv {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	}
	
.impfour {
	width: 31.33%; 
	}
	
.impeight {
	width: 64.66%; 
	}
*/
.colDiv .impgroup {
	display: grid;
	grid-template-columns: 30% 1fr;
	grid-template-rows: auto;
	justify-content: space-evenly;
	}	
	
.colContent {
	padding: 1em;
	}
	
.impcol.impfour.colContent img {
	width: 100%;
	display: block;
	}
	
/* Gridbox
----------------------------------------------- */	
.impGridItem {
	width: 31%;
	display: inline-block;
	vertical-align: top;
	margin: 0 1% 20px 1%;
	
	overflow: hidden;
	background: #ddd;
	}
	
.impGridTop {
	overflow: hidden;
	outline: 1px solid #ff801a;
	}
	
.impGridTop img {
	width: 100%;
	display: block;
	}
	
.impGridBott {
	outline: 1px solid #ff801a;
	}

@media only screen and (max-width: 1024px) {
	.contentDiv15,
	.contentDiv20 {
		width: 40%; 
		}
}
			
@media only screen and (max-width: 800px) {
	.impcol { 
		margin: 0;
	}
	
	.impGridItem {
		width: 47%;
		}
}

@media only screen and (max-width: 767px) {
	.impGridItem {
		width: 100%;
		margin: 0 0 20px 0;
		}
}