/** Import CSS **/

@import url("reset.css");
@import url("menu.css");
@import url("all.css");

/** Google Fonts **/

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");


/** CSS HEX
--mountain-meadow: #1abc9c;
--blue-ncs: #268cc0;
--dark-byzantium: #713e5a;
--cafe-au-lait: #a77e58;
--burnt-sienna: #dd6e42;
--midnight-green-eagle-green: #0b3948;

https://coolors.co/1abc9c-268cc0-713e5a-a77e58-dd6e42-0b3948


/** Global Styles **/

*
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	scrollbar-color:  #0fb491 #d0ece6;
}

html
{
	height: 100%;
	overflow: auto;
	
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body
{
	font-family: "Source Sans Pro", Arial, Verdana, Helvetica, sans-serif;
	font-size: 18px;
	color: #333;
	font-weight: 400;
	background: #1abc9c;
	text-rendering: optimizeLegibility;
	vertical-align: baseline;
}

blockquote
{
	position: relative;
	display: block;
	margin-top: 2.5em;
	margin-bottom: 1em;
	margin-left: 100px;
	margin-right: 100px;
	text-align: justify;
}

blockquote:before
{
    display: block;
	font-family: Georgia, serif;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -50px;
    top: 20px;
    color: #1abc9c;
}

blockquote footer
{
	text-align: right;
	font-size: 90%;
	line-height: 24px;
	font-style: italic;
	color: #666;
}

blockquote cite:before
{
	content: "\2014 \00A0 \00A0"
}

.biggerfont
{
	font-size: 1.1em !important;
}

::selection
{
	background: #16a085;
	color: #fff;
}

::-moz-selection
{
	background: #16a085;
	color: #fff;
}

a
{
	color: #28cdaa;
	text-decoration: none;
}

.reversed
{
	unicode-bidi: bidi-override;
	direction: rtl;
}

.hiddentext
{
	color: red;
	font-weight: 700;
	display: none;
}


img
{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
}

/** Colours **/

#headbg
{
	background: #1abc9c;
}

.bgblack
{
	background: #333;
}

.bgwhite
{
	background: #fafafa;
}

.greenish
{
	color: #1abc9c;
}

#maincont
{
	background: #fff;
}


/** Layout Styles **/

.container
{
	width: 100%;
	padding: 0;
	min-width: 280px;
	line-height: 30px;
}

	.container .bodycontainer
	{
		margin: 0 auto;
		width: 100%;
		max-width: 1000px;
	}
	


	
/** Sections **/

#headercont
{
	display: flex;
	padding: 40px 0 30px 10px;
	align-items: flex-end;
}

	#headercont div#logo
	{
		max-height: 84px;
	}
	
	#headercont img
	{
		height: 84px;
		max-height: 84px;
		padding: 0 20px 2px 0;
	}

	#headercont h1
	{
		color: #fff;
		font-size: 64px;
		line-height: 64px;
		font-weight: 900;
		text-transform: uppercase;
		letter-spacing: -1px;
	}
	
		#headercont h1 span.subhead
		{
			display: block;
			font-size: 30px;
			color: #fff;
			line-height: 30px;
			font-weight: 400;
			letter-spacing: 1px;
		}
		
		#headercont h1 span.bluetxt
		{
			color: #0090d9;
		}

			
#maincont
{
	padding: 30px 50px;
	min-height: 60vh;
	height: auto !important;
}

	#maincont img.imgright
	{
		float: right;
		max-width: 36%;
		margin: 0 0 20px 20px;
	}
	 

	#maincont p { margin: 0 0 20px 0; }
	#maincont strong { font-weight: 600; }
	#maincont em { font-style: italic; }
	
	#maincont h1, #maincont h2, #maincont h3, #maincont h4, #maincont h5
	{
		margin: 0 0 20px 0;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: -0.4px;
	}
	
		#maincont h1 { color: #444; font-size: 32px; line-height: 32px; }
		#maincont h2 { color: #444; font-size: 28px; line-height: 28px; }
		#maincont h3 { color: #444; font-size: 24px; line-height: 24px; letter-spacing: -0.2px; }
		#maincont h4 { color: #444; font-size: 22px; line-height: 22px; letter-spacing: -0.2px; }
		#maincont h5 { color: #444; font-size: 20px; line-height: 20px; letter-spacing: -0.2px; }
		
	#maincont a:hover
	{
		text-decoration: underline;
	}
	
	#maincont ul { margin: 0 0 20px 0px; list-style-type: square;}
	#maincont ul li { padding: 0 0 0 2px; }
	#maincont ul ul { margin: 0 0 0 25px; }
	
	#maincont ul.fa-ul {list-style-type: none; }
	
	#maincont ul.contactlist li { padding: 0 0 0 10px; line-height: 2;}
	
	#maincont ol { margin: 0 0 20px 35px; list-style-type: decimal; }
	#maincont ol li { padding: 0 0 0 2px; }
	#maincont ol ol { margin: 0 0 0 25px; }
	
	#maincont hr { clear: both; border: 0; height: 0; margin: 0 0 20px 0; border-top: 1px dashed #CCC; }
	
	#maincont .gridcontainer
{
	max-width: 728px;
	display: grid;
	grid-gap: 30px;
	grid-template-columns: repeat(2, 1fr);
}

	#maincont span.blue
	{
		text-transform: uppercase;
		color: #0090d9;
		font-size: 120%;
		font-weight: 900;
	}
	
	#maincont span.green
	{
		text-transform: uppercase;
		color: #1abc9c;
		font-size: 120%;
		font-weight: 900;
	}

	#maincont .gridbox
	{
		position: relative;
		border: 2px solid;
		border-color: #1abc9c;
	}

	#maincont .gridbox img
	{
		opacity: 1;
		display: block;
		width: 100%;
		height: auto;
		transition: .5s ease;
		backface-visibility: hidden;
	}


	#maincont .gridbox:hover img

	{
		opacity: 0.3;
	}

	#maincont .gridboxtitle {
		width: 100%;
		position: absolute;
		top: 0;
		text-align: center;
		background: #1abc9c;
		color: #fff;
		line-height: 0px;
		padding: 25px 0px;
		font-size: 22px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: -0.4px;
		}

	#maincont .gridboxtitle:hover
	{
		opacity: 1;
	}

	#maincont .gridboxbg {
		transition: .5s ease;
		background-color: #007dbd;
		opacity: 0;
		position: absolute;
		width: 100%;
		height: calc(100% - 50px);
		top: 50px;
	}

	#maincont .gridbox:hover .gridboxbg {
		opacity: .8;
	}

	#maincont .gridboxtxt {
		color: white;
		padding: 5px 16px;
	}

	#maincont .gridboxtxt ul {
		margin: 0 16px!important;
	}
	
	#maincont #myList li{
		display:none;
	}
	
	#maincont #loadMore {
		color: #28cdaa;
		text-decoration: none;
	}
	
	#maincont #showLess {
		color: #28cdaa;
		text-decoration: none;
		display: none;
	}
	
	#maincont #loadMore:hover {
		text-decoration: underline;
	}
	
	#maincont #showLess:hover {
		text-decoration: underline;
	}

#footercont
{
	padding: 30px 0;
	text-align: left;
	line-height: 22px;
	color: #c0ece3;
}

	#footercont a
	{
		color: #fff;
	}
	
	#footercont a:hover
	{
		text-decoration: underline;
	}
	
	#footercont .gridcontainer
{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

	#footercont .gridbox1
	{
		position: relative;
		text-align: left;
		padding-left: 50px;
	}
	
		#footercont .gridbox2
	{
		position: relative;
		text-align: center;
	}
	
		#footercont .gridbox3
	{
		position: relative;
		text-align: right;
		padding-right: 50px;
	}



@media screen and (max-width: 783px)
{
	
	blockquote
	{
		margin-left: 2% !important;
		margin-right: 2% !important;
	}
	
	#maincont img.imgright
	{
		max-width: 50%;
	}
	
	#maincont img.imgleft span.imgleft
	{
		float: none;
		width: 100%;
		max-width: 300px;
		margin: 0 0 2% 0;
	}
	
	#maincont
	{
		padding: 30px 10px;
	}
	
	#maincont .gridcontainer
	{
		width: calc(100vw - 20px);
		grid-gap: 20px;
	}
		
}


@media screen and (max-width: 680px)
{
	#maincont .gridcontainer
	{
		grid-template-columns: 320px;
	}
	
		#headercont img
	{
		display: none;
	}
	
	#headercont h1
	{
		font-size: 42px;
		line-height: 42px;
	}
	
	#headercont h1 span.subhead
	{
		font-size: 19px;
		line-height: 19px;
	}
	
	#footercont .gridcontainer
	{
		grid-template-columns: 1fr;
	}

	#footercont .gridbox1
		{
			text-align: left;
			padding-left: 10px;
		}
	#footercont .gridbox2
		{
			text-align: left;
			padding-left: 10px;
		}
	#footercont .gridbox3
		{
			text-align: left;
			padding-left: 10px;
		}		
}


@media screen and (max-width: 480px)
{
	blockquote
	{
		text-align: left !important;
	}
	
	#maincont img.imgright
	{
		float: none;
		max-width: 80%;
	}

}