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


	#plan,
	#sobre,
	#intro { background-size: 45% auto }


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


	#header,
	#content,
	#content > section,
	#footer { width: 740px }


	#header {
		background-position: 0 -11px;
		height: 140px;
	}


	#logo a {
		background-size: auto 100%;
		width: 182px; height: 80px;
		top: 7px;
	}


	#nav > ul {
		height: 44px;
		top: 96px; left: -15px;
	}
		#nav > ul > li { line-height: 44px }

			#nav > ul > li > a { padding: 0 15px }


	#language ul { top: 96px }

	#language.show ul { height: 44px }

		#language ul li { line-height: 44px }

			#language ul li a { width: 44px }


	#slider div.slides div.slide figure a img {
		margin: 0 -10%;
		width: 120%;
	}

	#slider div.slides div.slide h2 {
		font-size: 28px;
		line-height: 30px;
	}


	#features h2 { font-size: 40px }

	#features div { padding: 0 25px }


	#proceso p { width: 100% }

	#plan,
	#sobre,
	#intro { background-size: auto 100% }

		#sobre p,
		#evolucion p { width: 100% }


	#servicios div.servicios div { width: 177px }
	#servicios div.servicios div + div { margin-left: 10px }

		#servicios div.servicios div h4 {
			font-size: 22px;
			line-height: 24px;
			padding: 10px 0;
		}
		#servicios div.servicios div p {
			font-size: 12px;
			line-height: 18px;
			padding: 0 10px 15px;
		}


	#intro p { width: 100% }


	#clientes aside { padding: 40px 30px }


	#final p {
		font-size: 18px;
		line-height: 24px;
	}


	#contacto form {
		margin-left: 493px;
		width: 246px;
	}
		#contacto form h3 { font-size: 34px }

		#contacto form h4,
		#contacto form ol li input.text,
		#contacto form ol li select.select,
		#contacto form ol li textarea.textarea,
		#contacto form ol li span.file span,
		#contacto form p.submit input.submit { font-size: 15px }

		#contacto form ol li span.file input.text { padding-right: 95px }

		#contacto form ol li span.file input.file { height: 32px }

		#contacto form ol li span.file span { padding: 5px 12px }


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


	#header,
	#content,
	#content > section,
	#footer { width: 460px }


	#header {
		background-position: 0 -21px;
		height: 130px;
	}


	#logo a {
		background-size: auto 100%;
		width: 149px; height: 65px;
		top: 9px;
	}


	#nav { text-align: right }

		#nav h3 { display: inline-block }

		#nav > ul {
			background: #d44c1d;
			display: none;
			width: 150px; height: auto;
			top: 130px;
		}
		#nav.active > ul { display: block }

			#nav > ul > li,
			#nav > ul > li > a {
				float: none;
				text-align: left;
			}
			#nav > ul > li > a:hover,
			#nav > ul > li.current > a { background: none }


	#phone p { top: 20px }


	#language { text-align: right }

		#language h3 { display: inline-block }

		#language > ul {
			display: none;
			width: 44px; height: auto;
			top: 130px;
		}
		#language.active > ul { display: block }

			#language > ul > li,
			#language > ul > li > a { float: none }


	#slider div.slides div.slide figure a img {
		margin: 0 -25%;
		width: 150%;
	}

	#slider div.slides div.slide h2 {
		font-size: 22px;
		line-height: 24px;
		bottom: 15px;
	}

	#slider nav.pager a {
		background-size: 23px auto;
		width: 23px; height: 36px;
		left: 5px;
	}
	#slider nav.pager a.next {
		background-position: right -41px;
		right: 5px;
	}

	#slider nav.pager a:hover { width: 28px }


	#features h2 {
		font-size: 34px;
		line-height: 38px;
	}

	#features div {
		padding: 0 70px;
		width: 100%;
	}
	#features div + div { margin-top: 35px }

		#features div figure {
			margin-bottom: 10px;
			height: auto;
		}
			#features div figure img { max-width: 40% }


	#content section h3 { font-size: 32px }


	#suceso div {
		padding: 0 70px;
		width: 100%;
	}
	#suceso div + div { margin-top: 35px }

		#suceso div figure {
			margin-bottom: 5px;
			position: static;
		}
		#suceso div h4 { font-size: 44px }


	#servicios div.servicios div { width: 100% }
	#servicios div.servicios div + div { margin-left: 0 }
	#servicios div.servicios div.show + div { margin-top: 20px }

		#servicios div.servicios div h4 {
			font-size: 28px;
			line-height: 30px;
			padding: 10px 15px;
		}
		#servicios div.servicios div p {
			font-size: 14px;
			line-height: 24px;
			padding: 0 15px 15px;
		}


		#timeline figure {
			padding-bottom: 20px;
			overflow-x: scroll;
			width: 460px;
		}
			#timeline figure img { max-width: 970px }


	#clientes { background: #e76d30 }

		#clientes article {
			float: none;
			width: 100%;
		}
			#clientes article h3 { width: 100% }

		#clientes aside {
			float: none;
			padding: 0;
			width: 100%;
		}
			#clientes aside figure {
				background: #000;
				text-align: center;
				margin: 0 -100%;
				padding: 40px 0;
			}
				#clientes aside figure img { max-width: 460px }


		#final p { font-size: 20px }


	#map { height: 400px }


	#contacto form {
		margin: 35px 0 0;
		width: 100%;
		position: static;
	}


	#footer {
		padding-top: 20px;
		padding-bottom: 20px;
	}
		#footer > section {
			text-align: center;
			margin: 20px 0;
			padding: 0;
			width: 100% !important;
		}
		#footer > section:nth-child(2):before,
		#footer > section:nth-child(2):after { display: none }

			#footer section h5,
			#footer section div h6 { margin-bottom: 5px }

			#footer section nav { margin-bottom: 20px }

				#footer section nav ul { overflow: hidden }

					#footer section nav ul li { display: inline-block }
					#footer section nav ul li + li { margin-left: 15px }

						#footer section nav ul li a { display: inline-block }

		#footer > section > div { width: 100% }

		#footer > section > div + div {
			margin-top: 30px;
			padding-left: 0;
		}

			#footer section div h6 { margin: 10px 0 0 }


}
@media screen and (max-width: 730px) and (max-height: 420px) {


	#map { height: 220px }


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


	#header,
	#content,
	#content > section,
	#footer { width: 300px }


	#phone p {
		background: none;
		color: #d44c1d;
		font-size: 12px;
		line-height: 14px;
		text-align: right;
		padding-left: 0;
		width: 120px;
	}
		#phone p strong {
			font-size: 15px;
			line-height: 20px;
		}


	#slider div.slides div.slide figure a img {
		margin: 0 -55%;
		width: 210%;
	}

	#slider div.slides div.slide h2 {
		font-size: 20px;
		line-height: 22px;
	}


	#features div figure img { max-width: 80% }


	#servicios { padding-bottom: 15px }


	#timeline figure { width: 300px }


	#clientes aside figure img { max-width: 300px }


	#footer section nav ul li + li { margin-left: 10px }

	#footer section p strong { display: block }


}