@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700,900);

html, body { height:100%; }
body {
	margin:0px; padding:0px;
	font-family:'Source Sans Pro', sans-serif;
	font-weight:400;
	background-color:#000;
}
.bg-art-producer { background-color:#FFF!important; }
a { text-decoration:none; color:#808080; }
a:hover { color:#fff; }
ul, li { list-style:none; margin:0px; padding:0px; }


/* SCROLLBAR */

::-webkit-scrollbar {
    width:5px;
	height:0px;
}
 
::-webkit-scrollbar-track {
    background:#222; 
}
 
::-webkit-scrollbar-thumb {
    border-radius:2px; 
    background:#777;
	border:0px solid #222;
}

#menubar_mobile {
	display: none;
}

/* SCROLLBAR MENÚ OPERE */

.jspVerticalBar {
	left: 0;
}

.scroll-pane {
	width: 100%;
	height: 300px;
	overflow: auto;
}



.frame_top, .frame_bottom, .frame_left, .frame_right {
	background-color:#181818;
	position:absolute;
	z-index:1000;
}
.frame_top {
	top:0px; left:0px;
	width:100%;
	height:56px;
	/*z-index:1001;*/
}
.frame_bottom {
	bottom:0px; left:0px;
	width:100%;
	height:56px;
}
.frame_left {
	top:0px; left:0px;
	width:65px;
	height:100%;
}
.frame_right {
	top:0px; right:0px;
	width:65px;
	height:100%;
}




.head {
	position:absolute;
	top:20px;
	left:60px;
	min-width:500px;
	height:30px;
	font-weight:700;
	font-size:13px;
	text-transform:uppercase;
	letter-spacing:2px;
	z-index:20000;
}
.head-home {
	position:absolute;
	top:50%!important;
	left:60px;
	min-width:350px;
	height:30px;
	font-weight:700;
	font-size:15px;
	text-transform:uppercase;
	letter-spacing:2px;
	z-index:20000;
	margin-top:-10px;
}

.jb { color:#FFF; }
.jb2 { color:#000; }
.jb2:hover { color:#000; }
.titsez { color:#666; margin-left:4px; }


/* MENU */

#menu_container {
	position:fixed;
	top:0px;
	left:0px;
	height:100%;
	z-index:10000;
	width:0px;
	overflow:hidden;
}
.menu {
	display:block;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	position:absolute;
	top:0px;
	left:0px;
}
.mainmenu {
	display:block;
	/*width:100%;
	height:100%;*/
	position:absolute;
	top:0px;
	left:0px;
	z-index:10000;
}
.menu_open {
	position:fixed;
	display:block;
	top:20px; left:23px;
	width:26px; height:27px;
	background:url(../images/icons.png) top left;
	z-index:10000;
}
.menu_close {
	position:absolute;
	top:20px; left:23px;
	width:26px; height:27px;
	background:url(../images/icons.png) top right;
}
.menu_open:hover, .menu_close:hover { opacity:0.6; }
.first-menu {
	margin:70px 0px 0px 60px;
	font-size:12px;
	color:#666;
	line-height:16px;
	text-transform:uppercase;
	min-width:400px;
	letter-spacing:1px;
}
.second-menu {
	margin:12px 0px 0px 60px;
	font-size:11px;
	color:#666;
	line-height:16px;
	letter-spacing:1px;
}
.over { color:#fff; }
.black .over, .black a:hover { color:#000; font-weight:400; }


#shadow {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:rgba(20,20,20,0.75);
	z-index:1000000;
	display:none;
}
#boxcontainer {
	display:block;
	width:700px;
	height:500px;
	position:fixed;
	z-index:1000000000;
	top:-400px;
	left:50%;
	margin:-250px 0px 0px -350px;
	background:url(../images/bg_newsletter.jpg) right bottom no-repeat #000;
}
.box-newsletter, .box-press, .box-credits {
	display:none;
	margin:45px 0px 0px 50px;
	font-weight:300;
	font-size:16px;
	line-height:20px;
	color:#FFF;
}
.boxclose {
	display:block;
	width:34px;
	height:34px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-260px 0px 0px 325px;
	background:url(../images/close.gif) top left no-repeat;
}
.boxclose:hover {
	background:url(../images/close.gif) top right no-repeat;
}
.boxtit {
	font-weight:200;
	font-size:34px;
	line-height:32px;
	color:#fff;
	text-transform:uppercase;
	display:block;
}
.boxname {
	font-weight:700;
	font-size:14px;
	line-height:20px;
	letter-spacing:2px;
	color:#ccc;
	display:block;
	text-transform:uppercase;
}
.boxintro {
	display:block;
	margin:10px 0px 20px 0px;
}
.mc-field-group label {
	display:block;
	text-transform:uppercase;
	font-size:12px;
	letter-spacing:1px;
	font-weight:400;
	padding:6px 0px 2px 0px;
}
.mc-field-group input {
	display:block;
	background-color:#000;
	border:1px solid #555;
	color:#fff;
	font-size:16px;
	line-height:20px;
	padding:5px 6px;
}
input.button {
	background-color:#666;
	color:#fff;
	border:0px;
	font-size:13px;
	letter-spacing:2px;
	padding:10px 20px;
	text-transform:uppercase;
	margin-top:25px;
}
input.button:hover {
	background-color:#fff;
	color:#000;
}

.credits {
	display:block;
	position:absolute;
	bottom:25px;
	left:60px;
	z-index:1000000;
	font-size:11px;
	font-weight:400;
	letter-spacing:1px;
	color:#666;
}
.credits-link {
	font-weight:600;
	line-height:20px;
	color:#fff;
}
.credits-link:hover {
	color:#FFC;
}

/* HOME */

#image {
	position:absolute;
	width:100%;
	height:100%;
	background:url(../images/demo_fotohome_1.jpg) 50% 50%;
	background-size:cover;
}

#slideshow div {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
	width:100%;
	height:100%;
}

#slideshow div.active {
    z-index:10;
    opacity:1.0;
}

#slideshow div.last-active {
    z-index:9;
}


.news-container		{ display:block; position:fixed; z-index:2000; color:#ccc; left:0px; bottom:40px; background-color:rgba(0,0,0,0.3); width:49%; padding:15px 0px 25px 0px; }
.news-container-2	{ display:block; position:fixed; z-index:2000; color:#ccc; left:50%; bottom:40px; background-color:rgba(0,0,0,0.3); width:50%; padding:15px 0px 25px 0px; }
.news-container:hover, .news-container-2:hover { background-color:#fff; color:#333; }

.news-content		{ display:block; padding-left:60px; }
.news-content h2	{ padding:0px; margin:0px; font-weight:300; font-size:36px; }
.news-luogo			{ display:block; font-size:16px; line-height:16px; font-weight:700; }
.news-luogo-sub		{ font-size:14px; }
.news-data			{ display:block; font-size:18px; padding-top:5px; }
.news-more			{ display:block; font-size:12px; font-weight:900; padding-top:8px; }


/* ART PRODUCER */

.container {
	width:100%;
	height:100%;
	overflow:hidden;
	position:absolute;
	z-index:1000;
}
ul#intervista {
	height:100%;
	top:0px;
	left:0px;
	position:absolute;
}
ul#intervista li {
	width:50%;
	height:100%;
	float:left;
}
ul#intervista li.txt .box {
	top:250px;
	margin-left:60px;
	margin-top:240px;
	width:73%;
}
.ques {
	color:#000;
	font-weight:400;
	font-size:18px;
	line-height:20px;
	margin-bottom:20px;
}
.answ {
	color:#000;
	font-weight:300;
	font-size:20px;
	line-height:22px;
}
ul#intervista li.foto {
	background-size:cover;
}
ul#fotografie {
	height:100%;
	top:0px;
	left:350px;
	position:fixed;
	z-index:1;
}
ul#fotografie li {
	width:50%;
	height:100%;
	float:left;
}
ul#fotografie li {
	background-size:cover;
}
.video { background-color:#000; z-index:2000000; }

.art1 { background:url(../images/jaderbonfiglioli-artproducer-1.jpg) 50% 50%; }
.art2 { background:url(../images/jaderbonfiglioli-artproducer-2.jpg) top right; }
.art3 { background:url(../images/jaderbonfiglioli-artproducer-3.jpg) top center; }
.art4 { background:url(../images/jaderbonfiglioli-artproducer-4.jpg) 50% 50%; }
.art5 { background:url(../images/jaderbonfiglioli-artproducer-5.jpg) top center; }
.art6 { background:url(../images/jaderbonfiglioli-artproducer-6.jpg) top right; }
.art7 { background:url(../images/jaderbonfiglioli-artproducer-7.jpg) top right; }
.art8 { background:url(../images/jaderbonfiglioli-artproducer-8.jpg) top right; }
.art9 { background:url(../images/jaderbonfiglioli-artproducer-9.jpg) top right; }
.art10 { background:url(../images/jaderbonfiglioli-artproducer-10.jpg) top right; }
.art11 { background:url(../images/jaderbonfiglioli-artproducer-11.jpg) top right; }

.prev, .next {
    display:none;
	width:54px;
	height:60px;
	position:fixed;
	z-index:30000;
}

.prev { top:50%; left:350px; margin-top:-23px; background:url(../images/arrows.png) left 50% no-repeat #000; }
.next { top:50%; right:0px; margin-top:-23px; background:url(../images/arrows.png) right 50% no-repeat #000; }
.prev:hover, .next:hover { background-color:#fff; }

/* OPERE */



/* MENU ELENCO OPERE */

.bot_menu_elenco {
	display:none;
	bottom: 15px;
	left: 60px;
	z-index: 40000;
	position: fixed;
	font-size: 12px;
	padding: 6px 14px;
	background-color: white;
	border-radius: 16px;
	color: #333;
}
.bot_menu_elenco:hover {
	color:#000;
	background-color:#888;
}

.container_elenco {
	width:245px;
	height:300px;
	overflow:auto;
	position:absolute;
	top:240px;
	left:35px;
	z-index:40000;
	
	/*direction: rtl;
	text-align: left;
	padding-left: 6px;*/
	
	-webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
}
#elenco {
	position:absolute;
	font-size:12px;
	font-weight:400;
	line-height:16px;
	z-index:30000;
	text-transform:uppercase;
	top:-12px;
	width:220px;
	
	-webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
}



/*.container_elenco::-webkit-scrollbar {
    width: 5px;
	height: 0px;
	display: none;
} 
.container_elenco::-webkit-scrollbar-thumb {
    border-radius:2px; 
    background:#777;
	border:0px solid #222;
}*/


#elenco .tit {
	margin-top:12px;
	display:block;
	color:#fff;
}

#preview, .container_opera {
	position:absolute;
	/*top:50%;
	left:50%;
	margin-left:-460px;*/
	height:650px;
	width:920px;
	overflow:hidden;
}
#primefoto {
	width:920px; height:650px; overflow:hidden;
	position:absolute;top:0px;left:0px;
}
#preview li, #primefoto li {
	position:absolute;
	top:0px;
	left:0px;
	width:920px;
	height:650px;
	background-size:contain;
	opacity:0;
}
#preview li {
}
#primefoto li {
}


/* OPERA */

.container_opera {
	background-color:#000;
}
#opera {
	position:absolute;
	top:0px;
	left:0px;
}
#opera li {
	float:left;
	width:920px;
	height:650px;
	background-size:cover;
}
.foto-opera-2, .foto-opera-4 {
	background:url(../opere/2/foto2.jpg) 50% 50% no-repeat;
	
}
.foto-opera-3 {
	background:url(../opere/2/foto3.jpg) 50% 50% no-repeat;
}
.container_presentazione {
	background-color:rgba(45,45,45,0.9);
	width:100%;
	height:100%;
	position:absolute;
	z-index:2;
	display:none;
	
}
.presentazione {
    display:block;
	position:absolute;
	top:220px;
	left:60px;
	font-weight:200;
	font-size:32px;
	line-height:32px;
	color:#888;
	width:90%;
    overflow:auto;
    padding-right:20px;
	padding-bottom:10px;
}
.container_nome {
	position:fixed;
	bottom:90px;
	left:60px;
	z-index:40000;
	line-height:17px;
	display:none;
}
.container_nome .nome {
	color:#FFF;
	font-weight:700;
	font-size:15px;
	text-transform:uppercase;
	display:block;
	width:400px;
}
.container_nome .dida {
	color:#666;
	font-size:12px;
	text-transform:uppercase;
	display:block;
	width:400px;
}

.arrowLeftOpera {
	display:none;
	width:27px; height:27px;
	position:fixed;
	bottom:15px; left:50%;
	background:url(../images/arrows_opere.gif) top left no-repeat;
	margin-left:-127px;
	z-index:100000000;
	opacity:0.2;
	filter:alpha(opacity=20);
}
.arrowRightOpera {
	display:none;
	width:27px; height:27px;
	position:fixed;
	bottom:15px; left:50%;
	background:url(../images/arrows_opere.gif) top right no-repeat;
	margin-left:100px;
	z-index:100000000;
	opacity:0.2;
	filter:alpha(opacity=20);
}
.arrowLeftOpera:hover, .arrowRightOpera:hover {
	opacity:1;
	filter:alpha(opacity=100);

}

/* DOTS OPERA */

ul#dots {
	width:auto;
	height:20px;
	position:fixed;
	bottom:20px;
	left:50%;
	z-index:100000;
	display:none;
}
ul#dots li { float:left; width:20px; height:20px; margin:0px 2px; }
ul#dots li a { display:block; width:20px; height:20px; background:url(../images/dot.png) top right no-repeat; opacity:0.4; }
ul#dots li a:hover { opacity:1; }
ul#dots li a.acceso { background:url(../images/dot.png) top left no-repeat; opacity:1; }

.bot-interview {
    text-transform:uppercase;
    font-size:16px;
    letter-spacing:2px;
    background-color:#ccc;
    color:#FFF;
    padding:15px 30px;
    position:absolute;
    top:50%;
    left:60px;
    margin-top:-30px;
}
.bot-interview:hover {
    background-color:#000;
}


/*@media only screen and (max-width: 980px) {

	.presentazione {
        font-size:24px;
        line-height:24px;
        font-weight:300;
    }
    .answ {
        font-size:16px;
        line-height:19px;
    }
}*/

@media only screen and (max-width: 1024px), (max-height: 800px) {
    
    .presentazione {
        font-size:24px;
        line-height:24px;
        font-weight:300;
    }
    .answ {
        font-size:16px;
        line-height:19px;
    }
}

/* MODULO RICHIESTA INFORMAZIONI */

.bg_contatto {
	position:absolute;
	top:0px;left:0px;
	width:100%;height:100%;
	background:url(../images/bg_contatto.jpg) 50% 50%;
	background-size:cover;
}
#form {
	display:block;
	margin-top:50px;
	margin-left:50px;
	color: #FFF;
}
#form input {
	width:350px;
}
#form .campo {
	background-color:rgba(0,0,0,0.3);
}
#form textarea {
	display:block;
	border:1px solid #555 !important;
	width:350px;
	height:60px;
	margin-bottom:4px;
	background-color:rgba(0,0,0,0.3);
	width:350px;
	color: white;
	font-size: 16px;
	line-height: 20px;
	padding: 5px 6px;
}
#form .button {
	width: 180px;
	cursor:pointer;
}

@media only screen and (max-width: 640px) {
	.container_nome, .head, .frame_top, .frame_bottom { display:none!important; }
	.presentazione { left:5%; width:80%; top: 50px!important; }
	div.container_opera { top:0px!important; height:100%!important; }
	#opera, #opera > li.foto1, #opera > li.foto2, #opera > li.foto3, #opera > li.foto4, #opera > li.foto5, #opera > li.foto6 { height:100%!important }
}