/*
====================================================================================
Author       : Jaguar_Themes
Template Name: Creative Animated 404 Pages
Version      : 1.0
Author URL   : https://www.jaguarthemes.com
Created by   : Jaguar Themes
Description  : Creative animated 404 Pages. Pages with a clean & unique design, ideal for all Purpose.  Valid HTML and CSS. All common HTTP errors, like 401, 403, 404, 500 and 503 or for many other purposes. 
Tags	     : 404, Error page, Page Not found, 404 Error, Creative, Modern, Error, animated
====================================================================================


*/


@import url('https://fonts.googleapis.com/css?family=Cabin+Sketch|Lobster');
 * { padding:0; margin:0; }
 body
 {
	 	font-family: 'Lobster', cursive;
 }
 /* For Dark Background */
#main
{
		width:100%;
		height:100vh;
		/* Main Background */
		background: #000 url(../images/sky.png) repeat-x 0 0;
        color: #FFF;
        overflow-x:hidden;
        position: relative;
}
/* For Light Background */
#main_2
{
		width:100%;
		height:100vh;
		/* Main Background */
		background: #A7C4DF url(../images/sky_2.png) repeat-x 0 0;
        color: #FFF;
        overflow-x:hidden;
        position: relative;
}
#control_ripple{
	  width: 100%;
      height:100px;
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 10;
}
#ripple {
      position: relative;
      z-index:2;
      width: 100%;
      margin-bottom: -5px;
}
div#ripple {
        position: absolute;
        top: 325px;
        background-color: #060606;
        bottom: 5px;
        min-height: 400px;
        opacity: .7;
        left: 0px;
}
canvas#ripple {
        height: 100%;
}
/* Fish Position */
 #fish {
      position: absolute;
      left: 60%;
      top: 225px;
      z-index:1;
}
/* Cloud */
#cloud_1 {
        position: absolute;
        top: 50px;
        width: 189px;
        height: 88px;
        left: 50px;
		/* Cloud Image1 */
        background: transparent url(../images/cloud1.png) no-repeat scroll 0 0;
}
#cloud_2 {
        position: absolute;
        top: 220px;
        width: 69px;
        height: 29px;
        left: 275px;
		/* Cloud Image2 */
        background: transparent url(../images/cloud2.png) no-repeat scroll 0 0;
}
/* Bird Image position */
#bird {
        position: absolute;
        top: 150px;
        left: 75px;
        margin-top: 10px;
}
/* Text Detail */
.detail {
		position: absolute;
		top: 55%;
		left: 100px;
		z-index: 5;
}
.detail h1
{
		font-size:50px;
		font-family: 'Cabin Sketch', cursive;
}
.detail h2
{
		margin:10px 0;
		font-size:30px;
}
.detail p
{
		font-size:18px;
		margin-bottom:30px;
}

/* Button */
.button1{
	line-height: 44px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	color:#000;
	margin-right:30px;
}
.button1 span {
	position: relative;
	display: inline-block;
	padding: 0 25px;
	background: #fff;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	text-align:center;
}
.button1 span::before {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	content: attr(data-hover);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
}
.button1:hover span,
.button1:focus span {
	-webkit-transform: rotateX(90deg) translateY(-22px);
	-moz-transform: rotateX(90deg) translateY(-22px);
	transform: rotateX(90deg) translateY(-22px);
}

.button1:hover span::before,
.button1:focus span::before {
	background: #000;	
	color:#fff;
}
/* Social Icons */
.social
{
	position:absolute;
	z-index: 5;
	bottom:20px;
	left:100px;
	text-align:center;
}
.social_icon
{

	list-style:none;
}
.social_icon li a
{
	color:#FFFFFF;
	margin-right:14px;
	font-size:16px;
	display: inline-block;
	overflow: hidden;
}
.social_icon li a i 
{
	transition: transform 0.25s ease, opacity 0.2s linear;
	-webkit-transition: -webkit-transform 0.25s ease , opacity 0.2s linear;
	position:relative;
	line-height:24px;
}
.social_icon li a:hover i 
{
	-webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
}
.social_icon li a i:after 
{
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);	
	color:#FF0000;
	font-size:16px;
	line-height:24px;
}
.social_icon li .fa-facebook:after {
    content:"\f09a";
}
.social_icon li .fa-google-plus:after {
    content:"\f0d5";
}
.social_icon li .fa-twitter:after {
    content:"\f099";
}
.social_icon li .fa-pinterest:after {
    content:"\f0d2";
}
.social_icon li .fa-instagram:after {
    content:"\f16d";
}
.social_icon li .fa-linkedin:after {
    content:"\f0e1";
}
.social_icon li .fa-dribbble:after {
    content:"\f17d";
}
.social_icon li a i:before {
	width: 100%;
}
.social_icon li a i:after 
{	
	color:#000;
}