@import url('http://www.myfontfree.com/data/200/c/calibri/Calibri.ttf');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Anton|Quicksand');



body{background: #fff}
*{margin: 0;padding: 0;box-sizing:border-box;}

a{text-decoration: none;font-family: calibri}

.margin{width: 90%;max-width: 950px;margin: auto}


h1{text-align: center;background:#EB1C23;padding:20px;font-family: calibri;
	font-size: 2.3em;color: #fff;margin-top: 85px;}

/*slider_fondo*/
.tituloss{width: 50%;z-index: 99;color: #fff;position: absolute;top:25%;margin-left: 15px}
.titul {margin-bottom: 15px}

.titul h2{color: #fff;font-size: 20px;font-family: calibri;
margin-bottom: 10px;border-bottom: 1px solid #fff;
padding-bottom: 5px;}

.titul p{color: #fff;font-size: 16px;font-family: calibri;}
/*header*/


header{width: 100%;
	display: flex;
	padding:8px 20px;justify-content:space-between;
	position: fixed;top:0;z-index:1000;
	background: rgba(0,0,0,.6)
}

header #logotipo{width: 20%;margin-left: 40px;}
header #logotipo img{width: 260px; height: auto;}

header .menuu {width:70%;display: flex;align-items:center;
	justify-content:flex-end;
}

header .menuu ul a{text-decoration: none; color:#C1C2C4; 
	font-weight:bold;font-family:Open Sans; font-size: 15px;}
ul {list-style: none;}
header .menuu ul li {float: left;flex:auto;}
header .menuu ul li a:hover {color: red;}
header .menuu ul li a {padding:33px 15px;}
.menuu ul li #activee{color: red;}

/*sumamos*/
#sumamos .margin{display: flex;flex-wrap:wrap;margin-top: 20px;}
#sumamos{width: 100%;margin-top:100px;margin-bottom: 105px;}
#sumamos .margin h2{text-align: center;font-family: calibri;font-size: 38px;color: #000;width: 100%;margin: 20px 0}
.sumamos {display: flex;flex-wrap:wrap;width: 50%;}

.sumamos .sum{width: 100%;padding: 20px;margin-bottom: 10px;}
.sumamos .sum h4{text-align: center;font-family: calibri;
color: red;font-size:1.3em;}

.sumamos .sum p{text-align: justify;color: #7F8082;font-family:calibri;font-size: 16px;
border-bottom: 1px solid red;padding-bottom: 25px;}

#sumamos .presentacion{text-align: center;width: 100%;margin: 20px auto;}
 #sumamos .presentacion h2{text-align: center;font-family: calibri;font-size: 28px;color: red;width: 100%;margin-bottom: 15px}
  #sumamos .presentacion p{text-align: justify;color: #7F8082;font-family:calibri;font-size: 16px;
border-bottom: 1px solid red;padding-bottom: 25px;}
#sumamos .video{width: 50%;display: flex;padding-right: 20px;align-items:center;}

/*#EB1C23*/
/*serviios*/

#servicios{width: 100%;margin-bottom: 30px;}
.servicios {display: flex;width: 100%;flex-direction:column;}
.servicios .serv{padding: 10px 25px;width: 100%;
display: flex;flex-wrap:wrap;;position: relative;
border-bottom: 2px solid #fff;}
.serv h4{text-align: center;color: #fff;font-family: calibri;
font-size: 25px;margin-top: 60px;margin-bottom: 20px;width: 55%;
z-index: 80}
.serv p{text-align: justify;padding: 20px; color: #fff;font-family: calibri;
font-size: 16px;margin-bottom: 30px;width: 50%;z-index:80}
.serv .imag-btn{width: 50%;display: flex;flex-direction:column;align-items:center;
margin-top:-50px;z-index: 80}

.imag-btn .boton{;background-color: transparent;
border: 1px solid #fff;text-align: center;margin-top: 20px}

.imag-btn .boton a{color: #fff;font-family: calibri;font-size: 14px;text-align: center;
padding: 12px;display: block;}

.boton a:hover{background:white;color: #000}

.servicios .serv:before{content: "";display: block;
background-image: url('../img/407.jpg');z-index: 0
;position: absolute;width: 100%;height: 100%;opacity: 0.1;
top: 0;left: 0;}

.imagen{text-align: center;width:60%;margin-top: -25px;border: 1px solid #fff;}
.imagen img{width:100%;height: auto; }




#s1{
	background-image:url('../img/servicio1.jpg');
	background-attachment: fixed;
	
	}
#s2{
	background-image:url('../img/servicio2.JPG');
	background-attachment: fixed;
	background-position:cover; 
}

#s3{
	background-image:url('../img/slide5.jpg');
	background-attachment: fixed;
	background-position:center; 
}

#s4{
	background-image:url('../img/servicio4.jpg');
	background-attachment: fixed;
	background-position:center; 
}

#s5{
	background-image:url('../img/servicio5.jpg');
	background-attachment: fixed;
	background-position:center; 
	
	} 


/*TRABAJOS SELECCIONADOS*/

#proyectos .actualidad{width: 100%;margin-bottom: 80px;}
#proyectos{width: 100%;margin-top: 5px;margin-bottom: 90px}
#proyectos .actualidad .margin{width: 100%;}
.tit_proy{position: absolute;top:10%;color: #fff;;z-index: 10;
	font-family: calibri;margin-left: 25px;width: 70%;
}

.tit_proy h2{font-size: 25px;border-bottom:1px solid #fff;margin-bottom:8px;width: 100%;}
.tit_proy p{font-size: 17px;}

.mas{position: absolute;top:70%;z-index: 10;color: white;
margin-left: 25px;text-decoration: none;display: block;
;border: 1px solid #fff;}
.mas span{color: white;font-size: 20px;padding: 10px;display: block;}
.mas span:hover{background: white;color: red}
#proyectos .actualidad .margin .flexslider .slides li img{width: 100%}
#proyectos .actualidad .videos{width: 100%;display: flex;flex-wrap:wrap;justify-content:space-between;margin-top: 25px}
#proyectos .actualidad .videos iframe{width: 50%;padding: 20px;

}

@media screen and (max-width: 900px){
	#proyectos .actualidad .videos{display: flex;flex-direction:column;flex-wrap:wrap;width: 100%;margin-top: 40px}
	#proyectos .actualidad .videos iframe{width: 100%;padding: 0;margin-bottom: 25px}
}



/*clientes*/
#clientes{width: 100%;padding-top:10px;margin-bottom: 40px;}
#clientes .colorsl .margin .clie .flexslider{margin: 20px 0;}
#clientes .colorsl{background: #21272D;padding: 20px 0}
#clientes .colorsl .margin .clie{}
#clientes ul{list-style: none;}
.clie{margin: 4% 0}
.cli{width: 25%;border-right: 1px solid #71767C}
.cli img{width: 100%;height: auto;}
.fila{display: flex;width: 100%;border-bottom: 1px solid  #71767C;}
.cli{padding: 25px;}
.pe{border-bottom:none;}

/*contacto*/
#contacto{width: 100%;padding-top:20px;padding-bottom: 30px}
.infocon{width: 100%;text-align: center;padding: 20px;}
.infocon h2{text-align: center;color:black;font-family: calibri;font-size: 25px;}
.infocon h4{text-align: center;color:#EB1C23;font-family: calibri;font-size: 20px;}

.form-mapa{display: flex;width: 100%;}
.form-mapa .mapa{width: 50%;margin-right: 10px;}
.form-mapa form{width: 50%;padding: 10px;}
 form input[type="text"]{width: 45%;padding: 15px;margin-left: 20px;margin-bottom: 20px;background: #C5C7C7;border: none;}
 textarea{margin-left:20px;width: 95%;height: 180px;padding: 10px;background: #C5C7C7;border: none;}
form input[type="submit"]{margin-left:20px;width: 95%;padding: 15px;color:#EB1C23;background: transparent;
	font-family: calibri;font-size: 22px;border: 1px solid #EB1C23;margin-top: 20px;cursor: pointer;

}
/*#C5C7C7*/
form input[type="submit"]:hover{background:#EB1C23;color: #fff; }
form  p{margin-top:20px;margin-left:20px;width: 95%;color: #EB1C23; font-family: calibri;font-size: 16px;text-align: center;}
form a{color:#000;}

.visitenos{margin-top:15px;width: 100%;text-align: center;background:rgba(255,255,255,.3);}
.visitenos	h2{color: gray;font-family: calibri;font-size: 1.8em;}
.visitenos	h5{color: #000;font-family: calibri;font-size: 1em}

/*footer*/

footer{display: flex;background:#EB1C23;
;padding: 20px; justify-content:flex-center;width: 100%;}
.derechos{width: 50%;float: left;}
.derechos p{font-family: calibri;
	font-size:14px;color: white;text-align: left;}
.redes{width: 50%;display: flex; justify-content:flex-end;margin: 20px;}
#fb, #goo, #you, #inst,  #in{margin-right: 10px;}
.rs a {text-decoration: none;}
.rs span{font-size: 25px;color: white;padding: 10px;border: 1px solid #fff}
.rs span:hover{background: white;color: red;}

#copiright{background: #212830;padding: 20px;display: flex;justify-content:flex-end;}
#copiright p{color: #7F8082;font-family: calibri;font-size: 14px;}

/*-------------------------------------------------------------------*/

/*---PROYECTOS---*/

.pestanas{width: 100%;display: flex; flex-direction:row;flex:auto;margin-top: -50px}
.pestanas .servicio{background: #212830;padding: 20px 5px;color: white;
font-family: Quicksand;font-size: 14px;text-align: center;
border-right: 2px solid #fff;
transition: all 1s;}
.pestanas .servicio:hover{background-color: rgba(43, 77, 62, 0.2);
border-bottom: 3px solid #212830;font-weight: bold;}
#select{background-color: rgba(43, 77, 62, 0.2);color: black;
border-bottom: 3px solid #212830;font-weight: bold;}
.galeria{display: flex;width: 100%;flex-wrap:wrap;margin: auto;
	justify-content:space-between;padding-top: 22px;}

.iam{width: 49%;position: relative;
margin-bottom: 22px;cursor: pointer;}

.iam:hover::before{background: transparent;}

.iam::before{content: "";background:rgba(0,0,0,.5);position: absolute;
top: 0;left: 0;width: 100%;height: 99%;}

.iam img{width: 100%;height: auto;
}

.tit_gal{position: absolute;z-index: 100;top:10%;color: white;
	font-family: calibri;margin-left: 20px;width: 100%}
.tit_gal h2{font-size: 1.8em;border-bottom:1px solid #fff;
	margin-bottom:8px;width: 100%;font-family: calibri}
.tit_gal p{font-size: 1.1em;}
.mas1 {position: absolute;top:80%;z-index: 10;color: white;
margin-left: 25px;text-decoration: none;display: block;
padding: 10px;border: 1px solid #fff;}
.mas1 span{color: white;font-size: 20px;}
.mas1:hover{background: gray}
.pag{margin-top:25px;width: 100%;display: flex;
flex-wrap:wrap;background: gray;flex:auto;
text-align: center;margin-bottom: 20px;
}

.pag  a{padding: 12px;border-right: 1px solid #fff;
background: gray;color: white;
font-family: verdana;font-size: 18px}
.pag  a:hover{background-color: rgba(43, 77, 62, 0.2);}


/*----------media queries proyectos-----------*/

@media screen and (max-width: 1000px){
	.mas1 {position: absolute;top:75%;z-index: 10;color: white;
	margin-left: 25px;text-decoration: none;display: block;
	padding: 10px;border: 1px solid #fff;}

	.tit_gal h2{font-size: 1.5em;border-bottom:1px solid #fff;
	margin-bottom:8px;width: 100%;font-family: calibri}
}

@media screen and (max-width: 800px){
	.pestanas{width: 100%;display: flex;flex-direction:column;
		flex-wrap:wrap;}
		.pestanas .servicio{
			border-bottom: 1px solid #fff}




}




@media screen and (max-width: 700px){
	.galeria{width: 100%;}
	.galeria .iam{width: 85%;margin: 10px auto;}
	.tit_gal h2{font-size: 1.3em;border-bottom:1px solid #fff;
	margin-bottom:8px;width: 100%;font-family: calibri}
		.mas1 {position: absolute;top:65%;z-index: 10;color: white;
	margin-left: 25px;text-decoration: none;display: block;
	padding: 8px;border: 1px solid #fff;}
	.mas1 span{color: white;font-size: 17px;}
}


@media screen and (max-width: 400px){
	.tit_gal h2{font-size: 1.2em;border-bottom:1px solid #fff;
	margin-bottom:8px;width: 100%;font-family: calibri}
	.mas1 {position: absolute;top:55%;z-index: 10;color: white;
	margin-left: 25px;text-decoration: none;display: block;
	padding: 5px;border: 1px solid #fff;}
	.mas1 span{color: white;font-size: 14px;}
	.galeria{width: 100%;}
	.galeria .iam{width:100%}
}
/*--------------------------------------------------------------------*/

/*DENTRO DE PROYECTOS*/

.imagenpro{width: 100%;text-align: center;margin-top: -90px;}
.imagenpro img{width: 60%;height: auto;}
#desp{width: 100%;margin-top: 60px}
#desp h2{width: 100%;color:#71767C;font-family: calibri;
	font-size:36px;
text-align: center;}

.descpr{width: 100%;display: flex;flex:auto;margin-top: 25px;
border: 2px solid #71767C;flex-wrap:wrap;}
.descpr .at{width:50%;padding: 20px;border-right: 1px solid #fff;
	background: gray}
#coo{background: white;}
.descpr .at h4{font-family:calibri;font-size: 21px;
color: #fff;}
.descpr #coo h4{color: gray;}
.descpr .at p{font-family:calibri;font-size: 19px;
color: #000;}

/*media queries -DENTRO DE PROYECTOS-*/
@media screen and (max-width: 800px){
	#content{width:100%;margin:0}
#content .imagenpro{width: 100%;} 
#content .imagenpro img{width: 100%;}
.descpr .at{width: 100%;}
}

@media screen and (max-width: 400px){
	#desp h2{font-size: 20px;}
	.descpr .at h4{font-size: 16px;}
	.descpr .at p{font-size: 14px}
	.descpr .at{padding: 10px;}
}


/*-----------------------------------------------*/

#mostrar_menu{display: none;}
label{display: none;}
.logorp{display: none;}
.regresar{width:30%;margin:auto;background:transparent;border:1px solid gray;text-align:center;
	margin-bottom:25px;margin-top:25px;}
.regresar a{text-align:center;font-family:calibri;font-size:16px;color:gray;
	text-decoration:none;padding:15px;display: block;}
.regresar a:hover{background: gray;color: #fff}

.inicio {position: fixed;left:93%;top:70%;width: 60px;height: 60px;border-radius: 60%;}
.inicio span{color: gray;font-size: 22px;text-align: center;display: block;padding: 15px;border: 1px solid gray;}
.inicio span:hover{background:gray ;color: white;border-radius:50%;width: 100%;height: 100%;-moz-transform: translateX(0px) translateY(10px);
-webkit-transform: translateX(0px) translateY(10px);
-o-transform: translateX(0px) translateY(10px);
-ms-transform: translateX(0px) translateY(10px);
transform: translateX(0px) translateY(10px);transition:1s all;}


/*--------------------------------------------------------------------*/
/*media queries generales*/


@media screen and (max-width: 1100px){
.logorp{display:block;position: absolute;top:8%;left:5%;z-index:99;width: 40%;}
.logorp img{width: 250px;height: auto;}
#logotipo{display: none;}
header .menuu{width: 70%;height:90%;margin-left: 0;padding: 10px;
	position:fixed;left:-100%;display: flex;overflow: scroll;
	flex-direction:column;justify-content:flex-start;
	align-items:flex-start;z-index: 999;background: rgba(255,255,255,1);transition:.5s;

;}
header .menuu ul li {display: block;float: none;border-bottom:1px solid red;
	width: 100%}
header .menuu ul li a{text-align: left;border-bottom: none;
	display: block;font-family:calibri;padding: 20px;}


#mostrar_menu + label{display: block;
	cursor: pointer;background: rgba(0,0,0,.6);
	position: fixed;top: 0;right:0;width: 100%;z-index:99;
	padding: 25px 10px;}

#mostrar_menu:checked ~ header .menuu{
	left:0;}

header{padding:0;}

.icon-menu{;color: #fff;font-size: 30px;
	line-height:70px;float: right;}



#proyectos{width: 100%;margin:0;}
#proyectos .margin{width: 95%;margin: auto }



#contacto .margin{width: 95%;margin: auto}

.inicio {position:fixed;left:80%;z-index:800}

}


@media screen and (max-width: 850px){
	
	.tituloss{width: 80%}
	.titul h2{font-size:16px;}
	.titul p{display: none;}

	#sumamos .margin{width: 95%;margin: auto;display: flex;flex-direction:column;}
	#sumamos .margin .video{width: 100%;}
	#sumamos .margin .video iframe{height: 250px;}
	#sumamos .margin .sumamos{display: flex;width: 100%;flex-direction:column;}

	.servicios{width: 100%;}
	.serv{display: flex;flex-direction:column;}
	.serv h4{width: 100%;}
	.serv p{width: 100%;}
	.serv .imag-btn{width: 100%;display: flex;flex-direction:row;text-align: center;justify-content:space-around;margin:20px 0}
	.serv .imag-btn .imagen{width: 40%;}
       
	.serv .imag-btn .boton{width: 30%}

	#proyectos .margin{width: 100%;margin:0;}
	#clientes .margin{margin: 0;width: 100%}
	.mas  {position: absolute;top:75%;z-index: 10;color: white;
margin-left: 25px;text-decoration: none;display: block;
padding: 15px;border: 1px solid #fff;}

	
	#proyectos .actualidad{display: flex;flex-direction:column;width: 100%}
		#proyectos .actualidad .margin{width: 100%;}
		
		.tit_proy .mas{position: absolute;top:70%;z-index: 10;color: white;
margin-left: 25px;text-decoration: none;display: block;
;border: 1px solid #fff;padding: 5px;}



	#contacto{width: 100%;}
	#contacto .margin{width: 100%;margin: 0}
	#contacto .margin .form-mapa{width: 100%;display: flex;flex-wrap:wrap;}
	#contacto  .margin .form-mapa .mapa{width: 100%;}
	#contacto .margin  .form-mapa form{width: 100%;}

}

@media screen and (max-width: 600px){
#proyectos .margin {display: none;}



.serv .imag-btn{width: 100%;display:flex;flex-direction:column;text-align: center;margin-top:-10px}
	.serv .imag-btn .imagen{width: 80%;margin:10px auto }
	.serv .imag-btn .boton{width: 25%;margin: auto;}
#clientes .margin{width: 90%;margin: auto}

#clientes .margin .clie .flexslider .slides li .fila{width: 100%;display: flex;
		flex-wrap:wrap;}
#clientes .margin .clie .flexslider .slides li .fila .cli{width: 50%;border-bottom: 1px solid #71767C}
footer{width: 100%;display: flex;flex-wrap:wrap;}
footer .derechos{width: 100%;padding: 20px;}
footer .redes{width: 80%;margin: 15px auto}




}

@media screen and (max-width: 400px){
	.titul h2{font-size:13px;}
	.flex-control-nav{display: none;}
	#clientes .margin{width: 100%;margin: 0}
	
	.servicios .serv{padding:5px 0;}

	form {width: 100%;}
	form input[type="text"]{width: 90%;padding: 15px;margin-left: 20px;
	margin-bottom: 20px;background: #C5C7C7;border: none;}
	textarea{margin-left:20px;width: 90%;height: 180px;padding: 10px;
	background: #C5C7C7;border: none;}
	form input[type="submit"]{margin-left:20px;width: 90%;padding: 15px;
	color:#EB1C23;background: transparent;font-family: calibri;font-size: 22px;
	border: 1px solid #EB1C23;margin-top: 20px;cursor: pointer;}

#clientes .margin .clie .flexslider .slides li .fila .cli{padding: 10px}
h1{font-size:24px;padding:10px}

#sumamos .margin h2{font-size:18px;}
#clientes .margin h2{font-size:18px}
#sumamos .sum h4{font-size:18px}
#sumamos .sum p{font-size:14px}
#sumamos .presentacion h2{font-size: 18px}
#sumamos .presentacion p{font-size:14px}
#servicios .servicios h4{font-size:18px;}
#servicios .servicios p{font-size:14px;}
#servicios .servicios .boton a{font-size:12px;}
#servicios .servicios .boton {padding:3px;}
#contacto h2{font-size:16px}
#contacto h4{font-size:14px}
.visitenos h2{font-size:14px;}
.visitenos h5{font-size:14px;}
footer  .derechos p{font-size:13px;}
footer .redes{width:100%;display: flex;flex-wrap:wrap;}
footer .redes .rs{margin-bottom: 20px;padding:5px;}
footer .redes .rs span{font-size:16px}
form p {font-size:14px;}
form p a {font-size:14px;}
#copiright p{font-size:14px}
}