/*-----------------------------------------*/
.centralnav img{
     -webkit-animation: slidedown 3s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: slidedown 3s; /* Firefox < 16 */
     -ms-animation: slidedown 3s; /* Internet Explorer */
     -o-animation: slidedown 3s; /* Opera < 12.1 */
     animation: slidedown 3s;
}

@keyframes slidedown {	
    from { top: 900px; }
    to   { top: 0; }
}

/* Firefox < 16 */
@-moz-keyframes slidedown {
    from { top: 900px; }
    to   { top: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes slidedown {
    from { top: 900px; }
    to   { top: 0; }
}

/* Internet Explorer */
@-ms-keyframes slidedown {
    from { top: 900px; }
    to   { top: 0; }
}

/* Opera < 12.1 */
@-o-keyframes slidedown {
    from { top: 900px; }
    to   { top: 0; }
}
/*-----------------------------------------*/
------------------------------------------------------------------------
body {
	margin: auto;
}

/* Central Nav */
.centralnav{
	height: auto;
	width: 100%;
	position: relative;
}

.centralnav #cnproducts{
	position: absolute;
	height: auto;
	width: 20%;
	left: 20%;
	margin-top: 12%;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	z-index: 2;
}

.centralnav #cntechnology{
	position: absolute;
	height: auto;
	width: 20%;
	left: 20%;
	margin-top: 2%;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	z-index: 1;
}

.centralnav #cnfinest{
	position: absolute;
	height: auto;
	width: 20%;
	left: 40%;
	margin-top: 2%;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	z-index: 1;
}

.centralnav #cnworks{
	position: absolute;
	height: auto;
	width: 20%;
	left: 40%;
	margin-top: 12%;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	z-index: 2;
}

.centralnav #cnreach{
	position: absolute;
	height: auto;
	width: 20%;
	left: 60%;
	margin-top: 12%;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	z-index: 2;
}

.centralnav #cnresources{
	position: absolute;
	height: auto;
	width: 20%;
	left: 60%;
	margin-top: 2%;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	z-index: 3;
}

.centralnav #cnproducts:hover, #cntechnology:hover, #cnfinest:hover, #cnworks:hover, #cnreach:hover, #cnresources:hover{
	opacity: 0.4;
}

/* statistics */
.statistics{
	height: auto;
	width: 100%;
	position: relative;
	margin-top: 40%;
}

.statistics hr{
	display: block;
	width: 350px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 3px;
	border-color: orange;
}

.statistics h1{
	position: relative;
	font-family: century gothic;
	font-size: 200%;
	text-align: center;
	z-index: 1;
	padding-top: 4px;
}

.statistics h2{
	position: relative;
	font-family: century gothic;
	font-size: 700%;
	text-align: center;
	z-index: 1;
	padding-top: 5px;
}

.statistics h3{
	position: relative;
	width: 60%;
	font-family: century gothic;
	font-size: 200%;
	text-align: center;
	margin: 0 auto;
	z-index: 1;
}

.statistics h4{
	position: relative;
	font-family: century gothic;
	font-size: 100%;
	color: grey;
	text-align: justify;
	width: 25%;
	z-index: 1;
}

.statistics #mention1 {
	position: absolute;
	margin-left: 20%;
	margin-top: 5%;
}

.statistics #mention2 {
	position: absolute;
	margin-left: 55%;
	margin-top: 12%
}
.statistics #mention3 {
	position: relative;
	margin-left: 20%;
	margin-top: 20%
}

/* page products*/
.pageproducts{
	height: 1000px;
	width: 100%;
	position: relative;
}

.pageproducts h1{
	position: relative;
	font-family: century gothic;
	font-size: 300%;
	text-align: center;
	z-index: 1;
	padding-top: 15%;
	margin-bottom: 5%;
	color: orange;
}

.pageproducts #billboard{
	position: absolute;
	width: 24%;
	height: auto;
	left: 1%;
	z-index: 3;
	opacity: 0.8;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.pageproducts #foodlabel{
	position: absolute;
	width: 24%;
	height: auto;
	left: 1%;
	z-index: 3;
	opacity: 0.8;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.pageproducts #backdrop{
	position: absolute;
	left: 25.5%;
	width: 24%;
	height: auto;
	opacity: 0.8;
	z-index: 3;	
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.pageproducts #banner{
	position: absolute;
	opacity: 0.8;
	left: 50.5%;
	width: 24%;
	height: auto;
	z-index: 3;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.pageproducts #exhibitionbooth{
	position: absolute;
	left: 75.5%;
	opacity: 0.8;
	width: 24%;
	height: auto;
	z-index: 3;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.pageproducts #lightbox{
	position: absolute;
	margin-top: 15%;
	width: 24%;
	height: auto;
	opacity: 0.8;
	left: 1%;
	z-index: 3;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.pageproducts #poster{
	position: absolute;
	width: 24%;
	height: auto;
	opacity: 0.8;
	left: 25.5%;
	margin-top: 15%;
	z-index: 3;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.pageproducts #popupdisplay{
	position: absolute;
	width: 24%;
	height: auto;
	opacity: 0.8;
	margin-top: 15%;
	left: 50.5%;
	z-index: 3;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.pageproducts #pillarwrap{
	position: absolute;
	width: 20%;
	height: auto;
	margin-top: 15%;
	left: 75.5%;
	opacity: 0.8;
	z-index: 3;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.pageproducts #standbanner{
	position: absolute;
	width: 24%;
	height: auto;
	margin-top: 30%;
	left: 1%;
	opacity: 0.8;
	z-index: 3;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.pageproducts #stickersignages{
	position: absolute;
	width: 24%;
	height: auto;
	left: 25.5%;
	margin-top: 30%;
	z-index: 3;
	opacity: 0.8;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}


/* ------------------------------ */

.pageproducts #billboardw{
	position: absolute;
	width: 23.8%;
	height: auto;
	left: 1%;
	z-index: 2;
}

.pageproducts #foodlabelw{
	position: absolute;
	width: 23.8%;
	height: auto;
	left: 1%;
	z-index: 2;
}

.pageproducts #backdropw{
	position: absolute;
	width: 23.8%;
	height: auto;
	left: 25.5%;
	z-index: 2;	
}

.pageproducts #bannerw{
	position: absolute;
	width: 23.8%;
	height: auto;
	left: 50.5%;
	z-index: 2;
}

.pageproducts #exhibitionboothw{
	position: absolute;
	width: 23.8%;
	height: auto;
	left: 75.5%;
	z-index: 2;
}

.pageproducts #lightboxw{
	position: absolute;
	width: 23.8%;
	height: auto;
	margin-top: 15%;
	left: 1%;
	z-index: 2;
}

.pageproducts #posterw{
	position: absolute;
	width: 23.8%;
	height: auto;
	left: 25.5%;
	margin-top: 15%;
	z-index: 2;
}

.pageproducts #popupdisplayw{
	position: absolute;
	width: 23.8%;
	height: auto;
	margin-top: 15%;
	left: 50.5%;
	z-index: 2;
}

.pageproducts #pillarwrapw{
	position: absolute;
	width: 19.8%;
	height: auto;
	margin-top: 15%;
	left: 75.5%;
	z-index: 2;
}

.pageproducts #standbannerw{
	position: absolute;
	width: 23.8%;
	height: auto;
	margin-top: 30%;
	left: 1%;
	z-index: 2;
}

.pageproducts #stickersignagesw{
	position: absolute;
	width: 23.8%;
	height: auto;
	left: 25.5%;
	margin-top: 30%;
	z-index: 2;
}

/* ------------------------------------ */

.pageproducts #billboard:hover{
	opacity: 0.3
}

.pageproducts #foodlabel:hover{
	opacity: 0.3
}

.pageproducts #backdrop:hover{
	opacity: 0.3
}

.pageproducts #banner:hover{
	opacity: 0.3
}

.pageproducts #exhibitionbooth:hover{
	opacity: 0.3
}

.pageproducts #lightbox:hover{
	opacity: 0.3
}

.pageproducts #poster:hover{
	opacity: 0.3
}

.pageproducts #popupdisplay:hover{
	opacity: 0.3
}

.pageproducts #pillarwrap:hover{
	opacity: 0.3
}

.pageproducts #standbanner:hover{
	opacity: 0.3
}

.pageproducts #stickersignages:hover{
	opacity: 0.3
}

/* ------------------ pagetechnology----------------------*/

.pagetechnology {
	height: 400px;
	width: 100%;
	position: relative;
}

.pagetechnology #banner1{
	position: absolute;
	width: 30%;
	left: 5%;
	top: 10%;
}

.pagetechnology #banner1:hover{
	position: absolute;
	width: 30%;
	left: 5%;
	top: 10%;
	opacity: 0.8;
}

.pagetechnology h1{
	position: relative;
	font-family: century gothic;
	font-size: 300%;
	text-align: left;
	left: 40%;
	z-index: 1;
	padding-top: 5%;
	color: navy;
}

.pagetechnology #technologydescription{
	position: relative;
	width: 50%;
	font-family: century gothic;
	font-size: 100%;
	text-align: justify;
	z-index: 1;
	color: black;
	opacity: 0.8;
	left: 40%;
}

/* ------------------ pagefinest----------------------*/

.pagefinest {
	height: 650px;
	width: 100%;
	position: relative;
}

.pagefinest #banner2{
	position: absolute;
	width: 30%;
	left: 65%;
	top: 20%;
}


.pagefinest h1{
	position: relative;
	font-family: century gothic;
	font-size: 300%;
	text-align: left;
	z-index: 1;
	padding-top: 0;
	left: 10%;
	color: #CE991B;
}

.pagefinest #finestdescription{
	position: relative;
	width: 50%;
	font-family: century gothic;
	font-size: 100%;
	text-align: justify;
	z-index: 1;
	color: black;
	opacity: 0.8;
	left: 10%;
}

/* ------------------ pageworks----------------------*/

.pageworks {
	height: 600px;
	width: 100%;
	position: relative;
}


.pageworks h1{
	position: relative;
	font-family: century gothic;
	font-size: 300%;
	text-align: center;
	z-index: 1;
	padding-top: 5%;
	color: grey;
}

.pageworks #smrt{
    position: absolute;
	width: auto;
	height: 10%;
	left: 10%;
        padding-top: 2%;
}

.pageworks #sbs{
	position: absolute;
	width: auto;
	height: 20%;
	left: 30%;
}

.pageworks #comfortdelgro{
	position: absolute;
	width: auto;
	height: 10%;
	left: 50%;
	margin-top: 3%;
}

.pageworks #singaporeexchange{
	position: absolute;
	width: auto;
	height: 15%;
	left:6%;
	margin-top: 10%;
}

.pageworks #samsung{
	position: absolute;
	width: auto;
	height: 20%;
	left: 25%;
	margin-top: 20%;
}

.pageworks #ici{
	position: absolute;
	width: auto;
	height: 20%;
	left: 85%;
	margin-top: 10%;
}
.pageworks #lg{
	position: absolute;
	width: auto;
	height: 20%;
	left: 50%;
	margin-top: 10%;
}

.pageworks #goahead{
	position: absolute;
	width: auto;
	height: 30%;
	left: 26%;
	margin-top: 8%;
}

.pageworks #nus{
	position: absolute;
	width: auto;
	height: 20%;
	left: 47%;
	margin-top: 20%;
}

.pageworks #capitaland{
	position: absolute;
	width: auto;
	height: 20%;
	left: 67%;
	margin-top: 10%;
}

.pageworks #transitlink{
	position: absolute;
	width: auto;
	height: 20%;
	left: 10%;
	margin-top: 20%;
}

.pageworks #singhealth{
	position: absolute;
	width: auto;
	height: 20%;
	left: 70%;
	margin-top: 20%;
}

.pageworks hr{
	display: block;
	width: 90%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 3px;
	border-color: orange;
}


/*------------Resources---------------------*/
.resources #unavailable{
	font-family: century gothic;
	font-size: 250%;
}

/*------------contact---------------------*/
.contact #maps{
	position: absolute;
	width: 100%;
	padding-top: 2%;
	height: auto;
	opacity: 0.8;
}

.contact #contact{
	background: black;
	position: absolute;
	height: 250px;
	width: 300px;
	text-align: center;
	font-family: century gothic;
	font-size: 100%;
	z-index: 1;
	color: white;
	opacity: 0.5;
	margin-top: 15%;
	margin-left: 65%;
}

.contact a{
	font-family: century gothic;
	font-size: 100%;
	color: white;
	text-decoration: none;
}