/*fuentes fontsquirrel------------------*/
@font-face {
   font-family: 'recoletamedium';
   src: url('../fonts/recoleta-medium-webfont.woff2') format('woff2'),
        url('../fonts/recoleta-medium-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;

}

@font-face {
   font-family: 'recoletaregular';
   src: url('../fonts/recoleta-regular-webfont.woff2') format('woff2'),
        url('../fonts/recoleta-regular-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;

}

@font-face {
   font-family: 'recoletasemibold';
   src: url('../fonts/recoleta-semibold-webfont.woff2') format('woff2'),
        url('../fonts/recoleta-semibold-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;

}

@font-face {
   font-family: 'recoletablack';
   src: url('../fonts/recoleta-black-webfont.woff2') format('woff2'),
        url('../fonts/recoleta-black-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;

}

@font-face {
   font-family: 'recoletabold';
   src: url('../fonts/recoleta-bold-webfont.woff2') format('woff2'),
        url('../fonts/recoleta-bold-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}



@font-face {
   font-family: 'fira_sansbold';
   src: url('../fonts/firasans-bold-webfont.woff2') format('woff2'),
        url('../fonts/firasans-bold-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;

}

@font-face {
   font-family: 'fira_sansbook';
   src: url('../fonts/firasans-book-webfont.woff2') format('woff2'),
        url('../fonts/firasans-book-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'fira_sansextrabold';
   src: url('../fonts/firasans-extrabold-webfont.woff2') format('woff2'),
        url('../fonts/firasans-extrabold-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'fira_sanslight';
   src: url('../fonts/firasans-light-webfont.woff2') format('woff2'),
        url('../fonts/firasans-light-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'fira_sansmedium';
   src: url('../fonts/firasans-medium-webfont.woff2') format('woff2'),
        url('../fonts/firasans-medium-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'fira_sansregular';
   src: url('../fonts/firasans-regular-webfont.woff2') format('woff2'),
        url('../fonts/firasans-regular-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'fira_sanssemibold';
   src: url('../fonts/firasans-semibold-webfont.woff2') format('woff2'),
        url('../fonts/firasans-semibold-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

/*Estilos globales (o generales) del sitio------------------*/
*{    
   box-sizing: border-box;
}

html,
body {
  height: 100%;
} 

body{
  margin: 0px;
  font-family: "fira_sansbook", sans-serif;
  font-weight: 550;
  font-size: 18px;
  color: white;
  padding: 0px;
  background-color: #f1f1f1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

#pantalla{
   width: 100%;
   height: auto;
   position: relative;
   float: left;
   background-color: #fbfbfb;
   overflow: hidden;
}

.contenedor{
   /*width: 1170px;*/
   width: 92%;
   height: auto;
   margin: 0px auto;
   max-width: 100%;
   padding-left: 15px;
   padding-right: 15px;
   overflow: hidden;
}

h2{
   color: #a66d28f7;
   margin: 0px auto;
   max-width: 40%;
   font-size: 27px;
   text-align: center;
}

h3{
   color: #b87420f7;
   margin-left: auto;
   margin-right: auto;
   font-size: 22px;
   border-bottom: solid 1.2px #e3bd8ef7;
   padding-bottom: 10px;
   text-align: center;
}

h4{
   margin-bottom: 1px;
   margin-top: 10px;
   max-width: 100%;
   font-size: 19px;
   font-weight: bold;
   text-align: center;
}

p{
   font-family: "fira_sansbook", sans-serif;
   font-weight: 500;
   margin-top: 20px;
   max-width: 100%;
   padding: 0px 30px;
   text-align: center;
}

img{
   display: block;
   margin-bottom: 2px;
   margin-left: auto;
   margin-right: auto;
   max-width: 100%;
   /*border: solid white 7px;
   box-shadow: 5px 5px 10px #999898; */
}


nav{
   position: fixed;
   /*height: 90px;*/
   height: 14%;
   margin-top: 0px;
   max-width: 100%;
   width: 100%;
   padding-bottom: 5px;
   padding-top: 20px;
   z-index: 888;
   background-color: black;
   opacity: 0.88;
}

.menu-hamburguesa > button{
   opacity: 0;
 }

header{
   position: relative;
   float: left;
   width: 100%;
   background-image: url(../images/header-planta.png);
   background-repeat: no-repeat;
   background-position:  0px -30px;
   background-size: cover;
   background-attachment: scroll;
   height: 110vh;
}

section{
   position: relative;
   float: left;
   width: 100%;
   height: 990px;
}


footer{   
   position: relative;
   float: left;
   clear: both;
   height: 80vh;
   width:100%;
   margin-top: 10px;
   background: url(../images/DSC_4059.jpg) no-repeat 0px -90px fixed;
   background-size: cover;
   border-bottom: solid 12px #000000b5;
}

/*clases especiales*/

::selection{
background-color: transparent;
}

/*----------------ESTILOS PARTICULARES NAV----------------*/

.marca{
   display: block;
   /*margin-left: 15px;
   margin-top: -7px;*/
   margin-left: 0.8%;
   margin-top: -0.4%;
   border: none;
   box-shadow: none;
}

.menu{
   position: absolute;
   /*left: 350px;
   top: 18px;*/
   left: 20%;
   top: 18%;
   z-index: 950;
   font-size: 21px;
}

/* menú nav */

li{
   float: left;
   padding: 0px 18px;
   margin: 0px auto;
   list-style: none;
}

.menu ul li a {
   color: white;
   text-decoration: none;
   text-transform: uppercase;
}

.menu ul li a:hover {
  color: #dddcdaf7;
  border-bottom: solid 2px gray;
  padding-bottom: 4px;
}

/*-------------- ESTILOS PARTICULARES HEADER -----------------*/
.redes-sociales{
   position: fixed;
   bottom: 5%;
   width: 80px;
   /*right: 25px;*/
   right: 1.5%;
   z-index: 888;
}

.redes-sociales ul > li{
   padding: 5%;
}

.redes-sociales ul li a > img{
   display: block;
   margin: 0px 2px;
   border: none;
}

.contenido-header{
   position: relative;
   margin-top: 220px;
   margin-left: 30px;
   width: 850px;
   max-width: 55%;
   height: 350px;
}

.contenido-header img.marca-index{
  position: relative;
  /*margin-left: 460px;*/
  width: 450px;
  margin-left: 57%;
  margin-top: -10px;
}

.contenido-header h2{
   color: white;
   font-family: "recoletasemibold", "Breve new";
   /*margin-left: -45px;*/
   margin-left: -39px;
   margin-top: 35px;
   font-size: 35px;
   max-width: 70%;
   margin-bottom: -40px;
   background: white;
   -webkit-background-clip: text;
   filter: drop-shadow(1.9px 1.9px black);
}

.contenido-header p:first-of-type{
   color: white;
   text-align: left;
   font-size: 21px;
   margin-top: 45px;
   margin-left: -10px;
   width: 85%;
}


/*---------------ESTILOS PARTICULARES SECTION----------------*/

.section-index{
   height: 530px;
   width: 100%;
}

section article.article-1{
   position: absolute;
   margin-top: 20px;
   left: 12%;
}

 section article.article-1 h2{
   position: relative;
   max-width: 43%;
   margin-bottom: 2px;
   border-bottom: solid 1.2px #e3bd8ef7;
   padding-bottom: 10px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 5%;
   padding-right: 5%;
   top: 68px; 
}

section article.article-1 .pictogramas{
   width: 100%;
}

section article.article-1 .pictogramas .picto-1{
   /*margin-left: 60px;*/
   margin-left: 5%;
   margin-top: 130px;
}

section article.article-1 .pictogramas .picto-2{
   /*margin-left: 440px;*/
   margin-left: 49%;
   margin-top: -100px;
}

section article.article-1 .pictogramas .picto-3{
   position: relative;
   float: left;
   margin-left: 790px;
   margin-top: -105px;
}

section article.article-1 .contenido-section{
   position: relative;
   float: left;
   margin-top: -30px;
   margin-left: 23%;
   max-width: 80%;
   height: 350px;
   padding-left: 230px;
   padding-top: 65px;
}

.contenido-section ul{
  color: #9c5908f7;
  margin-top: 1px;
  margin-left: -70px;
  padding: 10px;
  text-align: center;
  width: 300px;
}

.contenido-section ul li:first-of-type{
   position: absolute;
   margin-left: -430px;
   margin-top: 0px;
   width: 300px;
}

.contenido-section ul li:nth-child(2){
   margin-left: -40px;
   width: 300px;
}

.contenido-section ul li:last-of-type{
   position: absolute;
   margin-left: 315px;
   margin-top: -10px;
   padding: 10px;
   width: 300px;
}

/*----------------HEADER ORÍGENES----------------------------*/
header.fondo-header{
   background: url(../images/lago-2.png) no-repeat -5px -15px scroll;
   background-size: cover;
   height: 120vh;
}

.texto-origenes{
   position: relative;
   margin-left: auto;
   margin-right: auto;
   margin-top: 380px;
   width: 625px;
}

.texto-origenes h4{
   background: white;
   -webkit-background-clip: text;
   filter: drop-shadow(1.5px 1.8px black);
   font-size: 34px;
   font-family: "recoletabold", "Breve new";
   border-bottom: solid 1px white;
   padding-bottom: 5px;
}

.texto-origenes p{
  background: white;
  -webkit-background-clip: text;
  filter: drop-shadow(1.9px 1.9px black);
  font-size: 24px;
  margin-top: 5px;
  padding-top: 5px;
}

/*----------------HEADER NUESTROS PRODUCTOS----------------------------*/
  header.header-nuestros-productos{
   background: url(../images/con-polaroid-1.png) no-repeat 0px -45px scroll;
   background-size: cover;
   height: 110vh;
}

.polaroid-header-nproductos{
   position: relative;
   width: 500px;
   margin-left: 10%;
   margin-top: 120px;
}

.texto-header-nproductos{
   position: relative;
   margin-top: -32%;
   margin-left: 49%;
   width: 540px;
   border-left: solid 2px white;
}

.texto-header-nproductos h4{
   color: white;
   font-size: 35px;
   margin-left: 30px;
   font-family: "recoletabold", "Breve new";
   text-align: left;
   padding-top: 20px;
}

.texto-header-nproductos p{
   font-family: "fira_sansregular", sans-serif;
  color: #050556;
  font-size: 19px;
  text-align: left;
  padding-bottom: 25px;
  margin-top: 8px;
}

/*----------------HEADER SUSTENTABILIDAD----------------------------*/
header.header-sustentabilidad{
   background: url(../images/header-sustentabilidad.png) no-repeat 0px 5px scroll;
   background-size: cover;
   height: 119vh;
}

.texto-sustentabilidad{
   position: relative;
   margin-left: 630px;
   margin-top: 300px;
   width: 520px;
}

.texto-sustentabilidad h4{
   background: white;
   -webkit-background-clip: text;
   filter: drop-shadow(1.5px 1.8px black);
   font-size: 30px;
   font-family: "recoletabold", "breve new";
   border-bottom: solid 1px white;
   padding-bottom: 5px;
}

.texto-sustentabilidad p{
  background: white;
  -webkit-background-clip: text;
  filter: drop-shadow(1.9px 1.9px black);
  font-size: 21px;
  margin-top: 5px;
  padding-top: 5px;
}

.section-sustentabilidad{
  height: 460px;
}

.texto-sustentabilidad-2 p{
   position: relative;
   margin-left: 170px;
   margin-right: auto;;
   max-width: 50%;
   font-size: 20px;
   color: #9c5908f7; 
   margin-top: 90px;
 }

 .texto-sustentabilidad-2 p:last-of-type{ 
   margin-top: 30px;
   font-size: 23px;
   font-weight: 450;
   padding-top: 30px;
   border-top: solid 1px #9c5908f7;
 }

 .botella img{ 
   position: absolute;
   margin-left: 850px;
   margin-top: -370px;
 }

/*----------------HEADER CONTACTO----------------*/
  header.header-contacto{
   background: url(../images/header-contacto.png) no-repeat 0px -70px scroll;
   background-size: cover;
   height: 115vh;
}

/*---+-+-+-+-+- SECTION CONTACTO+-+-+-+-+-+-+-*/

section.section-contacto{
   position: relative;
   top: -45px; 
   left: 90px;
   height: 490px;
   width: 100%;
}

.encabezado-contacto{
   position: relative;
   margin-left: -80px;
   max-width: 64%;
   margin-top: 470px;
}

.header-contacto .encabezado-contacto > h3 {
   position: relative;
   max-width: 63%;
   color: white;
   background: white;
   -webkit-background-clip: text;
   filter: drop-shadow(1.5px 1.8px black);
   font-size: 30px;
   font-family: "recoletabold", "breve new";
   border-bottom: solid 1px white;
   padding-bottom: 10px;
}

.header-contacto .encabezado-contacto > h4 {
   position: relative;
   margin-top: -15px;
   font-weight: 350;
   font-size: 24px;
   background: white;
   -webkit-background-clip: text;
   filter: drop-shadow(1.5px 1.8px black);
}

.section-contacto > .article-contacto{
   position: absolute;
   width: 70%;
   height: 55%;
   top: 70px; 
   left: 7.5%;
}

.section-contacto > .article-contacto > .imagen-contacto{
   position: relative;
   float: left;
   width: 55%;
   margin-top: -5px;
   margin-left: -75px;
}

.section-contacto .article-contacto .datos-contacto{
   margin-top: 140px;
   margin-left: 270px;
}

.section-contacto .article-contacto .datos-contacto h3{
   max-width: 74%;
}

.section-contacto .article-contacto .datos-contacto h2{
   font-size: 22px;
   margin-top: -10px;
}

.section-contacto .article-contacto .datos-contacto p{
   position: relative;
   font-weight: 500;
   text-align: center;
   color: #cf9956f7;
   margin-left: -41px;
}


/*---------SECTION NUESTROS PRODUCTOS-----------*/

section.productos{
  height: 1520px;
  position: relative;
  margin-top: -200px;
}

section .nuestros-productos{
   width: 100%;
   color: #9c5908f7;
   padding-top: 210px;
}

.nuestros-productos > article{
   max-width: 100%;
   height: 490px;
   margin: 40px 0px;
   overflow: hidden;
}

section.productos .nuestros-productos h2{
   margin-top: 5px;
   margin-bottom: 60px;
   padding-bottom: 10px;
   padding-left: 60px;
   padding-right: 60px;
   border-bottom: solid 2px #d3b28a;
}

.khami{
   width: 51.3%;
   position: relative;
   float: left;
  }

section .nuestros-productos > article .khami img{
   box-shadow: none;
   border: none;
   margin: -10px auto;
}

  .descripción-productos{
   width: 48.7%;
   height: 340px;
   position: relative;
   float: left;
   margin-top: -10px;
   padding: 47px 40px;
  }

  .descripción-productos > h3{
   max-width: 100%;
   margin-top: -15px;
   text-align: center;
   }

   .descripción-productos > p{
      max-width: 100%;
      color: #88561a;
      margin-top: -10px;
      text-align: center;
   }

   img.imagen-pictogramas-khami{
      position:relative;
      margin:auto;
      border: none;
      box-shadow: none;
      margin-top: 20px;
   }

   .imagen-khami .agua-khami{
      position:absolute;
      width: 100%;
      height: 220px;
      border: none;
      box-shadow: none;
      margin-top: 338px;
   }

   .tabla-nutricional{
      position:absolute;
      width: 20%;
      margin-top: 340px;
      margin-left: 10px;
   }

   /*--.puerta-antártida{
      width: 51.3%;
      position: relative;
      float: right;
   }

   section .nuestros-productos > article .puerta-antártida img{
      box-shadow: none;
      border: none;
      margin-top: 180px;
      margin-left: auto;
      margin-right: auto;
   }

   .descripción-productos-2{
      width: 48.7%;
      position: relative;
      float: left;
      background-color: white;
      padding: 60px 60px;
      margin-top: 175px;
   }
   
   img.imagen-pictogramas-puerta{
      position:relative;
      border: none;
      box-shadow: none;
      margin-top: 20px;
   }

   .imagen-puerta .agua-puerta{
      position:absolute;
      width: 100%;
      height: 200px;
      border: none;
      box-shadow: none;
      margin-top: 498px;
   }  --*/

   .tolwen{
      width: 51.3%;
      position: relative;
      float: right;
   }

   section .nuestros-productos > article .tolwen img{
      margin-top: 185px;
      margin-left: auto;
      margin-right: auto;
   }

   .descripción-productos-3{
      width: 48.7%;
      position: relative;
      float: left;
      padding: 60px 60px;
      margin-top: 160px;
   }
   
   .descripción-productos-3 > h3{
      max-width: 100%;
      margin-top: 18px;
      text-align: center;
      }
   
   .descripción-productos-3 > p{
      max-width: 100%;
      color: #88561a;
      margin-top: -10px;
      text-align: center;
   }

   .imagen-tolwen .agua-tolwen{
      position:absolute;
      width: 100%;
      height: 200px;
      border: none;
      box-shadow: none;
      margin-top: 490px;
   }


/*------ESTILOS PARTICULARES ASIDE ORIGENES---------------------------*/

aside.aside-origenes .agua-acuifero h2{
   font-size: 41px;
   font-family: "recoletabold", "breve new";
   margin-top: 20px;
}

aside.aside-origenes .contenido-aside-origenes{
  position: relative;
  width: 98%;
  height: 380px;
  margin-top: 120px;
}

aside.aside-origenes .contenido-aside-origenes p{
  color: #9c5908f7;
  max-width: 53%;
  margin-left: 600px;
  text-align: left; 
  padding-left: 65px;
  margin-top: 0px;
}

aside.aside-origenes .contenido-aside-origenes p:first-of-type{
  padding-top: 0px;
}

 article .imagen-aside-origenes{
  position: relative;
  width: 640px;
  margin-left: -5px;
  margin-top: -455px;
  margin-bottom: 60px;
  border: none;
  border-right: solid 1.2px #e3bd8ef7;
  padding-right: 5px;
}

/*------ESTILOS PARTICULARES FOOTER---------------------------*/

.contenido-footer{
   padding-top: 30px;
   padding-bottom: 30px;
   width: 100%;
   background-color: rgba(9,9,9,.75); 
}

footer .contenido-footer h4{
   width: 52%;
   margin-left: auto;
   margin-right: auto;
   padding-bottom: 10px;
  border-bottom: solid 1.5px white; 
}

footer .contenido-footer p .enlaces-footer{
   color: white;
   text-decoration: none;
   display: inline;  
}