@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,300,700);

html,body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background-image:url(../img/carousel-home/sfondo-def.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: 'Titillium Web', sans-serif;
	margin-bottom:30px;
	font-size:16px;
	}

body.different{
	background-image:url(../img/studio.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


.input{
	color: #333;
}
	


body{
	overflow:auto;
	padding-bottom:30px;
	}


																					/*------  INIZIO NAVBAR  ------*/

#navbar{
	padding-top:15px;
	}
	#logo{
		width:100%;
		margin-top: -18px;
		}
		
																					/*------  FINE NAVBAR  ------*/
																					
																					/*------  INIZIO CONTENT  ------*/
		
		
#content{
	padding:0 5px;
	margin-top: -14px;
	height:100%;
	overflow:auto;
	}
	#right-column{
		padding:0 5px;
		}
	#img-grids{
		padding:0 5px;
		}
		#img-container{
			width:100%;
			background-color:#333;
			min-height:222px;
			margin-bottom:10px;
			}
			#img-container img{
				vertical-align:auto;
				margin:auto 0;
				}

																						/*------  FINE CONTENT  ------*/
																						
																						
																						


.slick-carousel {
	overflow: hidden;
	border: solid #FFF 5px;
	margin-bottom: 10px;
	background-color: #666;
	max-height: 1000px;
}

.slick-carousel-personal {
	overflow: hidden;
	margin-bottom: 10px;
	max-height: 1000px;
}

.slick-prev {
	left: 25px !important;
}

.slick-next {
	right: 25px !important;
}

.slick-prev, .slick-next {
	z-index: 2;
}

.slick-prev:before, .slick-next:before {
	font-size: 35px !important;
}

.slick-dots {
	bottom: 5px !important;
}

.slick-dots li {
    position: relative;
		display: inline-block;
		width: auto;
    height: 20px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    width: 10px;
    height: 10px;
    margin: 0;
}

.slick-dots li button:before {
	display: inline-block;
	color: transparent;
	-moz-osx-font-smoothing: grayscale;
	width: 10px;
	height: 10px;
	background-color: transparent;
	border: 1px solid white;
	border-radius: 50%;
}

.slick-dots li.slick-active button:before {
	color: transparent;
	background-color: white;
}

.slick-initialized .slick-slide .container-project {
	margin: 0;
	margin-right: 10px;
}

.slick-slide img {
	width: 100%;
	height: auto;
}





	.myCarousel{
		max-height:1000px;
		overflow:hidden;
		border:solid #FFF 5px;
		margin-bottom:10px;
		background-color:#666;
		}
		
		#left-arrow-personal-page{
			left:0;
			bottom:0;
			}
		#right-arrow-personal-page{
			right:0;
			}


																						
																						/*------  INIZIO STUDIO  ------*/

	#titolo-sudio{
		color:#272727;
		font-family: 'Titillium Web', sans-serif;
		background-color: #FFF ;
		opacity:0.7;
		font-size:larger;
		line-height:50%;
		margin-bottom:10px;
		}
		#titolo-sudio h1{
			display:inline-block;
			width:100%;
			line-height:60px;
			margin:0;
			padding:0;
			}
	#descrizione-studio{
		color:#272727;
		font-family: 'Titillium Web', sans-serif;
		background-color: #FFF ;
		max-height:320px;
		opacity:0.7;
		margin-bottom:10px;
		overflow: auto;
		}
		#descrizione-studio p{
			font-size:14px;
			padding:5px 0;
			}


			
																						/*------  FINE STUDIO  ------*/
																						
																						
																						/*------  INIZIO PROJECTS  ------*/


#projects-page-mobile-title{
	font-family: 'Titillium Web', sans-serif;
	margin-bottom: 10px;
	background-color: #fff;
	opacity: 0.7;
	line-height: 40px;
	padding: 0 10px;
	color:#272727;
}
			
.container-project{
	border:3px solid #FFF;
	overflow:hidden;
	margin-bottom:10px;
	background-color:#666;
	position: relative;
	max-height: 340px;
	}


	.container-project a{
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: inline-block;
		}
	
	.container-project h3{
		color:#FFF;
		display:inline-block;
		width:100%;
		background-color:#333;
		padding:0;
		margin:0;
		opacity:0.8;
		line-height:35px;
		position:absolute;
		bottom:0;
		padding-left:10px;
		font-family: 'Titillium Web', sans-serif;
		left:0;
		}
		
	
	.container-project img{
		width:100%;
		}

#tabs-container{
	width:75px;
	}

.nav-tabs li{
	width:66px;
}


.nav-tabs a{
	background-color:#CCC;
	opacity:0.8;
	color:#333;
	padding:3px;
	}

.tab-pane{
	background-color:#CCC;
	opacity:0.8;
	color:#333;
	}	
	
.tab-pane a{
	display:inline-block;
	text-decoration:none;
	width:100%;
	padding:5px;
	font-family: 'Titillium Web', sans-serif;
	font-size:large;
	text-decoration:none;
	color:#333;
	padding-left:17px;
	font-size:medium;
	transition: all linear 0.2s;
	}
	
	.tab-pane a:hover{
			background-color:#333;
			opacity:0.8;
			color:#CCC;
			text-decoration:none;
			}

	a.tag-selezionato{
		background-color:#333;
		opacity:0.8;
		color:#CCC;
	}
	

																					/*------  FINE PROJECTS  ------*/
																					
																					
																					/*------  INIZIO PERSONAL-PAGE  ------*/

.foto-personale{
	width:100%;
	}
	.foto-personale img{
		width:100%;
		}


.bio-personale{
	width:100%;
	font-family: 'Titillium Web', sans-serif;
	font-size:medium;
	background-color:#FFF;
	opacity:0.7;
	padding:15px;
	margin-bottom:20px;
	height:50%;
	}
	
.titolo-bio{
	font-family: 'Titillium Web', sans-serif;
	background-color:#FFF;
	opacity:0.7;
	line-height:60px;
	padding-left:15px;
	max-width:350px;
	}


.sottotitolo-bio{
	font-family: 'Titillium Web', sans-serif;
	background-color:#FFF;
	opacity:0.7;
	line-height:50px;
	padding-left:15px;
	max-width:350px;
	margin-top:0;
	}

.lavori-recenti{
	font-family: 'Titillium Web', sans-serif;
	background-color:#FFF;
	opacity:0.7;
	line-height:40px;
	padding-left:15px;
	max-width:350px;
	}
	
.all-projects{
	font-family: 'Titillium Web', sans-serif;
	background-color:#FFF;
	opacity:0.7;
	line-height:40px;
	padding-left:15px;
	text-align:center;
	color:#333;
	margin-top:5px 0;
	transition:all linear 0.2s;
	-webkit-transition:all linear 0.2s;
	-moz-transition:all linear 0.2s;
	-o-transition:all linear 0.2s;
	}

.all-projects:hover{
	color:#FFFFFF;
	background-color:#333;
	}
	
.contact-me{
	font-family: 'Titillium Web', sans-serif;
	background-color:#FFF;
	opacity:0.7;
	line-height:40px;
	padding-left:15px;
	text-align:center;
	transition:all linear 0.2s;
	-webkit-transition:all linear 0.2s;
	-moz-transition:all linear 0.2s;
	-o-transition:all linear 0.2s;
	color:#333;
	}

.contact-me:hover{
	color:#FFFFFF;
	background-color:#333;
	}

																			/*------  FINE PERSONAL-PAGE  ------*/




																			/*------  INIZIO CONTACT  ------*/

#container-nomi-contact{
		position: fixed;
 		top: 70px;
		width:100%;
		padding:0 10px;
		font-family: 'Titillium Web', sans-serif;
		}


#name-grids-contact{
			padding:5px;
			}
				
			#name-grids-contact p{
				color:#333;
				background-color:#CCC;
				opacity:0.8;
				font-family: 'Titillium Web', sans-serif;
				font-size:125.5%;
				text-align:center;
				line-height:50px;
				transition:all linear 0.2s;
				overflow:hidden;
				width:100%;
				min-width:250px;
				
				}
				#name-grids-contact p em{
					font-size:13px;}
				#name-grids-contact p a{
					text-decoration:none;
					}
				#name-grids-contact p:hover{
					color:#CCC;
					background-color:#333;
					}
				
				.form{
					font-family: 'Titillium Web', sans-serif;
					font-size:125.5%;
					width:100%;
					margin-left:15px;
					margin-bottom:10px;
					}
					
					.form tr{
						padding:5px;}
					
					.container-form{
						color:#CCC;
						background-color:#333;
						opacity:0.8;
						transition:all linear 0.5s;
						max-height:50px;
						overflow:hidden;
						}
						.container-form:hover{
							max-height:600px;
										
						}

																			/*------  FINE CONTACT  ------*/
																			
																			
																			
																			/*------  INIZIO SINGLE-PROJECT  ------*/


#back-button{
	font-family: 'Titillium Web', sans-serif;
	margin-bottom: 10px;
	background-color: #fff;
	opacity: 0.7;
	line-height: 40px;
	padding: 0 10px;
	color:#272727;
	transition: all linear 0.2s;

}


#back-button:hover{ 
	background-color:#272727;
	color:#fff;
}

#titolo-info-singolo-progetto{
		color:#272727;
		font-family: 'Titillium Web', sans-serif;
		background-color: #FFF ;
		opacity:0.7;
		font-size:larger;
		line-height:50%;
		margin-bottom:10px;
		}
		#titolo-info-singolo-progetto h1{
			display:inline-block;
			width:100%;
			line-height:60px;
			margin:0;
			padding:0 10px;
			}
	#info-progetto{
		color:#272727;
		font-family: 'Titillium Web', sans-serif;
		background-color: #FFF ;
		max-height:320px;
		opacity:0.7;
		margin-bottom:10px;
		overflow: auto;
		}
		#info-progetto p{
			font-size:14px;
			padding:5px 10px;
			}

																		/*------  FINE SINGLE-PROJECT  ------*/
																		
																		
																		/*------  INIZIO PARTNERS  ------*/


#partners-page-title{
	margin-bottom:10px; 
	background-color:#fff; 
	opacity:0.7; 
	line-height:40px; 
	padding:0 10px;
	}
													

.container-partner{
	border:3px solid #FFF;
	overflow:hidden;
	margin-bottom:10px;
	background-color:#666;
	position: relative;
	padding-bottom: 95%;
	}


	.container-partner a{
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		overflow:hidden;
		}
	
	.container-partner h3{
		color:#FFF;
		display:inline-block;
		width:100%;
		background-color:#333;
		padding:0;
		margin:0;
		opacity:0.8;
		line-height:35px;
		position:absolute;
		bottom:0;
		padding-left:10px;
		font-family: 'Titillium Web', sans-serif;
		left:0;
		}
		
	
	.container-partner img{
		width:100%;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		}
	
																			/*------  FINE PARTNERS  ------*/
																			
																			/*------  INIZIO FOOTER  ------*/

#footer{
	position: fixed;
 	bottom: 0;
	}
	#footer p.text-center{
		position: fixed;
 		bottom: 0;
		text-align:center;
		vertical-align:central;
		font-size:small;
		font-family: 'Titillium Web', sans-serif;
		font-weight:400;
		color:#FFFFFF;
		width:100%;
		background-color: #252525;
		opacity:0.7;
		height:30px;
		line-height:30px;
		margin:0;
		}
		#footer p span{
			font-size:small;
			font-weight:400;
			}

		#footer p a{
			text-decoration: none;
			color:#FFFFFF;
		}

		#footer p a:hover{
			text-decoration: underline;
			color:#FFFFFF;
		}


	#container-nomi{
		position: fixed;
 		bottom: 35px;
		width:100%;
		padding:0 10px;
		height:60px;
		font-family: 'Titillium Web', sans-serif;
		}
		
		
		
		#name-grids{
			padding:5px;
			height:60px;
			}
				
			#name-grids p{
				color:#333;
				background-color:#CCC;
				opacity:0.8;
				height:100%;
				font-family: 'Titillium Web', sans-serif;
				font-size:124.5%;
				text-align:center;
				line-height:50px;
				transition:all linear 0.2s;
				-webkit-transition:all linear 0.2s;
				-moz-transition:all linear 0.2s;
				-o-transition:all linear 0.2s;
				overflow:hidden;
				width:100%;
				min-width:250px;
				
				}
				#name-grids p em{
					font-size:13px;}
				#name-grids p a{
					text-decoration:none;
					}
				#name-grids p:hover{
					color:#CCC;
					background-color:#333;
					}


																			
																			/*------  FINE FOOTER  ------*/









/* classi generali*/

.bg-light-grey{
	background-color:#878787;
	opacity:0.5;
	}

.bg-red{
	background-color:#D34646;
	}

.bg-dark-grey{
	background-color:#252525;
	}

.margin-header{
	margin:10px;
	}

.margin{
	margin:0 auto;
	}

.color{
	color:#FFFFFF;
	}

.clear{
	clear:both;
	}
	


.designer{
	margin-left: 5%; 
}
	




@media (max-width: 767px) {

}
@media (min-width: 768px) and (max-width: 991px) {
  .container-project {
  	height: 148px !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {  
  .container-project {
  	height: 195px !important;
  }

}
@media (min-width: 1200px) {
  .container-project {
  	height: 187px !important;
  }
}

@media (min-width: 1400px) and (max-width: 1600px) {
  .container-project {
  	height: 204px !important;
  }
}

@media (min-width: 1600px) and  (max-width: 1800px) {
  .container-project {
  	height: 234px !important;
  }
}

@media (min-width: 1800px) and  (max-width: 2000px) {
  .container-project {
    max-height: 268px !important;
  }
}

@media (min-width: 2000px) {
  .container-project {
    max-height: 337px !important;
  }
}