/* div di maschera con tutti gli oggetti di interazione */
#maskVideo{
  position: absolute;
  top:0;
 }


/* immagine scura semitrasparente di sfondo che viene associata nel momento della scelta */
.maskVideoCoverOpacity{
  background-image: url(risorse/background-with-opacity.png);
}


/* classe generale dei bottoni */
.videoButton {
    position: absolute;
    border: none;
    background: none;
    text-decoration: none;
    display: inline-block;
    transition-duration: 0.4s;
    cursor: pointer;
    padding:0
}
.videoButton img{
  width:100%
}


#skipButton,#skipButton2,#skipButton3,#skipButton4 {
  font-size: 12px;
  background-color: #fff;
 
}


#palchetto49,#palchetto51,#palchetto53{
  position: absolute;
  border: none;
  background: none;
  text-decoration: none;
  display: none;
  transition-duration: 0.4s;
  cursor: pointer;
  padding:0;
  top:50%;
  width:32%;
  text-align: center;
  color:white;
  padding:3% 0;
  background-color:rgba(0, 0, 0, 0.7);

}
#palchetto49 span,#palchetto51 span,#palchetto53 span{
  font-size: 3vw;
  font-family: 'WindSong', cursive; 
}


#palchetto49{
  left:0;
  margin-left:1%;
}
#palchetto51{
  left:33%;
  margin:0 1%;
}
#palchetto53{
  left:66%;
  margin-right: 1%;
}

#logoVideo{
  height: 10%;
  right:0;
  top:0;
  position: absolute;
  display: none;
}

/* classe generale dei bottoni all'hover */
.videoButton:hover {
    background: none;
}

/* bottone iniziale  */

#fullButton{
  display: none;
  bottom:0;
  right:0
}
#fullButtonContinue{
  display: none;
}

/* player  */
#playerPlayButton,#playerPauseButton,#playerStopButton {
  display: none;
  bottom:0;
}


/* bottoni di interazione */
#text-fine{
  display: none;
  top: 40%;
  position: absolute;
  margin: auto;
  color: #fff;
  font-size: 4vw;
  width: 100%;
  text-align: center;
  font-family: 'WindSong', cursive; 
}
#text-ago-o-gruccia,#text-orologio-gabbia-o-mano,#text-yahoo-o-coniglio{
  display: none;
  
  position: absolute;
  margin: auto;
  color: #fff;
  font-size: 2vw;
  width: 40%;
  left: 30%;
  text-align: center;
  font-family: 'WindSong', cursive; 
}
#text-ago-o-gruccia,#text-yahoo-o-coniglio{
  top:10%
}
#text-orologio-gabbia-o-mano{
  bottom: 10%;
}
#ago,#gruccia,#finalissimo,#coniglio{
  display: none;
  display: block;
  width:50%;
  height: 100%;
  top:0;
  position: absolute;
 
}
#gruccia,#coniglio{
  left:50%;
}

#text-chi-volete-interrogare{
  display: none;
  top:10%;
  position: absolute;
  margin: auto;
  color: #fff;
  font-size: 3vw;
  width: 40%;
  left: 30%;
  text-align: center;
  /* font-family: 'WindSong', cursive; */
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 600;  /* normale */ 
  z-index: 2;
}

#text-chi-colpevole{
  display: none;
  top:10%;
  position: absolute;
  margin: auto;
  color: #fff;
  font-size: 3vw;
  width: 40%;
  left: 30%;
  text-align: center;
  /* font-family: 'WindSong', cursive; */
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 600;  /* normale */ 
  z-index: 2;
}

#sfondo-cornice {
  display: none;
  display: block;
  width:100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/Sfondo_Cornice.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 1;
}

#hai-vinto     {
  display: none;
  display: block;
  width:100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/slide_wow_2.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 2;
}

#non-hai-indovinato     {
  display: none;
  display: block;
  width:100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/slide_peccato_2.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 2;
}

#leonie     {
  display: none;
  display: block;
  width:26.04%;
  height: 27.77%;
  top: 25%;
  left: 7%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/Leonie.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 2;
}

#helene     {
  display: none;
  display: block;
  width:26.04%;
  height: 27.77%;
  top: 25%;
  left: 37%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/Helene.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 2;
}

#clotilde     {
  display: none;
  display: block;
  width:26.04%;
  height: 27.77%;
  top: 25%;
  left: 67%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/Clotilde.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 2;
}

#ralph     {
  display: none;
  display: block;
  width:26.04%;
  height: 27.77%;
  top: 60%;
  left: 7%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/Ralph.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 2;
}

#maximilien     {
  display: none;
  display: block;
  width:26.04%;
  height: 27.77%;
  top: 60%;
  left: 37%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/Maximilien.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 2;
}

#wilhelm     {
  display: none;
  display: block;
  width:26.04%;
  height: 27.77%;
  top: 60%;
  left: 67%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/Wilhelm.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 2;
}



#leonie2     {
  display: none;
  display: block;
  width:26.04%;
  height: 27.77%;
  top: 25%;
  left: 7%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/Leonie-off.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 2;
}

#helene2     {
  display: none;
  display: block;
  width:26.04%;
  height: 27.77%;
  top: 25%;
  left: 37%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/Helene-off.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 2;
}

#clotilde2     {
  display: none;
  display: block;
  width:26.04%;
  height: 27.77%;
  top: 25%;
  left: 67%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/Clotilde-off.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 2;
}

#ralph2     {
  display: none;
  display: block;
  width:26.04%;
  height: 27.77%;
  top: 60%;
  left: 7%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/Ralph-off.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 2;
}

#maximilien2     {
  display: none;
  display: block;
  width:26.04%;
  height: 27.77%;
  top: 60%;
  left: 37%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/Maximilien-off.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 2;
}

#wilhelm2     {
  display: none;
  display: block;
  width:26.04%;
  height: 27.77%;
  top: 60%;
  left: 67%;
  position: absolute; 
  background-image: url("facciamone-un-dramma/Wilhelm-off.png");
  background-size: 100% 100%;   /* forza a riempire tutto il box */
  background-repeat: no-repeat; /* niente ripetizioni */
  background-position: center;  /* centrata */ 
  z-index: 2;
}





#gruccia { background-image: url("facciamone-un-dramma/gruccia.png"); }

#orologio,#gabbia,#mano{
  display: none;
  display: block;
  width:33%;
  height: 100%;
  top:0;
  position: absolute;
}
#gabbia{
  left:33%
}
#mano{
  left:66%
}
#interact03Button02 {
  color: white; 
  left: 50%;
  top: 60%;
  width: 10%;
}

/* fullscreen*/

#video1{
   width: 100vw; 
    height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
    background: black;
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto auto auto -9999px;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
    z-index: 9;
}
#maskVideo{
  top:0;bottom:0; /* vertical center */
  left:0;right:0; /* horizontal center */
  margin: auto auto auto -9999px;
  z-index: 12;
}
#contentVideo{
  left:-99999;
}
#video1.maskCenter,#maskVideo.maskCenter{
  margin: auto!important;
}
body.fullscreen{
  background: #000;
}

/* Extra small devices */
@media (max-width: 576px) { 
  #playerPlayButton,#playerPauseButton,#playerStopButton {
    width:7%;
    bottom:2%;
  }
  #playerPlayButton,#playerPauseButton{
    left:15%;
  }
  #playerStopButton{
    left:1%;
  }
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
  #playerPlayButton,#playerPauseButton,#playerStopButton {
    width:7%;
    bottom:2%;
  }
  #playerPlayButton,#playerPauseButton{
    left:10%;
  }
  #playerStopButton{
    left:1%;
  }
  
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #playerPlayButton,#playerPauseButton,#playerStopButton {
    width:3%;
  }
  #playerPlayButton,#playerPauseButton {
    left:5%;
  }
  #playerStopButton{
    left:1%;
  }

}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 

}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 

}