/* * Catalysts theme - widget stylesheet. * * The footer widgets (ct_heading base, ct_text_editor, ct_image, ct_icon, * ct_contact_info, ct_ctf7) carry production's values, traced in * docs/css-chrome.md. The remaining ct_* widgets and the slick carousel shell * carry production's values for the layouts the site data actually uses * (docs/css-widgets.md: per-selector production source, baseline targets, * harness results, markup divergences). Mobile-first; breakpoints 576/768/992/1200. * Colour tokens: chrome tokens on :root in theme.css, widget-only tokens on :root here. */ /* 0. Widget-only tokens (values read from production theme.css, see docs/css-widgets.md) */ :root { --ctw-gradient: linear-gradient(to right, var(--ct-link), var(--ct-link-hover)); --ctw-gradient-btn: linear-gradient(90deg, var(--ct-link) 0%, var(--ct-link-hover) 50%, var(--ct-link)); --ctw-gradient-service-meta: linear-gradient(to top, rgba(115, 191, 67, 0.95), rgba(110, 216, 115, 0.95)); --ctw-shade-team8: linear-gradient(to top, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0)); --ctw-shade-service1: linear-gradient(to top, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0)); --ctw-shadow-elementor-btn: 0 7px 16px rgba(12, 12, 12, 0.22); --ctw-shadow-arrow: 0 1px 20px rgba(0, 8, 11, 0.14); --ctw-shadow-arrow-style2: 0 16px 16px rgba(12, 0, 51, 0.1); --ctw-shadow-team: 0 10px 21px rgba(34, 34, 34, 0.2); --ctw-shadow-social: 0 6px 16px rgba(103, 103, 103, 0.36); --ctw-shadow-card: 0 0 10px rgba(23, 23, 23, 0.08); --ctw-shadow-card-hover: 0 24px 18px rgba(23, 23, 23, 0.1); --ctw-shadow-post: 0 13px 29px rgba(0, 0, 0, 0.1); --ctw-shadow-post-hover: 0 20px 29px rgba(0, 0, 0, 0.2); --ctw-shadow-service1: 0 8px 40px rgba(12, 12, 12, 0.1); --ctw-shadow-service8-hover: 0 29px 32px rgba(0, 0, 0, 0.1); --ctw-arrow-bg-style2: #bbbbbb; --ctw-dot: #c6c6c6; --ctw-grey-e7: #e7e7e7; --ctw-grey-66: #666666; --ctw-team-bg: #eaeaea; --ctw-team-icon: #101010; --ctw-team-position: #c8c8c8; --ctw-counter-title: #aaa9ab; --ctw-list-desc: #636363; --ctw-history-text: #f6f6f6; --ctw-history-sub: #bcbcbc; --ctw-history-ring: #474747; --ctw-history-line: rgba(255, 255, 255, 0.3); --ctw-grid-desc: #f2f2f2; --ctw-brand-facebook-grid: #465bfa; --ctw-brand-youtube: #ff0000; --ctw-brand-skype: #1893ca; --ctw-brand-facebook-team8: #066ae5; --ctw-brand-twitter-team8: #04c1ff; --ctw-brand-dribbble-team8: #ff005a; --ctw-quote: #cccccc; --ctw-testimonial-text: #545454; --ctw-testimonial-position: #626262; --ctw-meta: #939393; --ctw-service-overlay: rgba(0, 14, 27, 0.83); --ctw-service-content: #d6d6d6; --ctw-grid8-bg: #fafafa; --ctw-grid8-border: #e9e7e7; --ctw-field-border-6: #e4eaff; } /* Shared: the hidden per-widget CSS holder (production's JS removes it; the theme's inline-css.js leaves it in the DOM, so it is hidden here) and the Elementor-context button shadow (prod L3464). */ .ct-inline-css { display: none; } .elementor a.btn { box-shadow: var(--ctw-shadow-elementor-btn); } /* 1. Slick carousel shell (prod L12150-L12435, L12671-L12688, L2576). The collapsed/revealed pair is the theme's own carousel.js contract (no production rule). */ .ct-slick-slider { opacity: 0; height: 0; overflow: hidden; transition: opacity 300ms linear 0ms; } .ct-slick-slider.catalysts-ready { opacity: 1; height: auto; overflow: visible; } .ct-slick-slider .ct-carousel-inner { margin: 0 -15px; } .ct-slick-slider .ct-carousel-inner .slick-slide { padding: 0 15px; } .slick-slider .slick-slide { outline: none; } .ct-slick-carousel .slick-arrow { width: 60px; height: 60px; color: var(--ct-submenu-text); cursor: pointer; transition: var(--ct-ease); border-radius: 60px; position: absolute; padding: 0; background-color: var(--ct-white); background-image: none; font-size: 0; bottom: 0; left: 50%; transform: translate(-50%, 0); box-shadow: var(--ctw-shadow-arrow); } .ct-slick-carousel .slick-arrow::before { font-family: var(--ct-font-icon); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; } .ct-slick-carousel .slick-arrow::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; border-radius: 60px; transition: var(--ct-ease); opacity: 0; background-color: var(--ct-link); background-image: var(--ctw-gradient); } .ct-slick-carousel .slick-arrow:hover { color: var(--ct-white); box-shadow: none; } .ct-slick-carousel .slick-arrow:hover::after { opacity: 1; } .ct-slick-carousel .slick-arrow.slick-disabled { cursor: no-drop; } .ct-slick-carousel .slick-prev { margin-left: -40px; } .ct-slick-carousel .slick-prev::before { content: "\f104"; } .ct-slick-carousel .slick-next { margin-left: 40px; } .ct-slick-carousel .slick-next::before { content: "\f105"; } .ct-slick-carousel[data-arrows="true"] { padding-bottom: 95px; } .ct-slick-carousel.slick-arrow-style2 .slick-arrow { width: 53px; height: 53px; background-color: var(--ctw-arrow-bg-style2); color: var(--ct-white); background-size: inherit; box-shadow: none; } .ct-slick-carousel.slick-arrow-style2 .slick-arrow::after { box-shadow: var(--ct-shadow-btn); } .ct-slick-carousel.nav-middle1.ct-slick-carousel[data-arrows="true"] { padding-bottom: 0; } .ct-slick-carousel.nav-middle1.ct-slick-carousel[data-arrows="true"] .slick-arrow { top: 50%; transform: translate(0, -50%); margin-left: 0; margin-right: 0; } .ct-slick-carousel.nav-middle1.ct-slick-carousel[data-arrows="true"] .slick-arrow.slick-prev { left: 30px; z-index: 9; } .ct-slick-carousel.nav-middle1.ct-slick-carousel[data-arrows="true"] .slick-arrow.slick-next { right: 30px; left: auto; z-index: 9; } @media (min-width: 1200px) { .ct-slick-carousel.nav-middle1.ct-slick-carousel[data-arrows="true"] .slick-arrow.slick-prev { left: -14px; } .ct-slick-carousel.nav-middle1.ct-slick-carousel[data-arrows="true"] .slick-arrow.slick-next { right: -14px; } } .slick-dots { margin: 45px 0 0; list-style: none; display: flex; justify-content: center; align-items: center; } .slick-dots li { display: flex; margin: 0 8px; line-height: 1; } .slick-dots li button { height: 6px; width: 6px; line-height: 6px; text-indent: -9999px; padding: 0; border-radius: 100%; box-shadow: none; background-color: var(--ctw-dot); z-index: 1; } .slick-dots li:not(.slick-active) button { background-image: none; } .slick-dots li.slick-active button { transform: scale(2); } .dot-style-u7 .slick-dots { margin-top: 40px; } .dot-style-u7 .slick-dots li { margin: 0 4px; } .dot-style-u7 .slick-dots li button { background-color: var(--ctw-grey-e7); width: 23px; height: 9px; border-radius: 9px; } .dot-style-u7 .slick-dots li.slick-active button { background-color: var(--ct-link); background-image: none; transform: scale(1.3); width: 9px; } /* Gradient text (prod L2617 group, the members this site renders). Chromium needs the -webkit- pair. */ .text-gradient, .ct-list.style1 .ct-list-icon i, .ct-blog-carousel-layout1 .entry-readmore a, .ct-counter .ct-counter-inner .icon-color-gradient i { background-color: transparent; background-image: var(--ctw-gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ct_heading - base (prod L18084-L18100, L18437-L18450, L18642-L18650). Footer headings are h3.item--title; Elementor sets their size per widget. */ .ct-heading { position: relative; } .ct-heading.sub-style2 { display: inline-flex; align-items: center; } .ct-heading .item--sub-title { font-weight: 600; display: inline-block; color: var(--ct-ink); font-family: var(--ct-font-heading); } .ct-heading .item--sub-title::before { opacity: 0; } .ct-heading .item--title { margin-bottom: 0; } .ct-heading .item--title strong { font-weight: 700; } .ct-heading .item--title .d-inline-block { padding-bottom: 3px; } .ct-heading .item--title small { font-size: inherit; line-height: inherit; font-weight: normal; } .ct-heading h3.item--title { font-size: 30px; line-height: 1.33333; } @media (min-width: 992px) { .ct-heading h3.item--title { font-size: 36px; } } @media (max-width: 767px) { .ct-heading .item--title br { display: none; } } .ct-heading .item--title cite, .ct-heading .item--title i { font-family: 'Playfair Display', serif; font-style: normal; } /* ct_heading - variants in use: sub-title style1 (show/hide line, line-sub-preset2), st-line-left1, st-line-left3, st-line-top1, inline b/cite/i colours (prod L18100-L18135, L18428-L18434, L18451-L18490, L18528-L18592, L18621-L18637, L18657, L18686, L18706). Production's 1024px step is folded into the 1199/1200 breakpoint (no baseline viewport sits in 1025-1199). */ .ct-heading .item--sub-title.style1 { padding-left: 75px; position: relative; } .ct-heading .item--sub-title.style1::before { content: ''; width: 50px; height: 3px; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); background-color: var(--ct-link); background-image: var(--ctw-gradient); } .ct-heading .item--sub-title.style1.hide-line { padding-left: 0; } .ct-heading .item--sub-title.show-line::before { opacity: 1; } .ct-heading .item--sub-title.hide-line { padding-left: 0; } .ct-heading .item--sub-title.hide-line::before { display: none; } .line-sub-preset2 .ct-heading .item--sub-title.style1::before { background-color: var(--ct-link); background-image: var(--ctw-gradient); } .ct-heading .item--title span.d-inline-block, .ct-heading .item--title span.slide-in-container { color: inherit; } .ct-heading .item--title.st-line-left1 span { padding-left: 0; padding-top: 23px; position: relative; display: inline-block; } .ct-heading .item--title.st-line-left1 span i { width: 54px; height: 3px; position: absolute; top: 0; left: 0; background-color: var(--ct-link); background-image: var(--ctw-gradient); } @media (min-width: 576px) { .ct-heading .item--title.st-line-left1 span { padding-left: 68px; padding-top: 0; } .ct-heading .item--title.st-line-left1 span i { width: 40px; top: 21px; } } @media (min-width: 1200px) { .ct-heading .item--title.st-line-left1 span { padding-left: 82px; } .ct-heading .item--title.st-line-left1 span i { width: 54px; } } .ct-heading .item--title.st-line-left3 span { padding-left: 58px; position: relative; display: inline-block; } .ct-heading .item--title.st-line-left3 span .dot-shape { width: 40px; height: 40px; position: absolute; top: 11px; left: 0; } .ct-heading .item--title.st-line-left3 span .dot-shape i { height: 11px; width: 11px; border-radius: 11px; background-color: var(--ct-black); position: absolute; top: 0; left: 0; } .ct-heading .item--title.st-line-left3 span .dot-shape i:nth-child(2) { background-color: var(--ct-link); left: 14px; } .ct-heading .item--title.st-line-left3 span .dot-shape i:nth-child(3) { left: 30px; } .ct-heading .item--title.st-line-left3 span .dot-shape i:nth-child(4) { top: 14px; left: 14px; } .ct-heading .item--title.st-line-left3 span .dot-shape i:nth-child(5) { top: 14px; left: 30px; } .ct-heading .item--title.st-line-left3 span .dot-shape i:nth-child(6) { background-color: var(--ct-link); top: 28px; left: 30px; } .ct-heading.item-st-line-left3 .item--sub-title { color: var(--ct-link); font-weight: 700; } .ct-heading.ct-heading-left.item-st-line-left3 .item--sub-title { padding-left: 58px; } .ct-heading .item--title.st-line-top1 .ct-heading-divider { height: 3px; margin-bottom: 20px; } .ct-heading .item--title.st-line-top1 .ct-heading-divider span { width: 54px; height: 3px; display: inline-block; vertical-align: top; background-color: var(--ct-link); background-image: var(--ctw-gradient); } .ct-heading .item--title b { color: var(--ct-link); font-weight: inherit; } .ct-heading .item--title meta, .ct-heading .item--title span span { color: var(--ct-link-hover); } .ct-heading .item--title cite, .ct-heading .item--title i { color: var(--ct-link); } .ct-heading span.item--title { display: block; } /* ct_text_editor (prod L48925; the drop-cap variants are a later pass) */ .ct-text-editor p:last-child { margin-bottom: 0; } .ct-text-editor .first-letter { float: left; font-size: 3em; line-height: 1; margin: 6px 10px 0 0; } /* EXTENSION POINT: production ".ct-text-editor .first-letter.style2/.style3" (L41498-L41530). */ /* ct_image - production has no rule for .ct-image-single itself; Elementor per-widget CSS sets text-align and max-height. */ .ct-image-single .ct-image-bg { min-height: 200px; } /* ct_icon - social row (prod L17988-L18040). Baseline about/desktop: each 33x37 (29px disc + 4px right/top/bottom margins), style2 shifts the row -10px and clears the disc background. */ .ct-icon1 { margin: 0; list-style: none; } .ct-icon1 a { display: inline-block; } .ct-icon1 a i { height: 29px; width: 29px; line-height: 29px; display: inline-block; border-radius: 29px; font-size: 17px; color: var(--ct-link); background-color: var(--ct-white); text-align: center; margin-right: 4px; margin-top: 4px; margin-bottom: 4px; } .ct-icon1 a i.fa-facebook-f { color: var(--ct-brand-facebook); } .ct-icon1 a i.fa-facebook-f::before { content: "\f39e"; } .ct-icon1 a i.fa-dribbble { color: var(--ct-brand-dribbble); } .ct-icon1 a i.fa-twitter { color: var(--ct-brand-twitter); } .ct-icon1 a i.fa-behance { color: var(--ct-brand-behance); } .ct-icon1 a:hover { transform: translateY(-4px); } .ct-icon1.style2 { margin-left: -10px; } .ct-icon1.style2 a i { background-color: transparent; } /* EXTENSION POINT: production ".ct-icon1.style3" (L18045-L18060). */ /* ct_contact_info - style1 (prod L18716-L18740). Colour and size in the footer come from the Elementor widget CSS (#666666, 14px/24px). */ .ct-contact-info1 { list-style: none; margin-bottom: 0; font-size: 14px; line-height: 24px; } .ct-contact-info1 i { color: var(--ct-link); } .ct-contact-info1 li { display: flex; flex-wrap: nowrap; } .ct-contact-info1 li + li { margin-top: 10px; } .ct-contact-info1 li a, .ct-contact-info1 li a:hover { color: inherit; } .ct-contact-info1 .ct-contact-icon { display: inline-block; margin-right: 10px; } /* EXTENSION POINT: production ".ct-contact-info1.style2", ".ct-contact-info2/3" (L18741+). */ /* ct_text_editor drop caps (prod L41498-L41521). No instance in the site data uses them. */ .ct-text-editor .first-letter { font-weight: 600; display: inline-block; float: left; margin: 5px 20px 0 0; width: 45px; height: 45px; text-align: center; color: var(--ct-menu-mobile); font-size: 40px; line-height: 45px; } .ct-text-editor .first-letter.style2 { font-size: 25px; border-radius: 100%; background-color: var(--ct-ink); color: var(--ct-white); } .ct-text-editor .first-letter.style3 { background-color: var(--ct-link); color: var(--ct-white); font-size: 25px; } /* ct_team_details (prod L26965-L27217). Production's 1024px step (max-width 970 -> 100%) is kept at 1024/1025: folding it into 1200 made the panel wider at 1040-1180 and the page 24-59px shorter than production there. The content panel's background is the theme asset assets/images/bg-team-details.png (602x541), painted via .bg-image as production does. */ .ct-team-details { max-width: 100%; margin: auto; position: relative; overflow: hidden; display: flex; flex-wrap: wrap; background-color: var(--ctw-team-bg); border-radius: 7px; box-shadow: var(--ctw-shadow-team); } .ct-team-details .ct-team-image { width: 100%; min-height: 300px; } .ct-team-details .ct-team-icon { border-radius: 7px 0 0 7px; background-color: var(--ct-field-border); width: 80px; min-width: 80px; position: relative; } .ct-team-details .ct-team-icon i { font-size: 24px; color: var(--ctw-team-icon); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ct-team-details .ct-team-holder { display: flex; flex-wrap: nowrap; padding-bottom: 12px; } .ct-team-details .ct-team-contact { list-style: none; margin-bottom: 0; padding: 0; display: flex; flex-wrap: wrap; font-family: var(--ct-font-heading); } .ct-team-details .ct-team-contact li { font-size: 16px; line-height: 24px; color: var(--ct-submenu-text); margin-top: 10px; margin-right: 0; width: 100%; padding-left: 30px; position: relative; } .ct-team-details .ct-team-contact li i { position: absolute; top: 4px; left: 0; } .ct-team-details .ct-team-social { display: flex; flex-wrap: wrap; align-items: center; } .ct-team-details .ct-team-social .ct-team-button { margin-top: 22px; margin-right: 30px; } .ct-team-details .ct-team-social .ct-team-button .btn { line-height: 61px; } .ct-team-details .ct-team-social .ct-team-social-list { margin-top: 22px; flex-grow: 1; } .ct-team-details .ct-team-social .ct-team-social-list a { display: inline-block; } .ct-team-details .ct-team-social .ct-team-social-list a i { height: 36px; width: 36px; line-height: 36px; display: inline-block; border-radius: 36px; font-size: 18px; color: var(--ct-link); background-color: var(--ct-white); text-align: center; margin: 8px 10px 8px 0; box-shadow: var(--ctw-shadow-social); } .ct-team-details .ct-team-social .ct-team-social-list a i.fa-facebook-f { color: var(--ct-brand-facebook); } .ct-team-details .ct-team-social .ct-team-social-list a i.fa-dribbble { color: var(--ct-brand-dribbble); } .ct-team-details .ct-team-social .ct-team-social-list a i.fa-twitter { color: var(--ct-brand-twitter); } .ct-team-details .ct-team-social .ct-team-social-list a i.fa-behance { color: var(--ct-brand-behance); } .ct-team-details .ct-team-social .ct-team-social-list a:hover { transform: translateY(-4px); } .ct-team-details .ct-team-meta { background-color: var(--ct-black); padding: 21px 20px; border-radius: 0 7px 7px 0; flex-grow: 1; } .ct-team-details .ct-team-meta .ct-team-title { margin-bottom: 0; font-size: 18px; color: var(--ct-white); } .ct-team-details .ct-team-meta .ct-team-position { font-size: 14px; color: var(--ctw-team-position); } .ct-team-details .ct-team-content { width: 100%; padding: 34px 20px 30px 20px; background-image: url(../images/bg-team-details.png); } @media (min-width: 576px) { .ct-team-details .ct-team-image { width: 42%; min-height: 0; } .ct-team-details .ct-team-content { width: 58%; padding-left: 30px; } } @media (min-width: 768px) { .ct-team-details .ct-team-image { width: 38%; } .ct-team-details .ct-team-icon { width: 110px; min-width: 110px; } .ct-team-details .ct-team-icon i { font-size: 30px; } .ct-team-details .ct-team-holder { padding-bottom: 22px; } .ct-team-details .ct-team-contact li { margin-top: 20px; margin-right: 20px; width: auto; } .ct-team-details .ct-team-meta { padding-left: 30px; padding-right: 30px; } .ct-team-details .ct-team-meta .ct-team-title { font-size: 24px; } .ct-team-details .ct-team-meta .ct-team-position { font-size: 16px; } .ct-team-details .ct-team-content { width: 62%; padding-bottom: 40px; padding-left: 50px; padding-right: 40px; } } @media (min-width: 992px) { .ct-team-details .ct-team-contact { padding: 0 10px 0 28px; } .ct-team-details .ct-team-contact li { margin-right: 30px; } .ct-team-details .ct-team-meta { padding-left: 50px; padding-right: 50px; } .ct-team-details .ct-team-content { padding-left: 95px; padding-right: 70px; } } @media (min-width: 1025px) { .ct-team-details { max-width: 970px; } } /* ct_counter layout 4 (prod L34732-L34750). Icon colour/size and title colour/size come from Elementor's per-widget CSS; the icon gradient from the widget's inline CSS. */ .ct-counter-layout4 .ct-counter-inner { display: flex; flex-wrap: nowrap; } .ct-counter-layout4 .ct-counter-icon { margin-right: 30px; line-height: 1; margin-top: 6px; } .ct-counter-layout4 .ct-counter-icon i { color: var(--ct-link-hover); font-size: 54px; } .ct-counter-layout4 .ct-counter-title { font-size: 18px; line-height: 24px; color: var(--ctw-counter-title); } .ct-counter-layout4 .ct-counter-number { display: flex; flex-wrap: wrap; font-size: 40px; color: var(--ct-white); line-height: 1; font-family: var(--ct-font-heading); font-weight: 700; margin-bottom: 12px; } /* ct_list style1 / style2 (prod L17224-L17292). #whyCatalysts overrides are in theme.css (block 11). */ .ct-list { margin-left: 0; margin-bottom: 0; list-style: none; } .ct-list .ct-list-item { position: relative; display: flex; flex-wrap: nowrap; } .ct-list .ct-list-item h3 { display: block; font-size: 20px; line-height: 1.2; padding-bottom: 18px; margin-bottom: 0; } .ct-list .ct-list-item + .ct-list-item { margin-top: 12px; } .ct-list.style1 .ct-list-icon { line-height: 1; padding-bottom: 2px; margin-right: 18px; } .ct-list.style1 .ct-list-icon i { font-size: 22px; } .ct-list.style1 .ct-list-desc { font-size: 15px; color: var(--ctw-list-desc); } .ct-list.style2 { margin: -10px; font-size: 16px; line-height: 26px; font-weight: 600; color: var(--ct-ink); display: flex; flex-wrap: wrap; align-items: center; } .ct-list.style2 .ct-list-icon { margin-right: 10px; } .ct-list.style2 .ct-list-icon i::before { content: "\f101"; } .ct-list.style2 .ct-list-item { padding: 0 10px; width: 100%; margin-top: 20px; } .ct-list.style2.one-column .ct-list-item { width: 100%; } @media (min-width: 992px) { .ct-list .ct-list-item h3 { font-size: 24px; } } @media (min-width: 1200px) { .ct-list { margin-left: 15px; } .ct-list.style2 .ct-list-item { width: 50%; } } /* ct_fancy_box layout 1 style1 (prod L19398-L19461). Title/description colours come from Elementor's per-widget CSS. The hover icon slide (toRightFromLeft) is not in animate.css; omitted. */ .ct-fancy-box-layout1 { display: flex; flex-wrap: nowrap; } .ct-fancy-box-layout1 .item--shape { display: none; } .ct-fancy-box-layout1.style1 .item--icon { font-size: 24px; color: var(--ct-white); height: 63px; width: 63px; min-width: 63px; line-height: 63px; background-color: var(--ct-link); background-image: var(--ctw-gradient); text-align: center; border-radius: 63px; margin-right: 20px; position: relative; overflow: hidden; } .ct-fancy-box-layout1.style1 .item--icon i { display: inline-block; } .ct-fancy-box-layout1.style1 .item--title { margin-top: 4px; margin-bottom: 7px; font-size: 22px; font-weight: 600; } .ct-fancy-box-layout1.style1 .item--description { font-size: 16px; line-height: 1.625; } .ct-fancy-box-layout1.style1 .item--description a { color: inherit; } .ct-fancy-box-layout1.style1 .item--description a:hover { color: inherit; text-decoration: underline; } @media (min-width: 1200px) { .ct-fancy-box-layout1.style1 .item--icon { margin-right: 38px; } .ct-fancy-box-layout1.style1 .item--title { font-size: 24px; } } /* ct_cta layout 1 + .btn-white (prod L27222-L27273, L4010-L4058) */ .ct-cta1 { border-radius: 7px; background-color: var(--ct-ink); padding: 13px 30px; display: flex; flex-wrap: wrap; align-items: center; } .ct-cta1 > div { margin: 10px 0; } .ct-cta1 .item--holder { flex-grow: 1; margin-right: 30px; } .ct-cta1 .item--holder .item--title { font-family: var(--ct-font-heading); color: var(--ct-white); font-size: 22px; font-weight: 700; } .ct-cta1 .item--holder .item--desc { font-size: 18px; color: var(--ctw-dot); font-weight: 300; } .ct-cta1 .btn { padding: 0 22px; line-height: 55px; font-size: 15px; } .ct-cta1 .btn i { margin-left: 0; margin-right: 8px; } .ct-cta1 .btn::before, .ct-cta1 .btn::after { border-radius: inherit; } @media (min-width: 768px) { .ct-cta1 .btn { padding: 0 42px; } } @media (min-width: 1200px) { .ct-cta1 { padding-left: 59px; padding-right: 59px; } } .btn.btn-white { background-color: transparent; background-image: none; color: var(--ct-black); position: relative; z-index: 1; } .btn.btn-white::before, .btn.btn-white::after { content: ''; top: 0; left: 0; right: 0; bottom: 0; position: absolute; z-index: -1; transition: all 200ms linear 0ms; border-radius: 74px; } .btn.btn-white::before { background-color: var(--ct-white); } .btn.btn-white::after { opacity: 0; background-image: var(--ctw-gradient-btn); background-size: 300%, 1px; background-position: 0%; } .btn.btn-white:hover { color: var(--ct-white); } .btn.btn-white:hover::before { opacity: 0; } .btn.btn-white:hover::after { opacity: 1; } /* ct_history (prod L27281-L27475, dot background from the L2576 .bg-gradient group). The only instance sits in a section hidden at every viewport (0x0 in the baseline); unverified. */ .ct-history1 { max-width: 970px; margin: 0 auto; padding-top: 114px; padding-bottom: 140px; position: relative; direction: ltr; } .ct-history1::before { content: ''; width: 0; height: 100%; border-left: 1px dashed var(--ctw-history-line); position: absolute; top: 0; left: 0; right: 0; margin: auto; } .ct-history1 .ct-history--start { text-align: center; line-height: 101px; width: 101px; height: 101px; color: var(--ctw-history-text); font-size: 28px; font-weight: 700; border-radius: 101px; position: absolute; top: 0; left: 0; right: 0; margin: auto; z-index: 99; background-color: var(--ct-link); background-image: var(--ctw-gradient); } .ct-history1 .ct-history--image { max-width: 140px; border-radius: 140px; border: 2px solid var(--ctw-history-ring); position: absolute; bottom: 0; left: 0; right: 0; margin: auto; } .ct-history1 .ct-history--image img { border-radius: 140px; } .ct-history1 .ct-history--meta h3 { font-size: 16px; margin-bottom: 8px; color: var(--ctw-history-text); font-weight: 600; } .ct-history1 .ct-history--meta h3 a { color: inherit; } .ct-history1 .ct-history--meta h3 a:hover { color: var(--ct-link); } .ct-history1 .ct-history--meta span { font-size: 13px; line-height: 24px; color: var(--ctw-history-sub); } .ct-history1 .ct-history--item { padding-right: 40px; position: relative; z-index: 1; margin-bottom: 21px; } .ct-history1 .ct-history--item::before { content: ''; height: 0; width: 30px; border-bottom: 1px dashed var(--ctw-history-line); position: absolute; top: 15px; right: 0; z-index: -1; } .ct-history1 .ct-history--item::after { content: ''; width: 21px; height: 21px; border-radius: 21px; position: absolute; top: 4px; right: -11px; background-color: var(--ct-link); background-image: var(--ctw-gradient); } .ct-history1 .ct-history--odd .ct-history--item { text-align: right; } .ct-history1 .ct-history--odd .ct-history--item:nth-child(1) { margin-top: 80px; } .ct-history1 .ct-history--odd .ct-history--item:nth-child(2) { margin-bottom: 43px; } .ct-history1 .ct-history--odd .ct-history--item:nth-child(3) { margin-bottom: 98px; } .ct-history1 .ct-history--odd .ct-history--item:nth-child(4) { margin-bottom: 92px; } .ct-history1 .ct-history--even { text-align: left; } .ct-history1 .ct-history--even .ct-history--item { padding-right: 0; padding-left: 40px; } .ct-history1 .ct-history--even .ct-history--item::before { right: auto; left: 0; } .ct-history1 .ct-history--even .ct-history--item::after { right: auto; left: -11px; } .ct-history1 .ct-history--even .ct-history--item:nth-child(1) { margin-bottom: 59px; } .ct-history1 .ct-history--even .ct-history--item:nth-child(2) { margin-bottom: 80px; } .ct-history1 .ct-history--even .ct-history--item:nth-child(4) { margin-bottom: 108px; } .ct-history1 .ct-history--holder { display: flex; flex-wrap: wrap; } .ct-history1 .ct-history--holder > div { width: 50%; } @media (min-width: 576px) { .ct-history1 .ct-history--meta h3 { font-size: 18px; } .ct-history1 .ct-history--meta span { font-size: 14px; } } @media (min-width: 768px) { .ct-history1 { padding-top: 34px; } .ct-history1 .ct-history--meta h3 { font-size: 26px; } .ct-history1 .ct-history--meta span { font-size: 18px; line-height: 26px; } .ct-history1 .ct-history--item { padding-right: 124px; } .ct-history1 .ct-history--item::before { width: 114px; } .ct-history1 .ct-history--even .ct-history--item { padding-left: 124px; } } /* Grid shell (prod L11904-L11948). Production positions .ct-grid-masonry with isotope; the theme has no masonry script, so items flow as Bootstrap columns. .ct-grid-overlay has no production rule. */ .ct-grid { margin: 0 -15px; } .ct-grid .grid-sizer { visibility: hidden; min-height: 0; } .ct-grid .ct-grid-inner, .ct-grid .grid-item-inner { position: relative; } .ct-grid .item-featured a { display: block; } .ct-grid-inner.row { margin: 0; } /* ct_team_grid layout 3 (prod L26830-L26956). The hover overlay image (team-overlay.png) is a theme asset the theme does not ship; the gradient-less ::before keeps the hover structure. */ .ct-team-grid3 { text-align: center; } .ct-team-grid3 .item--image { position: relative; margin-bottom: 36px; } .ct-team-grid3 .item--image::before { content: ''; background-image: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0) 85%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center bottom; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: all 250ms linear 0ms; } .ct-team-grid3 .item--image a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; } .ct-team-grid3 .item--image img { width: 100%; } .ct-team-grid3 .item--image .item--desc { font-size: 16px; line-height: 24px; color: var(--ctw-grid-desc); padding: 50px 32px 32px; text-align: left; position: absolute; bottom: 0; left: 0; right: 0; z-index: 99; opacity: 0; transition: all 250ms linear 0ms; } .ct-team-grid3 .item--title { margin-bottom: 4px; font-size: 22px; } .ct-team-grid3 .item--position { color: var(--ctw-grey-66); transition: all 250ms linear 0ms; } .ct-team-grid3 .item--social { position: absolute; transition: all 250ms linear 0ms; opacity: 0; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); } .ct-team-grid3 .item--social a { font-size: 20px; display: inline-block; margin: 6px; } .ct-team-grid3 .item--social a .fa-facebook, .ct-team-grid3 .item--social a .fa-facebook-f { color: var(--ctw-brand-facebook-grid); } .ct-team-grid3 .item--social a .fa-twitter { color: var(--ct-brand-twitter); } .ct-team-grid3 .item--social a .fa-youtube-play, .ct-team-grid3 .item--social a .fa-youtube { color: var(--ctw-brand-youtube); } .ct-team-grid3 .item--social a .fa-skype { color: var(--ctw-brand-skype); } .ct-team-grid3 .item--holder { position: relative; min-height: 25px; } .ct-team-grid3 .item--inner { margin-bottom: 48px; } .ct-team-grid3 .item--inner:hover .item--image::before { opacity: 0.9; } .ct-team-grid3 .item--inner:hover .item--image .item--desc { opacity: 1; } .ct-team-grid3 .item--inner:hover .item--position { opacity: 1; transform: none; } .ct-team-grid3 .item--inner:hover .item--social { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* ct_service_grid layout 3 style1 (prod L29019-L29958; shared with service carousel 2). No visible instance in the baseline (initiatives: 0x0 at every viewport); unverified. */ .ct-service-grid3 .grid-item-holder { position: relative; } .ct-service-grid3 .grid-item-holder .item--readmore { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; } .ct-service-grid3 .grid-item-inner { margin-bottom: 30px; } .ct-service-grid3 .item--icon { line-height: 1; margin: 0 auto 13px auto; } .ct-service-grid3 .item--icon i { font-size: 62px; transition: all 200ms linear 0ms; } .ct-service-grid3 .item--icon-abs { line-height: 1; position: absolute; bottom: 0; right: 0; transition: all 200ms linear 0ms; } .ct-service-grid3 .item--icon-abs i { font-size: 70px; opacity: 0.45; } .ct-service-grid3 .item--title { font-size: 20px; margin-bottom: 14px; color: var(--ct-white); } .ct-service-grid3 .item--title a { color: inherit; } .ct-service-grid3 .item--title a:hover { color: inherit; } .ct-service-grid3 .item--content { font-size: 14px; line-height: 24px; color: var(--ct-white); } .ct-service-grid3 .grid-item-inner { background-color: var(--ct-ink); position: relative; border-radius: 5px; text-align: center; z-index: 1; } .ct-service-grid3 .grid-item-inner .grid-item-holder { padding: 40px 20px 38px; } .ct-service-grid3 .grid-item-inner .grid-item-holder .item--overlay { z-index: -1; top: 0; right: 0; width: 100%; height: 100%; background-color: var(--ct-link); background-image: var(--ctw-gradient); border-radius: 5px; position: absolute; transition: all 200ms linear 0ms; opacity: 0; } .ct-service-grid3 .grid-item-inner .grid-item-holder .item--overlay::before { content: ''; top: 11px; right: -11px; background-color: var(--ct-link); background-image: var(--ctw-gradient); border-radius: 5px; position: absolute; width: 100%; height: 100%; opacity: 0.5; } .ct-service-grid3 .grid-item-inner:hover .item--icon i { background-image: none; -webkit-text-fill-color: var(--ct-white); } .ct-service-grid3 .grid-item-inner:hover .item--icon-abs { opacity: 0; } .ct-service-grid3 .grid-item-inner:hover .grid-item-holder .item--overlay { opacity: 1; } @media (min-width: 1200px) { .ct-service-grid3 .item--content { font-size: 16px; line-height: 26px; } .ct-service-grid3 .grid-item-inner .grid-item-holder { padding-left: 28px; padding-right: 28px; } } /* ct_service_grid layout 8 style1 (prod L29527-L29599). Both instances render zero posts; the theme's item markup for this layout is unverified. */ .ct-service-grid8 .item--icon { line-height: 1; margin-bottom: 14px; } .ct-service-grid8 .item--icon i { font-size: 65px; color: var(--ct-link); } .ct-service-grid8 .item--icon * { display: inline-block; transition: 0.3s cubic-bezier(0.24, 0.74, 0.58, 1); } .ct-service-grid8 .item--title { font-size: 20px; margin-bottom: 12px; } .ct-service-grid8 .item--title a { color: inherit; } .ct-service-grid8 .item--title a:hover { color: inherit; } .ct-service-grid8 .item--content { font-size: 15px; line-height: 24px; color: var(--ct-black); padding: 0; } .ct-service-grid8 .item--readmore { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .ct-service-grid8 .grid-item-inner { background-color: var(--ctw-grid8-bg); border: 1px solid var(--ctw-grid8-border); border-radius: 5px; padding: 28px 30px 24px; text-align: center; margin-bottom: 44px; transition: 0.3s cubic-bezier(0.24, 0.74, 0.58, 1); position: relative; } .ct-service-grid8 .grid-item-inner:hover { box-shadow: var(--ctw-shadow-service8-hover); } .ct-service-grid8 .grid-item-inner:hover .item--title a { color: var(--ct-link); } .ct-service-grid8 .grid-item-inner:hover .item--icon * { transform: rotateY(360deg); } /* ct_service_grid layout 1 (prod L28601-L28810; shared with service carousel 1). Zero posts on production; the theme's item markup for this layout is unverified. */ .ct-service-grid1 .item--popup { display: none; } .ct-service-grid1 .item--featured { position: relative; } .ct-service-grid1 .item--featured::before { content: ''; width: 100%; height: 80%; left: 0; bottom: 0; position: absolute; background-image: var(--ctw-shade-service1); } .ct-service-grid1 .item--featured img { width: 100%; } .ct-service-grid1 .item--holder { display: flex; flex-wrap: wrap; align-items: center; background-color: var(--ct-white); position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 40px 20px; transform-origin: 50% 0%; transition: all 300ms linear 100ms; transform: perspective(500px) rotateX(0deg); } .ct-service-grid1 .item--holder .item--icon { line-height: 1; margin: 0 auto 26px auto; } .ct-service-grid1 .item--holder .item--icon i { font-size: 54px; } .ct-service-grid1 .item--holder .item--icon img { max-height: 80px; } .ct-service-grid1 .item--holder .item--icon-abs { position: absolute; bottom: -41px; right: -43px; line-height: 1; } .ct-service-grid1 .item--holder .item--icon-abs i { font-size: 126px; opacity: 0.4; } .ct-service-grid1 .item--holder .item--title { font-size: 20px; margin-bottom: 19px; } .ct-service-grid1 .item--holder .item--title a { color: inherit; } .ct-service-grid1 .item--holder .item--title a:hover { color: inherit; } .ct-service-grid1 .item--holder .item--content { margin-top: 17px; font-size: 14px; line-height: 24px; } .ct-service-grid1 .item--meta { position: absolute; top: 0; left: 0; width: 100%; background-color: var(--ct-ink); padding: 40px 30px; transform-origin: 50% 0%; transition: var(--ct-ease); opacity: 0; transform: perspective(500px) rotateX(-90deg); } .ct-service-grid1 .item--meta .item--title { font-size: 22px; margin-bottom: 21px; color: var(--ct-white); } .ct-service-grid1 .item--meta .item--title a { color: inherit; } .ct-service-grid1 .item--meta .item--title a:hover { color: inherit; } .ct-service-grid1 .grid-item-inner { text-align: center; background-color: var(--ct-link); margin-bottom: 64px; position: relative; overflow: hidden; box-shadow: var(--ctw-shadow-service1); padding-top: 8px; } .ct-service-grid1 .grid-item-inner::before { content: ''; height: 8px; position: absolute; top: 0; left: 0; width: 100%; background-color: var(--ct-link); background-image: var(--ctw-gradient); } .ct-service-grid1 .grid-item-inner .grid-item-over { position: relative; } .ct-service-grid1 .grid-item-inner:not(.active-featured) { min-width: 420px; } .ct-service-grid1 .grid-item-inner:hover .item--holder { opacity: 0; transform: perspective(500px) rotateX(-90deg); transition: var(--ct-ease); } .ct-service-grid1 .grid-item-inner:hover .item--meta { opacity: 1; transform: perspective(500px) rotateX(0deg); transition-delay: 0.2s; } @media (min-width: 768px) { .ct-service-grid1 .item--holder { padding-left: 30px; padding-right: 30px; } } @media (min-width: 1200px) { .ct-service-grid1 .item--holder { padding-left: 50px; padding-right: 50px; } .ct-service-grid1 .item--holder .item--icon i { font-size: 74px; } .ct-service-grid1 .item--holder .item--title { font-size: 22px; } .ct-service-grid1 .item--holder .item--content { font-size: inherit; line-height: inherit; } .ct-service-grid1 .item--meta { padding-left: 40px; padding-right: 40px; } } /* ct_team_carousel layout 8 (prod L42275-L42397) */ .ct-team-carousel8 .item--image { position: relative; } .ct-team-carousel8 .item--image::before { content: ''; height: 65%; position: absolute; bottom: 0; left: 0; width: 100%; background-image: var(--ctw-shade-team8); } .ct-team-carousel8 .item--image img { width: 100%; } .ct-team-carousel8 .item--title { font-size: 20px; color: var(--ct-white); margin-bottom: 4px; position: relative; padding-bottom: 12px; } .ct-team-carousel8 .item--title::before { content: ''; height: 3px; width: 78px; background-color: var(--ct-link); background-image: var(--ctw-gradient); position: absolute; bottom: 0; left: 0; } .ct-team-carousel8 .item--title a { color: inherit; } .ct-team-carousel8 .item--title a:hover { color: inherit; } .ct-team-carousel8 .item--position { color: var(--ct-white); } .ct-team-carousel8 .item--social { margin-top: 13px; } .ct-team-carousel8 .item--social a { display: inline-block; text-align: center; margin-right: 8px; } .ct-team-carousel8 .item--social a i { width: 36px; height: 36px; line-height: 36px; background-color: var(--ct-link); color: var(--ct-white); display: block; border-radius: 36px; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .ct-team-carousel8 .item--social a i.fa-facebook-f { background-color: var(--ctw-brand-facebook-team8); } .ct-team-carousel8 .item--social a i.fa-twitter { background-color: var(--ctw-brand-twitter-team8); } .ct-team-carousel8 .item--social a i.fa-dribbble { background-color: var(--ctw-brand-dribbble-team8); } .ct-team-carousel8 .item--social a i:hover { transform: translateY(-4px); } .ct-team-carousel8 .item--holder { position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px 20px; z-index: 99; } .ct-team-carousel8 .item--inner { position: relative; } @media (min-width: 992px) { .ct-team-carousel8 .item--title { font-size: 24px; } .ct-team-carousel8 .item--holder { padding-left: 30px; padding-right: 30px; } } @media (min-width: 1200px) { .ct-team-carousel8 .item--holder { padding-left: 40px; } } /* ct_service_carousel layout 12 (prod L41923-L42087) */ .ct-service-carousel12 .item--meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 20px; background-image: var(--ctw-gradient-service-meta); display: flex; flex-wrap: nowrap; align-items: center; transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1); } .ct-service-carousel12 .item--meta .item--icon { margin-right: 20px; line-height: 1; } .ct-service-carousel12 .item--meta .item--icon i { font-size: 42px; color: var(--ct-white); } .ct-service-carousel12 .item--meta .item--title { margin-bottom: 0; font-size: 20px; color: var(--ct-white); } .ct-service-carousel12 .item--holder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--ctw-service-overlay); padding: 40px 20px; transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1); transform: translateY(100%); } .ct-service-carousel12 .item--holder .item--head { display: flex; flex-wrap: nowrap; align-items: center; margin-bottom: 20px; } .ct-service-carousel12 .item--holder .item--icon { line-height: 1; margin-right: 20px; } .ct-service-carousel12 .item--holder .item--icon i { font-size: 42px; } .ct-service-carousel12 .item--holder .item--title { margin-bottom: 0; font-size: 20px; } .ct-service-carousel12 .item--holder .item--title a { color: var(--ct-white); } .ct-service-carousel12 .item--holder .item--title a:hover { color: var(--ct-white); } .ct-service-carousel12 .item--holder .item--content { color: var(--ctw-service-content); font-size: 15px; line-height: 24px; margin-bottom: 28px; height: 47px; overflow: hidden; } .ct-service-carousel12 .item--holder .item-readmore a { line-height: 47px; border-radius: 2px; padding: 0 23px; } .ct-service-carousel12 .grid-item-inner { position: relative; overflow: hidden; border-radius: 20px 20px 0 0; } .ct-service-carousel12 .grid-item-inner:hover .item--holder { transform: translateY(0%); opacity: 1; } .ct-service-carousel12 .grid-item-inner:hover .item--meta { transform: translateY(100%); opacity: 0; } @media (min-width: 768px) { .ct-service-carousel12 .item--meta { padding-left: 30px; padding-right: 30px; } .ct-service-carousel12 .item--meta .item--icon i { font-size: 48px; } .ct-service-carousel12 .item--meta .item--title { font-size: 22px; } .ct-service-carousel12 .item--holder { padding-left: 30px; padding-right: 30px; } .ct-service-carousel12 .item--holder .item--icon i { font-size: 46px; } .ct-service-carousel12 .item--holder .item--title { font-size: 22px; } .ct-service-carousel12 .item--holder .item--content { height: auto; overflow: visible; } } @media (min-width: 1200px) { .ct-service-carousel12 .item--meta { padding-left: 40px; } .ct-service-carousel12 .item--holder { padding: 45px 40px; } .ct-service-carousel12 .item--holder .item--content { font-size: inherit; line-height: inherit; margin-bottom: 35px; } } /* ct_testimonial_carousel layout 1, style1 (about) and style2 (home) (prod L23960-L24066, L42142-L42200). Production's ".item--inner { margin-bottom: 35 }" has no unit and is dropped by the browser; only margin-top 35 is carried. */ .ct-testimonial-carousel1 .item--inner { margin-top: 35px; } .ct-testimonial-carousel1 .ct-slick-carousel.slick-arrow-style2 .slick-arrow { margin-top: -10px; } .ct-testimonial-carousel1 .slick-dots { margin-top: 0; } .ct-testimonial-carousel1.style1 .item-icon i { font-size: 170px; color: var(--ctw-quote); position: absolute; top: -47px; left: 40px; font-family: 'Playfair Display', serif; font-weight: 900; font-style: normal; line-height: 1; } .ct-testimonial-carousel1.style1 .item--image { max-width: 124px; border: 2px solid var(--ctw-grey-e7); padding: 6px; border-radius: 124px; margin: 0 auto 18px auto; } .ct-testimonial-carousel1.style1 .item--image img { border-radius: 124px; filter: grayscale(100%); transition: var(--ct-ease); width: 100%; } .ct-testimonial-carousel1.style1 .item--title { font-size: 18px; margin-bottom: 0; } .ct-testimonial-carousel1.style1 .item--description { margin-bottom: 14px; } .ct-testimonial-carousel1.style1 .item--position { font-size: 15px; } .ct-testimonial-carousel1.style1 .item--inner { text-align: center; position: relative; background-color: var(--ct-white); border-radius: 4px; box-shadow: var(--ctw-shadow-card); padding: 37px 30px 35px; margin-bottom: 55px; transition: var(--ct-ease); } .ct-testimonial-carousel1.style1 .item--inner:hover { transform: translateY(-16px); box-shadow: var(--ctw-shadow-card-hover); } .ct-testimonial-carousel1.style1 .item--inner:hover .item--image img { filter: grayscale(0%); } @media (min-width: 992px) { .ct-testimonial-carousel1.style1 .item--inner { padding-left: 40px; padding-right: 40px; } } .ct-testimonial-carousel1.style2 .item-icon { display: none; } .ct-testimonial-carousel1.style2 .item--image { max-width: 80px; margin-bottom: 22px; } .ct-testimonial-carousel1.style2 .item--image img { border-radius: 80px; } .ct-testimonial-carousel1.style2 .item--description { font-size: 16px; line-height: 26px; color: var(--ctw-testimonial-text); margin-bottom: 25px; } .ct-testimonial-carousel1.style2 .item--title { font-size: 18px; color: var(--ct-ink); margin-bottom: 4px; } .ct-testimonial-carousel1.style2 .item--position { font-size: 15px; color: var(--ctw-testimonial-position); text-decoration: underline; } .ct-testimonial-carousel1.style2 .ct-slick-carousel.nav-middle1.ct-slick-carousel[data-arrows="true"] { padding-bottom: 92px; } .ct-testimonial-carousel1.style2 .ct-slick-carousel.nav-middle1.ct-slick-carousel[data-arrows="true"] .slick-arrow { transform: translate(0, 0%); top: auto; bottom: 0; left: 15px; right: auto; width: 47px; height: 47px; line-height: 47px; background: var(--ct-white); color: var(--ct-submenu-text); box-shadow: var(--ctw-shadow-arrow-style2); } .ct-testimonial-carousel1.style2 .ct-slick-carousel.nav-middle1.ct-slick-carousel[data-arrows="true"] .slick-arrow:hover { color: var(--ct-white); } .ct-testimonial-carousel1.style2 .ct-slick-carousel.nav-middle1.ct-slick-carousel[data-arrows="true"] .slick-arrow.slick-next { left: 80px; } .ct-testimonial-carousel1.style2 .item--inner { margin-top: 0; } /* ct_blog_carousel layout 1 style1 (prod L31753-L31863, L32075-L32081; entry meta L9820-L9845; entry title L9782-L9786 - production's global blog rules, carried here until the content pass). */ .entry-title { font-size: 22px; line-height: 1.5; } .entry-title a { color: inherit; display: block; } .entry-meta { margin-bottom: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: normal; font-size: 14px; line-height: 24px; color: var(--ctw-meta); font-family: var(--ct-font-heading); } .entry-meta li { margin-right: 20px; } .entry-meta li:last-child { margin-right: 0; } .entry-meta li.item-author { text-transform: capitalize; } .entry-meta i { margin-right: 4px; } .entry-meta a { color: inherit; } .entry-meta a:hover { color: inherit; } .ct-blog-carousel-layout1 .entry-featured img { border-radius: 6px; filter: grayscale(85%); transition: var(--ct-ease); width: 100%; } .ct-blog-carousel-layout1 .entry-featured + .entry-body { position: relative; z-index: 1; margin-top: -60px; padding: 0 20px; } .ct-blog-carousel-layout1 .entry-featured.featured-default img { filter: grayscale(0%); } .ct-blog-carousel-layout1 .entry-title { line-height: 1.3; color: var(--ct-text); margin-bottom: 2px; } .ct-blog-carousel-layout1 .entry-title a { color: inherit; } .ct-blog-carousel-layout1 .entry-title a:hover { color: inherit; } .ct-blog-carousel-layout1 .entry-readmore { display: none; } .ct-blog-carousel-layout1 .entry-readmore a { font-size: 15px; line-height: 28px; font-weight: 700; font-family: var(--ct-font-heading); } .ct-blog-carousel-layout1 .entry-readmore a i { display: initial; } .ct-blog-carousel-layout1 .entry-meta { margin-top: 2px; margin-bottom: 4px; } .ct-blog-carousel-layout1 .entry-holder { background-color: var(--ct-white); border-radius: 5px; box-shadow: var(--ctw-shadow-post); padding: 20px 20px 22px 20px; transition: var(--ct-ease); } .ct-blog-carousel-layout1 .grid-item-inner { margin-bottom: 40px; } .ct-blog-carousel-layout1 .grid-item-inner:hover .entry-featured img { filter: grayscale(0%); } .ct-blog-carousel-layout1 .grid-item-inner:hover .entry-holder { box-shadow: var(--ctw-shadow-post-hover); } .ct-blog-carousel-layout1 .slick-dots { margin-top: 20px; } .ct-blog-carousel-layout1 .ct-slick-carousel[data-arrows="true"] { padding-bottom: 80px; } @media (min-width: 768px) { .ct-blog-carousel-layout1 .entry-holder { padding-left: 30px; } } @media (min-width: 1200px) { .ct-blog-carousel-layout1 .entry-featured + .entry-body { padding-left: 30px; padding-right: 30px; } } /* ct_clients_list style1 (prod L18973-L19002). Production's ".slick-list { margin: 0 }" below 1200 repeats slick.css's own value and is not carried. */ .ct-client1 .client-image { text-align: center; } .ct-client1 .client-image a { display: inline-block; vertical-align: top; transition: all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s; } .ct-client1 .slick-track { display: flex; flex-wrap: wrap; align-items: center; } .ct-client1 .ct-clients-list-inner { margin: 0 -15px; } .ct-client1 .ct-clients-list-inner .slick-slide { padding: 0 15px; } .ct-client1.style1 .client-image a { filter: grayscale(100%); opacity: 0.5; } .ct-client1.style1 .client-image a:hover { opacity: 1; filter: grayscale(0%); } /* ct_ctf7 - style1 has no rules of its own in production; the field and submit geometry (51px fields, 27px wrap spacing, gradient submit) comes from the base form and button rules in theme.css S3-S4. Baseline about/desktop footer: input 265x51 padding 6/22, submit 123.92x51. */ .ct-contact-form-layout1 .wpcf7-form-control:not(.wpcf7-submit) { width: 100%; } /* ct_ctf7 shared + style6 (prod L21494-L21508, L21805-L21821) */ .ct-contact-form-layout1 .input-filled label { font-size: 15px; color: var(--ct-black); margin-bottom: 6px; } .ct-contact-form-layout1 .ct-form-heading { font-size: 16px; margin-bottom: 28px; } .ct-contact-form-layout1 .wpcf7-form { border: none; overflow: visible; } .ct-contact-form-layout1.style6 .input-filled > label { font-size: 15px; } .ct-contact-form-layout1.style6 .wpcf7-form-control:not(.wpcf7-submit) { border-radius: 5px; color: var(--ctw-grey-66); border-color: var(--ctw-field-border-6); } .ct-contact-form-layout1.style6 .wpcf7-form-control:not(.wpcf7-submit):focus { border-color: var(--ct-link); } .ct-contact-form-layout1.style6 .wpcf7-form-control.wpcf7-textarea { height: 144px; } @media (min-width: 992px) { .ct-contact-form-layout1 .input-filled label { font-size: 17px; } } /* Bootstrap's .btn-block (production loads bootstrap.css; the theme's grid.css subset has no button utilities) and the 51px box production's nice-select gives the service