@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);.codropsheader h1,.codropsheader h2{margin:0 0 .6em;float:left;line-height:1.3}.page,.side{-webkit-backface-visibility:hidden}.back,.profile,.profile img{border-radius:50%}@font-face{font-family:bpicons;src:url(../fonts/bpicons/bpicons.eot);src:url(../fonts/bpicons/bpicons.eot?#iefix)format('embedded-opentype'),url(../fonts/bpicons/bpicons.woff)format('woff'),url(../fonts/bpicons/bpicons.ttf)format('truetype'),url(../fonts/bpicons/bpicons.svg#bpicons)format('svg');font-weight:400;font-style:normal}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,html{font-size:100%;padding:0;margin:0}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}body{font-family:Lato,Calibri,Arial,sans-serif;color:#fff}a{color:#ccc;text-decoration:none}a:hover{color:#000}.codropsheader{width:100%;margin:0 auto;text-align:left;padding:1.4em;opacity:.7;visibility:visible;-webkit-transition:opacity .3s;transition:opacity .3s}.back,.overlay{visibility:hidden}.codropsheader h1{font-size:1em;font-weight:400}.codropsheader h2{font-size:2.125em;font-weight:400}.codropsheader>span{display:block;position:relative;z-index:9999;font-weight:700;text-transform:uppercase;letter-spacing:.5em;padding:0 0 .6em .1em}.codropsheader>span span:after{width:30px;height:30px;left:-12px;top:-8px;font-size:75%;position:relative}.codropsheader>span span:hover:before{content:attr(data-content);text-transform:none;text-indent:0;letter-spacing:0;font-weight:300;font-size:110%;padding:.8em 1em;line-height:1.2;text-align:left;left:auto;margin-left:4px;position:absolute;color:#47a3da;background:#fff}.codropsheader nav{float:left;text-align:center;margin-left:1.5em;display:block}.codropsheader nav a{display:inline-block;position:relative;text-align:left;width:2.5em;height:2.5em;background:#47a3da;border-radius:50%;margin:0 .1em;border:3px solid #fff}.overlay,.side{top:0;height:100%}.codropsheader nav a>span{display:none}.demos,.demos a{display:inline-block}.codropsheader nav a:hover:before{content:attr(data-info);color:#fff;position:absolute;width:600%;top:120%;text-align:right;right:0;pointer-events:none}.back,.bp-icon:after,.side{text-align:center}.codropsheader nav a:hover{background:#fff}.bp-icon:after{font-family:bpicons;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;color:#fff;-webkit-font-smoothing:antialiased}.codropsheader nav .bp-icon:after{position:absolute;top:0;left:0;width:100%;height:100%;line-height:2;text-indent:0}.codropsheader nav a:hover:after{color:#47a3da}.bp-icon-next:after{content:"\e000"}.bp-icon-drop:after{content:"\e001"}.bp-icon-archive:after{content:"\e002"}.bp-icon-about:after{content:"\e003"}.bp-icon-prev:after{content:"\e004"}.demos{line-height:2.4em;margin-left:1em;float:right}.demos a{color:#fff;margin:0 .5em}.demos a.current,.demos a:focus,.demos a:hover{color:rgba(0,0,0,.4)}@media screen and (max-width:73.375em){.codropsheader{text-align:center}.codropsheader h1,.codropsheader nav,.demos{float:none;margin:0 auto;padding:.15em 0}.codropsheader>span{padding:0}.codropsheader>span span:after{display:none}}@media screen and (max-height:30.25em){.codropsheader nav{display:none}}.container,body,html{position:relative;width:100%;height:100%}body{overflow-y:scroll;background:#333}.splitlayout{position:relative;overflow-x:hidden;min-height:100%;width:100%}.side{position:fixed;z-index:100;width:50%}.open-left .side,.open-right .side{cursor:default}.overlay{position:absolute;left:0;z-index:499;width:100%;opacity:0}.side-left .overlay{background:rgba(0,0,0,.7)}.side-right .overlay{background:rgba(0,0,0,.3)}.side-left{left:0;background:url(../images/top-celeb.jpg)#47a3da;color:#fff;background-size:cover}.side-right{right:0;background:url(../images/top-kartini.jpg)#fff;color:#47a3da;background-size:cover}.intro-content{position:absolute;top:50%;left:50%;padding:0 1em;width:50%;cursor:pointer;font-size:.8em;-webkit-transform:translateY(-50%)translateX(-50%);transform:translateY(-50%)translateX(-50%)}.celeb,.kartini{padding:50px 0 30px}.profile{margin:0 auto;width:140px;height:140px;background:#fff}.celeb{background:#000064;background:rgba(0,0,100,.8);color:#fff}.kartini{background:#6e1318;background:rgba(100,0,0,.8);color:#fff}.profile img{max-width:100%;opacity:1}.intro-content h1>span{display:block;white-space:nowrap}.intro-content h1>span:first-child{font-weight:300;font-size:1.5em}.intro-content h1>span:nth-child(2){position:relative;margin-top:.5em;padding:.8em;text-transform:uppercase;letter-spacing:1px;font-size:.6em}.intro-content h1>span:nth-child(2):before{position:absolute;top:0;left:25%;width:50%;height:2px;background:#fff;content:''}.side-right .intro-content h1>span:nth-child(2):before{background:#fff}.page-right,.splitlayout.open-right{background:#ecf0f1}.back{position:fixed;top:2.6em;z-index:500;display:block;width:50px;height:50px;color:#47a3da;font-size:22px;line-height:44px;opacity:0;pointer-events:none}.close-left .side-left,.close-right .side-right,.open-left .side-left{z-index:200}.mobile-layout .back{position:absolute}.back-left{left:12.5%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.back-right{right:12.5%;-webkit-transform:translateX(50%);transform:translateX(50%);color:#fff}.open-left .back-right,.open-right .back-left{visibility:visible;opacity:1;-webkit-transition-delay:.3s;transition-delay:.3s;pointer-events:auto}.back:hover{color:#ddd}.page{position:relative;top:0;overflow:auto;min-height:100%;width:75%;height:auto;font-size:1.4em}.page-right{left:25%;outline:#ecf0f1 solid 5px;color:#97a8b2;-webkit-transform:translateX(100%);transform:translateX(100%)}.page-left,.splitlayout.open-left{background:#34495e}.page-left{left:0;outline:#34495e solid 5px;color:#fff;text-align:right;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.page-inner{padding:2em}.page-inner section{padding-bottom:1em}.page-inner h2{margin:0 0 1em;font-weight:300;font-size:2.4em}.page-inner p{font-weight:300;font-size:1.2em}.page,.side{-webkit-transition:-webkit-transform .6s;transition:transform .6s}.overlay{-webkit-transition:opacity .6s,visibility .1s .6s;transition:opacity .6s,visibility .1s .6s}.intro-content{-webkit-transition:-webkit-transform .6s,top .6s;transition:transform .6s,top .6s}.back,.intro-content h1{-webkit-transition:opacity .3s;transition:opacity .3s}.reset-layout .page,.splitlayout.close-left .page-right,.splitlayout.close-right .page-left,.splitlayout.open-left .page-right,.splitlayout.open-right .page-left{position:absolute;overflow:hidden;height:100%}.splitlayout.open-left .page-left,.splitlayout.open-right .page-right{position:relative;overflow:auto;height:auto}.open-left .side-right .overlay,.open-right .side-left .overlay{visibility:visible;opacity:1;-webkit-transition:opacity .6s;transition:opacity .6s}.open-right .side-left{-webkit-transform:translateX(-60%);transform:translateX(-60%)}.open-right .side-right{z-index:200;-webkit-transform:translateX(-150%);transform:translateX(-150%)}.open-right .side-right .intro-content{-webkit-transform:translateY(-50%)translateX(0)scale(.6);transform:translateY(-50%)translateX(0)scale(.6)}.open-right .page-right{-webkit-transform:translateX(0);transform:translateX(0)}.open-left .side-right{-webkit-transform:translateX(60%);transform:translateX(60%)}.open-left .side-left{-webkit-transform:translateX(150%);transform:translateX(150%)}.open-left .side-left .intro-content{-webkit-transform:translateY(-50%)translateX(-100%)scale(.6);transform:translateY(-50%)translateX(-100%)scale(.6)}.open-left .codropsheader{opacity:0;visibility:hidden;-webkit-transition:opacity .3s,visibility .1s .3s;transition:opacity .3s,visibility .1s .3s}.open-left .page-left{-webkit-transform:translateX(0);transform:translateX(0)}@media screen and (max-width:83em){.intro-content{font-size:60%}}@media screen and (max-width:58em){body{font-size:90%}}@media screen and (max-width:49.4375em){.intro-content,.page{width:100%}.open-right .side-right{-webkit-transform:translateX(-175%);transform:translateX(-175%)}.open-right .side-left{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.open-left .side-right{-webkit-transform:translateX(100%);transform:translateX(100%)}.open-left .side-left{-webkit-transform:translateX(175%);transform:translateX(175%)}.page-right{left:0;padding-left:15%}.page-left{padding-right:15%}.open-right .side-right .intro-content{top:100%;-webkit-transform:translateY(-150px)translateX(-12.5%)scale(.5);transform:translateY(-150px)translateX(-12.5%)scale(.5)}.open-left .side-left .intro-content{top:100%;-webkit-transform:translateY(-150px)translateX(-87.5%)scale(.5);transform:translateY(-150px)translateX(-87.5%)scale(.5)}.open-left .intro-content h1,.open-right .intro-content h1{opacity:0}.back-left{left:6.25%}.back-right{right:6.25%}}@media screen and (max-width:42.5em){body{font-size:80%}.intro-content{font-size:50%}}@media screen and (max-height:41.125em){.intro-content{-webkit-transform:translateY(-25%)translateX(-50%);transform:translateY(-25%)translateX(-50%)}}@media screen and (max-width:39.375em){.intro-content .profile{-webkit-transform:scale(.5);transform:scale(.5)}}@media screen and (max-width:320px){body{font-size:70%}}