/* CSS Document */


/*-------Base-------*/
h1 { font-size:36px; }
h2 { font-size:30px; }
h3 { font-size:24px; }
h4 { font-size:18px; }
h5 { font-size:14px; }
h6 { font-size:12px; }

body, section {
	margin:0;
	padding:0;
	color: white;
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
	font-weight: 100;
}

li {
	text-decoration: none;
	list-style: none;
}

a {
	color: white;
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
	font-weight: 300;
	text-decoration: none;
}

.bgImage {
	background-image: url(../imgs/newBackground2.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


.crossfade > figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}

.crossfade > figure:nth-child(1) { background-image: url('../imgs/newBackground2.jpg'); }
.crossfade > figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url('../imgs/newBackground3.jpg');
}
 
.crossfade > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('../imgs/newBackground4.jpg');
}


@keyframes
imageAnimation {  0% {
 animation-timing-function: ease-in;
 opacity: 0;
}
 8% {
 animation-timing-function: ease-out;
 opacity: 1;
}
 17% {
 opacity: 1
}
 60% {
 opacity: 0
}
 100% {
 opacity: 0
}
}



.mainContainer {
	background-color: #01172C;
	margin:0 auto 0;
	padding: 0px;
	width: 100%;
	min-width: 800px;
	position: relative;	
}

.container {
	margin:50px 0px 0px 50px;
	display:inline-block;
	position: relative;
	width: 90%;
	min-width: 800px;
}


.porosusLogo {
	background-image: url(../imgs/porosus-logo.svg);
	background-repeat: no-repeat;
	width: 50%;
	height: 50px;
	position: relative;
	display: inline-block;
	margin-bottom: 30px;
}

.webLang {
	display: inline-block;
	float: right;
	width: auto;
	margin-left: 10px;
	
}

.webLang a {
	transition:all ease-in-out 0.15s;
	-webkit-transition:all ease-in-out 0.15s;
	-moz-transition:all ease-in-out 0.15s;
	-o-transition:all ease-in-out 0.15s;
	float: right;
}

	.webLang a:hover {
		letter-spacing: 1pt;
		font-weight: 500;
	}

.p-btn-custom {
	display: inline-block;
	float: right;
	-webkit-transition:all ease-in-out 0.15s;
	-moz-transition:all ease-in-out 0.15s;
	-o-transition:all ease-in-out 0.15s;
}

.p-btn-custom a {
	transition:all ease-in-out 0.15s;
	-webkit-transition:all ease-in-out 0.15s;
	-moz-transition:all ease-in-out 0.15s;
	-o-transition:all ease-in-out 0.15s;
	width: 50px;
	cursor: pointer;
	padding: 6px 22px;
	border-radius: 50px;
	background-color: #011723;
}
.p-btn-custom a:hover {
	padding: 6px 25px;
	border-radius: 50px;
	background-color: #012436;
}


.navContainer {
	width: 50%;
	display: block;
	clear: both;
}

.navContainer li {
	margin-top: 10px;
}

.navContainer li a {
	font-size: 9pt;
	text-shadow: 5px 5px 40px black;
	letter-spacing: 1pt;
	transition:all ease-in-out 0.15s;
	-webkit-transition:all ease-in-out 0.15s;
	-moz-transition:all ease-in-out 0.15s;
	-o-transition:all ease-in-out 0.15s;
}

	.navContainer li a:hover {
		margin-left:5px;
		letter-spacing: 2pt;
		font-weight: 500;
	}

.menSubMenu {
	transition:all ease-in-out 0.3s;
	-webkit-transition:all ease-in-out 0.3s;
	-moz-transition:all ease-in-out 0.3s;
	-o-transition:all ease-in-out 0.3s;
	display: none;
	margin-left: 20px;
	opacity: 0;
}

.womenSubMenu {
	transition:all ease-in-out 0.15s;
	-webkit-transition:all ease-in-out 0.15s;
	-moz-transition:all ease-in-out 0.15s;
	-o-transition:all ease-in-out 0.15s;
	display: none;
	opacity: 0;
	margin-left: 20px;
}

.menuSwitch {
	transition:all ease-in-out 0.5s;
	-webkit-transition:all ease-in-out 0.5s;
	-moz-transition:all ease-in-out 0.5s;
	-o-transition:all ease-in-out 0.15s;
	display: block;
	opacity: 1;
}




.footer {
	width: 98%;
	min-width: 800px;
	position: absolute;
	bottom: 0px;
	background: #021722;
	height: 20px;
	padding: 10px 0px 10px 2%;
}

.footerLeft {
	width: 70%;
	float: left;
	display: block;
}

.footerLeft li {
	float: left;
	margin-left: 10px;
}

.footerLeft li:first-child {
	margin-left: 0px;
}

.footerLeft li a {
	font-size: 8pt;
	letter-spacing: 1pt;
	transition:all ease-in-out 0.15s;
	-webkit-transition:all ease-in-out 0.15s;
	-moz-transition:all ease-in-out 0.15s;
	-o-transition:all ease-in-out 0.15s;
}

.footerLeft li a:hover {
	letter-spacing: 2pt;
	margin-left: 5px;
}

.footerRight {
	width: 30%;
	float: right;
	display: block;
	clear: both;
	font-size: 8pt;
}

.footerRight p {
	float: right;
	margin-right: 8%;
	margin-top: -13px;
	position: relative;
}

.footerRight span {
	position: relative;
	float: left;
	padding-right: 10px;
	
}

.brand-malaysia-logo img{
	width: 20px;
	margin-top: -3px;
}

@media (max-width: 800px){
		
		.footer {
			width: 98%;
			position: absolute;
			bottom: 0px;
			background: #021722;
			height: 30px; 
			min-width: 800px;
			
		}
		.footerLeft {
			width: 100%;
			display: inline;
			position: relative;
			margin-bottom: 5px;

		}
		
		.footerLeft ul {
			width: auto;
			margin: 0px auto;
			position: relative;
			display: table;
		}
	
		.footerLeft li {
			float: left;
			margin-left: 10px;
			text-align: center;
		}
		.footerLeft li a {
			font-size: 8pt;
			letter-spacing: 0pt;
			transition:all ease-in-out 0.15s;
			-webkit-transition:all ease-in-out 0.15s;
			-moz-transition:all ease-in-out 0.15s;
			-o-transition:all ease-in-out 0.15s;
		}

		.footerLeft li a:hover {
			letter-spacing: 0pt;
			margin-left: 0px;
		}

	
	
		.footerRight {
			width: 100%;
			font-size: 8pt;
		}
		.footerRight p {
			width:270px;
			float: none;
			margin-right: auto;
			margin-left: auto;
			margin-top: 0px;
			text-align: center;
		}
	
}