/*
	-------------------------------------------------------

	Query CSS
	Copyright (C) 2020 OwlTree Web Solutions.

	-------------------------------------------------------
	Colorways
	-------------------------------------------------------

	#adc0bd - Slate green / gray.
	#e6eceb - Light slate green / grey.
	#ef7d00 - Orange

	-------------------------------------------------------
	Font Declarations
	-------------------------------------------------------

*/


@font-face
{
	
	font-family: 'LatoThin';
	src: url('../fonts/LatoThin.eot'); src: url('../fonts/LatoThin.eot?#iefix') format('embedded-opentype'), url('../fonts/LatoThin.svg#LatoThin') format('svg'), url('../fonts/LatoThin.woff') format('woff'), url('../fonts/LatoThin.ttf') format('truetype');	
	font-display: swap;
}

@font-face
{
	
	font-family: 'LatoLight';
	src: url('../fonts/LatoLight.eot'); src: url('../fonts/LatoLight.eot?#iefix') format('embedded-opentype'), url('../fonts/LatoLight.svg#LatoLight') format('svg'), url('../fonts/LatoLight.woff') format('woff'), url('../fonts/LatoLight.ttf') format('truetype');	
	font-display: swap;
}

@font-face
{
	
	font-family: 'LatoMedium';
	src: url('../fonts/LatoMedium.eot'); src: url('../fonts/LatoMedium.eot?#iefix') format('embedded-opentype'), url('../fonts/LatoMedium.svg#LatoMedium') format('svg'), url('../fonts/LatoMedium.woff') format('woff'), url('../fonts/LatoMedium.ttf') format('truetype');	
	font-display: swap;
}

@font-face
{
	
	font-family: 'LatoBold';
	src: url('../fonts/LatoBold.eot'); src: url('../fonts/LatoBold.eot?#iefix') format('embedded-opentype'), url('../fonts/LatoBold.svg#LatoBold') format('svg'), url('../fonts/LatoBold.woff') format('woff'), url('../fonts/LatoBold.ttf') format('truetype');	
	font-display: swap;
}

html
{
	height: 100%;

	
}

body {
	height: 100%;
	font-family: 'LatoLight';
	background-size: cover;
	margin:0px;
	/*background-color: #0d6179;*/
	background-image: linear-gradient( white 60%, #0d6179 60%);
	text-align: center;
}

.logo-container
{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	/*background-color: white;*/
}

#container {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
	
}

.logo-column {
	float: left;
	width: 30%;
	margin: 3em 10% 0 10%;
	padding: 0;
}

img.logo {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 500px;
	padding: 0; 	
}

img.invisu
{
	padding-top: 6em;
}

.content {
	width: 100%;	
	float: left;
	font-family: "LatoLight";
	background-color: transparent;
	margin: 0;
	padding: 0;
}

.content hr {
	border: 1px solid #fff;
	width:70%;	
	display: block;
	margin:20px;
	margin:20px auto;
}

h1 {
	font-family: 'LatoMedium';
	font-size: 3em;
	display: block;
	clear: both;
	width:100%;
	color:#0d6179;
	text-align: center;
	padding: 2em 0 0em 0;
	line-height: 1.5em;
}

h2 {
	font-family: 'LatoMedium';
	font-size: 2em;
	display: block;
	width:100%;
	color:white;
	text-align: center;
	margin: 1em 0;
	
}

p {
	
	color:#0d6179;
	font-size: 1.6em;
	margin-bottom: 1em;
}

.contact_details {	
	display: block;
	width:100%;
	text-align: center;
	margin:0 auto;
	background-color: transparent;
}

.contact_details img {
	display: block;
	margin:0 auto;
	width:50px;
	padding:20px 20px 20px 20px;
	vertical-align: middle;
}

.contact_details a, .contact_details a:visited {
	color:white;
	font-size: 1.2em;

	font-weight: bold;
	letter-spacing: 2px;
	text-decoration: none;
}

a.email
{
	font-size: 4vw;
}

.col-container
{
	float: left;
	width: 100%;
	margin: 3em 0;
}

.flex-box
{
	position: relative;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	justify-content: center;
	z-index: 0;
	align-items: center;
}

.col
{
	float: left;
	width: 98%;
	max-width: 390px;
	/*margin: 40px;*/
	margin: 1em 1%;
	/*margin-top: 20px;*/
	font-family: "LatoLight";
	padding: 1.5em 0;
	color: #64b33a;
}

.col:nth-child(2)
{
	background-color: rgba(20, 97, 44, 0.15);
}

.col:nth-child(3)
{
	background-color: rgba(148, 19, 71, 0.15);
}

.col:nth-child(1) h2
{
	color: #64b33a;
}

.col:nth-child(2) h2
{
	color: #15622d;
}

.col:nth-child(3) h2
{
	color: #951447;
}

.col hr {
	border: 1px solid #fff;
	width:70%;	
	display: block;
	/*margin:20px;*/
	margin:20px auto;
}

.col h2 {
	text-transform: uppercase;
	display: block;
	width:100%;
	color:#15622d;
	text-align: center;
	margin: 1em 0;
	letter-spacing: 2px;
}