#contact i,
.back-to a,
.back-to a:hover,
.breadcrumb,
.logo-brand-mobile {
    float: right
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;
    -webkit-transition: .5s;
    transition: .5s ease
}

.navbar,
.scrolled {
    -webkit-transition: .5s;
    transition: .5s ease
}

.scrolled.navbar-nav {
    padding-left: 35px;
    -webkit-transition: .5s;
    transition: .5s ease
}

.scrolled.menu {
    padding-top: 25px;
    background-color: #fff;
    -webkit-transition: .5s;
    transition: .5s ease
}

.scrolled.logo-brand a {
    padding-top: 0;
    padding-bottom: 0
}

.scrolled.logo-brand img {
    width: 50px;
    -webkit-transition: .5s;
    transition: .5s ease
}

.menu,
.navbar-nav {
    -webkit-transition: .5s
}

.menu a:focus>span,
.menu a:hover>span {
    border-bottom: 2px solid #3894C6
}

.navbar-nav {
    transition: .5s ease;
    display: inline-flex
}

.nav>li>a {
    padding: 0 25px 15px
}

.logo-brand {
    display: block
}

.logo-brand a {
    padding-top: 0;
    padding-bottom: 10px
}

.logo-brand-mobile img {
    width: 100px;
    text-align: center;
    padding: 15px;
    font-size: 18px;
    line-height: 20px;
    display: none
}

.menu {
    padding-top: 50px;
    transition: .5s ease;
    font-weight: 700
}

.logo-brand img {
    -webkit-transition: .5s;
    transition: .5s ease
}

#banner .banner-home .banner-title {
    font-size:34px;margin-top:15px;
}

#banner .banner-home hr {
    width: 33.33%;
    margin: 1em auto 1em 0;
    border-top: #34190c 4px solid;
}

#banner .banner-home p {
    font-size:18px;margin-top:15px;
}

#banner .banner-home .banner-btn {
    border-radius: 15px;
    min-width: 100px;
    height: 30px;
    background-color: #34190c;
    color: #fff;
    border: none;
}

.banner-home {
    display: block
}

.banner-home img,
.banner-mobile img {
    width: 100%
}

.owl-service h3 {
    margin: 15px auto;
    font-weight: 700
}

#services img,
#services-about img {
    width: 40%
}

.owl-carousel.owl-loaded {
    display: block
}

.breadcrumb {
    background-color: transparent;
    text-transform: capitalize;
    padding: 8px 0
}

.breadcrumb li a {
    color: #000
}

.owl-carousel .owl-item img {
    display: initial;
    width: 100%
}

.owl-services {
    display: none
}

.owl-service {
    display: block
}

#owl-hidden,
#owl-hidden-1,
#owl-hidden-2 {
    display: none
}

#banner,
#banner-about {
    margin-top: 100px
}

#banner-about .banner-desc-about {
    padding-left: 0
}

#banner .banner-desc {
    position: absolute;
    z-index: 5;
    width: 275px;
    bottom: 150px;
    text-align: right;
    right: 100px;
    font-size: 82px;
    color: #fff;
    font-weight: 700
}

#banner .banner-desc h2 {
    font-size: 55px;
    font-weight: 900;
    color: #3894C6;
    font-family: 'PT Sans', sans-serif
}

#banner .banner-desc a span,
#banner .banner-desc p {
    vertical-align: top;
    text-decoration: none;
    font-weight: 300;
    font-family: 'PT Sans', sans-serif
}

#banner .banner-desc p {
    color: #000;
    font-size: 12px
}

#banner .banner-desc a {
    font-size: 15px;
    display: block
}

#banner .banner-desc a span {
    color: #fff;
    padding: 5px 30px;
    border-radius: 0;
    background-color: #3894C6;
    font-style: italic;
    display: inline-block
}

#portofolio-home .owl-service .owl-dots,
#portofolio-home .owl-service .owl-nav,
.review-item p {
    display: none
}

#banner-about .banner-desc {
    position: absolute;
    z-index: 5;
    background-color: #f3f3f3;
    width: 100%;
    bottom: -40px;
    text-align: left;
    color: #fff;
    font-weight: 700;
    padding: 10px 30px
}

#our-client h1,
#portofolio-home h1,
#portofolio-home h2,
.garis-title {
    text-align: center
}

#banner-about .banner-desc h1 {
    font-weight: 900;
    color: #3894C6;
    font-family: 'PT Sans', sans-serif;
    font-size: 26px;
    margin: 10px 0
}

#banner-about .banner-desc a,
#banner-about .banner-desc p {
    font-size: 12px;
    vertical-align: top;
    font-weight: 300;
    text-decoration: none
}

#banner-about .banner-desc p {
    color: #000;
    font-family: 'PT Sans', sans-serif
}

#banner-about .banner-desc a {
    color: #fff;
    padding: 5px 30px;
    border-radius: 5px;
    background-color: #3894C6;
    font-family: 'PT Sans', sans-serif;
    font-style: italic
}

#portofolio-home,
#services {
    padding: 40px 0;
    font-family: 'PT Sans', sans-serif
}

.navbar-header button {
    margin: 25px 10px;
    background-color: transparent
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #3894C6
}

.navbar-default .navbar-toggle {
    border-color: #3894C6
}

.uppercase {
    text-transform: uppercase
}

.lowercase {
    text-transform: lowercase
}

.capitalize {
    text-transform: capitalize
}

#portofolio-produk .work-detail h2,
.work-detail h2 {
    margin-top: 0;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase
}

.navbar-default {
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
    border: none
}

.menu span {
    font-family: 'PT Sans', sans-serif
}

.navbar-default .navbar-nav>li>a {
    color: #000
}

.review-item {
    flex: 1 1 20%!important;
    border: none!important
}

.work-desc {
    position: absolute;
    width: 90%;
    bottom: 0
}

#portofolio-produk .work-desc {
    position: absolute;
    width: 100%;
    bottom: 0
}

.work-desc .work-detail {
    color: #353535;
    opacity: 0;
    transition: opacity .3s;
    -webkit-transition: opacity .3s
}

#contact h1,
#services-about h1,
#services-about h3 {
    color: #3894C6
}

.work-box:hover .work-detail {
    opacity: 1;
    background: rgba(255, 255, 255, .6);
    border: 1px solid transparent
}

.work-box {
    border: 0 solid transparent
}

.work-detail h2 {
    font-size: 21px
}

#portofolio-produk .work-detail h2 {
    font-size: 16px
}

#portofolio-home h1,
#portofolio-home h2,
#services h1,
#services-about h1 {
    padding-bottom: 50px;
    font-size: 24px;
    font-weight: 700
}

.work-detail p {
    margin-top: 15px
}

.work-detail hr {
    width: 75%;
    margin: auto;
    border-top: 2px solid #353535
}

#services {
    background-color: #3894C6;
    color: #fff;
    position: relative
}

#services .col-md-3,
#services-about .col-md-3 {
    border-right: 2px solid rgba(47, 46, 46, .2);
    height: 275px
}

#services .col-md-3:last-child,
#services-about .col-md-3:last-child {
    border-right: 0
}

#services-about {
    font-family: 'PT Sans', sans-serif;
    background-color: #fff;
    padding: 50px 0 60px;
    color: #000
}

#portofolio-home h4 {
    font-weight: 700;
    font-size: 12px
}

#portofolio-home .owl-carousel p,
#portofolio-home .owl-service p {
    font-weight: 300;
    font-size: 10px;
    padding: 0 0 0 20px
}

#portofolio p,
#portofolio-produk p {
    line-height: 1.5em;
    padding-bottom: 30px
}

#portofolio-home a {
    text-decoration: none;
    width: 15%
}

#blog,
#blog-detail,
#faq,
#portofolio,
#portofolio-produk {
    font-family: 'PT Sans', sans-serif;
    padding-bottom: 50px;
    margin-top: 140px
}

#portofolio h1 {
    font-weight: 700;
    font-size: 2em
}

#portofolio h4 {
    font-weight: 700;
    font-size: 12px
}

#portofolio h5 {
    font-weight: 300;
    font-size: 10px
}

#portofolio p {
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    font-size: 12px
}

#portofolio a {
    text-decoration: none
}

#portofolio-produk h1 {
    padding-bottom: 10px;
    font-weight: 700;
    font-size: 2.5em;
    margin-top: 0;
    margin-bottom: 0
}

.title-produk {
    padding-left: 0
}

#portofolio-produk h4,
#portofolio-produk i {
    font-weight: 700
}

#portofolio-produk p {
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    font-size: 12px
}

.portfolio-box .thumbnail h5,
.portfolio-box-produk .thumbnail h5 {
    line-height: 1em;
    font-family: 'PT Sans', sans-serif
}

#our-client h1,
#our-client h2 {
    font-size: 24px;
    font-weight: 700
}

#portofolio-produk a {
    text-decoration: none
}

#portofolio-produk .description {
    padding: 0
}

#portofolio-produk .img-produk,
#portofolio-produk .portfolio-box-produk img {
    width: 100%
}

#portofolio-produk a.btn {
    border-radius: 25px;
    margin-right: 10px;
    margin-top: 15px
}

.share-sosmed-img {
    opacity: 1
}

.share-sosmed-img:hover {
    opacity: .5
}

.garis-title {
    overflow: hidden;
    font-weight: 700;
    padding-bottom: 30px
}

.garis-title:after {
    background-color: #5d5d5d;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 100%;
    left: 0;
    margin-right: 0
}

#contact {
    margin: 140px 0 50px
}

#contact h1 {
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    padding: 10px 0 30px
}

#contact .row {
    border: 1px solid #ccc
}

#contact .warning-row {
    border:0 !important;
}

#contact .warning-row p {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 25px;
    color: #ff4a4a;
}

#contact .g-recaptcha {
    float:left;
}

.contact-left {
    padding-right: 0;
    padding-left: 0
}

.contact-right {
    padding-top: 10px;
    padding-right: 30px;
    padding-left: 30px
}

.form-contact input,
.form-contact textarea {
    font-family: 'PT Sans', sans-serif;
    width: 100%;
    padding: 5px;
    border: none;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
    margin-bottom: 16px;
    resize: vertical
}

.form-contact .button-contact {
    font-family: 'PT Sans', sans-serif;
    background-color: #3894C6;
    color: #fff;
    padding: 5px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    width: 20%;
    float: right
}

#footer,
.garis {
    background-color: #000
}

.other-portofolio {
    padding-top: 50px
}

.garis {
    height: 2px
}

.back-to a {
    color: #000;
    font-weight: 700
}

.back-to a:hover {
    color: #adadad;
    font-weight: 700
}

#client {
    padding: 30px 0;
    background-color: #EDEDED
}

#client .client-box {
    display: table;
    float: none;
    height: 50px;
    width: 100%
}

#client .client-image {
    display: table-cell;
    vertical-align: middle
}

#client .client-image img {
    max-height: 50px;
    margin: 0 20px
}

#our-client h1 {
    padding-bottom: 50px
}

#our-client h2 {
    padding: 0 0 30px
}

#footer {
    font-family: 'PT Sans', sans-serif;
    padding: 30px 0;
    margin: 0;
    font-size: 12px;
    color: #fff
}

#footer h4 {
    font-weight: 700
}

#footer a {
    color: #fff;
    text-decoration: none
}

#footer a:focus,
#footer a:hover {
    color: #3894C6;
    text-decoration: none
}

#footer span {
    font-size: 15px;
    letter-spacing: 1px;
    margin-left: -12px
}

#footer .direct-link>li {
    padding: 5px 0
}

#footer li {
    padding: 5px 0 5px 12px
}

#footer p {
    font-size: 10px;
    padding: 50px 0 0 10px;
    display: inline-block
}

#footer img {
    margin-top: -10px
}

.footer-sosmed {
    margin-top: 15px
}

.portfolio-box .thumbnail h2,
.portfolio-box-produk .thumbnail h2 {
    margin-top: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 16px
}

.footer-sosmed-img {
    width: 20px;
    opacity: 1
}

.footer-sosmed-img:hover {
    opacity: .5
}

.logo-brand img {
    width: 80px
}

#blog .blog-image img,
#map,
.latest-post img,
.portfolio-box .thumbnail img,
.thumbnail img {
    width: 100%
}

.thumbnail {
    padding: 0;
    color: #000
}

.thumbnail h4 {
    padding: 10px 0 0 20px
}

.thumbnail h5 {
    padding: 0 0 10px 20px
}

#portofolio-produk .thumbnail h5 {
    padding: 0
}

.thumbnail i {
    color: #3894C6
}

.thumbnail:focus,
.thumbnail:hover,
.thumbnail:hover i {
    background-color: #3894C6;
    color: #fff;
    text-decoration: none
}

.portfolio-box .thumbnail {
    padding: 0;
    color: #000
}

#g-review h2,
.portfolio-box .thumbnail i,
.portfolio-box-produk .thumbnail i {
    color: #3894C6
}

.portfolio-box .thumbnail h4 {
    padding: 10px 0 0 20px
}

.portfolio-box .thumbnail h5 {
    padding: 0 0 20px;
    font-weight: 300
}

.portfolio-box .thumbnail h2 {
    font-weight: 600
}

.portfolio-box-produk .thumbnail h5 {
    font-weight: 300
}

.portfolio-box-produk .thumbnail h2 {
    font-weight: 600
}

#about-us,
#blog h1,
#blog-detail h1,
#g-review h1,
#ig-embed h1,
.latest-post h3,
.thumbnail-box h5,
#h-blog h1 {
    font-weight: 700
}

.portfolio-box .thumbnail:focus,
.portfolio-box .thumbnail:hover,
.portfolio-box .thumbnail:hover i,
.portfolio-box-produk .thumbnail:focus,
.portfolio-box-produk .thumbnail:hover,
.portfolio-box-produk .thumbnail:hover i {
    background-color: transparent;
    color: #3894C6
}

#about-us {
    line-height: 1.5em;
    font-family: 'PT Sans', sans-serif;
    padding-top: 25px
}

#about-us h1 {
    font-size: 3em;
    margin-bottom: 15px
}

#g-review h1,
#g-review h2 {
    font-size: 24px;
    text-align: center
}

#g-review {
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 50px!important;
    padding-top: 30px
}

#g-review h1 {
    padding-bottom: 50px
}

#g-review h2 {
    margin-bottom: 30px
}

#g-review p {
    text-align: center;
    padding-top: 30px
}

#g-review a {
    text-decoration: none;
    border: 1px solid;
    padding: 10px;
    margin-bottom: 50px
}

#footer .fb_reset {
    text-align: center
}

#blog h1,
#blog-detail h1,
.artikel,
.carousel-inner-blog,
.detail-post,
.latest-post {
    text-align: left
}

#map {
    height: 523px
}

#thanks {
    padding: 180px 0 100px
}

#blog h1 {
    padding-bottom: 20px;
    padding-left: 15px;
    font-size: 3em
}

#blog a {
    text-decoration: none
}

.late-post {
    padding-bottom: 50px
}

#blog .carousel-indicators {
    bottom: 20px
}

.latest-post h3 {
    color: #999;
    font-size: 18px
}

.latest-post hr {
    border: 1px solid #999;
    margin-top: 5px;
    margin-bottom: 0
}

.latest-post .jarak {
    padding-left: 0;
    padding-top: 10px
}

.latest-post .link {
    padding-left: 0;
    padding-top: 0;
    padding-right: 0
}

.latest-post .link h5 {
    color: #999
}

.latest-post a {
    color: #000
}

.latest-post a:hover,
.latest-post h4:hover {
    color: #777
}

.old-post {
    padding-bottom: 30px
}

.thumbnail-box h2 {
    padding: 0 0 10px 20px;
    font-weight: 700;
    font-size: 24px
}

.thumbnail-box h4 {
    padding: 0 0 0 20px;
    font-size: .8em
}

.thumbnail-box h5 {
    padding: 0 10px;
    font-size: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#blog-detail h1 {
    padding-bottom: 10px;
    font-size: 2em
}

#blog-detail ol {
    display:inline-block;
}

#blog-detail ul {
    padding-left: 0;
    padding-bottom: 40px;
    list-style-type: none
}

#blog-detail li {
    float: left;
    padding-right: 20px
}

#blog .btn,
#blog-detail .btn {
    border-radius: 15px;
    padding: 4px 12px
}

#blog .btn {
    width: 100px
}

#blog-detail .btn {
    width: 150px;
    margin-bottom: 30px;
    margin-top: 3px
}

#blog-detail .detail-post .artikel img {
    max-width:100%;
}

#blog-detail .detail-post .artikel h3 {
    margin-bottom:10px;
}

#blog-detail .detail-post .artikel ol {
    padding-left:15px;
}
#blog-detail .detail-post .artikel ol li {
    padding-left:10px;
}
#blog-detail .detail-post .artikel dd {
    margin-bottom:10px;line-height:24px;
}
.sosmed-blog img {
    margin-top: 5px
}

.blog-image {
    width: 100%
}

.artikel {
    padding: 30px 0;
    line-height: 2.5rem
}

#blog-detail .artikel h2 {
    font-weight:bold;
    margin:20px 0 15px;
}

#blog-detail .artikel ul {
    padding-left: 40px;
    padding-bottom: 0;
    list-style-type: disc;
}

#blog-detail .artikel ul li {
    float:none;
}

.desktop {
    display: block
}

.mobile {
    display: none
}

@media (max-width:767px) {
    .desktop {
        display: none
    }
    .mobile {
        display: block
    }
}

.title-desktop {
    display: block
}

#contact .g-recaptcha {
    margin-bottom:20px;
    float:none;
}

#contact .g-recaptcha > div {
    margin:auto;
}

#contact .warning-row p {
    margin:0;
}
.title-mobile {
    display: none
}

@media (max-width:480px) {
    .title-desktop {
        display: none
    }
    .title-mobile {
        display: block
    }
}

.title-blog-desktop {
    display: block
}

.title-blog-mobile {
    display: none
}

@media (max-width:970px) {
    .title-blog-desktop {
        display: none
    }
    .title-blog-mobile {
        display: block
    }
}

.title-shareon {
    display: none
}

@media (min-width:480px) {
    .title-shareon {
        display: block
    }
}

@media (min-width:767px) {
    .title-shareon {
        display: none
    }
}

.blog-mobile {
    padding-right: 15px;
    padding-left: 15px
}

.carousel-control.left {
    filter: none;
    background: #3894C6;
    padding: 4px 10px 4px 9px
}

.carousel-control.right {
    right: 10px;
    left: auto;
    filter: none;
    background: #3894C6;
    padding: 4px 9px 4px 10px
}

#ig-embed,
#ig-embed h1 {
    padding-bottom: 50px
}

.carousel-control {
    position: absolute;
    top: auto;
    bottom: 55px;
    left: 10px;
    width: auto;
    font-size: 15px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    background-color: rgba(0, 0, 0, 0);
    filter: alpha(opacity=50);
    opacity: 1;
    border-radius: 25px
}

#ig-embed h1 {
    font-size: 24px;
    text-align: center
}
#h-blog {
    padding:50px 0;
}
#h-blog .title h1 {
    text-align:center;font-size: 24px;padding-bottom:50px;
}
#h-blog .blog-content {
    margin:15px 0;
}
#h-blog .blog-content a {
    color:#6F7C82;
}
#h-blog .blog-content a.blog-par:hover, #h-blog .blog-content a.blog-par:active, #h-blog .blog-content a.blog-par:focus {
    text-decoration:none;
}
#h-blog .blog-content h3 {
    font-size:20px;height:45px;overflow:hidden;font-weight:bold;margin-bottom:10px;
}
#h-blog h2 {
    margin-bottom:40px;font-size:42px;
}
#h-blog img {
    border:1px solid rgba(0,0,0,.1);
}
#call-wa {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}
#call-wa a {
    color:#fff;
}
#call-wa a i {
    margin-top:14px;
}
@media (min-width:1200px) {
    .jarak-footer {
        margin: 0 100px
    }
    #portofolio h4,
    #portofolio-home h4 {
        font-weight: 700;
        font-size: 16px
    }
    #portofolio h5,
    #portofolio-home h5 {
        font-weight: 300;
        font-size: 12px
    }
    .garis-title:after {
        background-color: #5d5d5d;
        content: "";
        display: inline-block;
        height: 1px;
        position: relative;
        vertical-align: middle;
        width: 90%
    }
    #portofolio-produk .breadcrumb,
    .breadcrumb {
        background-color: transparent;
        float: right;
        text-transform: capitalize
    }
    .work-desc {
        position: absolute;
        width: 90%;
        bottom: 0
    }
    #portofolio h1 {
        font-weight: 700;
        font-size: 3em
    }
    #portofolio p,
    #portofolio-produk p {
        line-height: 1.5em;
        font-family: 'PT Sans', sans-serif;
        font-weight: 700;
        padding-bottom: 30px;
        font-size: 14px
    }
}

@media (min-width:992px) and (max-width:1199px) {
    #contact h1 {
        padding: 0 0 30px
    }
}

@media (min-width:768px) and (max-width:991px) {
    #banner .banner-desc {
        bottom: 50px
    }
    #banner .banner-desc h2 {
        font-size: 48px
    }
    #services img,
    #services-about img {
        width: 50%
    }
    #services .owl-service p,
    #services-about .owl-service p {
        font-size: 13px
    }
    #services .col-md-3,
    #services-about .col-md-3 {
        height: 290px
    }
    #client .client-image img {
        margin: 0 10px
    }
    #banner,
    #banner-about {
        margin-top: 80px
    }
    .contact-right {
        padding-top: 0;
        padding-right: 30px;
        padding-left: 30px
    }
    #map {
        height: 500px;
        width: 100%
    }
    #portofolio-produk .description {
        padding: 0
    }
    .other-portofolio {
        padding-top: 50px
    }
    #portofolio-produk h1 {
        font-size: 2em
    }
    .breadcrumb {
        background-color: transparent;
        text-transform: capitalize;
        padding-top: 0
    }
    #portofolio-produk .breadcrumb {
        float: left
    }
    #portofolio h1 {
        font-weight: 700;
        font-size: 2.2em
    }
    #banner-about .banner-desc a,
    #footer {
        font-size: 12px;
        color: #fff;
        font-family: 'PT Sans', sans-serif
    }
    .garis-title {
        overflow: hidden;
        text-align: left;
        font-weight: 700;
        padding-bottom: 30px
    }
    .garis-title:after {
        background-color: #5d5d5d;
        content: "";
        display: inline-block;
        height: 1px;
        position: relative;
        vertical-align: middle;
        width: 80%;
        left: .5em;
        margin-right: -20%
    }
    #footer,
    .jarak-footer {
        margin: 0
    }
    .work-desc {
        position: absolute;
        width: 90%;
        bottom: 0
    }
    #banner-about .banner-desc a {
        vertical-align: top;
        text-decoration: none;
        padding: 5px 30px;
        border-radius: 5px;
        background-color: #3894C6;
        font-style: italic;
        font-weight: 300
    }
    #portofolio {
        font-family: 'PT Sans', sans-serif;
        margin-top: 120px
    }
    #portofolio-produk h4,
    #portofolio-produk i {
        font-weight: 700
    }
    #portofolio-produk a {
        text-decoration: none
    }
    .img-produk {
        width: 100%
    }
    #banner-about {
        max-height: 450px
    }
    .cprght {
        padding-top: 60px
    }
    #footer {
        background-color: #000;
        padding: 30px 0;
        text-align: left
    }
    #footer p {
        padding-top: 20px;
        padding-right: 5px;
        font-size: 10px;
        display: inline
    }
    #footer img {
        margin-top: -15px
    }
    .footer-sosmed img {
        width: 20px
    }
    #services-about {
        font-family: 'PT Sans', sans-serif;
        background-color: #fff;
        padding-top: 30px;
        padding-bottom: 40px;
        color: #000
    }
    #services-about h1 {
        padding-bottom: 30px;
        color: #3894C6;
        font-size: 24px;
        font-weight: 700
    }
}

@media (max-width:767px) {
    .banner-home {
        text-align:center;font-size:24px;
    }
    #banner .banner-home hr {
        margin:1em auto;
    }
    #banner .banner-home .banner-btn {
        margin-bottom:20px;
    }
    .logo-brand-mobile img,
    .navbar-nav {
        display: block
    }
    header {
        position: relative
    }
    .navbar-default .navbar-nav>li,
    .navbar-nav {
        padding: 0
    }
    .navbar-default .navbar-nav>li>a {
        padding: 5px 0
    }
    .navbar-collapse {
        position: absolute;
        width: 100%;
        background: #fff
    }
    .logo-brand,
    .owl-service {
        display: none
    }
    .banner-mobile,
    .owl-services {
        display: block
    }
    #footer #fb-root,
    .owl-dots {
        display: none
    }
    .breadcrumb {
        float: none;
        text-align: left;
        padding: 0
    }
    #banner .banner-desc,
    #blog h1,
    .carousel-inner-blog,
    .detail-post,
    .latest-post {
        text-align: center
    }
    .thumbnail {
        width: 100%
    }
    .owl-nav {
        position: relative
    }
    .owl-next,
    .owl-prev {
        height: 40px;
        width: 40px;
        line-height: 46px
    }
    .owl-nav span:before {
        font-size: 24px
    }
    #banner,
    #banner-about,
    #contact {
        margin: 0
    }
    #blog,
    #blog-detail,
    #faq,
    #portofolio,
    #portofolio-produk {
        margin-top: 30px
    }
    #banner .banner-desc h2 {
        font-size: 30px
    }
    #banner .banner-desc {
        background: #fff;
        width: 100%;
        right: 0;
        bottom: 0;
        padding: 25px 10px
    }
    .owl-services img {
        width: 50%
    }
    .owl-services h3 {
        margin: 10px 0
    }
    .owl-services p {
        font-size: 13px
    }
    #client .client-image img {
        max-height: 40px;
        margin: 10px
    }
    #banner-about .banner-desc {
        position: relative;
        text-align: center;
        bottom: 0
    }
    #banner-about .banner-desc-about {
        padding: 0;
        float: none
    }
    #portofolio-home a {
        width: auto;
        margin-top: 25px
    }
    #portofolio-produk .title-produk h1 {
        margin-top: 25px;
        font-size: 24px
    }
    #portofolio-produk .img-produk {
        width: 50%
    }
    #footer .footer-sosmed a {
        margin: 5px
    }
    .latest-post .jarak {
        padding-left: 15px;
        padding-top: 10px
    }
    .latest-post .link {
        padding-left: 0;
        padding-top: 0
    }
    .thumbnail-box h2 {
        padding: 0 0 20px;
        font-size: 20px
    }
    .blog-mobile {
        padding-right: 0;
        padding-left: 0
    }
    .thumbnail-box h4 {
        padding: 0
    }
    .late-post {
        padding-bottom: 20px
    }
    #blog h1 {
        padding-left: 0;
        font-size: 2.3em
    }
}

@media (max-width:650px) {
    .review-item {
        flex: 1 1 50%!important
    }
    #services .owl-services img {
        width: 25%
    }
    #portofolio-produk .img-produk {
        width: 100%
    }
    #footer .contact-box,
    #footer .direct-link-box {
        width: 50%;
        text-align: center
    }
    #footer .location-box {
        width: 100%;
        text-align: center;
        margin-top: 15px
    }
}

.fb-box {
    width: 100%
}