body{
margin: 0;
padding:0;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px;
word-spacing: -2px;
background-image: url("http://www.hkosl.com/jamie/fba/img/fbaBG.jpg");
background-size:contain;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center 50px;
word-spacing: 0px;
overflow: hidden;
overflow-y: scroll;
}
.TopBar{
position: relative;
width: 100%;
height: 20px;
background-color: #010127;
padding: 10px 0;
color: #fff;
}
.container{
width: 1000px;
height: auto;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0;
padding-right: 15px;
padding-bottom: 0;
padding-left: 15px;
}
.TopSection , .Navigation{
float: left;
width: 100%;
}
.Floatleft{
position: relative;
float: left;
}
.FloatRight{
position: relative;
float: right;
}
.TopText , .TopIcon , .HKG{
float: left;
}
.TopIcon img{
width: auto;
height: 14px;
margin-top: 3px;
margin-right: 6px;
}
.TopPhone , .TopEmail , .BigLogo{
float: left;
}
.TopEmail{
margin-left: 20px;
}
.HKG img{
width: auto;
height: 14px;
margin-top: 3px;
margin-right: 2px;
}
.DateTime{
width: auto;
float: right;
text-align: right;
}
#dateDiv{
width: 250px;
}
.NavigationBG{
background-color: #f6f6f6;
padding: 15px 0 10px 0;
height: 80px;
}
.BigLogo img{
width: auto;
height: 70px;
}
#drop-nav{
margin-top: 15px;
}
ul {list-style: none;padding: 5px 0 0 0;margin: 0px;font-size: 14px;}
ul li {display: block;position: relative;float: left;border:0px}
li ul {display: none;}
ul li a {display: block;background: #f6f6f6;padding: 6px 12px 6px 12px;text-decoration: none;
white-space: nowrap;color: #045184; margin: 0 3px;}
ul li a:hover {background: #0085fc; color: #fff;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #0085fc; color: #fff;}
li:hover li a {background: #fff; color: #0085fc; border: 1px solid #c2c2c2; width: 85px; text-align: center;}
li:hover li a:hover {background: #0085fc; color: #fff;}
#drop-nav li ul li {border-top: 0px;}
.active a {display: block;background: #0085fc;padding: 6px 12px 6px 12px;text-decoration: none;
white-space: nowrap;color: #fff; margin: 0 3px;}
.MainSection{
padding:20px 0;
height: auto;
}
.HomeText{
float: left;
width: 710px;
font-size: 15px;
color: #3B3A3A;
line-height: 150%;
padding: 10px;
}
.SectionHeading{
margin:0 auto;
width: 800px;
text-align: center;
margin-top: 20px;
color: #333333;
}
.ServicesAim{
height: auto;
}
h11{
font-size: 40px;
color: #122a80;
letter-spacing: -2px;
}
.SectionHeading hr{
width: 50px;
border: 0;
border-top: 5px solid #122a80;
margin-bottom: 10px;
}
.Blog{
background-color: red;
width: 1000px;
overflow: hidden;
}
.colLG{
position: relative;
float: left;
width: 25%;
}
.Service{
position: relative;
float: left;
width: 212px;
margin: 10px;
padding: 10px;
background-color: rgba(248, 248, 248, 0.8);
height: auto;
border-radius: 10px;
border: 2px solid #f8f8f8;
box-shadow: 0 3px 5px 1px #bbbbbb;
}
.Service:hover{
border: 2px solid #122a80;
}
.Service img{
width: 100%;
height: auto;
}
.ServiceTitle{
font-size: 16px;
font-weight: bold;
color: #122a80;
letter-spacing: -0.5px;
}
.Service a{
text-decoration: none;
}
hr.style11 {
height: 6px;
background: url(../img/icon/serviceHR.png) repeat-x 0 0;
border: 0;
}
.serviceText{
text-align: justify;
color: #212121;
line-height: 150%;
font-size: 14px;
letter-spacing: -0.5px;
}
.ServiceRow{
width: 996px;
height: auto;
margin: 40px 0;
overflow: hidden;
background-color: rgba(233, 233, 233, 0.6);
border: 2px solid rgba(233, 233, 233, 1);
box-shadow: 0 4px 10px 0px #cfcfcf;
}
.ServiceRow:hover{
border: 2px solid rgba(18, 42, 128, 1);
}
.DevelopImg , .DevelopImgII , .DevelopImgIII{
width: 498px;
float: left;
}
.DevelopText , .DevelopTextII , .DevelopTextIII{
float: left;
width: 418px;
padding-top: 30px;
padding-left: 40px;
padding-right: 40px;
}
.DevelopImg{ height: 300px;}
.DevelopText{ height: 270px;}
.DevelopImgII{ height: 360px;}
.DevelopTextII{ height: 330px;}
.DevelopImgIII{ height: 400px;}
.DevelopTextIII{ height: 370px;}
.DevelopImg img , .DevelopImgII img , .DevelopImgIII img{
width: 100%;
height: 100%;
object-fit:cover;
object-position: 15% 50%;
}
.ServiceRow p{
text-align: justify;
font-size: 14px;
line-height: 150%;
}
h12{
font-size: 24px;
color: #122a80;
font-weight: bold;
letter-spacing: -2px;
}
.image-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
text-align: center;
}
.image-overlay-content {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0; }
.ImgCat {
padding-top: 20%;
color: #fff;
font-size: 16px;
opacity: 0;
transition: all 0.2s linear; }
.overlay-fade-in img {
transition: all 0.2s linear; }
.overlay-fade-in .image-overlay-content {
opacity: 0;
background-color: rgba(0, 0, 0, 0.6);
transition: all 0.4s ease-in-out; }
.overlay-fade-in .button:hover {
box-shadow: 0 0 5px #000; }
.overlay-fade-in:hover img {
transform: scale(1.2); }
.overlay-fade-in:hover .image-overlay-content {
opacity: 1; }
.overlay-fade-in p, .overlay-fade-in .button {
opacity: 1; }
.overlay-fade-in:hover p {
transition-delay: 0.1s; }
.overlay-fade-in:hover .button {
transition-delay: 0.2s; }
.ContactUsDetails{
margin-top: 10px;
float: left;
width: 100%;
padding: 30px 0;
line-height: 150%;
font-size: 15px;
letter-spacing: -0.5px;
}
.Location{
float: left;
width: 36%;
}
.ContactPerson{
float: left;
width: 32%;
}
h13{
font-size: 22px;
font-weight: bold;
letter-spacing: -1px;
}
h14{
font-size: 18px;
font-weight: bold;
letter-spacing: -1px;
}
h15{
font-size: 26px;
font-weight: bold;
letter-spacing: -2px;
}
.footer{
float: left;
margin-top: 50px;
width: 100%;
background-color: #010127;
padding: 10px 0;
text-align: center;
color: #fff;
}
footer{
position: absolute;
bottom: 0;
width: 100%;
background-color: #010127;
padding: 10px 0;
text-align: center;
color: #fff;
}