html,body{margin:0;padding:0;}
body{font-family:"Open Sans",sans-serif;font-weight:400;background-color:#ecf0f1;scrollbar-face-color:#121212;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background-color:#121212;}
::-webkit-scrollbar-thumb{background-color:#1ccdab;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;}
::-webkit-scrollbar-button{display:none;}
::-webkit-scrollbar-corner{background-color:#000000;}
#scrollUp{bottom:20px;right:20px;height:38px;width:38px;background:url(../img/top.png) no-repeat;}
.btn.btn-default{background-color:#ecf0f1;color:#34495e;border:1px solid #ecf0f1;}
.btn.btn-default:hover{background-color:#bdc3c7;color:#34495e;border:1px solid #bdc3c7;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;}
.btn.btn-primary{background-color:#1abc9c;color:#fff;border:1px solid #1abc9c;}
.btn.btn-primary:hover{background-color:#16a085;color:#fff;border:1px solid #16a085;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;}
.btn.btn-success{background-color:#2ecc71;color:#fff;border:1px solid #2ecc71;}
.btn.btn-success:hover{background-color:#27ae60;color:#fff;border:1px solid #27ae60;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;}
.btn.btn-info{background-color:#3498db;color:#fff;border:1px solid #3498db;}
.btn.btn-info:hover{background-color:#2980b9;color:#fff;border:1px solid #2980b9;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;}
.btn.btn-warning{background-color:#f1c40f;color:#fff;border:1px solid #f1c40f;}
.btn.btn-warning:hover{background-color:#f39c12;color:#fff;border:1px solid #f39c12;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;}
.btn.btn-danger{background-color:#e74c3c;color:#fff;border:1px solid #e74c3c;}
.btn.btn-danger{background-color:#c0392b;color:#fff;border:1px solid #c0392b;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;}
.btn-group{margin-right:20px;margin-bottom:10px;}
.input-lg{margin-bottom:22px;}
.form-control{border:1px solid #1abc9c;}
.form-control:focus{border:1px solid #ecf0f1;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;-ms-box-shadow:none;-o-box-shadow:none;background-color:#ecf0f1;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;}
#sidebar{border-top:10px solid #1abc9c;margin-bottom:30px;}
#sidebar .sosmed{background-color:#16a085;margin-bottom:35px;padding:20px;color:#ecf0f1;border-bottom-right-radius:10px;-webkit-border-bottom-right-radius:10px;-moz-border-bottom-right-radius:10px;-ms-border-bottom-right-radius:10px;-o-border-bottom-right-radius:10px;border-bottom-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-bottom-left-radius:10px;-ms-border-bottom-left-radius:10px;-o-border-bottom-left-radius:10px;}
#sidebar .sosmed a{color:#ecf0f1;margin-right:5px;margin-left:5px;}
#sidebar .sosmed a i.fa{background-color:#ecf0f1;color:#16a085;width:60px;height:60px;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;padding-top:18px;}
#sidebar .sosmed a i.fa:hover{background-color:#bdc3c7;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;}
#sidebar .user{margin-bottom:30px;}
#sidebar .user img{border:10px solid #bdc3c7;width:100%;}
#sidebar .user .user-head{text-align:center;}
#sidebar .user .user-head h1{color:#34495e;font-weight:600;}
#sidebar .user .user-head h5{font-weight:600;color:#7f8c8d;font-size:18pt;}
#sidebar .user .user-head .hr-center{height:3px;background-color:#1abc9c;width:40%;display:block;margin:0 auto;}
#sidebar .link-me{margin-top:30px;}
#sidebar .link-me i.fa{background-color:#1abc9c;color:#ecf0f1;width:45px;height:45px;padding-top:13px;border-radius:10px;font-size:14pt;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;}
#sidebar .link-me i.fa:hover{background-color:#bdc3c7;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;}
#sidebar .link-me .hr-center{height:3px;background-color:#34495e;margin:0 auto;width:100px;margin-top:15px;}
#content{background-color:#fff;border-top:10px solid #16a085;border-bottom-right-radius:10px;-webkit-border-bottom-right-radius:10px;-moz-border-bottom-right-radius:10px;-ms-border-bottom-right-radius:10px;-o-border-bottom-right-radius:10px;border-bottom-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-bottom-left-radius:10px;-ms-border-bottom-left-radius:10px;-o-border-bottom-left-radius:10px;}
#content .navbar{margin-bottom:0;background-color:#ecf0f1;}
#content .navbar-default .navbar-nav > .active > a,#content .navbar-default .navbar-nav > .active > a:hover,#content .navbar-default .navbar-nav > .active > a:focus{border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;}
#content .navbar-default .navbar-collapse,#content .navbar-default .navbar-form{margin-top:10px;}
#content .navbar-default ul.nav li a{color:#34495e;}
#content .navbar-default ul.nav li a:hover{color:#1abc9c;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;}
#content .navbar ul.nav.navbar-right{margin-right:17px !important;}
#content .navbar ul.nav.navbar-right i.fa{background-color:#34495e;color:#fff;width:30px;padding-top:8px;padding-left:10px;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;height:30px;}
#content .main-content{padding:0 20px;}
.timeline{list-style:none;padding:20px 0 20px;position:relative;}
.timeline:before{top:0;bottom:0;position:absolute;content:" ";width:3px;background-color:#eeeeee;right:25px;margin-left:-1.5px;}
.timeline > li{margin-bottom:20px;position:relative;}
.timeline > li:before,.timeline > li:after{content:" ";display:table;}
.timeline > li:after{clear:both;}
.timeline > li:before,.timeline > li:after{content:" ";display:table;}
.timeline > li:after{clear:both;}
.timeline > li > .timeline-panel{width:calc( 100% - 75px );float:left;color:#34495e;border:1px solid #d4d4d4;border-radius:2px;padding:20px;position:relative;-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.175);box-shadow:0 1px 6px rgba(0,0,0,0.175);}
.timeline > li > .timeline-panel:before{position:absolute;top:26px;right:-15px;display:inline-block;border-top:15px solid transparent;border-left:15px solid #ccc;border-right:0 solid #ccc;border-bottom:15px solid transparent;content:" ";}
.timeline > li > .timeline-panel:after{position:absolute;top:27px;right:-14px;display:inline-block;border-top:14px solid transparent;border-left:14px solid #fff;border-right:0 solid #fff;border-bottom:14px solid transparent;content:" ";}
.timeline > li > .timeline-panel h1{margin-top:0;}
.timeline > li > .timeline-panel .hr-left{height:1px;width:100px;margin-bottom:20px;background-color:#ddd;}
.timeline .timeline-head{text-align:right;margin-right:80px;margin-top:20px;}
.timeline > li > .timeline-badge{color:#fff;width:50px;height:50px;line-height:50px;font-size:1.4em;text-align:center;position:absolute;top:16px;right:0px;margin-left:-25px;background-color:#999999;z-index:100;border-top-right-radius:50%;border-top-left-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%;}
.timeline > li.timeline-inverted > .timeline-panel{float:right;}
.timeline > li.timeline-inverted > .timeline-panel:before{border-left-width:0;border-right-width:15px;left:-15px;right:auto;}
.timeline > li.timeline-inverted > .timeline-panel:after{border-left-width:0;border-right-width:14px;left:-14px;right:auto;}
.timeline-badge.primary{background-color:transparent !important;width:20px !important;height:20px !important;right:16.5px !important;top:32px !important;border:2px solid #1abc9c;}
.timeline-badge.success{background-color:transparent !important;width:20px !important;height:20px !important;right:16.5px !important;top:32px !important;border:2px solid #2ecc71;}
.timeline-badge.warning{background-color:transparent !important;width:20px !important;height:20px !important;right:16.5px !important;top:32px !important;border:2px solid #f1c40f;}
.timeline-badge.danger{background-color:transparent !important;width:20px !important;height:20px !important;right:16.5px !important;top:32px !important;border:2px solid #e74c3c;}
.timeline-badge.info{background-color:transparent !important;width:20px !important;height:20px !important;right:16.5px !important;top:32px !important;border:2px solid #3498db;}
.timeline-badge.default{background-color:#34495e !important;}
.timeline-title{margin-top:0;color:inherit;}
.timeline-body > p,.timeline-body > ul{margin-bottom:0;}
.timeline-body > p + p{margin-top:5px;}
.thumbnail{padding:0;border:none;}
.thumbnail:hover{border:none;}
#resume i.fa{margin-right:10px;}
.work-experience h3{margin-bottom:5px;}
.work-experience small{color:#7f8c8d;}
.work-experience p{margin-top:15px;}
.skillbar{position:relative;display:block;margin-bottom:15px;width:100%;background:#eee;height:25px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;-webkit-transition-property:width,background-color;-moz-transition-property:width,background-color;-ms-transition-property:width,background-color;-o-transition-property:width,background-color;transition-property:width,background-color;}
.skillbar-title{position:absolute;top:0;left:0;width:110px;font-weight:bold;font-size:13px;color:#ffffff;background:#6adcfa;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-topleft:3px;-moz-border-radius-bottomleft:3px;border-top-left-radius:3px;border-bottom-left-radius:3px;}
.skillbar-title span{display:block;background:rgba(0,0,0,0.1);padding:0 20px;height:25px;line-height:25px;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-radius-topleft:3px;-moz-border-radius-bottomleft:3px;border-top-left-radius:3px;border-bottom-left-radius:3px;}
.skillbar-bar{height:25px;width:0px;background:#6adcfa;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
.skill-bar-percent{position:absolute;right:10px;top:0;font-size:11px;height:25px;line-height:25px;color:#ffffff;color:rgba(0,0,0,0.4);}
#blog .blog-content h3{margin-top:0;margin-bottom:5px;}
#blog .blog-content h3 a{text-decoration:none;color:#34495e;}
#blog .blog-content h3 a:hover{color:#1abc9c;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;}
#blog .blog-content small i.fa{margin-right:8px;color:#bdc3c7;}
#blog .blog-content small a{margin-right:20px;color:#7f8c8d;text-decoration:none;}
#blog .blog-content small a:hover{color:#1abc9c;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;}
#blog .blog-content p{margin-top:15px;}
#blog img{height:180px;width:100%;}
#contact a{color:#34495e;text-decoration:none;}
#contact a:hover{color:#1abc9c;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;}
footer{background-color:#34495e;padding:30px 20px 20px 20px;margin-top:30px;}
footer p{color:#fff;}
.top-nav-collapse{padding:0;background-color:#08c;border-bottom:1px scroller #ccc;z-index:1030 !important;position:fixed !important;}
@media only screen and (max-width :320px){}
@media only screen and (max-width :480px){.timeline-panel h1{font-size:20pt;}
.timeline-panel p{font-size:10pt;}
.timeline-panel address{font-size:10pt;}
.timeline-panel .skillbar-title{width:55px;}
.timeline-panel .skillbar-title span{padding:0 5px;font-size:6pt;}
.timeline-panel .skill-bar-percent{font-size:6pt;}
#personal-info .btn-group button{font-size:8pt;}
}