*{
	border: 0;
	font-family: Arial;
	margin: 0;
	padding: 0;
}
html{
	scroll-behavior: smooth;
}
section#inicio{
	background-color: lightgray;
	background-image: url('../img/fondo.png');
	background-repeat: no-repeat;
	background-size: 100%;
	box-sizing: border-box;
    height: auto;
}
div#titulo{
	color: white;
}
nav,div#titulo{
	display: inline-block;
	width: 30%;
}
nav{
	background-color: rgba(255,255,255,0.2);
	padding-top: 1em;
	padding-bottom: 0.5em;
	position: fixed;
	list-style: none;
	text-align: center;
	transition: 2s;
	width: 100%;
	z-index: 1;
}
div#titulo{
	color: white;
	box-sizing: border-box;
	font-size: 1.2em;
	font-weight: bold;
	padding-left: 5em;
	text-shadow: 1px 1px 3px black;
}
nav li{
	border: 0;
	color: white;
	font-size: 1.1em;
	font-weight: bold;
	display: inline-block;
	padding: 0.2em 0;
	text-align: center;
	text-shadow: 1px 1px 3px black;
	text-shadow: -1px -1px 3px black;
	width: 13%;
}
nav li a{
	color: white;
	text-decoration: none;
}
article#somos{
	background-color: white;
	color: black;
	font-size: 1.2em;
	padding-bottom: 4em;
	padding-top: 4.5em;
	text-align: center;
}
section#mvp{
	background-color: darkgray;
	background-image: none;
	text-align: center;
	transition: 5s;
}
section#mvp article{
	box-sizing: border-box;
	color: white;
	display: inline-block;
	font-family: sans-serif;
	padding: 2em;
	vertical-align: top;
	width: 30%;
	text-align: justify;
}
section#mvp article div{
	border-bottom: 1px solid #71C6CD;
	box-sizing: border-box;
	margin: 0.8em;
	padding-bottom: 2em;
}
section#mvp article img{
	max-width: 100px;
	max-height: 100px;
}
.menuD{
	background-color: white;
	box-shadow: 2px 2px 2px gray;
	transition: 2s;
}
.menuD li{
	text-shadow: 1px 1px 3px white;
	text-shadow: -1px -1px 3px white;
	color: gray;
}
.menuD li a{
	color: gray;
}
#central{
	color: white;
	text-shadow: 4px 4px 4px black;
	font-size: 6em;
	padding-top: 2em;
	padding-bottom: 3em;
	text-align: center;
	animation-name: texto;
	animation-duration: 10s;
    animation-iteration-count: infinite;
	width: 80%;
}
#conocenos{
	background: #333;
	box-sizing: border-box;
	font-size: 1.3em;
	padding: 4em 10em;
	text-align: center;
	width: 100%;
	color: white;
}
#conocenos h3{
	margin-bottom: 1em;
}

#conocenos img{
	margin-top: 1em;
}
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
#myImg:hover {
	background-color: white;
	opacity: 0.8;
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
/* Establece color de textos*/

@keyframes texto{
	0% { color: white;}
	30% { color: #6DDEEC;}
	60% { color: #6DDEEC;}
	100% { color: white;}
}

section#productos{
	text-align: center;
	color: darkblue;
}
section#productos div{

}
/* Galeria de imágenes */
div.galImg {
	cursor: pointer;
	 min-width: 30%;
  max-width: 30%;
  height: 300px;
  background-size: cover;/*sólo para ejemplo*/
  background-image: url("../img/conoce.png");
  display: inline-block;
  
}
div#info {
  position:absolute;
  overflow:hidden;

  min-width: 30%;
  max-width: 30%;
  height: 300px;
  background-color: rgba(51, 51, 51, 0.9);
  opacity:0;
  transition: opacity 0.3s;
    
}
section#productos{
	background-image: url('../img/fondo1.jpg');
	min-height: 500px;
}
div.galImg:hover div#info {
  opacity:1;
}
p#headline {
  position: absolute;
  font-size: 1.5rem;
  margin-left: -75px;
  margin-top: 15px;
  transition: margin-left 0.3s;
}

div.galImg:hover p#headline {
  margin-left: 115px;
}
p#descripcion {
  font-size: 1rem;
  text-align: center;
  margin-top: 200px;
  transition: margin-top 0.4s;
}
div.galImg:hover p#descripcion {
  margin-top: 75px;
}
#imagen1{
	background-image: url('../img/portfolio/galeria1.png');
}
#imagen2{
	background-image: url('../img/portfolio/galeria2.png');
}
#imagen3{
	background-image: url('../img/portfolio/galeria3.png');
}
#imagen4{
	background-image: url('../img/portfolio/galeria4.png');
}
#imagen5{
	background-image: url('../img/portfolio/galeria5.png');
}
#imagen6{
	background-image: url('../img/portfolio/galeria6.png');
}
div#eproductos{
	font-size: 1.7em;
	padding-top: 2em;
	text-align: center;
	width: 100%;
}
div#eproductos p{
	font-size: 0.6em;
	padding-top: 1em;
}
article.galEquipo{
	display: inline-block;
	width: 30%;
}
section#equipo{
	background-color: white;
	padding: 1em;
	text-align: center;
}
article.galEquipo{
	background-color: #F1CF00;
	border: 1px solid #F1CF00;
	border-radius: 7px;
	padding: 0.2em;
	margin: 0;
	transform: rotate(-5deg);
	transition: 2s;
}
article.galEquipo img{
	max-width: 100%;
}
article#tituloEquipo{
	font-size: 1.2em;
	padding: 2em 0;
	margin: 0 auto;
	text-align: center;
	width: 70%;
}
#equipo h2{
	margin-top: 2em;
}
article.galEquipo:hover{
	cursor: pointer;
	opacity: 0.6;
	transform: rotate(0deg);
	transform: scale(1.2);
	transition: 2s;
}
article#equipo1,#equipo3{
	-webkit-animation-name: vuelta;
    -webkit-animation-duration: 8s;
    animation-name: vuelta;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}
article#equipo2{
	-webkit-animation-name: vuelta2;
    -webkit-animation-duration: 8s;
    animation-name: vuelta2;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    z-index: 1;
}
#contactanos{
	margin-top:2em;
	padding-top:4em;
	text-align: center;
}
#contactanos h2{
	margin-bottom: 1em;
}
#fcontacto,#informacion{
	display: inline-block;
	margin-top: 2em;
	vertical-align: top;
}
#fcontacto{
	padding-left: 2em;
	text-align: left;
	width: 45%;
}
#fcontacto input,#fcontacto textarea{
	border: 1px solid #bbf;
	border-radius: 2px;
	font-size: 1em;
	margin: 0.3em;
	margin-bottom: 0.6em;
	padding: 0.3em;
	padding-left: 0.7em;
	width: 90%;
}
#fcontacto input[type="submit"]{
	background-color: #F1CF00;
	color: white;
	cursor: pointer;
	font-size: 1em;
	font-weight: bold;
	padding: 0.6em;
	width: 30%;
}
#informacion{
	font-size: 1.3em;
	padding-top: 3em;
	width: 35%;
}
#informacion article{
	margin: 1em;
	text-align: center;
	width: 100%;
}
#informacion img{
	margin-right: 0.5em;
	max-width: 4%;
}
@-webkit-keyframes vuelta {
    0% {-webkit-transform:rotate(-5deg)} 
    50% {-webkit-transform:rotate(5deg)} 
    100% {-webkit-transform:rotate(-5deg)} 
}
@-webkit-keyframes vuelta2{
    0% {-webkit-transform:rotate(5deg)} 
    50% {-webkit-transform:rotate(-5deg)} 
    100% {-webkit-transform:rotate(5deg)} 
}
footer{
	background-color: #666;
	color: #ddd;
	font-size: 1em;
	margin-top: 2em;
	padding: 3em;
	text-align: center;
	max-width: 100%;
}
textarea{
	resize: none;
}
.visible{
	display: block;
}
span img{
	position: fixed;
	max-width: 10%;
}
.oculto{
	display: none;
}
/* Modales ocn video */ 
.ed-modal-container {
		  background: rgba(0, 0, 0, 0.8);
		  position: fixed;
		  top: 0;
		  width: 100%;
		  height: 100vh;
		  display: flex;
		  text-align: center;
		}
		.ed-modal-container::before {
		  content: 'X';
		  color: #fff;
		  position: absolute;
		  top: 1rem;
		  right: 1rem;
		  font-size: 1.5em;
		  opacity: .5;
		}
		.ed-modal-container:hover::before {
		  cursor: pointer;
		  opacity: 1;
		}
		.ed-modal-content {
		  width: 90%;
		  max-width: 1000px;
		  margin: auto;
		}
		iframe{
			min-height: 400px;
			width: 70%;	
		}
		/*
@media only screen and (max-width: 1026px){
		div.galImg {
		  width: 150px;
		  height: 300px;
		}
		div#info {
		  width: 150px;
		  height: 300px;

		    
		}
}*/

@media only screen and (max-width: 830px){
		div.galImg {
		  width: 300px;
		  height: 300px;
		}
		div#info {
		  width: 300px;
		  height: 300px;	    
		}
}
@media only screen and (max-width: 605px){
 	body{
 		text-align: center;
 	}
 	#hamburguesa{
 		color: white;
 		display: block;
 		text-align: left;
 	}
	nav{
		display: block;
		text-align: left;
		background-color: white;
		position: fixed;
	}
	nav li{
		border-bottom: 1px solid gray;
		box-shadow: 2px 2px 2px gray;
		margin-bottom: 1em;
		width: 100%;
		color: gray;
		text-shadow: none;
	}
	nav li a{
		color: gray;
		text-shadow: none;
	}
	h1#central{
		font-size: 3.5em;
		max-width: 100%;
		padding-bottom: 0;
		text-align: center;
		width: 100%;
		margin: 0;
	}
	#hamburguesa{
		z-index: 3;
	}
	article#somos{
		background-color: white;
		margin: 0;
		margin-bottom: 0;
		padding-bottom: 0.5em;
	}
	article#mision,article#vision,article#politica,section#conocenos{
		min-width: 100%;
		text-align: justify;
	}
	section#conocenos{
		padding: 0;
		padding-top: 1em;
	}
	#myImg{
		max-width: 100%;
	}
	article.galEquipo{
		width: 100%;
	}
	iframe{
		width: 300px;
	}
	article#informacion{
		margin: 0;
		min-width: 100%;
		padding: 0;
	}
	footer{
		box-sizing: border-box;
		min-width: 100%;
	}
	section#contactanos{
		min-width: 80%;
	}
	section#equipo{
		max-width: 100%;
	}
	#contactanos article{
		padding: 0;
		margin: 0;
		margin-bottom: 1em;
		max-width: 100%;
	}
	#fcontacto{
		padding: 0;
		width: 80%;
	}
	#fcontacto input[type="submit"]{
		width: 50%;
	}
}
@media only screen and (max-width: 500px){
	#imagen1,#imagen2,#imagen3,#imagen4,#imagen5,#imagen6{
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
	div.galImg {
	  min-width: 30%;
	  max-width: 30%;
	  height: 200px;
	  
	}
	div#info {
  		min-width: 30%;
  		max-width: 30%;
  		height: 200px;
	}
}