*{
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font-family:  "Montserrat", Sans-serif ;
	font-size: 10px;
}
.arriba{
	display: none;
	cursor: pointer;
	position: fixed;
	bottom: 12em;
	right: 2em;
	opacity: 0.5;
	z-index: 100;
}
.arriba:hover{
	opacity: 0.9;
}
header {
	background: #fcfaf2;
	width: 100%;
  	position: fixed;
	border-bottom: 1px solid #b4b3b3;
	z-index: 100;
}
.cabecera{
	background: #fcfaf2;
	width: 85%;
	max-width: 145em; 
	height: 8.1em;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.menu{
	display: flex;
}
.menu a{
	font-size: 1em;
	font-weight: 700;
	color: #767676;
	text-decoration: none;
	margin-left: 1.5em;
	letter-spacing: .2em;
	padding: .6em 0em;
	border-bottom: .2em solid #fcfaf2;
}
.menu a:hover{
	color: #000;
	border-bottom: .2em solid #ff6b21;
	padding-bottom: .6em;
	padding-top: .6em;
}
.logob{
	padding: 2px 0px 0px 5px;
}
.banner{
	background: url('../img/fondo2.jpg')#010101;
	background-repeat: no-repeat;
	height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.contenedor-titulo-principal{
	width: 85%;
	max-width: 104em;
}
.titulo-principal{
	width: 90%;
	height: auto;
	max-width: 10em;
	font-size: 4.15em;
	color: #fff;
	font-weight: 700;
	line-height: 1.2em;
	margin-top: 2em;
}
.conciba{
	background: url('../img/fondo-blanco.jpg');
	background-repeat: repeat;
	background-position: center;
	background-attachment: fixed;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10em 0em 9em 0em;
}
.contenedor-conciba{
	width: 85%;
	max-width: 104em;
}
.portafolio{
	width: 85%;
	max-width: 104em;
	margin-top: 10em;
}
.titulo{
	max-width: 21em;
	color: #66686b;
	font-weight: 800;
	text-align: left;
}
.titulo .linea-roja{
	width: 2.6em;
	height: .12em;
	background: #ff6b21;
	margin: .35em 0em .85em .04em;
}
.texto{
	max-width: 41em;
	color: #828282;
	font-size: 1.9em;
	font-weight: 500;
	text-align: left;
	line-height: 1.35em;
}
.regresar a{
	text-decoration: none;
	color: #D8BE50;
	border: 0.03em solid #a0a0a0;
	font-size: .8em;
	font-weight: 600;
	padding: 0em .5em .2em .5em;
}
.regresar a:hover{
	background: #D8BE50;
	text-decoration: none;
	color: #3f3f3d;
}

/*  I M P A C T O  */

.impacto {
	border-bottom: .3em solid #ff6b21;
	border-top: .3em solid #ff6b21;
	background: url('../img/impacto.jpg') #303030;
	background-repeat: no-repeat;
	background-position: center;
	padding: 16em 0em;
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;	
}
.contenido-impacto{
	width: 85%;
	max-width: 104em;
}
.tituloysubtitulo{
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	margin-bottom: 5em;
}
.titulo-impacto{
	border: 1px solid #fff;
	padding: 2em;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.comilla{
	margin-right: 1.5em;
	margin-bottom: -2.5em;
	margin-top: -3.5em;
}
.titulo-impacto p{
	width: 100%;
	max-width: 16em;
	font-size: 3.4em;
	color: #fff;
	padding: 1.5em;
	font-weight: 800;
	text-align: left;
	line-height: 1em;
}
.subtitulo-impacto{
	width: 35%;
	font-size: 2.2em;
	font-weight: 400;
	color: #fff;
	margin-bottom: 3.3em;
	display: flex;
}
.flecha-dorada{
	margin: 0em 1.5em;
}
.texto-impacto{
	font-size: 1.7em;
	color: #fff;
	font-style: italic;
	font-weight: 300;
	width: 100%;
	max-width: 42em;
	text-align: left;
	letter-spacing: .04em;
	line-height: 1.3em;
}

/* S E R V I C I O S */

.nuestros-servicios{ 
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10em 0em 9em 0em;
}
.servicios{ 
	width: 100%;
}
.grafica{
	background-color:transparent;
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-top: 6em;
}
.fondo-gris{
	background: url('../img/fondo-servicios.svg') #66686b;
	background-repeat: no-repeat;
	background-position: top left;
	display: flex;
	justify-content: center;
}
.fondo-gris2{
	width: 100%;
	background: url('../img/fondo-servicios2.svg');
	background-repeat: no-repeat;
	background-position: top right;
	display: flex;
	justify-content: center;

}

.contenedor-servicio{
	width: 85%;
	max-width: 104em;
	margin: 1.5em 1.5em 0em 1.5em;
	height: auto;
	display: flex;
	align-items: flex-start;
}
.icono{
	position: relative;
	top: 2.7em; 
}
.invisible{
	width: 3%;
	height: 10em;
}
.lapiz{
	position: relative;
	top: 7em; 
	left: -3.4em;
}
.info-servicios{
	width: 85%;
	max-width: 65em;
	margin-top: 8em; 
	margin-bottom: 9em;
}
.titulo-servicio{
	width: 85%;
	color: #fff;
	font-size: 3.6em;
	font-weight: 700;
	margin-bottom: 0em;
}
.intro-servicio{
	color: #f5eab6;
	font-size: 1.45em;
	font-weight: 500;
	line-height: 1.35em;
	font-style: italic;
	padding: .8em 0em .8em 1em;
	border-left: 3px solid #ff6b21;
	margin-bottom: 1.7em;
	margin-left: 0.1em;
}
.linea-blanca{
	width: 15%;
	height: 1px;
	background: #fff;
	margin: 1em 0em;
	opacity: 0.5;
}
.texto-servicio{
	width: 85%;
	color: #fff;
	font-weight: 400;
	font-size: 1.4em;
	line-height: 1.35em;
	letter-spacing: .03em;
}
.fondo-detalle{
	display: flex;
	justify-content: center;
}
.detalle{
	border-bottom: .01em solid #ff6b21;
	width: 85%;
	max-width: 104em;
	display: flex;
	align-items: center;
	padding: 1em 0em 0.3em 0em;
	margin: 0em 0em 2em 0em;
}
.flecha{
	margin: 0em 2em 0.5em 1em;
}
.detalle h4{
	width: 90%;
	max-width: 90em;
	color: #8c8c8c;
	font-size: 1em;
	font-weight: 500;
	line-height: 1.5em;
	letter-spacing: .1em;
	margin-right: .5em;
}
.detalle h4 span{
	color: #ff6b21;
	letter-spacing: 0em;
}


/* ---------------------------P O R T A F O L I O ---------------------------*/


.dos {
	background:#faf6ea;
}
.contenedor-trabajos {
	width: 85%;
	margin-top: 6em;
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center;
}
.trabajoytexto{
	width: 30em;
	margin-bottom: 1.5em;
}
.contenedor-trabajos .trabajo {
	position: relative;
	margin: 0em 1em .7em 0em; 
}
.contenedor-trabajos .trabajo .thumb img {
	width: 100%;
	vertical-align: top;
}
.contenedor-trabajos .trabajo .descripcion {
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: left;
	padding: 6.8em 1em; 
	width: 95%;
	height: 95%;
	font-size: 1.5em;
	font-weight: 700;
	color:#fff;
	opacity: 0;	
}
.descripcion span{
	font-weight: 400;
	font-size: .9em;
	padding-top: 3em;
	line-height: 2.5em;
	letter-spacing: .05em;
}
.contenedor-trabajos .trabajo .descripcion:hover{
	background-color: rgba(230,12,0,0.8);
	opacity: 1;
	width: 95%;
	height: 95%;
	transition: 0.3s;
}
.descrip-cion{ 
	font-size: 1.35em;
	color: #282828;
	text-align: left;
	margin: 0em 0em .4em .5em;
}
.descrip-cion span{
	color: #eb0000;
}


/*---------------------C L I E N T E S--------------------*/

.imagen-clientes{
	background: url('../img/clientes.jpg') #0e1712; 
	background-repeat: no-repeat;
	background-position: center;
	height: 50em;
}
.cliente{
	width: 85%;
	max-width: 104em;
	margin-top: 4em;
}
.texto-clientes{
	font-weight: 700;
	text-align: left;
	color: #a0a09a;
	font-size: 1.5em;
	line-height: 1.3em;
	letter-spacing: .1em;
	margin-left: .95em;
}
.texto-clientes li{
	list-style: circle;
}
.imagen-contacto{
	background: url('../img/contacto.jpg') #020202; 
	background-repeat: no-repeat;
	background-position: center;
	height: 50em;
}

/*--------------------------F O O T E R ------------------------------*/

.contacto { 
	background: #fcfaf2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 13em 0em;
}
.linea-roja-contacto{
	width: 8em;
	height: .4em;
	background: #ff6b21;
	margin: .35em 0em .85em .2em;
}
.formulario-datos{ 
	width: 85%;
	max-width: 110em;
}
.contenedor-intro-contacto{
	width: 85%;
	max-width: 110em;
}
.contenedor-info-contacto{
	display: flex;
	justify-content: space-between;
}
.titulo-contacto {
	text-align: left;
	margin: 0em 0em .3em 0em;
	font-weight: 800;
	color: #66686b;
	font-size: 3.5em;
}
footer .contacto .texto-contacto{
	width: 90%;
	max-width: 40em;
	font-weight: 500;
	text-align: left;
	color: #828282;
	font-size: 1.9em;
	margin: 1em 0em 5em 0em;
	line-height: 1.3em;	
}
.datos{
	font-weight: 500;
	font-size: 1.5em;
	color: #585858;
	letter-spacing: .05em;
	line-height: 1.25em;
}
.datos span {
	font-size: 3em;
	font-weight: 800;
	color: #ff6b21;
	margin-left: -.04em;
	line-height: .8em;
}
.wasap {
	margin-right: .3em;
	margin-top: .3em;
	margin-bottom: -.3em;
	}
footer .contacto .formulario {
	width: 50%;
	display: flex; 
	flex-direction: column;
	padding-top: .5em;
}
.titulo-form{
	color: #ff6b21;
	font-size: 1.6em;
	font-weight: 500;
	margin-bottom: .6em;
}
footer .contacto .formulario input[type="text"],
footer .contacto .formulario input[type="email"],
footer .contacto .formulario textarea {
	background-color: transparent; 
	border: 1px solid #86867e; 
	border-radius: 0px;
	padding: .3em .5em; 
	font-size: 1em;
	font-weight: 400;
	color: #858585; 
	outline: none;
}
::placeholder { 
    color: #a0a09a;
    opacity: 2;
	}
footer .contacto .formulario textarea {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	min-height: 12em;
	max-height: 35em;
	margin-bottom: .3em;
}
footer .contacto .formulario input[type="text"]:focus,
footer .contacto .formulario input[type="email"]:focus,
footer .contacto .formulario textarea:focus {
	border: 0.1em solid #B4B4B4;
	border-radius: 0px;
	color: #000;
	background: #fff;
}
footer .contacto .formulario input[type="text"],
footer .contacto .formulario input[type="email"]{
	width: 100%; 
}
footer .contacto .formulario .boton {
	background-color: transparent;
	color: #66686b;
	font-weight: 800;
	font-size: 4.5em;
	border: none;
	cursor: pointer;
}
footer .contacto .formulario .boton:hover {
	color: #ff6b21;
}

/*------------------- C I E R R E -----------------*/

.cierre {
	background: #23231f;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.contenedor5 { 
	width: 85%;
	max-width: 145em;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	padding: 2.5em 0em;
}
.contenedor5 img{
	opacity: .4;
}
.copy{
	color: #a3a3a3;
	font-size: 1.2em;
	font-weight: 300;
	margin-right: 3em;	
}
.logocierre {
	cursor: pointer;
}

                 /* M E D I A  Q U E R I S */

@media screen and (max-width: 1411px){ 
	.contenedor-trabajos { 
	justify-content: flex-start;
	width: 85%;
	max-width: 104em;}
}
@media screen and (max-width: 1167px){
	.tituloysubtitulo{
		flex-direction: column;
		align-items: flex-start;
	}
	.subtitulo-impacto{
		width: 100%;
		margin-top: 2em;
		margin-bottom: 0em;
	}
	.flecha-dorada{
		margin-left: 1em;
	}
	.texto-impacto{
		max-width: 38em;
	}
}
@media screen and (max-width: 900px){
	.arriba{
		visibility: hidden;}
	.cabecera {
		display: none;}
	.logob {
		margin-left: .2em;
		margin-top: .9em; 
		margin-bottom: .7em;}
	.portafolio{
	margin-top: 2em;
}
}
@media screen and (max-width: 768px){ 
	body {font-family:  "Montserrat", Sans-serif; font-size: 9px;}
	.conciba {
		padding: 10em 0em;}
	.nuestros-servicios{
		padding: 10em 0em;}
	.contacto{
		padding: 10em 0em;}
	.banner{
	background: url('../img/fondo.jpg')#010101;
	}
	.impacto {
 	background: url('../img/impacto2.jpg') #464646;
 	}
}
@media screen and (max-width: 646px){
	.fondo-gris {
		background: url('../img/neutro.svg') #66686b;}
.fondo-gris2 {
		background: url('../img/neutro.svg') #66686b;}
}
	
@media screen and (max-width: 520px){
	.contenedor-info-contacto {
		flex-direction: column-reverse;}
	.contenedor-intro-contacto {
		width: 100%;}
	footer .contacto .formulario{
		width: 100%; 
		margin-bottom: 4em;}
	footer .contacto .texto-contacto {
		width: 93%; 
		margin-bottom: 2.5em;}
	.contenedor-servicio {
		flex-direction: column;
		padding-top: 2em;}
	.iconito {
		width: 26.5em;
	}
	.invisible {
		display: none;}
	.info-servicios {
		width: 100%; 
		margin-top: 6em;
		margin-bottom: 13.5em;
	}
	.detalle {
		padding-left: 0em;}
	.titulo-principal{
	width: 100%;}
	.gracias { width: 70%;}
}
@media screen and (max-width: 414px){
	.contenedor-trabajos .trabajo{
		margin: 0em;}
	.trabajoytexto{
		width: 100%;}
	.descrip-cion{
		margin-top: .5em;
		font-size: 1.5em;}
	.imagen-clientes{
		height: 33em; 
		background-size: cover;}
	.imagen-contacto{
		height: 28em; 
		background-size: cover;}
	.titulo-principal{
		font-size: 3.5em;}	
	.titulo-principal img{
		width: 5em;}
	.fondo-gris2{
		background-size: cover;}
	.titulo-servicio{
		width: 100%;}
	.intro-servicio{
		width: 100%;}
	.texto-servicio{
		width: 97%;
		font-size: 1.5em;
		font-weight: 400;
	}
	.titulo-impacto{
		border: 1px solid #fff;
	}
}
@media screen and (max-width: 375px){
	.titulo-principal{
		width: 95%;}
	.titulo{
		font-size: 3.2em;}
	.titulo-impacto p{
		padding: 1em .5em 1em 1em;
	}
	.flecha-dorada{
		margin-right: .6em;
	}
}
@media screen and (max-width: 320px){
	.titulo-impacto p{
		font-size: 3.2em;
	}
}