@import url('https://fonts.googleapis.com/css?family=Special+Elite&display=swap');
@import url(slider.css);
@import url(menu.css);
@import url(sliderP.css);
/*estilos globales*/
*
{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body
{
  font-family: 'Special Elite', cursive, serif, helvetica,arial; 
}
/*=========================================================================
          -------------------seccion de about-------------------
===========================================================================*/
.seccion-about
{
  background-color:#E4E3E3; 
  color:#444;
  font-size:1.1em; 

}
/*titulo seccion*/
.titulo-seccion-about
{
  position:relative;
  top:25px; 
  text-align:center;
  padding:50px 0;  
  /*font-weight: bold;*/
}
/*imagen del chile*/
.img-about
{
  width:100%; 
}
/*mision y vision*/
.content-mision,.content-vision
{
  padding:60px 1em;   
}   
.parrafo-vision,.parrafo-mision
{
  text-align:justify;
  font-size:1.2em;   
}
.content-historia
{
  text-align:justify; 
  font-size:1.2em;
}
/*titulo de lahistoria de la empresa*/
.content-titulo-historia
{
  text-align:center; 
}
/*estilos al tab*/
.nav
{
  border-bottom:0.1px solid #C2C1C1; 
  position:relative;
}
.nav-item
{
  font-size:1.5em; 
  position:relative; 
}

.item-tab:hover
{
  background-color:#F46903; 
  color:#fff;
  cursor:pointer; 
  text-shadow: 2px 4px 6px #2C2A2A;
 }
.item-tab
{
  color:#444;
  font-weight:bold;
  letter-spacing:3px; 
  box-shadow:1px 1px 3px  #222; 
  transition:all .3s; 
}


/*=========================================================================
-------------------seccion de ingredientes y propiedades-------------------
===========================================================================*/
.container-propiedades
{
  background-image:url(../images/Fondos/FondoPropiedades.webp);
  -webkit-background-size: cover;
  background-size: cover;
  background-position:center;
  position:relative; 
   color:#F1C40F;  
   font-size:1.2em; 
}
/*capa oscura*/
.container-propiedades:before
{
  content:""; 
  position:absolute; 
  top:0;
  bottom:0;
  left:0; 
  right:0;
  background:rgba(0,0,0,0.9); 
}
 .cnt-ingredientes
{
  margin-top:20px; 
  z-index:999; 
}
.cnt-propiedades
{
    margin-top:20px; 
    z-index:999; 
}
.content-bote-chile
{
  position:relative; 
  height:auto; 
  display:flex;
  flex-direction:column;  
  justify-content:center; 
  text-align:left;
  align-items:center;   
}
/*imagen del bote de chile de las propiedades*/
.img-bote-chile
{
  height:900px; 
  position:relative;
  bottom:150px;  
}
.content-ingredientes
{
  text-align:right; 
}
.linea 
{
  height:2px;
  width:65%;  
  position:relative;  
}
.subtitulo-ingrediente, .subtitulo-propiedades
{
  width:100%; 
  display:block; 
  color:#fff;
  font-size:22px;   
  text-align:right; 
  margin-bottom:12px; 
}
.subtitulo-propiedades
{
  text-align:left; 
}
.container-icono-ingredientes, .container-icono-propiedades
{
  bottom:10px; 
  margin-bottom:10px;  
}
.content-icono-ingrediente
{
  position:relative; 
  margin-left:-50px;  
}
.content-icono-propiedades
{
  position:relative;
  margin-left:-40px; 
}
.content-icono-ingrediente ,.content-icono-propiedades
{
  position:relative;
  left:30px;  
  width:80px;
  height:80px;
  border-radius:50%;
  border:2px solid #f1f1f1;
  text-align:center;
  display:flex;  
  flex-direction:column;
  justify-content:center; 
}
.icono1 i
{
  color:#F39C12    ;
}
.icono1:hover
{
  background-color:#F39C12    ;
  transition:all 1s;  
}
.icono1:hover > i
{
  color:#fff;
}
/*icono 2*/
.icono2 i
{
  color:#D35400  ;
}
.icono2:hover
{
  background-color:#D35400  ;
  transition:all 1s;  
}
.icono2:hover > i
{
  color:#fff;
}
/*icono 3*/
.icono3 i
{
  color:#F30808;
}
.icono3:hover
{
  background-color:#F30808;
  transition:all 1s;  
}
.icono3:hover > i
{
  color:#fff;
}
/*icono 4*/
.icono4 i
{
  color:#007800;
}
.icono4:hover
{
  background-color:#007800;
  transition:all 1s;  
}
.icono4:hover > i
{
  color:#fff;
}
/*icono 5*/
.icono5 i
{
  color:#2980B9  ;
}
.icono5:hover
{
  background-color:#2980B9  ;
  transition:all 1s;  
}
.icono5:hover > i
{
  color:#fff;
}
/*icono 6*/
.icono6 i
{
  color:#C0392B  ;
}
.icono6:hover
{
  background-color:#C0392B  ;
  transition:all 1s;  
}
.icono6:hover > i
{
  color:#fff;
}
.content-icono-ingrediente i , .content-icono-propiedades i
{
  font-size:3em; 
}
.content-subtitulo-propiedad
{
  position:relative;
  left:80px; 
}
.content-propiedades
{
  text-align:left; 
}
.descPropiedad
{
  text-align:left;  
}
.content-icono-propiedad
{
  position:relative;
  left:-10px;  
}
/*==================================================
----------------seccion productos----------------
====================================================*/
.seccion-productos
{
  background-image:url(../images/Fondos/fnd-negro.webp); 
  background-size:cover;
  background-position:center; 
    height:auto;
    color:#fff;
    margin-bottom:30px;
    position:relative;  

}
/*capa oscura de la seccion*/
.seccion-productos:before
{
  content:""; 
  position:absolute; 
  top:0;
  bottom:0;
  left:0; 
  right:0;
  background:rgba(0,0,0,0.6);
}
.container-titulo-producto
{
  margin:auto; 
}
.container-imgs-productos
{
  position:relative;
  padding:20px; 
      
}

.container-card-productos{
  display:flex;
  justify-content:start;  
  flex-wrap:wrap;
  padding-left: 150px;
}
.content-productos
{
  width:400px; 
  height:auto; 
  border:2px solid #f1f1f1;
  display:flex;   
  flex-direction:column;
  align-items:center;   
  margin-bottom:20px;  
  transform:scale(.95);  
  transition:all .4s; 
  letter-spacing:2px; 
}

.content-productos:hover
{
  background: rgb(159,180,29);
  background: radial-gradient(circle, rgba(159,180,29,1) 0%, rgba(46,126,2,0.9948354341736695) 100%);
  transform:scale(1);  
  box-shadow: 1px 1px 6px 1px #f2f2f2;
}
.img-producto
{ 
  height:300px;  
}
.content-titulo-producto
{
  text-align:left; 
}
.content-descrip-producto
{
  width:100%;  
  height:auto; 
}
.presentacion-producto
{
  text-align:center; 
}
.content-presentaciones
{
  list-style:none; 
}
.divicion-presentacion
{
  background-color:tomato;
  width:80%;
  height:3px;   
  margin:auto;
  margin-bottom:20px;  
}
/*descripcion de la seccion productos*/
.destitulo-producto
{
  font-size: 1.2em;
}

/*=========================================================================
        -------------------seccion punto de venta-------------------
===========================================================================*/
.container-punto-venta
{  
  background-color:#f1f1f1;
  color:#777;
  text-align:center; 
}
/*=========================================================================
        -------------------seccion Footer o pie de pagina-------------------
===========================================================================*/
.footer-area
{
  position:relative; 
  background-image:url(../images/Fondos/FondoFooter.webp); 
  -webkit-background-size: cover;
  background-size: cover;
  background-position:center;
  background-repeat:no-repeat; 
}
.pie-pagina:before
{
  content:""; 
  position:absolute; 
  top:0;
  bottom:0;
  left:0; 
  right:0;
  background:rgba(0,0,0,0.8); 
}
.iconos
{
  display: flex;
  flex-direction: column;
  justify-content:flex-end;
  align-items: center;
  text-align:center;  
  top:15px;
  position:relative;
  background-color:#333;  
  border-radius:40%;
  max-width:55px;
  height:55px;   
  font-size:1.8em; 
  transition:all .5s;  
}
.iconos a
{
  text-decoration: none;
  color:#D4D1D1;
}
.iconos:hover
{
  background-color:#D35400;
  transform:scale(1.2);  
}
.iconos:hover i
{
  color:#fff;
  transition:all .5s; 
}
.tel-local ,.celular ,.info-email 
{
  font-size:18px; 
  color:#999;
}
.tel-local i,.celular i,.info-email i
{
  font-size:15px; 
  color:#f1f1f1;
}
.img-contacto
{
  background-image: url(../img/banner-bg.jpg);
}
.llamanos a
{
 position:relative; 
 top:10px; 
 left:-9px;
 text-decoration:none;
 color:#999;
}

.llamanos a:hover
{
  color:#D35400;
}
.content-icon
{
  font-size:1.5em; 
  color:#444;
}
.des-info-contacto
{
  font-size:16px; 
  color:#666;
}
/*=========================================================================
        -------------------seccion infomacion de contacto-------------------
===========================================================================*/
.formulario-contacto
{
    background-image:url(../images/Fondos/fnd-negro.webp); 
    padding:50px; 
}
.titulo-formulario
{
  color:#fff;
  margin:auto;
  margin-bottom:40px; 
}
.content-icon 
{
  font-size:1.3em; 
  color:#444;
}
.footer-text
{
  color:#999;
}
.des-info-contacto
{
  font-size:16px; 
  color:#666;
}
/*formulario*/
#consulta
{
  min-height:200px; 
  max-height:200px; 
}

/*=========================================================================
        -------------------Apartado responsive-------------------
===========================================================================*/
/*pantallas de 991 en adelante*/
@media(max-width:991px)
{
/*=====================================
----Seccion Responsive de Productos-----
=======================================*/
  .container-imgs-productos
  {
  justify-content:space-around; 
  }

  .container-card-productos{
    margin-left: 0;
  }
/*=====================================
----Seccion Responsive de propiedades-----
=======================================*/
  .img-bote-chile
  {
    width:550px;
    height:750px;
    margin-top:80px;
    margin-bottom:-60px; 
  }
  .content-bote-chile
  {
    /*background: red;*/
    display:none; 
    max-width: 800px;
  }
  .cont-propiedades
  {
    margin-top:150px; 
    /*background-color:red; */
  }
  .content-icono-propiedades
  { 
    margin-left:80px;  
  }
}


@media(max-width:767px){

/*logo del sitio*/
  .img-logo
  {
    position:absolute;
    top:-35px; 
    left:0;
    width:40%;    
    height:165px; 
    /*background: red;*/
  }
/*=====================================
----Seccion Responsive de about-----
=======================================*/
  /*titulo seccion about*/
  .title-about
  {
    position:relative;
    top:30px; 
    font-size:1.7em; 
    font-weight:bold; 
  }
  /*botones del tab*/
  .nav-item{
    font-size:1em;
  }
/*=====================================
----Seccion Responsive de propiedades-----
=======================================*/
  .content-icono-propiedades
  {
    margin-left:10px;  
  }
  .subtitulo-ingrediente
  {
    font-size:24px;  
  }
}

@media(max-width:480px)
{
/*logo*/
   .img-logo
  {
   
   top:-25px;
    width:35%;    
    height:100px; 
  }
/*=====================================
---Seccion Responsive de propiedades---
=======================================*/
.container-card-productos{
  margin-left: 0;
}
  .subtitulo-ingrediente
  {
    font-size:24px;  
  }
  .content-icono-ingrediente
  {
    margin-left:-50px 
  }
  .content-icono-propiedades
  {
    margin-left:-26px 
  }
  .img-bote-chile
  {
    width:300px; 
    height:500px;
    /*margin-left:-110px; */
  }
  .content-icono-propiedades
  { 
    margin-left:-20px;  
  }

/*=====================================
---Seccion Responsive de productos---
=======================================*/
.container-card-productos{
  padding-left: 15px;
}
  .content-productos
  {
    width:340px; 
  }
/*=========================================
---Seccion Responsive de puntos de venta---
===========================================*/
  .titulo-puntos-ventas
  {
    font-size:1.5em; 
  }
/*=====================================
---Seccion Responsive de footer---
=======================================*/
  .tel-local ,.celular ,.info-email
  {
    font-size:12px; 
  }  
}