/*--
    Author: W3Layouts
    Author URL: http://w3layouts.com
    License: Creative Commons Attribution 3.0 Unported
    License URL: http://creativecommons.org/licenses/by/3.0/
--*/

html {
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    overflow: hidden;
    padding:0 !important;
}

html,
body {
    margin: 0;
    font-size: 100%;
    font-family: 'Roboto', sans-serif;
    background: #fff;
}
body .bancet_overlay {
    opacity: 0;
    width: 100%;
}

body .bancet_overlay.active {
    opacity: 1;
}

body a {
    text-decoration: none !important;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    font-family: 'Roboto', sans-serif;
}

.animated {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

a:hover {
    text-decoration: none;
}

input[type="button"],
input[type="submit"],
input[type="text"],
input[type="email"],
input[type="search"] {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    font-family: 'Roboto', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
}

p {
    font-size: 1em;
    color: #8c9398;
    /*line-height: 2em; */
    /*letter-spacing: 1px; */
}

ul {
    margin: 0;
    padding: 0;
}


/*--/header --*/

header.banner_section {
    width: 100vw;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

button.btn.login-btn {
    padding: 8px 24px;
    background: orange;
    color: #fff;
    border: none;
    font-size: 0.9em;
    letter-spacing: 1px;
}

button.btn.login-btn:hover {
    background: #ffc107;
    color: #0e0d0d;
}

/*** Navigation Styles ***/

nav.main-header {
    width: 100%;
    height: 100px;
    background: none display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    top: 0;
    z-index: 999;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

nav.main-header.brightener {
    background: rgba(0,0,0,0.5);
    height: 80px;
}

nav.main-header ul, nav.main-header2 ul {
    margin-top: 11px;
}

nav.main-header.navShadow {
    -webkit-box-shadow: 0 4px 30px -5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 30px -5px rgba(0, 0, 0, 0.2);
    height: 80px;
    background: #000;
}

nav.main-header.brightener.navShadow {
    background-color: #000;
    height: 70px;
}

nav.navShadow #word-mark {
    opacity: 0;
}

.other_news a {
    color: white;
}

.other_news a:hover {
    opacity:0.8;
    color: orange;
}

.other_news h5 {
    margin-top: 40px;
    display: block;
    padding: 0 40px;
}

.other_news .post_title_area {
    padding: 0 0 40px 0;
}

.other_news .post_title_area p {
    margin-bottom: 0;
    padding: 0 40px;
}

#brand,
#menu,
ul.nav-honey {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#brand {
    padding-left: 40px;
    float: left;
    width: 20%;
}

#logo {
    width: 55px;
    height: 55px;
    background: orange;
    border-radius: 50%;
    cursor: pointer;
}

#word-mark {
    width: 120px;
    border-radius: 90px;
    margin-left: 8px;
    opacity: 1;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

#logo a i {
    font-size: 2em;
    text-align: center;
    display: block;
    line-height: 1.7;
    color: #fff;
}

div#word-mark h1 a {
    color: #fff;
    font-size: 1em;
    text-transform: ;
    font-weight: 600;
    line-height: 0;
    letter-spacing: 1px;
    font-family: 'Roboto', sans-serif;
}

/*** Menu Styles ***/

#menu {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-right: 40px;
    float: right;
    width: 80%;
}

.nav-honey li {
    margin-left: 20px;
    list-style: none;
}

.nav-honey li a {
    background: none;
    display: block;
    color: #fff;
    font-size: 0.9em;
    line-height: 28px;
    letter-spacing: 2px;
    padding: 0.5em;
    font-weight: 300;
}

#menu-toggle {
    width: 55px;
    height: 55px;
    background: orange;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    display: none;
}

#menu-toggle:hover .bar {
    width: 25px;
}

#menu-toggle.closeMenu .bar {
    width: 25px;
}

#menu-toggle.closeMenu .bar:first-child {
    -webkit-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}

#menu-toggle.closeMenu .bar:nth-child(2) {
    -webkit-transform: scale(0);
    transform: scale(0);
}

#menu-toggle.closeMenu .bar:last-child {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}

.bar {
    width: 25px;
    height: 2px;
    background: #fff;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.bar:nth-child(2) {
    width: 20px;
    margin: 5px 0;
}

.bar:last-child {
    width: 15px;
}

.nav-honey li a:hover { color: orange; }

.nav-honey li a.active {
    color: orange;
    position: relative;
}

.nav-honey li a.active::after {
    border-bottom: 1px solid orange;
    content : "";
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    margin-bottom: -5px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.nav-honey li a.active:hover::after {
    margin-bottom: 0px;
}


/*--/banner--*/

/*-- /header --*/

.banner_section_home {
    background: url(../images/banner2.jpg) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 50vw;
    position: relative;
    z-index: 0;
}

.banner_section_news {
    background: url(../images/banner_news5.jpg) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 50vw;
    position: relative;
    z-index: 0;
}

.banner_section_wtp {
    background: url(../images/banner_wtp.jpg) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 50vw;
    position: relative;
    z-index: 0;
}

.banner_section_ictel {
    background: url(../images/banner_ictel.jpg) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 50vw;
    position: relative;
    z-index: 0;
}

.banner_section_clab {
    background: url(../images/banner_clab.jpg) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 50vw;
    position: relative;
    z-index: 0;
}

.banner_section_jfast {
    background: url(../images/banner_jsmart.jpg) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 50vw;
    position: relative;
    z-index: 0;
}

.banner_section_citygas {
    background: url(../images/banner_citygas.jpg) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 50vw;
    position: relative;
    z-index: 0;
}


.banner_section_wwtp {
    background: url(../images/banner_wwtp.jpg) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 50vw;
    position: relative;
    z-index: 0;
}

.banner_section_news_detail {
    background: url(../images/banner_news_detail.jpg) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 30vw;
    background-position: center;
    position: relative;
    z-index: 0;
}

.news_content img { max-width: 100%; padding-left: 0; padding-right: 0; }


.banner-info {
    position: absolute;
    top: 40%;
    left: 3%;
}

a.btn.work {
    padding: 0.6em 2em;
    background: #fff;
    font-size: 0.9em;
    letter-spacing: 1px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    -ms-border-radius: 25px;
    color: orange;
}

a.btn.work:hover,
a.btn.work.active {
    background: orange;
    color: #fff;
}

.banner-info h5,
.banner-info h6 {
    margin: 0.5em 0;
    font-size: 0.9em;
    color: #ffd900;
}

.banner-info h5 {
    font-size: 1.4em;
    color: #fff;
}

.banner-info h3 {
    position: relative;
    color: rgba(0, 0, 0, .3);
    font-size: 4em;
    font-weight: 700;
}

.banner-info h3:before {
    content: attr(data-text);
    position: absolute;
    overflow: hidden;
    max-width: 10em;
    white-space: nowrap;
    color: #fff;
    animation: loading 8s linear;
}

@keyframes loading {
    0% {
        max-width: 0;
    }
}
.social_banner {
    position: absolute;
    z-index: 9;
    right: 0;
    top: 0;
    margin-top: 240px;
    margin-right: 9%;
}

.social_banner a {
    display: block;
    width: 29px;
    height: 29px;
    margin-bottom: 15px;
}
.social_banner a .social_banner_hover {
    display: none;
}

.social_banner a:hover img {
    display: none;
}

.social_banner a:hover .social_banner_hover {
    display: block;
}

.social_banner_line {
    border-right: 1px solid #FFF;
    height: 100px;
    margin-bottom: 40px;
    margin-right: 14px;
}

/*--//banner--*/

/*--/about--*/

h4.sub-tittle-w3 {
    font-size: 0.85em;
    color: orange;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 4px;
}

h3.tittle-w3 {
    text-shadow: 2px 2px 2px rgba(41, 41, 41, 0.15);
    font-size: 2.5em;
    color: #333338;
    font-weight: 700;
}

/*----*/

h4.progress-tittle-w3 {
    color: #4f4f50;
    font-size: 0.85em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1em;
}

.progress-one .progress {
    height: 0.5rem;
    background: #e1e2e2;
}

/*----*/

/*--//about--*/

.services {
    background: url(../images/serve.jpg) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    padding: 4em 0;
}

.service-in .card {
    padding: 2em 1em;
    border: none;
    transition: none;
    background: rgba(243, 244, 245, 0.17);
}

.service-in .card:hover {
    background: orange;

}

.service-in p.card-text {
    line-height: 1.9em;
    color: #fff;
    font-size: 0.8em;
    letter-spacing: 2px;
}

.service-in .card i {
    font-size: 2em;
    color: #ffd900;
}

.service-in .card h5.card-title {
    font-size: 1.1em;
    color: #fff;
}

.tab_nav {
    position: relative;
    margin-bottom: 30px;
}

.tab_nav a {
    width: 18%;
    padding: 10px 20px;
    display: inline-block;
    font-size: 12px;
    border: 1px solid #DDD;
    color: #666;
}

.tab_btn_skip {
    color: #444 !important;
}

.tab_nav a.active {
    background: #FFF;
}

.tab_content h3 {
    margin-bottom: 30px;
    font-size: 20px;
}

.tab_nav a b {
    display: inline-block;
    color: orange;
    font-size: 18px;
}

.tab_content button {
    color: white;
    font-size: 16px;
    padding: 10px 20px;
}

.tab_content button.btn-default {
    color: #444;
}

.btn-jababeka {
    border: 1px solid #DDD !important;
    margin-bottom: 30px;
    color: #333;
    padding: 10px 30px !important;
}

.btn-jababeka:hover {
    background: #333;
    color: white;
}

/*--/tabs --*/

.nav-pills .nav-link {
    padding: 0.7em 2em;
    letter-spacing: 1px;
    color: #007bff;
    background-color: #fff;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.9em;
    margin: 0 0.5em;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    -ms-border-radius: 25px;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background: #007bff;
}


.tech-btm h5 {
    font-size: 0.9em;
    line-height: 1.4em;
    font-weight: 600;
}

.menu-img-info h5 {
    font-size: 1.8em;
    color: #7b7d80;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
    line-height: 1.4em;
}

p.sub-meta {
    color: #1cbbb4;
    font-size: 1.2em;
    font-weight: 600;
}

.text-info-sec p {
    color: #8c9398;
}

.text-info-sec h5 {
    font-size: 1.4em;
    color: #4e4f50;
    text-shadow: 0 1px 2px rgba(18, 18, 19, 0.13);
    font-weight: 700;
    text-transform: uppercase;
}

.text-info-sec i {
    color: #EB2941;
}

/*--//tabs--*/

/*-- stats --*/

.stats {
    background: url(../images/stats.jpg) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 28vw;
}

.stats_info p {
    font-size: 2.5em;
    letter-spacing: 1px;
    font-weight: 700;
    color: #fff;
}

.stats_info h4 {
    font-size: 0.85em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1em;
}

.stats_info i {
    font-size: 2.3em;
    color: #ffc107;
    margin: 0;
}

.stats_bottom_grid_left img {
    margin: 0 auto;
}

.stats_info {
    text-align: center;
    padding: 0;
    border-top: none;
    border-bottom: none;
}

.stats_info:nth-child(3) {
    border-right: 0px;
}

.stats_info:nth-child(2) {
    border-left: 0px;
    border-right: 0px;
}

/*--//stats--*/

/*-- gallery --*/

.section_1_gallery_grid {
    margin-top: 1em;
}

.w3_section_1_gallery_grid {
    padding: 0 8px;
}

.section_1_gallery_grid1 {
    position: relative;
    background: #edf3f3;
    padding: 6px;
}

.proj_gallery_grid1_pos {
    background: #030605;
    bottom: 23px;
    left: 30px;
    opacity: 0;
    padding: 1em;
    position: absolute;
    right: 30px;
    text-align: center;
    visibility: hidden;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.proj_gallery_grid1_pos h3 {
    font-size: 1em;
    letter-spacing: 2px;
    font-weight: 400;
    position: relative;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
    text-transform: uppercase;
}

.proj_gallery_grid1_pos p {
    color: #fff;
    letter-spacing: 1px;
    font-size: 14px;
}

.section_1_gallery_grid:hover .proj_gallery_grid1_pos {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
    -ms-transform: scaleX(1);
}

.banner-bottom-wthree.gallery {
    padding: 5em 0;
}

p.quia {
    font-size: 1.2em;
    color: #140b05;
    font-weight: 600;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.proj_gallery_grid img {
    width: 100%;
}

/*-- //gallery --*/

.experience {
    background: url(../images/exp.jpg) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    padding: 2em 0;
}

/*--/testimonials--*/

.testimonials {
    background: url(../images/testimonials.jpg) no-repeat 0px -94px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 31vw;
}

.testimonials_grid-inn i {
    font-size: 3em;
}

.testimonials_grid {
    text-align: center;
    position: relative;
}

.testimonials_grid img {
    margin: 0 auto;
}

.testimonials_grid {
    text-align: center;
}

.testimonials_grid h3 {
    margin: 1em 0 0em 0;
    color: #333;
    font-size: 0.9em;
    text-transform: uppercase;
}

.testimonials_grid h3 span {
    font-weight: 100;
    font-size: 0.8em;
    color: #999
}

.testimonials_grid label {
    font-size: 0.7em;
    letter-spacing: 1px;
    color: orange;
    text-transform: uppercase;
}

.testimonials_grid p {
    width: 70%;
    margin: 1em auto 0;
    line-height: 2em;
    letter-spacing: 1px;
}

.testimonials_grid img {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border: 5px solid hsla(210, 7%, 6%, 0.13);
    margin-bottom: 1em;
}

.testimonials_grid {
    margin: 1em auto 0;
    width: 80%;
}

div#carouselExampleControls .carousel-item {
    background: none;
    height: auto;
}

a.carousel-control-next.test,
a.carousel-control-prev.test {
    color: #0e0f10;
    text-align: center;
    opacity: 0.9;
    font-size: 1em;
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    margin-top: 7em;

}

.testimonials_grid-inn img {
    width: 15%;
}

/*-- //testimonials --*/

/*--/contact--*/

.contact {
    background: url(../images/contact.jpg) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 46vw;
}

.address-right p {
    color: #e8e7e7;
    line-height: 0.8em;
}

.address-right h6 {
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.9em;
    letter-spacing: 2px;
}

.address-grid i {
    font-size: 2em;
    color: #ffd900;
}

.contact_grid_right {
    width: 100%;
}

p.sub {
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 0.8em;
}

.contact_left_grid label {
    color: #7d7f80;
    letter-spacing: 2px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
}

.contact_grid_right input[type="text"],
.contact_grid_right input[type="email"],
.contact_grid_right textarea {
    outline: none;
    padding: 15px 15px;
    font-size: 14px;
    color: #fff;
    background: none;
    width: 100%;
    letter-spacing: 1px;
    border: 2px solid rgba(248, 249, 250, 0.36);
}

.contact_grid_right textarea {
    min-height: 196px;
    resize: none;
    border-radius: 0.25rem;
    background: none;
}

.contact_grid_right input[type="submit"] {
    outline: none;
    padding: 1.2em 3em;
    font-size: 14px;
    color: #fff;
    background: orange;
    border: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
    font-weight: 600;
    cursor: pointer;

}

.contact_grid_right input[type="submit"]:hover {
    background: #ffd900;
}

.contact_grid_right input[type="text"]:focus,
.contact_grid_right input[type="email"]:focus,
.contact_grid_right textarea:focus {
    background: none;
    outline: 0;
    box-shadow: none;
    border: 2px solid rgba(3, 126, 243, 0.86);
}

.contact-left h4 {
    color: #444;
    font-size: 1em;
    margin-bottom: .5em;
    letter-spacing: 1px;
    font-weight: 700;
}

.contact-left p {
    font-size: 1em;
    letter-spacing: 1px;
}

.contact-text a {
    color: #888;
}

.contact-text a:hover {
    color: #fb383b;
}

.contact_grid_right h6,
.contact-left h6 {
    font-size: 1.2em;
    color: #292b2c;
    margin-bottom: 1.5em;
    letter-spacing: 1px;
    font-weight: 400;
}

.contact-map {
    width: 100%;
}

.contact-map iframe {
    width: 100%;
    height: 350px;
    border: 10px solid #ebeeef;
}

.ad-inf-sec {
    padding: 4em 0;
}

.address-right a {
    color: #eff2f3;
}

/*-- //contact--*/

/*--model-forms--*/

.modal-header {
    border: none;
}

.login h5 {
    font-size: 1.2em;
    color: #333;
    text-transform: uppercase;
    font-weight: 600;
}

.login button.btn.btn-primary.submit {
    background: #24292d;
    padding: 0.9em 2em;
    letter-spacing: 1px;
    border: none;
    text-transform: uppercase;
    font-size: 0.9em;
    margin-top: 1em;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    -ms-border-radius: 25px;
}

.login button.btn.btn-primary.submit:hover {
    background: orange;
}

.login a {
    color: #97989a;
}

.login label {
    font-weight: 400;
    color: #5a5757;
    font-size: 0.8em;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.video iframe {
    width: 100%;
    height: auto;
}

/*--//model-forms--*/

/*--responsive--*/

@media(max-width:1080px) {
    .input {
        max-width: 309px;
        width: calc(100% - 0em);
        vertical-align: top;
        float: left;
    }
}

@media(max-width:991px) {
    .contact_grids_info {
        padding: 0;
        margin-top: 1em;
    }
    .input {
        max-width: 100%;
    }
    .map iframe {
        width: 100%;
        min-height: 303px;
    }
}

/* COMP EXTRA */
@media(max-width:1366px) {
    .carousel-item .d-block {
        margin-top: -75px;
    }
}

@media(max-width:1280px) {
    .carousel-item .d-block {
        margin-top: 0px;
        padding-bottom: 0px;
    }
}

/* FULL HD */

@media(min-width:1367px) {

    .carousel-item img.d-block {
        margin-top: 0px;
        padding-bottom: 0px;
    }

    .call_to_act_1 {
        overflow: hidden;
        height: 265px;
    }

    .call_to_act_1 img {
        width: 100%;
    }

}

@media(max-width:767px) {
    .address-right.text-left {
        text-align: center !important;
        margin-top: 1em;
    }
}

@media(max-width:640px) {
    .mail_form input[type="submit"] {
        width: 40%;
    }
    .mail_form textarea {
        padding: .9em 0.9em;
        margin: 1.3em 0;
        min-height: 140px;
    }
    .contact-map iframe {
        width: 100%;
        height: 250px;
    }

}

@media(max-width:600px) {

    .map iframe {
        width: 100%;
        min-height: 250px;
    }

    .page_title {
        margin-top: 14px !important;
    }

    #news_thumb {
        margin-top: 60px !important;
    }
}

/*--//responsive--*/

/*-- /footer --*/

.product_section {
    background-color: #111;
}

.product_section .no_padding {
    overflow: hidden;
}

.product_section p, .product_section img {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.product_section img {
    opacity: 0.3;
}

.product_section .no_padding:hover img {
    opacity: 0.5;
}

.footer-end-grid h2 {
    margin-top: 2em;
}

.footer-end-grid h2 a {
    color: #333;
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 0;
    letter-spacing: 1px;
    font-family: 'Roboto', sans-serif;
    display: inline-block;
}

.footer-end-grid h2 a i {
    font-size: 0.7em;
    text-align: center;
    color: #fff;
    width: 55px;
    height: 55px;
    background: orange;
    border-radius: 50%;
    vertical-align: middle;
    line-height: 2;
}

.copy-right-w3ls p a {
    color: orange;
}

ul.list-footer li a {
    color: #888;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

ul.list-footer li a:hover {
    color: #212529;

}

ul.list-footer li {
    list-style: none;
    color: #fff;
}

ul.social-icons li {
    list-style: none;
    margin: 0 1em;
}

ul.social-icons li a {
    width: 32px;
    height: 32px;
    text-align: center;
    color: #333;
    border: 2px solid #333;
    display: inline-block;
    line-height: 30px;
    border-radius: 50%;
    font-size: 0.8em;
}

ul.social-icons li a:hover {
    color: orange;
    border: 2px solid orange;

}

/*-- //footer --*/

/*-- to-top --*/

#toTop {
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 20px;
    right: 2%;
    overflow: hidden;
    z-index: 999;
    width: 40px;
    height: 40px;
    border: none;
    text-indent: 100%;
    background: #0d0d0d url(../images/move_up.png) no-repeat 11px 11px;
}
#toTop:hover { background-color: orange;}

#toTopHover {
    width: 40px;
    height: 40px;
    display: block;
    overflow: hidden;
    float: right;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}


/*-- //to-top --*/

@media(max-width:1440px) {
    .testimonials {
        background: url(../images/testimonials.jpg) no-repeat 0px -57px;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        -ms-background-size: cover;
        height: 34vw;
    }
    .contact {
        height: 51vw;
    }
}

@media(max-width:1366px) {
    .contact {
        height: 55vw;
    }
    .testimonials {
        background: url(../images/testimonials.jpg) no-repeat 0px -30px;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        -ms-background-size: cover;
        height: 35vw;
    }
    .address-right h6 {
        font-size: 0.8em;
        letter-spacing: 1px;
    }
}

@media(max-width:1280px) {
    div#word-mark h1 a {
        font-size: 0.85em;
    }
    .address-grid i {
        font-size: 1.5em;
    }
    .testimonials_grid-inn i {
        font-size: 2em;
    }
    .testimonials_grid p {
        width: 70%;
        margin: 1em auto 0;
        line-height: 2em;
        letter-spacing: 1px;
        font-size: 0.8em;
    }
    .stats {
        height: 32vw;
    }
}

@media(max-width:1080px) {
    .banner-info h5 {
        font-size: 1em;
    }
    .banner-info h3 {
        font-size: 3em;
    }
    #brand {
        padding-left: 30px;
        float: left;
        width: 22%;
    }
    .stats {
        height: 37vw;
    }
    .testimonials {
        background: url(../images/testimonials.jpg) no-repeat 0px 0px;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        -ms-background-size: cover;
        height: 40vw;
    }
    .contact {
        height: 66vw;
    }
}

@media(max-width:1024px) {
    .testimonials_grid p {
        width: 100%;
    }
    .nav-honey li {
        margin-left: 8px;
        list-style: none;
    }
    .testimonials {
        height: 43vw;
    }
    a.carousel-control-next.test,
    a.carousel-control-prev.test {
        margin-top: 4em;
    }
    .contact {
        height: 72vw;
    }
    .proj_gallery_grid1_pos {
        padding: 0.5em 1em;
    }
    .proj_gallery_grid1_pos h3 {
        font-size: 0.8em;
        letter-spacing: 1px;
    }
}

@media(max-width:991px) {
    button.btn.login-btn {
        padding: 8px 20px;
        font-size: 0.8em;
        letter-spacing: 1px;
    }
    h4.progress-tittle-w3 {
        font-size: 0.8em;
        margin-bottom: 0;
        margin: 1em 0;
    }

    .contact_grid_right input[type="text"],
    .contact_grid_right input[type="email"],
    .contact_grid_right textarea {
        outline: none;
        padding: 9px 15px;
    }
    .service-in:nth-child(2) {
        margin: 1em 0;
    }
    .stats {
        height: 27vw;
    }
    .stats_info i {
        font-size: 2em;
    }
    .stats_info p {
        font-size: 2em;
        line-height: 1.5em;
    }
    .stats_info i {
        font-size: 2em;
        margin-bottom: 0.5em;
    }
    .contact_grid_right textarea {
        min-height: 160px;
    }
    .contact_grid_right {
        margin-top: 2em;
    }
    h3.tittle-w3 {
        font-size: 2.2em;
    }
    .testimonials {
        height: 36vw;
    }
    .contact {
        height: 61vw;
    }
    .address {
        margin: 0;
        margin-top: 2em;
    }
}

/*** Responsive Menu For Smaller Device ***/

@media screen and (max-width:900px) {
    /**nav**/
    #menu-toggle {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    nav.main-header {
        height: 75px;
    }
    ul.nav-honey {
        display: inline-block;
        width: 98vw;
        height: auto;
        background: transparent;
        position: absolute;
        top: 75px !important;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        left: 0px;
    }
    div#word-mark h1 a {
        font-size: 0.9em;
    }
    nav.main-header.navShadow {
        height: 65px;
    }
    ul.showMenu li {
        height: auto;
        opacity: 1;
        visibility: visible;
        padding-top: 2em;
    }
    ul.showMenu li {
        height: auto;
        opacity: 1;
        visibility: visible;
        width: 100%;
    }
    .nav-honey li {
        width: 15%;
        float: left;
        padding-left: 40px;
        opacity: 0;
        visibility: hidden;
        margin-left: 0;
        -webkit-transition: all 0.3s 0.1s;
        transition: all 0.3s 0.1s;
    }
    .nav-honey li a {
        padding: 0;
    }
    #head-line {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    ul.nav-honey.showMenu li {
        background: #111;
        padding: 1em 0;
    }
    ul.nav-honey.showMenu li.login {
        padding: 0.77em 0;
    }
    #brand {
        padding-left: 30px;
        float: left;
        width: 24%;
    }
    /**nav**/
}

@media(max-width:800px) {
    #brand {
        padding-left: 10px;
        float: left;
        width: 25%;
    }
    #menu {
        padding-right: 16px;
    }
    .testimonials {
        height: 43vw;
    }
    .contact {
        height: 74vw;
    }
    .footer-end-grid h2 a {
        font-size: 1em;
    }
    .footer-end-grid h2 a i {
        font-size: 0.7em;
        width: 45px;
        height: 45px;
        line-height: 2;
    }
    ul.social-icons li {
        margin: 0 0.5em;
    }
    .stats {
        height: 32vw;
    }
    .contact_grid_right input[type="submit"] {
        padding: 1em 3em;
    }
    .banner-info h3 {
        font-size: 2.5em;
    }
    h4.sub-tittle-w3 {
        font-size: 0.8em;
    }
}

@media(max-width:768px) {
    .testimonials {
        height: 46vw;
    }
    .stats {
        height: 34vw;
    }
    .stats_info h4 {
        font-size: 0.7em;
        margin-bottom: 1em;
    }
    #brand {
        padding-left: 10px;
        float: left;
        width: 27%;
    }
}

@media(max-width:736px) {
    .contact {
        height: 124vw;
    }
    .testimonials {
        height: 50vw;
    }
    .stats {
        height: 30vw;
    }
}

@media(max-width:690px) {
    #brand {
        padding-left: 10px;
        float: left;
        width: 29%;
    }
}

@media(max-width:667px) {
    h3.tittle-w3 {
        font-size: 2em;
    }
    .testimonials {
        height: 55vw;
    }
    .contact_grid_right textarea {
        min-height: 50px;
    }
    .proj_gallery_grid1_pos {
        bottom: 64px;
    }
    .nav-pills .nav-link {
        padding: 0.6em 1.5em;
        font-size: 0.85em;
    }
    .nav-honey li {
        padding-left: 30px;
    }
}

@media(max-width:640px) {
    .testimonials_grid p {
        width: 96%;
        margin: 1em auto 0;
        line-height: 1.8em;
        letter-spacing: 1px;
        font-size: 0.8em;
    }
    .stats {
        height: 33vw;
    }
    .stats_info p {
        font-size: 2em;
        line-height: 1.4em;
    }
    .stats_info i {
        font-size: 1.5em;
        margin: 0.5em 0 0 0;
    }
    .stats_info h4 {
        font-size: 0.8em;
        margin-bottom: 1em;
    }
    #brand {
        padding-left: 10px;
        float: left;
        width: 31%;
    }
    .testimonials {
        height: 59vw;
    }
    .banner-info h5,
    .banner-info h6 {
        margin: 0.5em 0;
        font-size: 0.7em;
    }
    .banner-info h5 {
        font-size: 0.9em;
    }
    .banner-info h3 {
        font-size: 2.2em;
    }
}

@media(max-width:600px) {
    h3.tittle-w3 {
        font-size: 2em;
    }
    .banner_section {
        height: 55vw;
    }
    #brand {
        padding-left: 10px;
        float: left;
        width: 33%;
    }
    .contact {
        height: 135vw;
    }
    .stats {
        height: 36vw;
    }
    .testimonials {
        height: 61vw;
    }
    .footer-bottom-cpy {
        display: block !important;
    }
    .nav-honey li {
        padding-left: 20px;
    }
}

@media(max-width:568px) {
    .banner_section {
        height: 55vw;
    }
    div#word-mark h1 a {
        font-size: 0.8em;
    }
    a.btn.work {
        padding: 0.5em 1.5em;
        font-size: 0.8em;
    }
    .stats {
        height: 60vw;
    }
    .contact {
        height: 143vw;
    }
    .footer-end-grid h2 {
        margin-top: 1em;
    }
    small,
    .small {
        font-size: 65%;
    }
    /**nav**/
    ul.nav-honey li a {
        width: 97%;
    }
    ul.showMenu li {
        height: auto;
        padding-top: 1em;
    }
    ul.nav-honey.showMenu li {
        width: 100%;
        padding-left: 0;
        float: none;
    }
    ul.nav-honey.showMenu {
        padding: 1rem;
    }
    ul.nav-honey {
        width: 97vw;
        top: 50px !important;
    }
    button.btn.login-btn {
        margin-bottom: 1em;
    }
    #brand {
        padding-left: 10px;
        float: left;
        width: 35%;
    }
    /**nav**/
}

@media(max-width:480px) {
    .banner-info h3 {
        font-size: 2em;
    }
    .banner-info h5,
    .banner-info h6 {
        font-size: 0.8em;
    }
    .banner-info h5 {
        font-size: 0.9em;
    }
    h3.tittle-w3 {
        font-size: 1.8em;
    }
    #brand {
        padding-left: 10px;
        float: left;
        width: 42%;
    }
    .banner_section {
        height: 68vw;
    }
    .stats {
        height: 70vw;
    }
    .testimonials {
        height: 78vw;
    }
    .contact {
        height: 168vw;
    }

}

@media(max-width:440px) {
    #brand {
        padding-left: 10px;
        float: left;
        width: 48%;
    }
    .banner-info h3 {
        font-size: 1.8em;
    }
    .banner-info {
        position: absolute;
        top: 37%;
        left: 3%;
    }
    .stats {
        height: 82vw;
    }
    .testimonials {
        height: 97vw;
    }
    .contact {
        height: 194vw;
    }
    h4.sub-tittle-w3 {
        font-size: 0.8em;
        letter-spacing: 2px;
    }
}



.product_pictures img {
    margin-bottom: 21px;
}

.tbl_product img {
    min-width: 30px;
}

@media(max-width:500px) {
    #brand {
        padding-left: 10px;
        float: left;
        width: 49%;
    }
    .contact {
        height: 196vw;
    }
    .service-in .card {
        padding: 1em 0.5em;
    }

    /*Style Mobile Produk*/
    .banner_section_wwtp {
    background: url(../images/banner_wwtp.jpg) no-repeat 0px 0px;
        background-size: auto auto;
    background-size: auto auto;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 72vw !important;
    position: relative;
    z-index: 0;
    font-size: 50px;
    }

    .banner_section_wtp {

    background: url(../images/banner_wtp.jpg) no-repeat 0px 0px;
        background-size: auto auto;
    background-size: auto auto;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 72vw !important;
    position: relative;
    z-index: 0;
    font-size: 40px;
    margin-bottom: -80px;
    }

    .banner_section_ictel {

    background: url(../images/banner_ictel.jpg) no-repeat 0px 0px;
        background-size: auto auto;
    background-size: auto auto;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 72vw !important;
    position: relative;
    z-index: 0;
    font-size: 50px;
    font-size: 50px;
    margin-bottom: -80px;
    }

    .banner_section_jfast {

    background: url(../images/banner_jsmart.jpg) no-repeat 0px 0px;
        background-size: auto auto;
    background-size: auto auto;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 72vw !important;
    position: relative;
    z-index: 0;
    font-size: 20px !important;
    margin-bottom: -80px;
    }

    .page_title h1 { font-size: 25px !important }

    .banner_section_clab {

    background: url(../images/banner_clab.jpg) no-repeat 0px 0px;
        background-size: auto auto;
    background-size: auto auto;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 72vw !important;
    position: relative;
    z-index: 0;
    margin-bottom: -80px;
    }
.banner_section_wwtp {

    background: url(../images/banner_wtp.jpg) no-repeat 0px 0px;
        background-size: auto auto;
    background-size: auto auto;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    position: relative;
    z-index: 0;
    height: 72vw !important;
    font-size: 50px;
    font-size: 50px;
    margin-bottom: -80px;

}

    .banner_section_citygas {

    background: url(../images/banner_citygas.jpg) no-repeat 0px 0px;
        background-size: auto auto;
    background-size: auto auto;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 72vw !important;
    font-size: 20px !important;
    position: relative;
    z-index: 0;
    margin-bottom: -80px;
    }
}

@media(min-width: 1200px){

    .add_margin_desktop {
        margin-bottom: 20px;
    }

}

@media(max-width:384px) {
    h3.tittle-w3 {
        font-size: 1.6em;
    }
    .testimonials {
        height: 126vw;
    }
    .testimonials_grid-inn i {
        font-size: 2em;
    }
    #brand {
        padding-left: 10px;
        float: left;
        width: 50%;
    }
    .contact_grid_right input[type="submit"] {
        padding: 0.8em 2.5em;
    }
}

@media(max-width:375px) {
    #brand {
        padding-left: 10px;
        float: left;
        width: 54%;
    }
    .stats {
        height: 91vw;
    }
    .testimonials {
        height: 114vw;
    }
    .contact {
        height: 210vw;
    }
    .banner_section {
        height: 74vw;
    }
    div#word-mark h1 a {
        font-size: 0.7em;
    }
}

@media(max-width:320px) {
    .banner-info h3 {
        font-size: 1.5em;
    }
    div#word-mark h1 a {
        font-size: 0.6em;
    }
    h3.tittle-w3 {
        font-size: 1.4em;
    }
    .contact {
        height: 247vw;
    }
    .testimonials {
        height: 130vw;
    }
    .stats {
        height: 105vw;
    }
    .banner_section {
        height: 87vw;
    }
    #brand {
        padding-left: 10px;
        float: left;
        width: 64%;
    }
}

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

.banner_section_wwtp .page_title h1 {
    color: white;
    font-weight: bold;
    line-height: 80%;
}

.banner_section_ictel .page_title h1 {
    color: white;
    font-weight: bold;
    line-height: 80%;
}

.banner_section_wtp .page_title h1 {
    color: white;
    font-weight: bold;
    line-height: 80%;
}

@media (max-width: 501px) {

    .left_menu_mobile {
        display: block !important;
    }

    .banner_section_ictel .page_title h1 {
    color: white;
    font-weight: bold;
    line-height: 80%;
    font-size: 23px; }

    .banner_section_ictel {

        background: url(../images/banner_ictel.jpg) no-repeat 0px 0px;
            background-size: auto auto;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        -ms-background-size: cover;
        height: 195px;
        position: relative;
        z-index: 0;

    }


    *, ::before, ::after {

        box-sizing: border-box;

    }

    .banner_section_wtp .page_title h1 {
        color: white;
        font-weight: bold;
        line-height: 80%;
        font-size: 23px;
    }

    .banner_section_wtp {

        background: url(../images/banner_wtp.jpg) no-repeat 0px 0px;
            background-size: auto auto;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        -ms-background-size: cover;
        height: 97.3vw;
        position: relative;
        z-index: 0;

    }

    .banner_section_wwtp .page_title h1 {
        color: white;
        font-weight: bold;
        line-height: 80%;
        font-size: 23px;
    }

    .banner_section_wwtp {

        background: url(../images/banner_wtp.jpg) no-repeat 0px 0px;
            background-size: auto auto;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        -ms-background-size: cover;
        height: 97.3vw;
        position: relative;
        z-index: 0;

    }

}

/* TABLET FIX HOME  */
@media (max-width: 800px) {

    .social_banner {
        display: none !important;
    }

    #carouselExampleIndicators .carousel-indicators {
        margin-top: 200px;
    }

}

@media (max-width: 420px) {

    .carousel-control-prev, .carousel-control-next { display: block; margin-top: 100px; }
    .carousel-indicators { display: none; }
    #modal_satu .modal-dialog { margin-top: 80px; padding-right: 15px; }

    .cctv_icon.fixed_cctv_icon {
        top: 65px !important;
    }

    .bancet_overlay {
        overflow-x: hidden !important;
    }

    .social_banner {
        display: none;
    }

    .nav-honey {
        display: none !important;
        width: 100vw !important;
    }

    .nav-honey.showMenu {
        display: block !important;
    }

    #modal_satu .modal-dialog {
        margin-top: 35% !important;
    }

}

.carousel-control-prev, .carousel-control-next { display: none !important; }

@media (min-width: 768px) {
    .carousel-control-prev, .carousel-control-next { display: none !important; }
    .carousel-indicators { display: flex; }
    .col-sm-5ths {
        width: 20%;
        float: left;
    }

    #modal_satu .modal-dialog {
        margin-top: 7% !important;
    }

}

@media (min-width: 992px) {
    .carousel-control-prev, .carousel-control-next { display: none !important; }
    .carousel-indicators { display: flex; }
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .carousel-control-prev, .carousel-control-next { display: none !important; }
    .carousel-indicators { display: flex; }
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

.first_banner_text {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 45% !important;
    padding-left: 50px;
    margin-top: 45% !important;
    width: 225px;
    opacity: 0;
}

.first_banner_text.active {
    margin-top: 41%  !important;
    opacity: 1;
}

.first_banner_text #slider_text {
    min-width: 200px;
}

#prod.no_padding {
    padding: 0 !important;
}

/*--//responsive--*/
.no_padding { padding:0px; }
.prod_caption { padding: 20px;
    position: relative; z-index: 2;
    margin-top: -250px; margin-bottom: 48px;
 }

.prod_caption h2 { color: white; margin-top: 30px; font-size: 20px; margin-bottom: 20px; }
 .prod_caption h5 { color: white; margin-top: 10px; font-weight: normal; font-size: 14px; }

 .prod_caption h2:hover { color: orange;  }
 .prod_caption p {
    color: white;
    margin-top: 0px;
    padding: 5px;
    border:2px solid orange;
    width: 50%;
    margin: 0 auto;
    border-radius: 20px; }
.prod_caption:hover p {
    border:2px solid white; }

#prod a:hover {text-decoration: none;}
.dark_bg { background-color: rgba(1,1,1,0.8); }
.white_text { color: white; }

.bg_img_dark {
    background-image: url(images/prod_bg.jpg);
}

.orange_text { color: orange; }

.item_mission { margin-top: 20px; padding: 10px 30px; margin-bottom: 0px; }
.item_mission h4 { color: white; font-size: 30px;}
.item_mission h5 { color: orange; font-size: 15px; margin-top: 20px;  }
.item_mission p { color: white; text-align: justify; font-size: 13px; margin-top: 15px; line-height: normal; }
.mission_text { text-align: justify; color: white; line-height: normal }
#mission { padding: 70px 0px; margin-top: -02px; background-color:black; }
#about { padding: 50px 0px; }

.call_to_act_1 { margin-top: 30px; }
.call_to_act_1 h5 { text-align: center; color: white; position: relative; z-index: 1; margin-top: 80px; }
.call_to_act_1 h4 { text-align: center; color: white; position: relative; z-index: 1; max-width: 600px; margin: 0 auto; padding: 0 20px; }
.call_to_act_1 img { margin-top: -180px; position: relative; z-index: 0}

.img_team { position: relative; overflow: hidden; }
.img_team:hover .img_team_cover { opacity: 1; }
.img_team * { transition: all 500ms; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; }
.img_team_cover { position: absolute; z-index: 9; top: 0; text-align: center; width: 100%; height: 100%; background: rgba(0,0,0,0.7); opacity: 0; }
.img_team_cover h3 { font-size: 20px; color: orange; margin-top: 22%; }
.img_team_cover p { color : white; font-weight: bold; }

#news .img_team a {
    display: block;
    height: 350px;
}

.img_team:hover .post_caption { bottom: 0px; }

.team_caption { position: relative; }
.team_caption:hover {background-color: rgba(1,1,1,0.8); position: relative; z-index: 2;color: white;   }
.team_caption h4 {text-align: center;  margin-top: -300px;}
.team_caption h6 {text-align: center;font-size: 14px; font-weight: normal; margin-top: -200px;}
.post_caption {
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(1,1,1,0.8);
    margin-top: 260px;
    height: 100%;
}
.img_team:hover .post_caption { margin-top: 80px;  }
.post_caption h5 {
    width: 100%;
    color: white;
    padding: 10px 30px;
    font-size: 20px;
    height: 33px;
    overflow: hidden;
    margin-bottom: 17px;
    margin-top: 17px;
}

.post_caption p {
    max-height: 115px;
    overflow: hidden;
}

.rounded_news_btn { text-align: center }
.rounded_news_btn a { border: 2px solid #333; display: inline-block; margin-right: 20px; margin-bottom: 20px; padding: 6px 30px; border-radius: 20px; color: #333; }
.rounded_news_btn a:hover, .rounded_news_btn a.active { background: #333; color: white; }

.post_caption p { width: 100%; color: white; padding: 10px 30px; margin-top: -10px; font-size: 13px}
.post_caption h6 { width: 100%; color: white; padding: 10px 30px; margin-top: -20px; font-size: 10px; font-weight: normal; margin-bottom: 15px;}
.link_post { color: white; padding: 3px 15px; border: 2px solid orange; color: white; border-radius: 15px; margin-left: 30px; margin-bottom: 10px; font-size: 13px;}
.link_post:hover { border:2px solid white; color: orange; }
.see_all {}
.see_all a { text-align: center; padding: 10px 30px; border:1px solid black; margin-top: 40px; color: black; font-weight: bold; }
.see_all a:hover { color: orange }
.tbl_contact { width: 100% }
.tbl_contact tr {margin-bottom: 30px}
.tbl_contact tr td { margin-bottom: 30px }
.tbl_contact tr td input { border-radius: 0px; background-color: rgba(255,255,255,0.1); border: none; }
.tbl_contact tr td textarea { border-radius: 0px; background-color: rgba(255,255,255,0.1); border: none; }

.page_title { margin-left: 30px; margin-top: 50px; }
.page_title h1 { color: white; font-weight: bold; line-height: 80%; font-size: 50px; }
#news_thumb { margin-top: 70px; margin-bottom: 70px;}

.post_exerp h5 { font-size: 14px; }
.post_exerp p { text-align: justify; font-size: 14px;  margin-top: 20px; color: black }
.post_exerp a { padding: 5px 20px; border:2px solid grey; border-radius: 15px;  color: grey; font-weight: bold; margin-top: 20px;}
.post_exerp a:hover { color: orange; border:2px solid orange; }

.post_content h5 { font-size: 14px; }
.post_content p { text-align: justify; font-size: 14px;  margin-top: 20px; color: black }

.news_content { margin-bottom: 30px; }
.date_time_post h4 { text-align: center; text-decoration: underline; color: grey}
.date_time_post h2 { text-align: center; color: grey; font-size: 36px;}

.sv_text, .sv_text p { color: black; text-align: justify; font-size: 16px; }
.tbl_product { width: 100%; }
.tbl_product tr td { padding: 10px; }

.kontak_product {}
.kontak_product h4 { text-align: center; color: white; margin-bottom: 30px;}
.kontak_product h5 { text-align: center; color: white; font-weight: 300; font-size: 18px; line-height: 140%; margin-bottom: 30px;}
.kontak_product h6 { text-align: center; color: orange; font-size: 14px; margin-bottom: 50px; font-weight: 300; line-height: 140%;}

.footer_product_list {}
.footer_product_list h5 { color: #7e7e7e; margin-bottom: 30px;}
.footer_product_list p { color: white;  }
// .sosmed_icon { margin-top: 40px; }
// .sosmed_icon .col-md-3 .img { width: 100%; margin: 0 auto; }

.sv_link { margin-top: 30px; }
.sv_link a {
    padding : 10px 30px; border: 2px solid orange; color: black ;
}
.sv_link a:hover { color: ; background-color: orange;  border:2px solid black; }

.sv_link_jfast { margin-top: 30px; }
.sv_link_jfast a {
    padding : 10px 30px; border: 2px solid white; color: white ;
}
.sv_link_jfast a:hover { color: ; background-color: orange;  border:2px solid white; }
.kontak_ictel p { color: white; }

.ictel_f_link a { padding: 10px 30px; border:2px solid white; color: white; }
.ictel_f_link a:hover {  border:2px solid orange; color: orange; }

.tbl_clab { width: 100% }
.tbl_clab tr td {color: white; padding: 4px; vertical-align: top;}
.post_title_area { padding: 10px; background-color: black; color: white; }
.post_title_area h5 { font-size: 15px; }
.post_title_area p { font-size: 13px; }
.flat { border-radius: 0px; }

.tbl_tender {}
.tbl_tender thead {}
.tbl_tender thead tr {}
.tbl_tender thead tr th {color: white; border: 1px solid #0a0a0a;border-right: 3px solid #0a0a0a; background-color: #161616; font-size: 14px;}
.tbl_tender tbody tr td {color: white; border-right: 3px solid #0a0a0a; background-color: #161616; border-top: none; font-size: 13px; }
.tbl_tender {}

.sosmed_icon .col-md-3 p a { color: white; padding: 3px 7px; border:1px solid white; border-radius: 5px; background-color: rgba(1,1,1,0); }
.sosmed_icon .col-md-3 p a:hover { background-color: orange;}

.slider_content { position: absolute; z-index: 10; }
.slider_content h1 { color: white; }

#slider_text {}
#slider_text h1 { margin-top: -400px; font-size: 50px; }
#slider_text p { color: white; }
#slider_text h6 a { color: white; font-weight: normal; padding: 5px 20px; border:1px solid white; border-radius: 15px; }
#slider_text h6 a:hover { color: orange;  }

.orange_text { color: orange; }

.tbl_tender th { font-weight: normal; font-style: italic; }

.cctv_icon {
    margin-top: -24px;
    position: absolute;
    left: -100px;
    margin-left: 20px;
    z-index: 999;
}

.cctv_icon.fixed_cctv_icon {
    margin-top: 0;
    position: fixed;
    left: 0;
    top: 80px;
    margin-left: 20px;
}

.text_modal1 {
    position: absolute;
    margin-left: 15%;
    margin-top: 37%;
}

.text_modal1 h2 { font-size: 50px; line-height: 80%;}
.text_modal1 p { color: black }
.text_modal1 h6  {}
.text_modal1 h6 a { color: black; padding: 6px 25px; border: 1px solid orange; font-weight: bold; font-size: 13px; }
.text_modal1 h6 a:hover { background-color: orange; }

#carouselExampleIndicators .carousel-indicators {
    margin: 0 9%;
    top: 0;
    margin-top: 300px;
    right: auto;
    height: 20px;
    transform: rotate(90deg);
}

#carousel_btn_rotate {

    transform: rotate(90deg);
}

#carouselExampleIndicators .carousel-indicators li {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 12px;
    height: 12px;
    margin-right: 10px;
    text-indent: -999px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    border: 1px solid #FFF;
    display: block;
    clear: both;
}

#carouselExampleIndicators .carousel-indicators li.active {
    background-color: #FFF;
}



/*Tambahan baru 2018 12 12 */
.news_page_link {  }
    .news_page_link a { padding: 10px 20px; background-color: #3d3d3d; color: white; margin: 2px; font-size: 13px; }
    .news_page_link a:hover {background-color: orange; }
    #aktif { background-color: color;  }


.banner_section_wwtp {

    background: url(../images/banner_wtp.jpg) no-repeat 0px 0px;
        background-size: auto auto;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 50vw;
    position: relative;
    z-index: 0;
    font-size: 50px; font-size: 50px;
}

#popup_vendor {
    position: absolute;
    top: 0;
    margin-top: 50px;
    width: 200px;
    right: 0;
    border-radius: 7px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
    overflow: hidden;
}

#popup_vendor h6 {
    padding: 15px;
    background-color: #DDD;
    margin-bottom: 0;
}

#popup_vendor ul {
    padding: 20px;
    background-color: #FFF;
    margin-top: 0;
}

#popup_vendor h6 img {
    float: left;
    margin-top: 0;
    width: 50px;
}

#popup_vendor li {
    margin-left : 0 !important;
}

#popup_vendor li a {
    text-align: left;
    letter-spacing: auto;
    color: #333;
}

#popup_vendor li a i {
    float: left;
    width: 20px;
    text-align: center;
    margin-top: 5px;
    margin-right: 10px;
}

.popup_vendor_name {
    display: block;
    padding-top: 13px;
    text-align: left;
    padding-left: 10px;
    float: right;
    width: 120px;
}

.side_menu_bar span.profile_pict {
    width: 150px;
    display: inline-block;
    background: #000;
    position: relative;
    max-height: 150px;
    margin-top: 50px;
    cursor: pointer;
}

.side_menu_bar span.profile_pict span {
    position: absolute;
    width: 150px;
    text-align: center;
    color: white;
    margin-top: 65px;
    z-index: 9;
    display: none;
}

.side_menu_bar span.profile_pict img {
    margin-top: 0px !important;
    width: 150px;
    height: 150px;

}

.side_menu_bar span.profile_pict:hover span {
    display: block;
}

.side_menu_bar span.profile_pict:hover img {
    opacity: 0.3;
}

.left_menu_mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    margin-bottom: 70px;
    margin-left: 20px;
    z-index: 999;
    display: none;
}

.left_menu_mobile i.main_left_icon {
    display: block;
    float: left;
    position: absolute;
    background: orange;
    padding: 18px 0 0 0;
    height: 50px;
    width: 50px;
    text-align: center;
    border-radius: 30px;
    color: white;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

.left_menu_mobile .left_menu_mobile_cont {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    height: 0;
    opacity: 0;
    overflow:hidden;
    position: absolute;
    margin-bottom: 20px;
    width: 150px;
    bottom: 0;
    background: white;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid #CCC;
    border-radius: 5px;
}

.left_menu_mobile .left_menu_mobile_cont.active {
    height: auto;
    opacity: 1;
}

.left_menu_mobile .left_menu_mobile_cont a {
    color: #333;
    font-size: 14px;
    display: block;
    padding: 8px 10px;
    border-bottom: #EEE 1px solid;
}

.left_menu_mobile .left_menu_mobile_cont a.left_menu_mobile_active, .left_menu_mobile .left_menu_mobile_cont a:hover {
    color: white;
    background-color: orange;
}

@media screen and (max-width: 900px){

    #menu-toggle {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }

    ul.nav-honey li a {
        color: white !important;
    }
}

@media screen and (max-width: 500px){

    .product_feature_right {
        margin-top: 40px;
    }

    .kontak_left {
        margin-bottom: 80px;
    }

    #news .section_2_image {
        width: 100%;
        max-width: none;
        margin: 0 0 40px 0;
        float: none;
    }

    .banner_section_news_detail {
        height: 50vw !important;
    }

    .col-md-5ths {
        width: 100%;
        float: left;
    }

    div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter {
        text-align: left;
    }

    .pager_scroll {
        margin-top: -60px !important;
    }

    .social_banner {
        display: none;
    }

    .carousel-indicators {
        display: none !important;
    }

    .left_menu_mobile {
        display: block;
    }

    .nav-honey ul li {
        margin-left: 0;
    }

    .main-header2 .navShadow {
        background-color: white !important;
    }

    .dashboard_content_zone {
        padding: 60px 20px 20px 20px !important;
    }

    .help_form {
        width : 93% !important;
    }

    .banner_section_news .page_title {
        padding: 0 !important;
    }

    .banner_section_news .page_title hr {
        margin-top: 0;
    }

    .sv_product_line {
        padding: 0 15px !important;
    }

}

.ictel_f_link, .product_f_link {
    margin-bottom: 50px;
}

.pager_scroll {
    margin-top: -80px;
    position: absolute;
}

.sosmed_icon {
    text-align: center;
}


.sosmed_icon a:first-child {
    margin-left: 0;
}

.sosmed_icon a {
    margin-left: 15px;
    display: inline-block;
    border: 1px solid #FFF;
    border-radius: 5px;
    width: 45px;
    text-align: center;
    height: 45px;
    padding-top: 6px;
    font-size: 20px;
    color: white;
    padding-top: 6px;
}

.sosmed_icon a:hover {
    color: orange;
    border-color: orange;
}

.section_2_image {
    width: 35%;
    max-width: 350px;
    margin: 0 40px 40px 0;
    float: left;
}

.product_feature_content {
    color: white;
}

.product_feature_content * {
    color: white;
}