@charset "utf-8";

/*FONDO DE LA PÁGINA*/
body
{
    background-image: url(../imagenes/fondo.jpg);
}/*Fin del cuerpo*/


/*Estas son las fotos del encabezado en total 3*/
.logos 
{
    padding: 1px; 
    margin: 1px; 
    float: left; 
    width: 58px;
    height: 60px;
    border-radius: 50%;
    box-shadow:  0 0 3.5px 3.5px #888;
    border: 2px solid #000000;
}

/*Aqui esta la seccion de los arboles*/

figure 
{
    margin: 10px 0px;
    text-align: center;
}

figure img 
{
    max-width: 250px;
    width: 100%;
    padding: 1%;
    border: 1px solid;
}

/*Esto es lo que hace que las fotos se "muevan"*/

figure:hover {-webkit-transform:scale(1.1);transform:scale(1.1);}


/*Aqui termina el esqueleto de las fotos*/

/*-----------------------------------------------Aqui estan las fotos de la tabla---------------------------------------------*/

/*Imagen de una mesa de cultivo*/
.A
{

    background-image: url(../imagenes/mesaC.PNG);
    height: 120px;
    width: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 2%;
 
}

/*Imagen de una maceta*/
.B
{
    background-image: url(../imagenes/maceta.jpg);
    height: 120px;
    width: 190px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 2%;
    
}
/*Imagen jardinera*/
.C
{
    background-image: url(../imagenes/jvertical.jpg);
    height: 140px;
    width: 190px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 2%;  
    
}

/*Imagen de Maceta C*/
.D
{
    background-image: url(../imagenes/mcolgante.jpg);
    height: 140px;
    width: 190px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 2%;  
}

/*------------------------------------INICIO------------------------------------------------*/

/*estas son las fotos del inicio*/
.E
{
    width: 100%;
    max-width: 375px;
    height: 60%;
    max-height: 280px;
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    background-origin: content;
    background-position: center;
    padding: 2.5%;
    padding-bottom: 1%;
    margin: 1PX;
    float: left; 
}

/*Esto es lo que hace que las fotos se "muevan"*/

.E:hover {-webkit-transform:scale(1.05);transform:scale(1.05);}


.F
{
    width: 100%;
    max-width: 310px;
    height: 35em;
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    background-origin: content;
    background-position: center;
    padding: 1%;
    padding-bottom: 1%;
    margin: 4%;
    float: left; 
    /*background-image: url(../imagenes/hojita.gif);*/
    
}
.G
{
    width: 100%;
    max-width: 320px;
    height: 35em;
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    background-origin: content;
    background-position: center;
    padding: 1.5%;
    padding-bottom: 1%;
    margin: 3.3%;
    float: left; 
    background-image: url(../imagenes/gato.gif);

}
/*Fotos del inicio*/

/*ESTAS SON LAS FOTOS DE LA SECCION DE LA TIENDA*/
.J
{
    width: 80%;
    max-width: 300px;
    height: 40%;
    max-height: 280px;
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    background-origin: content;
    box-shadow:inset 5px 5px 5px #888888;
    padding: 1%;
    border: 2px solid #000000;
    float: left; 
    margin-bottom: 5%;
    margin-left: 10%;
  
}
/*--------------------------------------------IZQUIERDA,DERECHA----------------------------------*/
/*esta es para las imagenes a la izquierda */

.K
{
    width: 80%;
    max-width: 300px;
    height: 40%;
    max-height: 280px;
    float: left; 
    margin-bottom: 2%;
    margin-left: 1%;
    margin-right: 3%;
    border: 2px solid #000000;
  
}

/*Esta es para imagenes a la derecha*/
.L
{
    width: 80%;
    max-width: 300px;
    height: 40%;
    max-height: 280px;
    float: right; 
    margin-bottom: 2%;
    margin-left: 2%;
    margin-right: 1%;
    border: 2px solid #000000;
  
}

/*Foto del blog*/
.M
{
    width: 80%;
    max-width: 400px;
    height: 70%;
    max-height: 320px;
    float: right; 
    margin-bottom: 2%;
    margin-left: 3%;
    margin-right: 1%;
    border: 2px solid #000000;
}

/*-----------------------------------------------------------FOTOS DEL INICIO----------------------------------------------------------*/

.logs 
{
    padding-left: 45%;
    padding-top: 5%; 
    margin: 1px; 
    float: left; 
    width: 58px;
    height: 65px;
    padding-bottom: 3%;
 
}
