@font-face 
{
  font-family: 'Futura';
  src: url("fonts/Futura-Condensed-Medium.otf");
}

@font-face 
{
  font-family: 'Avenir';
  src: url("fonts/Avenir-Black.ttf");
}


body 
	{
	/*overflow: hidden;*/
	background: green;
	background-image: url("images/BackgroundEarth.jpg");
	background-size: 1800px; /*1980px 1320px;*/
	background-repeat: repeat;
	font-size: 100%;
	}


@media all and (min-width: 1800px)
	{
	body 
		{
		background-size: 100%; /*1980px 1320px;*/
		}
	}




/**************************************************/
#Background 
	{
	position: absolute;
	width: 1980px;
	margin: calc(50vh - 590px) 0 0 calc(80vw - 1560px);
	background: transparent;
	overflow:hidden;
	}


#Background img 
	{
	width: 1980px;
	}

/**************************************************/
#Seal img 
	{
	position: absolute;
	width: 6em;
	margin: 1em 0 0 1em;
	background: transparent;
	}



/**************************************************/
#Menu 
	{
	position: absolute;
	top: 0;

	/*margin: 100pt 0 0 100pt;*/
	/*border: 10%;
	border-color: green;*/
	/*padding: 100pt;*/
	width: calc(100vw - 8em);
	/*height: calc(100vh - 300pt);*/

	/*letter-spacing: 0.2em;*/
	background: white;
	color: black;
	}


#Menu p
	{
	position: absolute;
	top: 0;
	margin: 2em 0 0 4.6em;
	background: transparent;
	/*overflow: hidden;*/

	font: 1.36em Avenir;
	letter-spacing: 0.2em;
	line-height: 5vh;
	color: white;
	}

#Menu a
	{
	margin: 0 0 0 4em;
	color: white;
	text-decoration: none;
	}




/**************************************************/
#Article 
	{
	position: absolute;
	top: 0;
	/*float: left;*/
	/*display: table;*/

	margin: 8em 0 0 8em;
	/*border: 10%;
	border-color: green;*/

	/*padding: 85pt 50pt 100pt 100pt ;*/
	padding: 6em 4em 8em 8em ;
/*width: calc(50vw - 250pt);*/
	/*height: calc(100vh - 300pt);*/
	font: 1em Avenir;
	background: white;
	color: black;
	/*clip: rect(0,500px,500px,0);*/
	}


#Article p
	{
	font: 1em Serif;
	line-height: 1.5em;
/*width: calc(50vw - 250pt);*/
	}

/*
.twocolumns {
 padding:10px;
  width:80%;
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  column-count: 2;
  column-gap: 10px;
}
*/
#Article p.centre

	{
	text-align: center;
	}

#Article h1
	{font: 2.5em Futura;}

#Article h2
	{font: 1.84em Futura;}

#Article h3
	{font: 1.36em Futura;}

#Article h4
	{font: 1em Futura;}

#Article ul
	{
	font: 1em Serif;
	margin: 2em 2em 2em 0em;
	}

#Article li
	{
	font: 0.9em Serif;
	margin: 1em 1em 1em 0em;
	color: #202020;
	}




#Article p.textlogo 
	{
	position: absolute;
	top: 0;
	margin: 0.4em 0 0 -1.53em;
	background: transparent;
	/*overflow: hidden;*/
	font: 4em Futura;
	/*font-size: calc(17vw);*/
	letter-spacing: 0.2em;
	color: black;

	}


#Article p.vline 
	{
	position: absolute;
	top: 0;
	margin: 8em 0 2em -4em;
	background: black;
	color: transparent;
	width: 1px;
	height: calc(100% - 12em);
	/*overflow: hidden;*/
	}

#Article p.vtext 
	{
	position: absolute;
	bottom: 0;
/*	margin: 8em 0 0 8em;*/
/*	margin: calc(100vh - 12em) 0 0 -4.65em;*/
	margin: 8em 0 2.6em -4.65em;
	background: white;
	overflow:hidden;

	font: 1em Avenir;
	/*font-size: calc(17vw);*/
	letter-spacing: 0.2em;
	color: black;
	transform:rotate(-90deg);
	transform-origin: left top 0;

	}


#Article p.hline 
	{
	position: absolute;
	top: 0;
	margin: 4em 0 0 0;
	background: black;
	color: transparent;
	width: calc(50% - 12em);
	height: 1px;
	}



@media all and (min-width: 868px)
	{
	#Article p.htext 
		{
		position: relative;
		top: 0;
		/*direction: ltr;*/
		float: right;
		/*text-align: right;*/
		/*margin: 3.4em 0 0 calc(50vw - 28em);*/
		margin: -2.6em calc(50% + 6em) 0 4.65em;
		background: white;

		font: 1em Avenir;
		/*font-size: calc(17vw);*/
		letter-spacing: 0.2em;
		color: black;
		/*clear:both;*/
			overflow: hidden;
		}
	}
@media all and (max-width: 868px)
	{
	#Article p.htext 
		{
		position: relative;
		top: 0;
		/*direction: ltr;*/
		float: right;
		/*text-align: right;*/
		/*margin: 3.4em 0 0 calc(50vw - 28em);*/
		margin: -2.6em calc(50% + 6em) 0 4.65em;
		background: transparent;

		font: 1em Avenir;
		/*font-size: calc(17vw);*/
		letter-spacing: 0.2em;
		color: transparent;
		/*clear:both;*/
		overflow: hidden;
		}
}


/**************************************************/
#Pictures
	{
	position: relative;
	top: 0;
	float: right;
	margin: -6em -4em 4em 4em ;

	padding: 0;
	width: calc(6em + 50%);
	background: white;
	color: black;
	}

#Pictures img
	{
	margin: 0;
	padding: 0;
	float: right;
	width: 100%; 
	}

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




/* TooltipRight container */
.tooltip {position: relative; display: inline-block; color:#44f; background-color:inherit; font-weight: 500;} /* If you want dots under the hoverable text */


/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 180px;
	position: relative;
	background-color: #fff;
	color: #000;
	font-weight: normal;
	text-align: left;
	padding: 1px;
	/*border: 1px solid #00aa00;*/
	left: 0;
	margin: 0px;
	/*border-radius: 6px;*/
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
}




/* TooltipRef container */
.tooltipref {position: relative; display: inline-block; color:#88aa00;} /* If you want dots under the hoverable text */


/* Tooltip text */
.tooltipref .tooltiptextref {
	visibility: hidden;
	width: 500px;
	position: relative;
	background-color: #fff;
	/*color: #000;*/
	font-weight: normal;
	/*text-align: left;*/
	padding: 2px 10px;
	/*border: 1px solid #000000;*/
	/*right: 0;*/
	margin: 0px;
	/*border-radius: 6px;*/
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltipref:hover .tooltiptextref {
	visibility: visible;
}