@charset "utf-8";

/* 
Author:	Hasan Ali
.CSS Document.

Good you are here, I like people that read source. 
If you are a talented coder and work on freelance basis
contact me at 'contact@aiurmedia.com' for some freelance work.
*/
@font-face {
	font-family: 'RAPSCALL';
src:url('../fonts/former.ttf');
}
@font-face {
	font-family: 'SocietyEditor_Personal_Use';
src:url('../fonts/SocietyEditor_Personal_Use.ttf');
}

@font-face {
	font-family: 'Kalinga';
src:url('../fonts/Kalinga.otf');
src:url('../fonts/kalinga.ttf');
}
@font-face {
	font-family: 'air-millhouseitalic';
src:url('../fonts/SF-Eccentric-Opus.ttf');
}
{
margin:0px;
padding:0px;
background-repeat: no-repeat;
}
/*section{width:800px; height:auto; margin:100px auto;}*/
p{font-family:Kalinga, Arial, Helvetica, sans-serif; color:#000; font-size:15px; text-align:justify; line-height:24px }
ul{list-style:url(../images/dot.png);} 
.divider{width:800px; height:50px; margin:0 auto; background:url(../alien/images/divider.png) top center no-repeat; } 
.war-title-heading{font-family:air-millhouseitalic, Arial, Helvetica, sans-serif; font-size:50px; z-index:6; text-align:center;margin:0 auto;
color:#FFF; text-shadow: -3px 0 4px #000;display:block;}
.war-title-heading2{font-family:SocietyEditor_Personal_Use, Arial, Helvetica, sans-serif;font-size:25px;  z-index:6; text-align:center; margin:0 auto;
color:#000; text-shadow: -3px 0 4px rgba(102,102,102,0.5); font-weight:bolder;padding-top:50px;}
.main-title-heading{font-family:RAPSCALL, Arial, Helvetica, sans-serif;font-size:50px;  z-index:6; text-align:center; margin:0 auto;
color:#0D5F86; text-shadow: -3px 0 4px rgba(102,102,102,0.5); font-weight:bolder;padding-top:30px;}

@media(min-width:768px){
.war-title-heading2{
	font-size:50px;
	padding-top:50px;

}
.main-title-heading{
	font-size:150px;
	padding-top:110px;
}
}


body {	
overflow-x:hidden;
}

::-webkit-scrollbar-thumb:vertical { 
background-color:#333;
height:100px;
padding-right:5px;
}

::-webkit-scrollbar-thumb:horizontal { 
background-color:#333;
height:10px;
}

::-webkit-scrollbar { 
height:10px;
width:10px; 
background-color:#0a0808;

}


/**************** MAIN ****************/

body {
background:url('../skin/space2.png') repeat-x scroll center top;
color: #111;
font-weight:normal; 
text-align:left;
margin: 0px 0px 0px 0px;
padding:0px;
height:100%;
width:100%;      
}

#body{
position:relative;
width:100%;
overflow:hidden;
position:relative;
margin-bottom:0px;   
}

.content {
}

.wrap-moon {
width:626px;
height:626px;
left:-200px;
position:absolute;
margin-top:-270px;
z-index:-200;
background:transparent url('../skin/moon2.png') no-repeat scroll center top;
}

.moobig {
width:500px;
height:500px;
margin-left:auto;
margin-right:auto;
position:absolute;
z-index:-200;
background:transparent url('../skin/moonbig.png') no-repeat scroll center top;
}

.mainhill {
width:100%;
height:1200px;
background:transparent url('../skin/burlin-wall.jpg') no-repeat scroll center top;
  
}

.toptop {
width:100%;
height:246px;
margin-top:-80px;
background:transparent url('../skin/toptop.png') no-repeat top right;       
}

#intro {
margin-right:auto;
margin-left:auto;
padding:10px;
background-image:url('../skin/portbg5.jpg');
background-repeat:repeat;  
height:auto;
margin-top:-200px;
}

.panel {
position: absolute;
top: 1200px;
right: 0;
display: none;
background: #000000;
border:1px solid #111111;
width: 170px;
height: 540px;
padding: 30px 30px 30px 30px;
filter: alpha(opacity=85);
opacity: .90;
z-index:18000;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #ff8000;
font-family: 'Asap', sans-serif;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
top: 1140px; 
right: 20px;
font-weight: 700;
background:#000000;
width:40px;
height:40px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
box-shadow:#0a0a0a 0px 7px 0px;
-webkit-box-shadow:#0a0a0a 0px 7px 0px;
-moz-box-shadow:#0a0a0a 0px 7px 0px;
-o-box-shadow:#0a0a0a 0px 7px 0px;
-ms-box-shadow:#0a0a0a 0px 7px 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-animation-name: INFO;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-direction: alternate;
-moz-animation-name: INFO;
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
display: block;
z-index:20000;
text-decoration:none;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
font-size: 16px;
color:#fff;
font-weight: 700;
background:#ff8000;
display: block;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
width:44px;
height:44px;
-moz-border-radius: 22px;
text-decoration:none;
}

.open{
width:40px;
height:40px;
font-size:30px;
color:#ff8000;
font-weight:bold;
padding-left:17px;
padding-top:10px;
text-shadow:#222 2px 2px;
text-decoration:none;
}
.open:hover{
color:#fff
}

.hire {
float:right;
}

.lefttop {
margin-top: 18px;
margin-bottom: 50px;
width: 600px;
position: relative;
color: #CCC;
font-size: 18px;
letter-spacing: 5px;
font-family: 'Asap', sans-serif;
text-shadow:#000 2px 2px 0px;
}


.leftybottom {
margin-top: 40px;
margin-bottom: 50px;
margin-right:20px;
float: left;
width: 450px;
position: relative;
color: #CCC;
font-size: 18px;
letter-spacing: 5px;
font-family: 'Asap', sans-serif;
text-shadow:#000 2px 2px 0px;
display:block;
}

.entire {
width: 800px;
height: 600px;
margin-bottom: 25px;
margin-left: auto;
margin-right: auto;
}

.enter{
background-color:#000;
display: block;
float: left;
margin-right:25px;
padding: 0;
width:240px;
height:170px;
border:5px solid #000;
margin-bottom:25px;
overflow:hidden;
visibility: visible;
position:relative;
box-shadow: 0px 2px 5px rgba(0,0,0, .7);
-webkit-transition: all 2s ease-in-out;
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0, .7);
-moz-transition: all 2s ease-in-out;
-moz-box-shadow: 0px 2px 5px rgba(0,0,0, .7);
-ms-transition: all 2s ease-in-out;
-ms-box-shadow: 0px 2px 5px rgba(0,0,0, .7);
-o-transition: all 2s ease-in-out;
-o-box-shadow: 0px 2px 5px rgba(0,0,0, .7);
}

.enterlast{
background-color:#000;
display: block;
float: left;
padding: 0;
width:240px;
height:170px;
border:5px solid #000;
margin-bottom:25px;
overflow:hidden;
visibility: visible;
position:relative;
box-shadow: 0px 2px 5px rgba(0,0,0, .7);
-webkit-transition: all 2s ease-in-out;
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0, .7);
-moz-transition: all 2s ease-in-out;
-moz-box-shadow: 0px 2px 5px rgba(0,0,0, .7);
-ms-transition: all 2s ease-in-out;
-ms-box-shadow: 0px 2px 5px rgba(0,0,0, .7);
-o-transition: all 2s ease-in-out;
-o-box-shadow: 0px 2px 5px rgba(0,0,0, .7);
}

/**************** SKILLS ****************/


.ph{
margin-right:5px;
margin-left:5px;
display:block;
float:left;
margin-bottom:10px;
padding:5px;
background-color:#000;
color:#0d79bd;
font-size:32px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.ph:hover{
margin-left:30px;
-webkit-transform: scale(1.2);
-webkit-transition: all 1s ease-in-out;
-moz-transform: scale(1.2);
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.2);
-ms-transition: all 1s ease-in-out;
-o-transform: scale(1.2);
-o-transition: all 1s ease-in-out;
}

.fl {
margin-right:5px;
margin-left:5px;
display:block;
float:left;
margin-bottom:10px;
padding:5px;
background-color:#000;
color:#F9CDAD;font-size:16px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.fl:hover{
margin-left:-20px;
-webkit-transform: scale(1.2);
-webkit-transition: all 1s ease-in-out;
-moz-transform: scale(1.2);
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.2);
-ms-transition: all 1s ease-in-out;
-o-transform: scale(1.2);
-o-transition: all 1s ease-in-out;
}

.ht {
margin-right:5px;
margin-left:5px;
display:block;
float:left;
margin-bottom:10px;
padding:5px;
background-color:#000;
color:#D95B43;font-size:32px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.ht:hover{
margin-left:-20px;
-webkit-transform: scale(1.2);
-webkit-transition: all 1s ease-in-out;
-moz-transform: scale(1.2);
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.2);
-ms-transition: all 1s ease-in-out;
-o-transform: scale(1.2);
-o-transition: all 1s ease-in-out;
}

.cs3 {
margin-right:5px;
margin-left:5px;
display:block;
float:left;
margin-bottom:10px;
padding:5px;
background-color:#000;
color:#ECD078;font-size:32px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.cs3:hover{
margin-left:30px;
-webkit-transform: scale(1.2);
-webkit-transition: all 1s ease-in-out;
-moz-transform: scale(1.2);
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.2);
-ms-transition: all 1s ease-in-out;
-o-transform: scale(1.2);
-o-transition: all 1s ease-in-out;
}

.php {
margin-right:5px;
margin-left:5px;
display:block;
float:left;
margin-bottom:10px;
padding:5px;
background-color:#000;
color:#C02942;font-size:28px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.php:hover{
margin-left:30px;
-webkit-transform: scale(1.2);
-webkit-transition: all 1s ease-in-out;
-moz-transform: scale(1.2);
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.2);
-ms-transition: all 1s ease-in-out;
-o-transform: scale(1.2);
-o-transition: all 1s ease-in-out;
}

.js {
margin-right:5px;
margin-left:5px;
display:block;
float:left;
margin-bottom:10px;
padding:5px;
background-color:#000;
color:#542437;font-size:24px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.js:hover{
margin-left:30px;
-webkit-transform: scale(1.2);
-webkit-transition: all 1s ease-in-out;
-moz-transform: scale(1.2);
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.2);
-ms-transition: all 1s ease-in-out;
-o-transform: scale(1.2);
-o-transition: all 1s ease-in-out;
}

.wp {
margin-right:5px;
margin-left:5px;
display:block;
float:left;
margin-bottom:10px;
padding:5px;
background-color:#000;
color:#FC9D9A;font-size:30px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.wp:hover{
margin-left:30px;
-webkit-transform: scale(1.2);
-webkit-transition: all 1s ease-in-out;
-moz-transform: scale(1.2);
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.2);
-ms-transition: all 1s ease-in-out;
-o-transform: scale(1.2);
-o-transition: all 1s ease-in-out;
}

.jm {
margin-right:5px;
margin-left:5px;
display:block;
float:left;
margin-bottom:10px;
padding:5px;
background-color:#000;
color:#53777A;font-size:24px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.jm:hover{
margin-left:30px;
-webkit-transform: scale(1.2);
-webkit-transition: all 1s ease-in-out;
-moz-transform: scale(1.2);
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.2);
-ms-transition: all 1s ease-in-out;
-o-transform: scale(1.2);
-o-transition: all 1s ease-in-out;
}

.il {
margin-right:5px;
margin-left:5px;
display:block;
float:left;
margin-bottom:10px;
padding:5px;
background-color:#000;
color:#ffb400;font-size:30px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.il:hover{
margin-left:30px;
-webkit-transform: scale(1.2);
-webkit-transition: all 1s ease-in-out;
-moz-transform: scale(1.2);
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.2);
-ms-transition: all 1s ease-in-out;
-o-transform: scale(1.2);
-o-transition: all 1s ease-in-out;
}


/**************** SOCIAL****************/

.center {
margin-bottom: 10px;
height: 527px;
}


.illuminate{
margin-top:-170px;
height:300px;
width:800px;
margin-left:auto;
margin-right:auto;
}

.facebook{
width:100px;
height:200px;
background-image:url(/skin/facebook.png);
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-webkit-animation-name: FB;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-direction: alternate;
-moz-animation-name: FB;
-moz-animation-duration: 3s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
cursor:pointer;
position:relative;
z-index:3;
float:left;
margin-left:75px;
}

.facebook:hover{
width:100px;
height:200px;
-webkit-animation-name: FBHOV;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-direction: alternate;
-moz-animation-name: FBHOV;
-moz-animation-duration: .5s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
cursor:pointer;
}

.twitter{
width:100px;
height:200px;
background-image:url(/skin/twitter.png);
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-webkit-animation-name: TW;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-direction: alternate;
-moz-animation-name: TW;
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-direction: alternate;
float:left;
margin-top: 50px;
position:relative;
z-index:3;
margin-left:190px;
}

.twitter:hover{
width:100px;
height:200px;
-webkit-animation-name: TWHOV;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-direction: alternate;
-moz-animation-name: TWHOV;
-moz-animation-duration: .5s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-direction: alternate;
}

.tumblr{
width:100px;
height:200px;
background-image:url(/skin/tumblr.png);
position:relative;
z-index:3;
float:left;
margin-left:150px;
}

.tumblr:hover{
-webkit-animation-name: TBHOV;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 3;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-direction: alternate;
-moz-animation-name: TBHOV;
-moz-animation-duration: .5s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 3;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-direction: alternate;
}

.case {
margin-bottom:600px;
}
/****************sec*****************/


.righttop {
margin-top: -18px;
margin-bottom: 50px;
margin-right:40px;
float: right;
width: 580px;
position: relative;
color: #CCC;
font-size: 18px;
letter-spacing: 5px;
font-family: 'Asap', sans-serif;
text-shadow:#000 2px 2px 0px;
}

.introbox {
 width:950px;
}

#portfolio {    
width:100%;
height:100px;
margin-right:auto;
margin-left:auto;
background-image:url('../skin/portbg2.jpg');
padding-left:40px;
}

.porttext {
width:600px;
color: #ccc;
font-size: 18px;
letter-spacing: 5px;
font-family: 'Asap', sans-serif;
text-shadow:#000 2px 2px 0px;
margin-bottom:20px;
display:block;
}

.porttext2 {
width:600px;
color: #ccc;
font-size: 18px;
letter-spacing: 5px;
font-family: 'Asap', sans-serif;
text-shadow:#000 2px 2px 0px;
margin-bottom:70px;
display:block;
}

.itemdeshead {
width: auto;
margin-top: 50px;
margin-left: 45px;
margin-right:400px;
margin-bottom: 20px;
color: #CCC;
background-color: black;
padding: 10px 7px 0px 5px;
font-size: 24px;
font-family: 'Asap', sans-serif;
float:left;
height:40px;
}

.itemdes{
margin-left:50px;
width:700px;
color: #ccc;
font-size: 18px;
letter-spacing: 5px;
font-family: 'Asap', sans-serif;
text-shadow:#000 2px 2px 0px;
float:left;
display:block;
}

.item {
width:700px;
margin-left:50px;
margin-bottom:100px;
box-shadow:#0e0e0e 0px 0px 10px 0px;
-webkit-box-shadow:#0e0e0e 0px 0px 10px 0px;
-moz-box-shadow:#0e0e0e 0px 0px 10px 0px;
-ms-box-shadow:#0e0e0e 0px 0px 10px 0px;
-o-box-shadow:#0e0e0e 0px 0px 10px 0px;
}



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


.description {
position: absolute;
-webkit-transition: 0.5s ease-in;
border: 5px solid #F3EFEA;
display: none;
text-align: center;
padding-top: 50px;
background-color: #E8DFD5;
border-image: initial;
opacity: 1;
background-color: #FF8000;
width:240px;
height:170px;
}

.thumb {
width:240px;
height:auto;
background-color:#fff;
padding:0;
top-border-radius:4px;
overflow:hidden;
-webkit-transition: 0.5s ease-in;
-moz-transition: 0.5s ease-in;
-ms-transition: 0.5s ease-in;
-o-transition: 0.5s ease-in;
}

.thumb:hover {
-webkit-transform: rotate(5deg) scale(1.1);
-webkit-transition: 0.5s ease-in;
-webkit-animation-name: GLOW;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;

-moz-transform: rotate(5deg) scale(1.1);
-moz-transition: 0.5s ease-in;
-moz-animation-name: GLOW;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;

-o-transform: rotate(5deg) scale(1.1);
-o-transition: 0.5s ease-in;
-o-animation-name: GLOW;
-o-animation-duration: 1s;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0;
-o-animation-play-state: running;

-ms-transform: rotate(5deg) scale(1.1);
-ms-transition: 0.5s ease-in;
-ms-animation-name: GLOW;
-ms-animation-duration: 1s;
-ms-animation-timing-function: ease-in-out;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 0;
-ms-animation-play-state: running;
}

.enter:hover .note {opacity: .7;}
.enterlast:hover .note {opacity: .7;}

.note {
-webkit-transition: 1s ease-in;
opacity: 0;
height: 50px;
width: 100%;
position:absolute;
background-color: #222;
z-index: 800;
float:left;
top:0px;
}

.note .notes1{
color: white;
font-family: arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
letter-spacing: 0px;
font-weight: bold;
display: block;
float: left;
padding-left:15px;
padding-top:15px;
font-family: 'Asap', sans-serif;
}

#contact {
height:850px;
margin-right:auto;
margin-left:auto;   
background-image:url('../skin/contact3.png');
background-repeat:no-repeat;
background-position:center;
padding-left:10px;
padding-right:10px;
padding-top:0px;
margin-bottom:0px;
}

#title {
font-size:88px;
color:#fafafa;
font-family: 'Trade Winds', cursive;
text-align:right;
margin-right:25px;
margin-top:180px;
text-shadow: #00e068 0px 0px 15px;
}

/*
-------
portchange
-------
*/

.ltarrow {
margin-top:-170px;
float:left;
-webkit-transition: all 1s ease-in-out;
}
.ltarrow:hover {
margin-top:-170px;
float:left;
-webkit-transform: translate(-1em,0);
}


/**************** Horizontals ****************/

.horitop{
width:100%;
height:268px;
background-image:url('../skin/top1.png');
background-position:center;
display:block;
margin-top:-400px;
position:relative;
z-index:10000;
}

.horicross {
width:980px;
margin-left:auto;
margin-right:auto;
height:17px;
background-image:url('../skin/horicross.png');
display:block;
margin-top:-115px;
margin-bottom:70px;
}

.horisand {
width:2050px;
height:63px;
background-image:url('../skin/sand.png');
display:block;
margin-top:-23px;
position:relative;
}

.horiwat {
background:url('../skin/wathori5.png');
background-position:0 0;
background-repeat:repeat-x;
height:30px;
width:9999px;
margin-top:-30px;

-webkit-animation-name: FLOW;
-webkit-animation-duration: 300s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;

-moz-animation-name: FLOW;
-moz-animation-duration: 300s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;

-o-animation-name: FLOW;
-o-animation-duration: 300s;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0;
-o-animation-play-state: running;

-ms-animation-name: FLOW;
-ms-animation-duration: 300s;
-ms-animation-timing-function: ease-in-out;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 0;
-ms-animation-play-state: running;
}

.horicnt {
background-image:url('../skin/darkrock.png');
background-position:left;
width:100%;
height:371px;
margin-top:-340px;
}

.horiwatbot {
height:500px;
background:url('../skin/watbot5.jpg') center;
position:relative;
z-index:-1;
}

/**************** LOTS OF HEADINGS ****************/

h1 {
font-family: 'Boogaloo', cursive;
color:#fdb33f;
font-size:34px;
letter-spacing:5px;
text-shadow: #000 3px 3px 0px,#222 4px 4px 0px;
text-transform:uppercase;
margin-bottom:30px;
}



h2 {
font-family: 'Boogaloo', cursive;
color:rgb(244, 68, 34);
font-size:34px;
letter-spacing:5px;
text-shadow: #000 3px 3px 0px,#222 4px 4px 0px;
text-transform:uppercase;
text-align:left;
margin-bottom:30px;
}

h3 {
font-family: 'Boogaloo', cursive;
color:rgb(189, 103, 243);
font-size:34px;
letter-spacing:5px;
text-transform:uppercase;
text-align:left;
text-shadow: #000 3px 3px 0px,#222 4px 4px 0px;
}

#body h4 {
font-family: 'Boogaloo', cursive;
color:rgb(0, 224, 104);
font-size:34px;
letter-spacing:5px;
text-transform:uppercase;
text-align:left;
text-shadow: #222 2px 1px 0px;
text-shadow: #000 3px 3px 0px,#222 4px 4px 0px;
}

h5 {
font-family: 'Boogaloo', cursive;
color:rgb(244, 68, 34);
font-size:60px;
letter-spacing:5px;
text-shadow: #c02726 3px 1px 0px;
text-transform:uppercase;
text-align:left;
margin-bottom:100px;
text-shadow: #000 3px 3px 0px,#222 4px 4px 0px;
}

h6 {
font-family: 'Boogaloo', cursive;
color:rgb(192, 39, 38);
font-size:34px;
letter-spacing:5px;
text-shadow: #000 3px 3px 0px,#222 4px 4px 0px;
text-transform:uppercase;
text-align:left;
margin-bottom:30px;
margin-top:-20px;
}

h7 {
font-family: 'Slackey', cursive;
color:#f44422;
font-size:34px;
letter-spacing:5px;
text-transform:uppercase;
text-align:left;
text-shadow: #222 2px 1px 0px;
}


h8 {
font-family: 'Boogaloo', cursive;
color:#bd67f3;
font-size:20px;
letter-spacing:5px;
text-transform:uppercase;
text-align:left;
text-shadow: #222 2px 1px 0px;
}

/**************** BLACKNEVE ****************/

.gr{
margin-left:auto;
margin-right:auto;
margin-bottom:50px;
margin-top:200px;
position:relative;
width:350px;
}

.sw {
margin-top:50px;
margin-bottom:50px;
}

.mc {
margin-bottom:50px;
margin-top:-50px;
}

.pr {
background-image:url(/skin/poster.png);
width:392px;
height:362px;
margin-top:450px;
margin-bottom:250px;
position:relative;
z-index:1;
margin-left:auto;
margin-right:auto;
}

.eeye {
background-image:url('../skin/eeyemn.png');
width:392px;
height:362px;
margin-top:-250px;
position:relative;
z-index:2;
}

.eeye:hover {
background-image:url(/skin/eeye.png);
width:392px;
height:362px;
}

.sr {
float:left;
background-image:url(/skin/pool.png);
width:302px;
height:365px;
margin-top:-70px;

}

.jump{
background-image:url(/skin/jump.png);
width:70px;
height:8px;
margin-bottom:-2px;
margin-left:95px;
position:relative;
z-index:50;
}

.swimmer{
background-image:url(/skin/swimmer.png);
width:16px;
height:33px;
margin-left:147px;

-webkit-animation-name: JUMPER;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;

-moz-animation-name: JUMPER;
-moz-animation-duration: .5s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0s;
-moz-animation-play-state: running;

-ms-animation-name: JUMPER;
-ms-animation-duration: .5s;
-ms-animation-timing-function: ease-in-out;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 0s;
-ms-animation-play-state: running;

-o-animation-name: JUMPER;
-o-animation-duration: .5s;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0s;
-o-animation-play-state: running;
}

.swimmer2{
background-image:url(/skin/swimmer-2.png);
width:16px;
height:33px;
margin-left:67px;
margin-bottom:-33px;
}


.bn {
float:right;
margin-right:40px;
background-image:url(/skin/bench.png);
width:477px;
height:243px;
margin-top:-380px;
}

.ft {
background-image:url(/skin/fyt.png);
width:668px;
height:369px;
margin-top: -134px;
position:relative;
z-index:2;
}

.ftrs {
background-image:url(/skin/fyters.png);
width:439px;
height:62px;
margin-top: -270px;
margin-left: 134px;
position:relative;
z-index:3;
}

.wave {
background-image:url(/skin/ftarm.gif);
width:20px;
height:20px;
margin-left: 515px;
margin-top: -50px;
position:relative;
z-index:3;
}

.laser {
background-image:url(/skin/laser.png);
width:25px;
height:25px;
margin-left:175px;
margin-top:100px;
}

.sui {
margin-top:40px;
margin-bottom:40px;
height:10px;
}

.incub {
background-image:url(/skin/incub2.png);
width:375px;
height:435px;
margin-left:250px;
margin-top:50px;
overflow:auto;
}

.incublow {
background-image:url(/skin/incublow.png);
width:849px;
height:165px;
margin-top:-60px;
margin-left:auto;
position:relative;
z-index:2;
margin-right:auto;
}

.shipper {
margin-top:-170px;
margin-left:20px;
}

/**************** INTRO BUTTONS ****************/

.fieldbutton {
margin-top:50px;
clear:both;
}


.cbut{
color: #fff;
font-family: arial;
font-size: 16px;
font-weight: bold;
text-decoration: none;
letter-spacing: 0px;
font-weight: bold;
display: block;
float: left;
padding-top: 20px;
padding-bottom: 19px;
padding-left: 60px;
padding-right: 60px;
}

.wbut {
color: #fff;
font-family: arial;
font-size: 16px;
font-weight: bold;
text-decoration: none;
letter-spacing: 0px;
font-weight: bold;
display: block;
float: left;
padding-top: 20px;
padding-bottom: 19px;
padding-left: 60px;
padding-right: 60px;
}

.workbutton{
float:left;
cursor: pointer;
width: auto;
background-color:#000;
border:0px;
box-shadow:#0a0a0a 7px 7px 0px;
-webkit-box-shadow:#0a0a0a 7px 7px 0px;
-moz-box-shadow:#0a0a0a 7px 7px 0px;
-o-box-shadow:#0a0a0a 7px 7px 0px;
-ms-box-shadow:#0a0a0a 7px 7px 0px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
margin-right:25px;
}

.workbutton:hover{
color:#ff9f31;
background-color:#452632;
-webkit-transition-duration: .4s;
-moz-transition-duration: .4s;
-o-transition-duration: .4s;
-ms-transition-duration: .4s;
}

.workbutton:hover .wbut{
color:#ff9f31;
}

.workbutton:active{ 
-webkit-transform: translate(0em,1em);
-moz-transform: translate(0em,1em);
-ms-transform: translate(0em,1em);
-webkit-transform: translate(0em,1em);
-ms-transition-duration: .1s;
-webkit-transition-duration: .1s;
-moz-transition-duration: .1s;
-o-transition-duration: .1s;    
}

.contactbutton{
float:left;
cursor: pointer;
width: auto;
background-color:#000;
border:0px;
box-shadow:#0a0a0a -7px 7px 0px;
-webkit-box-shadow:#0a0a0a -7px 7px 0px;
-moz-box-shadow:#0a0a0a -7px 7px 0px;
-o-box-shadow:#0a0a0a -7px 7px 0px;
-ms-box-shadow:#0a0a0a -7px 7px 0px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;

}

.contactbutton:hover{
color:#ff9f31;
background-color:#452632;
-webkit-transition-duration: .4s;
-moz-transition-duration: .4s;
-o-transition-duration: .4s;
-ms-transition-duration: .4s;
}

.contactbutton:hover .cbut{
color:#ff9f31;
}

.contactbutton:active{
-webkit-transform: translate(0em,1em);
-moz-transform: translate(0em,1em);
-ms-transform: translate(0em,1em);
-webkit-transform: translate(0em,1em);
-ms-transition-duration: .1s;
-webkit-transition-duration: .1s;
-moz-transition-duration: .1s;
-o-transition-duration: .1s;     
}


.link {
color: #fff;
font-family: arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
letter-spacing: 0px;
font-weight: bold;
display: block;
float: left;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 60px;
padding-right: 60px;
}

.linkbutton{
float:left;
cursor: pointer;
width: auto;
background-color:#000;
border:0px;
box-shadow:#0a0a0a 0px 7px 0px;
-webkit-box-shadow:#0a0a0a 0px 7px 0px;
-moz-box-shadow:#0a0a0a 0px 7px 0px;
-o-box-shadow:#0a0a0a 0px 7px 0px;
-ms-box-shadow:#0a0a0a 0px 7px 0px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
margin-right:25px;
margin-top:25px;
}

.linkbutton:hover{
color:#ff9f31;
background-color:#452632;
-webkit-transition-duration: .4s;
-moz-transition-duration: .4s;
-o-transition-duration: .4s;
-ms-transition-duration: .4s;
}

.linkbutton:hover .link{
color:#ff9f31;
}


/**************** EYE LAUGH ****************/

.eye {
background-image:url('../skin/eye3.gif');
height:70px;
width:82px;
}

.eye:hover{
background-image:url('../skin/eyelaugh.gif');
height:70px;
width:82px;
z-index:100;
}


/**************** COMPLEX ****************/


.bbl {
background-image:url('../skin/bbl.gif');
background-position:right bottom; 
width:50px;
height:300px;
margin-left: 800px;
margin-top: 350px;
opacity:.7;
}      	

.hover {
width: 84px;
height: 40px;
float:right;
margin-right:350px;
margin-top:-550px;

-webkit-animation-name: Hover;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;

-moz-animation-name: Hover;
-moz-animation-duration: 3s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;

-ms-animation-name: Hover;
-ms-animation-duration: 3s;
-ms-animation-timing-function: ease-in-out;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 0;
-ms-animation-play-state: running;

-o-animation-name: Hover;
-o-animation-duration: 3s;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0;
-o-animation-play-state: running;
}

.botbody {
background-image:url('../skin/botbody2.png');
width:82px;
height:167px;
float:right;
margin-right:150px;
margin-top:170px;
clear:both;
}

.botbody.swim {
-webkit-animation-name: SWIM;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;

-moz-animation-name: SWIM;
-moz-animation-duration: 5s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;

-ms-animation-name: SWIM;
-ms-animation-duration: 5s;
-ms-animation-timing-function: ease-in-out;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 0;
-ms-animation-play-state: running;

-o-animation-name: SWIM;
-o-animation-duration: 5s;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0;
-o-animation-play-state: running;
}

.rytarm {
background-image:url('../skin/rytarm.png');
width:69px;
height:52px;
float:right;
margin-right:235px;
margin-top:-120px;
clear:both;
}

.rytarm.float {
-webkit-animation-name: FLOAT;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;

-moz-animation-name: FLOAT;
-moz-animation-duration: 5s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0s;
-moz-animation-play-state: running;

-ms-animation-name: FLOAT;
-ms-animation-duration: 5s;
-ms-animation-timing-function: ease-in-out;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 0s;
-ms-animation-play-state: running;

-o-animation-name: FLOAT;
-o-animation-duration: 5s;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0s;
-o-animation-play-state: running;
}

.lftarm {
background-image:url('../skin/lftarm.png');
width:69px;
height:52px;
float:right;
margin-right:78px;
margin-top:-120px;
clear:both;
}

.lftarm.float2 {
-webkit-animation-name: FLOAT2;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0s;
-webkit-animation-play-state: running;

-moz-animation-name: FLOAT2;
-moz-animation-duration: 5s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0s;
-moz-animation-play-state: running;

-ms-animation-name: FLOAT;
-ms-animation-duration: 5s;
-ms-animation-timing-function: ease-in-out;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 0s;
-ms-animation-play-state: running;

-o-animation-name: FLOAT;
-o-animation-duration: 5s;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0s;
-o-animation-play-state: running;
}

.meteor {
background-image:url('../skin/met.png');
width:200px;
height:200px;
float:right;
margin-left:980px;
margin-top:-500px;
overflow:hidden;
}

.meteor.animate {
-webkit-animation-name: Meteor;
-webkit-animation-duration: 8s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 3s;
-webkit-animation-play-state: running;

-moz-animation-name: Meteor;
-moz-animation-duration: 8s;
-moz-animation-timing-function: ease-in;
-moz-animation-iteration-count: 1;
-moz-animation-delay: 3s;
-moz-animation-play-state: running;

-ms-animation-name: Meteor;
-ms-animation-duration: 8s;
-ms-animation-timing-function: ease-in;
-ms-animation-iteration-count: 1;
-ms-animation-delay: 3s;
-ms-animation-play-state: running;

-o-animation-name: Meteor;
-o-animation-duration: 8s;
-o-animation-timing-function: ease-in;
-o-animation-iteration-count: 1;
-o-animation-delay: 3s;
-o-animation-play-state: running;
}

.ufolyte {
background-image:url('../skin/ufolyte2.gif');
width:84px;
height:150px;
float:left;
margin-top:-400px;
margin-left:-100px;
z-index:-2;
}

.ufolyte.animate {
-webkit-animation-name: UFO;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 12s;
-webkit-animation-play-state: running;

-moz-animation-name: UFO;

-moz-animation-duration: 20s;
-moz-animation-timing-function: ease-in;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 12s;
-moz-animation-play-state: running;

-ms-animation-name: UFO;
-ms-animation-duration: 20s;
-ms-animation-timing-function: ease-in;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 12s;
-ms-animation-play-state: running;

-o-animation-name: UFO;
-o-animation-duration: 20s;
-o-animation-timing-function: ease-in;
-o-animation-iteration-count: infinite;
-o-animation-delay: 12s;
-o-animation-play-state: running;
}

.bbl1 {
width: 19px;
height: 20px;
float:right;
margin-top:-160px;
margin-right:165px;
background-image: url("../skin/bbl1.png");
-webkit-animation-name: BBL1;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;

-moz-animation-name: BBL1;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;

-ms-animation-name: BBL1;
-ms-animation-duration: 5s;
-ms-animation-timing-function: linear;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 0;
-ms-animation-play-state: running;

-o-animation-name: BBL1;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0;
-o-animation-play-state: running;

clear:both;
}

.bbl2 {
width: 19px;
height: 20px;
float:right;
margin-top:-160px;
margin-right:150px;
background-image: url("../skin/bbl2.png");
-webkit-animation-name: BBL2;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;

-moz-animation-name: BBL2;
-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;

-ms-animation-name: BBL2;
-ms-animation-duration: 4s;
-ms-animation-timing-function: linear;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 0;
-ms-animation-play-state: running;

-o-animation-name: BBL2;
-o-animation-duration: 4s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0;
-o-animation-play-state: running;

clear:both;
}

.bbl3 {
width: 19px;
height: 20px;
float:right;
margin-top:-160px;
margin-right:140px;
background-image: url("../skin/bbl3.png");
-webkit-animation-name: BBL3;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;

-moz-animation-name: BBL3;
-moz-animation-duration: 3s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;

-ms-animation-name: BBL3;
-ms-animation-duration: 3s;
-ms-animation-timing-function: linear;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 0;
-ms-animation-play-state: running;

-o-animation-name: BBL3;
-o-animation-duration: 3s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0;
-o-animation-play-state: running;
}

.bbl4 {
width: 17px;
height: 18px;
float:right;
margin-top:-160px;
margin-right:190px;
background-image: url("../skin/bbl4.png");
-webkit-animation-name: BBL4;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
-webkit-animation-play-state: running;

-moz-animation-name: BBL4;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 1s;
-moz-animation-play-state: running;

-ms-animation-name: BBL4;
-ms-animation-duration: 5s;
-ms-animation-timing-function: linear;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 1s;
-ms-animation-play-state: running;

-o-animation-name: BBL4;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-delay: 1s;
-o-animation-play-state: running;
}

.ship {
height: 102px;
width: 211px;
margin-left:100px;
margin-top:-140px;
background-image: url('../skin/ship.png');
-webkit-animation-name: SHIP;
-webkit-animation-duration: .15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transition: all 1s ease-in-out;

-moz-animation-name: SHIP;
-moz-animation-duration: .15s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-transition: all 1s ease-in-out;

-ms-animation-name: SHIP;
-ms-animation-duration: .15s;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: alternate;
-ms-animation-timing-function: ease-in-out;
-ms-transition: all 1s ease-in-out;

-o-animation-name: SHIP;
-o-animation-duration: .15s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-timing-function: ease-in-out;
-o-transition: all 1s ease-in-out;
}

.flame {
height: 69px;
width:203px;
margin-left:105px;
margin-top:70px;
background: url('../skin/flame.png');
-webkit-animation-name: FLAME;
-webkit-animation-duration: .1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;

-moz-animation-name: FLAME;
-moz-animation-duration: .1s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;

-ms-animation-name: FLAME;
-ms-animation-duration: .1s;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: alternate;
-ms-animation-timing-function: ease-in-out;

-o-animation-name: FLAME;
-o-animation-duration: .1s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-timing-function: ease-in-out;
}

.fishes {
width: 308px;
height: 81px;
margin-left:-200px;
background-position:bottom left;
background-image: url("../skin/fishes.png");
-webkit-animation-name: FISH;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
-webkit-animation-play-state: running;

-moz-animation-name: FISH;
-moz-animation-duration: 100s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 1s;
-moz-animation-play-state: running;

-ms-animation-name: FISH;
-ms-animation-duration: 100s;
-ms-animation-timing-function: linear;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 1s;
-ms-animation-play-state: running;

-o-animation-name: FISH;
-o-animation-duration: 100s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-delay: 1s;
-o-animation-play-state: running;

clear:both;
}

.sm {
width: 25px;
height: 25px;
float:right;
margin-right:30px;
margin-top:5px;
-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
-o-transition-duration: 3s;
-ms-transition-duration: 3s;
}

.sm:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);

-webkit-transition-duration: .7s;
-moz-transition-duration: .7s;
-o-transition-duration: .7s;
-ms-transition-duration: .7s;
}

.sm:active{
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-o-transition-duration: .5s;
-ms-transition-duration: .5s;
}

.clouds {
background:url('../skin/clouds.png') 0 0 repeat-x;
margin-top:0px;
height:576px;
width:10000px;
position:relative;
z-index:5;
-webkit-animation-name:CLOUD;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:900s;

-moz-animation-name:CLOUD;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-moz-animation-duration:900s;

-ms-animation-name:CLOUD;
-ms-animation-timing-function:linear;
-ms-animation-iteration-count:infinite;
-ms-animation-duration:900s;

-o-animation-name:CLOUD;
-o-animation-timing-function:linear;
-o-animation-iteration-count:infinite;
-o-animation-duration:900s;
}

.bench {
position:relative;  
height:264px;
width:287px;
float:right;
margin-right:130px;
margin-top:-610px;
margin-bottom:200px;      
}

.bench img {
position:absolute;
left:0;
}

.bench img.top {
-webkit-animation-name: FORHIRE;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2s;
-webkit-animation-direction: alternate;

-moz-animation-name: FORHIRE;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 2s;
-moz-animation-direction: alternate;

-ms-animation-name: FORHIRE;
-ms-animation-timing-function: ease-in-out;
-ms-animation-iteration-count: infinite;
-ms-animation-duration: 2s;
-ms-animation-direction: alternate;

-o-animation-name: FORHIRE;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 2s;
-o-animation-direction: alternate;
}

.laser.las {
-webkit-animation-name: LASER;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 12s;
-webkit-animation-play-state: running;

-moz-animation-name: UFO;
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-in;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 2s;
-moz-animation-play-state: running;

-ms-animation-name: UFO;
-ms-animation-duration: 2s;
-ms-animation-timing-function: ease-in;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 2s;
-ms-animation-play-state: running;

-o-animation-name: UFO;
-o-animation-duration: 2s;
-o-animation-timing-function: ease-in;
-o-animation-iteration-count: infinite;
-o-animation-delay: 2s;
-o-animation-play-state: running;
}


.divide{
width:5000px;
height:151px;
margin-top:125px;
margin-bottom:100px;
background-image:url('../skin/divide.jpg');
background-repeat:repeat-x;
opacity:0.4;
margin-left:-20px;
}

.divide2{
height:82px;
margin-top:100px;
margin-bottom:100px;
background-image:url('../skin/divide.jpg');
background-repeat:repeat-x;
opacity:0.5;
background-size: contain;
}

.divide3{
width:5000px;
height:151px;
margin-bottom:100px;
background-image:url('../skin/divide.png');
background-repeat:repeat-x;
opacity:0.5;
margin-left:-20px;
}

#skillset{
width:802px;
height:187px;
margin-left:auto;
margin-right:auto;
background-image:url('../skin/skillset2.png');
}

.skill_hud {
color: #69655B;
position: absolute;
font-size: 11px;
text-align: center;
cursor: pointer;
display: block;
padding: 3px;
width: 80px;
height: 80px;
padding-top: 20px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

.skill_hud:hover
{
color:#f3f0e9;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

.skill_hud:hover p
{
display:block;
text-align:center;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

.skill_hud:hover .level
{
display:block;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

.skill_hud p
{
display:none;
text-align:center;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

#jquery {
bottom: 270px;
left:44px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

#phppp {
bottom: 285px;
left: 123px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

#wp {
bottom: 310px;
left: 262px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

#html {
bottom: 330px;
left: 380px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

#css {
bottom: 340px;
left: 558px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

#il {
bottom: 360px;
left: 628px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

#ps {
bottom: 380px;
left: 695px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}


#jquery:hover {
bottom: 290px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

#phppp:hover {
bottom: 305px;
left: 123px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

#wp:hover {
bottom: 330px;
left: 262px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

#html:hover {
bottom: 350px;
left: 380px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

#css:hover {
bottom: 360px;
left: 558px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

#il:hover {
bottom: 380px;
left: 628px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

#ps:hover {
bottom: 400px;
left: 695px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

.prof{
position:relative;
font-size:10px;
color:#69655b;
margin:0 auto;
top:10px;
width:62px;
height:30px;
display:block;
text-align:center;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

.level {
height: 3px;
padding:1px;
width:60px;
top:38px;
margin:-2px 0 0 -31px;
left:50%;
position: absolute;
background: #000 repeat-x;
z-index:17;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

.level{
display:none;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

.level > span{
display: block;
height: 1px;
margin:1px;
position: relative;
overflow: hidden;
background: #ed2f2f;
}


#jquery .level > span {
width:30%;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}


#phppp .level > span {
width:78%;
width:-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;55%;
}


#wp .level > span {
width:80%;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

#html .level > span {
width:85%;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}


#css .level > span {
width:90%;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}


#il .level > span {
width:85%;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}


#ps .level > span {
width:97%;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}


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

.greet{
font-size:48px;
color:#ECD078;
text-align:center;
text-transform:uppercase;
margin-top:200px;
margin-bottom:40px;
text-shadow:0px 2px 1px #000;
position:relative;
z-index:12000;
font-family: 'Open Sans Condensed', sans-serif;
}

.fleet{
font-size:8em;
color:#FF823A;
text-shadow:#000 2px 2px 1px;
margin-left:auto;
margin-right:auto;
line-height:1em;
text-align:center;
width:860px;
text-transform:uppercase;
font-family: 'Oswald', sans-serif;
}

.introduce{
font-size:16px; 
color:#F8E2B9; 
text-shadow:#000 2px 2px 1px;
margin-left:auto;
margin-right:auto;
text-align:center;
width:400px;
text-transform:uppercase;
font-family: 'Asap', sans-serif;
margin-top:40px
}

.name{
color:#7fff8a;
text-shadow:0px 0px 0px #fff;
}

.firstset{
width:450px;
position:relative;
margin-top:55px;
margin-left:auto;
margin-right:auto;
margin-bottom:100px;
}

.socialholder{
margin-top:300px;
width:668px;
height:250px;
position:relative;
margin-left:auto;
margin-right:auto;
}

.recentpro{
font-size:48px;
color:#F9CDAD;
text-align:center;
text-transform:uppercase;
margin-top:200px;
margin-bottom:40px;
text-shadow:0px 2px 1px #000;
position:relative;
z-index:12000;
font-family: 'Open Sans Condensed', sans-serif;
}

.bigproject{
width:700px;
margin-left:auto;
margin-right:auto;
margin-bottom:100px;
}

.projectname{
width:auto;
padding-top:20px;
color:#F5634A;
font-size:76px;
text-transform:uppercase;
font-family: 'Oswald', sans-serif;
}

.projectdes{
font-size:18px;
letter-spacing: 5px;
color:#FF9C5B; 
text-shadow:#000 2px 2px 1px;
margin-left:auto
;margin-right:auto;
width:500px;
font-family: 'Asap', sans-serif;
margin-top:40px;
margin-bottom:55px;
}

.projectshadow{
width:700px;
margin-left:auto;
margin-right:auto;
box-shadow:#000 0 0 8px 8px;
}

.aboutme{
font-size:48px;
color:#D1E751;
text-align:center;
text-transform:uppercase;
margin-bottom:40px;
text-shadow:0px 2px 1px #000;
position:relative;
z-index:12000;
font-family: 'Open Sans Condensed', sans-serif;
}

.studio{
font-size:8em; 
color:#26ADE4; 
text-shadow:#000 2px 2px 1px;
margin-left:auto;
margin-right:auto;
line-height:1em;
text-align:center;
width:840px;
text-transform:uppercase;
font-family: 'Oswald', sans-serif;
}

.littlemore{
font-size:16px; 
color:#FFFFFF; 
text-shadow:#000 2px 2px 1px;
margin-left:auto;
margin-right:auto;
text-align:center;
width:400px;
text-transform:uppercase;
font-family: 'Asap', sans-serif;
margin-top:40px;
}

.love{
font-size:40px;
color:#E08E79;
text-align:center;
margin-top:20px;
margin-bottom:20px;
text-shadow:0px 2px 1px #000;
position:relative;
z-index:12000;
font-family: 'Pacifico', cursive;
}

.boast{
font-size:16px; 
color:#A8DBA8; 
text-shadow:#000 2px 2px 1px;
margin-left:auto;
margin-right:auto;
text-align:center;
width:600px;
text-transform:uppercase;
font-family: 'Asap', sans-serif;
margin-bottom:55px;
}

.secondset{
width:492px;
position:relative;
margin-top:55px;
margin-left:auto;
margin-right:auto;
margin-bottom:100px;
}

.oneskill{
font-size:8em; 
color:#ECD078; 
text-shadow:#000 2px 2px 1px;
margin-left:auto;
margin-right:auto;
line-height:1em;
text-align:center;
width:660px;
text-transform:uppercase;
font-family: 'Oswald', sans-serif;
}

#para{
margin: 1.5em 0px;
overflow: hidden;
position: relative;
width: 650px;
height: 1000px;
margin-top:-1000px;
}
 
#para img {
position: absolute;
}

.float {
top:100px;
z-index:100;
}

#para2{
margin: 1.5em 0px;
overflow: hidden;
position: relative;
width: 550px;
height: 1000px;
margin-top:-1010px;
margin-left: 330px;
}
 
#para2 img {
position: absolute;
}

.float2 {
float:right;
top:100px;
z-index:50;
}

#para3{
margin: 1.5em 0px;
overflow: hidden;
position: relative;
width: 400px;
height: 1000px;
margin-top:-1100px;
margin-left: 480px;
}
 
#para3 img {
position: absolute;
}

.float3 {
float:right;
top:100px;
z-index:30;
}

/**************** CONACT ****************/

table {
border-collapse: collapse;
border-spacing: 0;
}

.form-left {
margin-bottom:50px;
float: left;
width: 320px;
position: relative;
color:#FFF8DB;
font-size:16px;
font-family: 'Asap', sans-serif;
display:block;
margin-left:60px;
text-shadow:#000 2px 2px 1px;
letter-spacing:5px;
margin-top:25px;
}

.form-lefttit {
margin-top:18px;
margin-bottom:50px;
float: left;
width: 350px;
position: relative;
color:#ccc;
font-size:16px;
margin-left:40px;
font-family: 'Asap', sans-serif;
text-shadow:#000 2px 2px 1px
}

.form-wrapper {

width: 570px;
position: relative;
margin-right:30px;
float:right;
}

.form-wrapper h2 {
font-size: 30px;
line-height: 1.2;
margin: 9px 0;
letter-spacing: -1px;
color: #333;
font-weight: bold;
}

.form-wrapper h7.success {
color: #fff;
letter-spacing:5px;
}

p.success {
font-size: 16px;
color: #666;
}

.submit input{
padding-top: 12px 3px;
margin-right:50px;
height: 50px;
font-weight:bold;
cursor: pointer;
width: 215px;
background-color:#83ecff;
color:#fff;
border:0px;
float:left;
margin-left:129px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}

.submit input:hover{
color:#ff9f31;
background-color:#111e22;
-ms-transition-duration: .4s;
-webkit-transition-duration: .4s;
-moz-transition-duration: .4s;
-o-transition-duration: .4s;   
}

.submit input:active{
-webkit-transform: translate(0em,1em);
-moz-transform: translate(0em,1em);
-ms-transform: translate(0em,1em);
-webkit-transform: translate(0em,1em);
-ms-transition-duration: .1s;
-webkit-transition-duration: .1s;
-moz-transition-duration: .1s;
-o-transition-duration: .1s;   
}

#body input, #body textarea, #body select {
font: 16px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
width: 400px;
padding: 12px 10px;
margin: 0;
color: #ff9f31;
text-shadow: 0 0 1px #f7bb00;
outline: none;
display: inline-block;
position: relative;
z-index: 2;
background-color:#111e22;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-ms-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
border:0px;
}

#body input {
height: 16px;
}

select {
width: 348px;
padding: 6px 6px;
}

textarea {
width: 400px;
overflow: hidden;
}

input:focus, textarea:focus, select:focus {
border: 1px solid #142931;
}

.field {
margin: 18px 0;
position: relative;
width: 600px;
clear:both;
}

#body label {
display: block;
width: 118px;
padding-right:10px;
padding-top:6px;
float: left;
color: #13ACAA;
text-align: right;
opacity:0.6;
font-size:18px;
font-family: 'Asap', sans-serif;
text-shadow:#000 2px 2px 1px;
}

.error, .tooltip {
height: 16px;
width: 190px;
font: 11px/16px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
color: #801B1B;
padding: 8px 2px 8px 8px;
margin-left: -200px;
z-index: 999;
}

.error{
z-index:9999;
}

.error span, .tooltip span{
width:186px;
display:block;
}

.tooltip {
background: #142931;
border-color: #DBDBDB;
color: #666;
}

.overlay {
display: none;
z-index: 10000;
background-color: #fff;
width: 912px;
padding: 24px;
min-height: 200px;
border: 1px solid #666;
background: -webkit-gradient(linear, left top, left 30, from(#f1f1f1), color-stop(4%, #ffffff), to(#f4f4f4));
background: -moz-linear-gradient(top, #f4f4f4, #ffffff 1px, #f4f4f4 95%);
border: 1px solid #dadada;
border-radius: 5px;
box-shadow: 0px 1px 4px #ddd;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0px 1px 4px #ddd;
-moz-box-shadow: 0px 1px 4px #ddd;

-o-border-radius: 5px;
-ms-border-radius: 5px;
-o-box-shadow: 0px 1px 4px #ddd;
-ms-box-shadow: 0px 1px 4px #ddd;
}


.overlay .close:before {
content: 'X';
}

.overlay .close {
background: #eee;
border-radius: 17px;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
-o-border-radius: 17px;
-ms-border-radius: 17px;
border: 1px solid #AAAAAA;
cursor: pointer;
height: 23px;
padding-top: 5px;
position: absolute;
right: -15px;
text-align: center;
top: -15px;
width: 29px;
}

#exposeMask{
position:fixed !important;
}

/* `Clear Floated Elements */

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}

/*
zoom:1 rule for IE6 + IE7.
*/
* html .clearfix,
*:first-child+html .clearfix {
    zoom: 1;
}	

/**************** FOOTER ****************/

.footer {
margin-left:auto;
margin-right:auto;
width:980px;
font-family: 'Six Caps', sans-serif;
text-align:center;
color:#333;
font-size:2em;
line-height: 100%;
margin-top:-75px;
margin-bottom:0px;
padding-bottom:4px;
letter-spacing:5px;
}

a.button {
background-color:#83ecff;
color: #fff;
display: block;
float: left;
height: 50px;
margin-right: 6px;
text-decoration: none;
}

a.button span {
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}

a.button:hover {
color: #fff;
background-color:#000;
-ms-transition-duration: .4s;
-webkit-transition-duration: .4s;
-moz-transition-duration: .4s;
-o-transition-duration: .4s;
outline: none; /* hide dotted outline in Firefox */
}

a.up{
position: absolute;
top: 9250px; 
right: 20px;
font-weight: 700;
background:#000000;
width:30px;
height:30px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow:#0a0a0a 0px 7px 0px;
-webkit-box-shadow:#0a0a0a 0px 7px 0px;
-moz-box-shadow:#0a0a0a 0px 7px 0px;
-o-box-shadow:#0a0a0a 0px 7px 0px;
-ms-box-shadow:#0a0a0a 0px 7px 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
display: block;
z-index:20000;
text-decoration:none;
}

.up{
width:30px;
height:30px;
font-size:22px;
color:#ff8000;
font-weight:bold;
padding-left:6px;
padding-top:10px;
text-shadow:#222 2px 2px;
text-decoration:none;
}

.iframe{
float:right;
margin-right:30px;
position:fixed:
z-index:100000;
width:40px;
}