@amarillo : rgb(255,181,18);
@rojo : rgb(255,44,32);
@negro : rgb(28,26,26);
@gris : rgb(105,105,105);
@gris-claro : rgb(205,205,205);

@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic|Open+Sans+Condensed:300,300italic);

* {
	box-sizing: border-box;
	line-height: 1.25em;
	margin: 0;
	padding: 0;
	body {
		font-family: Roboto, Arial, sans-serif;
		font-size: 14px;
		font-style: normal;
		font-weight: normal;
		line-height: 1.5em;
		list-style: none;
		min-width: 1000px;
		text-align: justify;
		text-decoration: none;	
		background-color: @negro;
		background-image: url(../images/pattern.jpg);
		a {
			text-decoration: none;
			color: inherit;
		}
		img {
			border-style: none;
		}
		.button {
			cursor: default;
			&:hover {
				cursor: pointer;
				text-decoration: underline;
			}
		}
		input, textarea, select {
			font-size:100%;
			font-family: Roboto,  Arial, sans-serif;
		}
		form, fieldset {
			margin: 0;
			padding: 0;
			border-style: none;
		}
		input[type=text],
		input[type=password],
		input[type=file],
		input[type=submit],
		textarea {
			-webkit-appearance: none;
			-webkit-border-radius: 0;
		}
		#wrapper {
			margin: 0 auto;
			position: relative;
			width: 980px;
			background-color: white;
			#header {
				border-style: solid;
				border-color: @negro @negro @rojo	;
				border-width: 6px 0 4px 0;
				height: 370px;
				margin: 0 auto;
				vertical-align: top;
				width: 980px;
				z-index: 2;
				.logo-wrap {
					border-right-style: solid;
					border-right-width: 4px;
					border-right-color: @negro;
					display: inline-block;
					background-color: @amarillo;
					height: 360px;
					width: 290px;
					position: absolute;
					a {
						display: inline-block;
						height: 100%;
						padding: 81px 13px;
						width: 100%;
					}
					img {
						height: 198px;
						width: 260px;						
					}
				}
				#carrusel {
					display: inline-block;
					height: 360px;
					margin-left: 290px;
					overflow: hidden;
					position: relative;
					width: 690px;
					.slides_container {
						height: 360px;
						overflow: hidden;
						width: 3450px;
						> div {
							height: 360px;
							width: 690px;
							img {
								height: 360px;
								width: 690px;
							}
						}
					}
					ul.pagination {
						bottom: 1em;
						height: 16px;
						list-style: none;
						margin: 0 auto;
						position: absolute;
						right: 1em;
						text-align: right;
						z-index: 5;
						li {
							background-color: firebrick;
							display: inline-block; 
							height: 18px;
							margin-left: 5px;
							width: 18px;
							cursor: pointer;
							overflow: hidden;
							a {
								display: inline-block;
								text-indent: 9999px;
							}
							&.current {
								background-color: coral;
							}
						}
					}
				}
			}
			.navigator-wrap {
				width: 980px;
				margin: 0 auto;
				display: table;
				ul {
					display: table-row;
					width: 100%;
					li {
						-webkit-transition: all .25s ease;
						background-color: @negro;
						border: none;
						border-collapse: collapse;
						border-right-color: @amarillo;
						border-right-style: dotted;
						border-right-width: 1px;
						color: @amarillo;
						cursor: pointer;
						display: table-cell;
						font-family: 'Open Sans Condensed', sans-serif;
						font-size: 30px;
						line-height: 2em;
						text-align: center;
						vertical-align: middle;
						width: 20%;
						a {
							width: 100%;
							height: 100%;
							display: inline-block;
						}
						&:last-child {
							border:none
						}
						&:hover {
							-webkit-transition: all .5s ease;
							background-color: @amarillo;
							color: @negro;
						}
					}
				}
			}
			#content {
				width: 980px;
				margin: 0px auto;
				.texto {
					margin: .5em 0 1em;
					h2 {
						border-bottom-color: @gris;
						border-bottom-style: dotted;
						border-bottom-width: 1px;
						font-family: 'Open Sans Condensed';
						font-size: 30px;
						color: @negro;
						line-height: 1.5em;
						margin: 0em 1ex .25em;
					}
					div.texto {
						width: 640px;
						display: inline-block;
						vertical-align: top;
					}
					p {
						color: @gris;
						padding-left: 2ex;
						text-align: justify;
						width: 640px;
						display: inline-block;
						& + p {
							margin-top: 1em;
						}
					}
					img {
						display: inline-block;
						width: 290px;
						height: auto;
						margin-left: 30px;
						vertical-align: top;
					}
				.servicios-list {
					display: inline-block;
					margin-left: 1.5em;
					h3 {
						color: @rojo;
						line-height: 1.5em;
						& + ul {
							margin: .5em 1.25em 1.5em .5em;
							list-style-type: none;
							list-style-position: outside;
							li {
								&:before {
									content: "* ";
								}
							}
							ul {
							list-style-type: none;
							list-style-position: outside;
								li {
									margin-left: 1.5em !important;
									&:before {
										content: "- ";
									}
								}
							}
						}
					}
				}
				}
				.slogan {
					font-size: 1.5em;
					width: 100% !important;
				}
				.servicios-wrap {
					display: block;
					padding: 1em 2ex;
					width: 100%;
					li.servicio {
						display: inline-block;
						height: 225px;
						list-style: none;
						margin: 0 2em 2em 0;
						padding: 0;
						position: relative;
						overflow: hidden;
						width: 296px;
						img {
							margin: 0;
							padding: 0;
							width: 100%;
						}
						&:hover .sumilla {
							-webkit-transition: all .25s ease;
							bottom: -125px;
						}
						.sumilla {
							-webkit-transition: all .25s ease;
							background-color: rgba(0,0,0,.75);
							border-top-color: black;
							border-top-style: solid;
							border-top-width: 1px;
							bottom: 0px;
							height: 125px;
							margin: 0px;
							padding: .5em 1ex;
							position: absolute;
							h3 {
								color: white;
								font-family: 'Open Sans Condensed';
								font-size: 1.3em;
								line-height: 1.25em;
							}
							h4 {
								color: white;
								font-weight: normal;
								font-size: .9em;
								margin-bottom: 1em;
							}
							p {
								color: white;
								font-size: .9em;
								margin: 0;
								padding: 0;
								text-align: justify;
								width: 100%;
							}
						}
						&:nth-child(3n) {
							margin-right: 0 !important;
						}
					}
				}
				.proyectos-wrap {
					display: block;
					padding: 1em 2ex;
					width: 100%;
					li.proyecto {
						display: inline-block;
						height: 25em;
						list-style: none;
						margin: 0 3em 1em 0;
						padding: 0;
						width: 450px;
						vertical-align: top;
						.carrusel {
							.slides_container {
								height: 253px !important;
								overflow: hidden;
							}
						}
						h3 {
							font-family: 'Open Sans Condensed';
							font-size: 1.5em;
						}
						h4 {
							font-family: 'Open Sans Condensed';
							font-weight: normal;
							font-size: 1.25em;
						}
						img {
							margin: .5em 0;
							padding: 0;
							width: 100%;
							height: 253px;
						}
						p {
							font-size: .9em;
							margin: 0;
							padding: 0;
							text-align: justify;
							width: 100%;
						}
						&:nth-child(2n) {
							margin-right: 0 !important;
						}
					}
				}
				.preguntas-wrap {
					display: block;
					padding: 1em 2ex;
					width: 100%;
					li.pregunta {
						display: block;
						list-style: none;
						margin: 1em 0 1.5em;
						padding: 0;
						width: 100%;
						h3 {
							font-style: italic;
							font-family: 'Open Sans Condensed';
							font-size: 1.4em;
							font-weight: normal;
							color: firebrick;
							width: 100%;
						}
						div {
							width: 100%;
							p {
								padding-left: 1ex;
								margin-top: .5em;
								margin-left: 0em;
								width: 100%;
							}
						}
					}
				}
				.contacto-wrap {
					div.texto {
						display: inline-block;
						width: 414px;
						margin-top: 0px;
						h3 {
							margin: 0em 0em .25em 1.75ex;
							width: 414px;
						}
						p {
							width: 414px;
						}
						.card {
							border-color: @gris-claro;
							border-radius: 8px;
							border-style: solid;
							border-width: 1px;
							display: block;
							font-family: 'Open Sans Condensed';
							font-size: 1.4em;
							margin: 1em auto;
							padding: .75ex 1em;
							width: 340px;
							h3 {
								padding: 0;
								margin: 0 0 .25em;
								display: block;
								border-bottom-style: dotted;
								border-bottom-color: @gris-claro;
								border-bottom-width: 1px;
								width: 100%;
								strong {
									font-size: 1.2em;
								}
							}
							p {
								color: @gris;
								padding: 0;
								margin: 0;
								font-weight: bold;
							}
							small {

							}
						}
					}
					.mapa {
						height: 314px; 
						width: 516px;
						border-radius: 4px;
						border-width: 0px;
						border-style: solid;
						left: 32px;
						position: relative;
					}
					form {
						clear: left;
						margin: 0em 1em 2em;
						.col1 {
							display: inline-block;
							vertical-align: top;
							width: 400px;
							h3 {
								margin: .75em 0;
							}
							span {
								display: block;
								position: relative;
								margin: 1ex 0;
								* {
									display: inline-block;
								}
								label {
									background-color: @negro;
									border-color: @negro;
									border-radius: 4px 0 0 4px;
									border-style: solid;
									border-width: 1px;
									color: @amarillo;
									font-size: 13px;
									height: 28px;
									line-height: 1em;
									padding: .5em 1ex;
									text-align: right;
									width: 124px;
								}
								input[type="text"],
								input[type="email"] {
									background-color: white;
									border-color: @gris;
									border-radius: 0 4px 4px 0;
									border-style: solid;
									border-width: 1px;
									border-left-width: 0px;
									font-size: 13px;
									height: 28px;
									left: -1px;
									line-height: 1em;
									padding: .5em 1ex;
									position: relative;
									width: 276px;
								}
								select {
									background-color: white;
									border-color: @gris;
									border-radius: 0 4px 4px 0;
									border-style: solid;
									border-width: 1px;
									border-left-width: 0px;
									font-size: 13px;
									height: 28px;
									width: 276px;
								}
							}
						}
						.col2 {
							vertical-align: top;
							display: inline-block;
							margin-left: 30px;
							padding-top: 1ex;
							width: 516px;
							label {
								background-color: @negro;
								border-color: @negro;
								border-radius: 4px 4px 0 0;
								border-style: solid;
								border-width: 1px;
								color: @amarillo;
								display: block;
								font-size: 13px;
								height: 28px;
								line-height: 1em;
								padding: .5em 1ex;
								text-align: center;
								width: 100px;
							}
							textarea {
								background-color: white;
								border-color: @gris;
								border-radius: 0 4px 4px 4px;
								border-style: solid;
								border-width: 1px;
								font-size: 13px;
								height: 146px;
								line-height: 1em;
								padding: .5em 1ex;
								position: relative;
								top: -2px;
								width: 100%;
							}
						}
						.submit {
							display: block;
							margin-top: 1ex;
							text-align: center;
							width: 100%;
							input[type=submit] {
								border-radius: 4px;
								border-style: solid;
								border-width: 0px;
								padding: .5em 6ex;
							}
						}
					}
				}
				.video-wrap {
					width: 100%;
					.video {
						width: 100%;
						height: 551px;
						background-color: rgba(0,0,0,.9);
						background-image: url(../images/play-button.png);
						background-size: 12.5%;
						background-position: 50%;
						background-repeat: no-repeat;
					}
				}
			}
			#footer {
				border-bottom-color: @amarillo;
				border-bottom-style: solid;
				border-bottom-width: 6px;
				margin: 20px auto 0;
				padding-bottom: .75em;
				width: 980px;
				.social-block {
					background-repeat: repeat-x;
					background-position: 0 50%;
					background-image: url('../images/bg-border.png');
					margin: 0 1em 21px;
					width: 950px;
					.social-holder {
						background-color: white;
						float: right;
						padding: 0 1px 0 10px;
						h2 {
							display: block;
							float: left;
							font-family: 'Open Sans Condensed';
							font-size: 19px;
							font-weight: normal;
							line-height: 21px;
							margin: 6px 0 0;
							outline: black;
						}
						.social-networks {
							float: left;
							list-style: none;
							margin: 0 0 0 3px;
							padding: 0;
							li {
								float: left;
								margin: 0 0 0 5px;
								a {
									background-image: url('../images/social-icons.png');
									background-repeat: no-repeat;
									display: block;
									height: 34px;
									overflow: hidden;
									text-indent: -9999px;
									width: 34px;
									&:hover {
										background-color: transparent !important;
										background-image: url('../images/social-icons-hovers.png');
									}
								}
								a.facebook {
									background-position: 0 50%;
								}
								a.twitter {
									background-position: -38px 50%;
								}
								a.google {
									background-position: -76px 50%;
								}
								a.youtube {
									background-position: -115px 50%;
								}
								a.linkedin {
									background-position: -153px 50%;
								}
							}
							> span {
								float: left;
								font-size: 16px;
								line-height: 32px;
							}
						}
					}
					&:after {
						clear: both;
						content: '';
						display: block;
					}
				}
				.footer-nav-block {
					text-align: center;
					.footer-nav {
						list-style: none;
						li {
							display: inline-block;
							font-size: 12px;
							padding: 0 1.5ex;
							border-right-style: dotted;
							border-right-width: 1px;
							border-right-color: rgb(135,160,17);
							&:last-child {
								border-right-style: none;
							}
							a:hover {
								text-decoration: underline;
							}
						}
					}
				}
			}
		}
	}
}

.alert {
	padding: 15px;
	margin: 20px 0;
	border: 1px solid transparent;
	border-radius: 4px;
	.close {
		-webkit-appearance: none;
		background: transparent;
		border: 0;
		color: #000000;
		cursor: pointer;
		filter: alpha(opacity=20);
		float: right;
		font-size: 21px;
		font-weight: bold;
		line-height: 1;
		opacity: 0.2;
		padding: 0;
		text-shadow: 0 1px 0 #ffffff;
		&:hover,
		&:focus {
			color: #000000;
			text-decoration: none;
			cursor: pointer;
			opacity: 0.5;
			filter: alpha(opacity=50);
		}
	}
	&.alert-success {
		color: #3c763d;
		background-color: #dff0d8;
		border-color: #d6e9c6;
	}
	&.alert-danger {
		color: #a94442;
		background-color: #f2dede;
		border-color: #ebccd1;
	}
	ul {
		margin: 1ex 0 0 1.5em;
	}
}

.pagination-wrap {
	text-align: right;
	padding-right: 1.5em;
	.pagination {
		display: inline-block;
		padding-left: 0;
		margin: 0;
		border-radius: 4px;
	}

	.pagination > li {
		display: inline;
	}

	.pagination > li > a,
	.pagination > li > span {
		position: relative;
		float: left;
		padding: 6px 12px;
		margin-left: -1px;
		line-height: 1.428571429;
		text-decoration: none;
		color: @amarillo;
		background-color: @negro;
		border: 1px solid @amarillo;
	}

	.pagination > li:first-child > a,
	.pagination > li:first-child > span {
		margin-left: 0;
		border-bottom-left-radius: 4px;
		border-top-left-radius: 4px;
	}

	.pagination > li:last-child > a,
	.pagination > li:last-child > span {
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	.pagination > li > a:hover,
	.pagination > li > span:hover,
	.pagination > li > a:focus,
	.pagination > li > span:focus {
		color: @negro;
		background-color: @rojo;
	}

	.pagination > .active > a,
	.pagination > .active > span,
	.pagination > .active > a:hover,
	.pagination > .active > span:hover,
	.pagination > .active > a:focus,
	.pagination > .active > span:focus {
		z-index: 2;
		color: @negro;
		cursor: default;
		background-color: @amarillo;
		border-color: @amarillo;
	}

	.pagination > .disabled > span,
	.pagination > .disabled > span:hover,
	.pagination > .disabled > span:focus,
	.pagination > .disabled > a,
	.pagination > .disabled > a:hover,
	.pagination > .disabled > a:focus {
		color: @gris-claro;
		cursor: not-allowed;
		background-color: @gris;
		border-color: @amarillo;
	}

	.pagination-lg > li > a,
	.pagination-lg > li > span {
		padding: 10px 16px;
		font-size: 18px;
	}

	.pagination-lg > li:first-child > a,
	.pagination-lg > li:first-child > span {
		border-bottom-left-radius: 6px;
		border-top-left-radius: 6px;
	}

	.pagination-lg > li:last-child > a,
	.pagination-lg > li:last-child > span {
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
	}

	.pagination-sm > li > a,
	.pagination-sm > li > span {
		padding: 5px 10px;
		font-size: 12px;
	}

	.pagination-sm > li:first-child > a,
	.pagination-sm > li:first-child > span {
		border-bottom-left-radius: 3px;
		border-top-left-radius: 3px;
	}

	.pagination-sm > li:last-child > a,
	.pagination-sm > li:last-child > span {
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
	}
}