﻿/*****************
	copyright: www.SimonePomata.com
	code author: Simone Pomata
	2015 responsive version
*****************/

/* RESET */
* {margin: 0;padding: 0;}
/* a:hover, a:active, button:hover, button:active, input:hover, input:active  {outline:none;}*/ /* via bordo tratteggiato, non accessibile */

img{max-width:100%}

/************ varie classi da usare ***********/
.centro {margin:auto;text-align:center;}
.importante {text-align:center;font-weight:bold;}
.FloatBox {width:100%;overflow:auto;border:0;} /* resetta dopo div float */
a.NonSottolineato, a.NonSottolineato:hover, a.NonSottolineato:active {border-bottom:0px;}
.mBot{margin-bottom:15px} .mTop{margin-top:15px} .pBot{padding-top:15px} .pTop{padding-top:15px}
.mBot3{margin-bottom:3px} .mBot5{margin-bottom:5px} .mLeft20{margin-left:20px} .mTop5{margin-top:5px}
p.noMBot{margin-bottom:0}
.colore {color: #B80000;font-weight:bold;}
.ArtFigure {text-align:center;margin: 0px 0 15px;}
.ArtFigure .imgSingola{height:auto}		
li .ArtFigure {display:block;margin: 18px 0 15px -18px;}
.ArtFigure figcaption {	text-shadow:1px 1px 1px rgba(0,0,0,.7)}
.nascosto{display:none}
/* rollover semplice a 2 immagini */
.rolloverBase {display:inline-block}
.rolloverBase img~img{display:none} .rolloverBase img:first-child{display:block}
.rolloverBase:hover img:first-child{display:none} .rolloverBase:hover img~img{display:block}
.txtC{text-align:center}
.dB{display:block} .dIB{display:inline-block} .dI{display:inline}
.oDefault{opacity:.435; filter:alpha(opacity=43);}/*opacità tale che sul bianco è == al txt*/

/* slideshow jquery */
#slideshow div{display:inline-block;position:relative}
#slideshow {
	position:relative;
	margin-bottom:15px;
	text-align:center;
}
#slideshow IMG{
	max-width:100%;
	height:auto;
	position:relative
}
#slideshow IMG+IMG {   
	position:absolute;
	top:0;
	left:0;
	z-index:8;
	opacity:0.0;
}
#slideshow IMG.active {z-index:10;opacity:1.0;}
#slideshow IMG.last-active {z-index:9;}

/* foto grande in galleria */
#fotoGrande{text-align:center;margin: 0;}
#fotoGrande h1{margin-bottom:0;}
#fotoGrande a, #fotoGrande a:hover{border-bottom:0;}
#fotoGrande p{padding: 0px 35px 0px 35px;}
#fotoGrande .succ, #fotoGrande .prec{z-index:9999}
#fotoGrande .succ a, #fotoGrande .prec a {position:absolute;top:0;bottom:0;width:29%;padding:0 2%;height:auto;background-origin:border-box;}
#fotoGrande .succprecNasc a{opacity:0;transition: opacity .4s}
#fotoGrande .succprecNasc a:hover{opacity:1}
#fotoGrande .succ a {right:0;background:url(/images/succ.png) center right no-repeat content-box}
#fotoGrande .prec a {left:0;background:url(/images/prec.png) center left no-repeat content-box}
#fgImmFr { position:relative;overflow:visible;font-size:0px; margin-bottom:15px;display: inline-block;margin-left: auto;margin-right: auto;width: auto; }
#fgImmFr > div{display:inline-block;vertical-align:middle}
#laFoto{height:auto}

/* breadcrumb rich */
.breadcrumb{padding-left:6px;float:left;text-align:left;font-size:90%;}
{border-bottom:0px;}
.breadcrumb h1{display:inline;margin-left:5px}
.AutoreData{float:right;width:45%;text-align:right}
/* breadcrumb rich per gallery */
.breadcrumbgall{text-align:center;font-size:90%;margin-bottom:5px;}
.breadcrumb a, .breadcrumbgall a{border-bottom:1px dotted transparent;}
.breadcrumb a:hover,.breadcrumbgall a:hover{border-bottom-color:#b00}
.NextPrev{float:right;width:45%;text-align:left}
.precedente {float:left;display: block;height: 18px;border-bottom:0;margin-left:15px;width: 71px;background: url("/images/bottoni/precedente.jpg") no-repeat 0 0;}
.successiva {float:left;display: block;height: 18px;border-bottom:0;margin-left:15px;width: 73px;background: url("/images/bottoni/successiva.jpg") no-repeat 0 0;}
.precedente:hover, .successiva:hover{background-position: 0 -18px;border-bottom:0;}

/* div-table */
.ContCentro {
	margin-left:auto;
	margin-right:auto;
	width:90%;
	display:block;
}
.caption h2 {
	font-size: 14px;
	color: #B40404;
	padding-left: 0px;
	margin-bottom:4px;
}
.ContCentro div{
	border:1px #999 solid;
	padding:5px;
	float:left;
	width:100%;
	display:block;
	margin-bottom:15px;
	background: #111 url(/images/grana.png) repeat;
}
.ContCentro div div{
	margin:0px;
	border:none;
	width:48%;
	vertical-align:top;
}
.ContCentro div div.caption{width:98%;}

.social{width:auto;margin-top:11px;margin-bottom:-11px;text-align:center;}
.g-plusone table{border-spacing:0px;}

.miniature.nuoveFoto{margin:-2px 4px -1px 4px}
.miniature{font-size:0;margin:0 4px -6px 4px}
.miniature > div{display:inline-block;vertical-align:middle;width:25%;text-align:center;margin:12px 0 21px}
.miniatureTre > div{width:33.33%}
.miniature > div > a {display:inline-block}
.miniature > div > a > span{display:block;font-size:12px;padding-top:3px}
.miniature > div > a,.miniature > div > a:hover{border:none}
.miniature  > div > a:hover > img{border: 1px solid #363030}
.miniature > div > a > img{
	padding:2px;
	border-radius:3px;
	border: 1px solid transparent;
	transition: border .4s ease-out;
	-webkit-transition: border .4s ease-out;
	-moz-transition: border .4s ease-out;
	-o-transition: border .4s ease-out;
	position: relative;
	display:inline;
}

table {text-align:center;width : 100%;}

video{display:block;margin:0 auto; margin-bottom: 15px;max-width:100%;height:auto}

hr {
border: 0;
height: 2px;
background: rgb(77,77,77);
background:
	-webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 8%,rgba(0,0,0,1) 92%,rgba(0,0,0,0) 100%) left top,
	-webkit-linear-gradient(left, rgba(77,77,77,0) 0%,rgba(77,77,77,1) 8%,rgba(77,77,77,1) 92%,rgba(77,77,77,0) 100%) left bottom;
background:
	-moz-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 8%,rgba(0,0,0,1) 92%,rgba(0,0,0,0) 100%) left top,
	-moz-linear-gradient(left, rgba(77,77,77,0) 0%,rgba(77,77,77,1) 8%,rgba(77,77,77,1) 92%,rgba(77,77,77,0) 100%) left bottom;
background:
	-ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 8%,rgba(0,0,0,1) 92%,rgba(0,0,0,0) 100%)left top,
	-ms-linear-gradient(left, rgba(77,77,77,0) 0%,rgba(77,77,77,1) 8%,rgba(77,77,77,1) 92%,rgba(77,77,77,0) 100%) left bottom;
background:
	-o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 8%,rgba(0,0,0,1) 92%,rgba(0,0,0,0) 100%)left top,
	-o-linear-gradient(left, rgba(77,77,77,0) 0%,rgba(77,77,77,1) 8%,rgba(77,77,77,1) 92%,rgba(77,77,77,0) 100%) left bottom;
background:
	linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 8%,rgba(0,0,0,1) 92%,rgba(0,0,0,0) 100%)left top,
	linear-gradient(left, rgba(77,77,77,0) 0%,rgba(77,77,77,1) 8%,rgba(77,77,77,1) 92%,rgba(77,77,77,0) 100%) left bottom;
background-size:100% 50%;
background-repeat: no-repeat;}

header, footer, section, aside, nav, article {display: block;}

body {
	background: #111 url(/images/grana.png) repeat;
	color: #777;
	text-align: justify;
	font: 12px Arial, Helvetica, tahoma, verdana, 宋体, SimSun, 华文细黑, STXihei, sans-serif;
}
header,footer,img,hr{-webkit-user-select:none;-moz-user-select:none;user-select:none}
::selection {background:#f00;color:#fff}
::-moz-selection {background:#f00;color:#fff}
a, button, input[type="submit"], input[type="button"], input[type="reset"]{
	        transition: color .4s ease-out;
	-webkit-transition: color .4s ease-out;
	   -moz-transition: color .4s ease-out;
	     -o-transition: color .4s ease-out;
}

/* LAYOUT PRINCIPALE */
#main{ 
	width: 983px;
	margin: 0 auto;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	border-bottom: 1px solid #666;
	border-top: 1px solid #666;
	background: #111;
	overflow: hidden;
	padding: 20px 35px 5px 30px;
	position:relative
}
#wrapper {
	width: 1050px;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 20px;
}
header {
	width: 1050px;
	height: 145px;
	margin: 0 auto;
	background: #000 url(/images/header.jpg?1) no-repeat right top;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	position:relative;
	overflow:hidden
}
#logotxt{ position:absolute;top:4px;left:11px;width:445px;height:135px;background-image:url(/images/logotxt.png); }
footer {
	width: 1050px;
	margin: 0 auto;
	clear: both;
	text-align:center;
	background: #000 url(/images/grana.png) repeat;
	padding: 18px 0;
	overflow: hidden;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	box-shadow:0px 3px 8px rgba(0, 0, 0, 0.5);
}

/* SETTINGS */
h1,h2,h3,h4,h5,h6 {
	margin-bottom:15px;
	font-size: 16px;
	font-weight: bold;
	clear: both;
}
h2,h3 {padding-left: 6px;}

#main a {
	transition: border-bottom-color .4s ease-out;
	-moz-transition: border-bottom-color .4s ease-out;
	-webkit-transition: border-bottom-color .4s ease-out;
	-o-transition: border-bottom-color .4s ease-out;
	text-shadow:1px 1px 1px rgba(0,0,0,.5);
}
#main a:hover{text-shadow:1px 1px 1px #000, 2px 2px 1px rgba(0,0,0,.4);}
a {border-bottom: 1px dotted #FFC0C0;}
a:hover {border-bottom-color:transparent;}
a:link, a:visited {color:#F00; text-decoration: none;}
a:link:hover, a:link:active {color:#F00; text-decoration: none;}
article p {margin-bottom: 18px;}
article ul,ol{padding-left: 18px;}
article li{padding-left: 0px; margin:2px 0px;}
article center{margin: 0;}
article ul center{margin: 0px 0px 0px -18px;}

/** ARTICLE (MAIN) **/
h1.title {
	text-align: center;
	color: #D00;
	font-size: 16px;
	margin: 0px 0px 8px 5px;
	text-shadow:1px 1px 1px rgba(0,0,0,.85), 2px 2px 1px rgba(0,0,0,.2);
}
article img {border: none;}
ul.distanti li, ol.distanti li {margin: 6px 0px;}
#main.articolo h3 {font-size: 14px; font-weight:bold; margin-bottom:4px; padding-left:0}
#main.articolo .unaMail {font-style:italic}
#main.articolo aside{
	font-style: italic;
	margin: 0 12px;
	text-align:center
}
#main.articolo aside p{
	text-align:justify;
	display:inline-block;
	border-left: 2px solid;
	border-right: 2px solid;
	padding: 3px 15px 4px;
	border-radius: 7px;
}

.articleShare{min-height:54px}

.spYtVid{
	margin:0 auto 15px;
}.spYtVid>div{
	position: relative;
	padding-bottom: 56.25%; /*16:9 ...modificabile da bbcode */
	/*padding-top: 25px;*/ /*barra youtube*/
	height: 0;
}.spYtVid>div>iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* FOOTER */
footer a{color: #F00000;border-bottom:0px;font-style: italic}

/** NAV (MENU) */
a.navigato{color: #999;text-decoration: none;border-bottom: 0px ;}
a.navigato:hover {border-bottom: 0px ;}
#main_menu { margin: 0px auto; background: #060606 url(/images/grana.png) repeat; border-top: none; border-bottom: 0px solid #111;position:relative}
.group{padding-left: 0px;}
.group li{margin:0px 0px;}
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */
#example-one { margin: 0; list-style: none; position: relative; width: 1050px;text-align:left; }
html:not(.oneLang) #example-one,html:not(.oneLang) #resp-mm-wr{margin-right:110px}
#example-one li { display: inline-block; }
#example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 9px 1px 9px; text-decoration: none; text-transform: uppercase; }
#example-one li a:hover { color: white;-webkit-transition-delay:.4s;}
#example-one li a[href="/copyright/"], #resp-main-menu option[value="/copyright/"]{display:none}
#magic-line { position: absolute; bottom: -2px; left: 0px; width: 150px; height: 2px; background: #D00; z-index:1 }
.current_page_item a, .current_page_item_two a { color: white !important; }

#cambiaLingua{ display:block;position:absolute;right:7px;top:0;bottom:0 }
#cambiaLingua li{ display:inline-block }
#cambiaLingua li *{ transition:opacity .5s;width:26px;height:24px;margin:1px 2px;display:block;background-position:center center;background-repeat:no-repeat;border:none }
#cambiaLingua li a{ opacity:.4; }
#cambiaLingua li a:hover{ opacity:1;transition:opacity .05s; }
#cambiaLingua li .lang_it{ background-image:url( /images/icone/lang/it.png ) }
#cambiaLingua li .lang_en{ background-image:url( /images/icone/lang/en.png ) }
#cambiaLingua li .lang_zh{ background-image:url( /images/icone/lang/zh.png ) }

/** BOTTONE CSS (NON USARE PER LINK)*/
button, input[type="submit"], input[type="button"], input[type="reset"] {
	font-size: 11px;
	color: #d69494;
	padding: 2px 18px;
	background: -moz-linear-gradient(top,#75130e 0%,#540202);
	background: -webkit-gradient(linear, left top, left bottom,from(#75130e),to(#540202));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#75130e', EndColorStr='#540202'); /* IE6,IE7 */ 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#75130e', EndColorStr='#540202')"; /* IE8 */
	border: 1px solid #3d0202;
	-moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7);
	-webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7);
	text-shadow: 0px -1px 0px rgba(0,0,0,0.4), 0px 1px 0px rgba(0,0,0,0.3);
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {color: #fff;}

/*home*/
#homeFbBox{
	position:absolute;border:none; overflow:hidden; width:280px; height:72px;margin-left:-106px;top:6px;right:4.2%;
}

/* newsletter */
div.messaggioAttivo{
	background-color:#111111;
	margin-top:8px;
	padding:2px 15px 2px 15px;
	display:inline-block;
	border-radius: 4px;
}
.suggerimento{color:rgba(0,0,0,.7)}
input#newsletterMail{margin-left:10px;margin-right:3px;width:200px;}

/* biografia */
.bioFoto{
	padding:2px;
	border:4px solid #333;
	border-radius: 2px;
	box-sizing:border-box;
	height:auto;
	display:inline-block;
	font-size:0px;
	margin-bottom:4px
}
.bioFoto img.bfImg{
	height:auto
}

/* contatti */
.messaggioInviato, .erroreInvio {
	margin: 15px auto;
	font-weight: bold;
	padding-left:24px;
	background-repeat:no-repeat;
	background-position:left center;
	display:table;
}
.messaggioInviato {background-image:url('/images/icone/spunta.png')}
.erroreInvio {background-image:url('/images/icone/errore.png')}
form#contattami input, form#contattami textarea {box-sizing:border-box;max-width:100%;display:block;margin-left:auto;margin-right:auto;}
form#contattami input[type="submit"], form#contattami input[type="reset"] {display:inline}
form#contattami input[type="text"] {width:330px}
form#contattami textarea {width:430px;height:70px;padding:0 3px 0 3px;resize:vertical;max-height:240px}
form#contattami div.scosso {margin-bottom:15px}
form#contattami .ui-effects-wrapper {margin-bottom:15px}

.seguimi{
	background: url(/images/icone/social.png);
	position: relative;
	width: 22px;
	height: 22px;
	display: inline-block;
	margin:0;
	border:none;
}
.seguimi:hover,.seguimi:active{border:none;}
.invitoSocial .seguimi{vertical-align:middle;margin-left:10px}
.suYoutube{background-position:0px top;}
.suFacebook{background-position:-44px top;}
.suTwitter{background-position:-66px top;}
.suDeviantart{background-position:-22px top;}
.suGoogle{background-position:-88px top;}

/* footer fisso con bottoni social */
#fixedFooter {
	text-align:center;
	width:1048px;
	margin-left:-524px;
	position:fixed;
	bottom:0;
	left:50%;
	background:rgb(17,17,17);
	background:rgba(17,17,17,.9);
	height:26px;
	border-top:1px solid #111;
	box-shadow: 0px -3px 15px rgba(10, 10, 10, 0.75);
	z-index:9998;
}
#fixedFooter .chiudimi{
	width:22px;
	height:23px;
	cursor:pointer;
	background:url(/images/chiudi.png) no-repeat;
	position:absolute;
	top:-10px;
	left:-10px
}
.social.socialFixed{
	position:fixed;
	bottom:-3px;
	z-index:9999;
	width:350px;
	left:50%;
	margin-left:-178px;
	margin-bottom:0px
}

/* popup sociale facebook */
#popupSocialeWrapper {display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url(/images/opacity/0.5.png);margin:0; overflow-y:auto;z-index:99999}
#popupSociale {background-color: #fff; overflow:none;}
.popupSociale {width:302px; height:215px; position:fixed; top:42%; left:50%; margin-top:-130px; margin-left:-157px; border: 3px solid #999; padding: 3px;border-radius:8px;}
#popupSociale iframe{display:block;margin-left:auto;margin-right:auto}
#popupSociale .chiudimi {
	width:30px;
	height:30px;
	cursor:pointer;
	background:url(/images/chiudi2.png) no-repeat;
	position:absolute;
	top:-15px;
	right:-17px;
}

.unMezzo{width:50%} .unTerzo{width:33%} .unQuarto{width:25%}
.fl{float:left}.fr{float:right}
.flImg1{
	padding: 4px;
	border: 1px solid;
	margin: 0 10px 0 0;
	border-radius: 0px;
	float:left
}

#hatChr{background-size:100%;position: absolute;width:28px;height:19px;top:73px;left:325px;background-image:url(/images/hat.png);}

body{
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	position:relative
}

html{ -webkit-text-size-adjust: 100% }
body #wrapper { width:auto; margin-left:5%; margin-right:5% }
body header,body #main,body footer,body #example-one { width:auto }
body #fixedFooter{ width:auto;left:5%;right:5%;border-left:1px solid #999;border-right:1px solid #999;margin-left:0;border-top-right-radius:2px }

@media all and (min-width:1920px){
	body #fixedFooter{
		width: 1728px;
		box-sizing: border-box;
		margin: 0 auto;
	}
}

@media all and (max-width: 1150px){
	.miniature > div{width:33.33%}
	.miniature.nuoveFoto > div:last-child{display:none}
}
@media all and (max-width: 950px){
	body #wrapper{margin-left : 2%; margin-right: 2%}
	body #fixedFooter{left:2%;right:2%}
	#main{padding-left:12px;padding-right:12px}
	
	header{height:15.26vw;background-size:auto 100%}
	#logotxt {
		top: 0.4255vw;
		left: 1.1579vw;
		width: 46.4821vw;
		height: 14.2105vw;
		background-size:100%
	}
	#hatChr {
		width: 2.9474vw;
		height: 2vw;
		top: 7.6842vw;
		left: 34vw;
	}

	
}
#resp-main-menu{display:none;}
@media all and (max-width: 760px){
	.miniature > div{width:50%}
	.miniature.nuoveFoto > div:last-child{display:inline-block}
	#resp-main-menu{
		cursor: pointer;
		display:block;
		width:100%;
		box-sizing:border-box;
		background-color:#060606;
		background-image:url(/images/grana.png), url(/images/mobile-menu.png);
		background-repeat: repeat, no-repeat;
		background-position:center, 7px 4px;
		border-width: 1px 1px 0;
		border-color:#666;
		text-align:center;
		color: #bbb; font-size: 14px; display: block; padding: 4px 4px 3px 32px; text-decoration: none; text-transform: uppercase;
	}
	#resp-main-menu option.current_page_item{font-weight:bold;color:#e00}
	#example-one{display:none}
	#homeFbBox{
		position:relative;top:-4px;right:0;bottom:0;left:0;display:block;margin:0 auto 13px
	}
	
	#main.articolo .breadcrumb, #main.articolo .AutoreData{
		float:none;width:auto;text-align:center;padding:0
	}
	#main.articolo .breadcrumb{ margin:5px 0 13px }
	.ContCentro div div{ width:auto;float:none }
	.ContCentro div div+div+div{ padding-top:0;padding-bottom:0 }
	.ContCentro div div+div{ padding-bottom:0 }
	.ContCentro div div:last-child{ padding-bottom:5px }
	
	#fotoGrande p{padding: 0;}

}
@media all and (max-width: 600px){
	header{height:92px;background-image:none}
	#logotxt{top:0;left:0;right:0;bottom:0;width:auto;height:auto;background-image:url(/images/nomesito.png);background-position:center;background-size:85%;background-repeat:no-repeat}
	#hatChr {
		width: 100%;
		height: auto;
		background-repeat: no-repeat;
		background-size: 7.1%;
		top: -5vw;
		left: 0;
		background-position: 86.3% 50%;
		bottom: 0;
	}
	#resp-main-menu{border-top:none}
	#main_menu{border-top:1px solid #666; border-right:1px solid #666}
	html.oneLang #main_menu{border-right:0}
	#fotoGrande{margin-left:-6px;margin-right:-6px}
}
@media all and (max-width: 515px){
	body #wrapper{margin-left:0; margin-right:0; margin-top:0; margin-bottom:0}
	body #fixedFooter{left:0;right:0}
	.miniature > div{width:100%}
	#fotoGrande{margin-left:-8px;margin-right:-8px}
}
@media all and (max-width: 320px){
.social >div>div{ float:none;margin-bottom:3px; }
}
 
body .ui-widget-overlay{background:#111}
 
/* apps */
#appsPcForm, #appsPcRes1, #appsPcRes2{font-size:1.2em}
#appsPcRes1{ width: 100%;}
#appsPcRes1, #appsPcRes1 > div{ overflow:hidden}
#appsPcRes1 > div > div{float:left;width:49%;text-align:right}
#appsPcRes1 > div > div+div{text-align:left;float:right}

/* articoli */