/* ///////////// style ////////////// */

/* CSS Resets */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:110%}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

li{list-style:none;}
.bg_img{background-size: 100% auto;}
.show{	display:block;}
.hide{	display:none;}
.bottom_s{margin-bottom:3px;}
.bottom_m{margin-bottom:5px;}
.bottom_l{margin-bottom:10px;}
.bottom_h{margin-bottom:20px;}
.bottom_g{margin-bottom:35px;}
.top_s{margin-top:3px;}
.top_m{margin-top:5px;}
.top_l{margin-top:10px;}
.top_h{margin-top:20px;}
.top_g{margin-top:35px;}
.left{float:left !important;}
.right{float:right !important;}
.child_left li{float:left !important;}
.child_right li{float:right !important;}
.clear{clear:both;}
.center{text-align:center;}
label{cursor:pointer;}
.absolute{position:absolute;}

img{width:105%;height:auto;display:block}


/*------------- map ENDS -------------*/




h1,h2,h3,h4,h5,h6{font-weight:normal;}

::-moz-selection { color: white;  background: #516a79; }
::selection      { color: white;  background: #516a79; } 


.hover{
	transition:opacity .3s;
	-webkit-transition:opacity .3s;
	-moz-transition:opacity .3s;
	cursor:pointer;
} 
.hover:hover{
	opacity:.65;
}



/* ---------------- fonts ---------------- */

@font-face {
    font-family: 'proxima_novabold';
    src: url('fonts/proximanova-bold-webfont-webfont.eot');
    src: url('fonts/proximanova-bold-webfont-webfont.eot#iefix') format('embedded-opentype'),
         url('fonts/proximanova-bold-webfont-webfont.woff') format('woff'),
         url('fonts/proximanova-bold-webfont-webfont.ttf') format('truetype'),
         url('fonts/proximanova-bold-webfont-webfont.svg') format('svg');
    font-weight: 100;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novalight';
    src: url('fonts/proximanova-light-webfont.eot');
    src: url('fonts/proximanova-light-webfont.eot#iefix') format('embedded-opentype'),
         url('fonts/proximanova-light-webfont.woff') format('woff'),
         url('fonts/proximanova-light-webfont.ttf') format('truetype'),
         url('fonts/proximanova-light-webfont.svg') format('svg');
    font-weight: 100;
    font-style: normal;
}
/* ---------------- fonts ENDS ---------------- */

.light{ font-family: 'proxima_novalight';}
.bold{ font-family: 'proxima_novabold';font-weight:normal;}

	html,body 
	{
	font-family: 'proxima_novalight'; font-weight:100; font-style:normal;line-height:1.1;
	}


/* ==================================================================================================================== */
/* ! The 1280px Grid V2 by Andy Taylor \ http://cssgrid.net \ http://www.twitter.com/andytlr \ http://www.andytlr.com   */
/* ==================================================================================================================== */

#container
{
	top:0;
	left:0;
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
}




#loading{
width: 100%;
height: 100%;
position:fixed;
margin:0;
padding:0;
z-index:1001;
background:#000;
}
#loader{
width:150px;
height:100px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-75px;
position:absolute;
background:url(img/loader.gif) center no-repeat;
}

	
.container {
padding-left: 70px;
padding-right: 70px;
}

.row {
position:relative;
width: 100%;
max-width: 100%;
min-width: 755px;
margin-left:auto;
margin-right:auto;
overflow: hidden;
}

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 2%;
float: left;
min-height: 1px;
}

.row .onecol {
width: 6.5%;
}

.row .twocol {
width: 15%;
}

.row .threecol {
width: 23.5%;
}

.row .fourcol {
width: 32%;
}

.row .fivecol {
width: 39.45%;
}

.row .sixcol {
width: 48%;
}

.row .sevencol {
width: 58%;
}

.row .eightcol {
width: 65.4%;
}

.row .ninecol {
width: 74.05%;
}

.row .tencol {
width: 82.7%;
}

.row .elevencol {
width: 91.35%;
}

.row .twelvecol {
width: 100%;
float: left;
}

.last {
margin-right: 0px !important;
}

object, embed {
max-width: 100%;
}

a{
text-decoration:none;
outline: none;

} 
a:hover{
text-decoration:none;
outline: none;
}
a:active{
text-decoration:none;
outline: none;
}
a:visited{
text-decoration:none;
outline: none;
}
a:focus
{
-moz-outline-style: none;
}

/* ---------------- html5 ---------------- */
.html5
{
position:fixed;
z-index:2000;
background:url(http://shibui.me/web/tfh/css/img/logo.png) center 50px  no-repeat #fff;
width:100%;
height:100%;
top:0;
left:0;
color:#000;
}
.html5 a
{
color:#516a79;
}
.html5 a:hover
{
color:#000;
}
.html5 h3
{
position:relative;
color:#000;
padding:10px;
margin:200px auto 0;
width:370px;
}
.html5 ul
{
position:relative;
background:#000;
padding:10px;
margin:auto;
width:370px;
color:#fff;
}
.html5 ul li a
{
color:#fff;
width:370px;
}
.html5 ul li a:hover,.html5 div a:hover
{
color:#516a79;
}
.html5 div 
{
width:370px;
padding:10px;
margin:auto;
}
.html5 div a
{
color:#000;
}
/* ---------------- html5 ENDS ---------------- */
#parallax
{
	margin:0 auto;
	overflow: hidden;
	position: relative;
	height:859px;
}
#parallax li
{
position:absolute;
top:0;
left:0;
height:100%;
background-repeat:repeat-x;
background-position:center bottom;
}

#back{background-image:url(img/back.png);width: 107%;}
#mid{background-image:url(img/mid.png);width: 105%;}
#front{background-image:url(img/front.png);width: 103%;}


#wave
{
	margin:-30px auto;
	overflow: hidden;
	position: relative;
	background:#000;
	height:350px;
}
#wave li
{
position:absolute;
height:100%;
width: 200%;
background-repeat:repeat-x;
background-position:center top;
}


#w_1{background-image:url(img/w_1.png);left:-100%;top:0}
#w_2{background-image:url(img/w_2.png);left:0%;top:40px}
#w_3{background-image:url(img/w_3.png);left:-100%;top:80px}
#w_4{background-image:url(img/w_2.png);left:0%;top:120px}
#w_5{background-image:url(img/w_3.png);left:-100%;top:160px}
#w_6{background-image:url(img/w_1.png);left:0%;top:200px}

.bird{
position:absolute;
background:url(img/bird.gif) center center no-repeat;
background-size:100%;
z-index: 0;
}
#bird_1{
width: 6%;
height:90px;
left:0;
top:0;
}
#bird_2{
width: 4%;
height:90px;
left:60px;
top:30px;
}
#bird_3{
width: 5%;
height:90px;
left:35px;
top:65px;
}

#bird_4{
width: 4%;
height:90px;
right:35px;
top:35px;
background:url(img/bird_2.gif) center center no-repeat;
background-size:100%;
}
#bird_5{
width: 3%;
height:90px;
right:15px;
top:15px;
background:url(img/bird_2.gif) center center no-repeat;
background-size:100%;
}


#scroll{
position:absolute;
height:75px;
width: 75px;
background:url(img/arrow.gif) center center no-repeat rgba(250,250,250,1);
cursor:pointer;
left:50%;
margin:-100px 0 0 -40px;
z-index: 10;
border:2px solid #000;
border-radius:50%;
overflow:hidden;
}

canvas{
position: absolute;
top: -200px;
left: 0;
z-index: -1;
}


#text
{
position:absolute;
top:0;
right:0;
width: 400px;
height:100%;
background:rgba(0,0,0,.75);
z-index:0;
color:#fff;
padding:30px 0 50px 20px;
}

#text h1
{
padding-bottom:5px;
border-bottom:1px solid #fff;
font-size:30px;
}
#text h2
{
font-size:20px;
}

	form
	{
	position:relative;
	padding-bottom:15px;
	border-bottom:1px solid #fff;
	width:100%;
	}
	
	::-webkit-input-placeholder { color:#000; opacity:1;font-weight:100;}
	::-moz-placeholder { color:#000;  opacity:1;font-weight:100;}
	:-ms-input-placeholder { color:#000;  opacity:1;font-weight:100;}
	
	form input
	{
	font-size:16px;
	margin-top:5px;
	width:230px;
	padding:12px 10px 10px 10px;
	height:44px;
	color:#000;
	background-color:#fff;
	-webkit-appearance: none;
	-webkit-border-radius:none;
	border-radius:0;
	border:none;
	line-height:1;
	text-align:left;
	}
	
	form input[type="submit"]
	{
	width:50px;
	background-color:#000;
	background:url(img/sprite.png) -16px -16px no-repeat;
	cursor:pointer;
	}
		
	#contact_thanks
	{
		position:absolute;
		color:#000;
		padding:8px;
		font-size:20px;
		background-color:#fff;
		width:100%;
		height:100%;
		top:0;
		left:0;
		cursor:pointer;
		display:none;
		z-index:100;
	}
	#contact_thanks span
	{
		position:relative;
		color:#fff;
		line-height:1;
		background-color:#000;
		padding: 2px 9px 6px;
		font-size: 22px;
		border-radius:50%;
	}
	
	

	#text p
	{
	font-size:16px;
	padding-right:20px;
	margin-bottom:12px;
	}
	
	#text ul li
	{
	display:inline-block;
	}
	#text ul li a
	{
	display:block;
	width:45px;
	height:45px;
	margin-right:8px;
	border-radius:50%;
	background-color:#fff;
	background-image:url(img/sprite.png);
	background-repeat:no-repeat;
	
	transition:background-color .25s ease-in-out, background-position .25s ease-in-out;
	-webkit-transition:background-color .25s ease-in-out, background-position .25s ease-in-out;
	-moz-transition:background-color .25s ease-in-out, background-position .25s ease-in-out;
	}
	#text ul li a:hover
	{
	background-color:#000;
	}
	
	.face{background-position:-7px -77px;}
	.twitt{background-position:-63px -76px;}
	.vim{background-position:-118px -77px;}
	.in{background-position:-174px -76px;}
	.mail{background-position:-229px -76px;}
	
	.face:hover{background-position:-7px -133px;}
	.twitt:hover{background-position:-63px -133px;}
	.vim:hover{background-position:-118px -133px;}
	.in:hover{background-position:-174px -132px;}
	.mail:hover{background-position:-229px -132px;}

	
@media only screen and (max-width: 1820px) {

	#parallax{height:736px;}

	#back{background-image:url(img/back_2.png);}
	#mid{background-image:url(img/mid_2.png);}
	#front{background-image:url(img/front_2.png);}

}

@media only screen and (max-width: 1600px) {
	#parallax{height:675px;}

	#back{background-image:url(img/back_3.png);}
	#mid{background-image:url(img/mid_3.png);}
	#front{background-image:url(img/front_3.png);}
}

@media only screen and (max-width: 1340px) {
		
	#parallax{height:511px;}

	#back{background-image:url(img/back_4.png);}
	#mid{background-image:url(img/mid_4.png);}
	#front{background-image:url(img/front_4.png);}

}
		
@media only screen and (max-width: 1080px) {

			
	#text{width: 320px;}
	form input{width:200px;}
	
	#bird_1{
	width: 8%;
	}
	#bird_2{
	width: 7%;
	}
	#bird_3{
	width: 6%;
	}
	#bird_4{
	width: 5%;
	}
	#bird_5{
	width: 4%;
	}
	
}


/* Mobile */


@media handheld, only screen and (max-width: 860px) {

	#wave{height:550px;}
	#text{width:100%;bottom:0;top:auto;height:auto;}
	form input{width:250px;}
	
	#bird_1{
	width: 10%;
	}
	#bird_2{
	width: 8.5%;
	}
	#bird_3{
	width: 7%;
	}
	#bird_4{
	width: 6%;
	}
	#bird_5{
	width: 5%;
	}
	
	#contact_thanks
	{
		font-size:16px;
	}
	
}



@media only screen and (max-width: 640px) {
	
	#wave{height:330px;}
	#scroll{display:block;}
	#text{position:relative;background:rgba(0,0,0,1);z-index:0;}
	form input{width:200px;}
	
	#bird_1{
	width: 15%;
	}
	#bird_2{
	width: 13.5%;
	}
	#bird_3{
	width: 12%;
	}
	#bird_4{
	width: 10%;
	}
	#bird_5{
	width: 8%;
	}
	
}
	


@media only screen and (max-width: 420px) {

}