body{
font-family:"myriad-pro-1", "myriad-pro-2", "Helvetica Neue", "Helvetica", Arial;
background: #FFF;
text-rendering: optimizelegibility;
}

#skrollr-body{
z-index: 2;
margin: 460px 0 0 0;
background: #FFF;
-webkit-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
-ms-box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
-o-box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
}


#skrollr-body,
.header,
.bigtitle,
.background-w1,
.background-w2,
.background-w3,
.background-w4,
.background-w5,
.background-w6,
.background-w7,
.about,
.contact,
.disclaimer
{
width: 100%;
margin-left: auto;
margin-right: auto;
}


.container,
.container-w1,
.container-w2,
.container-w3,
.container-w4,
.container-w5,
.container-w6,
.container-w7
{
margin-left: auto;
margin-right: auto;
}




.header{
height: 460px;
background: #a3b9a2 url(../img/blur.jpg) no-repeat;
background-size: 100% 460px;
position: fixed;
top:0;
z-index: -2;
}


.header .container{
width:940px;
height: 460px;
width: 940px;
color:rgba(255, 255, 255, 1);
text-align:center;
}

.header .container h1{
font-size: 80px;
font-weight: 300;
font-style: normal;
margin: 59px 0 0 0;
}

.header .container h2{
font-size: 24px;
font-weight: 300;
font-style: normal;
margin: 32px 40px 0 40px;
line-height: 30px;
}





.mainnav{
float: right;
margin: 28px 0 0 0;
}

.mainnav li {
float: left;
list-style:none;
	}
.mainnav li a {
color:rgba(255, 255, 255, .5);
display: block;
font-size: 16px;
text-decoration:none;
margin-right: 44px;
-webkit-transition: all 0.2s linear;
-webkit-transition-property: all;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: initial;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
	}
	
.mainnav li a:hover {
	color:rgba(255, 255, 255, 1);
	}



/* Social Icons */


.social {
border:0;
height: 34px;
margin: 88px 0 0 400px;
  }
  
.social span{
display:none;
  }
  
.social li {
float: left;
list-style:none;
	}
.social li a {
display: block;
text-decoration:none;
width:34px;
height: 34px;
margin-right: 19px;
-webkit-transition: all 0.2s linear;
-webkit-transition-property: all;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: initial;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
	}
	
.twitter a{background: url(../img/twitter.png) no-repeat;}
.linkedin a{background: url(../img/linkedin.png) no-repeat;}
.dribbble a{background: url(../img/dribbble.png) no-repeat;}

.twitter a:hover{opacity:.5; filter:alpha(opacity=50); /* For IE8 and earlier */}
.linkedin a:hover{opacity:.5; filter:alpha(opacity=50); /* For IE8 and earlier */}
.dribbble a:hover{opacity:.5; filter:alpha(opacity=50); /* For IE8 and earlier */}


/* Big Title */

.bigtitle{
float:left;
height: 130px;
text-align:center;
}

.bigtitle h1{
color:rgba(0, 0, 0, .4);
font-size: 74px;
font-weight: 300;
font-style: normal;
margin:58px 0 0 0;
}


/* Work 1 */


.background-w1{
height: 680px;
background: url(../img/work/w1/bkg-w1.png) repeat-x 0 -1px;
}

.container-w1{
width:940px;
height: 680px;
background: url(../img/work/w1/light-w1.png) no-repeat center 307px;
}

.phone-w1{
float:left;
width:322px;
height: 536px;
background: url(../img/work/w1/phone-w1.png) no-repeat;
}

.detail-w1{
z-index: 100;
position: absolute;
margin: 255px 0 0 260px;
width:228px;
height:228px;
background: url(../img/work/w1/detail-w1.png) no-repeat;
}

.ipad-w1{
margin:97px 0 0 0;
float:right;
width:484px;
height: 439px;
background: url(../img/work/w1/ipad-w1.png) no-repeat;
}

.description-w1{
width: 940px;
float:left;
font-weight:400;
}

.description-w1 p{
margin: 32px 0 0 0;
width: 540px;
color:rgba(0, 0, 0, .4);
float:left;
font-size: 16px;
line-height:24px;
}

.role-w1 p{
width: 300px;
color:rgba(0, 0, 0, .4);
float:right;
font-size: 14px;
line-height:normal;
border-left: 1px solid rgba(0, 0, 0, .2);
padding-left: 10px;
}


/* Work 2 */


.background-w2{
height: 1388px;
background: url(../img/work/w2/bkg-w2.gif) repeat-x;
}

.container-w2{
width:990px;
height: 1388px;
background: url(../img/work/w2/light-w2.png) no-repeat;
background-size: 100% 100%;
}

.icon-eatstreet{
width:990px;
height: 217px;
background: url(../img/work/w2/eatst-icon.png) no-repeat center;
}

.iphones-eatstreet{
width:990px;
height:576px;
}

.eatst-iphone01{
width:330px;
height:576px;
background: url(../img/work/w2/eatst-iphone01.png) no-repeat;
float: left;
}

.eatst-iphone02{
width:330px;
height:576px;
background: url(../img/work/w2/eatst-iphone02.png) no-repeat;
float: left;
}

.eatst-iphone03{
width:330px;
height:576px;
background: url(../img/work/w2/eatst-iphone03.png) no-repeat;
float: left;
}

.eatst-photos{
margin:42px 0 0 0;
width:965px;
height:361px;
background: url(../img/work/w2/eatst-photos.png) no-repeat center;
}

.description-w2{
margin: 0 0 0 24px;
width: 940px;
float:left;
font-weight:400;
}

.description-w2 p{
margin: 60px 0 0 0;
width: 540px;
color:rgba(0, 0, 0, .45);
float:left;
font-size: 16px;
line-height:24px;
}

.role-w2 p{
width: 300px;
color:rgba(0, 0, 0, .45);
float:right;
font-size: 14px;
line-height:normal;
border-left: 1px solid rgba(0, 0, 0, .2);
padding-left: 10px;
}



/* Work 3 */


.background-w3{
height: 768px;
background: #FFF url(../img/work/w3/bkg-w3.jpg) no-repeat center 0;
border-top:1px solid #FFF;
}

.container-w3{
width:940px;
height: 768px;
background: url(../img/work/w3/imac-w3.png) no-repeat center 70px;
}

.slide-w3{
float:left;
margin:91px 0 0 178px;
}

.description-w3{
width: 940px;
float:left;
font-weight:400;
}

.description-w3 p{
margin: 220px 0 0 0;
width: 540px;
color:rgba(0, 0, 0, .45);
font-size: 16px;
line-height:24px;
float:left;
}

.role-w3 p{
width: 300px;
color:rgba(0, 0, 0, .45);
float:right;
font-size: 14px;
line-height:normal;
border-left: 1px solid rgba(0, 0, 0, .2);
padding-left: 10px;
}



/* Work 4 */


.background-w4{
height: 1080px;
background: url(../img/work/w4/bkg-w4.gif) repeat;
}

.container-w4{
width:940px;
height: 1080px;
background: url(../img/work/w4/light-w4.png) no-repeat center 120px;
background-size: 100% 80%;
}

.redhand-iphone01{
margin: 260px 0 0 0;
width:320px;
height:599px;
background: url(../img/work/w4/redhand-iphone01.png) no-repeat;
float: left;
}

.redhand-logo{
margin: 66px 0 0 18px;
width:271px;
height:322px;
background: url(../img/work/w4/redhand-logo.png) no-repeat;
float: left;
}

.redhand-iphone02{
margin: 260px 0 0 0;
width:320px;
height:597px;
background: url(../img/work/w4/redhand-iphone02.png) no-repeat;
float: right;
}

.detail1-w4{
z-index: 100;
position: absolute;
margin: 566px 0 0 160px;
width:228px;
height:228px;
background: url(../img/work/w4/detail1-w4.png) no-repeat;
}

.detail2-w4{
z-index: 100;
position: absolute;
margin: 416px 0 0 500px;
width:228px;
height:228px;
background: url(../img/work/w4/detail2-w4.png) no-repeat;
}

.detail3-w4{
z-index: 100;
position: absolute;
margin: 650px 0 0 620px;
width:228px;
height:228px;
background: url(../img/work/w4/detail3-w4.png) no-repeat;
}

.description-w4{
width: 940px;
float:left;
font-weight:400;
}

.description-w4 p{
margin: 53px 0 0 0;
width: 540px;
color:rgba(255, 255, 255, .25);
font-size: 16px;
line-height:24px;
float:left;
}

.role-w4 p{
width: 300px;
color:rgba(255, 255, 255, .25);
float:right;
font-size: 14px;
line-height:normal;
border-left: 1px solid rgba(255, 255, 255, .1);
padding-left: 10px;
}


/* Work 5 */


.background-w5{
height: 1140px;
background: url(../img/work/w5/bkg-w5.gif) repeat;
border-top: 1px solid rgba(255, 255, 255, .3);
}

.container-w5{
width:940px;
height: 1140px;
background: url(../img/work/w5/light-w5.png) no-repeat 0 -400px;
background-size: 100% 150%;
}

.kinhabit-logo{
float:left;
width:940px;
height: 85px;
margin: 70px 0 0 0;
background: url(../img/work/w5/kinhabit-logo.png) no-repeat center;
}

.kinhabit-iphone01{
margin:4px 30px 0 0;
width:273px;
height:634px;
background: url(../img/work/w5/kinhabit-iphone01.png) no-repeat;
float: left;
}

.kinhabit-iphone02{
margin:40px 0 0 0;
width:304px;
height:598px;
background: url(../img/work/w5/kinhabit-iphone02.png) no-repeat;
float: left;
}

.kinhabit-iphone03{
margin:40px 0 0 0;
width:304px;
height:598px;
background: url(../img/work/w5/kinhabit-iphone03.png) no-repeat;
float: right;
}

.kinhabit-icons{
margin-top:40px;
width:940px;
margin-left: auto;
margin-right: auto;
float:left;
}

.kinhabit-icon01{
width:154px;
height:125px;
background: url(../img/work/w5/kinhabit-icon01.png) no-repeat;
float:left;
}

.kinhabit-icon02{
width:154px;
height:125px;
background: url(../img/work/w5/kinhabit-icon02.png) no-repeat;
float:left;
}

.kinhabit-icon03{
width:154px;
height:125px;
background: url(../img/work/w5/kinhabit-icon03.png) no-repeat;
float:left;
}

.kinhabit-btn{
margin:26px 0 0 90px;
width:306px;
height:98px;
background: url(../img/work/w5/kinhabit-btn.png) no-repeat;
float:left;
}

.description-w5{
width: 940px;
float:left;
font-weight:400;
}

.description-w5 p{
margin: 30px 0 0 0;
width: 540px;
color:rgba(255, 255, 255, .6);
font-size: 16px;
line-height:24px;
float:left;
}

.role-w5 p{
width: 300px;
color:rgba(255, 255, 255, .6);
float:right;
font-size: 14px;
line-height:normal;
border-left: 1px solid rgba(255, 255, 255, .5);
padding-left: 10px;
}


/* Work 6 */


.background-w6{
height: 678px;
background: url(../img/work/w6/bkg-w6.gif) repeat;
}

.container-w6{
width:940px;
height: 678px;
background: url(../img/work/w6/icons-img.png) no-repeat center 154px;
}

.icons-logo{
margin:64px 0 0 0;
width:940px;
height:46px;
background: url(../img/work/w6/icons-title.png) no-repeat center;
float: left;
}

.description-w6{
width: 940px;
float:left;
font-weight:400;
}

.description-w6 p{
margin: 422px 0 0 0;
width: 540px;
color:rgba(255, 255, 255, .4);
font-size: 16px;
line-height:24px;
float:left;
}

.role-w6 p{
width: 300px;
color:rgba(255, 255, 255, .4);
float:right;
font-size: 14px;
line-height:normal;
border-left: 1px solid rgba(255, 255, 255, .2);
padding-left: 10px;
}

.role-w6 a{
color: #1492d6;
text-decoration: none;
-webkit-transition: all 0.2s linear;
-webkit-transition-property: all;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: initial;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.role-w6 a:hover{
color:#FFF;
}


/* Work 7 */


.background-w7{
height: 852px;
background: url(../img/work/w7/bkg-w7.gif) repeat;
border-top: 1px solid rgba(255, 255, 255, .25);
}

.container-w7{
width:940px;
height: 852px;
background: url(../img/work/w7/light-w7.png) no-repeat 0 -340px;
background-size: 100% 100%;
}

.otto-logo{
margin:64px 0 0 0;
width:940px;
height:68px;
background: url(../img/work/w7/otto-logo.png) no-repeat center;
float: left;
}

.otto-browser{
margin:42px 0 0 0;
width:332px;
height:443px;
background: url(../img/work/w7/otto-browser.png) no-repeat;
float: left;
}

.otto-iphone{
z-index: 50;
position: absolute;
margin:300px 0 0 300px;
width:673px;
height:466px;
background: url(../img/work/w7/otto-iphone.png) no-repeat;
}

.detail-w7{
z-index: 100;
position: absolute;
margin: 170px 0 0 400px;
width:223px;
height:223px;
background: url(../img/work/w7/detail-w7.png) no-repeat 15px 17px;
}

.detail-w7 .graph{
width:223px;
height:223px;
background: url(../img/work/w7/graph.png) no-repeat 102px 0;
}

.detail-w7 .number{
width:223px;
height:223px;
background: url(../img/work/w7/number.png) no-repeat 33px 35px;
}

.description-w7{
width: 940px;
float:left;
font-weight:400;
}

.description-w7 p{
margin: 119px 0 0 0;
width: 540px;
color:rgba(255, 255, 255, .4);
font-size: 16px;
line-height:24px;
float:left;
}

.role-w7 p{
width: 300px;
color:rgba(255, 255, 255, .4);
float:right;
font-size: 14px;
line-height:normal;
border-left: 1px solid rgba(255, 255, 255, .2);
padding-left: 10px;
}



/* About */

.about{
float:left;
background: #FFF url(../img/me.png) no-repeat center 70px;
text-align:center;
color:rgba(0, 0, 0, .4);
}

.about h1{
font-size: 48px;
font-weight: 300;
font-style: normal;
margin:352px 0 30px 0;
color:rgba(0, 0, 0, .7);
}

.about p{
margin-left: auto;
margin-right: auto;
width: 780px;
font-size: 24px;
font-weight: 300;
font-style: normal;
line-height: 30px;
}

.about a{
color: #1492d6;
text-decoration: none;
-webkit-transition: all 0.2s linear;
-webkit-transition-property: all;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: initial;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.about a:hover{
color: #333;
}

/* Contact */

.contact{
float:left;
background: #FFF;
height:378px;
text-align:center;
color:rgba(0, 0, 0, .4);
}

.contact h1{
font-size: 48px;
font-weight: 300;
font-style: normal;
margin:108px 0 30px 0;
color:rgba(0, 0, 0, .7);
}

.contact p{
margin-left: auto;
margin-right: auto;
width: 780px;
font-size: 24px;
font-weight: 300;
font-style: normal;
line-height: 30px;
}

.contact a{
color: #1492d6;
text-decoration: none;
-webkit-transition: all 0.2s linear;
-webkit-transition-property: all;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: initial;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.contact a:hover{
color: #333;
}


/* Disclaimer */

.disclaimer{
background: #FFF;
float:left;
text-align:center;
color:rgba(0, 0, 0, .4);
}

.disclaimer p{
margin: 0 auto 40px auto;
font-size: 14px;
font-weight: 400;
font-style: normal;
}


/* Mobile */

@media only screen and (max-device-width:1024px)
{
.header{
position: absolute;
}
#skrollr-body{
position: absolute;
}
}