@import url(https://fonts.googleapis.com/css?family=Roboto:300);

*,
*:after,
*:before {
    box-sizing:border-box;
}
body,
h1,
h4 {
    margin:0;
    padding:0;
}
body {
    color:rgba(255,255,255,.6);
    font-family:"Roboto",sans-serif;
    background:#01579b;
}
h1,
h4 {
    font-weight:300;
}
h1 {
    font-style:italic;
}
ul,
ol {
    margin:0;
    padding:0;
}
li {
    list-style:none;
}
aside {
    width:939px;
    margin:25px auto;
    text-align:center;
}

/* container */
.container {
    margin:75px auto;
}

/* gedung sate */
.gedung-sate {
    margin:auto;
    width:939px;
    height:335px;
    position:relative;
}

/* bd */
.bd:before,
.bd:after,
.bd,
.sky:before,
.sky,
.sky li:before,
.sky li:after,
.sky li,
.sky div {
    position:absolute;
}
.bd:before,
.bd:after,
.bd5 ul li:before,
.bd5 ul li:after {
    z-index:1;
    top:-65px;
    width:38px;
    height:128px;
}
.bd:before,
.bd:after,
.bd > div:before,
.bd > div:after,
.bd5 ul li:before,
.bd5 ul li:after,
.bd5 ul li div:before,
.bd5 ul li div:after,
.bd5 ol:before,
.sky:before,
.sky li:before,
.sky li:after {
    content:'';
    display:block;
    border:1px solid;
}
.bd > div:before,
.bd > div:after,
.bd > div {
    background:#01579b;
}
.bd > div:first-child:before,
.bd > div:first-child:after {
    z-index:2;
    height:4px;
}
.bd > div:first-child:after {
    height:6px;
    width:100%;
}
.bd > div:last-child:before,
.bd > div:last-child:after {
    width:12px;
    bottom:-1px;
    position:absolute;
}
.bd > div:last-child:before {
    left:-5px;
}
.bd > div:last-child:after {
    right:-5px;
}
.bd div,
.bd ul {
    width:100%;
    display:flex;
    display:-ms-flexbox;
    display:-webkit-box;
    display:-webkit-flex;
}
.bd {
    bottom:0;
    overflow:hidden;
}
.bd > div {
    border:1px solid;
    position:relative;
}
.bd > div:first-child {
    border:0;
    flex-direction:column;
    -ms-flex-direction:column;
    -webkit-flex-direction:column;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-pack:justify;
    -webkit-box-pack:justify;
    justify-content:space-between;
    -webkit-justify-content:space-between;
    align-items:center;
    -ms-flex-align:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
}
.bd > div:nth-child(2) {
    margin:auto;
    border-top:0;
}
.bd ul {
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
}
.bd > div:nth-child(2) li:before,
.bd > div:nth-child(2) li:after {
    content:'';
}
.bd > div:nth-child(2) li {
    width:21px;
    height:21px;
    margin:0 5px;
    border:1px solid;
}
.absolutely {
    left:0;
    right:0;
    margin:auto;
}

/* bd1 */
.bd1:before {
    left:21px;
    transform:rotate(77deg);
    -ms-transform:rotate(77deg);
    -webkit-transform:rotate(77deg);
}
.bd1:after {
    right:21px;
    transform:rotate(-77deg);
    -ms-transform:rotate(-77deg);
    -webkit-transform:rotate(-77deg);
}
.bd1 {
    left:0;
    right:0;
    margin:auto;
    width:794px;
    height:183px;
}
.bd1 > div:first-child:before {
    width:590px;
}
.bd1 > div:first-child {
    height:33px;
}
.bd1 > div:last-child:before,
.bd1 > div:last-child:after {
    height:30px;
}
.bd1 > div:last-child {
    width:760px;
    padding:6px 32px 8px;
}
.bd1 > div:last-child div {
    -ms-flex-pack:justify;
    -webkit-box-pack:justify;
    justify-content:space-between;
    -webkit-justify-content:space-between;
}
.bd1 ul {
    width:auto;
}

/* bd2-wrap */
.bd2-wrap {
    bottom:0;
    z-index:3;
    width:100%;
    position:absolute;
    display:flex;
    display:-ms-flexbox;
    display:-webkit-box;
    display:-webkit-flex;
    -ms-flex-pack:justify;
    -webkit-box-pack:justify;
    justify-content:space-between;
    -webkit-justify-content:space-between;
}
.bd2-wrap .bd:last-child {
    transform:scaleX(-1);
    -ms-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
}

/* bd2 */
.bd2:before {
    left:-3px;
    transform:rotate(72deg);
    -ms-transform:rotate(72deg);
    -webkit-transform:rotate(72deg);
}
.bd2:after {
    right:-3px;
    transform:rotate(-72deg);
    -ms-transform:rotate(-72deg);
    -webkit-transform:rotate(-72deg);
}
.bd2 {
    z-index:2;
    width:448px;
    height:121px;
    position:relative;
}
.bd2 > div:first-child:before {
    width:326px;
}
.bd2 > div:first-child {
    height:29px; 
}
.bd2 > div:last-child:before {
    left:-6px;
    width:14px;
    height:83px;
}
.bd2 > div:last-child:after {
    display:none;
}
.bd2 > div:last-child {
    width:418px;
    height:90px;
    padding:12px 0 8px;
}
.bd2 > div:last-child div {
    margin-left:14px;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    flex-direction:column;
    -ms-flex-direction:column;
    -webkit-flex-direction:column;
    -ms-flex-pack:justify;
    -webkit-box-pack:justify;
    justify-content:space-between;
    -webkit-justify-content:space-between;
}
.bd2 > div:last-child ul:last-child li:before,
.bd2 > div:last-child ul:last-child li:after {
    left:0;
    width:100%;
    border:1px solid;
    position:absolute;
}
.bd2 > div:last-child ul:last-child li:before {
    top:0;
    height:23px;
    border-radius:40%;
}
.bd2 > div:last-child ul:last-child li:after {
    bottom:0;
    height:19px;
    background:#01579b;
}
.bd2 > div:last-child ul:last-child li {
    border:0;
    height:32px;
    position:relative;
}

/* cbd */
.cbd:before,
.cbd:after {
    top:-24px;
}
.cbd:before {
    left:-49px;
    transform:rotate(40deg);
    -ms-transform:rotate(40deg);
    -webkit-transform:rotate(40deg);
}
.cbd:after {
    right:-49px;
    transform:rotate(-40deg);
    -ms-transform:rotate(-40deg);
    -webkit-transform:rotate(-40deg);
}
.cbd {
    z-index:1;
    top:-138px;
    width:45px;
    height:107px;
}
.cbd div:first-child:before {
    width:7px;
    height:10px;
}
.cbd div:first-child:after {
    height:8px;
}
.cbd div:first-child {
    height:40px;
}
.cbd div:nth-child(2):before,
.cbd div:nth-child(2):after {
    display:none;
}
.cbd div:nth-child(2) {
    border:0;
    padding:0;
    z-index:2;
    height:41px;
}
.cbd div:nth-child(2) ul,
.cbd div:last-child {
    margin:auto;
}
.cbd div:nth-child(2) ul,
.bd4 div:nth-child(1) ul {
    width:39px;
    height:100%;
    margin:auto;
    padding:7px 0 1px;
    border-left:1px solid;
    border-right:1px solid;
}
.cbd div:nth-child(2) li {
    width:7px;
    height:inherit;
    margin:0px 1px;
}
.cbd div:last-child:before,
.cbd div:last-child:after {
    top:-10px;
    z-index:-1;
    width:22px;
    height:22px;
}
.cbd div:last-child:before {
    left:-1px;
    border-right:0;
    transform:skew(0,38deg);
    -ms-transform:skew(0,38deg);
    -webkit-transform:skew(0,38deg);
}
.cbd div:last-child:after {
    right:-1px;
    border-left:0;
    transform:skew(0,-38deg);
    -ms-transform:skew(0,-38deg);
    -webkit-transform:skew(0,-38deg);
}
.cbd div:last-child {
    top:0;
    width:43px;
    height:4px;
}

/* bd3 */
.bd3:before,
.bd3:after {
    top:-60px;
}
.bd3:before {
    left:-17px;
    transform:rotate(72deg);
    -ms-transform:rotate(72deg);
    -webkit-transform:rotate(72deg);
}
.bd3:after {
    right:-17px;
    transform:rotate(-72deg);
    -ms-transform:rotate(-72deg);
    -webkit-transform:rotate(-72deg);
}
.bd3 {
    z-index:3;
    width:198px;
    height:81px;
    background:none;
}
.bd3 div:first-child:before {
    width:75px;
}
.bd3 div:first-child {
    height:30px; 
}
.bd3 div:last-child:before,
.bd3 div:last-child:after {
    height:43px;
}
.bd3 div:last-child {
    width:161px;
    height:49px;
    padding:8px 18px 0;
}
.bd3 div:last-child ul {
    width:100%;
    align-items:center;
    -ms-flex-align:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-pack:distribute;
    justify-content:space-around;
    -webkit-justify-content:space-around;
}
.bd3 div:last-child li:first-child,
.bd3 div:last-child li:last-child {
    width:6px;
    height:17px;
    margin-top:-3px;
}
.bd3 div:last-child li:nth-child(2):before,
.bd3 div:last-child li:nth-child(2) {
    border-bottom:0!important;
}
.bd3 div:last-child li:nth-child(2):before {
    left:0;
    right:0;
    bottom:0;
    width:36px;
    height:28px;
    margin:auto;
    border:1px solid;
    position:absolute;
}
.bd3 div:last-child li:nth-child(2) {
    width:50px;
    height:38px;
    position:relative;
    align-self:flex-end;
    -ms-flex-item-align:end;
    -webkit-align-self:flex-end;
}

/* bd4 */
.bd4:before,
.bd4:after {
    top:auto;
    bottom:-58px;
    background:#01579b;
}
.bd4:before {
    left:-66px;
    transform:rotate(-74deg);
    -ms-transform:rotate(-74deg);
    -webkit-transform:rotate(-74deg);
}
.bd4:after {
    right:-66px;
    transform:rotate(74deg);
    -ms-transform:rotate(74deg);
    -webkit-transform:rotate(74deg);
}
.bd4 {
    z-index:2;
    height:83px;
    width:160px;
    bottom:149px;
}
.bd4 div:first-child:before,
.bd4 div:first-child:after {
    display:none;
}
.bd4 div:first-child {
    width:94px;
    height:31px;
    margin:auto;
}
.bd4 div:first-child ul {
    padding:0;
    width:100%;
    border-top:1px solid;
    align-items:center;
    -ms-flex-align:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
}
.bd4 div:first-child li {
    width:11px;
    height:18px;
    margin:0 3px;
    border:1px solid;
}
.bd4 div:nth-child(2):before,
.bd4 div:nth-child(2):after {
    bottom:0;
    position:absolute;
}
.bd4 div:nth-child(2):before {
    z-index:2;
    left:-15px;
    height:6px;
    width:179px;
    border-left:0;
    border-right:0;
}
.bd4 div:nth-child(2):after,
.bd4 div:nth-child(2) {
    border-bottom:0;
}
.bd4 div:nth-child(2):after {
    left:0;
    right:0;
    z-index:3;
    height:6px;
    width:125px;
    margin:auto;
    border-top:0;
}
.bd4 div:nth-child(2) {
    width:151px;
    height:51px;
    border-top:1px solid;
}
.bd4 div:last-child:before,
.bd4 div:last-child:after {
    height:38px;
    bottom:29px;
}
.bd4 div:last-child:before {
    left:0;
}
.bd4 div:last-child:after {
    right:0;
}
.bd4 div:last-child {
    border:0;
    z-index:2;
    height:11px;
}

/* bd5 */
.bd5:before,
.bd5:after {
    display:none;
}
.bd5 {
    top:0;
    bottom:auto;
    width:175px;
    height:116px;
    overflow:unset;
}
.bd5 ul,
.bd5 ul li div {
    width:100%;
}
.bd5 ul,
.bd5 ul li:before,
.bd5 ul li:after,
.bd5 ul li,
.bd5 ol:before,
.bd5 ol,
.bd5 div:before,
.bd5 div:after,
.bd5 > div {
    position:absolute;
}
.bd5 ul {
    bottom:0;
    height:67px;
}
.bd5 ul li,
.bd5 ol:before,
.bd5 ol,
.bd5 ol li,
.bd5 div:before,
.bd5 div:after,
.bd5 > div {
    left:0;
    margin:auto;
    border:1px solid;
    right:0!important;
}
.bd5 ul li {
    border:none;
    overflow:hidden;
}
.bd5 ul li div:before {
    bottom:0;
}
.bd5 ul li div:after {
    border:none;
    border-bottom:1px solid;
}
.bd5 ul li:first-child:before {
    left:-29px;
    transform:rotate(68deg);
    -ms-transform:rotate(68deg);
    -webkit-transform:rotate(68deg);
}
.bd5 ul li:first-child:after {
    right:-29px;
    transform:rotate(-68deg);
    -ms-transform:rotate(-68deg);
    -webkit-transform:rotate(-68deg);
}
.bd5 ul li:first-child {
    top:34px;
    width:127px;
    height:34px;
}
.bd5 ul li:first-child div,
.bd5 ul li:nth-child(2) div {
    height:16px;
}
.bd5 ul li:first-child div:before {
    width:123px;
    height:20px;
    transform:perspective(150px)rotateX(-28deg);
    -ms-transform:perspective(150px)rotateX(-28deg);
    -webkit-transform:perspective(150px)rotateX(-28deg);
}
.bd5 ul li:first-child div:after {
    width:55px;
}
.bd5 ul li:nth-child(2):before,
.bd5 ul li:nth-child(2):after {
    top:-65px;
}
.bd5 ul li:nth-child(2):before {
    left:-29px;
    transform:rotate(69deg);
    -ms-transform:rotate(69deg);
    -webkit-transform:rotate(69deg);
}
.bd5 ul li:nth-child(2):after {
    right:-29px;
    transform:rotate(-69deg);
    -ms-transform:rotate(-69deg);
    -webkit-transform:rotate(-69deg);
}
.bd5 ul li:nth-child(2) {
    top:14px;
    width:95px;
    height:28px;
}
.bd5 ul li:nth-child(2) div:before,
.bd5 ul li:last-child div:before {
    border-bottom:0;
}
.bd5 ul li:nth-child(2) div:before {
    width:93px;
    height:14px;
    transform:perspective(150px)rotateX(-32deg);
    -ms-transform:perspective(150px)rotateX(-32deg);
    -webkit-transform:perspective(150px)rotateX(-32deg);
}
.bd5 ul li:nth-child(2) div:after {
    width:19px;
}
.bd5 ul li:last-child:before,
.bd5 ul li:last-child:after {
    top:-69px;
}
.bd5 ul li:last-child:before {
    left:-32px;
    transform:rotate(71deg);
    -ms-transform:rotate(71deg);
    -webkit-transform:rotate(71deg);
}
.bd5 ul li:last-child:after {
    right:-32px;
    transform:rotate(-71deg);
    -ms-transform:rotate(-71deg);
    -webkit-transform:rotate(-71deg);
}
.bd5 ul li:last-child {
    top:0;
    z-index:1;
    width:57px;
    height:23px;
}
.bd5 ul li:last-child div {
    height:10px;
}
.bd5 ul li:last-child div:before {
    width:55px;
    height:15px;
    border-bottom:0;
    transform:perspective(150px)rotateX(-45deg);
    -ms-transform:perspective(150px)rotateX(-45deg);
    -webkit-transform:perspective(150px)rotateX(-45deg);
}
.bd5 ul li:last-child div:after {
    width:0;
}
.bd5 ol:before,
.bd5 ol {
    margin:auto;
}
.bd5 ol:before {
    width:0;
    height:100%;
    border-left:0;
}
.bd5 ol {
    width:7px;
    height:49px;
    border:none;
    transform:scaleY(-1);
    -ms-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
}
.bd5 ol li {
    width:4px;
    height:4px;
    display:block;
    margin:1px auto;
    background:#01579b;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}

/* sky */
.sky:before {
    top:28px;
    width:30px;
    height:30px;
    right:295px;
    border-radius:30px;
}
.sky {
    left:0;
    right:0;
    margin:auto;
    width:888px;
    height:152px;
}
.sky li:before,
.sky li:after {
    z-index:1;
    bottom:-1px;
    border-bottom:0;
    background:#01579b;
}
.sky li {
    border-bottom:1px solid;
}
/* cloud 1 */
.sky li:first-child:before {
    left:20px;
    width:50px;
    height:25px;
    border-radius:25px 25px 0 0;
}
.sky li:first-child:after {
    left:53px;
    width:30px;
    height:15px;
    border-radius:15px 15px 0 0;
}
.sky li:first-child {
    bottom:30px;
    width:190px;
    height:25px;
}
/* cloud 2 */
.sky li:nth-child(2):before {
    left:74px;
    width:24px;
    height:12px;
    border-radius:12px 12px 0 0;
}
.sky li:nth-child(2):after {
    left:38px;
    width:40px;
    height:20px;
    border-radius:20px 20px 0 0;
}
.sky li:nth-child(2) {
    top:0;
    left:285px;
    width:110px;
    height:25px;
}
/* cloud 3 */
.sky li:last-child:before {
    left:60px;
    width:48px;
    height:24px;
    border-radius:24px 24px 0 0;
}
.sky li:last-child:after {
    left:48px;
    width:20px;
    height:10px;
    border-radius:10px 10px 0 0;
}
.sky li:last-child {
    right:80px;
    bottom:53px;
    width:180px;
    height:25px;
}