*{ box-sizing: border-box;}
h1,h2,h3,h4,h5,h6{ margin: 0; font-family: sans-serif;}
body { margin: 0.5em;}
p { font-family: sans-serif;}

/* INICIO DEL HEADER */
    .header-principal { width: 100%;}
    .nav-principal{ width: 100%; position: relative; padding: 0.2em;}
    .contenedor{ display: flex; width: 100%; margin: auto; flex-wrap: wrap; align-items: center; 
                justify-content: space-between; text-align: center; align-items: flex-start; }

/* ICONOS DE REDES SOCIALES - HEADER */
    .social-icon{ display: flex; justify-content: space-between;}
    .social-icon-link{ text-decoration: none;}
    .iconos{ display: flex; color: black; font-size: 3em; align-items: center; justify-content: center;
        width: 1em; height: 1.6em; }
    .iconos:hover{ color: blue; }

/* LOGO DE LA WEB - HEADER */
    .contenedor-logo{ display: flex; justify-content: space-between; }
    .logo{ width: 15em; margin-left:-3em; }

/*Boton del menu desplegble*/
    .contenedor-logo{ display: flex; justify-content: space-between; }
    .icon-menu{ position: absolute; right: 0.1em;  width: 1em; color: black; font-size: 3em;
                 cursor: pointer; margin-top: 0.25em; }
    .icon-menu:hover{ color: blue; }

/* Menu*/
    .menu{
        position: absolute;
        top: 3.3em; 
        left: 0;
        width: 100%;
        background: white ; /* fondo del menu desplegable*/
        margin: 0;
        list-style: none;
        text-align: center;
        height: 0; /* no puedo cambiarlo de 0 porque sino el menu no se retrae*/
        overflow: hidden;
        transition: height .3s linear;
        font-family: sans-serif;
        font-size: 1.3em;
        z-index: 999;
    }
    .menu:hover {
        color: black;
    }
    .menu-link{
        display: block;
        padding: 0.5em;
        color: black;
        text-decoration: none;
    }

/*Script despliegue de menu*/
    .mostrar{ /* No borrar es parte del scrip menu.js. 
    	Este mostrar permite que la pantalla se despliege*/
        height: 9.5em; 
    }

/*Separador header*/
    .separador-header{
        display: flex;
        width: 100%;
        margin-top: -0.1em;
        background-color: #F5F5F5 ;
    }
    .contenido{
        width: 100%;
        align-content: center;
        text-align: center;
        align-items: flex-start;
        overflow: hidden;
        font-family: sans-serif;
        padding: 0.1em;
        font-size: 1.5em;
    }
    .contenido1{
        width: 100%;
        align-content: center;
        text-align: center;
        align-items: flex-start;
        overflow: hidden;
        font-family: sans-serif;
        font-weight: bold;
        padding: 0.1em;
        font-size: 1.5em;
    }
    .columna30{ width: 30%; }
    .separador-link {
        color: black;
        text-decoration: none;
    }
    .icon-separador {
       font-size: 4em;
       text-align: center;
       margin-top: 1em;
    }
    .boton{ width: 100%; }
    .contenedor-link {
        display: block;
        color: black;
        text-decoration: none;
    }

/* Acerca de mi */
    .div-acerca{     
        width: 100%;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto ; 
        align-content: center;
        align-items: center;
        text-align: center;
        margin-top: 0.5em;
    }
    .columna-50{
        width: 100%;
    }
    .text-acerca1{
        margin-left: 0.5em;
        margin-right: 0.5em;
        font-size: 2em; 
        font-weight: bold;
        text-decoration: underline;
    }
    .text-acerca2{
        text-align: justify;
        font-size: 1.2em;
        margin-left: 2em;
        margin-right: 2em;
    }
    .img-acerca{
        width: 60%;
        height: auto;
        margin-top: 2em;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .btn-acerca{
        border: none;
        padding: 20px;
        padding-left: 2em;
        padding-right: 2em;
        margin-left: 0.5em;
        margin-right: 0.5em;
        font-size: 1.5em;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);   
    }
    .contenedor-btn {
        display: block;
        color: black;
        text-decoration: none;
    }

/*Div del productos */
    .title-pro{
        width: 100%;
        align-content: center;
        text-align: center;
        overflow: hidden;
        font-family: sans-serif;
        font-style: normal;
        padding-top: 1em;
        font-size: 2em;
    }
    .p-title-pro{
        width: 100%;
        align-content: center;
        text-align: center;
        overflow: hidden;
        font-family: sans-serif;
        padding-top: 0.1em;
        padding-left: 1em;
        padding-right: 1em;
        font-size: 1.2em;
    }
    .contenedor-productos{
        width: 100%;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto; 
        grid-gap: 0.5em;
        padding: 1.5em;
    }
    .contenedor-pro{
        align-content: center;
        align-items: center;
        text-align: center;
        overflow: hidden;
        margin-left: 0.1em;
    }
    .img-pro{
        width: 90%;
        height: auto;
    }
    .text-pro{
        margin-top: 0.7em;
        font-size: 1.5em;
    }
    .p-pro{
        font-size: 1em;
    }

/*Div del servicios */
    .title-serv{
        width: 100%;
        align-content: center;
        text-align: center;
        overflow: hidden;
        font-family: sans-serif;
        padding-top: 1em;
        font-size: 2em;
    }
    .p-title-serv{
        width: 100%;
        align-content: center;
        text-align: center;
        font-family: sans-serif;
        padding-top: 0.3em;
        font-size: 1.2em;
    }
    .contenedor-servicios{
        width: 100%;
        display: grid;
        grid-template-columns: auto ;
        grid-template-rows: auto auto ; 
        grid-gap: 0.5em;
        padding: 1em;
    }
    .contenedor-serv{
        align-content: center;
        align-items: center;
        text-align: center;
        overflow: hidden;
    }
    .icon-serv{
        width: 100%;
        height: auto;
    }
    .text-serv{
        font-size: 1.5em;
    }
    .p-serv{
         font-size: 1em;
    }

/*------reglas CSS para formulario-----*/
    .form-consulta {
        height: 100%;
        width: 200%;
        font-family: 'Source Sans Pro', sans-serif; 
        color: black; 
        font-size: 1.2em;
    }
    .campo-form {
        width:100%; 
        height:auto; 
        margin:2px 0 6px; 
        padding:0.5em; 
        box-sizing: border-box; 
        border-radius:0.1em; 
        border:0; 
        font-family: 'Source Sans Pro', 
        sans-serif; 
        font-size: 100%;
        background-color: white; 
        opacity: 55%;
    }
    label span {color: #f00;}
    textarea {min-height: 150px!important;}
    .btn-form {
        display: inline-block; 
        border:0; background: #000; 
        width: 100%;
        height: 100%; 
        line-height: 1em; 
        padding: 5%;
        color:#fff; 
        text-decoration: none; 
        text-transform: uppercase; 
        font-size: 1em;
    }
    .btn-form:hover {background: #444}
   

/*-------formulario-contacto---------*/
    .contacto {
        display: flex;
        flex:100%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .formulario {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin: auto;
        align-items: right;
        justify-content: space-between;
        align-items: flex-start;

    }

/*-------Backgraund contacto y distribucion del div del formulario ---------*/
    .background-contacto {
      width: 100%;
      background-image: url('img/ingredientes.jpg'); 
      background-repeat: no-repeat;
      padding: 2em;
    }
    .columna-30{
        width: 1%;
    }
    .columna-40{
        width: 98%;
    }

/*-------------------Columnas del pie de pagina---------------------*/
    .columna-100-33{
        width: 100%;
    }
    .columna-100-50 {
        width: 100%; 
    }

/*-------------------Pie de pagina---------------------*/
    .footer-principal .contenedor{
        background-color: #F6F6F6;
        color: black;
        padding: 2em;
        padding-left: 0.5em;
        padding-right: 0.5em;
        font-size: 14px;
        text-align: center;
        align-items: flex-start;
    }

/*-------------------Iconos de pie de pagina---------------------*/
    .iconos2 {
        color: black;
        text-decoration: none;
        margin-right: 0.8em;
        padding-top: 0.25em;
        font-size: 150%;
    }
    .texto-pie{
        font-size: 1em;
        color: black;
        text-decoration: none;
        padding-right: 0.8em;
    }

/*--------boton flotante whatsapp----------*/
    .btn-whatsapp {
        display:block;
        width:2.5em;
        height:2.5em;
        color: #fff;
        position: fixed;
        right:0.5em;
        bottom:1em;
        border-radius:50%;
        text-align:center;
        z-index:999;
        font-size: 1.2em;
    }

/*--------boton flotante home----------*/
    .btn-home {
        display:block;
        width:1.9em;
        height:1.9em;
        color: #fff;
        position: fixed;
        right:0.8em;
        bottom: 4.5em;
        border-radius:50%;
        text-align:center;
        z-index:999;
       font-size: 1.2em;
    }
    .btn_home_img {
       font-size: 3em;
       color: black;
    }

    .copy{
        display: flex;
        position: relative;
        width: 100%;
        text-align: center;
        align-content: center;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

/*------------------Responsive MENU---------------------*/
   @media screen and (min-width: 768px){
        /* Acerca */
       .div-acerca{
            display: flex;
            width: 100%;
            position: relative; 
        }
        .text-acerca1{
            margin-top: 1em;
        }
        .text-acerca2{
            font-size: 1em;
            margin-left: 1.5em;
        }
        .img-acerca{
            width: 60%;
            height: auto;
            align-content: center;
        }
        .btn-acerca{
            font-size: 1.2em;
            padding: 1em;
        }
        /*Productos y servicios*/
       .contenedor-productos{
            grid-template-columns: auto auto ;
            grid-template-rows: auto auto ; 
        }
        .contenedor-pro{ margin-left: 0.2em; }
        .contenedor-servicios{
            grid-template-columns: auto auto;
            grid-template-rows: auto  ;
        }
        .img-pro{
            width: 80%;
            height: 210px;
        }
        .img-serv{
            width: 200px;
            height: auto;
        }
      
        /*  formulario */
        .columna-30{ width: 1%; }
        .columna-40{ width: 98%; }
        .columna-50{ width: 50%; }
        .btn-form{font-size: 1em;}
        .copy{ font-size: 12px; }
        .formulario{ justify-content: center;}
        .form-consulta {
            height: 100%;
            width: 80%;
            font-size: 1em;
        }
        .campo-form {
            width:100%; 
            height:50px; 
            padding:5px; 
            font-size: 1em;
        }
        .btn-form {
            width: 100%;
            height: 50px; 
            line-height: 2em; 
            padding: 0.5em;
            font-size: 1em;
        }
        .text-form{ font-size: 1em; }
        .contenido1{font-size: 1.5em;}
    }
    
    @media screen and (min-width: 1024px ){
        .contenedor_header20_social{ top: 1em; }
        .logo{ width: 280px; }
        .contenedor-logo{ margin-left: 300px ; }
        .icon-menu{ display: none; }
        .menu{
            position: static;
            display: flex;
            height: auto;
            width: auto;
            margin-top: 1.5em;
            font-size: 18px; 
        }
        .iconos{
            width: 1.5em;
            height: 1.1em;
            font-size: 3em;
            margin-top: 0.4em;
        }
        .contenido{ font-size: 2em; }
        .contenido1{ font-size: 1.5em; }
        .contenedor-productos{
            grid-template-columns: auto auto auto auto;
            grid-template-rows: auto; 
        }
        .contenedor-pro{ margin: 0.2em; }
        .columna-30{ width: 30%; }
        .columna-40{ width: 40%; }
        .columna-100-33 { width: 33.3%; }
        .separador-header{ font-size: 0.9em; }
        .columna-50{ width: 50%; }
        .text-acerca1{
            margin-top: 1em;
            font-size: 2em; 
            text-align: center;
        }
        .text-acerca2{
            font-size: 1.2em;
            padding-left: 1em;
        }
        .img-acerca{
            width: 50%;
            height: auto;
        }
        .btn-acerca{
            padding-left: 4em;
            padding-right:4em;
            font-size: 1em;
            text-align: center;
        }
        .form-consulta { font-size: 1em; }
        .campo-form { font-size: 1em; }
        .iconos2 {
            color: black;
            text-decoration: none;
            margin-right: 0.7em;
            font-size: 2em;
        }
        .texto-pie{
            font-size: 1.1em;
            color: black;
            text-decoration: none;
        }
        .titulo-columna{ font-size: 1em; }
        .img-pro {
            width: 100%;
            height: 180px;
        }
        .icon-serv{ width: 85%; }
        .img-serv{ width: 100%; height: 180px;  }
        /* Botones */
        .btn-whatsapp{
            font-size: 1em;
            width:3em;
            height:3em;
            bottom: 1em;
        }
        .btn-home{
            font-size: 1em;
            width:2.6em;
            height:3em;
            bottom: 4em;
        }
        .form-consulta {
            height: 100%;
            width: 100%;
            font-size: 1em;
        }
        .campo-form {
            width:100%; 
            height:50px; 
            padding:5px; 
            font-size: 1em;
        }
        .btn-form {
            width: 100%;
            height: 50px; 
            line-height: 2em; 
            padding: 0.5em;
            font-size: 1em;
        }
        .text-form{ font-size: 1em; }
        .title-pro{ font-size: 2em; }
        .p-title-pro{ font-size: 1.2em; }
        .text-pro{ font-size: 1.2em; }
        .p-pro{ font-size: 1em; }
        .title-serv{ font-size: 2em; }
        .p-title-serv{ font-size: 1.2em; }
        .text-serv{ font-size: 1.2em; }
        .p-serv{ font-size: 1.1em; text-align: center; }
        .copy{ font-size: 12px; }
        .desc-columna{ font-size: 14px;}
    }
    */
/*-------------------Termina Responsive---------------------*/

/*------------------- Inicio Diseño de Banner---------------------*/
    * {box-sizing:border-box}

    .imagen{ width: 100%; }

    /* Slideshow container */
    .slideshow-container {
      max-width: 1480px;
      position: relative;
      margin: auto;
      margin-top: 10px;
    }

    /* Hide the images by default */
    .mySlides {
      display: none;
    }

    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: auto;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }

    /* Position the "next button" to the right */
    .next {
      right: 10px;
      border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
    }

    /* Caption text */
      .text {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 90%;
      text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    .active, .dot:hover {
      background-color: #717171;
    }

    /* Fading animation */
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
    }

    @-webkit-keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }

    @keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }
/*-------------------Termina Diseño de Banner---------------------*/