/* CSS Document
border: 4px solid #C00;
 */

:root 
{
	
	
	--colortxtpie:#919191;
	
	
	
	--ColorBlanco:#FFFFFF;
	--ColorClaro:#bcfc83;

 	--ColorMedio:#4a8c1f;
  	--ColorOscuro:#5a4f0d;
	--ColortxtNav:#FFFFFF;
	
	--ColortxtPie:#66ab39;	
	
	
  --ColorFondo:#FFFFFF;
  --colorfondoBt:#f2f9e5;
  --colorbordeBt:#6d8a3c;
  --colorbordeBt:#939393;
  --colortxtBt:#4a6a16;
  
    --ImgAncho:90%;
	--ImgAlto:auto;
  
    --ImgAnchoM:auto;
	--ImgAltoM:100%;
  

  
}


    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/fondo.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;

    }
	
        a:link, a:visited, a:active {
            text-decoration:none;
        }	


#FilaCab, #FilaNav, #FilaCentral, #FilaBotones, #Pie
{
	 width: 100%;
	 display:flex;
	 align-items: center;
}



	
    #FilaCab
	{
      height:100px;
	  background: var(--ColorMedio);
  
    }
	
	#FilaCentral
	{
      height:96%;
  
    }
	#FilaBotones
	{
     /* height:40px; */
    }
	 #Pie
	 {
      height:20px;
	  justify-content: center;
	  background: var(--ColorMedio);
	 }


/* ---------------------------------------------------------------*/



.GrupoBotones
{
	 width: 100%;
	 display:block;
	 align-items: center;
	 justify-content: center;
	 margin: 0 auto;
	text-align:center;	
	vertical-align:middle;
}
.Boton, .Boton_ini
{
	display:inline-block;
	
	padding:0.3em 0px;  /*padding a 0 para quitarle las tabulaciones de los li*/
	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;
	border-color: var(--ColorMedio);
	border-style: solid;
	border-width: 3px 3px 0px 0px;
	background: var(--ColorMedio);
}

.Boton
{
	width:10em;
}

.Boton_ini
{
	width:18em;
}

.Boton a, .Boton_ini a
{
	display:block;
	height: 80%;
}




 .Boton a:link, .Boton a:visited, .Boton a:active, .Boton_ini a:link, .Boton_ini a:visited, .Boton_ini a:active
 {
			text-decoration:none;
			color: var(--ColortxtNav);
			margin: 0 auto;
			font-size:1em;
			font-family: Arial, Helvetica, Sans-serif;
  }


/* ---------------------------------------------------------------*/

.Superior, .Central
{
	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;

}


.Superior
{
	background: var(--ColorFondo);
	
}

.Celda_Sup a:link, .Celda_Sup a:visited, .Celda_Sup a:active, .Celda_Sup a:hover

{
	color: var(--ColorClaro); /* tunear */
}

.Celda_Sup /* .div_titulo_Panel */

{

	text-align:center;
	display: inline-block;
	width:100%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	/*color:#FFFFFF;  tunear */
    margin: 0 auto; 
}

.Superior #centro

{
font-size:1.2em;
text-align:center;
}





/* ---------------------------------------------------------------*/


.d_txt_pie, .bt_Cab
{
	display:block;
	padding:0; /* padding a 0 para quitarle las tabulaciones de los li*/
	margin: 0 auto;
	text-align:center;	
	vertical-align:middle;
}


.d_txt_pie
{
	font-size:0.7em;
	color:var(--ColortxtPie);
}


.bt_Cab
{
	font-size:1em;
	color:var(--ColorMedio);
	text-align:center;
}

.Fila
{

	text-align:center;
	display:block;
	width:100%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:var(--ColorMedio);
    margin: 0 auto; 
	font-size:1em;
}
.Logo_Central
{
height:auto;
width:600px;
}

.Logo_Cab
{
height:90px;
width:auto;
	margin:0.3em;
}
.Img_Tienda
{
height:400px;
width:auto;
position: relative;
}



.ico_telefono, .ico_wasap, .ico_telegram
{
height:69px;
width:auto;
}









#ver_inicio
{
font-weight: bold;
}

.txt_inicio
{

	text-align:center;
	display:block;
	width:94%;
	/* font-family:Verdana, Arial, Helvetica, sans-serif; */
	font-family: Arial, Helvetica, Sans-serif;
	color:var(--ColorOscuro);
	/* text-shadow: 3px 3px 2px var(--ColorBlanco); */
	text-shadow: 0.3em 0.3em 0.5em var(--ColorBlanco);
    margin: 0 auto;
	padding:2em 0px;
	/* padding:2em; */
	font-size:1.3em;
}
.bt_tln
{
	display:inline-block;
	padding:0; /* padding a 0 para quitarle las tabulaciones de los li*/
	margin: 0 auto;
	text-align:center;	
	vertical-align:middle;
}

.bt_desc
{
	display:inline-block;
	padding:0; /* padding a 0 para quitarle las tabulaciones de los li*/
	margin: 0 auto;
	text-align:center;	
	vertical-align:middle;
}


.txt_inicio a:link, .txt_inicio a:visited, .txt_inicio a:focus, .txt_inicio a:hover
{
	text-align:center;
	display:block;
	width:94%;   
	font-family: Arial, Helvetica, Sans-serif;
	color:var(--ColorOscuro);
	/* text-shadow: 3px 3px 2px var(--ColorBlanco); */
	text-shadow: 5px 5px 5px var(--ColorBlanco);
	text-shadow: 0.3em 0.3em 0.5em var(--ColorBlanco);
	
    margin: 0 auto;
	padding:1em 0px;
	/* padding:2em; */
	font-size:2em;

}


.img_fruteria
{
background-image: url("../img/tienda20.jpg");

  background-position: bottom center ; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */

	-webkit-background-size:var(--ImgAncho) var(--ImgAlto);
	-moz-background-size:var(--ImgAncho) var(--ImgAlto);
	-o-background-size:var(--ImgAncho) var(--ImgAlto);
	background-size:var(--ImgAncho) var(--ImgAlto);
	
text-align: center;
}



@media only screen and (max-width: 900px)
 {
	
	.Logo_Central
	{
height:auto;
width:300px;
	}
	.Logo_Cab
{
height:45px;
width:auto;
}
	.Boton
	{
		width:30%;
		height:30px;
		padding:0.3em 0px;  /*padding a 0 para quitarle las tabulaciones de los li*/
		/*padding:1em 0px;  padding a 0 para quitarle las tabulaciones de los li*/
	}
	
	.Boton_ini /*Boton de navegacion inicio*/
	{
		width:60%;
		height:30px;
		padding:0.3em 0px;  /*padding a 0 para quitarle las tabulaciones de los li*/
		/*padding:1em 0px;  padding a 0 para quitarle las tabulaciones de los li*/
	}



.txt_inicio a:link, .txt_inicio a:visited, .txt_inicio a:focus, .txt_inicio a:hover
{
	font-size:1.6em;
}



	
	.Img_Tienda
	{
	height:auto;
	width:300px;
	}
	
	
	.ico_telefono, .ico_wasap, .ico_telegram
{
height:35px;
width:auto;
}


.img_fruteria
{

	-webkit-background-size:var(--ImgAnchoM) var(--ImgAltoM);
	-moz-background-size:var(--ImgAnchoM) var(--ImgAltoM);
	-o-background-size:var(--ImgAnchoM) var(--ImgAltoM);
	background-size:var(--ImgAnchoM) var(--ImgAltoM);

}

	 
}


@media only screen and (max-width: 100px) 
{

	.Logo_Cab
	{
	height:auto;
	width:100px;
	}

}
