.ball {
  display: inline-block;
  width: 70px;
  height: 70px;
  margin:-10px 0 0 100px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  -webkit-transform-style: preserve-3d;
  background: url('../images/map.jpg') repeat-x;
  background-size: auto 100%;
  -webkit-animation: move-map 30s infinite linear;
  -moz-animation: move-map 30s infinite linear;
  -o-animation: move-map 30s infinite linear;
  -ms-animation: move-map 30s infinite linear;
  animation: move-map 30s infinite linear;
}

.ball:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 2;
}

.ball:after {
  content: "";
  position: absolute;
  border-radius: 50%;

  opacity: 0.3;
}

.ball .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: -105px;
  left: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0) 70%);
  -webkit-transform: rotateX(90deg) translateZ(-150px);
  -moz-transform: rotateX(90deg) translateZ(-150px);
  -ms-transform: rotateX(90deg) translateZ(-150px);
  -o-transform: rotateX(90deg) translateZ(-150px);
  transform: rotateX(90deg) translateZ(-150px);
  z-index: -1;
}
.body {
  width: 300px;
}

.stage {
	position: absolute;
  width: 90px;
  height: 90px;
  display: inline-block;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

@-moz-keyframes move-map {
  0% {
    background-position: -849px 0; }

  100% {
    background-position: 0 0; } }

@-webkit-keyframes move-map {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -849px 0; }
}


@-o-keyframes move-map {
  0% {
    background-position: -849px 0; }

  100% {
    background-position: 0 0; } }

@-ms-keyframes move-map {
  0% {
    background-position: -849px 0; }

  100% {
    background-position: 0 0; } }

@keyframes move-map {
  0% {
    background-position: -849px 0; }

  100% {
    background-position: 0 0; } }

#cust #col-11-1{
		background-color: rgba(225,225,225,.95);
    	margin: 10px;
    	min-height: 460px;
	}
.colz{
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
         	transition: .5s;
}

.colzz{
  padding: 3px;
  transition: .5s;
    cursor: pointer;
}

.containerz{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.frontz,
.backz{
  background-size: cover;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  text-align: center;
  min-height: 215px;
  border-radius: 8px;
  border: 1px solid gray;
  box-shadow: inset 3px 3px 5px #8ca4b3;
  color: #fff;
  font-size: 1.5rem;
}

.backz{
  	background-color: #444;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.innerz{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 15px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}
.outerz{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 1;
}
.backz .outerz p{
  padding-left: 5px;
  padding-right: 5px;
  text-align: left;
  font-size: 19px;
  margin-top: -10px;
}
.backz .outerz h3 {
  padding-left: 5px;
  text-align: left;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

.containerz .backz{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.containerz .frontz{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.containerz:hover .backz{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.containerz:hover .frontz{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.frontz {
background: rgb(141,153,177);
background: linear-gradient(135deg, rgba(141,153,177,1) 0%, rgba(69,93,107,1) 100%);
}
.frontz .innerz p{
  font-size: 18px;
  background-color: rgba(41,128,185,.9);
  color: white;
  padding: 5px;
  -webkit-z-index: 2;
  z-index: 2;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.05);
 }
.backz .outerz p{
  font-size: 18px;
  background-color: rgba(88,126,177,.3);
  color: white;
  padding: 5px;
  -webkit-z-index: 2;
  z-index: 2;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.05);
 } 
#ind #col-11-1 {
	background-color: rgba(225,225,225,.95);
	margin-top: 10px;
	min-height: 460px;
}
#ind p {
	font-size: 17px;
	color: #222;
	text-align: justify;
	font-family: Arial;
	padding: 13px;
	padding-left: 30px;
}
#row::after {
content: "";
clear: both;
display: table;	
}
[id*="col-"] {
    float: left;
    border: red solid red;
}
#col-1 {width: 8.33%;}
#col-2 {width: 16.66%;}
#col-2-1 {width: 19%;margin-right: 1%;}
#col-3 {width: 25%;}
#col-4 {width: 33.33%;}
#col-5 {width: 41.66%;}
#col-6 {width: 50%;}
#col-6-1 {width: 42%;
		border: red solid red;
}
#col-7 {width: 58.33%;}
#col-7-1 {width: 66%;}
#col-8 {width: 66.66%;}
#col-8-5{width: 73%;}
#col-9 {width: 75%;}
#col-10 {width: 83.33%;}
#col-11 {width: 91.66%;}
#col-11-1 {width: 97%;margin-left: 10px;}
#col-12 {width: 100%;}
#col-12-4{
	width: 100%;
	margin-left: 0%;
	margin-right: 35%;
	background-color: #fff;
}	

*{
	margin:0;
	padding:0;
	border:0;
	font-family:Arial;
	font-size:14px;
	font-weight:normal;
	color:#555555;
	line-height:28px;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
address{
	font-style:normal;
}

/* CITY */

#city-day{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	/*
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	*/
}
#city-night{ 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	*/
    -webkit-animation-name: daynight-city;
    -webkit-animation-duration: 45s;
	-webkit-animation-iteration-count: infinite;
    animation-name: daynight-city;
    animation-duration: 45s;
	animation-iteration-count: infinite;
}
#city-lights{ 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	*/
    -webkit-animation-name: daynight-city;
    -webkit-animation-duration: 45s;
	-webkit-animation-iteration-count: infinite;
    animation-name: daynight-city;
    animation-duration: 45s;
	animation-iteration-count: infinite;
}
#starry-night{ 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	*/
    -webkit-animation-name: daynight-city;
    -webkit-animation-duration: 45s;
	-webkit-animation-iteration-count: infinite;
    animation-name: daynight-city;
    animation-duration: 45s;
	animation-iteration-count: infinite;
}
#day-clouds{
    position: absolute;
	z-index:0;
    -webkit-animation-name: dayclouds;
    -webkit-animation-duration: 100s;
    -webkit-animation-iteration-count: infinite;
    animation-name: dayclouds;
    animation-duration: 100s;
    animation-iteration-count: infinite;
}
@-webkit-keyframes dayclouds{
    0%{
		opacity:0;
		left:0px; top:15%;
	}
    33%{
		opacity:.5;
		left:20%; top:15%;
	}
    66%{
		opacity:.5;
		left:40%; top:15%;
	}
    100%{
		opacity:0;
		left:60%; top:15%;
	}
}

@keyframes dayclouds{
    0%{
		opacity:0;
		left:0px; top:15%;
	}
    33%{
		opacity:.5;
		left:20%; top:15%;
	}
    66%{
		opacity:.5;
		left:40%; top:15%;
	}
    100%{
		opacity:0;
		left:60%; top:15%;
	}
}

@-webkit-keyframes daynight-city{
    0%{opacity:1}
    33%{opacity:0}
    66%{opacity:0}
    100%{opacity:1}
}

@keyframes daynight-city{
    0%{opacity:1}
    33%{opacity:0}
    66%{opacity:0}
    100%{opacity:1}
}

/* OFFICE */

#office-day{ 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin:0 auto;
	/*
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	*/
}
#office-night{ 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	*/
    -webkit-animation-name: daynight-office;
    -webkit-animation-duration: 45s;
	-webkit-animation-iteration-count: infinite;
    animation-name: daynight-office;
    animation-duration: 45s;
	animation-iteration-count: infinite;
}

@-webkit-keyframes daynight-office{
    0%{opacity:1}
    33%{opacity:0}
    66%{opacity:0}
    100%{opacity:1}
}

@keyframes daynight-office{
    0%{opacity:1}
    33%{opacity:0}
    66%{opacity:0}
    100%{opacity:1}
}

/* PRE-DEFINED */

ul{
	list-style-type:none;
}
header{
	width:100%;
	margin:40px 0 0;
	text-align:center;
}
footer{
	margin: 580px auto 0;
	width: 750px;
	text-align:right;
}
	footer span{
		position:relative;
		top:-7px;
		left:10px;
		font-size:12px;
		font-weight:normal;
		color:#FFF;
	}

/* IDS */

#body-desktop{
	display:block;
}
#body-mobile{
	display:none;
}
#wrapper{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height:500px;
	text-align:center;
}
	#main-content nav aside{
		font-size:14px;
		font-family:CustomFont!important;
		text-align:center;
		color:#FFF;
		width:90%;
		height:45px;
		padding:14px 0 0;
		background: url(../images/navigator-container.jpg) no-repeat center top;
	}
		#main-content nav aside:hover{
			background: url(../images/navigator-container.jpg) no-repeat center bottom;
		}
		/*
		#main-content nav:nth-child(1) aside{
			margin:0 2px;
		}
		#main-content nav:nth-child(2) aside,
		#main-content nav:nth-child(4) aside{
			margin:0 4px;
		}
		#main-content nav:nth-child(3) aside,
		#main-content nav:nth-child(5) aside{
			margin:0 3px;
		}
			#main-content nav:nth-child(1){
				float:left;
				width:152px;
			}
			#main-content nav:nth-child(2),
			#main-content nav:nth-child(4){
				float:left;
				width:156px;
				margin:0 0 0 12px;
			}
			#main-content nav:nth-child(3),
			#main-content nav:nth-child(5){
				float:left;
				width:154px;
				margin:0 0 0 12px;
			}*/
#colorbox{
	top:195px!important;
	bottom:0!important;
	left:-23px!important;
	right:0!important;
	margin:0 auto!important;
	width:836px!important;
	height:445px!important;
}
#cboxContent,
#cboxWrapper{
	position:absolute!important;
	width:836px!important;
	left:21px;
}
#cboxOverlay{
	display:none!important;
}
#subpage{
	float:left;
	width:795px;
	height:407px;
	margin:10px;
}
#our-vision{
	margin:10px 0 0;
	width:795px;
	color:#222;
	text-align:justify;
	float: left;
}

/* CLASSES */

.left{
	float:left;
}
.right{
	float:right;
}
.area390{
	width:390px;
}
.white{
	color:#FFF;
}
.bold{
	font-wieght:bold;
}
.cboxElement{
	display:nonex;
}
.hide{
	display:none;
}
.background-darkblue{
	background:#344155;
	-webkit-box-shadow: inset 0 0 20px 0 #293549;
	-moz-box-shadow: inset 0 0 20px 0 #293549;
	box-shadow: inset 0 0 20px 0 #293549;
}
.background-orange{
	background:#c07400;
	-webkit-box-shadow: inset 0 0 20px 0 #a96600;
	-moz-box-shadow: inset 0 0 20px 0 #a96600;
	box-shadow: inset 0 0 20px 0 #a96600;
}
.background-grey{
	background:#444;
	-webkit-box-shadow: inset 0 0 20px 0 #3A3A3A;
	-moz-box-shadow: inset 0 0 20px 0 #3A3A3A;
	box-shadow: inset 0 0 20px 0 #3A3A3A;
}
	.floorplan-genres aside{
		float:left;
		width: 24.8%;
		padding: .1%;
	}
	.floorplan-genres aside{
		margin:0;
	}
		.two-columns aside address,
		.three-columns aside address,
		.floorplan-genres aside address{
			width:100%;
		}
.contact-area,
.contact-message{
	float:left;
	width:795px;
}
	.contact-area aside ul li{
		color:#000;
	}
	.contact-area aside ul li:nth-child(odd){
		margin:5px 0 0;
	}
		.contact-area aside ul li input,
		.contact-area aside ul li select{
			width:370px;
			padding:3px 5px;
			border-radius:5px;
			-webkit-box-shadow: inset 0 0 10px 0 #bcc6d2;
			-moz-box-shadow: inset 0 0 10px 0 #bcc6d2;
			box-shadow: inset 0 0 10px 0 #bcc6d2;
		}
.contact-message{
	margin:20px 0 0;
}
	.contact-message aside:first-child textarea{
		float:left;
		width:580px;
		padding:7px 10px;
		border-radius:5px;
		-webkit-box-shadow: inset 0 0 10px 0 #bcc6d2;
		-moz-box-shadow: inset 0 0 10px 0 #bcc6d2;
		box-shadow: inset 0 0 10px 0 #bcc6d2;
	}
	.contact-message aside:last-child input{
		float:right;
		width:170px;
		border-radius:5px;
		border:5px solid #e48900;
		background: url(../images/button-shine.png) #e48900 no-repeat top center;
	}
		.contact-message aside:last-child input:hover{
			float:right;
			width:170px;
			border-radius:5px;
			border:5px solid #e43d00;
			background: url(../images/button-shine.png) #e43d00 no-repeat top center;
		}
.submit-button{
	color:#FFF;
	font-size:30px;
	line-height:40px;
	font-weight:bold;
	text-shadow:0 0 20px #a26100;
	padding:60px 0;
	text-align:center;
	cursor: pointer;
}
		#ser #col-10 {
			margin-left: 9%;
			margin-top: 50px;
		}
		#ser #col-10 img {
			background-color: white;
			border: 2px solid lightgray;
			border-radius: 50%;
			margin-top: -40px;
			padding: 5px; 
			box-shadow: 2px 10px 34px -20px rgba(0,0,0,0.75);
			height: 80px;
		}
		#col-3-1 {width: 24%;}
		#ser #col-3-1 {
			background: rgba(225,225,225,.2);
			min-height: 270px;
			margin-right: 1%;
			border-radius: 5px;
			margin-top: 12px;
			box-shadow: inset 0px 0px 20px #778aa0;
		}
		#ser #col-3-1:hover {
			transform: scale(1.1);
		}
		#ser p {
			text-align: justify;
			padding-right: 10px;
			padding-left: 10px;
			color: white;
		}
		#ser h1 {
			text-align: center;
			color: white;
			font-size:19px;
		}
		#ser h2 {
			font-size: 50px;
			text-align: center;
			color: white;
			text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
		}
	.section1 {
	  text-align: center;
	}
	#section2 {
	  text-align: right;
	}
	.h-log {
		margin-top: 50px;
	}
	.h-nav {
		margin-top: 48px;
		margin-left: 10px;
	}
    .p-con {
    	min-height: 670px; 
    }
.bottomMenu {
    position: absolute;
    bottom: -100%;
    width: 100%;
    height: 110%;
    border-top: 1px solid #000;
    background: rgba(1,1,1,.3);
    transition: all 2s;
}
.hide {
    opacity:0;
    top:-100%;
}
.show {
    top:0;
}