@charset "utf-8";
/* CSS Document */

.colonna{ 
	font-size:0.9em;
	padding:42px 8px 100px 8px;
}

.colonna ul li {
	width:100%;
}

/* ----------------multicolonna------------------ */

.multicolonna{
	width: 96%;
	margin: 0 2%;
	text-align:justify;
}

/* ----------------blocco a 4------------------ */

.images-block-4  {
	padding:16px 0 50px 0;
}

.images-block-4  ul li p {
	padding-bottom: 0.5em;
	padding-top: 0.5em;
}

.images-block-4 ul li {
	width:49%;
	margin-bottom:1.5em;
	color: #666;
	float:left;
	
	transition: box-shadow 0.2s ease-in;
	-webkit-transition: box-shadow 0.2s ease-in;
	-moz-transition: box-shadow 0.2s ease-in;
	-o-transition:c box-shadow 0.2s ease-in; 
	-ms-transition-duration:  box-shadow 0.2s ease-in;
}

.images-block-4 ul li:hover {
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-o-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-ms-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
}

.images-block-4 ul li:nth-child(odd) {
	margin-right:2%;
}

.images-block-4 .intestazione {
	padding-bottom:1em;
	text-align:center;
}

.images-block-4 .title-cont {
	color:#fff;
	width:100%;
	background-color:#242023/* sfondo color*/;
	border-top: 2px solid #fff;
	transition:background-color 0.2s ease-in;
	-webkit-transition:background-color 0.2s ease-in;
	-moz-transition:background-color0.2s ease-in;
	-o-transition:background-color 0.2s ease-in; 
	-ms-transition-duration: transform 0.2s ease-in;
}

.images-block-4  .title-cont {
	background-color:#332D32 /* sfondo light*/;
}

.images-block-4  .title-cont .title{
	padding:8px;
	transition:color 0.2s ease-in;
	-webkit-transition:color 0.2s ease-in;
	-moz-transition:color0.2s ease-in;
	-o-transition:color 0.2s ease-in; 
	-ms-transition-duration: color 0.2s ease-in;
}

.images-block-4  .title-cont .title{
	color:#c19f17/* primary color*/;
}

/* ----------------blocco a 2------------------ */

.images-block-2{
	padding-top:1em;
}

.images-block-2 ul li {
	width:100%;
	margin-bottom:1.5em;
	color: #666;
	float:left;
}

/* -----------------inizio elementi centrati------------------ */

.elementi-centrati .posts-list {
list-style-type: none;
margin: 0 auto;
margin-bottom: 32px;
text-align: center;
}

.elementi-centrati .posts-list > li {
display: inline;
margin-left:2%;
margin-right:2%;
margin-bottom:16px;
display: inline-block;
vertical-align: top;
width: 96%;
text-align: left;

	/*transition: box-shadow 0.2s ease-in;
	-webkit-transition: box-shadow 0.2s ease-in;
	-moz-transition: box-shadow 0.2s ease-in;
	-o-transition:c box-shadow 0.2s ease-in; 
	-ms-transition-duration:  box-shadow 0.2s ease-in;*/
}

.elementi-centrati .posts-list > li:hover {
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-o-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-ms-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	background:#FFFFFF; /*colore mouse over*/
}
.elementi-centrati .posts-list > li .description {
	padding:8px;
	font-size:0.9em;
}

.elementi-centrati .posts-list > li .description2 {
	padding:8px;
	font-size:0.9em;
	text-align: center;
}

.elementi-centrati .posts-list a {
	color:#666;
}

/* -----------------inizio elementi centrati stampe------------------ */

.elementi-centrati-stampe .posts-list {
list-style-type: none;
margin: 0 auto;
margin-bottom: 32px;
text-align: center;
}

.elementi-centrati-stampe .posts-list > li {
display: inline;
margin-left:2%;
margin-right:2%;
margin-bottom:16px;
display: inline-block;
vertical-align: top;
width: 96%;
text-align: left;

	/*transition: box-shadow 0.2s ease-in;
	-webkit-transition: box-shadow 0.2s ease-in;
	-moz-transition: box-shadow 0.2s ease-in;
	-o-transition:c box-shadow 0.2s ease-in; 
	-ms-transition-duration:  box-shadow 0.2s ease-in;*/
}

.elementi-centrati-stampe .posts-list > li:hover {
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-o-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-ms-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	background:#FFFFFF; /*colore mouse over*/
}
.elementi-centrati-stampe .posts-list > li .description {
	padding:8px;
	font-size:0.9em;
}

.elementi-centrati-stampe .posts-list > li .description2 {
	padding:8px;
	font-size:0.9em;
	text-align: center;
}

.elementi-centrati-stampe .posts-list a {
	color:#666;
}

/* -----------------post list con icone------------------ */

.icone-taglieri .posts-list {
list-style-type: none;
text-align: center;
}

.icone-taglieri .posts-list ul li {
margin: 8px;
display: inline-block;
vertical-align: top;
width: 200px;	
}


/* ---------credits------------------ */

.logo-credits{
	width:288px;
	margin:auto;
	margin-top:16px;
}

.credits-wrap{
	width:288px;
	margin:auto;
	margin-top:48px;
	font-family: 'Roboto Slab', serif;
	text-align:center;
	margin-bottom:100px;
}

.credits-wrap .credits-title{
	margin:auto;
	padding:25px;
}

.credits-wrap .service-wrap {
	width:250px;
	margin:auto;
}

.credits-wrap  .icone-centrate .posts-list {
	list-style-type: none;
	text-align: center;
	padding-top:16px;
	padding-bottom:16px;
	width:250px;
	margin:auto;
	border-top:1px dashed #999;
	border-bottom:1px dashed #999;
}

.credits-wrap  .icone-centrate .posts-list > li {
	display: inline;
	margin: 10px;
	display: inline-block;
	vertical-align: top;
	width: 100px;
	height: 120px;
	text-align:center;
}

.credits-wrap  .icone-centrate .posts-list img {
	width: 65px;
	margin:auto;
	margin-bottom:8px;
}

.credits-wrap  .button-chef {
	padding:35px;
}

.btn-chef-wrap {
	width:288px;
	margin:auto;
}

.btn-chef {
	font-family: 'Roboto Slab', serif;
	color:white;
  	background-color:#82163e;/* chef*/
	margin:auto;
	 position: relative;
 	 left: 50%;
  	transform: translateX(-50%);

}


.btn-chef:hover {
   background-color: #961848 /* chef-light*/;
}

.logo-apertura{
	margin:auto;
	width:288px;
}

.btn-chef a {
	color:#fff;
}

.img-container {
    width: 100%;
	margin-bottom:16px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
/* ---------faccine animate------------------ */

#cont_teste{
	list-style-type: none;
	margin: 0 auto;
	padding-bottom: 5em;
	text-align: center;
}

#cont_teste li{
	display: inline;
	margin-left:2%;
	margin-right:2%;
	display: inline-block;
	vertical-align: top;
	width: 96%;
	text-align:left;
	width:270px;
	height:550px;
}

 .maschera{
	width:270px;
	height:295px;
	
	background-repeat:no-repeat;
	background-size:contain;
	position:absolute;
	
	padding-top:295px;
	text-align:center;
}

/*.ig_sfondo{
	position:absolute;
	background-image:url(img/ig_sfondo.png);
	background-size:contain;
	height:295px;
	width:270px;

}*/

.testa{
	position:absolute;
	background-size:contain;
	height:295px;
	width:270px;
	-webkit-animation: bounce  ease-out;
	-moz-animation: bounce  ease-out;
	-o-animation: bounce  ease-out;
	animation: bounce  ease-out;
	-webkit-animation-duration:6s;
		-moz-animation-duration:6s; /* firefox */
	-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
	animation-iteration-count:infinite; /* firefox ma non son sicuro */
}

.testa_and{
background-image:url(structure/imgs/testa.png);
background-repeat:no-repeat;
}

.testa_ig{
background-image:url(structure/imgs/testa_ig.png);
background-repeat:no-repeat;

}

.corpo{
	position:absolute;
	background-size:contain;
	height:295px;
	width:270px;
	-webkit-animation: bouncec  ease-out;
	-moz-animation: bouncec  ease-out;
	-o-animation: bouncec  ease-out;
	animation: bouncec  ease-out;
	-webkit-animation-duration:6s;
		-moz-animation-duration:6s; /* firefox */
	-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
	animation-iteration-count:infinite; /* firefox ma non son sicuro */

}
   
.corpo_and{  
   	background-image:url(structure/imgs/corpo.png);
 }
 
.corpo_ig{  
   	background-image:url(structure/imgs/corpo_ig.png);
	margin-left:0;
	margin-top:0px;
}

.occhi{
	position:absolute;
	background-size:contain;
	height:295px;
	width:270px;
	-webkit-animation: bounceo  ease-out;
	-moz-animation: bounceo  ease-out;
	-o-animation: bounceo  ease-out;
	animation: bounceo  ease-out;
	-webkit-animation-duration:6s;
		-moz-animation-duration:6s; /* firefox */
	-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
	animation-iteration-count:infinite; /* firefox ma non son sicuro */
}

.ritardo_ig{	
	-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    animation-delay: 2s;
}

.occhi_and{
	background-image:url(structure/imgs/occhi.png);
}

.occhi_ig{
	background-image:url(structure/imgs/occhi_ig.png);
	margin-left:0;
	margin-top:0px;
}

.social-icons {
	width:270px;
	list-style-type: none;
	margin: 0 auto;
	text-align: center;
	margin-bottom:16px;
}

.social-icons .social-planet {
	display: inline;
	margin:6px;
	display: inline-block;
	vertical-align: top;
	width: 50px;
	height:50px;
	text-align:center;
	-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.contatti-wrap .social-icons {
	height:130px;
	text-align:left;
}

.social-icons .social-planet:hover {
	padding-top:16px;
}

#footer .social-icons {
	height:80px;
	margin-top:15px;
}


/*--------------------------- portfolio---------------------------*/

#ancora-portfolio{
	height:4em;
}

.ante{
	float:left;
	width:47%;
	margin-left:2%;
	background-color:#fbfafa;	
}

.ante img{
	/*border-top-left-radius:0.3em;
	border-top-right-radius:0.3em;*/
}

.ante .ante_testo{
font-size:0.9em;
padding-top:5px;
width:96%;
height:64px;
padding-left:2%;
padding-right:2%;
border-top:	1px solid #83163F/* primary color*/;
margin-left:auto;
margin-right:auto;
}

.portfolio-btn{
	background-image:url(structure/imgs/portfolio-space.png);
	background-size:contain;
	margin-left:auto;
	margin-right:auto;
	width:280px;
	height:146px;
	position:relative;
	text-align:center;
	margin-bottom:64px;
	margin-top:32px;
}
	
.portfolio-btn .btn{
	font-size:1.5em;
	margin-top:-3em;
}
	
.portfolio-btn .portfolio-astro{
	background-image:url(structure/imgs/portfolio-astro.png);
	background-size:contain;
	width:280px;
	height:146px;
}

/*--------------------------- servizi ---------------------------*/

.astronauta-bandiera{
	margin:auto;
	width:200px;
}

.servizi-apertura {
list-style-type: none;
margin: 0 auto;
margin-bottom: 32px;
text-align: center;
}

.servizi-apertura > li {
display: inline;
padding:16px;
display: inline-block;
vertical-align: top;
width: 120px;
text-align:left;
color:#82163e;
}

.servizi-apertura > li .txt-servizi-apertura  {
	text-align:center;
	
}

/*--------------------------- siti web---------------------------*/
.img-center{
	max-width:800px;
}

.come-lavoriamo {
list-style-type: none;
margin: 0 auto;
margin-bottom: 100px;
text-align: center;
}

.come-lavoriamo img {
	display:block;
	margin:auto;
	width:100px;
	margin-top:16px;
	margin-bottom:16px;
}

.come-lavoriamo > li {
display: inline;
padding:10px;
display: inline-block;
vertical-align: top;
max-width: 288px;
text-align:left;
}

.divider{
	margin:90px 0 60px 0;
	border-top: 1px solid #82163e;	
}

/*--------------------------- progetti ---------------------------*/
.contenitore-progetto{
		background-color:#fbfafa;
		width:100%;
		padding-top:3.4em;	
}

.contenuto-progetto{
		width:98%;
		margin:auto;	
}

.contenuto-progetto h1{
	margin-bottom:36px;	
}
.to-portfolio{
	margin-top:32px;
	margin-bottom:32px;
	text-align:center;	
}

.ortobio{
	background-color:#57412E;
}
	
.vero{
	background-color:#000;
}

.gif_ego{
margin-left:30%;
 width:40%;
}	

/* ---------web design------------------ */

	
.block-float{
	padding-bottom:32px;
	}	
	

@media screen and (min-width: 624px){
	.elementi-centrati .posts-list > li {
margin: 8px;
width: 288px;
	}

.servizi-apertura {
	margin-top:32px;
}
	
	.servizi-apertura > li {
width: 190px;
font-size:1.4em;
}
	
}

@media screen and (min-width: 768px){
	
	/* ----------------multicolonna------------------ */

.multicolonna{
	-webkit-column-count: 2;
	-webkit-column-gap:32px;
	-moz-column-count: 2;
	-moz-column-gap:32px;
	column-count: 2;
	column-gap: 32px;
}

/* ----------------fine multicolonna------------------ */
.block-float{
	float:left;
	width:50%;
}	

	
.colonna ul li {
	float:left;
	width:32%;
}

.colonna ul li:not(:last-child) {
	margin-right: 2%;
}

.images-block-2{
	padding-top:1em;
}

.images-block-2 ul li {
	width:49%;
	margin-bottom:1.5em;
	color: #666;
	float:left;
}

.images-block-2 ul li:nth-child(odd) {
	margin-right:2%;
}

.images-block-2 ul li p {
	padding-bottom: 0.5em;
	padding-top: 0.5em;
}

/* ---------blocco 4 grande------------------ */

.images-block-4 ul li {
	width:23.5%;
	margin-right:2%;
}

.images-block-4 ul li:last-child {
	margin-right:0%;
}

/* ---------progetto------------------ */
.espositore-img-sm{
	width:80%;
	margin:auto;
}

.img-container {
    float: left;
    width: 50%;
    padding: 5px;
	margin-bottom:0;
}

.img-container2 {
    float: left;
    width: 100%;
    padding: 5px;
	margin-bottom:0;
}

}

@media screen and (min-width: 1000px){
	
	.contenitore-progetto{
		background-color:#fbfafa;
		width:100%;
		padding-top:3.4em;		
}

.contenitore-progetto h1{
		text-align:left;
		padding-left:0;	
}

.contenuto-progetto{
		width:100%;
		position:relative;	
}

.to-portfolio{
    position: absolute;
    bottom: 0;
    left: 5%;
}
	
.espositore{
	width:40%;
	margin-left:5%;
	margin-right:5%;
	margin-top:3.4em;
	float:left;
}
	
.espositore-img{
	width:50%;
	float:left;
		
	 box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-o-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-ms-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	}
	
.espositore-img-sm{
	width:40%;
	float:left;
		
	 box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-o-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	-ms-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
	}
	
	
	
	
	
.multicolonna{
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
}

.ante{
	width:29%;
	margin-left:3.25%;
	overflow:hidden;
	padding-bottom:0;
	position:relative;
	margin-bottom:64px;
}

.ante .ante_testo {
	color:#fafbfb;
	background-color:#82163e;
	
	visibility:hidden;
	opacity:0;
	
	position:absolute;
	bottom:-64px;
	-o-transition: all .2s ease-in;
	-ms-transition: all .2s ease-in;
 	-moz-transition: all .2s ease-in;
 	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
}

.ante:hover .ante_testo{
	visibility:visible;
	opacity:1;
	bottom:0px;
}

.zoom{
	overflow: hidden; /* ---------faccio funzionare lo zoom------------------ */
}

.zoom  .zoom-in {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	-ms-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}

.zoom  .zoom-in:hover {
	-webkit-transform: scale(1.03);
	-moz-transform: scale(1.03);
	-o-transform: scale(1.03);
	-ms-transform: scale(1.03);
	transform: scale(1.03);
	/*padding:8px;
	font-size:0.9em;*/

}

@media screen and (min-width: 1100px){
	.elementi-centrati .posts-list > li {
margin: 8px;
width: 330px;		
	}
	
@media screen and (min-width: 550px){
	.elementi-centrati-stampe .posts-list > li {
margin: 8px;
width: 165px;	
	}		

