@charset "utf-8";
/*
* OneSolution V2.0
* www.onesolution.com.hk
* Last updated: 2014-09-25 @moowong
* Last remark: grid.css fixed iPhone 6;
*/
/* Import
================================================== */
@import url("reset.css");
@import url("gird.css");
@import url("navegation.css");
@import url("slider.css");
@import url("ie.css");
/* Basic Styles
================================================== */
::-moz-selection {
color: #2b505e;
background: #aae0fe;
}
::selection {
color: #2b505e;
background: #aae0fe;
}
body {
background: #f9fcfd;
font-family: "Titillium Web", "Microsoft JhengHei", sans-serif, Arial, Helvetica;
font-size: 14px;
font-weight: 400;
color: #6b7881;
overflow: visible;
-webkit-font-smoothing: antialiased;
/* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* ===== Framework ===== */
#wrapper {
position: relative;
}
a:active,
a:hover {
outline: 0;
}
a {
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
color: inherit;
outline: 0;
text-decoration: none;
}
/* ===== Typography ===== */
a:hover {
color: #1aaeff;
}
b {
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
h1 {}
h2 {
font-size: 30px;
font-weight: 700;
color: #0069b4;
padding: 10px 20px;
margin: 0 0 10px 0;
}
h6 {
color: #0069b4;
font-size: 24px;
padding: 0 0 0 20px;
}
.tbu {
color: #007dc3;
font-weight: 600;
}
/* ===== Misc ===== */
.fl {
float: left;
}
.fr {
float: right;
}
.hide {
display: none !important;
}
.shadowFull {
width: 100%;
height: auto;
}
.nobg {
background: none !important;
}
.dotbg {
background: url("../images/bg_dot_01.png") repeat center;
}
.wtbg {
background: #fff;
}
.bubg {
background: #e1f0f4;
}
.bubg ul li,
.bubg p {
color: #394b57;
}
.shadowFull {
width: 100%;
height: 30px;
opacity: 0.6;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=60);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
.mb_0 {
margin-bottom: 0px !important;
}
.client_pd {
padding: 5px 0 20px 0;
}
/* Header
================================================== */
#header {
background: #fff;
position: relative;
display: block;
height: 100px;
width: 100%;
vertical-align: middle;
z-index: 999;
}
/* pinned */
/* #header.pinned {
position: fixed!important;
top: 0;
opacity: 0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.2);
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.2);
}
*/
#header .main_logo {
display: block;
position: relative;
width: 280px;
top: 24px;
}
.main_logo img {
width: 100%;
height: auto;
}
#header .toolbar {
padding: 0;
height: 30px;
width: 320px;
position: absolute;
top: 15px;
right: 0;
}
.searchbox {
position: relative;
min-width: 26px;
width: 0%;
height: 26px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
-ms-transition: width 0.3s;
-o-transition: width 0.3s;
transition: width 0.3s;
}
.searchbox-input {
top: 0;
right: 0;
border: 0 !important;
outline: 0 !important;
background: url("../images/bg_top_search.png") no-repeat left center !important;
width: 120px;
height: 26px;
margin: 0;
padding: 0px 30px 0px 30px !important;
font-size: 14px;
color: #06a2ff;
}
.searchbox-input::-webkit-input-placeholder {
color: #6b7880;
}
.searchbox-input:-moz-placeholder {
color: #6b7880;
}
.searchbox-input::-moz-placeholder {
color: #6b7880;
}
.searchbox-input:-ms-input-placeholder {
color: #6b7880;
}
.searchbox-icon,
.searchbox-submit {
width: 26px;
height: 26px;
display: block;
position: absolute;
top: 0;
right: 0;
padding: 0;
margin: 0;
border: 0;
outline: 0;
text-align: center;
cursor: pointer;
background: url("../images/icn_search.png") no-repeat left center;
background-size: 26px 26px;
border-right: 1px solid #9cb0bd;
}
.searchbox-open {
width: 180px;
}
/* pls change it later, only support 1 social icon now - 2014/09/04 */
.social_bookmarks {
position: relative;
float: right;
margin: 0 0 0 10px;
}
.social_bookmarks .social_fb {
display: block;
height: 26px;
width: 26px;
background: url("../images/icon_top_fb.png") no-repeat right top;
background-size: 70px 26px;
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
.social_bookmarks .social_fb:hover,
.social_bookmarks .social_fb:active {
background: url("../images/icon_top_fb.png") no-repeat left top;
background-size: 70px 26px;
}
#header #main_menu {
float: right;
position: relative;
top: -6px;
}
/* Content
================================================== */
.content {
position: relative;
height: auto;
margin-bottom: 30px;
min-height: 280px;
}
.general {
position: relative;
padding-top: 15px;
}
/* PROVIDE */
.provide_item {}
.provide_item ul {}
.provide_item li {}
.provide_item li img {
width: 100%;
height: auto;
}
.provide_item h2 {
text-align: center;
font-size: 18px;
font-weight: 700;
font-style: italic;
color: #394b57;
line-height: 22px;
background: url("../images/bg_provide_tit.png") no-repeat;
margin: 15px auto 5px auto;
}
.provide_item li:nth-child(1) h2 {
background-position: center 0;
}
.provide_item li:nth-child(2) h2 {
background-position: center -70px;
height: 65px;
margin-top: -8px;
}
.provide_item li:nth-child(3) h2 {
background-position: center -162px;
}
.provide_item li:nth-child(4) h2 {
background-position: center -230px;
}
/* enquiry */
.enquiry {
position: relative;
min-height: 220px;
color: #fff;
text-align: center;
letter-spacing: 1px;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
background: url("../images/bg_blue_02.jpg") no-repeat center;
background-size: 100% 100%;
}
.enquiry .dotbg {
min-height: 220px;
background: url("../images/bg_dot_02.png") repeat center;
}
.enquiry .container-12 {
padding: 10px 0 25px 0;
}
.enquiry h3 {
font-weight: 600;
line-height: 40px;
margin: 10px auto 20px auto;
}
.enquiry h3 span {
display: inline-block;
height: 52px;
width: 52px;
position: relative;
top: 15px;
margin: 0 10px;
background: url("../images/sprite-icons_01.png") no-repeat center -488px;
}
.enquiry p {
font-size: 24px;
line-height: 30px;
padding: 0;
margin: 0 auto 25px auto;
}
/* ABOUT US */
#aboutus {
padding: 80px 0 60px 0;
background: url("../images/bg_aboutus.png") #f0f0f1 no-repeat center 20px;
}
#aboutus h3 {
color: #394b57;
font-size: 28px;
font-weight: 600;
letter-spacing: 1px;
margin: 0px 0 25px 10px;
padding-bottom: 15px;
background: url("../images/sprite-box_outline.png") no-repeat left bottom;
}
#aboutus p {
line-height: 26px;
padding: 10px 30px 10px 0px;
color: #6b7880;
font-size: 1.1rem;
}
#aboutus .our_mission {
font-family: "Times New Roman", Times, serif;
font-style: italic;
color: #007dc3;
font-size: 21px;
}
#aboutus .grid-6 img {
width: 140px;
height: auto;
margin: 10px 10px 10px 0;
}
/* CONTACT US */
#contactus {
background-color: #081e2d;
padding: 80px 0 60px 0;
position: relative;
}
#contactus h3 {
color: #fff;
font-size: 28px;
font-weight: 600;
letter-spacing: 1px;
margin: 0px 0 25px 10px;
padding-bottom: 15px;
background: url("../images/sprite-box_outline.png") no-repeat left bottom;
}
#contact_form {
margin-right: 30px;
}
#contact_form label {
color: #fff;
font-size: 24px;
margin: 10px 0 10px 0;
display: block;
}
#contact_form label.error {
color: #fff;
font-size: 14px;
margin: 10px 0 10px 0;
display: block;
clear: both;
}
#contact_form input[type="text"] {
outline: none;
line-height: 1.5;
display: block;
width: 100%;
background-color: #ffffff;
border: none;
padding: 10px;
margin-bottom: 10px;
color: #6b7880;
font-weight: 600;
-webkit-appearance: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#contact_form input#verification {
width: 100px;
float: left;
margin: 10px 10px 20px 0;
}
#contact_form input[type="submit"] {
outline: none;
line-height: 1.5;
display: block;
width: auto;
background-color: #0082c8;
border: none;
padding: 5px 20px;
margin: 0 0 0 0;
color: #fff;
text-align: center;
font-weight: 700;
font-size: 20px;
cursor: pointer;
-webkit-appearance: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#contact_form input[type="submit"]:hover,
#contact_form input[type="submit"]:active {
background: #00a4e0;
}
#contact_form textarea {
outline: none;
line-height: 1.5;
display: block;
width: 100%;
min-height: 100px;
background-color: #ffffff;
border: none;
padding: 10px;
margin-bottom: 10px;
color: #7c7c7c;
font-weight: 700;
-webkit-appearance: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#contactus .pcItem {
position: relative;
margin: 25px 0 0 3px;
height: 355px;
width: 20px;
}
#contactus p {
font-size: 1.1rem;
padding: 0 50px;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
}
#contactus p big {
font-size: 1.1rem;
color: #00adee;
font-weight: 400;
display: block;
margin: 25px 0 10px 0;
}
#contactus p big:first-child {
margin: 0 0 10px 0;
}
#contactus p small {
font-weight: 300;
display: block;
margin-top: 10px;
}
/* GOOGLE MAP */
#map {
position: relative;
width: 100%;
height: 400px;
}
/* Inner Page Content
================================================== */
/* SOLUTION */
.inner_ad {
position: relative;
width: 100%;
overflow: hidden;
}
.inner_ad .ad_container {
width: 100%;
overflow: hidden;
max-width: 1920px;
margin: 0 auto;
}
.general h3 {
color: #394b57;
font-size: 28px;
font-weight: 300;
letter-spacing: 1px;
margin: 10px 30px 25px 10px;
padding-bottom: 15px;
float: left;
background: url("../images/sprite-box_outline.png") no-repeat left bottom;
}
.general h5 {
color: #007dc3;
font-size: 21px;
font-weight: 600;
letter-spacing: 1px;
margin: 10px 0;
}
.general p {
font-size: 1.1rem;
font-weight: 300;
line-height: 26px;
margin: 20px 0;
color: #6b7881;
}
.general p b {
line-height: 40px;
border: 1px solid #899399;
padding: 2px 8px;
margin: 5px 5px 0 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
white-space: nowrap;
}
.general img {
width: 100%;
height: auto;
position: relative;
}
.general .list {
position: relative;
padding: 0;
margin-top: 20px;
float: left;
background: url("../images/sprite-icons_01.png") no-repeat -26px bottom;
}
.general .list li {
position: relative;
display: block;
font-size: 1.1rem;
font-weight: 300;
line-height: 21px;
padding: 0px 0px 15px 30px;
margin: 0;
background: url("../images/sprite-icons_01.png") no-repeat -10px -582px;
}
.general.bubg .list {
margin-left: 10px;
}
.general h6.list_tit {
position: relative;
color: #007dc3;
font-size: 21px;
font-weight: 600;
padding: 5px 0 5px 34px;
background: url("../images/sprite-icons_01.png") no-repeat;
}
.general h6.list_tit.programming {
background-position: -16px -645px;
}
.general h6.list_tit.corporate {
background-position: -18px -713px;
}
.general h6.list_tit.shop {
background-position: -18px -782px;
}
.provide_tit,
.expertise_tit,
.portfolio_tit {
position: relative;
width: 98%;
height: 72px;
margin: 0 1% 30px 1%;
}
.provide_tit {
background: url("../images/we_provide.png") no-repeat center;
}
.expertise_tit {
background: url("../images/img_tit_expertise.png") no-repeat center;
}
.portfolio_tit {
background: url("../images/img_tit_portfolio.png") no-repeat center;
}
/* PORTFOLIO */
.portfolio_menu {
position: relative;
padding: 25px 0;
background: url("../images/hor_hr_01.png") #e1f0f4 no-repeat center;
}
.portfolio_menu img {
width: 80%;
margin: 15px 10%;
}
.portfolio_menu h4 {
text-align: center;
font-size: 28px;
font-weight: 300;
color: #394b57;
}
.portfolio_menu .active h4 {
color: #1aaeff;
}
.portfolio_menu li {
position: relative;
}
.portfolio_menu li.active:after {
content: " ";
display: inline-block;
text-align: center;
position: absolute;
width: 100%;
height: 40px;
background: url("../images/sprite-icons_01.png") no-repeat center -412px;
}
.pf_container {
margin: auto auto 30px auto;
}
.feature_item {}
.general_item {
padding: 10px 0 10px 0;
}
.pf_container h3 {
color: #394b57;
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
margin: 30px 30px 25px 0;
padding-bottom: 15px;
float: none;
text-align: left;
background: url("../images/sprite-box_outline.png") no-repeat left bottom;
}
.feature_item .item {
position: relative;
float: left;
margin: 1px;
padding: 0;
background: #ffdddd;
color: #fff;
overflow: hidden;
cursor: pointer;
}
.pf_container .thumb {}
.pf_container .overly {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
overflow: hidden;
}
/* for touch device start ******************/
.touch .pf_container .overly {
display: block;
-webkit-transform: rotate(0deg) rotateX(90deg);
-moz-transform: rotate(0deg) rotateX(90deg);
-o-transform: rotate(0deg) rotateX(90deg);
-ms-transform: rotate(0deg) rotateX(90deg);
transform: rotate(0deg) rotateX(90deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.touch .pf_container .overly p {
display: none;
}
.touch .pf_container .overly.active {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.touch .pf_container .overly.active p {
display: block;
}
/* for touch device ends *************/
.pf_container .overly h2 {
color: #fff;
position: relative;
top: -20px;
opacity: 0;
filter: alpha(opacity=0);
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.pf_container .overly p {
position: relative;
text-align: center;
top: 20px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.pf_container .item:hover h2,
.pf_container .item:hover p {
top: 0;
opacity: 1;
filter: alpha(opacity=100);
}
.pf_container .overly .category {
color: #fff;
font-weight: 600;
font-style: italic;
text-align: center;
position: relative;
}
.general_item .item {
position: relative;
float: left;
width: 280px;
height: 202px;
padding: 0;
background: #ffdddd;
color: #fff;
cursor: pointer;
overflow: hidden;
}
.general_item .item:nth-child(4n) {
margin-right: 0;
}
.general_item .overly {
background: #143959;
}
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
/* end filterable portfolio */
/* Footer
================================================== */
#footer {
background-color: #fff;
border-top: 3px solid #0069b4;
}
#sitemap {
margin: 25px 0;
}
#copyright {
color: #fff;
height: 40px;
background-color: #0082c7;
border-bottom: 5px solid #0069b4;
}
#copyright p {
line-height: 40px;
font-weight: 500;
}
#copyright img {
float: left;
margin: 10px 0;
}
#copyright span {
float: right;
}
/* Buttons
================================================== */
/*white*/
.btn_wt {
display: inline-block;
height: 40px;
cursor: pointer;
}
.btn_wt i {
display: block;
float: left;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 21px;
font-style: italic;
font-weight: 300;
padding: 0 0 0 10px;
background: url("../images/sprite-box_outline.png") no-repeat center -60px;
}
.btn_wt i img {
position: relative;
top: 3px;
}
.btn_wt:before,
.btn_wt:after {
content: " ";
display: block;
float: left;
height: 40px;
width: 30px;
padding: 0;
}
.btn_wt:before {
background: url("../images/sprite-box_outline.png") no-repeat left -60px;
}
.btn_wt:after {
background: url("../images/sprite-box_outline.png") no-repeat right -60px;
}
/*blue*/
.btn_bu {
display: inline-block;
height: 32px;
cursor: pointer;
}
.btn_bu i {
display: block;
float: left;
height: 32px;
line-height: 32px;
text-align: center;
color: #1aaeff;
font-size: 21px;
font-style: italic;
font-weight: 300;
padding: 0 0 0 10px;
background: url("../images/sprite-box_outline.png") no-repeat center 0;
}
.btn_bu i img {
position: relative;
top: 3px;
width: 40px;
height: 20px;
}
.btn_bu:before,
.btn_bu:after {
content: " ";
display: block;
float: left;
height: 32px;
width: 30px;
padding: 0;
}
.btn_bu:before {
background: url("../images/sprite-box_outline.png") no-repeat left 0;
}
.btn_bu:after {
background: url("../images/sprite-box_outline.png") no-repeat right 0;
}
/* more in portfolio */
.btn_more {
position: relative;
display: inline-block;
cursor: pointer;
text-align: center;
color: #9bafbc;
width: 100%;
height: 32px;
font-size: 18px;
line-height: 32px;
margin: 50px auto;
clear: both;
background: url("../images/sprite-box_outline.png") no-repeat center -127px;
}
.btn_more:hover {
color: #1aaeff;
}
.btn_more:before {
position: absolute;
top: -30px;
left: 0;
content: " ";
display: inline-block;
text-align: center;
width: 100%;
height: 28px;
background: url("../images/sprite-icons_01.png") no-repeat center -292px;
}
/* Back to top
================================================== */
#back-to-top,
.touch-device #back-to-top:hover {
position: fixed;
display: none;
opacity: 0.7;
/* Good browsers */
-moz-opacity: 0.7;
/* Netscape */
-khtml-opacity: 0.7;
/* Safari 1.x */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
/* IE 8 */
filter: alpha(opacity=70);
/* IE 5-7 */
border-radius: 2px;
height: 50px;
width: 50px;
line-height: 50px;
bottom: 50px;
right: 50px;
text-shadow: none;
text-decoration: none;
text-align: center;
cursor: pointer;
color: #e4e6f0;
border: 1px solid #9bafbc;
background: url("../images/icn_backtotop.png") #081e2d no-repeat center;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
z-index: 20000;
}