footer {
  text-align: center;
  padding: 3px;
  background-color: #e94d27;
  color: white;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 25px;
  transition: height 400ms;
}
nav {
	text-align: left;
	padding: 5px;
	background-color: #424b4c;
	color: white;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	line-height: 40px;
	height: 40px;
    transition: height 400ms;
}
.ofrecemos {
	background-color: #424b4c;
	display: block;
	top: 50px;
	height: 100%;
	width: 160px;
    transition: width 400ms;

}
a.ofrecemos {
	display: block;
	height: auto;
	width: auto;
	padding: 5px;
	line-height: 30px;

}
nav a {
	display: inline;
	padding: 15px 20px 15px 20px;
	text-decoration: none;
	font-size: 18px;
	color:#e94d27;
	user-select:none;
}
nav a:hover:not(#aqui) {
	color:#ff8d67;
	background-color: #626b6c;
}
#aqui{
	color:white;
}
#oculto{
	display:none;
}
#boton{
	display:none;
}
 body {
	padding-bottom: 25px;
	font-family: sans-serif;
	padding-top:40px
	}
 li {
	display:inline;
  list-style-type: none;
 }
li a {
	text-decoration: none;
}
.servicios {
  display: grid;
  grid-template-columns: 25% 25%  25%  25%;
  padding: 10px;
  margin-left: 160px;
}
.servicios > div {
  padding: 10px;
  font-size: 15px;
  text-align: center;
}

.servicios > div img {
  display:block;
  margin-left:auto;
  margin-right:auto;
  max-width:100%;
  width:auto;
  height:100px;
  overflow: auto;
}
.portafolio > div img {height:350px;}
 .industrial{
  display:none;

 }

 .serv >img {
 cursor: pointer;

 }
 .residencial{
  display:none;

 }
 .mantencion{
  display:none;

 }


.grilla {
  display: grid;
  grid-template-columns: auto auto;
  padding: 10px;
}
.grilla > div {
  padding: 10px;
  font-size: 16px;
  text-align: justify;
}
.todoancho {grid-column: 1 / span 2
}

.niebla {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.5);
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 45px;
  left: 0;
  top: 0;
}
.dentro_niebla {
  background-color: #fefefe;
  margin: auto;
  padding: 10px;
  border: 3px solid #000;
  width: 70%;
}
.detalles{
display:none;
text-align: justify;
}
.detalles>img{
float:right;
height:90px;
padding:10px;
}
.cerrar {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
video {width: 619px; height: 349px;}

@media screen and (max-width: 1100px) {
	.servicios {  grid-template-columns: 33% 33% 33%;}
}
@media screen and (max-width: 840px) {
 #boton{display:block;}
	.ofrecemos {width: 16px;}
 	.servicios { margin-left: 16px;}
	a.ofrecemos {display: none;}
/*	.ofrecemos:hover {width: 160px; overflow:hidden;
		a.ofrecemos {display: block;}
		}*/

}
@media screen and (max-width: 680px) {
video {width: 100%; height: auto;}
.portafolio > div img {width: 100%; height: auto;}
}
@media screen and (max-width: 620px) {
 footer {height:45px;}
.servicios {grid-template-columns: 50% 50%;}
.grilla {grid-template-columns:auto;}
.todoancho {grid-column: 1 / span 1}
 #oculto{display:block;}
 footer li {display:block;}
 body {padding-bottom:45px;}
 nav:not(.ofrecemos) {text-align:center; overflow:hidden;}
 nav:hover:not(.ofrecemos) {height:200px;}
 nav a {display:block; padding:0px 20px 0px 20px;}
}