@charset "utf-8";
/*
	www.artwise.com.my
	designed by artwise creatives
	developed by heymasta
	dated on 5/6/2015
*/
@media only screen and (min-width:500px) and (max-width:1000px){
	.hdNav{width:90%; height:20%; background-color:#666; padding:2% 5%; float:left; text-align:center; font-family:'Homizio'; font-size:90%; font-weight:bold; text-transform:uppercase;}
.hdNav ul{list-style:none; margin:0 auto;}
.hdNav ul li{display:inline; padding:0 2%; letter-spacing:3px;}
.hdNav a:hover, a:active, .active a:link, .active a:visited{text-shadow:none;}
.hdNav .active{color:#DDD;}
.hdNav a:link, a:visited{display:inline-block; text-decoration:none; color:#DDD;}
.hdNav a:hover{color:#0CC;}
.ctText a .ctColumn1{width:100%; font-size:80%;}
	.ctText a:hover .ctColumn1{width:100%; font-size:80%;}
	h3{font-size:300%;}
	.ctText a .bg{background-image: url(../img/bordersmall.png); background-position:left; background-repeat:no-repeat;}

.ftColumn-1st{width:0; height:0; float:left; padding:0; font-family:'Homizio'; letter-spacing:0; font-size:0%; color:#666; font-weight:normal;}
.ftColumn-2nd{width:75%; height:100%; float:left; text-align:left;   margin:2% 5% 0 0; font-family:'Homizio'; letter-spacing:2px; line-height:120%; font-size:80%; color:#666; font-weight:bold;}
.ftColumn-end{width:20%; height:100%; margin-right:0; float:left; text-align:center;}
	.ftColumn-end img{width:100%;}
	.tdTitle label em{font-family:'Segan'; font-size:50%;}
	
	
	.clearfix:after {
    display:block;
    clear:both;
}
 
/*----- Top Level -----*/
.menu > ul > li {
    display:inline-block;
    position:relative;
	top:0;
}
 
.menu > ul > li > a {
    display:inline-block;
}
 
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
 
.sub-menu {
    width:250px;
    padding:30% 0 30% 0;
	padding-right:5px;
    position:absolute;
    top:150%;
    left:-70px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    background: url(../img/blank.png);
}
 
.sub-menu li {
    display:block;
    font-size:90%;
}
 
.sub-menu li a {
	text-align:center;
    padding:2% 0;
    display:block;
}
 
.sub-menu li a:hover, .sub-menu .current-item a {
    color:#0FF;
}
}

@media only screen and (min-width:200px) and (max-width:500px){

/*page*/
	.header, .content, .footer{width:100%; height:100%; float:right; margin-right:0; padding-right:0;}
	.hdNav{width:100%; height:20%; background-color:#666; padding:0; float:left; text-align:center; font-family:'Homizio'; font-size:100%; font-weight:bold; text-transform:uppercase; line-height:180%;}
	.hdNav ul{list-style:none; margin:0 auto; padding-left:0;}
	.hdNav ul li{display:block; width:100%; padding:0; margin:0; letter-spacing:3px;}
	.hdNav a:hover, a:active, .active a:link, .active a:visited{text-shadow:none;}
	.hdNav .active{color:#DDD; background:#CCC;}
	.hdNav a:link, a:visited{display:block; text-decoration:none; color:#DDD;}
	.hdNav a:hover{color:#0CC;}
	
	.content{padding:50% 0 0 0;}
	h1{font-size:80%;}
	h2{font-size:50%; letter-spacing:2px;}
	h3{font-size:180%;}
	p{font-size:95%;}
	.ctText a .ctColumn1{font-size:70%; letter-spacing:1px;}
	.ctText a:hover .ctColumn1{font-size:70%; letter-spacing:1px;}

	.svLeft{float:left; width:48%; height:100%; padding-right:2%; font-size:70%;}
	.svLeft h1{text-align:right;}
	.svRight{float:left; width:48%; height:100%; padding-left:2%; font-size:70%;}
	.svRight h1{text-align:left;}
	
	.footer{width:90%; height:100%; padding:5% 5%; margin:auto 0;}
	.ftTop{width:90%; height:90%; float:left; border-top:1px #999 solid; border-bottom:1px #999 solid; padding:5% 5%;}
	.ftColumn-1st{width:0; height:0; float:left; padding:0 0 0 0; font-family:'Homizio'; letter-spacing:0; font-size:0; color:#666; font-weight:normal;}
	.ftColumn-2nd{width:100%; height:100%; float:left; text-align:left;  padding:0; font-family:'Homizio'; letter-spacing:2px; line-height:150%; font-size:60%; color:#666; font-weight:bold;}
	
	.ftColumn-end{width:100%; height:100%; margin:2% 0 0 0; float:left; text-align:left;}
	.ftColumn-end img{width:25%; padding:3% 0 0 0;}
	.ftCredit{width:100%; height:10%; float:left; padding:5% 0 0 0; font-family:'Segan'; font-size:70%; color:#333;}
	
	.content-2nd{padding-top:0;}
	.abLeft{float:left; width:48%; height:100%; padding:3% 1% 0 1%; text-align:left;}
	.abRight{float:right; width:50%; height:100%; padding:0; text-align:right;}
	.abRight img{width:100%;}
	
	.table{width:100%; height:100%; padding:0;}
	.tdLeft{width:100%; height:100%; float:left;}
	.tdRight{width:100%; height:100%; float:left;}
	.tdBottom{width:100%; height:100%; float:left; text-align:center;}
	.tdTitle{width:100%; height:100%; padding:5% 0 0 0;}
	.tdTitle label{font-family:'Doris'; font-size:80%;}
	.tdTitle label em{font-family:'Segan'; font-size:50%;}
	.tdInput{width:100%; height:100%;}
	.tdInput input, .tdInput textarea, .tdInput select, .tdInput select option{font-family:Arial, Helvetica, sans-serif; font-size:100%;}
	.tdBottom{margin-top:5%;}
	
	.ctText a .ctColumn1{width:76%; height:100%; padding:7% 5%; margin:0 7%; float:left; font-family:'Homizio'; font-size:80%; font-weight:bolder; color:#000; text-align:center; text-transform:uppercase; letter-spacing:1px;}
	.ctText a:hover .ctColumn1{width:76%; height:100%; padding:7% 5%; margin:0 7%; float:left; font-family:'Homizio'; font-size:80%; font-weight:bolder; color:#666; text-align:center; text-transform:uppercase; letter-spacing:1px; }
	.ctText a .a, .ctText a .d{background-color:#BBB;}
	.ctText a .b, .ctText a .c{background-color:#CCC;}
	.ctText a .bg{background-image:url(../img/border.png); background-position:center; background-repeat:no-repeat;}
	
/*dropdown*/
	.clearfix:after {
    display:block;
    clear:both;
}
 
/*----- Top Level -----*/
.menu > ul > li {
    display:inline-block;
    position:relative;
	top:0;
}
 
.menu > ul > li > a {
    display:inline-block;
}
 
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
 
.sub-menu {
    width:0;
    padding:0;
	padding-right:5px;
    position:absolute;
    top:0;
    left:0;
    z-index:0;
    opacity:0;
    transition:opacity linear 0.15s;
}
 
.sub-menu li {
    display:block;
    font-size:0;
}
 
.sub-menu li a {
	text-align:center;
    padding:0;
    display:block;
}
 
.sub-menu li a:hover, .sub-menu .current-item a {
    color:#FFF;
}
}