* {margin:0px;padding:0px;border:0;outline:0;font-family:Arial;}
body, html {
width:100%;
height:100%;
min-height:100%;
max-height:100%;
font-size:1rem;
}
h1{clear:both;color:#0c1f57;font-size:135%;padding-left:2%;padding-top:2%;}
p{clear:both;color:#0c1f57;font-size:85%;padding-top:1.5%;padding-left:2%;padding-right:2%;}
ul{margin-left:7%;margin-top:1.7%;margin-bottom:0.8%;}
li{font-size:85%;color:#0c1f57;padding-left:1%;}
a{font-size:85%;color:#0c1f57;text-decoration:none;}
a:hover{color:black;}
td{font-size:75%;color:#0c1f57;}
*:focus{outline:none;-moz-outline-style:none;}  
.body-ctr {
max-width:960px;
width:100%;
margin:0 auto;
background-color:#ffffff;
}

.hkmetalproducts-hdr {
width:100%;
position: relative;
}
.hkmetalproducts-hdr img{width:100%;vertical-align:text-bottom;}
.hkmetalproducts-top-menu{
position:absolute;top:2%;left:55%;font-size:150%;
width:43.5%;
text-align:right;
padding-right:1.5%;
}
.hkmetalproducts-top-menu a{
font-size:60%;
color:gainsboro;
cursor:pointer;
text-decoration:none;
padding-left:5%;
}
.hkmetalproducts-top-menu a:hover{color:#ffffff;}

.call-hkmetalproducts{
width:38.5%;
padding-right:1.5%;
text-align:right;
position:absolute;
left:60%;
top:35%;
font-size:95%;
line-height:85%;
font-weight:normal;
color:gainsboro;
}
.call-hkmetalproducts a{
font-size:100%;
color:white;
text-decoration:none;
}
.call-hkmetalproducts a:hover{
font-weight:bold;
}
.call-hkmetalproducts span{
font-size:52%;
font-weight:normal;
color:gainsboro;
}

@media only screen and (max-width: 906px) {
	.hkmetalproducts-top-menu{font-size:150%;}
}
@media only screen and (max-width: 800px) {
	.hkmetalproducts-top-menu{font-size:130%;}
}
@media only screen and (max-width: 640px) {
	.hkmetalproducts-top-menu{font-size:120%;}
}
@media only screen and (max-width: 568px) {
	.hkmetalproducts-top-menu{font-size:100%;}
}
@media only screen and (max-width: 480px) {
	.hkmetalproducts-top-menu{font-size:78%;width:44.5%;padding-right:0.5%;}
	.call-hkmetalproducts{font-size:80%;top:40%;}
}
@media only screen and (max-width: 360px) {
	.hkmetalproducts-top-menu{font-size:70%;}
	.call-hkmetalproducts{font-size:75%;}
}
@media only screen and (max-width: 320px) {
	.hkmetalproducts-top-menu{font-size:62%;}
	.call-hkmetalproducts{font-size:75%;}
}

.content-ctr {
display:block;
}
.content-ctr a {text-decoration:underline;font-size:100%;}
.lst  li{line-height:150%;}
.lst li a{text-decoration:none;}
.lst li a:hover{color:#02bcef;}

.tablem{margin-left:2%;border:1px solid black;}
.tablemhdg td{background-color:#000000;color:white;padding-top:1%;padding-bottom:1%;text-align:center;width:100%;}
.tablehdg td{background-color:#252c79;color:white;padding-top:1.2%;padding-bottom:1.2%;text-align:center;width:100%;}
.tabledat{color:black;padding-top:0.4%;padding-bottom:0.4%;}
.tabledat td:first-child{background-color:#83a1d3;border-left:1px solid gainsboro;}
.tabledat td{padding-left:1%;padding-top:1%;padding-bottom:1%;border-bottom:1px solid gainsboro;border-right:1px solid gainsboro;}

.contact-lhs{float:left;width:60%;}
.contact-rhs{float:left;width:30%;height:100%;padding-top:0.5%;}
.contact-rhs a{text-decoration:underline;font-size:100%;}
.contact-locn{font-size:80%;font-weight:bold;padding-top:4%;padding-bottom:1%;}
.contactus{padding-top:2%;padding-left:2%;}
.contactus label{float:left;width:15%;color:dimgray;}
.contact-lbl{clear:both;float:left;width:14%;font-size:60%;margin-bottom:1%;padding-top:1.5%;}
.contact-fld{margin-left:5%;margin-top:1%;display:inline;float:left;width:80%;font-size:60%;}
.contact-fld input{display:inline;font-family:arial;font-size:90%;margin-right:3%;padding:3px 2px;
	-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;border:1px solid lightgray;}
.contact-fld textarea{-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;border:1px solid lightgray;font-size:90%;}
.contact-fld div{font-size:90%;padding-top:0.5%;}
.contact-btn{clear:both;margin:0px;padding:2% 0% 2% 19%;}
.contact-btn a{text-decoration:none;}
#fullname{width:80%;}
#email{width:60%;}
#phone{width:25%;}
#enquiry{overflow:auto;height:3%;max-height:3%;width:80%;}
#siimage{width:35%;max-width:35%;}
#map{width:350px;height:250px;margin-bottom:4%;margin-top:4%;}
.contactdetail{clear:both;margin:0px;padding-top:2%;}
.contactdetail label{font-size:60%;width:15%;float:left;color:dimgray;}
.contactdetail p{font-size:60%;color:black;}
.submitbtn{font-family:arial;font-size:60%;color:white;background-color:#172f6f;cursor:pointer;text-decoration:none;
position:relative;margin:0px 0.5%;padding-top:2%;padding-bottom:2%;padding-left:3%;padding-right:3%;
-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;border:1px solid dimgray;}
.submitbtn:hover{background-color:#398ace;color:white;border:1px solid lightgray;}
.submitbtn:active{top:1px;}

.footer-ctr{
background-color:#172f6f;
padding-bottom:1%;
}
.footer-links{
float:left;
width:30%;
padding-left:3%;
padding-top:0.7%;
font-size:100%;
}
.footer-links a{
display:block;
padding-top:4.7%;
font-size:70%;
background-color:#172f6f;
border:1px solid #172f6f;
color:gainsboro;
text-decoration:none;
}
.footer-links a:hover{color:#ffffff;}
.footer-copyright{
clear:both;
color:gainsboro;
font-size:65%;
}
@media only screen and (max-width: 320px) {
	.footer-links{font-size:90%;}
}

/*Suckerfish Menus*/
@media only screen and (max-width: 700px) {
.menu-bars{display:block;padding:1% 0% 0% 1.3%;cursor:pointer;text-align:left;}
.menu-bars img{width:10%;}
.menu-ctr{clear:both;margin:0 auto;max-width:100%;width:100%;text-align:center;
background-color:#e1e8fb;}
ul.nav, .nav ul{margin:0 auto;list-style:none;z-index:99;}
ul.nav {width:100%;max-width:100%;}
ul.nav li {float:left;position:relative;background:#e1e8fb;display:inline-block;}
ul.nav a {float:left;box-sizing:border-box;height:100%;display:inline-block;padding-top:0.8vw;padding-bottom:0.8vw;padding-left:1.6vw;padding-right:1.6vw;
text-decoration:none;color:#2f3293;font-size:85%;font-weight:normal;outline:none;}
ul.nav li ul {width:24vw;display:inline;}
ul.nav li ul a{text-align:left;}
.nav li li{width:24vw;height:auto;display:inline-block;}
.nav li li a {box-sizing:border-box;font-size:85%;padding-top:1vw;padding-bottom:1vw;padding-left:7%;padding-right:7%;line-height:105%;}
	ul.nav li {clear:both;}
.nav li li{width:120vw;height:auto;display:inline-block;}
.nav li li a:active {width:120vw;background-color:#2f3293;color:#ffffff;}
.navmain{background-color:#e1e8fb;}
.navmain-lft{background-color:#e1e8fb;}
.navmain-rght{background-color:#2f3293;}
}
@media only screen and (min-width: 700px) { 
.menu-bars{display:none;} 
.menu-ctr{clear:both;margin:0 auto;max-width:100%;width:100%;text-align:center;background-color:#e1e8fb;}
ul.nav, .nav ul{margin:0 auto;list-style:none;z-index:99;}
ul.nav {width:100%;max-width:100%;}
ul.nav li {float:left;position:relative;background-color:#e1e8fb;display:inline-block;}
ul.nav a {float:left;box-sizing:border-box;display:inline-block;padding-top:0.8vw;padding-left:1.4vw;padding-right:1.7vw;padding-bottom:0.8vw;
text-decoration:none;color:#26418e;font-size:85%;font-weight:normal;outline:none;}
.nav li:hover a {color:black;}
ul.nav li ul {width:25vw;position:absolute;top:100%;left:0;margin-left:-999em;border-right:1px solid #999a9a;border-bottom:1px solid #999a9a;}
ul.nav li ul a{text-align:left;}
.nav li:hover ul{margin-left:0%;visibility:visible;}
.nav li li{width:25vw;height:auto;display:inline-block;background:transparent;}
.nav li li a {width:25vw;box-sizing:border-box;font-size:85%;padding-top:1vw;padding-bottom:1vw;padding-left:6%;padding-right:6%;line-height:105%;background-color:#0c2774;}
.navmain{background-color:#e1e8fb;border-right:1px solid #0055bf;}
.navmain-lft{background-color:#e1e8fb;border-right:1px solid #0055bf;}
.navmain-rght{background-color:#e1e8fb;border-left:1px solid gainsboro;}
.nav li:hover li a {color:#e9e9e9;}
.nav li li a:hover {width:25vw;background-color:#8395c7;color:#ffffff;}
}

.slideshow1{width:100%;background: #ffffff url(/hk-metal-products-slideshow/hk-metal-products-twistlock-forgewelded-grating.jpg) no-repeat center top; background-size:100%;}
.slideshow2{width:100%;background: #ffffff url(/hk-metal-products-slideshow/twistlock-forgewelded-safety-gantry.jpg) no-repeat center top; background-size:100%;}
.slideshow3{width:100%;background: #ffffff url(/hk-metal-products-slideshow/twistlock-forgewelded-galvanised-cad-designed-grating.jpg) no-repeat center top; background-size:100%;}
.slideshow4{width:100%;background: #ffffff url(/hk-metal-products-slideshow/stairtreads.jpg) no-repeat center top; background-size:100%;}
.slideshow5{width:100%;background: #ffffff url(/hk-metal-products-slideshow/handrails.jpg) no-repeat center top; background-size:100%;}
.hk-metal-products-content{
clear:both;
background-color:#fcfcfd;
font-size:100%;
color:black;
-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;
padding-left:0.3%;
padding-bottom:3%;
}
.hk-metal-products-ctr{
padding-top:2%;
padding-left:2%;
}
.hk-metal-product{
float:left;
width:32%;
}
.hk-metal-product-img{
margin:0 auto;
width:100%;
text-align:center;
}
.hk-metal-product-img img{
width:90%;
max-width:90%;
}
.hk-metal-product-caption{
margin:0 auto;
width:100%;
text-align:center;
padding-top:0px;
line-height:95%;
font-size:75%;
}
.hk-metal-product-caption a{
clear:both;
padding-top:0px;
color:dimgray;
text-decoration:none;
}
.hk-metal-product-caption a:hover{color:black;}
.hk-metal-products-content-editor{
padding-top:1%;padding-bottom:6%;padding-left:12%;
background-color:white;
}
.grating-list{
margin-left:0.5%;padding-left:0.5%;padding-top:0.5%;
}
.grating-list ul{
padding-left:8%;
}
.grating-list td p{
font-size:100%;
}
.grating-list li{
font-size:90%;
padding-left:3%;
line-height:150%;
}
.grating-list a{
font-size:90%;
text-decoration:underline;
}
.grating-list a:hover{color:black;}

.login-ctr{display:block;text-align:left;margin:35px 10px;padding:0px;font-family:arial;font-weight:bold;font-size:80%;color:#535353;}
.login-option{display:block;text-align:left;margin:20px 0px 20px 32px;padding:0px;font-family:arial;font-weight:bold;font-size:90%;}
.login-option input{float:left;margin:5px;padding:0px 3px;height:30px;line-height:20px;font-family:arial;font-size:90%;border:1px solid gainsboro;color:#716e5e;}
.login-lbl{float:left;margin:0px;padding:1% 1% 2.5% 0%;font-family:arial;font-size:110%;}
.login-btn-ctr{clear:both;margin:0px;padding-top:3%;padding-bottom:3%;}
.login-resetpwd-ctr{display:inline-block;margin:0px;padding-top:0.7%;padding-left:1%;}
#resetpwd{font-family:arial;font-size:80%;font-weight:normal;cursor:pointer;text-decoration:underline;}
.btn-ctr{clear:both;margin:20px 0px;padding:0px;}
.btn{display:inline;border:4px solid #e3e3e3;margin:0px 1px 0px 0px;
padding:7px 20px 8px 20px;font-family:arial;font-size:100%;background-color:#0c2774;color:#eeeeee;cursor:pointer;
-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;border:1px solid dimgray;}
.btn:hover{color:#d5d5d5;}
.btn:active{border:5px solid #d5d5d5;color:#d5d5d5;}

.w100{width:100px;}
.clear{clear:both;}
.hide{display:none;}