@charset "utf-8"; @font-face { font-family: 'FontAwesome'; src: url("../fonts/fontawesome-webfont.eot?v=4.7.0"); src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'PTSerif-Regular'; src: url('../fonts/PTSerif-Regular.eot'); src: url('../fonts/PTSerif-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/PTSerif-Regular.woff2') format('woff2'), url('../fonts/PTSerif-Regular.woff') format('woff'), url('../fonts/PTSerif-Regular.ttf') format('truetype'), url('../fonts/PTSerif-Regular.svg#PTSerif-Regular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PTSerif-Bold'; src: url('../fonts/PTSerif-Bold.eot'); src: url('../fonts/PTSerif-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/PTSerif-Bold.woff2') format('woff2'), url('../fonts/PTSerif-Bold.woff') format('woff'), url('../fonts/PTSerif-Bold.ttf') format('truetype'), url('../fonts/PTSerif-Bold.svg#PTSerif-Bold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PTSans-Regular'; src: url('../fonts/PTSans-Regular.eot'); src: url('../fonts/PTSans-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/PTSans-Regular.woff2') format('woff2'), url('../fonts/PTSans-Regular.woff') format('woff'), url('../fonts/PTSans-Regular.ttf') format('truetype'), url('../fonts/PTSans-Regular.svg#PTSans-Regular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PTSans-Bold'; src: url('../fonts/PTSans-Bold.eot'); src: url('../fonts/PTSans-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/PTSans-Bold.woff2') format('woff2'), url('../fonts/PTSans-Bold.woff') format('woff'), url('../fonts/PTSans-Bold.ttf') format('truetype'), url('../fonts/PTSans-Bold.svg#PTSans-Bold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PTSans-BoldItalic'; src: url('../fonts/PTSans-BoldItalic.eot'); src: url('../fonts/PTSans-BoldItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/PTSans-BoldItalic.woff2') format('woff2'), url('../fonts/PTSans-BoldItalic.woff') format('woff'), url('../fonts/PTSans-BoldItalic.ttf') format('truetype'), url('../fonts/PTSans-BoldItalic.svg#PTSans-BoldItalic') format('svg'); font-weight: normal; font-style: normal; } html, body, div, span, iframe, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } /* Layout - Bootstrap custom styels or modify/edit predefined styels */ .container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; } .row { margin-right: 0; margin-left: 0; } [class*='col-'] { padding-right: 0; padding-left: 0; } /* preloader =============================*/ .spinner{margin:100px auto 0;width:70px;text-align:center}.spinner>div{width:18px;height:18px;background-color:#db9e61;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.preloader{background-color:#fff;height:100%;width:100%;position:fixed;z-index:999999999;margin-top:0;top:0}#loading-center{width:100%;height:100%;position:relative}#loading-center-absolute{position:absolute;left:50%;top:50%;height:200px;width:200px;margin-top:-100px;margin-left:-100px} .scrollup { display: block; position: fixed; bottom: 20px; right: 20px; height: 40px; width: 40px; font-size: 20px; line-height: 40px; color: #007C84; text-align: center; background: rgba(0,240,253,.5); border: 1px solid #007C84; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .scrollup:hover { color: #ffffff; } .hide-from-desktop { display: none; } .hide-from-mobile { display: block; } /* carousel fade effect ===========================*/ .carousel-fade .carousel-inner .item{transition-property:opacity}.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right,.carousel-fade .carousel-inner .item{opacity:0}.carousel-fade .carousel-inner .active,.carousel-fade .carousel-inner .next.left,.carousel-fade .carousel-inner .prev.right{opacity:1}.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right,.carousel-fade .carousel-inner .next,.carousel-fade .carousel-inner .prev{left:0;transform:translate3d(0,0,0)}.carousel-fade .carousel-control{z-index:2}.carousel,.carousel-inner,.carousel-inner .item{height:100%} /* Common styels ==================================*/ h1, h2, h3, .article-type, .col-address, header .header-contact, header .top-menu ul li a, footer .contact-info, footer .contact-info a, .social-media .sm-text { font-family: PTSerif-Regular; } .services h2, .contact-info .p_number { font-family: PTSerif-Bold; } b, strong, .link-button, .appointment-form form button, .contact-info span[itemprop="name"], .expression .name { font-family: PTSans-Bold; } body, footer .footer-menu ul li:hover, footer .footer-menu ul li.active, footer .footer-menu ul li:hover a, footer .footer-menu ul li.active a, .contact-info .p_number, .social-media .sm-icons a { color: #333333; } .related-faqs h3, .header-address a, header .search-icon, header .search_form:before, header .header-contact a, header .top-menu ul li ul li:hover a.main-link, header .top-menu ul li ul ul li li:hover a, .related-faqs h3 a { color: #bb9b6a; } h1, h2, .article-type, .related-faqs h3, .col-address, header .header-contact, header .top-menu ul li a, .link-button, .appointment-form form button, footer .footer-menu ul li a, footer .contact-info, footer .contact-info a, .social-media .sm-text, .expression .name { text-transform: uppercase; } h2, header .search-icon, header .search_form:before, header .top-menu ul li a, .services .service, .link-button, .appointment-form form button, .gallery-area, .search_mobile:before, .subpage .column-right h2 { text-align: center; } header .search_form:before, header .search_form input[type="submit"], header .top-menu ul li, header .top-menu ul li a, header .top-menu ul li ul li, header .top-menu ul li ul li a, header .top-menu ul li:hover > ul, header .top-menu ul.left-list, header .top-menu ul.right-list, header .top-menu ul li ul li:hover > ul, .link-button, .appointment-form form button, .appointment-form form, .appointment-form form > .input select, .testimonial-right span[itemprop="name"], .testimonial-right span[itemprop="reviewBody"], footer .footer-menu ul li, .search_mobile, .search_mobile:before, .search_mobile input[type="submit"], .expression .name { display: block; } @mixin trans-effect { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } @mixin shadowed-image { padding: 2px; background: #fff; box-shadow: 1px 1px 5px #777777; } .bordered-image { border: 1px solid #ddd; } /* Home page, inner pages styles ===================*/ body { font-size: 16px; font-family: PTSans-Regular; } body, body.modal { padding-right: 0 !important; } h1, h2, .article-type { font-size: 18px; color: #007c84; } h1, .article-type { margin-bottom: 21px; .subpage & { color: #49a5bc; font-size: 36px; line-height: 40px; padding: 33px 0 5px 15px; } } h1[itemprop~="headline"] { .subpage & { background: none; font-size: 28px; line-height: 40px; padding: 0 0 10px 0; text-align: left; } } h2 { margin-bottom: 30px; .subpage & { text-align: left; margin-bottom: 27px; line-height: 22px; } } a { color: #007c84; &:hover { color: #BD966B; } } .separator { border-bottom: 1px dotted #007c84; height: 5px; margin: 10px 0 14px 0; } ul.list { margin: 24px 0 24px 54px; li { padding-left: 17px; margin-bottom: 0; vertical-align: middle; list-style-type: none; background: url(../images/list-dot.png) no-repeat 0 9px transparent; } } .bulleted ul.list { margin: 24px 0 24px 0; li { margin-bottom: 5px; } } .procedure ul.faq-list { margin: 24px 0 24px 0; li { padding-left: 23px; padding-bottom: 15px; margin-bottom: 15px; vertical-align: middle; list-style-type: none; border-bottom: 1px dotted #007c84; background: url(../images/list-arrow.jpg) no-repeat 0 3px transparent; } } .related-articles { ul { margin: -5px 0 0 0; li { padding-left: 23px; margin-bottom: 5px; vertical-align: middle; list-style-type: none; background: url(../images/list-arrow.jpg) no-repeat 0 3px transparent; } } .separator { margin: 30px 0 35px 0; } } ol.list { margin: 10px 0 30px 20px; li { padding-left: 12px; margin-bottom: 6px; } } a[name] { //padding-top: 100px; } .col-address { color: #007c84; padding-top: 30px; line-height: 21px; } .sm-widgets { height: 20px; width: 230px; position: relative; margin-right: -4px; margin-bottom: 48px; .fb-like, .google-button { float: left; } .fb-like { margin-top: -1px; } .google-button { width: 64px; margin-left: 9px; } } header { .search-icon { float: right; width: 30px; height: 30px; padding-top: 2px; font-size: 14px; cursor: pointer; margin-top: 30px; border:2px solid #bb9b6a; } .search_form { display: none; width: 290px; position: absolute; top: 30px; right: 35px; background: #fff; z-index: 800; border: 2px solid #bb9b6a; &:before { top: 0; right: 0; width: 30px; height: 100%; color: #fff; z-index: 100; content: "\f002"; line-height: 25px; position: absolute; font-family: 'FontAwesome'; } input[type="text"] { height: 26px; margin-top: 1px; width: 265px; margin-left: 10px; border: none; background: none; position: relative; } input[type="submit"] { top: 0; right: 0; height: 26px; width: 26px; position: absolute; border: none; z-index: 200; background: none; } } .header-contact { text-align: right; margin-top: 90px; a.hcontact { color: #007c84; } a.p_number { font-size: 18px; } } .top-menu ul { list-style: none; li { position: relative; float: left; padding-right: 1px; background: #A4E5F1; @include trans-effect; &.home { width: 9.4871795%; } &.service { width: 12.905983%; } &.about { width: 13.4188034%; } &.appoint { width: 15.8119658%; } &.gallery { width: 19.145299%; } &.promotion { width: 14.1880342%; } &.store { width: 15.042735%; } &:last-child { padding-right: 0; } a { height: 50px; color: #ffffff; line-height: 50px; background: #49a5bc; @include trans-effect; } &:hover a { color: #007c84; background: #A4E5F1; text-decoration: none; } &:hover > ul { -moz-animation: fadeIn 0.4s ease-in; -webkit-animation: fadeIn 0.4s ease-in; animation: fadeIn 0.4s ease-in; } &.service-pic { width: 100%; height: auto; padding-top: 14px; } ul { /* 2nd level */ position: absolute; top: 50px; left: 0; width: 300px; z-index: 200; display: none; padding-top: 7px; padding-bottom: 16px; background: #a4e5f1; -moz-box-shadow: -2px 3px 0px 0px rgba(0,0,0,.04); -webkit-box-shadow: -2px 3px 0px 0px rgba(0,0,0,.04); box-shadow: -2px 3px 0px 0px rgba(0,0,0,.04); li { /* 2nd level */ padding: 0; margin: 0; width: 100%; div { padding-left: 30px; padding-right: 30px; background: #a4e5f1; } a { float: none; width: 100%; height: 39px; line-height: 39px; text-align: left; color: #007c84; background: #a4e5f1; border-bottom: 2px solid #83d0db; } a.last-link { border-bottom: none; } ul { /* 3rd level */ top: -7px; left: 280px; width: 460px; padding-left: 30px; padding-right: 30px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; padding-top: 0; &.lasers { top: -46px; } &.peels { top: -85px; } &.medical-derma { top: -124px; } li { /* 3rd level */ width: 100%; &.double-line { /* for double line (long) item */ height: auto; a { height: 53px; line-height: 18px; padding-top: 8px; padding-bottom: 4px; } } &.single-line { /* for single line item requiring space equal to double line */ height: auto; a { height: 53px; line-height: 40px; padding-top: 7px; padding-bottom: 4px; } } &:hover > ul { -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; } } } } } &.gallery { ul { height: auto; padding: 0; left: 28px; &.left-list { left: -30px; padding-bottom: 10px; } &.right-list { left: 201px; padding-bottom: 10px; li a { padding-left: 0; } } a.last-link { padding-bottom: 10px; } li:hover a { color: #007c84; } li ul { -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; li:hover a { color: #bb9b6a; } } } } } &.left-list { float: left; width: 231px; left: -30px; top: 0; padding-right: 0; padding-top: 10px; padding-bottom: 19px; border-left: 1px solid #83d0db; li { height: 32px; border-right: 1px solid #83d0db; a { height: 32px; line-height: 32px; color: #007c84; border-bottom: 1px solid #83d0db; &.last-link { border-bottom: none; } } } } &.right-list { float: right; width: 229px; left: 201px; top: 0; padding-top: 10px; padding-left: 0; padding-bottom: 19px; border-right: 1px solid #83d0db; li { height: 32px; a { height: 32px; line-height: 32px; padding-left: 30px; color: #007c84; border-bottom: 1px solid #83d0db; &.last-link { border-bottom: none; } } } } } &.isStuck { z-index: 100; .header-content { display: none; } } } .services { //margin-top: 30px; padding-top: 27px; padding-bottom: 30px; background: url("../images/services-bg.jpg") no-repeat center top; background-size: cover; h2 { padding-bottom: 28px; margin-bottom: 0; &:hover { cursor: pointer; color: #B59765; } } .service img:hover { -moz-animation: pulse 0.5s ease-in; -webkit-animation: pulse 0.5s ease-in; animation: pulse 0.5s ease-in; } .service-text { margin-top: 25px; margin-bottom: 27px; line-height: 21px; padding: 0 15px 0 15px; } .service1 { padding-right: 22px; position: relative; } .service2 { padding-right: 6px; position: relative; } .service3 { padding-left: 7px; position: relative; } .service4 { padding-left: 23px; position: relative; } } .link-button { width: 130px; height: 30px; color: #ffffff; background: #007C84; margin: 0 auto; line-height: 30px; @include trans-effect; &:hover { color: #fff; background: #bb9b6a; text-decoration: none; } } .content-area { margin-top: 58px; line-height: 21px; padding-bottom: 44px; .column1 { padding-left: 15px; padding-right: 22px; } .column2 { padding-left: 7px; } .column3 { padding-left: 22px; } } img.welcome-video { float: left; margin: 6px 30px 15px 0; } .intro-video { margin-bottom: 20px; } .appointment-form { form { width: 100%; padding-left: 23px; padding-right: 23px; button { width: 130px; height: 30px; color: #ffffff; background: #007C84; border: none; line-height: 20px; margin: 30px auto 0 auto; @include trans-effect; &:hover { color: #fff; background: #bb9b6a; text-decoration: none; } } } form > .input { position: relative; width: 100%; height: 34px; margin-bottom: 20px; background: #fff; input { top: 0; right: 0; width: 100%; height: 34px; background: none; position: absolute; padding-left: 10px; border: 2px solid #bb9b6a; } select { width: 100%; height: 34px; top: 0; right: 0; position: absolute; border: 2px solid #bb9b6a; background: none; font-weight: normal; -webkit-appearance: none; -moz-appearance: none; appearance: none; } &.text-area { height: 120px; margin-bottom: 10px; } textarea { position: absolute; top: 0; right: 0; width: 100%; height: 120px; background: none; padding-left: 10px; border: 2px solid #bb9b6a; } } } .testimonial-right { text-align: left; margin-top: -15px; padding: 10px 10px 0 16px; div[itemprop="itemReviewed"] { display: none; } span[itemprop="name"] { font-size: 15px; margin-top: 13px; margin-bottom: 13px; } .stars { color: #fab117; font-size: 13px; letter-spacing: -0.1em; } span[itemprop="reviewBody"] { text-align: left; margin-bottom: 28px; span { font-size: 18px; color: #007c84; } } } .gallery-area { padding-top: 43px; font-size: 14px; h2 { margin-bottom: 2px; } .gallery { width: 100%; margin: 29px auto 0 auto; #carousel_b { .item { .item1-span, .item2-span, .item3-span { float: left; margin-right: 4.44445%; } .item1-span { width: 30.34188%; } .item2-span { width: 30.42735%; } .item3-span { width: 30.34188%; margin-right: 0; } .item1-wrap, .item2-wrap { float: left; width: 46.42857%; } .item1-wrap { margin-right: 7%; } .item2-wrap { margin-right: 0; } } .controls-b { position: relative; a.control-left, a.control-right { width: 21px; height: 29px; position: absolute; top: 30px; z-index: 100; } a.control-left { left: 44%; background: url(../images/left-control.png) top center no-repeat; } a.control-right { right: 44%; background: url(../images/right-control.png) top center no-repeat; } } .carousel-indicators { bottom: -49px; li { background-color: #bb9b6a; border: 1px solid #bb9b6a; border-radius: 2px; margin: 0; } .active { background-color: #ffffff; border-radius: 2px; width: 10px; height: 10px; } } } } } .affiliations { padding-top: 44px; margin-top: 60px; .logos { margin-top: -3px; img { float: left; margin-right: 30px; } img:last-child { margin-right: 0; } } } footer { .footer-menu-strip { width: 100%; height: 50px; margin-top: 60px; background-color: #5faab0; } .footer-menu ul { width: 90%; margin: 0 auto; list-style: none; li { float: left; height: 50px; line-height: 50px; margin-right: 59px; @include trans-effect; &:last-child { margin-right: 0; } a { color: #fff; letter-spacing: 1px; @include trans-effect; } &:hover a, &.active a { color: #BB7505; text-decoration: none; } } } .footer-content { padding-bottom: 28px; background: url("../images/footer-bg.jpg") no-repeat center top; background-size: cover; .contact-info { padding-top: 24px; span[itemprop="name"] { text-transform: none; } label, span[itemprop="address"] { text-transform: none; font-family: PTSans-Regular; } span[itemprop="address"] { margin-bottom: 18px; } .spacing { margin-bottom: 40px; } } .social-media { padding-top: 24px; text-align: right; .sm-text { margin-bottom: 12px; } .sm-icons { font-size: 24px; margin-bottom: 13px; a { display: inline-block; margin-right: 14px; @include trans-effect; &.addthis { margin-right: 0; } &.fb:hover { color: #3765A3; } &.twitter:hover { color: #00ace3; } &.google-plus:hover { color: #ff3921; } &.pt:hover { color: #BD081C; } &.yt:hover { color: #D22222; } &.addthis:hover { color: #ff5c00; } } } } .copy-right { line-height: 21px; text-align: right; margin-top: 58px; } } } .search_mobile { width: 91%; margin-bottom: 15px; margin-left: 4%; position: relative; &:before { content: "\f002"; width: 40px; height: 40px; position: absolute; top: -2px; right: 0; line-height: 40px; font-size: 20px; color: #000000; font-family: 'FontAwesome'; } input[type="text"] { height: 36px; width: 100%; border: none; color: #000000; background: #fff; padding-left: 10px; @include trans-effect; &:focus { box-shadow: 0 0 5px black; padding: 3px 0 3px 3px; border: 1px solid black; } } input[type="submit"] { top: 0; right: 0; height: 38px; width: 38px; position: absolute; border: none; background: none; } } .subpage { .content-area { margin-top: 0; .content-wrap { padding-left: 15px; padding-right: 22px; padding-top: 2px; .affiliations { padding-top: 0; margin-top: 42px; h2 { text-align: center; } .logos { text-align: center; img { float: none; margin-bottom: 20px; } } } } .expression { font-size: 18px; text-align: left; margin-top: 1px; margin-bottom: 17px; line-height: 24px; font-family:PTSans-BoldItalic; .name { color: #007c84; font-size: 16px; font-style: normal; } span.name { display: inline; } } .gallery-area { padding-top: 0; .gallery { margin-top: 8px; margin-bottom: 73px; #carousel_b .controls-b a.control-left { left: 0; } #carousel_b .controls-b a.control-right { right: 0; } } } .content { margin-top: 3px; .left-logo { float: left; margin: 4px 25px 5px 0; } .top-line { font-size: 21px; color: #007c84; margin-bottom: 14px; line-height: 28px; font-family: PTSerif-Regular; } .left-image { float: left; margin: 5px 18px 10px 0; @include shadowed-image; } .right-image-big { float: right; margin: 5px 0 10px 15px; } .right-image-large { float: right; margin: 5px 0 10px 18px; @include shadowed-image; } .full-image { display: block; width: 100%; margin: 0 0 20px 0; } .service-image { float: right; border: 1px solid #ddd; margin: 5px 3px 10px 18px; } .service-image-left { float: left; border: 1px solid #ddd; margin: 5px 18px 10px 0; } .staff-bio { border-bottom: 1px solid #BB9B6A; padding-bottom: 30px; margin-bottom: 30px; &:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } } .arrow-link i.fa { font-size: 15px; } h3 { font-size: 20px; color: #007c84; margin-bottom: 14px; text-transform: none; } .col-map img { @include shadowed-image; } .qr-code { width: 150px; float: right; margin: 0 0 10px 15px; } .social-links { img { width: 124px; height: 37px; margin: 0 10px 10px 0; @include shadowed-image; } } .testimonial { padding-top: 33px; padding-bottom: 33px; margin-bottom: 0; border-bottom: 1px solid #BB9B6A; &.first { padding-top: 3px; } &.last { border-bottom: none; } .rating { width: 100%; margin-bottom: 10px; color: #BB9B6A; } span.qleft { margin-right: 20px; } span.qright { margin-left: 15px; } span.name { display: block; width: 100%; margin-top: 15px; font-weight: bold; } } .faq-image { float: right; margin: 0 0 10px 10px; } .browse { text-align: center; margin-top: 20px; padding: 20px 0 20px 0; border-top: 1px dotted #007C84; h3 { margin-bottom: 7px; } } .gallery-wrap { h2 { color: #BB9B6A; font-size: 30px; text-align: center; background: #A8ECF2; padding: 10px 0 10px 0; } .before-after { margin-bottom: 29px; padding-bottom: 29px; border-bottom: 1px dotted #007C84; &.last { border-bottom: none; } } .col-left { padding-right: 3.5%; } .col-right { padding-left: 3.5%; } } .col-newsletter { padding-right: 38px; h2 { text-align: center; } form { text-align: center; padding-bottom: 27px; background: url("../images/newsletter-border.jpg") no-repeat bottom left; } .formField { width: 100%; height: 34px; background: none; padding-left: 10px; border: 2px solid #bb9b6a; } .submitButton { width: 130px; height: 30px; color: #ffffff; background: #007C84; border: none; line-height: 20px; font-family: PTSans-Bold; text-transform: uppercase; margin: 30px auto 0 auto; @include trans-effect; &:hover { color: #fff; background: #bb9b6a; text-decoration: none; } } } h2.central, h2.archive { font-size: 20px; text-align: center; margin-top: 30px; margin-bottom: 24px; } h2.archive { margin-top:0; } .img-grid { margin-top: 30px; padding: 32px 8px 0 8px; border: 1px solid #ddd; .col-sm-3 { margin-bottom: 24px; text-align: center; padding-left: 5px; padding-right: 5px; } .col-sm-3 img { max-width: 100%; @include shadowed-image; } .media-text { margin-top: 5px; a { text-decoration: underline; &:hover { text-decoration: none; } } } a img:hover { opacity: .8; } .audio { text-align: center; padding-bottom: 30px; margin-bottom: 20px; border-bottom: 1px solid #ddd; &.last { padding-bottom: 20px; margin-bottom: 0; border-bottom: none; } .media-text { text-align: center; } } } } .promotions-wrap { .separator { margin: 24px 0 30px 0; } .promotion { h2 { text-align: center; } h3 { color: #BB9B6A; } } } .categories { margin-top: 25px; h2 { margin-bottom: 15px; } a.category-link { display: block; float: left; padding: 6px 12px; color: #fff; background: #007C84; text-align: center; margin-right: 10px; margin-bottom: 5px; @include trans-effect; &:hover { text-decoration: none; background: #bb9b6a; } } &.media a.category-link { width: 155px; } } .service-videos { margin-top: 28px; h2 { margin-bottom: 6px; } .video-1 { padding-top: 25px; } .video-2 { padding-left: 35px; padding-top: 25px; } .video-0 { padding-top: 25px; padding-bottom: 35px; border-top: 1px dotted #007c84; border-bottom: 1px dotted #007c84; h2 { text-align: center; } img { margin-left: auto; margin-right: auto; } } } .related-faqs { margin-top: 55px; &.mild { margin-top: 30px; } .faqs-1 { padding-right: 34px; } .faqs-2 { padding-left: 35px; } .faq { margin-bottom: 25px; } h3 { margin-bottom: 1px; a:hover { color: #007C84; } i.fa { font-size: 14px; } } .text { padding-left: 22px; } .faq-button { padding-top: 3px; } } .article-img-div { img { //max-width:90%; float:right; margin:0 0 10px 10px; border:1px solid #cccccc; } } .article_date { text-align: left; font-size: 13px; color: #666666; margin-bottom: 24px; padding-left: 20px; background: url(../images/article/calendar-16.png) no-repeat center left; } } footer .footer-menu-strip { margin-top: 16px; } } .column-right { padding-left: 38px; padding-right: 15px; padding-top: 4px; .appointment-form { margin-bottom: 57px; form { padding-left: 0; padding-right: 0; } } } .gallery-desktop { display: block; } .gallery-mobile { display: none; } .cvWrap { width: 100%; table tr td:first-child { padding-right: 10px; } } .cv_left { width: 32%; text-align: right; padding: 10px 10px 10px 0; text-transform: uppercase; border-bottom: 1px solid #ccc; } .cv_right { width: 68%; padding: 0 10px 10px 10px; border-bottom: 1px solid #ccc; } .intLeft { width: 67%; } .intRight { width: 33%; } .modal-title { font-size: 18px; text-align: center; } .buttons-block .link-button { float: left; margin-right: 10px; } .circle-nav { /* add position:relative; to .service1,2,3,4 */ position: absolute; z-index: 999; ul { list-style: none; width: 460px; li { width: 100%; ul.left-list { float: left; width: 231px; border: 1px solid #39B3C4; border-right: none; } ul.right-list { float: right; width: 229px; border: 1px solid #39B3C4; border-left: none; border-right: none; } li { background: #A4E5F1; border-right: 1px solid #39B3C4; a { width: 100%; display: block; height: 32px; line-height: 32px; text-align: left; color: #007c84; background: #a4e5f1; padding-left: 30px; text-transform: uppercase; font-family: PTSerif-Regular; border-bottom: 1px solid #83d0db; &.last-link { border-bottom: none; } &:hover { color: #bb9b6a; text-decoration: none; } } &.double-line { /* for double line (long) item */ height: auto; a { height: 53px; line-height: 18px; padding-top: 8px; padding-bottom: 4px; } } &.single-line { /* for single line item requiring space equal to double line */ height: auto; a { height: 53px; line-height: 40px; padding-top: 7px; padding-bottom: 4px; } } &:hover > ul { -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; } } } } } #injectables { display: none; top: 30px; } #lasers { display: none; top: 30px; } #peels { display: none; top: 30px; } #medical_derma { display: none; left: -168px; top: 30px; } /* Screen @media - custom styels or modify/edit predefine styels */ @media screen and (max-width: 1230px) { .affiliations .logos { text-align: center; img { float: none; margin-bottom: 10px; } } footer .footer-menu ul { width: 100%; text-align: center; li { display: inline-block; float: none; margin-right: 30px; } } } @media screen and (max-width: 1199px) { .gallery-area { padding-top: 20px; .gallery #carousel_b .controls-b { a.control-left { left: 43.5%; } a.control-right { right: 43.5%; } } } .subpage { .content-area .service-videos { .video-1 { padding-right: 5px; } .video-2 { padding-left: 5px; } } .content-area .content { .faq-image { float: none; max-width: 100%; height: auto; display: block; margin: 0 auto 28px auto; } .col-newsletter { form { background: none; } } } } } @media screen and (max-width: 1140px) { #medical_derma { top: 30px; left: -250px; } } @media screen and (max-width: 1047px) { #medical_derma { left: -220px; top: 50px; } } @media screen and (max-width: 991px) { header { .sm-widgets { margin-bottom: 25px; } .header-contact { margin-top: 70px; } .col-logo.col-sm-4 { padding-top: 10px; } .top-menu ul li { a { font-size: 15px; text-transform: none; } &.gallery ul { left: -110px; } } } .services { //margin-top: 15px; .service1, .service2 { padding-bottom: 36px; } } .content-area { margin-top: 40px; padding-bottom: 20px; .column1 { padding-left: 10px; padding-right: 10px; padding-bottom: 40px; } .column2 { padding-bottom: 40px; } .content .gallery-wrap { .before-after.last { margin-bottom: 0; } } } .gallery-area { padding-top: 0; .gallery #carousel_b .controls-b { a.control-left { left: 42%; } a.control-right { right: 42%; } } } footer { .footer-menu-strip { margin-top: 40px; } .footer-content { padding-bottom: 30px; } .footer-menu ul li { margin-right: 14px; a { font-size: 14px; } } .copy-right { margin-top: 40px; } } .service-videos { h2 { text-align: center; } img { margin: 0 auto; } } .subpage #carousel_b { width: 91%; margin: 0 auto; } .column-right { padding-left: 15px; padding-right: 15px; padding-top: 40px; } #lasers { left: -90px; } #medical_derma { left: -90px; top: 30px; } } @media screen and (max-width: 900px) { .subpage #carousel_b { width: 100%; } } @media screen and (max-width: 870px) { header .top-menu ul li ul { width: 220px; li ul { left: 208px; } } .subpage #carousel_b .carousel-inner { margin-left: 0; } } @media screen and (max-width: 800px) { header .top-menu { padding-top: 10px; } .gallery-area .gallery #carousel_b .controls-b { a.control-left { left: 39%; } a.control-right { right: 39%; } } } @media screen and (max-width: 767px) { .hide-from-desktop { display: block; } .hide-from-mobile, header .sm-widgets, header .top-menu, header .search-icon, header .search_form, footer .footer-menu-strip, .social-media { display: none; } .mm-menu { color: #fff; background-color: #007C84; a:hover, li.active a, li a.active { color: #000; } .mm-list > li > a.mm-subclose { background: rgba(0,0,0,.1); color: #000; font-weight: bold; } } .top-menu-mobile { margin: 0; padding: 0; padding-bottom: 8px; list-style-type: none; background: #007C84; border-bottom: 1px solid #005155; li { height: 42px; width: 19%; display: block; float: left; text-align: center; a { height: 42px; width: 100%; display: block; font-size: 34px; color: #000; &:hover { color: #fff; } } } } header { .col-address { text-align: center; padding-top: 60px; } .col-logo img { margin: 0 auto; padding-top: 0; } .header-contact { margin-top: 0; text-align: center; padding-bottom: 20px; } } .services { margin-top: 15px; .service1, .service2, .service3 { padding-top: 30px; padding-bottom: 30px; border-bottom: 1px solid rgba(0,124,132,.4); } .service1 { padding-top: 0; } .service4 { padding-top: 30px; } h2 { &:hover { cursor: auto; color: #007c84; } } } .content-area { .column2 { padding-bottom: 50px; } .column3 { padding-left: 0; } } .gallery-area { padding-top: 30px; .gallery #carousel_b { .controls-b { a.control-left, a.control-right { top: 20px; } } .carousel-indicators { bottom: -38px; } } } footer { margin-top: 20px; .footer-content { .contact-info { padding-top: 30px; text-align: center; .spacing { margin-bottom: 24px; } } .copy-right { margin-top: 24px; text-align: center; } } } .subpage .content-area { .content-wrap { padding-left: 0; padding-right: 0; } .service-videos .video-1 { margin-bottom: 40px; padding-right: 0; } .service-videos .video-2 { padding-left: 0; } .related-faqs .faqs-1, .related-faqs .faqs-2 { padding-right: 0; padding-left: 0; } .content { .col-map { margin-top: 22px; } .gallery-wrap { .col-left { padding-right: 0; .before-after.last { margin-bottom: 29px; border-bottom: 1px dotted #007C84; } } .col-right { padding-left: 0; } .before-after img { margin: 0 auto; } } .col-newsletter { padding-right: 0; margin-bottom: 15px; } .right-image-big { width: 65%; } } } } @media screen and (max-width: 640px) { .gallery-desktop { display: none; } .gallery-mobile { display: block; } .subpage { .content-area { .gallery-area { padding-top: 20px; } .content .gallery-wrap { h2 { font-size: 24px; line-height: 26px; } } } } #carousel_b .carousel-indicators { display: none; } #carousel_mob { width: 55.5%; margin: 0 auto; .controls-mob { position: relative; a.control-left, a.control-right { width: 21px; height: 29px; position: absolute; top: 20px; z-index: 100; } a.control-left { left: 0; background: url(../images/left-control.png) top center no-repeat; } a.control-right { right: 0; background: url(../images/right-control.png) top center no-repeat; } } } .affiliations { padding-top: 24px; } .right-image-large, .service-image, .service-image-left { width: 40%; } .cvWrap { font-size: 13px; } .cv_left { text-transform: none; } .article-img-div img { width: 40%; } } @media screen and (max-width: 480px) { #carousel_mob { width: 74%; } .subpage { .content-area { .categories { &.media a.category-link { width: 100%; } } h1, .article-type { font-size: 22px; padding: 24px 0 24px 0; } h1[itemprop~="headline"] { font-size: 21px; line-height: 32px; padding: 0 0 10px 0; } .content { h2 { text-align: center; } .img-grid { .media-text a { font-size: 14px; } } .right-image-big { width: 100%; float: none; display: block; margin: 10px 0 20px 0; } } } ul.list { margin: 24px 0 24px 24px; } } .right-image-large, .service-image, .service-image-left { width: 50%; } .article-img-div img { width: 45%; } } @media screen and (max-width: 414px) { .subpage .content-area { .content { .img-grid { .col-xs-6 { width: 100%; } } audio { width: 280px; } } } } @media screen and (max-width: 360px) { .subpage .content-area { .content { .qr-code { width: 100px; } .left-image { float: none; display: block; margin: 0 auto 20px auto; } .social-links { img { width: 120px; height: 33px; margin-right: 3px; } } .left-logo { float: none; width: 70%; display: block; margin: 0 auto 20px auto; } } .cvWrap { font-size: 12px; } } } @media screen and (max-width: 320px) { #carousel_mob { width: 90%; } } @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { /* IE9 */ header .top-menu ul li.store { width: 15.05%; } footer .footer-menu ul { width: 91%; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10, IE11 */ header .top-menu ul li.store { width: 15.05%; } footer .footer-menu ul { width: 91%; } } @supports (-ms-ime-align:auto) { /* Edge */ header .top-menu ul li.store { width: 15.05%; } footer .footer-menu ul { width: 91%; } }