/**
 * ------------------------------------------------------------------------
 * JA PlayMag Template
 * ------------------------------------------------------------------------
 * Copyright (C) 2004-2011 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
 * @license - Copyrighted Commercial Software
 * Author: J.O.O.M Solutions Co., Ltd
 * Websites:  http://www.joomlart.com -  http://www.joomlancers.com
 * This file may not be redistributed in whole or significant part.
 * ------------------------------------------------------------------------
 */

/* Import Font 
---------------------- */

/* Main Error Style
---------------------- */
* {
	box-sizing: border-box;
}

body.page-error {
 	background: #000;
	color: #fff;
	font-family: helvetica;
	font-size: 14px;
	text-align: center;
	padding: 0;
	position: relative;
	margin: 0;
}

.error {
	position: absolute;
	top: 50%;
	margin-top: -275px;
	width: 100%;
}

/* Outline Error
------------------------ */
#errorboxoutline {
	background: url("../images/error.jpg") no-repeat center center #1a1a1a;
	height: 550px;
	overflow: hidden;
	position: relative;
}

/* Mask top */
#errorboxoutline:before {
	animation: mask-top 2s;
		-moz-animation: mask-top 2s;
			-o-animation: mask-top 2s;
				-webkit-animation: mask-top 2s;
	background: #000;
	border-top: 4px solid #000;
	content: "";
	height: 50%;
	left: 0;
	position: absolute;
	top: 98%;
	width: 100%;
}

@keyframes mask-top {
	0% {top: 50%;}
	100% {top: 98%;}
}

@-webkit-keyframes mask-top {
	0% {top: 50%;}
	100% {top: 98%;}
}

@-moz-keyframes mask-top {
	0% {top: 50%;}
	100% {top: 98%;}
}

@-o-keyframes mask-top {
	0% {top: 50%;}
	100% {top: 98%;}
}

/* Mask bottom */
#errorboxoutline:after {
	animation: mask-bottom 2s;
		-moz-animation: mask-bottom 2s;
			-o-animation: mask-bottom 2s;
				-webkit-animation: mask-bottom 2s;
	border-bottom: 4px solid #000;
	background: #000;
	bottom: 98%;
	content: "";
	height: 50%;
	position: absolute;
	right: 0;
	width: 100%;
}

@keyframes mask-bottom {
	0% { bottom: 50%;}
	100% { bottom: 98%;}
}

@-webkit-keyframes mask-bottom {
	0% { bottom: 50%;}
	100% { bottom: 98%;}
}

@-moz-keyframes mask-bottom {
	0% { bottom: 50%;}
	100% { bottom: 98%;}
}

@-o-keyframes mask-bottom {
	0% { bottom: 50%;}
	100% { bottom: 98%;}
}

/* Error Code
------------------------ */
.error-code {
	padding-top: 100px;
}

.error-code span {
	font-size: 180px;
	font-family: 'bebas_neueregular';
}

/* Error Message
------------------------ */
.error-message h2 {
	display: block;
	margin-bottom: 30px;
}

/* Button Home */
#errorboxbody .button-home {
	background: #000;
	color: #fff;
	display: inline-block;
	font-weight: 700;
	font-family: roboto;
	margin-top: 5px;
	padding: 10px 20px;
	text-decoration: none;
	text-transform: uppercase;
}

#errorboxbody .button-home:hover {
	background: #fff;
	color:#000;
}

/* Responsive 
------------------------------------*/

/* Mobile */
@media screen and (max-width: 480px) {
	.error {
		margin-top: -190px;
	}
	body.page-error {
		background: #1a1a1a;
	}

	#errorboxoutline {
		background: transparent;
		height: auto;
	}

	#errorboxoutline:after,
	#errorboxoutline:before {
		display: none;
	}

	#errorboxoutline .error-code {
		padding: 20px;
	}

	.error-code span {
		font-size: 150px;
	}
}