/*
Notes;
Layout is a random number... 1: teddy, 2: robot, 3: pug
The basic layouts for teddy & pug are the same, so this is the default layout.
*/

.err-page {
	margin:0;
	padding:0;
}

.err-page .container {
	position:relative;
	padding:60px 15px;
}

.err-page .err-img {
	position:absolute;
	bottom:0;
	right:0;
	width:53%;
}
.err-page .err-text {
	padding: 8% 53% 8% 0;
}
.err-page .err-text h1 {color:#fff; font-size:24px; margin:30px 0;}
.err-page .err-text h1.bigger-h1 {color:#fff; font-size:238px; line-height: 285px; margin:0;}
.err-page .err-text p {color:#fff; font-size:18px;}
.err-page .err-text a.button {display:inline-block; font-size:14px; color:#fff;}

@media (max-width: 767px){
	.err-page .err-text h1.bigger-h1 {font-size:150px; line-height: 200px;}
}

/* background */
.err-page.teddy {background-color:#F8458E;}
.err-page.robot {background-color:#1B365D; }
.err-page.pug {background-color:#00A3E0;}

/* button */
.err-page.not-found .err-text a.button {
	transition: background-color 0.2s;
}
.err-page.not-found .err-text a.button:hover {
	background-color: #d9a22f;
    color: #212B32;
    text-decoration: none;
}

.err-page.teddy .err-text a.button {background-color:#F1B434;color:#212B32;}
.err-page.robot .err-text a.button {background-color:#F1B434;color:#212B32;}
.err-page.pug .err-text a.button {background-color:#F1B434;color:#212B32;}

/* alternative 'robot' layout */
.err-page.robot .err-img {left:0;}
.err-page.robot .err-text {padding: 8% 0 8% 53%;}
.err-page.robot .err-text h1 {margin-left:10%;}
.err-page.robot .err-text p {margin-left:10%;}
.err-page.robot.not-found .err-text p {margin-left:0;}
.err-page.robot .err-text a.button {margin-left:10%;}

.err-page.robot.not-found .err-text {padding: 5% 0 5% 53%;}

.err-page.not-found .err-text h1 {margin-bottom: 0;}
.err-page.robot.not-found .err-text h1 {margin-left:0;}
.err-page.robo.not-found .err-text p {margin-left:0;}
.err-page.robot.not-found .err-text a.button {margin-left:0;}

.err-page.not-found .err-text h2 {
	font-size: 24px;
	line-height:24px;
	color: #FFFFFF;
	text-align: center;
	margin-bottom: 20px;
}

.err-page.not-found .err-text p {
	text-align: center;
}

.err-page.not-found .err-text {
	text-align: center;
}

@media (max-width: 1199px){
	.err-page.not-found .err-text h1 {
		font-size: 200px;
		line-height: 250px;
	}
}

@media(max-width:992px) {
	.err-page .err-text {padding: 3% 53% 3% 0;}
	.err-page.robot .err-text {padding: 3% 0 3% 53%;}
	.err-page.not-found .err-text {padding: 5% 0 5% 0}
	.err-page.not-found .err-text h1 {margin-left:0; margin-top: 0;}
	.err-page.not-found .err-text p {margin-left:0;}
	.err-page.not-found .err-text a.button {margin-left:0;}
	.err-page.not-found .err-img {position:relative; width:100%; max-width: 600px;margin: 0 auto;}
	.err-page.robot.not-found .err-text {padding: 0;}
	.err-page .container {padding-bottom:0; text-align:center;}
}

@media (max-width: 767px){
	.err-page .err-img {position:relative; width:100%;}
	.err-page .err-text {padding: 0;}
	.err-page.robot .err-text {padding: 0;}
	.err-page .err-text a.button {margin-bottom:50px;}
	.err-page.not-found .err-text {padding: 0;}
}

@media (max-width: 500px){
	.err-page.not-found .err-text h1 {
		font-size: 150px;
		line-height: 200px;
	}
}