/* * Plugin Name: Master Layer * Version: 1.0 * Description: Master Addons for Elementor * Author: MasterLayer * Plugin URI: https://tplabs.co/tombuild * Author URI: https://tplabs.co/ * License: Custom license * License URI: Licensing/README_License.txt * Text Domain: masterlayer **/ /* TABLE OF CONTENTS * Elementor Fixed * Extra classes * Headline * Separator * Link * Button * Headings * Icon * Icon Box * Icon Text * Slider * Carousel Box * Text Box * Copyright * Counter * Progress Bar * Pie Chart * Video Icon * Fancy Image * Image Box * Hover Box * Tabs * Accordions * Subscribe Form * Contact Form * Gallery * Gallery Stack * Call To Action * Price Box * Project * News * New Block * Team * Testimonial * Testimonial Slider * Partner * Animation * Additional Custom -------------------------------------------------------------- */ /* ---------------------------------------- Extra Classes ---------------------------------------- */ .o1 { opacity: 0.1; } .o2 { opacity: 0.2; } .o3 { opacity: 0.3; } .o4 { opacity: 0.4; } .o5 { opacity: 0.5; } .o6 { opacity: 0.6; } .o7 { opacity: 0.7; } .o8 { opacity: 0.8; } .o9 { opacity: 0.9; } .pointer-events-none { pointer-events: none !important; } .pointer-events-auto { pointer-events: auto !important; } .flex-grow-1 { flex-grow: 1 !important; } .has-underline { position: relative; display: inline-block; } .has-underline:after { position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 1px; background-color: currentColor; opacity: 0.7; } .has-underline.underline-accent:after { background-color: var(--e-global-color-tombuild_accent); opacity: 1; } .align-center .content-wrap { align-items: center; } .align-right .content-wrap { align-items: flex-end; } .item-align-center .elementor-widget-container { justify-content: center; } .item-align-right .elementor-widget-container { justify-content: flex-end; } @media (max-width: 1024px) { .align--tabletleft { text-align: left; } .align--tabletcenter { text-align: center; } .align--tabletright { text-align: right; } .align--tabletleft .content-wrap { align-items: flex-start; } .align--tabletcenter .content-wrap { align-items: center; } .align--tabletright .content-wrap { align-items: flex-end; } .item-align--tabletleft .elementor-widget-container { justify-content: flex-start; } .item-align--tabletcenter .elementor-widget-container { justify-content: center; } .item-align--tabletright .elementor-widget-container { justify-content: flex-end; } } @media (max-width: 767px) { .align--mobileleft { text-align: left; } .align--mobilecenter { text-align: center; } .align--mobileright { text-align: right; } .align--mobileleft .content-wrap { align-items: flex-start; } .align--mobilecenter .content-wrap { align-items: center; } .align--mobileright .content-wrap { align-items: flex-end; } .item-align--mobileleft .elementor-widget-container { justify-content: flex-start; } .item-align--mobilecenter .elementor-widget-container { justify-content: center; } .item-align--mobileright .elementor-widget-container { justify-content: flex-end; } } .hidden { display: none !important; } .show { display: block !important; } @media (min-width: 1440px) { .col-fix-1 { width: 100px !important; max-width: 100px !important; } .col-fix-2 { width: 200px !important; max-width: 200px !important; } .col-fix-3 { width: 300px !important; max-width: 300px !important; } .col-fix-4 { width: 400px !important; max-width: 400px !important; } .col-fix-5 { width: 500px !important; max-width: 500px !important; } .col-fix-6 { width: 600px !important; max-width: 600px !important; } .col-fix-7 { width: 700px !important; max-width: 700px !important; } .col-fix-8 { width: 800px !important; max-width: 800px !important; } } .text-bg-true .inner { -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Elementor Fixed -------------------------------------------------------------- */ .elementor-widget-container { line-height: 1; } .elementor-widget-text-editor .elementor-widget-container { line-height: inherit; } .elementor-widget-container p:last-child { margin-bottom: 0px; } .overflow-hidden.elementor-column > .elementor-widget-wrap { overflow: hidden; } .col-nowrap > .elementor-container { flex-wrap: nowrap !important; } /* Fix bottom spacing on display block */ .elementor-widget-mae-cta .elementor-widget-container { display: flex; } .elementor-column.elementor-col-100 .elementor-section .elementor-container { justify-content: space-between; } .elementor-section.elementor-section-boxed.section-1600px > .elementor-container { max-width: 100%; } /* Remove gap between widget */ .tombuild-container .elementor-container.elementor-column-gap-default > .elementor-column { padding: 0 15px; } .elementor-column-gap-default>.elementor-column>.elementor-element-populated { padding: 0; } /* Header Single Page */ .page-header-single #page #site-header-wrap, .page-header-single #page #featured-title, .page-header-single .hentry .post-author, .page-header-single #page .inner-content > *:not(.post-content){ display: none; } .page-header-single #main-content { padding: 0; margin-bottom: 1000px; } /* Footer Single Page */ .page-footer-single #footer, .page-footer-single #bottom, .page-footer-single .hentry .post-author, .page-footer-single #page .inner-content > *:not(.post-content) { display: none; } .page-footer-single #main-content { padding: 0 0 500px; } .elementor-icon-wrapper { line-height: 1; } .overflow-hidden .master-gallery-stack, .overflow-hidden .elementor-widget-container { overflow: hidden; } @media screen and (min-width: 1400px) { .elementor-column:first-child { flex-grow: 2; } .elementor-column:last-child { flex-grow: 1; flex-shrink: 9999; } } @media screen and (min-width: 1025px) { .elementor-preview .elementor-hidden-desktop .tombuild-menu-panel { opacity: 0; } } @media screen and (min-width: 768px) { .elementor-preview .elementor-hidden-tablet .tombuild-menu-panel { opacity: 0; } } /* Flexbox container */ .tombuild-container.con-full { width: unset; max-width: 100vw; } /* ---------------------------------------- Metform Fixed ---------------------------------------- */ .mf-error-message { margin-bottom: 4px; } .metform-submit-btn { box-shadow: none !important; } .metform-form-content { overflow: visible !important; } /* ---------------------------------------- General ---------------------------------------- */ .headline-2 { font-size: 20px; line-height: 1.3; margin-bottom: 15px; transition: color 0.3s; } .desc { font-size: 16px; line-height: 1.5; } .icon-wrap { display: flex; } .icon svg, .popup-video svg, .icon-wrap svg, .master-icon svg { width: 100%; max-width: 100%; height: inherit; fill: currentColor; transition: width 0s; } .url-width-full .url-wrap > a { width: 100%; justify-content: space-between; } .url-wrap { z-index: 999; } .thumb .inner { width: 100%; } /* ---------------------------------------- Decoration ---------------------------------------- */ .master-wrap { position: relative; } .master-decor { position: absolute; pointer-events: none; width: auto; } .master-decor.icon { line-height: 1; } /* ---------------------------------------- Separator ---------------------------------------- */ .sep { height: 1px; width: 100%; background-color: var(--e-global-color-tombuild_border); margin-bottom: 6px; } /* ---------------------------------------- Hidden URL ---------------------------------------- */ .url-hidden { opacity: 0 !important; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; } /* ---------------------------------------- Link ---------------------------------------- */ .master-link { position: relative; display: inline-flex; align-items: center; align-items: center; font-size: 16px; line-height: 1.25; font-weight: 500; transition: all 0.3s ease, font-size 0s; color: var(--e-global-color-tombuild_primary); } .master-link .icon { display: flex; justify-content: center; align-items: center; color: var(--e-global-color-tombuild_accent); line-height: inherit; transition: 0.3s ease; } .master-link .icon svg { width: 16px; fill: current-color; } .master-link.icon-right .icon { margin-left: 10px; } .master-link.icon-left .icon { margin-right: 10px; } .line-yes .master-link:after, .line-hover .master-link:after { position: absolute; bottom: 0; right: 0; width: 100%; height: 1px; background-color: currentColor; content: ""; } .line-hover .master-link:after { width: 0; transition: width 0.5s cubic-bezier(0.35, 0.7, 0.35, 1); } .line-hover .master-link:hover:after { width: 100%; left: 0; } .master-link:hover .icon { animation: 0.3s link-icon linear; } /* ---------------------------------------- Arrow ---------------------------------------- */ .master-arrow { display: inline-block; width: 50px; height: 50px; line-height: 50px; font-size: 18px; text-align: center; border-radius: 50%; background-color: var(--e-global-color-tombuild_accent); color: #fff; cursor: pointer; pointer-events: auto; transition: 0.3s; } .master-arrow i { display: inline-block; } .master-arrow:hover { color: #fff; background-color: var(--e-global-color-tombuild_accent); } .master-arrow:hover i { animation: 0.3s link-icon linear; } /* ---------------------------------------- Button ---------------------------------------- */ .master-button { position: relative; display: inline-flex; justify-content: center; font-size: 16px; line-height: 24px; padding: 18px 30px; font-weight: 500; transition: all 0.3s ease; background-color: var(--e-global-color-tombuild_accent); color: #fff; overflow: hidden; cursor: pointer; } .master-button:focus { color: inherit; } .master-button .text { display: inline-block; transition: color 0.3s ease; } .master-button .icon { display: inline-block; } .master-button.icon-right .icon { margin-left: 10px; } .master-button.icon-left .icon { margin-right: 10px; } .master-button.big { font-size: 16px; } .master-button.big.icon-right .icon { margin-left: 20px; } .master-button.big.icon-left .icon { margin-right: 20px; } .master-button.small { font-weight: 500; padding: 13px 25px; } .master-button.small.icon-right .icon { margin-left: 10px; } .master-button.small.icon-left .icon { margin-right: 10px; } .master-button.btn-white { background-color: #fff; color: var(--e-global-color-tombuild_accent); } .master-button.btn-dark { background-color: var(--e-global-color-tombuild_primary); color: #fff; } .master-button.btn-outline { background-color: transparent; color: var(--e-global-color-tombuild_accent); border: 1px solid var(--e-global-color-tombuild_accent); } .master-button.btn-white:hover { color: #fff; } .master-button.btn-white .bg-hover { background-color: var(--e-global-color-tombuild_primary); } .master-button.btn-dark .bg-hover { background-color: var(--e-global-color-tombuild_accent); } .master-button.btn-outline .bg-hover { background-color: var(--e-global-color-tombuild_accent); } .btn-full-width .master-button { width: 100%; text-align: center; justify-content: center; } /* Hover Effect */ .master-button .inner-wrap, .master-button .inner { position: relative; display: inline-block; z-index: 1; } .master-button .content-base, .master-button .content-hover { display: flex; align-items: center; position: relative; color: inherit; transition: none; } .master-button .content-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .master-button:hover { color: #fff; } .master-button .bg-hover { background-color: var(--e-global-color-tombuild_primary); } .master-button.btn-hover-1 .bg-hover { position: absolute; top: 0; right: 0; width: 0; height: 100%; z-index: 0; } .master-button.btn-hover-1 .content-hover { transform: translateY(5px); } .master-button.btn-hover-1:hover .content-base { transform: translateY(-5px); opacity: 0; } .master-button.btn-hover-1:hover .content-hover { transform: translateY(0); opacity: 1; } .master-button.btn-hover-1 .bg-hover { transition: width 0.2s cubic-bezier(0.35, 0.7, 0.35, 1); } .master-button.btn-hover-1:hover .bg-hover { width: 100%; left: 0; } .master-button.btn-hover-2 .content-hover { display: none; } .master-button.btn-hover-2 .bg-hover { position: absolute; display: block; width: 0; height: 0; transform: translate(-50%, -50%); transition: 0.5s ease-in-out; z-index: 0; border-radius: 100%; opacity: 0.3; transition: width 0.7s ease, padding-top 0.7s ease, opacity 0.7s ease, top 0s, left 0s; } .master-button.btn-hover-2:hover .bg-hover { width: calc(100% * 2.25); padding-top: calc(100% * 2.25); opacity: 1; } /* ---------------------------------------- Headings ---------------------------------------- */ .master-heading { display: flex; justify-content: center; flex-direction: column; } .master-heading .pre-heading { position: relative; font-size: 15px; line-height: 1.5; margin-bottom: 0; font-weight: 500; color: var(--e-global-color-tombuild_accent); margin-bottom: 20px; text-transform: uppercase; } .master-heading .pre-heading .line { position: absolute; top: 10px; left: 0; overflow: hidden; line-height: 0; } .master-heading .pre-heading .line .inner { display: inline-block; width: 10px; height: 2px; background-color: var(--e-global-color-tombuild_accent); animation: 1.5s line-moving infinite linear; } .master-heading .main-heading { font-size: 40px; line-height: 1.2; margin-bottom: 25px; } .master-heading .main-heading:hover a { color: var(--e-global-color-tombuild_accent); } .master-heading .sub-heading { font-size: 18px; line-height: 1.5; } .master-heading .sep { margin-bottom: 12px; background-color: var(--e-global-color-tombuild_accent); } .master-heading.sep-after .main-heading { margin-bottom: 10px; } .master-heading.sep-after .sep { margin-bottom: 45px; } .master-heading.sep-before .sep { margin-bottom: 0; } .master-heading .pre-heading .line { display: none; } .heading-style-1 .master-heading .pre-heading .line { display: block; } .heading-style-1 .master-heading .pre-heading { padding-left: 20px; } .heading-big .master-heading .main-heading { font-size: 64px; line-height: 72px; } .heading-small .master-heading .main-heading { font-size: 36px; line-height: 46px; } .double-line { display: flex; flex-direction: column; margin-bottom: 4px; } .double-line .line { position: relative; display: inline-block; width: 26px; height: 1px; background-color: var(--e-global-color-tombuild_accent); transition: transform 0.5s ease 0.7s; transform: translateX(5px); } .double-line .line2 { margin-top: 2px; } .inview .double-line .line1 { transform: translateX(0px); } .inview .double-line .line2 { transform: translateX(10px); } .align-left .master-heading { align-items: flex-start; } .align-center .master-heading { align-items: center; } .align-right .master-heading{ align-items: flex-end; } @media (max-width: 1024px) { .align--tabletleft .master-heading { align-items: flex-start; } .align--tabletcenter .master-heading { align-items: center; } .align--tabletright .master-heading { align-items: flex-end; } } @media (max-width: 767px) { .align--mobileleft .master-heading { align-items: flex-start; } .align--mobilecenter .master-heading { align-items: center; } .align--mobileright .master-heading{ align-items: flex-end; } } @media (max-width: 575px) { .master-heading .main-heading { font-size: 34px; line-height: 50px; } .text-box .master-heading .main-heading { font-size: 20px; line-height: 36px; } } /* ---------------------------------------- List ---------------------------------------- */ .master-list .list-item:last-child { margin-bottom: 0 !important; } .list-stretch .master-list .list-item {justify-content: space-between; } /* ---------------------------------------- Icon ---------------------------------------- */ .master-icon { display: inline-block; font-size: 60px; line-height: 1; color: var(--e-global-color-tombuild_accent); transition: color 0.3s, background 0.3s; } .master-icon i { position: relative; z-index: 1; line-height: inherit; } .master-icon svg { fill: currentColor; width: 60px; } .icon-has-bg .master-icon { position: relative; line-height: 130px; width: 130px; height: 130px; color: #fff; background-color: var(--e-global-color-tombuild_accent); border-radius: 50%; text-align: center; } .icon-has-bg .master-icon svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ---------------------------------------- Icon Box ---------------------------------------- */ .master-icon-box { position: relative; transition: 0.3s all ease; } .master-icon-box .inner { display: flex; position: relative; z-index: 10; transition: all 0.5s ease; } .master-icon-box .url-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: visible; opacity: 0; z-index: 9; } .icon-wrap { display: inline-flex; } .master-icon-box .sep, .master-icon-box .desc { transition: color 0.3s; } .master-icon-box .desc { margin-bottom: 20px; } .master-icon-box .icon-text { font-size: 42px; line-height: 62px; margin-bottom: 0; } .master-icon-box .master-icon { position: relative; } .master-icon-box .master-icon:before { position: absolute; top: 50%; left: 50%; content: ""; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(1); transition: 0.5s; opacity: 1; transform-origin: 50% 50%; z-index: 0; border-radius: inherit; background-color: inherit; opacity: 0; z-index: 0; } .master-icon-box:hover .master-icon:before { animation: iconEff1 0.5s ease forwards; } @keyframes iconEff1 { from { opacity: 0.7; } to { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } } .icon-position-top .icon-wrap { margin-bottom: 20px; } .icon-position-left .icon-wrap { margin-right: 25px; margin-left: 0; } .icon-position-right .icon-wrap { margin-left: 25px; margin-right: 0; } .master-icon-box .bg-static, .master-icon-box .bg, .master-icon-box .bg-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.3s ease; z-index: 0; border-radius: inherit; } .master-icon-box .bg-hover { opacity: 0; } .master-icon-box:hover .bg-hover { opacity: 1; } /* Icon Top - Bottom */ .icon-position-top .master-icon-box .inner { flex-direction: column;} .icon-position-bottom .master-icon-box .inner { flex-direction: column-reverse; } /* Icon Left - Right */ .icon-position-left .master-icon-box .inner { flex-direction: row; } .icon-position-right .master-icon-box .inner { flex-direction: row-reverse; } .align-left .master-icon-box .inner { align-items: flex-start; } .align-center .master-icon-box .inner { align-items: center; } .align-right .master-icon-box .inner { align-items: flex-end; } @media (max-width: 1024px) { .align--tabletleft .master-icon-box .inner { align-items: flex-start; } .align--tabletcenter .master-icon-box .inner { align-items: center; } .align--tabletright .master-icon-box .inner { align-items: flex-end; } } @media (max-width: 767px) { .align--mobileleft .master-icon-box .inner { align-items: flex-start; } .align--mobilecenter .master-icon-box .inner { align-items: center; } .align--mobileright .master-icon-box .inner { align-items: flex-end; } .master-icon-box .inner { align-items: flex-start; } } @media (max-width: 575px) { .icon-position-right .master-icon-box .inner, .icon-position-left .master-icon-box .inner { flex-direction: column; } .icon-position-right .master-icon-box .icon-wrap, .icon-position-left .master-icon-box .icon-wrap { margin-left: 0; margin-right: 0; } .icon-position-right .master-icon-box .inner .master-icon, .icon-position-left .master-icon-box .inner .master-icon { margin-bottom: 15px; } .icon-position-right .master-icon-box .inner .desc, .icon-position-left .master-icon-box .inner .desc { margin-left: 0; margin-right: 0; } .icon-position-right.small-icon .master-icon-box .inner .master-icon, .icon-position-left.small-icon .master-icon-box .inner .master-icon { margin-bottom: 10px; } .icon-box-left .master-icon-box .inner { flex-direction: row; } } /* Icon Box Style 1 */ .icon-box-style-1 .master-icon-box { padding-bottom: 50px; } .icon-box-style-1 .master-icon-box:after { position: absolute; top: 0; left: 0; width: 100%; height: 4px; content: ''; background-color: var(--e-global-color-tombuild_accent); z-index: 1; } .icon-box-style-1 .master-icon-box .inner { padding: 138px 70px 42px; box-shadow: 0 10px 50px 0 rgba(0,0,0,0.07); } .icon-box-style-1 .headline-2 { font-size: 20px; line-height: 24px; margin-bottom: 6px; } .icon-box-style-1.icon-has-bg .icon-wrap { position: absolute; bottom: 0; left: 0; width: 100%; transform: translateY(50%); display: block; } .icon-box-style-1.icon-has-bg .master-icon { width: 100px; height: 100px; line-height: 80px; font-size: 36px; border: 12px solid #fff; box-shadow: 0 10px 50px 0 rgba(0,0,0,0.07); } .icon-box-style-1.icon-has-bg .master-icon svg { width: 36px; } /* ---------------------------------------- Icon Text ---------------------------------------- */ .master-icon-text { display: flex; align-items: center; font-size: 18px; line-height: 22px; transition: 0.3s all ease; gap: 10px; } .master-icon-text .icon-wrap { display: inline-block; color: var(--e-global-color-tombuild_accent); flex-shrink: 0; text-align: center; line-height: 1; } .master-icon-text .icon-wrap svg { width: 18px; } .master-icon-text .content-wrap { position: relative; display: inline-block; } .master-icon-text .icon-wrap i { position: relative; display: inline-block; } .icon-has-bg .master-icon-text .icon-wrap { position: relative; width: 26px; height: 26px; line-height: 26px; background-color: #f6f6f6; } .icon-has-bg .master-icon-text .icon-wrap i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .align-center .master-icon-text { justify-content: center; } .align-right .master-icon-text { justify-content: flex-end; } @media (max-width: 1024px) { .align--tabletleft .master-icon-text { justify-content: flex-start; } .align--tabletcenter .master-icon-text { justify-content: center; } .align--tabletright .master-icon-text { justify-content: flex-end; } } @media (max-width: 767px) { .align--mobileleft .master-icon-text { justify-content: flex-start; } .align--mobilecenter .master-icon-text { justify-content: center; } .align--mobileright .master-icon-text { justify-content: flex-end; } } @media (max-width: 570px) { .big-icon .master-icon-text { flex-direction: column; align-items: flex-start; } .big-icon .master-icon-text .icon-wrap { margin-bottom: 30px; } } /* ---------------------------------------- Popup ---------------------------------------- */ .master-popup .popup-panel { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; visibility: visible; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 999999; } .master-popup .popup-content { max-height: 100vh; overflow: auto; } .master-popup .popup-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.7); } .master-popup.active .popup-panel { opacity: 1; visibility: visible; pointer-events: auto; } .master-popup .close-btn { position: absolute; top: 40px; right: 40px; width: 50px; height: 50px; color: #fff; cursor: pointer; z-index: 9999; } /* ---------------------------------------- Slider ---------------------------------------- */ .master-slider { position: relative; width: 100%; min-height: 700px; } /* Background */ .master-slider .bg-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; background-color: var(--e-global-color-tombuild_primary); } .master-slider .bg-wrap .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; background-position: center center; background-size: cover; background-repeat: no-repeat; } .master-slider .bg-wrap .bg.active { visibility: visible; } /* Content */ .master-slider .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; visibility: hidden; } .master-slider .slide.active { visibility: visible; } .master-slider .slide .sub-title { font-size: 16px; line-height: 30px; font-weight: 600; text-transform: uppercase; color: #fff; margin-bottom: 18px; } .master-slider .slide .title { font-size: 120px; line-height: 110px; color: #fff; margin-bottom: 22px; } .master-slider .slide .desc { font-size: 16px; line-height: 30px; color: rgba(255,255,255,0.7); margin-bottom: 40px; } .master-slider .url-wrap { display: flex; } .master-slider .master-video-icon { gap: 10px; } .master-slider .master-video-icon .video-icon { width: unset; height: unset; line-height: 1; padding: 30px; font-size: 12px; } .master-slider .master-video-icon .video-text { padding: 0 !important; margin: 0 !important; color: #fff; background-color: transparent !important; height: unset !important; line-height: 1; text-align: left; } /* Slider Style */ .slider-full-screen .master-slider .bg-wrap, .slider-full-width .master-slider .bg-wrap { width: 100vw; left: 50%; transform: translateX(-50%); } .slider-full-screen .master-slider { height: 100vh; } .slider-image-right .master-slider .bg-wrap { width: 50vw; left: 50%; transform: none; } .slider-image-left .master-slider .bg-wrap { width: 50vw; right: 50%; left: unset; transform: none; } .slider-image-left .master-slider .content-wrap .slide, .slider-image-right .master-slider .content-wrap .slide { max-width: 50vw; } /* Loading */ .master-slider.on-load .bg-wrap:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-color: rgba(0,0,0,0.5); z-index: 100; } .master-slider.on-load .slide.active { opacity: 0; transform: translateY(100px); } .master-slider.on-load.loaded .bg-wrap:after { transform: translateY(-120%); transition: transform 1s ease 1s; } .master-slider.on-load.loaded .slide.active { transform: translateY(0); opacity: 1; transition: 1s ease 1.2s; } /* Controls */ .master-slider .control-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } /* Dots */ .master-slider .nav-dots { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); width: auto; line-height: 1; text-align: center; pointer-events: auto; } .master-slider .nav-dots .dot { position: relative; display: inline-block; width: 14px; height: 14px; padding: 0 13px; cursor: pointer; } .master-slider .nav-dots .dot:after { position: absolute; top: 50%; left: 50%; content: ""; transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: #fff; border-radius: 50%; opacity: 0.3; transition: 0.3s; } .master-slider .nav-dots:hover .dot.active:after, .master-slider .nav-dots:hover .dot:after { width: 10px; height: 10px; opacity: 0.3; } .master-slider .nav-dots:hover .dot.active:hover:after, .master-slider .nav-dots .dot:hover:after, .master-slider .nav-dots .dot.active:after { background-color: #fff; width: 14px; height: 14px; opacity: 1; } .slider-dots-no .master-slider .nav-dots { display: none; } .dots-pos-bl .master-slider .nav-dots { left: 0; transform: translateX(0); } .dots-pos-br .master-slider .nav-dots { right: 0; transform: translateX(0); } .slider-dots-custom .master-slider .nav-dots { left: unset; right: 0; transform: none; } .slider-dots-custom .master-slider .nav-dots .dot { display: flex; align-items: center; color: #fff; width: 225px; height: 80px; padding: 0; background-color: var(--e-global-color-tombuild_primary); } .slider-dots-custom .master-slider .nav-dots .dot:first-child { border-radius: 5px 5px 0 0; } .slider-dots-custom .master-slider .nav-dots .dot:last-child { border-radius: 0 0 5px 5px; } .slider-dots-custom .master-slider .nav-dots .dot:after { display: none; } .slider-dots-custom .master-slider .nav-dots .dot:before { position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 1px; background-color: rgba(255,255,255,0.1); } .slider-dots-custom .master-slider .nav-dots .dot.active { background-color: var(--e-global-color-tombuild_accent); opacity: 1; } .slider-dots-custom .master-slider .nav-dots .dot.active:before { opacity: 0; } .slider-dots-custom .master-slider .nav-dots .dot .decor { display: inline-block; position: absolute; top: 50%; left: 0; transform: translate(0%, -50%); width: 0px; height: 0px; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid var(--e-global-color-tombuild_primary); transition: 0.3s transform ease; z-index: -1; } .slider-dots-custom .master-slider .nav-dots .dot.active .decor { border-right: 15px solid var(--e-global-color-tombuild_accent); } .slider-dots-custom .master-slider .nav-dots .dot.active .decor { transform: translate(-15px, -50%); } .slider-dots-custom .master-slider .nav-dots .dot .icon-wrap { width: 34px; height: 34px; font-size: 34px; margin-right: 10px; margin-left: 30px; } .slider-dots-custom .master-slider .nav-dots .dot .icon-wrap i { display: inline-block; } .slider-dots-custom .master-slider .nav-dots .dot .title { font-size: 16px; font-weight: 500; } /* Arrows */ .master-slider .arrow { pointer-events: auto; cursor: pointer; text-align: center; } .master-slider .arrow { position: absolute; display: inline-block; width: 50px; height: 50px; line-height: 50px; font-size: 16px; border-radius: 50%; color: var(--e-global-color-tombuild_primary); background-color: #fff; opacity: 0.3; transition: color 0.3s, background 0.3s, opacity 0.3s; } .master-slider .arrow:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; text-align: center; line-height: inherit; font-size: inherit; border-radius: inherit; } .master-slider .arrow:hover { opacity: 1; } .master-slider .arrow.arrow-next:hover:after { animation: 0.3s link-icon2 linear; } .master-slider .arrow.arrow-prev:hover:after { animation: 0.3s link-icon2-reverse linear; } /* Arrow center center */ .arrows-pos-cc .master-slider .arrow { top: 50%; transform: translate(0, -50%); } .arrows-pos-cc .master-slider .arrow-next { right: 0px; } .arrows-pos-cc .master-slider .arrow-prev { left: 0px; } /* Arrow bottom right */ .arrows-pos-br .master-slider .arrow { position: absolute; border-radius: 0; width: 76px; height: 60px; line-height: 60px; opacity: 1; font-size: 16px; } .arrows-pos-br .master-slider .nav-arrow { position: absolute; bottom: 0; right: 0; display: flex; } .arrows-pos-br .master-slider .arrow-next { right: 0; bottom: 0; background-color: #fff; color: var(--e-global-color-tombuild_primary); } .arrows-pos-br .master-slider .arrow-prev { right: 76px; bottom: 0; background-color: var(--e-global-color-tombuild_accent); color: #fff; } .arrows-pos-br .master-slider .nav-arrow:hover .arrow-prev { background-color: #fff; color: var(--e-global-color-tombuild_primary); } .arrows-pos-br .master-slider .nav-arrow:hover .arrow-prev:hover { background-color: var(--e-global-color-tombuild_accent); color: #fff; } .arrows-pos-br .master-slider .nav-arrow:hover .arrow-next:hover { background-color: var(--e-global-color-tombuild_accent); color: #fff; } /* Arrow bottom left */ .arrows-pos-bl .master-slider .arrow { position: absolute; border-radius: 0; width: 76px; height: 60px; line-height: 60px; opacity: 1; font-size: 16px; } .arrows-pos-bl .master-slider .nav-arrow { position: absolute; bottom: 0; left: 0; display: flex; } .arrows-pos-bl .master-slider .arrow-next { left: 76px; bottom: 0; background-color: var(--e-global-color-tombuild_primary); color: #fff; } .arrows-pos-bl .master-slider .arrow-prev { left: 0; bottom: 0; background-color: #fff; color: var(--e-global-color-tombuild_primary) } .arrows-pos-bl .master-slider .nav-arrow:hover .arrow-prev { background-color: #fff; color: var(--e-global-color-tombuild_primary); } .arrows-pos-bl .master-slider .nav-arrow:hover .arrow-prev:hover { background-color: var(--e-global-color-tombuild_accent); color: #fff; } .arrows-pos-bl .master-slider .nav-arrow:hover .arrow-next:hover { background-color: var(--e-global-color-tombuild_accent); color: #fff; } /* Arrow center full width */ .arrows-pos-cfw .master-slider .control-wrap { width: 100vw; left: 50%; transform: translateX(-50%); } .arrows-pos-cfw .master-slider .arrow { top: 50%; transform: translate(0, -50%); } .arrows-pos-cfw .master-slider .arrow-next { right: 4%; } .arrows-pos-cfw .master-slider .arrow-prev { left: 4%; } /* Arrow center right */ .arrows-pos-cr .master-slider .arrow { position: relative; margin: 5px 0; } .arrows-pos-cr .master-slider .nav-arrow { position: absolute; top: 50%; right: 0; display: flex; flex-direction: column; transform: translateY(-50%); } .arrows-pos-cr .master-slider .arrow-next { opacity: 1; } .arrows-pos-cr .master-slider .nav-arrow:hover .arrow { opacity: 0.1; } .arrows-pos-cr .master-slider .nav-arrow:hover .arrow:hover { opacity: 1; } .slider-image-right.arrows-pos-cr .master-slider .nav-arrow { right: 60px; } /* Arrow center left */ .arrows-pos-cl .master-slider .arrow { position: relative; margin: 5px 0; } .arrows-pos-cl .master-slider .nav-arrow { position: absolute; top: 50%; left: -26%; display: flex; flex-direction: column; transform: translateY(-50%); } .arrows-pos-cl .master-slider .nav-arrow .arrow { opacity: 1; background-color: rgba(255,255,255,0.1); } .arrows-pos-cl .master-slider .nav-arrow .arrow:hover { background-color: #fff; } .slider-arrows-no .master-slider .nav-arrow { display: none; } .slider-arrows-hover .master-slider .nav-arrow { opacity: 0; transition: opacity 0.3s; } .slider-arrows-hover:hover .master-slider .nav-arrow { opacity: 1; } .arrows-size-medium .master-slider .arrow { width: 80px; height: 80px; line-height: 80px; font-size: 18px; } /* Split Text Animation */ .master-slider .text-wrap { display: inline-block; overflow: hidden; white-space: break-spaces; vertical-align: middle; } .master-slider .text-wrap > span { display: inline-block; } @media (max-width: 767px) { .master-slider .arrow { display: none !important; } .master-slider .nav-dots { display: none !important; } .master-slider .slide ul li { margin-bottom: 15px; } .master-slider .url-wrap { flex-direction: column; } .master-slider .slide .special-sub-title { background-color: transparent; padding: 0; } } /* Pagination */ .master-slider .pagination { display: flex; align-items: center; font-size: 16px; font-weight: 500; font-family: var(--font-heading); position: absolute; right: 0; bottom: 0; background-color: var(--e-global-color-tombuild_accent); color: #fff; z-index: 999; } .master-slider .pagination .arrow { position: relative; color: #fff; background-color: transparent; opacity: 1; } .master-slider .pagination .number { position: relative; pointer-events: auto; } .master-slider .pagination .progress-bar { position: relative; display: inline-block; width: 100px; height: 2px; background-color: rgba(255,255,255,0.4); border-radius: 1px; margin: 0 12px; } .master-slider .pagination .progress-bar .bar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #fff; border-radius: 1px; } .master-slider .pagination .pagination-tilte-link { display: flex; align-items: center; } .master-slider .pagination .pagi-title-wrap { position: relative; width: 485px; } .master-slider .pagination .pagi-title { position: absolute; top: 0; left: 0; display: inline-block; opacity: 0; transition: 0.3s all ease; animation: fadeUpOut 0.3s ease forwards; } .master-slider .pagination .pagi-title:first-child { position: relative; } .master-slider .pagination .pagi-title.active { opacity: 1; animation: fadeUpIn 0.3s ease forwards; } .master-slider .pagination .pagi-url { display: none; } .master-slider .pagination .pagi-url.active { display: block; } .master-slider .pagination a { pointer-events: auto; color: #fff; } @keyframes fadeUpOut { to { transform: translateY(-100%); opacity: 0; } } @keyframes fadeUpIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0%); opacity: 1; } } @media screen and (max-width: 1025px) { .master-slider .pagination .pagi-title-wrap { position: relative; width: 300px; } } @media screen and (max-width: 768px) { .master-slider .pagination .pagination-tilte-link { display: none; } } /* ---------------------------------------- Cube Portfolio ---------------------------------------- */ .master-portfolio a.thumb img { transition: width 0s !important; transform: scale(1) !important; } .master-portfolio a.thumb .inner { display: inline-flex; width: 100%; transition: 0.3s ease; } .inview .master-portfolio a.thumb .inner { transition: transform 0.5s ease; } .master-portfolio .master-project:hover a.thumb .inner, .master-portfolio .master-news:hover a.thumb .inner { transform: scale(1.1); } .item-has-shadow .cbp-wrapper-outer { overflow: visible; } .projects-filter { display: flex; flex-wrap: wrap; } .cbp-filter-item { position: relative; cursor: pointer; margin-right: 10px; transition: all 0.3s ease; } .projects-filter .cbp-filter-item:first-child { margin-left: 0 !important; } .projects-filter .cbp-filter-item:last-child { margin-right: 0 !important; } .cbp-filter-item:hover, .cbp-filter-item.cbp-filter-item-active { color: var(--e-global-color-tombuild_primary); } @media screen and (max-width: 575px) { .projects-filter { gap: 15px; } .projects-filter .cbp-filter-item { margin: 0 !important; } } /* ---------------------------------------- Carousel Box ---------------------------------------- */ .flexible-true .item-carousel { width: max-content; } .flexible-true .item-carousel .thumb img { display: block; width: max-content; } .item-carousel { width: 100%; line-height: 1; transition: box-shadow 0.3s; } .item-carousel .give_notice.give_warning { line-height: normal; margin-bottom: 10px; } .flickity-viewport { overflow: hidden; } .full-screen-true .flickity-viewport { overflow: visible !important; } .flickity-aside-wrap .flickity-viewport { overflow: visible !important; } .stretch-both .flickity-viewport, .viewport-overflow-visible .flickity-wrap, .viewport-overflow-visible .flickity-viewport { overflow: visible !important; } .viewport-overflow-visible .master-carousel-box .item-carousel { opacity: 0; transition: opacity 0.3s; } .viewport-overflow-visible .master-carousel-box .item-carousel.is-selected { opacity: 1; } .elementor-top-section:not(.inview) .flickity-viewport .item-carousel[aria-hidden="true"] > * { display: none; } /* Fade Animation */ .master-carousel-box.is-fade .flickity-viewport { overflow: visible !important; } .master-carousel-box.is-fade .item-carousel { transition: 0.5s all ease; } /* Slide & Fade Animation */ .is-slide-fade .master-carousel-box .flickity-viewport { overflow: visible !important; } .is-slide-fade .master-carousel-box .item-carousel { opacity: 0; transition: 0.5s all ease; } .is-slide-fade .master-carousel-box .item-carousel.is-selected { opacity: 1; } /* Bullets */ .master-carousel-box.bullets-yes { margin-bottom: 20px; } .master-carousel-box .flickity-page-dots { position: absolute; bottom: -20px; left: 50%; height: auto; width: auto; transform: translateX(-50%); z-index: 999; list-style: none; display: flex; margin: 0 0; justify-content: center;} .master-carousel-box .flickity-page-dots .dot { position: relative; width: 20px; height: 20px; display: inline-block; background-color: transparent; border: none; opacity: 1; transition: all 0.3s ease; border-radius: 0; margin: 0; cursor: pointer; } .master-carousel-box .flickity-page-dots .dot:after { position: absolute; top: 50%; left: 50%; content: ""; width: 14px; height: 14px; transition: 0.3s; background-color: var(--e-global-color-tombuild_primary); transform: translate(-50%, -50%); border-radius: 50%; border: none; opacity: 0.3; } .master-carousel-box .flickity-page-dots .dot.is-selected { margin: 0 2px; } .master-carousel-box .flickity-page-dots .dot.is-selected:after { width: 20px; height: 20px; border: none; background-color: var(--e-global-color-tombuild_accent); opacity: 1; } .dot-left .master-carousel-box .flickity-page-dots { left: -2px; transform: translate(0px); } .dot-right .master-carousel-box .flickity-page-dots { left: unset; right: -2px; transform: translate(0px); } /* Arrows */ .master-carousel-box .flickity-button { position: absolute; top: 50%; padding: 0; margin: 0; background-color: transparent; width: 50px; height: 50px; border-radius: 50%; color: var(--e-global-color-tombuild_primary); background-color: #eaeaf1; transform: translateY(-50%); z-index: 9; transition: 0.3s; } .master-carousel-box .flickity-button:before { position: absolute; top: 50%; left: 50%; font-size: 16px; color: inherit; width: 50px; height: 50px; line-height: 50px; text-align: center; transform: translate(-50%, -50%); font-weight: 400; } .master-carousel-box .flickity-button:hover { background-color: var(--e-global-color-tombuild_accent); color: #fff; } .master-carousel-box .flickity-button.previous { left: -32px; } .master-carousel-box .flickity-button.next { right: -32px; } .master-carousel-box .flickity-button:hover { border-color: transparent; box-shadow: 0 20px 50px rgba(0,0,0,0.1); } .master-carousel-box .flickity-button .flickity-button-icon { display: none; } .master-carousel-box .flickity-button.next:hover:before { animation: 0.3s link-icon2 linear; } .master-carousel-box .flickity-button.previous:hover:before { animation: 0.3s link-icon2-reverse linear; } .master-carousel-box .flickity-button:focus { box-shadow: none; } .master-carousel-box .flickity-button:disabled { opacity: 0.5 !important; pointer-events: none; color: var(--e-global-color-tombuild_primary) !important; cursor: not-allowed; } .arrow-position-top .flickity-button { top: 0; margin-top: -40px; transform: translateY(-100%); } .arrow-position-top .flickity-button.next { right: 0; top: 0px; } .arrow-position-top .flickity-button.previous { left: auto; right: 74px; top: 0px; } .arrow-position-bottom .flickity-button { top: unset; bottom: 0; transform: translateY(100%); } .arrow-position-bottom .flickity-button.next { left: 60px; } .arrow-position-bottom .flickity-button.previous { left: 0; } .arrow-align-right.arrow-position-bottom .flickity-button.next { right: 0px; left: unset; } .arrow-align-right.arrow-position-bottom .flickity-button.previous { right: 74px; left: unset; } .arrow-align-center.arrow-position-bottom .flickity-button.next { left: calc(50% + 9px); } .arrow-align-center.arrow-position-bottom .flickity-button.previous { left: calc(50% - 65px); } @media screen and (max-width: 1300px) { .arrow-position-middle .flickity-button { display: none; } } @media screen and (max-width: 767px) { .master-carousel-box .flickity-viewport { overflow: hidden !important; } .stretch-both .flickity-viewport, .viewport-overflow-visible .flickity-wrap, .viewport-overflow-visible .flickity-viewport { overflow: visible !important; } .master-carousel-box .flickity-button { display: none; } } /* Show Shadow - only desktop and number item = column */ @media screen and (min-width: 1025px) { .show-shadow .flickity-viewport { overflow: visible !important; } .show-shadow .item-carousel { box-shadow: 0 20px 60px rgba(79, 119, 225, 0.2); } } /* ---------------------------------------- Vertical Slider ---------------------------------------- */ .master-vertical-slider { overflow: hidden; } .master-vertical-slider .swiper-button { position: absolute; width: 64px; height: 64px; background-color: #fff; color: var(--e-global-color-tombuild_primary); font-size: 20px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); background-image: none; opacity: 1; border-radius: 50%; } .master-vertical-slider .swiper-button:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; font-size: inherit; line-height: 64px; font-family: "core-icons"; } /* Arrows */ .master-vertical-slider .swiper-button { display: none; } .arrows-true .master-vertical-slider .swiper-button { display: inline-block; } .master-vertical-slider .swiper-button-next { left: -95px; top: unset; bottom: 85px; } .master-vertical-slider .swiper-button-prev { left: -95px; top: unset; bottom: 10px; } /* Dots */ .master-vertical-slider .swiper-pagination { display: none; } .dots-true .master-vertical-slider .swiper-pagination { display: flex; } .master-vertical-slider .swiper-pagination { position: absolute; right: -70px; top: 50%; transform: translateY(-50%); width: auto; display: flex; flex-direction: column; align-items: center; } .master-vertical-slider .swiper-pagination .swiper-pagination-bullet { width: 14px; height: 14px; background-color: var(--e-global-color-tombuild_primary); border: 3px solid transparent; opacity: 0.3; margin: 3px; transition: 0.3s ease; } .master-vertical-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #fff; border-color: #fff; opacity: 1; width: 18px; height: 18px; } @media (max-width: 1024px) { .master-vertical-slider .swiper-button { display: none; } } /* ---------------------------------------- Vertical Carousel - Testimonial ---------------------------------------- */ .master-vertical-carousel { position: relative; } .master-vertical-carousel .carousel-nav { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .master-vertical-carousel .carousel-content { margin-left: 400px; } .master-vertical-carousel .carousel-nav { max-width: 400px; } .master-vertical-carousel .carousel-nav .nav-item { cursor: pointer; position: absolute; background-size: cover; background-position: center center; z-index: 0; border-radius: 10px; overflow: hidden; } .master-vertical-carousel .carousel-nav .nav-item:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background-color: var(--e-global-color-tombuild_primary); opacity: 0.5; } .master-vertical-carousel .carousel-nav .nav-item.nav0 { top: 0; left: 100px; width: 240px; height: 254px; } .master-vertical-carousel .carousel-nav .nav-item.nav0:after { display: none; } .master-vertical-carousel .carousel-nav .nav-item.nav1 { top: 0; left: 0; width: 80px; height: 75px; } .master-vertical-carousel .carousel-nav .nav-item.nav2 { top: 90px; left: 0; width: 80px; height: 75px; } .master-vertical-carousel .carousel-nav .nav-item.nav3 { top: 175px; left: 0; width: 80px; height: 75px; } .master-vertical-carousel .master-carousel-box .flickity-button { width: 50px; height: 50px; background-color: #fff; color: var(--e-global-color-tombuild_primary); left: unset; right: -100px; transform: translate(0, 0); } .master-vertical-carousel .master-carousel-box .flickity-button:disabled { opacity: 0.3 !important; cursor: not-allowed; } .master-vertical-carousel .master-carousel-box .flickity-button:before { font-size: 12px; } .master-vertical-carousel .master-carousel-box .flickity-button.previous { top: calc(50% - 29px); } .master-vertical-carousel .master-carousel-box .flickity-button.next { top: calc(50% + 29px); } .carousel-content .master-testimonial { background-color: transparent; padding: 0; min-height: 250px; color: #fff; } .carousel-content .master-testimonial .comment { font-size: 34px; line-height: 50px; color: #fff; margin: 8px 0 30px; } .carousel-content .master-testimonial .name { font-size: 22px; line-height: 36px; font-weight: 500; font-family: var(--font-heading); color: var(--e-global-color-tombuild_accent); letter-spacing: 0; } @media (max-width: 820px) { .master-vertical-carousel .carousel-content { margin-left: 0; } body:not(.rtl) .elementor-6 .elementor-element.elementor-element-0ebe364, body:not(.rtl) .elementor-6 .elementor-element.elementor-element-7e45608 { left: 0 !important; } .master-vertical-carousel .carousel-nav { display: none; } } /* ---------------------------------------- Grid ---------------------------------------- */ .grid-container { display: flex; flex-wrap: wrap; } .grid-container .column { transition: 0.3s; } /* ---------------------------------------- Text Box ---------------------------------------- */ .master-text-box { display: flex; flex-direction: column; transition: background-color 0.3s; } .master-text-box .title, .master-text-box .text, .master-text-box .icon-wrap { transition: color 0.3s; } .master-text-box .title { display: flex; font-size: 18px; align-items: center; margin-bottom: 0; } .master-text-box .icon-wrap { margin-right: 5px; color: var(--e-global-color-tombuild_accent); } .master-text-box .icon-wrap i { position: relative; display: inline-block; } .icon-has-bg .master-icon-text .icon-wrap { position: relative; width: 26px; height: 26px; line-height: 26px; background-color: #f6f6f6; } .icon-has-bg .master-icon-text .icon-wrap i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .align-center .master-text-box { align-items: center; } .align-right .master-text-box { align-items: flex-end; } @media (max-width: 1024px) { .align--tabletleft .master-text-box { align-items: flex-start; } .align--tabletcenter .master-text-box { align-items: center; } .align--tabletright .master-text-box { align-items: flex-end; } } @media (max-width: 767px) { .align--mobileleft .master-text-box { align-items: flex-start; } .align--mobilecenter .master-text-box { align-items: center; } .align--mobileright .master-text-box { align-items: flex-end; } } /* ---------------------------------------- Copyright ---------------------------------------- */ .master-copyright { font-size: 16px; line-height: 26px; color: var(--text-gray); } .master-copyright a { color: inherit; } .master-copyright a:hover { color: #fff; } /* ---------------------------------------- Counter ---------------------------------------- */ .master-counter { position: relative; overflow: hidden; transition: 0.5s all ease; } .master-counter:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; z-index: 0; transition: 0.5s ease; } .elementor-widget-mae-counter:hover .master-counter:before { transform: scale(1.2); } .master-counter .inner { display: flex; flex-direction: column; position: relative; } .master-counter .icon-wrap { font-size: 18px; line-height: normal; color: var(--e-global-color-tombuild_accent); } .master-counter .number-wrap { line-height: 1; display: flex; } .master-counter .number-wrap span { font-size: 50px; line-height: 1; font-weight: 500; color: var(--e-global-color-tombuild_primary); transition: 0.5s all ease; } .master-counter .title { font-size: 20px; line-height: 30px; margin-bottom: 0; transition: 0.5s all ease; } .icon-position-right .master-counter, .icon-position-left .master-counter { display: flex; flex-wrap: wrap; } .align-center .master-counter .inner { align-items: center; } .align-center .master-counter .icon-wrap { justify-content: center; } .align-right .master-counter .inner { align-items: flex-end; } .align-right .master-counter .icon-wrap { justify-content: flex-end; } @media (max-width: 1024px) { .align--tabletleft .master-counter .inner { align-items: flex-start; } .align--tabletcenter .master-counter .inner { align-items: center; } .align--tabletright .master-counter .inner { align-items: flex-end; } .align--tabletleft .master-counter .icon-wrap { justify-content: flex-start; } .align--tabletcenter .master-counter .icon-wrap { justify-content: center; } .align--tabletright .master-counter .icon-wrap { justify-content: flex-end; } } @media (max-width: 767px) { .align--mobileleft .master-counter .inner { align-items: flex-start; } .align--mobilecenter .master-counter .inner { align-items: center; } .align--mobileright .master-counter .inner { align-items: flex-end; } .align--mobileleft .master-counter .icon-wrap { justify-content: flex-start; } .align--mobilecenter .master-counter .icon-wrap { justify-content: center; } .align--mobileright .master-counter .icon-wrap { justify-content: flex-end; } } @media (max-width: 575px) { .icon-position-right .master-counter, .icon-position-left .master-counter { flex-direction: column; } .icon-position-right .master-counter .master-icon, .icon-position-left .master-counter .master-icon { margin-bottom: 30px !important; } } /* ---------------------------------------- Pie Chart ---------------------------------------- */ .master-pie-chart .chart { position: relative; display: inline-flex; width: auto; border-radius: 50%; line-height: 1; height: auto; } .master-pie-chart .chart .percent-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; line-height: 1; font-weight: 500; color: var(--e-global-color-tombuild_primary); } .master-pie-chart canvas { border-radius: 50%; max-width: 100%; } .pie-chart-inline-no .master-pie-chart .chart { margin-bottom: 20px; } .pie-chart-inline-yes .master-pie-chart { display: flex; flex-direction: row; } .pie-chart-inline-yes.valign-middle .master-pie-chart { align-items: center; } .pie-chart-inline-yes.valign-bottom .master-pie-chart { align-items: flex-end; } .pie-chart-inline-yes .master-pie-chart .chart { flex-shrink: 0; margin-right: 20px; } .pie-chart-inline-no.align-center .master-pie-chart { align-items: center; } .pie-chart-inline-no.align-right .master-pie-chart { align-items: flex-end; } @media (max-width: 1024px) { .pie-chart-inline-no.align--tabletleft .master-pie-chart { align-items: center; } .pie-chart-inline-no.align--tabletcenter .master-pie-chart { align-items: center; } .pie-chart-inline-no.align--tabletright .master-pie-chart { align-items: flex-end; } } @media (max-width: 767px) { .pie-chart-inline-no.align--mobileleft .master-pie-chart { align-items: center; } .pie-chart-inline-no.align--mobilecenter .master-pie-chart { align-items: center; } .pie-chart-inline-no.align--mobileright .master-pie-chart { align-items: flex-end; } } /* ---------------------------------------- Progress Bar ---------------------------------------- */ .master-progress-bar .texts { position: relative; z-index: 1; margin-bottom: 3px; display: flex; justify-content: space-between; align-items: flex-end; } .master-progress-bar .title { color: var(--e-global-color-tombuild_primary); font-size: 18px; font-weight: 500; } .master-progress-bar .percent { position: absolute; top: -28px; left: 0; display: inline-block; text-align: right; width: 0; font-size: 14px; line-height: 1; color: var(--e-global-color-tombuild_text); transition: width 0.6s linear; } .master-progress-bar .progress-bar { position: relative; height: 7px; background-color: var(--e-global-color-tombuild_light); border-radius: 4px; } .master-progress-bar .progress { height: 100%; width: 0; background-color: var(--e-global-color-tombuild_accent); transition: width 0.6s linear; border-radius: 4px; } .pin-yes .master-progress-bar .percent { width: 100% !important; } .tracker-enable .master-progress-bar .progress { position: absolute; } .tracker-enable .master-progress-bar .progress:after { position: absolute; right: 0; content: ''; border-radius: 50%; top: 50%; transform: translateY(-50%); background-color: var(--e-global-color-tombuild_accent); width: 10px; height: 10px; } /* ---------------------------------------- Video Icon ---------------------------------------- */ .master-video-icon { display: flex; align-items: center; } .master-video-icon a { position: relative; width: 90px; height: 90px; line-height: 90px; border-radius: 50%; display: inline-block; background-color: var(--e-global-color-tombuild_accent); color: #fff; text-align: center; font-size: 16px; z-index: 1; } .master-video-icon a i { margin-left: 7%; } .master-video-icon.effect-no a .p { display: none; } .master-video-icon a .p { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-color: inherit; z-index: -1; border-radius: inherit; } .master-video-icon a .p1 { animation: v-fade-before 2s infinite ease-in-out; } .master-video-icon a .p2 { animation: v-fade-after 2s infinite ease-in-out; } .master-image-morphing .master-video-icon a { background-color: #fff; color: var(--e-global-color-tombuild_accent); } .master-image-morphing .master-video-icon a .p { border-color: #fff; } .align-center .master-video-icon { justify-content: center; } .align-right .master-video-icon { justify-content: flex-end; } @media (max-width: 1024px) { .align--tabletleft .master-video-icon { justify-content: flex-start; } .align--tabletcenter .master-video-icon { justify-content: center; } .align--tabletright .master-video-icon { justify-content: flex-end; } } @media (max-width: 767px) { .align--mobileleft .master-video-icon { justify-content: flex-start; } .align--mobilecenter .master-video-icon { justify-content: center; } .align--mobileright .master-video-icon { justify-content: flex-end; } } /* ---------------------------------------- Fancy Image ---------------------------------------- */ .elementor-absolute .master-fancy-image { display: block; } .master-fancy-image { position: relative; display: flex; align-items: flex-start; width: auto; } .master-fancy-image .image-wrap { display: flex; align-items: flex-start; position: relative; width: 100%; height: auto; z-index: 0; transition: 0.3s; } .master-fancy-image .image-wrap img { width: 100%; transition: box-shadow 0.3s; } .master-fancy-image .master-video-icon { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .align-center .master-fancy-image { justify-content: center; } .align-right .master-fancy-image { justify-content: flex-end; } @media (max-width: 1024px) { .align--tabletleft .master-fancy-image { justify-content: flex-start; } .align--tabletcenter .master-fancy-image { justify-content: center; } .align--tabletright .master-fancy-image { justify-content: flex-end; } } @media (max-width: 767px) { .align--mobileleft .master-fancy-image { justify-content: flex-start; } .align--mobilecenter .master-fancy-image { justify-content: center; } .align--mobileright .master-fancy-image { justify-content: flex-end; } } /* ---------------------------------------- Image Morphing ---------------------------------------- */ .master-image-morphing { position: relative; display: flex; } .master-image-morphing image { width: 100%; } .master-image-morphing clipPath:not(:first-child) { visibility: hidden; } .master-image-morphing path { transition-delay: 0s !important; animation-delay: 0s !important; } .master-image-morphing .master-video-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .master-image-morphing svg image { width: 100%; height: auto; } /* ---------------------------------------- Image Box ---------------------------------------- */ .master-image-box { position: relative; transition: box-shadow 0.5s, transform 0.3s; } .master-image-box .icon-wrap { position: absolute; z-index: 3; } .master-image-box .content-wrap { position: relative; display: flex; flex-direction: column; transition: 0.5s all ease; } .master-image-box .headline-2 { transition: color 0.3s; margin-bottom: 16px; } .master-image-box .desc { position: relative; margin-bottom: 20px; transition: color 0.3s, opacity 0.3s, transform 0.3s; } .master-image-box .thumb { display: flex; width: 100%; position: relative; overflow: hidden; transition: all 0.3s ease; } .master-image-box .thumb img { width: 100%; height: auto; transition: transform 0.5s; } .master-image-box:hover .thumb img { transform: scale(1.1); } .master-image-box .thumb .arrow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); opacity: 0; transition: 0.3s all ease; } .master-image-box .thumb .arrow .inner { position: absolute; top: 50%; left: 50%; font-size: 24px; color: #fff; transform: translate(-50%, -50%); transition: all 0.5s ease; text-align: center; } .master-image-box:hover .thumb .arrow { opacity: 1 } .master-image-box .master-icon:before { position: absolute; top: 50%; left: 50%; content: ""; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(1); transition: 0.5s; opacity: 1; transform-origin: 50% 50%; z-index: 0; border-radius: inherit; background-color: inherit; opacity: 0; z-index: 0; } .master-image-box:hover .master-icon:before { animation: iconEff1 0.5s ease forwards; } .master-image-box .headline-2 a { transition: 0s; } /* Cursor */ .cursor-true .master-image-box .thumb .arrow { overflow: hidden; } .cursor-true .master-image-box .thumb .arrow .inner { font-size: 20px; width: 120px; height: 120px; border-radius: 50%; line-height: 120px; transition: opacity 0.6s ease 0.5s, transform 1s ease; opacity: 0; transform: scale(0) translate(-50%, -50%); background-color: #fff; color: var(--e-global-color-tombuild_primary) } .cursor-true .master-image-box:hover .thumb .arrow .inner { opacity: 1; transform: scale(1) translate(-50%, -50%); transition: opacity 0.2s ease 0.1s; } /* Style 2 */ .image-box-style-2 .master-image-box { margin: 83px 0 0; text-align: center; overflow: visible; } .image-box-style-2 .master-image-box .thumb { position: absolute; top: -83px; left: 50%; transform: translateX(-50%); width: 180px; height: 180px; display: flex; justify-content: center; align-items: center; overflow: visible; z-index: 1; } .image-box-style-2 .master-image-box .thumb .inner { border-radius: 50%; overflow: hidden; } .image-box-style-2 .master-image-box .icon-wrap { position: absolute; bottom: -15px; right: 15px; } .image-box-style-2 .master-image-box .master-icon { font-size: 44px; width: 78px; height: 78px; line-height: 78px; text-align: center; background-color: #fff; border-radius: 50%; overflow: hidden; box-shadow: 2px 5px 35px 1px rgba(0, 0, 0, 0.15); } .image-box-style-2 .master-image-box .content-wrap { padding: 110px 35px 43px; background-color: #fff; border-radius: 5px; box-shadow: 0 10px 60px 0 rgba(0,0,0,0.1); margin-bottom: 20px; } .image-box-style-2 .master-image-box { position: relative; } .image-box-style-2 .master-image-box .desc { margin-bottom: 0; } .image-box-style-2 .master-image-box .url-wrap { position: absolute; bottom: -20px; left: 50%; width: fit-content; opacity: 0; transform: translate(-50%, 10px); transition: all 0.3s ease; } .image-box-style-2 .master-image-box:hover .url-wrap { opacity: 1; transform: translate(-50%, 0px); } .image-box-style-2 .master-image-box .arrow { box-shadow: 0 10px 30px 0 #fff; } /* Style 3 */ .image-box-style-3 .master-image-box { position: relative; } .image-box-style-3 .master-image-box .content-wrap { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: auto; max-width: 670px; background-color: #fff; z-index: 1; overflow: hidden; } /* Style 4 */ .image-box-style-4 .master-image-box { border-radius: 5px; } .image-box-style-4 .master-image-box .inner { position: relative; } .image-box-style-4 .master-image-box .content-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 30px; opacity: 0; transition: all 0.5s ease; } .image-box-style-4 .master-image-box:hover .content-wrap { opacity: 1; } /* Style 5 */ .image-box-style-5 .master-image-box { display: flex; } .image-box-style-5 .master-image-box .content-wrap { flex-shrink: 1; } /* Style 6 */ .image-box-style-6 .master-image-box { text-align: center; } .image-box-style-6 .master-image-box .content-wrap { position: relative; padding: 60px 40px 40px; } .image-box-style-6 .master-image-box .content-wrap .headline-2 { position: absolute; top: 0; left: 25px; width: calc(100% - 50px); transform: translateY(-50%); font-size: 20px; line-height: 30px; padding: 20px; box-shadow: 0 10px 20px 0 rgba(33, 39,53, 0.1); background-color: #fff; z-index: 1; transition: all 0.5s ease; } .image-box-style-6 .master-image-box:hover .content-wrap .headline-2 { color: #fff; background-color: var(--e-global-color-tombuild_accent_2); } @media (max-width: 767px) { .image-box-style-3 .master-image-box .content-wrap { position: static; max-width: unset; transform: none; border: 1px solid var(--e-global-color_tombuild_border); } .image-box-style-4 .master-image-box .headline-2 { background-color: var(--e-global-color-tombuild_accent); } } @media (max-width: 350px) { .master-image-box .content-wrap { padding: 35px 40px; } } /* ---------------------------------------- Hover Box ---------------------------------------- */ .master-hover-box { position: relative; overflow: hidden; } .master-hover-box .thumb img { width: 100%; height: auto; transition: transform 0.5s; } .master-hover-box .content-wrap, .master-hover-box .hover-content-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 52px; } .master-hover-box .hover-content-wrap { opacity: 0; background-color: rgba(36,36,36,0.8); } .master-hover-box .content-wrap { align-items: center; justify-content: center; text-align: center; } .master-hover-box .icon-wrap { margin-bottom: 23px; } .master-hover-box .content-wrap .headline-2, .master-hover-box .hover-content-wrap .headline-2 { font-size: 30px; line-height: 34px; color: #fff; margin: 0; } .master-hover-box .hover-content-wrap .headline-2 { margin-bottom: 22px; } .master-hover-box .desc { color: #fff; line-height: 34px; } .master-hover-box .arrow { position: absolute; right: 0; bottom: 0; width: 56px; height: 56px; line-height: 56px; transform: translateY(100%); text-align: center; font-size: 12px; color: #fff; background-color: var(--e-global-color-tombuild_accent); transition: 0.3s transform; } .master-hover-box .arrow i { display: inline-block; } .master-hover-box:hover .thumb img { transform: scale(1.1); } .master-hover-box .arrow:hover i { animation: 0.3s link-icon linear; } .master-hover-box .hover-content-wrap { opacity: 0; transition: opacity 0.3s ease; } .master-hover-box .hover-content-wrap .headline-2, .master-hover-box .hover-content-wrap .desc { opacity: 0; transform: translateY(100%); transition: transform 0.3s ease, opacity 0.3s ease; } .master-hover-box.active .icon-wrap { transform: translateY(-50px); opacity: 0; transition: transform 0.3s ease; } .master-hover-box.active .content-wrap .headline-2 { transform: translateY(-50px); opacity: 0; transition: transform 0.3s ease; } .master-hover-box.active .hover-content-wrap { opacity: 1; } .master-hover-box.active .hover-content-wrap .desc, .master-hover-box.active .hover-content-wrap .headline-2 { transform: translateY(0); opacity: 1; } .master-hover-box.active .arrow { transform: translateY(0); } @media (max-width: 575px) { .master-hover-box .content-wrap, .master-hover-box .hover-content-wrap { padding: 30px; } } /* ---------------------------------------- Social Icons ---------------------------------------- */ .master-social-icons { font-size: 18px; display: flex; flex-wrap: wrap; } .master-social-icons svg { width: 18px; fill: currentColor; } .master-social-icons a { position: relative; display: inline-block; line-height: 1; color: var(--e-global-color-tombuild_text); } .master-social-icons a i { display: inline-block; transition: transform 0.3s ease; } .master-social-icons a:hover i { transform: scaleX(-1); } .icon-has-bg .master-social-icons a { text-align: center; background-color: var(--e-global-color-tombuild_light); width: 40px; height: 40px; font-size: 14px; } .icon-has-bg .master-social-icons a i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .icon-has-bg .master-social-icons a:hover i { transform: translate(-50%, -50%) scaleX(-1); } .align-left .master-social-icons a:first-child { margin-left: 0 !important; } .align-right .master-social-icons a:last-child { margin-right: 0 !important; } .align-center .master-social-icons { justify-content: center; } .align-right .master-social-icons { justify-content: flex-end; } .align-left .master-social-icons { justify-content: flex-start; } .palign-left .menu-panel-wrap .master-social-icons a:first-child { margin-left: 0 !important; } .palign-right .menu-panel-wrap .master-social-icons a:last-child { margin-right: 0 !important; } .palign-center .menu-panel-wrap .master-social-icons { justify-content: center; } .palign-right .menu-panel-wrap .master-social-icons { justify-content: flex-end; } .palign-left .menu-panel-wrap .master-social-icons { justify-content: flex-start; } @media (max-width: 1024px) { .align--tabletleft .master-social-icons a:first-child { margin-left: 0 !important; } .align--tabletright .master-social-icons a:last-child { margin-right: 0 !important; } .align--tabletleft .master-social-icons { justify-content: flex-start; } .align--tabletcenter .master-social-icons { justify-content: center; } .align--tabletright .master-social-icons { justify-content: flex-end; } .palign--tabletleft .menu-panel-wrap .master-social-icons a:first-child { margin-left: 0 !important; } .palign--tabletright .menu-panel-wrap .master-social-icons a:last-child { margin-right: 0 !important; } .palign--tabletleft .menu-panel-wrap .master-social-icons { justify-content: flex-start; } .palign--tabletcenter .menu-panel-wrap .master-social-icons { justify-content: center; } .palign--tabletright .menu-panel-wrap .master-social-icons { justify-content: flex-end; } } @media (max-width: 767px) { .align--mobileleft .master-social-icons a:first-child { margin-left: 0 !important; } .align--mobileright .master-social-icons a:last-child { margin-right: 0 !important; } .align--mobileleft .master-social-icons { justify-content: flex-start; } .align--mobilecenter .master-social-icons { justify-content: center; } .align--mobileright .master-social-icons { justify-content: flex-end; } .palign--mobileleft .menu-panel-wrap .master-social-icons a:first-child { margin-left: 0 !important; } .palign--mobileright .menu-panel-wrap .master-social-icons a:last-child { margin-right: 0 !important; } .palign--mobileleft .menu-panel-wrap .master-social-icons { justify-content: flex-start; } .palign--mobilecenter .menu-panel-wrap .master-social-icons { justify-content: center; } .palign--mobileright .menu-panel-wrap .master-social-icons { justify-content: flex-end; } } /* ---------------------------------------- Tabs ---------------------------------------- */ .master-tabs { position: relative; } .master-tabs p { margin-bottom: 0; } .master-tabs .tab-link .master-icon { font-size: 20px; flex-shrink: 0; } .master-tabs .tab-link .master-icon svg { width: 20px; } .master-tabs .tab-link.active .master-icon { transition: 0s; } .icon-has-bg .master-tabs .tab-link .master-icon { width: 40px; height: 40px; line-height: 40px; } .master-tabs .tab-link { position: relative; display: inline-block; white-space: normal; text-align: center; cursor: pointer; transition: all 0.3s ease; } .master-tabs .tab-content { display: none; } .master-tabs .tab-content.active { display: block; } .tabs-vertical .master-tabs .tab-link-wrap { list-style: none; margin: 0; overflow: hidden; width: 100%; display: flex; } .tabs-vertical .master-tabs .tab-content-wrap { align-items: center; padding-top: 60px; } .tabs-vertical .master-tabs .tab-link { font-size: 16px; font-weight: 500; line-height: 28px; color: #fff; background-color: var(--e-global-color-tombuild_primary); border: 1px solid var(--e-global-color-tombuild_border); padding: 5px 25px; } .tabs-vertical .master-tabs .tab-link.active { color: var(--e-global-color-tombuild_primary); background-color: #fff; } .tabs-vertical .master-tabs .tab-content-wrap { padding-top: 50px; } .tabs-vertical .master-tabs .tab-content p:last-child { margin-bottom: 0; } .btn-align-stretch .master-tabs .tab-link { width: 100%; } .btn-align-left .master-tabs .tab-link-wrap { justify-content: flex-start; } .btn-align-left .master-tabs .tab-link:last-child { margin-right: 0 !important; } .btn-align-right .master-tabs .tab-link-wrap { justify-content: flex-end; } .btn-align-center .master-tabs .tab-link-wrap { justify-content: center; } .btn-align-space-around .master-tabs .tab-link-wrap { justify-content: space-around; } .btn-align-space-between .master-tabs .tab-link-wrap { justify-content: space-between; } .btn-align-space-evenly .master-tabs .tab-link-wrap { justify-content: space-evenly; } .tabs-toggle .master-tabs .tab-link { background-color: transparent; font-size: 18px; line-height: 32px; font-weight: 400; color: var(--e-global-color-tombuild_text); } .tabs-toggle .toggle { display: inline-block; width: 72px; height: 32px; } .tabs-toggle .master-tabs .tab-link { order: 2; padding: 0; margin: 0 8px; } .tabs-toggle .master-tabs .tab-link .highlight { display: inline-block; font-size: 14px; line-height: 28px; border-radius: 5px; background: #34C635; color: #fff; margin: 2px 0 2px 20px; padding: 0 12px; } .tabs-toggle .master-tabs .tab-link:first-child { order: 1; } .tabs-toggle .master-tabs .toggle { order: 1; position: relative; background-color: var(--text-gray); border-radius: 16px; cursor: pointer; } .tabs-toggle .master-tabs .toggle .toggle-btn { display: inline-block; width: 20px; height: 20px; border-radius: 10px; background-color: #34C635; position: absolute; top: 6px; left: 6px; transition: all 0.5s ease; } .tabs-toggle .master-tabs .toggle.active .toggle-btn { transform: translateX(40px); } /* Price Tabs */ .tabs-price .master-tabs .tab-content-wrap { padding-top: 76px; } .tabs-price .master-tabs .tab-link-wrap { border: 1px solid var(--e-global-color-tombuild_border); border-radius: 6px; padding: 14px 9px; width: auto; left: 50%; } .tabs-price.btn-align-center .master-tabs .tab-link-wrap { width: fit-content; margin: 0 auto; } .tabs-price.btn-align-center .master-tabs .tab-link { font-family: 'DM Sans'; font-size: 16px; line-height: 26px; padding: 10px; border-radius: 6px; background-color: transparent; margin: 0 12px; color: var(--e-global-color-tombuild_text); font-weight: 400; } .tabs-price.btn-align-center .master-tabs .tab-link.active { color: #fff; background-color: var(--e-global-color-tombuild_accent); } .tabs-price.btn-align-center .master-tabs .tab-link:after { position: absolute; left: unset; top: 50%; right: -12px; width: 1px; height: 20px; background-color: var(--e-global-color-tombuild_border); content: ''; transform: translateY(-50%); } .tabs-price.btn-align-center .master-tabs .tab-link:last-child:after { display: none; } /* Horizontal Tabs */ .tabs-horizontal .master-tabs { display: flex; align-items: center; } .tabs-horizontal .master-tabs .tab-link-wrap { display: flex; flex-direction: column; flex-shrink: 0; flex-grow: 1; } .tabs-horizontal .master-tabs .tab-link { display: flex; align-items: center; text-align: left; padding-left: 35px; margin-bottom: 40px; } .tabs-horizontal .master-tabs .tab-link:last-child { margin-bottom: 0; } .tabs-horizontal .master-tabs .tab-link:before { background-color: var(--text-gray); } .tabs-horizontal .master-tabs .tab-content-wrap { flex-shrink: 1; flex-grow: 0; } .tabs-horizontal.btn-left .master-tabs .tab-content-wrap { padding-left: 50px; } .tabs-horizontal.btn-right .master-tabs { flex-direction: row-reverse; } .tabs-horizontal.btn-right .master-tabs .tab-content-wrap { padding-right: 50px; } @media screen and (max-width: 767px) { .tabs-horizontal .master-tabs { flex-direction: column !important; } .tabs-horizontal .master-tabs .tab-link-wrap { width: 100% !important; max-width: 100% !important; flex-direction: row; gap: 10px; } .tabs-vertical .master-tabs .tab-content-wrap { padding-top: 50px; } } @media screen and (max-width: 575px) { .tabs-price .master-tabs .tab-link-wrap { padding: 5px; } .tabs-price.btn-align-center .master-tabs .tab-link { padding: 5px; margin: 0 5px; font-size: 14px; } .tabs-price.btn-align-center .master-tabs .tab-link:after { right: -5px; } .tabs-price .master-tabs .tab-content-wrap { padding-top: 48px; } .tabs-horizontal .master-tabs .tab-link-wrap { flex-wrap: wrap; } .tabs-horizontal .master-tabs .tab-link-wrap .tab-link { width: fit-content; } .tabs-vertical .master-tabs .tab-link-wrap { flex-wrap: wrap; } .tabs-vertical .master-tabs .tab-link-wrap .tab-link { max-width: unset !important; } } /* Interactive Line */ .master-tabs .interactive-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: var(--e-global-color-tombuild_border); transition: all 0.3s cubic-bezier(0.35, 0.7, 0.35, 1); } .master-tabs .interactive-line .line { position: absolute; display: inline-block; height: 100%; top: 0; left: 0; background-color: var(--e-global-color-tombuild_accent); transition: all 0.3s cubic-bezier(0.35, 0.7, 0.35, 1); } /* ---------------------------------------- Accordions ---------------------------------------- */ .master-accordions .item { position: relative; margin-bottom: 15px; padding-bottom: 6px; } .master-accordions .title { position: relative; cursor: pointer; display: flex; align-items: center; flex-direction: row-reverse; justify-content: space-between; width: 100%; margin-bottom: 8px; } .master-accordions .title .arrow { position: relative; display: inline-block; line-height: 30px; text-align: center; transition: all 0.3s ease; width: 30px; height: 30px; flex-shrink: 0; } .master-accordions .title .arrow i { margin-left: 2px; } .master-accordions .title h3 { font-size: 18px; line-height: 28px; color: var(--e-global-color-tombuild_primary); margin-bottom: 0; transition: color 0.3s, background 0.3s; } .master-accordions .content { display: none; font-size: 16px; line-height: 26px; padding-bottom: 15px; } .master-accordions p { margin-bottom: 0; } .arrow-none .master-accordions .title .arrow { display: none; } .arrow-left .master-accordions .title { flex-direction: row; justify-content: space-between; } /* Button */ .btn-plus .master-accordions .title .arrow:before, .btn-plus .master-accordions .title .arrow:after { position: absolute; top: 50%; left: 50%; content: ""; text-align: center; transition: transform 0.3s, color 0.3s; color: var(--e-global-color-tombuild_accent); background-color: currentColor; transform: translate(-50%, -50%); transform-origin: 50% 50%; } .btn-plus .master-accordions .title .arrow:before { width: 2px; height: 12px; } .btn-plus .master-accordions .title .arrow:after { width: 12px; height: 2px; } .btn-plus .master-accordions .item.active .title .arrow:before { transform: scaleY(0) translate(-50%, -50%); } .btn-plus .master-accordions .item.active .title .arrow:after, .btn-plus .master-accordions .item.active .title .arrow:before { color: #fff; } .btn-arrow .master-accordions .title .arrow:after { content: '\f077'; font-family: 'core-icons'; color: var(--e-global-color-tombuild_accent); font-size: 14px; transition: all 0.3s ease; } .btn-arrow .master-accordions .item.active .title .arrow { transform: rotate(180deg); } /* Style 1 */ .accordion-style-1 .master-accordions .item:last-child { margin-bottom: 0 !important; } .accordion-style-1 .master-accordions .item { background-color: #fff; margin-bottom: 10px; padding: 0; } .accordion-style-1 .master-accordions .item .title { margin: 0; padding: 15px 30px; padding-right: 22px; transition: 0.3s ease; } .accordion-style-1 .master-accordions .item.active .title { background-color: var(--e-global-color-tombuild_accent); } .accordion-style-1 .master-accordions .item.active .title h3 { color: #fff; } .accordion-style-1 .master-accordions .content { padding: 10px 30px 20px; } /* Style 2 */ .accordion-style-2 .master-accordions .item { background-color: #fff; margin-bottom: 10px; padding: 0; } .accordion-style-2 .master-accordions .item .title { padding: 7px 35px; border-bottom: 1px solid var(--e-global-color-tombuild_border); margin: 0; } .accordion-style-2 .master-accordions .title h3 { font-size: 18px; line-height: 30px; } .accordion-style-2 .master-accordions .item.active .title h3 { color: var(--e-global-color-tombuild_accent); } .accordion-style-2 .master-accordions .content { font-size: 16px; line-height: 34px; padding: 22px 35px; } .accordion-style-2 .master-accordions .item .title .arrow { width: 50px; height: 50px; right: -15px; } .accordion-style-2 .master-accordions .item .title .arrow:after { position: absolute; top: 0px; right: 0px; width: 50px; height: 50px; content: "\e93b"; font-family: 'core-icons'; color: var(--e-global-color-tombuild_primary); background-color: transparent; font-size: 12px; text-align: center; line-height: 50px; font-weight: 400; transition: all 0.3s ease; } .accordion-style-2 .master-accordions .item.active .title .arrow:after, .accordion-style-2 .master-accordions .item .title:hover .arrow:after { color: var(--e-global-color-tombuild_accent); } .accordion-style-2 .master-accordions .item.active .title .arrow:after { transform: rotate(180deg); } @media screen and (max-width: 767px) { .accordion-style-2 .master-accordions .title h3 { font-size: 18px; line-height: 24px; } .accordion-style-2 .master-accordions .item .title, .accordion-style-2 .master-accordions .content { padding-left: 15px; padding-right: 15px; } .arrow-left .master-accordions .content { padding-left: 0; } .master-accordions .title .arrow:after { width: 10px; } .master-accordions .title .arrow:before { height: 10px; } } /* ---------------------------------------- Subscribe Form ---------------------------------------- */ .master-subscribe-form .mc4wp-form { display: flex; width: 100%; } .master-subscribe-form .mc4wp-form-fields { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; } .master-subscribe-form input[type="email"] { font-size: 16px; background-color: #f4f4f4; margin-right: 6px; flex-grow: 1; padding: 15px 20px; } .master-subscribe-form input[type="submit"] { flex-shrink: 0; padding: 0 40px; margin-bottom: 10px; } .master-subscribe-form .master-button:hover { background-color: var(--e-global-color-tombuild_accent); } /* Style 2 */ .master-subscribe-form.style-2 .mc4wp-form-fields { flex-wrap: nowrap; width: 100%; } .master-subscribe-form.style-2 input[type="email"] { font-size: 14px; line-height: 44px; margin: 0; border: none; padding: 0 12px; width: 100%; color: rgba(255,255,255,0.3); background-color: #111; font-weight: 400; } .master-subscribe-form.style-2 input[type="submit"] { margin: 0; padding: 0 12px; line-height: 44px; } .master-subscribe-form.style-2 button { width: 44px; height: 44px; padding: 0; position: absolute; top: 0px; right: 0px; font-size: 14px; line-height: 44px; color: #fff; background-color: transparent; } .master-subscribe-form.style-2 button .icon { margin: 0; } .master-subscribe-form.style-2 button .bg-hover, .master-subscribe-form.style-2 button .text { display: none; } .master-subscribe-form.style-2 button .icon { line-height: 44px; font-size: 12px; } .align-center .master-subscribe-form .mc4wp-form { justify-content: center; } .align-right .master-subscribe-form .mc4wp-form { justify-content: flex-end; } @media (max-width: 1024px) { .align--tabletleft .master-subscribe-form .mc4wp-form { justify-content: flex-start; } .align--tabletcenter .master-subscribe-form .mc4wp-form { justify-content: center; } .align--tabletright .master-subscribe-form .mc4wp-form { justify-content: flex-end; } } @media (max-width: 767px) { .align--mobileleft .master-subscribe-form .mc4wp-form { justify-content: flex-start; } .align--mobilecenter .master-subscribe-form .mc4wp-form { justify-content: center; } .align--mobileright .master-subscribe-form .mc4wp-form { justify-content: flex-end; } } @media (max-width: 400px) { .align-center .master-subscribe-form .mc4wp-form-fields { flex-direction: column; } .align-center .master-subscribe-form input[type="email"] { margin-right: 0; } } /* ---------------------------------------- Contact Form ---------------------------------------- */ .master-cf7 input, .master-cf7 textarea { width: 100%; } .align-right .wpcf7-spinner { position: absolute; right:-60px; bottom: 20px; } /* ---------------------------------------- Gallery ---------------------------------------- */ .master-gallery .thumb { position: relative; overflow: hidden; border-radius: 5px; } .master-gallery .thumb::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; transition: all 0.5s ease; z-index: 1; pointer-events: none; transform: scale(0.8); opacity: 0; background-color: var(--e-global-color-tombuild_accent); } .master-gallery:hover .thumb::before { transform: scale(1); opacity: 0.9 } .master-gallery .zoom-popup-mfp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: transparent; color: #fff; text-align: center; cursor: pointer; font-size: 22px; font-weight: 400; opacity: 0; visibility: hidden; transition: all ease 0.3s; z-index: 99999; } .master-gallery .zoom-popup-mfp::before { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: '\e917'; font-family: 'core-icons'; font-size: 36px; color: #fff; transition: 0.3s ease; } .master-gallery:hover .zoom-popup-mfp { opacity: 1; visibility: visible; } .master-gallery .thumb img { width: 100%; display: inline-block; transition: transform 0.5s ease, width 0s; } .master-gallery:hover .thumb img { transform: scale(1.1); } .master-carousel-box .master-gallery { margin-top: 10px; transition: transform 0.3s; } .master-carousel-box .master-gallery:hover { transform: translateY(-10px); } .custom-grid .cbp-item img { width: 270px; } .custom-grid .cbp-item:nth-child(1) .cbp-item-wrapper { margin-top: 0px; } .custom-grid .cbp-item:nth-child(2) .cbp-item-wrapper { margin-top: 80px; } .custom-grid .cbp-item:nth-child(3) .cbp-item-wrapper { margin-top: 40px; } .custom-grid .cbp-item:nth-child(4) .cbp-item-wrapper { margin-top: 0px; } @media (max-width: 767px) { .custom-grid .cbp-item img { width: 370px; } .custom-grid .cbp-item:nth-child(1) .cbp-item-wrapper { margin-top: 0px; } .custom-grid .cbp-item:nth-child(2) .cbp-item-wrapper { margin-top: 40px; } .custom-grid .cbp-item:nth-child(3) .cbp-item-wrapper { margin-top: 0px; } .custom-grid .cbp-item:nth-child(4) .cbp-item-wrapper { margin-top: 0px; } } @media (max-width: 570px) { .custom-grid .cbp-item img { width: 100%; } .custom-grid .cbp-item:nth-child(1) .cbp-item-wrapper { margin-top: 0px; } .custom-grid .cbp-item:nth-child(2) .cbp-item-wrapper { margin-top: 0px; } .custom-grid .cbp-item:nth-child(3) .cbp-item-wrapper { margin-top: 0px; } .custom-grid .cbp-item:nth-child(4) .cbp-item-wrapper { margin-top: 0px; } } /* ---------------------------------------- Gallery Stack ---------------------------------------- */ .elementor-widget-mae-gallery-stack { z-index: 0; } .master-gallery-stack { position: relative; display: flex; } .master-gallery-stack > div:not(:first-child) { position: absolute; } .master-gallery-stack .master-video-icon { position: absolute; z-index: 9; } .image-width-full .master-gallery-stack { width: 100%; display: block; } .image-width-fit .elementor-widget-container { position: relative; } .image-width-fit .master-gallery-stack, .image-width-fit .master-gallery-stack > div:first-child { width: fit-content; width: -moz-fit-content; min-width: 300px; } .master-gallery-stack > div:first-child { position: relative; } .image-width-auto, .image-width-auto .master-gallery-stack { position: absolute; display: block; width: 100%; height: 100%; } .image-width-auto.elementor-element.elementor-widget-empty { background-color: transparent; } .image-width-auto .master-gallery-stack div:first-child { position: absolute; } .master-gallery-stack .master-text { width: -webkit-fill-available; transition: all 0.3s ease; } .master-gallery-stack .master-text > .inner { width: inherit; } /* Fix blurry when animation */ .master-gallery-stack img { -webkit-backface-visibility: hidden; -ms-transform: translateZ(0); /* IE 9 */ -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */ transform: translateZ(0); } .align-center .master-gallery-stack { justify-content: center; } .align-right .master-gallery-stack { justify-content: flex-end; } @media (max-width: 1024px) { .align--tabletleft .master-gallery-stack { justify-content: flex-start; } .align--tabletcenter .master-gallery-stack { justify-content: center; } .align--tabletright .master-gallery-stack { justify-content: flex-end; } } @media (max-width: 767px) { .align--mobileleft .master-gallery-stack { justify-content: flex-start; } .align--mobilecenter .master-gallery-stack { justify-content: center; } .align--mobileright .master-gallery-stack { justify-content: flex-end; } .master-gallery-stack img { transition: width 0s !important; } } /* ---------------------------------------- Shape ---------------------------------------- */ .master-shape { width: 100px; height: 100px; background: var(--e-global-color-tombuild_accent); } /* ---------------------------------------- Text ---------------------------------------- */ .master-text { display: flex; justify-content: center; align-items: center; } .m90deg { text-orientation: mixed; writing-mode: vertical-lr; transform: rotate(180deg); } .r90deg { text-orientation: mixed; writing-mode: vertical-lr; } /* ---------------------------------------- Call To Action ---------------------------------------- */ .master-cta { display: inline-block; transition: none; } .master-cta .content-wrap { display: flex; align-items: center; transition: all 0.3s ease; } .master-cta .icon { display: inline-block; font-size: 40px; line-height: 1; margin-right: 20px; color: var(--e-global-color-tombuild_accent); transition: all 0.3s ease; } .master-cta .icon svg { width: 35px; } .master-cta .icon i { display: inline-block; will-change: transform; } .master-cta .texts { display: flex; flex-direction: column; } .master-cta .text { display: block; font-size: 14px; line-height: 20px; color: var(--e-global-color-tombuild_text); transition: all 0.3s ease; } .master-cta .phone { display: block; font-size: 16px; line-height: 26px; font-weight: 600; color: var(--e-global-color-tombuild_primary); transition: all 0.3s ease; } .icon-has-bg .master-cta .icon { width: 36px; height: 36px; text-align: center; line-height: 36px; font-size: 11px; } .shake-hover .master-cta:hover .icon svg, .shake-hover .master-cta:hover .icon i { animation: 1s tada infinite alternate; } .shake-always .master-cta .icon svg, .shake-always .master-cta .icon i { animation: 1s tada infinite alternate; } /* ---------------------------------------- Price box ---------------------------------------- */ .master-price-box { text-align: center; transition: all 0.3s ease; background-color: #fff; overflow: hidden; } .master-price-box .extra-text { margin-bottom: 5px; } .master-price-box .divider { display: flex; width: 100%; height: 1px; background-color: var(--e-global-color-tombuild_border); } .master-price-box .price { display: inline-block; font-size: 68px; line-height: 1.125; font-weight: 500; margin-bottom: 15px; } .master-price-box .price sub, .master-price-box .price sup { font-size: 36px; line-height: 46px; } .master-price-box .price sub { bottom: 0; } .master-price-box .price sup { top: -25px; } .master-price-box .plan { font-size: 20px; line-height: 28px; margin-bottom: 6px; font-weight: 500; color: var(--e-global-color-tombuild_accent); } .master-price-box .desc { margin-bottom: 44px; } .master-price-box .content-wrap { padding: 0 100px 50px; transition: all 0.3s ease; } .master-price-box .heading-wrap { position: relative; padding: 35px 100px 30px; transition: all 0.3s ease; } .master-price-box .featured-list { text-align: left; } .master-price-box .featured-title { font-size: 22px; line-height: 32px; margin-bottom: 17px; } .master-price-box .featured-list .item { display: flex; justify-content: center; margin-bottom: 28px; } .master-price-box .featured-list .item:last-child { margin-bottom: 0; } .master-price-box .featured-list .item > span { display: inline-block; font-size: 16px; line-height: 24px; } .master-price-box .featured-list .item .icon { font-size: 16px; line-height: 24px; color: #2dd570; margin-right: 15px; } /* Style 1 */ .price-style-1 .master-price-box { box-shadow: none; border: 1px solid var(--e-global-color-tombuild_border); } .price-style-1 .master-price-box .heading-wrap { padding: 25px 45px 30px; } .price-style-1 .master-price-box .content-wrap { padding: 35px 40px 35px; } .price-style-1 .master-price-box .plan { color: var(--e-global-color-tombuild_primary); } .price-style-1 .master-price-box > .url-wrap { padding: 0 35px; } .featured-center .elementor-column:nth-child(2) .price-style-1 .master-price-box { background-color: var(--e-global-color-tombuild_accent); } .featured-center .elementor-column:nth-child(2) .price-style-1 .master-price-box .plan, .featured-center .elementor-column:nth-child(2) .price-style-1 .master-price-box .price, .featured-center .elementor-column:nth-child(2) .price-style-1 .master-price-box .extra-text, .featured-center .elementor-column:nth-child(2) .price-style-1 .master-price-box .featured-list .item > span { color: #fff; } .featured-center .elementor-column:nth-child(2) .price-style-1 .master-price-box .featured-list .item .icon { color: var(--e-global-color-tombuild_accent); background-color: rgba(255,255,255,0.3); } .featured-center .elementor-column:nth-child(2) .price-style-1 .master-price-box .master-button { background-color: #fff; } .featured-center .elementor-column:nth-child(2) .price-style-1 .master-price-box .master-button .content-base { color: var(--e-global-color-tombuild_accent); } .featured-center .elementor-column:nth-child(2) .price-style-1 .master-price-box .master-button:hover .content-base { color: #fff; } /* Style 2 */ .price-style-2 .master-price-box .content-wrap { position: relative; padding: 0 100px 65px; } .price-style-2 .master-price-box .url-wrap { position: absolute; bottom: 0; left: 0; width: 100%; } .price-style-2 .master-price-box .url-wrap .master-button { width: 100%; text-align: center; justify-content: center; border-radius: 0; } .price-style-2 .master-price-box .url-wrap .master-button .bg-hover { opacity: 0; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; padding-top: 0; border-radius: 0; } .price-style-2 .master-price-box .url-wrap .master-button:hover .bg-hover { opacity: 1; } /* ---------------------------------------- Project ---------------------------------------- */ .master-project { position: relative; text-align: left; transition: box-shadow 0.3s, transform 0.3s; overflow: hidden; display: flex; flex-direction: column; } .master-project .thumb { position: relative; display: inline-flex; width: 100%; overflow: hidden; } .master-project .thumb .inner { display: inline-block; width: 100%; } .master-project .thumb img { width: 100%; height: auto; transition: transform 0.5s; } .master-project .content-wrap { display: flex; flex-direction: column; overflow: hidden; z-index: 1; } .master-project .cat-wrap { position: relative; font-size: 12px; line-height: 20px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; } .master-project .cat-sep { display: inline-block; padding: 0 5px; } .master-project .cat-item { display: inline-block; color: var(--e-global-color-tombuild_text); margin-bottom: 0px; } .master-project .desc { position: relative; font-size: 14px; line-height: 30px; } .master-project .cat-item:hover { color: var(--e-global-color-tombuild_primary); } .inview .master-project .content-wrap, .inview .master-project .headline-2, .inview .master-project .cat-item, .inview .master-project .desc { transition: 0.3s; } .master-project .headline-2 a { transition: 0s; } .master-project > .arrow { position: absolute; right: 30px; top: 30px; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 18px; color: var(--e-global-color-tombuild_primary); background-color: #fff; border-radius: 50%; opacity: 0; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); transition: transform 0.5s, opacity 0.3s; z-index: 10; } .master-project:hover > .arrow { opacity: 1; } .master-project.active .thumb img { transform: scale(1.1); } .master-project:hover .thumb:before, .master-project.active .thumb:before { transform: translateY(0); opacity: 1; } .master-project .arrow i { display: inline-block; will-change: transform; } .master-project .arrow:hover i { animation: 0.3s link-icon linear; } .master-project .content-wrap .arrow { display: none; opacity: 1; font-size: 16px; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; color: var(--e-global-color-tombuild_primary); background-color: #fff; } .custom-overlay-yes .thumb:before { display: none; } .custom-overlay-yes .overlay { position: absolute; z-index: 1; opacity: 0; transition: 0.5s ease; } .custom-overlay-yes .master-project:hover .overlay { opacity: 1; } /* Style 1 */ .project-style-1 .master-project { transition: background 0.3s ease; } .project-style-1 .master-project a.thumb:before { opacity: 1; background-color: transparent; background-image: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); } .project-style-1 .master-project > .arrow { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .project-style-1 .master-project .content-wrap { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; padding: 40px 60px; transform: translateY(20px); opacity: 0; text-align: center; } .project-style-1 .master-project.active .content-wrap { transform: translateY(0); opacity: 1; } .project-style-1 .master-project .content-wrap > .arrow { display: none; } .project-style-1 .master-project .headline-2 { margin-bottom: 4px; color: #fff; } /* Style 2 */ .project-style-2 .master-project { text-align: center; } .project-style-2 .master-project .arrow { opacity: 0; } .project-style-2 .master-project .content-wrap .arrow { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; } .project-style-2 .master-project .thumb:before { background-color: transparent; } .project-style-2 .master-project .content-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; align-items: center; opacity: 1; padding: 40px 40px 35px; transform: scale(0.8); opacity: 0; transition: all 0.3s ease; } .project-style-2 .master-project.active .content-wrap { transform: scale(1); opacity: 1; } .project-style-2 .master-project .content-wrap:after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: #0A2357; opacity: 0.7; z-index: -1; transition: all 0.3s ease; } .project-style-2 .master-project .cat-item { color: rgba(255,255,255,0.6); } .project-style-2 .master-project .cat-item:hover { color: #fff; } .project-style-2 .master-project .cat-sep { color: rgba(255,255,255,0.6); } .project-style-2 .master-project .headline-2 { font-size: 20px; color: #fff; margin-bottom: 0; } .project-style-2 .master-project .desc { max-width: 305px; color: rgba(255,255,255,0.7); font-size: 15px; line-height: 26px; opacity: 0; transition: 0.3s all ease; } .project-style-2 .master-project.active .desc { opacity: 1; } /* Style 3 */ .project-style-3 .master-project .content-wrap { position: absolute; left: 0; bottom: 0; padding: 40px; opacity: 0; transform: translateY(20px); transition: 0.3s all ease; } .project-style-3 .master-project:hover .content-wrap { opacity: 1; transform: translateY(0); } .project-style-3 .master-project .headline-2 { margin-bottom: 0; max-width: 250px; } .project-style-3 .master-project .headline-2, .project-style-3 .master-project .cat-item, .project-style-3 .master-project .cat-sep, .project-style-3 .master-project .desc { color: #fff; } .project-style-3 .master-project a.thumb:before { background-image: linear-gradient(to top, #ee763c, rgba(23,23,23,0)); background-color: transparent; } .project-style-3 .master-project:hover a.thumb:before { opacity: 1; transform: translateY(0); } /* Style 4 */ .project-style-4 .master-project .arrow { display: none; } .project-style-4 .master-project .content-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 38px 30px; } .project-style-4 .master-project .headline-2, .project-style-4 .master-project .cat-item { color: #fff; } .project-style-4 .master-project .headline-2 { order: 0; font-size: 36px; line-height: 46px; font-weight: 500; margin-bottom: 2px; } .project-style-4 .master-project .cat-wrap { order: 1; } .project-style-4 .master-project .cat-item { font-size: 18px; line-height: 28px; font-weight: 400; } /* Project Thumb */ .project-thumb .master-project .arrow, .project-thumb .master-project .content-wrap { display: none; } @media (max-width: 575px) { .project-style-2 .master-project .content-wrap { transform: translateY(0); } .project-style-2 .master-project .headline-2 { margin-bottom: 0; } .project-style-2 .master-project .desc { display: none; } } /* ---------------------------------------- News ---------------------------------------- */ .master-news { position: relative; overflow: hidden; } .master-news .content-wrap { position: relative; padding-top: 21px; transition: all 0.3s ease; } .master-news .image-wrap { position: relative; display: flex; width: 100%; } .master-news .headline-2 { font-size: 22px; line-height: 26px; } .master-news .headline-2 a { color: inherit; transition: 0s; } .master-news .headline-2:hover { color: var(--e-global-color-tombuild_accent); } .master-news .thumb { overflow: hidden; } .master-news .thumb .inner { display: inline-block; width: 100%; transition: all 0.5s ease; } .master-news .thumb img { width: 100%; height: auto; } .master-news .url-wrap { line-height: 1; } .author-avatar .master-news .post-by-author:after { display: none; } .author-avatar .master-news .post-by-author { padding-left: 0; text-transform: none; font-size: 14px; letter-spacing: 0; } .author-avatar .master-news .post-by-author img { display: inline-block; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--e-global-color-tombuild_accent); margin-right: 10px; transition: 0s; } .author-avatar .master-portfolio .master-news .post-by-author { position: relative; padding-left: 50px; height: 40px; display: flex; align-items: center; } .author-avatar .master-portfolio .master-news .post-by-author img { position: absolute; top: 0; left: 0; } .master-news .post-date.default { position: absolute; top: 40px; left: 40px; display: inline-flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; font-weight: 500; font-size: 14px; line-height: 20px; text-transform: uppercase; letter-spacing: 0.1em; background-color: var(--e-global-color-tombuild_accent); color: #fff; z-index: 1; padding: 0 14px; width: 65px; height: 75px; border-radius: 5px; text-align: center; } .master-news .desc { margin-bottom: 23px; } /* Style 1 */ .news-style-1 .master-news { background-color: transparent; overflow: visible; } .news-style-1 .master-news .image-wrap { overflow: hidden; } .news-style-1 .master-news .image-wrap .post-date { display: none; } .news-style-1 .master-news .post-date.default:after { display: none; } .news-style-1 .master-news .post-date.default { writing-mode: vertical-rl; text-orientation: mixed; top: 0; left: 0; font-size: 14px; font-weight: 500; background-color: var(--e-global-color-tombuild_accent); line-height: 40px; text-align: center; height: 100%; width: auto; padding: 5px; } .news-style-1 .master-news .post-meta { margin-bottom: 12px; } .news-style-1 .master-news .bottom-wrap .post-meta { margin-bottom: 0; } .news-style-1 .master-news .bottom-wrap .post-meta .item { margin: 0; } .news-style-1 .master-news .post-meta .item { padding-left: 0; } .news-style-1 .master-news .post-meta .item:after { display: none; } .news-style-1 .master-news .sep { display: none; } .news-style-1 .master-news .content-wrap { padding: 20px 35px 18px 35px; background-color: #fff; border: 1px solid var(--e-global-color-tombuild_border); z-index: 1; } .news-style-1 .master-news .headline-2 { font-size: 18px; line-height: 27px; margin-bottom: 13px; } /* Style 2 */ .news-style-2 .master-news .content-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 30px 34px 10px; background-color: rgba(13,13,63,0.5); display: flex; flex-direction: column; justify-content: flex-end; } .news-style-2 .master-news .post-meta .item, .news-style-2 .master-news .post-meta a, .news-style-2 .master-news .headline-2, .news-style-2 .master-news .desc { color: #fff; } .news-style-2 .master-news .sep { display: none; } .news-style-2 .master-news .post-meta { margin-bottom: 5px; } .news-style-2 .master-news .headline-2 { max-width: 235px; } .news-style-2 .master-news .url-wrap { border-top: 1px solid rgba(255,255,255,0.1); } .news-style-2 .master-news .url-wrap .master-link { display: inline-flex; justify-content: space-between; width: 100%; } @media (max-width: 575px) { .master-news .post-date.default { top: 15px; left: 15px; width: 40px; height: 50px; font-size: 12px; line-height: 16px; } } /* ---------------------------------------- News Block ---------------------------------------- */ .master-news-block { display: flex; } .master-news-block .master-news .post-date { left: unset; right: 20px; } .master-news-block .master-news .headline-2 { line-height: 34px; margin-bottom: 0; } .master-news-block .master-news .thumb { display: flex; align-items: flex-start; } .master-news-block .master-news { width: 25%; margin-right: 30px; height: auto; } .master-news-block .master-news.news-1 { position: relative; width: 50%; margin-right: 30px; } .master-news-block .master-news.news-1 .thumb:before { opacity: 0.5; } .master-news-block .master-news.news-1 .content-wrap { position: absolute; bottom: 0; left: 0; padding: 40px 50px; } .master-news-block .master-news.news-1 .meta-sep, .master-news-block .master-news.news-1 .post-meta .item, .master-news-block .master-news.news-1 .headline-2 { color: #fff; } .master-news-block .master-news.news-1 .headline-2 { max-width: 340px; } .master-news-block .master-news.news-1 .headline-2:hover, .master-news-block .master-news.news-1 .post-meta .item a:hover { opacity: 0.7; color: #fff; } .master-news-block .master-news.news-3 { margin-right: 0; } .master-news-block .master-news.active .post-date { background-color: var(--e-global-color-tombuild_accent); color: #fff; } .master-news-block .master-news .post-meta .item:after { display: none; } @media (max-width: 1024px) { .master-news-block { flex-wrap: wrap; } .master-news-block .master-news { width: calc(50% - 15px); } .master-news-block .master-news.news-1 { width: 100%; margin: 0 0 30px; } } @media (max-width: 575px) { .master-news-block .master-news { width: 100%; margin: 0 0 30px } .master-news-block .master-news.news-1 .content-wrap { padding: 30px 25px; } .master-news-block .master-news.news-3 { margin-bottom: 0; } .master-news-block .master-news .post-meta { margin-bottom: 5px;} .master-news-block .master-news .headline-2 { font-size: 22px; line-height: 34px; } .master-news-block .master-news .post-date { display: none; } } /* ---------------------------------------- Team ---------------------------------------- */ .master-team { position: relative; text-align: center; transition: all 0.3s ease; } .master-team .avatar-wrap { position: relative; } .master-team .avatar { position: relative; display: inline-flex; width: 100%; overflow: hidden; transition: 0.3s; } .master-team .avatar .inner { display: inline-block; width: 100%; } .master-team .avatar img { width: 100%; height: auto; } .master-team .content-wrap { display: flex; flex-direction: column-reverse; justify-content: center; text-align: center; padding: 35px 30px 42px; transition: all 0.3s ease; } .master-team .team-role { display: inline-block; font-size: 16px; line-height: 24px; } .master-team .team-name { font-size: 20px; line-height: 24px; margin-bottom: 0px; transition: all 0.2s ease; } .master-team .team-name a { color: inherit; line-height: inherit; transition: 0s; } .master-team .desc { margin-bottom: 30px; } .master-team .image-wrap { position: relative; } .master-team .socials-wrap a { font-size: 16px; color: var(--e-global-color-tombuild_text); width: 22px; text-align: center; margin: 0 9px; } .master-team .socials-wrap a:hover { color: var(--e-global-color-tombuild_accent); } /* Style 1 */ .team-style-1 .master-team .image-wrap .socials { display: none; } .team-style-1 .master-team .team-name { margin-bottom: 11px; } .team-style-1 .master-team .team-role { margin-bottom: 35px; } .team-style-1 .master-team .content-wrap { background-color: #fff; border: 1px solid var(--e-global-color-tombuild_border); } .team-style-1 .master-team.active { box-shadow: 0 10px 35px 0 rgba(33,39,53,0.3); } .team-style-1 .master-team.active .content-wrap { border-color: transparent; } /* Style 2 */ .team-style-2 .master-team { background-image: linear-gradient(to top, #eaeaf1 0%, transparent 264px); background-color: transparent; border-radius: 20px; } .team-style-2 .master-team.active .team-name, .team-style-2 .master-team.active .team-role, .team-style-2 .master-team:hover .team-name, .team-style-2 .master-team:hover .team-role { color: #fff; } .team-style-2 .master-team:before { position: absolute; bottom: 0; left: 0; width: 100%; height: 264px; content: ''; border-radius: 20px 20px 0 0; z-index: 1; background-color: var(--e-global-color-tombuild_accent); transition: 0.3s ease; opacity: 0; transform-origin: 50% 0%; } .team-style-2 .master-team.active:before, .team-style-2 .master-team:hover:before { opacity: 1; } .team-style-2 .master-team:after { position: absolute; top: 0; left: 0; width: 100%; height: 200px; content: ''; border-radius: 20px 20px 0 0; background-image: linear-gradient(to bottom, #eaeaf1, transparent); z-index: -3; transform-origin: 50% 0; transition: 0.3s ease; } .team-style-2 .master-team > .inner { position: relative; z-index: 1; padding: 20px; border-radius: 20px; } .team-style-2 .master-team > .inner:before { position: absolute; top: 2px; left: 2px; width: calc(100% - 4px); height: 250px; content: ''; border-radius: 18px 18px 0 0; background-color: #fff; z-index: -1; } .team-style-2 .master-team > .inner:after { position: absolute; top: 0; left: 0; width: 100%; height: 200px; content: ''; border-radius: 20px 20px 0 0; background-image: linear-gradient(to bottom, var(--e-global-color-tombuild_accent), transparent); z-index: -2; transform-origin: 50% 0; transition: 0.3s ease; transform: scaleX(0); } .team-style-2 .master-team.active > .inner:after, .team-style-2 .master-team:hover > .inner:after { transform: scaleX(1); } .team-style-2 .master-team .image-wrap { border-radius: 20px; overflow: hidden; } .team-style-2 .master-team .content-wrap { padding: 27px 0 5px; position: static; } .team-style-2 .master-team .name-role-info { display: flex; flex-direction: column-reverse; } .team-style-2 .master-team .content-wrap .socials { display: none; } .team-style-2 .master-team .socials .socials-wrap { position: absolute; bottom: 0; left: 0; display: flex; flex-direction: row; justify-content: center; width: 100%; padding: 10px 0; background-color: rgba(40,183,154,0.9); transition: 0.5s ease; transform: scaleY(0); transform-origin: 50% 100%; } .team-style-2 .master-team.active .socials .socials-wrap, .team-style-2 .master-team:hover .socials .socials-wrap { transform: scaleY(1); } .team-style-2 .master-team .socials .socials-wrap a { display: inline-block; width: 44px; height: 34px; font-size: 18px; text-align: center; line-height: 34px; margin: 0; color: #fff; } .team-style-2 .master-team .socials .socials-wrap a:hover { color: var(--e-global-color-tombuild_accent); } /* ---------------------------------------- Testimonial ---------------------------------------- */ .master-testimonial { position: relative; transition: box-shadow 0.3s, transform 0.3s; } .master-testimonial .name { font-size: 15px; line-height: 22px; color: var(--e-global-color-tombuild_primary); font-weight: 500; margin-bottom: 0px; } .master-testimonial .role { font-size: 15px; line-height: 22px; } .master-testimonial .comment { font-size: 16px; line-height: 24px; color: var(--e-global-color-tombuild_text); } .master-testimonial .star-rating { position: relative; width: auto; height: auto; margin-bottom: 9px; } .master-testimonial .star-rating > span { display: inline-block; font-size: 16px; line-height: 1; color: var(--e-global-color-tombuild_accent); } .master-testimonial .avatar { position: relative; overflow: hidden; border-radius: 50%; width: fit-content; } .master-testimonial .avatar-wrap .icon { display: inline-block; font-size: 18px; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; background-color: var(--e-global-color-tombuild_accent); color: #fff; position: absolute; top: 23px; left: 68px; } .master-testimonial .quote { position: absolute; right: 30px; bottom: 20px; width: 60px; fill: #f4f4f4; transition: 0.5s ease; } .master-testimonial:hover .quote { fill: var(--e-global-color-tombuild_accent); opacity: 1; } /* Style 1 */ .testimonial-style-1 .master-testimonial { border: 1px solid var(--e-global-color-tombuild_border); } .testimonial-style-1 .master-testimonial .inner { position: relative; display: flex; flex-direction: column; text-align: center; align-items: center; justify-content: center; padding: 30px 0 0; background-color: #fff; } .testimonial-style-1 .master-testimonial .inner:after { position: absolute; top: 0; left: 0; width: 100%; height: 5px; content: ''; background-color: var(--e-global-color-tombuild_accent); transform-origin: 50% 0%; transform: scaleX(0); transition: all 0.5s ease; } .testimonial-style-1 .master-testimonial .avatar-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; } .testimonial-style-1 .master-testimonial .avatar { margin-bottom: 15px; } .testimonial-style-1 .master-testimonial .content-wrap { margin-top: 18px; border-top: 1px solid var(--e-global-color-tombuild_border); padding: 25px 40px 28px; } .testimonial-style-1 .master-testimonial.active { box-shadow: 0 10px 35px 0 rgba(33,39,53,0.2); } .testimonial-style-1 .master-testimonial.active .inner:after { transform: scaleX(1); } /* Style 2 */ .testimonial-style-2 .master-testimonial { padding: 45px 35px 30px; overflow: hidden; } .testimonial-style-2 .master-testimonial .inner { position: relative; display: flex; flex-direction: column-reverse; z-index: 5; } .testimonial-style-2 .master-testimonial .avatar-wrap { display: flex; align-items: center; z-index: 2; position: relative; } .testimonial-style-2 .master-testimonial .author-wrap { flex-shrink: 1; } .testimonial-style-2 .master-testimonial .avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 20px 0 0; z-index: 1; flex-grow: 0; flex-shrink: 0; } .testimonial-style-2 .master-testimonial .avatar-wrap { transition: all 0.5s ease; } .testimonial-style-2 .master-testimonial .content-wrap { display: flex; flex-direction: column-reverse; } /* Style 3 */ .testimonial-style-3 .master-testimonial { position: absolute; text-align: center; padding: 0; } .testimonial-style-3 .master-testimonial .avatar-wrap { position: absolute; bottom: 2px; left: 50%; transform: translate(-50%, 0); margin: 0; } .testimonial-style-3 .master-testimonial .avatar { width: 92px; height: 92px; border: 10px solid #fff; margin: 0; box-shadow: 0 0 0 1px var(--e-global-color-tombuild_border); transition: box-shadow 0.3s ease; } .testimonial-style-3 .master-testimonial .content-wrap { margin-bottom: 50px; border: 1px solid var(--e-global-color-tombuild_border); background-color: #fff; border-radius: 10px; padding: 0 0 72px; display: flex; flex-direction: column-reverse; transition: border 0.3s ease; } .testimonial-style-3 .master-testimonial .author-wrap { position: relative; background-color: #e2e2e2; border-radius: 10px 10px 0 0; padding: 21px 20px 31px; z-index: 2; transition: all 0.3s ease; } .testimonial-style-3 .master-testimonial .comment { position: relative; padding: 28px 55px 0; font-size: 20px; line-height: 40px; z-index: 1; } .testimonial-style-3 .master-testimonial .name { font-size: 20px; line-height: 22px; letter-spacing: 0; margin-bottom: 0; } .testimonial-style-3 .master-testimonial .role { margin-bottom: 0; } .testimonial-style-3 .master-testimonial .quote { display: inline-block; opacity: 0.6; width: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; fill: var(--e-global-color-tombuild_light); transition: 0.3s ease; } .testimonial-style-3 .master-testimonial .author-wrap:after { position: absolute; bottom: -1px; left: 0; content: ''; width: 100%; height: 10px; background-color: #fff; clip-path: polygon(50% 90%, 57% 0, 110% 0, 110% 100%, 0 100%, 0 0, 43% 0); z-index: 3; pointer-events: none; } .testimonial-style-3 .master-testimonial.active .avatar { box-shadow: 0 0 0 1px var(--e-global-color-tombuild_accent); } .testimonial-style-3 .master-testimonial.active .content-wrap { border-color: var(--e-global-color-tombuild_accent); } .testimonial-style-3 .master-testimonial.active .author-wrap { background-color: var(--e-global-color-tombuild_accent); } .testimonial-style-3 .master-testimonial.active .author-wrap .name, .testimonial-style-3 .master-testimonial.active .author-wrap .role { color: #fff; } /* Style 4 */ .testimonial-style-4 .master-testimonial { text-align: center; } .testimonial-style-4 .master-testimonial .avatar-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; } .testimonial-style-4 .master-testimonial .content-wrap { display: flex; flex-direction: column-reverse; } /* Testimonials Vertical slider */ .master-vertical-slider .master-testimonial { display: flex; justify-content: space-between; align-items: center; padding: 38px 50px 55px; border-radius: 5px; overflow: hidden; } .master-vertical-slider .master-testimonial .content-wrap { padding: 0; margin-right: 45px; } .master-vertical-slider .master-testimonial .comment { font-size: 18px; line-height: 36px; font-weight: 500; margin-bottom: 23px; } .master-vertical-slider .master-testimonial .author-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .master-vertical-slider .master-testimonial .name { font-size: 24px; line-height: 30px; font-weight: 500; margin-right: 30px; } .master-vertical-slider .master-testimonial .avatar-wrap { position: relative; padding: 10px; flex-shrink: 0; } .master-vertical-slider .master-testimonial .avatar-wrap:before { position: absolute; bottom: 5px; left: 50%; transform: translate(-50%, 50%); content: ""; background-color: var(--e-global-color-tombuild_accent); width: 50px; height: 50px; border-radius: 50%; content: "\f10e"; font-family: "core-icons"; font-size: 16px; line-height: 50px; z-index: 1; color: #fff; text-align: center; } .master-vertical-slider .master-testimonial .avatar-wrap:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ""; width: 100%; height: 100%; background-image: url("data:image/svg+xml;utf8,"); background-size: cover; background-position: top left; background-repeat: no-repeat; } .master-vertical-slider .master-testimonial .star-rating { margin-right: 10px; } @media (max-width: 767px) { } @media (max-width: 575px) { .testimonial-style-2 .master-testimonial { padding: 15px; } .testimonial-style-2 .master-testimonial .avatar-wrap { padding: 10px; } .testimonial-style-2 .master-testimonial .avatar { margin-right: 10px; } } @media (max-width: 400px) { } /* ---------------------------------------- Partner ---------------------------------------- */ .elementor-widget-mae-partner-carousel .flickity-slider { display: flex; align-items: center; } .master-partner { overflow: hidden; opacity: 0.5; transition: all 0.3s ease; cursor: pointer; } .master-partner img { width: 100%; } .master-partner:hover { opacity: 1; } /* ---------------------------------------- Animation ---------------------------------------- */ .cb-vslide { transition-timing-function: cubic-bezier(0.9,0,.2,1); } .cb-vslide2 { transition-timing-function: cubic-bezier(0.62, 0.12, 0.52, 0.94); } .cb-zoom { transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .elementor-invisible:not(.animated) { opacity: 0; } .master-animation { opacity: 0; animation-duration: 0.7s; animation-fill-mode: forwards; } .fadeInUpSmall { animation-name: fadeInUpSmall; } .fadeInDownSmall { animation-name: fadeInDownSmall; } .fadeInLeftSmall { animation-name: fadeInLeftSmall; } .fadeInRightSmall { animation-name: fadeInRightSmall; } .fadeInUpLeft { animation-name: fadeInUpLeft; } .fadeInUpRight { animation-name: fadeInUpRight; } .fadeInDownLeft { animation-name: fadeInDownLeft; } .fadeInDownRight { animation-name: fadeInDownRight; } .fadeInDownRight { animation-name: fadeInDownRight; } .slideUp { animation-name: slideUp; opacity: 1; } .slideDown { animation-name: slideDown; opacity: 1; } .slideLeft { animation-name: slideLeft; opacity: 1; } .slideRight { animation-name: slideRight; opacity: 1; } .slideUpLeft { animation-name: slideUpLeft; opacity: 1; } .slideDownLeft { animation-name: slideDownLeft; opacity: 1; } .slideUpRight { animation-name: slideUpRight; opacity: 1; } .slideDownRight { animation-name: slideDownRight; opacity: 1; } .zoomInSmall { animation-name: zoomInSmall; } .revealTop { animation: revealTop; animation-duration: 1s; opacity: 1; } .revealBottom { animation: revealBottom; animation-duration: 1s; opacity: 1; } .revealRight { animation: revealRight; animation-duration: 1s; opacity: 1; } .revealLeft { animation: revealLeft; animation-duration: 1s; opacity: 1; } .reveal { position: relative; overflow: hidden; } .master-animation.reveal { opacity: 1; } .reveal { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .reveal > * { visibility: hidden; opacity: 0; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); -webkit-animation-name: hide-show; animation-name: hide-show; animation-delay: inherit; transition: opacity 1s; } .reveal:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #ddd; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(0, 0); transform: scale(0, 0); -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); animation-delay: inherit; } .reveal.revealLeft2:after { -webkit-animation-name: reveal-from-left; animation-name: reveal-from-left; } .reveal.revealRight2:after { -webkit-animation-name: reveal-from-right; animation-name: reveal-from-right; } .reveal.revealTop2:after { -webkit-animation-name: reveal-from-top; animation-name: reveal-from-top; } .reveal.revealBottom2:after { -webkit-animation-name: reveal-from-bottom; animation-name: reveal-from-bottom; } .reveal.revealTop2 img, .reveal.revealLeft2 img, .reveal.revealRight2 img, .reveal.revealBottom2 img { visibility: hidden; opacity: 0; animation: 1s hide-show cubic-bezier(0.86, 0, 0.07, 1) forwards 0.2s, 2s imgZoom cubic-bezier(0.7, 0, 0.3, 1) forwards; } .master-animation.zoomIn { animation-name: zoomInSmall; } .master-animation.fadeIn { animation-name: fadeIn; } .master-animation.fadeIn { animation-name: fadeIn; } .master-animation.slideInDown{animation-name:slideInDown2;visibility: visible;} .master-animation.slideInLeft{animation-name:slideInLeft2;visibility: visible;} .master-animation.slideInRight{animation-name:slideInRight2;visibility: visible;} .master-animation.slideInUp{animation-name:slideInUp2;visibility: visible;} .inview .rotating { animation: yoyo 10s infinite linear; } @keyframes imgZoom{from{transform:scale(1.2)}to{transform: scale(1)}} @keyframes yoyo { from { transform: rotate(0deg); } to { transform: rotate(360deg); }} @keyframes zoomInSmall{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform: none;}} @keyframes fadeIn {from{opacity:0;}to{opacity:1;}} @keyframes fadeInUpSmall {from{opacity:0;transform:translate3d(0,50px,0)}to{opacity:1;transform:none}} @keyframes fadeInDownSmall {from{opacity:0;transform:translate3d(0,-50px,0)}to{opacity:1;transform:none}} @keyframes fadeInLeftSmall {from{opacity:0;transform:translate3d(-50px,0,0)}to{opacity:1;transform:none}} @keyframes fadeInRightSmall {from{opacity:0;transform:translate3d(50px,0,0)}to{opacity:1;transform:none}} @keyframes fadeInUpLeft {from{opacity:0;transform:translate3d(30px,30px,0)}to{opacity:1;transform:none}} @keyframes fadeInUpRight {from{opacity:0;transform:translate3d(-30px,30px,0)}to{opacity:1;transform:none}} @keyframes fadeInDownLeft {from{opacity:0;transform:translate3d(30px,-30px,0)}to{opacity:1;transform:none}} @keyframes fadeInDownRight {from{opacity:0;transform:translate3d(-30px,-30px,0)}to{opacity:1;transform:none}} @keyframes revealTop {from{clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)}to{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}} @keyframes revealBottom {from{clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)}to{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}} @keyframes revealRight {from{clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)}to{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}} @keyframes revealLeft {from{clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)}to{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}} @keyframes link-icon { 0% { transform: translateX(0); opacity: 1; } 49% { transform: translateX(20px); opacity: 0; } 50% { transform: translateX(-20px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes link-icon2 { 0% { left: 50%; opacity: 1; } 49% { left: calc(50% + 20px); opacity: 0; } 50% { left: calc(50% - 20px); opacity: 0; } 100% { left: 50%; opacity: 1; } } @keyframes link-icon2-reverse { 0% { left: 50%; opacity: 1; } 49% { left: calc(50% - 20px); opacity: 0; } 50% { left: calc(50% + 20px); opacity: 0; } 100% { left: 50%; opacity: 1; } } @keyframes v-fade-before { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(1.6); opacity: 0; } } @keyframes v-fade-after { 0% { transform: scale(1); opacity: 0.2; } 100% { transform: scale(2.1); opacity: 0; } } @keyframes slideInDown2{from{transform:translate3d(0,-100%,0);opacity: 1;}to{transform:translate3d(0,0,0);opacity: 1;}} @keyframes slideInLeft2{from{transform:translate3d(-100%,0,0);opacity: 1;}to{transform:translate3d(0,0,0);opacity: 1;}} @keyframes slideInRight2{from{transform:translate3d(100%,0,0);opacity: 1;}to{transform:translate3d(0,0,0);opacity: 1;}} @keyframes slideInUp2{from{transform:translate3d(0,100%,0);opacity: 1;}to{transform:translate3d(0,0,0);opacity: 1;}} @keyframes slideUp {from{transform: translate3d(0,10px,0);} to{transform: translate3d(0,0,0);}} @keyframes slideDown {from{transform: translate3d(0,-10px,0);} to{transform: translate3d(0,0,0);}} @keyframes slideLeft {from{transform: translate3d(10px,0,0);} to{transform: translate3d(0,0,0);}} @keyframes slideRight {from{transform: translate3d(-10px,0,0);} to{transform: translate3d(0,0,0);}} @keyframes slideUpLeft {from{transform: translate3d(10px,10px,0);} to{transform: translate3d(0,0,0);}} @keyframes slideDownLeft {from{transform: translate3d(10px,-10px,0);} to{transform: translate3d(0,0,0);}} @keyframes slideUpRight {from{transform: translate3d(-10px,10px,0);} to{transform: translate3d(0,0,0);}} @keyframes slideDownRight {from{transform: translate3d(-10px,-10px,0);} to{transform: translate3d(0,0,0);}} @keyframes hide-show { 0% { opacity: 0; visibility: hidden; } 66.6% { opacity: 0; visibility: hidden; } 66.7% { opacity: 1; visibility: visible; } 100% { opacity: 1; visibility:visible; } } @keyframes reveal-from-left { 0% { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(0, 1); transform: scale(0, 1); } 66.6% { -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 66.7% { -webkit-transform-origin: right center; transform-origin: right center; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: right center; transform-origin: right center; -webkit-transform: scale(0, 1); transform: scale(0, 1); } } @keyframes reveal-from-right { 0% { -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: scale(0, 1); transform: scale(0, 1); } 66.6% { -webkit-transform-origin: right center; transform-origin: right center; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 66.7% { -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: scale(0, 1); transform: scale(0, 1); } } @keyframes reveal-from-top { 0% { -webkit-transform-origin: center top; transform-origin: center top; -webkit-transform: scale(1, 0); transform: scale(1, 0); } 66.6% { -webkit-transform-origin: center top; transform-origin: center top; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 66.7% { -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: scale(1, 0); transform: scale(1, 0); } } @keyframes reveal-from-bottom { 0% { -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: scale(1, 0); transform: scale(1, 0); } 66.6% { -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 66.7% { -webkit-transform-origin: center top; transform-origin: center top; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: center top; transform-origin: center top; -webkit-transform: scale(1, 0); transform: scale(1, 0); } } @keyframes line-moving { 0% { transform: translateX(0); } 49% { transform: translateX(110%) } 50% { transform: translateX(-110%) } 100% { transform: translateX(0); } } @keyframes rotating { from { -ms-transform: rotate(0deg) translateZ(0px); -moz-transform: rotate(0deg) translateZ(0px); -webkit-transform: rotate(0deg) translateZ(0px); -o-transform: rotate(0deg) translateZ(0px); transform: rotate(0deg) translateZ(0px); } to { -ms-transform: rotate(360deg) translateZ(0px); -moz-transform: rotate(360deg) translateZ(0px); -webkit-transform: rotate(360deg) translateZ(0px); -o-transform: rotate(360deg) translateZ(0px); transform: rotate(360deg) translateZ(0px); } } .inview .rotate { animation: rotating 10s infinite linear; } .inview .zoomeffect { animation: zoomeffect 3s infinite; } @keyframes zoomeffect { 0% { background-position: center; transform: scale(1); } 50% { background-position: center; transform: scale(0.8); } 100% { background-position: center; transform: scale(1); } } .inview .zoomeffect2 { animation: zoomeffect2 3s infinite; } @keyframes zoomeffect2 { 0% { background-position: center; transform: scale(1); } 50% { background-position: center; transform: scale(1.2); } 100% { background-position: center; transform: scale(1); } } .inview .movingeffect > div { animation: movingeffect 10s infinite; } @keyframes movingeffect { 0% { -webkit-transform: translateY(0px) translateX(0) rotate(0); transform: translateY(0px) translateX(0) rotate(0); } 30% { -webkit-transform: translateY(30px) translateX(50px) rotate(15deg); transform: translateY(30px) translateX(50px) rotate(15deg); -webkit-transform-origin: center center; transform-origin: center center; } 50% { -webkit-transform: translateY(50px) translateX(100px) rotate(45deg); transform: translateY(50px) translateX(100px) rotate(45deg); -webkit-transform-origin: right bottom; transform-origin: right bottom; } 80% { -webkit-transform: translateY(30px) translateX(50px) rotate(15deg); transform: translateY(30px) translateX(50px) rotate(15deg); -webkit-transform-origin: left top; transform-origin: left top; } 100% { -webkit-transform: translateY(0px) translateX(0) rotate(0); transform: translateY(0px) translateX(0) rotate(0); -webkit-transform-origin: center center; transform-origin: center center; } } .inview .shakeeffect > div { animation: shakeeffect 10s infinite; } @keyframes shakeeffect { 0% { -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); } 30% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 60% { -webkit-transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); } } .inview .bounceeffect > div { animation: bounceeffect 3s linear infinite alternate; } @keyframes bounceeffect { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @keyframes floatX { 0% { transform: translateX(-30px); } 50% { transform: translateX(-10px); } 100% { transform: translateX(-30px); } } .floatX { transform: translateX(-30px); } .inview .floatX { animation: floatX 5s infinite ease-in-out; } .inview .floatX1 { animation: floatX 4s infinite ease-in-out 0.3s; } @keyframes floatY { 0% { transform: translateY(-30px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(-30px); } } .floatX { transform: translateY(-30px); } .inview .floatY { animation: floatY 5s infinite ease-in-out; } .inview .floatY1 { animation: floatY 4s infinite ease-in-out 0.3s; } @keyframes shakeA { 0% { transform: rotate3d(0, 1, 0, 0deg); } 30% { transform: rotate3d(0, 0, 1, 10deg); } 60% { transform: rotate3d(1, 0, 0, 0deg); } 80% { transform: rotate3d(0, 0, 1, 10deg); } 100% { transform: rotate3d(0, 1, 0, 0deg); } } .inview .shakeA { animation: shakeA 5s infinite ease-out; } .bounceSmall { -moz-animation: bounceSmall 2s infinite; -webkit-animation: bounceSmall 2s infinite; animation: bounceSmall 2s infinite; } @keyframes bounceSmall { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 60% { transform: translateY(-4px); } } /* ---------------------------------------- SVG Drawing ---------------------------------------- */ .master-svg-drawing svg { fill: none; stroke: #000; transition-timing-function: linear; } /* ---------------------------------------- Parallax ---------------------------------------- */ .parallax-hover { transition: 0.3s ease; } /* ---------------------------------------- Particles ---------------------------------------- */ .canvas-particles { width: 100%; height: 100%; } .master-particles { position: absolute; width: 100%; height: 100%; } .master-particles canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ---------------------------------------- PNG DOTS ---------------------------------------- */ .master-png-dots { width: 100%; height: 100%; } .master-png-dots img { visibility: hidden; opacity: 0; } .master-png-dots canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .canvas-absolute { position: static; } .canvas-absolute .elementor-widget-container { position: static; } .canvas-absolute img { display: none; } /* ---------------------------------------- Vertical Lines ---------------------------------------- */ .master-vertical-lines { position: fixed; width: 1170px; max-width: 100vw; height: 100vh; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none; } .master-vertical-lines .line { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: #e7e7e7; margin: 0; } /* ---------------------------------------- Flip Box ---------------------------------------- */ .master-flip-box { perspective: 700px; } .master-flip-box .icon-wrap { z-index: 0; } .master-flip-box .headline-2, .master-flip-box .desc, .master-flip-box .url-wrap { position: relative; z-index: 1; } .master-flip-box .master-icon { font-size: 40px; } .master-flip-box .desc { line-height: 2; } .master-flip-box .flip-front, .master-flip-box .flip-back { transition: transform 1s; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1.3); transform-style: preserve-3d; display: flex; flex-direction: column; overflow: visible !important; -webkit-font-smoothing: antialiased; } .master-flip-box .flip-back { justify-content: center; } .master-flip-box .flip-back > *, .master-flip-box .flip-front > * { -webkit-font-smoothing: antialiased; transform: translateZ(70px); -webkit-transform: translateZ(70px); transition: 0.3s; backface-visibility: hidden; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1.3); animation-delay: 0.1s !important; -webkit-font-smoothing: antialiased; } .master-flip-box .flip-back .inner > *, .master-flip-box .flip-front .inner > * { transition: none; -webkit-font-smoothing: antialiased; } .master-flip-box .flip-front { transform: rotateY(0deg); } .master-flip-box .flip-back { transform: rotateY(180deg); backface-visibility: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .master-flip-box:hover .flip-front { transform: rotateY(-180deg); backface-visibility: hidden; } .master-flip-box:hover .flip-back { transform: rotateY(0deg); } /* ---------------------------------------- Login Form ---------------------------------------- */ .master-login-form p { margin-bottom: 0; } .master-login-form input[type="text"], .master-login-form input[type="password"] { width: 100%; } .master-login-form input[type="submit"] { margin-top: 20px; } .master-login-form .forget-passwork-link { float: right; } /* ---------------------------------------- Logout ---------------------------------------- */ .master-logout-url i { display: inline-block; margin-right: 5px; } /* ---------------------------------------- Register Form ---------------------------------------- */ .master-register-form .ur-frontend-form { border: none; padding: 0; margin: 0; } .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid label.ur-label, .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid legend.ur-label { font-size: 16px; font-weight: 400; margin-bottom: 0; line-height: 1.875; } .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid .__PrivateStripeElement, .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid input[type=date], .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid input[type=email], .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid input[type=number], .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid input[type=password], .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid input[type=phone], .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid input[type=text], .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid input[type=timepicker], .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid input[type=url], .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid select, .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid textarea { font-size: 14px; line-height: 2; font-weight: 400; padding: 15px 30px; border: 1px solid var(--e-global-color-tombuild_light); background-color: var(--e-global-color-tombuild_light); color: var(--e-global-color-tombuild_text); border-radius: 10px; margin-bottom: 10px; text-shadow: none; box-shadow: none; box-sizing: border-box; transition: border 0.3s; } .master-register-form .ur-frontend-form button, .master-register-form .ur-frontend-form button[type=submit], .master-register-form .ur-frontend-form input[type=submit] { font-size: 14px; line-height: 60px; font-weight: 500; color: #fff; text-transform: uppercase; background-color: var(--e-global-color-tombuild_accent); padding: 0 50px; letter-spacing: 0.1em; border-radius: 10px; display: inline-block; -webkit-appearance: none; transition: all 0.3s ease; white-space: nowrap; } .master-register-form .ur-frontend-form button:hover, .master-register-form .ur-frontend-form button[type=submit]:hover, .master-register-form .ur-frontend-form input[type=submit]:hover { background-color: var(--e-global-color-tombuild_primary); } .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid { padding: 0; } .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item { margin-bottom: 0; } .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid.ur-grid-1 { margin-right: 5px; } .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid.ur-grid-2 { margin-left: 5px; } .master-register-form .ur-frontend-form .ur-button-container { padding: 0; } .master-register-form .ur-frontend-form .ur-button-container .ur-submit-button { margin-left: 0; } @media (max-width: 767px) { .master-register-form .ur-frontend-form .ur-form-row .ur-form-grid { margin-bottom: 0px; } } /* ---------------------------------------- Animated Text ---------------------------------------- */ .master-animated-text { margin-bottom: 0; font-size: 72px; } .master-animated-text span { position: relative; display: inline-block; white-space: break-spaces; } .master-animated-text .inner { position: relative; display: inline-flex; transition: all 0.3s ease; } .master-animated-text .inner .item { display: inline-flex; width: fit-content; } .master-animated-text .inner .item:not(.current) { position: absolute; top: 0; pointer-events: none; opacity: 0; width: max-content; } .master-animated-text .inner .underline { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; transform-origin: left center; } .master-animated-text .inner .underline.color { background-color: var(--e-global-color-surince_accent); } .master-animated-text .inner .underline.image img { position: absolute; top: 0; left: 0; width: 100%; } .align-left .master-animated-text { margin-left: 0; margin-right: auto; } .align-center .master-animated-text { margin-left: auto; margin-right: auto; text-align: center; } .align-right .master-animated-text { margin-left: auto; margin-right: 0; } .align-center .master-animated-text .inner { justify-content: center; } @media (max-width: 1024px) { .align--tabletleft .master-animated-text { margin-left: 0; margin-right: auto; } .align--tabletcenter .master-animated-text { margin-left: auto; margin-right: auto; } .align--tabletright .master-animated-text { margin-left: auto; margin-right: 0; } } @media (max-width: 767px) { .align--mobileleft .master-animated-text { margin-left: 0; margin-right: auto; } .align--mobilecenter .master-animated-text { margin-left: auto; margin-right: auto; } .align--mobileright .master-animated-text { margin-left: auto; margin-right: 0; } } /* ---------------------------------------- Timeline ---------------------------------------- */ .elementor-widget-mae-horizontal-timeline { background-color: transparent !important; } .timeline-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; color: var(--e-global-color-tombuild_accent); background-color: currentColor; } .timeline-line:after, .timeline-line:before { position: absolute; top: 0; content: ''; width: 160px; height: 100%; } .timeline-line:after { left: 100%; background-image: linear-gradient(to right, currentColor, transparent); } .timeline-line:before { right: 100%; background-image: linear-gradient(to left, currentColor, transparent); } .master-timeline { display: block; text-align: center; height: 100%; } .master-timeline .inner-wrap { position: relative; display: flex; flex-direction: column; } .master-timeline .content-wrap { position: relative; } .master-timeline .date { position: relative; font-family: var(--font-heading); font-size: 28px; line-height: 1; font-weight: 500; color: var(--e-global-color-tombuild_primary); } .master-timeline:nth-child(even) .inner-wrap { justify-content: flex-end; } .master-timeline:nth-child(odd) .date { position: absolute; top: calc(100% + 10px); left: 0; width: 100%; } .master-timeline:nth-child(even) .content-wrap { position: absolute; top: calc(100% + 10px); left: 0; width: 100%; } .master-timeline .decor { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .master-timeline .decor .decor-item { position: absolute; } /* ---------------------------------------- Lines/ Dots Animation ---------------------------------------- */ .master-line-dot-animation { position: relative; } .master-line-dot-animation .dot { position: absolute; top: 0; left: 0; display: inline-block; width: 20px; height: 2px; border-radius: 2px; background-color: #000; } /* ---------------------------------------- Menu ---------------------------------------- */ .master-menu { position: relative; } .master-menu .magic-line { display: inline-block; height: 4px; background-color: var(--e-global-color-tombuild_accent); position: absolute; bottom: 0; left: 0; transition: all 0.5s cubic-bezier(0.35, 0.7, 0.35, 1); ; } /* ---------------------------------------- Event ---------------------------------------- */ .master-event { position: relative; border-radius: 10px; overflow: hidden; } .master-event:hover .thumb img { transform: scale(1.1); } .master-event .image-wrap .meta-decor { position: absolute; top: 0; right: 0; width: 60px; height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-color: var(--e-global-color-tombuild_accent); color: #fff; font-weight: 500; font-family: var(--font-heading); border-radius: 0 0 0 10px; } .master-event .image-wrap .meta-decor > span { display: block; line-height: 1; } .master-event .image-wrap .meta-decor .day { font-size: 20px; margin-bottom: 2px; } .master-event .image-wrap .meta-decor .month { font-size: 12px; } .master-event .content-wrap { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; background-image: linear-gradient(to top, var(--e-global-color-tombuild_primary), transparent 85%); padding: 30px 30px 20px; color: #fff; } .master-event .meta-wrap { display: flex; flex-wrap: wrap; } .master-event .meta-wrap .item { font-size: 14px; margin-right: 8px; margin-bottom: 10px; } .master-event .meta-wrap .item span { display: inline-block; } .master-event .meta-wrap .item .icon { color: var(--e-global-color-tombuild_accent); margin-right: 4px; } .master-event .headline-2 { color: #fff; margin-bottom: 0; } .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-banner .wpem-event-banner-img .thumb { display: none; } .event-style-2 .wpem-event-listings .wpem-event-layout-wrapper .event_listing { display: flex; } .event-style-2 .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-banner .wpem-event-banner-img { height: auto; background: none !important; } .event-style-2 .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-banner .wpem-event-banner-img .thumb { display: flex; width: 100%; } .event-style-2 .wpem-event-listings .wpem-event-layout-wrapper .wpem-event-infomation { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; background-image: linear-gradient(to top, var(--e-global-color-tombuild_primary), transparent 85%); padding: 30px 30px 20px; color: #fff; } .event-style-2 .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-details { display: flex;; flex-direction: row; flex-wrap: wrap; } .event-style-2 .wpem-event-listings .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-details .wpem-event-date-time-text, .event-style-2 .wpem-event-listings .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-details .wpem-event-location, .event-style-2 .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-details .wpem-event-title .wpem-heading-text { color: #fff; } .event-style-2 .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-details .wpem-event-title { width: 100%; order: 2; } /* ---------------------------------------- Event List ---------------------------------------- */ .master-event-list { display: flex; border-radius: 10px; overflow: hidden; } .master-event-list .image-wrap { position: relative; width: 210px; flex-shrink: 0; } .master-event-list .image-wrap .thumb { display: inline-block; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; padding-left: 40px; } .master-event-list .image-wrap .thumb img { opacity: 0; } .master-event-list .image-wrap .meta-decor { position: absolute; top: 0; left: 0; width: 40px; height: 100%; font-size: 14px; line-height: 40px; font-weight: 500; text-align: center; text-transform: uppercase; background-color: var(--e-global-color-tombuild_accent); color: #fff; writing-mode: vertical-rl; text-orientation: mixed; } .master-event-list .content-wrap { padding: 22px 30px 18px; background-color: #fff; width: 100%; } .master-event-list .meta-wrap .item { display: inline-block; font-size: 14px; line-height: 24px; margin-right: 8px; } .master-event-list .meta-wrap .item .icon { display: inline-block; color: var(--e-global-color-tombuild_accent); padding-right: 4px; } .master-event-list .headline-2 { font-size: 24px; margin-bottom: 8px; } @media (max-width: 767px) { .master-event-list { border: 1px solid var(--e-global-color-tombuild_border); } } @media (max-width: 575px) { .master-event-list { flex-direction: column; } .master-event-list .image-wrap { width: 100% !important; display: flex; } .master-event-list .content-wrap { padding: 22px 22px 18px 30px; } } /* ---------------------------------------- Cause ---------------------------------------- */ .master-cause { border: 1px solid var(--e-global-color-tombuild_border); border-radius: 10px; overflow: hidden; text-align: center; } .master-cause .image-wrap { position: relative; max-width: 100%; } .master-cause .image-wrap:after { position: absolute; bottom: -1px; left: 0; content: ''; width: 100%; height: 10px; background-color: #fff; clip-path: polygon(50% 90%, 58% 0, 100% 0, 100% 100%, 0 100%, 0 0, 42% 0); z-index: 3; pointer-events: none; } .master-cause .content-wrap { background-color: #fff; padding: 18px 40px 40px; overflow: hidden; } .master-cause .image-wrap .cat-item { position: absolute; top: 20px; right: 20px; font-size: 10px; line-height: 35px; font-weight: 500; text-transform: uppercase; color: #fff; background-color: var(--e-global-color-tombuild_accent); padding: 0 20px; border-radius: 10px; letter-spacing: 0.1em; z-index: 2; } .master-cause .image-wrap .cat-item:hover { background-color: var(--e-global-color-tombuild_primary); } .master-cause .give-goal-progress .progress-bar { padding-bottom: 6px; } .master-cause .give-goal-progress { padding: 0; margin: 0 0 15px; box-shadow: none; text-align: left; } .master-cause .give-goal-progress .percentage { margin-top: 0; font-size: 14px; line-height: 1; } .master-cause .give-goal-progress .percentage .give-percentage { margin-bottom: 15px; } .master-cause .desc { margin-bottom: 20px; } .master-cause .master-button { width: 100%; } /* Style 2 */ .cause-style-2 .flickity-viewport { overflow: visible; } .cause-style-2 .master-cause { display: flex; border: none; border-radius: 0; overflow: visible; } .cause-style-2 .master-cause .image-wrap { width: 56.752%; flex-shrink: 0; z-index: 0; border-radius: 10px; height: fit-content; overflow: hidden; } .cause-style-2 .master-cause .image-wrap:after { display: none; } .cause-style-2 .master-cause .image-wrap .cat-item { top: 40px; left: 40px; right: unset; } .cause-style-2 .master-cause .content-wrap { width: 53.847%; flex-shrink: 0; margin-top: 40px; margin-left: -10.599%; z-index: 1; border-radius: 10px; box-shadow: 0 10px 60px 0 rgba(0,0,0,0.1); padding: 96px 100px 100px; text-align: left; } .cause-style-2 .master-cause .headline-2 { font-size: 30px; line-height: 36px; margin-bottom: 36px; } .cause-style-2 .master-cause .desc { margin-bottom: 30px; } .cause-style-2 .master-cause .give-goal-progress { margin-bottom: 23px; } @media (max-width: 767px) { .cause-style-2 .master-cause { flex-direction: column; } .cause-style-2 .master-cause .image-wrap { width: calc(100% - 60px); } .cause-style-2 .master-cause .content-wrap { width: 100%; margin: -120px 0 0 30px; padding: 30px; } .cause-style-2 .flickity-viewport { overflow: visible !important; } } @media (max-width: 575px) { .cause-style-2 .master-cause .image-wrap { width: 100%; } .cause-style-2 .master-cause .content-wrap { margin: 0; } } /* ---------------------------------------- WP Event Manager ---------------------------------------- */ .date-decor-false .wpem-event-date { display: none !important; } .date-format-time .wpem-event-date-time-text .start-date, .date-format-time .wpem-event-date-time-text .event-sep, .date-format-time .wpem-event-date-time-text .end-date { display: none; } /* ---------------------------------------- Project Detail ---------------------------------------- */ .project-info { padding: 27px 34px; } .project-info .title, .project-info .info { display: block; font-size: 16px; line-height: 24px; } .project-info .info { color: var(--e-global-color-tombuild_primary); margin-bottom: 24px; font-weight: 600; } /* ---------------------------------------- Additional Custom ---------------------------------------- */ .master-slider .title .image { display: inline-flex; line-height: inherit; position: relative; } .master-slider .title .image img { display: inline-flex; } .translateX-50 { transform: translateX(-50%); } .translateY-50 { transform: translateY(-50%); } .flip-horizontal { transform: scaleX(-1); } .inview .mix-blend-mode-overlay { mix-blend-mode: overlay; } .inview .mix-blend-mode-screen { mix-blend-mode: screen; } .inview .mix-blend-mode-luminosity { mix-blend-mode: luminosity; } .inview .mix-blend-mode-hard-light { mix-blend-mode: hard-light; } .hover-eff-1 .thumb { overflow: hidden; } .hover-eff-1 .thumb:after { position: absolute; bottom: -25px; left: 0; content: ''; width: 100%; height: 50px; transition: all 0.3s ease; background-color: #fff; } .hover-eff-1 .content-wrap { margin-top: -25px; } .hover-eff-1 .master-image-box:hover .thumb:after { transform: skewY(-7deg); } .hover-eff-2 .thumb:after { position: absolute; width: 100%; height: 5px; content: ''; top: 0; left: 0; background-color: var(--e-global-color-tombuild_accent); transform: scaleX(0); transition: all 0.5s ease; transform-origin: 50% 0%; } .hover-eff-2 .item-carousel.active .thumb:after, .hover-eff-2 .master-image-box:hover .thumb:after { transform: scaleX(1); } .hover-eff-3 .master-icon-box { overflow: hidden; position: relative; } .hover-eff-3 .master-icon-box:after { position: absolute; content: ''; bottom: 0; right: 0; width: 0; height: 0; border-top: 50px solid transparent; border-right: 50px solid var(--e-global-color-tombuild_accent); opacity: 0; transform: translate(50px, 50px); transform-origin: 100% 100%; transition: all 0.5s ease; } .hover-eff-3 .master-icon-box:hover:after { transform: translate(0,0); opacity: 1; } .text-author { display: inline-block; font-size: 16px; line-height: inherit; margin-left: 25px; padding-left: 50px; position: relative; color: var(--e-global-color-tombuild_text); } .hover-eff-4 .item-carousel { overflow: hidden; position: relative; } .hover-eff-4 .item-carousel:after { position: absolute; content: ''; top: 0; left: 0; width: 0; height: 0; border-bottom: 50px solid transparent; border-left: 50px solid var(--e-global-color-tombuild_accent); opacity: 0; transform: translate(-50px, -50px); transform-origin: 0% 0%; transition: all 0.5s ease; } .hover-eff-4 .item-carousel:hover:after { transform: translate(0,0); opacity: 1; } .hover-eff-5 .master-image-box .thumb:after, .hover-eff-5 .master-icon-box:after, .hover-eff-5 .item-carousel .thumb:after { position: absolute; width: 100%; height: 10px; content: ''; top: 0; left: 0; background-color: var(--e-global-color-tombuild_accent); transform: scaleX(0); transition: all 0.5s ease; transform-origin: 50% 0%; } .hover-eff-5 .item-carousel:hover .thumb:after, .hover-eff-5 .item-carousel.active .thumb:after, .hover-eff-5 .master-icon-box:hover:after, .hover-eff-5 .master-image-box:hover .thumb:after { transform: scaleX(1); } .hover-eff-6 .item-carousel .thumb:after, .hover-eff-6 .master-icon-box:after { position: absolute; width: 100%; height: 2px; content: ''; top: 0; left: 0; background-color: var(--e-global-color-tombuild_accent); transform: scaleX(0); transition: all 0.5s ease; transform-origin: 50% 0%; } .hover-eff-6 .item-carousel.active .thumb:after, .hover-eff-6 .master-icon-box:hover:after { transform: scaleX(1); } .text-author { display: inline-block; font-size: 16px; line-height: inherit; margin-left: 25px; padding-left: 50px; position: relative; color: var(--e-global-color-tombuild_text); } .text-author:after { position: absolute; top: 17px; left: 0; content: ''; width: 40px; height: 2px; background-color: var(--e-global-color-tombuild_accent); } @media only screen and (max-width: 767px) { .text-author { display: block; margin: 10px 0 0; } } .text-stroke { -webkit-text-stroke: 1px currentColor; -webkit-text-fill-color: transparent; } .sub-number { font-size: 14px; font-style: italic; line-height: 1; color: #cacaca; display: inline-block; } .image-on-hover .thumb { transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.5s ease; } .image-on-hover:hover .thumb { transform: scaleY(1); } .custom-arrow .master-carousel-box .flickity-button { opacity: 1 !important; background: none; color: #fff !important; box-shadow: none; width: 30px; height: 30px; } .custom-arrow .master-carousel-box .flickity-button:disabled { color: rgba(255,255,255,0.7) !important; } .custom-arrow .master-carousel-box .flickity-button.previous { left: unset; right: -102px;} .custom-arrow .master-carousel-box .flickity-button.next { left: unset;right: -133px; z-index: 10; } .custom-arrow .master-carousel-box .flickity-button.previous:after { position: absolute; top: -24px; left: -10px; content: ''; width: 80px; height: 80px; border-radius: 50%; z-index: -1; background-color: #39374d; box-shadow: 0 10px 20px 0 rgba(33,39,53, 0.2); } .custom-arrow.offset1 .master-carousel-box .flickity-button.previous, .custom-arrow.offset1 .master-carousel-box .flickity-button.next { top: calc(50% - 25px); } .custom-arrow.offset2 .master-carousel-box .flickity-button.previous { right: -202px; } .custom-arrow.offset2 .master-carousel-box .flickity-button.next { right: -232px; } .custom-arrow.offset3 .master-carousel-box .flickity-button.previous, .custom-arrow.offset3 .master-carousel-box .flickity-button.next { top: calc(50% + 55px); } .custom-arrow.offset3 .master-carousel-box .flickity-button.previous { right: -130px; } .custom-arrow.offset3 .master-carousel-box .flickity-button.next { right: -160px; } .custom-arrow.offset4 .master-carousel-box .flickity-button { top: unset; bottom: 52px; } .custom-arrow.offset4 .master-carousel-box .flickity-button.previous { right: -135px; } .custom-arrow.offset4 .master-carousel-box .flickity-button.next { right: -165px; } .custom-arrow.offset5 .master-carousel-box .flickity-button { top: unset; bottom: 52px; } .custom-arrow.offset5 .master-carousel-box .flickity-button.previous { left: -165px; } .custom-arrow.offset5 .master-carousel-box .flickity-button.next { left: -135px; } .custom-arrow.offset6 .master-carousel-box .flickity-button.previous { right: -142px; } .custom-arrow.offset6 .master-carousel-box .flickity-button.next { right: -172px; } .custom-arrow.offset7 .master-carousel-box .flickity-button { top: unset; bottom: 60px; } .custom-arrow.offset7 .master-carousel-box .flickity-button.previous { right: -135px; } .custom-arrow.offset7 .master-carousel-box .flickity-button.next { right: -165px; } .arrows-square .master-carousel-box .flickity-button { margin-top: 1px; width: 40px; height: 40px; ;line-height: 40px; background-color: transparent; border: 1px solid var(--e-global-color-tombuild_border); border-radius: 0; color: #a9a9a9; } .arrows-square .master-carousel-box .flickity-button:before { font-size: 12px; } .arrows-square2 .master-carousel-box .flickity-button { margin-top: 1px; width: 58px; height: 58px; ;line-height: 58px; background-color: transparent; border: 1px solid var(--e-global-color-tombuild_border); border-radius: 0; color: #a9a9a9; } .arrows-square2 .master-carousel-box .flickity-button:hover { border-color: var(--e-global-color-tombuild_accent); color: var(--e-global-color-tombuild_accent); } .arrows-square2 .master-carousel-box .flickity-button:before { font-size: 16px; } .arrows-square2 .nav-arrow .arrow { opacity: 0.7; width: 58px; height: 58px; ;line-height: 58px; background-color: transparent; border: 2px solid #fff; border-radius: 0; color: #fff; } .arrows-square2 .nav-arrow .arrow:hover { opacity: 1; } .custom-offset .master-carousel-box .flickity-button.previous { left: -200px; } .custom-offset .master-carousel-box .flickity-button.next { left: -130px; } .dots-line .master-carousel-box .flickity-page-dots .dot { width: 25px; height: 5px; border-radius: 0; opacity: 0.2; margin: 0 2px; } .dots-line .master-carousel-box .flickity-page-dots .dot:after { width: 25px; height: 5px; border-radius: 0; background-color: var(--e-global-color-tombuild_accent); opacity: 1; } .dots-line .master-carousel-box .flickity-page-dots .dot.is-selected { opacity: 1; } .footer .mc4wp-form-fields .master-button { font-size: 16px; line-height: 24px; } .master-link:hover .svg-icon { color: var(--e-global-color-tombuild_accent); } @media (min-width: 768px) { .custom-grid-border .elementor-inner-section { position: relative; } .custom-grid-border .elementor-inner-section:first-child { margin-bottom: 1px; } .custom-grid-border .elementor-inner-section:first-child:after { position: absolute; content: ''; bottom: -1px; left: 25px; width: calc(100% - 50px); height: 1px; background-color: var(--e-global-color-tombuild_border); } .custom-grid-border .elementor-inner-section .elementor-column:after { position: absolute; content: ''; right: -1px; width: 1px; height: calc(100% - 25px); background-color: var(--e-global-color-tombuild_border); } .custom-grid-border .elementor-inner-section .elementor-column:last-child:after { display: none; } .custom-grid-border .elementor-inner-section:first-child .elementor-column:after { top: 25px; } .custom-grid-border .elementor-inner-section:last-child .elementor-column:after { top: 0px; } .custom-grid-border .elementor-inner-section .elementor-column { margin-right: 1px; } .custom-grid-border .elementor-inner-section .elementor-column:last-child { margin-right: 0px; } } .line-decor { display: block; width: 100px; height: 5px; background-color: var(--e-global-color-tombuild_accent); margin-bottom: 35px; } .line-border { display: block; width: 100%; height: 1px; background-color: var(--e-global-color-tombuild_border); } .line { display: block; width: 100px; height: 4px; background-color: var(--e-global-color-tombuild_accent); margin-top: 22px; } .align-center .line { margin-left:auto; margin-right:auto; } .decor-grid { position: relative; width: 164px; height: 164px; } .decor-grid .r { position: absolute; left: 0; width: 100%; height: 1px; background-color: #e8e8e8; transition: all 1.5s ease 1s; transform: scaleX(0); transform-origin: 0% 0%; } .decor-grid .r.r1 { top: 22px; } .decor-grid .r.r2 { top: 46px; } .decor-grid .r.r3 { top: 70px; } .decor-grid .r.r4 { top: 94px; } .decor-grid .r.r5 { top: 118px; } .decor-grid .r.r6 { top: 142px; } .decor-grid .c { position: absolute; top: 0; width: 1px; height: 100%; background-color: #e8e8e8; transition: all 1.5s ease 1s; transform: scaleY(0); transform-origin: 0% 0%; } .decor-grid .c.c1 { left: 22px; } .decor-grid .c.c2 { left: 46px; } .decor-grid .c.c3 { left: 70px; } .decor-grid .c.c4 { left: 94px; } .decor-grid .c.c5 { left: 118px; } .decor-grid .c.c6 { left: 142px; } .inview .decor-grid .r { transform: scaleY(1); } .inview .decor-grid .c { transform: scaleX(1); } .shape-skew { transform: skewY(-7deg); } .custom-carousel .item-carousel .thumb { transition: 0.5s ease; } .custom-carousel .item-carousel:not(.is-selected) .content-wrap { left: 0; } .custom-carousel .item-carousel:not(.is-selected) .thumb { opacity: 0; transition: 0.1s; } .custom-carousel .item-carousel:not(.is-selected) .content-wrap:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; z-index: 1; background-image: linear-gradient(to right, rgba(255,255,255,0.5), #fff); } .custom-carousel2 .item-carousel .thumb { transition: 0.5s ease; } .custom-carousel2 .item-carousel .content-wrap { left: 0; } .custom-carousel2 .item-carousel:not(.is-selected) .content-wrap { left: unset; } .custom-carousel2 .item-carousel:not(.is-selected) .thumb { opacity: 0; transition: 0.5s ease 1s; } .custom-carousel2 .item-carousel:not(.is-selected) .content-wrap:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; z-index: 1; background-image: linear-gradient(to left, rgba(255,255,255,0.3), #fff); } @media (max-width: 767px) { .custom-carousel .flickity-viewport { overflow: hidden !important; } .custom-carousel .item-carousel:not(.is-selected) { opacity: 0 !important; } .custom-carousel .item-carousel .content-wrap:after { display: none; } } .vertical-line { height: calc(100% - 50px); } .custom-progress-bar .title { position: relative; margin-left: 10px; z-index: 1; } .custom-progress-bar .percent { margin-left: 17px; z-index: 1; } .custom-progress-bar .percent:before { position: absolute; top: 0; right: -10px; content: ''; background-color: var(--e-global-color-tombuild_accent_2); width: 54px; height: 30px; z-index: -1; } .custom-progress-bar .percent:after { position: absolute; bottom:-10px; right: 6px; content: ''; width: 0; height: 0; border-top: 10px solid var(--e-global-color-tombuild_accent_2); border-left: 10px solid transparent; border-right: 10px solid transparent; } .custom-progress-bar.full-bar .percent { margin-left: 22px; } .custom-progress-bar.full-bar .percent:before { right: -6px; } .custom-progress-bar.full-bar .percent:after { right: 10px; } .decor-square { display: inline-block; width: 15px; height: 15px; margin-right: 10px; background-color: var(--e-global-color-tombuild_accent); } .elementor-widget-mae-icon-box:hover .line-border { opacity: 0; } @media (min-width: 1800px) { .custom-section > .elementor-container { margin-left: 250px; margin-right: -270px; } } .inview .auto-scroll .swiper-wrapper { animation: 20s scrolling linear infinite forwards; } @keyframes scrolling { from { transform: translateX(0%); } to { transform: translateX(-100%); } } @media (max-width: 767px) { .mobile-show-link .master-arrow { color: var(--e-global-color-tombuild_accent) !important; } } .bg-zidx-1 .master-slider .bg-wrap { z-index: -1 !important; } .transition-none { transition: none !important; }