html, body {width:100%; height:100%; min-width:1000px; min-height:580px; margin:0; padding:0; font-family: 'Ubuntu', sans-serif; font-weight:400; color:#ffffff;}
p, h1, h2, h3, h4, h5 ,h6 {margin:0; font-weight:normal;}
ul, ol {margin:0; padding:0; list-style-type:none;}
a {color:#ffffff; text-decoration:none; cursor:pointer;}
.clear {clear:both;}
/*
@font-face {
    font-family:'UbuntuLight';
    src:url('fonts/ubuntu-light-webfont.eot');
    src:url('fonts/ubuntu-light-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/ubuntu-light-webfont.woff') format('woff'),
        url('fonts/ubuntu-light-webfont.ttf') format('truetype'),
        url('fonts/ubuntu-light-webfont.svg#UbuntuLight') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'UbuntuRegular';
    src:url('fonts/ubuntu-regular-webfont.eot');
    src:url('fonts/ubuntu-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/ubuntu-regular-webfont.woff') format('woff'),
        url('fonts/ubuntu-regular-webfont.ttf') format('truetype'),
        url('fonts/ubuntu-regular-webfont.svg#UbuntuRegular') format('svg');
    font-weight:normal;
    font-style:normal;
}
*/


@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: local('Ubuntu Light'), local('Ubuntu-Light'), url(_aijTyevf54tkVDLy-dlnD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(_xyN3apAT_yRRDeqB3sPRg.woff) format('woff');
}


#wrapper {position:relative; height:100%;} /*overflow:hidden with JS : make sure web size = window size*/ /*DONE*/
.content {position:relative; width:100%; height:100%; overflow:hidden;} /*position:absolute, bottom:0, width/height, wrap with JS*/ /*main page DONE*/ /*porto page DONE*/
.content-inner {position:relative; height:100%;}
.corner-light {position:absolute; top:0; left:0; z-index:11; width:100%; height:100%;}
.bottom-gradient {position:absolute; bottom:0; z-index:12; width:100%; height:538px; background:url(../images/bot-grad.png) bottom left repeat-x;}
.xituz-batik {position:relative; z-index:13; height:100%; background:url(../images/xi-batik.png) left center; overflow:auto;} /*overflow:hidden with JS : disable h-scroll for wider contents*/ /*DONE*/
.detail-outer {position:absolute; top:50%; width:0; height:0;}
.detail-inner {position:relative; height:510px; margin-top:-300px;} /*opacity 30%, cursor pointer, padding right 0 with JS*/ /*DONE*/
.page-title {height:130px; position:absolute; top:50%; margin-top:-300px;}
.page-title h1 {font-size:104px; letter-spacing:-5px;}
.detail-content {height:380px; position:absolute; top:50%; margin-top:-170px;}
.detail-content p {font-size:15px; line-height:20px;}
.menu {position:absolute; z-index:14; left:55px; bottom:30px; font-size:24px; color:#ffffff;}
.menu ul {overflow:auto; margin-bottom:2px;}
.menu ul li {float:left; margin-right:10px; padding-top:8px;}
.menu ul li.logo {padding-top:0;}
.menu ul li.logo a.nav-1-home {display:block; width:124px; height:34px; background:url(../images/xi-logo.png) bottom left no-repeat; text-indent:-9999px;}
.menu p {font-weight:300; font-size:11px;}
.tag {position:absolute; z-index:15; right:55px; bottom:49px; font-size:20px;}
.nav-anchor {position:absolute; top:0; left:0; visibility:hidden;}
.bg-base {position:relative; width:100%; height:100%;}
.bg-container {position:absolute;}
.bg-image {position:relative;}
.porto-inner {position:relative; height:100%; overflow:auto;} /*overflow:hidden with JS : disable h-scroll for wider contents*/ /*DONE*/
.porto-title {position:absolute; z-index:11; top:50%; left:50%; height:90px; font-size:67px; margin-top:-270px; margin-left:-500px;}
.porto-screen {position:absolute; z-index:5; top:50%; right:50%; width:678px; height:380px; margin-top:-170px; margin-right:-280px;} /*animate position with JS*/
.porto-detail {position:absolute; z-index:10; top:50%; left:88%; margin-top:-170px;} /*opacity 30% & cursor pointer with JS*/ /*DONE*/      /*animate position with JS*/
.porto-detail p {width:400px; line-height:22px; margin-bottom:25px; padding-right:120px;}
.detail-shadow {position:absolute; z-index:9; top:50%; left:88%; margin-top:-169px; margin-left:1px; color:#000000; opacity:0; filter:alpha(opacity=0);}
.detail-shadow p {width:400px; line-height:22px; margin-bottom:25px; padding-right:120px;}
.porto-share span {float:left; padding-top:4px;}
.porto-share a {display:block; height:25px; float:left; margin-left:10px;}
.porto-share a.share-fb {width:62px; background:url(../images/button-share.png) top left no-repeat;}
.porto-share a.share-twit {width:72px; background:url(../images/button-share.png) top right no-repeat;}
.porto-decor {position:absolute; top:50%; left:50%;}
.porto-share {display:none;}

#page-1 {background:#ffffff; z-index:1;}
#page-1 .corner-light {background:url(../images/xi-batik.png) left center;}
#page-1 .xituz-batik {background:url(../images/corner-light-white.png) top left no-repeat;}
#page-1 .menu ul,
#page-1 .menu p,
#page-1 .menu a {color:#000000;}
#page-1 .menu ul li a.nav-1-home {background:url(../images/xi-logo.png) top left no-repeat;}
#page-1 .tag {color:#000000;}
/*#page-1 #ideas {position:absolute; top:50%; left:55px; width:700px;}
#page-1 #ideas h1#main-title {width:699px; height:184px; margin-top:-134px; background:url(../images/xi-ideas.png) top left no-repeat; text-indent:-9999px;}*/
#page-1 h1.main-tag {position:absolute; top:50%; text-indent:-9999px;}
#page-1 h1#tag-1 {left:58px; width:411px; height:104px; margin-top:-133px; background:url(../images/xi-1creating.png) top left no-repeat;}
#page-1 h1#tag-2 {left:504px; width:250px; height:87px; margin-top:-134px; background:url(../images/xi-2ideas.png) top left no-repeat;}
#page-1 h1#tag-3 {left:55px; width:224px; height:86px; margin-top:-37px; background:url(../images/xi-3that.png) top left no-repeat;}
#page-1 h1#tag-4 {left:303px; width:261px; height:87px; margin-top:-37px; background:url(../images/xi-4work.png) top left no-repeat;}

#page-2 {background:#c12832; z-index:2;} /*display:none page-2 - last-page with JS*/ /*DONE*/
#page-2 .corner-light {background:url(../images/corner-light-red.png) top left no-repeat;}
#page-2 #contact {right:50%; width:auto;} /*animate position with JS*/
#page-2 #contact .detail-inner {width:220px; margin-left:-450px;}
#page-2 #contact p {margin-bottom:5px; padding-top:130px; font-size:14px; line-height:20px; text-align:right;}
#page-2 #contact a {display:block; width:30px; height:29px; float:right; margin-left:8px;}
#page-2 #contact a#fb {background:url(../images/soc-med.png) 0px 0px no-repeat;}
#page-2 #contact a#fb:hover {background:url(../images/soc-med.png) -30px 0px no-repeat;}
#page-2 #contact a#twit {background:url(../images/soc-med.png) 0px -29px no-repeat;}
#page-2 #contact a#twit:hover {background:url(../images/soc-med.png) -30px -29px no-repeat;}
#page-2 #contact a#tum {background:url(../images/soc-med.png) 0px -58px no-repeat;}
#page-2 #contact a#tum:hover {background:url(../images/soc-med.png) -30px -58px no-repeat;}
#page-2 #about-title.page-title {right:50%; margin-right:-25px;}
#page-2 #about-content.detail-content {right:50%; margin-right:-230px; width:400px;}
#page-2 #clients-title.page-title {left:82%;}
#page-2 #clients-content.detail-content {left:82%; width:800px; height:344px; margin-left:80px; padding-right:120px; border-top:dashed 1px #ffffff; border-left:dashed 1px #ffffff;}
#page-2 #clients-content .client-box {float:left; width:199px; height:85px; text-align:center; border-right:dashed 1px #ffffff; border-bottom:dashed 1px #ffffff;}

#page-3 {background:#006eaa; z-index:3;}
#page-3 .corner-light {background:url(../images/corner-light-blue.png) top left no-repeat;}
#page-3 .page-title {top:0; margin-top:0;}
#page-3 .detail-content {top:130px; margin-top:0px;}
#page-3 #portofolios {left:50%;}
#page-3 #portofolios .detail-inner {width:990px; margin-left:-490px;}
#page-3 #portofolios .detail-content {margin-left:30px; overflow:hidden;}
#page-3 #portofolios .works-box {position:relative; float:left; margin:0 9px 9px 0; text-align:center;}
#page-3 #portofolios .works-box a {position:absolute; top:0; left:0; display:block; width:151px; height:113px; background:url(../images/works-border.png) top left no-repeat; text-indent:-9999px;}
#page-3 #portofolios .works-empty {width:151px; height:113px; background:url(../images/works-box.png) top left no-repeat;}
#page-3 #portofolios .works-portofolio {width:151px; height:113px; overflow:hidden;}
#page-3 #portofolios .works-portofolio img {margin-top:-20px;} /*animate up and down with JS*/ /*DONE*/

#porto-1 {background:#000000; z-index:4;}
#porto-1 .detail-shadow {color:#000000;}
#porto-1 .porto-inner {background:url(../images/porto-axe-light.jpg) top center no-repeat #000000;}
#porto-1 .porto-screen {background:url(../images/porto-axe-screen.jpg) top left no-repeat;}
#axe-feather {z-index:6;  width:1028px; height:540px; margin-top:-285px; margin-left:-580px; background:url(../images/porto-axe-feather.png) top left no-repeat;}
#axe-angel {z-index:7; width:370px; height:401px; margin-top:-115px; margin-left:-530px; background:url(../images/porto-axe-angel.png) top left no-repeat;}

#porto-2 {background:#000000; z-index:5;}
#porto-2 .detail-shadow {color:#c94a0d;}
#porto-2 .porto-inner {background:url(../images/porto-scotts-corner.jpg) top left no-repeat #f36622;}
#porto-2 .porto-screen {background:url(../images/porto-scotts-screen.jpg) top left no-repeat;}
#scotts-logo {z-index:6; width:192px; height:157px; margin-top:-200px; margin-left:160px; background:url(../images/porto-scotts-logo.png) top left no-repeat;}
#scotts-botol {z-index:7; width:188px; height:162px; margin-top:100px; margin-left:-470px; background:url(../images/porto-scotts-botol.png) top left no-repeat;}

#porto-3 {background:#000000; z-index:6;}
#porto-3 .porto-title {font-size:57px;}
#porto-3 .detail-shadow {color:#bbe0f1;}
#porto-3 .porto-inner {background:none;}
#porto-3 .porto-screen {background:url(../images/porto-ptba-screen.jpg) top left no-repeat;}
#porto-3 .porto-detail {color:#005877;}
#ptba-grad {top:0; left:0; width:100%; height:100%; background:url(../images/porto-ptba-grad.jpg) center center repeat-x #ffffff;}
#ptba-ground {left:0; margin-top:117px; width:100%; height:110px; background:url(../images/porto-ptba-ground.jpg) top center repeat-x;}
#ptba-bulldozer {z-index:6; width:479px; height:399px; margin-top:-80px; margin-left:-590px; background:url(../images/porto-ptba-bulldozer.png) top left no-repeat;}

#porto-4 {background:#000000; z-index:7;}
#porto-4 .detail-shadow {color:#f3f3f3;}
#porto-4 .porto-inner {background:url(../images/porto-lg-grad.gif) center center repeat-x #ffffff;}
#porto-4 .porto-screen {background:url(../images/porto-lg-screen.jpg) top left no-repeat;}
#porto-4 .porto-title {color:#bb083e;}
#porto-4 .porto-detail {color:#666666;}
#lg-shape {width:1519px; height:550px; margin-top:-270px; margin-left:-810px; background:url(../images/porto-lg-shape.jpg) top left no-repeat;}
#lg-tv {z-index:6; width:321px; height:311px; margin-top:-120px; margin-left:14px; background:url(../images/porto-lg-tv.png) top left no-repeat;}
#porto-4 .menu ul,
#porto-4 .menu p,
#porto-4 .menu a {color:#000000;}
#porto-4 .menu ul li a.nav-1-home {background:url(../images/xi-logo.png) top left no-repeat;}
#porto-4 .tag {color:#000000;}

#porto-5 {background:#000000; z-index:8;}
#porto-5 .detail-shadow {color:#7f0900;}
#porto-5 .porto-inner {background:url(../images/porto-cola-grad.gif) center center repeat-x #ffffff;}
#porto-5 .porto-screen {background:url(../images/porto-cola-screen.jpg) top left no-repeat;}
#cola-star {z-index:4; width:1119px; height:429px; margin-top:-240px; margin-left:-645px; background:url(../images/porto-cola-star.png) top left no-repeat;}
#cola-drink {z-index:7; width:255px; height:338px; margin-top:-128px; margin-left:86px; background:url(../images/porto-cola-drink.png) top left no-repeat;}
#cola-bedug {z-index:8; width:328px; height:333px; margin-top:-25px; margin-left:-550px; background:url(../images/porto-cola-bedug.png) top left no-repeat;}

#porto-6 {background:#000000; z-index:9;}
#porto-6 .detail-shadow {color:#001d51;}
#porto-6 .porto-inner {background:url(../images/porto-mizone-grad.gif) center center repeat-x #ffffff;}
#porto-6 .porto-screen {background:url(../images/porto-mizone-screen.jpg) top left no-repeat;}
#mizone-pattern {width:1200px; height:688px; margin-top:-300px; margin-left:-650px; background:url(../images/porto-mizone-pattern.jpg) top left no-repeat;}
#mizone-wave {z-index:6; width:257px; height:140px; margin-top:-40px; margin-left:-540px; background:url(../images/porto-mizone-wave.png) top left no-repeat;}
#mizone-botol {z-index:7; width:220px; height:315px; margin-top:0px; margin-left:130px; background:url(../images/porto-mizone-botol.png) top left no-repeat;}

#porto-7 {background:#000000; z-index:10;}
#porto-7 .detail-shadow {color:#2c2c2c;}
#porto-7 .porto-inner {background:url(../images/porto-damn-pattern.gif) center center #ffffff;}
#porto-7 .porto-screen {background:url(../images/porto-damn-screen.jpg) top left no-repeat;}
#damn-light {z-index:4; width:637px; height:636px; top:0; left:0; background:url(../images/porto-damn-light.png) top left no-repeat;}
#damn-outfit {z-index:6; width:378px; height:302px; margin-top:-52px; margin-left:-590px; background:url(../images/porto-damn-outfit.png) top left no-repeat;}

#porto-8 {background:#000000; z-index:11;}
#porto-8 .detail-shadow {color:#0067a7;}
#porto-8 .porto-inner {background:none;}
#porto-8 .porto-screen {background:url(../images/porto-calpico-screen.jpg) top left no-repeat;}
#calpico-grad {top:0; left:0; width:100%; height:100%; background:url(../images/porto-calpico-grad.gif) center center repeat-x #ffffff;}
#calpico-sea {left:0; margin-top:60px; width:100%; height:165px; background:url(../images/porto-calpico-sea.png) top center repeat-x;}
#calpico-cloud {z-index:4; width:1104px; height:409px; margin-top:-330px; margin-left:-640px; background:url(../images/porto-calpico-cloud.png) top left no-repeat;}
#calpico-sapi {z-index:6; width:318px; height:261px; margin-top:-65px; margin-left:-540px; background:url(../images/porto-calpico-sapi.png) top left no-repeat;}


/* PRELOADER */
#preloader-wrap {position:absolute; width:100%; height:100%; top:0px; left:0px; background-color:#fff; z-index:100;}
#load-bar {width:220px; height:60px; margin:0px auto; margin-top:24%; background:url('../images/logo_0.png') top left no-repeat;}
#bar {width:0px; height:60px; background:url('../images/logo_1.png') top left no-repeat;}


/* 404 page */
#page-404 {position:relative; width:100%; height:100%;}
#parasut {position:absolute; top:50%; left:50%; margin-top:-165px; margin-left:-385px;}
#ooops {position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-165px; font-family: 'Ubuntu', sans-serif; font-weight:700; color:#c00000; font-size:36px;}
#wrong {position:absolute; top:50%; left:50%; width:520px; margin-top:-40px; margin-left:-130px; font-family: 'Ubuntu', sans-serif; font-weight:300; color:#000000; font-size:48px; line-height:48px;}
#go-back {position:absolute; top:50%; left:50%; width:385px; margin-top:85px; margin-left:-130px; font-family: 'Ubuntu', sans-serif; font-weight:300; color:#666666; font-size:24px;}
#go-back a {color:#666666;}
#go-back a:hover {color:#999999;}
#xituz-404 {margin:0 6px 0 6px;}