/* CSS Document
border: 4px solid #C00;
 */

:root 
{

  --colorfondoBt:#97ba76;
  --colorbordeBt:#6d8a3c;
  --colorbordeBt:#939393;
  --colortxtBt:#4a6a16;
  
  --colorfondoBt:#d3885d;
  --colorbordeBt:#f3c987;
  --colortxtBt:#4a6a16;
  
  --ColorFondoOK:#9af07c;
  --ColorFondoKO:#f0957c;
  
  --ColorFondo:#FFFFFF;
  --ColorFondoTrCab:rgba(255, 255, 255, 1);
  --ColorFondoTrAviso:rgba(255, 255, 255, 0.9);
  --ColorFondoTransp:rgba(255, 255, 255, 0.7);
  --ColorFondoTranspCerrado:rgba(255, 255, 255, 0.9);
  --ColorTxt:#000000;
  --ColorFondoCelda:#6e8e4e;
  --ColorFondoCab2:#97ba76;
 
  --ColorFondoCab:#97ba76;
  
  --ColorFondoCab:#d3885d;
  --ColorMedio:#b5df8a;
  --ColorResalta:#f09e28;
  --ColorResaltaCerrado:#e83e19;
  
  


  --colortxtCab:#e6ecf9;
  --colortxtNav:#e6ecf9;
  --colortxtTit:#FFFFFF;
  --colortxtpie:#2a5202;
  --colorbordeenviar:#45f910;
  
  transition:all .5s ease-in-out;
}







    html, body{
      height:100%;
	  width:100%;
	  padding:0;
      margin: 0 auto;
      display: flex;
	  display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

	  
	background-image: url("../img/FotoFondo.jpg");
    background-image: no-repeat;
    background-image: fixed;
    background-image: center;
	background-position:center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	/*
	background-image: url("../img/FondoEntrada.jpg");
	background-position:0 0;
	background-repeat:repeat;
	*/
    }
	
        a:link, a:visited, a:active {
            text-decoration:none;
        }	


#FilaCab, #FilaCentral,  #Pie
{
	 width: 100%;
	 display:flex;
	 align-items: center;
}


#FilaCab, #FilaCentral, #Pie
{
	justify-content: space-between;
	justify-content: center;
}



	
    #FilaCab
	{
      height: 50px;
	   background:var(--ColorFondoCab);
  
    }
	#FilaCentral
	{
      height: 100%;
	
	
    }	
	#Pie
	{
      height: 100px;
	  vertical-align:bottom;
	 }






















/*  --------------------------------------------------------------------------- comun ---------------------------------------------------------------------------*/
.CeldaFoto /* .div_titulo_Panel */

{

	
	padding:0.2em 0.2em;
	text-align:center;
	display: inline-block;
	font-size:1em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:var(--ColorTxt);
	background:var(--ColorFondo);
	vertical-align:middle;
	margin: 0 auto;
	
}

.CeldaFotoSola /* .div_titulo_Panel */

{

	height:80%;
	width:100%;
	text-align:center;
	display: block;
	vertical-align:middle;
	margin: 0 auto;
	
}

.FotoSolaInfo
{
	
	height:auto;
	width:60%;
	max-height: 90%;
	
}

.PlanoSolaInfo
{
	height:900px;
	width:auto;
}



.Fila, .Superior, .Inferior, .Div_AD, .Central, .FilaAD
{
	display:block;
	width:100%;
	padding:0; /* padding a 0 para quitarle las tabulaciones de los li*/
	margin: 0 auto;
	text-align:center;	
	vertical-align:middle;

}


/*  .Celda_Sup div a:link, .Celda_Sup  div a:visited, .Celda_Sup div a:active, .Celda_Sup div a:hover*/

.Celda_Sup a:link, .Celda_Sup a:visited, .Celda_Sup a:active, .Celda_Sup a:hover

{
	color: var(--ColorTxt); /* tunear */
}

.Celda_Sup /* .div_titulo_Panel */

{
	text-align:center;
	display: inline-block;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF; /* tunear */
	background:var(--ColorFondoCab);
	vertical-align:middle;
	
}

.Fila
{
	padding:0.2em 0px;
}


.FilaInfo
{
	display:block;
	width:70%;
	
	margin:0 auto;
	margin-bottom:0.6em;
	text-align:center;	
	vertical-align:middle;
	background:var(--ColorFondoTransp);
	
	/*
	filter:alpha(opacity=60); 
	-moz-opacity:0.6;
	opacity: 0.6; 
	*/
	
}


.FilaInfo2
{
	display:block;
	width:60%;
	
	margin:0 auto;
	margin-top:0.6em;
	margin-bottom:0.6em;
	text-align:center;	
	vertical-align:middle;
	background:var(--ColorFondo);
	 border-color: var(--ColorResalta);
	border-style: solid;
	border-width: 3px;
	
	
	background:var(--ColorFondoTransp);
	
	/*
	filter:alpha(opacity=70); 
	-moz-opacity:0.7;
	opacity: 0.7; 
	*/
	
	
 
}

.FilaInfoCerrado
{
	display:block;
	width:60%;
	
	margin:0 auto;
	margin-top:1em;
	margin-bottom:0px;
	text-align:center;	
	vertical-align:middle;
	background:var(--ColorFondo);
	border-color: var(--ColorResaltaCerrado);
	border-style: dashed;
	border-width: 4px;
	
	
	background:var(--ColorFondoTranspCerrado);
	border-radius: 15px 15px 15px 15px;
	-moz-border-radius: 15px 15px 15px 15px;
	-webkit-border-radius: 15px 15px 15px 15px;
	
	/*
	filter:alpha(opacity=70); 
	-moz-opacity:0.7;
	opacity: 0.7; 
	*/
	
	
 
}


.FilaFondo
{
	width:80%;
	margin:1em 0px;
	padding:0.6em 0.6em;
	text-align:center;
	display: inline-block;
	background:var(--ColorFondoTransp);
	
	vertical-align:middle;
	border-radius: 15px 15px 15px 15px;
	-moz-border-radius: 15px 15px 15px 15px;
	-webkit-border-radius: 15px 15px 15px 15px;
}


.Celda, .CeldaInfo /* .div_titulo_Panel */

{

	text-align:center;
	display: inline-block;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:var(--ColorTxt);
	vertical-align:middle;
	
}

.Celda /* .div_titulo_Panel */

{
	width:30%;
	padding:0.6em;
	font-size:1em;
	
}



.CeldaInfo 

{

	width:250px;
	padding:0.3em;
	text-align:center;
	display: inline-block;
	vertical-align:middle;
	/* background:var(--ColorFondo); 
	background:var(--colorbordeBt); */
	border-radius: 15px 15px 15px 15px;
	-moz-border-radius: 15px 15px 15px 15px;
	-webkit-border-radius: 15px 15px 15px 15px;
	/* 
	border-color: var(--colorfondoBt);
	border-style: solid;
	border-width: 3px 3px 3px 3px;
	*/
	
}

.CeldaInfo a
{
	display:block;
	
}

.txtCeldaInfo
{
	display:block;
	padding:0.6em;
	/* height:100%; */
	background:var(--ColorFondo);
	text-align:center;
	font-size:1em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:var(--ColorTxt);
	border-radius: 10px 10px 50px 50px;
	-webkit-border-radius: 10px 10px 50px 50px;
	-moz-border-radius: 10px 10px 50px 50px;
	border: 6px double;
	border-top-width: 0px;
	border-color: var(--colorfondoBt);
}

#TamCelda10
 {
	 width:10%;
 }
 #TamCelda15
 {
	 width:15%;
 }
 #TamCelda30
 {
	 width:30%;
 }
 #TamCelda60
 {
	 width:60%;
 }
  #TamCelda90
 {
	 width:90%;
 }


 

.Celda65 /* .div_titulo_Panel */

{

	width:65%;
	padding:0.6em 0.6em;
	text-align:center;
	display: inline-block;
	font-size:1em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:var(--ColorTxt);
	background:var(--ColorFondo);
	filter:alpha(opacity=80); /* IE < 9.0 */
	-moz-opacity:0.8; /* Mozilla */ 
	opacity: 0.8; /* CSS3 */
	vertical-align:middle;
	 border-color: var(--ColorResalta);
	border-style: solid;
	border-width: 1px;
	
}

.Superior #izda

{
/* margin-top:4px;
margin-left:0.4em;
 */ 
width:60%;
float:left;
text-align:left;

vertical-align:middle;
}

.Superior #centro

{
width:00%;
margin-top:-15px; /* la mitad del tamaño de la imagen */
font-size:1em;
text-align:center;
}

.Superior #drcha
{
float:right;
width:30%;
text-align:right;
vertical-align:middle;
}





.Celda_Sup a
{
	
}


.GrupoBotones
{
	width: 100%;
	height: 100%;
	display:block;
	align-items: center;
	justify-content: center;
	margin:0 auto;
	text-align:center;	
	vertical-align:bottom;
	
}









.CeldaBT 

{

	width:40%;
	padding:0.6em;
	text-align:center;
	display: inline-block;
	vertical-align:middle;
	background:var(--ColorFondo);
	border-radius: 15px 15px 15px 15px;
	-moz-border-radius: 15px 15px 15px 15px;
	-webkit-border-radius: 15px 15px 15px 15px;
	border-color: var(--colorfondoBt);
	border-style: solid;
	border-width: 3px 3px 3px 3px;
	
}

.CeldaBT a
{
	display:block;
	height:100%;
	text-align:center;
	font-size:1em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:var(--ColorTxt);
}

.Boton
{
	display:inline-block;
	padding-top: 20px;
	width:15em;
	height:70px;
	margin: 0 auto;
	text-align:center;	
	vertical-align:middle;
	border-radius: 15px 15px 0px 0px;
	-moz-border-radius: 15px 15px 0px 0px;
	-webkit-border-radius: 15px 15px 0px 0px;
	
	font-size:1em;
	color: var(--colorfondo);
	background:var(--colorfondoBt);
	
	
	border-color: var(--colorbordeBt);
	border-style: solid;
	border-width: 3px 3px 0px 3px;
	
}
.Boton a
{
	display:block;
	height:100%;
	text-align:center;
}
 .Boton a:link, .Boton a:visited, .Boton a:active
 {
            text-decoration:none;
			color: var(--ColorOscuro);
 }	


/*   para color de piscina */

#TamCelda30Abierta,  #TamCelda30Cerrada
 {
	 width:30%;
 }

#TamCelda30Abierta a
 {
	 background:var(--ColorFondoOK);
 }
 #TamCelda30Cerrada a
 {
	 background:var(--ColorFondoKO);
 }

/* ----------------------------------------------------- login ----------------------------------------------------------------------------*/


.Login
{
	display:block;
	padding:2em; /* padding a 0 para quitarle las tabulaciones de los li*/
	margin: 0 auto;
	text-align:center;	
	vertical-align:middle;
	background: var(--ColorClaro);
	
	border-radius: 32px 32px 32px 32px;
	-moz-border-radius: 32px 32px 32px 32px;
	-webkit-border-radius: 32px 32px 32px 32px;
}

.ico_log
{
height:auto;
width:1em;
 vertical-align: text-bottom;  
}
.ico_salir
{
height:auto;
width:30px;
 vertical-align: text-bottom;  
}


.div_login
{
	padding:0.6em;
	
}




.txt_info
{
	font-size:1em;
background:white;
 filter:alpha(opacity=60); /* IE < 9.0 */
 -moz-opacity:0.6; /* Mozilla */ 
 opacity: 0.6; /* CSS3 */
 
}


.txt_Volver
{
width:50%;
font-size:1.2em;
background:var(--ColorFondo);
padding:0.6em 0px;
margin:0 auto;
border-radius: 32px 32px 32px 32px;
-moz-border-radius: 32px 32px 32px 32px;
-webkit-border-radius: 32px 32px 32px 32px;
}

.txt_info p
{
	font-size:1.2em; 
}

.txt_info2
{
margin:0.7em;
}
.txt_cerrado
{
margin:0.5em;
}

.txt_info2_grande
{
font-size:2em;
}

.txt_info2_normal
{
font-size:1.4em;
}

.txt_info2_min
{
font-size:1em;
}

.img_info
	{
		height:auto;
		width:600px;
	}

.ico_info
	{
		height:100px;
		width:auto;
		vertical-align:middle;
	}

.ico_bandera
	{
		height:50px;
		width:auto;
		vertical-align:middle;
	}
	
	.ico_banderapeq
	{
		height:40px;
		width:auto;
		vertical-align:middle;
	}

#d_Banderas
{
	display:none;
}
#d_Banderas a
{
	margin:1em 0px;;
}
.icoS_bandera
	{
		height:50px;
		width:50px;
		vertical-align:middle;
		
	}
.ico_telefono
	{
		height:50px;
		width:50px;
		vertical-align:middle;
	}





.ico_logocab
	{
		height:50px;
		width:auto;
		vertical-align:middle;
	}





#caja{
	position: absolute;
	top:0;
	width: 100%;
	margin: auto;
	height: 0px;
	background:var(--ColorFondoCab);
	box-shadow: 10px 10px 3px #D8D8D8;
	transition: height .4s;

}







@media only screen and (max-width: 900px)
 {


		.Boton
		{
			width:30%;
		}

		.Celda /* .div_titulo_Panel */

		{
			padding:0px 0.4em;
			text-align:center;
			display: inline-block;
			font-size:0.8em;
			width:45%;
		}

		/* boton info */
		
		.CeldaInfo 

		{
			width:130px;
		}
		
		.ico_info
	{
		height:75px;
	}
		.txtCeldaInfo
		{
			
			font-size:0.8em;
			
		}
		
		.CeldaBT 
		{
			width:70%;
		}

		.CeldaBT a
		{
			font-size:1.5em;
		}
		.FilaInfo
		{
			
			width:95%;
		}
		.FilaInfo2, .FilaFondo, .FilaInfoCerrado
		{
			
			width:90%;
		}
		.txt_Volver
		{
			width:70%;
		}
		
		.FilaInfo, .FilaInfo2
		{
			background:var(--ColorFondoTransp);
	
			/*
			filter:alpha(opacity=70); 
			-moz-opacity:0.7;
			opacity: 0.7; 
			*/
	
		}

.txt_info2
{
margin:0.5em;
}

.txt_cerrado
{
margin:0.2em;
}
.txt_info2_grande
{
font-size:1.6em;
}

.txt_info2_normal
{
font-size:1.2em;
}

.txt_info2_min
{
font-size:1em;
}

		
/* SIN SCROLL ************************************************************/
.CeldaFoto /* .div_titulo_Panel */

{

	height:auto;
	width:70%;
	padding:0.2em 0.2em;
	text-align:center;
	display: block;
	font-size:1em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:var(--ColorTxt);
	background:var(--ColorFondo);
	vertical-align:middle;
	margin: 0 auto;
	
}

.FotoInfo
{
	height:auto;
	width:100%;
}

.CeldaFotoSola /* .div_titulo_Panel */

{

	height:100%;
	width:100%;
	text-align:center;
	display: block;
	vertical-align:middle;
	margin: 0 auto;
	
}

.FotoSolaInfo
{
	height:auto;
	width:95%;
	
}


.PlanoSolaInfo
{
	height:auto;
	width:95%;
	
}


.FotoSolaInfo {
    transition: transform .2s; 
}
		
		
		
	

}
}

@media only screen and (max-width: 100px) 
{

	.img_info
	{
		height:auto;
		width:100px;
	}
	
}