*{margin: 0;
padding: 0;}
body{
	width: 100%;
}
header{
	position: sticky;
	top: 0rem;
	z-index: 100;

}
#inicio{
	width: 100%;
	display: inline-flex;
	background:#30336b;
	padding: 0.2rem;
	padding-bottom: 0.5rem;
	box-sizing: border-box;
	justify-content: space-between;
}
#marcauno{
	width:100%;
	margin-left: 5%;
	
}
#marcauno img{
	max-width: 100%;
}

#marca{
	width:10%;	
}
#marca img{
	max-width: 100%;
}

#botonera{
	width: 50%;

}
nav ul{
	width: 100%;
	display: inline-flex;
	justify-content: space-around;
	font-family: 'Roboto', sans-serif; 
	font-size: 1rem;
	color: white;
}
 nav ul li a{
 text-decoration: none;
 color: white;
 padding: 1rem;
 box-sizing: border-box;
 }
  nav ul li a:hover{
  	background: #487eb0;
  }
 nav ul li{
 	text-transform: uppercase;
 	list-style-type: none;
 	margin-top: 1rem;
 	padding: 0.5rem;
 	box-sizing: border-box;
 }
 #seccionuno,  #nosotros,  #servicios,  #trabajos,  #contacto{
 	width: 100%;
 }
 #cabezal{
 	background: url(imagenes/portada.jpg);
 	background-size: cover;
 	height: 60rem;
 	padding-top: 5rem;
 	box-sizing: border-box;
 }
 #volanta{
 	font-family: 'Anton', sans-serif;
 	height: auto;
 	font-size: 6rem;
 	color: #2980b9;
 	margin-left: 5%;
 	margin-top: 1rem;
 	width: 90%;
 	margin-bottom: 1rem;
 	text-shadow: 0.5rem 0.5rem black;

 }
 #subtitulo, .titulofotos {
 	font-family: 'Lato', sans-serif;
 	color: white;
 	font-size: 1.5rem;
 	width: 50%;
 	margin-left: 5%;
 	background-color: #22a6b3;
 	margin-top: 2rem;

 }
 .subtitulo{
 	font-family: 'Lato', sans-serif;
 	color: white;
 	font-size: 1rem;
 	width: 100%;
 	background-color: #22a6b3;
 	text-align: center;

 }
 #doscolumnas{
 	display:inline-flex;
 	width: 100%;

 }
 #columnauno{
 	background-color: #2c3e50;
 	padding: 3rem;
 	text-align: center;
 	width: 40%;
 }
 #columnauno img{
 box-shadow: 1rem 1rem white;
  }
 #columnados{
 	background-color: #e74c3c;
 	padding: 3rem;
 	text-align: center;
 	font-family: 'Lato', sans-serif;
 	color: white;
 	font-size: 1.5rem;
 }
 .tituloseccion{
 	font-family: 'Anton', sans-serif;
 	font-size: 1rem;
 	border: 0.1rem white solid;
 	width: 100%;
 	margin-right: auto;
 	margin-left: auto;
 	color:white;
 	text-align: center;
 	text-transform: uppercase;
 	background-color:#535c68;
 	margin-top: 2rem;
 	letter-spacing: 0.3rem;
 	box-sizing: border-box;
 }
 #nosotros article section{
 	display: inline-flex;
 	width: 100%;
 	background-color:#130f40;
 	justify-content: space-between;
 	padding: 1rem;

 }
 #icono {
    width:0;
    height:0;
    border-bottom: 30rem solid #535c68; 
    border-left: 25rem solid transparent;				
}
 #texto{
 	font-family: 'Lato', sans-serif;
 	color: white;
 	font-size: 1.2rem;
 	width: 50%;
 	text-transform: uppercase;
 	margin-left: 3rem;
 	margin-top: 1rem;
 	padding: 1rem;
 	box-sizing: border-box;

 }
  #texto p{
  	margin-top: 0.5rem;
  }
  #botonconsultar a{
text-decoration: none;
color: white;
background-color: #22a6b3;
border-radius: 1rem;
padding: 1rem;
box-sizing: border-box;
  }
  #botonconsultar{
  	margin-top: 2rem;
  }
  #trabajos{
  	width: 100%;
  	background-color: #130f40;
  	padding: 2rem;
  	box-sizing: border-box;
  }

#textoserv{
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
	display: inline-flex;
}
#clientes{
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	padding: 1rem;
	box-sizing: border-box;
	
}
#clientes ul{
	width: 100%;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	padding: 1rem;
	box-sizing: border-box;
	
}
.fotosnosotros ul li{
	width: 24%;
	list-style-type: none;
	height:15rem;
	overflow:hidden;
	margin: 0.1rem;
	margin-bottom: 1rem;
	margin-top: 1rem;
	transition: all 0.1s ease-in-out;
}
.fotosnosotros ul li :hover{
	transform: scale(0.9);
	transition: all 0.1s ease-in-out;
}

.fotosnosotros ul li a img{
	max-width: 100%;

}
.fotosnosotrosdos ul li{
	width: 24%;
	list-style-type: none;
	margin: 0.1rem;
	margin-bottom: 2rem;
	transition: all 0.1s ease-in-out;
}
.fotosnosotrosdos ul li :hover{
	transform: scale(0.9);
	transition: all 0.1s ease-in-out;
}

.fotosnosotrosdos ul li a img{
	max-width: 100%;

}

h2{
	background-color: white;
	padding: 1rem;
	box-sizing: border-box;
	text-transform: uppercase;
	color:#1abc9c; 
	font-family: 'Roboto', sans-serif;
	width: 20%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

 footer{
 	width: 100%;
 	background-color:#130f40;
 	display:inline-flex;
 	justify-content: space-around;
 	padding: 1rem;
 	box-sizing: border-box;
 	margin-top: 2rem;
 }
  footer #marca{
  	width: 15%;
  	margin-top: 1rem;

  }
  .redes{
  	display: inline-flex;
  	justify-content: space-around;
  	width: 50%;

  }
   .redesar{
  	display: inline-flex;
  	justify-content: space-around;
  	width: 20%;

  }
  #datos{
  	width: 30%;
  	text-align: center;
  	line-height:2rem;
  	font-family: 'Open Sans', sans-serif;
  	color: white;
  }
  .tel{
  	font-size: 2rem;
  }
#contacto{
	width: 100%;
	background-color: #22a6b3;
	text-align: center;
}
#contacto article section{
	display:inline-flex;
	justify-content: space-between;
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;


}
.mapa {
	width: 50%;
	height: 26rem;
	overflow: hidden;
	
}
.mapa iframe{
	max-width: 100%;
	max-height: 100%;
}
.btnenviar{
  background:black; 
  border-radius: 0.2rem;
  margin-top: 1rem;
  padding: 0.5rem;
  border:none;
  color: white;
}
.campo{
  border:none;
  width: 90%;
}
.campoarea{
  width: 70%;
  border-radius: 0.3rem;
  height: 5reM;
  border: 0.1rem solid grey;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;

 }
.campoc{
  width:70%;
  border-radius: 0.1rem;
  height: 2reM;
  border: 0.1rem solid grey;
  margin-bottom: 1rem;
  text-align: center;
  margin-left:auto;
  margin-right: auto;

 }

 #formulario{
 	background-color: #1abc9c;
 	width: 50%;

 }
 #dosser{
background:#2c3e50;
text-align: center;
font-family: 'Poppins', sans-serif;
color: white;
padding: 2rem;
box-sizing: border-box;
width: 100%;
}

#azul{
	background: #2c3e50;
	padding: 1rem;
	box-sizing: border-box;
	text-align: center;
}

.campoc{
 	width:70%;
 	border-radius: 0.1rem;
 	height: 2reM;
 	border: 0.1rem solid grey;
 	margin-bottom: 1rem;
 	text-align: center;
 	margin-left:auto;
 	margin-right: auto;

 }
 .campoarea{
 	width: 70%;
 	border-radius: 0.3rem;
 	height: 5reM;
 	border: 0.1rem solid grey;
 	margin-bottom: 1rem;
 	margin-left: 15%;
 	margin-right: 15%;

 }
input::-moz-placeholder {
	color:black;
	text-align: center;

}
input::-webkit-input-placeholder{
	color:black;
	text-align: center;
}
.btnenviar{
	width: 50%;
	background-color: rgb(5, 109, 143);
	color: white;
	text-align: center;
	padding: 1rem;
	margin-left: 25%;
	margin-right: 25%;
	border:none;
	box-sizing: border-box;
	margin-bottom: 1rem;
}
.formulario{
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

@media (max-device-width: 700px) and (min-device-width:320px){

#inicio{
	flex-flow: column;
	text-align: center;
}
#botonera{
	width: 100%;
	margin-bottom: 1rem;
}
.redesar{
	display: none;
}
nav ul{
	font-size: 0.7rem;
}
#cabezal{
	padding-top: 0.2rem;
	box-sizing: border-box;
	height: auto;
	width: 100%;
	padding-bottom: 0.5rem;
	text-align: center;
}
#marcauno img{
max-width: 100%;
}
#marcauno{
	width: 20%;
	background: black;
}
#volanta{
	font-size:1.5rem;
	text-shadow: 0.1rem 0.1rem black;
	width: 60%;
	line-height: 1.8rem;
	margin-top: 1rem;
	margin-left: 50%;
	text-align: left;
	margin-left: 40%;
}
#subtitulo{
	width: 50%;
	margin-left: 40%;
	margin-top: 0;
	font-size: 0.7rem;
}
.tituloseccion{
	width: 90%;
}
#clientes{
	width: 100%;
}
.fotosnosotros{
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
}
.fotosnosotros ul li{
	width:47%;
	height: 5rem;

}

.fotosnosotrosdos ul li{
	width:47%;
	height: 10rem;

}

 
#icono{
	display: none;
}
#texto p{
	text-align: center;

}
#texto{
	width: 80%;
	margin-top: 1rem;
	text-align: center;
	margin-right: 10%;
	 margin-left: 10%;
}
#contacto article section{
	display: flex;
	flex-flow: column;
}
.mapa{
	width: 100%;
	text-align: center;
}
.formulario{
	width: 100%;

}
#botonconsultar{
text-align: center;
}
#nosotros{
	width: 100%;
}
.campoc, .campoarea {width: 90%;
}
.campoarea{
	margin-left: auto;
	margin-right: auto;
}

footer{
	flex-flow: column;
	width: 100%;

}
#marca{
	margin-left: auto;
	margin-right: auto;
}


#datos{
	width: 90%;
	margin-right: 5%;
	margin-left: 5%;
}
.titulofotos{
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

}