.configuratore.item-page .page {
	height: auto;	
	padding-top:370px;
}
.configuratore .bkg{
	position: absolute;
	color: #E4E6E0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.configuratore.item-page .page .title h2{
	left:50px;
}
.configuratore .bkg path{
	fill:currentcolor;
}
.configuratore.item-page .page .title {
	z-index:1;
	background: #fff;
	top:90px;
	background: rgba(255, 255, 255, 0.8);
}
.configuratore.item-page .page .image-left{
	z-index:2;
	position: relative;
	width:410px;
	text-align: center;
	margin-left:40px;
	margin-bottom:120px;
}
.configuratore.item-page .page .image-right{
	position: absolute;
	top:370px;
	right:0;
	text-align: center;
	width:393px;
	margin-right:40px;
}

.configuratore.item-page .page .preorder{
	position: absolute;
	left: 50%;
	width: 190px;
	top: 760px;
	margin-left: -86px;
}

.configuratore.item-page .page .colors h2{
	font-size : 52px;
	line-height : 43.78px;
	color : #E57D79;
	margin:0 0 60px 0;
	font-weight: lighter;
	text-align: center;
}
.configuratore.item-page .page .colors h3{
	font-family : 'proxima-nova';
	font-size : 20px;
	line-height : 25px;
	color : #3E4348;
	text-align: center;	
	margin:0 0 60px 0;
}
.configuratore.item-page .page .hexagons{
	height:350px;
	width:900px;
	margin:80px 60px;
	position: relative;
}
.configuratore.item-page .page .colors p{
	position: static;
	top:auto;
	left:auto;
	right:auto;
	width: auto;
	margin:0 0 60px 0;
}
.configuratore.item-page .page .hexagons .color{
	position: absolute;
	width:174px;
	height:174px;
	margin-top:-87px;
	z-index:1;
	margin-left:-87px;
	color:rgba(255,255,255,0);
	opacity:1;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-ms-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
}
.configuratore.item-page .page .colors .color-a{ top:50%; left:0; }
.configuratore.item-page .page .colors .color-b{ top:0;margin-top:0; left:16.66666%; }
.configuratore.item-page .page .colors .color-c{ top:100%;margin-top:-174px; left:16.66666%; }
.configuratore.item-page .page .colors .color-d{ top:50%; left:33.33333%; }
.configuratore.item-page .page .colors .color-e{ top:0;margin-top:0; left:50%; }
.configuratore.item-page .page .colors .color-f{ top:100%;margin-top:-174px; left:50%;}
.configuratore.item-page .page .colors .color-g{ top:50%; left:66.66666%; }
.configuratore.item-page .page .colors .color-h{ top:0; margin-top:0; left:83.33333%; }
.configuratore.item-page .page .colors .color-i{ top:100%;margin-top:-174px; left:83.33333%; }
.configuratore.item-page .page .colors .color-j{ top:50%; left:100%; }

.configuratore.item-page .page .colors .color img{
	position: absolute;
	z-index:1;
	top:0;
	left:0;
}
.configuratore.item-page .page .colors .color.hidden{
	opacity:0 !important;
}
.configuratore.item-page .page .colors .color.hover{
	opacity:0.3 !important;
}
.configuratore.item-page .page .colors .color svg{
	margin-top:12px;
	position: absolute;
	z-index:2;
	left:0;
	top:0;
	
}
.configuratore.item-page .page .colors .color polygon{
	fill:currentcolor;
	cursor:pointer;
	opacity:1;
}
.configuratore.item-page .page .votefor{
	font-size:23px;
	font-weight: lighter;
	color:#E57D79;
	width:100%;
	line-height:1em;
	display:block;
	margin:0 auto;
	text-align: center;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-ms-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
}
.configuratore.item-page .page h1{
	font-weight: normal;
	position: absolute;
	top:170px;
	text-align: center;
	width:100%;
}

.configuratore.item-page .page .classifica-link{
	clear: both;
}
.configuratore.item-page .page .classifica-link a{
	text-decoration: none;
    color: #E57D79;
    display: inline-block;
    padding: 8px;
    border: 1px solid #E57D79;
    font-weight: lighter;
}


.configuratore.item-page .page .colors .hexagons .compile-this .back-to-colors{
	margin-top:14px;
	color:#ccc;
	text-decoration:none;
	display: inline-block;
	padding:3px 6px;
	border:1px solid #ccc;
}
.configuratore.item-page .page .colors .hexagons .compile-this .back-to-colors:hover{
	color: black;
	border-color:black;
}
.configuratore.item-page .page .colors h4{
	font-weight: normal;
	position: absolute;
	top:0;
	font-size:20px;
	left:190px;
	text-align: left;
	margin:45px 0 0 0 ;
}
.compile-this{
	z-index:3000;
}
.configuratore.item-page .page .colors .hexagons .compile-this{
	width:100%;
	height:100%;
}
.configuratore.item-page .page .colors .hexagons .compile-this > .text{
	position: absolute;
	bottom:0;
	left:0;
	font-size:20px;
	width:450px;
}
.configuratore.item-page .page .colors .hexagons form{
	position: absolute;
	right:0;
	top:0;
	width:400px;
}


.configuratore.item-page .page .colors .hexagons fieldset{
	width:100%;
	height: auto;
	padding:25px 30px;
	margin:0;
	border:0;
	background:#eff0ec;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
}
.configuratore.item-page .page .colors .hexagons .fieldblock{
	margin-bottom:5px;
	width:100%;
	position: relative;
}
.configuratore.item-page .page .colors .hexagons .fieldblock input{
	background:#e4e6e0;
	width:100%;
	border:0;
	padding:7px 10px;
	font-family : 'futura-pt';
	font-size : 16px;
	line-height : 26.24px;
	color : #808080;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.configuratore.item-page .page .colors .hexagons textarea{
	background:#e4e6e0;
	width:100%;
	border:0;
	font-family : 'futura-pt';
	font-size : 16px;
	line-height : 26.24px;
	color : #808080;
	padding:10px;
	min-height:130px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


.configuratore.item-page .page .colors .hexagons .genders{
	height:40px;
}
.configuratore.item-page .page .colors .hexagons .genders input{
	/*display: none;*/
	opacity:0;
}
.configuratore.item-page .page .colors .hexagons .genders input,
.configuratore.item-page .page .colors .hexagons .genders label{
	float: left;
	width:auto;
}
.configuratore.item-page .page .colors .hexagons .genders label{
	display: block;
	width: 40px;
	height: 40px;
	background:#e4e6e0;
	line-height:40px;
	text-align: center;
	vertical-align:middle;
	font-weight:bold;
	font-size:17px;
	color: #808080;
	cursor:pointer;
	margin-right:10px;
}
.configuratore.item-page .page .colors .hexagons .genders label.active{
	background:#505E5E;
	color: #e4e6e0;
}


.configuratore.item-page .page .colors .hexagons .checkbox-container label{
	float: left;
	color:#808080;
}
.configuratore.item-page .page .colors .hexagons .checkbox-container #form-privacy{
	float: left;
	margin-right:6px;
	width: auto;
}
.configuratore.item-page .page .colors .hexagons .fieldblock div.text{
	color:#808080;
	clear: both;
	font-size:10px;
	margin-top:14px;
	margin-bottom:12px;
}
.configuratore.item-page .page .colors .hexagons .fieldblock div.text a{
	color:#808080;
}
.configuratore.item-page .page .colors .hexagons .submit input{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	font-family : 'futura-pt';
	font-size : 17px;
	line-height : 26.24px;
	color : #FFFFFF;
	background:#505e5e;
	padding:10px 0;
	color:white;
	border:0;
	width:100%;
}
.configuratore.item-page .page .colors .hexagons .submit{
	margin-bottom:0;
}
.configuratore.item-page .page .colors .hexagons .fieldblock span{
	position: absolute;
	background: #505e5e;
	height:40px;
	line-height:40px;
	vertical-align:middle;
	padding:0 10px;
	left:-195px;
	top:0;
	width:165px;
	color: white;
	z-index:3;
	text-transform: uppercase;
}
.configuratore.item-page .page .colors .hexagons .fieldblock span:before{
	display: block;
	position: absolute;
	content:' ';
	right:-12px;
	top:8px;
	width:0;
	height:0;
	border-style: solid;
	border-width: 12px 0 12px 12px;
	border-color: transparent transparent transparent #505e5e;
}

.configuratore.item-page .page .colors .hexagons .alldone{
	width:100%;
	height:100%;
	background-color:#007784;
	color:white;
	display: table;
	cursor: pointer;
}
.configuratore.item-page .page .colors .hexagons .alldone .cell{
	width:100%;
	height:100%;
	color:white;
	text-align: center;
	display: table-cell;
	font-size:130px;
	font-weight:bold;
	vertical-align: middle;
}
.configuratore.item-page .page .colors .hexagons .color.selected{
	top: 0;
	margin:0;
	left:0;
}

@media only screen and (max-width:1024px){
	.configuratore.item-page .page .hexagons{
		width: 768px;
		margin: 80px auto;
	}
	.configuratore.item-page .page .colors .hexagons .compile-this > .text{
		font-size:14px;
		width:380px;
	}
}
@media only screen and (max-width:920px){
	.configuratore.item-page .page .colors .hexagons .compile-this > .text{
		font-size: 16px;
		width: 360px;
	}
	.configuratore.item-page .page .hexagons{
	  width:840px;
	}
	.configuratore.item-page .page .colors .color-a {
	  top: 0;
	  left: 33.33333%;
	}
	.configuratore.item-page .page .colors .color-j {
	  top: 100%;
	  left: 66.66666%;
	}
}
@media only screen and (max-width:840px){
	.configuratore.item-page .page .hexagons{
		width: 290px;
		height: 700px;
		margin: 40px auto;
	}
	.configuratore.item-page .page .colors .color{
		margin-top:0;
	}
	.configuratore.item-page .page .colors .color-a{ top:0; left:50%; }
	.configuratore.item-page .page .colors .color-b{ top: 87px; left:0; }
	.configuratore.item-page .page .colors .color-c{ top: 87px; left:100%; }
	.configuratore.item-page .page .colors .color-d{ top:174px; left:50%; }
	.configuratore.item-page .page .colors .color-e{ top:261px; left:0; }
	.configuratore.item-page .page .colors .color-f{ top:261px; left:100%;}
	.configuratore.item-page .page .colors .color-g{ top:345px; left:50%; }
	.configuratore.item-page .page .colors .color-h{ top:432px; left:0%; }
	.configuratore.item-page .page .colors .color-i{ top:432px; left:100%; }
	.configuratore.item-page .page .colors .color-j{ top:519px; left:50%; }
	.configuratore.item-page .page .colors .hexagons form{
		right: auto;
		left: 50%;
		top: 380px;
		width: 400px;
		margin-left: -200px;
	}
	.configuratore.item-page .page .colors .hexagons .compile-this > .text{
		width: 100%;
		top: 200px;
		bottom: auto;
	}
}


@media only screen and (max-width:768px){
	.configuratore.item-page .page .title h2{
		top: 78px;
		left: 0;
		line-height: 1em;
	}
	.configuratore.item-page .page .configurator{
		margin-bottom: 150px;
	}
	.configuratore.item-page .page .image-right,
	.configuratore.item-page .page .image-left{
		width:50%;
		text-align: center;
		margin:0px;
		padding:0 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.configuratore.item-page .page .image-right .bianco,
	.configuratore.item-page .page .image-left .nero{
		width: 100%;
	}
}


@media only screen and (max-width:470px){
	.configuratore.item-page .page{
		padding:0;
	}
	.configuratore.item-page .bkg-a{
		height:400px !important; 
	}
	.configuratore.item-page{
		position: relative;
		overflow-x:hidden;
		width:100%;
	}
	.configuratore.item-page .bkg svg{
		width:200%;
		height:100%;
	}
	.configuratore.item-page .page .configurator{
		margin-bottom: 60px;
	}
	.configuratore.item-page .page .image-right,
	.configuratore.item-page .page .image-left{
		position: relative;
		width:100%;
		float: none;
		top:auto;
		left: auto;
		right: auto;
		bottom: auto;
		margin:0 0 40px 0;
	}
	.configuratore.item-page .page .colors .hexagons{
		width:100%;
		height: 960px;
		padding:0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.configuratore.item-page .page .colors .hexagons h2{
		margin-bottom:20px;
	}
	.configuratore.item-page .page .colors .hexagons .compile-this > .text{
		padding:0 20px;
		text-align: center;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	} 
	.configuratore.item-page .page .colors .color{
		margin:0;
		left: 50%;
	}
	.configuratore.item-page .page .colors .color:nth-child(even){
		margin-left: -162px;
	}
	.configuratore.item-page .page .colors .color:nth-child(odd){
		margin-left: -12px;
	}
	.configuratore.item-page .page .colors .color-a{ top:0; }
	.configuratore.item-page .page .colors .color-b{ top:87px;  }
	.configuratore.item-page .page .colors .color-c{ top:174px; }
	.configuratore.item-page .page .colors .color-d{ top:261px; }
	.configuratore.item-page .page .colors .color-e{ top:345px; }
	.configuratore.item-page .page .colors .color-f{ top:432px; }
	.configuratore.item-page .page .colors .color-g{ top:519px; }
	.configuratore.item-page .page .colors .color-h{ top:606px; }
	.configuratore.item-page .page .colors .color-i{ top:693px; }
	.configuratore.item-page .page .colors .color-j{ top:780px; }
	.configuratore.item-page .page .colors .hexagons form{
		width: 320px;
		margin-left: -160px;
	}
	.configuratore.item-page .page .colors h2{
		margin-bottom:6px;
	}
	.configuratore.item-page .page .colors .hexagons .color.selected{	
		left: 50%;
		margin-left: -154px;
	}
	.configuratore.item-page .page .colors h4 {
		left:50%;
		margin-left:25px;
	}
	.configuratore.item-page .page .colors .hexagons.formactive{
		height:800px;
	}
	.configuratore.item-page .page .preorder{
		display: block;
		position: relative;
		width: 300px;
		top:auto;
		left: auto;
		right: auto;
		bottom: auto;
		margin: 40px auto;
	}
	.configuratore.item-page .page .preorder img{
		width:100%;
	}
	.configuratore.item-page .page .colors p{
		padding:0 20px;
		font-size:16px;
	}
	.configuratore.item-page .page .colors .hexagons .alldone .cell{
		font-size:70px;
	}
	
}