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%;
       width:100%;
   max-width:800px;
 }
 
 
 @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;
     }
 }