body { position: relative; color: #000000; font-family: "Noto Sans HK"; font-size: 16px; font-weight: 400; line-height: 1.56 }body { overflow-x: hidden }.wrapper, main { padding: 0 10px 60px; max-width: 1200px; margin: 60px auto 0 }.wrapper { max-width: 980px; margin: 1em auto }body.page_index main { max-width: 100%; margin: 0; padding: 0 }a:hover { -webkit-transition: color .3s, background-color .3s, box-shadow .3s; transition: color .3s, background-color .3s, box-shadow .3s }h1, h2, h3, h4, h5 { font-weight: normal; line-height: 1.2 }#page-title h1:not(:only-child) { color: #ffffff; font-family: "Noto Sans HK"; font-size: 11px; letter-spacing: 1.35px; line-height: 1.44 }#page-title h1, #page-title h1+h2 { color: #ffffff; font-family: Philosopher; font-size: 70px; font-weight: 400 }h2, .h2 { color: #000000; font-family: Philosopher; font-size: 47px; font-weight: 400; line-height: 1; margin: 20px auto }h3 { color: #000000; font-family: Philosopher; font-size: 42px; font-weight: 400 }.h1 { color: #000000; font-family: "Noto Sans HK"; font-size: 13px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase }.text-white { color: #fff }.h1, .h2, .h3, .h4 { display: block }a { color: #e56b6d; cursor: pointer }a:hover { color: #003471 }#page-title { color: #fff; font-size: 18px }#page-title .title-container { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: start; height: 680px }#page-title .title-wrapper { flex: 0 1 715px; background-color: rgba(0, 52, 113, 0.8); padding: 60px; border-right: 4px solid rgba(229, 107, 109, 0.8) }@media (max-width:1150px) { #page-title .title-wrapper { padding: 60px 10px; flex: 0 1 600px }}.main-img { display: none }body.page_index #page-title { display: none }.why { text-align: center; padding: 20px 0; margin-top: 60px }.why h2 { color: #000000; font-family: Philosopher; font-size: 42px; font-weight: 400; line-height: 1.12 }.why ul { margin: 30px auto 0; padding: 0; max-width: 1200px; display: flex; flex-flow: row wrap; justify-content: space-around }.why ul li { height: 156px; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; flex: 0 1 330px; max-width: 330px; padding: 5px; margin: 5px; color: #e56b6d; font-size: 21px; letter-spacing: 2.1px; font-weight: 700; text-transform: uppercase }.why ul li:before { content: url(assets/images/why.png); position: absolute; right: 50%; bottom: 50%; top: auto; left: auto; transform: translate(50%, 50%) }.internal-implants { clear: both; justify-content: space-between }.internal-implants h3 { margin: 30px auto; text-align: center; font-size: 20px }.internal-implants div { flex: 0 1 360px; padding: 25px 10px; margin: 5px }.internal-implants div p { margin: 20px auto; max-width: 280px; text-align: center }@media (max-width:1200px) { .internal-implants, #why ul { justify-content: space-around }}.next, .prev { cursor: pointer; z-index: 300 }.contact-us iframe { width: 100% }.hours label { display: inline-block; width: 110px; text-align: left; font-weight: 600 }.contact-us h2, .contact-us h3 { text-align: left; font-size: 40px }.contact-us h3 { font-size: 25px }.contact-us>div { display: inline-block; vertical-align: top; max-width: 45%; width: 100% }.contact-us { display: block; max-width: 100%; width: auto }@media screen and (max-width:768px) { .contact-us>div { display: block; max-width: 100% }}main ul { overflow: hidden; column-count: 1; -moz-column-count: 1; padding-left: 35px }main ul>li { display: block; position: relative; margin-bottom: 6px; text-align: left; padding-left: 28px; line-height: 1.4 }main ul>li:before { content: '\e832'; font-family: Fontello; color: #e56b6d; position: absolute; top: 0px; left: 0 }.services-grid { display: flex; align-items: flex-start; justify-content: space-around }.services-grid .column { flex: 0 1 525px; padding: 10px }.services-grid a { margin-top: 40px; display: block }.services-grid a .title { display: table; margin: 30px 0 0 auto; font-size: 33px; font-family: Philosopher; color: #000; line-height: 1; transition: .3s }.services-grid a .title i { color: #e56b6d }.services-grid a .title span, .services-grid a .title i { display: inline-block; vertical-align: top }.services-grid a:hover .title { color: #e56b6d }.services-grid figure { position: relative; padding: 35px; padding-right: 0 }.services-grid figure:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; max-width: 472px; background-color: #e56b6d }.services-grid figure img { margin: 0 0 0 auto; position: relative; z-index: 5 }.services-grid .column+.column a figure:after { background-color: #003471 }.services-grid .column+.column { margin-top: 215px }.divider-body { padding: 60px 0 }.divider-body h2:first-of-type { margin-top: 0px }.divider-body figure { margin: 0 auto; position: relative }.divider-body article { padding: 10px; margin: 0 auto }.divider-body:nth-child(even) .clearfix, .page-divider.odd .divider-body .clearfix { flex-direction: row-reverse }.meet-center { padding: 60px 0; background-position: bottom left; background-repeat: no-repeat }.meet-center figure { max-width: 1075px; margin: 0 auto }.meet-center figure div { position: relative }.meet-center p, .meet-center article { max-width: 990px; margin: 1em auto }@media (min-width:1023px) { .divider-body.no-img article, .divider-body.no-img article>div { flex: 0 1 auto; max-width: 100% } .divider-body.no-img article>div { max-width: 980px; margin: 0 auto } .divider-body .clearfix { display: flex; align-items: center; justify-content: space-between; max-width: 1250px; margin: 0 auto } .divider-body article { flex: 0 1 550px; padding: 10px; margin: 0 auto } .divider-body article>div { max-width: 600px; margin: 0 auto } .divider-body figure { margin: 0; flex: 0 0 auto; position: relative } .divider-body figure:after { content: ''; position: absolute; z-index: -1; left: -18px; bottom: -18px; width: 510px; height: 417px; border: 1px solid #dedede } .divider-body figure:before { content: ''; position: absolute; z-index: -1; left: -38px; bottom: -38px; width: 510px; height: 417px; border: 1px solid #dedede } .meet-divider figure:after { content: ''; position: absolute; z-index: -1; left: -18px; bottom: -18px; width: 514px; height: 596px; border: 1px solid #dedede } .meet-divider figure:before { content: ''; position: absolute; z-index: -1; left: -38px; bottom: -38px; width: 514px; height: 596px; border: 1px solid #dedede } .meet-center figure { position: relative; margin: 60px auto } .meet-center figure:after { content: ''; position: absolute; z-index: -1; left: -18px; bottom: -18px; width: 1134px; height: 517px; border: 1px solid #dedede } .meet-center figure:before { content: ''; position: absolute; z-index: -1; left: -38px; bottom: -38px; width: 1134px; height: 517px; border: 1px solid #dedede }}.btn { display: inline-block; position: relative; margin: 5px; padding: 16px 10px; color: #ffffff; font-family: "Noto Sans HK"; font-size: 11px; font-weight: 700; font-style: normal; letter-spacing: 1.1px; line-height: 1; text-transform: uppercase; min-width: 340px; -webkit-transition: background-color .3s; transition: background-color .3s; text-align: center; background-color: #e56b6d; border: none }.btn:hover { background: #003471; color: #fff }.btn-alt { display: inline-block; position: relative; margin: 5px; padding: 16px 10px; color: #ffffff; font-family: "Noto Sans HK"; font-size: 11px; font-weight: 700; font-style: normal; letter-spacing: 1.1px; line-height: 1; text-transform: uppercase; min-width: 340px; -webkit-transition: background-color .3s; transition: background-color .3s; text-align: center; background-color: #003471; border: none }.btn-alt:hover { background: #e56b6d; color: #fff }.styled-form { margin-top: 15px; font-size: 16px; text-align: left }.styled-form .drei { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap }.styled-form .drei+.drei { margin-top: 5px }.styled-form .input-content, .styled-form .inline { width: calc(100% / 3 - 5px); min-height: 52px }.styled-form .inline, .input-content { background-color: #003471 }.input__label-content strong, .input__label-content strong a { color: #fff }.input-content, .styled-form .inline label, .styled-form .inline, .input--filled .input__label .input__label-content strong, .input--filled .input__label .input__label-content a { color: #fff !important }.styled-form .drei:first-of-type { line-height: 1 !important }.styled-form .inline { box-sizing: border-box; padding: 8px 16px }.styled-form .inline span input { margin-right: 4px }.styled-form .inline span { display: block; line-height: 1.4 }.styled-form .hear { margin: 5px 0 }.styled-form .hear label { display: inline-block; margin-right: 8px }.styled-form .inline.wide { width: calc(100% / 1.5 - 3px) }.styled-form .inline textarea { padding: 5px; display: block; width: 100%; height: 80px }.input-content { position: relative; z-index: 1; overflow: hidden }.input__field { -webkit-appearance: none; position: absolute; z-index: 2; display: block; float: right; border: none; border-radius: 0; padding: 0 14px; margin-top: 1.2em; height: 29px; width: 100%; background: transparent; color: #fff }.input__field { outline: none }.input__label { display: inline-block; float: right; padding: 0; width: 100%; background: transparent; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }.input__label::before { content: ''; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0px solid transparent; -webkit-transition: border-width 0.3s, border-color 0.3s; transition: border-width 0.3s, border-color 0.3s }.input__label-content { box-sizing: border-box; position: relative; display: block; width: 100%; padding: 1.1em 1em; text-rendering: geometricPrecision; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform 0.3s, color 0.3s; -webkit-transition: color 0.3s, -webkit-transform 0.3s; transition: color 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, color 0.3s; transition: transform 0.3s, color 0.3s, -webkit-transform 0.3s }.input__label-content strong { float: right; font-weight: 300 }.input__field+.input__label::before, .input--filled .input__label::before { border-width: 5px; border-color: #e56b6d; border-top-width: 1.2em }.input__field+.input__label .input__label-content, .input--filled .input__label .input__label-content { color: #fff; font-size: 14px; padding: .85em 1em; -webkit-transform: translate3d(0, -0.65em, 0); transform: translate3d(0, -0.65em, 0) }input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: transparent !important }.styled-form .inline textarea { color: #000; padding: 5px; display: block; width: 100%; height: 80px; font-size: 16px; margin-top: 5px }.styled-form .inline.wide { width: calc(100% / 1.5 - 3px) }@media (max-width:650px) { .styled-form .input-content, .styled-form .inline { width: 100%; display: block; border-bottom: 1px solid rgba(206, 206, 206, 0.2196078431) } .styled-form .input-content+.input-content { margin-top: 5px } .styled-form .inline.wide { width: 100%; margin-top: 5px }}.simple { line-height: 1; text-align: center; padding: 30px 10px; max-width: 700px; margin: 30px auto }.simple input, .simple textarea { border: 0; outline: 0; padding: 0 12px; height: 42px; width: 100%; max-width: 100%; margin-bottom: 10px; color: #fff; line-height: 1; box-sizing: border-box !important; background-color: #003471 }.simple textarea { height: 140px !important; padding: 12px }.form-input::-webkit-input-placeholder { color: #fff }.form-input:-moz-placeholder { color: #fff }.form-input::-moz-placeholder { color: #fff }.form-input:-ms-input-placeholder { color: #fff }.more-to-explore { background-color: #003471; margin: 0 auto; text-align: left; clear: both; padding: 60px 0 }.more-to-explore p { margin: 15px auto 0; text-align: center; max-width: 1300px }.more-to-explore>span { color: #ffffff; font-family: Philosopher; font-size: 60px; font-weight: 400; line-height: 1.1; display: block; margin: 0; text-align: center; position: relative }.more-to-explore .btn, .more-to-explore .btn-alt { min-width: 400px }.more-to-explore .btn-alt { background-color: #f3e8d8; color: #000 }.more-to-explore .btn-alt:hover { background-color: #003471 }.pager { margin: 0 auto }.pager>span { display: inline-block; margin: 0 6px; vertical-align: middle; border-radius: 50%; width: 11px; height: 11px; transition: all .3s; background-color: #003471; box-shadow: none }.pager>span.cycle-pager-active { background-color: #e56b6d }.prev, .next { display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; color: #e56b6d; font-size: 30px; border-radius: 50%; width: 50px; height: 50px; line-height: 45px; border: 1px solid #003471; transition: color 0.3s; z-index: 100 }.prev:hover, .next:hover { color: #003471 }.prev i:before, .next i:before { margin: 0 }.controls { align-items: center; justify-content: space-around; margin: 0px auto; display: flex; position: relative }@media (max-width:600px) { .pager { margin: 0 auto }}.tour-nav { max-width: 980px; text-align: center; margin: 0 auto }.tour-nav .btn { background-color: transparent; border: 2px solid #003471 }.tour-nav .btn:hover, .tour-nav .btn.active { background-color: #003471 }#office-tour { max-width: 910px; margin: 10px auto; position: relative }#office-tour .contain { max-width: 700px }#office-tour .cycle-slide { width: 100%; text-align: center; max-width: 980px }#tour { position: relative; margin: 0 auto }#tour .cycle-slide { width: 100%; text-align: center }#tour .cycle-slide img { max-width: 100%; display: block; margin: 0 auto; width: 100% }@media (min-width:950px) { #office-tour .prev, #office-tour .next { position: absolute; bottom: 250px } #office-tour .next { right: 0 } #office-tour .prev { left: 0 } #office-tour.letters .prev, #office-tour.letters .next { position: static }}.quiz { max-width: 600px; margin: 5px auto 50px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 50px; text-align: center; background-color: #fff; -webkit-box-shadow: 0 3px 35px rgba(18, 118, 153, 0.35); box-shadow: 0 3px 35px rgba(18, 118, 153, 0.35); border-radius: 5px; text-align: center }.quiz .input { margin: 10px 0 }.quiz select { margin-bottom: 15px }.quiz label { font-weight: 600; display: block; margin-bottom: 0.5em }.quiz input, .quiz textarea { margin-left: 0; border: 1px solid #848484; display: block; width: 100%; padding: 5px 15px; font-size: 16px; margin: 0 auto 10px; color: #333; max-width: 500px; height: 40px }.quiz select { border-radius: 5px; border: 1px solid #848484; padding: 5px }.quiz textarea { height: 130px }.quiz input[type="checkbox"], .quiz input[type="radio"] { display: inline; width: auto; margin-left: 15px }.quiz h2 { font-size: 28px; text-align: center; margin-bottom: 20px }.accordion article { padding: 20px; border-top: 1px solid rgba(0, 0, 0, 0.13); border-bottom: 1px solid rgba(0, 0, 0, 0.13); margin: 0px auto }.accordion article>div { display: none; padding: 10px 25px }.accordion .toogle:after { content: "\e840"; font-family: "Fontello"; font-size: 20px; cursor: pointer; transition: background-color .3s; line-height: 17px; color: #e56b6d; font-style: normal; margin-left: auto }.accordion .toogle.active:after { content: '\e841' }.accordion div { position: relative }.accordion .toogle { font-weight: 400; text-transform: none; position: relative; cursor: pointer; transition: color .3s; text-align: left; color: #000; font-size: 38px; display: flex; align-items: center; justify-content: space-around; text-align: left; margin: 0 auto }.accordion p { margin-left: 20px; position: relative }@media (max-width:520px) { .accordion p { margin: 10px auto }}.contain { max-width: 1200px; margin: 0 auto }.split>div { display: flex; justify-content: space-around; align-items: center }.split figure, .split article { margin: 0 }.split figure { flex: 0 1 auto; position: relative }.split figure .mob { display: none }.split figcaption { text-align: right }.split figcaption a, .split figcaption span { display: block; color: #000000; font-family: "Noto Sans HK"; font-size: 12px; font-weight: 700; font-style: normal; letter-spacing: 1.2px; line-height: 1.33; text-transform: uppercase; margin-top: 10px }.split figcaption a:hover { color: #e56b6d }.split.alt figure { order: -1 }.split article { flex: 0 1 500px; padding: 10px }main h1 { position: relative }.social { font-size: 0; text-align: center; display: block }.social a { display: inline-block; color: #fff; vertical-align: middle; font-size: 18px; width: 45px; height: 45px; background-color: transparent; border-radius: 50%; text-align: center }.social a i:before { display: block; margin: 0 auto; width: 45px; line-height: 45px }.social a+a { margin-left: 20px }.social .fb { background-color: #4d70a8 }.social .gp { background-color: #dc4e41 }.social .in { background-color: #125688 }.social .tw { background-color: #00aced }.social .yp { background-color: #b62717 }.social a:hover { background-color: #e56b6d !important; color: #fff; border-color: transparent }@media (min-width:1000px) { a[name]:before { height: 128px; margin-top: -128px; display: block; content: ""; visibility: hidden }}@media (max-width:860px) { a[name]:before { height: 95px; margin-top: -95px; display: block; content: ""; visibility: hidden }}.nav-down { box-shadow: 0 3px 7px rgba(24, 23, 24, 0.2) }.nav-up { transform: translateY(-100%) }.top-bar { background-color: #003471; padding: 3px }.top-bar span { display: flex; align-items: center; justify-content: center }.top-bar>div { display: flex; align-items: center; justify-content: space-between; max-width: 1300px; margin: 0 auto }.top-bar a, .top-bar .pho, .top-bar .phy { display: inline-block; vertical-align: middle; color: #fff; font-size: 12px; line-height: 1.1; margin: 0 auto }.top-bar a {margin:0px 10px 0px 0px}.top-bar a i.icon-right, .top-bar .pho i, .top-bar .phy i{color: #e56b6d;}.top-bar a:hover, .top-bar .pho:hover, .top-bar .phy:hover { color: #e56b6d }.top-bar .pho { font-weight: 700; font-size: 21px }header { position: absolute; left: 0; top: 0; z-index: 500; width: 100%; text-align: center; line-height: 1 }header .logo { padding: 0 5px }header .logo img.white { display: none }header .pho { display: block; font-size: 21px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.4; margin-left: 30px }header .phy { display: block; font-size: 14px; font-weight: 400; letter-spacing: 0.21px; line-height: 1 }header .pho i, header .phy i { color: #003471 }header .pho:hover, header .phy:hover { color: #e56b6d }header .header-middle { flex: 0 1 750px }header .header-contact { display: flex; align-items: center; justify-content: flex-end; text-align: right; margin-bottom: 20px }header .header-buttons { order: 4; flex: 0 0 244px; margin-left: 10px; max-width: 244px }header .header-buttons .btn, header .header-buttons .btn-alt { min-width: auto; margin: 0 auto; display: block;padding:14px 10px; }header .header-buttons .btn-alt{padding: 8px;}header .header-buttons .btn i, header .header-buttons .btn-alt i { font-size: 15px }header #main-header { display: flex; align-items: center; justify-content: space-between; padding: 0px; margin: 10px auto; max-width: 1300px; width: 100% }header #main-nav { flex: 0 1 600px; align-self: center }@media (min-width:1024px) { .scrolled header { position: fixed !important; background-color: #fff; box-shadow: 1.5px 2.6px 59px rgba(16, 17, 17, 0.35) } .scrolled header #main-header { margin: 0 auto } .scrolled .safe-page { display: none } .scrolled header .header-contact { margin: 5px 0 10px }}@media (min-width:1025px) { .scrolled header { background-color: #efefef; position: fixed !important; -webkit-box-shadow: 0 3px 7px rgba(24, 23, 24, 0.35); box-shadow: 0 3px 7px rgba(24, 23, 24, 0.35); -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .scrolled .place-nav { padding: 0 10px } .scrolled .hd-info .locations { margin: 0 auto } .scrolled .off { font-size: 24px } .place-nav { max-width: 1400px; margin: 0 auto; padding: 5px 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center } nav, nav ul li, nav ul li a { position: relative } nav>ul { padding: 0; max-width: 1300px; margin: auto } nav>ul>li.has-children>a:after { content: '\e825'; font-family: Fontello; display: inline-block; vertical-align: middle; margin-left: 5px; color: #e56b6d } nav ul { margin: auto; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around } nav ul li a { display: block; color: #fff } nav ul li a:hover { color: #003471 } nav>ul>li { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; text-align: center } nav>ul>li:last-of-type:after { display: none } nav>ul>li>a { padding: 6px; font-size: 11px; letter-spacing:1.7px; text-transform: uppercase; font-weight: 500; color: #000 } nav>ul>li:hover { background-color: #e56b6d; color: #fff } nav ul li:hover>ul { display: block; -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: .25s; animation-duration: .25s; -webkit-animation-fill-mode: both; animation-fill-mode: both } nav ul ul { display: none; min-width: 310px; width: 100%; padding: 0; position: absolute; z-index: 3; left: 0; text-align: left; background-color: #272727; -webkit-box-shadow: 10px 17.3px 25px rgba(0, 0, 0, 0.2); box-shadow: 10px 17.3px 25px rgba(0, 0, 0, 0.2) } nav>ul>li:last-child ul { right: 0; left: auto } nav ul ul li>a { padding: 10px 12px; font-size: 14px; line-height: 1.3; text-transform: none } nav ul ul li:hover>a { background-color: #003471; color: #fff } nav ul ul ul { left: 100%; top: 0; background-color: #373738 } nav ul ul ul li:hover a { background-color: #e56b6d; color: #fff } .mean-show { display: none !important }}@media (max-width:1024px) { header { background-color: #fff } #main-nav, .hd-btns, header [class^="btn"] { display: none } header nav ul { display: none } .btn-thr { display: none } header #hd-contents>.hd-info { text-align: center; -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0 } header .logo { padding: 5px } body, header, .mean-container .mean-nav { -webkit-transition: all .3s; transition: all 0.3s } body { right: 0 } .attach header { position: fixed !important; -webkit-box-shadow: 0 3px 7px rgba(24, 23, 24, 0.35); box-shadow: 0 3px 7px rgba(24, 23, 24, 0.35) } .attach header .top-nav { display: none !important } body.mean-active header { left: -80% } body.mean-active { overflow: hidden; right: 80% } body.mean-active:before { z-index: 98; content: ''; opacity: .7; background-color: #000; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: none; height: inherit } body.mean-active .mean-container .mean-nav { right: 0 } .mean-container { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-flow: row nowrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .mean-container .mean-bar { background-color: #373738; width: 70px; min-height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-item-align: stretch; align-self: stretch; margin-left: 8px } .mean-container a.meanmenu-reveal { display: block; color: #fff } .mean-container a.meanmenu-reveal.meanclose i:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); font-size: 60px; content: '+'; margin: -5px 0 0 8px } .mean-container .mean-bar .icon-menu { position: relative; display: table } .mean-container a.meanmenu-reveal .icon-menu:before { content: '\e808'; font-size: 30px } .mean-container .mean-nav { position: fixed; right: -80%; margin: 0; top: 0; bottom: 0; width: 80%; overflow: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-flow: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; background-color: #272727 } .mean-container .mean-nav ul { font-size: 16px; padding: 0; margin: 0; width: 100%; list-style-type: none } .mean-container .mean-nav ul li { position: relative; width: 100% } .mean-container .mean-nav ul li a { display: block; padding: 1em 5%; padding-right: 58px !important; margin: 0; text-align: left; color: #fff; border-top: 1px solid rgba(255, 255, 255, 0.5); text-decoration: none; text-transform: uppercase } .mean-container .mean-nav ul li li a { padding: 1em 10%; border-top: 1px solid #f1f1f1; border-top: 1px solid rgba(255, 255, 255, 0.25); opacity: .75; filter: alpha(opacity=75); text-shadow: none !important; visibility: visible } .mean-container .mean-nav ul li.mean-first a { border-top: none; margin-top: 0 } .mean-container .mean-nav ul li.mean-last a { border-bottom: none; margin-bottom: 0 } .mean-container .mean-nav ul li li li a { padding: 1em 15% } .mean-container .mean-nav ul li li li li a { padding: 1em 20% } .mean-container .mean-nav ul li li li li li a { padding: 1em 25% } .mean-container .mean-nav ul li a:hover { background: #252525; background: rgba(255, 255, 255, 0.1) } .mean-container .mean-nav ul li a.mean-expand { width: 48px; line-height: 50px; font-size: 20px; padding: 0 !important; text-align: center; position: absolute; right: 0; top: 0; z-index: 2; background: rgba(255, 255, 255, 0.1); border: none !important; border-left: 1px solid rgba(255, 255, 255, 0.4) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important } .mean-container .mean-nav ul li a.mean-expand:before { content: '\e825'; font-family: 'fontello'; font-weight: 400; margin: 0; font-style: normal } .mean-container .mean-nav ul li a.mean-expand.mean-clicked:before { content: '\e83a' } .mean-remove { display: none !important } .mean-nav .social { min-height: 66px; background-color: rgba(0, 0, 9, 0.1); margin: 0; padding: 10px 5px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .mean-nav .social a { font-size: 22px } .mean-nav .fo-title { color: #fff; text-align: center; font-size: 24px } .mean-nav .hd-info { display: block; background-color: #fff } .mean-nav .hd-info .flex { display: block } .mean-nav .hd-info .flex>div { margin: 30px auto } .top-bar>div { display: block; text-align: center } .top-bar span:nth-of-type(2), .top-bar span:nth-of-type(3) { display: none } header .header-contact { display: block; margin: 0 auto } header .hours{color: #fff; text-align: left; display: table; padding: 10px; margin: 0 auto; font-size: 12px;} header .hours .title{display: block; text-align: center;}}@media (max-width:768px) { header .header-contact, header .header-middle { display: none }}#fixed-tabs { position: fixed; right: 0; text-align: center; line-height: 1; font-size: 0; z-index: 510 }#fixed-tabs a { font-size: 15px; background-color: #e56b6d; color: #fff; position: relative; overflow: hidden; transition: width .3s }#fixed-tabs i { font-size: 16px }#fixed-tabs i, #fixed-tabs i:before { display: block; margin: 0 auto !important }#fixed-tabs em { font-size: 10px; font-style: normal; margin-top: 8px; display: none; font-weight: 600; text-transform: uppercase }#fixed-tabs strong { font-weight: 300 }#fixed-tabs .ra { background-color: #003471 !important; flex: 2 }#fixed-tabs .fb { background-color: #3b5998 }#fixed-tabs .re { background-color: #373738 }#fixed-tabs .so { background-color: #84bd00 }#fixed-tabs .gp { background-color: #dd4b39 }#fixed-tabs .map { background-color: #003471 }#fixed-tabs .call, #fixed-tabs .map { display: none }@media (min-width:1025px) { #fixed-tabs { position: absolute; top: 214px; display: none } #fixed-tabs a { display: block; text-align: left; margin-left: auto } #fixed-tabs a+a { margin-top: 8px } #fixed-tabs a span { display: block } #fixed-tabs a span:first-child { text-align: center; padding: 7px 0 } #fixed-tabs a span:last-child { position: absolute; left: 80px; top: 50%; width: 220px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-transition: width .3s; transition: width .3s } #fixed-tabs a, #fixed-tabs a span:first-child { width: 56px } #fixed-tabs a:hover { width: 250px } #fixed-tabs i { font-size: 20px } #fixed-tabs em { display: block } .scrolled #fixed-tabs i { font-size: 16px } #fixed-tabs .fb:hover { background-color: #3b5998 !important } #fixed-tabs .so:hover { background-color: #84bd00 !important } #fixed-tabs .gp:hover { background-color: #dd4b39 !important }}@media (min-width:1280px) { #fixed-tabs { position: fixed; top: 245px }}@media (max-width:1024px) { #fixed-tabs { bottom: 0; width: 100%; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } header .ra { display: none } #fixed-tabs a { padding: 12px 0; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1 } #fixed-tabs a span { display: inline-block; vertical-align: middle } #fixed-tabs a span:last-child { margin-left: 7px } #fixed-tabs a strong { display: none } footer { padding-bottom: 41px !important } .mean-container .mean-nav { bottom: 41px }}@media (max-width:768px) { #fixed-tabs .call, #fixed-tabs .map { display: block } #fixed-tabs a.fb, #fixed-tabs a.so, #fixed-tabs a.gp, #fixed-tabs a.fm { display: none }}#banner { max-width: 1400px; margin: 0 auto }#banner .container { display: flex; align-items: flex-end; justify-content: flex-start }#banner figure { position: relative }#banner figure+figure { margin-left: 28px }#banner h1 { text-transform: uppercase; color: #ffffff; font-family: "Noto Sans HK"; font-size: 9px; letter-spacing: 1.35px; line-height: 1.44 }#banner h2 { color: #ffffff; font-family: Philosopher; font-size: 70px; font-weight: 400; font-style: normal; letter-spacing: normal; line-height: 0.86; margin: 15px auto }#banner .title { display: block; color: #ffffff; font-size: 12px; font-weight: 400; font-style: normal; letter-spacing: normal; line-height: 1.33 }#banner .caption { background-color: rgba(0, 52, 113, 0.8); padding: 20px; border-left: 4px solid rgba(229, 107, 109, 0.8); max-width: 474px; width: 100%; position: absolute; right: 0; bottom: 97px }#banner .caption>div { max-width: 372px; margin: 0 auto }.affil>span { margin: 20px 5px; }.index-affil { margin: 30px auto; max-width: 1200px }#welcome { text-align: center; max-width: 1000px; padding: 100px 10px; margin: 30px auto; background-image: url(assets/images/index-welcome.png); background-repeat: no-repeat; background-position: 50% 30% }#welcome p { font-size: 24px; font-family: Philosopher; line-height: 1.67 }#below-banner { max-width: 980px; margin: 30px auto; text-align: center; display: flex; justify-content: center }#below-banner a { flex: 0 1 490px; padding: 40px 10px }#below-banner a h2 { font-size: 34px;line-height:1.3; }#below-banner a h2 small { display: block; font-family: "Noto Sans HK"; font-size: 13px; font-weight: 400; font-style: normal; letter-spacing: 1.95px; text-transform: uppercase }#below-banner a hr { max-width: 386px; margin: 20px auto; height: 1px; border: none; background-color: rgba(0, 0, 0, 0.2) }#below-banner a .link { color: #000000; line-height: 1; font-size: 13px; letter-spacing: 3.9px; text-transform: uppercase }#below-banner a .link span { display: inline-block; vertical-align: middle }#below-banner a .link i { color: #e56b6d; font-size: 20px; display: inline-block; vertical-align: middle }#below-banner a:nth-of-type(1) { background-color: #fff; box-shadow: 0 0 0 1px #000 inset }#below-banner a:nth-of-type(1):hover { background-color: #f3e8d8 }#below-banner a:nth-of-type(2) { background-color: #003471 }#below-banner a:nth-of-type(2) h2, #below-banner a:nth-of-type(2) .link { color: #fff }#below-banner a:nth-of-type(2) hr { background-color: rgba(255, 255, 255, 0.2) }#below-banner a:nth-of-type(2):hover { background-color: #e56b6d }#below-banner a:nth-of-type(2):hover .link i { color: #003471 }#index-tour { position: relative; max-width: 1400px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: flex-end }#index-tour:after { content: ''; position: absolute; width: 1px; height: 184px; background-color: #000000; right: 50%; top: -92px; transform: translateX(50%) }#index-tour figure { position: relative }#index-tour figure+figure { margin-left: 40px }#callouts { margin: 100px auto }#callouts .links { position: relative; display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; max-width: 1010px; margin: 30px auto 0 }#callouts .links:before { content: ''; position: absolute; width: 1px; background-color: #000000; opacity: 0.13; right: 50%; top: 0; bottom: 0; transform: translateX(50%) }#callouts .links:after { content: ''; position: absolute; height: 1px; background-color: #000000; opacity: 0.13; bottom: 50%; left: 0; right: 0; transform: translateY(50%) }#callouts .links a { flex: 0 1 505px; padding: 30px 10px; color: #000 }#callouts .links a>div { max-width: 465px; margin: 0 auto; display: flex; align-items: start; justify-content: start }#callouts .links a h3 { margin-top: 10px; text-transform: uppercase; color: #000000; font-family: "Noto Sans HK"; font-size: 15px; font-weight: 700; font-style: normal; letter-spacing: 3px; line-height: 1.33 }#callouts .links a p { min-height: 109px }#callouts .links a i { color: #e56b6d; font-size: 30px; transition: .3s }#callouts .links a .icon { margin-right: 10px; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 74px; height: 74px; flex: 0 0 74px; border-radius: 50%; transition: .3s }#callouts .links a:hover .icon { background-color: #f6eee2 }#callouts .links a:hover i { color: #003471 }#meet { margin: 100px auto }#meet>div { justify-content: center }#meet article { flex: 0 1 640px; margin-right: -100px; border: 1px solid #dedede; background-color: #fffdfb; position: relative; padding: 30px 30px 30px; font-size: 16px;line-height:1.7; z-index: 1; }#meet article>div { max-width: 500px; margin: 0 auto; }#meet article .flex { margin: 10px auto 0 0 }#meet figure img { position: relative; z-index: -1 }#tech, #insurance { max-width: 1300px; margin: 100px auto }#tech article p, #insurance article p { font-size: 16px;line-height:1.7; }#tech figure:after { content: ''; bottom: -21px; right: 54px; border: 1px solid #dedede; position: absolute; top: -29px; left: -18px; z-index: -1 }#tech figure:before { content: ''; border: 1px solid #dedede; position: absolute; top: -14px; bottom: -38px; left: -35px; right: 75px; width: 100%; z-index: -1 }#reviews { position: relative; text-align: center; background-color: #003471; position: relative; color: #fff }#reviews:after { content: url(assets/images/reviews-bg.png); position: absolute; bottom: 0; right: 50%; transform: translateX(50%); pointer-events: none; }#reviews>div { padding: 30px 10px }#reviews article { vertical-align: top; max-width: 980px; width: 100%; position: relative }#reviews article>div { display: block; vertical-align: middle; margin: 10px auto }#reviews .cycle-slideshow { margin: 30px auto }#reviews article p { color: #fff; margin: 10px auto; position: relative; font-size: 20px; line-height: 1.5; color: #ffffff; font-family: Philosopher; font-size: 23px; font-style: italic; max-width: 980px }#reviews .controls { display: block; margin: 0 auto; position: relative; max-width: 1100px }#reviews author { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 1.4px; line-height: 1.5; text-transform: uppercase; text-align: left }#reviews .social-icon { display: inline-block; font-size: 30px; vertical-align: middle; text-align: center; margin-right: 20px; border-radius: 50%; line-height: 53px; width: 59px; height: 59px; background-color: rgba(0, 0, 0, 0.2) }#reviews .social-icon.icon-google { color: #dc4e41 }#reviews .social-icon.icon-yelp { color: #b62717 }#reviews .social-icon.icon-facebook { color: #4d70a8 }#reviews .social-icon.icon-linkedin { color: #0e76a8 }#reviews star { display: block; line-height: 1 }#reviews star:before { font-family: 'fontello'; font-weight: 400; margin: 0; font-style: normal; content: '\e80f \e80f \e80f \e80f \e80f'; color: #febb21; font-family: fontello; font-size: 14px; letter-spacing: 5.6px }#reviews .controls .pager>span:not(.cycle-pager-active) { background-color: #fff }#reviews .controls .arrow { border: 1px solid #fff }#reviews .controls .arrow:hover { background-color: #fff }#reviews .controls .arrow:before { content: none }#reviews .controls .prev, #reviews .controls .next { position: absolute; bottom: 180px; transform: none }#reviews .controls .prev { left: 0 }#reviews .controls .next { right: 0; left: auto }#reviews .controls .prev i, #reviews .controls .next i { position: static; transform: none }#reviews .btn{position: relative; z-index: 5;}@media (max-width:1050px) { #reviews .controls { display: flex; align-items: center; justify-content: space-around; margin: 10px auto; max-width: 400px } #reviews .pager { margin: 0; transform: none; position: static } #reviews .controls .prev, #reviews .controls .next { position: static; display: inline-block; vertical-align: middle }}#insurance figcaption a { margin-top: 28px }#services { display: flex; align-items: center; justify-content: space-around; max-width: 1200px; margin: 200px auto }#services .h2 { font-size: 92px }#services article { flex: 0 1 525px; padding: 10px }#services article p { max-width: 408px;line-height:1.7; }#services figure { flex: 0 1 529px;margin-top:75px; }#services figure a { border-top: 1px solid #dedede; display: block; padding: 20px 0; text-align: left; display: flex; align-items: center; justify-content: start }#services figure a h3 { transition: .3s; color: #000000; font-family: Philosopher; font-size: 38px; font-weight: 400 }#services figure a i { color: #e56b6d; font-size: 40px; line-height: 1; margin-left: 20px }#services figure a:hover h3 { color: #e56b6d }#services figure a:last-of-type { border-bottom: 1px solid #dedede }#quest { display: flex; align-items: center; justify-content: space-around; max-width: 1200px; margin: 200px auto }#quest article { flex: 0 1 443px; padding: 10px }#quest figure { border: 1px solid #dedede; flex: 0 1 560px; padding: 60px 10px }#quest figure form { max-width: 500px; margin: 0 auto }#quest form>span { display: block }#quest form { max-width: 535px; width: 100%; min-height: 105px; margin: 20px auto; padding: 10px; z-index: 1; position: relative; text-transform: uppercase; font-weight: 900 }#quest input, #quest textarea { font-family: Philosopher; font-size: 20px; font-weight: 400; display: block; width: 100%; color: #000000; padding-left: 10px; box-sizing: border-box; font-size: 16px; outline: none; background-color: transparent; border: 1px solid #dedede; background-color: #fff }#quest input { min-height: 55px; margin: 10px 0px; flex: 1 1 30% }#quest::-webkit-input-placeholder { color: #000000 }#quest::-moz-placeholder { color: #000000 }#quest:-ms-input-placeholder { color: #000000 }#quest:-moz-placeholder { color: #000000 }#quest textarea { min-height: 160px; resize: none }#quest .btn { margin: 20px auto 0; display: block; max-width: 250px; width: 100%; min-width: auto }.bottom { display: flex; justify-content: center }.bottom>section { flex: 1 1 50%; padding: 28px 28px 10px; background-color: #003471 }.bottom>section>div { max-width: 640px; margin: 0 auto }.bottom>section .link { display: block; color: #fff; text-transform: uppercase; font-weight: 700; font-size: 11px; text-align: center; margin-top: 10px }.bottom>section .link span { display: inline-block; vertical-align: middle }.bottom>section .link i { font-size: 30px; display: inline-block; vertical-align: middle; color: #e56b6d }.bottom>section .link:hover { color: #e56b6d }.bottom>section+section { background-color: #e56b6d }.bottom>section+section .link i { color: #003471 }.bottom>section+section .link:hover { color: #003471 }footer { position: relative; background-color: #fff; color: #000; font-size: 16px; text-align: center }footer .container { max-width: 1100px; margin: 0 auto; padding: 60px 10px 30px }footer .title { display: block; color: #003471; font-family: "Noto Sans HK"; font-size: 14px; font-weight: 700; text-transform: uppercase;margin-bottom:10px; }footer .fo-main { display: flex; align-items: flex-start; justify-content: space-between; max-width: 1300px; margin: 0 auto; padding: 40px 0px; flex-wrap: wrap }footer .fo-contact { text-align: left }footer .hours { font-size: 13px; line-height: 2; margin-top: 0; }footer .pho { display: block; color: #e56b6d; font-size: 24px; font-weight: 700; line-height: 1.19 }footer .phy { display: block; color: #000000; font-size: 14px; line-height: 1.15; margin: 20px auto }footer .pho:hover, footer .phy:hover { color: #003471 }footer .social { margin-top: 20px }#copyright { max-width: 1150px; font-size: 14px; color: #000000; margin: 0 auto; padding: 30px 0; border-top: 1px solid rgba(0, 0, 0, 0.25) }#copyright .sitemap { color: #e56b6d }#copyright a:hover { text-decoration: underline !important }#copyright em { font-style: normal }#copyright span { display: inline-block; margin: 0 20px }@media (max-width:1040px) { footer .fo-main { justify-content: space-around } footer .fo-main >div{margin: 30px auto;}}@media (max-width:960px) { footer .fo-logo { flex: 1 1 100% }}@media (max-width:768px) { #copyright { font-size: 10px; letter-spacing: 0; text-align: center } #copyright span { display: block } #copyright em { display: none }}@media screen and (max-width:1023px) { .split>div, #services, #quest { display: block; text-align: center } #services article p { margin: 1em auto } #page-title { background-image: none !important } #page-title .title-container { display: block; text-align: center; height: auto } #page-title .title-wrapper { border-right: none; border-bottom: 4px solid rgba(229, 107, 109, 0.8) } #meet article { padding: 30px 10px; margin: 0 auto } #banner .caption { position: static; width: 100%; max-width: 100%; text-align: center; border-left: none; border-bottom: 4px solid rgba(229, 107, 109, 0.8); margin-bottom: 30px } .split figcaption { text-align: center } #meet article:before, #meet article:after, #tech figure:before, #tech figure:after { content: none !important } #callouts .links:before, #callouts .links:after { content: none } #callouts .links a { flex: 0 1 45% } body.page_meet-the-endodontist .main-img { display: block }}@media screen and (max-width:768px) { main, .contact-us h2, .contact-us h3, footer .fo-contact { text-align: center } h1, #page-title h1, #page-title h1+h2, h2, .h2, #services .h2, #banner h2 { font-size: 40px; line-height: 1.2 } h3 { font-size: 25px; line-height: 1.2 } .services-grid { display: block; text-align: center } .services-grid a .title { display: block } .services-grid a:nth-of-type(even) figure:after { background-color: #003471 } #callouts .links { display: block; text-align: center } #callouts .links a>div { display: block } #callouts .links a .icon { margin: 10px auto } #quest, #services, #callouts, #meet { margin: 30px auto } #below-banner, #below-banner a { display: block } #reviews>div { padding: 30px 10px }}@media screen and (max-width:600px) { .animated, .wow { transition-property: none !important; transform: none !important; animation: none !important; visibility: visible !important } #map, footer .gmap { display: none } .btn, .btn-alt { width: 100%; max-width: 300px; min-width: auto !important; margin: 10px auto } .top-bar span a:nth-of-type(1) { display: none } #services figure a { padding: 15px 10px } #index-tour::after {content: none;}}