Adapt 500 error page.

services/web/app/views/general/500.pug

@@ -1,24 +1,37 @@
 doctype html
-html(itemscope, itemtype='http://schema.org/Product')
+html.full-height(itemscope, itemtype='http://schema.org/Product')
 	head
 		title Something went wrong
 		link(rel="icon", href="/favicon.ico")
 		if buildCssPath
 			link(rel='stylesheet', href=buildCssPath('/style.css'))
 		link(href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css",rel="stylesheet")
-	body
-		.content
-			.container
-				.row
-					.col-md-8.col-md-offset-2.text-center
-						.page-header
-							h2 Oh dear, something went wrong.
-						if buildImgPath
-							p
-								img(src=buildImgPath("lion-sad-128.png"), alt="Sad Lion")
-						p
-							| Something went wrong with your request, sorry. Our staff are probably looking into this, but if it continues, please contact us at #{settings.adminEmail}
-						p
-							a(href="/")
-								i.fa.fa-arrow-circle-o-left
-								|  Take me home
+	body.full-height
+		.content.full-height
+			.container.full-height
+				.error-container.full-height
+					.error-figure.error-figure-500
+						img.img-responsive(
+							src="/img/brand/500-visual.svg"
+							alt="Error"
+						)
+					.error-details
+						h1.error-code 500
+						p.error-status Ooops
+						p.error-description Looks like something went wrong
+						a.error-btn(href="/") Home
+		//- .content
+		//- 	.container
+		//- 		.row
+		//- 			.col-md-8.col-md-offset-2.text-center
+		//- 				.page-header
+		//- 					h2 Oh dear, something went wrong.
+		//- 				if buildImgPath
+		//- 					p
+		//- 						img(src=buildImgPath("lion-sad-128.png"), alt="Sad Lion")
+		//- 				p
+		//- 					| Something went wrong with your request, sorry. Our staff are probably looking into this, but if it continues, please contact us at #{settings.adminEmail}
+		//- 				p
+		//- 					a(href="/")
+		//- 						i.fa.fa-arrow-circle-o-left
+		//- 						|  Take me home

services/web/public/stylesheets/app/error-pages.less

@@ -1,3 +1,8 @@
+.full-height {
+	height: 100%;
+	padding: 0;
+}
+
 .error-container {
 	display: flex;
 	align-items: center;
@@ -7,8 +12,17 @@
 		flex: 0 0 50%;
 		align-self: stretch;
 		padding: @line-height-computed * 2;
-		@media (min-width: @screen-sm-min) {
-			display: block;
+		&-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;
+			}
 		}
 	}