/*Google Font Loaded*/
@import url(http://fonts.googleapis.com/css?family=Roboto:300,100);

/*Body and global Styles*/
body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 300;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased;
}

a {
  color: #3d566e;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
a:hover {
  color: #26303a;
}
.row {
  padding: 80px 0px;
}
.btn {
  border: none;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  text-transform: uppercase;
}
.btn i {
  margin-right: 10px;
}
.btn-common {
  background: #3d566e;
  color: #fff;
}
.btn-common:hover {
  background: #26303a;
  color: #fff;
}
.btn-border,
.btn-common-white:hover {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}
.btn-common-white,
.btn-border:hover {
  background: #fff;
  color: #444;
  border: 1px solid #fff;
}
.section-title {
  text-align: center;
  font-size: 40px;
}
.section-subtitle {
  text-align: center;
  font-weight: 100;
  margin-bottom: 30px;
  position: relative;
  color: #bdc3c7;
}
.section-content{
    margin-bottom:30px;
}
.logo{width:90%; padding:10px 0; }
/*Main Slider Area*/
#carousel-area {
  overflow: hidden;
  background: #2c3e50;
}
#carousel-area .carousel-inner:before {
  background-color: rgba(44, 62, 80, 0.6);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  content: "";
  display: block;
  z-index: 9;
}
#carousel-area .item {
  background-attachment: fixed;
  background-size: 100%;
  background-size: cover;
}
#carousel-area .item .carousel-caption {
  top: 30%;
  right: 10%;
  left: 10%;
  text-shadow: none;
}
#carousel-area .item .carousel-caption h1 {
  font-size: 65px;
  font-weight: 300;
}
#carousel-area .item .carousel-caption h2 {
  font-size: 30px;
  font-weight: 100;
}
#carousel-area .item .carousel-caption .btn {
  padding: 10px 20px;
  margin: 10px 20px;
  font-size: 20px;
}
#carousel-area .carousel-control {
  z-index: 10;
  display: none;
  width: 50px;
  height: 80px;
  top: 50%;
  padding: 10px 5px;
  box-shadow: none;
  background-image: none;
  background-color: rgba(0, 0, 0, 0.5);
}
#carousel-area:hover .carousel-control {
  display: block;
}

/*Nav Bar*/
.navbar {
  margin-bottom: 0;
}
.navbar li {
  color: #d1d1d1;
}
.navbar-default {
  border: none;
  border-radius: 0;
  /*background: rgba(0, 0, 0, 0.8);*/
  background:#37549A;
}
.navbar-default .navbar-brand {
  background: url(../images/logo_text.png) no-repeat;
  width: 170px;
  height: 70px;
}
.navbar-default .navbar-nav li a,
.navbar-default .navbar-nav > li > a:focus {
  font-size: 16px;
  margin: 22px 15px;
  outline: 0;
  color: #d1d1d1;
  padding:15px 0 5px 0;
}
.navbar-default .navbar-nav > .select > a,
.navbar-default .navbar-nav > .select > a:hover,
.navbar-default .navbar-nav > .select > a:focus,
.navbar-default .current {
  background: none;
  padding-bottom: 5px;
  border-bottom: 1px solid #fff;
  color: #fff;
}
.navbar-default .navbar-brand {
  font-size: 55px;
}
.navbar-default .navbar-toggle .icon-bar {
  background: #fff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background: #333;
}
.affix.navbar-default {
  /*background: rgba(0, 0, 0, 0.8);*/
  background:#37549A;
}
.animated-nav li a::before {
  position: absolute;
  overflow: hidden;
  max-width: 0;
  border-bottom: 1px solid #fff;
  padding-bottom: 5px;
  color: #fff;
  content: attr(data-hover);
  -webkit-transition: max-width 0.7s;
  -moz-transition: max-width 0.7s;
  transition: max-width 0.7s;
}
.animated-nav li a:hover::before {
  max-width: 100%;
}
.navbar .to-top,
.navbar .to-bottom {
  display: none;
}
.affix-top .to-bottom {
  display: block !important;
}
.affix .to-top {
  display: block !important;
}
.to-top,
.to-bottom {
  list-style: none;
}
.to-top a,
.to-bottom a {
  padding: 26px 22px;
  line-height: 70px;
  outline: 0;
  color: #fff;
}

/*Common for contact/prtfolio/clients*/
#contact,
#portfolio,
#clients {
  background-color: #3d566e;
  color: #fff;
}

/*About Section*/
#about h2 {
  margin-top: 0;
  font-size: 28px;
}

#about .services-intro h1 span {
  font-weight: 100;
  color: #bdc3c7;
}
#about .services-intro .f-icon {
  font-size: 100px;
  color: #3d566e;
}
#about h3,
#about .srvice {
  color: #3d566e;
}
#about .service {
  background: #3d566e;
  padding: 15px;
  color: #fff;
  margin-bottom: 20px;
}
#about .service .f-icon {
  font-size: 100px;
  color: #fff;
}
#about .service:hover .f-icon {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
#about .service:hover .f-text {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
#about .service:before {
  content: "";
  position: absolute;
  top: 0;
  right: 14px;
  width: 0px;
  height: 0px;
  border-top: 30px solid #ffffff;
  border-left: 30px solid transparent;
}
#about .service:after {
  content: "";
  position: absolute;
  top: 0;
  right: 14px;
  width: 0px;
  height: 0px;
  border-bottom: 30px solid rgba(255, 255, 255, 0.5);
  border-right: 30px solid transparent;
}

/*Why Choose Section*/
#service {
  background: #3d566e;
}
#service h1,
#service h2,
#service i,
#service .why-item-text {
  color: #fff;
}

#service h2 {
  font-weight: 100;
}
#service .rotate-text {
  color: #fff;
  font-size: 60px;
}
#service .rotate {
  background: #fff;
  color: #3d566e;
}
#service .why-item {
  margin-top: 40px;
}
#service .why-item p,
#service .why-item h2 {
  text-align: left;
}
#service .why-item i {
  float: left;
  padding: 20px;
  width: 82px;
  height: 82px;
  border-radius: 100%;
  background: rgba(150, 150, 150, 0.2);
  border: 2px solid #fff;
  margin-right: 20px;
  display:table-cell;
  margin-top:20px;
}
#service .why-item:hover i {
  background: rgba(0, 0, 0, 0.5);
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
#service .why-item-text{
  display:table;
}
#service .service-content
{
    display:table-cell;
    vertical-align:top;
}
#service .why-item-contact {
  margin-top: 30px;
}
#service .why-item-contact .btn {
  margin-top: 20px;
}
#service .why-item-contact .btn:hover i {
  color: #333;
}
/*Portfolio*/
#portfolio {
  background-color: #3d566e;
  /*background-image: url(../images/backgrounds/portfolio-bg.png);*/
}
/*Portfolio Overlay */
.portfolio-item {
  position: relative;
  margin-bottom: 15px;
}
.portfolio-item img {
  width: 100%;
}
.portfolio-item .overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
}
.portfolio-item:hover .overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.8);
  display: block;
}
.portfolio-item i {
  padding: 12px;
  font-size: 20px;
  width: 42px;
  height: 42px;
  border-radius: 0;
}
.portfolio-item .icons .preview {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left:-18px;
  margin-top:-18px;
  color: #fff;
}
.portfolio-item .icons .preview i {
  color: #3d566e;
  background: #fff;
}
/*Testimonial Section*/

#testimonial .row {
  padding-bottom: 100px;
}
#testimonial h2 {
  margin-bottom: 20px;
  font-weight: 100;
color:#000;
}
#testimonial .testimonial {
  margin-bottom: 20px;
}
#testimonial .testimonial img {
  max-width: 80px;
  margin-top: 10px;
}
#testimonial .carousel-indicators {
  margin-bottom: -80px;
}
#testimonial #owl-testimonial .owl-controls .owl-pagination .owl-page{
  background-color: #fff;
  margin: 0 2px;
  border:1px solid #3d566e;
  width: 50px;
  height: 5px;
  border-radius: 0;
}
#testimonial #owl-testimonial .owl-controls .owl-pagination .owl-page.active {
  background-color: #3d566e;
  margin: 0 2px;
  border-color: #3d566e;
  width: 50px;
  height: 5px;
  border-radius: 0;
}
#testimonial #owl-testimonial .owl-controls .owl-pagination .owl-page span{display:none;}
#testimonial .name {
  color: #3d566e;
  font-size: 25px;
  font-weight: 700;
  margin-left: 10px;
}
#testimonial .company {
  color: #3d566e;
  font-size: 15px;
  font-weight: 300;
  padding:0 0 0 10px;
  vertical-align:bottom;
}
#testimonial .testimonial-text {
  padding: 10px 20px 20px;
  line-height: 25px;
  font-size: 18px;
  color: #666;
  float: left;
  width:100%;
  background: #eee;
}
#testimonial .testimonial-arrow {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 12%;
  bottom: 85px;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-color: #ffffff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
#testimonial i {
  padding-right: 10px;
  color: rgba(102, 102, 102, 0.5);
}
#clients h2.section-subtitle{color:#000}

/*Subscription Area*/
#subscribe {
  background: #eceef1;
}
#subscribe .subscription-form .input-group .form-control {
  height: 80px;
  font-size: 30px;
  font-weight: 100;
  box-shadow: none;
  border: none;
}

#subscribe .subscription-form .btn {
  padding: 28px 40px;
}
/*Contact Area*/
#contact{
	position:relative;
}
#contact .row{padding:0; margin:0; width:100%;}
.contact-input{
    float: left;
}

.contact-row{
    clear: both;
}


#contact .mcont{
	background:#ff7f00;
	height:90px;
	width:254px;
	border-radius:3px;
	font-size:15px;
	color:#fff;
	text-align:center;
	margin:0;
}

#contact .mcont label{
	padding-top: 15px;
}

#contact .mcont span{
	font-size:20px;
	font-weight:400;
}

#contact .form-color{
	padding:0 10px;
}

#contact .form-color .formcon p.nama{
	color: #FFFFFF;
    font-size: 15px !important;
    line-height: 15px;
    margin:0;
}

#contact .form-color .formcon p{
	color: #FFFFFF;
    font-size: 20px;
    line-height: 30px;
    padding: 10px 0 5px 0;
}

#contact .uppercont{
	position:absolute;
	z-index: 99999999;
    width:100%;
    top:0;
}

#contact .footer-social-icon{
	text-align:left;
	padding-left:25px;
	margin: 12px 0 0;
}

#contactForm{
    background: #3D566E;    
}

.contact_form{position:absolute; bottom:0; right:60px; z-index:99; background:#3D566E; width:350px;
	-moz-box-shadow: 0 0 5px #3D566E;
	-webkit-box-shadow: 0 0 5px#3D566E;
	box-shadow: 0 0 5px #3D566E;}

.styc{
    background-color: rgba(255, 255, 255,0.99);
    border: medium none;
    color: #777777;
    height: 40px;
    margin: 10px 10px 0 0;
    width: 100%;
	float:left;
	padding:5px 7px;
}

.stycc {
    background-color: rgba(255, 255, 255, 0.99);
    border: medium none;
    color: #777777;
    height: 92px;
    margin: 10px 0;
    padding: 8px 0 0 8px;
    width: 100%;
    resize:none;
}

.sttyc {
    background-color: #ff7f00;
    border: 0 none;
    color: #fff;
    float: right;
    font-size: 16px;
    font-weight: normal;
    padding: 5px 20px;
    text-transform: uppercase;
	float: left;
	border-radius:3px;
	margin-top:16px;
    margin-bottom: 20px;
}

.fotter-form{
	margin:30px 19px 0 19px;
    background: #3D566E;
}
.fotter-form h3{padding-bottom:0px; text-align:left;}
#map{
     position: relative;
     width: 100%;
     height: 550px;
     margin: 0 auto;
     z-index: 99;
}
/*Copyright Area*/
#copyright 
{
  padding:20px 0 10px 0;
  background: #3d566e;
  color: #fff;
}
#copyright a {
  color: #fff;
}
.footer-logo{text-align:right;}
/*================ Custome===================*/
h1{font-weight:300;}
h2, h3{font-weight:100;}
.btn{font-weight:300;}
.margin-top0{margin-top:0 !important;}

#scrollTop{background:#000; border:1px solid #000; border-radius:4px; padding:7px 8px; display:none; font-size:20px; color:#fff; position:fixed; bottom:20px; right:20px; cursor:pointer; z-index:999}

.portfolio-filter > ul{display:inline-block; text-align:center; margin-bottom:20px;}
.portfolio-filter > ul > li{list-style-type:none; float:left; margin-right:10px; margin-bottom:10px;}
#filter-portfolio .box img{width:250px; margin-right:20px;}
.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
        -moz-transition-duration: 0.8s;
        -ms-transition-duration: 0.8s;
        -o-transition-duration: 0.8s;
            transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
        -moz-transition-property: height, width;
        -ms-transition-property: height, width;
        -o-transition-property: height, width;
            transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
        -moz-transition-property:    -moz-transform, opacity;
        -ms-transition-property:     -ms-transform, opacity;
        -o-transition-property:      -o-transform, opacity;
            transition-property:         transform, opacity;
}


.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
        -moz-transition-duration: 0s;
        -ms-transition-duration: 0s;
        -o-transition-duration: 0s;
            transition-duration: 0s;
}