@media screen and (min-width: 1180px) {

	#main-header section {
		max-width: 850px;
	}

	#clients .content li {
		width: 33.333%;
	}

}



@media screen and (min-width: 1660px) {

	/* Services */

	#services .content > li {
		width: 30%;
		float: left;
		margin-left: 3.333%;
		padding-left: 0;
		padding-top: 170px;
	}

	#services > ul {
		padding-bottom: 100px;
	}

	.service-info .title {
		text-align: center;
	}

	#websites {
		margin-bottom: 0;
		margin-top: 0;
	}

	#apps {
		background: url(../images/service-apps-hd.svg) top center no-repeat;
		margin-left: 0!important;
	}

	#websites {
		background: url(../images/service-web-hd.svg) top center no-repeat;
	}

	#consulting {
		background: url(../images/service-consult-hd.svg) top center no-repeat;
	}

	/* Clients */

	#clients .content li {
		width: 25%;
	}

	/* About */

	#propios > ul:before,
	#propios > ul:after,
	#reconocimientos > ul:before,
	#reconocimientos > ul:after,
	#services > ul:before,
	#services > ul:after { content: "";display: table; }
		
	#propios > ul:after,
	#reconocimientos > ul:after,
	#services > ul:after { clear: both; }
	
	#propios > ul,
	#reconocimientos > ul,
	#services > ul { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }

	#propios ul li,
	#reconocimientos ul li {
		float: left;
		width: 45%;
	}

	#waqay {
		margin-left: 5%;
		margin-top: 0;
	}

}



@media screen and (min-width: 2200px) {

	/* Header */

	#main-header {
		height: 900px;
	}

	#main-header section {
		height: 100%;
	}

	/* Clients */

	#clients .content li {
		width: 20%;
	}

}

@media screen and (min-width: 2500px) {

	#about .content:before,
	#about .content:after { content: "";display: table; }

	#about .content:after { clear: both; }

	#about .content { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }

	#about .content {
		padding-top: 100px;
	}

	#propios, #reconocimientos {
		float: left;
		margin-left: 5%;
		width: 45%;
	}

	#propios {
		margin-left: 0;
	}

}



@media screen and (min-width: 1025px) {
 
.introduction {
	max-width: 360px;
}

.content {
	float: none;
	margin-left: 360px;
	width: auto;
}

}



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

#contact #contact-email,
#contact #contact-phone {
	float: none;
	width: 100%;
}

#contact .raised {
	display: block;
	float: none;
	margin: 20px auto 0;
}

}



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

.introduction {
	padding: 30px 20px 35px;
	width: 40%;
}

.content {
	padding: 30px 20px;
	width: 60%;
}

/* Header */

#main-header section {
	width: 100%;
}

/* Services */

.service-info {
	padding-left: 0;
	padding-top: 190px;
	max-width: none;
}

.service-info .title {
	text-align: center;
}

#apps {
	background: url(../images/service-apps-hd.svg) top center no-repeat;
}

#websites {
	background: url(../images/service-web-hd.svg) top center no-repeat;
}

#consulting {
	background: url(../images/service-consult-hd.svg) top center no-repeat;
}

/* Clients */

#clients .content li p {
	font-size: 14px;
}

/* About */

#propios ul li,
#reconocimientos ul li {
	max-width: none;
	padding-left: 0;
	padding-top: 120px;
}

#propios ul li a {
	margin: 0 auto;
	display: block!important;
	width: 135px!important;	
}

#haces {
	background: url(../images/icon-lahaces-2x.png) top center no-repeat;
	background-size: 100px;
}

#waqay {
	background: url(../images/icon-waqay-2x.png) top center no-repeat;
	background-size: 100px;
	margin-top: 70px;
}

#appdate {
	background: url(../images/logo-appdate-2x.png) top center no-repeat;
	background-size: 100px;
}

#about .content section h3 {
	text-align: center;
}

/* Contact */

#contact .raised {
	display: block;
	float: none;
	margin: -20px auto 0;
}

/* Footer */

footer {
	width: 40%;
}

}



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

.introduction {
	width: 45%;
}

.content {
	width: 55%;
}

/* Footer */

footer {
	width: 45%;
}

}



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

/* Clients */

#clients .content li {
	float: none;
	position: static!important;
	width: 100%;
}

}



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

.introduction,
.content {
	width: 50%;
}

/* Footer */

footer {
	width: 50%;
}

}



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

.introduction,
.content {
	padding: 50px;
	width: 100%;
}

#clients .content {
	background-color: transparent;
}

/* Clients */

#clients .content li {
	float: left;
	position: absolute!important;
	width: 50%;
}

#contact .content {
	background: #f5c13f url(../images/detalle.svg) left bottom no-repeat;
	background-size: 300px;
	padding-bottom: 150px;
}

/* Footer */

footer {
	width: 100%;
}

footer p {
	text-align: center;
}

}



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

#main-header section {
	padding-left: 30px;
	padding-right: 30px;
}

.introduction,
.content {
	padding: 50px 30px;
}

/* Clients */

#clients .content li {
	padding: 0 10px 20px;
}

}



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

/* Header */

#main-header section {
	padding: 50px 30px;
}

#logotipo {
	height: 200px;
	width: 250px;
}

#main-header blockquote {
	font-size: 30px;
	margin-top: 50px;
	max-width: 360px;
}

#main-header p {
	font-size: 20px;
}
.introduction h2 {
	font-size: 25px;
}

.title {
	font-size: 22px;
}


#clients .content li h2 {
	font-size: 18px;
}

}



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

.introduction,
.content {
	padding: 50px 20px;
}

#main-header blockquote {
	font-size: 22px;
	max-width: 240px;
}

#main-header p {
	font-size: 18px;
}

.contact-mail {
	background-size: 40px;
	padding-left: 50px;
}

footer {
	padding: 0 20px;
}

}