/*----------------------------

   ** Reset.**

----------------------------*/



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, center, u, b, i {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-border-radius: 0;
	border-radius: 0;
}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;  /* for adding external font support */
	font-weight: normal;
	font-size: 16px;
	word-spacing: normal;
	color: #545454;
    -webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
:focus {
	outline: 0
}
ol, ul {
	list-style: none
}
input, textarea {
	margin: 0;
	padding: 0
}
input[type=text] {
	outline: none;
}
input[type=text]::-ms-clear {
	display: none;
}
input[type=submit] {
	-webkit-appearance: none;
	appearance: none;
}
/*----------------------------
   ** Custom Style **
----------------------------*/
*, *:after, *::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
    background-color: #adadad ;  /* to change body background  color*/
}
img {
	max-width: 100%;
}
a {
	color: #fff;       /* to change link color*/
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
}
a:hover {
	color: #fff;  /* to change link:hover color*/
	text-decoration: none;
}
.content-inner {
	position: relative;
	height: auto !important;
	min-height: 99%;
	z-index: 100;
	padding-bottom: 60px;
}
.clearfix {
	clear:both;
	float:none;
}

/*----------------------------

    ** 404 text **

----------------------------*/

canvas{

	background: #adadad ; 

	position:absolute;

	width:100%;

	

	

}
#error span {
			  animation: upper 11s linear infinite;font-weight: 900;
			}
			#code span:nth-of-type(2) {
			  animation: lower 10s linear infinite;
			}
			#code span:nth-of-type(1) {
			  text-shadow: none;opacity:.4;
			  animation: lower 10s linear infinite;
			      font-family: "Trebuchet MS", sans-serif;
    font-weight: 900;
			  
			}
			
			@keyframes upper {
			  0%,19.999%,22%,62.999%,64%, 64.999%,70%,100% {
				opacity:.99; text-shadow: 0 0 80px #ffffff,0 0 30px #000000,0 0 6px #000000;
			  }
			  20%,21.999%,63%,63.999%,65%,69.999% {
				opacity:0.4; text-shadow: none; 
			  }
			}
			@keyframes lower {
			  0%,19.999%,22%,62.999%,64%, 64.999%,70%,100% {
				opacity:0.99; text-shadow: 0 0 80px red,0 0 30px FireBrick,0 0 6px DarkRed;
			  }
			   20%,21.999%,63%,63.999%,65%,69.999% {
				opacity:0.4; text-shadow: none; 
			  }
			}
.full-width{

	background-color: #adadad;/* to change background color*/

	width:100%;

	min-height:520px;

/* 	-moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.4);

	-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.4);

	box-shadow:0px 1px 1px 1px rgba(0,0,0,0.4);

	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=90, Color='#000000')";

	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=90, Color='#000000'); */

}



.main {

	position: relative;

	padding-top:200px;

}

.desc {

	position: relative;

	z-index: 100;

	

	

}

.e404style {

   font-size: 4em;

  font-family: 'arial', cursive;

  text-align: center;

  text-transform: uppercase;

  text-shadow: 0 0 80px #FF0000,0 0 30px FireBrick,0 0 6px DarkRed;

  color: #FF0000;

}

.e404style p { margin:0; }

#error:hover { text-shadow: 0 0 200px #ffffff,0 0 80px #000000,0 0 6px #000000; }

#code:hover { text-shadow: 0 0 100px #FF0000,0 0 40px FireBrick,0 0 8px DarkRed; }

#error {

  color: #fff;

  text-shadow: 0 0 80px #ffffff,0 0 30px #000000,0 0 6px #000000;

}





.desc h4{

	

	font-size: 14px;

	line-height: 20px;

	padding-bottom: 5px;

	padding-top: 5px;

	margin: 0 auto;

	text-align:center;

	max-width:800px;

	font-weight:300;

	letter-spacing:1px;

	color:#fff;

/* 	text-transform:uppercase; */

}

.desc h4 a {

	text-decoration: none;

	font-weight:900;

}

.desc h4 a:hover {

	text-decoration: underline;

	font-weight:900;

}



/* ------------------------------

     **Search Box**

--------------------------------*/



.search {

	position: relative;

	height: 40px;

	margin: 20px 0px;

	max-width:800px;

    margin-top: 30px;

	}

#search input::-webkit-input-placeholder, #search input:-moz-placeholder, #search input::-moz-placeholder, #search input:-ms-input-placeholder {

	color: #999;

}

#search input[type="text"] {

	width: 98%;

	padding: 14px 60px 15px 30px;

	border: none;

	color: #17C3B9;

	font-size: 18px;

    min-height: 54px;

	border-radius: 10px;

}

#search input[type="text"]:focus {

	background-color: rgba(255,255,255,1);

}

.search-submit {

	background-color: #FF0000;

	color: #fff;

	font-size: 16px;

	border-radius: 8px;

	border: none;

	padding: 11px;

	left: 27px;

	margin-left: -82px;

	position: relative;

	transition: all 0.3s;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	-o-transition: all 0.3s;



}

.search-submit:hover {



opacity:0.7;



}



/*----------------------------

        **Footer**

----------------------------*/



.footer {

	position: relative;

    bottom:0;

    left:0;

	padding: 10px 0px;

	margin: 0px;

	width: 100%;

	z-index: 101;

	background-color:white;

	height:130px;

}

.footer a{

 color:#141414;

}



/*--------------------------------------------------

       **Social Icons Roll Over**

---------------------------------------------------*/

/* entypo */

[class*="entypo-"]:before {

  font-family: 'entypo', sans-serif;

}

.social-icons {

	clear:both;

	overflow:hidden;

	height:60px;

	margin-top:10px;

	margin-bottom:10px;

}

.social-icons p{

  font-family:tahoma, sans-serif;

  font-size:12px;

  width:100%;

  bottom:10px;

  position:absolute;

}

.social-icons  a{

  text-decoration:none;

  display:inline-block;

  font-size:40px;

  width:60px;

  overflow:hidden;

  text-align:center;

  position:relative;

  transition:all 0.5s;

  color:#CB1F26 !important;

}
.social-icons .p {
	color:#FF0000;
}
.social-icons .g {
  color:#FF0000;
}
.social-icons .f {
  color:#FF0000;
}
.social-icons.t {
	color:#FF0000;
}
.fa, .fb, .ta, .tb, .ga, .gb, .pa, .pb{
	display:block;
}
.fb, .tb, .gb, .pb{
  	color:white;
}
.fb {
	background:#FF0000;
}
.tb {
	background:#FF0000;
}
.gb {
	background:#FF0000;
}
.pb {
 	background:#FF0000;
}
.f:hover, .t:hover, .g:hover, .p:hover {
  transform: translateY(-58px);
  -moz-transform: translateY(-58px);
  -webkit-transform: translateY(-58px);
  transition:all 0.5s;
  -moz-transition:all 0.5s;
  -webkit-transition:all 0.5s;
}
.social-icons li {
	float: left!important;
	margin-right: 6px!important;
	margin-bottom: 6px!important;
	padding: 0px!important;
	display: inline!important;
	width: auto!important;
}
.social-icons li a {
	-moz-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	display: block!important;
	float: left!important;
	margin: 0!important;
	padding: 0!important;
	width: 40px!important;
	height: 40px!important;
	text-indent: -9999px!important;
	opacity:1;
}
/*------------------------------
      **Footer links Effect ** 
--------------------------------*/
.right {
	float:right;
}
.footer nav a {
	position: relative;
	margin: 10px;
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 18px;
	color:#545454;
	float:right;
	padding-top:6px;
}
.footer nav a:hover,
.footer nav a:focus {
	outline: none;
}
.footer nav a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 4px;
	background: rgba(255,0,0,0.8);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}
.footer nav a::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: rgba(255,0,0,0.8);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}
.footer nav a:hover::before,
.footer nav a:focus::before,
.footer nav a:hover::after,
.footer nav a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

.nav-i {
	margin-top:25px
}
.copyright {
	clear: both;
	font-size: 14px;
	text-align: left;
    padding-left: 25px;
	padding-left: 14px;
}
.copyright a:hover {
	text-decoration:underline;
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media (max-width:480px) {
	.content {
		margin-top: 0px;
	}
	canvas {
		height:567px !important;
	}
	.desc h4 {
		font-size: 16px;
		line-height: 26px;
		letter-spacing:0px;
	}
	.e404style {
		font-size:62px !important;
	}
	.content-inner {
		padding-bottom:0px !important;
	}
	.text404-cut span {
		line-height: 80px;
		font-size: 80px;
	}
	.footer nav a {
		float:left;
		font-size:12px;
	}
	.copyright {
		font-size: 12px;
		padding: 0px;
	}
}
@media (max-width:960px) {
	.clear {
		clear:both;
		float:none;
		width:100%;
	}
	.right{
		float:none;
		clear:both;
	}
	.footer nav a {
		float:none;
	}
	.footer nav a:first-child {
		margin:10px 0px;
	}
}