@charset "UTF-8";
/* CSS Document */
body{overflow-x:hidden;}
.credits{width:60%; margin-left:20%; text-align:center !important;}

#expo{position:relative; left:750px;}
#expo img{border:none;}


@font-face {
    font-family: 'gotham-light';
    src: url('font/gothmlig-webfont.eot');
    src: url('font/gothmlig-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/gothmlig-webfont.woff') format('woff'),
         url('font/gothmlig-webfont.ttf') format('truetype'),
         url('font/gothmlig-webfont.svg#gotham') format('svg'); }





@font-face {
    font-family: gotham;
    src: url('font/gothmbol-webfont.eot');
    src: url('font/gothmbol-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/gothmbol-webfont.woff') format('woff'),
         url(../gothmbol-webfont.ttf) format('truetype'),
         url('font/gothmbol-webfont.svg#gotham') format('svg');
    font-weight: normal;
    font-style: normal;

}


.t1{
	 font-family:gotham,Montserrat,Trebuchet MS;
	 font-weight:bold;
	 text-transform:uppercase;
	 font-size:50px;}
	 
.t2{font-family:gotham-light,Montserrat,Trebuchet MS;
	 
	 font-size:14px;
	 line-height:17px;}
	 
	 
a.blu:hover{
opacity:0.3;}

a.client{margin:0px;}
a.client:link{ text-decoration:none;}
a.client:hover{opacity:0.5;}

#legenda{
    font-family: gotham,Montserrat,Trebuchet MS;
    text-transform: uppercase;
    text-align: left;
    padding: 20px 25px 10px 25px;
    font-weight: 500;
    background-color: #FFF;
    border-radius: 10px;
    width: 130px;
    list-style-type: none;
    left: 830px;
    top: 0px;
    position: absolute;
    z-index: 3;
}
	
#legenda li{font-size:16px; padding-bottom:5px;}	
	
#footer{
	
	display:inline-block;
	left:70%;
    top:-100px;
	
	position:relative;
	z-index:6;
	
	
	}
	
#footer2{
	
	
	left:70%;
    top:100%;
	
	position:relative;
	z-index:6;
	
	
	}
       


.cerchio{width:12px;
      height:12px;
      border-radius:6px;
      display: inline-block;
      margin-top:2px;
      margin-right:2px;
      margin-left:7px;}



body{
	background-color:#a8bcba;
    margin:0px:0px:0px:0px;
    padding:inherit;
	 }


#wrapper{
	width:1024px;


	min-width:450px;
	max-width:1024px;
    margin:auto;}
	
#wrapper2{
	width:50%;


	min-width:640px;
	max-width:1024px;
    margin:auto;
	
	
	background-color:#aac1c0;}
	
#header{
	width:100%;
	display:inline-block;
	position:relative;
	}
	
	
	
#headerp{
	width:100%;
	display:inline-block;
	position:relative;
	z-index:7;}

#logo{
	position:relative;
	display:inline-block;
	
	}


	
	
#payoff{
	position: absolute;
	display:inline-block;
	margin-top:35px;
	
	margin-left:15px;
	
	}
	
img.fuid{width:100%;}


#cont{
	
	position:relative;
	with:100%;
	max-width:1024px;
	margin:auto;
	margin-top:10%;
	
	}
	
	#conte{
	
	position:relative;
	
	width:1024px;
	
	margin-top:10%;
	}
	
#contpeople	{
	display: inline-block;
	padding-left:250px;
	
	position:relative;
	with:100%;
	max-width:1024px;
	margin:auto;
	margin-top:10%;
	}
	
#cervello{
	position:relative;
	margin:auto;
    max-width:600px;
	width:100%;
    height:100%;
	top:-50px;
	}
	
	
	 @-webkit-keyframes cervello {
		
    from {top:-50px;} 
	20% {top:-48px; }
	25% {top:-48px; left:-5px; }
	40% {top:-46px;}
	50%{top:-44px; left:0px;}
	60% {top:-46px;}
	75% {top:-48px; left:5px; }
	80% {top:-48px;}
	100% {top:-50px;}}
	
	 @-moz-keyframes cervello {
		
    from {top:-50px;} 
	20% {top:-48px; }
	25% {top:-48px; left:-5px; }
	40% {top:-46px;}
	50%{top:-44px; left:0px;}
	60% {top:-46px;}
	75% {top:-48px; left:5px; }
	80% {top:-48px;}
	100% {top:-50px;}}
	
	
		 @-o-keyframes cervello {
		
    from {top:-50px;} 
	20% {top:-48px; }
	25% {top:-48px; left:-5px; }
	40% {top:-46px;}
	50%{top:-44px; left:0px;}
	60% {top:-46px;}
	75% {top:-48px; left:5px; }
	80% {top:-48px;}
	100% {top:-50px;}}
	
			 @-keyframes cervello {
		
    from {top:-50px;} 
	20% {top:-48px; }
	25% {top:-48px; left:-5px; }
	40% {top:-46px;}
	50%{top:-44px; left:0px;}
	60% {top:-46px;}
	75% {top:-48px; left:5px; }
	80% {top:-48px;}
	100% {top:-50px;}}
	
	
	

	
	
	
	
	
	
	   
.box1{
	
    position:absolute;
	display: inline-block;
    left:50%;
    width:60px;
	top:20%;}
	
.box2{
	
    position:absolute;
	display: inline-block;
    left:25%;
    width:60px;
	top:-3%;}
	
.box3{
	
    position:absolute;
	display: inline-block;
    left:30%;
    width:60px;
	top:40%;}
	
.box4{
	
    position:absolute;
	display: inline-block;
    left:60%;
    width:60px;
	top:-3%;}
.box5{
	
    position:absolute;
	display: inline-block;
    left:70%;
    width:60px;
	top:35%;}
	
.box6{
	
    position:absolute;
	display: inline-block;
    left:60%;
    width:60px;
	top:60%;}

.base{
	width:60px;
	position: absolute;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;}
	
.roll{
    width:180px;
    left:-60px;
    top:-60px;
	opacity:0;
	position: absolute;
	overflow:hidden;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;}


	
div.box1:hover div.roll{
  opacity: 1;
  width:180px;
	
}

div.box1:hover div.base{
  opacity: 0;
}

div.box2:hover div.roll{
  opacity: 1;
  width:180px;
	
}

div.box2:hover div.base{
  opacity: 0;
}
div.box3:hover div.roll{
  opacity: 1;
  width:180px;
	
}

div.box3:hover div.base{
  opacity: 0;
}

div.box4:hover div.roll{
  opacity: 1;
  width:180px;
	
}

div.box4:hover div.base{
  opacity: 0;
}

div.box5:hover div.roll{
  opacity: 1;
  width:180px;
	
}

div.box5:hover div.base{
  opacity: 0;
}

div.box6:hover div.roll{
  opacity: 1;
  width:180px;
	
}

div.box6:hover div.base{
  opacity: 0;
}



div.pallo{
	position:absolute;
	display: inline-block;
	
	height:50px;
    width:50px;
	}
	
div.basepallo{ display: block;}

div.rollpallo{

    
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	position: absolute;
-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
	
top: -80px;
left:-78px;
opacity: 0;
width:200px;
height:200px;

}




div.pallo:hover div.rollpallo{
	 opacity: 1; 
  left:-78px;
  top: -80px;}
 
 
 
 
 .rollpallo a strong{display:none;}
 
 
 .rollpallo a:hover strong{
	 display:block;
 margin: 0;

 position:absolute;
 

 z-index: 100; 
 font-weight:normal;
 text-align: left;
 color:#FFF;

 } 
 
 
 
 
 
 #contenitore{
	 display:inline-block;
	width:100%;
	margin-left:auto;
	position:relative;
	padding-top:50px;}
	
.text{
	font-family:'gotham',Montserrat,Trebuchet MS;
	 font-weight:bold;

	 
	 text-transform:uppercase;
	 font-size:80px;
	 line-height:60px;
	 display:inline-block;
	 bottom:44px;
	 text-align:justify;
	 letter-spacing: -8px;}	
	 
div.text:link{text-decoration:none}



#contatti{
	
	position:absolute;
	background-color:#39F;
	display:inline-block;}

#mappa{
	display:inline-block;
	left:550px;
	position:absolute;}
	
#testclients{width:630px;
font-family:gotham,Montserrat,Trebuchet MS;
text-align:left;
font-size:16px;
color:#58595b;
margin-left:60px;
line-height:20px;
margin-top:20px;}

/* valori */	

#valori{
position:relative;
display:inline-block;
left:450px;
width:550px;
top:-217px;}

.rollvalore{
	display:inline-block;
	position:relative;
	height:26px;
    width:26px;
	border-radius:13px;
	z-index:50;
	
	}
.rollvalore:hover{-webkit-animation: none !important;-webkit-animation: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;}	

.rollvalore  strong{display:none;}
.rollvalore:hover strong{
width:200px;
display:block;
margin: 0;
position:absolute;
z-index:0;
 font-weight:normal;
 text-align: center;
 color:#FFF;
 background-color:#a8bcba;
} 
 


 
 #valtitolo{position:absolute;
 z-index:-1;
 text-align:center;
 color:#FFF;
 left:140px;
 top:20px;
font-family:gotham,Montserrat,Trebuchet MS;
font-size:28px;
line-height:26px;}

.nomevalore{font-family:gotham,Montserrat,Trebuchet MS; 
font-size:24px;
text-transform:uppercase;}

/* valori mobile*/	 

#valorimob{position:absolute;
left:30px;
            }
		   
div.voloremob{position:relative;}
	
div.basevalmob{ display: block;}

div.rollvalmob{-webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                 box-sizing: border-box;
	            -webkit-transition: all 0.5s ease-in-out;
                -moz-transition: all 0.5s ease-in-out;
                -o-transition: all 0.5s ease-in-out;
                transition: all 0.5s ease-in-out;
				position: absolute;
                top:0px;
                display: none;}

div.voloremob:hover div.rollvalmob{display:block;}
 .rollvalmob  strong{display:none;}
 .rollvalmob:hover strong{ display:block;
                           width:170px;
                            margin: 0;   
                            position:relative;
                            top:-120px;
							left:-40px;
                            z-index: 100; 
                           font-weight:normal;
                           text-align: center;
                           color:#FFF;
                           background-color:#a8bcba;
                           padding-bottom:40px;
						   padding-top:20px;
						  }  


 
 
/* animazioni agency */	 
	 
	 
	 
 @-webkit-keyframes val1 {
		
    from {top:15px;} 
	12%{top:14px; left:58px;}
	25% {top:13px; }
	37%{top:13px; }
	50%{top:15px; left:62px;}
	63% {top:16px;  }
	75% {top:17px;  }
    87% {top:16px; left:58px; }
	100% {top:15px;}}
	
 @-moz-keyframes val1 {
		
    from {top:15px;} 
	12%{top:14px; left:58px;}
	25% {top:13px; }
	37%{top:13px; }
	50%{top:15px; left:62px;}
	63% {top:16px;  }
	75% {top:17px;  }
    87% {top:16px; left:58px; }
	100% {top:15px;}}
	
 @-O-keyframes val1 {
		
    from {top:15px;} 
	12%{top:14px; left:58px;}
	25% {top:13px; }
	37%{top:13px; }
	50%{top:15px; left:62px;}
	63% {top:16px;  }
	75% {top:17px;  }
    87% {top:16px; left:58px; }
	100% {top:15px;}}
	
 @-keyframes val1 {
		
    from {top:15px;} 
	12%{top:14px; left:58px;}
	25% {top:13px; }
	37%{top:13px; }
	50%{top:15px; left:62px;}
	63% {top:16px;  }
	75% {top:17px;  }
    87% {top:16px; left:58px; }
	100% {top:15px;}}
	
	
	/* 2 */
	
 @-webkit-keyframes val2 {
		
    from {top:-40px;} 
	12%{top:-41px; left:208px;}
	25% {top:-42px; }
	37%{top:-41px; }
	50%{top:-40px; left:212px;}
	63% {top:-39px;  }
	75% {top:-38px;  }
    87% {top:-39px; left:208px; }
	100% {top:-40px;}}
	 @-moz-keyframes val2 {
		
    from {top:-40px;} 
	12%{top:-41px; left:208px;}
	25% {top:-42px; }
	37%{top:-41px; }
	50%{top:-40px; left:212px;}
	63% {top:-39px;  }
	75% {top:-38px;  }
    87% {top:-39px; left:208px; }
	100% {top:-40px;}}
	 @-o-keyframes val2 {
		
    from {top:-40px;} 
	12%{top:-41px; left:208px;}
	25% {top:-42px; }
	37%{top:-41px; }
	50%{top:-40px; left:212px;}
	63% {top:-39px;  }
	75% {top:-38px;  }
    87% {top:-39px; left:208px; }
	100% {top:-40px;}}
	 @-keyframes val2 {
		
    from {top:-40px;} 
	12%{top:-41px; left:208px;}
	25% {top:-42px; }
	37%{top:-41px; }
	50%{top:-40px; left:212px;}
	63% {top:-39px;  }
	75% {top:-38px;  }
    87% {top:-39px; left:208px; }
	100% {top:-40px;}}
	
	/* 3 */

 @-webkit-keyframes val3 {
		
    from {top:120px;} 
	12%{top:121px; left:30px;}
	25% {top:122px; }
	37%{top:121px; }
	50%{top:120px; left:34px;}
	63% {top:119px;  }
	75% {top:118px;  }
    87% {top119px; left:30px; }
	100% {top:120px;}}
	 @-moz-keyframes val3 {
		
    from {top:120px;} 
	12%{top:121px; left:30px;}
	25% {top:122px; }
	37%{top:121px; }
	50%{top:120px; left:34px;}
	63% {top:119px;  }
	75% {top:118px;  }
    87% {top119px; left:30px; }
	100% {top:120px;}}
	 @-o-keyframes val3 {
		
    from {top:120px;} 
	12%{top:121px; left:30px;}
	25% {top:122px; }
	37%{top:121px; }
	50%{top:120px; left:34px;}
	63% {top:119px;  }
	75% {top:118px;  }
    87% {top119px; left:30px; }
	100% {top:120px;}}
	 @-keyframes val3 {
		
    from {top:120px;} 
	12%{top:121px; left:30px;}
	25% {top:122px; }
	37%{top:121px; }
	50%{top:120px; left:34px;}
	63% {top:119px;  }
	75% {top:118px;  }
    87% {top119px; left:30px; }
	100% {top:120px;}}
	
	/* 4 */
	
 @-webkit-keyframes val4 {
		
    from {top:175px;} 
	12%{top:176px; left:118px;}
	25% {top:177px; }
	37%{top:176px; }
	50%{top:175px; left:122px;}
	63% {top:174px;  }
	75% {top:173px;  }
    87% {top174px; left:118px; }
	100% {top:175px;}}
	 @-moz-keyframes val4 {
		
    from {top:175px;} 
	12%{top:176px; left:118px;}
	25% {top:177px; }
	37%{top:176px; }
	50%{top:175px; left:122px;}
	63% {top:174px;  }
	75% {top:173px;  }
    87% {top174px; left:118px; }
	100% {top:175px;}}
	 @-o-keyframes val4 {
		
    from {top:175px;} 
	12%{top:176px; left:118px;}
	25% {top:177px; }
	37%{top:176px; }
	50%{top:175px; left:122px;}
	63% {top:174px;  }
	75% {top:173px;  }
    87% {top174px; left:118px; }
	100% {top:175px;}}
	 @-keyframes val4 {
		
    from {top:175px;} 
	12%{top:176px; left:118px;}
	25% {top:177px; }
	37%{top:176px; }
	50%{top:175px; left:122px;}
	63% {top:174px;  }
	75% {top:173px;  }
    87% {top174px; left:118px; }
	100% {top:175px;}}
	
	/* 5 */
 
 @-webkit-keyframes val5 {
		
    from {top:120px;} 
	12%{top:121px; left:218px;}
	25% {top:122px; }
	37%{top:121px; }
	50%{top:120px; left:222px;}
	63% {top:119px;  }
	75% {top:118px;  }
    87% {top119px; left:218px; }
	100% {top:120px;}} 
	 @-moz-keyframes val5 {
		
    from {top:120px;} 
	12%{top:121px; left:218px;}
	25% {top:122px; }
	37%{top:121px; }
	50%{top:120px; left:222px;}
	63% {top:119px;  }
	75% {top:118px;  }
    87% {top119px; left:218px; }
	100% {top:120px;}} 
	 @-o-keyframes val5 {
		
    from {top:120px;} 
	12%{top:121px; left:218px;}
	25% {top:122px; }
	37%{top:121px; }
	50%{top:120px; left:222px;}
	63% {top:119px;  }
	75% {top:118px;  }
    87% {top119px; left:218px; }
	100% {top:120px;}} 
	 @-keyframes val5 {
		
    from {top:120px;} 
	12%{top:121px; left:218px;}
	25% {top:122px; }
	37%{top:121px; }
	50%{top:120px; left:222px;}
	63% {top:119px;  }
	75% {top:118px;  }
    87% {top119px; left:218px; }
	100% {top:120px;}}
	
	/* 6 */
	
 @-webkit-keyframes val6 {
		
    from {top:15px;} 
	12%{top:14px; left:188px;}
	25% {top:13px; }
	37%{top:13px; }
	50%{top:15px; left:192px;}
	63% {top:16px;  }
	75% {top:17px;  }
    87% {top:16px; left:188px; }
	100% {top:15px;}}
	@-moz-keyframes val6 {
		
    from {top:15px;} 
	12%{top:14px; left:188px;}
	25% {top:13px; }
	37%{top:13px; }
	50%{top:15px; left:192px;}
	63% {top:16px;  }
	75% {top:17px;  }
    87% {top:16px; left:188px; }
	100% {top:15px;}}
	@-o-keyframes val6 {
		
    from {top:15px;} 
	12%{top:14px; left:188px;}
	25% {top:13px; }
	37%{top:13px; }
	50%{top:15px; left:192px;}
	63% {top:16px;  }
	75% {top:17px;  }
    87% {top:16px; left:188px; }
	100% {top:15px;}}
	@-keyframes val6 {
		
    from {top:15px;} 
	12%{top:14px; left:188px;}
	25% {top:13px; }
	37%{top:13px; }
	50%{top:15px; left:192px;}
	63% {top:16px;  }
	75% {top:17px;  }
    87% {top:16px; left:188px; }
	100% {top:15px;}}
	
	
	
	/* animazioni agencymobile */	 
	 
	 
	 
 @-webkit-keyframes valmob {
		
    from {top:0px;} 
	
	
	100% {top:5px;}}
	

#cookieChoiceInfo a{color:#CCCCCC;}

#cookieChoiceInfo a:link{ text-transform:none;}

#testcookie{width: 60%;
font-family: gotham,Montserrat,Trebuchet MS;
text-align: left;
font-size: 16px;

margin-left: 20%;
line-height: 20px;
margin-top: 20px;
color: #fff;}


#testcookie a:link{color:#ffffff;}