@font-face {
  font-family: "Raleway Bold";
  src: url(../font/Raleway-Bold.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Raleway Extra Bold";
  src: url(../font/Raleway-ExtraBold.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Raleway Light";
  src: url(../font/Releway-ExtraLight.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Raleway Heavy";
  src: url(../font/Raleway-Heavy.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Raleway Light";
  src: url(../font/Raleway-Light.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Raleway Light_0";
  src: url(../font/Raleway-Light_0.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Raleway Medium";
  src: url(../font/Raleway-Medium.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Raleway Regular";
  src: url(../font/Raleway-Regular.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Raleway SemiBold";
  src: url(../font/Raleway-SemiBold.ttf);
  format: "ttf"; }
@font-face {
  font-family: "Raleway Thin";
  src: url(../font/Raleway-Thin.ttf);
  format: "ttf"; }


@font-face {
  font-family: "OpenSans Bold";
  src: url(../font/Open_Sans/OpenSans-Bold.ttf);
  format: "ttf"; }
@font-face {
  font-family: "OpenSans Regular";
  src: url(../font/Open_Sans/OpenSans-Regular.ttf);
  format: "ttf"; }
@font-face {
  font-family: "OpenSans ExtraBold";
  src: url(../font/Open_Sans/OpenSans-ExtraBold.ttf);
  format: "ttf"; }

body {
	margin : 0 auto;
	padding: 0 0;
	max-width: 1440px;
}

/*variale css custome*/
.padding-0 {
	padding:0 !important;
}
.margin-0{
	margin:0 !important;
}

/*loding image*/
.modal-loading {
    display: none;
    position: fixed;
    z-index: 2000;
    padding-top: 15%;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow:hidden;
    /*background-color: rgb(0,0,0); */
    background-color: rgba(255,255,255,0.6);
} 	.modal-loading .content-loading {
	    margin: auto;
	    display: block;
	    width: 10%;
	    max-width: 100px;
	}

.padding-1 {
	padding:1%;
}	.padding-2 {
		padding:2%;
	}	.padding-3 {
			padding:3%;
		}	.padding-4 {
				padding:4%;
			}	.padding-5 {
					padding:5%;
				}	.padding-6 {
						padding:6%;
					}	.padding-7 {
							padding:7%;
						}	.padding-8 {
								padding:8%;
							}	.padding-9 {
									padding:9%;
								}	.padding-10 {
										padding:10%;
									}
.padding-left-1 {
	padding-left:1%;
}	.padding-left-2 {
		padding-left:2%;
	}	.padding-left-3 {
			padding-left:3%;
		}	.padding-left-4 {
				padding-left:4%;
			}	.padding-left-5 {
					padding-left:5%;
				}	.padding-left-6 {
						padding-left:6%;
					}	.padding-left-7 {
							padding-left:7%;
						}	.padding-left-8 {
								padding-left:8%;
							}	.padding-left-9 {
									padding-left:9%;
								}	.padding-left-10 {
										padding-left:10%;
									}
.padding-right-1 {
	padding-right:1%;
}	.padding-right-2 {
		padding-right:2%;
	}	.padding-right-3 {
			padding-right:3%;
		}	.padding-right-4 {
				padding-right:4%;
			}	.padding-right-5 {
					padding-right:5%;
				}	.padding-right-6 {
						padding-right:6%;
					}	.padding-right-7 {
							padding-right:7%;
						}	.padding-right-8 {
								padding-right:8%;
							}	.padding-right-9 {
									padding-right:9%;
								}	.padding-right-10 {
										padding-right:10%;
									}
.padding-top-1 {
	padding-top:1%;
}	.padding-top-2 {
		padding-top:2%;
	}	.padding-top-3 {
			padding-top:3%;
		}	.padding-top-4 {
				padding-top:4%;
			}	.padding-top-5 {
					padding-top:5%;
				}	.padding-top-6 {
						padding-top:6%;
					}	.padding-top-7 {
							padding-top:7%;
						}	.padding-top-8 {
								padding-top:8%;
							}	.padding-top-9 {
									padding-top:9%;
								}	.padding-top-10 {
										padding-top:10%;
									}
.padding-bottom-1 {
	padding-bottom:1%;
}	.padding-bottom-2 {
		padding-bottom:2%;
	}	.padding-bottom-3 {
			padding-bottom:3%;
		}	.padding-bottom-4 {
				padding-bottom:4%;
			}	.padding-bottom-5 {
					padding-bottom:5%;
				}	.padding-bottom-6 {
						padding-bottom:6%;
					}	.padding-bottom-7 {
							padding-bottom:7%;
						}	.padding-bottom-8 {
								padding-bottom:8%;
							}	.padding-bottom-9 {
									padding-bottom:9%;
								}	.padding-bottom-10 {
										padding-bottom:10%;
									}
.margin-1 {
	margin:1%;
}	.margin-2 {
		margin:2%;
	}	.margin-3 {
			margin:3%;
		}	.margin-4 {
				margin:4%;
			}	.margin-5 {
					margin:5%;
				}	.margin-6 {
						margin:6%;
					}	.margin-7 {
							margin:7%;
						}	.margin-8 {
								padding:8%;
							}	.margin-9 {
									margin:9%;
								}	.margin-10 {
										margin:10%;
									}
.margin-left-1 {
	margin-left:1%;
}	.margin-left-2 {
		margin-left:2%;
	}	.margin-left-3 {
			margin-left:3%;
		}	.margin-left-4 {
				margin-left:4%;
			}	.margin-left-5 {
					margin-left:5%;
				}	.margin-left-6 {
						margin-left:6%;
					}	.margin-left-7 {
							margin-left:7%;
						}	.margin-left-8 {
								margin-left:8%;
							}	.margin-left-9 {
									margin-left:9%;
								}	.margin-left-10 {
										margin-left:10%;
									}
.margin-right-1 {
	margin-right:1%;
}	.margin-right-2 {
		margin-right:2%;
	}	.margin-right-3 {
			margin-right:3%;
		}	.margin-right-4 {
				margin-right:4%;
			}	.margin-right-5 {
					margin-right:5%;
				}	.margin-right-6 {
						margin-right:6%;
					}	.margin-right-7 {
							margin-right:7%;
						}	.margin-right-8 {
								margin-right:8%;
							}	.margin-right-9 {
									margin-right:9%;
								}	.margin-right-10 {
										margin-right:10%;
									}
.margin-top-1 {
	margin-top:1%;
}	.margin-top-2 {
		margin-top:2%;
	}	.margin-top-3 {
			margin-top:3%;
		}	.margin-top-4 {
				margin-top:4%;
			}	.margin-top-5 {
					margin-top:5%;
				}	.margin-top-6 {
						margin-top:6%;
					}	.margin-top-7 {
							margin-top:7%;
						}	.margin-top-8 {
								margin-top:8%;
							}	.margin-top-9 {
									margin-top:9%;
								}	.margin-top-10 {
										margin-top:10%;
									}
.margin-bottom-1 {
	margin-bottom:1%;
}	.margin-bottom-2 {
		margin-bottom:2%;
	}	.margin-bottom-3 {
			margin-bottom:3%;
		}	.margin-bottom-4 {
				margin-bottom:4%;
			}	.margin-bottom-5 {
					margin-bottom:5%;
				}	.margin-bottom-6 {
						margin-bottom:6%;
					}	.margin-bottom-7 {
							margin-bottom:7%;
						}	.margin-bottom-8 {
								margin-bottom:8%;
							}	.margin-bottom-9 {
									margin-bottom:9%;
								}	.margin-bottom-10 {
										margin-bottom:10%;
									}


.inline-block {
	display: inline-block;
	width: 100%;
}
.pointer {
  cursor: pointer;
}
.img {
	width: 100%;
}
a {
	text-decoration: none !important;
}
.sans-reg {
	font-family: "OpenSans Regular";
}

/*MENU HEADER*/
	.side-menu {
	  visibility: hidden;
	  position: fixed;
	  right: -100%;
	  top: 0;
	  width: 250px;
	  color: black !important;
	  height: 100%;
	  background: #fff;
	  z-index: 9999;
	  transition: 0.2s; }

	.side-menu:hover {
	  overflow-y: scroll; }
	.tag-side-menu {
	  padding: 9.5px 15px;
	  font-size: 16px;
	  color: #000;
	  border-bottom: 3px solid rgba(255, 255, 255, 0.8);
	  cursor: pointer; }

	.tag-side-menu .fa {
	  margin-top: 2px;
	  font-size: 18px; }

	.info-side-menu {
	  padding: 0;
	  background: #fff;
	  border-bottom: 1px solid rgba(255, 255, 255, 0.5); }

	.info-side-menu li {
	  display: block; }

	.info-side-menu li a {
	  display: block;
	  padding: 8px 15px;
	  color: #000 }

	.info-side-menu li a .fa {
	  margin-right: 5px; }

	.list-side-menu {
	  padding: 0; }

	.list-side-menu li {
	  display: block; }

	.list-side-menu li a {
	  display: block;
	  padding: 10px 15px;
	  color: #000;
	  border-bottom: 1px solid rgba(255, 255, 255, 0.2); }

	.list-side-menu li a:hover,
	.list-side-menu li a:focus {
	  background: #f16423;
	  color:white; }

	.list-side-menu li a .fa {
	  margin-right: 5px; }

.menu {
	margin-left : 10%;
}

.inline-menu-left , .inline-menu-right {
	display: inline-block;
}

.inline-menu-left {
	width: 10%;
	padding-top: 0.4%;
}

.inline-menu-right {
	/*width: 85%;*/
	width: 86%;
	float: right;
	vertical-align: top;
}

.top-contact {
		width: 100%;
		float: right;
		background-color: #f16423;
		padding-right: 13%;
		position: relative;
		padding-top 	:8px; /*0.8%*/
		padding-bottom 	:8px; /*0.8%*/
	}
	.top-contact:before {
		content: "";
        position: absolute;
        top: 0;
        z-index: 10;
        left: -75px;
        border-top : 53px solid #f16423;
        border-left: 75px solid transparent;
	}
		.top-contact .pull-right .sarch-top {
			display: none;
		}
		.top-contact li {
			float: left;
			padding: 1.3% 10px;
			list-style: none;
			color:#b71528;
			position: relative;
			text-decoration: none;
		}	.top-contact li a {
				color:white !important;
				font-family: "OpenSans Regular";
			}
		.top-contact li.media-era a {
			padding: 0 5px;
		}

	.top-menu {
		padding-right: 13%;
		padding-top: 10%;
	}

	.top-menu li {
			float: left;
			/*padding: 1.3% 25px;*/
			padding: 1.3% 23px;
			list-style: none;
			color:#b71528;
			position: relative;
			text-decoration: none;
		}	.top-menu li a {
				font-family: "Raleway Regular";
				color:#4d4d4d;
				font-size: 17px;
			}
			.top-menu li a:hover, .top-menu li a.active {
				color:#f16423;
			}

/*HOME*/
.index-home {
	padding-top: 0.5%;
}

.index-home .banner {
	margin : 50% 0;
}

.box-banner {
	padding: 5% 0;
	padding-top: 0px;
  	width: 100%;
  	margin:0;
  	font-size: 0;
}	.box-banner .padding {
		padding: 4px;
	}
.wrap-style-hover {
    position: relative;
    cursor: pointer;
}
.wrap-style-hover:before {
    transition: all .6s ease;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    transform: scale(0);
}
.wrap-style-hover:after {
    transition: all .7s ease .2s;
    content: "";
    position: absolute;
    top 	: 20px;
    left 	: 20px;
    right 	: 20px;
    bottom 	: 20px;
    border 	: 2px solid #fff;
    background: #f16423;
    opacity: 0;
    transform: scale(0);
}
.wrap-style-hover:hover:before {
    opacity: .5;
    transform: scale(1);
}
.wrap-style-hover:hover:after {
    opacity: .5;
    transform: scale(1);
    border-radius: 5px;
}

/* Flashing */
/*.wrap-style-hover:hover img {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}*/




.inline-box-sm, .inline-box-md, .inline-box-flat, .inline-box-49, .inline-box-49-right {
	display: inline-block;
	vertical-align: top;
	position: relative;
	overflow: hidden;
}
	.inline-box-sm {
		width: 33.4%;
	}
	.inline-box-md {
		width: 66.6%;
	}
	.inline-box-flat {
		width: 50%;
	}
	.inline-box-49 {
		width: 49%;
	}	.inline-box-49-right {
			width: 38%;
		}

.our-project {
	padding: 5%;
	background-color: #ebebeb;
}	.our-project .title {
		text-align: center;
		font-family: "OpenSans Regular";
		font-size: 30px;
		color:#0089cf;
		font-weight: bold;
	}
	.our-project .type-brand {
		padding-top:2%;
		/*width: 440px;*/
		margin: 0 25%;
		text-align: center;
		border-bottom: 5px solid #f16423;
		padding-bottom: 30px;
	}	.our-project .our-project-select {
			display: none;
		}
		.our-project ul li {
			float: left;
			padding: 1% 7% 4% 7%;
			list-style: none;
		}	.our-project ul li a {
				font-family: "OpenSans Regular";
				font-weight: bold;
				padding: 1% 7% 20px 7%;
				color:#3d3d3d;
			}	.our-project ul li a:hover, .our-project ul li a.active {
					color: #f16423;
				}
	.our-project .project {
		padding: 3% 0;
	}	.our-project .project .wrap-project {
			background-color: white;
			position: relative;
		}
			.our-project .project .logo {
				position: absolute;
				top:10px;
				z-index: 2;
				left: 10px
			}
			.our-project .project .title-dt {
				font-size: 18px !important;
				color:#3d3d3d;
				font-family: "OpenSans Bold";
				padding-bottom:3%;
				height: 55px;
			}
			.our-project .project span {
				font-family: "OpenSans Regular";
				font-size: 12px;
				color:#999999;
			}
			.our-project .project .idr {
				font-family: "OpenSans Bold";
				color:#f16423;
				font-size: 15px;
			}
			.our-project .project .v-dt {
				margin-top: 6%;
			}
				.our-project .project .wilayah {
					background-color: #f16423;
					font-family: "OpenSans Bold";
					border-radius: 5px;
					font-size: 13px;
					text-transform: uppercase;
					color:white;
				}
				.our-project .project .view-detail a {
					font-size: 13px;
					font-family: "OpenSans Bold";
					color:#3d3d3d !important;
				}

.index-home .whatson-hm {
	margin:5% 0;
}	.whatson-hm .title {
		font-family: "Raleway Bold";
		font-size: 30px;
		color: #0089cf;
		border-bottom:1px solid #dadada;
		padding-bottom: 2%;
		position: relative;
	}	.whatson-hm .title:before {
			position: absolute;
			content: '';
			left: 0;
			bottom: -1px;
			width: 25%;
			height: 1px;
			background: #008ad0;
		}
		.whatson-hm .wrap-whatson-hm {
			padding:3% 0;
		}	.whatson-hm .wrap-whatson-hm .date {
				color : #999999;
				font-family: "OpenSans Regular";
			}
			.whatson-hm .wrap-whatson-hm .title-wo {
				font-family: "OpenSans Bold";
				font-size: 22px;
				color: #252525;
			}
			.whatson-hm .whatson-right .title-wo {
				font-size: 16px;
			}	.whatson-hm .title-wo a {
					color:#252525 !important;
				}
			.whatson-hm .wrap-whatson-hm .desc {
				font-family: "OpenSans Regular";
				font-size: 14px;
			}
			.whatson-hm .wrap-whatson-hm a {
				font-family: "OpenSans Bold";
				color:#f16423;
			}


/*CONTACT*/
.contact {
	font-family: "OpenSans Regular";
	color:#0d0d0d !important;
}
.contact .wrap-title .title {
	font-size: 30px;
	position: relative;
	font-family: "OpenSans Bold";
}	.contact .wrap-title .title:after {
		position: absolute;
		content: '';
		left: 0;
		bottom: -1px;
		width: 5%;
		height: 3px;
		background: #008ad0;
	}

.contact input, .contact textarea {
	border-style: none;
	border-bottom: 1px solid #ddd;
	width: 100%;
	padding: 2%;
}	.contact input::placeholder, .contact textarea::placeholder {
		font-style: italic;
	}
.contact button {
	background-color: #008ad0;
	border-style: none;
	color:white;
}
.contact .contact-right .title {
	color:#f00000;
	font-family: "OpenSans Bold";
	font-size: 15px;
}
.contact .maps {
	display: inline-block;
	width: 100%;
	vertical-align: top;
	font-size: 0;
}
	.contact .maps iframe {
		width: 100%;
		height: 472px;
	}
	.contact .inline-box-left {
		width: 49.8%;
		display: inline-block;
		vertical-align: top;
	}
	.contact .inline-box-right {
		width: 49.9%;
		display: inline-block;
		vertical-align: top;
	}



/*PROJECT*/
.project-page {
	/*margin-bottom: 300px;*/
}	.project-page img {
		z-index: 20;
	}
	.project-page .menu-project {
		background-color: #ededed;
		position: relative;
		vertical-align: top;
		padding: 3% 10%;
	}

.project-page .inline-block {
	background-color: #ddd;
	padding-left: 10%;
	padding-right: 10%;
} 	.project-page .inline-block a {
		color:#4d4d4d;
	}
	.project-page .inline-block .wrap-select-project {
		display: none;
	}
.project-page .menu-box {
	display: inline-block;
	width: 24.5%;
	text-align: center;
	cursor: pointer;
	padding: 2% 5%;
	font-family: "OpenSans Bold";
	text-transform: uppercase;
	border-bottom: 4px solid #d6d6d6
}	.project-page .menu-box:hover, .project-page .menu-box.active {
		background-color: #ededed;
		color:#f16423;
		border-bottom: 4px solid #f16423
	}

.project-page .status {
	width: 30%;
	margin: 0 auto;
	font-family: "OpenSans Regular";
}	.project-page .inline-box-49, .inline-box-49-right {
    	padding: 5%;
	}	.project-page .inline-box-49.border-right {
			border-right: 1px solid #ccc;
		}
	.project-page .status a {
		color:#3d3d3d;
	}
	.project-page .status .active {
		background-color: #3d3d3d;
		padding: 3% 17%;
		border-radius: 5px;
		color: white;
	}
	.project-page .status span {
		font-size: 40px
	}

	.project-page .wrap-project {
		background-color: white;
		position: relative;
		/*display: inline-block;
		vertical-align: bottom;
		width: 24%;*/
	}
		.project-page .logo {
			position: absolute;
			top:10px;
			left: 10px
		}
		.project-page .title-dt {
			font-size: 18px !important;
			color:#3d3d3d;
			font-family: "OpenSans Bold";
			padding-bottom:3%;
			height: 55px;
		}
		.project-page .project span {
			font-family: "OpenSans Regular";
			font-size: 12px;
			color:#999999;
		}
		.project-page .idr {
			font-family: "OpenSans Bold";
			color:#f16423;
			font-size: 15px;
			padding: 5px 0;
		}
		.project-page .v-dt {
			margin-top: 6%;
			height: 30px;
		}
			.project-page .wilayah {
				background-color: #f16423;
				font-family: "OpenSans Bold";
				border-radius: 5px;
				font-size: 13px;
				text-transform: uppercase;
				color:white;
			}
			.project-page .view-detail a {
				font-size: 13px;
				font-family: "OpenSans Bold";
				color:#3d3d3d !important;
			}

	.project-page .img_project .owl-carousel .owl-item {
		opacity: 0.3;
	}	.project-page .img_project .owl-carousel .owl-item.center{
			opacity: 1;
		}

.project-page .img-logo {
	width: 30%;
	margin:0 auto;
}
.project-page .title-detail {
	font-family: "OpenSans Regular";
	font-size: 30px;
}
.project-page .desc-dt {
	font-family: "OpenSans Regular";
}

.project-page .img_project {
	position: relative;
}	.project-page .img_project .pull-left {
		position: absolute;
		bottom: 25%;
		left:10%;
		font-size: 150px;
		z-index: 100
	}
	.project-page .img_project .pull-right {
		position: absolute;
		bottom: 25%;
		font-size: 150px;
		right: 10%;
		z-index: 100
	}

.project-page .wrap-unit {
	width: 80%;
	margin:0 auto
}	.project-page .title-unit {
		font-family: "OpenSans Regular";
		font-size: 30px;
	}
	.project-page .title-item-unit {
		font-size: 24px;
		font-family: "OpenSans Regular";
	}

.project-page .wrap-video {
	width: 50%;
	margin:0 auto;
}
.project-page .contact-agent {
	background-color: #f16423;
	z-index: 3;
	position: relative;
	bottom: -100px;
	color:white !important
}	.project-page .contact-agent .right {
		border-right:1px solid white;
	}
	.contact-agent .inline-block {
		background-color: transparent;
		font-family: "OpenSans Bold"
	}
	.project-page .contact-agent i {
		font-size: 90px;
	}
	.project-page .contact-agent .text, .project-page .contact-agent a {
		font-size: 18px;
		vertical-align: bottom;
		color:white;
	}

.project-page .twin-footer {
	position: relative;
	background-color: #0089cf !important;
	bottom: -12px; z-index: 2
}



/*ABOUT*/
.about .desc {
	font-family: "OpenSans Regular";
	/*font-size: 18px;*/
}	.about .wrap-title .title {
		font-size: 30px;
		position: relative;
		font-family: "OpenSans Bold";
	}	.about .wrap-title .title:after {
			position: absolute;
			content: '';
			left: 0;
			bottom: -1px;
			width: 8%;
			height: 3px;
			background: #008ad0;
		}


/*WHATSON*/
.whatson {

}	.whatson .title-ws {
		font-family: "OpenSans Bold";
		font-size: 18px;
	}
	.whatson .date {
		color:#afafaf;
		font-style: italic;
		font-family: "OpenSans Regular";
	}
	.whatson .desc {
		color:#6f6f6f;
		font-family: "OpenSans Regular";
	}
	.whatson .link {
		position: relative;
	}	.whatson .link:after {
			position: absolute;
		    content: '';
		    left: 2%;
		    top: -5px;
		    /*margin-top:10%;*/
		    width: 15%;
		    height: 3px;
		    background: #f16423;
		}
	.whatson a {
		font-family: "OpenSans Bold";
		color: #222;
	}

.whatson.whatson-dt {
	border-top:1px solid #ddd;
	margin-top : 1%;
}
	.whatson-dt .title-dt {
		font-family: "OpenSans Bold";
		font-size: 22px;
	}
	.whatson-dt img {
		margin:0 auto;
		display: block;
	}
	.whatson-dt .date-dt {
		color:#afafaf;
		font-style: italic;
		font-family: "OpenSans Regular";
	}
	.whatson-dt .desc-dt {
		font-family: "OpenSans Regular";
		text-align: justify;
	}


/*AGENT*/
.agent .container {
	width: 80%
}	.agent img {
		border:1px solid #ddd;
	}
	.agent .form-inline .filter {
		font-family: "OpenSans Regular";
		color:#bebebe;
	}
	.agent .wrap-form {
		width: 300px;
		border:1px solid #ddd;
		display: inline-block;
		border-radius: 5px
	}	.agent .form-left {
			display: inline-block;
			width: 80%;
		}	.agent input {
				border-style: none;
				width: 100%;
				padding: 4%;
				border-radius: 10px;
				margin:1px;
			}	.agent input::placeholder, .header-search input::placeholder {
					font-style: italic;
					color:#bebebe;
				}
		.agent .form-right {
			display: inline-block;
			width: 18%;
			float: right;
			background-color:#ddd;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			border-left: 1px solid #ddd;
		}	.agent button {
				width: 100%;
				background-color: #ddd;
				padding-top: 10px;
				padding-bottom: 8px
			}	.agent button i {
					font-size: 20px
				}

	.agent .title {
		font-family: "OpenSans Regular";
		color:#000000;
	}
	.agent .telp {
		font-family: "OpenSans Bold";
		color:#f16423;
		font-size: 20px;
		padding: 3% 0;
		border-bottom: 1px solid #ddd;
	}
	.agent span {
		color:#bebebe;
		font-family: "OpenSans Bold";
	}
	.agent .spes {
		color:#000000;
		font-family: "OpenSans Regular";
		padding:3% 0;
		font-size: 13px;
	}

	/*pagination*/
	.pagination-custom {
		/*margin:20px 20px;*/
	}	.pagination-custom li {
			float: left;
			list-style: none;
			margin:5px;
		}	.pagination-custom li a {
				padding: 5px 10px;
				font-family: "OpenSans Bold";
				border-radius: 3px;
				color:#555;
			}	.pagination-custom li a:hover {
					background-color: #ddd;
				}
			.pagination-custom li.active {
				background-color: yellow;
			}
			.pagination-custom li.active a {
				background-color: #f16423;
				color: white
			}


/*FOOTER*/
.footer {
	background-color: #ebebeb !important;
	padding: 5% 0;
	color:#008ad0 !important;
	position: relative;
}
.footer:after {
	position: absolute;
	content: '';
	left: 8%;
	top: -5px;
	width: 85%;
	height: 8px;
	background: #ee1d25;
}
.footer .button_wa{
  bottom: 0px;
  border-radius: 15px 15px 0px 0px;
  right: 100px;
  width: 150px;
  padding: 8px 30px;
  z-index: 99999;
  position: fixed;
  background-color: #33cc00;
  text-align: center;
  font-size: 12px;
}

.button_wa span a{
 color: #FFF !important;
 font-size: 14px;
}


.footer.button_wa, span a :hover{
  background-color: #32b306;
  color: #FFF;
}



.footer .sans-reg {
	padding : 5% 0;
}
.footer a {
	color:#008ad0 !important;
}
.footer span {
	font-size: 18px;
	padding: 0 3%;
	color:#0d398c;
}

.col-1 .inline-left {
	display: inline-block;
	vertical-align: bottom;
	margin-bottom: 4%;
}
.col-1 .inline-right {
	display: inline-block;
	vertical-align: bottom;
	font-size: 45px;
	font-weight: bold
}

.col-2 .title {
	font-weight: bold;
	font-size: 15px;
}

.col-3 .call-center {
	font-size: 18px;
}


/*Resoponsive*/
@media(max-width: 1199px){

	/*Menu header*/
	.top-menu li {
		padding-right: 18px;
		padding-left: 18px;
	}

	/*Ccontact*/
	.contact .maps iframe {
		width: 100%;
		height: 434px;
	}

	/*home/main*/
	.our-project .type-brand {
		margin: 0 20%;
	}

	/*footer*/
	.col-1 .inline-right {
		font-size: 35px;
	}

}



@media(max-width: 1051px){
	.top-contact {
		padding-top 	:4px; /*0.8%*/
		padding-bottom 	:4px; /*0.8%*/
	}
	.top-contact:before {
		left: -65px;
		border-top : 43px solid #f16423;
        border-left: 65px solid transparent;
	}
		.top-menu li {
			padding-right: 12px;
			padding-left:  12px;
		}

	/*Ccontact*/
	.contact .maps iframe {
		width: 100%;
		height: 380px;
	}

}


@media(max-width: 992px){
	/*footer*/
	.col-1 .inline-right {
		font-size: 25px;
	}

	.our-project .type-brand {
		margin: 0 15%;
	} 	.our-project ul li {
			padding: 1% 5% 4% 5%;
		}

}


@media(max-width: 938px){

	/*Header*/
	.top-contact {
		padding: 4% 0;
	}
	.top-contact:before {
		left: 0;
		border-top : 0;
        border-left: 0;
	}	.top-contact ul {
			/*display: none;*/
		}
	.top-contact .pull-right {
		display: inline-block;
		float: left !important;
		width: 80%;
	}	.top-contact .pull-right .sarch-top {
			display: block;
		}

	.top-contact .icon-bar {
		display: inline-block;
    	width: 30px;
    	float: right;
    	right: 20px;
    	margin-right: 5%;
    	/*background-color: white;*/
	}	.top-contact .icon-bar .bar {
			display: block;
		    width: 100%;
		    height: 3px;
		    margin-bottom: 4px;
		    border: 3px solid #fff;
		    /* background-color: #000; */
		}
	.wrap-whatson-hm .whatson-right {
		margin-top: 5%;
	}
	.top-menu {
		display: none;
	}

	/*About*/
	.about .wrap-title .title {
		font-size: 25px;
	}

	/*contact*/
	.contact .maps iframe {
		width: 100%;
		height: 339px;
	}


	/*Porject Detail*/
	.project-page .img_project .pull-left, .project-page .img_project .pull-right {
		font-size: 100px;
	}

	.project-page .twin-footer {
		padding: 7%;
	}

	.our-project .project .title-dt {
		font-size: 15px !important;
	}
	.our-project .project .wilayah {
		font-size: 10px;
	}

}


@media(max-width: 727px){
	.our-project .type-brand {
		margin: 0 5%;
	} 	.our-project ul li {
			padding: 1% 5% 4% 5%;
		}

	.project-page .menu-box {
		width: 24%;
	}
	/*contact*/
	.contact .maps iframe {
		width: 100%;
		height: 263px;
	}

	/*project detail*/
	.project-page .contact-agent i {
		font-size: 50px;
		float: right;
	}

	.project-page .contact-agent .text, .project-page .contact-agent a {
		font-size: 15px;

	}
	.project-page .contact-agent .padding-left-5 {
		padding-left: 0;
	}
	.project-page .wrap-video {
		width: 100%;
	}

	.project-page .title-item-unit {
		font-size: 20px;
	}

}


@media(max-width: 667px){
	/*HOME*/
	.our-project .title, .whatson-hm .title {
		font-size: 23px;
	}

	/*contact*/
	.contact .maps iframe {
		width: 100%;
		height: 241px;
	}

	/*Porject Detail*/
	.project-page .img_project .pull-left, .project-page .img_project .pull-right {
		font-size: 60px;
	}
}


@media(max-width: 600px){

	.our-project .type-brand {
		margin: 0 0%;
	} 	.our-project ul li {
			padding: 1% 5% 4% 5%;
		}

	.top-contact ul {
		display: none;
	}

	.whatson-hm .wrap-whatson-hm .title-wo {
		font-size: 20px;
	}

	/*PROJECT*/
	.project-page .inline-block a {
		display: none;
	}	.project-page .inline-block .wrap-select-project {
			display: block;
			padding: 2% 0
		}
	/*contact*/
	.contact .maps iframe {
		width: 100%;
		height: 217px;
	}

}

@media(max-width: 525px){
	/*HOME*/
	.our-project .type-brand {
		width: 350px;
	}	.our-project .type-brand ul {
			display: none;
		}
		.our-project .our-project-select {
			display: block;
		}

	/*PROJECT*/
	.project-page .status {
		width: 35%;
	}

	/*contact*/
	.contact .maps iframe {
		width: 100%;
		height: 190px;
	}

	/*project detail*/
	.project-page .title-detail, .project-page .title-unit {
		font-size: 25px;
	}

	.project-page .contact-agent i {
		font-size: 50px;
	}

	.project-page .contact-agent .text, .project-page .contact-agent a {
		font-size: 15px;
	}
	.project-page .twin-footer {
		padding: 9%;
	}

}



@media(max-width: 427px){
	/*HOME*/
	.our-project .type-brand {
		width: 300px;
	}
	.our-project .title {
		font-size: 20px;
	}

	/*About*/
	.about .wrap-title .title {
		font-size: 22px;
	}

	/*PROJECT*/
	.project-page .status {
		width: 38%;
	}
	/*Porject Detail*/
	.project-page .img_project .pull-left, .project-page .img_project .pull-right {
		font-size: 50px;
	}
	.project-page .twin-footer {
		padding: 10%;
	}

	/*contact*/
	.contact .maps iframe {
		width: 100%;
		height: 154px;
	}
}



@media(max-width: 375px){
	/*HOME*/
	.our-project .type-brand {
		width: 260px;
	}

	/*PROJECT*/
	.project-page .status {
		width: 48%;
	}

	/*contact*/
	.contact .maps iframe {
		width: 100%;
		height: 135px;
	}

	/*HOME*/
	.inline-box-sm, .inline-box-md, .inline-box-flat {
		width: 100%;
	}

	/*Porject Detail*/
	.project-page .img_project .pull-left, .project-page .img_project .pull-right {
		font-size: 40px;
	}

	.project-page .inline-box-sm {
		width: 10%;
	}
	.project-page .inline-box-flat {
		width: 80%;
	}

	.project-page .twin-footer {
		padding: 15%;
	}

}


@media(max-width: 320px){
	.our-project .type-brand {
		width: 240px;
	}

	/*contact*/
	.contact .maps iframe {
		width: 100%;
		height: 115px;
	}

	/*Porject Detail*/
	.project-page .img_project .pull-left, .project-page .img_project .pull-right {
		bottom: 15%;
	}
	.project-page .img_project .pull-left {
		left: 5%;
	}
	.project-page .img_project .pull-right {
		right: 5%;
	}

}


/*star-projek-secondary*/
/*end-projek-secondary*/


/*search box css start here*/
.pencarian-projek {
	padding-top: 30px;
	padding-bottom: 50px;
}
.search-sec{
    padding: 2rem;
}
.search-slt{
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 1.5;
    color: #55595c;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    height: calc(3rem + 2px) !important;
    border-radius:0;
}
.wrn-btn{
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    height: calc(3rem + 2px) !important;
    border-radius:0;
    font-family: "OpenSans Regular";
    margin-top: 25px;
}

.btn-dangers {
    color: #fff;
    background-color: #f16423;
    border-color: #f16423;
}

@media (min-width: 992px){
    .search-sec{
        position: relative;
        top: -114px;
        background: rgba(26, 70, 104, 0.51);
    }
}

@media (max-width: 992px){
    .search-sec{
        background: #1A4668;
    }
}