html, body { height: 100%;  font-family: 'Hind', sans-serif; font-weight: 200px;  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}
* { margin: 0; }
*, *:before, *:after {
 -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
img {border: none}
a:focus {outline: 0;}
.clear {clear: both:}

/* background-color: #ffdd18; */

#logo {
	width: 180px;
	height: 42px;
	/*background: url('../img/logo_white.png') no-repeat;
	background-size: contain;*/
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 9999;
}

#logo img {
	width: 180px;
}

.container {
	max-width: 1170px; 
	margin: 0 auto;
	text-align: center;
	padding: 0 20px 0 20px;
}

.main-slider {
	max-width: 1500px;
	margin: 0 auto;
}

.main-slider .box-slide {float: left;}

.main-slider .box-slide img {width: 100%; float: left; padding: 20px; filter: grayscale(100%); transition: all 0.5s ease;}

.main-slider .box-slide img:hover {filter: grayscale(0%); transform: scale(1.05);}

#collaborazioni {
	float: left;
	width: 100%;
	margin-top: 100px;
}

#slider {
width: 100%;
height: 700px;
background: url('../img/slide-1.jpg');
background-position: center center;
background-size: cover;

}

#slider #cit {
	font-size: 50px;
	color: #FFF;
	padding: 350px 0 40px 0;
	font-weight: 200px;
	max-width: 760px;
	text-align: left;
	font-weight: 700;
	line-height: 60px;
}

#cit-author {
	font-size: 16px;
	text-align: right;
	color: #FFF;
	float:right;
	margin-top: 5px;
}

 #y-row-cit {
	background-color: #ffdd18;
	width: 250px;
	height: 3px; 
	float:left;
	margin-top: 30px;
	
 }
 
 
 h1 {
	 font-size: 40px; 
	 text-align: center;
	 margin: 0 0 20px 0;
	 text-transform: uppercase;
	 color: #333333;
	 font-weight: 700;
	 padding: 50px 0 0 0;

 }
 
 
h2 {
	 font-size: 35px; 
	 text-align: center;
	 text-transform: uppercase;
	 color: #333333;
	 font-weight: 700;
	 letter-spacing: 1px;
	 line-height: 52px;
 }
 
 .y-color {
	 color: #ffdd18;
 }

 #y-row {
	background-color: #ffdd18;
	width: 200px;
	height: 2px; 
	text-align: center;
	margin: 30px auto;
	
 }
 
 p {
	 color: #adaaaa;
	 font-size: 16px;
	 line-height: 22px;
	 font-weight: 300;
	 
 }
 
 #menu {
	 width: 400px;
	 position: absolute;
	 top: 45px;
	 right: 0;
	 text-align: right;
	 font-weight: 700;
 }
 
 #copy a {color: #ffdd18; text-decoration: none;}
 
 #menu a {color: #333333 !important; text-decoration: none; padding-right: 20px;} 
 #menu a:hover {color: #333333 !important;}
 
#menu-mobile {
	 width: 400px;
	 position: fixed;
	 top: 30px;
	 right: 20px;
	 text-align: right;
	 font-weight: 700;
	 font-size: 30px;
	 display: none;
	 z-index: 9999999;
 }
 #menu-mobile:hover {
	 cursor: pointer;
 }
 
#menu-mobile a { color: #333333 !important; text-decoration: none; padding-right: 20px;} 
#menu-mobile a:hover {color: #333333 !important;}

#list-menu {
	position: fixed;
	z-index: 99999999999;
	top: 0;
	left: 0;
	background: #333333 !important;
	width: 100%;
	height: 100%;
	text-align: center;
	padding-top: 40%;
	display: none;
}


#list-menu a {float: left; width: 100%; font-size: 40px; color: #FFF !important; text-decoration: none; padding-bottom: 30px;  } 
#list-menu a:hover {color: #ffdd18 !important;}

#list-menu .fa-times {
	position: absolute;
	 top: 40px;
	 right: 20px;
	 font-size: 30px;
	 color: #FFF;
}

#list-menu .fa-times {
	cursor: pointer;
}
 
 /* ABOUT */
 
 #about {
	
	 padding: 40px 0 80px 0;
 }
 
  #about p {
	 font-size: 20px;
	 line-height: 30px;
 }
 
 /* SERVICES */
 
 #services {
	background: url('../img/bg-services.jpg');
	width: 100%;
	height: 700px;
	background-position: center center;
	background-size: cover;	 
	position:relative;
	margin-top: 100px;
 }
 
 
 #col-left {
	 width: 50%;
	 height: 700px;
	 background: rgba(51,51,51,0.9);
	 position:absolute;
	
	 
	 
 }
 
#box-service-right {
	position:absolute;
	background: rgba(242,242,242,0.9);
	z-index: 9999;
	width: 55%;
	right: 100px;
	top: 100px;
	height: 500px;
	color: #333333;
	text-align: left;
}

#container-services h2 {
	padding-bottom: 100px;
	color: #FFF;
	text-align: left;
}

#container-services {
	position:absolute;
	padding:100px 0 0 0;
	width: 350px;
	text-align: left;
}

.box-s-list {
	width: 40%;
	float:left;
	margin: 30px 5% 30px 5%;
	font-weight: 300;
}

.box-s-list .fa {
	font-size: 60px;
	color: #666666;
}

.box-s-list h3 {
	font-size: 16px;
	text-transform: uppercase;
	margin: 15px 0 10px 0;
}

 #y-row-left {
	background-color: #ffdd18;
	width: 200px;
	height: 2px; 
	text-align: left !important;
	margin: 30px 0 0 0;
	
 }
 
  /* CITAZIONE */
  
#citazione {
 	background: url('../img/bg-services.jpg');
	width: 100%;
	height: 350px;
	background-position: center center;
	background-size: cover;	 
	position:relative;	
}
 
 /* PORTFOLIO */
 
.gallery {
	height:0px;
	width:0px;
}
 
 #portfolio {
	 padding: 0 0 0 0;
	 	/* background: #333333;*/
 }
 
  #portfolio h2 {
	 /*color: #FFF;*/
	 padding-bottom: 40px;
  }
  
.boxPorfolio {
	  width: 25%;
	  float:left;
	  position: relative;
	  
  }
  
.boxPorfolio-b {
	  width: 50%;
	  float:left;
	  position: relative;
	  
  }
.boxPorfolio img {width: 100%; height: auto;}
.boxPorfolio-b img {width: 100%; height: auto;}

.boxHover {opacity: 0; position: absolute; top: 0; height: 0; z-index: 99; background: rgba(252,221,52, 0.9); z-index: 9999; width: 96%; height: 96%; margin-top: 2%; margin-left: 2%; text-align: center;}
.boxHover-b {opacity: 0; position: absolute; top: 0; height: 0; z-index: 99; background: rgba(252,221,52, 0.9); z-index: 9999; width: 98%; height: 96%; margin-top: 1%; margin-left: 1%; text-align: center;}

.boxHover .fa {margin-top: 30%; margin-bottom: 10px;}
.boxHover h4 {text-transform: uppercase; text-align: center; font-size: 16px;}
.boxHover h5 {text-transform: uppercase; text-align: center; color: #adaaaa;}

.boxHover-b .fa {margin-top: 30%; margin-bottom: 10px;}
.boxHover-b h4 {text-transform: uppercase; text-align: center; font-size: 16px;}
.boxHover-b h5 {text-transform: uppercase; text-align: center; color: #adaaaa;}

.boxPorfolio:hover > .boxHover {opacity: 1; cursor: pointer}
.boxPorfolio-b:hover > .boxHover-b {opacity: 1; cursor: pointer}

.boxHover .fa {font-size: 40px; margin: 0 10px 0 10px; margin-top: 30%; }
.boxHover-b .fa {font-size: 40px; margin: 0 10px 0 10px; margin-top: 15%; }

.boxHover h4 {margin: 20px 0 0 0;}
.boxHover h5 {margin: 15px 0 0 0;}

.boxHover-b h4 {margin: 20px 0 0 0;}
.boxHover-b h5 {margin: 15px 0 0 0;}

.boxHover a {color: #333333 !important;} 
.boxHover a:hover {color: #333333 !important;}

.boxHover-b a {color: #333333 !important;} 
.boxHover-b a:hover {color: #333333 !important;}

/* PREFOOTER */

#contact-us {

	padding: 40px 0 60px 0;
	float:left;
	width: 100%;
	text-align: center;
}

#contact-us h2 {
	padding: 40px 0 20px 0;
}

#contact-us a {color: #adaaaa !important; text-decoration: none;} 
#contact-us a:hover {color: #adaaaa !important; text-decoration: none;}



#contact-us .mail-contact-us {font-size: 30px;  color: #adaaaa;}

#footer {
	float:left; 
	background: url('../img/bg-contact.jpg') bottom center no-repeat;
	width: 100%;
	height: 700px;
	background-size: cover;
	position: relative;
	
}

#col-contact {
	 width: 100%;
	 height: 100%;
	 background: rgba(51,51,51,0.9);
	 position: absolute;
}


#container-contact h2 {
	padding-bottom: 100px;
	color: #FFF;
	text-align: left;
}

#container-contact {
	padding:100px 0 0 0;
	width: 60%;
	float:left;
	text-align: left;
	position: relative;
}

#container-contact  a {color: #adaaaa !important; text-decoration: none;} 
#container-contact  a:hover {color: #adaaaa !important; text-decoration: none;}

.col-form {
	padding:100px 0 100px 0;
	width: 40%;
	text-align: left;
	float:left;
	position: relative;
}

.col-form form {
	width: 95%;

}

::-moz-placeholder {
	color: #FFF !important;
}

.col-form input[type=text] {
	background: transparent;
	border: 0;
	border-bottom: 1px solid #FFF;
	width: 100%;
	padding: 5px;
	margin-bottom: 20px;
	color: #FFF;
	font-size: 16px;
	font-weight: 400;
}

.col-form textarea {
	background: transparent;
	border: 0;
	border-bottom: 1px solid #FFF;
	width:  100%;
	padding: 10px 0 10px 5px;
	color: #FFF;
	font-size: 16px;
	font-weight: 400;
	font-family: 'Hind', sans-serif; 
	height: 150px;
}

.col-form input[type=submit] {
	float: right;
	padding: 10px 20px 10px 20px;
	margin-bottom: 20px;
	color: #CCC;
	font-size: 16px;
	font-weight: 300;
	background: transparent;
	border: 1px solid #FFF;
	margin-top: 50px;
	text-transform: uppercase;

}

.col-form input[type=submit]:hover {
	cursor: pointer;
	background-color: #ffdd18;
	border: 0px;
	color: #000;
}

.w-color {
	color: #FFF;
}

#sendSuccess {
	padding: 20px 0 0 0;
	display: none;
}

#copy {
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
	font-size: 12px; 
	margin-top: 100px;
	color: #adaaaa;
}

@media (max-width: 720px) {
  .boxPorfolio {
    width: 50%;
  }
  
  .boxPorfolio-b {width:100%;}
  
	#container-contact h2 {
	  
	    text-align: center;
	}
	
	
#slider #cit {

	padding: 250px 0 40px 0;

}
  
  #container-contact {
	  width: 100%;
	  text-align: center !important; 
  }
  
  #y-row-left { 
	  text-align: center !important;
  }
  
  #footer {
	  height: auto;
  }
  
  .col-form {
	  width: 100%;
  }
  #y-row-left {
	  text-align: center !important;
	  margin: 30px auto;
  }
}


@media (max-width: 420px) {
	
	.boxHover-b .fa {margin-top:10%;}
	
	#menu-mobile {
		display: inline;
	}
	
	#menu {
		display: none;
	}
	#slider #cit {

	text-align: center;

}

#slider #cit {

	padding: 150px 0 40px 0;

}

#cit-author {
	margin: 0 auto;
	float:none;
	text-align: center;
}

#y-row-cit {
    background-color: #ffdd18;
    float: none;
    height: 3px;
    margin: 30px auto;
    width: 250px;
}


  .boxPorfolio {
    width: 100%;
  }
  
  	padding: 350px 0 40px 0;
}



@media (max-width: 768px) {
	
	body {overflow-x: hidden;}
	
	html  {overflow-x: hidden;}
	
}


@media (max-width: 600px) {
	
	.boxPorfolio.width-100 {width: 100%;}
	
}