body {

background-color:#000000;
  }



h1
{
color:#37edf8;;
}

.tit {color:#37edf8;}

h2
{
color:#37edf8;
}
h3
{
color:#c0c0c0;
}

p{font-family:"Times New Roman", Times, serif;

color:#c0c0c0;
}

.small{

line-height:20%

}

li {color:#c0c0c0;}


/*   mmmmmmmmmmmmmmmmmmmmm  BACKGOUND STUFF   mmmmmmmmmmmmmmmmmmmmmmmmmm  */



#background {
	background: black url(../images/plain1.png) repeat 5% 5%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: -300;
 	opacity:1;

	animation-name: STAR-MOVE;
	animation-duration: 400s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 400s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#midground {
	background: url(../images/plain2.png)  repeat 20% 20%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: -200;
	opacity:1;  

	animation-name: STAR-MOVE;
	animation-duration: 300s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 300s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#foreground {
	background: url(../images/plain3.png)  repeat 35% 35%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: -100;
opacity:1;


	animation-name: STAR-MOVE;
	animation-duration: 200s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;



	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 200s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}


@keyframes STAR-MOVE {
	from {
		background-position: 5% 5%
	}
	to { 
		background-position: 900% 1100%
	}
}





@-webkit-keyframes STAR-MOVE {
	from {
		background-position: 5% 5%
	}
	to { 
		background-position: 900% 1100%
	}
}

/*  mmmmmmmmmmmmmmm   END BKG STUFF  mmmmmmmmmmmmm  */




/* mmmmmmmmmmmmmmmmmm  PLANET EARTH mmmmmmmmmmmmmmmm */

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: absolute;
z-index:-1;


transform:rotate(9deg);
-ms-transform:rotate(9deg); /* IE 9 */
-webkit-transform:rotate(9deg); /* Opera, Chrome, and Safari */

  -webkit-transform-style: preserve-3d;
  background: url(../images/worldmapgreen.jpg) repeat-x;                             /* 'http://hop.ie/balls/images/world-map-one-color.png'   */
  background-size: auto 100%;
  -webkit-animation: move-map 30s infinite linear;
  -moz-animation: move-map 30s infinite linear;
  -o-animation: move-map 30s infinite linear;
  -ms-animation: move-map 30s infinite linear;
  animation: move-map 30s infinite linear;
}

.ball:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 40px 10px 70px 20px rgba(0,0,0,0.9) inset;
  z-index: 2;

-webkit-gradient(radial, 50% 80%, 0, 50% 80%, 100, color-stop(0%, #81e8f6), color-stop(10%, #76deef), color-stop(66%, #055194), color-stop(100%, #062745));

 -webkit-radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
 }  	

.ball:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-filter: blur(0);
  opacity: 0.2;
z-index:3;

  background: -webkit-gradient(radial, 80% 65%, 0, 80% 65%, 100, color-stop(0%, #81e8f6), color-stop(10%, #76deef), color-stop(66%, #055194), color-stop(100%, #062745));
 

 background: -webkit-radial-gradient(80% 65%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
 
background: -moz-radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
  background: -o-radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
  background: radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
}


  /* wwwwwwwwwwwwwwww  STAGE = Planet Container  WWWWWWWWWWWW  */

.stage {
position:absolute;

top:375px;
left:690px;

/*
margin-top:250px;
margin-bottom:50px;
margin-left:auto;
margin-right:auto; */

  width: 300px;
  height: 300px;
  display:block;




  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

@-moz-keyframes move-map {
  0% {
    background-position: -849px 0; }

  100% {
    background-position: 0 0; } }

@-webkit-keyframes move-map {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -849px 0; }
}


@-o-keyframes move-map {
  0% {
    background-position: -849px 0; }

  100% {
    background-position: 0 0; } }

@-ms-keyframes move-map {
  0% {
    background-position: -849px 0; }

  100% {
    background-position: 0 0; } }

@keyframes move-map {
  0% {
    background-position: -849px 0; }

  100% {
    background-position: 0 0; } }


   /* mmmmmmmmmmmmmmmmmm  FADING PLANET EARTH IN  mmmmmmmmmmmm  */


#fadein{

animation-name:fadein;
animation-duration:2s;
animation-timing-function:ease;
animation-fill-mode:forwards;
animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;

/* Safari and Chrome: */
-webkit-animation-name:fadein;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:ease;
-webkit-animation-fill-mode:forwards; 

-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;

}

@keyframes fadein
{
0%   	{opacity:0;}



100%   	{opacity:1;}
}

@-webkit-keyframes fadein /* Safari and Chrome */
{
0%   	{opacity:0;}



100%   	{opacity:1;}
}

  /*  mmmmmmmmmmmmmmmmmmmmmm  END FADE, END PLANET EARTH   mmmmmmmmmmm  */

  


/*WWWWWWWWWWWWWWWWWWWWWWWWWW   HEADER    WWWWWWWWWWWWWWWWWWW */

#header{

position:relative;
width:850px;
height:148px;
margin-top:50px;
/*margin-bottom:50px;*/
margin-left:auto;
margin-right:auto;
text-align:center;

z-index:100;
opacity:0;

animation-name:openh;
animation-duration:7s;
animation-timing-function:ease;
animation-delay:2s;
animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;
animation-fill-mode:forwards;


/* Safari and Chrome: */
-webkit-animation-name:openh;
-webkit-animation-duration:7s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode:forwards;
}

@keyframes openh
{
0%   {margin-top:400px;opacity:0;}
50%  {margin-top:400px;opacity:1;}

100% {margin-top:-150px;opacity:1;}
}

@-webkit-keyframes openh /* Safari and Chrome */
{
0%   {margin-top:400px;opacity:0;}
50%  {margin-top:400px;opacity:1;}

100% {margin-top:-150px;opacity:1;}
}

  /*  MMMMMMMMMMMMMMM   END HEADER   MMMMMMMMMMMMMMMM */







/* mmmmmmmmmmmmmmmmmmmmmmmmmmm   IPHONE START  mmmmmmmmmmmm  */




#iphonecontainer{

position:relative;
width:600px;
height:938px;
  /*margin-top:50px;*/
margin-bottom:50px;
margin-left:auto;
margin-right:auto;

border-image: url('../images/metalbkg2.jpg') 30 30 30 30 
round round; 
border-style: inset;
border-width: 30px; 

opacity:0;

 
animation-name:iarrive;
animation-duration:3s;
animation-timing-function:ease;
animation-fill-mode:forwards;
animation-delay:9s;

animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;

/* Safari and Chrome: */
-webkit-animation-name:iarrive;
-webkit-animation-duration:3s;
-webkit-animation-timing-function:ease; 
-webkit-animation-fill-mode:forwards; 
-webkit-animation-delay:9s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;

}


@keyframes iarrive{

	0%	{top:600px; opacity:0;}
	100% 	{top:100px; opacity:1;}
	
}

@-webkit-keyframes iarrive{

 	0%	{top:600px; opacity:0;}
	100% 	{top:100px; opacity:1;}
	
}








  /*  mmmmmmmmmmmmmmmmmmmmm SCREEN MAIN IPHONE CONTAINER   VVVVVVVVVVVVVVVVVV */


#screen{

position:absolute;
top:0;
left:0;
background-color:#000000;

height:924px;
width:600px;

  /*  border:1px solid silver; */ /*placement purposes only*/

opacity:.9;

/*
animation-name:ifade;
animation-duration:1s;
animation-timing-function:ease;
animation-fill-mode:forwards;
animation-delay:20s;

animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;

/* Safari and Chrome: */
-webkit-animation-name:ifade;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:ease; 
-webkit-animation-fill-mode:forwards; 
-webkit-animation-delay:20s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;   */

}

/*
@keyframes ifade{

	0%	{opacity:.9;}
	100% 	{ opacity:0;z-index:-100;}
	
}

@-webkit-keyframes ifade{

 	0%	{opacity:.9;}
	100% 	{ opacity:0;z-index:-100;}
	
}


*/


#date{


z-index:302;
position:absolute;


margin-top:250px;
margin-left:250px;


    width:0;
    white-space:nowrap;
    overflow:hidden;


animation-name:typet;
animation-duration:1.5s;
animation-timing-function:steps(6,end);
animation-fill-mode:forwards;
animation-delay:9s;

animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;

/* Safari and Chrome: */
-webkit-animation-name:typet;
-webkit-animation-duration:1.5s;
-webkit-animation-timing-function:steps(6,end); 
-webkit-animation-fill-mode:forwards; 
-webkit-animation-delay:9s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;

}


@keyframes typet{

	0%	{width:0;}
	100% 	{width:6em;}
	
}

@-webkit-keyframes typet{

  	0%	{width:0;}
	100% 	{width:6em;}
	
}




/*iphone slide to unlock text */

#zoom  {  		
position:absolute;
bottom:320px;
margin-left:100px;
margin-right:100px;
width:400px;
height:50px;
opacity:1;
  background: url(../images/zoombkg.jpg) repeat-x;   
  background-size: auto 100%;
  -webkit-animation: move-map 3s infinite linear;
  -moz-animation: move-map 3s infinite linear;
  -o-animation: move-map 3s infinite linear;
  -ms-animation: move-map 3s infinite linear;
  animation: move-map 3s infinite linear;
}


@-moz-keyframes move-map {
   0% {
    background-position: 0 0; }
  100% {
    background-position: 849px 0; }}

@-webkit-keyframes move-map {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 849px 0; }}


@-o-keyframes move-map {
   0% {
    background-position: 0 0; }
  100% {
    background-position: 849px 0; }}

@-ms-keyframes move-map {
    0% {
    background-position: 0 0; }
  100% {
    background-position: 849px 0; } }

@keyframes move-map {
    0% {
    background-position: 0 0; }
  100% {
    background-position: 849px 0; } }

/*
#zoom:hover {

opacity:.4;

}  */


.slider:active {


left:100px;

outline:none;
}






#ibut {

position:absolute;
left:250px;
bottom:200px;

}





   /* mmmmmmmmmmmmmmmmm  MAJOR MAP CONTAINS ALL   mmmmmmmmmmmmmmmm  */


/*
#map{
position:relative;
width:848px;
height:923px;
background:url(images/mainmap.jpg) no-repeat; 
background-position:0 0;
  border:1px solid silver;

  opacity:0;
*/

animation-name:mapfin;
animation-duration:1s;
animation-timing-function:ease;
animation-fill-mode:forwards;
animation-delay:51s;

animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;

/* Safari and Chrome: */
-webkit-animation-name:mapfin;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:ease; 
-webkit-animation-fill-mode:forwards; 
-webkit-animation-delay:51s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;

}

/*
@keyframes mapfin{

	0%	{opacity:0;}
	100% 	{opacity:1;}
	
}

@-webkit-keyframes mapfin{

	0%	{opacity:0;}
	100% 	{opacity:1;}
	
}   */


/* mmmmmmmmmmmmmmmmmm  POSITION LINK div  mmmmmmmmmmmmmmmmmmmm	  */

#link1 {                /*  SPAIN  */
position:absolute;
top:100px;
left:20px;
width:200px;
height:200px;
/* background-color:yellow;*/ /*a heratige remnant from when this page was three yellow squares on a green div  */
  
   /*border:2px solid red;*/    /*  ditto */

z-index:100;
}

#link2 {            /*   GAUL     */
position:absolute;
top:20px;
left:230px;
width:150px;
height:150px;
/* background-color:yellow;*/ /* more heritage remnants */

  /* border:2px solid red;  */

z-index:100;
}
#link3 {           /* NITALY   */
position:absolute;
top:80px;
left:390px;
width:140px;
height:140px;
z-index:100;
/*background-color:yellow; */

    /*  border:2px solid red;  */ 
}
#link4 {           /*   ILLYRIA   */
position:absolute;
top:80px;
left:560px;
width:140px;
height:140px;
z-index:100;
/*background-color:yellow; */

    /*  border:2px solid red; */  
}
#link5 {           /*   SARDINIA     */
position:absolute;
top:230px;
left:350px;
width:140px;
height:75px;
z-index:100;
/*background-color:yellow; */

   /* border:2px solid red;  */ 
}

#link6 {           /*   SITALY     */
position:absolute;
top:230px;
left:500px;
width:140px;
height:90px;
z-index:100;
/*background-color:yellow; */

    /* border:2px solid red;  */ 
}

#link7 {           /*   GREECE    */
position:absolute;
top:250px;
left:660px;
width:150px;
height:150px;
z-index:100;
/*background-color:yellow; */

   /* border:2px solid red;  */ 
}

#link8 {           /*   SICILY    */
position:absolute;
top:330px;
left:490px;
width:100px;
height:70px;
z-index:100;
/*background-color:yellow; */

   /* border:2px solid red; */  
}

#link9 {           /*   CARTHAGE    */
position:absolute;
top:330px;
left:290px;
width:180px;
height:200px;
z-index:100;
/*background-color:yellow; */

   /* border:2px solid red;   */
}


/*  mmmmmmmmmmmmmmmmmmmmmmmmm POSITION MASK DIV  mmmmmmmmmmmmmmmmmmmmm*/



.mask {
position:absolute;
top:0px;
left:0px;
width:848px;
height:596px;

   /*border:2px solid red;*/
z-index:10;

}

/* mmmmmmmmmmmmmmmmmmmmmmmmmmmm PLACE MAP KEY IMG + WECOME TXT MMMMMMMMMMMMMMMMMM */

.secimg{
position:absolute;
bottom:0px;
right:1px;
border:1px solid #ffffff;
margin:0px;
}


.welcometxt{

text-shadow: 0px 0px 15px #37edf8;
width:388px;
margin-top:0px;
padding-top:0px;
padding-left:20px;
padding-right:20px;
opacity:0;
/*    Welcome animation     */

animation-name:welcome;
animation-duration:15s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;
animation-fill-mode:forwards;
/* Safari and Chrome: */
-webkit-animation-name:welcome;
-webkit-animation-duration:15s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode:forwards; 
}
  
@keyframes welcome
{
0%   {opacity:0;}
38%   {opacity:1;}
69%  {opacity:1;}
100% {opacity:0;}
}

@-webkit-keyframes welcome /* Safari and Chrome */
{
0%   {opacity:0;}
38%   {opacity:1;}
69%  {opacity:1;}
100% {opacity:0;}    
}


    /*      END ANIMATION    */

    /*    End Welcometxt    */



/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmm  Call up screen imgs on hover   mmmmmmmmmmmmm  */



#link1:hover ~ #spainscr  {
opacity:.3;
}

#link2:hover ~ #gaulscr {
opacity:.3;
}

#link3:hover ~ #nitalyscr   {
opacity:.3;
}


#link4:hover ~ #illyriascr   {
opacity:.3;
}

#link5:hover ~ #sardiniascr   {
opacity:.3;
}

#link6:hover ~ #sitalyscr   {
opacity:.3;
}

#link7:hover ~ #greecescr   {
opacity:.3;
}

#link8:hover ~ #sicilyscr   {
opacity:.3;
}

#link9:hover ~ #carthagescr   {
opacity:.3;
}

/*  xxxxxxxxxxxxxxxxxxxxxxxxx   Screen pngs  BASE OPACITY +transitions  settings xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */


#spainscr  {
opacity:0;
 transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;}

#gaulscr  {
opacity:0;
 transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;}

#nitalyscr  {
opacity:0;
 transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;}

#illyriascr  {
opacity:0;
 transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;}

#sardiniascr  {
opacity:0;
 transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;}

#sitalyscr  {
opacity:0;
 transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;}

#greecescr  {
opacity:0;
 transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;}

#sicilyscr  {
opacity:0;
 transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;}

#carthagescr  {
opacity:0;
 transition: opacity .8s ease-in-out;
   -moz-transition: opacity .8s ease-in-out;
   -webkit-transition: opacity .4s ease-in-out;}




/*mmmmmmmmmmmmmmmmmmm  Styling the Links  mmmmmmmmmmmmmmmmmmmmmm*/

		/*          SPAIN 		*/

#link1 a#spainlink {
display:block;
width:200px;
height:200px;
text-decoration:none;
z-index:100;
}
/* -----make span txt invisible in link  -----*/ 

#link1 a span, #link1 a:visited span {
  display:none;
  }
/*mmmmmmmmmmmmmmmmm  Styling span text box below map mmmmmmmmmmm */

#link1 a:hover span {
  position:absolute;  
  width:388px; 
height:321px;
  display:block; 
   background:#000000; 
	text-align:center;
    padding-left:15px;
 padding-right:15px;
padding-top:0px;
padding-bottom:0px;
border:1px solid red;
/*  $$$$$$$$$$$$$$$$$  fade in span txt (but still jumps out)  $$$$$$$   */
animation-name:fade;
animation-duration:.25s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:fade;
-webkit-animation-duration:.25s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
}
@keyframes fade
{
0%   {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fade /* Safari and Chrome */
{
0%   {opacity:0;}
100% {opacity:1;}    
}
/*  ,,,,,,,,,,,,,,,,,,  POSITION THE SPAN TXT  ,,,,,,,,,,,,,,,,, */

#link1 a#spainlink:hover span {
  left:-20px; 
  top:500px;
  }
/*---------------------------  END SPAIN ---------------------- */


/* mmmmmmmmmmmmmmmmmmmmmmmmmmm         GAUL	mmmmmmmmmmmmmmmmmmmmmmmm	*/

#link2 a#gaullink {
display:block;
width:150px;
height:150px;
text-decoration:none;
z-index:100;
}
/* -----make span txt invisible in link  -----*/
#link2 a span, #link2 a:visited span {
  display:none;
  }
/*mmmmmmmmmmmmmmmmm  Styling span text box below map mmmmmmmmmmm */
#link2 a:hover span {
  position:absolute;  

  width:388px; 
height:321px;
  display:block; 
   background:#000000; 
	text-align:center;
    padding-left:15px;
 padding-right:15px;
padding-top:0px;
padding-bottom:0px;
border:1px solid red; 
/*  $$$$$$$$$$$$$$$$$  fade in span txt (but still jumps out)  $$$$$$$   */
animation-name:fade;
animation-duration:.25s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:fade;
-webkit-animation-duration:.25s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
}
@keyframes fade
{
0%   {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fade /* Safari and Chrome */
{
0%   {opacity:0;}
100% {opacity:1;}
}
/*  ,,,,,,,,,,,,,,,,,, POSITION THE SPAN TXT ,,,,,,,,,,,,,,,,,,,,,  */

#link2 a#gaullink:hover span {
  left:-230px; 
  top:577px;
  }
/* VVVVVVVVVVVVVVVVVV  END GAUL VVVVVVVVVVVVVVVVVVVVVVVVVVVV*/


/* mmmmmmmmmmmmmmmmmmmmmmmmmmm     NITALY	mmmmmmmmmmmmmmmmmmmmmmmm	*/

#link3 a#nitalylink {
display:block;
width:140px;
height:140px;
text-decoration:none;
z-index:100;
}
/* -----make span txt invisible in link  -----*/
#link3 a span, #link3 a:visited span {
  display:none;
  }
/*mmmmmmmmmmmmmmmmm  Styling span text box below map mmmmmmmmmmm */
#link3 a:hover span {
  position:absolute;  
  width:388px; 
height:321px;
  display:block; 
   background:#000000; 
	text-align:center;
    padding-left:15px;
 padding-right:15px;
padding-top:0px;
padding-bottom:0px;
border:1px solid red;
/*  $$$$$$$$$$$$$$$$$  fade in span txt (but still jumps out)  $$$$$$$   */
animation-name:fade;
animation-duration:.25s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:fade;
-webkit-animation-duration:.25s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
}
@keyframes fade
{
0%   {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fade /* Safari and Chrome */
{
0%   {opacity:0;}
100% {opacity:1;}
}
/*  ,,,,,,,,,,,,,,,,,, POSITION THE SPAN TXT ,,,,,,,,,,,,,,,,,,,,,  */

#link3 a#nitalylink:hover span {
  left:-390px; 
  top:518px;
  }
/* VVVVVVVVVVVVVVVVVV    END NITALY   VVVVVVVVVVVVVVVVVVVVVVVVVVVV*/


/* mmmmmmmmmmmmmmmmmmmmmmmmmmm   ILLYRIA	mmmmmmmmmmmmmmmmmmmmmmmm	*/

#link4 a#illyrialink {
display:block;
width:140px;
height:140px;
text-decoration:none;
z-index:100;
}
/* -----make span txt invisible in link  -----*/

#link4 a span, #link4 a:visited span {
  display:none;
  }
/*mmmmmmmmmmmmmmmmm  Styling span text box below map mmmmmmmmmmm */
#link4 a:hover span {
  position:absolute;  
  width:388px; 
height:321px;
  display:block; 
   background:#000000; 
	text-align:center;
    padding-left:15px;
 padding-right:15px;
padding-top:0px;
padding-bottom:0px;
border:1px solid red;
/*  $$$$$$$$$$$$$$$$$  fade in span txt (but still jumps out)  $$$$$$$   */
animation-name:fade;
animation-duration:.25s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:fade;
-webkit-animation-duration:.25s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
}
@keyframes fade
{
0%   {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fade /* Safari and Chrome */
{
0%   {opacity:0;}
100% {opacity:1;}
}
/*  ,,,,,,,,,,,,,,,,,, POSITION THE SPAN TXT ,,,,,,,,,,,,,,,,,,,,,  */

#link4 a#illyrialink:hover span {
  left:-560px; 
  top:518px;
  }
/* VVVVVVVVVVVVVVVVVV    END ILLYRIA   VVVVVVVVVVVVVVVVVVVVVVVVVVVV*/



/* mmmmmmmmmmmmmmmmmmmmmmmmmmm   SARDINIA	mmmmmmmmmmmmmmmmmmmmmmmm	*/

#link5 a#sardinialink {
display:block;
width:140px;
height:75px;
text-decoration:none;
z-index:100;
}
/* -----make span txt invisible in link  -----*/

#link5 a span, #link5 a:visited span {
  display:none;
  }
/*mmmmmmmmmmmmmmmmm  Styling span text box below map mmmmmmmmmmm */
#link5 a:hover span {
  position:absolute;  
  width:388px; 
height:321px;
  display:block; 
   background:#000000; 
	text-align:center;
    padding-left:15px;
 padding-right:15px;
padding-top:0px;
padding-bottom:0px;
border:1px solid red;
/*  $$$$$$$$$$$$$$$$$  fade in span txt (but still jumps out)  $$$$$$$   */
animation-name:fade;
animation-duration:.25s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:fade;
-webkit-animation-duration:.25s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
}
@keyframes fade
{
0%   {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fade /* Safari and Chrome */
{
0%   {opacity:0;}
100% {opacity:1;}
}
/*  ,,,,,,,,,,,,,,,,,, POSITION THE SPAN TXT ,,,,,,,,,,,,,,,,,,,,,  */

#link5 a#sardinialink:hover span {
  left:-350px; 
  top:368px;
  }
/* VVVVVVVVVVVVVVVVVV    END SARDINIA   VVVVVVVVVVVVVVVVVVVVVVVVVVVV*/




/* mmmmmmmmmmmmmmmmmmmmmmmmmmm   SITALY	mmmmmmmmmmmmmmmmmmmmmmmm	*/

#link6 a#sitalylink {
display:block;
width:140px;
height:90px;
text-decoration:none;
z-index:100;
}
/* -----make span txt invisible in link  -----*/

#link6 a span, #link6 a:visited span {
  display:none;
  }
/*mmmmmmmmmmmmmmmmm  Styling span text box below map mmmmmmmmmmm */
#link6 a:hover span {
  position:absolute;  
  width:388px; 
height:321px;
  display:block; 
   background:#000000; 
	text-align:center;
    padding-left:15px;
 padding-right:15px;
padding-top:0px;
padding-bottom:0px;
border:1px solid red;
/*  $$$$$$$$$$$$$$$$$  fade in span txt (but still jumps out)  $$$$$$$   */
animation-name:fade;
animation-duration:.25s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:fade;
-webkit-animation-duration:.25s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
}
@keyframes fade
{
0%   {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fade /* Safari and Chrome */
{
0%   {opacity:0;}
100% {opacity:1;}
}
/*  ,,,,,,,,,,,,,,,,,, POSITION THE SPAN TXT ,,,,,,,,,,,,,,,,,,,,,  */

#link6 a#sitalylink:hover span {
  left:-500px; 
  top:368px;
  }
/* VVVVVVVVVVVVVVVVVV    END SITALY   VVVVVVVVVVVVVVVVVVVVVVVVVVVV*/



/* mmmmmmmmmmmmmmmmmmmmmmmmmmm   GREECE	mmmmmmmmmmmmmmmmmmmmmmmm	*/

#link7 a#greecelink {
display:block;
width:150px;
height:150px;
text-decoration:none;
z-index:100;
}
/* -----make span txt invisible in link  -----*/

#link7 a span, #link7 a:visited span {
  display:none;
  }
/*mmmmmmmmmmmmmmmmm  Styling span text box below map mmmmmmmmmmm */
#link7 a:hover span {
  position:absolute;  
  width:388px; 
height:321px;
  display:block; 
   background:#000000; 
	text-align:center;
    padding-left:15px;
 padding-right:15px;
padding-top:0px;
padding-bottom:0px;
border:1px solid red;
/*  $$$$$$$$$$$$$$$$$  fade in span txt (but still jumps out)  $$$$$$$   */
animation-name:fade;
animation-duration:.25s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:fade;
-webkit-animation-duration:.25s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
}
@keyframes fade
{
0%   {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fade /* Safari and Chrome */
{
0%   {opacity:0;}
100% {opacity:1;}
}
/*  ,,,,,,,,,,,,,,,,,, POSITION THE SPAN TXT ,,,,,,,,,,,,,,,,,,,,,  */

#link7 a#greecelink:hover span {
  left:-661px; 
  top:349px;
  }
/* VVVVVVVVVVVVVVVVVV    END SGREECE  VVVVVVVVVVVVVVVVVVVVVVVVVVVV*/


/* mmmmmmmmmmmmmmmmmmmmmmmmmmm   SICILY	mmmmmmmmmmmmmmmmmmmmmmmm	*/

#link8 a#sicilylink {
display:block;
width:100px;
height:70px;
text-decoration:none;
z-index:100;
}
/* -----make span txt invisible in link  -----*/

#link8 a span, #link8 a:visited span {
  display:none;
  }
/*mmmmmmmmmmmmmmmmm  Styling span text box below map mmmmmmmmmmm */

#link8 a:hover span {
  position:absolute;  
  width:388px; 
height:321px;
  display:block; 
   background:#000000; 
	text-align:center;
    padding-left:15px;
 padding-right:15px;
padding-top:0px;
padding-bottom:0px;
border:1px solid red;
/*  $$$$$$$$$$$$$$$$$  fade in span txt (but still jumps out)  $$$$$$$   */
animation-name:fade;
animation-duration:.25s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:fade;
-webkit-animation-duration:.25s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
}
@keyframes fade
{
0%   {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fade /* Safari and Chrome */
{
0%   {opacity:0;}
100% {opacity:1;}
}
/*  ,,,,,,,,,,,,,,,,,, POSITION THE SPAN TXT ,,,,,,,,,,,,,,,,,,,,,  */

#link8 a#sicilylink:hover span {
  left:-490px; 
  top:269px;
  }
/* VVVVVVVVVVVVVVVVVV    END SICILY   VVVVVVVVVVVVVVVVVVVVVVVVVVVV*/



/* mmmmmmmmmmmmmmmmmmmmmmmmmmm   CARTHAGE	mmmmmmmmmmmmmmmmmmmmmmmm	*/

#link9 a#carthagelink {
display:block;
width:180px;
height:200px;
text-decoration:none;
z-index:100;
}
/* -----make span txt invisible in link  -----*/

#link9 a span, #link9 a:visited span {
  display:none;
  }
/*mmmmmmmmmmmmmmmmm  Styling span text box below map mmmmmmmmmmm */

#link9 a:hover span {
  position:absolute;  
  width:388px; 
height:321px;
  display:block; 
   background:#000000; 
	text-align:center;
    padding-left:15px;
 padding-right:15px;
padding-top:0px;
padding-bottom:0px;
border:1px solid red;
/*  $$$$$$$$$$$$$$$$$  fade in span txt (but still jumps out)  $$$$$$$   */
animation-name:fade;
animation-duration:.25s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:1;
animation-direction:normal;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:fade;
-webkit-animation-duration:.25s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
}
@keyframes fade
{
0%   {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fade /* Safari and Chrome */
{
0%   {opacity:0;}
100% {opacity:1;}
}
/*  ,,,,,,,,,,,,,,,,,, POSITION THE SPAN TXT ,,,,,,,,,,,,,,,,,,,,,  */

#link9 a#carthagelink:hover span {
  left:-290px; 
  top:268px;
  }
/* VVVVVVVVVVVVVVVVVV    END CARTHAGE   VVVVVVVVVVVVVVVVVVVVVVVVVVVV*/



#key {

position:absolute;
right:0;
bottom:1px;

}


#maptxt {

position:absolute;

width:398px;
height:319px;
left:0px;
bottom:0px;

padding-left:20px;
padding-right;20px;
   
   /* border:1px solid red; */

background-color:#000000;
}


#menu {

position:absolute;
top:0;
left:0;
width:600px

background-color:#000000;




}


#spainmap{

position:relative;
width:700px;
height:677px;
margin-top:100px;
margin-left:auto;
margin-right:auto;
margin-bottom:100px;

border-image: url('../images/metalbkg2.jpg') 30 30 30 30 
round round; 
border-style: inset;
border-width: 30px; 

}


.gmap{
position:relative;
width:400px;
margin-left:auto;
margin-right:auto;

}

.pic {

border:5px solid #ffffff;
margin-left:auto;
margin-right:auto;


}