@charset "iso-8859-1";
/* TRALIX Home */

*{
	padding:0;
	margin:0;
	border:none;
	outline:none;
	}
	
html,body{
margin:0px;
height:100%;
}

	
body{
	background-color:#fff;
	}	
	
#caja_principal{
	width:100%;
	height:100%;
	}
#header{
	position:relative;
	width: 100%;
	height:68%;
	background-image:url(../img/back.jpg);
	/*-webkit-filter: saturate(0.8);*/
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}
	
#franja2{
	background-color: rgba( 62,69,76, 0.9);
	height:2%;
	/*width:300px;
	margin:0 auto;*/
	vertical-align:bottom;}

		
#logo{
	height:98%;
	}	
	
		
.imagen{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 826px;
	height: 283px;
	margin: auto;
		}

	#menu{
		padding:0;
		display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
	display:flex;
		flex-wrap:wrap;
		align-content:stretch;
							}
			
.cajas{
	flex:1 1 29%;
	-webkit-flex:1 1 29%;
	height:210px;	
	position:relative;
   overflow:hidden;
 }
		 
.cajas div{
	-webkit-filter: saturate(1);
	height:100%;
	width:100%;
	}
	
	.cajas figcaption{
		width:200px;
		top:0;
		position:absolute;		
		padding:82px 10px;	
			
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
	
		font-size:29px;
		font-family:Arial, Helvetica, sans-serif;
		color:#FFF;
		line-height:27px;
		height:180px;}
									
						
		.fe{
		right:0; text-align:right;
		background-color: rgba( 104,115,137, 0.95);
		-webkit-box-shadow: 1px 2px 7px 3px #525252;
	box-shadow: 1px 2px 7px 3px #525252;
								}
						
		.em{
		left:0;	
		background-color: rgba( 62,153,215, 0.95);
		text-align:left;
		-webkit-box-shadow: 1px 2px 7px 3px #525252;
	box-shadow: 1px 2px 7px 3px #525252;
			}
		
.cajas:hover figcaption{
	width:100%;
   }
								
									

#caja1{
	background:url(../img/1.jpg);
	}

#caja2{
	background:url(../img/2.jpg)
	}
	
	#caja1, #caja2{
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
		}

a{	font-size:26px;
		text-align:left;
		font-family:Arial, Helvetica, sans-serif;
		color:#FFF;
		text-decoration:none;
		}						
			

#legales{
	text-align:center;
	margin: 0 auto;
	padding-top:10px;
	font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#666;
			}
			
					
	@media screen and (min-width:1500px){
	.cajas{
	flex:1 1 21%;
	 -webkit-flex:1 1 21%;
	}
	#header{
	position:relative;
	width: 100%;
    height:68%;
	}
					
.imagen{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 826px;
	height: 283px;
	margin: auto;
		}
}

					
	@media screen and (max-width:860px){
				.cajas{
	flex:1 1 46%;
	-webkit-flex:1 1 46%;
	}
	.imagen{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 750px;
	height: 249px;
	margin: auto;
		}
	}
	
@media screen and (max-width:780px){

	#header{
	top:0px;
	/*line-height:200px;*/
	height:50%;
	}
 	

#franja2{
	background-color: rgba( 62,69,76, 0.9);
	height:2%;
	/*width:300px;
	margin:0 auto;*/
	vertical-align:bottom;}
		
#logo{
	 height:98%;
	}	
	
.imagen{
	margin:20 auto;
	width:700px;
	height:240px;

}
	}
	
@media screen and (max-width:690px){

	#header{
			top:0px;
	/*line-height:200px;*/
	height:50%;
	}
 	

#franja2{
	background-color: rgba( 62,69,76, 0.9);
	height:2%;
	/*width:300px;
	margin:0 auto;*/
	vertical-align:bottom;}
		
#logo{
	 height:98%;
	}	
	
.imagen{
	margin:20 auto;
	width:600px;
	height:206px;

}
	}
	
@media screen and (max-width:600px){

	#header{
			top:0px;
	/*line-height:200px;*/
	height:240px;
	}
 	

#franja2{
	background-color: rgba( 62,69,76, 0.9);
	height:3%;
	/*width:300px;
	margin:0 auto;*/
	vertical-align:bottom;}
		
#logo{
	 height:97%;
	}	
	
.imagen{
	margin:20 auto;
	width:550px;
	height:189px;

}
	}
	
	
	@media screen and (max-width:550px){

	#header{
		
	top:0px;
	/*line-height:200px;*/
	height:240px;
	}
 	

#franja2{
	background-color: rgba( 62,69,76, 0.9);
	height:5%;
	/*width:300px;
	margin:0 auto;*/
	vertical-align:bottom;}
		
#logo{
	 height:95%;
	}	
	
.imagen{
	margin:20 auto;
	width:500px;
	height:172px;

}
	}
	
	@media screen and (max-width:490px){
	#header{
	top:0px;
	line-height:150px;
	height:170px;
	}
 	
.imagen{
	margin:0 auto;
	width:450px;
	height:158px;

}
	}
		
			@media screen and (max-width:450px){
	#header{
	top:0px;
	line-height:150px;
	height:150px;
	}
 	
.imagen{
	margin:0 auto;
	width:390px;
	height:137px;

}
	}
		
		@media screen and (max-width:380px){
		.cajas{
	flex:1 1 96%;
		-webkit-flex:1 1 96%;
		height:150px;	
	position:relative;
   overflow:hidden;
	}
	
	#header{
	position:relative;
	width: 100%;
	height:90px;
	/*line-height:150px;*/
	
}
	

#franja2{
	background-color: rgba( 62,69,76, 0.9);
	height:4%;
	/*width:300px;
	margin:0 auto;*/
	vertical-align:bottom;}

		
#logo{
	background-color:#FFF !important;
	height:96%;
	}	
	
	
.imagen{
	margin:0 auto;
	width:220px;
	height:77px;

}
		 	
	}