#Top {	
	margin:0px;
}

#MainPage {
	position:relative; /* needed for footer positioning*/
	margin:0px;
	/*background-image:url(Images/FrontPageBackground.jpg);*/ 
	background-image:url(Images/MeetingBackgroundDark.jpg); 
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-size: cover;					
	background-scroll: no-scroll;

	/* Set rules to fill background */
	min-height: 97vh;			/* 100% viewport height (browser window height (97 to avoid vert scroll bar?)*/
	min-width: 100%;

	/* Set up proportionate scaling */
	width: auto;
	height: 100%;

	font: Verdana;
	font-size: medium;
	color: #E1E1E1;
}

/* Fixed at the bottom of the entire page - incl scroll */
#Bot {
	font: Verdana;
	font-size: x-small;
	bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    height: 10px;
}

/* Special styles for Contact Us - to fix it at the bottom right of the screen - without reacting to scrolling */
#ContactUs 
{
	position: fixed;
	bottom: 25px;
    right: 25px;
    text-align: left;
}

/* Special style for showing The Visual Dump Analyzer */
.styleVDA {
	font-size: medium;
	font-weight: bold;
	color: White;
}

h1 {color: White; margin-bottom:0;}
h2 {color: white; margin-bottom:0;}
h3 {color: white; margin-bottom:0;}
b {color: White;}

.HyperLink:link  {
     color: #E1E1E1;
     background-color: Transparent;
}  
.HyperLink:hover { color:white;}
.HyperLink:active { color:white;}
.HyperLink:visited { color:#888888;}

/* leaves the functionality of the phone number but strips the underline and matches the color you were using originally. */
a[href^="tel"]{
    color:white;
    text-decoration:none;
}

.languageDiv {
	position:absolute;
	right:0em;
	top:0.5em;
}

@media only screen and (min-width: 1px) and (max-width: 500px) {
    .languageDiv {
	    right:25%;
	    top:-0.2em;
    }
}
@media only screen and (min-width:501px) and (max-width: 980px) {
    .languageDiv {
	    right:25%;
    }
}

.languageFlag 
{
    float:left;
	background-color:Transparent;
    width:auto;
    height:1.5em;
    max-height:1.5em;
}

.LanguageButton 
{
    float:left;
	background-color:Transparent;
	font-size:small;
	color:White;
	border: none;
    display:block;
}

/* Animations of welcome text */ 
#WHARow { height:85px;}

#WHA 
{
	animation-name: WHA_Animation;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    margin-top:0.1em;
}

#WHAPhonePortrait 
{
	display:none;	
	text-align:center;
	animation-name: WHA_Animation;
    animation-duration: 1s;
    animation-timing-function: ease-in;
}

/* The animation text */
@keyframes WHA_Animation {
    from { opacity: 0.0;font-size: x-small;}
    to   { opacity: 1.0;font-size: xx-large;}
}

#WHA1
{
	animation-name: WHA1_Animation;
    animation-duration: 4s;
    xanimation-delay: 3s;
    xanimation-iteration-count: infinite;
}

/* The animation text */
@keyframes WHA1_Animation {
    0% { opacity: 0.0;}
    25% { opacity: 0.0;}
    100%   { opacity: 1.0;}
}

#WHA2
{
	animation-name: WHA2_Animation;
    animation-duration: 8s;
}
#WHA3
{
	animation-name: WHA2_Animation;
    animation-duration: 11s;
}

#WHA4
{
	animation-name: WHA2_Animation;
    animation-duration: 15s;
}

#WHA5
{
	animation-name: WHA2_Animation;
    animation-duration: 20s;
}

#WHA6
{
	animation-name: WHA2_Animation;
    animation-duration: 22s;
}

#WHA7
{
	animation-name: WHA2_Animation;
    animation-duration: 28s;
}

/* The animation text */
@keyframes WHA2_Animation {
    0% { opacity: 0.0;}
    70% { opacity: 0.0;}
    100%   { opacity: 1.0;}
}

/* The animation SVG page */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* Deactivate the navigation bars for phones */
#navPhone { display:none;}
#navPhoneLandscape { display:none;}

/* Make the More menu point right aligned */
.More 
{ 
	visibility:visible;
    position:relative;
    float:right;
}
         
.More ul 
{
	right:1px;
}

/* Navigation bar */
.nav ul {list-style: none; padding:0px; margin: 0px; float:right; padding:0px 0px 0px 0px;}
.nav ul li {display: block; position: relative; float:left; border:0px solid #000; vertical-align: bottom;}
.nav li ul {display: none;}
.nav ul li a 
{
	display: block;
	background: transparent;
	padding: 0px 5px 0px 5px;	/* top, right, bottom, left */
	text-decoration: none;
    white-space: nowrap;
    color: #E1E1E1;
    font-size:medium;           /* Change from x-small*/
    font: Verdana;
    font-weight:bold;
    text-align:center;
}
.nav ul li a:hover {background: transparent; color:White;}
.nav li:hover ul {display: block; position: absolute;}
.nav li:hover li {float: none;}
.nav li:hover a {background: transparent; font-weight:bold;}
.nav li:hover li a:hover {background: transparent;}
.nav li ul li {border-top:0px;}


/* Note that media selectors must be placed AFTER the default selectors */

/* All handheld devices with small browser width in current rotation */
@media only screen 
  and (min-width: 1px) 
  and (max-width: 500px)
{ 	
	.LanguageButton {top:2px; font-size:x-small;}
	#navWeb { display:none;}
	#navPhone { display:block;}
    #navPhoneLandscape { display:none;}

	.nav ul li a {text-align:right;font-size:medium;}
	#WHA { display:none;}
	#WHAPhonePortrait { display:block;}
	#WHARow { height:130px;}
	#ContactUs 
	{
		position: static;
		bottom: unset;
		right: unset;
		text-align:center;
	}

    .LanguageButton 
    {
        display:none;
    }
}

/* All handheld devices with medium browser width in current rotation */
@media only screen 
  and (min-width: 500px) 
  and (max-width: 700px)
{ 	
	.LanguageButton {top:3px; font-size:x-small;}
	#navWeb { display:none;}
    #navPhone { display:none;}
	#navPhoneLandscape { display:block;}

	.nav ul li a {text-align:right;font-size:medium;}
	#WHA {text-align:center;}
	#ContactUs 
	{
		position: static;
		bottom: unset;
		right: unset;
		text-align:center;
	}
}

.customerImage {
    margin:5px;
    border-radius:5%;
}