/* ----------------------------------------------------------------------------- Dentada - Dentist HTML5 Template File: Base SCSS File (Classic) Version: 1.0 Last change: 08/08/2019 Author: Arif Table of Contents: 1. Setup 2. Basic 3. Header -- 3.1 Header Horizontal -- 3.2 Header Vertical 4. Content -- 4.1 Section Top Bar -- 4.2 Section Slider -- 4.3 Section About -- 4.4 Section Treatments -- 4.5 Section Cta Appointment -- 4.6 Section Team -- 4.7 Section Before After -- 4.8 Section Our Centers -- 4.9 Section Blog 5. Footer 6. Elements -- 6.1 Alerts -- 6.2 Backgrounds -- 6.3 Badges -- 6.4 Buttons -- 6.5 Carousel -- 6.6 Carousel -- 6.7 Forms -- 6.8 Icons -- 6.9 Loader -- 6.10 Modals -- 6.11 Navigations -- 6.12 Notification Bar -- 6.13 Other -- 6.14 Pagination -- 6.15 Tooltips -- 6.16 Typography 7. Widgets 8. Animations -------------------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed|Ubuntu:300,400,500,700&subset=latin-ext"); /* ----------------------------------------------------------------------------- */ /* --- 1. SETUP /* ----------------------------------------------------------------------------- */ html { font-size: 14px; } @media only screen and (max-width: 575px) { html { font-size: 13px; } } body { position: relative; color: #343840; font-family: "Ubuntu", sans-serif; font-weight: 300; line-height: 1.8; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button, input { font-family: inherit; } a { color: #236fb6; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } a:hover, a:focus { text-decoration: none; color: #4677a5; } a.link-inherit { color: inherit; } a.link-inherit:hover, a.link-inherit:focus { color: #236fb6; } a.link-reset { color: inherit; } a.link-reset:hover, a.link-reset:focus { color: inherit; } a:focus, a:visited { outline: none; } textarea:focus, input:focus, *:focus { outline: none; } iframe { border: none; } img { max-width: 100%; height: auto; -webkit-backface-visibility: hidden; } ::selection { background: #236fb6; color: #fff; } *::-moz-selection { background: #236fb6; color: #fff; } /* ---------------------------------------------------------------------------- */ /* --- 2. BASICS /* ----------------------------------------------------------------------------- */ .container-custom { margin-left: 8vw; margin-right: 8vw; } @media (max-width: 1500px) { .container-custom { margin-left: 4vw; margin-right: 4vw; } } #page-loader { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 10000; background: white; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .relative { position: relative; z-index: 2; } .block { display: block; } .dark { color: #fff; } .pull-up-0 { margin-top: -0px !important; } .pull-up-5 { margin-top: -5px !important; } .pull-up-10 { margin-top: -10px !important; } .pull-up-15 { margin-top: -15px !important; } .pull-up-20 { margin-top: -20px !important; } .pull-up-25 { margin-top: -25px !important; } .pull-up-30 { margin-top: -30px !important; } .pull-up-35 { margin-top: -35px !important; } .pull-up-40 { margin-top: -40px !important; } .pull-up-45 { margin-top: -45px !important; } .pull-up-50 { margin-top: -50px !important; } .push-down-0 { margin-bottom: -0px !important; } .push-down-5 { margin-bottom: -5px !important; } .push-down-10 { margin-bottom: -10px !important; } .push-down-15 { margin-bottom: -15px !important; } .push-down-20 { margin-bottom: -20px !important; } .push-down-25 { margin-bottom: -25px !important; } .push-down-30 { margin-bottom: -30px !important; } .push-down-35 { margin-bottom: -35px !important; } .push-down-40 { margin-bottom: -40px !important; } .push-down-45 { margin-bottom: -45px !important; } .push-down-50 { margin-bottom: -50px !important; } .mb-6 { margin-bottom: 5rem !important; } .p-6 { padding: 90px 0; } @media only screen and (max-width: 1199px) { .p-6 { padding: 45px 0; } } .pl-6 { padding-left: 60px; padding-right: 0px; } @media only screen and (max-width: 991px) { .pl-6 { padding-left: 0px; } } .px-6 { padding-left: 100px; padding-right: 100px; } @media (min-width: 992px) and (max-width: 1500px) { .px-6 { padding-left: 60px; padding-right: 60px; } } @media only screen and (max-width: 991px) { .px-6 { padding-left: 0px; padding-right: 0px; } } .animated { visibility: hidden; } .animated.show { visibility: visible; } .slick-active .animated { visibility: visible; } .slick-active .animated.hidden { visibility: hidden; } .border { border: 1px solid #e3e3e3; } .dark .border { border: 1px solid rgba(255, 255, 255, 0.15); } .border-top { border-top: 1px solid #e3e3e3; } .dark .border-top, .dark.border-top { border-top: 1px solid rgba(255, 255, 255, 0.15); } .border-bottom { border-bottom: 1px solid #e3e3e3; } .dark .border-bottom, .dark.border-bottom { border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .h-100 { height: 100px; } .h-200 { height: 200px; } .h-300 { height: 300px; } .h-400 { height: 400px; } .h-500 { height: 500px; } .h-600 { height: 600px; } .h-700 { height: 700px; } .h-800 { height: 800px; } .h-900 { height: 900px; } .h-sm { height: 40vh; } .h-md { height: 60vh; } .h-lg { height: 80vh; } .h-min-fullheight { min-height: 100vh; } .header-vertical .h-fullheight { height: 100vh; } @media only screen and (max-width: 1199px) { .header-vertical .h-fullheight { height: calc(100vh - $navigation-mobile-height); } } @media only screen and (max-height: 500px) { .header-vertical .h-fullheight { height: auto; } } .header-horizontal .h-fullheight { height: calc(100vh - $header-horizontal-height); } @media only screen and (max-height: 500px) { .header-horizontal .h-fullheight { height: auto; } } .pos-v-center { position: relative; top: 50%; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (max-height: 500px) { .pos-v-center { top: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .pos-v-bottom { position: relative; top: 80%; -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); -ms-transform: translate3d(0, -100%, 0); -o-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (max-height: 500px) { .h-sm, .h-md, .h-lg, .h-fullheight { height: auto; } } .error, .success { display: none; } .success_c{ display: none; } .back-to-top { position: fixed; display: block; width: 40px; height: 35px; background: white; bottom: 45px; right: 30px; opacity: 0; z-index: 100; visibility: hidden; -webkit-box-shadow: 1px 5px 15px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 1px 5px 15px 0 rgba(0, 0, 0, 0.12); -ms-box-shadow: 1px 5px 15px 0 rgba(0, 0, 0, 0.12); -o-box-shadow: 1px 5px 15px 0 rgba(0, 0, 0, 0.12); box-shadow: 1px 5px 15px 0 rgba(0, 0, 0, 0.12); -webkit-transition: opacity 0.5s, visibility 0.5s; -moz-transition: opacity 0.5s, visibility 0.5s; transition: opacity 0.5s, visibility 0.5s; } .back-to-top i { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); font-size: 1.4rem; color: black; } .back-to-top.is-visible { opacity: 1; visibility: visible; } .back-to-top.fade-out { opacity: .8; } .back-to-top:hover { opacity: 1; } /* ---------------------------------------------------------------------------- */ /* --- 3. HEADER /* ----------------------------------------------------------------------------- */ .logo-mobile, .nav-toggle { display: inline-block; } @media only screen and (min-width: 992px) { .logo-mobile, .nav-toggle { display: none; } } @media only screen and (max-width: 991px) { .header-horizontal .logo-mobile { display: none; } } .logo-mobile { position: absolute; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 100%; top: 60px; z-index: 10; background: white; padding: 15px; -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2); -o-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .logo-mobile img { display: block; margin: 0px auto; max-width: 100%; height: auto; } @media only screen and (max-width: 767px) { .logo-mobile img { height: 60px; } } @media only screen and (max-width: 767px) { .logo-mobile { padding: 7px; } } .logo-mobile.nav-up { top: -200%; } .nav-toggle { position: relative; width: 30px; height: 30px; } .nav-toggle span { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 100%; height: 1px; background: white; } .nav-toggle span:before, .nav-toggle span:after { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .nav-toggle span:before { content: ''; position: absolute; top: -7px; left: 0px; width: 90%; height: 1px; background: white; } .nav-toggle span:after { content: ''; position: absolute; top: 7px; left: 0px; width: 70%; height: 1px; background: white; } .nav-toggle:hover span:before, .nav-toggle:hover span:after { width: 100%; } .mobile-menu-open .nav-toggle span, .mobile-menu-open .nav-toggle span:before, .mobile-menu-open .nav-toggle span:after { background: #236fb6; } .header-horizontal.mobile-menu-open .nav-toggle span, .header-horizontal.mobile-menu-open .nav-toggle span:before, .header-horizontal.mobile-menu-open .nav-toggle span:after { width: 100%; background: white; } .header-horizontal.mobile-menu-open .nav-toggle span { height: 0px; } .header-horizontal.mobile-menu-open .nav-toggle span:before { top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .header-horizontal.mobile-menu-open .nav-toggle span:after { top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } /* 3.1 Header Horizontal ----------------------------------------------------------*/ #header.header-horizontal { position: fixed; top: 50px; left: 0; right: 0; width: 100%; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; background-color: white; padding: 20px 30px; -webkit-box-shadow: 0px 10px 20px 0 rgba(0, 0, 0, 0.07); -moz-box-shadow: 0px 10px 20px 0 rgba(0, 0, 0, 0.07); -ms-box-shadow: 0px 10px 20px 0 rgba(0, 0, 0, 0.07); -o-box-shadow: 0px 10px 20px 0 rgba(0, 0, 0, 0.07); box-shadow: 0px 10px 20px 0 rgba(0, 0, 0, 0.07); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; z-index: 150; } @media only screen and (max-width: 991px) { #header.header-horizontal { box-shadow: none; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; box-direction: normal; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; } } #header.header-horizontal.nav-up { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } @media only screen and (max-width: 991px) { #header.header-horizontal #main-navigation { opacity: 0; visibility: hidden; height: 0px; border-top: 1px solid #236fb6; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; width: 100%; } } #header.header-horizontal #main-navigation .main-menu { margin: 0px; padding: 0px; list-style-type: none; } @media only screen and (max-width: 991px) { #header.header-horizontal #main-navigation .main-menu { opacity: 0; visibility: hidden; } } #header.header-horizontal #main-navigation .main-menu li { display: inline-block; } @media only screen and (max-width: 991px) { #header.header-horizontal #main-navigation .main-menu li { display: block; width: 100%; } } #header.header-horizontal #main-navigation .main-menu li a { position: relative; display: block; font-size: 16px; font-weight: 300; line-height: 30px; text-transform: uppercase; color: #236fb6; padding: 10px; } #header.header-horizontal #main-navigation .main-menu li a:hover { color: #218d7b; } #header.header-horizontal #main-navigation .main-menu li ul.sub-menu { position: relative; display: none; padding: 5px 0 5px 0; background: white; margin: 0px; } @media only screen and (min-width: 992px) { #header.header-horizontal #main-navigation .main-menu li ul.sub-menu { display: block; position: absolute; top: 100%; left: 0px; min-width: 300px; padding: 30px 0 20px 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; -webkit-transform: translate3d(0, -30px, 0); -moz-transform: translate3d(0, -30px, 0); -ms-transform: translate3d(0, -30px, 0); -o-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } } #header.header-horizontal #main-navigation .main-menu li ul.sub-menu li { width: 100%; } #header.header-horizontal #main-navigation .main-menu li ul.sub-menu li a { display: block; padding: 5px 20px; font-size: 16px; text-transform: none; } @media only screen and (max-width: 991px) { #header.header-horizontal #main-navigation .main-menu li ul.sub-menu li a { font-size: 14px; } } #header.header-horizontal #main-navigation .main-menu li.menu-item-has-children { position: relative; } #header.header-horizontal #main-navigation .main-menu li.menu-item-has-children > a:after { font-family: 'Themify'; content: '\e61a'; display: inline-block; font-size: 14px; margin-left: 10px; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; } #header.header-horizontal #main-navigation .main-menu li.menu-item-has-children > a.submenu-open:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } @media only screen and (min-width: 992px) { #header.header-horizontal #main-navigation .main-menu li.menu-item-has-children:hover ul.sub-menu { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } #header.header-horizontal #main-navigation .main-menu li.menu-item-has-children.edge .sub-menu { left: auto; right: 0px; } #header.header-horizontal #main-navigation .main-menu li.current-menu-item > a { color: #218d7b; } #header.header-horizontal #main-navigation .main-menu li.current-menu-item > a:before { position: absolute; content: ''; top: 0px; left: 0px; width: 3px; height: 45%; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background-color: #218d7b; background-image: -webkit-linear-gradient(bottom, #218d7b, #236fb6); background-image: linear-gradient(to top,#218d7b, #236fb6); z-index: 1; } @media only screen and (min-width: 992px) { #header.header-horizontal #main-navigation .main-menu li.current-menu-item > a:before { bottom: 5px; left: 0px; top: auto; width: 85%; height: 3px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } } #header.header-horizontal.goingdown { top: 0px; padding: 10px 30px; } @media only screen and (max-width: 991px) { #header.header-horizontal.goingdown { top: -100%; } } #header.header-horizontal.open #main-navigation { opacity: 1; visibility: visible; height: auto; margin-top: 15px; padding: 15px 0; } #header.header-horizontal.open #main-navigation .main-menu { opacity: 1; visibility: visible; } #header.header-horizontal .close-menu { display: none; } /* 3.2 Header Vertical ----------------------------------------------------------*/ #header.header-vertical { position: fixed; background-color: white; width: 260px; height: 100vh; overflow: auto; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; padding-top: 60px; z-index: 900; } #header.header-vertical #main-navigation .main-menu { margin: 0px; padding: 0px; list-style-type: none; } #header.header-vertical #main-navigation .main-menu li a { position: relative; display: block; font-size: 16px; font-weight: 300; line-height: 30px; text-transform: uppercase; color: #236fb6; padding: 10px 10px 10px 25px; } #header.header-vertical #main-navigation .main-menu li a:hover { color: #218d7b; } #header.header-vertical #main-navigation .main-menu li.current-menu-item > a { color: #218d7b; } #header.header-vertical #main-navigation .main-menu li.current-menu-item > a:before { position: absolute; content: ''; top: 0px; left: 0px; width: 5px; height: 100%; background-color: #218d7b; background-image: -webkit-linear-gradient(bottom, #218d7b, #236fb6); background-image: linear-gradient(to top,#218d7b, #236fb6); } #header.header-vertical #main-navigation .main-menu li.menu-item-has-children > .nav-link:after { font-family: 'Themify'; content: '\e61a'; display: inline-block; font-size: 14px; margin-left: 10px; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #header.header-vertical #main-navigation .main-menu li.menu-item-has-children > .nav-link.collapsed:after { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } #header.header-vertical #main-navigation .main-menu li.menu-item-has-children .sub-menu { list-style-type: none; padding: 0 0 0 15px; } #header.header-vertical #main-navigation .main-menu li.menu-item-has-children .sub-menu li a { font-size: 14px; line-height: 21px; text-transform: none; padding: 7px 7px 7px 20px; } #header.header-vertical.scrolling { -webkit-box-shadow: 3px 0px 30px 0 rgba(0, 0, 0, 0.04); -moz-box-shadow: 3px 0px 30px 0 rgba(0, 0, 0, 0.04); -ms-box-shadow: 3px 0px 30px 0 rgba(0, 0, 0, 0.04); -o-box-shadow: 3px 0px 30px 0 rgba(0, 0, 0, 0.04); box-shadow: 3px 0px 30px 0 rgba(0, 0, 0, 0.04); } @media only screen and (max-width: 991px) { #header.header-vertical { -webkit-transition: -webkit-transform 0.35s ease-in-out; -moz-transition: -moz-transform 0.35s ease-in-out; transition: transform 0.35s ease-in-out; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } #header.header-vertical.open { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-box-shadow: 3px 0px 30px 0 rgba(0, 0, 0, 0.04); -moz-box-shadow: 3px 0px 30px 0 rgba(0, 0, 0, 0.04); -ms-box-shadow: 3px 0px 30px 0 rgba(0, 0, 0, 0.04); -o-box-shadow: 3px 0px 30px 0 rgba(0, 0, 0, 0.04); box-shadow: 3px 0px 30px 0 rgba(0, 0, 0, 0.04); } } #header.header-vertical .logo { padding-bottom: 30px; } @media only screen and (max-width: 991px) { #header.header-vertical .logo { display: none !important; } } #header.header-vertical .close-menu { display: none; } @media only screen and (max-width: 991px) { #header.header-vertical .close-menu { position: absolute; top: 15px; left: 0px; display: block; font-size: 16px; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; color: white; padding: 5px 15px; background: #236fb6; } #header.header-vertical .close-menu:hover { cursor: pointer; } } /* ---------------------------------------------------------------------------- */ /* --- 4. CONTENT /* ----------------------------------------------------------------------------- */ .gm-style-iw { max-width: none !important; max-height: none !important; border-radius: 0px !important; padding: 0px !important; box-shadow: 0px 0px 30px 30px rgba(0, 0, 0, 0.05) !important; } @media only screen and (max-width: 575px) { .gm-style-iw { max-width: 250px; } } .gm-style-iw button { right: 0px !important; top: 5px !important; } .gm-style-iw-d { max-height: none !important; } @media only screen and (max-width: 575px) { .gm-style-iw-d { max-width: 250px !important; } } .gm-style-iw-t:after { box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.1) !important; } #body-wrapper { height: 100%; } #content { position: relative; overflow: hidden; } #content .page-title-area { position: relative; height: 400px; } @media only screen and (max-width: 575px) { #content .page-title-area { height: 220px; } } #content .page-title-area:before { position: absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; background: -webkit-linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 70%, #FFFFFF 95%); background: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 70%, #FFFFFF 95%); } #content .page-title-area .page-title { position: relative; font-size: 48px; font-weight: 700; text-transform: uppercase; color: #236fb6; z-index: 5; margin-bottom: 0px; text-align: right; } @media only screen and (max-width: 991px) { #content .page-title-area .page-title { font-size: 36px; padding-right: 0px; margin-bottom: 15px; } } @media only screen and (max-width: 767px) { #content .page-title-area .page-title { font-size: 30px; padding-right: 0px; margin-bottom: 15px; } } #content .page-title-area .breadcrumbs { position: relative; z-index: 10; height: 60px; } @media only screen and (max-width: 1199px) { #content .page-title-area .breadcrumbs { padding-left: 15px; } } @media only screen and (max-width: 575px) { #content .page-title-area .breadcrumbs { display: flex; height: auto; flex-wrap: wrap; top: 10px; padding: 15px; margin-left: -20px; margin-right: -20px; } } #content .page-title-area .breadcrumbs:before { content: ''; position: absolute; width: 50%; height: 100%; top: 0px; left: 0px; z-index: -1; background: rgba(0, 0, 0, 0.04); } @media only screen and (max-width: 1199px) { #content .page-title-area .breadcrumbs:before { width: 100%; } } #content .page-title-area .breadcrumbs li { display: inline-block; color: #8e9193; } #content .page-title-area .breadcrumbs li:after { font-family: 'FontAwesome'; content: '\f105'; font-size: 16px; color: black; opacity: 0.5; filter: alpha(opacity=50); margin-right: 10px; color: #8e9193; margin: 0 5px; } #content .page-title-area .breadcrumbs li:last-child:after { content: ''; } @media only screen and (max-width: 991px) { #content .section { padding: 30px 15px; } } #content .section-title span { font-size: 13px; display: inline-block; padding: 3px 15px; background-color: #236fb6; background-image: -webkit-linear-gradient(right, #236fb6, #218d7b); background-image: linear-gradient(to left,#236fb6, #218d7b); -webkit-border-radius: 22px; -moz-border-radius: 22px; -ms-border-radius: 22px; border-radius: 22px; color: white; margin-bottom: 5px; } #content .section-title h1 { font-size: 36px; color: #236fb6; text-transform: uppercase; letter-spacing: 2px; line-height: 40px; margin-bottom: 0px; } @media only screen and (max-width: 575px) { #content .section-title h1 { font-size: 26px; } } @media only screen and (max-width: 991px) { #content .section-title.mb-5 { margin-bottom: 1.5rem !important; } } #content .section-title h2 { font-size: 36px; color: #236fb6; text-transform: uppercase; letter-spacing: 2px; line-height: 40px; margin-bottom: 0px; } @media only screen and (max-width: 575px) { #content .section-title h2 { font-size: 26px; } } @media only screen and (max-width: 991px) { #content .section-title.mb-5 { margin-bottom: 1.5rem !important; } } #content .gray-area { width: 590px; height: 100%; position: absolute; top: 50px; right: 0px; background-color: #FAFAFA; z-index: -1; } @media (min-width: 992px) and (max-width: 1500px) { #content .gray-area { width: 325px; } } @media only screen and (max-width: 991px) { #content .gray-area { display: none; } } #content.page-404 .notfound, #content.page-500 .notfound { margin: 90px 0; } #content.page-404 .notfound .row, #content.page-500 .notfound .row { background: rgba(0, 0, 0, 0.04); } #content.page-404 .notfound .content-404, #content.page-500 .notfound .content-404 { position: relative; padding: 0px 60px 60px 60px; margin-top: -90px; z-index: 5; } @media only screen and (max-width: 575px) { #content.page-404 .notfound .content-404, #content.page-500 .notfound .content-404 { margin-top: -50px; } } #content.page-404 .notfound .content-404 h1, #content.page-500 .notfound .content-404 h1 { font-size: 200px; line-height: 1; background: linear-gradient(to right, #218d7b 0%, #236fb6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media only screen and (max-width: 575px) { #content.page-404 .notfound .content-404 h1, #content.page-500 .notfound .content-404 h1 { font-size: 100px; } } #content.page-404 .notfound .content-404 .big-text, #content.page-500 .notfound .content-404 .big-text { font-size: 60px; font-weight: 300; color: #218d7b; line-height: 1.2; } @media only screen and (max-width: 575px) { #content.page-404 .notfound .content-404 .big-text, #content.page-500 .notfound .content-404 .big-text { font-size: 30px; } } #content.page-404 .notfound .content-404 p, #content.page-500 .notfound .content-404 p { font-size: 18px; color: #236fb6; max-width: 750px; } @media only screen and (max-width: 575px) { #content.page-404 .notfound .content-404 p, #content.page-500 .notfound .content-404 p { font-size: 16px; } } #content.page-404 .notfound .content-404 .btn-primary:after, #content.page-500 .notfound .content-404 .btn-primary:after { position: relative; font-family: 'Themify'; content: "\e628"; left: 10px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } #content.page-404 .notfound .content-404 .btn-primary:hover, #content.page-500 .notfound .content-404 .btn-primary:hover { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } #content.page-404 .notfound .content-404 .btn-primary:hover:after, #content.page-500 .notfound .content-404 .btn-primary:hover:after { left: 15px; } #content.page-about .about-text { padding: 0px; } #content.page-treatments, #content.page-ourteam, #content.page-ourcenters, #content.page-about { min-height: 600px; } @media only screen and (min-width: 992px) { #content.page-treatments, #content.page-ourteam, #content.page-ourcenters, #content.page-about { padding: 0 0 0 260px; } } @media only screen and (max-width: 991px) { #content.page-treatments .onepagesection, #content.page-ourteam .onepagesection, #content.page-ourcenters .onepagesection, #content.page-about .onepagesection { padding-top: 15px !important; padding-bottom: 15px !important; } } #content.page-treatments .onepagesection .onepagesection-title, #content.page-ourteam .onepagesection .onepagesection-title, #content.page-ourcenters .onepagesection .onepagesection-title, #content.page-about .onepagesection .onepagesection-title { position: relative; z-index: 10; } #content.page-treatments .onepagesection .onepagesection-title:before, #content.page-ourteam .onepagesection .onepagesection-title:before, #content.page-ourcenters .onepagesection .onepagesection-title:before, #content.page-about .onepagesection .onepagesection-title:before { display: none; position: absolute; content: ''; width: 100px; height: 1px; background: #236fb6; left: -115px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (min-width: 1200px) { #content.page-treatments .onepagesection .onepagesection-title:before, #content.page-ourteam .onepagesection .onepagesection-title:before, #content.page-ourcenters .onepagesection .onepagesection-title:before, #content.page-about .onepagesection .onepagesection-title:before { display: block; } } #content.page-treatments .onepagesection .onepagesection-title h2, #content.page-ourteam .onepagesection .onepagesection-title h2, #content.page-ourcenters .onepagesection .onepagesection-title h2, #content.page-about .onepagesection .onepagesection-title h2 { font-size: 30px; color: #236fb6; text-transform: uppercase; } @media only screen and (max-width: 575px) { #content.page-treatments .onepagesection .onepagesection-title h2, #content.page-ourteam .onepagesection .onepagesection-title h2, #content.page-ourcenters .onepagesection .onepagesection-title h2, #content.page-about .onepagesection .onepagesection-title h2 { font-size: 24px; } } #content.page-treatments .onepagesection .btn, #content.page-ourteam .onepagesection .btn, #content.page-ourcenters .onepagesection .btn, #content.page-about .onepagesection .btn { margin: 0 0 0 30px; background: #236fb6; color: white; } @media only screen and (max-width: 1199px) { #content.page-treatments .onepagesection .btn, #content.page-ourteam .onepagesection .btn, #content.page-ourcenters .onepagesection .btn, #content.page-about .onepagesection .btn { margin: 0; } } #content.page-treatments .onepagesection figure, #content.page-ourteam .onepagesection figure, #content.page-ourcenters .onepagesection figure, #content.page-about .onepagesection figure { position: relative; } #content.page-treatments .onepagesection figure .onepagesection-img, #content.page-ourteam .onepagesection figure .onepagesection-img, #content.page-ourcenters .onepagesection figure .onepagesection-img, #content.page-about .onepagesection figure .onepagesection-img { position: relative; z-index: 5; } #content.page-treatments .onepagesection figure .dotted, #content.page-ourteam .onepagesection figure .dotted, #content.page-ourcenters .onepagesection figure .dotted, #content.page-about .onepagesection figure .dotted { position: absolute; z-index: 3; bottom: -30px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } @media only screen and (min-width: 1200px) { #content.page-treatments .onepagesection figure .dotted, #content.page-ourteam .onepagesection figure .dotted, #content.page-ourcenters .onepagesection figure .dotted, #content.page-about .onepagesection figure .dotted { bottom: -40px; right: -40px; left: auto; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @media only screen and (min-width: 1200px) { #content.page-treatments .onepagesection .onepagesection-content, #content.page-treatments .onepagesection .social-accounts, #content.page-ourteam .onepagesection .onepagesection-content, #content.page-ourteam .onepagesection .social-accounts, #content.page-ourcenters .onepagesection .onepagesection-content, #content.page-ourcenters .onepagesection .social-accounts, #content.page-about .onepagesection .onepagesection-content, #content.page-about .onepagesection .social-accounts { padding-left: 30px; } } #content.page-treatments .onepagesection .social-accounts a, #content.page-ourteam .onepagesection .social-accounts a, #content.page-ourcenters .onepagesection .social-accounts a, #content.page-about .onepagesection .social-accounts a { position: relative; display: inline-block; width: 35px; height: 35px; background: #218d7b; color: white; margin-right: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } #content.page-treatments .onepagesection .social-accounts a:hover, #content.page-ourteam .onepagesection .social-accounts a:hover, #content.page-ourcenters .onepagesection .social-accounts a:hover, #content.page-about .onepagesection .social-accounts a:hover { background: #236fb6; } #content.page-treatments .onepagesection .social-accounts a:last-child, #content.page-ourteam .onepagesection .social-accounts a:last-child, #content.page-ourcenters .onepagesection .social-accounts a:last-child, #content.page-about .onepagesection .social-accounts a:last-child { margin-right: 0px; } #content.page-treatments .onepagesection .social-accounts a i, #content.page-ourteam .onepagesection .social-accounts a i, #content.page-ourcenters .onepagesection .social-accounts a i, #content.page-about .onepagesection .social-accounts a i { position: absolute; font-size: 16px; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } #content.page-treatments .onepagesection.even .btn, #content.page-ourteam .onepagesection.even .btn, #content.page-ourcenters .onepagesection.even .btn, #content.page-about .onepagesection.even .btn { margin-left: 0px; margin-right: 30px; } @media only screen and (min-width: 1200px) { #content.page-treatments .onepagesection.even .btn, #content.page-ourteam .onepagesection.even .btn, #content.page-ourcenters .onepagesection.even .btn, #content.page-about .onepagesection.even .btn { float: right; } } @media only screen and (min-width: 1200px) { #content.page-treatments .onepagesection.even .onepagesection-title, #content.page-treatments .onepagesection.even .social-accounts, #content.page-ourteam .onepagesection.even .onepagesection-title, #content.page-ourteam .onepagesection.even .social-accounts, #content.page-ourcenters .onepagesection.even .onepagesection-title, #content.page-ourcenters .onepagesection.even .social-accounts, #content.page-about .onepagesection.even .onepagesection-title, #content.page-about .onepagesection.even .social-accounts { text-align: right; } } #content.page-treatments .onepagesection.even .onepagesection-title:before, #content.page-treatments .onepagesection.even .social-accounts:before, #content.page-ourteam .onepagesection.even .onepagesection-title:before, #content.page-ourteam .onepagesection.even .social-accounts:before, #content.page-ourcenters .onepagesection.even .onepagesection-title:before, #content.page-ourcenters .onepagesection.even .social-accounts:before, #content.page-about .onepagesection.even .onepagesection-title:before, #content.page-about .onepagesection.even .social-accounts:before { left: auto; right: -115px; } #content.page-treatments .onepagesection.even .onepagesection-content, #content.page-treatments .onepagesection.even .social-accounts, #content.page-ourteam .onepagesection.even .onepagesection-content, #content.page-ourteam .onepagesection.even .social-accounts, #content.page-ourcenters .onepagesection.even .onepagesection-content, #content.page-ourcenters .onepagesection.even .social-accounts, #content.page-about .onepagesection.even .onepagesection-content, #content.page-about .onepagesection.even .social-accounts { padding-left: 0px; padding-right: 30px; } #content.page-treatments .onepagesection.even figure .dotted, #content.page-ourteam .onepagesection.even figure .dotted, #content.page-ourcenters .onepagesection.even figure .dotted, #content.page-about .onepagesection.even figure .dotted { left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } @media only screen and (min-width: 1200px) { #content.page-treatments .onepagesection.even figure .dotted, #content.page-ourteam .onepagesection.even figure .dotted, #content.page-ourcenters .onepagesection.even figure .dotted, #content.page-about .onepagesection.even figure .dotted { right: auto; left: -40px; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @media only screen and (min-width: 1200px) { #content.page-treatments .onepagesection.even p, #content.page-ourteam .onepagesection.even p { text-align: right; } } @media only screen and (max-width: 991px) { #content.page-treatments, #content.page-ourteam, #content.page-ourcenters, #content.page-treatment, #content.page-about { padding-bottom: 60px; } } #content.page-about .feature-box, #content.page-about .feature-box.blue { box-shadow: none; } @media only screen and (min-width: 1200px) { #content.page-ourcenters .onepagesection .onepagesection-title { padding-left: 120px; } } #content.page-ourcenters .onepagesection .onepagesection-title:before { display: none; position: absolute; content: ''; width: 100px; height: 1px; background: #236fb6; left: -0px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (min-width: 1200px) { #content.page-ourcenters .onepagesection .onepagesection-title:before { display: block; } } #content.page-ourcenters .onepagesection .image-gallery figure { height: 320px; } @media (min-width: 1200px) and (max-width: 1400px) { #content.page-ourcenters .onepagesection .image-gallery figure { height: 250px; } } @media only screen and (max-width: 767px) { #content.page-ourcenters .onepagesection .image-gallery figure { height: 250px; } } #content.page-ourcenters .onepagesection .image-gallery .gallery-center-image { height: 660px; } @media (min-width: 1200px) and (max-width: 1400px) { #content.page-ourcenters .onepagesection .image-gallery .gallery-center-image { height: 520px; } } @media only screen and (max-width: 767px) { #content.page-ourcenters .onepagesection .image-gallery .gallery-center-image { height: 250px; } } #content.page-ourcenters .onepagesection .image-gallery figure, #content.page-ourcenters .onepagesection .image-gallery .gallery-center-image { position: relative; margin: 10px 0; } @media only screen and (max-width: 991px) { #content.page-ourcenters .section-cta-appointment .cta-text { left: 0px; } } @media only screen and (max-width: 991px) { #content.page-ourcenters .section-cta-appointment .col-lg-12 { padding-left: 0px; padding-right: 0px; } } #content.page-ourcenters .appointment-box { width: 100%; } @media only screen and (max-width: 1199px) { #content.page-ourcenters .appointment-box { -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; box-direction: normal; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; height: auto; padding: 30px 0; } } #content.page-ourcenters .appointment-box .cta-desc { color: white; max-width: 350px; font-weight: 500; margin: 0px 60px 0px 0px; } @media only screen and (max-width: 1199px) { #content.page-ourcenters .appointment-box .cta-desc { text-align: center; margin: 0px 0px 20px 0px; } } #content.page-ourcenters .appointment-box .cta-text { margin: 0px; } @media only screen and (max-width: 1199px) { #content.page-ourcenters .appointment-box .cta-text { margin-top: 10px; } } #content.page-ourcenters .appointment-box .arrows { position: absolute; right: 30px; } @media only screen and (max-width: 991px) { #content.page-ourcenters .appointment-box .arrows { display: none; } } #content.page-ourcenters #da-infowindow { max-width: 450px; background: white; } #content.page-ourcenters #da-infowindow .iw-content { padding: 30px 30px 0px 30px; } @media only screen and (max-width: 575px) { #content.page-ourcenters #da-infowindow .iw-content { padding: 15px; } } #content.page-ourcenters #da-infowindow .iw-content ul { margin: 0px; padding: 0px; list-style-type: none; } #content.page-ourcenters #da-infowindow .iw-content ul li img { margin-right: 10px; vertical-align: top; } #content.page-ourcenters #da-infowindow .iw-content ul li img, #content.page-ourcenters #da-infowindow .iw-content ul li p { display: inline-block; max-width: 330px; } @media only screen and (max-width: 1199px) { #content.page-ourcenters #da-infowindow .iw-content ul li img, #content.page-ourcenters #da-infowindow .iw-content ul li p { max-width: 200px; } } @media only screen and (max-width: 575px) { #content.page-ourcenters #da-infowindow .iw-content ul li:last-child p { margin-bottom: 0px; } } @media (min-width: 992px) and (max-width: 1025px) { #content.page-contact, #content.page-appointment, #content.page-treatment { padding-left: 260px !important; } } #content.page-contact .contact-area, #content.page-contact .appointment-area, #content.page-appointment .contact-area, #content.page-appointment .appointment-area, #content.page-treatment .contact-area, #content.page-treatment .appointment-area { position: relative; padding: 0 40px; margin: 60px 0 0 0; } @media only screen and (min-width: 1501px) { #content.page-contact .contact-area, #content.page-contact .appointment-area, #content.page-appointment .contact-area, #content.page-appointment .appointment-area, #content.page-treatment .contact-area, #content.page-treatment .appointment-area { padding: 0 100px; margin: 120px 0 0 0; } } #content.page-contact .contact-area:before, #content.page-contact .appointment-area:before, #content.page-appointment .contact-area:before, #content.page-appointment .appointment-area:before, #content.page-treatment .contact-area:before, #content.page-treatment .appointment-area:before { content: ''; position: absolute; top: 40px; left: 0px; width: 100%; height: 43%; background: rgba(0, 0, 0, 0.04); } @media only screen and (max-width: 575px) { #content.page-contact .contact-area:before, #content.page-contact .appointment-area:before, #content.page-appointment .contact-area:before, #content.page-appointment .appointment-area:before, #content.page-treatment .contact-area:before, #content.page-treatment .appointment-area:before { display: none; } } #content.page-contact .contact-area figure, #content.page-contact .appointment-area figure, #content.page-appointment .contact-area figure, #content.page-appointment .appointment-area figure, #content.page-treatment .contact-area figure, #content.page-treatment .appointment-area figure { position: relative; width: 380px; height: 500px; top: -30px; } @media (min-width: 1700px) { #content.page-contact .contact-area figure, #content.page-contact .appointment-area figure, #content.page-appointment .contact-area figure, #content.page-appointment .appointment-area figure, #content.page-treatment .contact-area figure, #content.page-treatment .appointment-area figure { width: 600px; height: 700px; top: -60px; } } @media only screen and (max-width: 1199px) { #content.page-contact .contact-area figure, #content.page-contact .appointment-area figure, #content.page-appointment .contact-area figure, #content.page-appointment .appointment-area figure, #content.page-treatment .contact-area figure, #content.page-treatment .appointment-area figure { width: 100%; } } @media only screen and (max-width: 575px) { #content.page-contact .contact-area figure, #content.page-contact .appointment-area figure, #content.page-appointment .contact-area figure, #content.page-appointment .appointment-area figure, #content.page-treatment .contact-area figure, #content.page-treatment .appointment-area figure { height: 200px; } } #content.page-contact .contact-area .center-content, #content.page-contact .appointment-area .center-content, #content.page-appointment .contact-area .center-content, #content.page-appointment .appointment-area .center-content, #content.page-treatment .contact-area .center-content, #content.page-treatment .appointment-area .center-content { padding-left: 30px; } @media only screen and (min-width: 1501px) { #content.page-contact .contact-area .center-content, #content.page-contact .appointment-area .center-content, #content.page-appointment .contact-area .center-content, #content.page-appointment .appointment-area .center-content, #content.page-treatment .contact-area .center-content, #content.page-treatment .appointment-area .center-content { padding-left: 90px; } } @media only screen and (max-width: 1199px) { #content.page-contact .contact-area .center-content, #content.page-contact .appointment-area .center-content, #content.page-appointment .contact-area .center-content, #content.page-appointment .appointment-area .center-content, #content.page-treatment .contact-area .center-content, #content.page-treatment .appointment-area .center-content { padding-left: 0px; } } @media (min-width: 1025px) and (max-width: 1300px) { #content.page-contact .contact-area .center-content, #content.page-contact .appointment-area .center-content, #content.page-appointment .contact-area .center-content, #content.page-appointment .appointment-area .center-content, #content.page-treatment .contact-area .center-content, #content.page-treatment .appointment-area .center-content { padding-left: 19px; } } #content.page-contact .contact-area .center-content .center-name, #content.page-contact .appointment-area .center-content .center-name, #content.page-appointment .contact-area .center-content .center-name, #content.page-appointment .appointment-area .center-content .center-name, #content.page-treatment .contact-area .center-content .center-name, #content.page-treatment .appointment-area .center-content .center-name { font-size: 30px; font-weight: 700; text-transform: uppercase; position: relative; top: -20px; background: linear-gradient(to right, #218d7b 0%, #236fb6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #content.page-contact .contact-area .center-content .center-name:before, #content.page-contact .appointment-area .center-content .center-name:before, #content.page-appointment .contact-area .center-content .center-name:before, #content.page-appointment .appointment-area .center-content .center-name:before, #content.page-treatment .contact-area .center-content .center-name:before, #content.page-treatment .appointment-area .center-content .center-name:before { position: absolute; display: block; content: ''; width: 180px; height: 2px; background: #236fb6; top: 20px; left: -200px; } @media only screen and (max-width: 1199px) { #content.page-contact .contact-area .center-content .center-name:before, #content.page-contact .appointment-area .center-content .center-name:before, #content.page-appointment .contact-area .center-content .center-name:before, #content.page-appointment .appointment-area .center-content .center-name:before, #content.page-treatment .contact-area .center-content .center-name:before, #content.page-treatment .appointment-area .center-content .center-name:before { display: none; } } #content.page-contact .contact-area .center-content .contact-info, #content.page-contact .appointment-area .center-content .contact-info, #content.page-appointment .contact-area .center-content .contact-info, #content.page-appointment .appointment-area .center-content .contact-info, #content.page-treatment .contact-area .center-content .contact-info, #content.page-treatment .appointment-area .center-content .contact-info { padding-top: 70px; } @media only screen and (max-width: 1199px) { #content.page-contact .contact-area .center-content .contact-info, #content.page-contact .appointment-area .center-content .contact-info, #content.page-appointment .contact-area .center-content .contact-info, #content.page-appointment .appointment-area .center-content .contact-info, #content.page-treatment .contact-area .center-content .contact-info, #content.page-treatment .appointment-area .center-content .contact-info { padding-top: 0px; } } #content.page-contact .contact-area .center-content .contact-info i, #content.page-contact .appointment-area .center-content .contact-info i, #content.page-appointment .contact-area .center-content .contact-info i, #content.page-appointment .appointment-area .center-content .contact-info i, #content.page-treatment .contact-area .center-content .contact-info i, #content.page-treatment .appointment-area .center-content .contact-info i { position: relative; font-size: 24px; top: 2px; color: #236fb6; } #content.page-contact .contact-area .center-content .contact-info .info-line, #content.page-contact .appointment-area .center-content .contact-info .info-line, #content.page-appointment .contact-area .center-content .contact-info .info-line, #content.page-appointment .appointment-area .center-content .contact-info .info-line, #content.page-treatment .contact-area .center-content .contact-info .info-line, #content.page-treatment .appointment-area .center-content .contact-info .info-line { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -moz-box-pack: start; box-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: start; -webkit-box-align: start; -moz-box-align: start; box-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start; -ms-flex-align: start; margin-bottom: 30px; } @media (min-width: 992px) and (max-width: 1199px) { #content.page-contact .contact-area .center-content .contact-info .info-line, #content.page-contact .appointment-area .center-content .contact-info .info-line, #content.page-appointment .contact-area .center-content .contact-info .info-line, #content.page-appointment .appointment-area .center-content .contact-info .info-line, #content.page-treatment .contact-area .center-content .contact-info .info-line, #content.page-treatment .appointment-area .center-content .contact-info .info-line { margin-bottom: 20px; } } #content.page-contact .contact-area .center-content .contact-info p, #content.page-contact .appointment-area .center-content .contact-info p, #content.page-appointment .contact-area .center-content .contact-info p, #content.page-appointment .appointment-area .center-content .contact-info p, #content.page-treatment .contact-area .center-content .contact-info p, #content.page-treatment .appointment-area .center-content .contact-info p { font-size: 16px; font-weight: 300; margin: 0px 0px 0px 10px; } @media (min-width: 992px) and (max-width: 1199px) { #content.page-contact .contact-area .center-content .contact-info p, #content.page-contact .appointment-area .center-content .contact-info p, #content.page-appointment .contact-area .center-content .contact-info p, #content.page-appointment .appointment-area .center-content .contact-info p, #content.page-treatment .contact-area .center-content .contact-info p, #content.page-treatment .appointment-area .center-content .contact-info p { font-size: 13px; } } #content.page-contact .form-row, #content.page-appointment .form-row, #content.page-treatment .form-row { margin-top: -30px; } @media (min-width: 1700px) { #content.page-contact .form-row, #content.page-appointment .form-row, #content.page-treatment .form-row { margin-top: -220px; } } @media only screen and (max-width: 1199px) { #content.page-contact .form-row, #content.page-appointment .form-row, #content.page-treatment .form-row { display: block !important; position: static; margin: 30px -15px; } } #content.page-contact .form-row .contact-form, #content.page-appointment .form-row .contact-form, #content.page-treatment .form-row .contact-form { padding-left: 460px; width: 100%; } @media (min-width: 1700px) { #content.page-contact .form-row .contact-form, #content.page-appointment .form-row .contact-form, #content.page-treatment .form-row .contact-form { padding-left: 690px; } } @media only screen and (max-width: 1199px) { #content.page-contact .form-row .contact-form, #content.page-appointment .form-row .contact-form, #content.page-treatment .form-row .contact-form { padding: 0px; } } #content.page-contact .form-row .contact-form .form-title, #content.page-appointment .form-row .contact-form .form-title, #content.page-treatment .form-row .contact-form .form-title { font-family: "Ubuntu Condensed", sans-serif; position: relative; font-size: 30px; font-weight: 700; text-transform: uppercase; margin-bottom: 30px; background: linear-gradient(to right, #218d7b 0%, #236fb6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #content.page-contact .form-row .contact-form .form-title:before, #content.page-appointment .form-row .contact-form .form-title:before, #content.page-treatment .form-row .contact-form .form-title:before { position: absolute; display: block; content: ''; width: 180px; height: 2px; background: #236fb6; top: 25px; left: -200px; } @media only screen and (max-width: 1199px) { #content.page-contact .form-row .contact-form .form-title:before, #content.page-appointment .form-row .contact-form .form-title:before, #content.page-treatment .form-row .contact-form .form-title:before { display: none; } } #content.page-contact .form-row .contact-form .form-group, #content.page-appointment .form-row .contact-form .form-group, #content.page-treatment .form-row .contact-form .form-group { margin: 8px 0; } #content.page-contact .form-row .contact-form .form-control, #content.page-appointment .form-row .contact-form .form-control, #content.page-treatment .form-row .contact-form .form-control { border: 0px; background: #f1f3f6; } #content.page-contact .form-row .contact-form .extra-group .form-group, #content.page-appointment .form-row .contact-form .extra-group .form-group, #content.page-treatment .form-row .contact-form .extra-group .form-group { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 0 48%; -moz-flex: 0 0 48%; -ms-flex: 0 0 48%; flex: 0 0 48%; max-width: 48%; } #content.page-contact .form-row .contact-form textarea, #content.page-appointment .form-row .contact-form textarea, #content.page-treatment .form-row .contact-form textarea { height: 150px; margin-bottom: 30px; } #content.page-appointment .appointment-area:before { display: none; } @media only screen and (min-width: 1200px) { #content.page-appointment .appointment-area figure { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 0 50%; -moz-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } } #content.page-appointment .appointment-area .appointment-form { width: 100%; margin-bottom: 60px; } @media only screen and (min-width: 1200px) { #content.page-appointment .appointment-area .appointment-form { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 0 50%; -moz-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; padding: 60px; margin-bottom: 0px; } } #content.page-appointment .appointment-area .appointment-form .form-title { font-family: "Ubuntu Condensed", sans-serif; position: relative; font-size: 30px; font-weight: 700; text-transform: uppercase; margin-bottom: 30px; background: linear-gradient(to right, #218d7b 0%, #236fb6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #content.page-appointment .appointment-area .appointment-form .form-title:before { position: absolute; display: block; content: ''; width: 180px; height: 2px; background: #236fb6; top: 25px; left: -200px; } @media only screen and (max-width: 1199px) { #content.page-appointment .appointment-area .appointment-form .form-title:before { display: none; } } #content.page-appointment .appointment-area .appointment-form .form-group { margin: 12px 0; } #content.page-appointment .appointment-area .appointment-form .form-group .input-group-addon { border: 0px; color: #236fb6; } #content.page-appointment .appointment-area .appointment-form .form-group .bootstrap-select { width: 100%; } #content.page-appointment .appointment-area .appointment-form .form-group .btn { font-family: "Ubuntu", sans-serif; text-align: left; text-transform: none; font-weight: 300; color: #236fb6; background: #f1f3f6; padding: 0.95rem 1rem; } #content.page-appointment .appointment-area .appointment-form .form-group .btn:hover, #content.page-appointment .appointment-area .appointment-form .form-group .btn:focus, #content.page-appointment .appointment-area .appointment-form .form-group .btn:active, #content.page-appointment .appointment-area .appointment-form .form-group .btn:focus:active { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } #content.page-appointment .appointment-area .appointment-form .form-control { border: 0px; background: #f1f3f6; } #content.page-appointment .appointment-area .appointment-form .form-control::-webkit-input-placeholder { color: #236fb6; } #content.page-appointment .appointment-area .appointment-form .form-control::-moz-placeholder { color: #236fb6; } #content.page-appointment .appointment-area .appointment-form .form-control:-moz-placeholder { color: #236fb6; } #content.page-appointment .appointment-area .appointment-form .form-control:-ms-input-placeholder { color: #236fb6; } #content.page-appointment .appointment-area .appointment-form .form-control.datetimepicker { font-family: "Ubuntu", sans-serif; font-weight: 300; color: #236fb6; } #content.page-appointment .appointment-area .appointment-form .extra-group .form-group { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 0 48%; -moz-flex: 0 0 48%; -ms-flex: 0 0 48%; flex: 0 0 48%; max-width: 48%; margin: 6px 0; } #content.page-appointment .appointment-area .appointment-form textarea { height: 150px; margin-bottom: 30px; } #content.page-appointment .appointment-area .appointment-form .btn-primary { border: 0px; background: #236fb6 !important; color: white !important; } #content.page-appointment .appointment-area .appointment-form .btn-primary:hover, #content.page-appointment .appointment-area .appointment-form .btn-primary:focus, #content.page-appointment .appointment-area .appointment-form .btn-primary:active, #content.page-appointment .appointment-area .appointment-form .btn-primary:focus:active { -webkit-transform: translateY(-2px) !important; -moz-transform: translateY(-2px) !important; -ms-transform: translateY(-2px) !important; -o-transform: translateY(-2px) !important; transform: translateY(-2px) !important; background: #4677a5 !important; } @media only screen and (max-width: 1199px) { #content.page-treatment .content-area figure { margin-bottom: 30px; } } .page-submenu { position: fixed; top: 0px; left: 260px; width: 220px; height: 100%; background: #f2f2f2; z-index: 10; } .page-submenu ul { width: 100%; list-style: none; padding: 0px; margin: 0px; } @media only screen and (max-width: 1199px) { .page-submenu ul { margin-top: 45px; } } .page-submenu ul li { padding: 5px 20px 5px 30px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .page-submenu ul li a { font-size: 16px; font-weight: 300; text-transform: uppercase; color: black; opacity: 0.5; filter: alpha(opacity=50); } .page-submenu ul li a:hover, .page-submenu ul li a:focus { color: inherit; opacity: 1; filter: alpha(opacity=100); } .page-submenu ul li.active { background: rgba(255, 255, 255, 0.5); } .page-submenu ul li.active a { position: relative; } .page-submenu ul li.active a:before { position: absolute; left: -15px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-family: 'FontAwesome'; content: '\f105'; font-size: 20px; color: black; opacity: 0.5; filter: alpha(opacity=50); margin-right: 10px; } .page-submenu ul li:hover { padding: 5px 20px 5px 35px; } .header-horizontal .page-submenu { left: 0px; } @media only screen and (max-width: 1199px) { .header-horizontal .page-submenu ul { margin-top: 200px; } } @media only screen and (max-width: 991px) { .header-horizontal .page-submenu { display: none !important; } } .header-horizontal #content { padding-top: 170px !important; } @media only screen and (max-width: 991px) { .header-horizontal #content { margin-bottom: 60px; } } @media only screen and (min-width: 992px) { .header-horizontal #content.page-treatments, .header-horizontal #content.page-ourteam, .header-horizontal #content.page-ourcenters, .header-horizontal #content.page-about { padding: 0 0 0 220px; } } @media (min-width: 992px) and (max-width: 1025px) { .header-horizontal #content.page-contact, .header-horizontal #content.page-appointment, .header-horizontal #content.page-treatment { padding-left: 0px !important; } } @media only screen and (max-width: 1199px) { .header-vertical .page-submenu { display: none !important; } } .header-vertical #content { margin-left: 220px; } @media only screen and (max-width: 1199px) { .header-vertical #content { margin-left: 0; } } @media only screen and (max-width: 575px) { .header-vertical #content { margin-top: 130px; } } .header-vertical #footer { margin-left: 290px; } @media only screen and (max-width: 991px) { .header-vertical #footer { margin-left: 0; } } .header-vertical.page-subs #footer { margin-left: 519px; } @media (min-width: 992px) and (max-width: 1199px) { .header-vertical.page-subs #footer { margin-left: 290px; } } @media only screen and (max-width: 991px) { .header-vertical.page-subs #footer { margin-left: 0px; } } .header-horizontal.page-subs #footer { margin-left: 259px; } @media only screen and (max-width: 991px) { .header-horizontal.page-subs #footer { margin-left: 0px; } } .home:not(.header-horizontal) #content { margin-left: 260px; } @media only screen and (max-width: 991px) { .home:not(.header-horizontal) #content { margin-left: 0; } } .home:not(.header-horizontal) #footer { margin-left: 320px; } @media (min-width: 992px) and (max-width: 1199px) { .home:not(.header-horizontal) #footer { margin-left: 290px; } } @media only screen and (max-width: 991px) { .home:not(.header-horizontal) #footer { margin-left: 0; } } .search-form-open .search-form { opacity: 1; visibility: visible; } .search-form { position: absolute; top: 0px; right: 0px; width: 100%; height: 110px; opacity: 0; visibility: hidden; z-index: 11; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .search-form form, .search-form .form-control { height: 100%; } .search-form form { position: relative; } .search-form form i { position: absolute; width: 1px; height: 40%; background-color: white; left: 28px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-animation: blink 1000ms ease-in-out infinite; -moz-animation: blink 1000ms ease-in-out infinite; animation: blink 1000ms ease-in-out infinite; opacity: 1; } .search-form form input:focus + i { display: none; } @-webkit-keyframes blink { from { opacity: 1; } to { opacity: 0; } } @-moz-keyframes blink { from { opacity: 1; } to { opacity: 0; } } @keyframes blink { from { opacity: 1; } to { opacity: 0; } } .search-form .form-control { font-family: "Ubuntu Condensed", sans-serif; font-size: 20px; letter-spacing: 1px; border: 0px; color: white; padding: 15px 30px; background-color: #236fb6; background-image: -webkit-linear-gradient(right, #236fb6, #218d7b); background-image: linear-gradient(to left,#236fb6, #218d7b); } .search-form .search-close-trigger { position: absolute; right: 15px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 12; color: white; } .section-top-bar { position: absolute; top: 0px; right: 0px; width: 100%; height: 83px; padding: 0px 15px; z-index: 100; background-color: #236fb6; background-image: -webkit-linear-gradient(right, #236fb6, #218d7b ); background-image: linear-gradient(to left, #236fb6 , #218d7b ); -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; } @media only screen and (min-width: 992px) { .section-top-bar { width: 515px; height: 110px; -webkit-box-pack: distribute; -moz-box-pack: distribute; box-pack: distribute; -webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; -o-justify-content: space-around; justify-content: space-around; -ms-flex-pack: distribute; padding: 0px; } } @media only screen and (max-width: 991px) { .section-top-bar { position: fixed; height: 60px; } } .section-top-bar .line { display: none; width: 1px; height: 30px; background: rgba(255, 255, 255, 0.3); } @media only screen and (min-width: 992px) { .section-top-bar .line { display: block; } } .section-top-bar .module-search { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 75px; margin-top: 3px; } @media only screen and (min-width: 992px) { .section-top-bar .module-search { position: relative; left: 10px; top: 2px; transform: none; } } .section-top-bar .module-search .search-trigger { display: block; color: white; } .section-top-bar .module-search .search-trigger i { font-size: 20px; } .section-top-bar .module-search .search-trigger:hover { color: #e6e6e6; } .section-top-bar .module-appointment { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 120px; } @media only screen and (min-width: 992px) { .section-top-bar .module-appointment { position: relative; right: 0px; top: 0px; transform: none; } } @media only screen and (max-width: 575px) { .section-top-bar .module-appointment { right: 112px; } } .section-top-bar .module-appointment a { color: white; } .section-top-bar .module-appointment a:hover { color: #e6e6e6; } .section-top-bar .module-appointment a i { margin-right: 8px; } .section-top-bar .module-appointment a span { display: none; text-transform: uppercase; font-weight: 400; } @media only screen and (min-width: 992px) { .section-top-bar .module-appointment a span { display: inline-block; } } .section-top-bar .module-lang .dropdown button { background: transparent; border: 0px; color: white; text-transform: uppercase; } .section-top-bar .module-lang .dropdown button:focus { outline: none; } .section-top-bar .module-lang .dropdown button:hover { cursor: pointer; } @media only screen and (max-width: 575px) { .section-top-bar .module-lang .dropdown button { padding: 1px 0px 2px; } } .section-top-bar .module-lang .dropdown .dropdown-menu { display: block; visibility: hidden; opacity: 0; border: 0px; text-align: center; background: #236fb6 url(../img/lang-world.png) top left no-repeat; -webkit-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.1); -o-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.1); -webkit-transform: translate3d(-25px, 0px, 0px) !important; -moz-transform: translate3d(-25px, 0px, 0px) !important; -ms-transform: translate3d(-25px, 0px, 0px) !important; -o-transform: translate3d(-25px, 0px, 0px) !important; transform: translate3d(-25px, 0px, 0px) !important; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media only screen and (max-width: 575px) { .section-top-bar .module-lang .dropdown .dropdown-menu { -webkit-transform: translate3d(-40px, 0px, 0px) !important; -moz-transform: translate3d(-40px, 0px, 0px) !important; -ms-transform: translate3d(-40px, 0px, 0px) !important; -o-transform: translate3d(-40px, 0px, 0px) !important; transform: translate3d(-40px, 0px, 0px) !important; } } .section-top-bar .module-lang .dropdown .dropdown-menu.show { -webkit-transform: translate3d(-25px, 35px, 0px) !important; -moz-transform: translate3d(-25px, 35px, 0px) !important; -ms-transform: translate3d(-25px, 35px, 0px) !important; -o-transform: translate3d(-25px, 35px, 0px) !important; transform: translate3d(-25px, 35px, 0px) !important; opacity: 1; visibility: visible; } @media only screen and (max-width: 575px) { .section-top-bar .module-lang .dropdown .dropdown-menu.show { -webkit-transform: translate3d(-40px, 35px, 0px) !important; -moz-transform: translate3d(-40px, 35px, 0px) !important; -ms-transform: translate3d(-40px, 35px, 0px) !important; -o-transform: translate3d(-40px, 35px, 0px) !important; transform: translate3d(-40px, 35px, 0px) !important; } } .section-top-bar .module-lang .dropdown .dropdown-menu .dropdown-item { color: white; } .section-top-bar .module-lang .dropdown .dropdown-menu .dropdown-item:hover { background: transparent; color: #bfbfbf; } .header-horizontal .section-top-bar, .header-horizontal .search-form { height: 50px; } .header-horizontal .section-top-bar { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 160; opacity: 1; visibility: visible; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } @media only screen and (min-width: 992px) { .header-horizontal .section-top-bar.hide { opacity: 0; visibility: hidden; } } .section-slider { position: relative; height: 100vh; } @media only screen and (max-width: 1199px) { .section-slider { height: auto; } } .section-slider .slider-main, .section-slider .slick-list, .section-slider .slick-track { height: 100%; } @media only screen and (max-width: 1199px) { .section-slider .slider-main, .section-slider .slick-list, .section-slider .slick-track { height: auto; } } .section-slider .slider-main { position: relative; } .section-slider .slider-main .slider-item { position: relative; } .section-slider .slider-main .slider-item .container, .section-slider .slider-main .slider-item .container-fluid, .section-slider .slider-main .slider-item .container-custom, .section-slider .slider-main .slider-item .row { height: 100%; } .section-slider .slider-main .slider-item .container-fluid { padding: 0px; } .section-slider .slider-main .slider-item .bg-image-holder:before { position: absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; background: -webkit-linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 70%, #FFFFFF 95%); background: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 70%, #FFFFFF 95%); } .section-slider .slider-main .slider-item .slider-content .slider-text-area { margin-top: 200px; } @media (min-width: 992px) and (max-width: 1500px) { .section-slider .slider-main .slider-item .slider-content .slider-text-area { padding: 30px 15px; } } @media only screen and (max-width: 991px) { .section-slider .slider-main .slider-item .slider-content .slider-text-area { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .section-slider .slider-main .slider-item .slider-content .slider-text-area { margin-top: 80px; } } .section-slider .slider-main .slider-item .slider-content .slider-text-area span.tag { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; font-family: "Ubuntu Condensed", sans-serif; width: 185px; height: 30px; padding: 5px 10px; color: white; letter-spacing: 1px; text-align: center; text-transform: uppercase; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px; background-color: #236fb6; background-image: -webkit-linear-gradient(right, #236fb6, #218d7b); background-image: linear-gradient(to left,#236fb6, #218d7b); margin-bottom: 15px; } @media only screen and (max-width: 991px) { .section-slider .slider-main .slider-item .slider-content .slider-text-area span.tag { display: block; margin: 10px auto; } } .section-slider .slider-main .slider-item .slider-content .slider-text-area .title { font-family: "Ubuntu", sans-serif; font-size: 36px; font-weight: 300; color: #3D454C; } @media (min-width: 992px) and (max-width: 1500px) { .section-slider .slider-main .slider-item .slider-content .slider-text-area .title { font-size: 30px; } } @media only screen and (max-width: 575px) { .section-slider .slider-main .slider-item .slider-content .slider-text-area .title { font-size: 18px; } } .section-slider .slider-main .slider-item .slider-content .slider-text-area .title .bold { font-weight: 700 !important; } @media only screen and (max-width: 991px) { .section-slider .slider-main .slider-item .slider-content .slider-text-area .title { text-align: center; } } .section-slider .slider-main .slider-item .slider-content .slider-text-area .goto-area { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -moz-box-pack: start; box-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: start; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } @media only screen and (max-width: 991px) { .section-slider .slider-main .slider-item .slider-content .slider-text-area .goto-area { -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } } .section-slider .slider-main .slider-item .slider-content .slider-text-area .goto-area span { text-transform: uppercase; font-size: 20px; font-weight: 300; margin-right: 10px; color: #218d7b; } .section-slider .slider-main .slider-item .slider-content .slider-text-area .goto-area .btn-scroll:hover { color: white; } @media only screen and (max-width: 575px) { .section-slider .slider-main .slider-item .slider-content .slider-text-area { padding: 0px 30px !important; } } @media only screen and (max-width: 1199px) { .section-slider .slider-main .slider-item .slider-content .slider-image-area { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } } @media only screen and (max-width: 575px) { .section-slider .slider-main .slider-item .slider-content .slider-image-area { display: none; } } .section-slider .slider-main .slider-item.second .slider-content .slider-image-area { -webkit-box-pack: start; -moz-box-pack: start; box-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: start; } .section-slider .slick-dots { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 10px; width: auto; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } @media only screen and (max-width: 575px) { .section-slider .slick-dots { right: -10px; } } .section-slider .slick-dots li button:before { background-color: #218d7b; width: 8px; height: 8px; margin-left: -4px; margin-top: -4px; } .section-slider .slick-dots li.slick-active button:before { background-color: #236fb6; width: 12px; height: 12px; margin-left: -6px; margin-top: -6px; } .section-slider .cta { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; position: absolute; width: 24px; height: 38px; bottom: 30px; border: 2px solid #7a7d7d; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px; background: transparent; z-index: 30; } @media only screen and (max-width: 1199px) { .section-slider .cta { display: none; } } .section-slider .cta:before { position: absolute; content: ''; width: 6px; height: 12px; top: 8px; background: #7a7d7d; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; -webkit-animation: hanging 1s infinite both; -moz-animation: hanging 1s infinite both; animation: hanging 1s infinite both; } .header-horizontal .section-slider { height: 630px; } @media only screen and (min-width: 1501px) { .header-horizontal .section-slider { height: 780px; } } @media only screen and (max-width: 1199px) { .header-horizontal .section-slider { height: auto; } .header-horizontal .section-slider .slider-main .slider-item .slider-content .slider-text-area { margin-top: 100px; max-width: 94%; } } .section-about .video-part { position: relative; height: 495px; -webkit-box-shadow: 0px -5px 30px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0px -5px 30px 0 rgba(0, 0, 0, 0.12); -ms-box-shadow: 0px -5px 30px 0 rgba(0, 0, 0, 0.12); -o-box-shadow: 0px -5px 30px 0 rgba(0, 0, 0, 0.12); box-shadow: 0px -5px 30px 0 rgba(0, 0, 0, 0.12); } @media only screen and (max-width: 1199px) { .section-about .video-part { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .section-about .video-part { height: 280px; } } .section-about .video-part .btn-play { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .section-about .video-part .btn-play:before { background-color: rgba(49, 104, 155, 0.9); -webkit-animation: waves 3s linear infinite; -moz-animation: waves 3s linear infinite; animation: waves 3s linear infinite; } .section-about .video-part .btn-play:after { border-color: transparent transparent transparent white; } .section-about .video-part .bg-image-holder:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(49, 104, 155, 0.2); z-index: 1; } .section-about .image-part { position: relative; height: 495px; -webkit-box-shadow: 0px 5px 30px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0px 5px 30px 0 rgba(0, 0, 0, 0.12); -ms-box-shadow: 0px 5px 30px 0 rgba(0, 0, 0, 0.12); -o-box-shadow: 0px 5px 30px 0 rgba(0, 0, 0, 0.12); box-shadow: 0px 5px 30px 0 rgba(0, 0, 0, 0.12); } @media only screen and (max-width: 575px) { .section-about .image-part { height: 280px; } } .section-about .about-text { padding: 30px; } .section-about .about-text p { font-size: 16px; line-height: 32px; } .section-featuredservices .section-desc h1 { color: #236fb6; text-transform: uppercase; line-height: 1.2; } .section-featuredservices .section-desc h2 { color: #236fb6; text-transform: uppercase; line-height: 1.2; } .section-featuredservices .section-desc h3 { color: #236fb6; text-transform: uppercase; line-height: 1.2; } .boxes-wrapper { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1 1 0%; -moz-flex: 1 1 0%; -ms-flex: 1 1 0%; flex: 1 1 0%; } .feature-box { width: 50%; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; text-align: center; background: #f8f9fc; color: #236fb6; padding: 20px; -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06); -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06); -ms-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06); -o-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06); } @media only screen and (max-width: 1199px) { .feature-box { width: 100%; } } @media only screen and (max-width: 1199px) { .feature-box { margin-bottom: 10px; box-shadow: none; } } .feature-box.blue { background: #236fb6; color: white; -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.26); -ms-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.26); -o-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.26); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.26); } @media only screen and (max-width: 991px) { .feature-box.blue { box-shadow: none; } } .feature-box:after { content: ''; display: inline-block; vertical-align: middle; width: 0; min-height: 350px; } @media only screen and (max-width: 575px) { .feature-box:after { min-height: 250px; } } .feature-box .box-icon i { font-size: 46px; } .section-treatments .carousel-treatments .slick-track { padding-top: 60px; } .section-treatments .carousel-treatments .slick-prev, .section-treatments .carousel-treatments .slick-next { visibility: visible; opacity: 1; filter: alpha(opacity=100); top: 20px; width: 45px; height: 45px; background: rgba(0, 0, 0, 0.05); } .section-treatments .carousel-treatments .slick-prev:hover, .section-treatments .carousel-treatments .slick-next:hover { background: #218d7b; } .section-treatments .carousel-treatments .slick-prev:hover:before, .section-treatments .carousel-treatments .slick-next:hover:before { color: white; } @media (min-width: 992px) and (max-width: 1199px) { .section-treatments .carousel-treatments .slick-prev, .section-treatments .carousel-treatments .slick-next { top: 20px; } } .section-treatments .carousel-treatments .slick-prev { left: auto; right: 60px; } .section-treatments .carousel-treatments .slick-next { right: 0px; } .section-treatments .carousel-treatments .carousel-item .treatment-images { position: relative; margin-bottom: 0px; z-index: 1; height: 630px; } @media only screen and (max-width: 575px) { .section-treatments .carousel-treatments .carousel-item .treatment-images { height: 300px; overflow: hidden; margin-bottom: 30px; } } .section-treatments .carousel-treatments .carousel-item .treatment-images:before { position: absolute; content: ''; top: -30px; width: 483px; height: 482px; left: 0px; /* * Set a counter and get the length of the image path. */ /* * Loop ver the image path and figure out the * position of the dot where the extension begins. */ /* * If we were able to figure out where the extension is, * slice the path into a base and an extension. Use that to * calculate urls for different density environments. Set * values for different environments. */ /* * Set a base background for 1x environments. */ background: url("../img/pattern-dots.png") top left no-repeat; background-size: cover; /* * Create an @2x-ish media query. */ /* * Create media queries for all environments that the user has * provided images for. */ /* * If anything went wrong trying to separate the file from its * extension, set a background value without doing anything to it. */ z-index: -1; } @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) { .section-treatments .carousel-treatments .carousel-item .treatment-images:before { background: url("../img/pattern-dots@2x.png") top left no-repeat; background-size: cover; } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-treatments .carousel-treatments .carousel-item .treatment-images:before { background: url("../img/pattern-dots@2x.png") top left no-repeat; background-size: cover; } } @media only screen and (max-width: 991px) { .section-treatments .carousel-treatments .carousel-item .treatment-images:before { display: none; } } .section-treatments .carousel-treatments .carousel-item .treatment-images img { -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15); -ms-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15); -o-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15); } .section-treatments .carousel-treatments .carousel-item .treatment-images img.layer-top { position: absolute; top: 0px; right: -90px; z-index: 5; } @media (min-width: 992px) and (max-width: 1199px) { .section-treatments .carousel-treatments .carousel-item .treatment-images img.layer-top { top: 60px; right: 60px; } } @media only screen and (max-width: 991px) { .section-treatments .carousel-treatments .carousel-item .treatment-images img.layer-top { right: auto; left: 30px; } } @media only screen and (max-width: 575px) { .section-treatments .carousel-treatments .carousel-item .treatment-images img.layer-top { left: 0px; top: -100px; } } .section-treatments .carousel-treatments .carousel-item .treatment-images img.layer-bottom { position: absolute; top: 30px; left: 30px; z-index: 3; } @media (min-width: 992px) and (max-width: 1199px) { .section-treatments .carousel-treatments .carousel-item .treatment-images img.layer-bottom { top: 90px; } } @media only screen and (max-width: 575px) { .section-treatments .carousel-treatments .carousel-item .treatment-images img.layer-bottom { display: none; } } .section-treatments .carousel-treatments .carousel-item .treatments-detail { padding-left: 120px; } @media only screen and (max-width: 1500px) { .section-treatments .carousel-treatments .carousel-item .treatments-detail { padding-left: 90px; } } @media only screen and (max-width: 1199px) { .section-treatments .carousel-treatments .carousel-item .treatments-detail { padding-left: 15px; margin-top: 80px; } } .section-treatments .carousel-treatments .carousel-item .treatments-detail .treatment-tag { font-family: "Ubuntu Condensed", sans-serif; display: inline-block; min-width: 80px; padding: 0 12px; height: 30px; color: white; text-align: center; font-size: 12px; text-transform: uppercase; line-height: 30px; letter-spacing: 2px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; border-radius: 18px; background-color: #236fb6; background-image: -webkit-linear-gradient(right, #236fb6, #218d7b); background-image: linear-gradient(to left,#236fb6, #218d7b); -webkit-transition: background 0.5s; -moz-transition: background 0.5s; transition: background 0.5s; margin-right: 5px; } .section-treatments .carousel-treatments .carousel-item .treatments-detail .treatment-tag:hover { background: #218d7b; } .section-treatments .carousel-treatments .carousel-item .treatments-detail .treatment-tag:last-child { margin-right: 0px; } @media only screen and (max-width: 575px) { .section-treatments .carousel-treatments .carousel-item .treatments-detail .treatment-tag { margin-bottom: 10px; } } .section-treatments .carousel-treatments .carousel-item .treatments-detail .treatment-title { font-family: "Ubuntu", sans-serif; font-size: 36px; font-weight: 300; line-height: 44px; color: #236fb6; } .section-treatments .carousel-treatments .carousel-item .treatments-detail .treatment-desc { font-size: 14px; line-height: 28px; color: black; } .section-treatments .carousel-treatments .carousel-item .treatments-detail .permalink { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -moz-box-pack: start; box-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: start; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } .section-treatments .carousel-treatments .carousel-item .treatments-detail .permalink span { text-transform: uppercase; font-size: 18px; font-weight: 300; margin-right: 10px; color: #7a7d7d; } .section-treatments .carousel-treatments .carousel-item .treatments-detail .permalink .btn-scroll { width: 40px; height: 40px; background: #236fb6; } .section-treatments .carousel-treatments .carousel-item .treatments-detail .permalink .btn-scroll:hover { color: white; } .section-treatments .carousel-treatments .carousel-item .treatments-detail .permalink .btn-scroll:hover i { left: 5px; } .section-treatments .carousel-treatments .carousel-item .treatments-detail .permalink .btn-scroll i { position: relative; left: 0px; font-size: 16px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .section-cta-appointment { position: relative; z-index: 5; } .section-cta-appointment .cta-desc { font-size: 24px; font-weight: 400; line-height: 36px; color: #236fb6; } @media (min-width: 992px) and (max-width: 1400px) { .section-cta-appointment .cta-desc { font-size: 20px; line-height: 1.3; } } @media only screen and (max-width: 575px) { .section-cta-appointment .cta-desc { font-size: 18px; line-height: 27px; } } .section-cta-appointment .appointment-box { position: relative; height: 160px; padding: 0px 60px; border-radius: 10px; background-color: #236fb6; background-image: -webkit-linear-gradient(right, #236fb6, #218d7b); background-image: linear-gradient(to left,#236fb6, #218d7b); -webkit-box-shadow: 0px 0px 20px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0px 0px 20px 0 rgba(0, 0, 0, 0.12); -ms-box-shadow: 0px 0px 20px 0 rgba(0, 0, 0, 0.12); -o-box-shadow: 0px 0px 20px 0 rgba(0, 0, 0, 0.12); box-shadow: 0px 0px 20px 0 rgba(0, 0, 0, 0.12); } @media only screen and (max-width: 575px) { .section-cta-appointment .appointment-box { padding: 0px 30px; } } .section-cta-appointment .appointment-box .cta-text, .section-cta-appointment .appointment-box .cta-text a, .section-cta-appointment .appointment-box .cta-text a:hover { display: inline-block; position: relative; font-family: "Ubuntu", sans-serif; font-size: 20px; font-weight: 600; color: white; text-transform: uppercase; z-index: 3; position: relative; left: 10px; top: 6px; line-height: 1.3; } .section-cta-appointment .appointment-box .fade-icon { position: absolute; top: 0px; left: 0px; z-index: 1; } .section-cta-appointment .appointment-box .arrows { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -moz-box-pack: start; box-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: start; } .section-cta-appointment .appointment-box .arrows img { display: inline-block; -webkit-animation: arrow-action 2s; -moz-animation: arrow-action 2s; animation: arrow-action 2s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .section-cta-appointment .appointment-box .arrows img:nth-of-type(1) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s; } .section-cta-appointment .appointment-box .arrows img:nth-of-type(2) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; } .section-cta-appointment .appointment-box .arrows img:nth-of-type(3) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; } @media (min-width: 992px) and (max-width: 1199px) { .section-cta-appointment .appointment-box .arrows { display: none; } } @media only screen and (max-width: 575px) { .section-cta-appointment .appointment-box .arrows { display: none; } } .section-our-team { position: relative; } .section-our-team .team-carousel .slick-prev, .section-our-team .team-carousel .slick-next { visibility: visible; opacity: 1; filter: alpha(opacity=100); top: -60px; width: 45px; height: 45px; background: rgba(0, 0, 0, 0.05); } .section-our-team .team-carousel .slick-prev:hover, .section-our-team .team-carousel .slick-next:hover { background: #218d7b; } .section-our-team .team-carousel .slick-prev:hover:before, .section-our-team .team-carousel .slick-next:hover:before { color: white; } .section-our-team .team-carousel .slick-prev { left: auto; right: 60px; } .section-our-team .team-carousel .slick-next { right: 0px; } .section-our-team .team-carousel .team-member { position: relative; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -moz-box-align: end; box-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; -ms-flex-align: end; height: 275px; overflow: hidden; } @media (min-width: 992px) and (max-width: 1500px) { .section-our-team .team-carousel .team-member { height: 230px; } } .section-our-team .team-carousel .team-member > a { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1; } .section-our-team .team-carousel .team-member .bg-image-holder:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0; background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7)); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .section-our-team .team-carousel .team-member .member-info { position: relative; width: 100%; padding: 20px; opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; z-index: 5; } .section-our-team .team-carousel .team-member .member-info .member-name { display: block; width: 100%; margin-bottom: 10px; } .section-our-team .team-carousel .team-member .member-info .member-name > span { display: block; padding: 3px 7px; margin-bottom: 5px; width: 45px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; background-color: #236fb6; background-image: -webkit-linear-gradient(right, #236fb6, #218d7b); background-image: linear-gradient(to left,#236fb6, #218d7b); font-size: 12px; font-weight: 300; color: white; text-transform: uppercase; text-align: center; } .section-our-team .team-carousel .team-member .member-info .member-name a, .section-our-team .team-carousel .team-member .member-info .member-name a:hover { display: block; font-size: 24px; font-weight: 300; line-height: 1.2; text-transform: uppercase; } .section-our-team .team-carousel .team-member .member-info .member-name a > span, .section-our-team .team-carousel .team-member .member-info .member-name a:hover > span { font-weight: 700; } .section-our-team .team-carousel .team-member .member-social { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } .section-our-team .team-carousel .team-member .member-social a { position: relative; margin-right: 10px; width: 30px; height: 30px; background: #218d7b; color: white; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .section-our-team .team-carousel .team-member .member-social a:last-child { margin-right: 0px; } .section-our-team .team-carousel .team-member .member-social a i { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .section-our-team .team-carousel .team-member .member-social a:hover { background: #038e95; } @media only screen and (max-width: 991px) { .section-our-team .team-carousel .team-member .member-social { display: none; } } .section-our-team .team-carousel .team-member:hover .bg-image-holder:before, .section-our-team .team-carousel .team-member.slick-current .bg-image-holder:before { opacity: 1; background: -webkit-linear-gradient( top , rgba(255, 255, 255, 0), white); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); } .section-our-team .team-carousel .team-member:hover .member-info, .section-our-team .team-carousel .team-member.slick-current .member-info { opacity: 1; visibility: visible; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .header-horizontal .section-our-team .slick-prev { right: 60px; } .header-horizontal .section-our-team .slick-next { right: 0px; } .section-before-after .twentytwenty-container { position: relative; display: block; margin: 0px auto; max-width: 600px; } @media only screen and (max-width: 575px) { .section-before-after .twentytwenty-container { width: 300px; } } .section-before-after .left-area { position: relative; } .section-before-after .left-area .dotted-bg { width: 400px; position: absolute; top: 40px; left: 40px; z-index: -1; } @media only screen and (max-width: 575px) { .section-before-after .left-area .dotted-bg { width: 200px; } } .section-before-after .slideshow-item .caption { font-size: 30px; line-height: 1.2; font-weight: 700; color: #218d7b; text-align: center; } @media only screen and (max-width: 575px) { .section-before-after .slideshow-item .caption { font-size: 24px; } } .section-before-after .slideshow-item .caption span { font-family: "Ubuntu Condensed", sans-serif; font-size: 20px; font-weight: 400; color: black; } @media only screen and (max-width: 575px) { .section-before-after .slideshow-item .caption span { display: block; } } .section-before-after .before-after-text { position: relative; top: -30px; max-width: 650px; } @media only screen and (max-width: 1199px) { .section-before-after .before-after-text { margin-top: 60px; } } .section-before-after .before-after-text p { font-size: 16px; } .section-before-after .before-after-text .btn-danger { font-size: 16px; } .section-before-after .before-after-text .book-now { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -moz-box-pack: start; box-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: start; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } .section-before-after .before-after-text .book-now span { text-transform: uppercase; font-size: 18px; font-weight: 300; margin-right: 10px; color: #7a7d7d; } .section-before-after .before-after-text .book-now .btn-scroll { width: 40px; height: 40px; background: #236fb6; } .section-before-after .before-after-text .book-now .btn-scroll:hover { color: white; } .section-before-after .before-after-text .book-now .btn-scroll:hover i { left: 5px; } .section-before-after .before-after-text .book-now .btn-scroll i { position: relative; left: 0px; font-size: 16px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .section-our-centers { position: relative; } .section-our-centers .link-wrapper { position: relative; width: 100%; height: 100%; display: block; } .section-our-centers .dotted-bg { position: absolute; top: -20px; left: -30px; z-index: -1; } .section-our-centers .contact-info { background: white; -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08); -o-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08); padding: 60px; border-radius: 10px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } @media only screen and (max-width: 1199px) { .section-our-centers .contact-info { margin-bottom: 30px; } } .section-our-centers .contact-info.active { background: #236fb6; color: white; } .section-our-centers .contact-info.active i { color: white; } .section-our-centers .contact-info i { position: relative; font-size: 24px; top: 2px; color: #236fb6; } .section-our-centers .contact-info p { font-size: 16px; font-weight: 300; margin: 0px 0px 0px 10px; } @media (min-width: 992px) and (max-width: 1199px) { .section-our-centers .contact-info p { font-size: 13px; } } .section-our-centers .contact-info:hover { -webkit-transform: translate3d(0, -2%, 0); -moz-transform: translate3d(0, -2%, 0); -ms-transform: translate3d(0, -2%, 0); -o-transform: translate3d(0, -2%, 0); transform: translate3d(0, -2%, 0); } .section-our-centers .contact-info .info-line { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -moz-box-pack: start; box-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: start; -webkit-box-align: start; -moz-box-align: start; box-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start; -ms-flex-align: start; margin-bottom: 30px; } @media (min-width: 992px) and (max-width: 1199px) { .section-our-centers .contact-info .info-line { margin-bottom: 20px; } } .section-our-centers .contact-info .info-line:last-child { margin-bottom: 0px; } .section-our-centers .gray-area { height: 67% !important; } .blog aside { background: #f2f2f2; padding: 30px; } .blog .widget { padding: 30px 0 30px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .blog .widget:last-child { margin-bottom: 15px; border: 0px; } .blog .widget .widget-title { font-size: 22px; color: #218d7b; font-weight: 300; text-transform: uppercase; margin-bottom: 10px; } .blog .widget.widget-search .search-box { position: relative; } .blog .widget.widget-search .search-box .form-control:focus { outline: none; } .blog .widget.widget-search .search-box .btn-search { position: absolute; top: 0px; right: 15px; border: 0px; color: #8e9193; background: transparent; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .blog .widget.widget-search .search-box .btn-search i { font-size: 20px; } .blog .widget.widget-search .search-box .btn-search:hover { cursor: pointer; } .blog .widget.widget-categories ul { margin: 0px; padding: 0px; list-style-type: none; } .blog .widget.widget-categories ul li { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; line-height: 2; padding: 10px 10px 10px 0px; -webkit-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s; } .blog .widget.widget-categories ul li a { font-size: 16px; color: #4d4d4d; text-transform: uppercase; } .blog .widget.widget-categories ul li span { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; width: 30px; height: 30px; font-size: 13px; background: #218d7b; color: white; padding: 5px; border-radius: 50%; margin-left: 10px; } .blog .widget.widget-categories ul li:hover { background: rgba(255, 255, 255, 0.5); padding-left: 10px; } .blog .widget.widget-recent-posts .recent-post { margin: 30px 0; } .blog .widget.widget-recent-posts .recent-post figure a { display: block; position: relative; } .blog .widget.widget-recent-posts .recent-post figure a:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; z-index: 2; } .blog .widget.widget-recent-posts .recent-post figure a:after { position: absolute; font-family: 'themify'; content: "\e61a"; font-size: 30px; color: white; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; opacity: 0; visibility: hidden; z-index: 5; } .blog .widget.widget-recent-posts .recent-post figure a:hover:before, .blog .widget.widget-recent-posts .recent-post figure a:hover:after { opacity: 1; visibility: visible; } .blog .widget.widget-recent-posts .recent-post .recent-post-title h3 { margin-bottom: 5px; } .blog .widget.widget-tagcloud a { display: inline-block; padding: 5px 10px; background: white; color: #236fb6; margin: 5px 5px 5px 0; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .blog .widget.widget-tagcloud a:last-child { margin-right: 0px; } .blog .widget.widget-tagcloud a:hover { background: #236fb6; color: white; } @media only screen and (max-width: 1199px) { .blog .blog-posts { margin-top: 60px; } } .blog .blog-posts .post { margin-bottom: 90px; } .blog .blog-posts .post figure { position: relative; } .blog .blog-posts .post figure a { display: block; position: relative; } .blog .blog-posts .post figure a:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; z-index: 6; } .blog .blog-posts .post figure a:after { position: absolute; font-family: 'themify'; content: "\e61a"; font-size: 30px; color: white; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; opacity: 0; visibility: hidden; z-index: 7; } .blog .blog-posts .post figure a:hover:before, .blog .blog-posts .post figure a:hover:after { opacity: 1; visibility: visible; } .blog .blog-posts .post figure .post-img { position: relative; z-index: 5; } .blog .blog-posts .post figure .dotted { position: absolute; top: 40px; right: -20px; z-index: 3; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .blog .blog-posts .post figure:hover .dotted { top: 0px; right: 0px; } .blog .blog-posts .post .post-title { font-size: 30px; color: #218d7b; line-height: 1.2; } .blog .blog-posts .post .post-author, .blog .blog-posts .post .post-date { font-size: 16px; color: #236fb6; } .blog .blog-posts .post .post-tags span { font-weight: 600; margin-right: 5px; } .blog .blog-posts .post .post-tags a { text-transform: uppercase; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .blog .blog-posts .post .post-tags a:before { content: ','; } .blog .blog-posts .post .post-tags a:nth-of-type(1):before { content: ''; } .blog .blog-posts .post .post-tags a:hover { color: #0f1f2f; } .blog .blog-posts .post .btn-readmore { position: relative; display: -webkit-inline-box; display: -moz-inline-box; display: inline-box; display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; width: 170px; height: 45px; border: 1px solid #236fb6; } .blog .blog-posts .post .btn-readmore:after { position: absolute; font-family: 'FontAwesome'; content: '\f061'; right: 15px; color: white; -webkit-transition: position, 0.35s; -moz-transition: position, 0.35s; transition: position, 0.35s; } .blog .blog-posts .post .btn-readmore:hover { background: #218d7b; color: white; border-color: #218d7b; } .blog .blog-posts .post .btn-readmore:hover:after { right: 10px; } @media only screen and (max-width: 1199px) { .single-post .post { margin-top: 60px; } } .single-post .post figure { position: relative; height: 550px; } @media only screen and (max-width: 575px) { .single-post .post figure { height: 300px; margin-bottom: 30px; } } .single-post .post .post-title { line-height: 1.2; } .single-post .post .post-date { position: absolute; bottom: -30px; right: 40px; background: #236fb6; color: white; width: 100px; height: 100px; font-size: 18px; font-weight: 700; line-height: 1.2; } .single-post .post .post-date em { font-style: normal; font-size: 26px; } @media only screen and (max-width: 575px) { .single-post .post .post-date { bottom: -10px; right: 20px; } } .single-post .post .post-author { color: #236fb6; font-weight: 700; } @media only screen and (max-width: 991px) { .single-post .post-tags { margin-top: 30px; } } .single-post .post-tags span { font-weight: 600; margin-right: 5px; } .single-post .post-tags a { text-transform: lowercase; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; border: 1px solid #bdc3c4; padding: 6px 9px; margin-right: 7px; background: white; } @media only screen and (max-width: 575px) { .single-post .post-tags a { display: block; margin: 7px 0; } } .single-post .post-tags a:last-child { margin-right: 0px; } .single-post .post-tags a:hover { color: white; background: #218d7b; border-color: #218d7b; } @media only screen and (max-width: 575px) { .single-post .card { -webkit-box-orient: column !important; -moz-box-orient: column !important; box-orient: column !important; -webkit-box-direction: normal; -moz-box-direction: normal; box-direction: normal; -webkit-flex-direction: column !important; -moz-flex-direction: column !important; flex-direction: column !important; -ms-flex-direction: column !important; } } .single-post .card .card-title { font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #236fb6; } .single-post .card .card-image { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 1 20%; -moz-flex: 0 1 20%; -ms-flex: 0 1 20%; flex: 0 1 20%; } @media only screen and (max-width: 575px) { .single-post .card .card-image img { display: block; margin: 0px auto; } } .single-post .card .card-body { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 1 80%; -moz-flex: 0 1 80%; -ms-flex: 0 1 80%; flex: 0 1 80%; padding: 1.5rem; } .single-post .card .card-social a { margin-right: 7px; } .single-post .card .card-social a i { font-size: 20px; color: #7a7d7d; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .single-post .card .card-social a:hover i { color: #236fb6; } .single-post .comment-area .comment { margin: 30px 0; } .single-post .comment-area .comment .comment-img { position: absolute; top: 0px; left: 15px; } @media only screen and (max-width: 991px) { .single-post .comment-area .comment .comment-img { position: static; margin-bottom: 10px; max-width: 90px; } } .single-post .comment-area .comment .comment-body { position: relative; } .single-post .comment-area .comment .comment-body .author { font-size: 18px; text-transform: uppercase; color: #236fb6; margin-bottom: 10px; } .single-post .comment-area .comment .comment-body .comment-text { margin-bottom: 10px; } .single-post .comment-area .comment .comment-body .comment-reply-link { position: absolute; right: 0px; top: 0px; width: 60px; height: 25px; background: #236fb6; color: white; text-align: center; border-radius: 5px; font-size: 13px; } .single-post .comment-area .comment .comment-body .date { color: #7a7d7d; } .single-post .comment-area .comment .depth-2 .row { width: 97%; margin-left: 3%; } .single-post .comment-area .comment .depth-2 .depth-3 { width: 97%; margin-left: 3%; } .single-post .comment-area .comment-respond #cancel-comment-reply-link { position: relative; font-size: 14px; left: 5px; letter-spacing: 1px; } .single-post .comment-area .comment-respond textarea { height: 150px; } .header-vertical.blog #content { margin-left: 260px; } @media only screen and (max-width: 991px) { .header-vertical.blog #content { margin-left: 0px; } } /* ---------------------------------------------------------------------------- */ /* --- 5. FOOTER /* ----------------------------------------------------------------------------- */ #footer { position: relative; background: #f7f7f7; margin-top: 160px; margin-bottom: 60px; padding: 30px; z-index: 15; } #footer .gray-area { width: 590px; height: 100%; position: absolute; top: -170px; right: 0px; bottom: auto; background-color: #FAFAFA; z-index: 1; } @media (min-width: 992px) and (max-width: 1500px) { #footer .gray-area { width: 325px; } } @media only screen and (max-width: 991px) { #footer .gray-area { display: none; } } @media only screen and (min-width: 992px) { #footer { height: 200px; padding: 30px 50px; } } @media only screen and (max-width: 991px) { #footer { margin-bottom: 0px; margin-top: 30px; } } #footer.footer-fixed { position: fixed; z-index: 1; bottom: 0; left: 0; width: 100%; } #footer .footer-line { display: none; position: absolute; width: 590px; height: 23px; bottom: -20px; left: 50px; z-index: -1; background-color: #236fb6; background-image: -webkit-linear-gradient(right, #236fb6, #218d7b); background-image: linear-gradient(to left,#236fb6, #218d7b); } @media only screen and (min-width: 992px) { #footer .footer-line { display: block; } } #footer .footer-info { height: 100%; } #footer .contact-cta-box { position: absolute; top: -80px; right: 0px; height: 150px; padding: 0px 60px; z-index: 5; background-color: #236fb6; background-image: -webkit-linear-gradient(right, #236fb6, #218d7b); background-image: linear-gradient(to left,#236fb6, #218d7b); } @media only screen and (max-width: 991px) { #footer .contact-cta-box { position: relative; top: -60px; } } @media only screen and (max-width: 575px) { #footer .contact-cta-box { padding: 15px; } } #footer .contact-cta-box .cta-text { margin: 0px 0px 0px 15px; text-align: left; } #footer .contact-cta-box .cta-text, #footer .contact-cta-box .cta-text a, #footer .contact-cta-box .cta-text a:hover { position: relative; font-family: "Ubuntu", sans-serif; font-size: 20px; font-weight: 600; color: white; text-transform: uppercase; z-index: 3; } @media only screen and (max-width: 575px) { #footer .contact-cta-box .cta-text, #footer .contact-cta-box .cta-text a, #footer .contact-cta-box .cta-text a:hover { font-size: 16px; } } #footer .contact-cta-box .fade-icon { position: absolute; top: 0px; left: 0px; z-index: 1; } #footer .contact-cta-box .arrows { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -moz-box-pack: start; box-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: start; } #footer .contact-cta-box .arrows img { display: inline-block; -webkit-animation: arrow-action 2s; -moz-animation: arrow-action 2s; animation: arrow-action 2s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } #footer .contact-cta-box .arrows img:nth-of-type(1) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s; } #footer .contact-cta-box .arrows img:nth-of-type(2) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; } #footer .contact-cta-box .arrows img:nth-of-type(3) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; } @media only screen and (max-width: 575px) { #footer .contact-cta-box .arrows { display: none; } } #footer .module-social a { display: inline-block; position: relative; width: 32px; height: 32px; background: #b3b3b3; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; margin-right: 5px; } #footer .module-social a:last-child { margin-right: 0px; } #footer .module-social a i { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: white; } @media only screen and (max-width: 767px) { #footer .module-copyright { margin-bottom: 15px; } } /* ---------------------------------------------------------------------------- */ /* --- 6. ELEMENTS /* ----------------------------------------------------------------------------- */ /* 6.1 Alerts ----------------------------------------------------------*/ .alert { border: none; font-weight: 300; padding: 1rem 1.5rem; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; } .alert-primary { background-color: #eaf0f5; } .alert-primary .close { background-color: #fff; color: #236fb6; -webkit-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); } .alert-primary .close:hover, .alert-primary .close:focus { background-color: #236fb6; color: #fff; } .alert-secondary { background-color: #fefefe; } .alert-secondary .close { background-color: #fff; color: #f5f7f7; -webkit-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); } .alert-secondary .close:hover, .alert-secondary .close:focus { background-color: #f5f7f7; color: #fff; } .alert-info { background-color: #e6f8f9; } .alert-info .close { background-color: #fff; color: #218d7b; -webkit-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); } .alert-info .close:hover, .alert-info .close:focus { background-color: #218d7b; color: #fff; } .alert-warning { background-color: #fdf5ec; } .alert-warning .close { background-color: #fff; color: #ec9744; -webkit-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); } .alert-warning .close:hover, .alert-warning .close:focus { background-color: #ec9744; color: #fff; } .alert-danger { background-color: #fceeee; } .alert-danger .close { background-color: #fff; color: #e15757; -webkit-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); } .alert-danger .close:hover, .alert-danger .close:focus { background-color: #e15757; color: #fff; } .alert-success { background-color: #f0f7f0; } .alert-success .close { background-color: #fff; color: #6BB268; -webkit-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); } .alert-success .close:hover, .alert-success .close:focus { background-color: #6BB268; color: #fff; } .alert-dark { background-color: #ececed; } .alert-dark .close { background-color: #fff; color: #3D454C; -webkit-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); } .alert-dark .close:hover, .alert-dark .close:focus { background-color: #3D454C; color: #fff; } /* 6.2 Backgrounds ----------------------------------------------------------*/ /* Image / Slideshow */ .bg-image-holder, .bg-slideshow-holder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat; z-index: 0; } .bg-image-holder.bottom, .bg-slideshow-holder.bottom { background-position-y: bottom; } .bg-image-holder > img { display: none; } .bg-image-holder + * { position: relative; } .bg-image-fixed { background-attachment: fixed; } @media only screen and (max-width: 767px) { .bg-image-fixed { background-attachment: scroll; } } .bg-multiply { mix-blend-mode: multiply; } .bg-overlay { mix-blend-mode: overlay; } /* Video */ .bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .bg-video-placeholder { display: none; } /* Map */ .bg-map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .bg-map.with-joiner:after { position: absolute; top: 0; left: 0; right: 0; height: 45%; content: ' '; background-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0)); } .bg-map.light-overlay:after, .bg-map.dark-overlay:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ' '; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .bg-map.light-overlay:after { background: rgba(255, 255, 255, 0.5); } .bg-map.dark-overlay:after { background: rgba(0, 0, 0, 0.5); } .bg-map.light-overlay:hover:after, .bg-map.dark-overlay:hover:after { visibility: hidden; opacity: 0; filter: alpha(opacity=0); } .bg-map + * { position: relative; } /* Colors */ .bg-white { background-color: #fff; } .bg-light { background-color: #f5f7f7; } .bg-black { background-color: #000; } .bg-primary { background-color: #236fb6 !important; } .bg-secondary { background-color: #f5f7f7 !important; } .bg-info { background-color: #218d7b !important; } .bg-warning { background-color: #ec9744 !important; } .bg-danger { background-color: #e15757 !important; } .bg-success { background-color: #6BB268 !important; } .bg-dark { background-color: #3D454C !important; } .bg-primary-tint { background-color: #4677a5; } .bg-primary-shade { background-color: #2c5e8c; } .bg-facebook { background-color: #213553; } .bg-twitter { background-color: #3aa8db; } .bg-google { background-color: #d04f3e; } .bg-behance { background-color: #1882ff; } .bg-dribbble { background-color: #e95aae; } .bg-flickr { background-color: #f9429c; } .bg-instagram { background-color: #4f86ac; } .bg-linkedin { background-color: #008bc2; } .bg-pinterest { background-color: #cb1f24; } .bg-skype { background-color: #00bef4; } .bg-slack { background-color: #44ba97; } .bg-tumblr { background-color: #435971; } .bg-vimeo { background-color: #0bc4ef; } .bg-vine { background-color: #00be9b; } .bg-youtube { background-color: #ed4533; } /* 6.3 Badges ----------------------------------------------------------*/ .badge { border: none; padding: 0.65rem 1rem; -webkit-border-radius: 2rem; -moz-border-radius: 2rem; -ms-border-radius: 2rem; border-radius: 2rem; font-family: "Ubuntu Condensed", sans-serif; text-transform: uppercase; font-weight: 600; font-size: 70%; background-color: #f5f7f7; color: inherit; } .badge > i { font-size: 1.8em; display: inline-block; vertical-align: middle; line-height: 1; margin-top: -0.4em; margin-bottom: -0.4em; } .badge > i:first-child { margin-right: 0.5rem; margin-left: -0.5rem; } .badge.no-uppercase { text-transform: none; } /* 6.4 Buttons ----------------------------------------------------------*/ .btn { position: relative; font-family: "Ubuntu Condensed", sans-serif; font-weight: 600; text-transform: uppercase; -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; -ms-border-radius: 0.2em; border-radius: 0.2em; padding: 0.95rem 2rem 1.05rem; font-size: 14px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; outline: none; background: transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; cursor: pointer; } .btn:hover, .btn:focus, .btn:active, .btn:focus:active { outline: none; -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); } .btn > span { position: relative; z-index: 2; } .btn i { position: relative; top: 1px; opacity: 0.5; filter: alpha(opacity=50); } .btn i > i { display: inline-block; -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out; -moz-transition: -moz-transform 0.2s ease-out, opacity 0.2s ease-out; transition: transform 0.2s ease-out, opacity 0.2s ease-out; } .btn img { height: 1em; position: relative; top: -0.05em; display: inline-block; vertical-align: middle; } /* Sizes */ .btn-lg { padding: 1rem 2rem 1rem; font-size: 16px; -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; -ms-border-radius: 0.2em; border-radius: 0.2em; } @media only screen and (max-width: 575px) { .btn-lg { padding-left: 1.5rem; padding-right: 1.5rem; } } .btn-sm { padding: 0.6rem 1rem 0.7rem; font-size: 0.75rem; -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; -ms-border-radius: 0.2em; border-radius: 0.2em; } /* Types */ .btn-primary { border-color: #236fb6; background-color: #236fb6; color: #fff; color: #fff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:focus:active { border-color: #2c5e8c; background-color: #2c5e8c; color: #fff; } .btn-secondary { border-color: #f5f7f7; background-color: #f5f7f7; color: #fff; color: #343840; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:focus:active { border-color: #2c5e8c; background-color: #2c5e8c; color: #fff; } .btn-info { border-color: #218d7b; background-color: #218d7b; color: #fff; color: #fff; } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info:focus:active { border-color: #04aab3; background-color: #04aab3; color: #fff; } .btn-warning { border-color: #ec9744; background-color: #ec9744; color: #fff; color: #fff; } .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning:focus:active { border-color: #d4883d; background-color: #d4883d; color: #fff; } .btn-danger { border-color: #e15757; background-color: #e15757; color: #fff; color: #fff; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger:focus:active { border-color: #cb4e4e; background-color: #cb4e4e; color: #fff; } .btn-success { border-color: #6BB268; background-color: #6BB268; color: #fff; color: #fff; } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success:focus:active { border-color: #60a05e; background-color: #60a05e; color: #fff; } .btn-dark { border-color: #3D454C; background-color: #3D454C; color: #fff; color: #fff; } .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark:focus:active { border-color: #373e44; background-color: #373e44; color: #fff; } .btn-white { background-color: #fff; border-color: #fff; color: #343840; } .btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white:focus:active { background-color: #236fb6; border-color: #236fb6; color: #fff; } .btn-link { color: inherit; } .btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link:focus:active { color: #236fb6; text-decoration: none; } .btn-outline-primary { border-color: #236fb6; color: inherit; } .btn-outline-primary:before { background-color: #236fb6; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary:focus:active { color: #fff; border-color: #236fb6; background-color: #236fb6; } .btn-outline-secondary { border-color: #f5f7f7; color: inherit; } .btn-outline-secondary:before { background-color: #f5f7f7; } .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary:focus:active { color: #343840; border-color: #f5f7f7; background-color: #f5f7f7; } .btn-outline-info { border-color: #218d7b; color: inherit; } .btn-outline-info:before { background-color: #218d7b; } .btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active, .btn-outline-info:focus:active { color: #fff; border-color: #218d7b; background-color: #218d7b; } .btn-outline-warning { border-color: #ec9744; color: inherit; } .btn-outline-warning:before { background-color: #ec9744; } .btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active, .btn-outline-warning:focus:active { color: #fff; border-color: #ec9744; background-color: #ec9744; } .btn-outline-danger { border-color: #e15757; color: inherit; } .btn-outline-danger:before { background-color: #e15757; } .btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active, .btn-outline-danger:focus:active { color: #fff; border-color: #e15757; background-color: #e15757; } .btn-outline-success { border-color: #6BB268; color: inherit; } .btn-outline-success:before { background-color: #6BB268; } .btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active, .btn-outline-success:focus:active { color: #fff; border-color: #6BB268; background-color: #6BB268; } .btn-outline-dark { border-color: #3D454C; color: inherit; } .btn-outline-dark:before { background-color: #3D454C; } .btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active, .btn-outline-dark:focus:active { color: #fff; border-color: #3D454C; background-color: #3D454C; } .btn-group > .btn:first-child:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .btn-group > .btn:last-child:not(:first-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .btn-group > .btn:not(.btn-link):not(:first-child) { border-left: 1px solid rgba(255, 255, 255, 0.2); } .btn-group > .btn-secondary:not(:first-child) { border-left-color: rgba(255, 255, 255, 0.15) !important; } .btn-group > .btn-dark:not(:first-child) { border-left-color: rgba(255, 255, 255, 0.15) !important; } .btn-group .btn-outline-primary + .price { background-color: #236fb6; color: #fff; } .btn-group .btn:hover, .btn-group .btn:focus { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .btn-group .price { font-family: "Ubuntu Condensed", sans-serif; font-weight: 400; text-transform: uppercase; padding: 0.75rem 1rem 1rem; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .btn-group .price.price-lg { padding: 1.5rem 1rem 1.75rem; font-size: 1.2rem; } /* Submit Button */ .btn-submit .description { -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .btn-submit .success, .btn-submit .error { position: absolute; left: 0; right: 0; text-align: center; visibility: hidden; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .btn-submit .success { top: 0; bottom: 0; } .btn-submit svg { position: absolute; top: calc(50% - 1.25rem); left: calc(50% - 1.25rem); height: 2.5rem; width: 2.5rem; } .btn-submit.loading { -webkit-pointer-events: none; pointer-events: none; } .btn-submit.success .description, .btn-submit.error .description { visibility: hidden; opacity: 0; filter: alpha(opacity=0); } .btn-submit.success .success { opacity: 1; filter: alpha(opacity=100); visibility: visible; } .btn-submit.success .success > svg > path { stroke-dashoffset: 0; -webkit-transition: all 0.3s ease-out 0.25s; -moz-transition: all 0.3s ease-out 0.25s; transition: all 0.3s ease-out 0.25s; } .btn-submit.error { background-color: #bdc3c4; border-color: #bdc3c4; } .btn-submit.error .error { opacity: 1; filter: alpha(opacity=100); visibility: visible; } /* Play Button */ .btn-play { background-color: transparent; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: none; outline: none; cursor: pointer; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; position: relative; display: inline-block; font-size: 52px; width: 90px; height: 90px; vertical-align: middle; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .btn-play:before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background-color: white; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; -webkit-box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); content: ' '; } .btn-play:after { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); -webkit-filter: blur(0); filter: blur(0); border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent #343840; content: ' '; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .btn-play:hover, .btn-play:focus, .btn-play:active, .btn-play:focus:active { outline: none; } .btn-play:hover:before, .btn-play:focus:before, .btn-play:active:before, .btn-play:focus:active:before { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); opacity: 1; filter: alpha(opacity=100); visibility: visible; } .btn-play:hover:after, .btn-play:focus:after, .btn-play:active:after, .btn-play:focus:active:after { border-color: transparent transparent transparent #236fb6; } .btn-scroll { position: relative; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; width: 60px; height: 60px; background: #218d7b; color: white; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; overflow: hidden; } @media (min-width: 992px) and (max-width: 1500px) { .btn-scroll { width: 45px; height: 45px; } } @media only screen and (max-width: 991px) { .btn-scroll { width: 45px; height: 45px; } } .btn-scroll:before { position: absolute; content: ''; width: 100px; height: 120px; background: rgba(255, 255, 255, 0.4); -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .btn-scroll:hover:before { -webkit-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0); } .btn-scroll i { font-size: 22px; } /* 6.5 Cards ----------------------------------------- */ .card { border-color: #e3e3e3; margin-bottom: 1.75rem; } .card-header, .card-footer { padding: 1.5rem 1.75rem; background-color: transparent; } .card-subtitle { margin-top: -0.5rem; } .card-block { padding: 1.5rem 1.75rem; } .card-block:first-child .icon-circle { margin-top: -30px; } .card-image:first-child { -webkit-border-radius: 0.3rem 0.3rem 0 0; -moz-border-radius: 0.3rem 0.3rem 0 0; -ms-border-radius: 0.3rem 0.3rem 0 0; border-radius: 0.3rem 0.3rem 0 0; margin-top: -1px; } .card-image:last-child { -webkit-border-radius: 0 0 0.3rem 0.3rem; -moz-border-radius: 0 0 0.3rem 0.3rem; -ms-border-radius: 0 0 0.3rem 0.3rem; border-radius: 0 0 0.3rem 0.3rem; margin-bottom: -1px; } .card-link { font-weight: 700; font-size: 0.95rem; font-family: "Ubuntu Condensed", sans-serif; } .card-link:after { margin-left: 0.7rem; content: "\f105"; font-family: FontAwesome; opacity: 0.5; filter: alpha(opacity=50); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; display: inline-block; } .card-link:hover, .card-link:focus { color: inherit; } .card-link:hover:after, .card-link:focus:after { -webkit-transform: translateX(4px); -moz-transform: translateX(4px); -ms-transform: translateX(4px); -o-transform: translateX(4px); transform: translateX(4px); opacity: 1; filter: alpha(opacity=100); color: #236fb6; } .card-nav { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; font-weight: 700; font-family: "Ubuntu Condensed", sans-serif; } .card-nav::after { clear: both; content: ""; display: table; } .card-nav > li { width: 50%; float: left; overflow: hidden; display: block; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 0.4rem; } .card-nav > li:before { margin-right: 0.7rem; content: "\f105"; font-family: FontAwesome; opacity: 0.5; filter: alpha(opacity=50); } .card-nav > li > a:hover, .card-nav > li > a:focus { color: #236fb6; } .card-icon, .card-icon-top, .card-icon-bottom { padding: 50px 0; font-size: 56px; text-align: center; color: #fff; } .card-icon-top { -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .card-icon-bottom { -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } /* 6.6 Carousel ----------------------------------------------------------*/ .carousel { position: relative; } .carousel.carousel-items { margin-left: -15px; margin-right: -15px; } .carousel.carousel-items .carousel-item { padding-left: 15px; padding-right: 15px; } .carousel.slider .slide { overflow: hidden !important; } /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 80px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); padding: 0; border: none; outline: none; z-index: 2; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; visibility: hidden; opacity: 0; filter: alpha(opacity=0); text-align: center; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 0.9; filter: alpha(opacity=90); } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.3; filter: alpha(opacity=30); } .slick-prev:before, .slick-next:before { font-family: 'themify'; font-size: 1.7rem; line-height: 1; color: #343840; opacity: 0.5; filter: alpha(opacity=50); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .slick-prev { left: -80px; } [dir="rtl"] .slick-prev { left: auto; right: -80px; } .slick-prev:before { content: '\e629'; } [dir="rtl"] .slick-prev:before { content: '\e628'; } .slick-next { right: -80px; } [dir="rtl"] .slick-next { left: -80px; right: auto; } .slick-next:before { content: '\e628'; } [dir="rtl"] .slick-next:before { content: '\e629'; } .slick-slider:hover .slick-prev, .slick-slider:hover .slick-next { visibility: visible; opacity: 1; filter: alpha(opacity=100); } /* Dots */ .slick-dots { list-style: none; display: block; text-align: center; padding: 0; margin: 1rem 0 0; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0; padding: 0; cursor: pointer; } .slick-dots li button { position: relative; border: 0; background: transparent; display: block; height: 100%; width: 100%; outline: none; line-height: 0px; font-size: 0px; color: transparent; cursor: pointer; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:before { position: absolute; top: 50%; left: 50%; margin-left: -3px; margin-top: -3px; width: 6px; height: 6px; background-color: #343840; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; opacity: 0.4; filter: alpha(opacity=40); content: ' '; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } .slick-dots li.slick-active button:before { opacity: 1; filter: alpha(opacity=100); } .team-carousel .slick-dots { display: none !important; } .team-carousel .slick-dots button:before { width: 10px; height: 10px; margin-left: -5px; margin-right: -5px; background-color: #236fb6; } @media only screen and (max-width: 575px) { .team-carousel .slick-prev, .team-carousel .slick-next { display: none !important; } .team-carousel .slick-dots { display: block !important; } } /* 6.7 Forms ----------------------------------------------------------*/ /* Form Group */ .form-group { margin-bottom: 0.5rem; } /* Input Group */ .input-group .btn:hover, .input-group .btn:focus, .input-group .btn:active, .input-group .btn:focus:active { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .input-group-btn:not(:first-child) > .btn, .input-group-btn:not(:first-child) > .btn-group { margin-left: -2px; } /* Form Control */ .form-control { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border-color: #e3e3e3; font-weight: 400; padding: 0.95rem 1rem; font-size: 1rem; border: 1px solid #e3e3e3; -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; -ms-border-radius: 0.2em; border-radius: 0.2em; } .form-control.error { -webkit-box-shadow: 0 0 8px 0 #e15757 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 8px 0 #e15757 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: 0 0 8px 0 #e15757 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: 0 0 8px 0 #e15757 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 8px 0 #e15757 0 5px 0 rgba(0, 0, 0, 0.15); } .form-control.error:focus { border-color: #e15757; } .form-control::-webkit-input-placeholder { color: inherit; opacity: 0.5; filter: alpha(opacity=50); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .form-control::-moz-placeholder { color: inherit; opacity: 0.5; filter: alpha(opacity=50); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .form-control:-moz-placeholder { color: inherit; opacity: 0.5; filter: alpha(opacity=50); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .form-control:-ms-input-placeholder { color: inherit; opacity: 0.5; filter: alpha(opacity=50); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .form-control:focus { border-color: #bdc3c4; -webkit-box-shadow: inset 1px 1px 2px 0 rgba(49, 104, 155, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 1px 1px 2px 0 rgba(49, 104, 155, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: inset 1px 1px 2px 0 rgba(49, 104, 155, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: inset 1px 1px 2px 0 rgba(49, 104, 155, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 1px 1px 2px 0 rgba(49, 104, 155, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); outline: 0 !important; } .form-control:focus::-webkit-input-placeholder { color: transparent; } .form-control:focus::-moz-placeholder { color: transparent; } .form-control:focus:-moz-placeholder { color: transparent; } .form-control:focus:-ms-input-placeholder { color: transparent; } .form-control-short { width: 80px !important; } .form-control-sm { padding: 0.75rem; font-size: 0.9rem; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; } .form-control-lg { padding: 1.75rem; font-size: 1.2rem; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; } .dark .form-control { border-color: #fff; } .dark .form-control.error { border-color: #f9dddd; } /* Select */ .select-container { position: relative; } .select-container:after { position: absolute; top: 50%; display: block; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); right: 13px; font-size: 0.8rem; color: #343840; font-family: themify; content: "\e62a"; } select.form-control:not([size]):not([multiple]) { height: calc(3.25rem + 2px); } /* Radio - Custom */ .custom-radio .custom-control-input + .custom-control-indicator { top: 0.1em; font-weight: 400; font-family: "Ubuntu Condensed", sans-serif; width: 1.3em; height: 1.3em; margin-right: 0.5rem; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; border: 2px solid #e3e3e3; background-color: #fff; } .custom-radio .custom-control-input + .custom-control-indicator > svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .custom-radio .custom-control-input + .custom-control-indicator > svg > path { stroke: #236fb6; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .custom-radio .custom-control-input:checked + .custom-control-indicator > svg > path { stroke-dashoffset: 0; } .custom-radio .custom-control-input:focus + .custom-control-indicator { -webkit-box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); border-color: #cccccc; } /* Checkbox - Custom */ .custom-checkbox .custom-control-input + .custom-control-indicator { top: 0.1em; font-weight: 400; font-family: "Ubuntu Condensed", sans-serif; width: 1.3em; height: 1.3em; margin-right: 0.5rem; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; border: 2px solid #e3e3e3; background-color: #fff; } .custom-checkbox .custom-control-input + .custom-control-indicator > svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .custom-checkbox .custom-control-input + .custom-control-indicator > svg > path { stroke: #236fb6; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .custom-checkbox .custom-control-input:checked + .custom-control-indicator > svg > path { stroke-dashoffset: 0; } .custom-checkbox .custom-control-input:focus + .custom-control-indicator { -webkit-box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: none 0 5px 0 rgba(0, 0, 0, 0.15); } /* Select Box - Custom */ .select-box { position: relative; display: block; width: 100%; margin: 0 auto; font-family: "Ubuntu", sans-serif; font-size: 18px; color: #236fb6; } .select-box__current { position: relative; cursor: pointer; outline: none; } .select-box__current:after { position: absolute; top: 50%; display: block; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); right: 15px; font-size: 0.8rem; color: #343840; font-family: themify; content: "\e62a"; } .select-box__current:focus + .select-box__list { opacity: 1; animation-name: none; } .select-box__current:focus + .select-box__list .select-box__option { cursor: pointer; } .select-box__current:focus:after { transform: translateY(-50%) rotate(180deg); } .select-box__value { display: flex; } .select-box__input { display: none; } .select-box__input:checked + .select-box__input-text { display: block; } .select-box__input-text { display: none; width: 100%; margin: 0; padding: 15px; background-color: #f1f3f6; color: #236fb6; } .select-box__list { position: absolute; width: 100%; padding: 0; list-style: none; opacity: 0; z-index: 5; animation-name: HideList; animation-duration: 0.5s; animation-delay: 0.5s; animation-fill-mode: forwards; animation-timing-function: step-start; box-shadow: 0 15px 30px 0px rgba(0, 0, 0, 0.08); } .select-box__option { display: block; padding: 15px; background-color: white; margin: 0; } .select-box__option:hover, .select-box__option:focus { color: #546c84; background-color: #fbfbfb; } @keyframes HideList { from { transform: scaleY(1); } to { transform: scaleY(0); } } /* 6.8 Icons ----------------------------------------------------------*/ .icon { position: relative; display: inline-block; font-size: 32px; width: 42px; vertical-align: middle; } .icon.icon-sm { font-size: 18px; width: 28px; } .icon.icon-lg { font-size: 48px; width: 58px; } .icon.icon-primary { color: #236fb6; } .icon.icon-secondary { color: #f5f7f7; } .icon.icon-info { color: #218d7b; } .icon.icon-warning { color: #ec9744; } .icon.icon-danger { color: #e15757; } .icon.icon-success { color: #6BB268; } .icon.icon-dark { color: #3D454C; } .icon.icon-dark { color: rgba(0, 0, 0, 0.4); } .icon.icon-default { color: #bdc3c4; } .icon.icon-facebook { color: #bdc3c4; } .icon.icon-facebook:hover, .icon.icon-facebook:focus { color: #213553; } .icon.icon-twitter { color: #bdc3c4; } .icon.icon-twitter:hover, .icon.icon-twitter:focus { color: #3aa8db; } .icon.icon-google { color: #bdc3c4; } .icon.icon-google:hover, .icon.icon-google:focus { color: #d04f3e; } .icon.icon-behance { color: #bdc3c4; } .icon.icon-behance:hover, .icon.icon-behance:focus { color: #1882ff; } .icon.icon-dribbble { color: #bdc3c4; } .icon.icon-dribbble:hover, .icon.icon-dribbble:focus { color: #e95aae; } .icon.icon-flickr { color: #bdc3c4; } .icon.icon-flickr:hover, .icon.icon-flickr:focus { color: #f9429c; } .icon.icon-instagram { color: #bdc3c4; } .icon.icon-instagram:hover, .icon.icon-instagram:focus { color: #4f86ac; } .icon.icon-linkedin { color: #bdc3c4; } .icon.icon-linkedin:hover, .icon.icon-linkedin:focus { color: #008bc2; } .icon.icon-pinterest { color: #bdc3c4; } .icon.icon-pinterest:hover, .icon.icon-pinterest:focus { color: #cb1f24; } .icon.icon-skype { color: #bdc3c4; } .icon.icon-skype:hover, .icon.icon-skype:focus { color: #00bef4; } .icon.icon-slack { color: #bdc3c4; } .icon.icon-slack:hover, .icon.icon-slack:focus { color: #44ba97; } .icon.icon-tumblr { color: #bdc3c4; } .icon.icon-tumblr:hover, .icon.icon-tumblr:focus { color: #435971; } .icon.icon-vimeo { color: #bdc3c4; } .icon.icon-vimeo:hover, .icon.icon-vimeo:focus { color: #0bc4ef; } .icon.icon-vine { color: #bdc3c4; } .icon.icon-vine:hover, .icon.icon-vine:focus { color: #00be9b; } .icon.icon-youtube { color: #bdc3c4; } .icon.icon-youtube:hover, .icon.icon-youtube:focus { color: #ed4533; } .icon.icon-circle { height: 42px; font-size: 20px; text-align: center; color: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; text-align: center; } .icon.icon-circle > * { position: relative; z-index: 2; line-height: 42px; } .icon.icon-circle.icon-sm { height: 28px; font-size: 14px; } .icon.icon-circle.icon-sm > * { line-height: 28px; } .icon.icon-circle.icon-lg { height: 58px; font-size: 32px; } .icon.icon-circle.icon-lg > * { line-height: 58px; } .icon.icon-circle.icon-primary { background-color: #236fb6; } .icon.icon-circle.icon-secondary { background-color: #f5f7f7; } .icon.icon-circle.icon-info { background-color: #218d7b; } .icon.icon-circle.icon-warning { background-color: #ec9744; } .icon.icon-circle.icon-danger { background-color: #e15757; } .icon.icon-circle.icon-success { background-color: #6BB268; } .icon.icon-circle.icon-dark { background-color: #3D454C; } .icon.icon-circle.icon-facebook { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-facebook:hover, .icon.icon-circle.icon-facebook:focus { color: #fff; background-color: #213553; } .icon.icon-circle.icon-twitter { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-twitter:hover, .icon.icon-circle.icon-twitter:focus { color: #fff; background-color: #3aa8db; } .icon.icon-circle.icon-google { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-google:hover, .icon.icon-circle.icon-google:focus { color: #fff; background-color: #d04f3e; } .icon.icon-circle.icon-behance { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-behance:hover, .icon.icon-circle.icon-behance:focus { color: #fff; background-color: #1882ff; } .icon.icon-circle.icon-dribbble { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-dribbble:hover, .icon.icon-circle.icon-dribbble:focus { color: #fff; background-color: #e95aae; } .icon.icon-circle.icon-flickr { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-flickr:hover, .icon.icon-circle.icon-flickr:focus { color: #fff; background-color: #f9429c; } .icon.icon-circle.icon-instagram { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-instagram:hover, .icon.icon-circle.icon-instagram:focus { color: #fff; background-color: #4f86ac; } .icon.icon-circle.icon-linkedin { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-linkedin:hover, .icon.icon-circle.icon-linkedin:focus { color: #fff; background-color: #008bc2; } .icon.icon-circle.icon-pinterest { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-pinterest:hover, .icon.icon-circle.icon-pinterest:focus { color: #fff; background-color: #cb1f24; } .icon.icon-circle.icon-skype { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-skype:hover, .icon.icon-circle.icon-skype:focus { color: #fff; background-color: #00bef4; } .icon.icon-circle.icon-slack { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-slack:hover, .icon.icon-circle.icon-slack:focus { color: #fff; background-color: #44ba97; } .icon.icon-circle.icon-tumblr { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-tumblr:hover, .icon.icon-circle.icon-tumblr:focus { color: #fff; background-color: #435971; } .icon.icon-circle.icon-vimeo { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-vimeo:hover, .icon.icon-circle.icon-vimeo:focus { color: #fff; background-color: #0bc4ef; } .icon.icon-circle.icon-vine { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-vine:hover, .icon.icon-circle.icon-vine:focus { color: #fff; background-color: #00be9b; } .icon.icon-circle.icon-youtube { color: #fff; background-color: #bdc3c4; } .icon.icon-circle.icon-youtube:hover, .icon.icon-circle.icon-youtube:focus { color: #fff; background-color: #ed4533; } /* 6.9 Loaders ----------------------------------------------------------*/ .animsition-overlay-slide { z-index: 10000; background-color: #fff; -webkit-box-shadow: 0 0 90px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 90px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: 0 0 90px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: 0 0 90px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 90px 0 rgba(0, 0, 0, 0.07) 0 5px 0 rgba(0, 0, 0, 0.15); } .dark-overlay .animsition-overlay-slide { background-color: #373e44; } .page-loader { position: fixed; top: 50%; left: 50%; margin-left: -16px; margin-top: -16px; z-index: 10001; } .page-loader .loader { position: relative; } /* Loader */ .loader { -webkit-animation: loaderRotate 1.4s linear infinite; -moz-animation: loaderRotate 1.4s linear infinite; animation: loaderRotate 1.4s linear infinite; } .loader .circle { stroke: #236fb6; stroke-dasharray: 96; stroke-dashoffset: 0; -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; -o-transform-origin: center; transform-origin: center; -webkit-animation: loaderTurn 1.4s ease-in-out infinite; -moz-animation: loaderTurn 1.4s ease-in-out infinite; animation: loaderTurn 1.4s ease-in-out infinite; } .loader.loader-white .circle { stroke: #fff; } @-webkit-keyframes loaderRotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(270deg); } } @-moz-keyframes loaderRotate { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(270deg); } } @keyframes loaderRotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } } @-webkit-keyframes loaderTurn { 0% { stroke-dashoffset: 96; } 50% { stroke-dashoffset: 23; -webkit-transform: rotate(135deg); } 100% { stroke-dashoffset: 96; -webkit-transform: rotate(450deg); } } @-moz-keyframes loaderTurn { 0% { stroke-dashoffset: 96; } 50% { stroke-dashoffset: 23; -moz-transform: rotate(135deg); } 100% { stroke-dashoffset: 96; -moz-transform: rotate(450deg); } } @keyframes loaderTurn { 0% { stroke-dashoffset: 96; } 50% { stroke-dashoffset: 23; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 100% { stroke-dashoffset: 96; -webkit-transform: rotate(450deg); -moz-transform: rotate(450deg); -ms-transform: rotate(450deg); -o-transform: rotate(450deg); transform: rotate(450deg); } } /* 6.11 Navs ----------------------------------------------------------*/ /* Pills */ .nav-pills > .nav-item > .nav-link { font-family: "Ubuntu Condensed", sans-serif; font-size: 1rem; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; padding: 1rem 1.8rem; background-color: #f5f7f7; } .nav-pills > .nav-item > .nav-link.active { background-color: #236fb6; color: #fff; } .nav-pills > .nav-item > .nav-link.active:hover, .nav-pills > .nav-item > .nav-link.active:focus { background-color: #236fb6; } .nav-pills > .nav-item + .nav-item { margin-left: 0; } /* Tabs */ .nav-tabs > .nav-item > .nav-link { position: relative; font-family: "Ubuntu Condensed", sans-serif; padding: 1rem 2rem; font-weight: 600; font-size: 0.8rem; margin-right: 0; text-transform: uppercase; } /* Vertical Navigation */ .nav-vertical { -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; box-direction: normal; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; margin-bottom: 1.5rem; } .nav-vertical li a { font-weight: 500; padding: 0.75rem 0; display: block; color: inherit; } .nav-vertical li a:hover, .nav-vertical li a:focus { background: transparent; color: #236fb6; } .nav-vertical > li:not(:last-child) { border-bottom: 1px solid #e3e3e3; } .nav-vertical > li > a:hover, .nav-vertical > li > a:focus { color: #236fb6; } .nav-vertical > li > a.active { color: #236fb6; } .nav-vertical > li > a.active + ul { display: block; } .nav-vertical > li > ul { padding: 0 0.75rem; margin: 0 0 0.75rem; list-style: none; display: none; } .nav-vertical > li > ul li a { padding: 0.2rem 0; font-size: 0.9rem; opacity: 0.5; filter: alpha(opacity=50); } .nav-vertical > li > ul li a.active, .nav-vertical > li > ul li a:hover, .nav-vertical > li > ul li a:focus { color: inherit; opacity: 1; filter: alpha(opacity=100); } /* 6.12 Notifications ----------------------------------------------------------*/ #notification-bar { position: fixed; left: 0; right: 0; bottom: 0; font-weight: 300; color: #fff; z-index: 960; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); visibility: hidden; text-align: center; -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1) 0 5px 0 rgba(0, 0, 0, 0.15); font-family: "Ubuntu Condensed", sans-serif; } #notification-bar > div { padding: 1.5rem; font-size: 14px; } #notification-bar > div.success { background-color: #6BB268; } #notification-bar > div.error { background-color: #e15757; } #notification-bar.visible { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; } #notification-bar .close { position: absolute; top: 15px; right: 15px; font-size: 1rem; } /* 6.10 Modals ----------------------------------------------------------*/ .modal-close { display: flex; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; position: fixed; top: 3rem; right: 3rem; border: 0px; font-size: 16px; z-index: 1050 !important; background: white; border-radius: 50%; width: 35px; height: 35px; color: black; } .modal-close:focus { outline: none; } .modal-close:hover { cursor: pointer; } @media only screen and (max-width: 575px) { .modal-close { top: 5rem; right: 1rem; font-size: 16px; } } .modal.fade .modal-dialog { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } .modal.show .modal-dialog { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .modal-content { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; -webkit-box-shadow: 5px 5px 50px 0px rgba(0, 0, 0, 0.3) 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 5px 5px 50px 0px rgba(0, 0, 0, 0.3) 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: 5px 5px 50px 0px rgba(0, 0, 0, 0.3) 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: 5px 5px 50px 0px rgba(0, 0, 0, 0.3) 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 5px 5px 50px 0px rgba(0, 0, 0, 0.3) 0 5px 0 rgba(0, 0, 0, 0.15); border: none; overflow: hidden; } .modal-header { position: relative; padding: 2rem; } .modal-header.modal-header-lg { padding: 7rem 2rem 1.5rem; } .modal-header > .close { position: absolute; top: 1rem; right: 1rem; } .modal-dialog > .close, .modal-content > .close { position: absolute; top: 20px; right: 20px; } .modal-btn:hover, .modal-btn:focus { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .modal-product-details { background-color: #f5f7f7; padding: 1.5rem 2rem; } .modal-body { padding: 1.5rem 2rem; } .modal-footer { padding: 1.5rem 2rem; } .modal-backdrop { background-color: #3D454C; z-index: 1040; } .modal-backdrop.show { opacity: 0.4; filter: alpha(opacity=40); } /* Modal Video */ .modal-video { text-align: center; } @media only screen and (max-width: 767px) { .modal-video { text-align: left; padding: 0 15px; } } .modal-video iframe { width: 768px; max-width: 100%; display: block; } .modal-video:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } @media only screen and (max-width: 767px) { .modal-video:before { display: none; } } .modal-video .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; margin-top: 70px; max-width: 80%; } @media only screen and (max-width: 575px) { .modal-video .modal-dialog { display: block; margin: 0px auto; width: 100%; max-width: 100%; margin-top: 120px; } } .modal-video .modal-content { background-color: #000; } @media only screen and (max-width: 575px) { .modal-video .modal-content iframe { height: 350px; } } /* 6.13 Other ----------------------------------------------------------*/ /* Body Overlay */ #body-overlay { position: fixed; top: 0; right: 0; bottom: 0; width: 100vw; background-color: rgba(0, 0, 0, 0.5); z-index: 899; content: ' '; z-index: 925; display: none; } /* Separator */ hr { margin-top: 3rem; margin-bottom: 3rem; border-color: #e3e3e3; } @media only screen and (max-width: 767px) { hr { margin-top: 2rem; margin-bottom: 2rem; } } hr.hr-md { margin-top: 2rem; margin-bottom: 2rem; } hr.hr-sm { margin-top: 1.25rem; margin-bottom: 1.25rem; } hr.hr-xs { margin-top: 0.5rem; margin-bottom: 0.5rem; } hr.hr-primary { width: 50px; border-color: #236fb6; display: inline-block; border-width: 2px; margin-top: 2rem; margin-bottom: 2rem; } .dark hr { border-color: rgba(255, 255, 255, 0.15); } /* Close */ .close { color: inherit; text-shadow: none; opacity: 0.6; filter: alpha(opacity=60); font-size: 14px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .close:after { font-family: themify; content: "\e646"; } .close:hover, .close:focus, .close:active, .close:focus:active { outline: none; color: inherit; opacity: 1; filter: alpha(opacity=100); } .dark .close, .close.dark { color: #fff; } /* Fullscreen toggle */ .fullscreen-toggle { position: absolute; top: 2.5rem; right: 2.5rem; width: 26px; height: 26px; z-index: 100; color: #fff; cursor: pointer; } .fullscreen-toggle > span { position: absolute; display: block; width: 11px; height: 11px; background-size: 100% 100%; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .fullscreen-toggle > span.arrow-tl { top: 0; left: 0; background-image: url("../../images/svg/arrow-tl.svg"); } .fullscreen-toggle > span.arrow-tr { top: 0; right: 0; background-image: url("../../images/svg/arrow-tr.svg"); } .fullscreen-toggle > span.arrow-br { bottom: 0; right: 0; background-image: url("../../images/svg/arrow-br.svg"); } .fullscreen-toggle > span.arrow-bl { bottom: 0; left: 0; background-image: url("../../images/svg/arrow-bl.svg"); } .fullscreen-toggle:hover .arrow-tl { -webkit-transform: translate(-2px, -2px); -moz-transform: translate(-2px, -2px); -ms-transform: translate(-2px, -2px); -o-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } .fullscreen-toggle:hover .arrow-tr { -webkit-transform: translate(2px, -2px); -moz-transform: translate(2px, -2px); -ms-transform: translate(2px, -2px); -o-transform: translate(2px, -2px); transform: translate(2px, -2px); } .fullscreen-toggle:hover .arrow-br { -webkit-transform: translate(2px, 2px); -moz-transform: translate(2px, 2px); -ms-transform: translate(2px, 2px); -o-transform: translate(2px, 2px); transform: translate(2px, 2px); } .fullscreen-toggle:hover .arrow-bl { -webkit-transform: translate(-2px, 2px); -moz-transform: translate(-2px, 2px); -ms-transform: translate(-2px, 2px); -o-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } /* 6.14 Pagination ----------------------------------------------------------*/ /* Pagination */ .pagination { margin: 30px 0 30px 0; } @media only screen and (max-width: 575px) { .pagination { flex-wrap: wrap; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; box-direction: normal; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; } } .pagination .page-numbers { position: relative; display: -webkit-inline-box; display: -moz-inline-box; display: inline-box; display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; width: 50px; height: 50px; background: transparent; border: 1px solid #236fb6; margin-right: 5px; } @media only screen and (max-width: 575px) { .pagination .page-numbers { display: block; width: 100%; height: 40px; margin: 3px; text-align: center; line-height: 40px; } } .pagination .page-numbers:last-child { margin-right: 0px; } @media only screen and (max-width: 575px) { .pagination .page-numbers:last-child { margin-right: 3px; } } .pagination .page-numbers.active, .pagination .page-numbers:hover { background: #236fb6; color: white; } .pagination .page-numbers.current { background: #218d7b; color: white; border: 0px; } .pagination .prev, .pagination .next { font-family: 'fontAwesome'; } .pagination .prev:before { position: absolute; content: '\f060'; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .pagination .next:before { position: absolute; content: '\f061'; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .pagination.disabled { pointer-events: none; opacity: 0.5; filter: alpha(opacity=50); } /* 6.15 Tooltips ----------------------------------------------------------*/ .tooltip { font-family: "Ubuntu Condensed", sans-serif; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; } .tooltip.in { opacity: 1; filter: alpha(opacity=100); } .tooltip .tooltip-inner { background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 0.25rem 0.5rem; -webkit-box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.2) 0 5px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.2) 0 5px 0 rgba(0, 0, 0, 0.15); -ms-box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.2) 0 5px 0 rgba(0, 0, 0, 0.15); -o-box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.2) 0 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.2) 0 5px 0 rgba(0, 0, 0, 0.15); } .tooltip.bs-tether-element-attached-left .tooltip-inner::before, .tooltip.tooltip-right .tooltip-inner::before { border-right-color: rgba(0, 0, 0, 0.8); } .tooltip.bs-tether-element-attached-right .tooltip-inner::before, .tooltip.tooltip-left .tooltip-inner::before { border-left-color: rgba(0, 0, 0, 0.8); } .tooltip.bs-tether-element-attached-bottom .tooltip-inner::before, .tooltip.tooltip-top .tooltip-inner::before { border-top-color: rgba(0, 0, 0, 0.8); } .tooltip.bs-tether-element-attached-top .tooltip-inner::before, .tooltip.tooltip-bottom .tooltip-inner::before { border-bottom-color: rgba(0, 0, 0, 0.8); } *[data-toggle="tooltip"] { cursor: pointer; } /* 6.16 Typography ----------------------------------------------------------*/ /* Headings */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-top: 0; margin-bottom: 1.5rem; font-weight: 600; font-family: "Ubuntu Condensed", sans-serif; line-height: 1.5; } h1, .h1 { font-size: 2.75rem; } @media only screen and (max-width: 575px) { h1, .h1 { font-size: 2rem; } } h2, .h2 { font-size: 2.75rem; } @media only screen and (max-width: 575px) { h2, .h2 { font-size: 2rem; } } h3, .h3 { font-size: 2.25rem; } @media only screen and (max-width: 575px) { h2, .h2 { font-size: 1.75rem; } } } h4, .h4 { font-size: 1.25rem; font-weight: 500; } h5, .h5 { font-weight: 500; font-size: 1.1rem; } h6, .h6 { font-weight: 500; text-transform: uppercase; font-size: 0.85rem; } /* Paragraph */ p { font-size: 16px; font-weight: 300; margin-bottom: 2rem; } p.lead { font-size: 1.2rem; font-weight: 300; } /* Description */ dl dt { color: #8e9193; font-weight: 400; } dl dd { font-weight: 600; } /* Blockquote */ blockquote { width: 100%; position: relative; background-color: #f5f7f7; border: none; -webkit-border-radius: 0.3rem; -moz-border-radius: 0.3rem; -ms-border-radius: 0.3rem; border-radius: 0.3rem; margin: 2em 0; padding: 3rem; text-align: center; } blockquote:before { font-family: 'FontAwesome'; content: '\f10d'; position: absolute; left: -15px; top: -32px; font-size: 40px; z-index: 5; color: #218d7b; } @media only screen and (max-width: 575px) { blockquote:before { left: -10px; } } blockquote p { font-size: 1.25rem; font-weight: 300; margin-bottom: 1rem; font-style: italic; color: #236fb6; } blockquote footer { font-size: 0.9rem; color: #8e9193; font-weight: 500; } blockquote footer:before { display: none; } blockquote footer img { width: 32px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; margin-right: 0.5rem; } blockquote footer .name { white-space: nowrap; } /* Sizes */ .text-lg { font-size: 1.35rem; } @media only screen and (max-width: 575px) { .text-lg { font-size: 1.2rem; } } .text-md { font-size: 1.1rem; } .text-sm { font-size: 0.95rem; } .text-xs { font-size: 0.85rem; } /* Colors */ .text-primary { color: #236fb6 !important; } .text-secondary { color: #f5f7f7 !important; } .text-info { color: #218d7b !important; } .text-warning { color: #ec9744 !important; } .text-danger { color: #e15757 !important; } .text-success { color: #6BB268 !important; } .text-dark { color: #3D454C !important; } .text-dark { color: #343840 !important; } .text-muted { color: #8e9193 !important; } .dark .text-muted { color: rgba(255, 255, 255, 0.5) !important; } a.text-primary:hover, a.text-primary:focus { color: #27537c !important; } a.text-secondary:hover, a.text-secondary:focus { color: #c4c6c6 !important; } a.text-info:hover, a.text-info:focus { color: #03979f !important; } a.text-warning:hover, a.text-warning:focus { color: #bd7936 !important; } a.text-danger:hover, a.text-danger:focus { color: #b44646 !important; } a.text-success:hover, a.text-success:focus { color: #568e53 !important; } a.text-dark:hover, a.text-dark:focus { color: #31373d !important; } .list-check { list-style: none; padding: 0; margin: 0 0 2rem 0; } .list-check > li { position: relative; padding-left: 1.5em; } .list-check > li:not(:last-child) { padding-bottom: 0.25em; margin-bottom: 0.25em; } .list-check > li:before { position: absolute; top: 0; left: 0; font-family: 'Themify'; content: '\e64c'; color: #6BB268; } .list-check > li.false:before { color: #bdc3c4; content: '\e646'; } /* ---------------------------------------------------------------------------- */ /* --- 7. WIDGETS /* ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- */ /* --- 8. ANIMATIONS /* ----------------------------------------------------------------------------- */ .animated { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s; } /* Zooming */ .zooming { -webkit-animation: zooming 18s infinite both; -moz-animation: zooming 18s infinite both; animation: zooming 18s infinite both; } @-webkit-keyframes zooming { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes zooming { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); } } @keyframes zooming { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .hanging { -webkit-animation: hanging 8s infinite both; -moz-animation: hanging 8s infinite both; animation: hanging 8s infinite both; } /* Hanging */ @-webkit-keyframes hanging { 0% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(5px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes hanging { 0% { -moz-transform: translateY(0); } 50% { -moz-transform: translateY(5px); } 100% { -moz-transform: translateY(0); } } @keyframes hanging { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -ms-transform: translateY(5px); -o-transform: translateY(5px); transform: translateY(5px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } /* Blinking */ .blinking { -webkit-animation: blinking 2s infinite both; -moz-animation: blinking 2s infinite both; animation: blinking 2s infinite both; } @-webkit-keyframes blinking { 0% { opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } 100% { opacity: 1; filter: alpha(opacity=100); } } @-moz-keyframes blinking { 0% { opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } 100% { opacity: 1; filter: alpha(opacity=100); } } @keyframes blinking { 0% { opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } 100% { opacity: 1; filter: alpha(opacity=100); } } @-webkit-keyframes loaderRotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(270deg); } } @-moz-keyframes loaderRotate { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(270deg); } } @keyframes loaderRotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } } @-webkit-keyframes loaderTurn { 0% { stroke-dashoffset: 96; } 50% { stroke-dashoffset: 23; -webkit-transform: rotate(135deg); } 100% { stroke-dashoffset: 96; -webkit-transform: rotate(450deg); } } @-moz-keyframes loaderTurn { 0% { stroke-dashoffset: 96; } 50% { stroke-dashoffset: 23; -moz-transform: rotate(135deg); } 100% { stroke-dashoffset: 96; -moz-transform: rotate(450deg); } } @keyframes loaderTurn { 0% { stroke-dashoffset: 96; } 50% { stroke-dashoffset: 23; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 100% { stroke-dashoffset: 96; -webkit-transform: rotate(450deg); -moz-transform: rotate(450deg); -ms-transform: rotate(450deg); -o-transform: rotate(450deg); transform: rotate(450deg); } } /* Appointment Arrow Action */ @-webkit-keyframes arrow-action { 0% { opacity: 0; transform: translate3d(-30px, 0, 0); } 50% { opacity: 1; transform: none; } 100% { opacity: 0; } } @-moz-keyframes arrow-action { 0% { opacity: 0; transform: translate3d(-30px, 0, 0); } 50% { opacity: 1; transform: none; } 100% { opacity: 0; } } @keyframes arrow-action { 0% { opacity: 0; transform: translate3d(-30px, 0, 0); } 50% { opacity: 1; transform: none; } 100% { opacity: 0; } } /* Waves */ @-webkit-keyframes waves { 0% { box-shadow: 0 0 0 0 rgba(49, 104, 155, 0.6), 0 0 0 0 rgba(49, 104, 155, 0.6); } 40% { box-shadow: 0 0 0 50px rgba(49, 104, 155, 0), 0 0 0 0 rgba(49, 104, 155, 0.6); } 80% { box-shadow: 0 0 0 50px rgba(49, 104, 155, 0), 0 0 0 30px rgba(49, 104, 155, 0); } 100% { box-shadow: 0 0 0 0 rgba(49, 104, 155, 0), 0 0 0 30px rgba(49, 104, 155, 0); } } @-moz-keyframes waves { 0% { box-shadow: 0 0 0 0 rgba(49, 104, 155, 0.6), 0 0 0 0 rgba(49, 104, 155, 0.6); } 40% { box-shadow: 0 0 0 50px rgba(49, 104, 155, 0), 0 0 0 0 rgba(49, 104, 155, 0.6); } 80% { box-shadow: 0 0 0 50px rgba(49, 104, 155, 0), 0 0 0 30px rgba(49, 104, 155, 0); } 100% { box-shadow: 0 0 0 0 rgba(49, 104, 155, 0), 0 0 0 30px rgba(49, 104, 155, 0); } } @keyframes waves { 0% { box-shadow: 0 0 0 0 rgba(49, 104, 155, 0.6), 0 0 0 0 rgba(49, 104, 155, 0.6); } 40% { box-shadow: 0 0 0 50px rgba(49, 104, 155, 0), 0 0 0 0 rgba(49, 104, 155, 0.6); } 80% { box-shadow: 0 0 0 50px rgba(49, 104, 155, 0), 0 0 0 30px rgba(49, 104, 155, 0); } 100% { box-shadow: 0 0 0 0 rgba(49, 104, 155, 0), 0 0 0 30px rgba(49, 104, 155, 0); } } /* Flaticon icon font: Flaticon Creation date: 06/08/2019 06:39 */ @font-face { font-family: "Flaticon"; font-display: auto; src: url("../fonts/Flaticon.eot"); src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"), url("../fonts/Flaticon.woff2") format("woff2"), url("../fonts/Flaticon.woff") format("woff"), url("../fonts/Flaticon.ttf") format("truetype"), url("../fonts/Flaticon.svg#Flaticon") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: "Flaticon"; src: url("../fonts/Flaticon.svg#Flaticon") format("svg"); } } .fi:before { display: inline-block; font-family: "Flaticon"; font-style: normal; font-weight: normal; font-variant: normal; line-height: 1; text-decoration: inherit; text-rendering: optimizeLegibility; text-transform: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .flaticon-open-mouth:before { content: "\f100"; } .flaticon-teeth:before { content: "\f101"; } .flaticon-toothbrush:before { content: "\f102"; } .flaticon-teeth-1:before { content: "\f103"; } .flaticon-dentist-chair:before { content: "\f104"; } .flaticon-dentist:before { content: "\f105"; } .flaticon-implant:before { content: "\f106"; } .flaticon-tooth:before { content: "\f107"; } .flaticon-tooth-fairy:before { content: "\f108"; } .flaticon-braces:before { content: "\f109"; } .flaticon-tooth-1:before { content: "\f10a"; } .flaticon-dentist-chair-1:before { content: "\f10b"; } .flaticon-tooth-2:before { content: "\f10c"; } .flaticon-drilling:before { content: "\f10d"; } .flaticon-broken-tooth:before { content: "\f10e"; } .flaticon-tools:before { content: "\f10f"; } .flaticon-x-ray:before { content: "\f110"; } .flaticon-dental-veneer:before { content: "\f111"; } .flaticon-dentist-1:before { content: "\f112"; } .flaticon-dentures:before { content: "\f113"; } .flaticon-crown:before { content: "\f114"; } .flaticon-tooth-3:before { content: "\f115"; } .flaticon-calcium:before { content: "\f116"; } .flaticon-plaque:before { content: "\f117"; } .flaticon-tooth-4:before { content: "\f118"; } .flaticon-tooth-5:before { content: "\f119"; } .flaticon-tooth-drill:before { content: "\f11a"; } .flaticon-braces-1:before { content: "\f11b"; } .flaticon-teeth-brushing:before { content: "\f11c"; } .flaticon-suction:before { content: "\f11d"; } .flaticon-mouthwash:before { content: "\f11e"; } .flaticon-tooth-6:before { content: "\f11f"; } .flaticon-crown-1:before { content: "\f120"; } .flaticon-tooth-7:before { content: "\f121"; } .flaticon-health-report:before { content: "\f122"; } .flaticon-removal:before { content: "\f123"; } .flaticon-tooth-extraction:before { content: "\f124"; } .flaticon-tooth-8:before { content: "\f125"; } .flaticon-floss:before { content: "\f126"; } .flaticon-forceps:before { content: "\f127"; } .flaticon-smartphone:before { content: "\f128"; } .flaticon-tooth-9:before { content: "\f129"; } .flaticon-tooth-10:before { content: "\f12a"; } .flaticon-floss-1:before { content: "\f12b"; } .flaticon-magnifying-glass:before { content: "\f12c"; } .flaticon-tooth-11:before { content: "\f12d"; } .flaticon-braces-2:before { content: "\f12e"; } .flaticon-tooth-12:before { content: "\f12f"; } .panorama { position: relative; padding-top: 50.75%; height: 0; overflow: hidden; } .panorama iframe{ position: absolute; top:0; left:0; width: 100%; height: 92%; } .slick-track { margin-left: 0; } .appWhatsapp{ position: fixed; width:60px; height:60px; bottom:50px;/*110*/ right:15px;/*80 con el otro icono de messenger*/ background-color:#25d366; color:#FFF; border-radius:50px; text-align:center; font-size:30px; box-shadow: 2px 2px 3px #999; z-index:100; } .appFacebook{ position: fixed; width:55px; /*height:50px;*/ bottom:50px;/*39*/ right:13px; z-index:100; } .appFacebook img{ width: 100%; height: auto; } .appWhatsapp img{ width: 100%; height: auto; } .my-float{ margin-top:16px; } .subtitle{ color: #236fb6; font-size: 24px; } .subtitleinv { color: #236fb6; font-size: 24px; text-align: right; position: relative; left: auto; display: inline-flex; } .vineta{ color: #218d7b; font-size: 24px; line-height : 2px; } .vinetainv{ color: #218d7b; font-size: 24px; line-height : 2px; } .descriptionp{ font-size: 16px; color: #343840; text-align: left; line-height : 2px; } .desc-treatmentshome{ font-size: 14px; color: #343840; text-align: left; line-height : 2px; } h3.norm{ color: #236fb6; text-align: left; font-size: 24px; text-transform: capitalize; } h3.inv{ color: #236fb6; text-align: right; font-size: 24px; text-transform: capitalize; } h3.hometreatments{ font-family: "Ubuntu", sans-serif; font-size: 36px; font-weight: 300; line-height: 44px; color: #236fb6; text-transform: capitalize; } ul{ color: #218d7b; } span.vineta { color: #218d7b; } @media only screen and (max-width: 768px) { /* For mobile phones: */ span.vineta { float: left; line-height : 3px; } h3.inv{ color: #236fb6; text-align: right; font-size: 24px; text-align: left; } .descriptionp{ font-size: 16px; color: #343840; text-align: left; line-height : 15px; } .desc-treatmentshome{ font-size: 14px; color: #343840; text-align: left; line-height : 20px; } } @media only screen and (max-width: 991px) { span.vineta { float: left; line-height : 3px; } h3.inv{ color: #236fb6; text-align: right; font-size: 24px; text-align: left; } .descriptionp{ font-size: 16px; color: #343840; text-align: left; line-height : 15px; } .desc-treatmentshome{ font-size: 14px; color: #343840; text-align: left; line-height : 15px; } } @media only screen and (max-width: 575px) { html span.vineta { float: left; line-height : 3px; } h3.inv{ color: #236fb6; text-align: right; font-size: 24px; text-align: left; } .descriptionp{ font-size: 16px; color: #343840; text-align: left; line-height : 15px; } .desc-treatmentshome{ font-size: 14px; color: #343840; text-align: left; line-height : 15px; } } @media only screen and (max-width: 1199px){ .p-6 span.vineta { float: left; line-height : 3px; } h3.inv{ color: #236fb6; text-align: right; font-size: 24px; text-align: left; } .descriptionp{ font-size: 16px; color: #343840; text-align: left; line-height : 15px; } .desc-treatmentshome{ font-size: 14px; color: #343840; text-align: left; line-height : 15px; } }