#Top {	
	margin:0px;
}

#MainPage {
	position:absolute; /* needed for footer positioning*/
    top:50px;
    left:0;
	margin:0;
	background-image:url('../images/speakerimage1.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-family: 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;
	x_color: White;
}

/*h1 {color: White;}
h2 {color: white;}
h3 {color: white;}
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;
}

.LanguageButton {
	position:absolute;
	left:1vw;
	top:5px;
	background-color:Transparent;
	font-size:small;
	color:White;
	border: none;
}

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

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

#WHAPhonePortrait 
{
	display:none;	
	text-align:center;
	x_animation-name: WHA_Animation; /* if we use fitin - we cannot use size animation too on small devices */
    x_animation-duration: 1s;
    x_animation-timing-function: ease-in;
}

/* The animation text - note once the aniation completes the DOM font-size used*/
@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;
}

/* 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;}
	.nav ul li a {text-align:right;font-size:medium;}
    #WHARow { height:75px;}
	#WHA { display:none;}
	#WHAPhonePortrait { display:block;}
	#ContactUs 
	{
		position: static;
		bottom: unset;
		right: unset;
		text-align:center;
	}

}

/* All handheld devices with medium browser width in current rotation */
@media only screen 
  and (min-width: 500px) 
  and (max-width: 800px)
{ 	
	.LanguageButton {top:3px; font-size:x-small;}
	#navWeb { display:none;}
	#navPhoneLandscape { display:block;}
	.nav ul li a {text-align:right;font-size:medium;}
    #WHARow { height:75px;}
	#WHA {text-align:center;}
	#ContactUs 
	{
		position: static;
		bottom: unset;
		right: unset;
		text-align:center;
	}
}