html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } /* Remove margins for navigation lists */ nav ul, nav li { margin: 0; list-style: none; list-style-image: none; } small { font-size: 85%; } strong, th { font-weight: bold; } td { vertical-align: top; } textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ /* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css ; */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } .ie7 input[type="checkbox"] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } /* Webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea { margin: 0; } /***********************************************************************************************/ /* 01. GENERAL STYLING */ /***********************************************************************************************/ body { font-family: "Moderustic", sans-serif !important; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: #333; position: relative; text-rendering: optimizeLegibility; } img { max-width: 100%; } a { color: #555555; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a:hover, a:focus { color: #2393af; text-decoration: none; } blockquote { font: 'Lato', sans-serif; color: #646464; } h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 600; color: #333; line-height: 32px; margin: 0 0 16px 0; } h1 { font-size: 36px; } h2 { font-size: 24px; } h2 + p { margin-top: 12px; } h3 { font-size: 20px; } h3 + p { margin-top: 12px; } h4 { font-size: 18px; } h4 + p { margin-top: 12px; } h5 { font-size: 15px; } h6 { font-size: 15px; } * + p { margin-top: 12px; } p { font-style: normal; font-weight: 400; margin: 12px 0 12px; padding: 0; } ul, li { list-style-type: none; } input[type=text], input[type=password], input[type=submit], input[type=button], textarea { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } input[type=text]:focus, input[type=password]:focus, input[type=submit]:focus, input[type=button]:focus, textarea:focus { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } strong { font-weight: 600; } /*----- PULSE EFFECT. ----*/ @-webkit-keyframes pulse-effect { 0% { -webkit-box-shadow: 0 0 0 0 rgba(242, 87, 100, 0); } 20% { -webkit-box-shadow: 0 0 0 0 rgba(242, 87, 100, 0.3); } 50% { -webkit-box-shadow: 0 0 0 0 rgba(242, 87, 100, 0.5); } 80% { -webkit-box-shadow: 0 0 0 15px rgba(242, 87, 100, 0.3); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(242, 87, 100, 0); } } @keyframes pulse-effect { 0% { -moz-box-shadow: 0 0 0 5px rgba(242, 87, 100, 0); box-shadow: 0 0 0 5px rgba(242, 87, 100, 0); } 20% { -moz-box-shadow: 0 0 0 10px rgba(242, 87, 100, 0.3); box-shadow: 0 0 0 10px rgba(242, 87, 100, 0.3); } 50% { -moz-box-shadow: 0 0 0 15px rgba(242, 87, 100, 0.5); box-shadow: 0 0 0 15px rgba(242, 87, 100, 0.5); } 80% { -moz-box-shadow: 0 0 0 10px rgba(242, 87, 100, 0.3); box-shadow: 0 0 0 10px rgba(242, 87, 100, 0.3); } 100% { -moz-box-shadow: 0 0 0 5px rgba(242, 87, 100, 0); box-shadow: 0 0 0 5px rgba(242, 87, 100, 0); } } /*----- CUSTOM MARGIN ----*/ .no-margin { margin: 0px !important; } .margin-top-5 { margin-top: 5px; } .margin-top-12 { margin-top: 12px !important; } .margin-top-16 { margin-top: 16px !important; } .margin-top-24 { margin-top: 24px !important; } .margin-top-32 { margin-top: 32px !important; } .margin-top-36 { margin-top: 36px !important; } .margin-top-42 { margin-top: 42px !important; } .margin-top-48 { margin-top: 48px !important; } .margin-bottom-0 { margin-bottom: 0px !important; } .margin-bottom-5 { margin-bottom: 5px !important; } .margin-bottom-12 { margin-bottom: 12px !important; } .margin-bottom-24 { margin-bottom: 24px !important; } .margin-bottom-32 { margin-bottom: 32px !important; } .margin-bottom-48 { margin-bottom: 48px !important; } .margin-bottom-80 { margin-bottom: 80px; } .margin-right-0 { margin-right: 0px; } /*----- CUSTOM PADDING ----*/ .no-gutter [class^="col-"] { padding: 0px; } .no-padding { padding: 0px !important; } .padding-left-0 { padding-left: 0px; } .padding-right-0 { padding-right: 0px; } .padding-right-5 { padding-right: 5px; } .padding-right-11 { padding-right: 11px; } .padding-all-4 { padding: 4px; } /*----- PRE LOADER ----*/ #preloader { background: #ffffff; height: 100%; position: fixed; width: 100%; z-index: 9999; } #preloader span { left: 50%; margin-left: -15px; margin-top: -15px; position: absolute; top: 50%; } #backTop { width: 16px; height: 16px; padding: 10px; border-radius: 0px; text-indent: -9999px; cursor: pointer; z-index: 999999999; display: none; box-sizing: content-box; -webkit-box-sizing: content-box; opacity: 1; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } #backTop:hover { opacity: 1; } #backTop:after { position: absolute; content: '-'; width: 16px; height: 16px; text-align: center; top: 0; left: 0; color: #FFF; } #backTop.custom { background-color: #5ac4de; background-image: url('../images/uparr-48-b.png'); background-repeat: no-repeat; background-position: center center; background-size: cover; border: 0px solid #afe2ef; -webkit-transition: 0.2s 0.2s ease-in-out; -moz-transition: 0.2s 0.2s ease-in-out; -o-transition: 0.2s 0.2s ease-in-out; transition: 0.2s 0.2s ease-in-out; } #backTop.custom:hover { background-color: #ffffff; border: 0px solid #2393af; } .text-primary-color { color: #5ac4de !important; } .text-light-color { color: #FFFFFF !important; } .text-dark-color { color: #111111 !important; } .text-highlighter-white { font-weight: 500; } .text-bold { font-weight: bold !important; } .text-capitalize { text-transform: capitalize !important; } .text-highlighter { color: #5ac4de; } .text-highlighter-white { color: #FFFFFF; } .alert, .progress, .pre { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } hr { margin: 0px; border: 0px; height: 1px; background: #f2f2f2; } .no-border { border: 0px !important; } .inline li { display: inline-block; margin-right: 24px; } .inline li:last-child { margin-right: 0; } .narrow-p { margin: 0 auto 1.5em; width: 30%; } .fr { float: right; } .fl { float: left; } .cb { clear: both; } .db { display: block; } .overflow-hidden { overflow: hidden; } span.border-light-dotted { border-bottom: 1px dotted #5ac4de; } span.border-bold-dashed { border-bottom: 2px dashed #5ac4de; } /*----- BLOCKQUOTE ----*/ blockquote { padding: 12px 26px 26px 42px; margin: 0 0 20px; font-size: 14px; font-family: 'Lato', sans-serif; background: #FFFFFF; position: relative; border: 1px solid #CCCCCC; border-left: 4px solid #4d4d4d; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } blockquote:before { display: block; position: absolute; left: 12px; top: 14px; content: "\f10d"; font-family: 'FontAwesome'; font-size: 15px; color: #d6d6d6; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } blockquote p { font-size: 14px; line-height: 24px; } blockquote:hover { border: 1px solid #a6a6a6; border-left: 4px solid #4d4d4d; } blockquote.testimonial { background: #FFFFFF; border-top: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; margin-bottom: 0; } cite { text-align: right; display: block; } cite:before { margin-right: 4px; } .bq-author { padding: 16px 0 0 110px; position: relative; } .bq-author:before { content: ""; display: block; position: absolute; top: -1px; left: 69px; width: 0; height: 0; border-left: 22px solid transparent; border-right: 0 solid transparent; border-top: 22px solid #dcdcdc; z-index: 2; } .bq-author:after { content: ""; display: block; position: absolute; top: -1px; left: 70px; width: 0; height: 0; border-left: 20px solid transparent; border-right: 0 solid transparent; border-top: 20px solid #fff; z-index: 3; } .bq-author h6 { margin-bottom: 6px; } .bq-author .bq-author-info { font-size: 12px; } /*----- ORDERED/UNORDERED LISTS ----*/ ol { clear: both; } ol li { padding: 0; margin: 0 0 10px 25px; list-style-type: decimal; } /*----- ACCORDION ----*/ .accordion .panel { margin-bottom: 3px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } .accordion .panel .panel-title a { display: block; } span.label { margin-right: 1px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; font-size: 100%; } /*----- BUTTONS ----*/ #btn, .btn { text-align: center; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } #btn:hover, .btn:hover { color: #000000; } .btn-custom { text-transform: uppercase; text-align: center; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; border: 1px solid #CCCCCC; background: #5ac4de; color: #FFFFFF; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; padding: 12px 14px; } .btn-custom:hover { border-color: #a6a6a6; color: #5ac4de; background: #FFFFFF; } .btn-service { font-size: 14px; text-transform: uppercase; text-align: center; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; border: 0px solid #CCCCCC; background: #5ac4de; color: #FFFFFF; -webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; margin: 12px 0; padding: 16px 24px; letter-spacing: 0.1em; font-weight: 600; } .btn-service:hover { color: #FFFFFF; background: #45bcda; } .btn-custom-inverse { text-align: center; border: 1px solid #CCCCCC; color: #5ac4de; background: #FFFFFF; padding: 12px 14px; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .btn-custom-inverse:hover { background: #5ac4de; color: #FFFFFF; } a.btn-load-more { margin-bottom: -36px; margin-top: 48px; background: transparent; color: #5ac4de; background: #FFFFFF; border: 1px solid #5ac4de; padding: 12px 24px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } a.btn-load-more:hover { color: #FFFFFF; background: #5ac4de; border: 1px solid #5ac4de; } .btn-theme { border: 0px solid transparent; background: #5ac4de; color: #FFFFFF; display: inline-block; font-size: 16px; line-height: 32px; font-weight: 600; padding: 14px 32px; position: relative; text-transform: uppercase; -webkit-transition: 'all' '0.5s' ease-in-out; -moz-transition: 'all' '0.5s' ease-in-out; -o-transition: 'all' '0.5s' ease-in-out; transition: 'all' '0.5s' ease-in-out; margin-bottom: 0; letter-spacing: 0em; overflow: hidden; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .btn-success { border: 0px solid transparent; background: rgb(4, 160, 1); color: #FFFFFF; display: inline-block; font-size: 16px; line-height: 32px; font-weight: 600; padding: 14px 32px; position: relative; text-transform: uppercase; -webkit-transition: 'all' '0.5s' ease-in-out; -moz-transition: 'all' '0.5s' ease-in-out; -o-transition: 'all' '0.5s' ease-in-out; transition: 'all' '0.5s' ease-in-out; margin-bottom: 0; letter-spacing: 0em; overflow: hidden; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .btn-theme:hover { border: 0px solid transparent; color: #FFFFFF; background: #f47912; } .btn-success:hover { border: 0px solid transparent; color: #FFFFFF; background: #5ac4de; } .btn-header-cta { background: transparent; padding: 7px 12px; color: #111111; border: 2px solid #5ac4de; line-height: 32px !important; } .btn-header-cta:hover { color: #5ac4de; background: transparent; border: 2px solid #5ac4de; } /*End BTN Style*/ .btn-theme-invert { color: #FFFFFF; background: #f47912; } .btn-theme-invert:hover { background: #994a07; color: #FFFFFF; } .btn-theme-white { color: #5ac4de; background: #FFFFFF; } .btn-theme-white:hover { background: #5ac4de; color: #FFFFFF; } .btn-capitalize { text-transform: capitalize !important; } a.btn-about { font-size: 16px; margin-top: 16px; background: #5ac4de; border: 2px solid #5ac4de; color: #FFFFFF; height: 42px; line-height: 24px; padding-left: 12px; padding-right: 12px; letter-spacing: 0.03em; font-weight: 600; text-align: left; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } a.btn-about:hover { background: #30b5d6; border: 2px solid #5ac4de; color: #FFFFFF; } .button { display: inline-block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; color: white; font-weight: bold; height: 3em; line-height: 1em; padding: 1em; } .small-button { display: inline-block; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; color: #000000; font-weight: bold; height: 0; line-height: 0; padding: 1em 1em; margin: 6px 0; width: 100%; } /*----- THEME CUSTOM TEXT SHADOW ----*/ .theme-custom-text-shadow { -webkit-text-shadow: 1px 1px 1px #666666 !important; text-shadow: 1px 1px 1px #666666 !important; } .theme-custom-no-text-shadow { -webkit-text-shadow: 0px 0px 0px #666666 !important; text-shadow: 0px 0px 0px #666666 !important; } /*----- THEME CUSTOM TEXT BACKGROUND ----*/ .theme-custom-text-background { background: rgba(93, 156, 236, 0.7); padding: 7px 15px; } /*----- BOX SHADOW----*/ .theme-custom-box-shadow { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; border: 0px solid transparent; box-shadow: 0 0px 7px 7px rgba(0, 0, 0, 0.03); } .theme-custom-box-shadow:hover { border: 0px solid transparent; box-shadow: 0 0px 7px 10px rgba(0, 0, 0, 0.03); } .theme-custom-no-box-shadow { box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.03) !important; } .theme-custom-box-animation { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; position: relative; top: 0; } .theme-custom-box-animation:hover { top: -5px; } /*----- BUTTONS ----*/ .btn-cta { background: #2C2C2C; color: #FFFFFF; display: inline-block; font-size: 16px; line-height: 36px; font-weight: 600; padding: 12px 42px; position: relative; transition: all 0.3s ease-out 0s; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .btn-cta:hover { color: #FFFFFF; background-color: #5ac4de; } .btn-square { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .btn-rounded { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .btn-small { padding: 8px 24px; font-size: 14px; } .btn-transparent { background: rgba(0, 0, 0, 0.2); color: #2C2C2C; } .btn-bordered { border: 1px solid #2C2C2C; } .btn-bordered:hover { border: 1px solid #5ac4de; } .btn-invert { color: #FFFFFF; background-color: #f47912; } .btn-invert:hover { background: #FAFAFA; color: #111111; } .btn-appointment-submit { background: #5ac4de; border: 2px solid #5ac4de; color: #FFFFFF; display: inline-block; font-weight: 400; padding: 12px 32px; position: relative; text-transform: uppercase; transition: all 0.3s ease-out 0s; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .btn-appointment-submit:focus, .btn-appointment-submit:hover { background-color: #30b5d6; color: #FFFFFF; } /*----- COMMENT BUTTON ----*/ #comment_btn { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; text-align: center; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; border: 1px solid #CCCCCC; -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); background: transparent; color: #646464; padding: 6px 12px; } #comment_btn:hover { border: 1px solid #5ac4de; color: #5ac4de; background: transparent; } #contact-form .p-errors label { color: lightcoral; } #contact-form .p-errors input[type="text"], #contact-form .p-errors input[type="email"], #contact-form .p-errors textarea { border-color: lightcoral; } .wp-caption { text-align: center; } .wp-caption .wp-caption-text { margin-bottom: 0px; font-size: 12px; font-style: italic; line-height: 34px; } .sticky { margin-bottom: 21px; background: #FFFFFF; } /*------------------------------ Gallery Caption ---------------------------------*/ /*------------------------------ By Post Author ---------------------------------*/ /***********************************************************************************************/ /* 02. HEADER */ /***********************************************************************************************/ .main-header { height: auto; left: 0; position: relative; top: 0; width: 100%; z-index: 1000; } .main-header .sticky-wrapper { background: #ffffff; } .main-header .navgiation-wrapper { background: #ffffff; } /*----- TOP BAR ----*/ .top-bar { overflow: hidden; background: #0166b7; line-height: 48px; color: #FFFFFF; font-size: 16px; } .top-bar i { color: #FFFFFF; margin-right: 5px; display: inline-block; } .top-bar a { color: #FFFFFF; } .top-bar.light-layout { background: #FAFAFA; border-bottom: 1px solid #f2f2f2; color: #111111; } .top-bar.light-layout a, .top-bar.light-layout a i.fa { color: #111111; } .top-bar.light-layout a.free-estimate { color: #FFFFFF; } ul.top-bar-info { list-style: none; padding: 0; margin: 0; } ul.top-bar-info .top-bar-dot { width: 6px; height: 6px; background: #5ac4de; display: inline-block; margin-right: 12px; position: relative; top: -1px; } ul.top-bar-info li { margin-right: 6px; display: inline; } ul.top-bar-info li:last-child { margin-right: 0px; } a.free-estimate { font-size: 14px; padding: 0; display: block; text-align: center; color: #FFFFFF; font-weight: 600; background: #5ac4de; border: 0px solid transparent; letter-spacing: 1px; } a.free-estimate:hover { background: #45bcda; border: 0px solid transparent; } .top-bar-social { color: #FFFFFF; border: 0px solid #FFF; letter-spacing: 1px; text-transform: uppercase; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .top-bar-social a { display: inline-block; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .top-bar-social a i.fa { width: 24px; height: 24px; text-align: center; color: #FFFFFF; line-height: 24px; font-size: 14px; position: relative; top: -2px; } .top-bar-social a:hover i.fa { color: #5ac4de; } .top-bar-social.square-layout a i { background: #5ac4de; color: #FFFFFF !important; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .top-bar-social.square-layout a:hover i.fa { color: #111111 !important; } .top-bar-social.semi-rounded-layout a i { background: #5ac4de; color: #FFFFFF !important; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .top-bar-social.semi-rounded-layout a:hover i.fa { color: #111111 !important; } .top-bar-social.rounded-layout a i { background: #5ac4de; color: #FFFFFF !important; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .top-bar-social.rounded-layout a:hover i.fa { color: #111111 !important; } .sticky-header { height: auto; left: 0; position: relative; top: 0; width: 100%; z-index: 1000; } .sticky-header .top-bar { background: #111111; } .sticky-header .navgiation-wrapper { background: rgba(255, 255, 255, 0.97); } .sticky-header .sticky-wrapper { background: transparent !important; } .logo { margin-top: 32px; margin-bottom: 0; } /***********************************************************************************************/ /* 03. MAIN NAVIGATION MENU */ /***********************************************************************************************/ a.logo { margin-top: 0px; display: inline-block; } a.logo img { display: block; } .navbar-default { border: none; background: transparent; margin-bottom: 0px; padding: 0 !important; } .navbar-default .navbar-nav { margin-top: 23px; } .navbar-default .navbar-nav > li { margin-left: 12px; } .navbar-default .navbar-nav > li > a { color: #000; font-size: 14px; letter-spacing: 0.05em; font-weight: 600; text-transform: uppercase; padding-bottom: 22px; line-height: 32px; color: #4a4a4a; } .navbar-default .navbar-nav > li > a:hover { color: #5ac4de; } .navbar-default .navbar-nav li.drop { position: relative; } .navbar-default .navbar-nav li.drop a:after { content: ""; /*----- Change Here----*/ font-family: fontawesome; position: absolute; right: -3px; top: 15px; font-weight: normal; } .navbar-default .navbar-nav li ul.drop-down { margin: 0; padding: 0; position: absolute; top: 80px; left: 0; width: 190px; visibility: hidden; opacity: 0; z-index: 3; text-align: left; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .navbar-default .navbar-nav li ul.drop-down li { list-style: none; display: block; margin: 0; } .navbar-default .navbar-nav li ul.drop-down li ul.drop-down.level3 { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); top: 0px; left: 100%; border-bottom: none; } .navbar-default .navbar-nav li ul.drop-down li ul.drop-down.level3 a:after { content: ''; } .navbar-default .navbar-nav li ul.drop-down li a { font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0.1em; display: inline-block; text-decoration: none; display: block; color: #4a4a4a; padding: 12px 20px; text-transform: uppercase; background: #f7f7f7; margin: 0; border: none; } .navbar-default .navbar-nav li ul.drop-down li a:after { content: ''; font-family: FontAwesome; position: absolute; right: 12px; } .navbar-default .navbar-nav li ul.drop-down li a:hover { background: #5ac4de; color: #FFFFFF; } .navbar-default .navbar-nav li ul.drop-down li.drop a { display: inline-block; text-decoration: none; display: block; color: #4a4a4a; font-size: 13px; font-weight: 400; letter-spacing: 0.1em; padding: 12px 20px; text-transform: uppercase; margin: 0; border: none; } .navbar-default .navbar-nav li ul.drop-down li.drop a:after { content: ''; /*----- Change Here----*/ font-family: FontAwesome; position: absolute; right: 12px; } .navbar-default .navbar-nav li ul.drop-down li.drop a:hover { color: #FFFFFF; } .navbar-default .navbar-nav li ul.drop-down li:hover ul.drop-down.level3 { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } .navbar-default .navbar-nav li ul.drop-down li:hover ul.drop-down.level3 a:after { content: ''; } .navbar-default .navbar-nav li ul.drop-down li:last-child { border-bottom: none; } .navbar-default .navbar-nav li:hover > ul.drop-down { visibility: visible; opacity: 1; top: 69px; } header.one-page .navbar-nav > li { margin-left: 0; } header.one-page .navbar-nav > li > a span { color: #5ac4de; } a.nav-btn-highlight { position: relative; top: 6px; color: #646464; border: 2px solid #5ac4de; padding: 6px 18px !important; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } a.nav-btn-highlight:hover { background: #5ac4de; color: #FFFFFF; } .stuck { position: fixed; top: 0; left: 0px; right: 0px; z-index: 99; opacity: 1; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; background: rgba(0, 0, 0, 0.8); border-bottom: 1px solid #ebebeb; width: 100%; padding: 0px; margin: 0 !important; -webkit-box-shadow: 0px 0px 5px 10px rgba(0, 0, 0, 0.03); -moz-box-shadow: 0px 0px 5px 10px rgba(0, 0, 0, 0.03); box-shadow: 0px 0px 5px 10px rgba(0, 0, 0, 0.03); } .menu-container { border: 5px solid rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.8); margin-top: 20px; padding: 0px 20px; } .menu-container .navbar-nav li ul.drop-down { top: 66px; } /*----- HEADER STYLE 02 ----*/ .main-header-2 { clear: both;/*----- MAIN HEADER ----*/ /*----- SITE LOGO ----*/ /*----- HEADER TOC ----*/ /*----- COMPACT ----*/ /*----- STICKY TOP MENU ----*/ /*----- Navbar Social icon ----*/ } .main-header-2 .main-header { height: auto; width: 100%; } .main-header-2 .main-header .sticky-wrapper { background: rgba(0, 0, 0, 0); } .main-header-2 .main-header .navgiation-wrapper { background: #FFFFFF; } .main-header-2 .main-header .top-bar { background: rgba(0, 0, 0, 0.7); line-height: 38px; color: #FFFFFF; font-size: 14px; } .main-header-2 .main-header .top-bar i { color: #5ac4de; margin-right: 5px; display: inline-block; } .main-header-2 .main-header .top-bar a { color: #FFFFFF; } .main-header-2 .main-header .top-phone-no { display: inline-block; margin-right: 12px; } .main-header-2 .main-header .top-email-info { display: inline-block; } .main-header-2 .main-header .top-location-info { margin-right: 12px; } .main-header-2 .main-top-header { border-bottom: 1px solid #EEEEEE; background: #FFFFFF; color: #111111; line-height: 38px; } .main-header-2 .main-top-header p { font-size: 16px; letter-spacing: 0.03em; line-height: 42px; margin-bottom: 0; padding-bottom: 0; } .main-header-2 .top-bar-social { position: relative; overflow: hidden; margin-top: 4px; } .main-header-2 .top-bar-social a { display: inline-block; transition: all 0.3s ease-out 0s; border-radius: 0; font-size: 14px; margin-right: 16px; height: 24px; line-height: 24px; text-align: center; background: transparent; width: 24px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .main-header-2 .top-bar-social a i.fa { color: #111111; } .main-header-2 .top-bar-social a:hover i.fa { color: #5ac4de; } .main-header-2 .top-bar-social a:last-child { margin-right: 0; } .main-header-2 .top-bar-link { line-height: 48px; font-size: 14px; } .main-header-2 .top-bar-link .separator-line { display: inline-block; width: 2px; height: 8px; margin: 0 6px; background: #5ac4de; } .main-header-2 .top-bar-link a { color: #111111; } .main-header-2 .top-bar-link a:hover { color: #5ac4de; } .main-header-2 .header-container { border-bottom: 0px solid #EEEEEE; padding-bottom: 0px; box-shadow: 0px 0px 2px -4px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .main-header-2 .header-top { padding-bottom: 12px; } .main-header-2 .header-top .header-col-logo { position: relative; } .main-header-2 .header-top .header-col-logo .header-logo { line-height: 100px; } .main-header-2 .header-top .header-col-logo .header-logo img { vertical-align: middle !important; } .main-header-2 .header-top .header-col-logo .header-logo a { display: block; position: relative; top: 6px; } .main-header-2 .header-top .header-icon-box { line-height: 19px; margin-top: 15px; padding-left: 52px; position: relative; margin-top: 38px; } .main-header-2 .header-top .header-icon-box .icon-container { color: #5ac4de; font-size: 18px; width: 40px; height: 40px; line-height: 36px; border: 1px dotted #CCCCCC; left: 0px; top: 4px; text-align: center; position: absolute; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .main-header-2 .header-top .header-icon-box .icon-container i { display: inline-block; } .main-header-2 .header-top .header-icon-box .text .head-heading { font-size: 16px; line-height: 24px; text-transform: uppercase; font-weight: 700; display: block; color: #444444; letter-spacing: 0em; } .main-header-2 .header-top .header-icon-box .text .head-content { font-size: 14px; font-weight: 500; line-height: 18px; color: #777777; letter-spacing: 0em; } .main-header-2 .logo { margin-top: 32px; margin-bottom: 12px; display: inline-block; } .main-header-2 .logo a { display: inline; } .main-header-2 .logo a img { display: block; } .main-header-2 .navbar-default { border: none; border-top: 1px solid #EEEEEE; background: #FAFAFA; margin-bottom: 0px; border-radius: 0; } .main-header-2 .navbar-default .navbar-collapse { padding: 0px; } .main-header-2 .navbar-default .navbar-nav { margin-top: 4px; margin-bottom: 3px; } .main-header-2 .navbar-default .navbar-nav > li { margin-left: 0px; margin-right: 5px; } .main-header-2 .navbar-default .navbar-nav > li:last-child { margin-right: 0; } .main-header-2 .navbar-default .navbar-nav > li > a { color: #111111; font-size: 14px; font-weight: 600; padding: 10px 22px; text-transform: uppercase; } .main-header-2 .navbar-default .navbar-nav > li > a.link-active { color: #FFFFFF; background: #5ac4de; } .main-header-2 .navbar-default .navbar-nav > li > a:hover { color: #EEEEEE; background: #5ac4de; } .main-header-2 .navbar-default .navbar-nav > li > a:focus { color: #EEEEEE; background: #5ac4de; } .main-header-2 .navbar-default .navbar-nav li.drop { position: relative; } .main-header-2 .navbar-default .navbar-nav li ul.drop-down { margin: 0; padding: 0; position: absolute; top: 75px; left: 0; width: 200px; visibility: hidden; opacity: 0; z-index: 3; text-align: left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .main-header-2 .navbar-default .navbar-nav li ul.drop-down li { list-style: none; display: block; margin: 0; } .main-header-2 .navbar-default .navbar-nav li ul.drop-down li ul.drop-down.level3 { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); top: 0px; left: 100%; border-bottom: none; } .main-header-2 .navbar-default .navbar-nav li ul.drop-down li ul.drop-down.level3:before { display: none; } .main-header-2 .navbar-default .navbar-nav li ul.drop-down li a { display: inline-block; text-decoration: none; display: block; color: #FFFFFF; font-size: 13px; padding: 12px 20px; text-transform: uppercase; font-weight: 500; background: #2C2C2C; margin: 0; border: none; } .main-header-2 .navbar-default .navbar-nav li ul.drop-down li a:hover { background: #1f1f1f; color: #FFFFFF; } .main-header-2 .navbar-default .navbar-nav li ul.drop-down li:hover ul.drop-down.level3 { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } .main-header-2 .navbar-default .navbar-nav li ul.drop-down li:last-child { border-bottom: none; } .main-header-2 .navbar-default .navbar-nav li:hover > ul.drop-down { visibility: visible; opacity: 1; top: 52px; } .main-header-2 header.one-page .navbar-nav > li { margin-left: 0; } .main-header-2 header.one-page .navbar-nav > li > a span { color: #5ac4de; } .main-header-2.compact .navbar-default { border: 0px; background: transparent; margin: 32px auto 0 auto; } .main-header-2 .navbar-contact .contact-support { margin: 16px 0; font-size: 18px; font-weight: 700; color: #FFFFFF; display: inline-block; } .main-header-2 .navbar-contact .contact-support i.fa { color: #5ac4de; font-size: 24px; margin-right: 6px; position: relative; top: 3px; } /***********************************************************************************************/ /* 04. HOME PAGE */ /***********************************************************************************************/ .banner-style{ background-image:url('../images/new-bg1.webp'); position:relative; height:100vh; width:100%; background-size:cover; background-repeat:no-repeat; } .banner-shadow{ position:absolute; height:100vh; width:100%; left:0px; background-color:rgba(0, 0, 0, 0.3); } .banner-text-box{ position: absolute; top: 10%; transform: translateY(-55%); width:100%; } .banner-text-box h1{ font-size: 72px; line-height: 72px; font-weight: 800; margin: 0px 0 0; color: #FFFFFF; text-shadow: 1px 1px 1px #666666; letter-spacing:-0.03em; } .mobile-form{ display:none; } .section-content-block { padding: 90px 0 100px 0; background: #FFFFFF; } .section-content-block-minimal { padding: 50px 0 50px 0; } .section-pure-white-bg { background: #FFFFFF !important; } .section-pure-black-bg { background: #111111 !important; } .section-secondary-bg { background: #EDF0F2 !important; } .section-primary-bg { background: #0166b7 !important; } .section-curve-secondary-overlary { position: relative; padding: 100px 0 122px 0; } .section-curve-secondary-overlary:after { position: absolute; left: 0; bottom: -1px; width: 100%; height: 22px; content: ""; background-repeat: repeat-x; background-position: center; background-image: url(../images/curve_secondary.png); } .section-curve-white-overlary { position: relative; padding: 100px 0 122px 0; } .section-curve-white-overlary:after { position: absolute; left: 0; bottom: -1px; width: 100%; height: 22px; content: ""; background-repeat: repeat-x; background-position: center; background-image: url(../images/curve_white.png); } .section-curve-primary-overlary { position: relative; padding: 100px 0 122px 0; } .section-curve-primary-overlary:after { position: absolute; left: 0; bottom: -1px; width: 100%; height: 22px; content: ""; background-repeat: repeat-x; background-position: center; background-image: url(../images/curve_primary.png); } .block-primary-bg { background: #5ac4de !important; } .block-secondary-bg { background: #EDF0F2 !important; } .block-white-bg { background: #FFFFFF !important; } .block-black-bg { background: #111111 !important; } .border-bottom-1p-solid-light { border-bottom: 1px solid #EEEEEE; } .block-heading-title { font-size: 32px; line-height: 36px; margin-bottom: 36px; position: relative; } .block-heading-title:before { position: absolute; content: ''; width: 48px; height: 2px; bottom: -22px; left: 0; background: #5ac4de; } .section-heading-wrapper { margin-bottom: 32px; } .section-heading-wrapper h4 { font-size: 22px; line-height: 24px; margin-bottom: 0px; color: #7b7b7b; } .section-heading-wrapper h2 { font-size: 48px; font-weight: 800; letter-spacing: 0; line-height: 48px; position: relative; } .section-heading-wrapper h2.heading-alt-style, .section-heading-wrapper h4.heading-alt-style { font-size: 36px; line-height: 42px; } .section-heading-wrapper h2.subheading-alt-style, .section-heading-wrapper h4.subheading-alt-style { font-weight: 400; font-size: 18px; line-height: 24px; } .section-heading-wrapper span.heading-separator { display: inline-block; width: 2px; height: 16px; background: #5ac4de; margin-top: 8px; } .section-heading-wrapper span.heading-separator-horizontal { width: 48px; height: 4px; background: transparent; border-top: 1px solid #5ac4de; border-bottom: 1px solid #5ac4de; margin-top: 0px; position: relative; top: -3px; } .section-heading-wrapper-alt { margin-bottom: 42px; } .section-heading-wrapper-alt h4 { font-size: 22px; line-height: 24px; margin-bottom: 0px; color: #5ac4de; } .section-heading-wrapper-alt h2 { font-size: 48px; font-weight: 800; letter-spacing: 0; line-height: 48px; position: relative; color: #FFFFFF; } .section-heading-wrapper-alt span.heading-separator { display: inline-block; width: 2px; height: 16px; background: #5ac4de; margin-top: 8px; } .section-heading-wrapper-alt span.heading-separator-horizontal { width: 48px; height: 2px; margin-top: 0px; position: relative; top: -3px; } /***********************************************************************************************/ /* 05. TEMPLATE ELEMENTS */ /***********************************************************************************************/ /*----- 05.1 SLIDER ----*/ .slider-wrap { clear: both; } #slider_1 { text-align: center; } #slider_1 .item img { display: block; width: 100%; height: auto; } #slider_1 .slider_item_container { position: relative; text-align: center; width: 100%; min-height: 800px; background-repeat: no-repeat; background-size: cover; background: #000000; } #slider_1 .slider-content { position: absolute; top: 50%; transform: translateY(-55%); width: 100%; } .yishun-left p { margin: 0 0 20px; } #slider_1 .slider-content h2, #slider_1 .slider-content h1 { font-size: 72px; line-height: 72px; font-weight: 800; margin: 0px 0 0; color: #FFFFFF; text-shadow: 1px 1px 1px #666666; letter-spacing: -0.03em; } #slider_1 .slider-content h2 span { color: #5ac4de; background: none; padding: 0px; text-shadow: 1px 1px 1px #666666; } #slider_1 .slider-content h3 { font-weight: 400; font-size: 24px; line-height: 28px; letter-spacing: 0em; margin: 16px 0; color: #FFFFFF; } #slider_1 .slider-content a.btn + a.btn { margin-left: 16px; } #slider_1 .slider-content a.btn-slider { font-size: 16px; margin-top: 36px; background: #5ac4de; border: 0px solid #5ac4de; color: #FFFFFF; line-height: 48px; padding-left: 42px; padding-right: 42px; font-weight: 600; text-align: left; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } #slider_1 .slider-content a.btn-slider:hover { background: #f47912; border: 0px solid #5ac4de; color: #FFFFFF; } #slider_1 .owl-nav { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 0; margin: 0; z-index: 1; } #slider_1 .owl-nav [class*="owl-"] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #d6d6d6; display: inline-block; cursor: pointer; border-radius: 3px; } #slider_1 .owl-nav .owl-prev { left: 3%; position: absolute; padding: 0; top: 50%; width: 42px; font-size: 60px; color: #FFFFFF; background: transparent; margin-top: -42px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: center; } #slider_1 .owl-nav .owl-prev:hover { color: #5ac4de; } #slider_1 .owl-nav .owl-next { right: 3%; position: absolute; padding: 0; top: 50%; width: 42px; font-size: 60px; color: #FFFFFF; background: transparent; margin-top: -42px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: center; } #slider_1 .owl-nav .owl-next:hover { color: #5ac4de; } #slider_1 .owl-dots { margin: 0; position: absolute; bottom: 24px; left: 50%; margin-left: -50px; width: 100px; text-align: center; } #slider_1 .owl-dots .owl-dot { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; display: inline-block; padding: 2px; width: 16px; height: 8px; background: #FAFAFA; margin: 0 4px; } #slider_1 .owl-dots .owl-dot span { display: none; } #slider_1 .owl-dots .active { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; width: 24px; background: #5ac4de; } #slider_1 .owl-dots .active span { display: none; } #slider_1:hover .owl-nav { opacity: 1; } #slider_1:hover .owl-nav .owl-prev { left: 0%; } #slider_1:hover .owl-nav .owl-next { right: 0%; } .slide-bg { height: 100%; width: 100%; background-size: cover; position: absolute; left: 0; top: 0; background-position: center center; background-origin: initial; background-repeat: no-repeat; -webkit-transition: all 5s ease-in-out; -moz-transition: all 5s ease-in-out; -o-transition: all 5s ease-in-out; transition: all 5s ease-in-out; transform: rotate(0deg) scale(1); } .slidezoom { transform: rotateY(2deg) scale(1.1); } .owl-carousel .owl-item { overflow: hidden !important; } /*----- 05.2 STATIC BANNER ----*/ .section-banner { padding: 200px 0px 200px; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; overflow: hidden; } .banner-content { width: 100%; } .banner-content h2 { letter-spacing: -0.03em; position: relative; font-size: 72px; line-height: 72px; font-weight: 800; color: #FFFFFF; text-shadow: 1px 1px 1px #666666; } .banner-content h2 span { padding: 0; color: #9adbeb; font-weight: 800; } .banner-content h3 { font-family: 'Lato', sans-serif; color: #FFFFFF; font-weight: 400; font-size: 24px; line-height: 32px; } .banner-content .slider-button { display: block; margin-top: 30px; } .banner-content .slider-button a.btn-slider { font-size: 16px; display: inline-block; background: #5ac4de; border: 2px solid #5ac4de; color: #FFFFFF; line-height: 42px; padding: 6px 24px; text-transform: uppercase; font-weight: 600; text-align: center; letter-spacing: 0em; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .banner-content .slider-button a.btn-slider:hover { background: #30b5d6; } /*----- 05.3 ABOUT US LAYOUTS ----*/ .our-experience { color: #555555; font-size: 32px; font-weight: 700; line-height: 36px; margin-bottom: 24px; margin-top: 0; padding-right: 18px; } .our-experience span { display: inline; color: #5ac4de; } .about-us-intro { margin-top: 0px; font-size: 20px; line-height: 28px; } .about-us-img { position: relative; overflow: hidden; } .about-us-img i.fa { position: absolute; top: 0; left: 0; width: 48px; height: 48px; line-height: 48px; text-align: center; font-weight: 24px; display: inline-block; background: #FFFFFF; color: #111111; top: 50%; left: 50%; margin-top: -24px; margin-left: -24px; } /*----- 05.3.1 ABOUT US LAYOUT 02 ----*/ .about-us-full-width { background: #EDF0F2; padding: 0; } .about-featured-image-block { background: transparent; background-image: none; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-size: auto auto; background-image: url('../images/about_us_bg.html'); background-repeat: no-repeat; background-position: center right; background-size: cover; height: 720px; } .about-us-info-block { padding: 52px 0 52px 52px; } .about-us-info { margin-top: 42px; margin-bottom: 60px; } .about-us-bg { background-image: url("../images/about_us_bg.html"); background-repeat: no-repeat; background-position: left top; background-size: contain; position: relative; overflow: hidden; background-color: #e0e6eb; } .section-about-us { clear: both; } .about-us-slogan { font-size: 28px; letter-spacing: 0.03em; line-height: 42px; margin-bottom: 48px; position: relative; } .about-us-slogan:after { content: ""; height: 3px; left: 0; background: #5ac4de; position: absolute; bottom: -24px; width: 72px; } .about-us-slogan-bold { font-weight: 800; font-size: 48px; line-height: 52px; letter-spacing: -0.03em; } .about-us-slogan-bold span { font-weight: 500; font-size: 24px; } .about-us-slogan-alt { font-size: 28px; letter-spacing: 0.03em; line-height: 42px; margin-bottom: 32px; } /*------------------------------ NEW ABOUT LAYOUT---------------------------------*/ .section-feat-about-us { position: relative; padding: 0; } .feat-img-side-bg { left: 0; padding: 0; position: absolute !important; top: 0px; height: 100%; overflow: hidden; z-index: 1; } .feat-img-side-bg.img { position: absolute; top: -30px; left: 0; max-width: 100%; } .service-lists { position: relative; float: left; display: block; padding-top: 24px; clear: both; } .service-lists.custom-service { background: #EEEEEE; padding-left: 24px; } .service-lists.custom-service:before { top: 0; right: 0; content: ''; width: 100px; height: 100px; background: yellow; } .service-lists li { width: 50%; float: left; margin: 16px 0; } .service-lists li .service-item { padding-left: 84px; position: relative; } .service-lists li .service-icon { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; background: #FFFFFF; color: #5ac4de; border: 2px solid #CCCCCC; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; line-height: 54px; left: 0px; position: absolute; top: 8px; width: 60px; text-align: center; font-size: 24px; } .service-lists li .service-icon:hover { color: #f47912; background: #fafafa; border-color: #5ac4de; } .service-lists li .service-text { position: relative; } .service-lists li .service-text span { position: relative; display: block; padding-top: 6px; margin-bottom: 16px; font-size: 24px; font-weight: 600; } .service-lists li .service-text span:after { position: absolute; bottom: -12px; left: 0; width: 32px; height: 1px; background: #CCCCCC; content: ''; } .service-lists li .service-text p { color: #a4a4a4; } .about-us-img img { display: block; } .about-us-layout-2 { display: block; padding: 12px 0px 0px; } .about-us-layout-2 .about-us-img-2 { overflow: hidden; position: relative; } .about-us-layout-2 .about-us-img-2:before { position: absolute; content: ''; width: 100%; height: 3000px; background: rgba(0, 0, 0, 0.2); top: 0; left: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .about-us-layout-2 .about-us-img-2:after { color: #2b2b2b; position: absolute; font-family: FontAwesome; content: '\f04b'; width: 80px; height: 80px; line-height: 80px; font-size: 40px; top: 50%; left: 50%; margin-left: -40px; margin-top: -40px; background: rgba(255, 255, 255, 0.7); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; text-align: center; text-indent: 5px; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.6); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .about-us-layout-2 .about-us-img-2 img { display: block; width: 100%; } .about-us-layout-2 .about-us-img-2:hover:before { position: absolute; content: ''; width: 100%; height: 3000px; background: rgba(0, 0, 0, 0.1); top: 0; left: 0; } .about-us-layout-2 .about-us-img-2:hover:after { color: #111111; background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 6px rgba(237, 19, 93, 0.7); } .full-width-video-box { display: block; margin: 24px 0 48px 0; padding: 0px; } .full-width-video-box .video-box-img-container { overflow: hidden; position: relative; } .full-width-video-box .video-box-img-container:before { position: absolute; content: ''; width: 100%; height: 3000px; background: rgba(0, 0, 0, 0.2); top: 0; left: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .full-width-video-box .video-box-img-container:after { color: #2b2b2b; position: absolute; font-family: FontAwesome; content: '\f04b'; width: 110px; height: 110px; line-height: 110px; font-size: 42px; top: 50%; left: 50%; margin-left: -55px; margin-top: -55px; background: rgba(255, 255, 255, 0.5); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; text-align: center; text-indent: 5px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; animation: pulse-effect 3s infinite; } .full-width-video-box .video-box-img-container img { display: block; width: 100%; } .full-width-video-box .video-box-img-container:hover:before { position: absolute; content: ''; width: 100%; height: 3000px; background: rgba(0, 0, 0, 0.1); top: 0; left: 0; } .full-width-video-box .video-box-img-container:hover:after { color: #5ac4de; background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 0px #f47912; } /*----- ABOUT US VIDEO BLOCK ----*/ .about-us-container { background: #EDF0F2; position: relative; width: 632px; z-index: 2; padding: 42px 36px 32px; margin-top: 42px; } .about-details { clear: both; } .about-details .about-heading { position: relative; font-size: 32px; margin-bottom: 25px; text-transform: uppercase; font-family: 'Open Sans', sans-serif; letter-spacing: 0.03em; font-weight: 700; color: #555555; } ul.custom-bullet-list { list-style-type: none; margin-bottom: 16px; } ul.custom-bullet-list li { padding-left: 26px; line-height: 32px; position: relative; } ul.custom-bullet-list li:before { content: ''; display: inline-block; width: 8px; background: transparent; border: 1px solid #5ac4de; margin: 0 11px 0 0; height: 8px; position: absolute; top: 15px; left: 6px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } ul.custom-bullet-list.custom-icon li { clear: both; } ul.custom-bullet-list.custom-icon li:before { /* content: ""; background: url('../images/leaf.png') no-repeat center center; top: 2px;*/ content: "\f00C"; width: 16px; height: 26px; border: 0; left: 0; top: 10px; font: normal normal normal 14px/1 FontAwesome; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .about-img { position: relative; overflow: hidden; } .about-img img { vertical-align: middle; } .about-img:before { position: absolute; content: ''; width: 100%; height: 3000px; background: rgba(0, 0, 0, 0.1); top: 0; left: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .about-img a { background: rgba(0, 0, 0, 0.5); border: 5px solid #e6e6e6; border-radius: 100%; color: #5ac4de; font-size: 40px; height: 100px; left: 50%; line-height: 70px; padding: 10px; position: absolute; text-align: center; top: 50%; width: 100px; margin-left: -50px; margin-top: -50px; } .about-img a > i { margin-left: 8px; } .about-img a:hover { background: rgba(0, 0, 0, 0.8); border: 5px solid #5ac4de; color: #e6e6e6; } /*----- 05.4 HIGHLIGHTS/WHY CHOOSE US LAYOUTS----*/ .why-choose-lists { position: relative; float: left; display: block; padding-top: 0px; clear: both; } .why-choose-lists.custom-service { background: #EEEEEE; padding-left: 24px; } .why-choose-lists.custom-service:before { top: 0; right: 0; content: ''; width: 100px; height: 100px; background: yellow; } .why-choose-lists li { width: 100%; float: left; margin: 0 0 16px 0; } .why-choose-lists li .reason-item { padding-left: 84px; position: relative; } .why-choose-lists li .reason-icon { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; color: #5ac4de; background: #FFFFFF; border: 2px solid #CCCCCC; height: 50px; -webkit-border-radius: 0%; -moz-border-radius: 0%; border-radius: 0%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; line-height: 45px; left: 0px; position: absolute; top: 8px; width: 50px; text-align: center; font-size: 24px; } .why-choose-lists li .reason-icon:hover { background: #fafafa; color: #f47912; border: 2px solid #5ac4de; } .why-choose-lists li .reason-text { position: relative; } .why-choose-lists li .reason-text span { position: relative; display: block; padding-top: 6px; margin-bottom: 16px; font-size: 20px; font-weight: 600; } .why-choose-lists li .reason-text span:after { position: absolute; bottom: -12px; left: 0; width: 32px; height: 1px; background: #5ac4de; content: ''; } .why-choose-lists li .reason-text p { color: #717171; } /*----- 05.4.1 HIGHLIGHTS LAYOUTS ----*/ .highlight-box { margin-top: 24px; padding: 48px; } .highlight-box .highlight-text { font-size: 24px; font-weight: 700; letter-spacing: 0.03em; margin-bottom: 0; color: #646464; } .highlight-box:hover { background: #fbfbfb; } /*----- 05.4.1 HIGHLIGHTS LAYOUTS ----*/ .highlight-layout-1 { margin: 24px 0; background: #FFFFFF; padding: 0px; position: relative; padding-bottom: 24px; } .highlight-layout-1 figure { margin-bottom: 20px; } .highlight-layout-1 figure img { width: auto !important; display: inline-block !important; clear: both; } .highlight-layout-1 figure i.fa { font-size: 42px; } .highlight-layout-1 h5 { color: #646464; font-weight: 600; margin-bottom: 12px; font-size: 22px; } .highlight-layout-1 h5 a { font-size: inherit; } .highlight-layout-1 div { color: #646464; padding: 6px 12px 24px 12px; } .highlight-layout-1:hover figure img { clear: both; } .highlight-layout-2 { clear: both; padding-left: 48px; position: relative; margin-bottom: 24px; } .highlight-layout-2 .highlight-icon { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; color: #5ac4de; background: transparent; height: 60px; -webkit-border-radius: 0%; -moz-border-radius: 0%; border-radius: 0%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; line-height: 56px; left: 0px; position: absolute; top: 0px; width: 60px; text-align: left; font-size: 28px; } .highlight-layout-2 .highlight-icon:hover { color: #f47912; } .highlight-layout-2 .highlight-text { position: relative; } .highlight-layout-2 .highlight-text h5, .highlight-layout-2 .highlight-text h5 a { position: relative; display: block; padding-top: 6px; margin-bottom: 16px; font-size: 20px; } .highlight-layout-2 .highlight-text h5:after, .highlight-layout-2 .highlight-text h5 a:after { position: absolute; bottom: -12px; left: 0; width: 32px; height: 1px; background: #5ac4de; content: ''; } .highlight-layout-2 .highlight-text div { margin-top: 24px; line-height: 24px; color: #717171; } .highlight-layout-2:hover .highlight-icon { top: 12px; } .highlight-layout-2:hover.light-layout .highlight-icon { color: #5ac4de; } .highlight-layout-2.light-layout .highlight-text h5, .highlight-layout-2.light-layout .highlight-text h5 a { color: #FFFFFF; } .highlight-layout-2.light-layout .highlight-text h5:hover, .highlight-layout-2.light-layout .highlight-text h5 a:hover { color: #5ac4de; } .highlight-layout-2.light-layout div { color: #f2f2f2; } .highlight-icon-padding figure { padding-top: 32px; } .highlight-carousel { clear: both; } .highlight-carousel [class^="col-"] { width: 100%; } .highlight-carousel .owl-nav { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 0.6; margin: 0; z-index: 1; } .highlight-carousel .owl-nav [class*="owl-"] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #d6d6d6; display: inline-block; cursor: pointer; border-radius: 3px; } .highlight-carousel .owl-nav .owl-prev { left: -3%; position: absolute; padding: 0; top: 50%; width: 42px; font-size: 48px; color: #5ac4de; background: transparent; margin-top: -42px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: left; } .highlight-carousel .owl-nav .owl-prev:hover { color: #fbcca4; } .highlight-carousel .owl-nav .owl-next { right: -3%; position: absolute; padding: 0; top: 50%; width: 42px; font-size: 48px; color: #5ac4de; background: transparent; margin-top: -42px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: right; } .highlight-carousel .owl-nav .owl-next:hover { color: #fbcca4; } .highlight-carousel .owl-dots { margin: 24px 0 0 0; text-align: center; } .highlight-carousel .owl-dots .owl-dot { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; display: inline-block; padding: 4px; width: 18px; height: 18px; background: transparent; border: 1px solid #CCCCCC; margin: 0 4px; } .highlight-carousel .owl-dots .owl-dot span { display: block; background: #f47912; } .highlight-carousel .owl-dots .active span { padding: 0px; width: 8px; height: 8px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; background: #85d3e7; } .highlight-carousel:hover .owl-nav { opacity: 1; } /*----- 05.4.2 INFO BOX LAYOUT 01 ----*/ .info-box-layout-1 { text-align: center; background: #FFFFFF; border: 1px solid #CCCCCC; position: relative; margin: 42px 0 24px; padding: 42px 24px; } .info-box-layout-1 span.fa { font-size: 24px; left: 50%; width: 42px; height: 42px; line-height: 42px; margin-left: -21px; top: -21px; opacity: 1; position: absolute; -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; background: #5ac4de; color: #FFFFFF; } .info-box-layout-1 h2 { margin-top: 12px; margin-bottom: 32px; text-transform: uppercase; font-size: 18px; color: #646464; font-family: 'Open Sans', sans-serif; font-weight: 500; position: relative; } .info-box-layout-1 h2:after { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: absolute; content: ''; bottom: -8px; left: 50%; display: block; width: 32px; margin-left: -16px; height: 2px; background: #5ac4de; } .info-box-layout-1 p { color: #7e7e7e; margin-bottom: 24px; } .info-box-layout-1:hover { background: #fbfbfb; } .info-box-layout-1:hover span.fa { color: #FFFFFF; background: #27a5c4; } .info-box-layout-1:hover h2:after { background: #daf2f8; width: 32px; height: 2px; } /*----- 05.4.2 INFO BOX LAYOUT 02 ----*/ .info-box-layout-2 { text-align: left; background: #FFFFFF; border: 1px solid #CCCCCC; position: relative; margin: 12px 0; padding: 42px 24px; } .info-box-layout-2 h2 { text-transform: uppercase; font-size: 18px; margin-bottom: 24px; color: #646464; font-family: 'Open Sans', sans-serif; font-weight: 500; position: relative; } .info-box-layout-2 h2:after { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: absolute; content: ''; bottom: -8px; left: 0; display: block; width: 32px; height: 2px; background: #5ac4de; } .info-box-layout-2 p { color: #7e7e7e; margin-bottom: 24px; } .info-box-layout-2 a.btn { background: transparent; color: #676767; border: 1px solid #CCCCCC; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .info-box-layout-2:hover { background: #fbfbfb; } .info-box-layout-2:hover h2:after { width: 48px; height: 2px; } .info-box-layout-2:hover a.btn { background: #5ac4de; color: #FFFFFF; border: 1px solid #5ac4de; } /*----- 05.4.2 INFO BOX LAYOUT 03 ----*/ .info-box-layout-3 { background: #FFFFFF; border: 1px solid #CCCCCC; position: relative; margin-bottom: 24px; padding: 42px 24px; } .info-box-layout-3 span.fa { font-size: 36px; right: 12px; top: 24px; opacity: 0.1; position: absolute; -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; } .info-box-layout-3 h2 { text-transform: uppercase; font-size: 18px; margin-bottom: 24px; color: #646464; font-family: 'Open Sans', sans-serif; font-weight: 500; position: relative; } .info-box-layout-3 h2:after { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: absolute; content: ''; bottom: -8px; left: 0; display: block; width: 60px; height: 2px; background: #5ac4de; } .info-box-layout-3 p { color: #8f8f8f; margin-bottom: 24px; } .info-box-layout-3 a.btn { background: transparent; color: #676767; border: 1px solid #CCCCCC; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .info-box-layout-3:hover span.fa { color: #5ac4de; transform: rotateY(360deg); opacity: 0.2; } .info-box-layout-3:hover h2:after { background: #daf2f8; width: 32px; height: 2px; } .info-box-layout-3:hover a.btn { background: #5ac4de; color: #FFFFFF; border: 1px solid #5ac4de; } /*----- SERVICE LAYOUTS ----*/ .service-block-1 { overflow: hidden; background: #fafafa; position: relative; margin: 16px 0px; padding: 0 0 16px 0px; } .service-block-1 a { display: block; } .service-block-1 figure { position: relative; } .service-block-1 figure img { opacity: 0.9; } .service-block-1 figure span.fa { position: absolute; width: 60px; height: 60px; line-height: 60px; text-align: center; display: inline-block; top: 50%; left: 50%; margin: -30px 0 0 -30px; font-size: 24px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; color: #FFFFFF; background: #5ac4de; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; transform: scale(0); } .service-block-1 h3 { font-size: 24px; line-height: 32px; letter-spacing: 0.0em; margin-top: 32px; position: relative; font-weight: 700; } .service-block-1:hover h3:after { background: #85d3e7; width: 24px; left: 50%; margin-left: -12px; } .service-block-1:hover figure { position: relative; } .service-block-1:hover figure img { opacity: 1; } .service-block-1:hover figure span.fa { position: absolute; width: 60px; height: 60px; line-height: 60px; text-align: center; display: inline-block; top: 50%; left: 50%; margin: -30px 0 0 -30px; font-size: 24px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; color: #FFFFFF; background: #5ac4de; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; transform: scale(1); } .service-block-2 { overflow: hidden; background: #fafafa; position: relative; margin: 24px 0; padding: 0; } .service-block-2 a { display: block; } .service-block-2 figure { position: relative; } .service-block-2 figure img { opacity: 1; display: block; -webkit-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; transform: scale(1); } .service-block-2 figure:after { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: absolute; top: 0; left: 0; width: 1000px; height: 1000px; background: #2C2C2C; opacity: 0.35; content: ''; } .service-block-2 figure span.fa { position: absolute; width: 48px; height: 48px; line-height: 48px; text-align: center; display: inline-block; bottom: 0; right: 0; margin: 0; font-size: 18px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; color: #FFFFFF; background: #5ac4de; transform: scale(0); z-index: 10; } .service-block-2 h3, .service-block-2 h3 a { font-size: 24px; line-height: 32px; letter-spacing: 0em; margin-top: -32px; font-weight: 700; position: absolute; top: 50%; left: 50%; width: 300px; text-align: center; margin-left: -150px; color: #FFFFFF; } .service-block-2 h3 span, .service-block-2 h3 a span { font-weight: 500; background: #f47912; padding: 0px 12px; box-sizing: border-box; display: inline-block; margin-top: 6px; font-size: 14px; } .service-block-2:hover h3:after { background: #85d3e7; width: 24px; left: 50%; margin-left: -12px; } .service-block-2:hover figure { position: relative; } .service-block-2:hover figure img { opacity: 1; transform: scale(1); } .service-block-2:hover figure:after { opacity: 0.5; } .service-block-2:hover figure span.fa { transform: scale(1); } .service-carousel { clear: both; } .service-carousel [class^="col-"] { width: 100%; } .service-carousel .owl-nav { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 1; margin: 0; z-index: 1; } .service-carousel .owl-nav [class*="owl-"] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #d6d6d6; display: inline-block; cursor: pointer; border-radius: 3px; } .service-carousel .owl-nav .owl-prev { left: -3%; position: absolute; padding: 0; top: 50%; width: 42px; font-size: 60px; color: #5ac4de; background: transparent; margin-top: -24px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: left; } .service-carousel .owl-nav .owl-prev:hover { color: #f47912; } .service-carousel .owl-nav .owl-next { right: -3%; position: absolute; padding: 0; top: 50%; width: 42px; font-size: 60px; color: #5ac4de; background: transparent; margin-top: -24px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: right; } .service-carousel .owl-nav .owl-next:hover { color: #f47912; } .service-carousel .owl-dots { margin: 24px 0 0 0; text-align: center; } .service-carousel .owl-dots .owl-dot { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; display: inline-block; padding: 4px; width: 18px; height: 18px; background: transparent; border: 1px solid #CCCCCC; margin: 0 4px; } .service-carousel .owl-dots .owl-dot span { display: block; background: #f47912; } .service-carousel .owl-dots .active span { padding: 0px; width: 8px; height: 8px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; background: #85d3e7; } .service-carousel:hover .owl-nav { opacity: 1; } /*----- PROCESS LAYOUTS ----*/ .process-step-1 { overflow: hidden; padding: 42px 24px; margin-top: 0px; margin-bottom: 24px; position: relative; background: #fcfcfc; -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .process-step-1 .process_count { position: absolute; right: 12px; top: 24px; font-size: 60px; font-weight: 700; color: #5ac4de; opacity: 0.1; } .process-step-1 img { width: 72px; height: 72px; } .process-step-1 i.fa { font-size: 72px; } .process-step-1 h3 { font-size: 24px; line-height: 32px; margin-top: 24px; } .process-step-1 .process-info { margin-bottom: 0px; } .process-step-1:hover { background: #fafafa; } .process-step-1:hover span { color: #646464; } /*----- TEAM LAYOUT ----*/ .section-team-bg { background-color: #333333; background-image: url("../images/team_bg.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; position: relative; overflow: hidden; } .team-layout-1 { margin: 24px 0; background: #FFFFFF; -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; position: relative; overflow: hidden; } .team-layout-1 .team-member { position: relative; overflow: hidden; } .team-layout-1 .team-member a { display: block; } .team-layout-1 .team-member a img { -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; vertical-align: middle; transform: scale(1); } .team-layout-1 .team-info { padding: 20px 16px 12px; position: relative; } .team-layout-1 .team-info:before { -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; position: absolute; top: 26px; left: -25px; height: 50px; background: #FFF; content: ''; width: 1200px; transform: rotate(5deg); } .team-layout-1 .team-info h3 { margin: 0px 0 0 0; padding-bottom: 0px; font-size: 24px; color: #111111; position: relative; } .team-layout-1 .team-info h4 { color: #808080; text-transform: uppercase; font-size: 14px; font-weight: 400; margin-bottom: 10px; } .team-layout-1 .team-info .team-seperator { background: #5ac4de; height: 1px; width: 40px; display: inline-block; margin: 6px 0 3px; -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; } .team-layout-1 .team-info .team-social-share { -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; opacity: 0; padding-top: 0px; margin-bottom: 6px; position: relative; position: absolute; top: 0; left: 50%; width: 400px; margin-left: -200px; margin-top: 0px; } .team-layout-1 .team-info .team-social-share a { background: #FFFFFF; color: #5ac4de; font-size: 14px; text-align: center; display: inline-block; height: 32px; line-height: 32px; width: 32px; margin-bottom: 6px; margin: 0 3px 6px; } .team-layout-1 .team-info .team-social-share a:hover { background: #5ac4de; color: #111111; } .team-layout-1:hover .team-info { clear: both; } .team-layout-1:hover .team-info:before { top: 16px; height: 70px; } .team-layout-1:hover .team-seperator { width: 24px; } .team-layout-1:hover .team-member img { transform: scale(1); } .team-layout-1:hover .team-social-share { opacity: 1; margin-top: -80px; } .team-carousel { clear: both; } .team-carousel [class^="col-"] { width: 100%; } .team-carousel .owl-nav { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 1; margin: 0; z-index: 1; } .team-carousel .owl-nav [class*="owl-"] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #d6d6d6; display: inline-block; cursor: pointer; border-radius: 3px; } .team-carousel .owl-nav .owl-prev { left: -3%; position: absolute; padding: 0; top: 50%; width: 42px; font-size: 60px; color: #5ac4de; background: transparent; margin-top: -36px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: left; } .team-carousel .owl-nav .owl-prev:hover { color: #f47912; } .team-carousel .owl-nav .owl-next { right: -3%; position: absolute; padding: 0; top: 50%; width: 42px; font-size: 60px; color: #5ac4de; background: transparent; margin-top: -36px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: right; } .team-carousel .owl-nav .owl-next:hover { color: #f47912; } .team-carousel .owl-dots { margin: 24px 0 0 0; text-align: center; } .team-carousel .owl-dots .owl-dot { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; display: inline-block; padding: 4px; width: 18px; height: 18px; background: transparent; border: 1px solid #CCCCCC; margin: 0 4px; } .team-carousel .owl-dots .owl-dot span { display: block; background: #f47912; } .team-carousel .owl-dots .active span { padding: 0px; width: 8px; height: 8px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; background: #85d3e7; } .team-carousel:hover .owl-nav { opacity: 1; } /*----- COUNTER LAYOUT ----*/ .section-counter-bg { background-image: url("../images/counter_bg.jpg"); background-repeat: repeat; background-position: center center; background-size: cover; background-attachment: fixed; position: relative; overflow: hidden; } .counter-block-1 { color: #646464; margin: 0 0 24px 0; padding: 32px 24px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .counter-block-1 .fa { display: block; color: #5ac4de; opacity: 1; margin-bottom: 12px; font-size: 48px; } .counter-block-1 p { margin-top: 10px; font-weight: 600; font-size: 20px; margin-bottom: 0; letter-spacing: 0.03em; position: relative; } .counter-block-1 .counter { display: inline-block; margin-top: 12px; font-size: 32px; font-weight: 600; } .counter-block-1 .counter-postfix { display: inline-block; margin-top: 0px; font-size: 32px; font-weight: 600; } .counter-block-1:hover .fa { opacity: 0.9; } .counter-block-1.light-counter-layout .fa, .counter-block-1.light-counter-layout .counter, .counter-block-1.light-counter-layout .counter-postfix, .counter-block-1.light-counter-layout p { color: #FFFFFF; } .counter-block-2 { clear: both; padding: 24px 16px 24px 16px; } .counter-block-2 .icon { color: #7e7e7e; float: left; font-size: 36px; margin: 12px 16px 0 0; } .counter-block-2 .count-info { overflow: hidden; padding-left: 16px; } .counter-block-2 .counter { display: inline-block; margin-top: 0; font-size: 32px; font-weight: 600; } .counter-block-2 .counter-postfix { display: inline-block; margin-top: 0px; font-size: 24px; font-weight: 500; } .counter-block-2 p { margin-top: 0; font-weight: 500; font-size: 16px; margin-bottom: 0; letter-spacing: 0; position: relative; } .counter-block-2.counter-border .count-info { position: relative; } .counter-block-2.counter-border .count-info:before { position: absolute; width: 1px; height: 36px; content: ''; background: #CCCCCC; top: 16px; left: 0; } .counter-block-2.light-counter-layout .icon, .counter-block-2.light-counter-layout .counter, .counter-block-2.light-counter-layout .counter-postfix, .counter-block-2.light-counter-layout p { color: #FFFFFF; } /*----- PRICING TABLE LAYOUTS ----*/ .section-pricing-table-bg { background-color: #f6f6f6; background-image: url("../images/pricing_table_bg.jpg"); background-repeat: no-repeat; background-position: right top; position: relative; overflow: hidden; } .price-table-layout-1 { background: #fcfcfc; border: 2px solid #e3e3e3; text-align: center; position: relative; padding-bottom: 42px; margin-top: 24px; padding-top: 42px; transform: translateZ(0px); } .price-table-layout-1:before, .price-table-layout-1:after { content: ""; position: absolute; top: -2px; left: -2px; bottom: -2px; right: -2px; z-index: -1; transition: all 0.5s ease 0s; } .price-table-layout-1:before { border-right: 2px solid #5ac4de; border-left: 2px solid #5ac4de; transform: scaleY(0); transform-origin: 100% 0 0; } .price-table-layout-1:after { border-bottom: 2px solid #5ac4de; border-top: 2px solid #5ac4de; transform: scaleX(0); transform-origin: 0 100% 0; } .price-table-layout-1:hover:before { transform: scaleY(0.5); } .price-table-layout-1:hover:after { transform: scaleX(0.5); } .price-table-layout-1 .price-table-header { color: #646464; padding: 0 0 12px 0; } .price-table-layout-1 .heading { font-size: 22px; font-weight: 600; margin: 0 0 5px 0; color: #5ac4de; } .price-table-layout-1 .pricing-table-img { background: transparent; } .price-table-layout-1 h2.title { font-size: 28px; line-height: 42px; margin-top: 16px; margin-bottom: 24px; font-weight: 600; } .price-table-layout-1 .subtitle { display: block; margin-bottom: 12px; margin-top: 12px; font-size: 12px; } .price-table-layout-1 .price-value { font-size: 42px; font-weight: 700; margin-top: 12px; position: relative; display: inline-block; color: #5ac4de; letter-spacing: -0.03em; } .price-table-layout-1 .currency { font-size: 26px; font-weight: normal; position: absolute; top: 0px; left: -24px; color: #646464; } .price-table-layout-1 .month { font-size: 16px; display: inline-block; margin-left: -8px; color: #7e7e7e; letter-spacing: 0em; } .price-table-layout-1 .pricing-content { list-style: none; padding: 12px 0 0 0; margin-bottom: 12px; } .price-table-layout-1 .pricing-content li { line-height: 42px; font-weight: 400; } .price-table-layout-1 .price-plan-btn { display: inline-block; border: 0px solid #f47912; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-size: 14px; font-weight: 700; padding: 12px 32px; position: relative; text-transform: uppercase; transition: all 0.3s ease 0s; margin-top: 24px; background: #f47912; color: #FFFFFF; } .price-table-layout-1 .price-plan-btn:hover { border-color: #5ac4de; color: #5ac4de; } .price-table-layout-highlight { border: 2px solid #fbcca4; } .price-table-layout-highlight .pricing-table-img { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; padding: 12px; background: #f47912; border: 0px solid #f47912; } .price-table-layout-highlight .price-plan-btn { background: #5ac4de; color: #FFFFFF; } .price-table-layout-highlight .price-plan-btn:hover { border: 0px solid #f47912; color: #f47912; } /*----- TESTIMONIAL LAYOUTS ----*/ .section-testimonial-bg { background-image: url("../images/testimonial_bg.jpg"); background-repeat: repeat; background-position: center center; background-size: cover; background-attachment: fixed; position: relative; overflow: hidden; } .testimony-layout-1 { background: #FFFFFF; position: relative; padding: 24px 24px 24px; margin: 16px 0 0 0px; } .testimony-layout-1 img { -webkit-border-radius: 0%; -moz-border-radius: 0%; border-radius: 0%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; height: 60px; max-width: 60px; margin: 0 auto 12px; border: 1px solid #5ac4de; padding: 5px; } .testimony-layout-1 .testimony-info { overflow: hidden; padding: 0; } .testimony-layout-1 h4 { color: #737373; font-size: 18px; line-height: 32px; text-transform: uppercase; font-weight: 600; letter-spacing: 0m; margin: 0; } .testimony-layout-1 h6 { color: #a6a6a6; line-height: 18px; font-size: 12px; font-weight: 500; margin-bottom: 0; text-transform: uppercase; } .testimony-layout-1 span { font-size: 14px; text-transform: uppercase; color: #7e7e7e; } .testimony-layout-1 p.testimony-text { clear: both; position: relative; font-size: 18px; font-weight: 400; line-height: 25px; margin: 0 0 24px 0; padding-top: 70px; color: #000000; } .testimony-layout-1 p.testimony-text:before { background: transparent; color: #5ac4de; content: '\f10d'; display: block; font-family: FontAwesome; font-size: 70px; font-style: normal; height: 48px; left: 0; opacity: 0.4; margin-left: 0px; line-height: 48px; position: absolute; text-align: center; top: 6px; width: 48px; } .testimonial-container.owl-carousel [class^="col-"] { width: 100%; } .testimonial-container { padding: 32px 0px; clear: both; } .testimonial-container .owl-nav { clear: both; color: #000000; font-size: 22px; line-height: 42px; opacity: 0; position: absolute; top: 50%; width: 100%; margin-top: -21px; z-index: 1; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .testimonial-container .owl-nav div.owl-prev { text-align: center; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; position: relative; left: -8px; width: 42px; height: 42px; line-height: 42px; font-size: 24px; background: #5ac4de; color: #ededed; float: left; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .testimonial-container .owl-nav div.owl-next { text-align: center; float: right; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; position: relative; right: -8px; width: 42px; height: 42px; line-height: 42px; font-size: 24px; background: #5ac4de; color: #ededed; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .testimonial-container .owl-nav:hover { opacity: 0.8; } .testimonial-container .owl-dots { margin: 32px 0 0 0; text-align: center; } .testimonial-container .owl-dots .owl-dot { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; display: inline-block; padding: 4px; width: 18px; height: 18px; background: transparent; border: 1px solid #CCCCCC; margin: 0 4px; } .testimonial-container .owl-dots .owl-dot span { display: block; background: #f47912; } .testimonial-container .owl-dots .active span { padding: 0px; width: 8px; height: 8px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; background: #85d3e7; } .testimonial-container.text-left img { display: inline-block; text-align: left; } .testimonial-container.text-left .owl-dots { margin: 12px 0 0 0; text-align: left; padding-left: 32px; } .testimonial-container:hover .owl-nav { opacity: 1; } /*----- NEWSLETTER LAYOUT 01 ----*/ .horizontal-newsletter { position: relative; overflow: hidden; margin-top: 0px; margin-bottom: 12px; } .horizontal-newsletter .news-subscription input { background: #FFFFFF; border: 2px solid #CCCCCC; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; color: #646464; height: 64px; padding-left: 13px; width: 100%; } .horizontal-newsletter .news-subscription button { background: #5ac4de; border: 0 none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; color: #FFFFFF; font-size: 18px; font-weight: 500; text-transform: uppercase; height: 52px; width: 160px; position: absolute; right: 6px; top: 6px; } .horizontal-newsletter .news-subscription button:hover { background: #2393af; } .horizontal-newsletter .news-subscription button:hover:before { background: #2393af; } /*----- HOME BLOG LAYOUT 01 ----*/ .latest-blog { clear: both; margin-bottom: 24px; background: #fefefe; } .latest-thumbnail { clear: both; } a.latest-date { border: 2px solid #5ac4de; border-radius: 20px; color: black; display: inline-block; font-size: 12px; letter-spacing: 0.5px; margin-bottom: 15px; padding: 2px 20px 0; text-decoration: none; transition: all 0.3s ease 0s; } .news-content { padding: 0 24px 12px; overflow: hidden; } .latest-title { font-size: 24px; line-height: 28px; margin-top: 24px; } .latest-title a { color: #555555; } .latest-title a:hover { color: #5ac4de; } .latest-details { font-size: 14px; font-weight: 400; margin-top: 0; display: inline-block; padding: 0px; } .latest-details a { border-right: 1px solid #5ac4de; color: #111111; display: inline-block; line-height: 14px; margin-right: 3px; padding-right: 8px; transition: all 0.3s ease 0s; } .latest-details a:last-child { border-right: medium none; margin-right: 0; padding-right: 0; } .latest-details a:hover { color: #111111; } .blog-details a { text-transform: uppercase; margin-left: 60px; font-size: 15px; color: #646464; } .blog-details a::after { background-color: #5ac4de; bottom: 10px; content: ""; height: 2px; left: 20px; position: absolute; width: 40px; } .blog-details a:hover { color: #5ac4de; } /*----- CTA LAYOUTS ----*/ .section-cta-bg { background: #5ac4de; } .cta-layout-01 { clear: both; } .cta-layout-01 h4 { font-size: 42px; line-height: 46px; margin-bottom: 24px; font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; } .cta-layout-01 h4.dark-text-color { color: #646464; } .cta-layout-02 { padding: 40px 0; color: #646464; } .cta-layout-02 h2 { margin-top: 6px; margin-bottom: 0; font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.03em; } .cta-layout-02 p { margin-bottom: 6px; color: #777777; padding: 0 24px 0 0; line-height: 24px; } .cta-layout-02 a.btn { margin-top: 12px; display: inline-block; } .cta-layout-02 a.btn + a.btn { margin-left: 16px; } .cta-section-overlay { margin-top: -220px; } a.btn-cta-1 { background: #5ac4de; color: #FFFFFF; border: 3px solid #5ac4de; font-size: 18px; font-weight: 600; height: 60px; line-height: 42px; margin-bottom: 6px; margin-top: 24px; padding-left: 28px; padding-right: 28px; position: relative; text-transform: uppercase; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; transition: all 0.3s ease-out 0.2s; } a.btn-cta-1:hover { background: transparent; color: #111111; } a.btn-cta-2 { background: #FAFAFA; color: #5ac4de; border: 2px solid #CCCCCC; font-size: 22px; font-weight: 600; height: 60px; line-height: 42px; margin-bottom: 6px; margin-top: 24px; padding-left: 28px; padding-right: 28px; position: relative; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; transition: all 0.3s ease-out 0.2s; } a.btn-cta-2:hover { background: #5ac4de; color: #FFFFFF; } .cta-layout-03 { padding: 64px 0; background: transparent; background-image: url('../images/pattern_1.png'); background-repeat: repeat; background-position: center center; background-size: initial; background-attachment: fixed; display: block; clear: both; position: relative; overflow: hidden; text-align: center; } .cta-layout-03:before { position: absolute; width: 100%; height: 100%; background: #5ac4de; opacity: 0.95; top: 0; left: 0; content: ''; } .cta-layout-03 h2 { font-size: 28px; line-height: 32px; color: #FFFFFF; font-weight: 700; margin: 0; } .cta-layout-03 p { font-size: 18px; font-weight: 400; color: #FFFFFF; } /*----- CTA VIDEO ----*/ .cta-video-icon { background: #FFFFFF; border: 5px solid #CCCCCC; color: #111111; width: 120px; height: 120px; font-size: 48px; line-height: 110px; text-align: center; margin: 24px auto 24px; display: inline-block; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; animation: pulse-effect 3s infinite; } .cta-video-icon > i { margin-left: 6px; } .cta-video-icon:hover { color: #f47912; border: 5px solid #5ac4de; } .cta-video-icon-invert { color: #FFFFFF; border: 5px solid #5ac4de; } .cta-video-icon-invert:hover { border: 5px solid #CCCCCC; color: #5ac4de; } /*----- SECTION APPOINTMENT ----*/ .section-appointment-bg { background-image: url("../images/appointment_bg.jpg"); background-repeat: repeat; background-position: center center; background-size: cover; background-attachment: fixed; position: relative; overflow: hidden; background-color: #FAFAFA; } .appointment-form-bg { background-image: url("../images/appointment_form_bg.jpg") !important; background-repeat: repeat; background-position: center center; background-size: cover; background-attachment: fixed; position: relative; overflow: hidden; background-color: transparent; } .appointment-form-wrapper { background: #FFFFFF; padding: 0px 0px 28px; margin-bottom: 100px; border: 1px solid #f2f2f2; -webkit-box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.05);/*----- LIGHT LAYOUT OF APPOINTMENT FORM ----*/ } .appointment-form-wrapper .appointment-form-heading { position: relative; background: #f47912; padding: 30px; margin: -1px -1px 48px -1px; } .appointment-form-wrapper .appointment-form-heading .form-title { position: relative; clear: both; overflow: hidden; font-size: 24px; font-weight: 600; color: #FFFFFF; letter-spacing: 0em; margin: 0; text-transform: uppercase; } .appointment-form-wrapper .appoinment-form { padding: 0 12px; } .appointment-form-wrapper .appoinment-form .form-control { font-size: 14px; } .appointment-form-wrapper .appoinment-form .form-group { margin-bottom: 0; position: relative; } .appointment-form-wrapper .appoinment-form .form-group i { position: absolute; top: 12px; right: 32px; font-size: 17px; color: #e6e6e6; transition: all 0.5s ease 0s; } .appointment-form-wrapper .appoinment-form .form-control::-moz-placeholder { color: #a4a4a4; font-size: 14px; text-transform: uppercase; } .appointment-form-wrapper .appoinment-form input[type=text], .appointment-form-wrapper .appoinment-form input[type=email], .appointment-form-wrapper .appoinment-form input[type=url], .appointment-form-wrapper .appoinment-form input[type=password] { color: #a4a4a4; border: 1px solid #ebebeb; line-height: 42px; padding-right: 32px; height: 42px; margin-bottom: 24px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } .appointment-form-wrapper .appoinment-form input[type=text]:focus, .appointment-form-wrapper .appoinment-form input[type=email]:focus, .appointment-form-wrapper .appoinment-form input[type=url]:focus, .appointment-form-wrapper .appoinment-form input[type=password]:focus { border: 1px solid #CCCCCC; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); } .appointment-form-wrapper .appoinment-form textarea { color: #a4a4a4; border: 0px; border: 1px solid #ebebeb; padding-left: 2px; margin-bottom: 24px; padding: 6px 12px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } .appointment-form-wrapper .appoinment-form textarea:focus { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); border: 1px solid #CCCCCC; } .appointment-form-wrapper .appoinment-form select { border: 0px; border: 1px solid #ebebeb; padding-left: 2px; margin-bottom: 24px; padding: 6px 12px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } .appointment-form-wrapper .appoinment-form select:focus { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); border: 1px solid #CCCCCC; } .appointment-form-wrapper .appoinment-form .select-style { position: relative; } .appointment-form-wrapper .appoinment-form .select-style select.form-control { border: 1px solid #ebebeb; -webkit-appearance: none; -moz-appearance: none; position: relative; background-image: url("../images/down_arrow.png"); background-position: 100% 4px; background-repeat: no-repeat; cursor: pointer; box-shadow: none; color: #a4a4a4; padding: 6px 12px; height: 42px; line-height: 32px; margin-bottom: 24px; font-size: 14px; } .appointment-form-wrapper.light-layout .appointment-form-heading { background: transparent; padding: 42px 24px 0 24px; position: relative; margin: -1px -1px 48px -1px;/*----- For Left Alignmnent ----*/ } .appointment-form-wrapper.light-layout .appointment-form-heading .form-title + p { margin-top: 0; } .appointment-form-wrapper.light-layout .appointment-form-heading .form-title { position: relative; clear: both; font-size: 24px; font-weight: 600; color: #646464; letter-spacing: 0em; margin: 0 0 0px 0; padding-bottom: 16px; } .appointment-form-wrapper.light-layout .appointment-form-heading .form-title:after { width: 32px; height: 2px; position: absolute; content: ''; left: 50%; top: 40px; margin-left: -16px; background: #5ac4de; } .appointment-form-wrapper.light-layout .appointment-form-heading.text-left { clear: both; } .appointment-form-wrapper.light-layout .appointment-form-heading.text-left .form-title:after { left: 0; margin-left: 0px; background: #5ac4de; } .appointment-form-wrapper.light-layout .appoinment-form { padding: 0 12px; } .appointment-form-wrapper.light-layout .appoinment-form .form-control { font-size: 13px; } .appointment-form-wrapper.light-layout .appoinment-form .form-group { margin-bottom: 0; position: relative; } .appointment-form-wrapper.light-layout .appoinment-form .form-group label { font-weight: 600; margin-bottom: 6px; margin-top: 0; } .appointment-form-wrapper.light-layout .appoinment-form .form-group i { position: absolute; top: 48px; right: 32px; font-size: 17px; color: #cccccc; transition: all 0.5s ease 0s; } .appointment-form-wrapper.light-layout .appoinment-form .form-control::-moz-placeholder { color: #a4a4a4; font-size: 14px; text-transform: uppercase; } .appointment-form-wrapper.light-layout .appoinment-form input[type=text], .appointment-form-wrapper.light-layout .appoinment-form input[type=email], .appointment-form-wrapper.light-layout .appoinment-form input[type=url], .appointment-form-wrapper.light-layout .appoinment-form input[type=password] { background: #f5f5f5; color: #a4a4a4; border: 1px solid transparent; line-height: 42px; padding-right: 32px; height: 42px; margin-bottom: 24px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } .appointment-form-wrapper.light-layout .appoinment-form input[type=text]:focus, .appointment-form-wrapper.light-layout .appoinment-form input[type=email]:focus, .appointment-form-wrapper.light-layout .appoinment-form input[type=url]:focus, .appointment-form-wrapper.light-layout .appoinment-form input[type=password]:focus { border: 1px solid transparent; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); } .appointment-form-wrapper.light-layout .appoinment-form textarea { background: #f5f5f5; color: #a4a4a4; border: 1px solid transparent; padding-left: 2px; margin-bottom: 24px; padding: 6px 12px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } .appointment-form-wrapper.light-layout .appoinment-form textarea:focus { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); border: 1px solid transparent; } .appointment-form-wrapper.light-layout .appoinment-form select { background: #f5f5f5; height: 42px; border: 0px; border: 1px solid #bfbfbf; padding-left: 2px; margin-bottom: 24px; padding: 6px 12px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } .appointment-form-wrapper.light-layout .appoinment-form select:focus { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); border: 1px solid #CCCCCC; } .appointment-form-wrapper.light-layout .appoinment-form .select-style { position: relative; } .appointment-form-wrapper.light-layout .appoinment-form .select-style select.form-control { border: 1px solid #bfbfbf; -webkit-appearance: none; -moz-appearance: none; position: relative; background-image: url("../images/down_arrow.png"); background-position: 100% 4px; background-repeat: no-repeat; cursor: pointer; box-shadow: none; color: #a4a4a4; padding: 6px 12px; height: 42px; line-height: 32px; margin-bottom: 24px; font-size: 14px; } .appointment-form-wrapper.light-layout .appoinment-form .error { position: relative; top: -16px; font-style: italic; color: tomato; } .appoinment-person { position: relative; top: 12px; } .section-client-logo { clear: both; } .logo-layout-1 { clear: both; } .logo-layout-1 .client-logo { padding: 16px; margin-bottom: 32px; border: 1px solid #CCCCCC; } .logo-layout-1 .client-logo img { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; width: 100%; margin: 0; display: block; opacity: 0.7; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .logo-layout-1 .client-logo:hover { border: 1px dotted #85d3e7; } .logo-layout-1 .client-logo:hover img { opacity: 1; } .no-border-logo-layout .client-logo { border: 0px solid transparent; } .no-border-logo-layout .client-logo:hover { border: 0px solid transparent; } .logo-items { clear: both; } .logo-items [class^="col-"] { width: 100%; } .logo-items .client-logo { margin-bottom: 0; } .logo-items .owl-nav { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 1; margin: 0; z-index: 1; } .logo-items .owl-nav [class*="owl-"] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #d6d6d6; display: inline-block; cursor: pointer; border-radius: 3px; } .logo-items .owl-nav .owl-prev { left: -3%; position: absolute; padding: 0; top: 50%; width: 42px; font-size: 42px; color: #5ac4de; background: transparent; margin-top: -24px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: left; } .logo-items .owl-nav .owl-prev:hover { color: #f47912; } .logo-items .owl-nav .owl-next { right: -3%; position: absolute; padding: 0; top: 50%; width: 42px; font-size: 42px; color: #5ac4de; background: transparent; margin-top: -24px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: right; } .logo-items .owl-nav .owl-next:hover { color: #f47912; } .logo-items .owl-dots { margin: 24px 0 0 0; text-align: center; } .logo-items .owl-dots .owl-dot { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; display: inline-block; padding: 4px; width: 18px; height: 18px; background: transparent; border: 1px solid #CCCCCC; margin: 0 4px; } .logo-items .owl-dots .owl-dot span { display: block; background: #f47912; } .logo-items .owl-dots .active span { padding: 0px; width: 8px; height: 8px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; background: #85d3e7; } .logo-items:hover .owl-nav { opacity: 1; } /***********************************************************************************************/ /* MAIN CONTENT */ /***********************************************************************************************/ .main-content { margin: 48px 0; } .btn-social-icon { height: 42px; width: 42px; border: 0; border-radius: 0px !important; margin: 3px 3px; } .btn-social-icon .fa { line-height: 42px; color: #FFFFFF; } .btn-goggle-plus { background-color: #26b84b; } .btn-goggle-plus:hover { background-color: #20993e; } .btn-envelope-o { background-color: #d74b3e; } .btn-envelope-o:hover { background-color: #ad3d32; } .transparent-bg, .section-transparent-bg { background: transparent !important; } /***********************************************************************************************/ /* 05. BLOG LAYOUT */ /***********************************************************************************************/ .blog .single-post .single-post-content{ margin-bottom: 6px !important; } .blog .single-post{ height: 501px; } .blog .single-post-title h2{ -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .blog .single-post{ margin-bottom: 111px; } .blog .blog-main-content{ height: 95px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } @media only screen and (max-width: 767px) { .blog .single-post{ margin-bottom: 51px; } .banner-style{ background-image:url('../images/new-bg1.webp'); position:relative; height:80vh; width:100%; background-size:cover; background-repeat:no-repeat; } .banner-shadow{ position:absolute; height:80vh; width:100%; left:0px; background-color:rgba(0, 0, 0, 0.3); } .banner-text-box{ position: absolute; top: 53%; transform: translateY(-55%); width:90%; } .banner-text-box h1{ font-size: 45px; line-height: 55px; font-weight: 800; margin: 0px 0 0; color: #FFFFFF; text-shadow: 1px 1px 1px #666666; letter-spacing:-0.03em; } } .single-post { margin-bottom: 50px; } .single-post p { line-height: 30px; } .single-post .single-post-content { margin-bottom: 30px; padding: 6px; background: #F9FAFB; } .single-post .single-post-title { line-height: 24px; } .single-post .single-post-title h2 { font-size: 24px; line-height: 32px; font-weight: 600; } .single-post .single-post-title .single-post-meta { font-size: 15px; } .readmore { border: 0px; background: #5ac4de; color: #FFFFFF; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; padding: 12px 24px; } .readmore-sm { border: 0px; background: #5ac4de; color: #FFFFFF; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; padding: 6px 12px; } /***********************************************************************************************/ /* 06. BLOG SINGLE PAGE */ /***********************************************************************************************/ .single-post-inner { background: #F9FAFB; border: 1px solid #fafafa; -webkit-box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.1); padding: 0 0 32px 0; } .single-post-inner div { padding: 0 30px 0px 30px; } div.post-inner-featured-content, div.tag-list { padding: 0; } .post-inner-featured-content { display: block; } .post-inner-featured-content img { display: block; width: 100%; text-align: center; } .single-post-inner-title { margin-bottom: 24px; } .single-post-inner-title h2 { font-size: 32px; margin: 32px 0 24px 0; } .single-post-inner-meta h2 { font-size: 24px; } .single-post-inner-meta .tag-list a { display: inline-block; padding: 4px 12px; margin-right: 3px; background: #5ac4de; color: #FFFFFF; } .custom-post-info { margin: 0; padding: 0; } .custom-post-thumb-small { width: 70px; height: 70px; } .custom-post-thumb-medium { width: 350px; height: 120px; } .single-post-container { margin: 0 0 24px 0; } .single-post-container h3 { margin: 24px 0 12px 0; font-size: 18px; text-transform: capitalize; } .single-post-container h3 a { color: #555555; } .single-post-container h3 a:hover { color: #646464; } .single-post-container .custom-breadcrumb { font-size: 18px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #CCCCCC; } .single-post-container .article-meta-extra { border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; padding: 6px 0; margin-bottom: 12px; } .single-post-container .article-meta-extra span { margin-right: 5px; } .single-post-container .article-meta-extra span:last-child { margin-right: 0px; } .single-post-container .article-meta-extra i { color: #555555; margin-right: 3px; } .single-post-container h2 + p { margin-top: 12px; } .single-post-content h1 { margin: 12px 0; } .single-post-content h2 { margin: 12px 0; } .single-post-content h3 { margin: 12px 0; } .single-post-content h4 { margin: 12px 0; } .single-post-content h5 { margin: 12px 0; } .single-post-content h6 { margin: 12px 0; } .articles-nav { margin-top: -1.5em; margin-bottom: 1.5em; padding: 0 2.4em; } .articles-nav .articles-nav-prev { float: left; } .articles-nav .articles-nav-next { float: right; } .aligncenter, .alignleft, .alignright, .alignnone { margin: 12px 0 24px 0; max-width: 100%; height: auto; } .aligncenter, img.centered { display: block; margin: 12px auto; } .alignleft { float: left; } .alignright { float: right; } .alignnone { clear: both; } .wp-caption { text-align: center; } .wp-caption img { max-width: 100%; max-height: auto; } .wp-caption .wp-cap { margin-bottom: 0px; font-size: 12px; } .post-navigation { text-align: center; clear: both; } .post-navigation p { text-transform: uppercase; } .post-navigation p a { position: relative; padding-left: 24px; margin-right: 5px; } .post-navigation p a:before { content: ""; position: absolute; width: 12px; height: 12px; top: 4px; left: 3px; background: transparent; border: 1px solid #CCCCCC; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } .post-navigation p a:hover:before { background: #5ac4de; border: 1px solid #646464; } .post-navigation p a:first-child { margin-right: 0px; } .comments-nav-section, .post-nav-section { margin: 24px 0 0 0; } .comments-nav-section p, .post-nav-section p { margin-bottom: 0px; } .comments-nav-section a, .post-nav-section a { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; text-align: center; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; border: 1px solid #CCCCCC; -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0); background: transparent; color: #646464; padding: 6px 12px; } .comments-nav-section a:hover, .post-nav-section a:hover { border: 1px solid #5ac4de; color: #5ac4de; background: transparent; } .article-share-section { margin: 24px 0 0 0; border: 1px solid #CCCCCC; border-left: 0px; border-right: 0px; padding: 14px 0 10px 0; } .article-author { margin-top: 24px; background: #F9FAFB; padding: 30px; min-height: 100px; padding-bottom: 24px; } .article-author .author-avatar img { width: 100px; max-width: 100%; max-height: auto; float: right; border: 1px solid #CCCCCC; padding: 3px; margin-top: 0px; margin-left: 12px; } .article-author .about_author { margin-bottom: 24px; } .article-author .social-icons a { display: inline-block; color: #5ac4de; margin-right: 15px; } .article-author .social-icons a:hover { color: #5ac4de; } .related-post { margin-top: 24px; background: #F9FAFB; padding: 30px; } .related-post ul li { margin: 5px 0; } .related-post ul li a { position: relative; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; color: #646464; } .related-post ul li a:hover { color: #5ac4de; } ul.pagination li a { color: #5ac4de; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; padding: 6px 12px; border: 0px; margin: 0 2px; } ul.pagination li a:hover { backgroud: #000 !important; } ul.pagination li a.current { background: #5ac4de; color: #FFFFFF; border: 0px; } ul.pagination li:first-child { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } ul.pagination li:last-child { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .comments-area { margin-top: 24px; background: #F9FAFB; padding: 30px; } .article-add-comments { float: right; display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; color: #555555; border: 1px solid #CCCCCC; background: #FFFFFF; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } .article-add-comments:hover { border: 1px solid #5ac4de; color: #5ac4de; } .commentslist { margin-top: 24px; counter-reset: comment-id; } .commentslist li { list-style-type: none; margin-left: 0px; } .commentslist li:first-child { margin-top: 24px; } .commentslist li + li { margin-top: 24px; } .commentslist li ol, .commentslist li ul { padding-left: 3em; margin-left: 3em; border-left: 1px dotted #CCCCCC; list-style-type: none; } .commentslist li ol li, .commentslist li ul li { position: relative; } .commentslist li ol li::before, .commentslist li ul li::before { content: ''; width: 2em; height: 1px; border-bottom: 1px dotted #CCCCCC; position: absolute; left: -3em; top: 2em; } .commentslist li article { background: #FFFFFF; padding: 12px; } .commentslist li article header { border-bottom: 1px solid #CCCCCC; font-size: 12px; margin-bottom: 1.5em; position: relative; } .commentslist li article header span { color: #b1b1b1; } .commentslist li article header::before { counter-increment: comment-id; content: counter(comment-id); position: absolute; right: 5px; top: 15px; color: #F8F8F8; font-size: 32px; font-family: 'Open Sans', sans-serif; } .commentslist li article header h5 { margin-bottom: 12px; text-transform: capitalize; color: #555555; } .commentslist li article header h5 a { color: #555555; } .commentslist li article header h5 a:hover { color: #646464; } .commentslist li article header h5 span { font-size: 12px; background: #000000; color: #FFFFFF; padding: 3px 5px; font-style: normal; margin-right: .5em; } .commentslist li article .comment_text { padding-right: 24px; } .comment-avatar img { width: 64px; height: 64px; float: right; background: #FFFFFF; margin: 2px; border: 1px solid #CCCCCC; padding: 2px; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } .comment-avatar img:hover { border-color: #a6a6a6; } .waiting-moderation { color: #b1b1b1; } .comments-nav-section { margin: 48px 0; } .comments-nav-section .btn-primary { background: #FFFFFF; } .comments-nav-section .btn-primary:hover { background: #FFFFFF; } #comment-form label { margin-bottom: 12px; } #comment-form input[type=text], #comment-form input[type=email], #comment-form input[type=url], #comment-form input[type=password] { border: 0px; border-bottom: 1px solid #EEE; line-height: 42px; height: 42px; margin-bottom: 24px; padding: 0 12px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } #comment-form input[type=text]:focus, #comment-form input[type=email]:focus, #comment-form input[type=url]:focus, #comment-form input[type=password]:focus { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); border-bottom: 1px solid #919191; } #comment-form textarea { border: 0px; border-bottom: 1px solid #EEE; padding: 12px; margin-bottom: 24px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } #comment-form textarea:focus { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); border: 0px; border-bottom: 1px solid #919191; } /***********************************************************************************************/ /* PAGE HEADR AND BREADCRUMB */ /***********************************************************************************************/ .page-header { margin: 0; padding: 80px 0 80px; position: relative; top:0; overflow: hidden; /* z-index: 1; background-attachment: fixed;*/ background-position: center center; background-color: transparent; /*background-image: url('../images/swimming-new.webp');*/ background-color:#0166b7; /*transform: scale(1.1);*/ background-repeat: no-repeat; background-size: cover; border: 0px solid #FFF; } .page-header:before { position: absolute; width: 100%; height: 30%; /*background: rgba(36, 101, 255, 0.3);*/ top: 0; left: 0; content: ''; z-index: 0; } .page-header h3 { text-shadow: 2px 2px #000; color: #ffffff; text-align: center; font-size: 36px; padding:20px 0px !important; line-height: 24px; /*margin: -50px 0px 200px 0px;*/ text-transform: uppercase; letter-spacing: 0.02em; } .page-header .page-breadcrumb { font-size: 16px; color: #ccc; text-align: center; text-transform: uppercase; letter-spacing: 0.01em; } .page-header .page-breadcrumb a { color: #ccc; } .page-header .page-breadcrumb a:hover { color: #ccc; } /***********************************************************************************************/ /* SINGLE TEAM PAGE */ /***********************************************************************************************/ .single-team { background: transparent; margin: 20px 0 30px; overflow: hidden; position: relative; } .single-team img { width: 100%; } .single-team-details h3 { font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: 0.03em; margin: 12px 0 0; text-transform: uppercase; } .single-team-details h4 { color: #9a9a9a; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; } .single-team-details ul.team-social-share-2 li { background: #5ac4de; border-radius: 0; color: #FFFFFF; display: inline-block; height: 40px; line-height: 40px; margin-bottom: 20px; margin-right: 15px; text-align: center; width: 40px; } .single-team-details ul.team-social-share-2 li a { color: #FFFFFF; } .single-team-details a.btn-team-details { border: 2px solid #5ac4de; border-radius: 0; margin: 10px 0; padding: 10px 15px; text-transform: uppercase; } /***********************************************************************************************/ /* SERVICE PAGE */ /***********************************************************************************************/ .service-bottom-layout { margin-top: 30px; } .single-service-content h3 { font-size: 25px; text-transform: uppercase; font-weight: 600; margin-top: 15px; } .single-service-content ul { list-style-type: none; margin-bottom: 16px; overflow: hidden; } .single-service-content ul li { padding-left: 32px; position: relative; } .single-service-content ul li:before { content: '\f00c'; font-family: FontAwesome; display: inline-block; color: #5ac4de; margin: 0 11px 0 0; position: absolute; left: 0px; } /***********************************************************************************************/ /* FAQ PAGE */ /***********************************************************************************************/ .faq-layout { position: relative; overflow: hidden; } .faq-layout .panel { box-shadow: none; } .faq-layout .panel-default { position: relative; border: 0px solid #EEE; padding: 17px 16px 0; background: #f7f7f7; border-radius: 0; } .faq-layout .faq-box .panel-heading { background: none; border: 0 none; display: block; padding: 16px; margin: -16px -15px; background: #5ac4de; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .faq-layout .faq-box .panel-heading:hover { background: #2C2C2C; } .faq-layout .faq-box .panel-title { display: block; letter-spacing: 0.03em; margin-bottom: 0; margin-top: 0; font-size: inherit; text-transform: uppercase; color: #FFFFFF; } .faq-layout .faq-box .panel-title > a { line-height: 24px; display: block; color: #FFFFFF; } .faq-layout .faq-box .panel-title > a:hover, .faq-layout .faq-box .panel-title > a:focus { outline: none; color: #FFFFFF; } .faq-layout .faq-box .panel-body { padding-top: 32px; padding-left: 0px; } .faq-layout .faq-box .panel-heading [data-toggle="collapse"]:after { font-family: 'FontAwesome'; content: '\f0d8'; float: left; color: #FFFFFF; font-size: 16px; margin-right: 10px; } .faq-layout .faq-box .panel-heading [data-toggle="collapse"].collapsed:after { content: '\f0d7'; } /***********************************************************************************************/ /* COMING SOON PAGE */ /***********************************************************************************************/ .section-coming-countdown-bg { background: transparent; background-image: url('../images/coming-soon.jpg'); background-repeat: no-repeat; background-position: top center; background-size: cover; background-attachment: fixed; display: block; clear: both; position: relative; overflow: hidden; padding: 220px 0; } #coming_countdown { font-size: 32px; clear: both; width: 900px; max-width: 100%; margin: 30px auto; } #coming_countdown .countdown_container { text-align: center; display: block; float: left; width: 25%; } #coming_countdown .countdown_container span.count_number { display: block; font-size: 90px; line-height: 100px; font-weight: 600; font-family: 'Open Sans', sans-serif; color: #FFFFFF; } #coming_countdown .countdown_container span.count_text { display: block; font-size: 32px; line-height: 42px; font-weight: 400; font-family: 'Lato', sans-serif; color: #FFFFFF; text-transform: uppercase; } /***********************************************************************************************/ /* 09. GALLERY PAGE */ /***********************************************************************************************/ .section-gallery-bg { background-image: url("../images/gallery_bg.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: initial; position: relative; overflow: hidden; } .section-gallery-block { clear: both; } .gallery-container { padding: 12px; margin: 0; } .no-bottom-padding { padding-bottom: 0px; } .no-padding-gallery .gallery-container { padding: 0px; margin: 0; } .gallery-light-box { display: block; overflow: hidden; position: relative; } .gallery-light-box .gallery-img { display: block; position: relative; max-width: 100%; padding: 0px; } .gallery-light-box .gallery-img:before { background: rgba(0, 0, 0, 0.3); width: 100%; height: 0px; position: absolute; top: 0; left: 0; content: ''; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .gallery-light-box .gallery-img:after { font-family: FontAwesome; content: '\f1c5'; position: absolute; right: 150%; margin-left: -21px; bottom: -64px; background: #FFFFFF; color: #5ac4de; text-align: center; width: 42px; height: 42px; line-height: 42px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; } .gallery-light-box .gallery-img img { width: 100%; max-width: 100%; display: block; opacity: 1; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } .gallery-light-box:hover .gallery-img:before { background: rgba(0, 0, 0, 0.7); width: 100%; height: 1500px; } .gallery-light-box:hover .gallery-img:after { opacity: 1; top: 50%; left: 50%; margin-top: -24px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .gallery-light-box:hover .gallery-img img { opacity: 0.4; } .gallery-light-box:hover .gallery-img figcaption { bottom: 0px; left: 0; } .gallery-carousel { clear: both; } .gallery-carousel [class^="col-"] { width: 100%; } .gallery-carousel .owl-nav { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 1; margin: 0; z-index: 1; } .gallery-carousel .owl-nav [class*="owl-"] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #d6d6d6; display: inline-block; cursor: pointer; border-radius: 3px; } .gallery-carousel .owl-nav .owl-prev { left: -3%; position: absolute; padding: 0; top: 50%; width: 42px; font-size: 60px; color: #5ac4de; background: transparent; margin-top: -36px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: left; } .gallery-carousel .owl-nav .owl-prev:hover { color: #f47912; } .gallery-carousel .owl-nav .owl-next { right: -3%; position: absolute; padding: 0; top: 50%; width: 42px; font-size: 60px; color: #5ac4de; background: transparent; margin-top: -36px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: right; } .gallery-carousel .owl-nav .owl-next:hover { color: #f47912; } .gallery-carousel .owl-dots { margin: 24px 0 0 0; text-align: center; } .gallery-carousel .owl-dots .owl-dot { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; display: inline-block; padding: 4px; width: 18px; height: 18px; background: transparent; border: 1px solid #CCCCCC; margin: 0 4px; } .gallery-carousel .owl-dots .owl-dot span { display: block; background: #f47912; } .gallery-carousel .owl-dots .active span { padding: 0px; width: 8px; height: 8px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; background: #85d3e7; } .gallery-carousel:hover .owl-nav { opacity: 1; } /***********************************************************************************************/ /* 11. 404 PAGE */ /***********************************************************************************************/ .section-404 { background: #EDF0F2; } .message-container-404 { margin: 48px 0; } .message-container-404 .text-404 { font-size: 180px; line-height: 200px; font-weight: 600; letter-spacing: 0.1em; font-family: 'Open Sans', sans-serif; color: #5ac4de; } .message-container-404 .text-404 span { color: #30b5d6; } .message-container-404 .message-text-404 { font-size: 32px; line-height: 42px; display: block; } /***********************************************************************************************/ /* CONTACT PAGE */ /***********************************************************************************************/ .content-block { padding: 0 48px 0 0; } .contact-title { font-size: 24px; border-bottom: 3px solid #eeeeee; color: #5c5c5c; padding-bottom: 15px; position: relative; } .contact-title:after { bottom: -3px; content: ""; height: 3px; left: 0; position: absolute; width: 32px; background: #5ac4de; } .contact-info li { margin-bottom: 24px; } .contact-info .icon-container { display: inline-block; background: #5ac4de; color: #FFFFFF; width: 32px; height: 32px; line-height: 32px; font-size: 14px; text-align: center; margin-right: 5px; vertical-align: top; } .contact-info address { display: inline-block; } .contact-info a { color: #646464; } .contact-info a:hover { color: #5ac4de; } .contact-form-block { padding: 0 0 0 0px; } #contact-form input[type=text], #contact-form input[type=email], #contact-form input[type=url], #contact-form input[type=password] { border: 0px; border-bottom: 1px solid #EEE; line-height: 42px; height: 42px; margin-bottom: 24px; padding-left: 2px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } #contact-form input[type=text]:focus, #contact-form input[type=email]:focus, #contact-form input[type=url]:focus, #contact-form input[type=password]:focus { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); border: 0px; border-bottom: 1px solid #919191; } #contact-form textarea { border: 0px; border-bottom: 1px solid #EEE; padding-left: 2px; margin-bottom: 24px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } #contact-form textarea:focus { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2); border: 0px; border-bottom: 1px solid #919191; } /***********************************************************************************************/ /* 12. FOOTER */ /***********************************************************************************************/ footer { background: #5c5c5c; color: #FFFFFF; } footer p { color: #FFFFFF; } footer a { color: #FFFFFF; } footer a:hover { color: #e6e6e6; } footer .footer-logo { text-align: center; } footer .footer-logo:after { background: #CCCCCC; content: ""; position: absolute; height: 48px; top: 10px; width: 1px; right: 28px; } footer .footer-intro { margin-bottom: 32px; } footer .social-icons { margin-bottom: 24px; clear: both; } footer .social-icons a { border: 0px solid #5ac4de; background: #5ac4de; color: #FFFFFF; display: inline-block; font-size: 14px; height: 40px; line-height: 40px; margin-right: 5px; position: relative; text-align: center; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; width: 40px; } footer .social-icons a:last-child { margin: 0; } footer .social-icons a:hover { background: #30b5d6; color: #FFFFFF; } .follow-us { color: #FFFFFF; font-size: 18px; letter-spacing: 0.03em; text-transform: uppercase; } .footer-widget-area { padding: 80px 0 24px; } .footer-widget-area .footer-widget { margin-bottom: 32px; } .footer-widget-area .footer-widget .footer-logo { margin-bottom: 15px; } .footer-widget-area .footer-widget-header h3 { position: relative; font-size: 24px; margin-bottom: 6px; padding-bottom: 12px; font-weight: 600; display: block; color: #FFFFFF; } .footer-widget-area .footer-widget-header h3 span { font-style: 400; color: #555555; } .footer-widget-area .footer-useful-links { margin-top: 12px; clear: both; } .footer-widget-area .footer-useful-links li { margin-bottom: 8px; width: 50%; float: left; } .footer-widget-area .footer-about { border-bottom: 1px solid #666666; padding-bottom: 40px; margin-bottom: 40px; } .footer-widget-area .footer-about .footer-content a { color: #5ac4de; } .footer-widget-area .opening-shedule li { border-bottom: 1px solid #d9d9d9; padding: 12px 0px 12px; color: #FFFFFF; } .footer-widget-area .opening-shedule li:first-child { padding-top: 0px; } .footer-widget-area .opening-shedule li:last-child { border: 0 none; } .footer-widget-area .fa-footer { display: inline; text-align: center; width: 12px; height: 12px; color: #5ac4de; padding: 4px 6px 6px 0; margin-right: 0px; } .footer-widget-area .contact-us { clear: both; } .footer-widget-area .contact-us p { border-bottom: 1px solid #d9d9d9; padding-bottom: 10px; } .footer-widget-area .contact-us p:last-child { padding: 0; border: 0 none; } .footer-widget-area .textwidget { clear: both; } .footer-widget-area .textwidget p { padding-left: 42px; } .footer-widget-area .fa-contact { display: inline-block; text-align: center; width: 12px; height: 12px; color: #6fcce2; padding: 24px 6px 6px 0; margin-right: 6px; position: absolute; } .footer-widget-area .footer-widget + .footer-widget { margin-top: 24px; } .footer-widget-area li { line-height: 32px; } .footer-widget-area-bg { clear: both; } .footer-contents { padding: 32px 0; } .footer-contents .copyright-text { line-height: 24px; font-size: 14px; } /***********************************************************************************************/ /* 13. SIDEBAR & WIDGETS */ /***********************************************************************************************/ .widget { background: #F9FAFB; margin-bottom: 30px; padding: 32px 24px; border: 1px solid #fafafa; -webkit-box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.1); } .widget-title { display: block; position: relative; margin-bottom: 24px; font-size: 24px; line-height: 36px; padding-bottom: 12px; text-transform: capitalize; font-family: 'Open Sans', sans-serif; letter-spacing: 0em; font-weight: 600; color: #111111; border-bottom: 1px solid #cacaca; } .widget-title span { font-style: 400; color: #555555; } .widget ul { list-style: outside none none; margin: 0; padding: 0; } .widget ul li { padding: 5px 0; } .widget ul li a { color: #646464; } .widget ul li a:hover { color: #5ac4de; } .search-form { margin: 0 0 12px 0; } .search-form span.input-group-addon { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; background: #5ac4de; border-right: 0px; color: #FFFFFF; font-weight: bold; width: 10%; padding: 0 20px; } .search-form input[type="text"] { box-shadow: 0; margin-bottom: 0; font-size: 14px; padding-left: 5px; height: 42px; border: 0px; box-shadow: none; width: 100%; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } .search-form input[type="text"]:focus { box-shadow: none; } .widget-post-category { margin: 11px auto; } .widget-post-category li { margin: 5px 0; padding: 0; text-transform: capitalize; } .widget-post-category li a { font-size: inherit; position: relative; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } .widget-service-category { margin: 11px auto; } .widget-service-category li { margin: 3px 0; padding: 0; } .widget-service-category li a { font-size: inherit; position: relative; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } .single-recent-post{ display: flex; align-items: center; } .single-recent-post { margin-bottom: 16px; overflow: hidden; } .single-recent-post .post-img{ width: 85px; margin-right: 10px; } .single-recent-post .post-img img{ border-radius: 3px; } .single-recent-post a { color: #646464; margin-bottom: 3px; display: block; } .single-recent-post a:hover { color: #5ac4de; } .single-recent-post span { font-size: 14px; display: block; color: #5ac4de; padding-left: 2px; } .single-recent-post span i { font-size: 16px; } .single-post-thumb { float: left; margin-bottom: 10px; margin-right: 20px; margin-top: 5px; width: 100px; } .widget-recent-tags { margin: 0 auto; } .widget-recent-tags li { margin: 0px 5px 7px 0px; float: left; } .widget-recent-tags li a { padding: 3px 7px; text-transform: capitalize; text-align: center; border: 1px solid #5ac4de; display: block; background: transparent; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .widget-recent-tags li a:hover, .widget-recent-tags li a:active { background: transparent; border: 1px solid #5ac4de; background: #FFFFFF; } /***********************************************************************************************/ /* Widget Link Color */ /***********************************************************************************************/ .sidebar-widget a { color: #646464; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } .sidebar-widget a:hover { color: #5ac4de; } /***********************************************************************************************/ /* CALENDAR WIDGET */ /***********************************************************************************************/ #calendar_wrap { margin: 0 auto 5px auto; } #calendar_wrap #wp-calendar { width: 100%; border: 1px solid #CCCCCC; padding: 2px; } #calendar_wrap #wp-calendar caption { border-color: #CCCCCC; border-image: none; border-style: solid solid none; border-width: 1px 1px medium; font-weight: bold; padding: 10px 0; text-align: center; text-transform: uppercase; } #calendar_wrap #wp-calendar thead { border-right: 1px solid #CCCCCC; } #calendar_wrap #wp-calendar thead th { border-right: 1px solid #CCCCCC; } #calendar_wrap #wp-calendar th { background: none repeat scroll 0 0 #F9F9F9; border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; } #calendar_wrap #wp-calendar tr th, #calendar_wrap #wp-calendar thead th { font-weight: bold; padding: 9px 0; text-align: center; } #calendar_wrap #wp-calendar tbody { color: #aaa; } #calendar_wrap #wp-calendar tbody tr td { border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; padding: 6px; background: #f5f5f5; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; text-align: center; -webkit-transition: 0.3s 0.2s ease-in-out; -moz-transition: 0.3s 0.2s ease-in-out; -o-transition: 0.3s 0.2s ease-in-out; transition: 0.3s 0.2s ease-in-out; } #calendar_wrap #wp-calendar tbody tr td:hover { background: #FAFAFA; } #calendar_wrap #wp-calendar tbody .pad { background: none; } #calendar_wrap #wp-calendar tfoot tr td { border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; padding: 6px; text-align: center; } #calendar_wrap #wp-calendar tfoot #next { font-size: 12px; text-transform: uppercase; text-align: center; } #calendar_wrap #wp-calendar tfoot #prev { text-align: center; font-size: 12px; text-transform: uppercase; padding-top: 10px; } #calendar_wrap #wp-calendar #today { background-color: #5ac4de; color: #FFFFFF; font-weight: bold; } .otter-blog-row .blog-1 img{ height: 250px; object-fit: cover; } .otter-blog-row .line-clamp-3{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .otter-blog-row .blog-text-box{ background: none !important; } .otter-blog-row .blog-1 { box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; border-radius: 5px; padding: 10px; } .otter-blog-row .read-btn { border: none; background: #5ac4de !important; color: white !important; border-radius: 0 !important; } .otter-blog-section .single-post-content a img{ height: 250px; object-fit: cover; width: 100%; } .otter-blog-section .blog-main-content{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .otter-blog-section .single-post .single-post-content{ background:none !important ; } .otter-blog-section .single-post-title h2 a{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .otter-blog-section .single-post .single-post-title{ padding: 10px; } .otter-blog-section .post.single-post{ height: initial !important; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; } .otter-blog-section .single-post { margin-bottom: 50px !important; } /***********************************************************************************************/ /* 14. RESPONSIVE STYLING */ /***********************************************************************************************/ /* Tablet Portrait size to standard (devices and browsers) */ @media only screen and (max-width: 1224px) { footer .footer-logo:after { display: none; } } @media only screen and (min-width: 991px) and (max-width: 1200px) { .header-top .icon-box .icon-container { font-size: 25px; } .header-top .icon-box .text { font-size: 13px; } .header-top .icon-box .text .head-heading { font-size: 13px; } .header-top .btn-quote .btn-request_quote { font-size: 12px; padding: 12px 3px; } .main-top-header p { font-size: 13px; } #slider_1 .slider-content h2 { font-size: 100px; line-height: 120px; } #slider_1 .slider-content h3 { font-size: 32px; } #slider_1 .slider-content p { font-size: 20px; line-height: 25px; } .appointment-form-wrapper { margin-top: 42px; } } @media only screen and (min-width: 992px) and (max-width: 1370px) { #slider_1 { text-align: center; } #slider_1 .slider_item_container { min-height: 520px; } #slider_1 .item img { display: block; width: 100%; height: auto; } #slider_1 .slider-content { margin-top: 24px; } #slider_1 .slider-content h3 { font-size: 24px; } #slider_1 .slider-content h2 { font-size: 60px; line-height: 60px; } /*----- Banner ----*/ .section-banner { padding: 150px 0px; } .section-banner h2 { font-size: 60px; line-height: 60px; } .btn-theme { line-height: 24px; } .btn-success { line-height: 24px; } } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (max-width: 991px) { /*----- HELPER CLASS----*/ .no-padding-pricing-table, .no-padding { padding-left: 15px !important; padding-right: 15px !important; } .header-top .col-logo { text-align: center; } /*----- TOP BAR ----*/ .main-header .top-bar { display: none; } .main-header ul.top-bar-info { padding: 0 0 12px 0; margin: 0; text-align: center; } .main-header ul.top-bar-info li { margin-right: 0; display: inline-block; width: 49%; } .main-header ul.top-bar-info li:after { display: none; } .top-donation-btn-container { text-align: center; margin-top: 12px; margin-bottom: 24px; } a.logo { text-align: center; } .navbar-default .navbar-nav li ul.drop-down { top: 68px; } .navbar-default .navbar-header { width: 100%; text-align: center; clear: both; float: none; margin: 0; } .navbar-default .navbar-toggle span.icon-bar { height: 1px; } .navbar-default .navbar-right { float: none; padding: 0; margin: 0px auto; } .navbar-default .navbar .navbar-collapse { text-align: center; } .top-location-info { display: block; text-align: center; } .main-menu-container { float: none; } .main-header { background: #2C2C2C; position: relative; } .sticky-wrapper { background: rgba(0, 0, 0, 0.8); } .navbar-nav > li { margin-left: 0; } header.one-page .navbar-nav > li > a { padding: 15px 5px; font-size: 15px; padding-bottom: 22px; } /*----- MENU 2 Style----*/ .main-header-2 { clear: both; } .main-header-2 .logo { margin-top: 0px; margin-bottom: 0px; display: inline; } .main-header-2 .logo a { display: inline !important; } .main-header-2 .logo a img { display: inline-block; } .main-header-2 .header-top .header-icon-box { margin: 12px 0; } .main-header-2 .btn-header-cta.margin-top-36 { margin-top: 12px !important; } .main-header-2 .navbar-contact { width: auto; margin-top: -200px; position: absolute; right: 94px; } #slider_1 { text-align: center; } #slider_1 .slider_item_container { min-height: 460px; } #slider_1 .item img { display: block; width: 100%; height: auto; } #slider_1 .slider-content { top: 50%; transform: translateY(-48%); } #slider_1 .slider-content i.icon:after, #slider_1 .slider-content i.icon:before { width: 100px; line-height: 100px; height: 100px; font-size: 60px; margin-bottom: 20px; } #slider_1 .slider-content h2 { font-size: 42px; line-height: 48px; padding-bottom: 0px; margin-bottom: 16px; } #slider_1 .slider-content h2:after { display: none; } #slider_1 .slider-content h3 { display: none; } #slider_1 .slider-content a.banner-video-icon { border: 2px solid #f2f2f2; color: #5ac4de; width: 60px; height: 60px; font-size: 24px; line-height: 55px; margin: 0 auto 12px; } #slider_1 .slider-content a.banner-video-icon > i { margin-left: 6px; } #slider_1 .slider-content a.banner-video-icon:hover { border: 2px solid #5ac4de; } .page-header { padding: 80px 0; } .main-sidebar { width: 100%; border: 0px solid transparent; } .logo { text-align: center; } .section-heading-wrapper, .section-heading-wrapper-alt { clear: both; } .section-heading-wrapper h2.heading-alt-style, .section-heading-wrapper-alt h2.heading-alt-style, .section-heading-wrapper h4.heading-alt-style, .section-heading-wrapper-alt h4.heading-alt-style { font-size: 36px; line-height: 42px; } .section-heading-wrapper h2.subheading-alt-style, .section-heading-wrapper-alt h2.subheading-alt-style, .section-heading-wrapper h4.subheading-alt-style, .section-heading-wrapper-alt h4.subheading-alt-style { font-weight: 400; font-size: 16px; line-height: 24px; } /*----- About Us. ----*/ .about-us-info-block { padding: 52px 36px; } .about-us-info { margin-top: 24px; } .about-us-container { width: auto; padding: 24px 12px; margin: 0px 0; } .about-us-slogan { margin-top: 0px; font-size: 32px; line-height: 42px; } /*----- Appointment Form ----*/ .appointment-form-wrapper { margin-top: 42px; margin-bottom: 42px; } /*----- PROCESS BLOCK ----*/ .process-step-1, .process-step-2 { margin-bottom: 24px; } /*----- COUNTER BLOCK ----*/ .counter-block-1, .counter-block-2 { margin-bottom: 24px; } /*----- PRICING TABLE ----*/ .price-table-layout-1 { margin-bottom: 24px; } /*----- TEAM LAYOUT ----*/ .team-layout-1 { margin-bottom: 24px; } .gallery-carousel .owl-controls { display: none; } /*----- CTA LAYOUT ----*/ .cta-layout-02 { text-align: center; } /*----- COUNTDOWN LAYOUT ----*/ #coming_countdown { font-size: 24px; } #coming_countdown .countdown_container span.count_number { font-size: 72px; line-height: 60px; } #coming_countdown .countdown_container span.count_text { font-size: 24px; line-height: 42px; } .footer-widget-area { padding: 42px 0 0 0; } .footer-widget { margin-bottom: 36px; } .footer-intro { display: none; } .copyright-text { text-align: center; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { .mobile-clear-both { clear: both; } .form-box1{ background-color:white !important; color:black !important; } /*----- HELPER CLASS----*/ .no-padding-pricing-table, .no-padding { padding-left: 15px !important; padding-right: 15px !important; } .logo-layout-2 [class^="col-"] { padding-left: 15px !important; padding-right: 15px !important; margin-left: -1px; margin-top: -1px; } .btn-theme { line-height: 18px; font-size: 14px; font-weight: 600; padding: 14px 20px; } /*----- TOP BAR ----*/ .main-header .top-bar { display: none; } .main-header ul.top-bar-info { padding: 0 0 12px 0; margin: 0; text-align: center; } .main-header ul.top-bar-info li { margin-right: 0; float: left; width: 50%; } .main-header ul.top-bar-info li:after { display: none; } .main-menu-container { float: none; } .navbar-default .navbar-toggle { margin-top: 22px; float: right; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .navbar-default .navbar-toggle span.icon-bar { color: #5ac4de; } .navbar-default .nav > li > a, .navbar-default header.one-page .navbar-nav > li > a { padding: 5px 15px; } .navbar-default .navbar-nav > li > a.link-active { background: none; } .navbar-default .navbar .navbar-right { width: 100%; text-align: left; } .navbar-default .navbar-collapse { background: #0d0d0d; padding: 15px 0; border: 0; box-shadow: none; } .navbar-default .pull-left { float: none !important; overflow: hidden; } .navbar-default .pull-right { float: none !important; } .navbar-default .navbar-nav li ul.drop-down, .navbar-default .navbar-nav li ul.drop-down li ul.drop-down.level3 { background: transparent; border: none; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); position: relative; width: auto; visibility: visible; opacity: 1; top: inherit; left: inherit; } .navbar-default .navbar-nav li ul.drop-down li a, .navbar-default .navbar-nav li ul.drop-down li ul.drop-down.level3 li a { background: none; color: #FFFFFF; font-size: 14px; text-transform: uppercase; padding: 4px 20px; } .navbar-default .navbar-nav li ul.drop-down li a:hover, .navbar-default .navbar-nav li ul.drop-down li ul.drop-down.level3 li a:hover { color: #FFFFFF; } .navbar-default .navbar-nav li ul.drop-down li.drop a { color: #FFFFFF; } .navbar-default .navbar-nav { margin: 0px; width: 100%; text-align: left; background: rgba(0, 0, 0, 0.7); } .navbar-default .navbar-nav li a { font-weight: bold; color: #5ac4de; } .navbar-default .navbar-nav .drop-down li a { color: #FFFFFF; } .navbar-default .navbar-nav li:hover > ul.drop-down { position: initial; } a.nav-btn-highlight { position: absolute; left: -5px; } /*----- MENU STYLE 02 ----*/ .btn-header-cta { padding: 6px 12px; } .main-header-2 .navbar-default .navbar-toggle { margin-top: 8px; margin-bottom: 12px; float: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .main-header-2 .navbar-default .navbar-toggle span.icon-bar { color: #5ac4de; } .main-header-2 .navbar-default .navbar-header { width: 100%; text-align: center; clear: both; margin: 0; position: absolute; top: 0; left: 0; } .main-header-2 .navbar-default .navbar-nav > li > a { padding: 6px 22px; } .main-header-2 .navbar-default header.one-page .navbar-nav > li > a { padding: 5px 15px; } .main-header-2 .navbar-default .navbar-nav > li > a.link-active { background: none; } .main-header-2 .navbar-default .navbar .navbar-right { width: 100%; text-align: left; } .main-header-2 .navbar-default .navbar-collapse { margin-top: 48px; background: #0d0d0d; padding: 0 0 16px 0; border: 0; position: absolute; width: 100%; z-index: 100; top: 0; } .main-header-2 .navbar-default .pull-left { float: none !important; overflow: hidden; } .main-header-2 .navbar-default .pull-right { float: none !important; } .main-header-2 .navbar-default .navbar-nav li ul.drop-down, .main-header-2 .navbar-default .navbar-nav li ul.drop-down li ul.drop-down.level3 { background: transparent; border: none; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); position: relative; width: auto; visibility: visible; opacity: 1; top: inherit; left: inherit; } .main-header-2 .navbar-default .navbar-nav li ul.drop-down li a, .main-header-2 .navbar-default .navbar-nav li ul.drop-down li ul.drop-down.level3 li a { background: none; color: #FFFFFF; font-size: 14px; text-transform: inherit; padding: 4px 20px; } .main-header-2 .navbar-default .navbar-nav li ul.drop-down li a:hover, .main-header-2 .navbar-default .navbar-nav li ul.drop-down li ul.drop-down.level3 li a:hover { color: #FFFFFF; } .main-header-2 .navbar-default .navbar-nav { margin: 0px; width: 100%; text-align: left; background: rgba(0, 0, 0, 0.7); } .main-header-2 .navbar-default .navbar-nav li a { font-weight: bold; color: #5ac4de; } .main-header-2 .navbar-default .navbar-nav .drop-down li a { color: #FFFFFF; } .main-header-2 .navbar-default .navbar-nav li:hover > ul.drop-down { position: initial; } .main-header-2 .logo { margin-top: 20px; margin-bottom: 12px; display: inline; } .main-header-2 .logo a { display: block !important; } .main-header-2 .logo a img { display: inline; text-align: center; padding: 0; margin: 0; } .main-header-2 .navbar-contact { display: none; } .logo { text-align: center; } .main-header { background: #2C2C2C; position: relative; } .sticky-wrapper { background: rgba(0, 0, 0, 0.8); } .stuck { position: initial; } .section-content-block { padding: 60px 0; } .section-curve-secondary-overlary, .section-curve-primary-overlary, .section-curve-white-overlary { padding: 60px 0 82px 0; } .section-heading-wrapper h2, .section-heading-wrapper-alt h2 { font-size: 32px; font-weight: 400; } .section-heading-wrapper h2.heading-alt-style, .section-heading-wrapper-alt h2.heading-alt-style, .section-heading-wrapper h4.heading-alt-style, .section-heading-wrapper-alt h4.heading-alt-style { font-size: 36px; line-height: 42px; } .section-heading-wrapper h2.subheading-alt-style, .section-heading-wrapper-alt h2.subheading-alt-style, .section-heading-wrapper h4.subheading-alt-style, .section-heading-wrapper-alt h4.subheading-alt-style { font-weight: 400; font-size: 16px; line-height: 24px; } .page-header { padding: 50px 0; } .page-header h3 { text-align: center; } .page-header .page-breadcrumb { text-align: center; } #slider_1 .slider_item_container { min-height: 400px; } #slider_1 .slider-content { text-align: center; top: 50%; transform: translateY(-55%); } #slider_1 .slider-content i.icon:after, #slider_1 .slider-content i.icon:before { width: 100px; line-height: 100px; height: 100px; font-size: 60px; margin-bottom: 20px; } #slider_1 .slider-content h2 { font-size: 42px; line-height: 46px; padding-bottom: 0px; margin-bottom: 16px; } #slider_1 .slider-content h2:after { display: none; } #slider_1 .slider-content h3 { display: none; } #slider_1 .slider-content a.banner-video-icon { border: 2px solid #f2f2f2; color: #5ac4de; width: 60px; height: 60px; font-size: 24px; line-height: 55px; margin: 0 auto 12px; } #slider_1 .slider-content a.banner-video-icon > i { margin-left: 6px; } #slider_1 .slider-content a.banner-video-icon:hover { border: 2px solid #5ac4de; } #slider_1 .slider-content .slider-button { margin-top: 16px; } #slider_1 .slider-content .slider-button a.btn-slider { font-size: 14px; display: inline-block; height: 42px; line-height: 24px; padding-left: 24px; padding-right: 24px; } .section-banner { padding: 130px 0px; } .section-banner .banner-content { transform: translateY(-30px); } .section-banner .banner-content h2 { font-size: 36px; line-height: 42px; } .section-banner .banner-content h3 { display: none; } /*----- About Us. ----*/ .about-us-info-block { padding: 12px 36px; } .about-us-info { margin: 0; } .about-us-container { width: auto; padding: 24px 12px; margin: 0px 0; } .about-us-slogan { margin-top: 0px; font-size: 32px; line-height: 42px; } /*----- PROCESS BLOCK ----*/ .process-step-1, .process-step-2 { margin-bottom: 24px; } /*----- COUNTER BLOCK ----*/ .counter-block-1, .counter-block-2 { margin-bottom: 24px; } /*----- PRICING TABLE ----*/ .price-table-layout-1 { margin-bottom: 24px; } /*----- TEAM LAYOUT ----*/ .team-layout-1 { margin-bottom: 24px; } .section-cta .cta-content h2 { font-size: 28px; line-height: 32px; } .section-cta .cta-content h4 { font-size: 18px; } .section-cta .cta-content h4 span { font-size: 22px; } .cta-layout-01 h4 { font-size: 42px; line-height: 48px; } .appointment-form-wrapper { margin: 48px 0 24px 0 !important; padding: 0px 5px 28px; } .appointment-form-wrapper h3 { font-weight: 600; margin: 0 -5px 32px; position: relative; } .appoinment-form { padding: 0 0px; } /*----- COUNTDOWN LAYOUT ----*/ #coming_countdown { font-size: 24px; } #coming_countdown .countdown_container span.count_number { font-size: 50px; line-height: 40px; } #coming_countdown .countdown_container span.count_text { font-size: 18px; line-height: 42px; } .section-home-blog .latest-news-container { margin-bottom: 30px; } /*----- FAQ LAYOUT ----*/ .faq-layout .faq-box .panel-heading [data-toggle="collapse"]::after { display: none; } .message-container-404 { margin: 48px 0; } .message-container-404 .text-404 { margin: 80px 0; } .message-container-404 .search-form-404 { padding: 5px; width: 100%; } .message-container-404 .message-text-404 { padding: 24px 0px; } .article-container-fix, .main-sidebar { width: 100%; margin-left: 0px; border: 0px solid transparent; } .post-details-container h3 { margin-top: 12px; } .post-box-container .bd-post-image-container { margin: 0 auto; } .image_gallery_carousel { margin-bottom: 48px; } a.btn-load-more { margin-bottom: -24px; margin-top: -16px; } .copyright-text { text-align: center; } .footer-widget-area { padding: 42px 0 0 0; } .footer-widget { margin-bottom: 36px; } .footer-intro { display: none; } .copyright-text { text-align: center; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (min-width: 0px) and (max-width: 479px) { /*----- HELPER CLASS----*/ .mobile-form{ display:block; } .pc-form{ display:none; } .no-padding-pricing-table, .no-padding { padding-left: 15px !important; padding-right: 15px !important; } .logo-layout-2 [class^="col-"] { padding-left: 15px !important; padding-right: 15px !important; margin-left: -1px; margin-top: -1px; } .main-header { background: #2C2C2C; position: relative; } .sticky-wrapper { background: rgba(0, 0, 0, 0.8); } /*----- TOP BAR ----*/ .main-header .top-bar { display: none; text-align: center; } .main-header ul.top-bar-info { padding: 0 0 12px 0; margin: 0; text-align: left; } .main-header ul.top-bar-info li { margin-right: 0; display: block; width: 100%; } .main-header ul.top-bar-info li:after { display: none; } .main-menu-container { float: none; } a.logo { text-align: center; width: 75%; } .navbar-default .navbar-toggle span.icon-bar { height: 1px; } .navbar-default .navbar-nav { margin: 0px; width: 100%; text-align: left; background: rgba(0, 0, 0, 0.7); } .navbar-default .navbar-nav li { margin-left: 0px; } .navbar-default .navbar-nav li a { font-weight: bold; color: #5ac4de; } .navbar-default .navbar-nav .drop-down { color: #FFFFFF; } .navbar-default .navbar-nav .drop-down li a { color: #FFFFFF; } a.nav-btn-highlight { position: absolute; left: 14px; display: inline-block !important; } .logo { text-align: center; } .section-heading-wrapper, .section-heading-wrapper-alt { margin-bottom: 0px; } .section-heading-wrapper h2, .section-heading-wrapper-alt h2 { font-size: 32px; font-weight: 400; } .section-content-block { padding: 32px 0; } .section-heading { font-size: 32px; line-height: 36px; font-weight: normal; margin-bottom: 24px; } .section-heading:after, .section-heading:before { display: none; } .section-subheading { display: none; } .page-header { padding: 80px 0; } .page-header h3 { font-size: 24px; line-height: 32px; /*margin: 0px 0px 80px 0px;*/ } /*----- HOME SLIDER ----*/ #slider_1 .slider_item_container { min-height: 320px; } #slider_1 .slider-content { top: 50%; transform: translateY(-55%); } #slider_1 .slider-content i.icon:after, #slider_1 .slider-content i.icon:before { width: 50px; line-height: 50px; height: 50px; font-size: 20px; margin: 40px 0 10px; } #slider_1 .slider-content h2 { font-size: 32px; line-height: 36px; padding-bottom: 0px; margin-bottom: 16px; } #slider_1 .slider-content h2:after { display: none; } #slider_1 .slider-content h3 { display: none; } #slider_1 .slider-content a.banner-video-icon { border: 2px solid #f2f2f2; color: #5ac4de; width: 60px; height: 60px; font-size: 24px; line-height: 55px; margin: 70px auto 10px; } #slider_1 .slider-content a.banner-video-icon > i { margin-left: 6px; } #slider_1 .slider-content a.banner-video-icon:hover { border: 2px solid #5ac4de; } #slider_1 .slider-content .slider-button { margin-top: 10px; } #slider_1 .slider-content .slider-button a.btn-slider { font-size: 14px; display: inline-block; height: 42px; line-height: 24px; padding-left: 24px; padding-right: 24px; } #slider_1 .slider-content a.btn + a.btn { margin-left: 0px; margin-top: 0px; } /*----- HOME BANNER ----*/ .section-banner { padding: 80px 0px; } .section-banner .banner-content { transform: translateY(-20px); } .section-banner .banner-content h2 { font-size: 32px; } .section-banner .banner-content h3 { display: none; } .section-banner .banner-content a.btn-slider { font-size: 14px; display: inline-block; height: 42px; line-height: 24px; padding-left: 24px; padding-right: 24px; } /*----- About Us. ----*/ .about-us-info-block { padding: 24px 36px; } .about-us-container { width: auto; padding: 24px 12px; margin: 0px 0; } .about-us-slogan { margin-top: 24px; font-size: 32px; line-height: 42px; } /*----- PROCESS BLOCK ----*/ .process-step-1, .process-step-2 { margin-bottom: 24px; } /*----- COUNTER BLOCK ----*/ .counter-block-1, .counter-block-2 { margin-bottom: 24px; } /*----- CTA ----*/ .cta-layout-01 h4, .cta-layout-02 h4, .cta-video-box h4 { font-size: 24px; line-height: 32px; } .cta-video-icon { width: 90px; height: 90px; font-size: 36px; line-height: 80px; } .testimony-layout-1 { padding: 24px 0px 24px; } .testimony-layout-1 p.testimony-text { font-size: 18px; line-height: 32px; } .testimonial-container { clear: both; } .testimonial-container.text-left { clear: both; } .testimonial-container.text-left .owl-dots { padding-left: 16px; } /*----- APPOINTMENT FORM ----*/ .appointment-form-wrapper { padding: 0; padding-bottom: 24px; clear: both; } .appointment-form-wrapper .appointment-form-heading { position: relative; background: #5ac4de; padding: 12px 24px 18px; margin: -1px -1px 48px -1px; text-align: center; } .appointment-form-wrapper .appointment-form-heading h3 { margin: 0; display: block; } .appointment-form-wrapper .appointment-form-heading h3:after { display: none; } .appointment-form-wrapper .appointment-form-heading span { float: none; display: block; margin-top: 12px; } .appointment-form-wrapper .appoinment-form { padding: 0 6px; } /*----- TEAM LAYOUT ----*/ .team-layout-1 { margin-bottom: 24px; } /*----- NEWSLETTER LAYOUT ----*/ .horizontal-newsletter .news-subscription button { font-size: 16px; width: 100px; } /*----- BLOG LAYOUT ----*/ .latest-news-container { border: 0px solid #CCCCCC; } .latest-news-container .news-content { padding: 12px 16px 24px; } /*----- FAQ LAYOUT ----*/ .faq-layout .faq-box .panel-heading [data-toggle="collapse"]::after { display: none; } /*----- COUNTDOWN LAYOUT ----*/ #coming_countdown { font-size: 24px; } #coming_countdown .countdown_container span.count_number { font-size: 50px; line-height: 40px; } #coming_countdown .countdown_container span.count_text { font-size: 14px; line-height: 42px; } /*----- LOGO LAYOUT ----*/ .logo-layout-1 .logo, .logo-layout-2 .logo { margin-top: 0px; } .message-container-404 { margin: 48px 0; } .message-container-404 .text-404 { margin: 80px 0; } .message-container-404 .search-form-404 { padding: 5px; width: 100%; } .message-container-404 .message-text-404 { padding: 24px 0px; } .about-footer { margin-bottom: 32px; padding-bottom: 22px; } .footer-widget-area { padding: 42px 0 0 0; } .footer-widget-area .textwidget i.fa { padding-top: 10px; } .footer-widget-area .textwidget p { padding-left: 30px; } .footer-widget { margin-bottom: 36px; } .footer-widget .footer-useful-links { clear: both; } .footer-widget .footer-useful-links li { width: 100%; float: none; } .footer-intro { display: none; } .copyright-text { text-align: center; } } /* Tab Portrait Size to Tab Landscape Size (devices and browsers) */ @media only screen and (min-width: 380px) and (max-width: 480px) { .xs-margin { margin-left: 20px; margin-right: 20px; } } @media only screen and (min-width: 480px) and (max-width: 600px) { .xs-margin { margin-left: 70px; margin-right: 70px; } } @media only screen and (min-width: 600px) and (max-width: 767px) { .xs-margin { margin-left: 120px; margin-right: 120px; } } .abt-section { background-image: url(http://www.otterswim.com.sg/wp-content/uploads/2019/11/otter-swim1.jpg) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; } .reason-text ol { margin: 0px 0px 0px 20px; padding: 0px; } .reason-text ol li { padding: 0px; margin: 0px; } .footer-widget-area .fa-contact { padding-top: 6px !important; } .schedule-img { border: 4px solid #5472d2; display: block; margin-left: auto; margin-right: auto; } .m-t-70 { margin-top: 70px; } .m-t-20 { margin-top: 20px; } .cta-layout-01 { padding: 26px 0; color: #646464; } .font-white { color: #ffff !important; font-weight: bold; } ul.top-bar-info { font-size:13px; } .otter_level_1 { background-image: linear-gradient(to right, #fea600, #fd7600); color: #fff; display: flex; padding: 40px; outline: 2px dashed #fff; outline-offset: -18px } .otter_level_2 { background-image: linear-gradient(to right, #00c4e9, #009acb); color: #fff; display: flex; padding: 40px; outline: 2px dashed #fff; outline-offset: -18px } .otter_level_3 { background-image: linear-gradient(to right, #00bdb4, #009c93); color: #fff; display: flex; padding: 40px; outline: 2px dashed #fff; outline-offset: -18px } .border-left-lg { border-left: 2px dashed #fff; } .otter_level_1 h4, .otter_level_1 h2 { color: #fff; } .otter_level_2 h4, .otter_level_2 h2 { color: #fff; } .otter_level_3 h4, .otter_level_3 h2 { color: #fff; } .otter_level_1 .cust-col { display: flex; padding:25px; webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .set-flex { display: flex; } .header-wrapper .nav>li>a { padding: 10px 10px; } @media only screen and (max-width: 767px) { .set-flex { display: block; } .border-left-lg { border-left: 0px dashed #fff; } #preloader span { left: 48%; top: 45%; } } .fix-icon-wa { background-color: #00da6e; position: fixed; top: 300px; transition: .2s; line-height: 1.3; width: 38px; height: 38px; text-align: center; right: 0; color: #fff; font-size: 28px; cursor: pointer; } .fix-icon-call { background-color: #00da6e; position: fixed; top: 250px; transition: .2s; line-height: 1.3; width: 38px; height: 38px; text-align: center; right: 0; color: #fff; font-size: 28px; cursor: pointer; } .icon-com { justify-content: center; align-items: center; display: flex; border-bottom-left-radius: 5px; border-top-left-radius: 5px; transition: .2s; position: fixed; line-height: 1.3; width: 38px; height: 38px; text-align: center; right: 0; color: #fff; font-size: 23px; z-index: 99; cursor: pointer; } a:hover, a:focus { color: #23527c; text-decoration: underline; } .icon-com:hover { background-color: #777; color: #fff; text-decoration: none; } .page-header.ninja { background-color: #0166b7; } .page-header.ninja:after { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); top: 0; left: 0; content: ''; } .page-header.ninja .container, .ninja-section .container { position:relative; z-index:2; } .ninja-section { background: #ddf1ff; } .ninja-section:before { position: absolute; width: 100%; height: 100%; background: rgba(221, 241, 255, 0.4); top: 0; left: 0; content: ''; } .ninja-section .block-heading-title { font-size: 40px; line-height: 50px; margin-bottom: 36px; position: relative; font-weight: 900; color: #005095; } .ninja-section .block-heading-title span { color: #31a2d8; } .ninja-section .block-heading-title sup { font-size: 20px; position: relative; top: -17px; vertical-align: top; } .ninja-section p { font-size: 21px; line-height: 1.6; font-weight: 900; color: #d11103; margin-bottom:5px; } .ninja-section p.blue { color: #005095; margin-top:0; margin-bottom: 15px; } .ninja-section .block-heading-title span.small-text { font-size: 22px; line-height: 1.6; margin: 25px 0; color: #333; font-weight: bold; } .flush { padding:0; } .mt-35 { margin-top: 35px; } .ninja-section .or { display:inline-block; font-size: 14px; line-height: 1.6; margin: 0px 12px; color: #333; font-weight:bold; vertical-align:middle; } .ninja-section .btn { border-radius:5px; } .ninja-section .btn .fa { margin-right: 5px; font-size: 20px; vertical-align: text-top; } .ninja-section .btn-theme:hover { background:#2f9cb7; } .ninja-section .btn-success:hover { background:#0b7809; } .hr-style { border-top: 1px solid #ccc; display: block; margin:80px 0; } .section-secondary-bgl { background:#f7f8f9 !important; } .d-flex { display:flex; } .align-items-center { align-items:center; } .hovr-scr .hovr-scale-base { border-radius: 14px; overflow: hidden; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .hovr-scr img { border-radius: 14px; } .hovr-scr img, .hovr-scr .hovr-scale-base { -webkit-transition: 1.2s cubic-bezier(.17,.85,.438,.99); -o-transition: 1.2s cubic-bezier(.17,.85,.438,.99); transition: 1.2s cubic-bezier(.17,.85,.438,.99); } .hovr-scr .hovr-scale-base { border-radius: 14px; overflow: hidden; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .hovr-scale-base img, .hovr-scr .hovr-scale-base { -webkit-transition: 1.2s cubic-bezier(.17,.85,.438,.99); -o-transition: 1.2s cubic-bezier(.17,.85,.438,.99); transition: 1.2s cubic-bezier(.17,.85,.438,.99); } .hovr-scr:hover .hovr-scale-base { -webkit-transform: scale(.97); -ms-transform: scale(.97); transform: scale(.97); } .hovr-scr:hover .hovr-scale-base img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .img-hovi:hover .hovr-scale-base { -webkit-transform: scale(.97); -ms-transform: scale(.97); transform: scale(.97); } .img-hovi:hover .hovr-scale-base img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .img-hovi .or-section-title h2 { font-size: 35px; } .visible-xs { display:none; } .img-block { display:inline-block; border-radius:50%; position:relative; width:80%; } span.col_blue { color: #005095; font-weight:bold; } .img-sign { position: absolute; bottom: -6px; left: -63px; max-width: 201px; } ul.custom-bullet-list.custom-icon.numbric-icon li:before { display:none; } ul.custom-bullet-list.custom-icon.numbric-icon li { padding-left: 39px; padding-bottom: 5px; } ul.custom-bullet-list.custom-icon.numbric-icon li .num { position: absolute; top: 6px; left: 0; width: 28px; line-height: 28px; text-align: center; background: #005095; color: #fff; border-radius: 50%; font-weight: 600; font-size: 13px; } footer .socials-div li a { margin-right: 12px; display: inline-block; } .str img { max-height: 90px; } .img-hovi img { transition:all .3s; top:0; position:relative; } .img-hovi:hover img { transition:all .3s; top:-10px; } .img-hovi.tdr img { max-height: 103px; margin-top: -13px; } .section-curve-primary-overlary.overlay-none:after { display:none; } .ninja-section p.normal { font-size: 16px; line-height: 30px; font-weight: 400; color: #333; margin: 12px 0 12px; } .block-heading-title.cust { font-size: 17px; line-height: 30px; margin-bottom: 20px; position: relative; } .block-heading-title.cust:before { position: absolute; content: ''; width: 48px; height: 2px; bottom: -10px; left: 50%; background: #5ac4de; margin-left: -24px; } @media only screen and (max-width: 767px) { .ninja-section .btn { width:100%; } .ninja-section .btn.btn-success { line-height: 18px; font-size: 14px; font-weight: 600; padding: 14px 20px; } .xs-text-center { text-align:center; } .ninja-section .or { margin: 5px 0px; width:100%; } .ninja-section iframe { margin-top:25px; } .d-flex { display:block; } .visible-xs { display:block; } .hidden-xs { display:none; } .img-sign { bottom: 15px; left: -49px; max-width: 150px; } .img-block { margin-bottom:40px; } .block-heading-title { font-size: 24px; line-height: 32px; } .ninja-section .block-heading-title { font-size: 31px; line-height: 38px; margin-top:10px; } }