@charset "utf-8";
/* CSS Document */

@import 'https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet';
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	}
	
	body{
		font-family: 'PT Sans', sans-serif;
		font-weight:400;
		background:#fbfdff;
		box-sizing:border-box;
		}
		
	.contenido {
  /*padding-top: 50px;*/
}

	h1{
	font-size:36px;
	padding-bottom:30px;
		}
			
	h3{
	font-size:24px;
	padding-bottom:60px;
			}
			
	#p{
	font-size:17px;
	padding-bottom:20px;
			}
	.parrafo{
	max-width:98%;
	margin-bottom:0;
	padding-bottom:0;
			}
			


/******************************************************************************
estilos definitivos
*******************************************************************************/

.contenedor{
		width:100%;
		margin:auto;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		}
		
/******************************************************************************
menu
*******************************************************************************/
			
header {
	height:50px;
	background:#fbfdff;
	color:#706f6f;
	display:flex; /*hace movible al contenido*/
	justify-content:flex-end;/*envia el contenido al lado derecho*/
	align-items: center;
	position:fixed;/*para que el menu se quede pegado arriba*/
	top:0;
	left:0;
	z-index:1000;
	width:100%;
	}
	
#btn-menu{
	display:none;
	}
	
header .barra{
	display:table;
	}

header label {
	font-size:30px;
	cursor:pointer;
	display:none;
	}

.menu ul {
	/*background:#330;*/
	display: flex;
	list-style:none;
	}
	
.menu a {
	display:block;
	padding:15px 20px; /*medida top, costados*/
	color:#706f6f;
	text-decoration:none;
	}
	
.menu a:hover {
	background: rgba(68,165,255,0.2);
	}


/******************************************************************************
banner
*******************************************************************************/
#banner{
	/*background-color: #693;
	width:1144px;*/
	width:100%;
	height:959px;
	background:url(../links/fondobanner.jpg);
	background-size: cover;
    background-repeat: no-repeat;
	}
	#banner .contenedor{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #FFC;*/
	width:577px;
	height:750px;
	margin-right:auto;
	top:209px;
	}


/******************************************************************************
quienes
*******************************************************************************/	
#quienes{
	background-color: #fbfdff;
	width:100%;
	height:1223px;
	}
	#quienes .contenedor{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #C09;*/
	width:60%;
	height:1223px;
	margin-right:auto;
	}
	#quienes .parrafo{
	max-width:100%;
	}
	#quienes .columna{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #F3F;*/
	width:48%;
	height:1000px;
	float:left;
	top:50%;
	transform:translateY(-50%);
	color:#706f6f;
	}
	#quienes h1{
	color:#193b6b;
	padding-top:80px;
	}
	#quienes h3{
	color:#93c125;
	}
	#quienes p{
	border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;
			}
	/*#quienes .otracolumna{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	background-color: #3C3;
	width:48%;
	height:1000px;
	float:left;
	top:50%;
	transform:translateY(-50%);
	}*/
	
	
/******************************************************************************
mision
*******************************************************************************/	
#mision{
	background:url(../links/fondomision.jpg);
	background-size: cover;
    background-repeat: no-repeat;
	background-position:right;
	width:100%; 
	height:1246px;
	}
#mision .contenedor{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #FCF;*/
	width:60%;
	height:1246px;
	margin-right:auto;
	}
#mision .columna{
	position: absolute;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #F3F;*/
	width:50%;
	height:1000px;
	top:50%;
	right:5%;
	transform:translateY(-50%);
	}
	#mision h1{
	color:#93c125;
	/*padding-top:80px;*/
	}
	#mision h3{
	color:#93c125;
	border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;
	}
	#mision p{
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	color:#fbfdff;
			}
	
	
/******************************************************************************
productos
*******************************************************************************/
	
#productos{
	/*background-color: #009;*/
	width:100%; 
	height:1764px;
	}
	
#productos .contenedor{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #9C6;*/
	width:60%;
	height:1764px;
	margin-right:auto;
	}
#productos .columna1{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	/*display:inline-block;*/
	/*background-color: #FF0;*/
	width:100%;
	height:950px;
	/*float:left;*/
	top:0;
	/*transform:translateY(-50%);*/
	}
#productos .columna2{
	position:relative;
	display:inline-block;
	flex-wrap:wrap;
	/*background-color: #F33;*/
	width:49%;
	height:394px;
	float:left;
	}
#productos .columna3{
	position:relative;
	/*display:flex;
	flex-wrap:wrap;*/
	display:inline-block;
	/*background-color: #FCF;*/
	width:100%;
	height:370px;
	float:left;
	top:0;
	/*transform:translateY(-50%);*/
	}
	#productos .parrafo{
		padding-left:14px;
		padding-right:14px;
	}
	#productos h1{
	color:#93c125;
	padding-top:140px;
	padding-bottom:80px;
	text-align:center;
	}
	#productos h3{
	color:#93c125;
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	text-align:center;
	}
	#productos p{
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	color:#706f6f;
	}
	#productos img{
	padding-bottom:80px;
	width:800px;
	height:585px;
	box-sizing:border-box;
	}
	#productos td{
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	color:#93c125;
	text-align:center;
	vertical-align:text-top;
	}
	#productos .unidad{
	display:inline;
	width:120px;
	padding:14px;
	color:#93c125;
	text-align:center;
	}	
	
	
/******************************************************************************
calidad
*******************************************************************************/
	
#calidad{
	/*background-color: #6C9;*/
	background:url(../links/fondocalidad.jpg);
	background-size: cover;
    background-repeat: no-repeat;
	background-position:center top;
	width:100%; 
	height:1911px;
	}
#calidad .contenedor{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #069;*/
	width:60%;
	height:1911px;
	margin-right:auto;
	}
#calidad .columna1{
	position:relative;
	/*display:flex;
	flex-wrap:wrap;*/
	display:inline-block;
	/*background-color: #C9C;*/
	width:100%;
	height:330px;
	float:left;
	top:0;
	/*transform:translateY(-50%);*/
	}
#calidad .columna2{
	position:relative;
	display:inline-block;
	flex-wrap:wrap;
	/*background-color: #F05;*/
	width:49%;
	height:501px;
	float:left;
	}
#calidad .columna3{
	position:relative;
	display:inline-block;
	flex-wrap:wrap;
	/*background-color: #F33;*/
	width:49%;
	height:1080px;
	float:left;
	}
	#calidad .parrafo{
		padding-left:14px;
		padding-right:14px;
	}
	#calidad h1{
	color:#93c125;
	padding-top:200px;
	text-align:center;
	}
	#calidad h3{
	color:#93c125;
	padding-bottom:30px;
	}
	#calidad p{
	color:#fbfdff;
	/*border-bottom:3px dotted rgba(147,193,37,1);*/
	padding-bottom:50px;
			}
	
	
/******************************************************************************
conoce
*******************************************************************************/
	
#conoce{
	/*background-color: #FC3;*/
	width:100%; 
	height:1126px;
	}
#conoce .contenedor{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #C60;*/
	width:60%;
	height:1126px;
	margin-right:auto;
	}
#conoce .columna1{
	position:relative;
	/*display:flex;
	flex-wrap:wrap;*/
	display:inline-block;
	/*background-color: #C9C;*/
	width:100%;
	height:342px;
	float:left;
	top:0;
	/*transform:translateY(-50%);*/
	}
#conoce .columna2{
	position:relative;
	display:inline-block;
	flex-wrap:wrap;
	/*background-color: #36C;*/
	width:40%;
	height:784px;
	float:left;
	}
#conoce .columna3{
	position:relative;
	display:inline-block;
	flex-wrap:wrap;
	/*background-color: #390;*/
	width:58%;
	height:744px;
	float:left;
	}
	#conoce .parrafo{
		padding-left:14px;
		padding-right:14px;
	}
	#conoce h1{
	color:#93c125;
	padding-top:200px;
	text-align:center;
	}
	#conoce h3{
	color:#93c125;
	padding-bottom:30px;
	}
	#conoce h4{
	color:#706f6f;
	padding-bottom:30px;
	border-bottom:3px dotted rgba(147,193,37,1);
	}
	#conoce p{
	color:#706f6f;
	/*border-bottom:3px dotted rgba(147,193,37,1);*/
	padding-bottom:50px;
			}
	#conoce img{
	padding-top:50px;
			}
	
	
/******************************************************************************
certifica
*******************************************************************************/
	
#certifica{
	/*background-color: #636;*/
	background: -webkit-linear-gradient(#fbfdff, #c6e5fb);
   background: -moz-linear-gradient(#fbfdff, #c6e5fb);
   background: -o-linear-gradient(#fbfdff, #c6e5fb);
	width:100%; 
	height:2120px;
	}
#certifica .contenedor{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #CC0;*/
	width:60%;
	height:2120px;
	margin-right:auto;
	}
#certifica .columna1{
	position:relative;
	/*display:flex;
	flex-wrap:wrap;*/
	display:inline-block;
	/*background-color: #33F;*/
	width:100%;
	height:1227px;
	/*float:left;*/
	top:0;
	/*transform:translateY(-50%);*/
	}
#certifica .columna2{
	position:relative;
	display:inline-block;
	flex-wrap:wrap;
	/*background-color: #C39;*/
	width:48%;
	height:407px;
	float:left;
	}
#certifica .columna3{
	position:relative;
	display:inline-block;
	flex-wrap:wrap;
	/*background-color: #C03;*/
	width:100%;
	height:486px;
	float:left;
	}
	#certifica .parrafo{
		padding-left:14px;
		padding-right:14px;
	}
	#certifica h1{
	color:#93c125;
	padding-top:140px;
	padding-bottom:80px;
	text-align:center;
	}
	.columna1 h3{
	color:#93c125;
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	text-align:center;
	}
	.columna2 h3{
	color:#93c125;
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	text-align:left;
	}
	#certifica h4{
	text-align:center;
	}
	#certifica p{
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	color:#706f6f;
	text-align:left;
	}
	#certifica img{
	padding-bottom:80px;
	}
	

/******************************************************************************
pedido
*******************************************************************************/
	
#pedido{
	/*background-color: #300;*/
	background:url(../links/fondoordenar.jpg);
	background-size: cover;
    background-repeat: no-repeat;
	background-position:right bottom;
	width:100%; 
	height:1420px;
	}
#pedido .contenedor{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #FF9;*/
	width:60%;
	height:1420px;
	margin-right:auto;
	}
#pedido .columna1{
	position:relative;
	/*display:flex;
	flex-wrap:wrap;*/
	display:inline-block;
	/*background-color: #CC9;*/
	width:100%;
	height:475px;
	float:left;
	top:0;
	/*transform:translateY(-50%);*/
	}
#pedido .columna2{
	position: absolute;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #F3F;*/
	width:58%;
	height:945px;
	right:5%;
	top:525px;
	/*transform:translateY(-50%);*/
	}
	#pedido .parrafo{
		padding-left:14px;
		padding-right:14px;
	}
	#pedido h1{
	color:#93c125;
	padding-top:200px;
	text-align:center;
	}
	#pedido h3{
	color:#93c125;
	padding-bottom:30px;
	}
	#pedido p{
	color:#fbfdff;
	/*border-bottom:3px dotted rgba(147,193,37,1);*/
	padding-bottom:50px;
	text-align:center;
			}
/******************************************************************************
formulario pedido
*******************************************************************************/
			textarea {
	min-height:100px;
	max-height:200px;
	max-width:70%;
	}
	#nombre, #telefono, #correo, #pago{
	max-width:70%;
	margin:6px;
	}
	#cantidad, #horario, #botella{
	max-width:50%;
	margin:6px;
	}
	#direccion{
		vertical-align:text-top;
	}
#boton{
	background:none;
	color: #93c125;
	padding:20px;
	padding-top:50px;
	text-transform:uppercase;
	border:none;
	}
	#boton:hover{
		cursor:pointer;
		color: #fbfdff;
		}
		.formulario {
		font-size: 15px;
		box-sizing:border-box;
		color:#fbfdff;
		text-align:right;
		width: 400px;
		vertical-align:text-top;
}
		.formulario segmento{
		width:auto;
		display:inline-block;
}
		.formulario h4{
	color:#93c125;
	text-align:right;
	text-transform:uppercase;
	padding-top:30px;
	padding-bottom:10px;
	}
	.formulario cantidad{
	padding-top:30px;
	}
	.formulario label {/*<<<<<<<<< modificar en version escritorio */
	visibility: visible;
}
.formulario placeholder {/*<<<<<<<<< modificar en version escritorio */
	display:none;
	/*visibility: hidden;*/
}
	
	
/******************************************************************************
bolsa
*******************************************************************************/
#bolsa{
	/*background-color: #300;*/
	background:url(../links/fondobolsa.jpg);
	background-size: cover;
    background-repeat: no-repeat;
	background-position:center bottom;
	width:100%; 
	height:1413px;
	}
#bolsa .contenedor{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #0CF;*/
	width:60%;
	height:1413px;
	margin-right:auto;
	}
#bolsa .columna{
	position: absolute;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #F3F;*/
	width:50%;
	height:1313px;
	top:50%;
	left:5%;
	transform:translateY(-50%);
	}
	#bolsa .parrafo{
		padding-left:14px;
		padding-right:14px;
	}
	#bolsa h1{
	color:#93c125;
	padding-top:140px;
	padding-bottom:80px;
	text-align:center;
	}
	#bolsa h2{
	border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:40px;
	}
	#bolsa h3{
	color:#93c125;
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	text-align:left;
	}
	#bolsa h4{
	color:#93c125;
	padding-bottom:10px;
	font-size:18px;
			}
	#bolsa p{
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	color:#706f6f;
	text-align:left;
	}
	#bolsa a{
	color:#93c125;
	text-decoration:none;
			}
	#bolsa img{
	padding-top:80px;
	}
	

/******************************************************************************
contacto
*******************************************************************************/
#contacto{
	/*background-color: #CCC;*/
	width:100%; 
	height:804px;
	}
#contacto .contenedor{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #096;*/
	width:60%;
	height:804px;
	margin-right:auto;
	}
#contacto .columna{
	position:absolute;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #30C;*/
	width:570px;
	height:750px;
	margin-right:auto;
	top:28px;
	}
	#contacto .parrafo{
	padding-left:14px;
	padding-right:14px;
	}
	#contacto h1{
	color:#193b6b;
	padding-top:140px;
	padding-bottom:80px;
	text-align:center;
	}
	#contacto h3{
	color:#93c125;
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	text-align:center;
	}
	.domicilio p{
	color:#706f6f;
	padding-top:40px;
	text-align:center;
	font-size:13px;
	}
	
/******************************************************************************
formulario contacto
*******************************************************************************/
			textarea2 {
	min-height:100px;
	max-height:200px;
	max-width:70%;
	}
	#nombre2, #correo2,{
	max-width:70%;
	margin:6px;
	}
	#comentarios2{
		vertical-align:text-top;
	}
#boton2{
	background:none;
	color: #193b6b;
	padding:20px;
	padding-top:50px;
	text-transform:uppercase;
	border:none;
	}
	#boton2:hover{
	cursor:pointer;
	color: #93c125;
		}
	.formulario2 {
	font-size: 15px;
	box-sizing:border-box;
	color:#706f6f;
	text-align:right;
	width:500px;
	vertical-align:text-top;
	margin-left:auto;
}
	.formulario2 segmento{
	width:auto;
	display:inline-block;
}
		.formulario2 h4{
	color:#93c125;
	text-align:right;
	text-transform:uppercase;
	padding-top:30px;
	padding-bottom:10px;
	}
	.formulario2 label {/*<<<<<<<<< modificar en version escritorio */
	visibility: visible;
}
.formulario2 placeholder {/*<<<<<<<<< modificar en version escritorio */
	visibility:hidden;
}
	
	
/******************************************************************************
mapa
*******************************************************************************/	
#mapa{
	width:100%; 
	height:363px;
	}
#mapa .contenedor{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	background-color: #FFF;
	width:98%;
	height:363px;
	}
	
/******************************************************************************
redes
*******************************************************************************/		
#redes{
	/*background-color: #03F;*/
	width:100%; 
	height:826px;
	}
#redes .contenedor{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	/*background-color: #930;*/
	width:60%;
	height:826px;
	margin-right:auto;
	}
#redes .columna{
	position:relative;
	display:inline-block;
	flex-wrap:wrap;
	/*background-color: #000;*/
	width:98%;
	height:825px;
	}
	#redes h1{
	color:#193b6b;
	padding-top:140px;
	padding-bottom:80px;
	text-align:center;
	}
	
/******************************************************************************
footer
*******************************************************************************/	
/*#footer{
	background-color: #696;
	width:100%; 
	height:82px;
	}*/
		footer{
			width:auto;
			background:#06416e;
			flex: 0 0 auto;
			text-align:center;	
			width:100%; 
			}
			
			footer .contenedor{
				display:flex;
				flex-wrap:wrap;
				justify-content:space-between; /*esto hace que los elementos se ajusten a los extremos del contenedor*/
				padding:25px;
				width:60%;
				}
				
				footer .ilustracion{
				max-height:48px;
			}
			footer img{
				max-height:48px;
			}
				
			.copy{
				font-size:12px;
				color:#fbfdff;
				}
				
				.sociales{
					width:auto;
					text-align:center;
					font-size:26px;
					}
					
					.sociales a{
						color:#3c8fcf;
						text-decoration:none;
						}
	
/******************************************************************************
olas
*******************************************************************************/	
.wave1{/****banner-quienes****/
	position:absolute;
	/*background-color: rgba(0, 0, 0, 0.3);*/
	background:url(../links/superficie1.png);
	background-size: cover;
	background-position:center top;
    background-repeat: no-repeat;
	width:100%; 
	height:149px;
	top:885px;
	z-index:100;
	}
	
.wave2{/****quienes-mision****/
	position:absolute;
	background:url(../links/superficie2.png);
	background-size: cover;
	background-position:center top;
    background-repeat: no-repeat;
	width:100%; 
	height:149px;
	top:2104px;
	z-index:100;
	}
	
.wave3{/****mision-productos****/
	position:absolute;
	background:url(../links/superficie1.png);
	background-size: cover;
	background-position:center top;
    background-repeat: no-repeat;
	width:100%; 
	height:149px;
	top:3350px;
	z-index:100;
	}
	
.wave4{/****productos-calidad****/
	position:absolute;
	background:url(../links/superficie2.png);
	background-size: cover;
	background-position:center top;
    background-repeat: no-repeat;
	width:100%; 
	height:149px;
	top:5114px;
	z-index:100;
	}
	
.wave5{/****calidad-conoce****/
	position:absolute;
	background:url(../links/superficie1.png);
	background-size: cover;
	background-position:center top;
    background-repeat: no-repeat;
	width:100%; 
	height:149px;
	top:7025px;
	z-index:100;
	}
	
.wave6{/**************************************************conoce-certifica****/
	display:none;
	position:absolute;
	background:url(../links/superficie2.png);
	background-size: cover;
	background-position:center top;
    background-repeat: no-repeat;
	width:100%; 
	height:149px;
	top:8151px;
	z-index:100;
	}
	
.wave7{/****certifica-pedido****/
	position:absolute;
	background:url(../links/superficie1.png);
	background-size: cover;
	background-position:center top;
    background-repeat: no-repeat;
	width:100%; 
	height:149px;
	top:10271px;
	z-index:100;
	}
	
.wave8{/****pedido-bolsa****/
	position:absolute;
	background:url(../links/superficie2.png);
	background-size: cover;
	background-position:center top;
    background-repeat: no-repeat;
	width:100%; 
	height:149px;
	top:11691px;
	z-index:100;
	}
	
.wave9{/*****************************************************bolsa-contacto****/
	display:none;
	position:absolute;
	background:url(../links/superficie1.png);
	background-size: cover;
	background-position:center top;
    background-repeat: no-repeat;
	width:100%; 
	height:149px;
	top:13104px;
	z-index:100;
	}
	
	
	/******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************responsive tablet****/

	@media (max-width:768px){
		
/***************** menu *****************/

	header label {
	display:block; /*muestre el icono*/
	}
	.menu{
	position: absolute; /*menu salga de la barra superior*/
	top:50px;
	left:0;
	width:100%;
	transform: translateX(-100%);
	transition:all 0.3s;
		}
	.menu ul {
	flex-direction:column; /*en vez de: display: flex; ... para que los elementos se agrupen en una columna, tambien puede usarse display:block */
	/*background:#09F;*/
	height:100vh; /*cubre la pantalla verticalmente*/
	background: rgba(251,253,255,0.9);
	}
	#btn-menu:checked ~ .menu {
		transform: translateX(0%);
		}
			
		
/***************** banner *****************/
	#banner{
	height:600px;
	overflow:hidden;
	}
	#banner img{
	width:400px;
	height:484px;
	}
	#banner .contenedor{
	width:420px;
	height:500px;
	top:70px;
	}
	
/***************** quienes *****************/

	#quienes{
	height:740px;
	overflow:hidden;
	}
	#quienes .contenedor{
	width:100%;
	height:800px;
	}
	#quienes .columna{
	height:auto;
	display:block;
	}
	#quienes img{
		max-height:448px;
		max-width:380px;
		margin-top:80px;
			}

/***************** mision *****************/

	#mision{
	background-position:right;
	width:100%; 
	height:800px;
	padding-top:50px;
	overflow:hidden;
	}
#mision .contenedor{
	width:100%;
	}
#mision .columna{
	width:80%;
	}
	#mision h1{
	padding-top:0px;
	}
	#mision h3{
	border-bottom:0px;
	padding-bottom:0px;
			}
	
/***************** productos *****************/

#productos{
	height:1300px;
	overflow:hidden;
	}
	
#productos .contenedor{
	width:100%;
	height:auto;
	}
#productos .columna1{
	display:block;
	box-sizing:border-box;
	width:90%;
	height:580px;
	padding-bottom:0;
	margin-bottom:0;
	}
#productos .columna2{
	display:block;
	box-sizing:border-box;
	width:90%;
	height:180px;
	top:160px;
	}
#productos .columna3{
	display:block;
	box-sizing:border-box;
	height:300px;
	top:180px;
	}
	#productos img{
	margin-bottom:0px;
	min-height:381px;
	width:580px;
	box-sizing:border-box;
	}
	#productos h1{
	padding-top:100px;
	padding-bottom:60px;
	}
	#productos .unidad{
	width:380px;
	padding:10px;
	text-align:center;
	display:inline;
	align-items:center;
	justify-content:center;/*<<<<<<<<< revisar cuando esté terminada */
	}	
	
/***************** calidad *****************/

#calidad{
	height:auto;
	overflow:hidden;
	}
#calidad .contenedor{
	width:100%;
	height:2600px;
	}
#calidad .columna1{
	display:flex;
	flex-wrap:wrap;
	width:90%;
	height:80px;
	top:0;
	}
#calidad .columna2{
	display:block;
	box-sizing:border-box;
	width:90%;
	height:auto;
	}
#calidad .columna3{
	width:90%;
	height:400px;
	}
	#calidad h1{
	padding-top:120px;
	}
	#calidad p{
	padding-bottom:20px;
	}
	#calidad img{
	height:530px;
	width:530px;
	margin-top:0px;
	margin-bottom:0px;
		}

/***************** conoce *****************/

#conoce{
	height:1260px;
	overflow:hidden;
	}
#conoce .contenedor{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	height:1200px;
	}
#conoce .columna1{
	display:inline-block;
	width:100%;
	height:240px;
	}
#conoce .columna2{
	display:flex;
	width:90%;
	height:400px;
	}
#conoce .columna3{
	display:inline-block;
	flex-wrap:wrap;
	width:80%;
	height:900;
	float:left;
	}
	#conoce h1{
	padding-top:100px;
	}
	#conoce h3{
	padding-bottom:30px;
	}
	#conoce h4{
	border-bottom:0px;
	}
	#conoce img{
	padding-top:0px;
	width:580px;
	height:584px;
			}
		
/***************** certificacion *****************/
	
	#certifica{
	height:1940px;
	overflow:hidden;
	}
#certifica .contenedor{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	width:100%;
	height:2120px;
	}
#certifica .columna1{
	height:auto;
	width:90%;
	}
#certifica .columna2{
	display:inline-block;
	flex-wrap:wrap;
	width:90%;
	height:auto;
	float:left;
	}
#certifica .columna3{
	display:inline-block;
	flex-wrap:wrap;
	width:90%;
	height:460px;
	}
	#certifica .parrafo{
		padding-left:14px;
		padding-right:14px;
	}
	#certifica h1{
	color:#93c125;
	padding-top:140px;
	padding-bottom:80px;
	text-align:center;
	}
	.columna1 h3{
	color:#93c125;
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	text-align:center;
	}
	.columna2 h3{
	color:#93c125;
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	text-align:left;
	}
	#certifica h4{
	text-align:center;
	}
	#certifica p{
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	color:#706f6f;
	text-align:left;
	}
	#certifica img{
	padding-bottom:10px;
	width:300px;
	height:274px;
	margin-bottom:30px;
	}
		
/***************** pedido *****************/	
			
#pedido{
	height:1000px;
	overflow:hidden;
	}
#pedido .contenedor{
	width:100%;
	height:1100px;
	margin-right:auto;
	}
#pedido .columna1{
	width:90%;
	height:475px;
	float:left;
	top:0;
	}
#pedido .columna2{
	width:100%;
	height:700px;
	margin-right:auto;
	top:400px;
	justify-content:center;
	}
	#pedido h1{
	color:#93c125;
	padding-top:100px;
	text-align:center;
	}
	
/***************** formulario pedido *****************/	

/*.formulario label {<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< modificar en version escritorio 
	visibility: hidden;
}*/
.formulario placeholder {
	display:none;
}
	
/***************** bolsa *****************/	

#bolsa{
	background-position:center bottom;
	width:100%; 
	height:1100px;
	overflow:hidden;
	}
#bolsa .contenedor{
	width:100%;
	height:1100px;
	}
#bolsa .columna{
	width:90%;
	height:1000px;
	}
	#bolsa .parrafo{
		padding-left:14px;
		padding-right:14px;
	}
	#bolsa h1{
	padding-top:100px;
	padding-bottom:50px;
	}
	#bolsa h2{
	border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:20px;
	}
	#bolsa h3{
	color:#93c125;
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	text-align:left;
	}
	#bolsa h4{
	color:#93c125;
	padding-bottom:10px;
	font-size:18px;
			}
	#bolsa a{
	color:#93c125;
	text-decoration:none;
			}
	#bolsa img{
	box-sizing:border-box;
	width:300px; height:244px;
	}

/***************** contacto *****************/	

	#contacto{
	width:100%; 
	height:900px;
	overflow:hidden;
		}
#contacto .contenedor{
	width:100%;
	height:900px;
	margin-right:auto;
	}
#contacto .columna{
	width:90%;
	height:800px;
	margin-right:auto;
	top:28px;
	}
	#contacto h1{
	padding-top:100px;
	padding-bottom:50px;
	}
	
/******************************************************************************
formulario contacto
*******************************************************************************/
	

	/*.formulario2 label {<<<<<<<<< modificar en version escritorio 
	visibility: hidden;
}
.formulario2 placeholder {<<<<<<<<< modificar en version escritorio 
	visibility:visible;
}*/

/***************** waves *****************/	

.wave1{/****banner-quienes****/
	display:none;
	}	
.wave2{/****quienes-mision****/
	display:none;
	}	
.wave3{/****mision-productos****/
	display:none;
	}
.wave4{/****productos-calidad****/
	display:none;
	}
.wave5{/****calidad-conoce****/
	display:none;
	}
.wave6{/**************************************************conoce-certifica****/
	display:none;
	}
.wave7{/****certifica-pedido****/
	display:none;
	}
.wave8{/****pedido-bolsa****/
	display:none;
	}
.wave9{/*****************************************************bolsa-contacto****/
	display:none;
	}

	
	}



/******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************responsive telefono****/

	@media (max-width:480px){
		
/***************** banner *****************/
	#banner{
	height:400px;
	overflow:hidden;
	}
	#banner img{
	width:300px;
	height:363px;
	}
	#banner .contenedor{
	width:300px;
	height:400px;
	top:70px;
	}
	
/***************** quienes *****************/

	#quienes{
	height:1200px;
	overflow:hidden;
	}
	#quienes .contenedor{
	width:100%;
	}
	#quienes .columna{
	width:90%;
	height:600px;
	box-sizing:border-box;
	}
	#quienes p{
	border-bottom:0px;
	padding-bottom:10px;
			}
	#quienes img{
		max-height:353px;
		max-width:300px;
		margin-top:0px;
		box-sizing:border-box;
			}

/***************** mision *****************/

	#mision{
	background-position:right;
	width:100%; 
	height:900px;
	padding-top:50px;
	}
#mision .contenedor{
	width:100%;
	}
#mision .columna{
	width:80%;
	right:5%;
	transform:translateY(-62%);
	}
	#mision h1{
	padding-top:50px;
	}
	
/***************** productos *****************/

	#productos{
	height:1700px;
	overflow:hidden;
	}
	
#productos .contenedor{
	width:100%;
	}
#productos .columna1{
	display:block;
	flex-wrap:wrap;
	width:90%;
	height:500px;
	padding-bottom:0;
	margin-bottom:0;
	}
#productos .columna2{
	width:90%;
	height:320px;
	display:block;
	padding-bottom:0;
	margin-bottom:0;
	padding-top:0;
	margin-top:0;
	top:300px;
	}
#productos .columna3{
	height:100px;
	display:block;
	top:300px;
	}
	#productos img{
	margin-bottom:10px;
	height:223px;
	width:340px;
	box-sizing:border-box;
	}
	#productos .unidad{
	width:380px;
	padding:10px;
	text-align:center;
	justify-content:center;/*<<<<<<<<< revisar cuando esté terminada */
	}	
	
/***************** calidad *****************/

#calidad{
	height:2700px;
	overflow:hidden;
	}
#calidad .contenedor{
	width:100%;
	height:2800px;
	}
#calidad .columna1{
	display:flex;
	flex-wrap:wrap;
	width:90%;
	height:330px;
	top:0;
	}
#calidad .columna2{
	display:flex;
	flex-wrap:wrap;
	width:90%;
	height:430px;
	}
#calidad .columna3{
	width:90%;
	height:760px;
	}
#calidad .columna4{
	display:flex;
	flex-wrap:wrap;
	width:90%;
	height:200px;
	}
	#calidad h1{
	padding-top:120px;
	}
	#calidad p{
	padding-bottom:20px;
	}
	#calidad img{
	height:350px;
	width:350px;
	margin-top:50px;
	margin-bottom:40px;
	}

/***************** conoce *****************/

#conoce{
	height:1100px;
	overflow:hidden;
	}
#conoce .contenedor{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	height:1200px;
	}
#conoce .columna1{
	display:inline-block;
	width:100%;
	height:240px;
	}
#conoce .columna2{
	display:flex;
	width:90%;
	height:400px;
	}
#conoce .columna3{
	display:inline-block;
	flex-wrap:wrap;
	width:80%;
	height:500px;
	float:left;
	}
	#conoce h1{
	padding-top:100px;
	}
	#conoce h3{
	padding-bottom:30px;
	}
	#conoce h4{
	border-bottom:0px;
	}
	#conoce img{
	padding-top:20px;
	width:300px;
	height:297px;
			}
		
/***************** certificacion *****************/
	
	#certifica{
	height:2240px;
	overflow:hidden;
	}
#certifica .contenedor{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	width:100%;
	height:2120px;
	}
#certifica .columna1{
	height:1060px;
	width:90%;
	}
#certifica .columna2{
	display:inline-block;
	flex-wrap:wrap;
	width:90%;
	height:360px;
	float:left;
	}
#certifica .columna3{
	display:inline-block;
	flex-wrap:wrap;
	width:90%;
	height:460px;
	}
	#certifica .parrafo{
		padding-left:14px;
		padding-right:14px;
	}
	#certifica h1{
	color:#93c125;
	padding-top:140px;
	padding-bottom:80px;
	text-align:center;
	}
	.columna1 h3{
	color:#93c125;
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	text-align:center;
	}
	.columna2 h3{
	color:#93c125;
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	text-align:left;
	}
	#certifica h4{
	text-align:center;
	}
	#certifica p{
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	color:#706f6f;
	text-align:left;
	}
	#certifica img{
	padding-bottom:10px;
	width:300px;
	height:274px;
	margin-bottom:30px;
	}
		
/***************** pedido *****************/	
			
#pedido{
	height:1000px;
	overflow:hidden;
	}
#pedido .contenedor{
	width:100%;
	height:1100px;
	margin-right:auto;
	}
#pedido .columna1{
	width:90%;
	height:475px;
	float:left;
	top:0;
	}
#pedido .columna2{
	width:100%;
	height:700px;
	margin-right:auto;
	top:400px;
	justify-content:center;
	}
	#pedido h1{
	color:#93c125;
	padding-top:100px;
	text-align:center;
	}
	
/***************** formulario pedido *****************/	
	#boton{
	width:100%;
	}
	textarea {
	min-height:100px;
	max-height:200px;
	max-width:72%;
	}
	.formulario segmento{
	width:auto;
	display:inline-block;
}
	.formulario h4{
	color:#93c125;
	text-align:right;
	text-transform:uppercase;
	padding-top:30px;
	padding-bottom:10px;
	}
	.formulario cantidad{
	padding-top:30px;
	}
	.formulario input, textarea {
	font-size:17px;
}
	.formulario input{
	width:70%;
}
.formulario label {/*<<<<<<<<< modificar en version escritorio */
	visibility: hidden;
}
.formulario placeholder {/*<<<<<<<<< modificar en version escritorio */
	visibility:visible;
}
	
/***************** bolsa *****************/	

#bolsa{
	background-position:left bottom;
	width:100%; 
	height:1100px;
	overflow:hidden;
	}
#bolsa .contenedor{
	width:100%;
	height:1100px;
	}
#bolsa .columna{
	width:90%;
	height:1000px;
	}
	#bolsa .parrafo{
		padding-left:14px;
		padding-right:14px;
	}
	#bolsa h1{
	padding-top:100px;
	padding-bottom:50px;
	}
	#bolsa h2{
	border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:20px;
	}
	#bolsa h3{
	color:#93c125;
	/*border-bottom:3px dotted rgba(147,193,37,1);
	padding-bottom:80px;*/
	text-align:left;
	}
	#bolsa h4{
	color:#93c125;
	padding-bottom:10px;
	font-size:18px;
			}
	#bolsa a{
	color:#93c125;
	text-decoration:none;
			}
	#bolsa img{
	box-sizing:border-box;
	width:300px; height:244px;
	}

/***************** contacto *****************/	

	#contacto{
	width:100%; 
	height:900px;
	overflow:hidden;
		}
#contacto .contenedor{
	width:100%;
	height:900px;
	margin-right:auto;
	}
#contacto .columna{
	width:90%;
	height:800px;
	margin-right:auto;
	top:28px;
	}
	#contacto h1{
	padding-top:100px;
	padding-bottom:50px;
	}
	
/******************************************************************************
formulario contacto
*******************************************************************************/
	
#boton2{
	width:100%;
	}
	#boton2:hover{
	cursor:pointer;
	color: #93c125;
		}
	.formulario2 {
	box-sizing:border-box;
	width:100%;
}
	.formulario2 input, textarea {
	font-size:17px;
	width:70%;
	margin:5px;
}
	.formulario2 label {/*<<<<<<<<< modificar en version escritorio */
	visibility: hidden;
}
.formulario2 placeholder {/*<<<<<<<<< modificar en version escritorio */
	visibility:visible;
}


/***************** footer *****************/	
	
footer .contenedor{
	justify-content:space-between; /*esto hace que los elementos se ajusten a los extremos del contenedor*/
	padding:25px;
	width:100%;
	}
				
.copy{
	float: right;
	}
				
.sociales{
	float: right;
	}
	

/***************** waves *****************/	

.wave1{/****banner-quienes****/
	display:none;
	}	
.wave2{/****quienes-mision****/
	display:none;
	}	
.wave3{/****mision-productos****/
	display:none;
	}
.wave4{/****productos-calidad****/
	display:none;
	}
.wave5{/****calidad-conoce****/
	display:none;
	}
.wave6{/**************************************************conoce-certifica****/
	display:none;
	}
.wave7{/****certifica-pedido****/
	display:none;
	}
.wave8{/****pedido-bolsa****/
	display:none;
	}
.wave9{/*****************************************************bolsa-contacto****/
	display:none;
	}

	
	}