/* Heat Flow - Main Page Style  */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400); /* Import google open sans font */

/* Remove Padding and margin and line height*/
body, h1, h2, img, a, b, div, p
{	margin: 0 0 0 0; /* top : right :  bottom :  left */
	padding: 0 0 0 0; /* top : right :  bottom :  left */
	line-height: 1.2;
	border: none; }

body
{	font-family: sans-serif, "Open Sans";
	font-style: normal;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	cursor: default;
	width: 100%;
	padding-top: 0.1%;
	background: no-repeat center center fixed; 
	background-image: url("../images/Background.png");
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover; }

/* SET COLORS */
body { background-color: white; } /* Background Color (White) */
.Inverted { color: white; }
body, p, h3 { color: black; } /* Text and h3 Color (Black) */
a, h2, .MenuItem { color: royalblue; } /* Link, h2 and Menu Color (Blue) */
h1, li::before { color: #dc292d; } /* h1 Color and Selected Item Background */
a:hover, .Selected { background-color: #dc292d; color: white; } /* Link and Action Colour */
.MenuItemIMG:hover { background-color: transparent; }


/* SET FONTS (VARIABLE) */
body, p, .SmallText { font-size: 1em; font-size: 1.56vw; } /* Small Text */
h2, h3, .MediumText { font-size: 1.5em; font-size: 2.34vw; } /* Medium Text */
h1, .MenuItem, .LargeText { font-size: 2em; font-size: 3.12vw; } /* Large Text */

a { text-decoration: none; }
p { text-align: justify; margin-left: 2%; margin-right: 1%; margin-bottom: 2%;}
h1 { margin-left: 1%; margin-right: 1%; text-align: left; }
h2, h3 { text-align: left; padding-bottom: 1%;}
ul {list-style: none inside;, li::before
	padding: 0;
	margin: 0;
	text-align: left;
	margin-left: -4%; }
li::before { content: "+ "; } /* LIST CHARACTER */

hr { clear: both; border: none; }


.MenuItem  /* Heat Flow Menu Style */
{	padding-left: 2%; 
	padding-right: 2%; 
	padding-top: 1%;
	padding-bottom: 1%;
	border-radius: 50%; }
.MenuItemIMG { padding-top: 30%; padding-right: 4%; }

#MainLogoDIV
{	float: left;
	width: 45%; margin-left: 1%; padding-top: 4%; padding-bottom: 1%; }

.ShadedFullWidthDIV
{	background-image: url("../images/BackgroundDark.png");
	position: absolute;
	padding-top: 1%;
	left: 0;
	width: 100%; }

.FullWidthDIV
{	background-image: url("../images/BackgroundLight.png");
	position: absolute;
	padding-top: 1%;
	left: 0;
	width: 100%; }


.FloatRight, .RightPanel { float: right; margin-right: 1%; }
.FloatLeft, .LeftPanel { float: left; margin-left: 1%; }
.RightPanel, .LeftPanel { width: 48%; }


/* SCREEN MEDIA ADJUSTMENTS */
@media (max-width: 32em) /* Small Size Displays */
{	body, p, .SmallText { font-size: 1.5em; font-size: 2.34vw; } /* Small Text */
	h2, h3, .MediumText { font-size: 3em; font-size: 3.51vw; } /* Medium Text */
	h1, .MenuItem, .LargeText { font-size: 4em; font-size: 4.68vw; } /* Large Text */  
	#MainLogoDIV
	{	float: none;
		width: 92%; margin-left: 1%; } 
	.MenuItem  /* Heat Flow Menu Style */
	{	padding-left: 0.5%; 
		padding-right: 0.5%; } 
	.LeftPanel, .RightPanel { float: none; width: 98%; }



		}


@media (min-width: 64em) /* Large screens (over 1024) */
{	body, p, .SmallText { font-size: 1em; } /* Small Text */
	h2, h3, .MediumText {font-size: 1.5em; } /* Medium Text */
	h1, .MenuItem, .LargeText { font-size: 2em; } /* Large Text */
	body
	{	float: middle;
		width: 62.9em; 
		margin: 0.25% auto 0.25% auto; } /* top : right :  bottom :  left */ 
	.PaddingDIV 
	{	float: none;
		width: 62.9em;
		margin: 0.25% auto 0.25% auto; /* top : right :  bottom :  left */  } }




