*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: Helvetica, Arial, Verdana;
}
header{
	width: 100%;
	height: 50px;
	background: rgb(19,27,132);
	/*Fija la bara supererior sobre cualquier capa*/
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	color: #fff;
}
.contenido{
	width: 98%;
	margin: auto;
}
header .contenido{
	/*limpia el contenedor*/
	display: table;  

}
h1{
	float: left;
	font-weight: 100;
	margin-top: 7px;
	color: #fff;
}
h1 a:hover{
  color: #FFF;
  margin: 0 auto;
  text-align: center;
  font-weight: 700;
  font: italic bold 28px Georgia, Serif;
  /*text-shadow: -4px 3px 0 #34d16e, -14px 7px 0 #0a0e27;*/
  text-shadow: -4px 3px 0 #34d16e;
}
h1 a{
	text-decoration: none;
	color: #fff;
}
header label{
	/*Coloca label y check a la derecha*/
	float: right;  
	/*Tamaño del menu*/
	font-size: 28px; 
	/*6px arriba y 0 a costados*/
	margin: 6px 0;  
	cursor: pointer;
}

#barra-menu{
	/*Oculta check*/
	display: none; 
}
/*Cuando esta activado el check del menu*/
#barra-menu:checked ~ .menu{
/*Muestra*/
	transform: translateX(25%);
}
.menu{
	position: absolute;
	top: 50px;
	left: 0;
/*	Ocupe el Ancho*/	
	width: 80%; 
/*Ocupe todo el alto*/
	height: 100vh;
	background: rgba(19,27,132,0.9);
	/*animación*/
	transition: all 0.5s;
	/*Oculta*/
	transform: translateX(150%);
}
.menu a, span{
	display: block;
	color: #fff;
	height: 40px;
	text-decoration: none;
	padding: 15px;
	border-bottom: 1px solid rgba(255,255,255,0.5);
}
.menu span:hover{
    cursor:pointer;
    background: #F39C12;
    border-radius: 7px;
}
.menu a>img{
    position: relative;
    margin-top: -18px;
	top: -0px;
	right: 5px;
	border-radius: 50% 50%;
	box-shadow: 0 0 0 0px rgba(255,255,255,1),
				0 10px 50px;
	
}
.menu a:hover{

	color: rgba(255,255,255,0.9);
	background: rgba(244,8,20, 0.9);
	box-shadow: 0 0 0 10px rgba(117, 247, 11, 0),
				0 15px 30px;
}
main{
	margin-top: 50px;
}

/*PRESENTACION*/
/*section{
	width: 100%;
	margin-bottom: 25px;
}*/
#presentacion{
	margin-top: 10px;
	margin: auto;
	width: 99%;
	height: 100%;
	/*max-width: 1024px;*/
	position: relative;
	/*oculta las imagenes fuera del contenedor*/
	overflow: hidden;
	/*borde y sombra del slider*/
	/*box-shadow: 0 0 0 10px #20b64c,
				0 0px 0px;*/
}
#presentacion section{
		margin-top: 5px;
}

#slider{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	/*Ancho de 100% por cada imagen ahora son 4*/
	/*width: 400%;*/
	
}
#anterior, #siguiente{
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,0.7);
	position: absolute;
	/*posiciona a la mitad vertical las flechas*/
	top: 50%;
	transform: translateY(-50%);
	line-height: 40px;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	border-radius: 50%;
	font-family: monospace;
	cursor: pointer;
	color: #fff;
}
#anterior:hover, #siguiente:hover{
	background: rgba(255,255,255,1);
	color: #000;
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 35px;
}
#anterior{
	left: 10px;
}
#siguiente{
	right: 10px;
}
#slider	section{
	width: 100%;
}

#slider img{
	display: block;
	width: 100%;
	height: 100%;
}
#presentacion img{
	width: 100%;
	height: 100%;
}
#presentacion .contenido{
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	color: #fff;
	text-align: center;
	display: block;
	height: 500px;
}
/*QUITE EL ENLACE*/
#presentacion a{
	display: block;
	width: 100px;
	color: #fff;
	text-decoration: none;
	padding: 10px;
	margin-top: 10px;
	border: 3px solid #fff;
}
#presentacion a:hover{
	background: rgba(51,51,51,0.7);
}
/*bienvenido*/

#bienvenido .contenido{
	margin-top: 20px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#bienvenido article{
	width: 100%;
	max-width: 300px;
	margin: 15px;
	padding: 15px;
border-radius: 5% 5%;

background: rgba(252,234,187,1);

 -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
/*Centrado vertical*/
   display: flex;
   justify-content: center;
   align-items: center;
}

#bienvenido h2, p{
	text-align: center;
}
#bienvenido h2{
	margin: 7px;
	color: #fff;
  font-size: 2em;
  font-weight: normal;
  font-family: Helvetica;
  text-shadow: 
    0 1px 0 #ccc, 
    0 2px 0 #c9c9c9, 
    0 3px 0 #bbb, 
    0 4px 0 #b9b9b9, 
    0 5px 0 #aaa, 
    0 6px 1px rgba(0,0,0,.1), 
    0 0 5px rgba(0,0,0,.1), 
    0 1px 3px rgba(0,0,0,.3), 
    0 3px 5px rgba(0,0,0,.2), 
    0 5px 10px rgba(0,0,0,.25), 
    0 10px 10px rgba(0,0,0,.2), 
    0 20px 20px rgba(0,0,0,.15);
}

#bienvenido p{
	color:  #0c6e00;
	text-align: justify;
	font-weight: 500;
}
/*Blog*/
#blog h3, h4{
	text-align: center;
}
#blog .contenido{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#blog article{
	margin: 15px;
}
#blog img{
	width: 100%;
	max-width: 280px;
	
	-webkit-box-shadow: 1px 0 2px black;
   -moz-box-shadow: 1px 0 2px black;
        box-shadow: 1px 0 2px black;
}
/*INFO*/
#info {
	background:  #BFC9CA ;
	color: #fff;
	text-align: center;
	padding: 20px;
}
#info .contenido{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.info-prod{
	margin: 20px;
}
.info-prod img{
	width: 180px;
	height: 180px;
	border-radius: 50%;
	border: 5px solid #fff;	
}

/*PIE*/
footer .contenedor{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-bottom: 25px;
}
.copy{
	margin-top: 10px;
	font-size: 20px;
    background: rgba(255,255,255,.7)
}
.sociales{
	display: none;  /*Oculta redes*/
	width: 100%;
	text-align: center;
	font-size: 28px;
}
.sociales a{
	color: #333;
	text-decoration: none;
}

/*PRODUCTOS*/
#productos{
	align-content: center;
	width: 100%;
	background: radial-gradient(200px top, ellipse, white, #33691e, black);
	background: -moz-radial-gradient(200px top, ellipse, white, #33691e, black);
	background: -webkit-radial-gradient(200px top, ellipse, white, #33691e, black);
	background: -o-radial-gradient(200px top, ellipse, white, #33691e, black);
	background: -ms-radial-gradient(200px top, ellipse, white, #33691e, black);
}
#bienvenido h1,h2,h3,h4, p{
	text-align: center;
}

#productos>h1{
	margin-top: 20px;
	width: 100%;
	text-align: center;
	padding: 10px;

	font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;;
  text-transform: uppercase;
  font-size: 40px;
  color: #fff;
  text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
  font-weight: bold;
  letter-spacing: 7px;
  

}
#productos .contenido{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#productos article{
	max-width: 400px;
	margin: 30px;
	background:#FFF;
	padding: 10px;
	box-shadow: 0 10px 10px #555
	/*box-shadow: inset 0 -10px 10px -10px #555
   -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;*/
	
}
#productos p{
	text-align: justify;
}
/*QUIENES SOMOS*/
#somos{
	align-content: center;
	width: 100%;
	background: radial-gradient(200px top, ellipse, white, #78909c, black);
	background: -moz-radial-gradient(200px top, ellipse, white, #78909c, black);
	background: -webkit-radial-gradient(200px top, ellipse, white, #78909c, black);
	background: -o-radial-gradient(200px top, ellipse, white, #78909c, black);
	background: -ms-radial-gradient(200px top, ellipse, white, #78909c, black);
}
#somos article{
	justify-content: center;
	display: flex;
	flex-wrap: wrap;

}
#somos article div{
	width: 100%;
	padding: 15px;
	background:#FFF;
	box-shadow: 0 10px 10px #555
}
#somos h2{	
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;;
  text-transform: uppercase;

  color: #afb42b;
  text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
}
#somos p{
	text-align: justify;
	margin-top: 5px;
}

/*RESPONSIVO PARA PC*/
@media (min-width: 900px) {
	.menu{
		position: static;
		width: auto;
		height: auto;
		transform: translateX(0%);
		float: right;
		display: flex;
		background: rgba(19,27,132,0.9);

	}
	.menu a{
		border: none;
	}
	header label{
		display: none;
	}
#somos article div{
	width: 400px;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 15px;
	background:#FFF;
	box-shadow: 0 10px 10px #555
}
}

/*FORMULARIO CONTACTO*/
.mapaubicacion{
 	width: 450px;
	margin: auto;
	margin-top: 100px;
	margin-bottom: 20px;
	border-radius: 7px;   
	position: relative;
}
.contacto{
	width: 450px;
	margin: auto;
	background: rgba(0,0,0,0.4);
	padding: 10px 20px;
	margin-top: 70px;
	margin-bottom: 20px;
	border-radius: 7px;
	position: relative;
}
.contacto h2{
	color: #fff;
	text-align: center;
	margin: 0;
	font-size: 30px;
	margin-bottom: 5px;
}
.contacto input, textarea{
	width: 100%;
	margin-bottom: 20px;
	padding: 7px;
	font-size: 17px;
	border: none;
}
.contacto textarea{
	min-height: 100px;
	max-height: 200px;
	max-width: 100%;
}
.contacto .grupocaptcha{
	width: 100%;
	text-align: center;
}
.contacto .grupocaptcha .Recaptcha:hover{
border-radius: 50% 50%;
border:2px solid yellow;
}
#boton{
	background: #34495E;
	border-radius: 7px;
	padding: 10px;
	font-weight: 800;
	font-size: 30px;
}
#boton:hover{
	cursor: pointer;
	background: #2E86C1;
	border: 1px solid #fff;
}
/*HACER GRANDE EL TITULO PARA PC y CAMBIAR MARGEN SUPERIOR*/
@media (min-width: 500px) {
	#presentacion h2{
		font-size: 40px;
	}
	#presentacion a{
		margin-top: 25px;
	}
}

/*CONFIGURACIO PARA TABLET*/
@media (min-width: 768px){
	#presentacion {
		overflow: hidden;
		height: 500px;
	}
	#presentacion img{
		height: auto;
		/*margin-top: -100px;*/
	}

}

@media (min-width: 1024px){
	#presentacion img{
		/*margin-top: -200px;*/
	}
}

/*RESPONSIVO PARA PC ancho del contenido*/
@media (min-width: 1600px){
	.contenido {
		width: 1600px;
	}
}
@media(max-width: 600px){
	.contacto{
		width: 100%;
	}
}