html{
height:100%;     line-height: 1;
	}

body {
	    font-family: "euro";
			font-family: euro;
	height:100%;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

#whiteBG {
	position:inherit;
   background: rgb(5, 5, 5); /* Fall-back for browsers that don't
                                   support rgba */
    background: rgba(255, 255, 255, .85);
	width: 75%;
	margin-top:800px;
    margin-left: auto;
    margin-right: auto;
	z-index:-10;
	border:1px solid #fff;
	pointer-events:none;	
	}
		
	IMG.penny {
   
    display: block;
	width: 75%;
	margin-top:30px;
    margin-left: auto;
    margin-right: auto;
	z-index:-10;
	opacity:0.9;
	border:1px solid #fff;
	pointer-events:none;
	}


P.captionsPenny {
	width: 75%;
		margin-top:-30px;
    margin-left: auto;
    margin-right: auto;

	color:#000;
	font-size: 15px;
	text-align:left;
	z-index:10;
	 line-height: 160%;
	 	pointer-events:none;

	}	

P.download {
	width: 75%;
		margin-top:-30px;
    margin-left: auto;
    margin-right: auto;
	color:#000;
	text-align:left;
	z-index:10;
	 line-height: 160%;
	 	pointer-events: visible;
	font-size:20px;
	}	
	
	

P.HERE {
	width: 85%;
    margin-left: auto;
    margin-right: auto;
	color:#000;
	font-size: 15px;
	text-align:justify;
	z-index:10;
	 line-height: 160%;
	 pointer-events: visible;
	}
		
@font-face {
    font-family: 'euro';
    src: url("fonts/euro.eot");
    src: url("fonts/euro.eot") format("embedded-opentype"), url("fonts/euro.woff2") format("woff2"), url("fonts/euro.woff") format("woff"), url("fonts/euro.ttf") format("truetype");
}

@font-face {
    font-family: 'Eurostile LT Std Ext Two';
    src: url("fonts/EurostileLTStd-BoldEx2.eot");
    /* IE9 Compat Modes */
    src: url("fonts/EurostileLTStd-BoldEx2.eot?#iefix") format("embedded-opentype"), url("fonts/EurostileLTStd-BoldEx2.woff") format("woff"), url("fonts/EurostileLTStd-BoldEx2.ttf") format("truetype");
    /* Legacy iOS */
}


strong, b {
    font-family: 'Eurostile LT Std Ext Two';
}


.background {
	position: fixed;
	left: 0;
	top: 0;
width: 100%;
height: 100%;
	background-size: cover;
	background-image:url("images/BG.jpg");
	z-index:-1000;
}

		IMG.SPimage {
   
    display: block;
	width: 85%;
	margin-top:30px;
    margin-left: auto;
    margin-right: auto;
	opacity:1;
	z-index:-10;
	border:1px solid #fff;
	pointer-events:none;

	}
	
	IMG.LOGO {
    display: block;
	padding: 200px;
    margin-left: auto;
    margin-right: auto;
	width:200px;	
	}

	IMG.DIS {
    display: block;
	padding: 0px;
	}
	
P.captions {
	width: 85%;
		margin-top:-30px;
    margin-left: auto;
    margin-right: auto;
	margin-bottom:150px;
	color:#000;
	font-size: 15px;
	text-align:left;
	z-index:10;
	 line-height: 160%;
	 pointer-events:none;
	}
	
P.justifytext {
	width: 85%;
		margin-top:-30px;
    margin-left: auto;
    margin-right: auto;
	color:#000;
	font-size: 15px;
	text-align:justify;
	z-index:10;
	 line-height: 160%;
	 pointer-events:none;
	}	

@keyframes myfirst
{
0%   {left:0px; top:0px;}
100%  { left:0px; top:35px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {left:0px; top:0px;}
100%  {left:0px; top:35px;}
}


#audio{
	position:fixed;
	margin-left:80px;
	margin-top:10px;
	animation: myfirst 3s infinite;
	animation-direction: alternate;
	/* Safari and Chrome */
	-webkit-animation: myfirst 3s infinite;
	-webkit-animation-direction: alternate;
-webkit-filter: brightness(1) grayscale(1) invert(1);
	opacity:.9; 
	}
		
	#seasick1 {
	position:fixed;
	opacity:.9;
	z-index: 3000;
	animation: myfirst 3s infinite;
	animation-direction: alternate;
	/* Safari and Chrome */
	-webkit-animation: myfirst 3s infinite;
	-webkit-animation-direction: alternate;	
}	

	#seasick2 {
	position:relative;
	z-index: 3000;
		animation: myfirst 3s infinite;
	animation-direction: alternate;
	/* Safari and Chrome */
	-webkit-animation: myfirst 3s infinite;
	-webkit-animation-direction: alternate;
		pointer-events:none;
}	


.aspect-ratio {
  position: relative;
  padding-bottom: 52%; /* 16:9 */
  margin-left:7.5%;
	padding-top: -20px;
	height: 0;
}

#pointerYES	{
	pointer-events: visible;
position: absolute;
	top: 0;
	left: 0;
height: 91.9%; 
width: 91.9%;

	}


a {
    color: black;
}

a:visited {
    color: inherit;
}

a:active {
    color: inherit;
}

a:hover {
    color: black;
}

#LOGO {width: 100%; margin: 0 auto; height: 470px; position: relative;  display: block; z-index: 10000;}

#LOGO img {
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

#LOGO:hover > #logoEN {
    opacity: 1;
}

#logoEN {
    opacity: 0;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    transition: opacity 2s;
}

#LOGO:hover > #logoGR {
    opacity: 0;
}

#logoGR {
    opacity: 1;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    transition: opacity 2s;
}