body,html {
    background-color:#000; 
   color:#FFF;
   overflow-x:hidden;
   width:100vw;
 }
 
 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;
 }
 
 .container {
   padding: 0 50px !important; 
 }
 
 
 #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-right:0;
     padding-left:20%;
 }
 
 .elencolibri {
   background-color:rgba(0,0,0,.8);
   padding:25px 0 50px 25px;
 }
 
 
 .puntata {
     cursor:pointer; 
     line-height:120%;
       margin-top:25px;
 }
 
 .puntatamese {
     color:#ba162f;
       font-size:140%;
     margin-bottom:.5em;
 }
 
 .puntatatitolo {
     font-weight:700;
       font-size:1.4em;
     line-height:120%;
     letter-spacing:-.03em;
     margin-top:20px;
 }
 
 .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%;
   
 }
 
 
 .pianoopera td {
   padding-bottom:5px;
    vertical-align:top;
 }
 .pianoopera td.mese {
   padding-right:20px;
   min-width: 110px;
 }
 
 @media (max-width:576px) {
   
   .titolopianoopera {
     margin-left:-40px;
     margin-right:-40px;    
   }
   
   .pianoopera {
        font-size:90%; 
     margin-left:-40px;
     margin-right:-40px;
   }
   
   .box .copertinamedioevo {
        display:none; 
   }
   
    .box {
         padding:20px;
     margin-left:-40px;
     margin-right:-40px;     
    }
 }
 
 .logofacolta {
   height:150px;
   width:auto;
   float:right;
   margin-left:20px;
 }
 
 
 
 .box {
      border:1px solid #FFF; 
     background-color:rgba(255,255,255,.05);
 }
 
 
 @media (max-width:1200px) { 
 
     header .container {
       height:122px;
     }    
 }
   
   
 @media (max-width:768px) {
 
      h1 {
          font-size:7.5vw; 
     }
   
     header.scrolled .logoups {
       left: 10px;
     }
   
     header.scrolled #titolo {
       left: 100px;
       width: 200px;
     }
 }
 
 
 
 .dantebianco {
     position:fixed;
     top:10vh;
     /*bottom:-50px;*/
     /*left:-50px;*/
     right:65%;
     width:700px;
 }
 
 main .container {
     padding-left:350px !important;
 }
 
 footer {
     z-index:1000;
 }
 
 
 @media (max-width:1500px) {
     
     .dantebianco {
         right:65%;
         width:700px;
     }
     
     main .container {
         padding-left:27% !important;
     }
     
 }
 
 
 @media (max-width:992px) {
     
     .dantebianco {
         right:50%;
         width:600px;
     }
     
     main .container {
         padding-left:45% !important;
     }
 
     .logofacolta {
         position:relative;
         left:80px;
         margin-left:-80px;
     }	
     
 }
 
 @media (max-width:768px) {
     
     .dantebianco {
         left:-350px;
         width:600px;
         bottom:0;
         top:auto;
     }
     
     main .container {
         padding-left:150px !important;
     }
 
     .logofacolta {
         position:relative;
         left:80px;
         margin-left:-80px;
     }	
 }
 
 @media (max-width:500px) {
     
     .dantebianco {
         display:none;
     }
     
     main .container {
         padding-left:20px !important;
     }
 
     .logofacolta {
         display:none;
     }	
 }