/* ------------------------------------------------------------- * * Page transitions /* ------------------------------------------------------------- */ #page-transition { display: none; } body.tt-transition #page-transition { position: relative; display: block; z-index: 99999; } /* Transition overlay */ body.tt-transition .ptr-overlay { position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100vh; background-color: #111; z-index: 1; color: white; clip-path: ellipse(150% 100% at 50% 0); -webkit-clip-path: ellipse(150% 100% at 50% 0); } body.tt-transition .ptr-overlay::after { clip-path: ellipse(150% 100% at 50% 0); -webkit-clip-path: ellipse(150% 100% at 50% 0); } /* Transition preloader */ body.tt-transition .ptr-preloader { position: fixed; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%); } body.tt-transition .ptr-prel-content { margin-top: 10px; text-align: center; text-transform: uppercase; font-size: 15px; font-weight: bold; color: white; background-color: #000; } .ptr-prel-image { max-height: 96px; opacity: 0.2; } body.tt-boxed .tt-wrap { /* max-width: 1282px; */ margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } body.tt-boxed .tt-wrap .tt-wrap { max-width: 100%; padding-left: 0; padding-right: 0; } /* ------------------------------------------------------------- * * Body inner /* ------------------------------------------------------------- */ #body-inner { position: relative; overflow: hidden; height: 100%; min-height: 100vh; } /* ------------------------------------------------------------- * * Content wrap /* ------------------------------------------------------------- */ #content-wrap { position: relative; overflow: hidden; } /* ------------------------------------------------------------- * * Custom scrollbar style /* ------------------------------------------------------------- */ .tt-custom-scrollbar { overflow-y: auto; } /* Works on Firefox */ .tt-custom-scrollbar, .tt-sliding-sidebar-inner, select { scrollbar-width: thin; scrollbar-color: #666 #fefdfd; } select::-webkit-scrollbar { width: 10px; } /* ------------------------------------------------------------- * * Smooth Scrollbar * Source: https://github.com/idiotWu/smooth-scrollbar/ /* ------------------------------------------------------------- */ /* Hide default scrollbar */ /* body:not(.is-mobile).tt-smooth-scroll { overflow: hidden; } */ /* Scroll content (added if contain class "tt-smooth-scroll". Disabled on mobile devices!) */ /* body:not(.is-mobile).tt-smooth-scroll #scroll-container { width: auto; height: 100vh; overflow: auto; margin: 0; } */ /* Styling scrollbar */ .scrollbar-track { background: transparent !important; z-index: 99999 !important; } .scrollbar-track:hover { /*background: rgba(222, 222, 222, 0.1) !important;*/ } .scrollbar-thumb { background: #ddd !important; opacity: 0.25; transition: opacity 0.2s ease-in-out; } .scrollbar-track:hover .scrollbar-thumb { opacity: 0.5; } /* ------------------------------------------------------------- * * Magic cursor /* ------------------------------------------------------------- */ #magic-cursor { position: absolute; display: none; width: 10px; height: 10px; pointer-events: none; z-index: 99999; opacity: 0; } body.tt-magic-cursor #magic-cursor { display: block; } #ball { position: fixed; display: flex; justify-content: center; align-items: center; color: #fff; pointer-events: none; border-style: solid; border-color: #fff; border-radius: 50%; /* Note: border width handled through JS */ } /* ------------------------------------------------------------- * * tt-Section /* ------------------------------------------------------------- */ @media (max-width: 600px) { #page-transition, .ptr-overlay, .ptr-preloader { display: none !important; } } @media (max-width: 767px) { /* Hide default scrollbar */ body:not(.is-mobile).tt-smooth-scroll { overflow: hidden; } /* Scroll content (added if contain class "tt-smooth-scroll". Disabled on mobile devices!) */ body:not(.is-mobile).tt-smooth-scroll #scroll-container { width: auto; height: 100vh; overflow: auto; margin: 0; } /* Styling scrollbar */ .scrollbar-track { background: transparent !important; z-index: 99999 !important; } .scrollbar-track:hover { /*background: rgba(222, 222, 222, 0.1) !important;*/ } .scrollbar-thumb { background: transparent !important; opacity: 0.1; transition: opacity 0.2s ease-in-out; } .scrollbar-track:hover .scrollbar-thumb { opacity: 0.5; } } /* ------------------------------------------------------------- * * tt-Header /* ------------------------------------------------------------- */ #tt-header { position: absolute; top: 0; left: 0; width: 100%; color: #fff; z-index: 999; pointer-events: none; } /* header position fixed */ #tt-header.tt-header-fixed { position: fixed; } /* header inner */ .tt-header-inner { width: 100%; display: flex; padding-top: 40px; align-items: center; } @media (max-width: 1024px) { .tt-header-inner { padding-top: 20px; } } body:not(.tt-boxed) .tt-header-inner, .tt-header-inner:not(.tt-wrap) { padding-left: 3.5%; padding-right: 3.5%; } /* header columns */ .tt-header-col { display: flex; align-items: center; } .tt-header-col:first-child { margin-right: auto; } /* Header logo =============== */ .tt-logo { position: absolute; top: 23px; margin-right: auto; line-height: 1; pointer-events: initial; z-index: 9; margin-left: -31px; } .tt-logo a { display: inline-block; font-size: 21px; color: #fff; } .tt-logo img { width: 143px; height: 157px; margin-left: 30px; } .tt-logo .tt-logo-light { width: 143px; height: 157px; } .tt-logo .tt-logo-dark { width: 143px; height: 157px; } .tt-logo-dark { display: none; } /* Logo for small screens */ @media (max-width: 1024px) { .tt-logo { top: 20px; } } /* ------------------------------------------------------------- * * Classic menu /* ------------------------------------------------------------- */ /* Classic menu (desktop) ========================== */ @media (min-width: 1200px) { .tt-main-menu { pointer-events: initial; } body.tt-header-tools-on .tt-main-menu { margin-right: 20px; } .tt-main-menu-list { margin: 0; padding: 0; list-style: none; font-size: 0; /* inline list cap fix */ } .tt-main-menu-list > li { display: inline-block; font-size: inherit; /* inline list cap fix */ padding: 0 20px; transition: opacity 0.2s; } .tt-main-menu-list > li:first-child { margin-left: 0; padding-left: 0; } .tt-main-menu-list > li:last-child { margin-right: 0; padding-right: 0; } .tt-main-menu-list > li > a, .tt-main-menu-list > li > .tt-submenu-trigger > a { display: block; padding: 20px 5px; font-size: 15px; font-weight: 500; color: #fff; transition: color 0.3s, opacity 0.3s; } /* submenu links */ .tt-submenu-list { margin: 0; padding: 15px 0; list-style: none; } .tt-submenu-list li { width: 100%; } .tt-submenu-list li:first-child { } .tt-submenu-list li:last-child { } .tt-submenu-list li a { position: relative; display: block; padding: 10px 25px 10px 20px; text-decoration: none; font-size: 14px; font-weight: 400; line-height: 1.4; color: #111; transition: all 0.2s ease-in-out; } .tt-submenu-list > li a:hover, .tt-submenu-list > li > .tt-submenu-trigger:hover a, .tt-submenu-list > li.active > a, .tt-submenu-list > li.active > .tt-submenu-trigger a { background-color: rgba(0, 0, 0, 0.05); } /* Set submenu position to right on last menu list element */ .tt-main-menu-list > li:last-child > .tt-submenu { left: auto; right: 0; } /* Submenu toggle */ .tt-m-caret { display: none; } /* Sub-submenu */ .tt-submenu .tt-submenu-wrap > .tt-submenu { left: 100%; right: auto; margin-top: -50px; margin-left: 0; } /* Caret (requires FontAwesome: https://fontawesome.com/) */ .tt-submenu-trigger > a::after { margin-left: 10px; font-size: 12px; line-height: 0; font-family: "Font Awesome 5 Free"; content: "\f107"; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } /* Caret in sub-submenus */ .tt-submenu-wrap .tt-submenu-wrap .tt-submenu-trigger > a::after { position: absolute; right: 10px; top: 50%; transform: translate3d(0, -50%, 0) rotate(-90deg); } /* Hide ".tt-submenu-trigger-m" on desktop */ .tt-submenu-trigger .tt-submenu-trigger-m { display: none; } /* Submenu styles ================== */ /* Submenu dark style */ .tt-submenu-dark .tt-submenu { background-color: #212121; color: #a9a9a9; } .tt-submenu-dark .tt-submenu .tt-submenu-list li a { color: #a9a9a9; } .tt-submenu-dark .tt-submenu .tt-submenu-list > li a:hover, .tt-submenu-dark .tt-submenu .tt-submenu-list > li > .tt-submenu-trigger:hover a, .tt-submenu-dark .tt-submenu .tt-submenu-list > li.active > a, .tt-submenu-dark .tt-submenu .tt-submenu-list > li.active > .tt-submenu-trigger a { color: #fff; background-color: transparent; } } /* Show mobile menu on small screens only */ @media (max-width: 1199px) { .tt-main-menu { pointer-events: initial; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #0a0a0a; overflow: hidden; visibility: hidden; opacity: 0; } .tt-main-menu-holder { position: relative; height: 100%; width: calc(100% + 17px); overflow-y: scroll; z-index: 2; } body.is-mobile .tt-main-menu-holder { padding-right: 17px; } .tt-main-menu-inner { display: table; width: 100%; height: 100%; padding: 20% 7%; } .tt-main-menu-content { height: 100%; display: table-cell; vertical-align: middle; } /* Mobile menu list */ .tt-main-menu-list { display: inline-block; margin: 0; padding: 0; list-style: none; } .tt-main-menu-list > li { margin-top: 15px; margin-bottom: 15px; } .tt-main-menu-list > li:first-child { margin-top: 0; } .tt-main-menu-list > li:last-child { margin-bottom: 0; } .tt-main-menu-list > li a { position: relative; display: inline-block; font-size: 34px; font-weight: 600; line-height: 1.2; color: #eaeaea; } @media (max-width: 767px) { .tt-main-menu-inner { padding-top: 35%; padding-bottom: 35%; } .tt-main-menu-list > li a { font-size: 34px; } } /* Mobile menu list hover/active (master parent) */ .tt-main-menu-list > li a:hover, .tt-main-menu-list > li > .tt-submenu-trigger:hover a, .tt-main-menu-list > li > .tt-submenu-trigger:hover .tt-m-caret, .tt-main-menu-list > li.active > a, .tt-main-menu-list > li.active > .tt-submenu-trigger a, .tt-main-menu-list > li.active > .tt-submenu-trigger .tt-m-caret { color: #fff; } /* Mobile submenu */ .tt-submenu-wrap { position: relative; } .tt-submenu-trigger { position: relative; display: inline-block; } .tt-submenu-trigger > a { position: relative; z-index: 1; } .tt-submenu-trigger .tt-submenu-trigger-m { position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; cursor: pointer; } .tt-submenu { display: none; position: relative; top: auto; left: 0 !important; min-width: 100%; background-color: transparent; margin-top: 15px; margin-bottom: 15px; color: #a9a9a9; } .tt-submenu-list { margin: 0 0 0 20px; padding: 0; list-style: none; } .tt-submenu-list .tt-submenu { margin-top: 10px; } .tt-submenu-list > li { } .tt-submenu-list > li a { display: inline-block; padding-top: 8px; padding-bottom: 8px; font-size: 16px; font-weight: normal; color: #aaa; -webkit-text-stroke: 0; } /* Align mobile menu to center */ .tt-main-menu.tt-m-menu-center .tt-main-menu-content { text-align: center; } .tt-main-menu.tt-m-menu-center .tt-submenu-list { margin: 0; } } /* ------------------------------------------------------------- * * Overlay menu /* ------------------------------------------------------------- */ /* Overlay menu ================ */ .tt-overlay-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #0a0a0a; visibility: hidden; opacity: 0; pointer-events: initial; } .tt-ol-menu-holder { position: relative; height: 100%; width: calc(100% + 17px); padding-right: 17px; overflow-y: scroll; z-index: 2; background-color: #264658; } .tt-ol-menu-inner { display: table; width: 100%; height: 100%; padding-left: 0; padding-right: 0; } .tt-ol-menu-content { display: table-cell; vertical-align: middle; height: 100%; padding: 120px 5% 120px 5%; } @media (max-width: 1536px) { .tt-ol-menu-content { padding: 63px 5% 129px 5%; } } @media (max-width: 1366px) { .tt-ol-menu-content { padding: 69px 2% 12px 2%; } } @media (max-width: 1280px) { .tt-ol-menu-content { padding: 38px 3% 120px 5%; } } @media (max-width: 912px) { .tt-ol-menu-content { display: table-cell; vertical-align: middle; height: 100%; padding: 141px 0% 169px 10%; width: 80%; } } @media (max-width: 768px) { .tt-ol-menu-content { display: table-cell; vertical-align: middle; height: 100%; padding: 107px 0% 184px 23%; width: 80%; } } @media (max-width: 767px) { .tt-ol-menu-content { padding-top: 5%; padding-bottom: 25%; padding-left: 15px; padding-right: 15px; width: 100%; } } /* Disable page scroll if overlay menu is open */ body.tt-ol-menu-open { overflow-y: hidden !important; } /* Hide smooth scrollbar if overlay menu is open */ body.tt-smooth-scroll.tt-ol-menu-open .scrollbar-track { display: none !important; } /* Overlay menu list */ .tt-ol-menu-list { display: inline-block; margin: 0; padding: 0; list-style: none; text-align: left; } .tt-ol-menu-list > li { position: relative; margin-top: 20px; margin-bottom: 20px; } @media (max-width: 767px) { .tt-ol-menu-list > li { margin-top: 15px; margin-bottom: 15px; } } .tt-ol-menu-list > li:first-child { margin-top: 0; } .tt-ol-menu-list > li:last-child { margin-bottom: 0; } /* Overlay menu list links (master parent) */ .tt-ol-menu-list > li > a, .tt-ol-menu-list > li > .tt-ol-submenu-trigger > a { position: relative; display: inline-block; /* font-size: clamp(34px, 3.2vw, 52px); */ font-size: 36px; font-weight: bold; font-weight: 500; /* line-height: 1.2; */ color: #eaeaea; text-decoration: none; font-family: "Kaisei HarunoUmi"; transition: all 0.4s ease-in-out; animation: none; } /* Overlay menu submenu */ .tt-ol-submenu-wrap { position: relative; } .tt-ol-submenu-trigger { position: relative; display: inline-block; } .tt-ol-submenu { display: none; position: relative; height: auto; margin-left: 20px; color: #8a8a8a; } .tt-ol-menu-list > li > .tt-ol-submenu { margin-top: 20px; margin-bottom: 20px; } /* Overlay menu submenu list */ .tt-ol-submenu-list { padding: 0; list-style: none; } .tt-ol-submenu-list .tt-ol-submenu { margin-top: 15px; margin-bottom: 20px; } /* Overlay menu submenu list links */ .tt-ol-submenu-list > li a, .tt-ol-submenu-list > li > .tt-ol-submenu-trigger > a { display: inline-block; padding-top: 6px; padding-bottom: 6px; font-size: 19px; color: #aaa; transition: all 0.3s ease-in-out; } /* Overlay menu submenu list hover/active */ .tt-ol-submenu-list > li > .tt-ol-submenu-trigger.tt-ol-submenu-open > a, .tt-ol-submenu-list > li > .tt-ol-submenu-trigger.tt-ol-submenu-open .tt-ol-submenu-caret, .tt-ol-submenu-list > li.active > a, .tt-ol-submenu-list > li.active > .tt-ol-submenu-trigger > a, .tt-ol-submenu-list > li.active > .tt-ol-submenu-trigger .tt-ol-submenu-caret, .tt-ol-submenu-list > li a:hover, .tt-ol-submenu-list > li > .tt-ol-submenu-trigger:hover > a, .tt-ol-submenu-list > li > .tt-ol-submenu-trigger:hover .tt-ol-submenu-caret { color: #fff; } /* Overlay menu toggle button ============================== */ #tt-ol-menu-toggle-btn-wrap { position: relative; display: flex; align-items: center; pointer-events: initial; cursor: pointer; z-index: 9; } @media (min-width: 1025px) { body.tt-header-tools-on #tt-ol-menu-toggle-btn-wrap { margin-right: 20px; } .tt-ol-menu-toggle-btn-holder .active span::before { background-color: #fff; } .tt-ol-menu-toggle-btn-holder .active span::after { background-color: #fff; } } .tt-ol-menu-toggle-btn-holder { float: left; } .tt-ol-menu-toggle-btn-holder .active span::before { background-color: #fff; } .tt-ol-menu-toggle-btn-holder .active span::after { background-color: #fff; } /* Toggle button for home page*/ .tt-ol-menu-toggle-btn { position: relative; display: block; width: 50px; height: 50px; } .tt-ol-menu-toggle-btn span { position: absolute; display: block; top: 54%; left: 50%; height: 2px; width: 24px; background-color: transparent; transform: translate(-50%, -50%); transition: all 0.3s ease-in-out; } .tt-ol-menu-toggle-btn span::before, .tt-ol-menu-toggle-btn span::after { position: absolute; display: block; content: ""; height: 2px; width: 24px; background-color: #000; transition: all 0.3s ease-in-out; } .tt-ol-menu-toggle-btn .tt-btn-span::before { position: absolute; display: block; content: ""; height: 2px; width: 24px; background-color: #000; transition: all 0.3s ease-in-out; } .tt-ol-menu-toggle-btn .tt-btn-span::after { position: absolute; display: block; content: ""; height: 2px; width: 18px; background-color: #000; transition: all 0.3s ease-in-out; } .tt-ol-menu-toggle-btn span::before { top: -4px; width: 24px; } .tt-ol-menu-toggle-btn span::after { top: auto; bottom: -4px; width: 18px; } /* Toggle button for other page*/ .tt-ol-menu-toggle-btn100 { position: relative; display: block; width: 50px; height: 50px; } .tt-ol-menu-toggle-btn100 span { position: absolute; display: block; top: 54%; left: 50%; height: 2px; width: 24px; background-color: transparent; transform: translate(-50%, -50%); transition: all 0.3s ease-in-out; } .tt-ol-menu-toggle-btn100 span::before, .tt-ol-menu-toggle-btn100 span::after { position: absolute; display: block; content: ""; height: 2px; width: 24px; background-color: #000; transition: all 0.3s ease-in-out; } .tt-ol-menu-toggle-btn100 span::before { top: -4px; width: 24px; } .tt-ol-menu-toggle-btn100 span::after { top: auto; bottom: -4px; width: 18px; } /* Toggle button text */ .tt-ol-menu-toggle-btn-text { float: left; padding-right: 5px; overflow: hidden; text-align: right; font-size: 20px; color: #000; } @media (max-width: 320px) { .tt-ol-menu-toggle-btn-text { display: none; } } /* Toggle button text hover */ .tt-ol-menu-toggle-btn-text .text-menu { position: relative; display: inline-block; text-align: right; /* transition: transform 0.3s; */ transition: all 0.6s ease-in; } body.tt-ol-menu-open .tt-ol-menu-toggle-btn-text .text-menu { display: none; } body:not(.is-mobile) .tt-ol-menu-toggle-btn-text .text-menu::before { position: absolute; top: 100%; right: 0; content: attr(data-hover); } body:not(.is-mobile) #tt-ol-menu-toggle-btn-wrap:hover .tt-ol-menu-toggle-btn-text .text-menu { transform: translate3d(0, -105%, 0); } /* Toggle button close */ body.tt-ol-menu-open .tt-ol-menu-toggle-btn span { width: 20px; background-color: transparent; } body.tt-ol-menu-open .tt-ol-menu-toggle-btn span::before { top: 0; width: 20px; transform: rotate(45deg); } body.tt-ol-menu-open .tt-ol-menu-toggle-btn span::after { bottom: 0; width: 20px; transform: rotate(-45deg); } .tt-ol-menu-toggle-btn-text .text-close { display: none; } body.tt-ol-menu-open .tt-ol-menu-toggle-btn-text .text-close { display: block; } /* Disable menu toggle button click until the animations last */ body.olm-toggle-no-click .tt-ol-menu-toggle-btn-text, body.olm-toggle-no-click .tt-ol-menu-toggle-btn { pointer-events: none; } /* Overlay menu position center ================================ */ .tt-overlay-menu.tt-ol-menu-center .tt-ol-menu-content { text-align: center; } .tt-overlay-menu.tt-ol-menu-center .tt-ol-submenu { margin-left: 0; } .tt-search-title { margin-bottom: 10%; font-size: clamp(48px, 6vw, 112px); font-weight: bold; font-weight: 500; line-height: 1.3; } .tt-search .tt-search-form .tt-form-control { font-size: clamp(19px, 2vw, 26px); } .tt-search-close-btn { position: absolute; display: flex; align-items: center; justify-content: center; top: 30px; right: 40px; width: 40px; height: 40px; background-color: #333; font-size: 16px; cursor: pointer; border-radius: 50px; z-index: 3; transition: transform 0.3s; } .tt-search-close-btn:hover { transform: rotate(90deg); } /* Disable page scroll if tt-Search is open. */ body.tt-search-open { overflow-y: hidden !important; } body.tt-search-open .scrollbar-track { display: none !important; } /* ------------------------------------------------------------- * * Page header /* ------------------------------------------------------------- */ #page-header { position: relative; z-index: 1; } .page-header-inner, body.ph-image-on.ph-bg-image-on #page-header:not(.project-info-list-on) .page-header-inner { width: 100%; padding-top: 13vw; padding-bottom: 7vw; z-index: 2; } body.ph-image-on #page-header:not(.project-info-list-on) .page-header-inner { padding-top: 16vw; padding-bottom: 13vw; } body:not(.tt-boxed) .page-header-inner, .page-header-inner:not(.tt-wrap) { padding-left: 13%; padding-right: 13%; } @media (max-width: 1400px) { body.tt-boxed .page-header-inner.tt-wrap { padding-left: 8%; padding-right: 8%; } } @media (max-width: 1024px) { body:not(.tt-boxed) .page-header-inner, .page-header-inner:not(.tt-wrap) { padding-left: 5%; padding-right: 5%; } } @media (min-width: 1025px) { #page-header.ph-full { display: flex; align-items: center; height: 70vh; } #page-headerr.ph-full .page-header-inner { padding-top: 5% !important; padding-bottom: 5% !important; } #page-header.ph-full .ph-image { position: absolute; display: flex; align-items: center; top: 0; bottom: 0; height: 100%; width: 100%; } #page-header .ph-full:not(.ph-bg-image).ph-image-cropped .ph-image-inner { padding-bottom: 140%; } } /* Page header positions ========================= */ /* Position center */ /* #page-header.ph-center { text-align: center; } */ @media (min-width: 1025px) { #page-header.ph-center .page-header-inner { max-width: 100%; padding-left: 4% !important; padding-right: 4% !important; } } #page-header.ph-center .ph-caption, #page-header.ph-center .ph-caption-title, #page-header.ph-center .ph-caption-subtitle { margin-left: auto; margin-right: auto; text-align: center; } #page-header.ph-center .ph-caption-title-ghost { left: 50%; transform: translate3d(-50%, 0, 0); } #page-header.ph-center .ph-caption-description, #page-header.ph-center .ph-caption > p { margin-left: auto; margin-right: auto; } #page-header.ph-center:not(.ph-bg-image) .ph-image { right: 50%; transform: translate(50%, 0); background-color: #0b132a; } #page-header.ph-center .project-info-list .social-buttons { margin-left: 0; } @media (min-width: 1025px) { #page-header:not(.ph-center).ph-inline .page-header-inner { display: flex; } #page-header:not(.ph-center).ph-inline .ph-caption { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; align-self: center; padding-right: 10%; } #page-header:not(.ph-center).ph-inline .project-info-list { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; align-self: center; margin: 0; } #page-header:not(.ph-center).ph-inline .project-info-list > ul > li { position: relative; display: block; width: 100%; max-width: 100%; padding: 0; margin: 0 0 25px 0; } #page-header:not(.ph-center).ph-inline .project-info-list > ul > li:last-child { margin: 0; } #page-header:not(.ph-center).ph-inline .project-info-list > ul > li::after { display: none; } } /* If page header background image is light (class "ph-bg-image-is-light") ============================================ */ body.ph-bg-image-light-on #page-header.ph-stroke .ph-caption-title { -webkit-text-stroke-color: #111; } /* Make magic cursor dark */ body.ph-bg-image-light-on:not(.tt-ol-menu-open):not(.ph-share-open) #ball { border-color: #666; } /* Make header logo dark */ body.ph-bg-image-light-on:not(.tt-ol-menu-open) #tt-header .tt-logo-light { display: none; } body.ph-bg-image-light-on:not(.tt-ol-menu-open) #tt-header .tt-logo-dark { display: block; } /* Make overlay menu toggle button dark */ body.ph-bg-image-light-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn-text { color: #111; } body.ph-bg-image-light-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn span::before, body.ph-bg-image-light-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn span::after { background-color: #111; } /* Make classic menu links dark */ @media (min-width: 1025px) { body.ph-bg-image-light-on .tt-main-menu-list > li > a, body.ph-bg-image-light-on .tt-main-menu-list > li > .tt-submenu-trigger > a { color: #111; } } @media (max-width: 1024px) { body.ph-bg-image-light-on:not(.tt-m-menu-open) .tt-m-menu-toggle-btn-text { color: #111; } body.ph-bg-image-light-on:not(.tt-m-menu-open) .tt-m-menu-toggle-btn span::before, body.ph-bg-image-light-on:not(.tt-m-menu-open) .tt-m-menu-toggle-btn span::after { background-color: #111; } } /* Make header logo dark */ body.psi-light-image-on #tt-header .tt-logo-light { display: none; } body.psi-light-image-on #tt-header .tt-logo-dark { display: block; } /* Make overlay menu toggle button dark */ body.psi-light-image-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn-text { color: #111; } body.psi-light-image-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn span::before, body.psi-light-image-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn span::after { background-color: #111; } @media (max-width: 1024px) { body.psi-light-image-on:not(.tt-m-menu-open) .tt-m-menu-toggle-btn-text { color: #111; } body.psi-light-image-on:not(.tt-m-menu-open) .tt-m-menu-toggle-btn span::before, body.psi-light-image-on:not(.tt-m-menu-open) .tt-m-menu-toggle-btn span::after { background-color: #111; } } body.tt-portfolio-hover-carousel-on.tt-light-bg-on #ball { border-color: #111; } /* Make header logo dark */ body.tt-light-bg-on #tt-header .tt-logo-light { display: none; } body.tt-light-bg-on #tt-header .tt-logo-dark { display: block; } /* Make overlay menu toggle button dark */ body.tt-light-bg-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn-text { color: #111; } body.tt-light-bg-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn span::before, body.tt-light-bg-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn span::after { background-color: #111; } /* ------------------------------------------------------------- * * Magnetic wrap /* ------------------------------------------------------------- */ .magnetic-wrap { position: relative; display: flex; justify-content: center; align-items: center; }