@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);

body,

html {

    -webkit-font-smoothing: antialiased !important;

    -moz-osx-font-smoothing: grayscale;

    overflow-y: auto;

    overflow-x: hidden;

    font-family: 'Lato', sans-serif;

    color: #6f6f6f;

}

::-webkit-scrollbar { width: 5px;  }/* for vertical scrollbars */

::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); }

::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5); }



@media (min-width: 1200px) { 

    .container { width: 1100px }

}

h1 {

    font-weight: 900;

    text-transform: uppercase;

}

h1 small { text-transform: lowercase }

h2 {

    line-height: 24px;

    font-weight: 300;

}

h5 { font-size: 16px }

p { font-size: 14px }

a {

    color: inherit;

    transition: all 0.5s;

}

a:hover,

a:focus {

    text-decoration: none;

    color: #239433;

}

.highlight { color:#FF6600; }

.clearfix:after {

    visibility: hidden;

    display: block;

    font-size: 0;

    content: " ";

    clear: both;

    height: 0;

}

.clearfix { display: inline-block }

* html .clearfix { height: 1% }

.clearfix { display: block }

/* Navigation */

#tf-menu {
    margin-bottom: 0;
    background-color:  #239433;
    padding: 5px 0;
    height: auto;
    border-bottom: 8px solid #FF6600;
}

.navbar-brand{

	background:url(../img/logo_kecil_5935.png) no-repeat;

	margin-top:0px;

    height:59px;

    width: 35px;

}

.navbar-brand { padding: 12px 15px }

.navbar-nav > li > a {

    font-size: 13px;

    font-weight: 700;

    padding: 0px 0px;

    margin: 0px 10px;

    text-transform: uppercase;

    transition: all 0.5s;

}

.navbar-default .navbar-nav > li > a {

	color:#fff;

}

.navbar-default .navbar-nav > li > a.active,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #fff;
}



ul.nav.navbar-nav>li>.active{

    font-weight     : 400;

 }

ul.nav.navbar-nav li a:hover,

ul.nav.navbar-nav li a:focus {

    background  : transparent;

    }

.navbar-default .navbar-nav > .active > a,

.navbar-default .navbar-nav > .active > a:hover,

.navbar-default .navbar-nav > .active > a:focus{

	background:none;

}



.navbar-default .navbar-toggle { border-color: transparent }

.navbar-default .navbar-toggle:hover,

.navbar-default .navbar-toggle:focus { background-color: #FFF; }

.navbar-default .navbar-toggle:hover>.navbar-default .navbar-toggle .icon-bar,

.navbar-default .navbar-toggle:focus>.navbar-default .navbar-toggle .icon-bar { color: #FFF; }





.navbar-nav > li > .dropdown-menu {

    border-top-left-radius          : 0;

    border-top-right-radius         : 0;

    left                            : 0px;

    padding                         : 5px 0 0 0;

    background                      : transparent;

    border-radius                   : 0 0 0 0; 

    -webkit-box-shadow              : 0 0 0 #000000;

    -moz-box-shadow                 : 0 0 0 #000000;

    -ms-box-shadow                  : 0 0 0 #000000;

    -o-box-shadow                   : 0 0 0 #000000;

    box-shadow                      : 0 0 0 #000000;

    border-width                    : 0;

    



}









.navbar-nav > li > .dropdown-menu li {



    background          : #ffffff;

    border-width        : 0 1px 1px 1px; 

    border-style        :solid;

    border-color        : #eeeeee;

    -webkit-box-shadow  : 0 1px 3px #ececec;

    -moz-box-shadow     : 0 1px 3px #ececec;

    -ms-box-shadow      : 0 1px 3px #ececec;

    -o-box-shadow       : 0 1px 3px #ececec;

    box-shadow          : 0 1px 3px #ececec;

    



}



.navbar-nav > li > .dropdown-menu li a{



    font-size       : 12px;

    padding         : 8px 15px;

    color           : #626262;

    letter-spacing  : 1px;

	

}





.fa.fa-times{

    cursor     : pointer;

}





/* Header Page */

#tf-header {

    padding: 40px 0;

    background:url(../img/bg_header.jpg);

    margin-top: 70px;

    color: #ffffff;

}

#tf-header .breadcrumb {

    padding: 8px 15px;

    margin-bottom: 20px;

    list-style: none;

    background-color: transparent;

    border-radius: 4px;

    margin-left: -10px;

    margin-top: -10px;

}

#tf-header .breadcrumb > li + li:before {

    padding: 0 5px;

    color: #FFF;

    content: "/\00a0";

}

#tf-header .breadcrumb > li a { color: #ffffff }

/* Home Style  */

#tf-home {

    background:url(../img/home_background.jpg);

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    background-repeat: no-repeat;

    color: #cfcfcf;

}

#tf-home .overlay {

    background: -moz-linear-gradient(top,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */

    background: linear-gradient(to bottom,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */

    padding: 0 0 10% 0;

    background-attachment: fixed;

}

#tf-home .content-heading { margin-top: 120px; }
#tf-home h1 { color: #fff; text-transform:none; font-size:44px; font-family:"Times New Roman", Times, serif; text-shadow:0px 0px 5px #000;}

.content-heading p.lead { margin-bottom: 80px; font-size:74px; font-weight:bold; }

.yellow { color: #FC0; }

/* BUTTON */

.myButton {

	-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;

	-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;

	box-shadow:inset 0px 1px 0px 0px #54a3f7;

	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));

	background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);

	background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);

	background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);

	background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);

	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);

	background-color:#007dc1;

	-moz-border-radius:8px;

	-webkit-border-radius:8px;

	border-radius:8px;

	border:3px solid #124d77;

	display:inline-block;

	cursor:pointer;

	color:#ffffff;

	font-family:Arial;

	font-size:22px;

	font-weight:bold;

	padding:18px 54px;

	text-decoration:none;

	text-shadow:0px 1px 0px #154682;

}

.myButton:hover {

	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));

	background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);

	background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);

	background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);

	background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);

	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);

	background-color:#0061a7;

	color:#fff;

}

.myButton:active {

	position:relative;

	top:1px;

}





a.goto-btn:hover {

    color: #ffffff;

    border-bottom: 2px solid #239433;

}

/* Home Section Style 2 - With Video*/

#tf-home.video .overlay {

    padding: 0;

    padding-top: 10%;

}

.img-wrapper { position: relative }

.img-wrapper img.img-responsive { margin: 0 auto !important }

.img-wrapper i.fa {

    position: absolute;

    z-index: 10;

    top: 50%;

    font-size: 25px;

    background: rgba(32, 22, 22, 0.29);

    padding: 18px 23px;

    height: 60px;

    width: 60px;

    text-align: center;

    border-radius: 50%;

    color: #ffffff;

    margin-left: -30px;

    transition: all 0.3s;

}

.img-wrapper i.fa:hover { background: #ffcc33 }

/* Home Section Style 3 - Slider*/

#tf-home.slider { background: none }

#tf-home.slider .overlay { padding: 0 }

.carousel-caption {

    position: absolute;

    right: 15%;

    top: 28%;

    bottom: auto;

    left: 15%;

    z-index: 10;

    padding-top: 20px;

    padding-bottom: 0;

    color: #fff;

    text-align: center;

    text-shadow: none;

}

.carousel-indicators li {

    display: inline-block;

    width: 12px;

    height: 12px;

    margin: 1px;

    text-indent: -999px;

    cursor: pointer;

    background-color: rgba(0, 0, 0, 0);

    border: 1px solid #fff;

    border-radius: 10px;

}

.carousel-indicators {

    position: absolute;

    bottom: 60px;

    left: 50%;

    z-index: 15;

    width: 60%;

    padding-left: 0;

    margin-left: -30%;

    text-align: center;

    list-style: none;

}

.carousel-indicators .active {

    width: 14px;

    height: 14px;

    margin: 0;

    background-color: #239433;

}

.carousel-fade .carousel-inner .item {

    opacity: 0;

    transition-property: opacity;

}

.carousel-fade .carousel-inner .active { opacity: 1 }

.carousel-fade .carousel-inner .active.left,

.carousel-fade .carousel-inner .active.right {

    left: 0;

    opacity: 0;

    z-index: 1;

}

.carousel-fade .carousel-inner .next.left,

.carousel-fade .carousel-inner .prev.right { opacity: 1 }

.carousel-fade .carousel-control { z-index: 2 }

/* Home Section Style 4 - App Header Style*/

#tf-home.app .overlay { padding: 10% 0 5% 0 }

#tf-home.app {background: url(../img/bg/02.jpg);}

a.goto-btn { margin-right: 30px }

.ipad-wrapper .app-wrap {

    position: relative;

    width: 395px;

}

.app-wrap {

    position: absolute;

    background: url(../img/header4.png);

    width: 395px;

    height: 540px;

    background-repeat: no-repeat;

    z-index: 2;

    left: 5%;

}

#owl-demo .item img {

    position: relative;

    width: 305px;

    height: auto;

    left: 12%;

    margin-top: 46px;

    z-index: -1;

}

.app .content-heading.text-left { padding: 15% 0 }

#tf-home.app .owl-theme .owl-controls .owl-page span {

    width: 15px;

    height: 15px;

    margin: 5px;

    background: #ffffff !important;

    border: 2px solid transparent;

    opacity: 1;

}

#tf-home.app .owl-theme .owl-controls {

    margin-top: 60px;

    text-align: center;

}

#tf-home.app .owl-theme .owl-controls .owl-page.active span,

#tf-home.app .owl-theme .owl-controls.clickable .owl-page:hover span { border: 2px solid #FFCC33 }



/* Home Parallax Effect */

.bcg {

  background-position: center center;

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

  height: 100%;

  width: 100%;

}



#tf-home.parallax .bcg { background-image:url('../img/bg/slider03.jpg'); }

.parallax  .content-heading{

    padding: 20% 0;

    text-align: center;

}

/*Section */

#tf-about {

   /* background-color: #FF6600;*/

	background:url(../img/sketsa-02.jpg);

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    background-repeat: no-repeat;

	

    padding: 2% 0;

    color: #ffffff;

    text-align: center;

}



#tf-partners {

    background-color: #239433;

    padding: 2% 0;

    color: #ffffff;

    text-align: center;

	

}



#tf-partner {

    background-color: #239433;

    padding: 2% 0;

    color: #ffffff;

    text-align: center;

	

}

#tf-about img.intro-logo {

    margin: 0 auto;

    margin-bottom: 30px;

}

/* Service Section */

#tf-services { padding: 10px 0 ;

background:url(../img/home_background.jpg);

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    background-repeat: no-repeat;

	color: #000000;

}

.section-header {

    padding: 20px 0;

    text-align: center;

}

.section-header h2 { text-transform: uppercase }

.section-header h5 { letter-spacing: 1px }

.fancy {

    line-height: 0.5;

    text-align: center;

    margin-bottom: 10px;

    margin-top: 20px;

}

.fancy span {

    display: inline-block;

    position: relative;

}

.fancy span:before,

.fancy span:after {

    content: "";

    position: absolute;

    height: 5px;

    border-bottom: 1px solid #f1f1f1;

    top: 15px;

    width: 400px;

}

.fancy span:before {

    right: 100%;

    margin-right: 10px;

}

.fancy span:after {

    left: 100%;

    margin-left: 10px;

}

/* service lists */

.service { margin-bottom: 20px }

.service .media-right i.fa {

    text-align: center;

    font-size: 30px;

    background-color:#239433; /*hijau*/

    color: #ffffff;

    padding: 60px 0;

    border-radius: 100%;

    

    margin: 0 10px;

    margin-right: 20px;

    width: 150px;

    height: 150px;

    transition: background-color 0.5s;

}

.service .media-left i.fa {

    text-align: center;

    font-size: 30px;

    background-color: #239433;

    color: #ffffff;

    padding: 25px 0;

    border-radius: 50px;

    

    margin: 0 10px;

    margin-left: 20px;

    width: 82px;

    height: 80px;

    transition: background-color 0.5s;

}

.process:hover i.fa,

.service:hover i.fa { background-color: #333333 }

h4.media-heading {

    margin-top: 0;

    margin-bottom: 5px;

    font-size: 16px;

    font-weight: 400;

    text-transform: uppercase;

    color: #333;

    line-height: 20px;

}

/* About Us */

#tf-about { padding: 10px 0 }

.gray-bg { background-color: #f3f3f3 }

.img-wrap .profile-img {

    position: relative;

    margin-bottom: 40px;

}

.profile-img .social {

    position: absolute;

    z-index: 1;

    bottom: -10px;

    left: 50px;

}

.about-right-content { padding: 40px 0 }

.about-left-content { padding-bottom: 60px }

.about-left-content h2,

.about-left-content h2 small { color: #333 }

.about-left-content h2 small { font-weight: 300 }

ul.social li a.fa {

    background: #FF6600; /*orange*/

    width: 50px;

    height: 50px;

    padding: 15px;

    text-align: center;

    margin-right: -5px;

    font-size: 20px;

    color: #ffffff;

    margin-bottom: 0;

}

ul.social li a.fa:hover { background-color: #333333 }

/* Skills Progress Bar */

.progress {

    height: 12px;

    margin-bottom: 20px;

    overflow: hidden;

    background-color: #999999;

    border-radius: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

}

.progress-bar {

    float: left;

    width: 0;

    height: 100%;

    font-size: 12px;

    line-height: 20px;

    color: #fff;

    text-align: center;

    background-color: #239433;

    -webkit-box-shadow: none;

    box-shadow: none;

    -webkit-transition: width .6s ease;

    -o-transition: width .6s ease;

    transition: width .6s ease;

}

.skills {

    margin-top: 30px;

    padding: 20px 0;

}

.skillset p {

    font-size: 13px;

    margin-bottom: 5px;

}

/* Counter */

#tf-counter {

    border-top: 1px solid #D1D1D1;

    border-bottom: 1px solid #D1D1D1;

}

.facts { padding: 0 }

.facts .count-box { position: relative }

.count-box {

    -webkit-backface-visibility: hidden;

    border-left: 1px solid #d3d3d3;

    padding: 40px 0;

    margin: 0;

    overflow: hidden;

    transition: all 0.5s;

    transform: translateX(0px) translateY(0%);

    -webkit-transform: translateX(0px) translateY(0%);

    -moz-transform: translateX(0px) translateY(0%);

    -ms-transform: translateX(0px) translateY(0%);

    -o-transform: translateX(0px) translateY(0%);

}

/*.count-box .hover-bg{ 

  position: absolute;

  display: block;

  background-color: #239433;

  width: 100%;

  height: 100%;

  z-index: -1;

  transition: all 0.5s;

  transform: translateX(0px) translateY(150px);

  -webkit-transform: translateX(0px) translateY(150px);

  -ms-transform: translateX(0px) translateY(150px);

    -o-transform: translateX(0px) translateY(150px);

    opacity: 0;

}

.count-box:hover .hover-bg{

  background: #239433;

  color: #fff !important;

  transform: translateX(0px) translateY(-40px);

    -webkit-transform: translateX(0px) translateY(-40px);

    -moz-transform: translateX(0px) translateY(-40px);

    -ms-transform: translateX(0px) translateY(-40px);

    -o-transform: translateX(0px) translateY(-40px);

    opacity: 1;

}*/

.count-box:hover,

.count-box:hover > i.fa { color: #ffffff }

.count-box:hover {

    -webkit-backface-visibility: hidden;

    background-color: #239433;

}

.counter i.fa {

    font-size: 40px;

    color: #239433;

}

.count-box.last { border-right: 1px solid #d3d3d3 }

/* Portfolio / Works Sections */





#tf-team { 

	/*background-color:#ffffff;*/ padding: 60px 0; 

	background:url(../img/home_background.jpg);

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    background-repeat: no-repeat;

	color: #ffffff;

}

#team .item {

    padding: 30px 0px;

    margin: 5px 20px;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

}



#tf-teams { background-color:#ffffff; padding: 60px 0 }

#teams .item {

    padding: 30px 0px;

    margin: 5px 20px;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

}



.item .hover-bg {

    position: relative;

    overflow: hidden;

}



.hover-bg .hover-text {

    position: absolute;

    display: block;

    bottom: 0;

    width: 100%;

    height: 25%;

    padding: 20px;

    color: #ffffff;

    transition: all 0.8s;

    -webkit-transition: all 08s;

    -moz-transition: all 0.8s;

    -o-transition: all 0.8s;

}

.hover-bg .hover-text.on { opacity: 1 }

.hover-bg .hover-text.off {

    transition: all 0.3s;

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -o-transition: all 0.3s;

    -webkit-transform: translateX(100%) translateY(-90%);

    transform: translateX(100%) translateY(-90%);

    opacity: 1;

    background: rgba(0, 0, 0, 0.70);

}

.hover-bg:hover .hover-text.off {

    -webkit-transform: translateX(0%) translateY(-90%);

    transform: translateX(0%)  translateY(-90%);

    opacity: 1;

}

.owl-theme .owl-controls .owl-page span {

    width: 15px;

    height: 15px;

    margin: 5px;

    background: #bababa;

}

/* Why Us or Features Section */

#tf-features,

#feature { padding: 60px 0 }

.features-content { padding: 0 30px 0 }

.features-content h4 {

    text-transform: uppercase;

    margin-bottom: 20px;

    color: #333333;

}

.nav.nav-pills > li > a {

    position: relative;

    display: block;

    background-color: #ffffff;

    padding: 25px;

    border-bottom: 3px solid #cccccc;

    text-transform: uppercase;

    margin-bottom: 5px;

}

.nav.nav-pills > li > a small {

    text-transform: lowercase;

    font-style: italic;

}

.nav.nav-pills > li > a:hover,

.nav-pills > li.active > a,

.nav-pills > li.active > a:hover,

.nav-pills > li.active > a:focus {

    color: #fff;

    background-color: #239433;

    padding: 25px;

    border-bottom: 3px solid #06C;

}

.nav-pills > li > a { border-radius: 4px }

ul.features li span.fa {

    font-size: 35px;

    vertical-align: middle;

    margin-right: 20px;

    float: left;

    clear: both;

    margin-top: 5px;

}

/* Portfolio or works blocks */

#tf-works { padding: 60px 0 }

ul.cat { margin: 30px 0 }

ul.cat li a {

    background: inherit;

    border: 1px solid;

    padding: 5px 10px;

    border-radius: 3px;

}

ul.cat li a:hover,

ul.cat li a:focus,

ul.cat li a.active {

    background: #f1f1f1;

    border: 1px solid;

    padding: 5px 10px;

    border-radius: 3px;

    color: inherit;

}

.nopadding { padding: 0 }

.box a { margin: 2px }

.box .hover-bg {

    position: relative;

    overflow: hidden;

}

.box .hover-bg .hover-text {

    height: 100%;

    bottom: 0;

    -webkit-transform: translateX(0%) translateY(0%);

    transform: translateX(0%) translateY(0%);

    background: transparent;

}

.box:hover .hover-bg .hover-text { background-color: rgba(1, 1, 1, 0.5) }

.box .hover-bg:hover .hover-text.off {

    -webkit-transform: translateX(0%) translateY(0%);

    transform: translateX(0%)  translateY(0%);

    opacity: 1;

}

.box .hover-text i.fa {

    font-size: 20px;

    background: #239433;

    padding: 13px;

    position: relative;

    top: 40%;

    border-radius: 50%;

    width: 45px;

    height: 45px;

    transition: all 0.5s;

}

.box .hover-text i.fa:hover { background: #333333 }

.box .hover-text i.fa.fa-expand {

    

    -webkit-transform: translateX(-400%) translateY(0%);

    transform: translateX(-400%)  translateY(0%);

    opacity: 0;

    transition: all 0.5s;

}

.box:hover .hover-text i.fa.fa-expand {

    -webkit-transform: translateX(0%) translateY(0%);

    transform: translateX(0%)  translateY(0%);

    opacity: 1;

}

.box .hover-text i.fa.fa-chain {

    

    -webkit-transform: translateX(400%) translateY(0%);

    transform: translateX(400%)  translateY(0%);

    opacity: 0;

    transition: all 0.5s;

}

.box:hover .hover-text i.fa.fa-chain {

    -webkit-transform: translateX(0%) translateY(0%);

    transform: translateX(0%)  translateY(0%);

    opacity: 1;

}

/* Style 2 - Not Fullwidth */

#itemsWorkThree .box,

#itemsWorkTwo .box { margin-bottom: 30px }

#itemsWorkTwo .hover-bg .hover-text { padding: 30% 0 }

#itemsWorkTwo .box:hover .hover-bg .hover-text {

    background-color: rgba(255, 223, 125, 0.70);

    border: 10px solid rgba(185, 156, 72, 0.80);

}

#itemsWorkTwo .box .hover-bg .hover-text h5 small {

    text-transform: capitalize;

    color: #000000;

}

#itemsWorkTwo .box .hover-bg .hover-text h5 {

    font-weight: 700;

    text-transform: uppercase;

    color: #000000;

    -webkit-transform: translateX(0%) translateY(400%);

    transform: translateX(0%)  translateY(400%);

    opacity: 0;

    transition: all 0.5s;

}

#itemsWorkTwo .box:hover .hover-bg .hover-text.off h5 {

    -webkit-transform: translateX(0%) translateY(0%);

    transform: translateX(0%)  translateY(0%);

    opacity: 1;

}

#itemsWorkTwo .box .hover-text i.fa {

    font-size: 20px;

    background: transparent;

    padding: 13px;

    position: relative;

    top: 40%;

    border-radius: 50%;

    width: 45px;

    height: 45px;

    transition: all 0.5s;

    border: 1px solid #ffffff;

}

#itemsWorkTwo .box .hover-text i.fa:hover { background: #333333 }

/* Portfolio Style #3 */

#itemsWorkThree .box h5 {

    border: 1px solid #ddd;

    padding: 10px 0;

    margin: 0;

}

/* Isotope Filter */

.isotope-item { z-index: 2 }

.isotope-hidden.isotope-item { z-index: 1 }

.isotope,

.isotope .isotope-item {

    /* change duration value to whatever you like */

    -webkit-transition-duration: 0.8s;

    -moz-transition-duration: 0.8s;

    transition-duration: 0.8s;

}

.isotope-item {

    margin-right: -1px;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}

.isotope {

    -webkit-transition-property: height, width;

    -moz-transition-property: height, width;

    transition-property: height, width;

}

.isotope .isotope-item {

    -webkit-transition-property: -webkit-transform, opacity;

    -moz-transition-property: -moz-transform, opacity;

    transition-property: transform, opacity;

}

.nivo-lightbox-theme-default .nivo-lightbox-title {

    font-size: 14px;

    background: #f1f1f1;

    border: 1px solid #333;

    letter-spacing: 2px;

    color: #333;

    text-transform: uppercase;

    letter-spacing: 2px;

    padding: 10px 35px;

    border-radius: 2px;

}

.nivo-lightbox-theme-default.nivo-lightbox-overlay {

    background: #ffffff !important;

    background: rgba(255, 255, 255, 1) !important;

}

.nivo-lightbox-theme-default .nivo-lightbox-nav,

.nivo-lightbox-theme-default .nivo-lightbox-close { opacity: 1 }

.nivo-lightbox-error {

    color: #C59A6D !important;

    text-shadow: 0 1px 1px rgba(0, 0, 0, 0) !important;

}

.nivo-lightbox-theme-default .nivo-lightbox-image img {

    background: #fff;

    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.4);

    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.4);

    box-shadow: 0px 1px 1px rgba(0,0,0,0.4);

    border-top: 4px solid #239433;

}

/* Single Portfolio Detail */

#work-detail-one,

#work-detail-two,

#work-detail-three { padding: 60px 0 }

.work-detail .dl-horizontal dt {

    text-align: left;

    margin-bottom: 10px;

}

.work-related-thumb { margin-bottom: 30px }

.work-related-thumb .img-thumbnail {

    display: inline-block;

    max-width: 100%;

    height: auto;

    padding: 0;

    line-height: 1.42857143;

    background-color: transparent;

    border: 1px solid transparent;

    border-radius: 0;

    -webkit-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

}

.work-related-thumb .img-thumbnail:hover { opacity: 0.8 }

/* Process Section */

#tf-process { padding: 60px 0 }

.process i.fa {

    text-align: center;

    font-size: 30px;

    background-color: #239433;

    color: #ffffff;

    padding: 25px 0;

    border: 4px solid #ffffff;

    border-radius: 50px;

    

    margin: 0 10px;

    margin-right: 20px;

    width: 92px;

    height: 90px;

    transition: background-color 0.5s;

}

#tf-process .gray-bg { position: relative }

.gray-bg .vline {

    position: absolute;

    height: 100%;

    padding: 5px;

    border-left: 3px solid #ffffff;

    left: 20%;

}

#process { padding: 60px 0 20px 0 }

.process { margin-bottom: 40px }

/* Pricing Section */

#tf-pricing { padding: 60px 0 }

.price h1 { font-size: 50px }

.price { text-align: center }

.price.panel-default { border-color: #333 }

.price.panel-default > .panel-heading {

    font-size: 20px;

    text-transform: uppercase;

    font-weight: 600;

    color: #FFF;

    background-color: #333333;

    border-color: inherit;

}

.price .panel-heading { padding: 30px 15px }

.price .panel-body { border-bottom: 1px solid }

.price ul.list-unstyled { padding: 20px }

.price ul.list-unstyled li { padding: 10px 0 }

.price ul.list-unstyled li small { margin-top: -10px }

/* Featured */

.price.featured {

    -moz-box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.31);

    -webkit-box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.31);

    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.31);

}

.price.featured.panel-default {

    border-color: #239433;

    background-color: #ffffff;

    margin-top: -20px;

    position: relative;

    z-index: 1;

    margin-left: -5px;

    margin-right: -5px;

}

.price.featured.panel-default { border-color: #ffcc33 }

.price.featured.panel-default > .panel-heading { background-color: #ffcc33 }

.featured .panel-body { margin-top: 20px }

.featured .panel-body,

.featured.panel-default > .panel-heading { border-color: #ffcc33 }

.featured .tf-btn { margin-top: 20px }

.btn:focus,

.btn:active:focus,

.btn.active:focus,

.btn.focus,

.btn:active.focus,

.btn.active.focus {

    outline: 0;

    outline: 0;

    outline-offset: 0;

}

.btn:active,

.btn.active {

    background-image: none;

    outline: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

}

.tf-btn {

    font-size: 12px;

    word-spacing: 2px;

    font-weight: 700;

    padding: 10px 20px;

    background-color: #333333;

    text-transform: uppercase;

    border-color: #333333;

    transition: all 0.5s;

}

.tf-btn:focus,

.tf-btn:hover {

    background-color: #333333;

    border-color: #239433;

}

.color {

    background-color: #239433;

    border-color: #239433;

}

.color:focus,

.color:hover {

    border-color: #333333;

    background-color: #239433;

}

/* Blog Section */

#tf-blog,

#blog-post { 

	padding: 10px 0;

	background:url(../img/home_background.jpg);

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    background-repeat: no-repeat;

    color: #000000;

}

#blog-post a.btn { margin: auto 0 }

.post-wrap { position: relative }

.media.post {

    background: #fff;

    padding: 10px;

}

.post-wrap {

    position: relative;

    margin-bottom: 30px;

    transition: all 0.5s;

}

.post-meta {

    border-top: 1px solid #ebebeb;

    background-color: #ffffff;

    padding: 5px 10px;

    height: auto;

    position: relative;

    min-height: 35px;

}

ul.metas li:after {

    content: ' / ';

    margin-right: 3px;

    margin-left: 3px;

}

ul.metas li:last-child:after { content: ' ' }

ul.metas li a { color: #239433;  }

.meta-detail {

    background: #f4f4f4;

    border-radius: 3px;

    padding: 2px;

}



#tf-foto { 

	padding: 10px 0; 

	background:url(../img/home_background.jpg);

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    background-repeat: no-repeat;

    color: #ffffff;

}



/*fasilities*/

#tf-facilities { 

	padding: 10px 0; 

	background:url(../img/home_background.jpg);

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    background-repeat: no-repeat;

    color: #ffffff;

}



/*companies*/

#tf-companies { 

	padding: 10px 0;

	background:url(../img/home_background.jpg);

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    background-repeat: no-repeat;

    color: #000000;

}



/*career*/

#tf-career { 

	padding: 10px 0;

	background:url(../img/home_background.jpg);

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    background-repeat: no-repeat;

    color: #000000;

	 

	 }





/* Contact Section */

/*********************************

/* Map Section

**********************************/

#tf-contact { 

	

	

	padding: 10px 0; 

	background:url(../img/home_background.jpg);

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    background-repeat: no-repeat;

    color:#000000;

	

	

}

#map {

    position: relative;

    width: 100%;

    height: 400px;

}

.contact-detail {

    text-align: center;

    margin: 10px 0;

}

.contact-detail i.fa {

    text-align: center;

    font-size: 20px;

    background-color:#FF6600;

    color: #ffffff;

    padding: 10px 0;

    border-radius: 50px;

    

    margin: 0 0px;

    margin-right: 20px;

    width: 42px;

    height: 40px;

    transition: background-color 0.5s;

}

.contact-detail:hover i.fa { background-color: #333333 }

form#contact-form { padding: 40px 0 }

.contact form#contact-form {padding: 0}

.form-control:focus {

    border-color: inherit;

    outline: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

}

.form-control {

    display: block;

    width: 100%;

    height: 44px;

    padding: 10px 12px;

    font-size: 14px;

    line-height: 1.42857143;

    color: #555;

    background-color: #fff;

    background-image: none;

    border: 1px solid #ccc;

    border-radius: 4px;

    -webkit-box-shadow: none;

    box-shadow: none;

    -webkit-transition: none;

    -o-transition: none;

    transition: none;

}

p.help-block.text-danger ul li {

    display: block;

    margin-left: -20px;

    color: #239433;

}

#success .alert-danger {

    color: #239433;

    background-color: #FDFDFD;

    border-color: #239433;

    margin-bottom: 10px;

}

/* Footer */

#tf-footer {

    padding: 3% 0 2% 0;

    background-color: #239433;

    color: #ffffff;

}

ul.social li a i {

    font-size: 18px;

    background: transparent;

    width: 32px;

    height: 32px;

    padding: 7px 0;

    text-align: center;

    border-radius: 50%;

    

    border: 1px solid transparent;

    color: #ffffff;

    transition: all 0.5s;

}

ul.social li a i:hover { border-color: #ffffff }

/* Blog Page */

.blog .media.post {

    background: #fff;

    padding: 10px;

    border: 1px solid #E9E9E9;

    border-bottom-color: transparent;

    border-top-left-radius: 5px;

    border-top-right-radius: 5px;

}

.blog .post-meta {

    border-top: 1px solid #ebebeb;

    background-color: #ffffff;

    padding: 5px 10px;

    height: auto;

    position: relative;

    min-height: 35px;

    border: 1px solid #ebebeb;

    border-bottom-left-radius: 5px;

    border-bottom-right-radius: 5px;

}

.pagination > li > a,

.pagination > li > span {

    position: relative;

    float: left;

    padding: 6px 12px;

    margin-left: 0;

    line-height: 1.42857143;

    color: #FFFFFF;

    text-decoration: none;

    background-color: #239433;

    border: 1px solid #239433;

    margin: 3px 3px;

    font-weight: 700;

    text-transform: uppercase;

    border-radius: 5px;

}

.pagination > li > a.active,

.pagination > li > a:hover,

.pagination > li > span:hover,

.pagination > li > a:focus,

.pagination > li > span:focus {

    color: #FFFFFF;

    background-color: #ddab15;

    border-color: #ddab15;

}

/* Sidebar */

.widget {

    margin-bottom: 40px;

    padding: 0 20px;

}

.comment h4,

.widget h4,

h4.text-uppercase {

    font-weight: 300;

    color: #239433;

}

.comment h4 span.comments { color: #333333 }

/* Search */

button.btn.btn-default {

    padding: 11px 15px;

    color: #ffffff;

    background: #239433;

}

/* Categories and Archive Widget */

ul.bullet-lists { margin-top: 20px }

ul.list-unstyled.bullet-lists li span.fa.fa-circle {

    font-size: 8px;

    vertical-align: middle;

    margin-right: 10px;

    color: #239433;

}

ul.list-unstyled.bullet-lists li { padding: 5px 0 }

ul.list-unstyled.bullet-lists li:hover { color: #FFCC33 }

/* Post Tab */

.post-tab .nav-tabs > li > a {

    margin-right: -1px;

    line-height: 1.42857143;

    border: 1px solid #ddd;

    border-radius: 0px 0px 0 0;

}

.post-tab .list-group-item:first-child {

    

    

    margin-top: -1px;

}

.post-tab .nav-tabs > li > a:hover,

.post-tab .nav-tabs > li > a:focus {

    color: #FFF;

    background-color: #239433;

    border: 1px solid #ddd;

    border-bottom-color: transparent;

}

/* Tags */

ul.list-inline.bullet-lists li a { color: inherit }

ul.list-inline.bullet-lists li {

    background: #F8F8F8;

    padding: 5px 10px;

    margin-bottom: 5px;

    margin-right: 2px;

    border: 1px solid #F4F4F4;

    border-radius: 3px;

    transition: all 0.3s;

}

ul.list-inline.bullet-lists li:hover { background: #FFCC33 }

/* Single Blog Post */

.blog-post .post-wrap img,

.work-detail img.featured { margin: 20px 0 }

ul.meta-tags li a { font-style: italic }

ul.meta-tags li:after { content: ',' }

ul.meta-tags li:last-child:after { content: ' ' }

/* Author Box */

.media.post-author {

    background: #239433;

    padding: 20px;

    margin-top: -1px;

}

.media.post-author a { content: inherit }

.blog-post .post-wrap {

    padding: 20px;

    margin-bottom: 0;

    border: 1px solid #DDDDDD;

    border-top-right-radius: 4px;

    border-top-left-radius: 4px;

}

/* Comment */

.media.comment-block {

    border: 1px solid #DDD;

    padding: 20px;

}

.comment { margin-top: 40px }

.comment form { margin-top: -30px }

.comment input,

.comment textarea { margin-bottom: 15px }







/**/

header .dropdown-menu{

	-webkit-transform-origin: top;

	transform-origin: top;

	-webkit-animation-fill-mode: forwards;  

	animation-fill-mode: forwards; 

	-webkit-transform: scale(1, 0);

	transform: scale(1, 0);

	display: block;

	opacity:0;

	transition: transform 0.5s ease, opacity 0.2s ease;

	-webkit-transition: -webkit-transform 0.5s ease, opacity 0.2s ease;

}

.dropdown-submenu{

	position:relative;

}

header .dropdown-submenu>.dropdown-menu{

	top:0;

	left:100%;

	margin-top:0px;

	margin-left:0px;

}

header .dropdown-submenu:hover>.dropdown-menu{

	display:block; 

	opacity:1;

	-webkit-transform: scale(1, 1);

	transform: scale(1, 1);

	z-index: 1000;

	transition: transform 0.3s ease, opacity 0.2s ease .1s;

	-webkit-transition: -webkit-transform 0.3s ease, opacity 0.2s ease .1s;

}

.dropdown-submenu>a:after{

	display: inline-block;

	content:"\f105";

	margin-top:3px;

	margin-right:-5px;

	float:right;

	font-family: FontAwesome;

	font-style: normal;

	font-weight: normal;

	line-height: 1;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

}

.dropdown-submenu.pull-left{float:none;}

.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

.dropdown-menu li:hover > .sub-menu {

    visibility: visible;

}

 .dropdown:hover > .dropdown-menu {

    display: block;

	opacity: 1;

	z-index: 1000;

	-webkit-transform: scale(1, 1);

	transform: scale(1, 1);

	transition: transform 0.3s ease, opacity 0.2s ease .1s;

	-webkit-transition: -webkit-transform 0.3s ease, opacity 0.2s ease .1s;

}



.main-menu li.current-menu-item > a,.main-menu .nav > li > a:hover{

	color: #fff;

}

 .dropdown-menu {

	min-width: 200px;

	padding: 0;

	margin: 0;

	font-size: 13px;

	background-color: rgba(0,0,0,.9);

	border: none;

	border-radius: 0px;

	-webkit-box-shadow: none;

	box-shadow: none;

	border-left: solid 1px transparent;

	border-right: solid 1px transparent;

}

 .dropdown-menu {

	left: 0;

	right: auto;

}

.dropdown-menu>li>a {

	padding: 110px 20px;

	line-height: 1.428571429;

	color: #b0b0b0;

	white-space: nowrap;

	transition:all .2s;

	-webkit-transition:all .2s;

}

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {

	color: #fff;

	background-color: #46a5e5;

}

header .main-menu-item.sub-menu-left > .dropdown-menu{right:0; left:auto;}

header .main-menu-item.sub-menu-right > .dropdown-menu{left:0; right:auto;}

header .sub-menu-right .dropdown-menu, header .sub-menu-left .sub-menu-right .dropdown-menu{left:100%; right:auto;}

header .sub-menu-left .dropdown-menu{right:100%; left:auto;}

header .sub-menu-right .sub-menu-left .dropdown-menu{right:100%; left:auto;}



/* Menu-top */

.menu-top {

	width:450px;

	height:20px;

	float:right;

	color:#FF9900;

	font-size:x-large; font-weight:bolder;

	font-family:Bernard MT Condensed;

}

.iframe {

	width:560px;

	height:430px;

}



.iframe_detail { 

	width:500px;

	height:290px;

}

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

.navbar-brand{

	margin-left:100px;

}

.menu-top {

	margin-top:8px;

    height:45px;

    width: 240px;

}

.iframe { 

	width:280px;

	height:250px;

}

.iframe_detail { 

	width:235px;

	height:150px;

}

#massage .success{ 

font-size:12px;

}

#massage .error{ 

font-size:12px;

}

/* BUTTON */

.myButton {

	-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;

	-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;

	box-shadow:inset 0px 1px 0px 0px #54a3f7;

	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));

	background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);

	background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);

	background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);

	background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);

	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);

	background-color:#007dc1;

	-moz-border-radius:8px;

	-webkit-border-radius:8px;

	border-radius:8px;

	border:3px solid #124d77;

	display:inline-block;

	cursor:pointer;

	color:#ffffff;

	font-family:Arial;

	font-size:14px;

	font-weight:bold;

	padding:12px 34px;

	text-decoration:none;

	text-shadow:0px 1px 0px #154682;

}

#tf-home h1 {

	padding-top:16px;

}

}

#massage {

	width:100%;

}

#massage .error {	

    color: #D8000C;

    background-color: #FFBABA;

    background-image: url('../img/error.png');

	border: 1px solid;

    margin: 10px 0px;

    padding:15px 10px 15px 50px;

    background-repeat: no-repeat;

    background-position: 10px center;-moz-border-radius:.5em;

	-webkit-border-radius:.5em;

	border-radius:.5em;

}

#massage .success{

    color: #4F8A10;

    background-color: #DFF2BF;

    background-image:url('../img/success.png');

	border: 1px solid;

    margin: 10px 0px;

    padding:15px 10px 15px 50px;

    background-repeat: no-repeat;

    background-position: 10px center;-moz-border-radius:.5em;

	-webkit-border-radius:.5em;

	border-radius:.5em;

}



#massage .warning{ 

    color: #9F6000;

    background-color: #FEEFB3;

    background-image: url('../img/warning.png');

	border: 1px solid;

    margin: 10px 0px;

    padding:15px 10px 15px 50px;

    background-repeat: no-repeat;

    background-position: 10px center;-moz-border-radius:.5em;

	-webkit-border-radius:.5em;

	border-radius:.5em;

}











.ket { font-size:9px;color:#F00;}

.text-hidden {

	border:none;

	color:#FFF;

}