/* foglio di stile dante - un anno in divina compagnia */
body {
   background-color:#000; 
  color:#FFF;
}

.logofacolta {
  height: 150px;
  width: auto;
}

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:120%;
}


section > h1 {
 margin-top:0; 
}

a { 
  color:#FFF;
  text-decoration:none;
}

a:hover { 
	 transition: ALL .3s ease-in;
  text-decoration:none;
}


.titoloserie {
  font-family: "leksa",serif; 
  font-size:2.5em;
  line-height:130%;
  margin-bottom:2em;
  margin-top:10em;
  border-bottom:1px solid #FFF;
}

.meseserie {
  font-family: "leksa",serif; 
  font-size:2em;
  margin-top:1em;
  margin-bottom:.5em;
  color:#ba162f 
}

#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 {
  width:100%;
  max-width:800px;
   margin-top: 100px;
   font-size:1.1em;
   line-height:170%;
   
}

.testovideo p {
 text-indent:0;
}

.testovideo blockquote {
  font-family: "leksa",serif; 
 margin:1em 2em 1em 5em;
  font-size:120%;
  line-height:150%;
  color:#e8dca5;
}


@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;
    }

    .titoloserie {
     	font-size:6vw;       
    }
  
  	.meseserie {
     	font-size:5.5vw;       
    }
  
  .testovideo blockquote {
     margin:1em 1em 1em 2em;
  }
}