/* = Table of Contents ================================================================================= = Global Styles • header • Mega Menu (Drop down Menu - desktop version only) • Hamburger Menu ( hamburger menu (from "=" change to "X") • Footer (for index page only) • Footer (for inside page) = iPad Portrait Styles = iPad Landscape Styles = Mobile Styles • header • Footer search box for mobile inside page ================================================================================ */ /* ============================================================================= = Global Styles ============================================================================= */ .menu-btn {display:none} .menu-m {display:none} .mobile-only { display:none;} .mobile-hidden { display:block;} /* • header ------------ */ header { width:100%; height:150px; overflow:hidden; position:fixed; top:0; left:0; z-index:999; background-color:#fff; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; } header .wrapper { min-width: 950px; max-width:1400px; margin:0 auto; padding-left:30px;} header #logo { display:inline-block; width:240px; height:150px; float:left; margin-left:30px; background: #fff url(images/logo-hkco.svg) no-repeat center center; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -ms-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; } header nav { display:inline-block; float:right; margin-right:2.5%;} header nav span { display:inline-block; line-height:160px; color:#880656; font-weight:700; font-size:10px;} header nav div { display:inline-block; width:50px; height:50px; text-align:center; vertical-align:middle;} header nav div.btn-bksquare { text-shadow: none; background-color: #e6e6e6; cursor:pointer; -webkit-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-property: background-color, color; transition-property: background-color, color; box-shadow: none!important;} header nav div.btn-bksquare:hover { background-color:#ccc; color:#333;} header nav a { display:inline-block; line-height:160px; margin:0 10px; color:#666; font-weight:700; font-size:14px; font-weight:lighter; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-property: background-color, color; transition-property: background-color, color; box-shadow: none!important;} header nav a:hover { color:#880656; } header nav a.eng { font-size: 12px} header.smaller { height: 75px; -webkit-box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.12); -moz-box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.12); box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.12);} header.smaller #logo { display:inline-block; width:155px; height:70px; background: #fff url(images/logo-hkco-sm.svg) no-repeat center center; } header.smaller nav a { line-height: 75px;} header.smaller nav span { line-height: 75px;} header.smaller nav div { width:50px; height:50px;} /* • Mega Menu (Drop down Menu - desktop version only) ------------------------------------------------------- */ #mega-menu { position:absolute; top:0px; z-index:999; background-color:#000; width:100%; height:700px; overflow:hidden; -webkit-box-shadow: 3px 3px 17px 0px rgba(50, 50, 50, 0.46); -moz-box-shadow: 3px 3px 17px 0px rgba(50, 50, 50, 0.46); box-shadow: 3px 3px 17px 0px rgba(50, 50, 50, 0.46);} .mu-row1 { width:33%; height:350px; float:left; overflow:hidden; /*border-right:1px solid #fff; box-sizing: border-box;*/} .mu-row1-last { width:34%; height:350px; float:left; overflow:hidden; /*border-right:none;*/} .mu-row2 { width:25%; height:350px; float:left; overflow:hidden; /*border-top:1px solid #fff; border-right:1px solid #fff; box-sizing: border-box;*/} .mu-row2-last { width:25%; height:350px; float:left; overflow:hidden; /*border-top:1px solid #fff; border-right:none;*/} figure.effect-marley figcaption { text-align:center; color:#fff; font-size:30px; font-family:'Raleway',sans-serif; z-index:30} figure.effect-marley h2, figure.effect-marley p { position:absolute; padding:5px 0; right:30px; left:30px; z-index:30} figure.effect-marley p { font-family: "Lucida Grande","Myriad Set Pro", "Verdana", "Arial","sans-serif"; z-index:30; top:85px; line-height:normal; font-size:13px; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0);} .pos {margin-bottom:10px; display:table; text-align:center; width:100%;} figure.effect-marley h2 { top:90px; line-height:normal; font-size:25px; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0);} figure.effect-marley:hover h2 { top:30px; -webkit-transition: 0.35s ease-in-out; -moz-transition: 0.35s ease-in-out; -o-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);} figure.effect-marley h2::after { position:absolute; top:100%; left:0; width:100%; height:1px; background:#fff; content: ''; z-index:30; -webkit-transform: translate3d(0,40px,0); transform: translate3d(0,40px,0);} figure.effect-marley h2::after, figure.effect-marley p { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;} figure.effect-marley:hover h2::after, figure.effect-marley:hover p { cursor:pointer; opacity:1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);} figure.effect-marley a { color:#fff; -webkit-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-property: background-color, color; transition-property: background-color, color; box-shadow: none!important;} .quick-icon-btn:hover { background-color:#000; color:#333;} figure.effect-marley a:hover {color:#bf6a9e;} figure.effect-marley img.bg { z-index:5; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out;} figure.effect-marley:hover img.bg { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);} figure.effect-marley img.layer {display:none} figure.effect-marley:hover img.layer {display:block; position:absolute; z-index:10} /* • Hamburger Menu ( hamburger menu (from "=" change to "X")) -------------------------------------------------------------- */ #nav-toggle { position:absolute; text-align:center; vertical-align:middle; top:0px; } #nav-toggle { cursor:pointer; padding:25px 12px 0px 12px; width:25px; height:25px; overflow:auto; left:-10px; display:table-cell; vertical-align:middle; line-height:normal;} #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor:pointer; border-radius:1px; height:2px; width:25px; background:#999; position:absolute; display:block; content: '';} #nav-toggle span:before { top:-10px;} #nav-toggle span:after { bottom: -10px;} #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 400ms ease-in-out;} #nav-toggle.active span { background-color: transparent; } #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0;} #nav-toggle.active span:before { transform: rotate(45deg); background:#666;} #nav-toggle.active span:after { transform: rotate(-45deg); background:#666;} /* • Footer (for index page only) ----------------------------------- */ footer { border-top: 4px solid #e6e6e6; padding:1.5% 2%; text-align:left; font-size:11px; color:#666;} footer ul { padding:0; margin:0;} footer ul li { color:#666; display:inline; list-style-type:none;} footer ul li:after { content: "|"; padding:0 15px; color:#880656; font-size:9px;} footer ul li:last-child:after { content:""} footer ul li:hover { color:#880656; cursor:pointer} footer p {margin-top:1%} footer .f-col-left { width:20%; /*50*/ float:left;} footer .f-col-award { display:block; width:80%; /*50*/ float:right;} .footer-bg { background-color:#e8e8e8; padding:10px;} .footer-bg-inside { background-color:#e8e8e8; padding:10px; color:#333; margin-top:20px} .footer-txt { color:#333;} .footer-txt-inside { color:#333; padding-left:10px} /* • Footer (for inside page) ----------------------------- */ .global-footer { background-color:#e8e8e8; margin-top:5%; font-size:11px; display:block} .global-footer .gf-wrapper { padding:0 2%;} .global-footer .gf-wrapper .gf-col1 { width:30%; float:left; border-right:1px solid #fff; padding-right:2%;} .global-footer .gf-wrapper .gf-col2 { width:30%; float:left; border-right:1px solid #fff; padding-right:2%; padding-left:2%;} .global-footer .gf-wrapper .gf-col3 { width:30%; float:left; padding-left:2%;} .global-footer .gf-wrapper .gf-col1 .gf-wrapper, .global-footer .gf-wrapper .gf-col2 .gf-wrapper { padding:6% 0} .global-footer .gf-wrapper .gf-col3 .gf-wrapper3 { padding:6% 0; position:absolute; bottom:0} .global-footer .gf-wrapper .gf-col3 #fclublk { padding-top:6%; } .global-footer .gf-wrapper .gf-col1 .col1-intro, .global-footer .blkintro { padding:2% 0} .global-footer h3 { color:#880656; line-height:normal} .global-footer h4 { color:#880656; line-height:1.6} .global-footer a { color:#333!important;} .global-footer a:hover {color:#880656!important; text-decoration:none!important;} .global-footer ul { margin:0; padding:2% 0; line-height:1.8;} html body.en .global-footer { font-size:11px;} html body.tc .global-footer { font-size:13px;} html body.sc .global-footer { font-size:13px;} html body.en .global-footer .gf-wrapper .gf-col1 .col1-intro { font-size:11px;} html body.tc .global-footer .gf-wrapper .gf-col1 .col1-intro { font-size:13px;} html body.sc .global-footer .gf-wrapper .gf-col1 .col1-intro { font-size:13px;} html body.en .global-footer h3 { font-size:20px;} html body.tc .global-footer h3 { font-size:22px} html body.sc .global-footer h3 { font-size:22px} html body.en .global-footer h4 { font-size:16px} html body.tc .global-footer h4 { font-size:18px} html body.sc .global-footer h4 { font-size:18px} .global-footer input { font-size:12px; color:#333; padding:2px 12px; height:26px; width:90%; border:none; outline:none; font-family: "Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif"; letter-spacing: normal; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; background-color:#ccc; margin:4% 0 0 0} .global-footer input:focus { background-color:#333; color:#fff; transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-property: background-color, color; transition-property: background-color, color; box-shadow: none!important;} .global-footer input:focus+.btn-action { display:block; transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-property: background-color, color; transition-property: background-color, color; box-shadow: none!important;} .global-footer .btn-action { color:#fff; background-color:#880656; font-size:16px; text-align:center; cursor:pointer; line-height:1.5; padding:3px 2px 0px 2px; position:absolute; top:0; right:0; width:40px; height:27px; margin-top:4%; /*display:none;*/ overflow:hidden; z-index:50;} .global-footer .btn-action:hover { background-color:#bf6a9e; transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-property: background-color, color; transition-property: background-color, color; box-shadow: none!important;} .global-footer .gf-media i { display:inline-block; font-size:30px; padding-right:3%; color:#ccc; margin-top:2%} .global-footer .gf-media a:hover i { color:#880656; -webkit-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-property: background-color, color; transition-property: background-color, color; box-shadow: none!important;} .global-footer .error { margin-bottom:4%;} /* ============================================================================= = iPad Portrait Styles ============================================================================= */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){ header nav { margin-right:25px;} header #logo { background: #fff url(images/logo-hkco.svg) no-repeat center center; margin-left:0px} header.smaller #logo { background: #fff url(images/logo-hkco-sm.svg) no-repeat center center; } figure.effect-marley figcaption { font-size:20px;} figure.effect-marley p { font-size:16px; top:70px; } } /* ============================================================================= = iPad Landscape Styles ============================================================================= */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { header nav { margin-right:60px;} header #logo { background: #fff url(images/logo-hkco.svg) no-repeat center center;} header.smaller #logo { background: #fff url(images/logo-hkco-sm.svg) no-repeat center center; } header nav { display:inline-block; float:right; margin-right:2.3%;} figure.effect-marley figcaption { font-size:20px;} figure.effect-marley p { top:70px; } }