@import "reset.css";


body{
	margin:0;
	padding:0;
	background: url("../imgs/generali/bg.jpg") repeat-y center;
	font-family: 'PT Sans', sans-serif;
	position:relative;
}
h3{
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight: 700;
	font-size: 25px;
	margin-top:0;
}
strong{
	font-weight: bolder;
}



/*/ --- CONTAINER --- /*/
#container{
	width:996px;
	margin:0 auto;
}



/*/ ---GENERALI --- /*/
.clear{
	clear:both;
}
.pattern{
	margin:44px 0 40px 0;
	float:right;
}
.bgMiro{
	position:absolute;
	top:0px;
	left:50%;
	background: url(../imgs/slide1/bg.jpg) no-repeat;
	min-width:50%;
	min-height:770px;
	z-index: -1;
}
.bgPicasso{
	position:absolute;
	top:1490px;
	left:50%;
	background: url(../imgs/slide2/bg.jpg) no-repeat;
	min-width:50%;
	min-height:770px;
	z-index: -1;
}
.linea{
	min-width:100%;
	min-height: 1px;
	background: url("../imgs/generali/linea.png") center center no-repeat;
}
.border{
	margin:20px 0;
	min-height:1px;
	width:100%;
	border-bottom:1px solid #777;
}
.titleArtista{
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight: 700;
	font-size: 20px;
}
.crenatura{
	letter-spacing:5px;
}
.floatL{
	float:left !important;
}
.floatR{
	float:right !important;
}



/*/ --- HEADER --- /*/
#header{
	width:100%;
	margin:0px auto;
	height: 190px;
}
.logo{
	width:50%;
	float:left;
	padding-top:60px;
	padding-bottom:30px;
	position:relative;
}
.lang{
	position:absolute;
	right:5;
	top:0;
	background: #000000;
	color:#FFFFFF;
	padding:5px;
	font-size: 10px;
}
.lang a{
	text-decoration: none;
	color:#FFFFFF;
}
.menu{
	position:relative;
	width:50%;
	float:left;
}
.menuItem{
	width:100px;
	color:#ddd;
	cursor: pointer;
}
.menu ul{
	float:right;
}
.miro, .picasso{
	cursor: pointer;
}



/*/ --- EFFETTO HOVER MENU --- /*/
.menu .ch-grid li {
	margin: 20px 10px !important;;
	width: 150px;
	height: 150px;
	display: inline-block;
}
.menu .ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow: 
		inset 0 0 0 0 rgba(0,0,0, 0.5),
		inset 0 0 0 10px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
		
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.menu .ch-img-1 { 
	background: url(../imgs/header/miro.jpg) center center;
}
.menu .ch-img-2 { 
	background: url(../imgs/header/picasso.jpg) center center;
}
.menu .ch-info {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	opacity: 0;
	text-align:center;
	
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	
	-webkit-backface-visibility: hidden; /*for a smooth font */
}
.menu .ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	position: relative;
	letter-spacing: 2px;
	font-size: 16px;
	margin: 57px 0;
	height: 50px;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}
.menu .ch-item:hover {
	box-shadow: 
		inset 0 0 0 110px rgba(0,0,0,0.7),
		inset 0 0 0 15px rgba(255,255,255,0.8),
		0 1px 2px rgba(0,0,0,0.1);
}
.menu .ch-item:hover .ch-info {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);	
}



/*/ --- CLASSI COMUNI PER PRODOTTI --- /*/
.colonna1{
	position:relative;
	width:50%;
	padding:44px 0 30px 0;
	color: #999;
	float:left;
}
header{
	text-transform: uppercase;
	line-height: 30px;
}
.colonna1 .text3{
	position:relative;
	margin-top:20px;
}
.colonna1 .text3 img{
	float:left;
}
.colonna1 .text3 div{
	margin-left:10px;
	width:175px;
	float:left;
	height: 35px;
	line-height: 35px;
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight: 700;
	font-size:14px;
	color:#000;
	letter-spacing: 2px;
}
.text3 .linkInfo{
	cursor:pointer;
	font-size:12px !important;
	position:absolute;
	width:3000px !important;
	right:0;
	background: #000000;
	margin-top: 60px;
	margin-right:30px;
	color:#FFFFFF !important;
}
.text3 .linkInfo span{
	padding-right: 10px;
}
.colonna2{
	position:relative;
	width:50%;
	padding:44px 0 30px 0;
	color: #FFF;
	float:left;
	margin-left:-1px;
}
.colonna2 h3{
	margin-left:0px;
	height:44px;
	line-height:44px;
	padding-left:100px;
	background: #FFF;
	color: #000;
}
.colonna2 .text2{
	padding:0 0px 0 100px;
	font-size: 14px;
	line-height: 20px;
	color:#FEFEFE;
}



/*/ --- MAGGIO 1968 --- /*/
#slide1{
	position:relative;
	width:100%;
	margin:0px auto;
	height: 1250px;
}
#slide1 .colonna1 .text2{
	margin-top:510px;
	padding:0 100px 0 0;
	font-size:16px;
	line-height: 20px;
	color:#000;
}
#slide1 .img1{
	position:absolute;
	top:175px;
	right:100px;
}



/*/ --- LE PEINTRE ET SON MODELE' --- /*/
#slide2{
	position:relative;
	width:100%;
	margin:0px auto;
	height: 1110px;
}
#slide2 .colonna1 .text2{
	margin-top:390px;
	padding:0 100px 0 0;
	font-size:16px;
	line-height: 20px;
	color:#000;
}
#slide2 .img1{
	position:absolute;
	top:145px;
	right:25px;
}




/*/ --- EFFETTO HOVER PATTERN --- /*/
.containerPattern{
	padding: 44px 0 30px 100px;
}
.containerPattern .ch-grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	width: 100%;
}
.containerPattern .ch-grid:after,
.containerPattern .ch-item:before {
	content: '';
    display: table;
}
.containerPattern .ch-grid:after {
	clear: both;
}
.containerPattern .ch-grid li {
	margin: 0 !important;;
	width: 400px;
	height: 400px;
	display: inline-block;
}
#slide2 .containerPattern  .ch-grid li {
	margin: 0 !important;;
	width: 400px;
	height: 281px;
	display: inline-block;
}
.containerPattern .ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.containerPattern .ch-thumb {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
	
	-webkit-transform-origin: 95% 40%;
	-moz-transform-origin: 95% 40%;
	-o-transform-origin: 95% 40%;
	-ms-transform-origin: 95% 40%;
	transform-origin: 95% 40%;
	
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
/*.containerPattern .ch-thumb:after {
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 40%;
	left: 95%;
	margin: -4px 0 0 -4px;
	background: rgb(14,14,14);
	background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
	background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
	box-shadow: 0 0 1px rgba(255,255,255,0.9);
}*/
.containerPattern .ch-img-1 { 
	background-image: url(../imgs/slide1/pattern.jpg);
	z-index: 12;
}
.containerPattern .ch-img-2 { 
	background-image: url(../imgs/slide2/pattern.jpg);
	z-index: 12;
}
.containerPattern .ch-info {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-align: center;
	box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
.containerPattern .ch-item:hover .ch-thumb {
	box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
	-webkit-transform: rotate(-110deg);
	-moz-transform: rotate(-110deg);
	-o-transform: rotate(-110deg);
	-ms-transform: rotate(-110deg);
	transform: rotate(-110deg);
}
.containerPattern .ch-item:hover .ch-info p a{
	opacity: 1;
	-webkit-transform: translateX(0px) rotate(0deg);
	-moz-transform: translateX(0px) rotate(0deg);
	-o-transform: translateX(0px) rotate(0deg);
	-ms-transform: translateX(0px) rotate(0deg);
	transform: translateX(0px) rotate(0deg);
}



/*/ --- RICHIESTA INFORMAZIONI --- /*/
#slide3{
	position:relative;
	width:100%;
	margin:0px auto;
}
#slide3 article{
	padding-top:44px;
}
#slide3 h3{
	margin:0;
	margin-bottom:10px;
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight: 700;
}
#formContainer{
	width:100%;
	background: #999;
	padding:10px 0;
	margin-bottom:50px;
	position:relative;
}
#formContainer .form{
	margin:0 10px;
	background: #FFF;
	padding:20px;
}
form{
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight: 700;
	margin:0;
	font-size: 12px;
}
form .crenatura{
	letter-spacing: 2px;
}
label{
	padding-left:40px;
	float:left;
}
textarea{
	width:100%;
	height:100px;
	border:none;
	resize:none;
	margin-top:15px;
	border-top:1px solid #333;
	border-bottom:1px solid #333;
}
input[type='radio']{
	height:30px;
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
}
input[type='radio'] + label{
	background: url('../imgs/slide3/sprite-radio.png') no-repeat;
	background-position: 0 0;
}
input[type='radio']:checked + label{ 
 	background-position:  0 -30px;
}
input[type='text']{
	height: 25px;
}
input[type="submit"]{
	border:none;
	background: url('../imgs/slide3/submit.png') 0 0 no-repeat #000;
	text-align: center;
	color:#FFFFFF;
	width:100%;
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight:700;
	font-size:18px;
	height: 40px;
	line-height: 40px;
	margin-bottom:30px;
	cursor:pointer;
}
input[type="submit"].en:hover{
	background-position: 0 -40px;
}
input[type="submit"].en{
	border:none;
	background: url('../imgs/slide3/submit-en.png') 0 0 no-repeat #000;
	text-align: center;
	color:#FFFFFF;
	width:100%;
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight:700;
	font-size:18px;
	height: 40px;
	line-height: 40px;
	margin-bottom:30px;
	cursor:pointer;
}
input[type="submit"]:hover{
	background-position: 0 -40px;
}
.label{
	font-size:14px;
	height: 30px;
	line-height: 30px;
}
.radio-field{
	height:30px;
	float:left;
	line-height:30px;
	margin-bottom:20px;
	margin-left:50px;
}
.radio-field label {
	cursor:pointer;
}
.input-field{
	padding:10px 0;
	width:48%;
	margin-bottom:20px;
	border-bottom:1px solid #333;
}
.input-field input{
	float:right;
	width:350px;
	border:none;
}
.input-text{
	padding:5px 0;
	margin-bottom:30px;
}
.privacy{
	font-size:9px;
	color:#999;
}
.error{
	font-family: 'PT Sans Narrow', sans-serif;
	text-align: center;
	font-size: 16px;
	margin-bottom:30px;
}
.success{
	font-family: 'PT Sans Narrow', sans-serif;
	position:absolute;
	top:10;
	left:10;
	width:956px;
	height: 530px;
	line-height: 530px;
	font-size: 20px;
	background: #FFF;
	text-align: center;
}
.box-bottom{
	margin-bottom:15px;
	width:332px;
	float:left;
	height: 72px;
}
.to-top{
	width:48px;
	margin:0 auto;
	margin-top:10px;
	cursor:pointer;
}
.social img{
	margin-top:18px;
	float:right;
	margin-left:10px;
}



/*/ --- EFFETTO FLIP SOCIAL NETWORK --- /*/
.flip-container {
	-webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
	float:right;
	margin-left:10px;
}
.flip-container, .front, .back {
	width: 38px;
	height: 38px;
}
.flipper {
	-moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
	position: relative;
}
.front, .back {
	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
 	-webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
	-moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
	-o-transition: 0.6s;
    -o-transform-style: preserve-3d;
 	-ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
	transition: 0.6s;
    transform-style: preserve-3d;
	position: absolute;
    top: 0;
    left: 0;
}
.front {
	z-index: 2;
	-webkit-transform: rotateY(0deg);
}
.back {
	-webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}




/*/ --- FOOTER --- /*/
footer{
	margin-top:35px;
	padding-top:6px;
	margin-bottom:10px;
	width:100%;
	height: 40px;
	line-height:16px;
	background: #FFF;
	text-align: center;
	font-size:12px;
}


/*/ --- FIRMA --- /*/
.firma{
	position:absolute;
	bottom:0px;
	right:0px;
}