@media (max-width: 1050px){
	.card{
		margin: 25px -10px 20px 15px;
		width: 20%;
		/*min-height: auto;*/
		
	/*	margin: 0px auto;
		width: 24.2%;
Nota: ademas quitando el margin-left del card:first-child*/
	}
}
@media (max-width: 1040px){
/*	.services{
		width: 100%;
		margin: 0px auto;
	}
	#allcards{
		float: none;
		height: 40px;
		width: 80%;
		margin: 0px auto;
	} 

(pendiente) reescribir codigo para centrar de forma precisa y automatica
las cards de servicios con el metodo anterior que coincide con el usado
para centrar el menu en el tramo de 660px para abajo.
	*/
	
	
	.card:first-child{  
		margin-left: 8%;
	}
}

@media (max-width: 1009px){
	#banner h1{
		font-size: 33px;
		word-spacing: 5px;
	}
	#logo img{
		height: 70px;
	}
}


@media (max-width: 860px){
	#menu ul li{
		font-size: 20px;
		margin: 0px 15px 0px 15px;
	}
}

@media (max-width: 830px){
	.servicio{
		font-size: 17px;
	}
	.description{
		font-size: 14px;
	}
}

@media (max-width: 775px){
	#menu ul li{
		margin: 0px 10px 0px 10px;
	}
	#banner h1{
		font-size: 28px;
		word-spacing: 5px;
	}
	#logo img{
		height: 60px;
	}
}

@media (max-width: 690px){
	#logo img{
		height: 50px;
	}
	#about img{
	height: 350px;
	margin: 23px 20px 0px 35px;	
}
	#about p{
		font-size: 17px;
		line-height: 26px;
		margin: 30px 140px 0px 320px;
	}
}

@media(max-width: 660px){
	#logo{
		margin: 0px auto;
		margin-left: -10px;
		margin-top: 10px;
		width: 100%;
		height: 10%;
	}
	
	.header-wrap{
		width: 100%;
		margin: 0px auto;
		margin-top: 66px;
	}
	#menu{
		float: none;
		height: 35px;
		margin-top: 10px;
	}
	#menu ul{
		width: 80%;
		margin: 0px auto;
	}
	#menu ul li{
		font-size: 20px;
		line-height: 30px;
		letter-spacing: 0px;
		width: 23%;
		margin: 0px auto;
		text-align: center;
	}
/* (pendiente) revisar que los enlaces coincidan con las letras.*/
	#banner h1{
		font-size: 25px;
		letter-spacing: 0px;
		word-spacing: 5px;
	}
	
}

@media (max-width: 600px){
	#banner h1{
		line-height: 28px;
		padding: 15px;
		margin-bottom: -15px;
	}
	.card{
		width:40%;
		margin: 30px -10px 0px 15px;
	}
	.central-card{
		width: 40%;
		margin-top: 70px;	
	}
	.third-card{
		margin-top: -5px;
		margin-left: 8%;
	}
	.fourth-card{
		margin-top: 40px;
	}
	#about{
		width:60%;
		margin-bottom: 275px;
	}
	#about img{
		clear: both;
		display: block;
		float: none;
		margin: 0px auto;
		margin-bottom: 50px;
	}
	#about p{
		float: none;
		clear: both;
		margin: 0px auto;
		line-height: 28px;
		font-size:  24px;
	}
	
	#contacto{
		margin-bottom:50px;
	}
}

@media (max-width: 560px){
	#about p{
		font-size: 22px;
	}
}

@media (max-width: 515px){
	#about p{
		font-size: 21px;
	}
}

@media (max-width: 492px){
	#about p{
		font-size: 20px;
	}
	body{
		background-image: url('../img/curre3img202405.jpg');
	}
}

@media (max-width: 467px){
	#about p{
		font-size: 19px;
	}
}

@media (max-width: 445px){
	#about p{
		font-size: 18px;
	}
	#contacto{
		margin-top:100px;
	}
}

@media (max-width: 435px){
	#about img{
		height: 320px;
	}
	#about p{
		font-size: 17px;
	}
}

@media (max-width: 400px){
	#allcards{
		width: 100%;
		margin: 0px auto;
	}
	#about{
		width: 80%;
		margin: 0px auto;
	}
	#about img{
		float: none;
		height: 330px;
	}
	#about p{
		width: 80%;
		font-size: 17px;
		margin: 0px auto;
	}
	#contacto{
		margin-top: 365px;
		margin-bottom: 0px;
	}
	.contactoo img{
		height: 50px;
	}
	.contactoo p{
		font-size: 25px;
	}
}