@font-face {
    font-family: 'neff_sansregular';
    src: url('fonts/neffsansreg.woff2') format('woff2'),
         url('fonts/neffsansreg.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body  { 
        margin:0;
        padding:0;
        width:100%;
        height:100%;
        overflow:hidden;
        background-color: #000000;
        -webkit-user-select: none;  
        -moz-user-select: none;    
        -ms-user-select: none;      
        user-select: none;
        font-family: 'neff_sansregular';
      }

#main_box {
            position: absolute;
            width: 100vw; 
            height: 56.25vw; /* 100/56.25 = 1.778 */
            max-height: 100vh;
            max-width: 177.78vh; /* 16/9 = 1.778 */
            margin: auto;
            top:0; bottom:0; /* vertical center */
            left:0; right:0; /* horizontal center */
          }


video { position: absolute;
        top: 0;
        left: 0;
        width: 100%;  
      }

#cage { position: absolute;
        width: 80%;
        height: 80%;
        left: 10%;
        top: 10%;
        background-color: #500606d4;
        border-radius: 10px;
        color: #FFFFFF;
        z-index: 10000;
      }

#cage span {
              font-size: 2em;
              position: absolute;
              padding-top: 20%;
              width: 100%;
              text-align: center; 
            }


#main_video {  }


iframe { position: absolute;
         width: 100%;
         height: 100%;
       }

#loading { 
           position: absolute;
           top: 40%;
           left: 45%;
           width: 20%; 
           height: 20%;  
           background: url(../media/img/loader.svg);
           background-repeat: no-repeat;
           background-size: contain;
           opacity: .7;
         }


.btn {
       position: absolute; 
       opacity: 1;
       cursor: pointer;
       filter: drop-shadow(2px 2px 2px #222222AA);
       overflow:hidden;
     }


.btn:active { filter: drop-shadow(1px 1px 1px #222222AA); 
              transform: scale(.95);
              transition-duration: .2s;
              overflow:hidden;
            }

.disabled { display: none; }

.hide { opacity: 0;
        transition-duration: .3s;
      }

.show { opacity: 1;
        transition-duration: .3s;
      }

.btn_play { 
            top: 35%;
            left: 42.5%;
            width: 16.875%; 
            height: 30%; 
            background: url(../media/img/play.png);
            background-repeat: no-repeat;
            background-size: contain;
          }            

.btn_home { 
             top: 7%;
             left: 4%;
             width: 7%; 
             height: 7%; 
             background: url(../media/img/home.png);
             background-repeat: no-repeat;
             background-size: contain;
           }   

.btn_close { 
             top: 7%;
             right: 1%;
             width: 6%; 
             height: 6%; 
             background: url(../media/img/close.png);
             background-repeat: no-repeat;
             background-size: contain;
           }                       

.spot {
        position: absolute; 
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: contain;
      }


.scienzaTitle { position: absolute;
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 20%;
                height: 3.9%;
                text-align: center;
                color: white;
                font-size: 1.4vw;
                background-color: #C01323;
                letter-spacing: 1px;
              }


.scienzaTitle01 { 
                  left: 4.4%;
                  top: 81%;
                  height: 6%;
                }

.scienzaTitle02 { 
                  left: 60.5%;
                  top: 10.6%;
                }

.scienzaTitle03 { 
                  left: 66.5%;
                  top: 74%;
                  height: 6%;
                }

#cucchiaini { position: absolute;
              right:1%; 
              bottom: 1%;
              background: url(../media/img/cucchiaini.png);
              background-repeat: no-repeat;
              background-size: cover;
              width: 0%;
              height: 10%;
            }

#magia_01 { position: absolute;
            width: 24.3%;
            top: 5%;
            height: 88.5%;
            left: 8%;
       }

#magia_02 { position: absolute;
            width: 24.3%;
            top: 5%;
            height: 88.5%;
            left: 8%;
       }
#magia_01_btn_off { position: absolute;
                    width: 83.3%;
                    height: 5.3%;
                    left: 9.3%;
                    top: 76.5%;
                    background: url(../media/img/phone_avanti_off.png);
                    background-repeat: no-repeat;
                    background-size: cover;
                  }

#magia_01_go  { position: absolute;
                width: 81%;
                height: 5%;
                left: 10%;
                top: 76.5%;
                cursor: pointer;
           }

#magia_02_btn_off { position: absolute;
                    width: 83.3%;
                    height: 5.4%;
                    left: 9.3%;
                    top: 76.6%;
                    background: url(../media/img/phone_fatto_off.png);
                    background-repeat: no-repeat;
                    background-size: cover;
                  }

#magia_02_go  { position: absolute;
                width: 81%;
                height: 5%;
                left: 10%;
                top: 76.5%;
                cursor: pointer;
           }


.magia_cmd   {     position: absolute;
        width: 23.5%;
    height: 5%;
    cursor: pointer;
             }

.magia_cmd.plus  { top: 32%; }
.magia_cmd.minus { top: 51%; }
.magia_cmd.hour  { left: 14.9%; }
.magia_cmd.min   { left: 38.6%; }
.magia_cmd.sec   { left: 62.6%; }                                    

.magia_label { position: absolute;
               top: 37.4%;
               height: 13.2%;
               width: 23.5%;
               text-align: center;
               display: flex;
               flex-direction: column;
               justify-content: center;
               background-color: #FFFFFF;
               font-size: 1.2vw;
             }

.magia_label span { line-height: 4vh; }
.magia_label span:first-child { transform: scale(1,.85); color: #cccccc; }
.magia_label span:last-child { transform: scale(1,.85);  color: #cccccc; }


.magia_label.hour  { left: 16.3%; }
.magia_label.min   { left: 40.2%; }
.magia_label.sec   { left: 64.3%; }   


.magia_sel_back { position: absolute;
                  top: 24%;
                  left: 8.2%;
                  height: 14.7%;
                  width: 84%;
                  text-align: center;
                  background: url(../media/img/magia_sel_null.png);
                  background-repeat: no-repeat;
                  background-size: contain;
                }
.magia_sel { position: absolute;
             top: 23.8%;
             left: 7.8%;
             height: 4.7%;
             width: 85.5%;
             cursor: pointer;
           }
.first  { top: 23.8%; }
.second { top: 28.7%; }
.third  { top: 33.7%; }

#main_hover {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: url(../media/img/hover_scienza.png);
              background-repeat: no-repeat;
              background-size: contain;
            }