/* #Footer */
#footer {
	background: $footer-bg;
	border-top: 4px solid #1F1F1F;
	font-size: 0.9em;
	margin-top: 50px;
	padding: 80px 0 0;
	position: relative;
	clear: both;
	a:hover {
		color: #CCC;
	}
	form {
		filter: alpha(opacity = 85);
		opacity: 0.85;
	}
	h1, h2, h3, h4, a {
		color: #FFF !important;
	}
	h4 {
		font-size: 1.8em;
		font-weight: 200;
		text-shadow: 1px 1px 1px #000;
	}
	h5 {
		color: #CCC !important;
	}
	ul {
		&.nav-list.primary > li {
			a {
				border-bottom: 1px solid rgba(255, 255, 255, 0.1);
				line-height: 20px;
				padding-bottom: 11px;
			}
			&:last-child a {
				border-bottom: 0;
			}
			a:hover {
				background-color: rgba(255, 255, 255, 0.05);
			}
		}
		&.list.icons li {
			margin-bottom: 5px;
		}
	}
	.container {
		.row > div {
			margin-bottom: 25px;
		}
		input:focus {
			box-shadow: none;
		}
	}
	.footer-ribbon {
		background: #999;
		position: absolute;
		margin: -100px 0 0 22px;
		padding: 10px 20px 6px 20px;
		&:before {
			border-right: 10px solid #646464;
			border-top: 16px solid transparent;
			content: "";
			display: block;
			height: 0;
			left: -10px;
			position: absolute;
			top: 0;
			width: 7px;
		}
		span {
			color: #FFF;
			font-size: 1.6em;
			font-family: $font-secundary;
		}
	}
	.newsletter form {
		width: 100%;
		max-width: 262px;
		input.form-control {
			height: 34px;
			padding: 6px 12px;
		}
	}
	.alert a {
		color: #222 !important;
		&:hover {
			color: #666 !important;
		}
	}
	.twitter {
		.icon {
			clear: both;
			font-size: 1.5em;
			position: relative;
			top: 3px;
		}
		.time {
			color: #999;
			display: block;
			font-size: 0.9em;
			padding-top: 3px;
			margin-bottom: 20px;
			&:last-child {
				margin-bottom: 0;
			}
		}
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
	}
	.twitter-account {
		color: #FFF;
		display: block;
		font-size: 0.9em;
		margin: -15px 0 5px;
		filter: alpha(opacity = 55);
		opacity: 0.55;
		&:hover {
			filter: alpha(opacity = 100);
			opacity: 1;
		}
	}
	.contact {
		list-style: none;
		margin: 0;
		padding: 0;
		i {
			display: block;
			float: left;
			font-size: 1.2em;
			margin: 7px 8px 10px 0;
			position: relative;
			text-align: center;
			top: -2px;
			width: 16px;
			&.icon-envelope {
				font-size: 1em;
				top: 0;
			}
		}
		p {
			margin-bottom: 10px;
		}
	}
	.logo {
		display: block;
		&.push-bottom {
			margin-bottom: 12px;
		}
	}
	.footer-copyright {
		background: #0C0C0C;
		border-top: 4px solid #111;
		margin-top: 40px;
		padding: 30px 0 10px;
		nav {
			float: right;
			ul {
				list-style: none;
				margin: 0;
				padding: 0;
				li {
					border-left: 1px solid #505050;
					display: inline-block;
					line-height: 12px;
					margin: 0;
					padding: 0 8px;
					&:first-child {
						border: medium none;
						padding-left: 0;
					}
				}
			}
		}
		p {
			color: #555;
			margin: 0;
			padding: 0;
		}
	}
	.phone {
		color: #FFF;
		font-size: 26px;
		font-weight: bold;
		display: block;
		padding-bottom: 15px;
		margin-top: -5px;
	}
	.recent-work {
		li {
			float: left;
			width: 30%;
			margin: 10px 3% 0 0;
			.thumb-info {
				float: left;
				display: inline-block;
			}
			&:hover img {
				@include transform(none);
			}
		}
		img {
			width: 100%;
			filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
			filter: gray;
			-webkit-filter: grayscale(100%);
		}
	}
	.view-more-recent-work {
		padding: 12px;
	}
	&.short {
		padding-top: 50px;
		.footer-copyright {
			background: transparent;
			border: 0;
			padding-top: 0;
			margin-top: 0;
		}
	}
}