@font-face {
   font-family:"Tw";
   src: url("../font/atwriter.ttf");
}
@font-face {
   font-family:"OldTw";
   src: url("../font/oldnewspapertypes.ttf");
}
@font-face {
   font-family:"PDTitle";
   src: url("../font/pd_title.otf");
}
@font-face {
   font-family:"Argos";
   src: url("../font/argos_george_contour.ttf");
}

html::-webkit-scrollbar { width:0; background: black }
html::-webkit-scrollbar-thumb { background:#330202 }
html::-webkit-scrollbar-track { background:black }
::selection {
   color:#a52a2a;
   background: rgba(0,0,0,0.1);
}
::-moz-selection {
   color:#a52a2a;
   background: rgba(0,0,0,0.1);
}

body { 
   margin:auto; 
   padding:0; 
   height:50em;
   max-width:1920px;
   max-height:1080px;
   overflow:hidden;
   text-align:center;
   font-size:1vw; 
   font-family:"Tw","OldTw";
   letter-spacing:0.1em;
   background-color:black;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

select { 
   height:3em; 
   width:25em; 
   text-align:center; 
   font-family:"Tw"; 
   font-size:1em; 
   padding-left:1em;
   background-color:#f3dbb5; 
   border:1px solid black;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

#nav {
   width:100%;
   height: 2em;
   max-width:1920px;
   margin:auto;
   position:fixed;
   background-color: black;
   /*background-image:linear-gradient(#150000, #110000);*/
   z-index:4;
   font-size:100%;
   color:white;
   border-bottom: solid 1px #711717;
   box-shadow: 0px 1px 70px 35px black;
}

#nav td:last-of-type { text-align:right }


h1 {
   font-family: "PDTitle";
   display: block;
   color: black;
   filter: contrast(100%);
   text-align: left;
   font-size: 2.7em;
   margin: 0;
   font-weight: bold;
   position: absolute;
   margin-left: 0.5em;
}

#logo {
   margin: auto;
   width: 40em;
   padding-top: 6em;
}

#tabellacasi {
   filter:saturate(0.7);
}

#tabellacasi img:hover {
   opacity:1;
   animation:glitchTop 1s linear 0.3s infinite, glitchBotom 1s linear 2.2s infinite alternate;
}

#logo h1:first-of-type {
   animation:espansione 25s linear 3s infinite alternate;
}

#logo .seconda-linea {
   margin-top:1.4em;
   animation:espansione2 20s cubic-bezier(0.85, 1.11, 1, 0.99) 3s infinite alternate;
      
}

#logo img {
   position:relative;
   filter:contrast(2);
   margin-top:-1em;
}

#pulsanteMenu { 
   font-weight:bold;
   font-size:140%;
   line-height: 110%; 
   padding-right:3%;
   transition:2s;
   text-shadow: -15px 0 5px transparent, 15px 0 5px transparent;
}
#pulsanteMenu:hover {   
   color:red;
   text-shadow: 0 0 1px #8B4513, 0 0 1px #8B4513;
   text-decoration: bold;
   -webkit-transition: all 0.4s linear 0s;
   -moz-transition: all 0.4s linear 0s;
   -ms-transition: all 0.4s linear 0s;
   -o-transition: all 0.4s linear 0s;
   transition: all 0.4s linear 0s; 
}

#top10 {
    margin-top: 25em;
    width: 56%;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid black;
    padding: 1px;
    font-size: 80%;
    background-image: url(../img/newspaper.jpg);
    background-size: cover;
    background-position: revert;
}
#top10 th { background: rgba(0,0,0,0.1) }
#top10 tr:nth-child(odd) {background: rgba(0,0,0,0.1)}

iframe[name="responso"] { 
   height:2em; 
   width:30%; 
   border:none; 
   overflow:hidden;
   position:absolute;
   right:7em;
   top:75%;
}

#messaggio { 
   z-index:3;
   position:absolute; 
   top:3em;
   right:17.5em;
   left:17.5em;
   margin:0;
   padding:0;
   transition:1.5s;
   /*height:33em;*/
}

#messaggio_interno { 
   max-width:1920px;
   margin:auto;
   background-image:linear-gradient(#210101,#320606);
   color:white;
   text-align:center;
   box-shadow: 3px 5px 15px black;
   border:4px double #a52a2a;
   transition:1.5s;
}
#corvo, #corvo2 { 
   height:5em; 
   margin-bottom:-2% !important; 
   margin-right:0 !important; 
   margin-left:86% !important; 
}
#corvo2 { 
   height:7em;
   margin-bottom:0 !important; 
}
.deco_su { 
   height:3em;
   width:70%;
   margin-left:0;
   margin-right:0;
   margin-bottom:0;
}
.deco_su:first-of-type { transform:rotate(180deg) }
img[src="img/whiteline.png"], #messaggio[src="img/whiteline.png"] { width:22em }
img[src="img/deco_ang.svg"] { display:inline; height:4em }
img[src="img/deco_ang2.svg"],img[src="img/deco_ang22.svg"] { display:inline; height:10em; }
.ang_su {position:absolute; left:0; margin-top:5px; width:74%; margin-right:13%; margin-left:13%;}
.ang_giu { position:absolute; bottom:0; left:0; width:74%; margin-right:13%; margin-left:13%; }
.ang_supsx2 {
   position:absolute;
   top:7.2em;
   left:0;
   margin:0;
   transform:rotate(180deg);
}
.ang_supdx2 {
   position:absolute; 
   top:7.2em;
   right:0; 
   margin:0;
   transform:rotate(180deg);
}
.ang_infsx2 {
   position:absolute; 
   bottom:0; 
   left:0; 
   margin:0;
}
.ang_infdx2 {
   position:absolute; 
   bottom:0; 
   right:0; 
   margin:0;
}
.angoli {
   position: absolute;
   height: 6em;
}
#su_dx {
   margin-left: 42em;
   transform:rotate(90deg);
   top:4em;
}
#su_sx {
   top:4em;
   margin-left: -48em;
}
#giu_dx {
   top:17.6em;
   margin-top:27em;
   margin-left:42em;
   transform:rotate(-180deg);
}
#giu_sx {
   margin-top:-30em;
   margin-left:-48em;
   transform:rotate(-90deg);
}

#messaggio p { text-align:center; padding:2% }
#messaggio h3 { padding-top:2%; }

#principale {
  /* min-height: 37%; */
  box-shadow: inset -150px 0px 160px 0px #000000d9, inset 150px 0px 160px 0px #000000e0;
  height: 52em;
}

.in-arrivo {
  color:#5e5e5e;
  text-shadow:none !important;
  cursor:not-allowed;
}
.in-arrivo-img:hover {
  width:45% !important;
}

#avvertimentoRisoluzione { 
   display:none;
   z-index:7;
   position:absolute; 
   top:15em;
   right:9.5em;
   left:9.5em;
   margin:0;
   padding:0;
   animation:fadeIn 1s; 
   max-width:1920px;
   margin:auto;
   background-image:url("../img/newspaper.jpg");
   background-size:cover;
   background-position:revert;
   font-weight:bold;
   font-size:140%;
   text-align:center;
   color:black;
   box-shadow: 3px 5px 15px black;
   border:4px double #a52a2a;
   animation: fadeIn 1s;
   border-radius: 15px;
}
#avvertimentoRisoluzione h3 { 
   padding-top:1%; 
   color: black;
   font-weight: bold;
   margin: 0em;
   font-family: "Argos";
   font-size: 160%;
   color: #a52a2a;
}

#avvertimentoRisoluzione p { text-align:center; }

#macchia { 
   width:12em;
   position:absolute;
   top:2em;
   margin-left:40em;
   overflow:hidden;
}

#luce {
   pointer-events: none;
   position:absolute;
   top:0;
   width:100%;
   margin:auto;
   max-width:1920px;
   max-height:1080px;
   opacity:0.2;
   overflow:hidden;
   /* height: 50em; */
}

#banner {
  width: 32em;
  position:relative;
  margin: auto;
  top:-53.2em;
}

#atmosfera {
   width: 100%;
   margin: auto;
   position: absolute;
   top: 0;
   height: 56em;
   max-width: 1920px;
}

video {
   top:2em;
   width: 100%;
   height: 57em;
   position: absolute;
   left: 0;
   mix-blend-mode: multiply;
   max-width: 1920px;
   margin: auto;
   max-height: 54em;
}

#fumo {
   pointer-events: none;
   margin: auto;
   max-width: 1920px;
   max-height: 1080px;
   overflow: hidden;
   pointer-events: none;
   filter: contrast(4) invert(1) opacity(0.5);
   transform: rotate(180deg);
   height:57em;
   top:-2em;
}

#background_video {
   overflow: hidden;
   filter: sepia(25%) hue-rotate(-50deg) saturate(200%) contrast(3) opacity(0.5);
   height: 57em;
}

#deco_sx, #deco_dx {
   position:relative;
   top: -5em;
   width:5em;
   margin:0;
   padding:0;
   display:block;
}
#deco_sx { margin-left:94em; }
#deco_dx { top:-33.7em; margin-left:1em; }

#info { 
   clear:both;
   border-top: 1px solid red;
   background-image:linear-gradient(#320606, #210101); 
   min-height:13em; 
   padding-bottom:1em;
}

#overlay { 
   z-index:6;
   position: fixed; 
   display: none; 
   width: 100%; 
   height: 100%; 
   top: 0; 
   left: 0;
   right: 0;
   bottom: 0; 
   background-color: rgba(0,0,0,0.5);
}

header table { width:100%; empty-cells:show }
header table tr td { width:33% }

#tabellacasi {
   width:85em; 
   margin-right:auto;
   margin-left:auto; 
   height:15em;
   position:relative;
   top:-55em;
}

td img { width:45%; vertical-align:middle; position:relative; transition:0.3s; }
td img:hover { width:50%; }

td { transition:1s; text-shadow: 0px -15px 5px transparent, 0px 15px 5px transparent }
td:hover { text-shadow: 0 0 2px #8B4513, 0 0 2px #8B4513 }

#opening {
   background-color:black;
   position:absolute;
   height:100%;
   width:100%;
   top:0;
   left:0;
   opacity:1;
   transition:2s;
   transition-property:opacity;
}

#opening h1 {
   position: relative;
   font-family: "Tw";
   text-transform: uppercase;
   font-size: 2em;
   font-weight:normal;
   text-align: center;
   letter-spacing: 4px;
   overflow: hidden;
   background: linear-gradient(90deg, #000, #fff, #000);
   background-repeat: no-repeat;
   background-size: 80%;
   animation-delay:0.2s;
   animation: luccica 3s linear;
   animation-fill-mode: forwards;
   -webkit-background-clip: text;
   -webkit-text-fill-color: rgba(255, 255, 255, 0);
   position:relative;
   top:25%;
   left:0;
}

h2 { 
   font-weight:bold; 
   margin:0em; 
   color: rgba(255,255,255,0.7);
   text-shadow: 2px 1px 1px black;
   position:relative  
}

h3 { color:white; font-weight:bold; margin:0em; margin-bottom:0.5%; }

header a, a:visited { color:white; text-decoration:none }
#messaggio { 
   display:block;
   z-index:3;
   position:absolute; 
   top:3em;
   right:17.5em;
   left:17.5em;
   margin:0;
   padding:0;
   animation:fadeIn 1s;
   /*height:33em;*/
}

#messaggio_interno { 
   max-width:1920px;
   margin:auto;
   background-image:linear-gradient(#210101,#320606);
   color:white;
   text-align:center;
   box-shadow: 3px 5px 15px black;
   border:4px double #a52a2a;
   animation: fadeIn 1s;
}

#main {
   display:block;
   background-image: url(../img/title/background_desk.jpg);
   background-position:center;
   background-size:cover;
   transition: 0.5s;
   overflow: hidden;
}

p { margin-left:4em; margin-right:4em; margin-top:1.5em; text-align:justify; }

br { line-height: 200% }

span { font-size:110%; font-weight:bold; background:none; color:#a52a2a; }

#mobile {
   display:none;
}

#footer {
   position:relative;
   border-top:1px solid #711717;
   color:white;
   font-size:60%;
   padding-top:1%;
   padding-bottom:2%;
   background-color:black;
   box-shadow: 0px -5px 70px 35px black;
}
#footer p { text-align:center; display:inline; margin:1% }
#footer img { display:inline }

#pulsante_schermoIntero {
   position: absolute;
   top: 0.5em;
   left: 0.5em;
   z-index: 10;
   background: black;
   color: white;
   font-family: 'Tw';
   font-size: 0.8em;
   border: 1px solid grey;
   opacity:0.3;
   transition:0.5s;
}
#pulsante_schermoIntero:hover {
   opacity:1;
}
#pulsante_schermoIntero:focus {
   outline:none;
}

::-moz-selection {
   color: red;
   background: rgba(0,0,0,0.3);
}

::selection {
   color: red;
   background: rgba(0,0,0,0.3);
}

.input { 
   background-color:#f3dbb5; 
   width:7em; 
   height:1em; 
   text-align:center; 
   font-size:1em; 
   margin-top:1%;  
   border:1px solid #a52a2a 
}

form { margin:1% }

input[type="text"] {
   -webkit-touch-callout: text;
   -webkit-user-select: text;
   -khtml-user-select: text;
   -moz-user-select: text;
   -ms-user-select: text;
   user-select: text; 
}

.normal { 
   display:inline;
   margin-top:1%; 
   border:none; 
   padding:1%; 
   background-image:linear-gradient(#320606, #210101);
   font-family:"OldTW";
   font-size:1em;
   color:white;
   box-shadow: 1px 1px 5px black; 
   width:10em; 
}
.normal:hover { cursor:pointer; color:red; transition:1s; }

.goccia {
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
  margin-right:auto;
  margin-left:auto;
}
.goccia div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.goccia div:nth-child(2) {
  animation-delay: -0.5s;
}

button {
   display: block;
   background: black;
   color: white;
   padding: 1em;
   font-family: "Tw";
   font-size: 0.9em;
   line-height: 0.13;
   border: none;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0.5em;
}

input { 
   text-align:center; 
   font-family:Tw; 
   font-size:140%; 
   height:1.7em;
   background-color:#f3dbb5; 
   border:1px solid #a52a2a;
   width:10.4em;
}

#entraSubito {
   width: 10em;
   font-size: 100%;
   height: 4em;
}

#ruotaCaricamento {
   display:none;
   position: absolute;
   width:8em;
   top:21em;
   z-index:5;
   margin-left:-4em;
   -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#pulsante_schermoIntero, #pulsante_lingua, #selettore_lingua {
    position: absolute;
    top: 0em;
    left: 0.5em;
    z-index: 10;
    background: black;
    color: white;
    font-family: 'OldTw';
    font-size: 0.8em;
    border: 1px solid grey;
    opacity: 0.3;
    transition: 0.5s;
    padding: 0.7em;
}
#pulsante_schermoIntero:hover, #pulsante_lingua:hover {
   opacity:1;
}
#pulsante_schermoIntero:focus, #pulsante_lingua:focus {
   outline:none;
}
#selettore_lingua {
  display:none;
  left:6em;
}

#seriale {
  margin-left:auto;
  margin-right:auto;
}

.inactive {
  animation:none !important;
  margin-bottom:2em;
}

.inactive:hover {
  width:45%;
}

.inactive-case {
    animation:none !important;
    margin-bottom:2em;
    pointer-events: none;
    filter:grayscale(0.7);
}

#messaggio_interno {
    max-width: 1440px;
    margin: auto;
    background-image: url(../img/newspaper.jpg);
    background-size: cover;
    background-position: revert;
    text-align: center;
    color: black;
    box-shadow: 3px 5px 15px black;
    border: 4px double #a52a2a;
    animation: fadeIn 1s;
    border-radius: 15px;
}

#messaggio h3 {
    padding-top: 1%;
    color: black;
    font-weight: bold;
    margin: 0em;
    font-family: "Argos";
    font-size: 160%;
    color: #a52a2a;
}

#benvenuto_testo {
    letter-spacing: 0.2px;
    color: black;
    margin-left: 2em;
    margin-right: 2em;
    font-weight:bold;
    font-size:110%;
}

    .head-line {
    width: 50%;
    border-bottom: 2px solid black;
    margin: auto;
    height: 1px;
    border-top: 2px solid black;
    margin-top: 2px;
}

#benvenuto_testo {
    letter-spacing: 0.2px;
    color: black;
    margin-left: 2em;
    margin-right: 2em;
}

#contenitore_tabella {
    z-index: 6;
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

    @-ms-keyframes spin {
        from {
            -ms-transform: rotate(0deg);
        }

        to {
            -ms-transform: rotate(360deg);
        }
    }

    @-moz-keyframes spin {
        from {
            -moz-transform: rotate(0deg);
        }

        to {
            -moz-transform: rotate(360deg);
        }
    }

    @-webkit-keyframes spin {
        from {
            -webkit-transform: rotate(0deg);
        }

        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @keyframes lds-ripple {
        0% {
            top: 36px;
            left: 36px;
            width: 0;
            height: 0;
            opacity: 1;
        }

        100% {
            top: 0px;
            left: 0px;
            width: 72px;
            height: 72px;
            opacity: 0;
        }
    }

    @keyframes luccica {
        0% {
            background-position: -500%;
        }

        100% {
            background-position: 500%;
        }
    }

    @keyframes espansione {
        0% {
            margin-left: 0.5em;
            letter-spacing: 0em;
        }

        100% {
            margin-left: 0em;
            letter-spacing: 0.4em;
        }
    }

    @keyframes espansione2 {
        0% {
            margin-left: 0.5em;
            letter-spacing: 0em;
        }

        100% {
            margin-left: -0.6em;
            letter-spacing: 0.2em;
        }
    }

    @keyframes glitchTop {
        2%,64% {
            transform: translate(2px,-2px);
        }

        4%,60% {
            transform: translate(-2px,2px);
        }

        60.1% {
            opacity: 1;
        }

        60.2% {
            opacity: 0;
        }

        62% {
            opacity: 1;
            transform: translate(13px,-1px) skew(-03deg);
        }
    }

    @keyframes glitchBotom {
        2%,64% {
            transform: translate(-2px,0);
        }

        4%,60% {
            transform: translate(-2px,0);
        }

        61% {
            opacity: 1;
        }

        62% {
            opacity: 0;
            transform: translate(-22px,5px) skew(21deg);
        }

        62.1% {
            opacity: 1;
        }
    }

    @-webkit-keyframes vignette-anim {
        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: 0.7;
        }
    }

    @-moz-keyframes vignette-anim {
        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: 0.7;
        }
    }

    @-o-keyframes vignette-anim {
        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: 0.7;
        }
    }

    @keyframes vignette-anim {
        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: 0.7;
        }
    }

    @keyframes rotate {
        0% {
            transform: rotate3d(1, 0, 0, 47deg) rotate(0deg);
        }

        50% {
            transform: rotate3d(0, 1, 0, 47deg) rotate(180deg);
        }

        100% {
            transform: rotate3d(1, 0, 0, 47deg) rotate(360deg);
        }
    }

    @media screen and (min-width: 1925px) {
        body {
            font-size: 121%;
        }
    }

    @media screen and (orientation: portrait) {
        #nav {
            height: 3em;
        }

        #principale {
            margin-top: -2em;
        }

        #logo {
            margin-top: 5em
        }

        tr td {
            width: 30%;
        }

        #mobile {
            display: block
        }
    }

    body:after{
        display:block;
        opacity:0;
        content:"";
        background-image: url(../img/caso1.png?v=2), url(../img/caso2.png?v=2), url(../img/caso3.png?v=2), 
        url(../img/caso2_black.png), url(../img/caso3_black.png);
     }