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

.rombo {
	float:left;
	overflow:hidden;
    width: 300px; 
    height: 300px; 
   background:rgba(255,102,51,1);
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
	
}
.rombo-top{margin-top:-62px;margin-left:-26px}
.rombo-medio{margin-left:-88px; margin-top:150px}
.rombo-abajo{margin-left:-512px; margin-top:362px}

.rombo-cont, .rombo-cont-big{
	width:145%;
	height:145%;  
 	-webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
	  transition:all 0.3 linear;
	 }
.rombo-cont img, .rombo-cont-big img{ 
	margin-top:-22.5%; width:100%; height:auto;transition: all 0.3s linear;
	}
.rombo-cont-big p{
	/*display: table-cell; width: 250px;height: 300px; vertical-align: middle;*/
    padding: 10px 240px;  
    text-align: left;
   
   

	}
	
.fila-rombo{
	position:relative;
	width:100%; max-width:1360px;height:850px; margin:100px auto;
	clear:both; 
	overflow:visible; 
	padding:125px 80px 125px 150px;  }

.rombo-big {
	overflow:hidden;
     width: 600px; 
     height: 600px; 
  float:left;
     background: #1E3736;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
	 transition: all 0.3s linear;
	
}
.rombo-cont img:hover {transform : scale(1.2);}
.rombo-big:hover{ background:#86BDBA;}
@media (max-width: 1300px){
.fila-rombo{
	position:relative;
	width:990px; height:650px;margin:auto;
	clear:both; 
	overflow:visible; 
	padding:100px 100px 100px 150px; /*background:pink*/ }
	
.rombo {
	float:left;
	overflow:hidden;
    width: 200px; 
    height: 200px; 
   background:rgba(255,102,51,1);
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
	
}
.rombo-top{margin-top:-41px;margin-left:-17px}
.rombo-medio{margin-left:-59px; margin-top:100px}
.rombo-abajo{margin-left:-342px; margin-top:241px}

.rombo-cont, .rombo-cont-big{
	width:145%;
	height:145%;  
 	-webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
	 transition:all 0.3 linear;
	 }
.rombo-cont img, .rombo-cont-big img{ 
	margin-top:-22.5%; width:100%; height:auto;transition: all 0.3s linear;
	}
.rombo-cont-big p{
	
    padding: 1px 130px 0 150px;  
    text-align: left;
	line-height:100%;
   	}
.rombo-cont-big h2{	margin-left:-10px; margin-top:-10px}


.rombo-cont img:hover {transform : scale(1.2);}

.rombo-big {
	overflow:hidden;
     width: 400px; 
     height: 400px; 
  float:left;
     background: #1E3736;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
	
}

}
@media (max-width: 1023px){
.fila-rombo{padding:125px 80px 125px 150px; 
		position:relative;
	width:90%; height:900px;margin:auto;
	clear:both;}
.rombo-top{margin-left:-441px;margin-top:382px;}
.rombo-medio{margin-left:-158px; margin-top:382px}
.rombo-abajo{margin-left:-341px; margin-top:523px}
	
	
	}
@media (max-width: 760px){
	
	.rombo, .rombo-big {
	float:none;
	overflow:hidden;
    width: 100%; 
    max-height: 350px; 
   background:#1E3736;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
	
}
.rombo-cont, .rombo-cont-big{
	width:100%;
	height:100%;  
 	-webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
	 transition:all 0.3 linear;
	 }
.rombo-cont-big p{
	/*display: table-cell; width: 250px;height: 300px; vertical-align: middle;*/
    padding: 1px 25px;  
    text-align: center;
   	}
	.fila-rombo{padding:20px; ;
		position:relative;
	width:90%; margin:auto; height:auto;
	clear:both;}
.rombo-top{margin-left:0;margin-top:0;}
.rombo-medio{margin-left:0; margin-top:0}
.rombo-abajo{margin-left:0; margin-top:0}
.rombo-cont-big h2{	margin-left:0; margin-top:30px}
	
	}