/* Spare entry page */

*,:after,:before{
box-sizing:border-box
}

html{
  min-width: 100%;
}

body{
  max-width: 690px;  
  width: 100%;
  margin: 0 auto;
  padding: 1%; /* Un po 'di distanza in modo da creare un bordo */
  min-width: 200px;
  min-height: 600px; 
  font-family: verdana, arial, sans-serif ;
  font-size: 0.7em; /* Un compromesso su cui puoi discutere, ma molte persone trovano troppo grande la dimensione del testo che hai impostato nel browser, ma non sanno come cambiarlo */
  border-top: 0; /* In cima comunque, sembrerebbe divertente con il bordo grigio, quindi farla franca. */
  /* border: 1px solid #aaa;*/ /* Piccola demarcazione ottica. */
}

.map-wrapper {
  width: 100%;
  height: 75vw;
  max-height: 490px;
  padding-top: 10px;
  padding-bottom: 5px;
}

.imageMap {
  width: 100%;
  padding-right: 1.5%;
  float: none;
  position: absolute;
  /* max-width: 676px; */
  margin: 0 auto; 
}

.imageMap img {
  display: block;
  width: 100%;
}

.imageMap .hotspots {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

.imageMap a {
  display: block;
  position: absolute;
  background: #000;
  z-index: 100;
  opacity: 0.0;
  filter: alpha(opacity=20);
  border: 1px solid transparent;
  border-radius: 10px;
}

.italiano {
  left: 9.7%;
  top: 60.5%;
  width: 8.7%;
  height: 7.5%;
}

.inglese {
  left: 28%;
  top: 60.5%;
  width: 8.7%;
  height: 7.5%;
}

.vecchio {
  left: 51%;
  top: 79%;
  width: 9%;
  height: 3%;
}

.imageMap a + p {
  position: absolute;
  left: 0;
  top: 102%;
  width: 100%;
  color: #000;
  display: none;
}

.imageMap:hover .hotspots {
  visibility: visible;
}



 /* marquee */


.marque1 {
 height: 30px;	
 overflow: hidden;
 position: relative;
}
.marque1 mrc66 {
   font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 9px;
   color: #F7D30D;
   position: absolute;
   width: 100%;
   height: 100%;
   margin: 0;
   line-height: 30px;
   text-align: center;
     /* Starting position */
   -moz-transform:translateX(100%);
   -webkit-transform:translateX(100%);	
   transform:translateX(100%);
    /* Apply animation to this element */	
   -moz-animation: marque1 40s linear infinite;
   -webkit-animation: marque1 40s linear infinite;
   animation: marque1 40s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes marque1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marque1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes marque1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}



/* Modifica Layout per video uguali o superiori a 415 px */

@media screen and (min-width:415px){

.imageMap {
  width: 100%;
  max-width: 676px;
}

}