/* 
Estilos css 
Ver 2.0 Abril 2017
Para AinPat
Vidal Lasa 
*/


/*.ie6 {
  width:100%; 
  height:100%;
  background: url(../images/serfonca_serena.jpg) center no-repeat; 
  background-size: contain;

}*/

html {
  width:100%; 
  height:100%;
  }

img {
   display: block;
   margin: auto;
 }
	
#pag_general 	{
  
  width: 100%;
  height: 100%;
  margin: 0; /*Para que encaje exacto */
 
  font-family: Montserrat,Helvetica,Arial,sans-serif;
  font-size:100%;

  line-height: 1.3em;
  vertical-align: baseline;
  letter-spacing: normal;
  word-spacing: 0px;

  color: #666666;
  background: #FFFFFF;
}


.arriba_izda {
  border-style: none; 
  width:70%; 
  height:60%; 
  overflow: hidden;

  position:absolute; /*El div será ubicado con relación a la pantalla*/
  left:0%; 
  right:0%; 
  bottom:0%; 
  top:0%;

  background-image: url("/images/vacio_plano_azul.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; 

  color: #FFFFFF;

   z-index:0;

}
.arriba_izda_index {
  width: 100%;
  height: 100%;
  background-image: url("/fondos/fondo_azul_portada.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; 
}

.arriba_izda_contiene_imagen {
  height: 80%;
  width: 80%;
  left: 10%;
  top: 10%;
  position:absolute; 
}
.arriba_izda_imagen {
  text-align: center;
  height: 100%;
}

.arriba_izda_boton_atras {
  position:absolute; 
  left: 3%;
  top: 45%;
  display: none;;
}
.arriba_izda_boton_adelante {
  position:absolute; 
  right: 3%;
  top: 45%;
  display: none;
}
.arriba_izda_boton {

  display:inline-block;
  padding:6px 6px;
  font-size:100%;
  line-height:1.238em;
  letter-spacing:-1px;
  text-decoration:none;
  color: #2B2B2B;
  
  border:2px solid #fff;
  
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;   
  border-radius: 8px;
  
  background: #FF00FF; 
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FF00FF), to(#E5E5E5));
  background: -webkit-linear-gradient(#FF00FF, #E5E5E5);
  background: -moz-linear-gradient(#FF00FF, #E5E5E5);
  background: -ms-linear-gradient(#FF00FF, #E5E5E5);
  background: -o-linear-gradient(#FF00FF, #E5E5E5);
  background: linear-gradient(#FFFFFF, #E5E5E5);
  -pie-background: linear-gradient(#FFFFFF, #E5E5E5);   

  cursor:pointer;
}
.arriba_izda_boton:hover {background: #DBDBDB;}

.arriba_dha {
  border-style: none; 
  width:30%; 
  height:60%; 

  position:absolute; /*El div será ubicado con relación a la pantalla*/
  left:70%; 
  right:0%; 
  bottom:0%; 
  top:0%;

  background: #000000;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000000),to(#2E3436));
  background: -webkit-linear-gradient(#000000, #2E3436);
  background: -moz-linear-gradient(#000000, #2E3436);   
  background: -ms-linear-gradient(#000000, #2E3436);    
  background: -o-linear-gradient(#000000, #2E3436);     
  background: linear-gradient(#000000, #2E3436);        
  -pie-background: linear-gradient(#000000, #2E3436); 

  color: #FFFFFF; 

  z-index: 20;
}
.arriba_dha_dir {
  position:absolute; 
  right:1%;
  bottom: 1%; 
  padding: 0.5%;
}

.abajo_dha {
  border-style: none; 
  width:45%; 
  height:40%; 

  position:absolute; 
  right:0px; 
  bottom:0px; 

  background-image: url("/images/naranja_textura.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; 
  
  color: #FFFFFF; 
  
   z-index:10;

}
.abajo_dha iframe {
  width:90%;
  height:90%;
  position:absolute; 
  right:5%; 
  bottom:5%; 
}
.abajo_dha_dir {
  position:absolute; 
  right:1%; 
  padding: 0.5%;
}
.abajo_dha_tfnos {
  position:absolute; 
  left:1%; 
  bottom:1%; 
}

.abajo_izda {
  width:55%;
  height:40%;
  
  position:absolute; 
  left:0%; 
  bottom:0%; 

}
.abajo_izda_texto {
	padding: 5%;
}

.dha {float:right;} /*?¿?*/

/*---------------------------- menu ---------------------------------*/
#menu {

  width:60%;
  height: 100%;
  background: transparent; 
  margin: 0px;
  padding: 0px;
  
  position: absolute;
  left: 40%;
}

#menu li {
  list-style:none;
  font-size:150%;
  font-weight:400;
  padding: 1%;
  margin: 5%;

  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;   
  border-radius: 8px;
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);   
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
  background: #0E0E0E;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#0E0E0E),to(#7D7E7D));
  background: -webkit-linear-gradient(#0E0E0E, #7D7E7D);
  background: -moz-linear-gradient(#0E0E0E, #7D7E7D);   
  background: -ms-linear-gradient(#0E0E0E, #7D7E7D);    
  background: -o-linear-gradient(#0E0E0E, #7D7E7D);     
  background: linear-gradient(#0E0E0E, #7D7E7D);        
  -pie-background: linear-gradient(#0E0E0E, #7D7E7D);                                       
}
#menu a {
  text-decoration:none;
  display:block;
  color: #FFFFFF; 
}
#menu a:hover {
  text-decoration:none;
  display:block;
  color: black; 
}
#menu li:hover {
 -webkit-border-radius: 8px;
  -moz-border-radius: 8px;   
  border-radius: 8px;
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);   
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
  background: #B0AFAF;
  background: -webkit-gradient(linear, 0 0, 0 bottom,from(#B0AFAF),to(#F1EFEF));
  background: -webkit-linear-gradient(#B0AFAF,#F1EFEF);
  background: -moz-linear-gradient(#B0AFAF,#F1EFEF);
  background: -ms-linear-gradient(#B0AFAF,#F1EFEF);   
  background: -o-linear-gradient(#B0AFAF,#F1EFEF);    
  background: linear-gradient(#B0AFAF,#F1EFEF);    
  -pie-background: linear-gradient(#B0AFAF,#F1EFEF);
}


#menu li:first-child {
  text-indent:-9999px;
  background:  url(../images/home.png) center center no-repeat;
}
#menu li:first-child:hover {
  text-indent:-9999px;
  background: url(../images/home.png) center center no-repeat, #0E0E0E; 
  background: url(../images/home.png) center center no-repeat, -moz-linear-gradient(top, #0E0E0E 0%, #7D7E7D 100%); 
  background: url(../images/home.png) center center no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0E0E0E), color-stop(100%,#7D7E7D)); 
  background: url(../images/home.png) center center no-repeat, -webkit-linear-gradient(top, #0E0E0E 0%,#7D7E7D 100%); 
  background: url(../images/home.png) center center no-repeat, -o-linear-gradient(top, #0E0E0E 0%,#7D7E7D 100%); 
  background: url(../images/home.png) center center no-repeat, -ms-linear-gradient(top, #0E0E0E 0%,#7D7E7D 100%); 
  background: url(../images/home.png) center center no-repeat, linear-gradient(to bottom, #0E0E0E 0%,#7D7E7D 100%); 
  filter: url(../images/home.png) center center no-repeat, progid:DXImageTransform.Microsoft.gradient( startColorstr=#0E0E0E, endColorstr=#7D7E7D,GradientType=0 ); 
  
  border-radius:9px; 
  -moz-border-radius:9px;
  -webkit-border-radius:9px;
}

/*-------------------------------- contacto --------------------------------------*/
.cuadro-entradas {
	position:absolute; 
	height: 20%;
	width: 95%;
	left: 0px;
	top: 0px;
	font-family:Arial, Helvetica, sans-serif;
}
.cuadro-entradas-ar-iz {
	position:absolute; 
	height: 50%;
	width: 50%;
	left: 0px;
	top: 0px;
}
.cuadro-entradas-ar-dh {
	position:absolute; 
	height: 50%;
	width: 50%;
	right: 0px;
	top: 0px;	
}
.cuadro-entradas-ab-iz {
	position:absolute; 
	height: 50%;
	width: 50%;
	left: 0px;
	bottom: 0px;	
}
.cuadro-entradas-ab-dh {
	position:absolute; 
	height: 50%;
	width: 50%;
	right: 0px;
	bottom:  0px;	
}

.etiqueta-input {
	position:absolute; 
	height: 100%;
	width: 20%;
	left: 0px;
	top: 0px;	
}
.etiqueta-input label {
	position: absolute;
	top: 25%;
	right: 0px;
	font-size: 80%;
}
.entrada-input {
	position:absolute; 
	height: 90%;
	width: 75%;
	right: 0px;

	/* para que no se salga del tamaño */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

	font-size:80%;
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.25em;
  padding-left: 10px;

	border:1px solid #BBBBBB;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;   
	border-radius: 8px;
	  
	background: #FFFFFF; 
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#E5E5E5));
	background: -webkit-linear-gradient(#FFFFFF, #E5E5E5);
	background: -moz-linear-gradient(#FFFFFF, #E5E5E5);
	background: -ms-linear-gradient(#FFFFFF, #E5E5E5);
	background: -o-linear-gradient(#FFFFFF, #E5E5E5);
	background: linear-gradient(#FFFFFF, #E5E5E5);
	-pie-background: linear-gradient(#FFFFFF, #E5E5E5);

	outline:none;
}


#contacto-form {
	display:block
	overflow:hidden;
	height: 100%;
	width: 100%;
}
#contacto-form fieldset {
	position:absolute; 
	height: 85%;
	width: 92%;
	left: 3%;
	top: 5%;
	border-style: none;
}

.cuadro-adjuntar {
	position:absolute; 
	height: 20%;
	width: 100%;
	left: 0px;
	top: 20%;
}
.texto-suelto {
  float:left;
  display:block;
  font-size:80%;
  line-height:2em;
  width:100%;
}

.examinar {
  width: 98%;
  top: 30%;
	left: 0px;
	color: black;
  font-size:80%;
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.25em;
  padding-left: 10px;

  border:1px solid #BBBBBB;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;   
  border-radius: 8px;
    
  background: #FFFFFF; 
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#E5E5E5));
  background: -webkit-linear-gradient(#FFFFFF, #E5E5E5);
  background: -moz-linear-gradient(#FFFFFF, #E5E5E5);
  background: -ms-linear-gradient(#FFFFFF, #E5E5E5);
  background: -o-linear-gradient(#FFFFFF, #E5E5E5);
  background: linear-gradient(#FFFFFF, #E5E5E5);
  -pie-background: linear-gradient(#FFFFFF, #E5E5E5);

  outline:none;
}
.cuadro-mensaje {
	position:absolute; 
	height: 60%;
	width: 100%;
	left: 0px;
	top: 35%;
}
#contacto-form textarea {
	background-color: red;
	float:left;
	height: 70%;
	width: 100%;
	resize:vertical;

	font-family:Arial, Helvetica, sans-serif;
	font-size:90%;
	line-height:1.25em;

	padding:6px 0px;

	border:1px solid #BBBBBB;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;   
	border-radius: 8px;

	background: #FFFFFF; 
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#E5E5E5));
	background: -webkit-linear-gradient(#FFFFFF, #E5E5E5);
	background: -moz-linear-gradient(#FFFFFF, #E5E5E5);
	background: -ms-linear-gradient(#FFFFFF, #E5E5E5);
	background: -o-linear-gradient(#FFFFFF, #E5E5E5);
	background: linear-gradient(#FFFFFF, #E5E5E5);
  -pie-background: linear-gradient(#FFFFFF, #E5E5E5);		

	overflow:auto;
}
.text-form {
  float:left;
  display:block;
  font-size:90%;
  line-height:2em;
  width:83px;
  font-family:Arial, Helvetica, sans-serif;
}
.cuadro-botones {
	position:absolute; 
	height: 10%;
	width: 100%;
	left: 0px;
	bottom: 0px;
	text-align:center;
}
.cuadro-botones a {margin-right:8px; padding:8px 32px;}
.boton {
  display:inline-block;
  padding:6px 30px;
  font-size:75%;
  line-height:1.238em;
  letter-spacing:-1px;
  text-decoration:none;
  color: #2B2B2B;
	
  border:2px solid #fff;
	
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;   
  border-radius: 8px;
  
  background: #FFFFFF; 
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#E5E5E5));
  background: -webkit-linear-gradient(#FFFFFF, #E5E5E5);
  background: -moz-linear-gradient(#FFFFFF, #E5E5E5);
  background: -ms-linear-gradient(#FFFFFF, #E5E5E5);
  background: -o-linear-gradient(#FFFFFF, #E5E5E5);
  background: linear-gradient(#FFFFFF, #E5E5E5);
  -pie-background: linear-gradient(#FFFFFF, #E5E5E5);		

  cursor:pointer;
}
.boton:hover {background: #DBDBDB;}

.botones-contactar {
	text-align:center;
	padding: 1%;
}
.botones-contactar .boton{
	margin: 1%;
}
.centro_centro {
  background: #0066FF; 
  
  text-align:center;
  width: 90%;
  height: 30%;
  margin: 0% 0% 0% 5%; /* 20%; */
  position: absolute;
  
  font-size:150%;
  color: white;
  /*color: #009EE2;*/

  border-color: var(--c_texto);
  border-style: solid;  
  border-width: 1px;
  border-radius: 9px;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
}

/*------------------------------------- casillero -----------------------------------------------------------------*/
[class*="pos-"] {
  float: left;
  width: 25%;
  height: 25%;
  position: absolute;
}
[class*="pos-"] img {
   width: 100%;
  height: 100%;
  -webkit-transition: all 1s ease-in-out; 
  -moz-transition: all 1s ease-in-out; 
  -ms-transition: all 1s ease-in-out; 
  -o-transition: all 1s ease-in-out; 
}
[class*="pos-"] img:hover {
  transform:scale(0.8);
  -ms-transform:scale(0.8); 
  -moz-transform:scale(0.8); 
  -webkit-transform:scale(0.8);
  -o-transform:scale(0.8); 
}
[class*="pos-1"] {top: 0%;}
[class*="pos-2"] {top: 25%;}
[class*="pos-3"] {top: 50%;}
.pos-11 {left: 0%;}
.pos-12 {left: 25%;}
.pos-13 {left: 50%;}
.pos-14 {left: 75%;}
.pos-21 {left: 0%;}
.pos-22 {left: 25%;}
.pos-23 {left: 50%;}
.pos-24 {left: 75%;}
.pos-31 {left: 0%;}
.pos-32 {left: 25%;}
.pos-33 {left: 50%;}
.pos-34 {left: 75%;}

/*------------------------------------- casillero 3x3 -----------------------------------------------------------------*/
[class*="pos33-"] {
  float: left;
  width: 30%;
  height: 45%;
  position: absolute;
}
[class*="pos33-1"] {top: 2%;}
[class*="pos33-2"] {top: 52%;}
.pos33-11 {left: 2%;}
.pos33-12 {left: 35%;}
.pos33-13 {left: 68%;}
.pos33-21 {left: 2%;}
.pos33-22 {left: 35%;}
.pos33-23 {left: 68%;}

/*------------------------------------- casillero 2x2 -----------------------------------------------------------------*/
[class*="pos22-"] {
  float: left;
  width: 45%;
  height: 45%;
  position: absolute;
}
[class*="pos22-1"] {top: 2%;}
[class*="pos22-2"] {top: 52%;}
.pos22-11 {left: 2%;}
.pos22-12 {left: 52%;}
.pos22-21 {left: 2%;}
.pos22-22 {left: 52%;}

.contiene_pos {
  height: 100%;
  width: 100%;
  position:absolute; 
}
.contiene_pos_imagen {
  text-align: center;
  height: 100%;
  -webkit-transition: all 1s ease-in-out; 
  -moz-transition: all 1s ease-in-out; 
  -ms-transition: all 1s ease-in-out; 
  -o-transition: all 1s ease-in-out; 
}
.contiene_pos_imagen:hover {
  text-align: center;
  height: 100%;
  transform:scale(0.8);
  -ms-transform:scale(0.8); 
  -moz-transform:scale(0.8); 
  -webkit-transform:scale(0.8);
  -o-transform:scale(0.8); 
}