/*---------------------------------------------------------------------

		RESET

---------------------------------------------------------------------*/

* { border: 0 none; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; padding: 0; outline: 0; vertical-align: baseline }
:focus { outline: 0 }
::-moz-focus-inner { border: 0; padding: 0 }
html { overflow-x: hidden }
body { background: #fff; color: #000; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: normal }
ol, ul { list-style: none }
table { border-collapse: collapse; border-spacing: 0; width: 100% }
caption, th, td { font-weight: normal; text-align: left }
blockquote:before, blockquote:after, q:before, q:after { content: "" }
blockquote, q { quotes: "" "" }
textarea { overflow: auto; resize: none }
::-moz-placeholder { opacity: 1 }
::-webkit-input-placeholder { opacity: 1 }
:-ms-input-placeholder { opacity: 1 }





/*---------------------------------------------------------------------

		TAGS

---------------------------------------------------------------------*/

body {
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 22px;
}

em { font-style: italic }
strong { font-weight: 700 }

a,
a:link,
a:visited {
	color: #fff;
	text-decoration: none;
	transition: background-color .3s, border-color .3s, color .3s, opacity .3s, transform .3s, margin .3s, padding .3s;
		-webkit-transition: background-color .3s, border-color .3s, color .3s, opacity .3s, -webkit-transform .3s, margin .3s, padding .3s;
}
a:hover,
a:active { color: #fff }

::selection {
	background: rgba(0,0,0,.5);
	color: #fff;
}
::-moz-selection {
	background: rgba(0,0,0,.5);
	color: #fff;
}





/*---------------------------------------------------------------------

		BASE LAYOUT

---------------------------------------------------------------------*/

#header,
#content,
#content > section,
#footer {
	float: left;
	clear: both;
	padding-left: 100%;
	padding-right: 100%;
	width: 960px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
}

#header {
	background: #d44c1d url(../img/bg_header.png) repeat-x;
	height: 171px;
	z-index: 50;
}

#content {
	background: #e76d30;
	padding-bottom: 30px;
}

#footer { background: #333 }





/*---------------------------------------------------------------------

		SECTIONS

---------------------------------------------------------------------*/


/*	Header
-------------------------------*/

#logo {
	line-height: 0;
	position: relative;
}
	#logo a {
		background: url(../img/logo.png) no-repeat;
		display: block;
		text-indent: -9999px;
		width: 204px; height: 90px;
		position: absolute;
		top: 9px; left: 0;
	}


#nav {
	line-height: 0;
	position: relative;
}

	#nav h3 {
		cursor: pointer;
		display: none;
		font-size: 14px;
		font-weight: 400;
		padding-right: 20px;
		position: absolute;
		top: 98px; left: 0;
	}
	#nav h3:after {
		box-shadow: #fff 0 5px 0 1px,
					#fff 0 10px 0 1px,
					#fff 0 15px 0 1px;
		content: "";
		width: 12px;
		position: absolute;
		top: 0; right: 0;
	}

	#nav > ul {
		height: 64px;
		position: absolute;
		top: 107px; left: -18px;
	}
		#nav > ul > li {
			float: left;
			line-height: 64px;
			position: relative;
		}
			#nav > ul > li > a {
				float: left;
				display: block;
				color: #fff;
				font-size: 14px;
				font-weight: 400;
				letter-spacing: .025em;
				padding: 0 18px;
			}
			#nav > ul > li > a:hover { background: rgba(0,0,0,.2) }
			#nav > ul > li.current > a { background: #333 }


#phone {
	line-height: 0;
	position: relative;
}
	#phone p {
		background: url(../img/ico_phone.png) no-repeat 0 8px;
		color: #d44c1d;
		font-size: 12px;
		font-weight: 400;
		line-height: 20px;
		padding: 0 0 0 40px;
		width: 155px;
		position: absolute;
		top: 29px; right: 0;
	}
		#phone p strong {
			display: block;
			font-size: 25px;
			font-weight: normal;
			line-height: 22px;
		}


#language {
	line-height: 0;
	position: relative;
}
	#language h3 {
		cursor: pointer;
		display: none;
		font-size: 14px;
		font-weight: 400;
		padding-right: 20px;
		position: absolute;
		top: 98px; right: 0;
	}
	#language h3:after {
		box-shadow: #fff 0 5px 0 1px,
					#fff 0 10px 0 1px,
					#fff 0 15px 0 1px;
		content: "";
		width: 12px;
		position: absolute;
		top: 0; right: 0;
	}

	#language ul {
		height: 64px;
		position: absolute;
		top: 107px; right: 0;
	}
		#language ul li {
			float: left;
			line-height: 64px;
		}
			#language ul li a {
				float: left;
				background: #eee;
				color: #333;
				display: block;
				font-size: 14px;
				font-weight: 400;
				letter-spacing: .025em;
				text-align: center;
				width: 64px;
			}
			#language ul li a:hover { background: #ccc }

			#language ul li.current a {
				background: #999;
				color: #fff;
			}



/*	Home
-------------------------------*/

#slider {
	float: left;
	clear: both;
	width: 100%;
	position: relative;
	z-index: 10;
}
	#slider div.slides { /*-*/ }

		#slider div.slides div.slide { width: 100% }

			#slider div.slides div.slide figure { /*-*/ }

				#slider div.slides div.slide figure a { /*-*/ }

					#slider div.slides div.slide figure a img {
						display: block;
						width: 100%; height: auto;
					}

			#slider div.slides div.slide h2 {
				font-size: 36px;
				font-weight: 300;
				line-height: 34px;
				text-align: center;
				width: 80%;
				position: absolute;
				bottom: 25px; left: 50%;
				transform: translateX(-50%);
					-webkit-transform: translateX(-50%);
					-ms-transform: translateX(-50%);
			}

	#slider nav.pager { display: none }

		#slider nav.pager a {
			background: url(../img/ico_pager.png) no-repeat;
			display: block;
			text-indent: -9999px;
			width: 33px; height: 51px;
			position: absolute;
			top: 50%; left: 15px;
			z-index: 999;
			transform: translateY(-50%);
				-webkit-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
		}
		#slider nav.pager a.next {
			background-position: right -59px;
			left: auto; right: 15px;
		}

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

		#slider nav.pager a.prev:hover {
			transform: translate(-5px,-50%);
				-webkit-transform: translate(-5px,-50%);
				-ms-transform: translate(-5px,-50%);
		}
		#slider nav.pager a.next:hover {
			transform: translate(5px,-50%);
				-webkit-transform: translate(5px,-50%);
				-ms-transform: translate(5px,-50%);
		}


#features { padding: 35px 0 }

	#features h2 {
		font-size: 48px;
		font-weight: 300;
		line-height: 52px;
		text-align: center;
		margin: 0 0 35px;
	}
	#features h3 {
		text-align: center;
		margin: 0 0 35px;
	}

	#features div {
		float: left;
		box-sizing: border-box;
			-moz-box-sizing: border-box;
		text-align: center;
		padding: 0 40px;
		width: 33.33333%;
	}
		#features div figure {
			margin: 0 0 20px;
			overflow: hidden;
			width: 100%; height: 128px;
		}
			#features div figure img {
				display: inline-block;
				max-width: 100%; height: auto;
			}

		#features div p { /*-*/ }



/*	Content
-------------------------------*/

#content section h3 {
	font-size: 36px;
	font-weight: 300;
	line-height: 36px;
}


#proceso { padding: 35px 0 }

	#proceso h3 { margin: 0 0 20px }

	#proceso p { width: 80% }


#plan {
	background: url(../img/bg_plan.jpg) no-repeat center center;
	background-size: 60% auto;
	padding: 35px 0;
}
	#plan h3 { margin: 0 0 20px }

	#plan ul { /*-*/ }

		#plan ul li {
			padding: 0 0 0 12px;
			position: relative;
		}
		#plan ul li:before {
			background: #fff;
			border-radius: 50%;
			content: "";
			width: 4px; height: 4px;
			position: absolute;
			top: 10px; left: 0;
		}
		#plan ul li + li { margin-top: 15px }


#suceso {
	background: #fff;
	padding: 40px 0;
}
	#suceso h3 {
		color: #333;
		margin: 0 0 30px;
	}

	#suceso div {
		float: left;
		box-sizing: border-box;
			-moz-box-sizing: border-box;
		color: #333;
		text-align: center;
		padding: 0 30px;
		width: 33.33333%;
	}
		#suceso div figure {
			margin: 0 0 15px;
			overflow: hidden;
			width: 100%; height: 105px;
		}
			#suceso div figure img {
				display: inline-block;
				max-width: 100%; height: 105px;
			}

		#suceso div h4 {
			font-size: 54px;
			font-weight: 900;
			line-height: 68px;
		}
		#suceso div p { font-weight: 400 }


#servicios { padding: 35px 0 }

	#servicios h3 { margin: 0 0 20px }

	#servicios div.servicios { /*-*/ }

		#servicios div.servicios div {
			float: left;
			box-sizing: border-box;
				-moz-box-sizing: border-box;
			color: #333;
			cursor: pointer;
			text-align: center;
			width: 225px;
			position: relative;
		}
		#servicios div.servicios div + div { margin-left: 20px }

			#servicios div.servicios div figure {
				background: #24b5e1;
				overflow: hidden;
				height: 124px;
				position: relative;
			}
			#servicios div.servicios div:nth-child(2) figure { background: #fec02f }
			#servicios div.servicios div:nth-child(3) figure { background: #5c5044 }
			#servicios div.servicios div:nth-child(4) figure { background: #50bf73 }

				#servicios div.servicios div figure img {
					display: block;
					max-width: 100%; height: auto;
					position: absolute;
					top: 50%; left: 50%;
					transform: translate(-50%,-50%);
						-webkit-transform: translate(-50%,-50%);
						-ms-transform: translate(-50%,-50%);
				}

			#servicios div.servicios div h4 {
				color: #fff;
				font-size: 28px;
				font-weight: 400;
				line-height: 28px;
				padding: 10px 12px;
			}
			#servicios div.servicios div p {
				background: #fff;
				font-size: 14px;
				line-height: 20px;
				text-align: left;
				padding: 0 12px 15px;
				opacity: 0;
				overflow: hidden;
				height: 0;
				transition: opacity .3s;
					-webkit-transition: opacity .3s;
			}

			#servicios div.servicios div.show h4 {
				background: #fff;
				color: #333;
			}
			#servicios div.servicios div.show p {
				opacity: 1;
				height: auto;
			}


#sobre {
	background: url(../img/bg_sobre.jpg) no-repeat center center;
	background-size: 60% auto;
	padding: 35px 0;
}
	#sobre h3 { margin: 0 0 20px }

	#sobre p { width: 90% }
	#sobre p + p { margin-top: 15px }


#evolucion { padding: 35px 0 }

	#evolucion h3 { margin: 0 0 20px }

	#evolucion p { width: 90% }


#timeline {
	background: #fff;
	margin: 0 0 -60px;
	padding: 50px 0 80px;
}
	#timeline figure { margin: 0 -3px }

		#timeline figure img {
			display: block;
			max-width: 100%; height: auto;
		}


#intro {
	background: url(../img/bg_clientes.jpg) no-repeat center center;
	background-size: 60% auto;
	padding: 35px 0;
}
	#intro h3 { margin: 0 0 20px }

	#intro p { width: 90% }


#clientes { background: url(../img/bg_clientes.png) repeat-y center 0 }

	#clientes article {
		float: left;
		padding: 35px 0;
		width: 50%;
	}
		#clientes article h3 {
			margin: 0 0 20px;
			width: 90%;
		}

		#clientes article ul { /*-*/ }

			#clientes article ul li {
				padding: 0 0 0 12px;
				position: relative;
			}
			#clientes article ul li:before {
				background: #fff;
				border-radius: 50%;
				content: "";
				width: 4px; height: 4px;
				position: absolute;
				top: 10px; left: 0;
			}
			#clientes article ul li + li { margin-top: 15px }

	#clientes aside {
		float: right;
		box-sizing: border-box;
			-moz-box-sizing: border-box;
		padding: 40px 0 40px 40px;
		width: 50%;
	}
		#clientes aside figure { /*-*/ }

			#clientes aside figure img { max-width: 100%; height: auto }


#final {
	background: #fff;
	margin: 0 0 -30px;
	padding: 35px 0;
}
	#final p {
		color: #333;
		font-size: 22px;
		line-height: 26px;
	}
	#final p + p { margin-top: 15px }

#map {
	margin: 0 -100% -40px;
	padding: 0 100%;
	width: 100%; height: 670px;
	z-index: -1;
}
	#map div.gomapMarker {
		color: #333;
		font-size: 12px;
	}
		#map div.gomapMarker strong { display: block }


#contacto { /*-*/ }

	#contacto form {
		background: #fff;
		box-shadow: rgba(0,0,0,.2) 0 2px 5px;
		box-sizing: border-box;
			-moz-box-sizing: border-box;
		margin-left: 640px;
		padding: 15px 20px 20px;
		width: 320px;
		position: absolute;
		top: 40px; left: auto;
	}
		#contacto div.ok {
			background-color: #5BBD72;
			border-bottom-left-radius: 0.325em;
			border-bottom-right-radius: 0.325em;
			border-top-left-radius: 0.325em;
			border-top-right-radius: 0.325em;
			box-sizing: border-box;
			color: rgba(0, 0, 0, 0.6);
			display: none;
			height: auto;
			line-height: 1.33;
			margin: 1em 0;
			min-height: 18px;
			padding: 1em;
			position: relative;
		}
		#contacto div.error {
			background-color: #D95C5C;
			border-bottom-left-radius: 0.325em;
			border-bottom-right-radius: 0.325em;
			border-top-left-radius: 0.325em;
			border-top-right-radius: 0.325em;
			box-sizing: border-box;
			color: rgba(255, 255, 255, 0.6);
			display: none;
			height: auto;
			line-height: 1.33;
			margin: 1em;
			min-height: 18px;
			padding: 1em;
			position: relative;		
		}
			#contacto div.ok h1, #contacto div.error h1 {
				font-size: 1.33em;
				font-weight: bold;
				color: rgba(255, 255, 255, 0.6);
			}

		#contacto form h3 {
			color: #333;
			font-size: 36px;
			margin: 0 0 10px;
		}
		#contacto form h4 {
			color: #666;
			font-size: 18px;
			font-weight: 300;
			margin: 0 0 15px;
		}

		#contacto form ol { margin-bottom: 12px }

			#contacto form ol li + li { margin-top: 12px }

				#contacto form ol li input.text,
				#contacto form ol li select.select,
				#contacto form ol li textarea.textarea {
					background: #fff;
					border: 1px solid #cfcfcf;
					box-sizing: border-box;
						-moz-box-sizing: border-box;
					color: #999;
					padding: 5px 8px;
					width: 100%;
					transition: background-color .3s, border-color .3s;
						-webkit-transition: background-color .3s, border-color .3s;
				}
				#contacto form ol li select.select {
					background: url(../img/ico_select.png) no-repeat right bottom;
					padding: 4px;
					appearance: none;
						-moz-appearance: none;
						-webkit-appearance: none;
				}
				#contacto form ol li textarea.textarea { height: 90px }

				#contacto form ol li input.text:hover,
				#contacto form ol li select.select:hover,
				#contacto form ol li textarea.textarea:hover,
				#contacto form ol li span.file:hover input.text { border-color: #999 }

				#contacto form ol li input.text:focus,
				#contacto form ol li select.select:focus,
				#contacto form ol li textarea.textarea:focus { border-color: #111 }

				#contacto form ol li input.error,
				#contacto form ol li select.error,
				#contacto form ol li textarea.error { border-color: red }

				#contacto form ol li span.file {
					display: none;
					position: relative;
				}
					#contacto form ol li span.file input.text {
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						padding-right: 110px;
					}
					#contacto form ol li span.file input.file {
						opacity: 0;
						width: 100%; height: 36px;
						position: absolute;
						top: 0; left: 0;
						z-index: 10;						
					}
					#contacto form ol li span.file span {
						background: #d44c1d;
						color: #fff;
						display: block;						
						padding: 7px 12px;
						position: absolute;
						top: 0; right: 0;
					}
					#contacto form ol li span.file:hover span { background: #e75320 }

		#contacto form p.submit { text-align: center }

			#contacto form p.submit input.submit {
				background: #d44c1d;
				color: #fff;
				cursor: pointer;
				padding: 10px 0;
				width: 100%;
				transition: background-color .3s;
					-webkit-transition: background-color .3s;
			}
			#contacto form p.submit input.submit:hover { background: #e75320 }
			#contacto form p.submit img { display: none }



/*	Footer
-------------------------------*/

#footer > section {
	float: left;
	box-sizing: border-box;
		-moz-box-sizing: border-box;
	margin: 30px 0;
	padding: 0 20px;
	position: relative;
}
#footer > section:nth-child(1) { width: 24% }
#footer > section:nth-child(2) { width: 52% }
#footer > section:nth-child(3) { width: 24% }

#footer > section:nth-child(2):before,
#footer > section:nth-child(2):after {
	border-left: 1px solid #484848;
	content: "";
	height: 100%;
	position: absolute;
	top: 0; left: 0;
}
#footer > section:nth-child(2):after { left: auto; right: 0 }

	#footer section h5,
	#footer section div h6 {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .06em;
		line-height: 20px;
		margin: -4px 0 20px;
	}

	#footer section nav { margin: 0 0 30px }

		#footer section nav ul { /*-*/ }

			#footer section nav ul li { /*-*/ }

				#footer section nav ul li a,
				#footer section p {
					display: block;
					color: #ccc;
					font-size: 11px;
					letter-spacing: .06em;
					line-height: 20px;
				}
				#footer section nav ul li a:hover { color: #fff }

	#copyright small { color: #fff }

	#footer > section > div {
		float: left;
		box-sizing: border-box;
			-moz-box-sizing: border-box;
		width: 33.33333%;
	}
	#footer > section > div + div { padding-left: 20px }

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

	#footer section h5 + p { color: #999 }

		#footer section p strong {
			color: #fff;
			font-weight: 400;
		}

		#footer section.gris,
		#footer section.gris h5,
		#footer section.gris p,
		#footer section p strong { color: #999 }