body,html {
    overflow-x:hidden; 
    width:100vw;
   }
     
   body {
      background-color:#000; 
     color:#FFF;
   }
   
   nav,.navmobile {
    display:none; 
   }
   
   header.scrolled {
     background-color:#000;
   }
   
   .safaribrowser header.scrolled #titolo {
       display:none;
   }
   
   .logoups {
       -webkit-transition: ALL .3s ease-in;
       -moz-transition: ALL .3s ease-in;
       -o-transition: ALL .3s ease-in;
       transition: ALL .3s ease-in;  
   }
   
   .logoups .logo {
        height:100%; 
   }
   
   .leksa,h1,h2,h3,h4,h5,h6 { 
     font-family: "leksa",serif; 
   }
   
   h1,h2,h3,h4,h5,h6 {
     color:#FFF;
     margin:1em 0 .5em 0;
   }
   
   h1 {
    font-size:3em;
     line-height:100%;
   }
   
   
   section > h1 {
    margin-top:0; 
   }
   
   a { 
     color:#FFF;
     text-decoration:none;
   }
   
   a:hover { 
        transition: ALL .3s ease-in;
     text-decoration:none;
   }
   
   
   #monitor{
       position:fixed;
       top:20px;
       right:150px;
       width:auto;
       height:auto;
       color:#FFF;
       z-index:2000;
   }
   
   #fondale {
       position:fixed;
       top:100px;
       left:0;
       width:100%;
       transition: ALL 1s ease-out;
   }
   
   #fondale.inizio {
       opacity:1;
   }
   
   #fondale.medio {
       opacity:.3;
       filter: blur(4px);
   }
   
   #fondale.fine {
       opacity:.5;
       filter: blur(4px);
   }
   
   
   #titolo {
       position: absolute;
       bottom: -122px;
       left: 57px;
       width: 80vw;
       max-width: 650px;
       -webkit-transition: ALL .3s ease-in;
       -moz-transition: ALL .3s ease-in;
       -o-transition: ALL .3s ease-in;
       transition: ALL .3s ease-in;
   }
   
   header.scrolled #titolo {
       width: 250px;
       top: auto;
       bottom: 17px;
       left: 150px;
       -webkit-transition: ALL .3s ease-in;
       -moz-transition: ALL .3s ease-in;
       -o-transition: ALL .3s ease-in;
       transition: ALL .3s ease-in;
   }
   
   #dante {
       position:fixed;
       transition: ALL 1s ease-out;
   }
   
   #dante.inizio {
       top:80px;
       left:40%;
       width:30%;
   }
   
   #dante.medio {
       top:150px;
       left:-10%;
       width:60%;
   }
   
   #dante.fine {
       top:150px;
       left:-50%;
       width:100%;
   }
   
   
   
   #inferno {
       position:fixed;
       transition: ALL 2s ease-out;
   }
   
   #inferno.inizio {
       bottom:0;
       left:0;
       width:30%;
   }
   
   #inferno.medio {
       bottom:0;
       left:-7%;
       width:50%;
   }
   
   #inferno.fine {
       width:80%;
       left:-20%;
       bottom:-20%;
   }
   
   
   main {
    position:relative;
    width:100%;
    max-width:1400px;
    margin:350px auto 0 auto;
    z-index:900;
   }
     
   #introduzione {
       margin-left:50%;
   }
   
   #annodivino {
       margin-left:50%;
   }
   
   
   #campaldino {
   
       margin-left:50%;
   
   }
   
   #segnalazioni {
       margin-left:50%;
   }
   
   
   #dantebiblioteca {
       position:relative;
       margin-left:0;
       min-height:800px;
       z-index:1500;
   }
   
   
   #dantebiblioteca .container {
       padding-left:20%
   }
   
   .elencolibri {
     background-color:rgba(0,0,0,.8);
     padding:20px 0 50px 20px;
   }
   
   
   .puntata {
       cursor:pointer; 
       line-height:120%;
         margin-top:25px;
   }
   
   .puntatamese {
       color:#ba162f  
   }
   
   .puntata figure{
       margin: 0 0 .5em 0; 
   }
   
   .puntata:hover{
       opacity:.7;
       transition: ALL .3s easy;
   }
   
   .occhiello {
     color:#ba162f;
     font-weight:bold;
     margin-bottom:1em;
     border-bottom:1px solid #ba162f;
   }
   
   .elencolibri img {
     float:left;
     width:33%;
      margin-right:15px;
   }
   
   .librotitolo {
    font-weight:bold; 
   }
   
   .libropubblicazione {
    margin-top:1em
   }
     
   
   .summary {
       font-size: 1.3em;
       line-height: 150%;
       margin-bottom: 50px;
       font-weight: 300;
   }
   
   .testovideo {
      margin-top: 100px;
      font-size:1.1em;
      line-height:170%;
     
   }
   
   @media (max-width:1200px) { 
   
       header .container {
         height:122px;
       }    
   }
     
     
   @media (max-width:768px) {
   
        h1 {
            font-size:13vw; 
       }
     
       header.scrolled .logoups {
         left: 10px;
       }
     
       header.scrolled #titolo {
         left: 100px;
         width: 200px;
       }
   }