@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
html { -webkit-text-size-adjust: none; -webkit-font-smoothing: aliased}
body { margin:0; padding: 0; font-size: 14px; line-height: 21px; font-family: "Helvetica", Arial, sans-serif; overflow-x: hidden}
h3{ font-weight: normal; margin: 0; padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 15px} 
#cloud{
	background-image:url(images/img-cloud.jpg); /* background-image is required to work */
	background-repeat:repeat-x; /* Required */
	background-position:0 top; /* Required */
	height:1000px;
	width:100%; 
}
#waves {
  position: absolute;
  z-index: 20;
}
.no-js #loader { display: none}
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: white
	/*background: url(Preloader_2.gif) center no-repeat #fff;*/
}
.square{
    height:45px;
    width:45px;
	margin-left: auto; margin-right: auto; margin-top: 25%;
    border:8px solid #ccc;
    -webkit-animation: burst_spin 2s infinite linear; 
}
@media screen and (max-width: 1000px) {
.square{margin-top: 25%}
}
@media screen and (max-width: 480px) {
.square{margin-top: 65%}
}
@-webkit-keyframes burst_spin {
    from { -webkit-transform: rotate(0deg) }
	to { -webkit-transform: rotate(360deg) }
}

.wrapper{width: 100%; float: left} .header-white{ background-color: white}
#landing { width: 100%; float: left; margin-top: 3%; min-height: 650px}
#landing img { width: 100%}
#cloud{
  width: 100%;
  height: 100%;
  background: url(../images/img-cloud.jpg) 0% 0% repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-animation-name: MOVE-BG;
  -webkit-animation-duration: 100s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}
#logo{width:206px; position: absolute; top:25px; left: 5%; z-index: 4000}
header{ width: 90%; height: 75px; padding-top: 20px; padding-bottom: 15px; margin-left: auto; margin-right: auto; position: relative; background-color: white; z-index: 3000}
header nav {
	width: 100%; float: right;
	font-size: 14px;
	text-align: right;
	padding-top: 20px;
	padding-bottom: 5px;
}
header nav ul {
	margin: 0;
	padding: 0em;
	list-style-type: none;
}
header nav ul li {
	display: inline;
	margin-left: 0em;
}
header nav ul li:first-child {
	margin-left: 0;
}
header nav ul li:last-child {
	margin-left: 15px;
}
header nav ul li ul {
	display: none;
}
header nav ul li a {
	color: black; text-decoration: none
}
header nav ul li a:hover {
	color: #878787
}
header nav ul li a, header nav ul li a:hover {
	-o-transition: color 0.25s ease-in;
	-webkit-transition: color 0.25s ease-in;
	-moz-transition: color 0.25s ease-in;
	transition: color 0.25s ease-in;
}
.active{ color: #878787 !important}
.active-sub{ color: #0080c9 !important}
.nav-line{ border-right:1px solid black; padding-left: 15px; padding-right: 15px}
#submenu-desktop{width: 100%; float: right; text-align: right}
#submenu-desktop ul { margin: 0; padding: 0; list-style: none}
#submenu-desktop ul li { margin: 0; padding: 0; float: right; }
#submenu-desktop ul li a { font-size: 11px; text-decoration: none; color: #878787; margin-left: 15px }
#submenu-desktop ul li a:hover { color: #0080c9}

.content{ width: 90%; margin-bottom: 60px; margin-left: auto; margin-right: auto}
#landing-content{ width: 100%}
.banner { width: 100%; float: left}
.banner img { width: 100%}
.desc { width: 90%; float: left; padding-top:30px; padding-bottom: 30px; padding-left: 5%; padding-right: 5%; text-align: center}
.desc p { width: 100%; float: left; margin: 0; padding-top: 0; padding-bottom: 30px; padding-left: 0; padding-right: 0; text-align: center; font-weight: normal}
.desc a {text-decoration: none; color: black}
.desc dl{ width:100%; float: left; margin-top: 0; margin-bottom: 30px; margin-left: 0; margin-right: 0; padding: 0; text-align: left}
.desc dt{ width:49%; float: left; margin: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 2%}
.desc dd{ width:49%; float: left; margin: 0; padding: 0}
.desc dl h3{ margin-top:0; margin-bottom:15px; padding: 0}
.desc p img{ width: 100%}
/*.desc ul{ list-style:none; width: 300px; margin-left: auto; margin-right: auto; display: block; text-align: center}
.desc li{ float: left; padding-left: 15px; padding-right: 15px}*/
.desc-bod { width: 100%; float: left; padding-top:30px; padding-bottom: 30px; text-align: center; line-height: 18px}
.desc-bod ul { width: 100%; margin: 0; padding: 0; float: left; list-style: none}
.desc-bod ul li {margin: 0; padding: 0; float: left; width: 12.28%; padding-left: 1%; padding-right: 1%}
.desc-bod ul li img { display: none}
.desc-bod ul li span { font-size: 10px}
.desc-management { width: 100%; float: left; padding-top:30px; padding-bottom: 30px; text-align: left; line-height: 18px}
.desc-management ul { width: 50%; margin: 0; padding: 0; float: left; list-style: none}
.desc-management ul li {margin: 0; padding: 0; float: left; width: 80%; padding-left: 10%; padding-right: 10%}
.desc-management ul li img { display: block; width: 100%}
.desc-management ul li span { font-size: 10px}
#desc-images { width: 100%; float: left; padding-top:30px; padding-bottom: 30px; text-align: center}
#desc-images img{ width: 100%}
.desc-news { width: 100%; float: left; padding-top:30px; padding-bottom: 30px; text-align: center; line-height: 18px}
.desc-news p { width: 100%; float: left; margin: 0; padding-top: 0; padding-bottom: 15px; padding-left: 0; padding-right: 0; text-align: center}
.desc-news a {text-decoration: none; color: black}
.desc-strategic { width: 85%; float: left; padding-top:30px; padding-bottom: 30px; padding-left: 7.25%; padding-right: 7.25%; text-align: center}
.desc-strategic p { width: 100%; float: left; margin: 0; padding-top: 0; padding-bottom: 30px; padding-left: 0; padding-right: 0; text-align: left; font-weight: normal}
desc p { width: 100%; float: left; margin: 0; padding-top: 0; padding-bottom: 30px; padding-left: 0; padding-right: 0; text-align: center; font-weight: normal}
.desc-strategic a {text-decoration: none; color: black}
.desc-strategic dl{ width:100%; float: left; margin-top: 0; margin-bottom: 30px; margin-left: 0; margin-right: 0; padding: 0; text-align: left}
.desc-strategic dt{ width:49%; float: left; margin: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 2%; text-align: left}
.desc-strategic dd{ width:49%; float: left; margin: 0; padding: 0; text-align: left}

.desc-strategic-project { width: 85%; float: left; padding-top:30px; padding-bottom: 30px; padding-left: 7.25%; padding-right: 7.25%; text-align: center}
.desc-strategic-project p { width: 100%; float: left; margin: 0; padding-top: 0; padding-bottom: 30px; padding-left: 0; padding-right: 0; text-align: left; font-weight: normal}
desc p { width: 100%; float: left; margin: 0; padding-top: 0; padding-bottom: 30px; padding-left: 0; padding-right: 0; text-align: center; font-weight: normal}
.desc-strategic-project a {text-decoration: none; color: #158DF1}
.desc-strategic-project dl{ width:100%; float: left; margin-top: 0; margin-bottom: 30px; margin-left: 0; margin-right: 0; padding: 0; text-align: left}
.desc-strategic-project dt{ width:15%; float: left; margin: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 2%}
.desc-strategic-project dd{ width:83%; float: left; margin: 0; padding: 0}
.desc-strategic-project dt img{ width:80%; float: left}

.year-list{ text-align:center}
.year-list a{ margin-left: 15px; margin-right: 15px; margin-bottom: 5px; color: #3F3F3F; text-decoration: none}
.year-list a:hover{ border-bottom: 1px solid #0080c9; color: #0080c9}

#development-menu{ width:300px; position: relative; top: -180px; left: 20%; z-index: 3000}
#development-menu ul{ width: 100%; float: left; margin: 0; padding: 0; list-style: none}
#development-menu ul li{ width: 100%; float: left; margin-bottom: 15px; padding: 0}
#development-menu ul li a{ text-decoration: none; color: white; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 2px solid white}

.bg-brown{ background-color: #5d534a} .bg-grey{ background-color: #dadde6}
.bg-white{ background-color: #FFFFFF}
.font-white {color: white}
.clearfix {margin: 0; clear: left}
.m-hide { display: block}
.desk-hide { display: none}
.dm-hide { display: none}
#footer-landing{ width:100%; height: 5%; background-color: white; position: fixed; left: 0; bottom: 0; z-index: 99999999}
.landing-working-desk{ display: block}
.landing-working-m{ display: none}
#dropbox{display: none}

.banner-img-left{ width:50%; float: left}
.banner-img-right{ width:50%; float: left}
.banner-img-title{ width:100%; position: absolute; top: 110px; left: 0; text-align: center; z-index: 2000}
.banner-img-point{ width:90%; position: absolute; top:115px; left: 5%; text-align: center; z-index: 2000}
.banner-img-icon{ width:100%; position: absolute; top: 110px; left: 0; text-align: center; z-index: 2000}
.banner-img-icon-business{ width:100%; position: absolute; top: 190px; left: 0; text-align: center; z-index: 2000}
.banner-img-thumb{ width:100%; position: absolute; top: 110px; left: 0; text-align: center; z-index: 2000}
.banner-img-btn-status{ width:99%; height:0px; position: relative; top: -50px; right: 1%; text-align: right; z-index: 4000}
.banner-img-btn-status a{ text-decoration: none; color: white; padding-top: 8px; padding-bottom: 8px; padding-left: 13px; padding-right: 13px; margin-right: 5px; background-color: black } 

.banner-img-video{ width:100%; position: absolute; top: 35%; left: 0; text-align: center; z-index: 3000}
.banner-img-dropdown{ width:100%; position: absolute; top: 70%; left: 0; text-align: center; z-index: 3000}
.banner-img-left img{ width:100%}
.banner-img-right img{ width:100%}

.banner-img-top{ width:100%; float: left}
.banner-img-bottom{ width:100%; float: left}
.banner-img-top img{ width:100%}
.banner-img-bottom img{ width:100%}
.banner-img-bottom-ovelap{ width:100%; position: absolute; top: 260px; left: 0; text-align: center; z-index: 3000}

.landmark-map{ width:1000px; height: 570px; margin-left: auto; margin-right: auto; margin-bottom: 60px; background-image: url(../images/development/landmarks/iskandar/map.jpg); background-position: left top; background-repeat: no-repeat}

.landmark-map-vision{ width:1000px; height: 570px; margin-left: auto; margin-right: auto; margin-bottom: 60px; background-image: url(../images/development/landmarks/map-mobile-vision.png); background-position: left top; background-repeat: no-repeat}

.btn-map1{ width: 70px; position: relative; text-align: center; cursor: pointer; top: 190px; left: 270px}
.btn-map2{ width: 70px; position: relative; text-align: center; cursor: pointer; top: 290px; left: 295px}
.btn-map3{ width: 70px; position: relative; text-align: center; cursor: pointer; top: 190px; left: 450px}
.btn-map4{ width: 70px; position: relative; text-align: center; cursor: pointer; top: 100px; left: 520px}
.btn-map5{ width: 70px; position: relative; text-align: center; cursor: pointer; top: -130px; left: 870px}
.overlay1 {position: absolute; top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;opacity: 0;transition: .5s ease}
.btn-map1:hover .overlay1 {opacity: 1}
.btn-map2:hover .overlay1 {opacity: 1}
.btn-map3:hover .overlay1 {opacity: 1}
.btn-map4:hover .overlay1 {opacity: 1}
.btn-map5:hover .overlay1 {opacity: 1}

.landmark-map-mobile{ display: none} .landmark-map-mobile img{ width: 100%}
#videobox{ width:55%; margin-left: auto; margin-right: auto}

.dropbtn {
	width: 370px;
	background-image: url(../images/icon-dropdown.png); background-position: 330px 9px; background-repeat: no-repeat;
    background-color: transparent;
	border: 1px solid #757575;
    padding-top: 10px; padding-bottom: 10px;
	
    font-size: 16px;
    cursor: pointer;
/*	position: relative;*/
	z-index: 5000
}
/*.dropbtn2 span { float: left}*/
/* The container <div> - needed to position the dropdown content */
.dropdown {
	width: 370px;
	margin-left: auto; margin-right: auto;
    position: relative;
	z-index: 5000;
    display: inline-block;
}
.dropdown img{ width: 15px; float: right; padding-right: 20px}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 367px;
	overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 8px 8px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #E5E5E5}
/* Show the dropdown menu on hover */
.dropdown:hover {
    display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #0089cf; color: white;
}
.show {display:block;}


.font-blue {
	color: #0089cf
}
/*-----------------*/
/***** Hera *****/
/*-----------------*/

figure.effect-hera {
	background: #303fa9;
	color: white;
}

figure.effect-hera h2 {
	font-size: 158.75%;
}

figure.effect-hera h2{
	position: absolute;
	top: 47%;
	left: 50%;
	z-index: 30;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}
figure.effect-hera p {
	width: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 30;
	text-align: center;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}

figure.effect-hera figcaption::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	border: 14px solid #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}

figure.effect-hera p {
	text-transform: none;
	font-size: 121%;
	line-height: 2;
}

figure.effect-hera p a {
	color: #fff;
}

figure.effect-hera p a:hover,
figure.effect-hera p a:focus {
	
}

figure.effect-hera p a {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-hera p a {
	-webkit-transform: translate3d(-60px,-60px,0);
	transform: translate3d(-60px,-60px,0);
}


figure.effect-hera:hover figcaption::before {
	
}

figure.effect-hera:hover h2 {
	
}

figure.effect-hera:hover p:empty {
	
}

@media screen and (max-width: 1280px) {
	.banner-img-video{ top: 37%}
}
@media screen and (max-width: 1210px) {
	#submenu-desktop ul li a { font-size: 10px; margin-left: 12px }	
}
@media screen and (max-width: 1000px) {
	.content{ margin-top: 0px}
	#submenu-desktop{ display: none}
	.landing-working-desk{ display: none}
	.dm-hide { display: block}
	.banner-img-bottom-ovelap{ width:100%; position: absolute; top: 210px; left: 0; text-align: center; z-index: 3000}
	.banner-img-video{ top: 32%}
	#videobox{ width:65%}
	#dropbox{display: inline-block}
	.landmark-map{ display:none}
	.landmark-map-mobile{ display: block; width: 100%;}
}
@media screen and (max-width: 768px) {
	.dm-hide { display: block}
	.desk-hide { display: none}
	.m-hide{ display:block}
	#development-menu{ width:300px; top: -160px; left: 10%}
	.desc-strategic-project dt{ width:25%; float: left; margin: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 2%}
	.desc-strategic-project dd{ width:73%; float: left; margin: 0; padding: 0}
}
@media screen and (max-width: 680px) {
	.desc dl{ margin-bottom: 30px}
	.desc dt{ width:100%; padding-bottom: 30px; padding-right: 0%}
	.desc dd{ width:100%}
	.desc-strategic dl{margin-bottom: 30px}
	.desc-strategic dt{ width:100%; padding-bottom: 30px; padding-right: 0%}
	.desc-strategic dd{ width:100%}
	#development-menu{ width:300px; top: -130px; left: 5%}

}
@media screen and (max-width: 480px) {
	body {font-size: 11px; line-height: 18px}
	#cloud{background-image:url(../images/img-cloud-mobile.jpg); /* background-image is required to work */}
	.desk-hide { display: block}
	.m-hide { display: none}
	.dm-hide { display: none}
	.desc-bod ul li {width: 100%; margin-bottom: 30px}
	.desc-bod ul li img {display: block; width: 100%; margin-bottom: 15px}
	figure.effect-hera {display: none}
	.landing-working-m{ display: block; position: absolute; z-index: 9999999; width: 100%; text-align: center; margin-top: 35%}
	.desc-management ul { width: 100%; margin: 0; padding: 0}
	.banner-img-video{ top: 35%}
	#videobox{ width:80%}
	.dropdown-content {min-width: 305px; font-size: 16px}
	.dropbtn {width: 300px; height: 50px; font-size: 16px; background-position: 270px 15px}
	.dropdown img{ width: 8px; float: right; padding-right: 10px}
	
}