/** 
CSS STYLES

Template: Blake - 404 Not Found Page
Author: reidark
Date: 13/01/2014
Buy on: ThemesForest

Contact: reikaosdark@gmail.com
**/

/** NATIVE ELEMENTS **/

body, html{
	height:100%;
}

body{
	margin:0px;
	border:0px;
	padding:0px;
	background-image:url(../images/body-bg.jpg);
}

h1{
	font:700 8em 'Open Sans';
	margin:0px;
	color:#fff;
	
	opacity:0.6;                       /* Native Support */
	-o-opacity:0.6;                    /* For Opera */
	-moz-opacity:0.6;                  /* For Firefox */
	-webkit-opacity:0.6;               /* For Chrome */
}

h2{
	font:400 1.8em 'Open Sans';
	margin-top:10px;
	color:#fff;
	
	opacity:0.7;                       /* Native Support */
	-o-opacity:0.7;                    /* For Opera */
	-moz-opacity:0.7;                  /* For Firefox */
	-webkit-opacity:0.7;               /* For Chrome */
}

h1, h2{
	transition: all 0.4s;              /* Native Suppoty */
	-o-transition: all 0.4s;           /* for Opera */
	-moz-transition: all 0.4s;         /* for Firefox */
	-webkit-transition: all 0.4s;      /* for Chrome */
}

/** OPACITY FOR H1 AND H2 GROUP **/

h1:hover, h2:hover{
	opacity:1;                       /* Native Support */
	-o-opacity:1;                    /* For Opera */
	-moz-opacity:1;                  /* For Firefox */
	-webkit-opacity:1;               /* For Chrome */
}




/**********************************************************************************************/

/** CLASSES **/

.image-background{
	width:100%;
	height:50%;
	background-image:url(../images/img-bg.jpg);
}

/** CLASS FOR 404 TEXTS **/

.page-text{
	width:80%;
	height:100%;
	margin:auto;
	padding:30px;
	text-align:center;
	height: -webkit-calc(100% - 60px);  /* for Chrome */
	height: -moz-calc(100% - 60px);     /* for Firefox */
	height: -o-calc(100% - 60px);       /* for Opera */
	height: calc(100% - 60px);          /* native support */
}

.page-text p{
	font:300 1.2em 'Raleway';
	color:#fff;
	
	opacity:0.8;                       /* Native Support */
	-o-opacity:0.8;                    /* For Opera */
	-moz-opacity:0.8;                  /* For Firefox */
	-webkit-opacity:0.8;               /* For Chrome */
}

/** CLASS FOR PAGE AFTER IMAGE **/

.page-links{
	width:80%;
	height:100%;
	margin:auto;
	padding:40px;
	text-align:center;
	height: -webkit-calc(100% - 60px);  /* for Chrome */
	height: -moz-calc(100% - 60px);     /* for Firefox */
	height: -o-calc(100% - 60px);       /* for Opera */
	height: calc(100% - 60px);          /* native support */
	
	font:300 1.2em 'Raleway';
}

/** FORM STYLE **/

.page-links input[type=text]{
	width:80%;
	height:30px;
	border:solid 1px #F0F0F0;
	font:300 0.9em 'Raleway';
	padding:10px;
	
	transition: all 0.4s;              /* Native Suppoty */
	-o-transition: all 0.4s;           /* for Opera */
	-moz-transition: all 0.4s;         /* for Firefox */
	-webkit-transition: all 0.4s;      /* for Chrome */
}

.page-links input[type=text]:focus{
	outline:0;
	border:1px solid #0099FF;
}

.page-links input[type=submit]{
	padding:15px;
	font:300 0.9em 'Open Sans';
	margin-left:-10px;
	background-color:#6699FF;
	color:#fff;
	border:0px;
}

.page-links input{
	z-index:999999;
}

/** SOCIAL LINKS **/

.page-links p{
	margin-top:40px;
}

.page-links img{
	width:42px;
	height:42px;
	padding:2px;
	
	opacity:0.7;                       /* Native Support */
	-o-opacity:0.7;                    /* For Opera */
	-moz-opacity:0.7;                  /* For Firefox */
	-webkit-opacity:0.7;               /* For Chrome */
	
	transition: all 0.4s;              /* Native Suppoty */
	-o-transition: all 0.4s;           /* for Opera */
	-moz-transition: all 0.4s;         /* for Firefox */
	-webkit-transition: all 0.4s;      /* for Chrome */
}

.page-links img:hover{
	opacity:1;                       /* Native Support */
	-o-opacity:1;                    /* For Opera */
	-moz-opacity:1;                  /* For Firefox */
	-webkit-opacity:1;               /* For Chrome */
}

/** BUTTON BACK HOME **/

.back-home{
	text-decoration:none;
	color:#787878;
	padding:10px;
	border-radius:5px;
	
	opacity:0.7;                       /* Native Support */
	-o-opacity:0.7;                    /* For Opera */
	-moz-opacity:0.7;                  /* For Firefox */
	-webkit-opacity:0.7;               /* For Chrome */
	
	transition: all 0.4s;              /* Native Suppoty */
	-o-transition: all 0.4s;           /* for Opera */
	-moz-transition: all 0.4s;         /* for Firefox */
	-webkit-transition: all 0.4s;      /* for Chrome */
	
	border:solid 1px #E0E0E0;
}

.back-home:hover{
	background-color:#E0E0E0;
	color:#F8F8F8;
}


/***********************************************************************************************************/

/** RESPONSIVE AREA **/

/** FOR OLD SCREENS: 800PX **/

@media (max-width: 800px){

	h1{
	font:700 7em 'Open Sans';
	}
	
	.image-background{
	height:60%;
	}
	
	.page-text{
	width:90%;
	padding:1px;
	height: -webkit-calc(100% - 60px);  /* for Chrome */
	height: -moz-calc(100% - 60px);     /* for Firefox */
	height: -o-calc(100% - 60px);       /* for Opera */
	height: calc(100% - 60px);          /* native support */
	}
	
	.page-links p{
	padding-bottom:25px;
	}

}

/** TABLETS: 660PX **/

@media (max-width: 660px){

	h1{
	font:700 6.5em 'Open Sans';
	}
	
	.image-background{
	height:75%;
	}
	
}

/** TABLETS: 480PX **/

@media (max-width: 480px){

	h1{
	font:700 5.5em 'Open Sans';
	}
	
	h2{
	font:400 1.5em 'Open Sans';
	}
	
	.image-background{
	height:90%;
	}
	
	.page-text{
	width:90%;
	}
	
}

/** SMARTPHONE: 320PX **/

@media (max-width: 320px){

	h1{
	font:700 4.5em 'Open Sans';
	}
	
	h2{
	font:400 1.3em 'Open Sans';
	}
	
	.image-background{
	height:55%;
	}
	
	.page-text{
	width:100%;
	}
	
	.page-links input[type=text]{
	width:50%;
	height:25px;
	padding:10px;
	}
	
	.page-links input[type=submit]{
	padding:13px;
	font:300 0.9em 'Open Sans';
	margin-left:-10px;
	background-color:#6699FF;
	color:#fff;
	border:0px;
	}
	
}