body{
    font-family: 'Open Sans', sans-serif !important;
}
ul.nav.nav.navbar-nav.navbar-right.menu-right li a{
    font-family: 'Open Sans', sans-serif !important;
    margin-bottom: -5px;
}

.navbar-inverse .navbar-nav > li > a {
font-family: sans-serif;
}
div.container h3 div.text-canter{
    font-size: 100px;
}
ul {list-style:none; padding:0; margin:0;}
ul, li {list-style-type:none;}
.subscribe {
    background-color: #8A8A8A;
    padding: 5px 0;
    text-align: center;
}
.dropdown-menu > li > a{
    color: #9FCC26;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a{
    color: #9FCC26;
}
@media (min-width: 768px) {
    .hidden-navbar{
        display: block;
    }
}

@media (max-width: 768px) {
    .hidden-navbar{
        display: none;
    }
}

@media (max-width: 768px) {
    .open
    {
        display: block;
    }
}



@media screen and (max-width: 800px) {
    .btn-subscribe {
        border-radius: 0px;
        margin-left: 4px;
        background-color: #9FCC26;
        vertical-align: middle;
    }
}

@media screen and (min-width: 800px) {
    .btn-subscribe {
        border-radius: 0px;
        margin-left: 20px;
        background-color: #9FCC26;
        vertical-align: middle;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 10px;
        padding-top: 10px;
    }
}



.readmore {
    background-color: white;
    padding: 0 0 0 0;
    padding-top: 2%;
    padding-bottom: 2%;
}

/*READMORE*/
@media screen and (max-width: 800px){
    .tgl-readmore{
        color: #8a8a8a;
        font-style: italic;
        font-family: "Myriad Pro";

    }
    .judul-readmore{
        color: #9FCC26;
        font-size: 15px;
        font-family: sans-serif;
    }
    .p-readmore{
        padding-top: 2%;
        margin-bottom: 30px;
        color: grey; /*#8a8a8a;*/
    }
    .ukuran-video{
        width: 300px;
    }
}

@media screen and (min-width: 800px){
    .tgl-readmore{
        color: lightslategray;
        font-style: italic;
        font-family: "Myriad Pro";

    }
    .judul-readmore{
        color: #9FCC26;
        font-size: 18px;
        font-family: sans-serif;
    }
    .img-readmore{
        /*float: right;*/
        /*width: 15vw;*/
        height: 10vw;
        background-size: cover;
    }
    .p-readmore{
        /*padding-top: 3%;*/
        margin-top: -0.5%;
        margin-bottom: 60px;
        color: #8a8a8a !important;
        font-size: 14px !important; 
        text-align: justify;
    }

    .jarak-judul-news{
        height: 50px;
    }

    .ukuran-video{
        width: 310px;
    }
}

@media screen and (min-width: 1400px){
    .ukuran-video{
        width: 400px;
    }
}
.gallery-about{
    padding-left: 0px!important;
    padding-right: 0px!important;
    min-height: 0px!important;
}
/*READMORE*/
/*.background-about{
    !*background-image: url('../img/header.jpg');*!
    padding-top: 2%;
    padding-bottom: 2%;
    background-color: #9FCC26;

}*/
.gambar-background-about{
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    margin-top: auto;
    height: 50vh;
    object-fit:cover
}
@media (max-width: 768px) {
    .gambar-background-about{
        margin-right: auto;
        margin-left: auto;
        margin-bottom: auto;
        margin-top: auto;
        height: inherit;
        object-fit:cover
    }
}
hr{
    border-color: #ebebeb;
    border-width: 5px;
    max-width: 100%;
}
@media screen and (min-width: 800px) {
    .judul-gambar-samping {
        /*padding-right: 8vw;
        padding-left: 8vw;
        font-size: xx-large;*/
        color: #9FCC26;
    }
}
@media screen and (max-width: 800px) {
    .judul-gambar-samping {
        /*text-align: center;
        font-size: xx-large;*/
        color: #9FCC26;
        padding-top: 5%;
    }
}
.gambar-samping {
    /*background-color: white;*/
    /*background-color: #EAEAEA;*/
    padding: 0 0 0 0;
    /*padding-top: 2%;
    padding-bottom: 2%;*/
}
@media screen and (min-width: 800px) {
    .img-gambar-samping {
        /*float: right;*/
        padding-top: 2%;
        padding-right: 2vw;
        margin-bottom: 1vw;
        float: left;
    }
}
@media screen and (max-width: 800px) {
    .img-gambar-samping {
        /*float: right;*/
        padding-top: 2%;
        text-align: center;
        vertical-align: middle;
        margin-right: auto;
        margin-left: auto;
    }
}
.p-gambar-samping{
    padding-top: 1.5%;
}
.content-gambar-samping {
    background-color: #EAEAEA;
    padding: 0 0 0 0;
    padding-top: 2%;
    /*padding-bottom: 2%;*/
    padding-bottom: 0%;
    margin-top: 2%;
}
.content-gambar-samping2 {
    background-color: white;
    padding: 0 0 0 0;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-top: 2%;
}
.judul-content-gambar-samping {
    background-color: #EAEAEA;
    padding: 0 0 0 0;
    font-size: xx-large;
    text-align: center;
    margin-top: 1%;
}
.service {
    background-color: white;
    padding: 0 0 0 0;
    padding-top: 2%;
    padding-bottom: 2%;
}

.tengah-semua{
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    vertical-align: middle;
}
.padding-coming-soon{
    padding-top: 25%;
    padding-bottom: 25%;
}
@media (max-width: 768px) {
    .padding-coming-soon{
        padding-top: 55%;
        padding-bottom: 55%;
    }
}

.padding-top-2prc {
padding-top: 2%;
}
@media screen and (min-width: 800px){
    .judul-service{
        color: black;
        font-size: 15px;
        padding-left: 8vw;
    }
    .img-service{
        /*float: right;*/
        padding-left: 8vw;
    }
    .p-service{
        padding-top: 2%;
        padding-right: 8vw;
    }
}
@media screen and (max-width: 800px) {
    .judul-service {
        color: black;
        font-size: 15px;
    }

    .img-service {
        /*float: right;*/
        margin-left: auto;
        margin-right: auto;
        height: 170px;
        width: 170px;
    }

    .p-service {
        padding-top: 5%;
        padding-bottom: 5%;
        padding-right: 8vw;
        padding-left: 8vw;
    }
}

@media (min-width: 1366px) {
    .container-custom {
        /*width: 99.1%;
        padding-right: 0px;
        padding-left: 0px;*/
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
        margin-right: 0px!important;
        margin-left: 0px!important;
    }
}
@media (max-width: 800px) {
    .container-custom {
        /*width: 96.4%;
        padding-right: 0px;
        padding-left: 0px;*/
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
    }
}
@media (min-width: 800px) {
    .jarak-client {
        /*width: 20%;
        float: left;
        text-align: center;*/
    }
}
@media (max-width: 800px) {
    .jarak-client {
        width: 50%;
        float: left;
        text-align: center;
    }
}
.p-contact{
    padding-left: 2.5%;
}

.text-canter-cos {
    text-align: center;
}

b:hover {
    color: black!important;
    border-bottom: solid;
    border-bottom-width: 2px;
    border-bottom-color: #9FCC26;
    height: 30px;
}
a:hover{
    color: black!important;
}
@media (min-width: 800px) {
    .jarak-service {
        text-align: left;
    }
}
@media (max-width: 800px) {
    .jarak-service {
        text-align: center;
    }
}
.category{
    margin-bottom: 2%;
    margin-top: 3%;
    /*margin-top: 6%;*/
}

service, h3, div, span, p {
        color: #8A8A8A;

}

div.full-width.text-center, p {
     color: grey;  /*ffffff*/
 }

@media (min-width: 800px) {
    .garis-footer {
        border: 5px solid #9FCC26;
        /*margin-top: 25%;*/
        margin-bottom: 0%;
        border-right: 0px;
        border-bottom: 0px;
        border-left: 0px;
		
		
		
		bottom: 0;
		left: 0;
		right: 0;
    }

    .gambar-footer {
        /*float: right;*/
        /*margin-bottom: 1%;*/
        margin-top: 6%;
        margin-right: 2%;
        width: 240px;
    }

    .gambar-footer-sosmed {
        float: left;
        /*margin-bottom: 1%;*/
        margin-top: 2.5%;
    }

    @media (max-width: 768px) {
        .sosmed-cont{
            display: block!important;
            margin-left: auto!important;
            margin-right: auto!important;
            text-align: center!important;
            vertical-align: middle!important;
        }
    }

    @media (max-width: 768px) {
        .sosmed-cont-reso{
            height: 20px;
        }
    }

    .padding-left-footer
    {
        padding-left: 20px;
    }

    .padding-right-footer
    {
        padding-right: 20px;
    }
}
@media (min-width: 768px) {
    .float-right{
        float: right;
    }
}

@media (max-width: 768px) {
    .float-right{
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        vertical-align: middle;
        padding-top: 12px;
    }
}

@media (max-width: 800px) {
    .garis-footer {
        border: 3px solid #9FCC26;
        /*margin-top: 10%;*/
        margin-bottom: 2%;
        border-right: 0px;
        border-bottom: 0px;
        border-left: 0px;
        padding: 0px;
		
		
		
		bottom: 0;
		left: 0;
		right: 0;

    }

    .gambar-footer {
        float: right;
        margin-bottom: 2%;
        margin-top: 3%;
    }
}

@media (min-width: 800px) {
    .garis-footer {
        padding: 10px
    }
}
@media (max-width: 800px) {
    .maps-responsive {
        width: 100%;
        height: 100%;
    }
}
.color-font{
    color: #8A8A8A;
}
@media (max-width: 800px) {
    .menu-right {
        float: right;
        text-align: right;
    }
}
.resolusi-client{
    height: 7vh;
    margin-top: 7%;
    margin-bottom: 17%;
    object-fit:cover
}
@media (max-width: 768px) {
    .resolusi-client{
        height: 5vh;
        margin-top: 5%;
        margin-bottom: 15%;
        object-fit:cover
    }
}

@media (max-width: 768px) {
    .jarak-galerry {
        width: 500px;
        height: 200px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        object-fit:cover
    }
}
@media (min-width: 800px) {
    .jarak-galerry {
        width: 100%;
        height: 170px;
    }
}
@media (min-width: 1024px) {
    .jarak-galerry {
        /*width: 100%;
        height: 130px;*/
        height: 15vh;
        object-fit:cover
    }
}
@media (min-width: 1366px) {
    .jarak-galerry {
        /*width: 100%;
        height: 140px;*/
        height: 18vh;
        object-fit:cover
    }
}
@media (min-width: 2560px) {
    .jarak-galerry {
        /*width: 100%;
        height: 10vw;*/
        height: 18vh;
        object-fit:cover
    }
}

@media (min-width: 800px) {
    .jarak-p-img {
        margin-bottom: 15%;
    }
}

@media (max-width: 800px) {
    .jarak-index {
        width: 25%;
        height: 10vh;
        float: left;
        object-fit:cover
    }
}
@media (min-width: 1024px) {
    .jarak-index {
        width: 25%;
        height: 180px;
        float: left;
        object-fit:cover
    }
}
@media (min-width: 1280px) {
    .jarak-index {
        width: 100%;
        height: 200px;
        float: left;
        object-fit:cover
    }
}
@media (min-width: 1366px) {
    .jarak-index {
        width: 100%;
        height: 200px;
        float: left;
        object-fit:cover
    }
}
.menu-mobile {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent; 
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.testimonial-client{
    text-align: center;
}

.testimonial-client-rev
{
padding-right: 30px;
padding-left: 30px;
text-align: center;
}

.p-testimonial-client-rev
{
    color :#A0CA39;;
}

.img-testimonial-client{
    border-radius: 100%;
    width: 130px;
    height: 130px;
    margin-top: 25%;
    object-fit: cover;
    margin-bottom: 20px;
}
div.testimonial-client{
    padding-right: 30px;
    padding-left: 30px;
}
.slider-home-2{
    width: 100%;
    height: 350px!important;
}
.home-slider{
    width: 100%;
    height: 560px;
}
@media (max-width: 800px) {
    .img-about {
        /*width: 280px;*/
        height: 230px;
    }
}
@media (min-width: 800px) {
    .img-about {
        /*width: 280px;*/
        height: 230px;
        object-fit:cover
    }
}
.img-articels{
    /*width: 350px;
    height: 180px;*/

    /* width: 300px;
    height: auto; */

    width: auto;
    height: 300px;
    object-fit:cover;
    margin-bottom: 0%;
}
@media (min-width: 769px) {
    .img-articels-readmore {
        width: 350px;
        height: 180px;
        object-fit: cover;
        margin-bottom: 100%;
    }
}
@media (max-width: 768px) {
    .img-articels-readmore{
        width: 100%;
        /*height: 180px;*/
        object-fit:cover;
        margin-bottom: 0%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .img-articels{
        /*width: 350px;
        height: 180px;*/
        width: 100%;
        height: auto;
        object-fit:cover;
        margin-bottom: 0%;
    }
}

 .show-more span {
     display: inline-block;
     height: 0;
     overflow: hidden;
     transition: opacity 2s;
     opacity: 0;
 }
.show-more span.fade-in {
    height: auto;
    opacity: 1;
}

@media (max-width: 800px) {
    .img-store {
        width: 100%;
        height: 100%;
        object-fit:cover
    }
}
@media (min-width: 800px) {
    .img-store {
        width: 250px;
        height: 170px;
        object-fit:cover;
        margin-bottom: 5px;
    }
}
@media (max-width: 768px) {
    .testimonial-p{
        /*font-size: 135%!important;*/
        font-size: 1.9vh!important;
    }
}
@media (min-width: 769px) {
    .testimonial-p{
        /*font-size: 25px!important;*/
        font-size: 2.5vh!important;
    }
}

@media (max-width: 768px) {
    ol {
        width: 93%;
    }
}

.img-top-service{
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
}
.img-under-service{
    width: 110px;
    height: 110px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.container .testimonial-client p {
    color: #9FCC26;
    margin-bottom: 5%;
    margin-top: -2%;
}
@media (max-width: 768px) {
    .contain-btm {
        width: 90%;
    }
}
@media (min-width: 768px) {
    .contain-btm {
        width: 60%;
    }
}
.row-costum{
    margin-left: 0px!important;
    margin-right: 0px!important;
}

p.text-left{
    font-weight: bold;
}

@media (max-width: 1366px) {
    p.text-left{
        font-weight: bold;
        font-size: 10px; 
    }
}

div.jarak-service p.text-left{
    /*padding-bottom: 2%;*/

    padding-bottom: 0%;
}
div.p-contact p{
    font-size: 16px;
}
div.text-canter, div.category{
    font-size: 25px!important;
}

@media (min-width: 800px) {
    li.dropdown {
        height: 7vh;
    }
}

@media (min-width: 1024px) {
    li.dropdown {
        height: 7.7vh;
    }
}

@media (min-width: 1280px) {
    li.dropdown {
        height: 6vh;
    }
}

@media (min-width: 1366px) {
    li.dropdown {
        height: 5.5vh;
    }
}

@media (min-width: 1440px) {
    li.dropdown {
        height: 5.2vh;
    }
}

@media (min-width: 1680px) {
    li.dropdown {
        height: 4.5vh;
    }
}

@media (min-width: 2560px) {
    li.dropdown {
        height: 2.6vh;
    }
}
.form-custom{
    border-right: 0px;
    border-top: 0px;
    border-left: 0px;

    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.float-label-control { position: relative; margin-bottom: 1.5em; }
.float-label-control ::-webkit-input-placeholder { color: transparent; }
.float-label-control :-moz-placeholder { color: transparent; }
.float-label-control ::-moz-placeholder { color: transparent; }
.float-label-control :-ms-input-placeholder { color: transparent; }
.float-label-control input:-webkit-autofill,
.float-label-control textarea:-webkit-autofill { background-color: transparent !important; -webkit-box-shadow: 0 0 0 1000px white inset !important; -moz-box-shadow: 0 0 0 1000px white inset !important; box-shadow: 0 0 0 1000px white inset !important; }
.float-label-control input, .float-label-control textarea, .float-label-control label { font-size: 1.3em; box-shadow: none; -webkit-box-shadow: none; }
.float-label-control input:focus,
.float-label-control textarea:focus { box-shadow: none; -webkit-box-shadow: none; border-bottom-width: 2px; padding-bottom: 0; }
.float-label-control textarea:focus { padding-bottom: 4px; }
.float-label-control input, .float-label-control textarea { display: block; width: 100%; padding: 0.1em 0em 1px 0em; border: none; border-radius: 0px; border-bottom: 1px solid #aaa; outline: none; margin: 0px; background: none; }
.float-label-control textarea { padding: 0.1em 0em 5px 0em; }
.float-label-control label { position: absolute; font-weight: normal; top: -1.0em; left: 0.08em; color: #aaaaaa; z-index: -1; font-size: 0.85em; -moz-animation: float-labels 300ms none ease-out; -webkit-animation: float-labels 300ms none ease-out; -o-animation: float-labels 300ms none ease-out; -ms-animation: float-labels 300ms none ease-out; -khtml-animation: float-labels 300ms none ease-out; animation: float-labels 300ms none ease-out; /* There is a bug sometimes pausing the animation. This avoids that.*/ animation-play-state: running !important; -webkit-animation-play-state: running !important; }
.float-label-control input.empty + label,
.float-label-control textarea.empty + label { top: 0.1em; font-size: 15px; animation: none; -webkit-animation: none; }
.float-label-control input:not(.empty) + label,
.float-label-control textarea:not(.empty) + label { z-index: 1; }
.float-label-control input:not(.empty):focus + label,
.float-label-control textarea:not(.empty):focus + label { color: #aaaaaa; }
.float-label-control.label-bottom label { -moz-animation: float-labels-bottom 300ms none ease-out; -webkit-animation: float-labels-bottom 300ms none ease-out; -o-animation: float-labels-bottom 300ms none ease-out; -ms-animation: float-labels-bottom 300ms none ease-out; -khtml-animation: float-labels-bottom 300ms none ease-out; animation: float-labels-bottom 300ms none ease-out; }
.float-label-control.label-bottom input:not(.empty) + label,
.float-label-control.label-bottom textarea:not(.empty) + label { top: 3em; }


@keyframes float-labels {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 15px; }
    20% { font-size: 15px; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: -1em; opacity: 1; }
}

@-webkit-keyframes float-labels {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 15px; }
    20% { font-size: 15px; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: -1em; opacity: 1; }
}

@keyframes float-labels-bottom {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 15px; }
    20% { font-size: 15px; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: 3em; opacity: 1; }
}

@-webkit-keyframes float-labels-bottom {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 15px; }
    20% { font-size: 15px; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: 3em; opacity: 1; }
}



@media (max-width: 768px) {
    .lala{
        height: 20px;

    }
    img > lala > a , span{
        font-size: 14px;
    }
    .copy-right{
        font-size: 14px;
        margin-top: 6%;
    }
    .size-logo-footer{
        height: 7vh;
    }
    .tengah-semua-footer{
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        vertical-align: middle;
    }
}

@media (min-width: 768px) {
    .lala{
        height: 20px;

    }
    .size-logo-footer{
        width: 240px;
    }
    .padding-tengah-footer
    {
        padding-top: 2%;
    }
    img > lala > a > span{
        font-size: 20px;
    }
}

@media (max-width: 1366px) {
    .padding-footer {
        padding-bottom: 5%;
    }
}

@media (max-width: 1600px) {
    .padding-footer {
        padding-bottom: 20%;
    }
}