/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
a:focus{
	outline: none;
}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  



/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body {font: 13px Helmet, Freesans, sans-serif;}

/* using local fonts? make sure to read up on Paul Irish's 
	Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */

/* we like off-black for text */
body, select, input, textarea {color: #333;}

a {color: #03f;}
a:hover {color: #69f;}

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

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

}

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

}

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

}

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

}


html{
	font:  100% Arial, Helvetica, sans-serif;
	-webkit-text-size-adjust: 100%;
}



body{
    background: #f9f9f9;
    color: #333;
    font: 16px/16px Arial, sans-serif;
}


a{
	color: #333;
}

a:hover{
	color: #d00;
}

header{
	top: 0;
	padding: 25px 0 10px 0;
	position: fixed;
	width: 100%;
	margin: 0 auto;
	height: 45px;
	background: #f9f9f9;
	z-index: 10000;
	border-bottom: 1px solid #fff;
}

header #logo{
	float: left;
	margin-bottom: 5px;
}

nav ul li a img{
	position: relative;
	margin-top: -3px;
}

nav ul li a.home{
	display: block;
	width: 18px;
	height: 16px;
	background: url(../images/home.png) no-repeat center bottom;
	margin-top: -3px;
}

nav ul li a.home.current, nav ul li a.home:hover{
	background: url(../images/home.png) no-repeat center top;
}

nav ul li a{
	color: #999;
	text-decoration: none;
	font: 0.875em "Museo700";
}

nav ul li a:hover{
    color: #333;
    text-decoration: none;
}

nav ul li a.current{
    color: #333;
    text-decoration: none;
}

#wrapper nav ul{
	margin-top:22px;
}

#wrapper nav ul li ul{
	margin-top: -2px;
}

#home{
    background: #fff;
    min-height: 670px;
    padding-top: 10%;
}

#home #contattaci{
	width: 210px;
	height: 112px;
	margin-top: 3%;
	margin-bottom: 0;
	text-align: right;
	font: 1.125em/1.5em "Museo900";
	overflow: visible;
}

#home #contattaci p{
	height: 66px;
	padding-top: 46px;
	background: url(../images/contattaci-mediaprime.gif) no-repeat;
}

#home #contattaci p a img{
	position: relative;
	top: 1px;
}

#home #contattaci a{
	font-family: "Museo700";
	text-decoration: none;
	margin-left: 10px;
	display: inline-block;
	padding: 8px 14px 3px 14px;
	margin-bottom: 0;
	color: #333;
	text-align: center;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
	vertical-align: middle;
	cursor: pointer;
	background-color: whiteSmoke;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#E6E6E6));
	background-image: -webkit-linear-gradient(top, white, #E6E6E6);
	background-image: -o-linear-gradient(top, white, #E6E6E6);
	background-image: linear-gradient(to bottom, white, #E6E6E6);
	background-image: -moz-linear-gradient(top, white, #E6E6E6);
	background-repeat: repeat-x;
	border: 1px solid #BBB;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	border-color: #E6E6E6 #E6E6E6 #BFBFBF;
	border-bottom-color: #A2A2A2;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
	filter: progid:dximagetransform.microsoft.gradient(enabled=false);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

#home #contattaci a:hover{
	color: #ff7a59;
	text-decoration: none;
	background-color: #E6E6E6;
	background-position: 0 -15px;
	-webkit-transition: background-position 0.1s linear;
	-moz-transition: background-position 0.1s linear;
	-o-transition: background-position 0.1s linear;
	transition: background-position 0.1s linear;
}

#home #contattaci a:active{
	background-color: #E6E6E6;
	background-color: #D9D9D9 9;
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

#home .hello h2, #home .hello h3 {
	font: 5em/1.125em "Museo700";
	text-align: right;
	float: left;
	display: block;
	margin-left: 5%;
	margin-top: 6%;
	text-shadow: 0px 4px 0px #eee;
	filter: dropshadow(color=#eee, offx=0, offy=4);
}

#home .hello h3{
    font: 7.5em/1.125em "Museo700";
}

#home .hello .damion{
    font: 1.5em/1.125em "Damion";
    color: #ff7a59;
}

#home h1{
	font: 5em/1.125em "Museo700";
	color: #fff;
	text-align: left;
	margin-left: 45%;
	clear: both;
	padding-left: 10px;
	position: relative;
	z-index: 10;
	margin-top: 30px;
	display: block;
}

#home h1 span.media, #home  span.n, #home span.e, #home  span.w{
	background: #333;
	display: inline-block;	
}

#home h1 span.n{
	padding-left: 2.08333%;
}

#home h1 span.media{
	padding-right: 2.08333%;	
}
	


.home_divisorio{
	background: url(../images/siamo_divisorio.png) repeat-x top center;
	height: 87px;
	width: 100%;
	border-top: 10px solid #333;
	margin-top: -98px;
	position: relative;
	z-index: 0;
}

.down{
	display: block;
	background: url(../images/down.png) no-repeat top;
	height: 51px;
	width: 50px;
	margin: 0 auto;
	margin-top: 80px;
}
.down:hover{
	background: url(../images/down.png) no-repeat bottom;
	display: block;
	height: 51px;
	width: 50px;
}

h1, h3{
    font: 2.125em "Museo100", serif;
}

h1 span.damion, h3 span.damion{
    font-size: 1.471em;
}

h2, h4{
	font: 1em/1.5em "Museo100", serif;
}

.siamo_divisorio{
	background: url(../images/siamo_divisorio.png) repeat-x top center;
	height: 97px;
	width: 100%;
	margin-top: 640px;
}

#siamo{
	margin-top: -677px;
	padding-top: 100px;
}

a.bianco{
	background: url(../images/bianco.png) no-repeat center top;
	padding: 18px 20px;
	width: 230px;
	display: inline-block;
	text-align: center;
	clear: both;
	font: 0.875em "Museo300", serif;
	height: 18px;
	text-decoration: none;
}

a.bianco:hover{
	background-position: bottom;
	color: #000;
	line-height: 19px;
}

#filosofia{
	padding-top: 50px;
}

.facciamo_divisorio{
	background: url(../images/facciamo_divisorio.png) repeat-x top center;
	height: 5px;
	width: 100%;
	margin-top: 151px;
}

#facciamo{
	padding-top: 50px;
}

#facciamo_int{
	background: url(../images/facciamo_bg.png) no-repeat;
	height: 300px;
	padding: 0 10px 280px 10px;
	margin: -132px auto;
}

#facciamo_int div{
	float: left;	
}

#facciamo_int h5{
	border-bottom: 1px solid #333;
	font-size: 1.313em;
	line-height: 34px;
	padding-bottom: 4px;
	text-align: left;
}

#facciamo_int p{
	margin-top: 10px;
	text-align: left;
	margin-bottom: 20px;
	font: 0.750em/1.500em Arial;
}

#facciamo_int span.facciamo_fig{
	display: block;
	height: 188px;
	width: 178px;
	margin: 35px 21px 60px 21px;
}

#idea{
	background: url(../images/idea.png) no-repeat center top; 	
}

#progettiamo{
	background: url(../images/progettiamo.png) no-repeat center top; 	
}

#sviluppiamo{
	background: url(../images/sviluppiamo.png) no-repeat center top; 	
}

#facciamo_int span#vola{
	margin: 45px 21px 50px 21px;	
	background: url(../images/vola.png) no-repeat center top; 	
}

/*#facciamo_int .col-220:hover span.facciamo_fig, #facciamo .col-220:hover span#vola{
	background-position: bottom;
}

#facciamo_int .col-220:hover span#vola{
	margin: 45px 21px 50px 21px;	
	background: url(images/vola.png) no-repeat center bottom; 	
}
*/

#facciamo_int .col-220:hover h5{	
	border-bottom: 5px solid #333;
	padding-bottom: 0;
}


#filosofia{
	padding-top: 50px;
}


ul#lista-servizi{
	list-style: none;
	margin-top: 30px;
}

ul#lista-servizi li{
	float: left;
	display: block;
	width: 220px;
	margin: 0 10px 20px 10px;
}

ul#lista-servizi li a{
	font: 1.313em "Museo700";
	text-decoration: none;
}

ul#lista-servizi li a:hover{
	color: #333;
}

ul#lista-servizi li a span{
	line-height: 30px;
}

ul#lista-servizi li a span.serv{
	display: block;
	height: 173px;
	width: 174px;
	background-position: top;
	margin: 0 0 10px 23px;
}

#servizi_brand{
	background: url(../images/servizi_brand_identity.jpg) no-repeat;
}

#servizi_social{
	background: url(../images/servizi_social.jpg) no-repeat;
}

#servizi_facebook{
	background: url(../images/servizi_facebook.jpg) no-repeat;
}

#servizi_marketing{
	background: url(../images/servizi_marketing.jpg) no-repeat;
}

#servizi_stampa{
	background: url(../images/servizi_stampa.jpg) no-repeat;
}

#servizi_app{
	background: url(../images/servizi_app.jpg) no-repeat;
}

#servizi_retail{
	background: url(../images/servizi_retail.jpg) no-repeat;
}

#servizi_viral{
	background: url(../images/servizi_viral.jpg) no-repeat;
}

#servizi_guerrilla{
	background: url(../images/servizi_guerrilla.jpg) no-repeat;
}

ul#lista-servizi li a:hover span.serv{
	background-position: bottom;
}

ul#lista-servizi li a:hover span.museo900{
	color: #000;
}


#progetti{
	padding-top: 50px;
}


#progetti_int{
	background: url(../images/progetti_bg.jpg) no-repeat;
	padding: 12px 0;
	height: 306px;
	margin: 20px auto 0 auto;
}

#clienti{
	padding-top: 50px;
}

#clienti_int{
	background: url(../images/clienti_bg.png) no-repeat top center;
	height: 136px;
	width: 840px;
	margin: 20px auto 0 auto;
	padding: 50px;
}

#cliente_mon{
	background: url(../images/clienti_mondadori.jpg) no-repeat;
}

#cliente_cuc{
	background: url(../images/clienti_cucchiaio.jpg) no-repeat;
}

#cliente_sga{
	background: url(../images/clienti_sgarf.jpg) no-repeat;
	width: 180px;
	margin-left: -30px;
}

#cliente_due{
	background: url(../images/clienti_dueruote.jpg) no-repeat;
	float: right;
}

#cliente_dom{
	background: url(../images/clienti_domus.jpg) no-repeat; 
}

#cliente_emi{
	background: url(../images/clienti_emi.jpg) no-repeat center top;
	width: 175px;
}
	
#cliente_qua{
	background: url(../images/clienti_quattroruote.jpg) no-repeat; 
}

#cliente_bre{
	background: url(../images/clienti_bresciatourism.jpg) no-repeat; 
}

a.cliente{
	display: block;
	height: 68px;
	width: 221px;
	background-position: top;
	float: left;
}


#cliente_cuc:hover, #cliente_mon:hover, #cliente_sga:hover, #cliente_dom:hover, #cliente_due:hover, #cliente_qua:hover, #cliente_due:hover, #cliente_emi:hover, #cliente_bre:hover{
	background-position: bottom;
}

#cliente_sga:hover{
	width: 180px;
	margin-left: -9px;
}

p.nota{
	font-size: 0.563em;
	text-align: right;
	color: #aaa;
	margin: 5px 50px 0 0;
}


#contatto{
	background: #fff;
	border-top: 50px solid #f9f9f9;
	padding-top: 40px;
}

footer{
    background: #fff;
}

.dark_pattern{
    height: 64px;
    background: transparent url(../images/dark_pattern.jpg) repeat-x center center;
}

.dark_pattern img{
	margin-top: 17px;
}

#footer{
    height: 147px;
    background: url(../images/pattern_footer.png) repeat-x center center;
}

#footer .container div{
	margin: 0 auto;
}

footer #lista-contatti{
	margin-top: -210px;
	position: relative;
	z-index: 100;
	height: 140px;
	margin-bottom: 70px;
}


footer #lista-contatti div.container div{
    float: left;
}

footer #lista-contatti h6{
	font: 1em "Museo700";
	padding: 20px 0 5px 0;
	border-bottom: 3px solid #333;
	text-align: center;
}

footer #lista-contatti h6.top50{
	padding-top: 49px;
}

footer #lista-contatti p{
	font: 0.750em/1.5em Arial;
	text-align: center;
}

footer .world{
	display: none;
	height: 16px;
	width: 16px;
	background: url(../images/world.png) no-repeat;
	
}

.mailname, .mailaddress{
	border: none;
	background: #f9f9f9;
	height: 30px;
	padding: 0 10px;
	width: 200px;
	margin: 5px 5px;
	font: 0.750em Arial;
	border: 3px solid #eee;
	border-radius: 5px;
}

.mailname:focus, .mailaddress:focus{
	border: 3px solid #333;
	outline: none;
}
.mailtext{
	border: none;
	background: #f9f9f9;
	min-height: 120px;
	padding: 10px;
	clear: both;
	width: 432px;
	margin: 5px 0;
	max-height: 120px;
	min-width: 440px;
	max-width: 440px;
	font: 0.750em Arial;
	border: 3px solid #eee;
	border-radius: 5px;
}
.mailtext:focus{
	border: 3px solid #333;
	outline: none;
}
.form-error{
	border: 3px solid #d00;
	outline: none;
	background: #ffe8e8;
}
input[type="submit"]{
	display: block;
	width: 140px;
	height: 53px;
	background: url(../images/nero.png) top no-repeat;
	border: none;
	cursor: pointer;
	color: #fff;
	font: 0.875em "Museo700";
	margin: 0 auto;
}

input[type="submit"]:hover{
	background: url(../images/nero.png) bottom no-repeat;
}

#contatto form{
	position: relative;
	z-index: 75;
}

#lettera{
	width: 470px;
	background:  url(../images/lettera.png) no-repeat;
	border: 3px solid #333;
	border-top: 3px solid rgba(255,255,255,0);
	border-radius: 3px;
	height: 190px;
	position: absolute;
	z-index: 100;
	left: 50%;
	margin-left: -235px;
	-webkit-animation: sali 1s ease-out 0.2s both;
	-moz-animation: sali 1s ease-out 0.2s both;
	-o-animation: sali 1s ease-out 0.2s both;
	-ms-animation: sali 1s ease-out 0.2s both;
	animation: sali 1s ease-out 0.2s both;
}
#lettera-2{
	width: 470px;
	background: #fff;
	border: 3px solid #333;
	border-top: 3px solid #333;
	border-radius: 3px;
	height: 190px;
	position: absolute;
	z-index: 0;
	left: 50%;
	margin-left: -235px;
	-webkit-animation: sali 1s ease-out 0.2s both;
	-moz-animation: sali 1s ease-out 0.2s both;
	-o-animation: sali 1s ease-out 0.2s both;
	-ms-animation: sali 1s ease-out 0.2s both;
	animation: sali 1s ease-out 0.2s both;
}
@-webkit-keyframes sali{
	0% {-webkit-transform: translateY(115px);}
	100% {-webkit-transform: translateY(-257px);}
}
@-moz-keyframes sali{
	0% {-moz-transform: translateY(115px);}
	100% {-moz-transform: translateY(-257px);}
}
@-o-keyframes sali{
	0% {-o-transform: translateY(115px);}
	100% {-o-transform: translateY(-257px);}
}
@-ms-keyframes sali{
	0% {-ms-transform: translateY(115px);}
	100% {-ms-transform: translateY(-257px);}
}
@-keyframes sali{
	0% {transform: translateY(115px);}
	100% {transform: translateY(-257px);}
}

#linguetta{
	height: 114px;
	width: 470px;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	position: absolute;
	left: 50%;
	margin-left: -235px;
	-webkit-animation: sali 1s ease-out 0.2s both;
	-moz-animation: sali 1s ease-out 0.2s both;
	-o-animation: sali 1s ease-out 0.2s both;
	-ms-animation: sali 1s ease-out 0.2s both;
	animation: sali 1s ease-out 0.2s both;
}

#linguetta-2{
	height: 114px;
	width: 470px;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	position: absolute;
	z-index: 200;
	left: 50%;
	margin-left: -235px;
	-webkit-animation: sali 1s ease-out 0.2s both, appari 1.2s ease-out both;
	-moz-animation: sali 1s ease-out 0.2s both, appari 1.2s ease-out both;
	-o-animation: sali 1s ease-out 0.2s both, appari 1.2s ease-out both;
	-ms-animation: sali 1s ease-out 0.2s both, appari 1.2s ease-out both;
	animation: sali 1s ease-out 0.2s both, appari 1.2s ease-out both;
}

@-webkit-keyframes appari{
	0% {opacity:0;}
	99% {opacity: 0;}
	100% {opacity:1;}
}

@-moz-keyframes appari{
	0% {opacity:0;}
	99% {opacity: 0;}
	100% {opacity:1;}
}

@-o-keyframes appari{
	0% {opacity:0;}
	99% {opacity: 0;}
	100% {opacity:1;}
}

@-ms-keyframes appari{
	0% {opacity:0;}
	99% {opacity: 0;}
	100% {opacity:1;}
}

@-keyframes appari{
	0% {opacity:0;}
	99% {opacity: 0;}
	100% {opacity:1;}
}

.panel .back {
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	width: inherit;
	height: inherit;
}

.swing .back {
	width: 470px;
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-webkit-transform-origin: 0px 0;
	-moz-transform-origin: 0px 0;
	background: url(../images/linguetta.png);
	-webkit-animation: chiudi 1s linear 1.2s both;
	-moz-animation: chiudi 1s linear 1.2s both;
	-o-animation: chiudi 1s linear 1.2s both;
	-ms-animation: chiudi 1s linear 1.2s both;
	animation: chiudi 1s linear 1.2s both;
}

@-webkit-keyframes chiudi{
	0% {-webkit-transform: rotateX(0deg) translateY(-110px) translateZ(2px);}
	100% {-webkit-transform: rotateX(-180deg) translateY(-117px) translateZ(0px);}	
}
@-moz-keyframes chiudi{
	0% {-moz-transform: rotateX(0deg) translateY(-110px) translateZ(0px);}
	100% {-moz-transform: rotateX(-180deg) translateyY(-117px) translateZ(0px);}
}
@-o-keyframes chiudi{
	0% {-o-transform: rotateX(0deg) translateY(-110px) translateZ(0px);}
	100% {-o-transform: rotateX(-180deg) translateyY(-117px) translateZ(0px);}
}
@-ms-keyframes chiudi{
	0% {-ms-transform: rotateX(0deg) translateY(-110px) translateZ(0px);}
	100% {-ms-transform: rotateX(-180deg) translateyY(-117px) translateZ(0px);}
}
@-keyframes chiudi{
	0% {transform: rotateX(0deg) translateY(-110px) translateZ(0px);}
	100% {transform: rotateX(-180deg) translateyY(-117px) translateZ(0px);}
}

#lettera p{
	margin-top: 193px;
	font-family: Museo700;
	background: #fff;
	padding: 15px;
}

.inviare{
	display: block;
}

.display-none{
	display: none;
}


#segui .divisorio{
	margin-bottom: 20px;
}

#contatti{
	position: relative;
	z-index: 200;
}


#esagono{
    margin: -22px 0;
}
    
    
#map{
	height: 250px;
	width: 100%;
	background: #fff;
}

#segui{
    text-align: center;
    padding-top: 100px;
    background: #fff;
    position: relative;
    z-index: 100;
}

form + #segui{
    text-align: center;
    height: 180px;
    background: #fff;
    padding-top: 10px;
}

#hsForm_f1e476c7-1f4b-419f-85a5-2869663a311f > div.hubspot-link__container.sproket {
	display: none;
}

#segui h4{
	font-size: 1.5em;
}

#segui div{
    width: 90%;
    margin: 0 auto;
}

a.bt_social{
    height: 52px;
    width: 51px;
    display: block;
    float: left;
    margin: 0 4px;  
}

a#fb{
    background: url(../images/fb.png) no-repeat top;
}
a#fb:hover{
    background: url(../images/fb.png) no-repeat bottom;
}

a#tw{
    background: url(../images/tw.png) no-repeat top;
}
a#tw:hover{
    background: url(../images/tw.png) no-repeat bottom;
}

a#li{
    background: url(../images/li.png) no-repeat top;
}
a#li:hover{
    background: url(../images/li.png) no-repeat bottom;
}

a#pi{
    background: url(../images/pi.png) no-repeat top;
}
a#pi:hover{
    background: url(../images/pi.png) no-repeat bottom;
}

a#fs{
    background: url(../images/fs.png) no-repeat top;
}
a#fs:hover{
    background: url(../images/fs.png) no-repeat bottom;
}

a#gp{
    background: url(../images/gp.png) no-repeat top;
}
a#gp:hover{
    background: url(../images/gp.png) no-repeat bottom;
}

a#yu{
    background: url(../images/yu.png) no-repeat top;
}
a#yu:hover{
    background: url(../images/yu.png) no-repeat bottom;
}




#sub-footer{
    background: #222;
    color: #ccc;
    font-size: 0.625em;
    height: 17px;
    padding-top: 4px;
}


#sub-footer a{
    color: #ccc;
    text-decoration: none;
}




.divisorio{
	margin-bottom: 40px;
}

.col-340{
	width: 340px;
}


.breadcumb{
	font-size: 1em;
}

#servizi{
	margin-top: 100px;
	padding: 0px 0 30px 0;
	position: relative;
	z-index: 1;
}


.col-340 h1{
	border-bottom: 3px solid #333;
	width: 340px;
	text-align: left;
}

#servizi .col-300 p{
	text-align: left;
	margin-top: 35px;
	font: 0.750em/1.5em Arial;
}

.img_servizi{
	margin-bottom: 30px;
}

.arrow-right{
	background: url(../images/successivo.png) no-repeat center top;
	display: block;
	height: 207px;
	width: 169px;
}

.arrow-left{
	background: url(../images/precedente.png) no-repeat center top;
	display: block;
	height: 207px;
	width: 67px;
}

.arrow-right:hover{
	background: url(../images/successivo.png) no-repeat center bottom;
}

.arrow-left:hover{
	background: url(../images/precedente.png) no-repeat center bottom;
}

ul#lista{
	position: absolute;
	float: right;
	width: 700px;
	margin: 0 -480px;
	right: 50%;
}


ul#lista li{
	float: left;
	margin: 0 10px;
	width: auto;
}

ul#lista li a{
	text-decoration: none;
	font: 0.750em "Museo700";
}

ul#lista li a:hover{
	font: 0.750em "Museo700";
	color: #333;
}

ul#lista li a.current{
	text-decoration: none;
	font: 0.750em "Museo700";
}


[for="servizi-control"] {
	display: none;
}

input[type=checkbox] {
	display:none;
	position: absolute;
}


span.nav_servizi_open{
	display: none;
}

span.nav_servizi_close{
	display: none;
}





.pushfooter{
	display: none; 
}





.col-60{
    width: 60px;
    margin: 0 10px;
}

.col-140{
    width: 140px;
    margin: 0 10px;
}

.col-220{
	width: 22.9166667%;
	margin: 0 1.04157%;
}

.col-300{
	width: 300px;
	margin: 0 10px;
}

#servizi .col-300{
	margin: 0 20px;	
	
}

footer .container .sede{
	margin-left: 9.375%;	
}

.no-desktop{
	display: none;
}

.no-smartphone{
	display: inline-block;
}


.museo100{
    font-family: "Museo100", serif;
}

.museo300{
    font-family: "Museo300", serif;
}

.museo700{
    font-family: "Museo700", serif;
}

.museo900{
    font-family: "Museo900", serif;
}

.damion{
    font-family: 'Damion', cursive;
}


.center{
    text-align: center;
}

.right{
	text-align: center;
}

.sx{
	float: left;
}

.dx{
	float: right;
}

.clear{
    clear: both;
}




ul#lista-servizi li#cin{
	margin-left: 130px;
}




















/* Print styles!
-------------------------------------------------------------------------------*/
@media print {
	body{
		background: #fff;
	}

}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (min-width: 1024px) {
	body{
		overflow: hidden;
	}
	
	.container{
		width: 960px;
		max-width: 960px;
		margin: 0 auto;
	}
	
	#menu-control{
		display: none;
	}
	
	nav ul{
		float: right;
		margin-top: 22px;
	}
	
	nav ul li{
		float: left;
		margin: 0 10px;
	}
	
	input[type=checkbox] {
		display:none;
		position: absolute;
	}
	[for="menu-control"] {
		display: none;
	}
	
	.ca-container{
		position:relative;
		margin:0 auto 20px auto;
		width:930px;
		height:300px;
	}

	.ca-item{
		position:relative;
		float:left;
		width:930px;
		height:100%;
		text-align:center;
	}
	
	
	
}



/* No desktop */
@media screen and (max-width: 1024px) {
	
	body{
		overflow: hidden;
	}
	
	.siamo_divisorio{
		display: none;
	}
	
	header{
		position: relative;
	}
	
	#home{
		min-height: 500px;
	}

	#siamo{
		margin-top: 0px;
	}
	
	.facciamo_divisorio{
		margin-top: 151px;
		visibility: hidden;
	}
	
	#filosofia {
		margin-bottom: 140px;
	}
	
	
	#facciamo_int {
		height: auto;
		padding: 0;
		background: none;
	}
	
	#facciamo_int div{
		float: none;
		margin: 0 auto; 
		width: 239px;
		padding: 0 10px;
		padding-top: 37px;
		background: url(../images/facciamo_bg_singolo.png) no-repeat top center;
	}
	
	#facciamo_int h5, #facciamo_int p{
		text-align: center;
	}
	
	#facciamo_int span.facciamo_fig{
		display: block;
		height: 188px;
		width: 178px;
		margin: 0 auto 40px auto;
	}
	
	#facciamo_int span#vola{
		margin: 10px auto 30px auto;
	}
	
	
	/* progetti */
	
	#progetti_int{
		width: 300px;
		height: 300px;
		background: url(../images/progetti_bg_smartphone.png) no-repeat;
	}
	
	.ca-container{
		position:relative;
		margin:-2px auto 30px auto;
		width:280px;
		height:280px;
	}
	
	.ca-item{
		position:relative;
		float:left;
		width:300px;
		height:100%;
		text-align:center;
	}
	
	.ca-icon{
		width:280px;
		height:280px;
		position:relative;
		margin:0 -3px 0 -8px;	
		background:transparent url(../images/rdd.jpg) no-repeat -2px -10px;
		background-size: cover;
	}
	
	.ca-item-2 .ca-icon{
		background:url(../images/itn.jpg) no-repeat -2px -10px;
		background-size: cover;
	}
	
	.ca-more{
		display: none;	
	}
	
	
	
	
	
	
	
	
	html,body{
		height: 100%;
		overflow: visible;
	}
	
	#wrapper + footer{
		height: 16px;
	}


	#wrapper{
		min-height:100%;
		height:auto !important;
		height:100%;
		margin:0 auto -295px; /* margine negativo altezza footer */
	}
	
	.pushfooter{
		display: block;
		height:295px; 
		clear:both; 
	}
	
	
	
	
	.img_servizi{
		margin-top: 20px;
	}
	
	
	ul#lista-servizi li#cin{
		margin-left: 4%;
	}
	
	ul#lista-servizi li#uno, ul#lista-servizi li#sei{
		margin-left: 22%;
	}
	
	
}



/* Tra smartphone e desktop */
@media screen
and (min-width: 481px)
and (max-width: 1024px) {
	
	body{
		font: 15px/15px Arial;
	}
	
	.container{
		width: auto;
		padding: 0 2%;
	}

	#logo{
		margin-left: 2%;
	}

	#menu-control{
		display: none;
	}
	
	nav ul{
		float: right;
		margin-top: 22px;
	}

		
	nav ul li{
		float: left;
		margin: 0 10px;
	}
	
	#home{
		padding-top: 6%;
	}
	
	#home .hello{
		font: 9px/9px Arial;	
	}
	
	
	#home h1{
		margin-left: 2%;
	}
	
	.home_divisorio{
		border-top: 5px solid #333;
		margin-top: -52px;
		height: 48px;
	}
	
	
	.no-home h1{
		padding-top: 35px;
	}
	
	.no-home h1, .no-home h3{
		line-height: 32px;
		margin-bottom: 10px;
		margin-top: 10px;
	}	
	
	
	ul#lista-servizi{
		width: 90%;
		margin: 30px auto 0 auto;
	}
	
	ul#lista-servizi li{
		width: 40%;
		margin: 0 5% 15px 5%;
	}
	
	

	
	#clienti_int{
		background: url(../images/clienti_bg_smartphone.jpg) no-repeat top center;
		height: 602px;
		width: 221px;
		padding: 50px 49px 0 49px;
		margin: 20px auto 20px auto;
	}
	
	a.cliente{
		float: none;
	}
	
	#cliente_cuc{
		margin: 0;
	}
	
	#cliente_emi{
		width: 221px;
		margin: -2px 0;
	}
	
	#cliente_sga{
		margin: 10px 0 0 0;
	}
	
	#cliente_sga:hover{
		margin: 10px 0 0 21px;
	}
	
	#cliente_bre{
		margin: 5px 0 5px 0;
	}
	
	p.nota{
		text-align: center;
		margin: 0 auto;
	}
	
	.no-smartphone{
		display: none;
	}
	

	
	




	/* pagine servizi */
	
	#servizi{
		margin-top: 0;
	}


	.col-340{
		float: none;
		width: 92%;
		margin-left: 4%;
		margin-right: 4%;
	}
	
	#servizi .col-300{
		margin: 0;
		margin-left: 4%;
		margin-right: 4%;
	}
	
	.col-300{
		float: none;
		width: 92%;
		margin-top: 0;
	}
	
	.col-260{
		float: none;
		width: 100%;
		text-align: left;
		display: none;
	}
	
	
	
	
	.col-340 h1{
		width: 100%;
	}
		
	#servizi p{
		font: 0.750em/1.5em Arial;
		text-align: justify;
		margin: 0;
	}
	
	#servizi .col-300 p{
		margin-top: 10px;
		text-align: justify;
		margin-bottom: 15px;
	}
	
	.col-260 a.arrow-right{
		margin-right: 16%;
	}
	
	nav ul#lista{
		position: absolute;
		width: auto;
		margin: 0  2%;
		right: 0;
		
	}
	
	nav ul#lista li{
		float: left;
		text-align: center;
		display: inline;
		padding: 0;
		margin: 0;
	}
	
	nav ul#lista li a{
		padding:  0;
		margin: 0 10px;
	}
	
	
}






/* Menu a tendina ----------- */
@media only screen
and (max-width : 767px) {
	
	header{
		position: relative;
	}
	
	#menu-control{
		display: block;
		visibility: hidden;	
	}

	nav ul{
		width: 100%;
		height: auto;
		margin-bottom: 10px;
		background: #333;
		margin-top: 1px;
		float: right;
		padding-bottom: 10px;
	}
	nav ul li{
		float: none;	
		margin: 0;
		font: 18px/18px Arial;
	}

	nav ul li a.home{
		margin-top: 0px;
		background: none;
	}
	
	nav ul li a.home.current, nav ul li a.home:hover{
		background: none;
	}

	
	nav ul li a, nav ul li a.home, nav ul li a.current, nav ul li a.home.current{
		color: #999;
		text-decoration: none;
		font: 14px/14px "Museo700";
		width: 91%;
		height: auto;
		display: block;
		margin: 0;
		padding: 15px 5%;
		background: none;
	}
	
	nav ul li a:hover, nav ul li a:hover.home{
		background: #ffffff;
		color: #333;
	}
	
	[for="menu-control"] {
		display: block;
		position: relative;
		top: 0;
		width: 40px;
		float: right;
		height: 40px;
		margin-right: 2%;
		margin-top: 5px;
		cursor: pointer;
	}
	
	input[type=checkbox] {
		display:none;
		position: absolute;
	}
	
	input[type=checkbox] ~ ul {
		display: none;
	}
	
	
	input[type=checkbox]:checked ~ ul {
		display: block;
		}
	[for="menu-control"] span:nth-of-type(2) {
		display: none;
		visibility: hidden;
	}
	input[type=checkbox]:checked ~ [for="menu-control"] span:nth-of-type(2) {
		display: block;
		visibility: visible;
	}
	input[type=checkbox]:checked ~ [for="menu-control"] span:nth-of-type(1) {
		display: none;
		visibility: hidden;
	}
	
	span.nav_control_open{
		background: url(../images/nav_control_open.gif) no-repeat center top;
		display: block;
		height: 40px;
		width: 40px;
	}
	span.nav_control_open:hover{
		background: url(../images/nav_control_open.gif) no-repeat bottom;
	}
	
	span.nav_control_close{
		background: url(../images/nav_control_close.gif) no-repeat center bottom;
		display: block;
		height: 40px;
		width: 40px;
	}
	span.nav_control_close:hover{
		background: url(../images/nav_control_close.gif) no-repeat top;
	}
	
	/* home */
	
	#contattaci{
		display: none;
	}
	
	.no-desktop{
		display: inline-block;
	}
	
		
	
	
	footer #lista-contatti{
		margin-top: 0;
		position: relative;
		z-index: 100;
		height: auto;
		margin-bottom: 20px;
	}
	
	footer #lista-contatti div.container div{
		float: none;
		margin: 0 auto;
	}
	
	footer #lista-contatti h6{
		font: 1em "Museo700";
		padding: 20px 0 5px 0;
		border-bottom: 3px solid #333;
		text-align: center;
		padding-top: 19px;
	}
	
	
	footer #lista-contatti div.col-140.no-smartphone{
		display: none;
		height: 0;
	}
	
	footer #lista-contatti h6.top50{
		padding-top: 19px;
	}
	
	footer #lista-contatti p{
		font: 0.750em/1.5em Arial;
		text-align: center;
	}
	
	footer .container .sede{
		margin: 0 auto;
	}
	
	.col-140{
		width: 140px;
		margin: 0 10px;
	}
	
	
	#sub-footer{
		background: #222;
		color: #ccc;
		font-size: 0.625em;
		height: 44px;
		padding-top: 4px;
		text-align: center;
	}
	
	#sub-footer .container p{
		float: none;
		text-align: center;
	}
	
	footer #lista-contatti .no-smartphone{
		display: block !important;
		width: 140px;
		margin: 0 10px;
	}
	
	
	#servizi{
		margin-top: 0;
	}
	
	
	#wrapper nav ul{
		margin-top:0px;
	}
	
	
	
	
	
	nav ul li#bt_servizi{
		display: block;
	}
	
	
	nav ul li#bt_servizi:hover a:hover{
		background:none;
		background: #fff;
	}
	
	
	nav ul li#bt_servizi:hover ul li a:hover{
		background: #fff;
	}
	
	nav ul#lista{
		background: #444;
		position: relative;
		width: 100%;
		top: 2px;
		margin: 20px 0 0 0;
		padding: 0;
		margin-bottom: 18px;
		display: none;
		right: 0;
	}
	
	
	
	
	nav ul#lista li{
		float: none;
		text-align: left;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	
	nav ul#lista li a{
		padding:  10px 1% 10px 9%;
		margin: 0px;
	}
	
	

	
	[for="servizi-control"] {
		display: block;
		position: relative;
		top: 0;
		width: 100%;
		float: right;
		height: auto;
		margin-top: -42px;
		cursor: pointer;
	}
	
	input[type=checkbox] {
		display:none;
		position: absolute;
	}
	
	input[type=checkbox] ~ ul#lista {
		display: none;
	}
	
	input[type=checkbox]:checked ~ ul#lista {
		display: block;
	}
		
	[for="servizi-control"] span:nth-of-type(2) {
		display: none;
		visibility: hidden;
	}
	input[type=checkbox]:checked ~ [for="servizi-control"] span:nth-of-type(2) {
		display: block;
		visibility: visible;
	}
	input[type=checkbox]:checked ~ [for="servizi-control"] span:nth-of-type(1) {
		display: none;
		visibility: hidden;
	}
	
	span.nav_servizi_open{
		background: url(../images/freccia-giu.png) no-repeat 95% center;
		display: block;
		height: 32px;
		width: auto;
		margin-top: -2px;
		padding-left: 5%;
		padding-top: 12px;
		font: 15px "Museo700";
		color: rgba(200, 200, 200, 0);
	}
	span.nav_servizi_open:hover{
		background: #fff url(../images/freccia-giu.png) no-repeat 95% center;
		color: #333;
	}
	
	
	span.nav_servizi_close{
		background: #fff url(../images/freccia-su.png) no-repeat 95% center;
		display: block;
		height: 32px;
		width: auto;
		margin-top: -2px;
		padding-left: 5%;
		padding-top: 12px;
		font: 15px "Museo700";
		width: auto;
		color: #333;
	}
	span.nav_servizi_close:hover{
		background: #fff url(../images/freccia-su.png) no-repeat 95% center;
	}
	
	
	#cliente_sga:hover{
		margin-left:21px;
	}
	
	
	
	
	
	
	
	
	#wrapper + footer #lista-contatti{
		display: none;
	}


	footer{
		height: auto;
	}

	#wrapper{
		margin:0 auto -323px; /* margine negativo altezza footer */
	}
	
	.pushfooter{
		height:323px; 
	}
	
	
	
	
	
	ul#lista-servizi li#cin{
		margin-left: 5%;
	}
	
	ul#lista-servizi li#uno, ul#lista-servizi li#sei{
		margin-left: 5%;
	}
	
	ul#lista-servizi li#set{
		margin-left: 29%;
	}
	
	
}





/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
	
	body{
		font: 14px/14px Arial;
		max-width: 480px;
		overflow-x: hidden;
	}
	header{
		position: relative;
	}
	.container{
		width: auto;
		padding: 0 2%;
	}
	
	/* menu */
	
	#logo{
		margin-left: 2%;
	}
	
	#home .hello{
		font: 8px/8px Arial;	
	}
	
	
	#home .hello h2, #home .hello h3{
		float: left;
		text-align: left;
		margin-left: 2%;
	}
	
	#home .hello h2{
		line-height: 1em;
	}
	
	#home .hello h2 .damion{
		line-height: 1.15em;
	}
	
	#home h1{
		margin-left: 0;
	}
	
	
	.down{
		display: block;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		width: 40px;
		height: 40px;
		margin: 0 auto;
		margin-top: 60px;
	}
	.down:hover{
		background: url(../images/down.png) no-repeat bottom;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		width: 40px;
		height: 40px;
	}
	
	.home_divisorio{
		border-top: 5px solid #333;
		margin-top: -50px;
		height: 45px;
	}
	
	.no-home {
		padding-top: 0 !important;
		padding-bottom: 20px !important;
	}
	
	.no-home h1{
		padding-top: 35px;
	}
	
	.no-home h1, .no-home h3{
		line-height: 32px;
		margin-bottom: 40px;
    margin-top: 50px;
	}
	
	.no-home h2, .no-home h4{
		padding: 0 10px;
	}
	
	
	
		
	.no-desktop{
		display: inline-block;
	}
	
	.no-smartphone{
		display: none;
	}
	
	
	
	/* siamo */
	
	#siamo{
		font: 14px/14px Arial;
		margin-top: 0px;
		height: auto;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	
	.siamo-divisorio{
		display: none;
	}
	
	#siamo img{
		margin-top: 10px;
		margin-bottom: 20px;	
	}
	

	
	
	/* filosofia */
	
	#filosofia{
		margin-bottom: 140px;
	}
	
	#facciamo_int {
		height: auto;
		padding: 0;
		background: none;
	}
	
	#facciamo_int div{
		float: none;
		margin: 0 auto; 
		width: 239px;
		padding: 0 10px;
		padding-top: 37px;
		background: url(../images/facciamo_bg_singolo.png) no-repeat top center;
	}
	
	#facciamo_int h5, #facciamo_int p{
		text-align: center;
	}
	
	#facciamo_int span.facciamo_fig{
		display: block;
		height: 188px;
		width: 178px;
		margin: 0 auto 40px auto;
	}
	
	#facciamo_int span#vola{
		margin: 10px auto 30px auto;
	}
	
	/* servizi */
	
	ul#lista-servizi{
		width: 100%;
		margin: 30px auto 0 auto;
	}
	
	ul#lista-servizi li{
		width: 100%;
		margin: 0 auto 15px auto;
	}
	
	ul#lista-servizi li a span.serv{
		height: 173px;
		width: 100%;
		min-width: 174px;
		background-position: top center;
		margin: 0;
	}
	


	.siamo_divisorio{
		margin-top: 600px;
		visibility: hidden;
	}

	.facciamo_divisorio{
		margin-top: 151px;
		visibility: hidden;
	}
	
	
	
	/* progetti */
	
	#progetti_int{
		width: 300px;
		height: 300px;
		background: url(../images/progetti_bg_smartphone.png) no-repeat;
	}
	
	.ca-container{
		position:relative;
		margin:-2px auto 30px auto;
		width:280px;
		height:280px;
		overflow-x: hidden;
	}
	
	.ca-item{
		position:relative;
		float:left;
		width:300px;
		height:100%;
		text-align:center;
	}
	
	.ca-icon{
		width:280px;
		height:280px;
		position:relative;
		margin:0 -3px 0 -8px;	
		background:transparent url(../images/rdd.jpg) no-repeat -2px -10px;
		background-size: cover;
	}
	
	.ca-item-2 .ca-icon{
		background:url(../images/itn.jpg) no-repeat -2px -10px;
		background-size: cover;
	}
	
	.ca-more{
		display: none;	
	}
	
	
	
	
	/* clienti */
	
	#clienti_int{
		background: url(../images/clienti_bg_smartphone.jpg) no-repeat top center;
		height: 602px;
		width: 221px;
		padding: 50px 49px 0 49px;
		margin: 20px auto 20px auto;
	}
	
	a.cliente{
		float: none;
	}
	
	#cliente_cuc{
		margin: 0;
	}

	#cliente_emi{
		width: 221px;
		margin: -2px 0;
	}
	
	
	#cliente_sga{
		margin: 10px 0 8px 0;
	}
	
	p.nota{
		text-align: center;
		margin: 0 auto;
	}
		
	
	/* form */
	
	#contatto{
		border-top: none;
	}
	
	#contatto h3{
		padding-top: 40px;
	}
	
	.mailname, .mailaddress{
		height: 30px;
		padding: 0 2%;
		width: 76%;
		margin: 5px 0;
	}
	
	.mailtext{
		min-height: 110px;
		padding: 10px 2%;
		margin-left: 0;
		margin-right: 0;
		width: 76%;
		max-height: 110px;
		min-width: 76%;
		max-width: 76%;
	}
	
	#lettera, #lettera-2, #linguetta, #linguetta-2{
		display: none;
	}
	
	#lettera-mobile{
		background: #fff url(../images/lettera-mobile.gif) no-repeat center;
		background-size: contain;
		height: 226px;
		width: 82%;
		border: 3px solid #333;
		border-radius: 3px;
		margin: 0 auto;
		margin-top: -290px;
		position: absolute;
		left: 50%;
		margin-left: -42%;
		z-index: 300;
		-webkit-animation: zoomOut 0.8s ease-out 0.2s both;
		-moz-animation: zoomOut 0.8s ease-out 0.2s both;
		-o-animation: zoomOut 0.8s ease-out 0.2s both;
		-ms-animation: zoomOut 0.8s ease-out 0.2s both;
		animation: zoomOut 0.8s ease-out 0.2s both;
	}
	
	#lettera-mobile p{
		padding: 10px;
		background: #fff;
		margin-top: 236px;
		font-family: "Museo700";
	}
	
		
	@-webkit-keyframes zoomOut{
		0% {-webkit-transform: scale(1.5); opacity: 0;}
		100% {-webkit-transform: scale(1); opacity: 1;}	
	}
	@-moz-keyframes zoomOut{
		0% {-moz-transform: scale(1.5); opacity: 0;}
		100% {-moz-transform: scale(1); opacity: 1;}
	}
	@-o-keyframes zoomOut{
		0% {-o-transform: scale(1.5); opacity: 0;}
		100% {-o-transform: scale(1); opacity: 1;}
	}
	@-ms-keyframes zoomOut{
		0% {-ms-transform: scale(1.5); opacity: 0;}
		100% {-ms-transform: scale(1); opacity: 1;}
	}
	@-keyframes zoomOut{
		0% {transform: scale(1.5); opacity: 0;}
		100% {transform: scale(1); opacity: 1;}
	}

	footer #lista-contatti{
		margin-top: 0;
		position: relative;
		z-index: 100;
		height: auto;
		margin-bottom: 20px;
	}
	
	footer #lista-contatti div.container div{
		float: none;
		margin: 0 auto;
	}
	
	footer #lista-contatti h6{
		font: 1em "Museo700";
		padding: 20px 0 5px 0;
		border-bottom: 3px solid #333;
		text-align: center;
		padding-top: 19px;
	}
	
	footer #lista-contatti div.col-140.no-smartphone{
		display: none;
		height: 0;
	}
	
	footer #lista-contatti h6.top50{
		padding-top: 19px;
	}
	
	footer #lista-contatti p{
		font: 0.750em/1.5em Arial;
		text-align: center;
	}
	
	footer .world{
		display: block;
		height: 16px;
		width: 27px;
		background: url(../images/world.png) no-repeat;
		position: relative;
		float: right;
		margin-right: -34px;
		margin-top: -39px;
		opacity: 0.3;
	}	
	
	footer .world:hover{
		opacity: 1;
	}
	
	footer .container .sede{
		margin: 0 auto;
	}
	
	.col-140{
		width: 140px;
		margin: 0 10px;
	}

	
	
	#map{
		border-top: 1px solid #333;
	}
	
	
	
	#sub-footer{
		background: #222;
		color: #ccc;
		font-size: 0.625em;
		height: 44px;
		padding-top: 4px;
		text-align: center;
	}
	
	#sub-footer .container p{
		float: none;
		text-align: center;
	}
	
	#sub-footer .container p.dx{
		padding-bottom: 2px;
	}
	
	
	    
	#map{
		display: none;
	}
	
	
	
	
	
	/* pagine servizi */
	
	
	#servizi{
		padding-bottom: 20px;
	}
	
	.col-340{
		float: none;
		width: 92%;
		margin-left: 4%;
		margin-right: 4%;
	}
	
	.col-300{
		float: none;
		width: 92%;
		margin-left: 4%;
		margin-right: 4%;
		margin-top: 0;
	}
	
	#servizi .col-300{
		margin-left: 4%;
		margin-right: 4%;
	}
	
	.col-260{
		float: none;
		width: 100%;
		text-align: left;
		display: none;
	}
	
	
	
	
	.col-340 h1{
		width: 100%;
	}
		
	#servizi p{
		font: 0.750em/1.5em Arial;
		text-align: justify;
		margin: 0;
	}
	
	#servizi .col-300 p{
		margin-top: 10px;
		text-align: justify;
		margin-bottom: 15px;
	}
	
	.col-260 a.arrow-right{
		margin-right: 16%;
	}
	
	
	#wrapper + footer #lista-contatti{
		display: none;
	}
	
	
	
	
	ul#lista-servizi li#cin{
		margin-left: auto;
	}
	
	ul#lista-servizi li#uno, ul#lista-servizi li#sei{
		margin-left: auto;
	}
	ul#lista-servizi li#set{
		margin-left: auto;
	}
	
	
	

	
		
	
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
	
	body{
		font: 14px/14px "Arial";
		overflow-x: hidden;
	}
	
	#home .hello{
		font: 6px/6px "Arial";	
	}
	
	.home_divisorio{
		border-top: 3px solid #333;
		margin-top: -35px;
		height: 35px;
	}
	
	.no-home h1{
		font-size: 1.8em;
	}
	
	.no-home h3{
		font-size: 1.8em;
	}
	
	
		
}
	



/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 440px) {
	
	body{
		font: 14px/14px "Arial";
		overflow-x: hidden;
	}
	
	#segui{
		padding-top: 20px;
	}

	
	
	#fb, #fs{
		margin-left: 34px;
	}
	
	#gp{
		margin-bottom: 10px;
	}
	
}
	
	
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width : 480px){
	
	body{
		font: 14px/14px "Arial";
		overflow-x: hidden;
	}
	
	#home .hello{
		font: 8px/8px Arial;	
	}
	
	#home{
		min-height: 300px;
	}

	img {
		height: auto;
	}
	
}





/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
	
	body{
		font: 15px/15px "Arial";
		max-width: 1024px;
		width: 100%;
		overflow-x: hidden;
	}
	
	.container{
		margin: 0 auto;
		text-align: center;
	}

	
	#home .hello{
		font: 11px/11px "Arial";	
	}
	
	.home_divisorio{
		border-top: 6px solid #333;
		margin-top: -65px;
		height: 60px;
	}
	
	#home h1{
		margin-left: 40%;
	}
	
	#facciamo_int{
		width: 560px;	
	}
	
	#facciamo_int div{
		float: left;
		margin: 0 10px; 
		width: 239px;
		padding: 0 10px;
		padding-top: 37px;
		background: url(../images/facciamo_bg_singolo.png) no-repeat top center;
		min-height: 365px;
	}
	
	
	.col-220{
		width: 20%;
		margin: 0 2.5%;
	}
	
	
	
	#sub-footer{
		background: #222;
		color: #ccc;
		font-size: 0.625em;
		height: 100%;
		padding-top: 4px;
		text-align: left;
	}
	
	#sub-footer .container p.dx{
		float: right;
	}
	
	#sub-footer .container p.sx{
		float: left;
		text-align: left;
	}
	
	
	ul#lista-servizi{
		width: 90%;
		margin: 30px auto 0 auto;
	}
	
	ul#lista-servizi li{
		width: 25%;
		margin: 0 4% 15px 4%;
	}
	
	ul#lista-servizi li a span.serv{
		height: 173px;
		width: 100%;
		min-width: 174px;
		background-position: top center;
		margin: 0;
	}
	
	
	#clienti_int{
		background: url(../images/clienti_bg_ipad.png) no-repeat top center !important;
		height: 366px;
		width: 560px;
		padding: 60px 50px 0 50px;
		margin: 20px auto 20px auto;
	}
	
	a.cliente{
		float: left;
	}
	
	#cliente_emi, #cliente_sga, #cliente_sga:hover {
		width: 221px;
	}
	
	#cliente_qua, #cliente_sga,  #cliente_sga:hover , #cliente_due, #cliente_mon, #cliente_dom, #cliente_emi, #cliente_cuc, #cliente_bre{
		margin: 5px 0 5px 35px;
		float: left;
	}

	

	.ca-nav-prev{
		margin-left: -40px;
	}
	
	
	.ca-nav-next{
		margin-right: -40px;
	}
	
	
	footer #lista-contatti{
		margin: 0 auto;
		margin-top: -210px;
		position: relative;
		z-index: 100;
		height: 140px;
		margin-bottom: 70px;
		width: 760px;
	}
	
	footer #lista-contatti div.container div{
		float: left;
		margin: 0 10px;
		margin-top: 20px;
	}
	
	footer #lista-contatti h6{
		font: 1em "Museo700";
		padding: 20px 0 5px 0;
		border-bottom: 3px solid #333;
		text-align: center;
		padding-top: 10px;
	}
	
	footer #lista-contatti h6.top50{
		padding-top: 19px;
	}
	
	footer #lista-contatti p{
		font: 0.750em/1.5em Arial;
		text-align: center;
	}
	
	footer .container .sede{
		margin: 0 auto;
	}
	
	.col-140{
		width: 120px;
		margin: 0 10px;
	}


	
	footer #lista-contatti .no-smartphone{
		display: block;
		width: 140px;
		margin: 0 10px;
	}

	#footer .col-140{
		width: 140px;
	}
	
	
	.no-smartphone{
		display: inline-block;
	}

	
	
	
	
	
	
	/* pagine servizi */
	
	
	.col-340{
		float: none;
		width: 58.66666%;
		margin-left: 2%;
		margin: 0 auto;
		font: 15px/15px Arial;
	}
	
	#servizi .col-300{
		margin: 0 auto;
	}
	
	.col-300{
		float: none;
		width: 58.66666%;
		margin-left: 2%;
		margin-right: 2%;
		margin-top: 0;
		font: 15px/15px Arial;
	}
	
	.col-260{
		float: none;
		width: 240px;
		margin: 0 auto;
		display: inline-block;
	}
	
	
	
	
	nav ul li#bt_servizi{
		margin-top: -10px;
		display: block;
		padding: 10px 18px 10px 5px;
		background: url(../images/freccina-giu.png) no-repeat 49px;
	}
	
	nav ul li#bt_servizi:hover{
		display: block;
		background: #fff url(../images/freccina-giu.png) no-repeat 49px;
	}
	
	nav ul li#bt_servizi:hover a:hover{
		background:none;
	}
	
	nav ul li#bt_servizi:hover ul li a:hover{
		background: #fff;
	}
	
	nav ul#lista{
		position: absolute;
		display: none;
		width: 200px;
		top: 70px;
		right: 95px;
		background: #333;
		margin: 0;
		padding: 3px 0;
	}
	
	nav ul li#bt_servizi:hover ul#lista{
		display: block;
	}
	
	nav ul ul#lista li{
		float: none;
		width: 100%;
		display: block;
		text-align: left;
		margin: 0;
	}
	
	nav ul ul#lista li a{
		display: block;
		margin: 0;
		padding: 5px 10px;
		
	}
	
	nav ul ul#lista li a:hover{
		background: #fff;	
	}
	
	
	
	nav ul ul#lista li a.current{
		background: #fff;	
	}
	
	
	
	
	
	
	
	[for="servizi-control"] {
		display: none;
	}
	
	input[type=checkbox] {
		display:none;
		position: absolute;
	}

	
	span.nav_servizi_open{
		display: none;
	}
	
	span.nav_servizi_close{
		display: none;
	}

	
	
	
	
	
	
	
	
	
	.col-340 h1{
		width: 100%;
	}	
		
	#servizi p{
		font: 0.750em/1.5em "Arial";
		text-align: justify;
		margin: 0;
	}
	
	#servizi .col-300 p{
		margin-top: 10px;
		text-align: justify;
		margin-bottom: 15px;
	}
	
	.col-260 a.arrow-right{
		margin-right: 0;
	}
	

	
}



/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
	
	hgroup.hello{
		margin-left: 120px;
	}
	
	
	#home h1 {
		margin-left: 36%;
	}
	
	
} 


/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
	

	
	hgroup.hello{
		margin-left: 40px;
	}
	
	header{
		min-width: 768px;
	}
	
	
	#home h1 {
		margin-left: 42%;
	}
	
	#home #contattaci{
		margin-top: 0%;
		margin-bottom: 9%;
		margin-right: 4%
	}
	
	.down{
		margin-top: 17%;
	}
	
}

/* No Smartphones ----------- */
@media only screen and (min-width : 480px){
	#lettera-mobile{
		display: none;
	}

	#prodotti-rdd {
		padding: 50px 0;
		
	}
	#prodotti-gol {
		padding-top: 50px;
	}
	
	#prodotti-dd {
		padding-top: 50px;
	}

}

#prodotti-rdd {
	background-color: white;
	padding-left: 20px;
	padding-right: 20px;

}
#prodotti-gol {
	padding-top: 50px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #9A5989;
}
#prodotti-dd {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 50px;
	background-color: #FDC50A;
}