section {
	display: block
}
* {
	box-sizing: border-box;
	-moz-box-sizing: border-box
}
.featured-project {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-top: 37%; /* 71.4% */
	/* background-color: #eaf5f7; */
}

.featured-project__image, .featured-project__image   img {
	top: 0;	right: 0;	bottom: 0;	left: 0;
	position: absolute;
	width: 100%;
	transition: 0.5s    cubic-bezier(0.19, 1, 0.22,    1)
}
.featured-project__image h2 {
	top: 40%;	right: 0;	bottom: 0;	left: 0;
	position: absolute;
	width: 100%; 
  display:block; color:white; 
  font-size:3vmax;
  letter-spacing:.1em;
  text-align:center;
	transition: 0.5s    cubic-bezier(0.19, 1, 0.22,    1);
}
.featured-project__description {
	top: 0;	right: 0;	bottom: 0;	left: 0;
	position: absolute;
	opacity: 0;
	transition: 0.5s    cubic-bezier(0.19, 1, 0.22, 1)
}
.featured-project__description    .heading-set {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	position: absolute;
	margin: 5% auto;
	width: 95%;
	/* height: 9.23077em;*/
	transition: 0.4s    cubic-bezier(0.165, 0.84, 0.44,    1);
	-webkit-transform: scale(0.8);
	transform: scale(0.8)
}
.featured-project__description__bg {
	top: 0;  right: 0; bottom: 0;  left: 0;
	position: absolute;
	top: -0.38462em;
	right: -0.38462em;
	bottom: -0.38462em;
	left: -0.38462em;
	opacity: 0.95
}

.no-touch    .featured-project:hover    .featured-project__image {
	-webkit-transform: scale(1.3);
	transform: scale(1.3)
}
.no-touch    .featured-project:hover .featured-project__description {
	opacity: 1
}
.no-touch    .featured-project:hover            .heading-set {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1)
}
.featured-project:active    .heading-set, .no-touch .featured-project:active    .heading-set {
	opacity: 0.7;
	transition: 0.15s
}
}


}
.l-featured-projects:after {
	content: "";
	display: block;
	clear: both
}

.l-featured-projects .featured-project {
	width: 100%;
	float: left
}

.prodi {
  width:14vh; 
  height:14vh;   
  float:left;
  margin:0px 1%;
  cursor:pointer;  
}

/*       ------------------------------------------------   */
@media    (min-width: 510px) {

.prodi {
  width:22vh; 
  height:22vh;     
}

}

/*       ------------------------------------------------   */

@media    (min-width: 1009px) {
/* 39.375em */
.l-featured-projects .featured-project {
	width: 50%;
	float: left
}

.featured-project {
	padding-top: 20%; /* 35.7 */
}
.featured-project__image h2 {
	top: 20%;
}
.prodi {
  width:22vh; 
  height:22vh;     
}
}



.pi01 {
  background:url(../prod/i/banio1.png) center center/70% 70% no-repeat;    
}
.pi01:hover {
  background:url(../prod/i/banio1b.png) center center/70% 70% no-repeat;
}
.pi02 {
  background:url(../prod/i/banio2.png) center center/70% 70% no-repeat;
}
.pi02:hover {
  background:url(../prod/i/banio2b.png) center center/70% 70% no-repeat;
}
.pi03 {
  background:url(../prod/i/banio3.png) center center/70% 70% no-repeat;
}
.pi03:hover {
  background:url(../prod/i/banio3b.png) center center/70% 70% no-repeat;
}

.pi11 {
  background:url(../prod/i/proteccion1.png) center center/70% 70% no-repeat;
}
.pi11:hover {
  background:url(../prod/i/proteccion1b.png) center center/70% 70% no-repeat;
}
.pi12 {
  background:url(../prod/i/proteccion2.png) center center/70% 70% no-repeat;
}
.pi12:hover {
  background:url(../prod/i/proteccion2b.png) center center/70% 70% no-repeat;
}
.pi13 {
  background:url(../prod/i/proteccion3.png) center center/70% 70% no-repeat;
}
.pi13:hover {
  background:url(../prod/i/proteccion3b.png) center center/70% 70% no-repeat;
}

.pi21 {
  background:url(../prod/i/cambio1.png) center center/70% 70% no-repeat;
}
.pi21:hover {
  background:url(../prod/i/cambio1b.png) center center/70% 70% no-repeat;
}
.pi22 {
  background:url(../prod/i/cambio2.png) center center/70% 70% no-repeat;
}
.pi22:hover {
  background:url(../prod/i/cambio2b.png) center center/70% 70% no-repeat;
}
.pi31 {
  background:url(../prod/i/ambiente1.png) center center/70% 70% no-repeat;
}
.pi31:hover {
  background:url(../prod/i/ambiente1b.png) center center/70% 70% no-repeat;
}
.pi32 {
  background:url(../prod/i/ambiente2.png) center center/70% 70% no-repeat;
}
.pi32:hover {
  background:url(../prod/i/ambiente2b.png) center center/70% 70% no-repeat;
}
.pi33 {
  background:url(../prod/i/ambiente3.png) center center/70% 70% no-repeat;
}
.pi33:hover {
  background:url(../prod/i/ambiente3b.png) center center/70% 70% no-repeat;
}