From 659028cf0f411c1151047202020560e20572ff86 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 1 Mar 2017 13:48:12 +0000
Subject: [PATCH] Graphically anchor elements of 500 error visual.

---
 services/web/app/views/general/404.pug        |  4 +-
 services/web/app/views/general/500.pug        |  4 +-
 .../public/stylesheets/app/error-pages.less   | 48 ++++++++++++++-----
 3 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/services/web/app/views/general/404.pug b/services/web/app/views/general/404.pug
index e6f6709d2e..e9100e477a 100644
--- a/services/web/app/views/general/404.pug
+++ b/services/web/app/views/general/404.pug
@@ -4,8 +4,8 @@ block content
 	.content
 		.container
 			.error-container
-				.error-figure.error-figure-404
-					img.img-responsive(
+				.error-figure
+					img.error-img(
 						src="/img/brand/404-visual.svg"
 						alt="Not found"
 					)
diff --git a/services/web/app/views/general/500.pug b/services/web/app/views/general/500.pug
index 11c19850f3..62712e214a 100644
--- a/services/web/app/views/general/500.pug
+++ b/services/web/app/views/general/500.pug
@@ -11,8 +11,8 @@ html.full-height(itemscope, itemtype='http://schema.org/Product')
 			.container.full-height
 				.error-container.full-height
 					.error-figure.error-figure-500
-						img.img-responsive(
-							src="/img/brand/500-visual.svg"
+						img.error-img(
+							src="/img/brand/500-visual-socket.svg"
 							alt="Error"
 						)
 					.error-details
diff --git a/services/web/public/stylesheets/app/error-pages.less b/services/web/public/stylesheets/app/error-pages.less
index 57f2d14ba2..3081476fdb 100644
--- a/services/web/public/stylesheets/app/error-pages.less
+++ b/services/web/public/stylesheets/app/error-pages.less
@@ -10,21 +10,45 @@
 	.error-figure {
 		display: none;
 		flex: 0 0 50%;
-		align-self: stretch;
 		padding: @line-height-computed * 2;
-		&-404 {
-			@media (min-width: @screen-sm-min) {
-				display: block;
-			}
-		}
-		&-500 {
-			padding-bottom: 0;
-			@media (min-width: @screen-sm-min) {
-				display: flex;	
-				align-items: flex-end;
-			}
+		@media (min-width: @screen-sm-min) {
+			display: block;
 		}
 	}
+	.error-figure-500 {
+		&::before {
+			content: '';
+			display: block;
+			position: fixed;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 80%;
+			background-image: url(/img/brand/500-visual-plug.svg);
+			background-size: 400px;
+			background-repeat: no-repeat;
+			background-position: right 70%;
+		}
+		&::after {
+			content: '';
+			display: block;
+			position: fixed;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			background-image: url(/img/brand/500-visual-tail.svg);
+			background-size: 100px;
+			background-repeat: no-repeat;
+			background-position: 35% bottom;
+		}
+	}
+		.error-img {
+			display: block;
+			max-width: 380px;
+			height: auto;
+			margin: 0 auto;
+		}
 
 	.error-details {
 		flex: 0 1 50%;