@font-face {
  font-family: "Akzi-bold";
  src: url("../font/Berthold-Akzidenz-Grotesk-Bold.ttf") format("truetype"),
    url("../font/Berthold-Akzidenz-Grotesk-Bold.woff") format("woff");
}

@font-face {
  font-family: "Akzi-medium";
  src: url("../font/Berthold-Akzidenz-Grotesk-Medium.ttf") format("truetype"),
    url("../font/Berthold-Akzidenz-Grotesk-Medium.woff") format("woff");
}

@font-face {
  font-family: "Akzi-regular";
  src: url("../font/Berthold-Akzidenz-Grotesk-Regular.ttf") format("truetype"),
    url("../font/Berthold-Akzidenz-Grotesk-Regular.woff") format("woff");
}

@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot?11b2q9');
  src: url('../fonts/icomoon.eot?11b2q9#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?11b2q9') format('truetype'),
    url('../fonts/icomoon.woff?11b2q9') format('woff'),
    url('../fonts/icomoon.svg?11b2q9#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

body {
  background-color: #FAF6EE;
  color: #1E1E1E;
}

* {
  box-sizing: border-box;
  /* font-family: 'Berthold-Akzidenz-Grotesk-Regular', sans-serif; */
  margin: 0;
  padding: 0;
}


.option-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quiz-container {

  flex-direction: row;
}

.buttoni {

  display: inline-block;
  font-family: Akzi-regular;
  font-size: 20px;
  background-color: #F0ECE4;
  color: #1E1E1E;
  border: 0px;
  border-radius: 5px;
  padding: 20px;
  height: 83px;
  width: 100%;
  text-align: start;
  font-size: 20px;
  transition: box-shadow 0.8s;
  position: relative;

}

.buttoni span {
  background-color: #0A4BA6;
  border: 1px solid#F0ECE4;
  width: 14px;
  height: 14px;
  border-radius: 50px;
  position: absolute;
  top: -10px;
  left: -10px;
  position: absolute;
  z-index: 100;

}

#domande {
  font-family: Akzi-bold;
}


.buttoni_active {
  background: #0A4BA6;
  color: #F0ECE4;
}

.button_risultato {
  border-color: #0A4BA6;
  border: #0A4BA6 2px solid;

  background-color: #F0ECE4;
  color: #0A4BA6;
}

.buttoni span:nth-child(1) {
  top: -20%;
  left: -10%;

}

.buttoni span:nth-child(2) {
  top: 130%;
  left: 0%;
}

.buttoni span:nth-child(3) {
  top: -50%;
  left: 10%;
  background: transparent;

}

.buttoni span:nth-child(4) {
  top: -66%;
  left: 20%;

}

.buttoni span:nth-child(5) {
  top: -90%;
  left: 28%;

}

.buttoni span:nth-child(6) {
  top: 90%;
  left: 42%;

}

.buttoni span:nth-child(7) {
  top: 150%;
  left: 48%;
  background: transparent;
  border-color: #0A4BA6;

}

.buttoni span:nth-child(8) {
  top: 170%;
  left: 66%;

}

.buttoni span:nth-child(8) {
  top: -140%;
  left: 90%;

}

.buttoni span:nth-child(9) {
  top: -20%;
  left: -10%;
}

.buttoni span:nth-child(10) {
  top: 130%;
  left: 0%;
}

.buttoni span:nth-child(11) {
  top: -50%;
  left: 10%;
  background: transparent;
  border-color: #0A4BA6;

}

.buttoni span:nth-child(12) {
  top: -66%;
  left: 20%;

}

.buttoni span:nth-child(13) {
  top: -90%;
  left: 28%;

}

.buttoni span:nth-child(14) {
  top: -90%;
  left: -42%;

}

.buttoni span:nth-child(15) {
  top: -90%;
  left: 10%;
  background: transparent;
  border-color: #0A4BA6;
}

.buttoni span:nth-child(16) {
  top: 140%;
  left: 100%;

}

.buttoni span:nth-child(17) {
  top: -170%;
  left: -20%;

}

.buttoni span:nth-child(18) {
  top: 50%;
  left: -10%;
  background: transparent;
  border-color: #0A4BA6;
}

.buttoni span:nth-child(19) {
  top: -80%;
  left: 38%;
  background: transparent;
  border-color: #0A4BA6;
}

.buttoni span:nth-child(20) {
  top: 190%;
  left: 120%;
  background: transparent;
  border-color: #0A4BA6;
}

.buttoni span:nth-child(21) {
  top: -10%;
  left: 80%;
  background: transparent;
  border-color: #0A4BA6;
}

.buttoni span:nth-child(22) {
  top: 0;
  left: 88%;
  background: transparent;
  border-color: #0A4BA6;
}

.buttoni span:nth-child(23) {
  top: 160%;
  left: 75%;
  border-color: #0A4BA6;
}

.buttoni span:nth-child(24) {
  top: 80%;
  left: 100%;
  border-color: #0A4BA6;
}

.buttoni span:nth-child(25) {
  top: 180%;
  left: 33%;
  border-color: #0A4BA6;
}

.nascondi {
  display: none;
}

.anim {
  animation: moving 0.8s linear reverse forwards;
}

.button_shake {
  display: inline-block;
  font-family: 'Berthold Akzidenz Grotesk', sans-serif;
  font-size: 20px;
  background-color: #F0ECE4;
  color: #212020;
  border: 0px;
  border-radius: 5px;
  padding: 20px;
  height: 83px;
  width: 100%;
  text-align: start;
}

.button_shake:hover {
  animation: shake 0.5s linear reverse forwards;
  transform: translate3d(0, 0, 0);
  background-color: #1E1E1E;
  color: #F0ECE4;
}

.button_shake_hover {
  animation: shake 0.5s linear reverse forwards;
  transform: translate3d(0, 0, 0);
  background-color: #1E1E1E;
  color: #F0ECE4;
}

.button_shake:active {
  background-color: #1E1E1E;
  color: #F0ECE4;
}

.img_container img {
  object-fit: contain;
  width: 100%;
  height: 360px;
  background-color: #F0ECE4;
  border-radius: 5px;
}

.img_container {
  max-height: 400px;
}

.domanda_container_1 {
  margin-top: 30px; 
  margin-bottom: 30px;
  width: 100%;
  height: 100px;
  object-fit: none;



}

.giusta {
  background-image: url('../img/immagine_quiz/icone_giusta.svg');
  background-repeat: no-repeat;
  background-position: 95%;
  object-fit: none;
}

.risultato_gusta {
  background-image: url('../img/immagine_quiz/icone_giusta_blu.svg');
  background-repeat: no-repeat;
  background-position: 95%;
  object-fit: none;
}


.sbagliata {
  background-image: url('../img/immagine_quiz/icon_sbaliato.svg');
  background-repeat: no-repeat;
  background-position: 95%;
  position: relative;
  justify-content: center;
}

#stato {
  font-size: 20px;
  color: #0A4BA6;
}



#button_home{
  background-color: #0A4BA6;
  width: 395px;
  height: 65px;
  border-radius: 5px;
  color: #FAF6EE;
  display: flex;
  position: absolute;
  bottom: 10%;
  cursor: pointer;
  animation: shadow-pulse 1s infinite;
}

#button_home2{
  background-color: #0A4BA6;
  width: 395px;
  height: 65px;
  border-radius: 5px;
  color: #FAF6EE;
  display: flex;
  position: absolute;
  bottom: 10%;
  cursor: pointer;
  animation: shadow-pulse 1s infinite;
 
}




.variabile {
  font-family: Akzi-regular;
    font-size: 35px;
    /**/
    color: #FFFCF6;
    padding-top: 8px;
    padding-left: 15px;

}

.variabile {
  background-image: url('../img/immagine_quiz/icon_freccia.png');
  background-repeat: no-repeat;
  background-position: 92%;
}

.variabile_2{
  background-image: url('../img/immagine_quiz/riprovare_icone.png');
  background-repeat: no-repeat;
  background-position: 92%;
  font-family: Akzi-regular;
    font-size: 35px;
    /**/
    color: #FFFCF6;
    padding-top: 8px;
    padding-left: 15px;
}




#esito_finale_icone {
  text-align: right;
  height: 400px;
  text-align: center;
  margin: auto;
  display: block;
}

.button_domande {
  padding-right: 0%;
}

/*yo*/
@media screen and (max-width: 991px){
  .button_domande {
    margin-top: 40px;

    text-align: center;
    
    margin-bottom: 30px;
  }

  #button_home, #button_home2{
    width: 300px;
  }
}

/*
@media only screen and (max-width: 768px) {

  .button_domande {


    margin-top: 40px;
    add some space between the image and the button container


    text-align: center;
    center the button container
  }
}
*/

/*yo chiudo*/


@keyframes shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes moving {
  0% {
    transform: scale(0);
  }

  10% {
    transform: scale(1);
  }

  50% {
    transform: scale(1);
  }

  100% {
    top: 50%;
    left: 50%;
  }
}

@media (min-width:1920px) {
  .container {
    max-width: 1400px;
  }
}

@media (min-width:1920px) {
  .img_container {
    margin-top: 0;
  }
}

@media (max-width: 767.98px) {
  .img_container img {

    object-fit: contain;
    width: 100%;
    height: 222px;
    background-color: #F0ECE4;
    border-radius: 5px;
  }
}

@media (max-width: 767.98px) {

  .buttoni {
    width: 100%;
    height: 48px;
    font-size: 20px;
    padding: 8px;
  }

  .img_container {
    max-height: 222px;
  }
}


@media (max-width: 767.98px) {
  .user-score {
    font-size: 20px;
  }
}

@media (max-width: 767.98px) {
  #esito_finale_icone {
    height: 300px;
    margin-top: -50px;
  }
}

@media (max-width: 767.98px) {
  #button_home {
    margin-top: 50px;

    
    
  }

  #button_home, #button_home2{
    width: 230px;
    width: 213px;
  }

  .variabile, .variabile_2{
    background-size: 14%;
  }
}


/*yo*/



/*cel*/
@media screen and (max-width: 480px){
  #button_home{
    background-color: #0A4BA6;
    width: 100%;
    height: 65px;

    /**/
    bottom: 5%;
    position: relative;
    margin-top: 8%;

    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-top: 3px;
  } 

  /*
  .variabile {
    
    padding-top: 11px;
    padding-left: 15px;

    padding: 8px 0px 8px 15px;
    

    padding: 8px 0px 8px 15px;

    padding: 5%;

  }
  */
  
  
}  

@media screen and (max-width: 480px){
  #button_home2{
    background-color: #0A4BA6;
    width: 95%;
    height: 65px;

    /**/
    bottom: 6%;
    position: relative;
    margin-top: 8%;

    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-top: 3px;
    

  } 

  #button_home{
    width: 95%;
  }

  .telefono_margini{
    padding: 0px;
    margin: 0px;
  }

  .variabile, .variabile_2{
    background-image: none;
  }

  .py-3{
    padding: 0px !important;
  }

  /*
  .variabile {
    
    padding-top: 11px;
    padding-left: 15px;

    padding: 8px 0px 8px 15px;
    

    padding: 8px 0px 8px 15px;

    padding: 5%;

  }
  */
  
  
}  



@media screen and (max-width: 430px){
  .variabile, .variabile_2 {
      font-size: 30px;

  }

  /*
  .variabile {
    background-image: url('../img/immagine_quiz/icon_freccia.png');
    background-repeat: no-repeat;
    background-position: 92%;
  }
  */

  .variabile_2 {
    background-size: 11%;
  }
  
}  

@media screen and (max-width: 430px){
  .variabile_2, .variabile {
      font-size: 30px;

  }

  /*
  .variabile {
    background-image: url('../img/immagine_quiz/icon_freccia.png');
    background-repeat: no-repeat;
    background-position: 92%;
  }
  */

  .variabile_2 {
    background-size: 11%;
  }
  
}  

@media screen and (max-width: 365px){
  .variabile, .variabile_2 {
      font-size: 25px;
      /*
      padding-top: 15px;
      padding-left: 15px;
      */
  }


  .variabile {
    background-size: 10%;
  }
}