html {height:100%; margin:0;}
body {background-color: #FFFFFF; margin: 0; padding: 0; height: 100%; color: #000000;}

footer {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: rgba(255, 255, 255, 0.4);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 0.75em;
}

h2 {font-size: 1.3rem; margin-top: 1rem;}

#nav-cell {display: none;}

.navbar-nav {font-size: 1.5em;}

.container {width: 100%;}

.contenitore-video {height:100%;}

.nav-item {background-color: rgba(255, 255, 255, 0.4); border-radius: 12px 12px 0 0;}

.nav-link {padding:0 0.5rem;}

.selected-link1 {color:#f7ec07; padding:0 0.5rem; font-size: 1.1em;}
.selected-link2 {color:#d44799; padding:0 0.5rem; font-size: 1.1em;}
.selected-link3 {color:#ffffff; padding:0 0.5rem; font-size: 1.1em;}

.videofull, .videobg {position: fixed; left: 50%; top: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; background-size: cover; z-index: -10; transform:translate(-50%,-50%);}

#video-Player {width: 100%;}

.logo-ttpti {position: absolute; left: 40px; top: 50px;}
.logo-ttpti img {height: 80px;}

.logo-pane img {height: 30px; margin-top: 8px;}
.logo-ministero img {height: 40px;}
.logo-pol img {height: 40px;}

.fixed-bottom {bottom: 60px;}

.roboto-condensed-regular {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
  
#loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:block;
}

#muteButton {
    position: absolute;
    top: 50px;
    right: 70px;
    border: none; /* Rimuove il bordo del pulsante */
    background-color: transparent; /* Rende lo sfondo trasparente */
    padding: 5px; /* Aggiunge un po' di spazio intorno all'immagine */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
}

#muteButton img {
    width: 96px; /* Imposta la larghezza dell'immagine */
    height: auto; /* Mantiene il rapporto di aspetto dell'immagine */
}

.box-testo {
    background-color: rgba(255, 255, 255, .41);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-top: 50px;
    margin-bottom: 120px;
    padding: 24px;
}

.giustifica {justify-content: flex-end !important;}

@media screen and (max-width: 767.98px){
    #loader img {width: 50px;height: 50px;}
    #nav {display: none;}
    #nav-cell {display: block;}
    #nav-cell ul {margin-top: 12px;}

    .nav-item {background-color: transparent; border-radius: unset; border-bottom: 1px solid #353535; text-align: left; padding: 1rem;}

    .pvideo {padding: 0 !important; margin: 50px 0;}

    .giustifica {justify-content: center !important; margin-top: 12px;}
    .logo-ttpti {position: relative; text-align: center; width: 100%; margin-top: 20px; left: unset; top: unset;}
    .logo-ttpti img {max-width: 100%;}
    .logo-ttpti .claim-index {color: #000000}
    .logo-ttpti .claim-progetto {color: #000000}
    .logo-ttpti .claim-credits {color: #FFFFFF}
    .box-testo {width: 340px; margin: 20px auto;}

    footer {display: block !important; background-color: rgba(255, 255, 255, 1); text-align: center; font-size: 0.75em; position: relative; left: unset; bottom: unset;}

    #muteButton {position: absolute; top: 10px; right: 10px;}
    #muteButton img {width: 76px;}

    .videofull {position: relative; left: unset; top:unset; min-width: unset; min-height: unset; width: 100%; height: auto; background-size: cover; z-index: -10; transform:translate(0%,0%);}

    .container {max-width: 100%;}
}

@media screen and (min-width: 768px ) and (max-width: 790px) {
    .box-testo  {width: 320px; margin: 50px auto 120px;}
}