html, body { height: 100%; margin: 0; padding: 0; font-family: 'Poiret One', cursive;  }
body { height: 100%;  background-color: #000; color: #fff; }

/* LAYOUT */
nav.bg-dark { background-color: #000 !important;}
.menu { position: fixed; width: auto; top: 0; right: 0; left: 0; text-align: ; z-index: 1000; padding: 20px; text-transform: uppercase; background-color: #000;  }
/* .menu > div { width: 50%; margin-left: 50%; } */
.menu a { color: #aaa; font-size: 1rem; margin: 0px 20px; padding-bottom: 0px; letter-spacing: 2px; text-decoration: none; transition: all 0.2s ease-in-out; border-bottom: 1px solid transparent; }
.menu a:hover { color: #eee; border-bottom: 1px solid #444; }
.menu a.attivo { color: #eee !important; border-bottom: 1px solid #444 !important; }
.menu a.dropdown-item { margin: 0; }

.blocco { min-height: 100%; position:relative; }


.home-cx { width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

.h-100 { height: 100%; overflow: visible; position: relative; }
.h-60px  { height: 60px; }
.h-80px  { height: 80px; }
.h-100px { height:100px; }
.h-125px { height:125px; }
.h-150px { height:150px; }

.fixed { position: fixed; }

.h-100 { min-height: 100vh; }


.fx-fadein { opacity: 0; transition: all 0.5s ease-in-out;}
.fx-fadein-1 { opacity: 0; transition: all 1s ease-in-out;}
.fx-fadein-2 { opacity: 0; transition: all 2s ease-in-out;}
.fx-fadein-3 { opacity: 0; transition: all 3s ease-in-out;}
.fx-fadein-4 { opacity: 0; transition: all 4s ease-in-out;}
body.loaded .fx-fadein, body.loaded .fx-fadein-1, body.loaded .fx-fadein-2, body.loaded .fx-fadein-3, body.loaded .fx-fadein-4 { opacity: 1; }

.equal-space { display: flex; justify-content: space-between; }

.titolo { max-width: 600px; margin: 0 auto; padding: 0 20px; color: #aaa; }
.titolo h1 { text-align: center; margin: 0; padding: 0; letter-spacing: 20px; margin-right: -20px; }
.spaziatura { letter-spacing: 2px; }

.box1 { position: relative; width: 100%; background-color: #000; overflow: hidden; }
	.box1 img { opacity: 1; display: block; width: 100%; height: auto; transition: ease-in-out 0.5s; backface-visibility: hidden; }
	.box1 .m { transition: ease-in-out 0.5s; width: 95%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }
	.box1:hover img { opacity: 0.2; border-radius: 30px;  }
	.box1:hover .m { opacity: 1; }
	.box1 .t { transition: ease-in-out 0.5s; color: white; font-size: 1.5rem; opacity: 0; }
	.box1:hover .t { opacity: 1; }


/* STILE */
.navbar-brand { color: #fff !important; }
.nav-link { padding: 0 !important; }

.text-fx-1, .text-fx-2 { font-size: 2rem; color: #999; }

.text-size-1-1 { font-size: 1.1rem !important; }
.text-size-1-2 { font-size: 1.2rem !important; }
.text-size-1-3 { font-size: 1.3rem !important; }
.text-size-1-4 { font-size: 1.4rem !important; }
.text-size-1-5 { font-size: 1.5rem !important; }
.text-size-1-6 { font-size: 1.6rem !important; }
.text-size-1-8 { font-size: 1.8rem !important; }
.text-size-2-0 { font-size: 2.0rem !important; }

.centrato { position: relative; height: 100%; }
.centrato > div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  }

.sharing { text-align: center; }
.sharing a { font-size: 0.6rem; color: #666; }
.sharing a:hover { color: #aaa; }

.icone-grandi a { font-size: 1.5rem; color: #888; margin-right: 12px; }
.icone-grandi a:hover { color: #333; }

.btn-grey { background-color: #888; color:#000; padding: 0 5px; transition: all 0.3s ease-in-out; }
.btn-grey:hover { background-color: #333; color: #eee; }

.social-icons a { color: #aaa;  }
.social-icons a:hover { color: #fff; }

.music-container .btn-grey { border-radius: 0 !important; background-color: transparent !important; color: #999 !important; border: 1px solid #444; padding: 3px 8px !important;  }
.music-container .btn-grey:hover { background-color: #444 !important; color: #ccc !important; border: 1px solid #444;  }

.store-container .btn-dark { border-radius: 0 !important; background-color: #444 !important; color: #ccc !important; border: 1px solid #444; padding: 3px 8px !important;  }
.store-container .btn-dark:hover { background-color: #000 !important; color: #ccc !important; border: 1px solid #444;  }

footer { bottom: 0; padding: 3rem 0; background-color: #000; }


#read, #contact { color: #000000; }


@supports ( -webkit-touch-callout : none) {
	#read, #contact {
	background-attachment:scroll
	}
}

@supports not ( -webkit-touch-callout : none) {
	#read, #contact {
	background-attachment: fixed;
	}
}


/* RESPONSIVE AREA */
@media (max-width: 767px) {

	#read .home-dx { width: 100% !important; position: relative !important; }
	.home-dx { width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }


	#read {  background-image: none; background-color: #e5e5e5; color: #000; }
	#contact {  background-image: none; background-color: #e5e5e5; color: #000;  }
	
	.centrato > div { position: absolute; top: 50%; left: 0; right: 0; transform: translate(0%, -50%);  }
	.centrato > div.pscp { position: absolute; top: 50; left: 20%; right: 20%; transform: translate(0%, -50%); }
	
	.centrato > .social-icons { left: 25%; transform: translate(-12.5%, -50%); }

	.blocco.blocco-1 {  background-image: url("../media/bg-farian-1-cx.jpg"); background-size: cover; background-attachment: scroll; background-position: center 54px; }
	.blocco.blocco-2::after {
	  position: absolute; z-index: -1; content: ""; 
	  background-image: url("../media/bg-farian-2-cx.jpg"); background-size: cover; background-attachment: scroll; background-position: center top; 
	  opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0;	
	  }
	.blocco.blocco-3::after {
	  position: absolute; z-index: -1; content: ""; 
	  background-image: url("../media/bg-farian-3-cx.jpg"); background-size: cover; background-attachment: scroll; background-position: center top; 
	  opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0;	
	  }
	.blocco-2 .equal-space { color: #ccc; text-shadow: 0 0 2px rgba(0,0,0,0.6); }
	.blocco-3 a { letter-spacing: 0 !important; }

	.sfoglia { font-size: 0.7rem; }
	
	.fadein1 { opacity: 0; letter-spacing: 10px; }
	.fadein2 { opacity: 0; letter-spacing: 2px; }
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {

	#read .home-dx { width: 100% !important; position: relative !important; }
	.home-dx { width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
	.centrato > div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  }

	.blocco.blocco-1 {  background-image: url("../media/bg-farian-1-cx.jpg"); background-size: cover; background-attachment: scroll; background-position: center 54px; }
	.blocco.blocco-2 {  background-image: url("../media/bg-farian-2-cx.jpg"); background-size: cover; background-attachment: scroll; background-position: center top; }
	.blocco.blocco-3::after {
	  position: absolute; z-index: -1; content: ""; 
	  background-image: url("../media/bg-farian-3-cx.jpg"); background-size: cover; background-attachment: scroll; background-position: center top; 
	  opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0;	
	  }
	.sfoglia { font-size: 0.8rem; }
	  
	.text-fx-1, .text-fx-2 { font-size: 2.5rem; }
	.fadein1 { opacity: 0; letter-spacing: 15px; }
	.fadein2 { opacity: 0; letter-spacing: 5px; }
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
	
	.home-dx { width: 100%; position: relative; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

	.blocco.blocco-1 {  background-image: url("../media/bg-farian-1.jpg"); background-size: cover; background-attachment: fixed; background-position: left 54px; }
	.blocco.blocco-2 {  background-image: url("../media/bg-farian-2.jpg"); background-size: cover; background-attachment: fixed; background-position: left 54px; }
	.blocco.blocco-3 {  background-image: url("../media/bg-farian-3.jpg"); background-size: cover; background-attachment: fixed; background-position: left 54px; }

	.centrato > div { transform: translate(-50%, 150%); }

	.read-box { background-color: rgba(255,255,255,0.7); }

	.sfoglia { font-size: 1.0rem; }

	.text-fx-1, .text-fx-2 { font-size: 3.0rem; }
	.text-fx-2 { color: #333; }
	.fadein1 { opacity: 0; letter-spacing: 20px; }
	.fadein2 { opacity: 0; letter-spacing: 5px; }
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1399px) {
	.home-dx { width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

	.dropdown-menu { background-color: #000 !important; }
	.dropdown-item { background-color: #111 !important; }
	.dropdown-item:hover { background-color: #222 !important; }

	.blocco.blocco-1 {  background-image: url("../media/bg-farian-1.jpg"); background-size: cover; background-attachment: fixed; background-position: left 54px; }
	.blocco.blocco-2 {  background-image: url("../media/bg-farian-2.jpg"); background-size: cover; background-attachment: fixed; background-position: left 54px; }
	.blocco.blocco-3 {  background-image: url("../media/bg-farian-3.jpg"); background-size: cover; background-attachment: fixed; background-position: left 54px; }

	.read-box { background-color: rgba(255,255,255,0.7); }
	
	.text-fx-1, .text-fx-2 { font-size: 3.0rem; }
	.text-fx-2 { color: #333; }
	.fadein1 { opacity: 0; letter-spacing: 20px; }
	.fadein2 { opacity: 0; letter-spacing: 5px; }
}
/* Large devices (large desktops, 1400px and up) */
@media (min-width: 1400px)  {

	.home-dx { width: 60%; position: absolute; top: 0; bottom: 0; left: 40%; right: 0; margin: auto; }

	.dropdown-menu { background-color: #000 !important; }
	.dropdown-item { background-color: #111 !important; }
	.dropdown-item:hover { background-color: #222 !important; }
	
	.blocco.blocco-1 {  background-image: url("../media/bg-farian-1.jpg"); background-size: cover; background-attachment: fixed; background-position: left 54px; }
	.blocco.blocco-2 {  background-image: url("../media/bg-farian-2.jpg"); background-size: cover; background-attachment: fixed; background-position: left 54px; }
	.blocco.blocco-3 {  background-image: url("../media/bg-farian-3.jpg"); background-size: cover; background-attachment: fixed; background-position: left 54px; }
	
	.read-box { background-color: rgba(255,255,255,0.7); }

	.text-fx-1, .text-fx-2 { font-size: 3.0rem; }
	.text-fx-2 { color: #333; }
	.fadein1 { opacity: 0; letter-spacing: 20px; }
	.fadein2 { opacity: 0; letter-spacing: 5px; }
}