*{
	margin: 0;
	padding: 0;
}
body{
	box-sizing: border-box;
	font-family: source, arial,sans-serif;

}
@font-face {
    font-family: source;
    src: url('fuentes/sourcesanspro-webfont.ttf') format('ttf'),
 /*         url('fuentes/sourcesanspro-webfont.woff2') format('woff2'),
 url('fuentes/sourcesanspro-webfont.woff') format('woff'),
 url('fuentes/sourcesanspro-webfont.svg') format('svg'); */
     }

@font-face {
    font-family: abel;
    src: url('fuentes/abel-regular-webfont.woff2') format('woff2'),
         url('fuentes/abel-regular-webfont.woff') format('woff'),
         url('fuentes/abel-regular-webfont.svg') format('svg');
     }


     header{
     	background-image: url(img/reciUnoDos.jpg);
     	background-position: center;
     	background-repeat: no-repeat;
     	background-size: cover;
     	height: 24em;
     	width: 100%;
     	color: #fff;
     }
     .nombre > p{
     	color: #FFCC00;
     	position: absolute;
     	right: 6em;
     	top:.1em;
     	font-size: 1.4em;

     }
     .nombre >p >img{
     	padding-right: 10px;
     }
     .nombre > h1{
     	background:rgba(29,43,88,0.8);
     	font-size: 3em;
     	padding-left: 2em;
     	line-height: 1.3em;
     	font-weight: lighter;
     }
     .titulo{
    	margin-top: 2.5em;
     	text-align: center;

     }
     .titulo > h2{
     	font-size: 2.5em;
     	font-weight: lighter;
     }
     .titulo > h3{
     	font-family: abel; 
     	font-size: 1.8em;
     	margin-top: .2em;
     	margin-bottom: 1.5em;
     	font-weight: lighter;
     }

   /*   iconos */
   section{
   	text-align: center;
   }

   .info{
   	display: flex;
   	width: 80%;
   	justify-content: space-around;
   	margin: auto;
   	margin-top: 2em;
   	margin-bottom: 2em;
	text-align: center;
   }
   .info_icon{
   	width: 30%;

   }
   .info_icon > img{
   	border:3px solid #FFD45E;
   	border-radius: 10px;
   	padding: 20px;
   }
   .info_icon > h2{
   	color: #192652;
    padding-top: .5em;
    padding-bottom: .5em;
   }

   .info_icon > h4,  .tituServi > h4{
   	color: #404040;
   	line-height: 1.3em;
   	font-weight: lighter;
   }

 /*   telefono */
.tel{
	margin-top: 2.5em;
}

 .titulo > p{
 	background: #DCA715;
 	border-radius: 40px;
 	padding: 0 40px;
 	display: inline-block;
 	font-size:2.5em;
 	margin-top: .2em;
 	-webkit-box-shadow: 0px 0px 10px  ##7C7D7E;
    -moz-box-shadow: 0px 0px 10px  ##7C7D7E;
     box-shadow: 0px 0px 10px  ##7C7D7E;

 }
 .titulo > h4{
 	font-weight: lighter;
 	padding-top: 2em;
 }

 .tel > h2{
 	background: #4E739E;
 	color: white;
 	font-size: 2.2em;
 	line-height: 1.8em;
 	margin-top: 1em;
 	font-weight: lighter;
 }

/*  empresa */

.empresa {
	background: #13171A;
	display: flex;
	justify-content:center;
	flex-direction: column;
	padding-bottom: 2em;
	padding-top: 2em;



}
.parrafo> h2{
	color: #fff;
	font-family: abel;
	padding-top: .3em;
	font-size: 3em;

}
.amari{
	width: 1em;
	height: 10em;
	margin-top: 8em;
	background:#FFCC00;
}
.conte{
	 margin-top: 3em;
	display: flex;
	justify-content: center;
	flex: 1 1 100%;
	padding: 0 20%;
}
 .img{
	margin-top: 2em;
	height: 23em;
	width: 50%;
	background: #95989A;

}
.img > img{
	width: 100%;
	height: 100%;
}
.parrafo{
	 min-height: 27em;
	width: 50%;
	background: #273339;

}
.parrafo > p{
	color: #BBBBBB;
	text-align: initial;
	padding: .5em 2em;
	line-height: 1.5em;
}
.parrafo > p > strong{
	color: #fff;
}


/* servicios */
.servicios{
	display: flex;
	justify-content: space-between;
	margin: auto;
	padding: 3em;
	flex-wrap: wrap;
	background-image: url(img/fondoServ.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}
.serv{
	border:1px solid #fff; 
	width: 18%;
	padding: 1.5em;
	background: #fff;
	-webkit-box-shadow: 0px 0px 26px 1px #707070;
    -moz-box-shadow: 0px 0px 26px 1px #707070;
     box-shadow: 0px 0px 26px 1px #707070; 
}
.serv:hover{
	-webkit-box-shadow: 0px 0px 32px 1px #404040;
    -moz-box-shadow: 0px 0px 32px 1px #404040;
     box-shadow: 0px 0px 32px 1px #404040;

}
.tituServi{
	width: 100%;
	margin-bottom: 5em;

	 

}
.tituServi > h3{
	color: #FFCC00;
	font-family: abel;
	font-size: 1.8em;
	text-shadow: 0px 0px 1px  #707070 ; 
	font-weight: 800;

}
.tituServi > h4{
	font-weight: lighter;
}
.tituServi > h2{
	font-size: 2em;
	color: #192652;
	line-height: 1.2em;
}

.serv >ul> li{
	text-align: left;
}
ul {
    list-style: none; /* Remove HTML bullets */
    padding: 0;
    margin: 0;
}
.serv >ul >li{
	padding: 5px;
}
 li > span {
    
    padding-right: 8px;
    color: #FFCC00;
    font-weight: 400;
    font-size: 1.5em;


} 
.serv >h4{
	background: #172141;
	color: #fff;
	line-height: 2.5em;
	font-weight: lighter;
}
/* footer */

footer{
	background: #455058;
	color: #fff;
	height: 14em;
	margin-top: 1em;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;


	
}
footer > p{
	width: 30%;
	line-height: 1.5em;
}
footer > .reci{
	padding-left: 10%;
}

footer > .copy{
	width: 100%;
	text-align: center;
	padding-top: 2em;
}
footer > p > img{
	margin-right: 1em;
}

@media screen and (max-width: 1029px){
	.conte{
		padding: 0 10%;
	}
}

@media screen and (max-width: 900px){
	.servicios{
		padding: 3em 1em;
	}
	.serv{
		padding: 1.5em 1em;
		width: 20%;
	}
}
@media screen and (max-width: 768px){
	.nombre > p{
		display: none;
	}
	.nombre >h1{
		text-align: center;
		padding-left: 0;
	}
	.serv{
		width: 40%;
		margin-bottom: 2em;

	}
	.servicios{
		justify-content: space-around;
	}
	footer > .reci{
	padding-left: 6%;
	}
	.parrafo > p{
	padding: .5em 1em;
	}

	.conte{

	padding: 0 5%;
	}
	footer > p{
		padding-right: 6%;
	}
	.titulo > h2{
		padding: 0 1em;
	}
	.titulo > h3{
		margin-bottom: .5em;
	}
}

@media screen and (max-width: 500px){

	.info{
		flex-wrap: wrap;
	}
	.info_icon{
		width: 100%;
		margin-bottom: 2em;
	}
	.tel >h2 > span{
		display: none;
	}
	.titulo > h3{
		display: none;
	}
	.titulo > h2{
		font-size: 2em;
	}


	.amari{
    display: none;
}
.conte{
	margin-top: 0;
	margin-bottom: 3em;
	 flex-wrap: wrap;
	padding: 0 ;
}
 .img{
	margin-top: 0;
	height: 23em;
	width: 100%;


}

.parrafo{
	 min-height: 20em;
	width: 100%;


}

.empresa {

	padding-bottom: 0;
	padding-top: 0;

}
.serv{
		width: 90%;
}
footer > p{
		padding-right: 10px;
		width: 40%;
	}

.servicios{
	padding-bottom: 0;
}
}