html, body {

    margin: 0;
    background-color: #A1B637;
    color: #434343;
    font-family: 'verdana', 'Times', 'serif'!important;

}


p {
    text-align: justify;
    padding: 5px;
    font-size: 14px !important;
}

b {
    color: #6a9c43;
}


header, section, footer {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    
 }


 

#banner {
    width: 100%;
    height: 250px;
    background-image: url(img/banner-esencias-florales.jpg);

}


h1 {

    margin-top: 0;
    color: #A1B637;
    font-size: 20px;
    padding: 8px;
    text-align:center;

}


h2 {
    
    color: #434343;
    font-size: 18px;
    font-style: italic;
    text-align:center;

}

#marca h2 {

    font-size: 12px;
    color: white;
}




header{
    height: 140px;
    background-color: rgba(252, 185, 0, 0.7);
    position: sticky;
    top: 0;
    z-index: 1;


}
    #marca {
    width: 300px;
    height: 80px;
    background: -webkit-linear-gradient(top, #6e2ec7, #A1B637);
    border-radius: 8px;
    margin:5px;
    margin-left: auto;
    margin-right: auto;
}
    #botonera {
       
    width: 750px;
    height: 40px;
    margin: 5px;
    float: left;
}

/* Otra manera de hacer Botonera */

#botonera ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
}

#botonera li {
    flex-grow:1;
    margin: 2px;
   
}

#botonera ul li a {
    display: block;
    text-decoration: none;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 11px;



}

#botonera ul li a:hover {
    background-color: #fcb900;
    border-radius: 10px;
}


/*Estilos para mis botones en Bootstrap*/
.boton_MyColor  {
    color: white;
    background-color: #6e2ec7;
}

.boton_MyColor:hover {
    background-color: #fcb900 !important;
}
/*Fin Estilos para mis botones en Bootstrap*/



/* Fin de Otra manera de hacer Botonera */


#carrito {
    font-size: 14px;
    color: #ffe600;
}


#ingresar {
    width: 90px;
    height: 40px;
    background-color: #2D3277;
    margin: 5px;
    float: right;
    color: white;
    font-size: 12px;
    text-align: center;
    border-radius: 7px;
}

#ingresar p {
    margin-top: -6px !important;
    font-size: 12px !important;
}


#ingresar a {
    
    text-decoration:none;
    text-align:center;
    color:white;  
    
 }

 #ingresar a:hover {
    
    text-decoration:none;
    text-align:center;
    color:white;
    font-weight:bold; 
    
    
 }

 .imgcenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  
}


#borde-img { 
  border: 8px solid transparent;
  border-image: url(img/borde.png) 30 stretch;
}
 


#infogeneral {
    height: 600px;
}

    #caja1_infogeneral {
    width: 590px;
    height: auto;
    float: left;
    background-color: #e1dfdc;
    margin: 5px;
    
}
    #caja2_infogeneral {
    width: 590px;
    height: auto;
    background-color: #e1dfdc;
    float: right;
    margin: 5px;
}


#conocimientos {
   height: 480px;
   background-color: #e1dfdc;
}


    #caja1_conocimientos {   
    width: 270px;
    height: 580px;  
    height: auto; 
    float: left;
    margin: 5px;
    background-color: #e1dfdc;
    
    
}

    #caja1_conocimientos h4, a { 
    text-align: center;
    color: #6a9c43;
    
}

    #caja2_conocimientos {
    width: 910px;
    height: 580px; 
    height: auto; 
    float: right;
    margin: 5px;
    background-color: #e1dfdc;
    color: #6e2ec7;
}

#caja2_conocimientos p, h3 {
    text-align: center;
}



#sect3 {
    height: 845px;
}


    #caja1_sect3 {
    width: 570px;
    height: 400px;
    float: left;
    margin: 15px;
    
    
}
    #caja2_sect3 {
    width: 570px;
    height: 400px;
    float: right;
    margin: 15px;
    
}
    #caja3_sect3 {
    width: 400px;
    height: 400px;
    float: left;
    margin-left: 95px;
    
}
    #caja4_sect3 {
    width: 400px;
    height: 400px;
    float: right;
    margin-right: 95px;
    
}


#sect4_col3 {
    
    background-image: url(img/dandelion.jpeg);
    border-radius: 6px;
}



footer{
    height: 150px;
    background-color: #333;
    position: relative;
    display: flex;

    
}
    #botonera2 {
    width: 900px;
    height: 120px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 15px;
    bottom: 15px;
    background-image: url(img/banner.jpg);
    border-radius: 10px;
    color: white;

   
}

   #botonera2 p {
    margin-top: 0;
    text-align: center;
  }

  #botonera2 a {
    color:white;
  }

form, #sect4_col3 h3 {
    color: white;
}


/*
*
*
*
*
*
*
*
*
*
*
*
*
*/

/* ///////////////////// RESPONSIVE ///////////////////////////////////*/

/* /////// de 600 a 1200 px /////// */
  @media all and (min-width: 600px) and (max-width: 1200px) {

    header, section, footer {
    width: 580px;
    
 }

#banner {
       height: 200px;
   
}


 header{
    height: 190px;


}

h1 {

    font-size: 17px;
    padding: 5px;
    

}


    #marca {
    width: 250px;
    height: 70px;
    margin:3px;
    margin-left: auto;
    margin-right: auto;
}
    #botonera {
       
    width: 580px;
    height: 35px;
    margin: 2px;
    float: none;
}




#ingresar {
    
    margin: 18px;

}


#infogeneral {
    height: 580px;

}

    #caja1_infogeneral {
    width: 280px;
    height: 590px;
    float: left;
    margin: 0px; 
    overflow: auto;
}
    #caja2_infogeneral {
    width: 280px;
    height: 590px;
    float: right;
    margin: 0px;
    overflow: auto; 
}


#conocimientos {
    height: 380px; 
    
}


    #caja1_conocimientos {   
    width: 210px;
    float: left;
    margin: 0px;
    
}

    #caja2_conocimientos {
    width: 370px;
    float: right;
    margin: 0px;
    
}



    #caja1_sect3 {
    width: 290px;
    height: 610px;
    float: left;
    margin: 0px;
    
}
    #caja2_sect3 {
    width: 290px;
    height: 610px;
    float: right;
    margin: 0px;
    
}
    #caja3_sect3 {
    width: 290px;
    height: 460px;
    float: left;
    margin-left: 0px;
    
}
    #caja4_sect3 {
    width: 290px;
    height: 460px;
    float: right;
    margin-right: 0px;
    
}


footer{
    height: 150px;
    position: relative;
    display: flex;

    
}
    #botonera2 {
    width: 900px;
    height: 120px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 15px;
    bottom: 15px;
    

   
}

   #botonera2 p {
    margin-top: 0;
   
  }

  

  }

/*
*
*
*
*
*
*
*
*
*
*
*
*
*/

/* /////////// menor a 600 px /////////////// */
  @media all and (max-width: 599px) {


header, section, footer {
    width: 90%;

  
 }



#banner {
    display: none;
} /*oculto el banner*/



header{
    height: 280px;
    position: relative;
 


}
 

    #botonera {
       
    width: 100%;
    height: 70px;
    margin: 5px;
    float: none;
}


#botonera ul {
    display: block;
}


#botonera ul li a {
    display: block;

}

#botonera ul li a:hover {
    width: 93%;
   
}


#infogeneral {
    height: auto;
    background-color: #6a9c43;

}

    #caja1_infogeneral {
    width: 100%;
    height: auto;
    float: none;
    margin: 0px;
    
}
    #caja2_infogeneral {
    width: 100%;
    height: auto;
    background-color: #e1dfdc;
    float: right;
    margin: 0px;
}


#conocimientos {
 height: auto;
}


    #caja1_conocimientos {   
    width: 100%;
    height: auto;
    float: right;
    margin: 0px;
    
}

    #caja2_conocimientos {
    width: 100%;
    height: auto;
    float: right;
    margin: 0px;
}


#sect3 {
    height: auto;
}


    #caja1_sect3, #caja2_sect3, #caja3_sect3, #caja4_sect3 {
    width: 100%;
    height: auto;
    float: right;
    margin: 0px;
}


footer{
    
    padding-top: 3px;
    padding-bottom: 3px;

    
}
    #botonera2 {
    width: 90%;
    height: auto;
    top: 0px;
    bottom: 0px;
}


  }