:root { --main-color: #08b1c4; --alt-color: #1a6f7c; --bg-color: #1d252f; --white-color: #fff; --dark-color: #101010; --word-total: 1; --char-total: 4; --listStyleCounterType: decimal-leading-zero; --border-light-color: #ffffff0d; --card-height: 70vh; --card-margin: 4vw; --card-top-offset: 1em; --card-outline-width: 0px; } body {overflow-x: hidden; font-family: "Noto Sans", sans-serif; font-size: 1.1rem; background-color: var(--bg-color); color: var(--white-color); position: relative; background-image: url(../img/noise.png); background-position: 0 0; background-size: auto; height: 100%; width: 100%; animation: fadeInAnimation ease 3s; animation-iteration-count: 1; animation-fill-mode: forwards; min-height: 100vh;} /*[data-scroll] {transition: opacity 1s;} [data-scroll="in"] {opacity: 1;} [data-scroll="out"] {opacity: 0;}*/ ::-moz-selection {color: #fff; background-color: var(--main-color); -webkit-text-fill-color: initial; text-fill-color: initial;} ::selection {color: #fff; background-color: var(--main-color); -webkit-text-fill-color: initial; text-fill-color: initial;} .noselect, img {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} a {text-decoration: none; background-color: transparent; color: inherit; transition: .2s;} h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', sans-serif;} h1 {font-weight: 800; letter-spacing: -.5px;} h2.section-title, h1.section-title {font-size: 36px; font-weight: 700; margin-bottom: 24px;} span.title-dot {color: var(--main-color); font-size: 42px;} .section-subtitle {font-weight: 300; font-size: 19px; margin-bottom: 20px; color: #ffffff90!important;} .section-title-desc {font-size: .5em; font-weight: 500;} .overlay:before {content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0;} code {color: var(--main-color);} #smooth-content, .text-box-item, .portfolio .portfolio-items, .service-card, .top-bubble-wrap, .animation-lr {will-change: transform;} .reveal-top, .portfolio-item, .breadcrumb, .faq, .footer-wrap {will-change: transform, opacity;} .theme-color {color: var(--main-color);} .theme-button {-webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; padding: 0; background: transparent; border-radius: 0; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none; overflow: hidden; z-index: 1; text-align: center; transition: opacity .3s; transition-delay: 0s; transition-timing-function: ease; height: 3.75rem; box-shadow: -3px 0 10px -5px #000; box-shadow: rgb(0 0 0 / 14%) 0px 0px 20px, rgb(0 0 0 / 10%) 0px 2px 6px;} .theme-button-text {position: relative; z-index: 1; display: flex!important; flex-direction: row; align-items: center; justify-content: center; padding: 0 2.25rem; width: 100%; height: 100%; font-weight: 400; line-height: 140%; transition: color .5s; transition-delay: 0s; transition-timing-function: ease; font-size: 1rem; color: var(--white-color);} .theme-button-text:before, .theme-button-text:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; transition: transform .5s,background-color .5s,border-color .5s; transition-delay: 0s; transition-timing-function: ease;} .theme-button-text:before {background-color: var(--main-color); z-index: -2;} .theme-button-text:after {transform: translateY(105%); background-color: var(--white-color); z-index: -1; border-radius: 8px; border-radius: 100% 100% 0 0/100% 100% 0 0; transition: all 0.3s cubic-bezier(1, 0, 0.55, 1);} .theme-button:hover .theme-button-text {color: var(--main-color);} .theme-button:hover .theme-button-text:before {transform: scale(.99);} .theme-button:hover .theme-button-text:after {transform: translateY(0); border-radius: 8px;} .theme-button-alt.slide-vertical .char:before {color: #fff;} .theme-button-alt.slide-vertical .char:after {color: var(--alt-color);} .theme-button-alt .theme-button-text:before {background-color: #fff;} .theme-button-alt .theme-button-text:after {background-color: var(--alt-color);} .theme-button-dark {background-image: linear-gradient(135deg, #1D242E, #282B38);} .theme-button-dark .theme-button-text:before {background-color: transparent; background-image: linear-gradient(135deg, rgba(214, 163, 228, 0), rgba(214, 163, 228, .07));} .theme-list li {position: relative; display: flex; align-items: center; justify-content: flex-start; padding-left: 30px;} .theme-list li:before {content: ''; position: absolute; top: calc(50%); left: 0; transform: translateY(-50%); display: inline-block; width: 20px; height: 8px; background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 108.8 41.4' enable-background='new 0 0 108.8 41.4' xml:space='preserve'%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='-38.7585' y1='606.153' x2='61.9653' y2='606.153' gradientTransform='matrix(1.0806 1.023165e-004 -1.217313e-004 1.2806 41.9565 -755.5405)'%3E%3Cstop offset='0.1' style='stop-color:%235FCAE6'/%3E%3Cstop offset='0.1704' style='stop-color:%2342C4DC'/%3E%3Cstop offset='0.2826' style='stop-color:%231BB8CE'/%3E%3Cstop offset='0.4067' style='stop-color:%2307A6BA'/%3E%3Cstop offset='0.547' style='stop-color:%231499AC'/%3E%3Cstop offset='0.7171' style='stop-color:%230992A5'/%3E%3Cstop offset='1' style='stop-color:%230F90A1'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23SVGID_1_)' d='M0,14.8C0,5.2,15,0,31.7,0c13,0,77.1,0,77.1,0s-0.3,29.1-32.2,29.1c-12.7,0-31.1,0-45.2,0 c-14,0-31,3.4-31.4,12.3C0,41.5-0.1,21.1,0,14.8z'/%3E%3C/svg%3E%0A"); background-size: 20px auto; background-repeat: no-repeat;} header {position: fixed; top: 0; left: 0; width: 100%; z-index: 99998; padding: 30px 0; color: #fff; -webkit-transition: all .7s; transition: all .7s; transition-delay: 1s;} header .row img {max-width: 220px;} header .logo {width: 170px; height: 32px; margin-left: 12px; background-size: contain; background-repeat: no-repeat; background-position: left; z-index: 998; background-image: url(../img/logo-w.svg); transition: all .2s ease-out .2s;} header .hidden-logo {transition: all .2s ease-out .5s;} header.topnav .container-fluid {padding: 0 32px;} header.topnav .menu-icon {cursor: pointer; position: relative; z-index: 998;} header.topnav .menu-icon:after {content: "zatvori"; width: max-content; min-width: 70px; position: absolute; line-height: 20px; top: calc(50% - 10px); left: 44px; opacity: 0; -webkit-transition: all .4s; transition: all .4s; -webkit-transition-delay: .4s; transition-delay: .4s;} header.topnav.open .word, header.topnav.open .menu-icon .char, header.topnav.open .menu-icon:hover .char {opacity: 0;} header.topnav.open .menu-icon:after {opacity: 1;} header.topnav .word, header.topnav .menu-icon .char, header.topnav .menu-icon:hover .char {-webkit-transition-delay: .4s; transition-delay: .4s;} header.topnav .menu-icon .char {margin-left: 1px;} header.disable-header {z-index: 99997;} header:before {content: ''; background: url(../img/noise_header.png), linear-gradient(180deg, var(--bg-color), 60%, transparent); position: absolute; width: 100%; height: 100%; display: block; top: 0; z-index: 998; background-repeat: repeat; transition: all .5s ease 0s; opacity: 0;} header.nav-scroll:before {opacity: 1; transition: all .5s ease 0s;} .menu-btn {width: 20px; height: 20px; transition-duration: 0.3s; position: relative;} .menu-btn .icon {transition-duration: 0.3s; position: absolute; height: 3px; width: 17px; top: 11px; background-color: var(--main-color);} .menu-btn .icon:before {transition-duration: 0.3s; position: absolute; width: 20px; height: 3px; background-color: #fff; content: ""; top: -7px; left: 0;} .menu-btn .icon:after {transition-duration: 0.3s; position: absolute; width: 20px; height: 3px; background-color: #fff; content: ""; top: 7px; left: 0;} .menu-icon:hover .icon {width: 20px} .menu-icon:hover .icon:before {left: 3px} .menu-icon:hover .icon:after {left: -3px;} .menu-icon.open .icon {transition-duration: 0.5s; transform: rotateZ(180deg);} .menu-icon.open .icon:before {transform: rotateZ(38deg) scaleX(0.75) translate(5px, 1px);} .menu-icon.open .icon:after {transform: rotateZ(-38deg) scaleX(0.75) translate(5px, -1px);} .menu-icon:hover {cursor: pointer;} .menu-icon.open:hover .icon:before {left: 0;} .menu-icon.open:hover .icon:after {left: 0;} .intro {height: 100vh; padding-top: 100px;} .intro h1 {font-size: 42px;} .intro h1 .span-last {white-space: nowrap; display: block; bottom: -6px; position: relative;} .intro .section-subtitle {color: #ffffffa0;} .intro .img-wrap {position: absolute; right: 0; left: 0; top: 0; -webkit-mask-image: url(/img/shape/shape19.svg); mask-image: url(/img/shape/shape19.svg); -webkit-mask-position: center center; mask-position: center; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; text-align: center; z-index: 0; width: 100%; height: auto;} .intro .img-wrap img {width: auto; opacity: .2; filter: grayscale(1); box-shadow: 0 0 150px #fff; pointer-events: none; height: 100vh; object-fit: cover; transition: .4s ease;} .floating-image {animation: floating 5s infinite 2.5s; position: relative; z-index: 1;} .floating-image img {animation: 1s ease 0s 1 normal forwards running faded-in;} .ms-slider {display: inline-block; height: 1.5em; overflow: hidden; vertical-align: middle; mask-image: linear-gradient(transparent, white, white, white, transparent); mask-type: luminance; mask-mode: alpha;} .ms-slider__words {display: inline-block; margin: 0; padding: 0; list-style: none; animation-name: wordSlider; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-duration: 7s;} .ms-slider__word {display: block; line-height: 1.3em; text-align: left;} .underlined {padding: 0 0.2em; margin: 0 -0.2em; white-space: nowrap; transform-style: preserve-3d; position: relative;} .underlined:before {-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 0 .3em; mask-size: 0 .3em; content: ""; display: block; width: 0; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20preserveAspectRatio%3D%22none%22%20height%3D%2216%22%20viewBox%3D%220%200%20100%2016%22%20width%3D%22100%25%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m54.634.136885c-1.919.069614-5.0237.176001-6.8991.23647-1.8755.06047-3.9809.132051-4.6788.158991-.6978.02704-3.5884.137262-6.4234.245026-2.835.107763-6.0467.238238-7.137.289958-4.7362.22457-6.2459.30087-6.7159.33971-.2753.02271-1.1429.09075-1.9279.15112-1.7385.13382-3.983.35034-5.789.55839-.7415.08535-1.8342.20983-2.4284.27649-.5941.06666-1.1614.17158-1.2609.23322-.0992.06156-.454.112-.7882.112-.3394%200-.6417.05427-.68484.1229-.04235.06765-.3521.1292-.68818.13687-.33607.00767-.78349.08397-.99411.16951-.21063.08564-.7015.16892-1.09103.18515-.84011.035-1.12321.12625-1.00141.3228.0663.10707-.03314.14434-.38492.14434-.50816%200-.7835.28356-.46645.48011.24377.15113-.18176.22428-.74828.12861-.69214-.1169-.70689-.31375-.02348-.31375.31245%200%20.56827-.04896.56827-.10884s-.10975-.0827-.24393-.05084c-.13798.03284-.28263-.00442-.33306-.08603-.06376-.10285-.16733-.11809-.36304-.0531-.15067.04995-.69658.0824-1.2133.07197-.74289-.01504-.9394.0119-.9394.12852%200%20.10442.13243.13785.45391.11445.32435-.0237.43346.00442.38192.09832-.03949.07227-.24377.13402-.45392.13736-.60491.00944-1.571427.15604-1.571427.23844%200%20.08839.799357.19802%201.443597.19802.51625%200%201.00474.36351.84201.62653-.05535.08937-.02014.2228.07835.29634.1732.1293.08692.45318-.12085.45417-.05615.00029-.31609.10697-.57779.23706l-.4758.23666.38445.25447c.27501.1821.31799.25456.15067.25456-.12863%200-.3015-.04051-.38445-.09006-.09183-.05497-.22205-.0414-.3337.0348-.14036.09597-.09992.18947.17399.40244l.35685.27748.55511-.21268c.3053-.11701.60316-.18288.662-.1465.24346.15093%201.71591.21228%201.79236.07472.0314-.05634-.04679-.18908-.17351-.29497-.20095-.16814-.27406-.1761-.57255-.06303-.50198.19026-.57176.06362-.07597-.13775.41252-.16754.43013-.16568.80681.08613.48659.32536.48421.46911-.01285.75858-.25694.14955-.36558.29507-.30658.4104.06709.13087.00888.17866-.21697.17866-.1697%200-.58492.07423-.92274.16508-.59539.16008-.70895.18141-1.12956.21327-.10896.00816-.19826.06431-.19826.12478%200%20.0643.16558.09016.40031.06233.22014-.02615.44155-.00609.49183.04435.05043.05054.19127.06814.31324.03913.12196-.029.36748-.01927.54559.02153.32037.07345.3199.0765-.03949.27689-.52101.29055-1.62694.54058-1.83122.41394-.11182-.06932-.35559-.03805-.77509.09961-.33655.11051-.748758.22661-.915924.25811-.230448.0434-.259631.0848-.120379.1712.271368.1682%201.705763.126%202.173323-.0639.41934-.1703.70942-.1357.70942.0848%200%20.1872-.42473.3778-.91989.4128-1.36445.0965-1.622811.1247-1.808851.1969-.112924.044-.329732.0672-.481673.0516-.1773164-.018-.2469436.0195-.1941292.1048.1032502.1667.9327332.2119%201.3500232.0734.24789-.0822.33544-.0708.41268.054.05376.0871.02268.205-.06931.262-.25884.1605-.04156.3747.38001.3747.23156%200%20.37953.0576.37953.1475%200%20.1841.06122.1838.64519-.0034.42664-.1368.47978-.1362.56828.0066.0536.0867.02315.2541-.06773.3721-.09103.1181-.20697.2949-.25788.3929-.05091.0982-.16796.1495-.25995.1142-.11483-.044-.10738-.1091.02379-.207.13449-.1005.14147-.1738.02363-.2469-.16336-.1013-.33877-.019-.96097.4506-.26645.2011-.09183.3752.29897.2982.16986-.0335.30388-.0135.30388.0452%200%20.0577-.08914.1117-.19826.1199-.10895.0082-.27517.02-.36922.0262-.09405.0061-.41046.1362-.70324.2889-.45773.2387-.50594.3037-.34448.4641.10325.1025.18778.2728.18778.3785%200%20.2246.1862.3104.85851.3957.60871.0772.63409.3033.05345.4759-.30753.0914-.43615.2037-.43615.381%200%20.233.03965.2468.54384.1881.90435-.1051%203.65054-.1676%206.75184-.1533%2013.17668.0605%2019.52958-.0057%2019.92148-.2074.1639-.0842.2765-.085.4357-.0031.1446.0744.8817.0962%202.2601.0667%201.8894-.0404%205.5958-.08%2019.0157-.2034%205.7839-.0532%2012.0155-.1544%2012.133-.197.0436-.016%201.8279-.0563%203.9651-.0899%202.1371-.0335%204.7065-.0808%205.7096-.1051%201.9423-.047%205.2369-.1183%209.1197-.1973%206.1573-.1252%207.6273-.1624%209.9771-.2524%202.6044-.0996%205.8492-.3314%206.1265-.4375.4284-.1642.7568-.8292.8488-1.7186.0532-.5138.1647-1.3544.2479-1.8682.0833-.5137.2638-2.06234.4011-3.44134.1374-1.379.3245-2.83912.4159-3.24471.4057-1.8018.3007-2.25261-.5726-2.4585-.3957-.09322-4.473-.30412-6.7391-.34847-.8287-.01622-2.6844-.07659-4.1237-.134015-5.02-.200582-13.07-.424369-19.8661-.552289-1.6365-.030776-3.2066-.074724-3.4893-.097535-.2827-.02291-1.5725-.046214-2.8659-.051818-1.9657-.008456-2.3376-.033137-2.2651-.150242.1048-.1693143-.2506-.1685266-5.2165.011604zm4.6391.014355c-.1525.024778-.4025.024778-.5551%200-.1525-.02468-.0277-.044934.2776-.044934s.4301.020254.2775.044934zm-42.9414%202.03571c0%20.02124-.1107.06499-.2461.09724-.1412.03353-.2048.01702-.1493-.03864.0931-.0935.3954-.13824.3954-.0586zm-3.491%201.38579c.1705.12733.1321.13244-.2977.03952-.5616-.12133-.6293-.18573-.1957-.18573.1637%200%20.3857.06578.4934.14621zm-3.49065.59358c-.11039.0824-.2333.12959-.27327.10491-.10991-.06823.11356-.25475.30515-.25475.10531%200%20.09326.05643-.03188.14984zm-.27533.552c.08834.03451.10674.11671.04108.18258-.16749.16804-.39699-.07167-.37621-.3928.01332-.20344.02966-.21189.09532-.04916.04362.10815.15147.22486.23981.25938zm-4.35267.30225c.03235.10363-.10658.16607-.43616.19605-.53734.04887-.63107-.07679-.20618-.27648.3337-.15673.57763-.12625.64234.08043zm3.6461.21503c-.11245.07571-.2295.12291-.25995.10491-.09405-.05545.14433-.24246.30895-.24246.08565%200%20.0636.06194-.049.13755zm-7.06096.61886c.15432.02497.36843.0233.47581-.00364.10737-.02694-.01888-.0473-.28057-.04533s-.34956.02399-.19524.04897zm6.93122.223c.12831.05034.19444.11553.14702.14493-.04742.02949-.22378-.01102-.3919-.08987-.33433-.15683-.13117-.20255.24488-.05506zm.63901.39713c0%20.05408-.07566.09832-.16796.09832-.09231%200-.12387-.04424-.06995-.09832.05393-.05408.12942-.09833.16796-.09833s.06995.04425.06995.09833zm.79301.68827c0%20.05408-.07566.09832-.16797.09832-.0923%200-.12386-.04424-.06994-.09832.05393-.05408.12942-.09832.16796-.09832s.06995.04424.06995.09832zm.95157%201.61183c0%20.02124-.107.06411-.2379.09528-.1308.03107-.2379.01367-.2379-.03864%200-.05241.1071-.09528.2379-.09528.1309%200%20.2379.01741.2379.03864zm-9.641686.1996c-.226007.07847-.196825.10403.191596.16843.45375.07522%201.04423-.03893%201.04423-.20196%200-.10923-.8942-.08495-1.235826.03353zm-.821399.15123c-.1283087.05034-.1920663.117-.1416309.14827.1249779.07748.6128369-.04592.6128369-.15496%200-.11209-.17462-.10963-.471206.00669zm4.753455%201.22708c0%20.0239-.07137.0707-.1586.1041-.08723.0335-.1586.0139-.1586-.0433%200-.0573.07137-.1042.1586-.1042s.1586.0195.1586.0434zm1.80203%201.6773c.06915.1119-.02966.1475-.40998.1475-.4747%200-.48485-.0076-.19318-.1443.39286-.1843.49072-.1848.60316-.0032zm-5.4348%201.0266c-.15765.0605-.16209.097-.01824.1521.1042.04.26074.0284.34797-.0257.20666-.1281-.05916-.23-.32973-.1264zm4.74298.0058c0%20.0541-.07137.0984-.1586.0984s-.1586-.0443-.1586-.0984c0-.054.07137-.0983.1586-.0983s.1586.0443.1586.0983zm6.36442%202.0403c.2012.1592.1938.1612-.0996.0278-.1745-.0794-.3469-.1567-.3834-.1721-.0363-.0153.0086-.0278.0996-.0278.0911%200%20.2636.0775.3834.1721z%22%20fill%3D%22%238cf09b%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); mask-image: url(data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20preserveAspectRatio%3D%22none%22%20height%3D%2216%22%20viewBox%3D%220%200%20100%2016%22%20width%3D%22100%25%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m54.634.136885c-1.919.069614-5.0237.176001-6.8991.23647-1.8755.06047-3.9809.132051-4.6788.158991-.6978.02704-3.5884.137262-6.4234.245026-2.835.107763-6.0467.238238-7.137.289958-4.7362.22457-6.2459.30087-6.7159.33971-.2753.02271-1.1429.09075-1.9279.15112-1.7385.13382-3.983.35034-5.789.55839-.7415.08535-1.8342.20983-2.4284.27649-.5941.06666-1.1614.17158-1.2609.23322-.0992.06156-.454.112-.7882.112-.3394%200-.6417.05427-.68484.1229-.04235.06765-.3521.1292-.68818.13687-.33607.00767-.78349.08397-.99411.16951-.21063.08564-.7015.16892-1.09103.18515-.84011.035-1.12321.12625-1.00141.3228.0663.10707-.03314.14434-.38492.14434-.50816%200-.7835.28356-.46645.48011.24377.15113-.18176.22428-.74828.12861-.69214-.1169-.70689-.31375-.02348-.31375.31245%200%20.56827-.04896.56827-.10884s-.10975-.0827-.24393-.05084c-.13798.03284-.28263-.00442-.33306-.08603-.06376-.10285-.16733-.11809-.36304-.0531-.15067.04995-.69658.0824-1.2133.07197-.74289-.01504-.9394.0119-.9394.12852%200%20.10442.13243.13785.45391.11445.32435-.0237.43346.00442.38192.09832-.03949.07227-.24377.13402-.45392.13736-.60491.00944-1.571427.15604-1.571427.23844%200%20.08839.799357.19802%201.443597.19802.51625%200%201.00474.36351.84201.62653-.05535.08937-.02014.2228.07835.29634.1732.1293.08692.45318-.12085.45417-.05615.00029-.31609.10697-.57779.23706l-.4758.23666.38445.25447c.27501.1821.31799.25456.15067.25456-.12863%200-.3015-.04051-.38445-.09006-.09183-.05497-.22205-.0414-.3337.0348-.14036.09597-.09992.18947.17399.40244l.35685.27748.55511-.21268c.3053-.11701.60316-.18288.662-.1465.24346.15093%201.71591.21228%201.79236.07472.0314-.05634-.04679-.18908-.17351-.29497-.20095-.16814-.27406-.1761-.57255-.06303-.50198.19026-.57176.06362-.07597-.13775.41252-.16754.43013-.16568.80681.08613.48659.32536.48421.46911-.01285.75858-.25694.14955-.36558.29507-.30658.4104.06709.13087.00888.17866-.21697.17866-.1697%200-.58492.07423-.92274.16508-.59539.16008-.70895.18141-1.12956.21327-.10896.00816-.19826.06431-.19826.12478%200%20.0643.16558.09016.40031.06233.22014-.02615.44155-.00609.49183.04435.05043.05054.19127.06814.31324.03913.12196-.029.36748-.01927.54559.02153.32037.07345.3199.0765-.03949.27689-.52101.29055-1.62694.54058-1.83122.41394-.11182-.06932-.35559-.03805-.77509.09961-.33655.11051-.748758.22661-.915924.25811-.230448.0434-.259631.0848-.120379.1712.271368.1682%201.705763.126%202.173323-.0639.41934-.1703.70942-.1357.70942.0848%200%20.1872-.42473.3778-.91989.4128-1.36445.0965-1.622811.1247-1.808851.1969-.112924.044-.329732.0672-.481673.0516-.1773164-.018-.2469436.0195-.1941292.1048.1032502.1667.9327332.2119%201.3500232.0734.24789-.0822.33544-.0708.41268.054.05376.0871.02268.205-.06931.262-.25884.1605-.04156.3747.38001.3747.23156%200%20.37953.0576.37953.1475%200%20.1841.06122.1838.64519-.0034.42664-.1368.47978-.1362.56828.0066.0536.0867.02315.2541-.06773.3721-.09103.1181-.20697.2949-.25788.3929-.05091.0982-.16796.1495-.25995.1142-.11483-.044-.10738-.1091.02379-.207.13449-.1005.14147-.1738.02363-.2469-.16336-.1013-.33877-.019-.96097.4506-.26645.2011-.09183.3752.29897.2982.16986-.0335.30388-.0135.30388.0452%200%20.0577-.08914.1117-.19826.1199-.10895.0082-.27517.02-.36922.0262-.09405.0061-.41046.1362-.70324.2889-.45773.2387-.50594.3037-.34448.4641.10325.1025.18778.2728.18778.3785%200%20.2246.1862.3104.85851.3957.60871.0772.63409.3033.05345.4759-.30753.0914-.43615.2037-.43615.381%200%20.233.03965.2468.54384.1881.90435-.1051%203.65054-.1676%206.75184-.1533%2013.17668.0605%2019.52958-.0057%2019.92148-.2074.1639-.0842.2765-.085.4357-.0031.1446.0744.8817.0962%202.2601.0667%201.8894-.0404%205.5958-.08%2019.0157-.2034%205.7839-.0532%2012.0155-.1544%2012.133-.197.0436-.016%201.8279-.0563%203.9651-.0899%202.1371-.0335%204.7065-.0808%205.7096-.1051%201.9423-.047%205.2369-.1183%209.1197-.1973%206.1573-.1252%207.6273-.1624%209.9771-.2524%202.6044-.0996%205.8492-.3314%206.1265-.4375.4284-.1642.7568-.8292.8488-1.7186.0532-.5138.1647-1.3544.2479-1.8682.0833-.5137.2638-2.06234.4011-3.44134.1374-1.379.3245-2.83912.4159-3.24471.4057-1.8018.3007-2.25261-.5726-2.4585-.3957-.09322-4.473-.30412-6.7391-.34847-.8287-.01622-2.6844-.07659-4.1237-.134015-5.02-.200582-13.07-.424369-19.8661-.552289-1.6365-.030776-3.2066-.074724-3.4893-.097535-.2827-.02291-1.5725-.046214-2.8659-.051818-1.9657-.008456-2.3376-.033137-2.2651-.150242.1048-.1693143-.2506-.1685266-5.2165.011604zm4.6391.014355c-.1525.024778-.4025.024778-.5551%200-.1525-.02468-.0277-.044934.2776-.044934s.4301.020254.2775.044934zm-42.9414%202.03571c0%20.02124-.1107.06499-.2461.09724-.1412.03353-.2048.01702-.1493-.03864.0931-.0935.3954-.13824.3954-.0586zm-3.491%201.38579c.1705.12733.1321.13244-.2977.03952-.5616-.12133-.6293-.18573-.1957-.18573.1637%200%20.3857.06578.4934.14621zm-3.49065.59358c-.11039.0824-.2333.12959-.27327.10491-.10991-.06823.11356-.25475.30515-.25475.10531%200%20.09326.05643-.03188.14984zm-.27533.552c.08834.03451.10674.11671.04108.18258-.16749.16804-.39699-.07167-.37621-.3928.01332-.20344.02966-.21189.09532-.04916.04362.10815.15147.22486.23981.25938zm-4.35267.30225c.03235.10363-.10658.16607-.43616.19605-.53734.04887-.63107-.07679-.20618-.27648.3337-.15673.57763-.12625.64234.08043zm3.6461.21503c-.11245.07571-.2295.12291-.25995.10491-.09405-.05545.14433-.24246.30895-.24246.08565%200%20.0636.06194-.049.13755zm-7.06096.61886c.15432.02497.36843.0233.47581-.00364.10737-.02694-.01888-.0473-.28057-.04533s-.34956.02399-.19524.04897zm6.93122.223c.12831.05034.19444.11553.14702.14493-.04742.02949-.22378-.01102-.3919-.08987-.33433-.15683-.13117-.20255.24488-.05506zm.63901.39713c0%20.05408-.07566.09832-.16796.09832-.09231%200-.12387-.04424-.06995-.09832.05393-.05408.12942-.09833.16796-.09833s.06995.04425.06995.09833zm.79301.68827c0%20.05408-.07566.09832-.16797.09832-.0923%200-.12386-.04424-.06994-.09832.05393-.05408.12942-.09832.16796-.09832s.06995.04424.06995.09832zm.95157%201.61183c0%20.02124-.107.06411-.2379.09528-.1308.03107-.2379.01367-.2379-.03864%200-.05241.1071-.09528.2379-.09528.1309%200%20.2379.01741.2379.03864zm-9.641686.1996c-.226007.07847-.196825.10403.191596.16843.45375.07522%201.04423-.03893%201.04423-.20196%200-.10923-.8942-.08495-1.235826.03353zm-.821399.15123c-.1283087.05034-.1920663.117-.1416309.14827.1249779.07748.6128369-.04592.6128369-.15496%200-.11209-.17462-.10963-.471206.00669zm4.753455%201.22708c0%20.0239-.07137.0707-.1586.1041-.08723.0335-.1586.0139-.1586-.0433%200-.0573.07137-.1042.1586-.1042s.1586.0195.1586.0434zm1.80203%201.6773c.06915.1119-.02966.1475-.40998.1475-.4747%200-.48485-.0076-.19318-.1443.39286-.1843.49072-.1848.60316-.0032zm-5.4348%201.0266c-.15765.0605-.16209.097-.01824.1521.1042.04.26074.0284.34797-.0257.20666-.1281-.05916-.23-.32973-.1264zm4.74298.0058c0%20.0541-.07137.0984-.1586.0984s-.1586-.0443-.1586-.0984c0-.054.07137-.0983.1586-.0983s.1586.0443.1586.0983zm6.36442%202.0403c.2012.1592.1938.1612-.0996.0278-.1745-.0794-.3469-.1567-.3834-.1721-.0363-.0153.0086-.0278.0996-.0278.0911%200%20.2636.0775.3834.1721z%22%20fill%3D%22%238cf09b%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); -webkit-mask-position: left bottom;} .underlined-color-blue:before {background-color: var(--main-color); background-image: linear-gradient(132deg, var(--main-color), var(--alt-color));} .underlined.highlight-animation:before {animation-duration: .5s; animation-iteration-count: 1; animation-timing-function: linear; animation-delay: 1s; animation-direction: normal; animation-fill-mode: forwards; animation-play-state: running; animation-name: highlight;} .side-contact-button {cursor: pointer;} .sidemenu, .sidecontact {position:fixed; top: 0; left: -100%; width: 80%; height: 100%; min-height: 100vh; padding: 0; z-index: 99998; -webkit-transition:all 0.5s cubic-bezier(1,0,.55,1); transition:all 0.5s cubic-bezier(1,0,.55,1); background-color: #167d8d; color: #fff; background-image: url(../img/noise.png); background-position: 0 0; background-size: auto;} .side-content {padding: 90px 20px 20px; position: relative; height: 100%; overflow-y: auto; overflow-x: hidden;} .side-content .form-title {font-size: 44px; margin-bottom: .5rem;} .sidemenu .menu-links {color:#fff;margin-top:30px} .sidemenu .menu-links .o-hidden {display:inline-block; position: relative;} .sidemenu .menu-links .main-menu {position:relative; color: #fff; counter-reset: listStyle; padding: 0} .sidemenu .menu-links .main-menu .sub-menu.sub-open{opacity:1!important;visibility:visible!important} .sidemenu .menu-links .main-menu >li {list-style: none; font-size: 24px; font-weight: 600; padding: 10px 10px 10px 0; width: 100%; max-width: 100%; opacity:1; visibility:visible; -webkit-transition: all .5s; transition: all .5s} .sidemenu .menu-links .main-menu> li span.nm {opacity:.8; font-size:11px; margin-right:10px;} .sidemenu ul.main-menu > li .link> .nm:before {counter-increment: listStyle; content: counter(listStyle, var(--listStyleCounterType)) ".";} .sidemenu .menu-links span, .sidemenu .menu-links .sub-link, .btn-curve span, .popup-video .vid-btn .icon, .splitting span, .about .items .more-stroke span, .content .img span, .quote-icon {display: inline-block;} .sidemenu .menu-links .main-menu > li .link {display: inline-block; -webkit-transform:translateY(45px);transform:translateY(45px);-webkit-transition:all .7s;transition:all .7s; cursor:pointer;} .sidemenu .menu-links .main-menu > li .link i {font-size:15px;margin-left:5px} .sidemenu.open .menu-links .main-menu > li .link {-webkit-transform:translateY(0); transform:translateY(0); -webkit-transition-delay:1s; transition-delay:1s;} .sidemenu .menu-links .main-menu > li:hover .link {color: var(--main-color); -webkit-transition-delay: 0s !important; transition-delay: 0s !important;} .sidemenu .menu-links .main-menu .sub-menu {position:absolute;top:0;left:0;opacity:0;visibility:hidden;-webkit-transition-delay:.2s;transition-delay:.2s} .sidemenu .menu-links .main-menu .sub-menu.sub-open>ul>li>div>.sub-link {-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition-delay:1s;transition-delay:1s} .sidemenu .menu-links .main-menu .sub-menu li {color:#eee;font-size:20px;font-weight:400;letter-spacing:1px;padding:8px 10px;width:100%;max-width:100%} .sidemenu .menu-links .main-menu .sub-menu li:hover {color:#fff} .sidemenu .menu-links .main-menu .sub-menu>ul>li>div>.sub-link {-webkit-transform:translateY(45px);transform:translateY(45px);-webkit-transition:all .7s;transition:all .7s} .sidemenu .menu-links .main-menu .sub-menu li .sub-link.back {color:#fff;font-size:20px;font-weight:600;cursor:pointer} .sidemenu .menu-links .main-menu .sub-menu li .sub-link.back i {margin-left:10px} .sidemenu .menu-links .main-menu .sub-menu li .sub-link em {font-size:13px;font-weight:300;margin-left:10px} .sidemenu .contact-info:after {content:''; width:1px; height:0; background:#ffffff7a; position:absolute; left:-40px; top:-170px; -webkit-transition:all .7s; transition:all .7s} .sidemenu .contact-info .item {font-size: 16px; -webkit-transform:translateY(-30px); transform:translateY(-30px); opacity:0; -webkit-transition:all .7s; transition:all .7s} .sidemenu .contact-info .item:last-of-type {margin-bottom:0} .sidemenu.open .contact-info:after {height:100vh; -webkit-transition-delay:1s; transition-delay:1s} .sidemenu.open .contact-info .item {-webkit-transform:translateY(0); transform:translateY(0); opacity:1; -webkit-transition-delay:1s; transition-delay:1s;} .sidemenu .contact-info a:hover {color: var(--main-color);} .sidemenu .contact-info-bottom:after {display: none;} body:has(.sidemenu.open) .sidemenu-rest, body:has(.sidecontact.open) .side-contact-rest {width: 30%; z-index: 998; position: absolute; right: 0; top: 0; height: 100vh; overflow: hidden;} body:has(.sidemenu.open) header {z-index: 99999; transition-delay: 0s;} body:has(.sidecontact.open) .sidemenu-rest {width: 20%!important;} .main-content {background-color: var(--bg-color); color: var(--white-color); position: relative; background-image: url(../img/noise.png); background-position: 0 0; background-size: auto; z-index: 1; box-shadow: 0 10px 30px #00000030;} .move-right {transform: translateX(0%); -webkit-transition: all 0.5s cubic-bezier(1,0,.55,1) .7s; transition: all 0.5s cubic-bezier(1,0,.55,1) .7s; transition-delay: .7s;} .move-right.active {transform: translateX(50%); -webkit-transition: all 0.5s cubic-bezier(1,0,.55,1) .4s; transition: all 0.5s cubic-bezier(1,0,.55,1) .4s; transition-delay: .4s; opacity: .3; overflow: hidden; pointer-events: none;} /*.sidemenu.open ~ .move-right, .sidecontact.open ~ .move-right {transform: translateX(50%); -webkit-transition: all 0.5s cubic-bezier(1,0,.55,1) .4s; transition: all 0.5s cubic-bezier(1,0,.55,1) .4s; transition-delay: .4s; opacity: .3; overflow: hidden; pointer-events: none;}*/ /*body:has(.sidemenu.open), body:has(.sidecontact.open) {overflow: hidden;}*/ body:has(.sidemenu.open) .cursor {background: var(--main-color);} .sidemenu:before, .sidecontact:before {position: absolute; content: ''; left: 92%; top: calc(50% - 70%); height: 150%; width: 0; border-radius: 200%; background-color: #167d8d; background-image: url(../img/noise.png); z-index: -1;} .sidemenu.open:before, .sidecontact.open:before {animation: sidebarFromLeft .7s cubic-bezier(0.3, 0, 0.7, 1) .4s;} .sidecontact.open .contact-form, .sidecontact.open .contact-form-bottom, .sidecontact.open .close-button {animation: sidebarFromLeft2 .7s cubic-bezier(0.3, 0, 0.7, 1) .4s;} .sidecontact.open .sidecontact-logo {animation: sidebarFromLeftLogo 0.9s cubic-bezier(0.3, 0, 0.7, 1) .4s;} .sidecontact {width: 90%; background-color: #346067;} body:has(.sidecontact.open) .side-contact-rest {width: 20%; z-index: 999;} .sidecontact:before {background-color: #346067;} .close-button {position: absolute; top: 120px; right: -16px; z-index: 999999; cursor: pointer; text-align: right;} .close-button svg {width: 30px; height: 30px;} .sidecontact-logo {width: 208px; max-height: 46px; position: absolute; top: 30px; transform-origin:left center;} .sidecontact .contact-intro:after, .sidecontact .contact-form:after {content: ''; height: 1px; width: calc(100% + 60px); left: -30px; position: absolute; bottom: 0; background: #ffffff3b;} .sidecontact .lead p {font-size: 18px; margin-bottom: 10px;} .sidecontact .lead .required {font-size: 14px;} .sidecontact .lead p > a:hover {color: var(--main-color);} .sidecontact input.form-control, .sidecontact textarea.form-control {background-color: transparent; font-size: 30px; border: 0; padding: 0px 10px; color: var(--dark-color); font-family: 'Montserrat'; letter-spacing: -1.5px;} .sidecontact .form-group:after {content: ''; width: 100%; height: 20px; border: 1px solid #fff; display: block; position: absolute; border-top: 0; border-radius: 0 0 8px 8px; bottom: 0;} .sidecontact .contact-form h3, .sidecontact .contact-form-bottom h3, .sidecontact input.form-control, .sidecontact textarea.form-control {font-size: 20px;} .sidecontact .form-group {position: relative;} .sidecontact .label-wrap {position: absolute; width: 100%; transition: all .15s ease-out; pointer-events: none; bottom: 10px; left: 10px; text-transform: uppercase;} .sidecontact .label-wrap label {font-size: 14px;} .sidecontact .label-wrap label > span {font-size: 15px; text-transform: none; color: #ffffffb0; font-weight: 300;} .sidecontact .form-group:focus-within .label-wrap, .sidecontact .form-group.has-value .label-wrap {-webkit-transform: translateY(calc(-150% - 0px)); transform: translateY(calc(-150% - 0px)); color: #ffffff80;} /*.sidecontact .form-group:focus-within label, .sidecontact .form-group.has-value label {-webkit-transform: translateX(-100%); transform: translateX(-100%); color: #bbb; font-size: 14px;}*/ .sidecontact .form-group.has-value textarea + .label-wrap, .sidecontact .form-group:focus-within textarea + .label-wrap {bottom: 100%; transform: none;} .sidecontact .form-group:focus-within label > span, .sidecontact .form-group.has-value label > span {opacity: .5;} .sidecontact .form-group .required-label {position: absolute; font-size: 15px; margin-top: 4px; color: var(--main-color); top: 100%; left: 0;} .form-control:focus {background-color: transparent; box-shadow: none;} .sidecontact .textarea {display: block; width: 100%; overflow: hidden; resize: vertical; min-height: 45px; line-height: 1.2em;} .text-box-item {z-index: 0; width: 100%; grid-column-gap: 1rem; grid-row-gap: 1rem; border-right: .0625rem solid #48424e; border-radius: 2rem; flex-direction: column; padding: 2rem 1.5rem 2rem 2rem; display: flex; position: relative; box-shadow: -3px 0 10px -5px #000;} .text-box-item-content {z-index: 1; grid-column-gap: 1rem; grid-row-gap: 1rem; flex-direction: column; display: flex; position: relative;} .text-box-item:before {content: ''; z-index: -1; width: 100%; height: 100%; opacity: 1; background-image: linear-gradient(135deg,rgba(214,163,228,0),rgba(214,163,228,.07)); border-radius: 2rem; position: absolute; top: 0%; bottom: 0%; left: 0%; right: 0%;} .text-box-item .testimonials-name {font-size: 1.75rem; font-family: 'Montserrat', sans-serif; margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; color: #fff;} .services-wide .text-box-item .text-box-item-heading h2 {font-size: 18px; font-weight: 400; margin-bottom: 0; line-height: 26px;} .logo-back {opacity: .01; display: block; position: absolute; z-index: 1; top: 83%; pointer-events: none; max-width: 100vw; width: 100vw; height: auto;} .max-width-small {max-width: 80%; margin: 0 auto;} .cards {padding-bottom: calc(var(--numcards) * var(--card-top-offset)); margin-bottom: var(--card-margin);} #card_1 {--index: 1;} #card_2 {--index: 2;} #card_3 {--index: 3;} #card_4 {--index: 4;} #card_5 {--index: 5;} #card_6 {--index: 6;} #card_7 {--index: 7;} .sticky-card {/*position: sticky;*/ top: 40px; padding-top: calc((0 + var(--index)) * var(--card-top-offset)); height: var(--card-height); max-width: 100vw;} .card-content {transform-origin: 50% 0%; will-change: transform;} .card-content:before {background-image: linear-gradient(135deg,rgb(26 111 123),rgba(214,163,228,.07));} .cards {list-style: none; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(var(--numcards), var(--card-height)); gap: var(--card-margin);} .card-content > div {grid-area: text; width: 90%; place-self: center; text-align: left; display: grid; gap: 1em; place-items: start; height: 100%;} .card-content svg {position: absolute;} @keyframes scale {to {transform: scale(calc(1.1 - calc(0.1 * var(--reverse-index)))); opacity: .2;}} @keyframes scale2 {to {transform: scale(calc(1.1 - calc(0.1 * var(--reverse-index2)))); opacity: .2;}} .cards {--numcards: 4; view-timeline-name: --cards-element-scrolls-in-body;} .cards-qualification {--numcards2: 7; view-timeline-name: --cards-element-scrolls-in-body; padding-bottom: calc(var(--numcards) * var(--card-top-offset)); grid-template-rows: repeat(var(--numcards2), var(--card-height)); padding-top: calc((0 + var(--index)) * 10);} /*.card-content {--start-range: calc(var(--index0) / var(--numcards) * 100%); --end-range: calc((var(--index)) / var(--numcards) * 100%); animation: linear scale forwards; animation-timeline: --cards-element-scrolls-in-body; animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range); justify-content: center;} .card-content-qualification {--start-range: calc(var(--index0) / var(--numcards2) * 100%); --end-range: calc(var(--index) / var(--numcards2) * 100%); animation: linear scale2 forwards; animation-timeline: --cards-element-scrolls-in-body; animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range); justify-content: center;}*/ .card-content p, .text300 {font-size: 18px; color: #ffffffa3; font-weight: 300;} .intro-icon-boxes .text-box-item-content {text-align: center;} .intro-icon-boxes .text-box-item-content lord-icon {margin: 0 auto; width: 100px; height: 100px;} .intro-icon-boxes h3 {text-transform: uppercase; font-size: 24px;} .job-slider {background: #0000000d; box-shadow: rgb(28 28 28 / 25%) 0px 30px 60px -12px inset, rgba(28, 28, 28, 0.3) 0px 30px 60px -12px inset;} .job-slider .carousel {position: relative; width: 100%; height: 136px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);} .job-slider .carousel .carousel-item {position: absolute; font-size: 2rem; width: 100%; height: 100%; cursor: grab; padding: 20px 0; display: flex; justify-content: center; align-items: center; transition: initial;} .job-slider .slide {width: auto; padding: 0 40px; white-space: nowrap; text-align: center; height: auto; color: #fff; font-size: 24px; line-height: inherit;} .theme-tooltip {border-bottom: 1px dashed #ffffff47; cursor: help;} .testimonials {padding-top: 20px; z-index: 1; margin-bottom: 70vh;} .testimonials .sticky-card {height: auto; will-change: transform, opacity;} .testimonials .card-content > div {min-height: 50vh;} .testimonials .card-content img {max-width: 150px; filter: brightness(.5) invert(.5); margin-left: 16px; width: auto; height: auto;} .testimonials #card_4 .card-content img {max-width: 80px;} .testimonial-link {font-size: 19px;} .testimonials .title-dot {position: relative;} .testimonials .title-dot:before {position: absolute; content: '?'; bottom: 32px; left: 0; display: inline-block; width: 50px; height: 44px; overflow: hidden; font-size: 60px; color: #fff; transform: rotate(13deg);} .services-wide {background: linear-gradient(180deg, transparent, #000000a6, transparent); overflow: hidden;} .services-wide:before {content: ''; background-position: right center; background-repeat: no-repeat; background-size: 834px; position: absolute; right: -212px; bottom: 0; width: 100%; height: 100%; background-image: url(../img/bg/shine-back400.png); background-image: image-set( url(../img/bg/shine-back400.avif) type("image/avif"), url(../img/bg/shine-back400.png) type("image/png") ); opacity: .4;} .services .services-intro p {font-size: 19px; margin-bottom: 32px;} .services .service-card:hover .text-box-item {transform: scale(1.05);} .services .service-card .text-box-item {transition: all .3s ease-out;} .services .solution-img {width: 100px; filter: invert(1) hue-rotate(186deg) brightness(1.2);} .qualification {background-image: linear-gradient(0deg, var(--dark-color), 90%, transparent); padding-top: 100px; padding-bottom: 80vh;} .qualification .card-content {justify-content: flex-start; padding: 24px 16px; border-right: none; min-height: 450px; height: auto;} .qualification .card-content > div {display: flex; gap: initial;} .qualification .sticky-card {padding-left: 1rem; padding-right: 1rem; height: auto; will-change: transform, opacity;} .qualification .card-content h3 {text-transform: uppercase; letter-spacing: -2px; font-size: 26px; word-spacing: 3px; margin-bottom: 32px; text-align: center;} .qualification .card-content p {font-size: 18px; text-align: center; line-height: 1.45;} .qualification .service-top-wrap .service-img-wrap img {border-top-right-radius: 20px; width: 100%; height: auto;} .qualification #card_2 .service-top-wrap .service-img-wrap img {width: auto; height: 100%;} .qualification .text-box-item:before {background-color: var(--bg-color); background-image: url(../img/noise.png);} .qualification .service-top-wrap .service-img-wrap .monitor-img img {height: auto;} .qualification .monitor-img:before {content: ''; background-image: url(../img/services/monitor-empty.png); background-image: image-set( url(../img/services/monitor-empty.webp) type("image/webp"), url(../img/services/monitor-empty.png) type("image/png") ); position: absolute; right: 0; top: -20px; display: block; background-repeat: no-repeat; z-index: 1;} .topnav .menu-icon:hover .word .char, .footer .splitting:hover .char {-webkit-animation: fadeInUp2 0.3s cubic-bezier(0.3, 0, 0.7, 1) both; animation: fadeInUp2 0.3s cubic-bezier(0.3, 0, 0.7, 1) both; -webkit-animation-delay: calc(30ms * var(--char-index)); animation-delay: calc(30ms * var(--char-index));} .fadeInRight2 {-webkit-animation-name: fadeInRight2; animation-name: fadeInRight2;} .splitting.animated .char{-webkit-animation: fadeInUp2 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; animation: fadeInUp2 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; -webkit-animation-delay: calc(30ms * var(--char-index)); animation-delay: calc(30ms * var(--char-index));} .splitting.animated .word{-webkit-animation: fadeInUp2 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; animation: fadeInUp2 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; -webkit-animation-delay: calc(30ms * var(--word-index)); animation-delay: calc(30ms * var(--word-index));} .splitting .whitespace {width: 7px;} .splitting.txt.animated .char, .splitting.txt.animated .word{-webkit-animation: fadeIn2 0.3s cubic-bezier(0.3, 0, 0.7, 1) both; animation: fadeIn2 0.3s cubic-bezier(0.3, 0, 0.7, 1) both; -webkit-animation-delay: calc(10ms * var(--char-index)); animation-delay: calc(10ms * var(--char-index));} .splitting.txt .whitespace {width: 5px;} .section-padding {padding: 50px 0;} /*.section-title .word {-webkit-animation: fadeInUp2 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; animation: fadeInUp2 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; -webkit-animation-delay: calc(30ms * var(--word-index)); animation-delay: calc(30ms * var(--word-index));}*/ .reveal-top, .reveal-top-portfolio {position: relative; transition: 1s all cubic-bezier(0.22,0.61,0.36,1);} .footer-reveal, .reveal-left {position: relative; transform: translateY(150px); opacity: 0; transition: 1s all ease;} .reveal.active, .footer-reveal-active {transform: translateY(0); opacity: 1;} .reveal-delay-1 {transition-delay: .1s;} .reveal-delay-2 {transition-delay: .2s;} .reveal-delay-3 {transition-delay: .3s;} .reveal-delay-4 {transition-delay: .4s;} .reveal-delay-5 {transition-delay: .5s;} .reveal-delay-6 {transition-delay: .6s;} .reveal-delay-7 {transition-delay: .7s;} .reveal-delay-8 {transition-delay: .8s;} .reveal-delay-9 {transition-delay: .9s;} .reveal-delay-10 {transition-delay: 1s;} .z-dot {position: relative;} .z-dot span {color: #fff!important;} .reveal-dot-top:after {content: ''; background-color: transparent; width: 13px; height: 13px; display: inline-block; position: absolute; left: 2px; bottom: 13px; border-radius: 50%; background-image: linear-gradient(90deg, #01c6d9, #17737e);} .reveal-dot {transition: 1s all cubic-bezier(0.22,0.61,0.36,1) 2s;} .reveal-dot-top {transform: translateY(0); opacity: 1; transition: 1s all cubic-bezier(0.22,0.61,0.36,1) 2s;} .badge {display: inline-block; border-radius: 50%; padding: 5px; margin: 10px; border: 4px double var(--main-color); position: absolute!important; background: #292929; top: 4%; right: 8%; z-index: 99; will-change: transform; -webkit-transition: background ease .2s, border ease .4s; -moz-transition: background ease .2s, border ease .4s; -ms-transition: background ease .2s, border ease .4s; -o-transition: background ease .2s, border ease .4s; transition: background ease .2s, border ease .4s;} .badge:before {content: ""; position: absolute; width: 60%; height: 60%; border: 1px dashed #777; border-radius: 50%; top: 20%; left: 20%; z-index: -1; background: #2b2b2b; -webkit-transition: background ease .2s, border ease .4s; -moz-transition: background ease .2s, border ease .4s; -ms-transition: background ease .2s, border ease .4s; -o-transition: background ease .2s, border ease .4s; transition: background ease .2s, border ease .4s;} .badge:after {content: ""; width: 110%; height: 110%; position: absolute; border-radius: 50%; top: -5%; left: -5%; z-index: -999; border: 2px dotted #fff; animation: spin 60s linear reverse infinite; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.03), 0 4px 8px rgba(0, 0, 0, 0.03), 0 8px 16px rgba(0, 0, 0, 0.03), 0 16px 32px rgba(0, 0, 0, 0.03), 0 32px 64px rgba(0, 0, 0, 0.03); -webkit-transition: border ease .4s; -moz-transition: border ease .4s; -ms-transition: border ease .4s; -o-transition: border ease .4s; transition: border ease .4s;} .badge svg {transform: rotate(7deg); width: 100px; height: 100px;} .badge .circleText {position: relative; transform-origin: 150px 150px; animation: spin 60s linear infinite;} .badge-title {fill: #fff; font-size: 60px; font-weight: 700; -webkit-transition: fill ease .4s; -moz-transition: fill ease .4s; -ms-transition: fill ease .4s; -o-transition: fill ease .4s; transition: fill ease .4s;} .badge-border {fill: var(--main-color); font-size: 27px; font-weight: 500; -webkit-transition: fill ease .4s; -moz-transition: fill ease .4s; -ms-transition: fill ease .4s; -o-transition: fill ease .4s; transition: fill ease .4s;} .badge-logo {position: absolute; display: block; transform: translateX(-50%) translateY(-50%) rotate(14deg); width: 36px; max-height: 36px;} .text > .lighten > div, .text > .lighten > div span div {background: linear-gradient( to right, rgb(255 255 255) 50%, #7b7b7b26 50% ); background-size: 200% 100%; background-position-x: 100%; color: transparent; background-clip: text; -webkit-background-clip: text; line-height: 1.2; font-size: 26px; text-transform: uppercase; font-weight: 600; letter-spacing: -2.4px; word-spacing: 7px; will-change: background-position-x;} .about-me .text > .lighten > div, .about-me .text > .lighten > div span div {font-size: 30px;} .text > .lighten .span-img, .location .span-img {width: 0.95em; height: 0.95em; background-image: url(../img/aboutMe.webp); background-position: 50%; background-size: cover; border-radius: 1vw; display: inline-block; margin-right: 16px; z-index: 1; position: relative; cursor: pointer;} .text > .lighten .span-img2 {background-image: url(../img/about/aboutMe2-thumb.webp);} .text > .lighten .span-img3 {background-image: url(../img/about/aboutMe3-thumb.webp);} .text > .lighten .span-img .about-hover-img, .location .span-img .about-hover-img {z-index: 2; position: relative;} .text > .lighten .span-img img, .location .span-img img {position: absolute; opacity: 0; transition: all .5s ease 0.7s; left: -175px; top: -175px; width: 400px; height: 400px; cursor: pointer; box-shadow: 0 0 150px #000; border-radius: 1vw; filter: none; transform-style: preserve-3d; transform: scale(0) perspective(1000px);} .text > .lighten .span-img:active img, .text > .lighten .span-img:active img:active, .location .span-img:active img {opacity: 1; transform: scale(.5); border-radius: 50%; pointer-events: auto;} .text > .lighten .span-img:active img, .location .span-img:active {transition: none;} .info-text .lighten > div, .info-text .lighten > div span div {letter-spacing: -1.5px; word-spacing: 5px; font-weight: 500; text-transform: none;} .text > .lighten, .info-text > .lighten {font-family: 'Montserrat', sans-serif; line-height: 1.2em;} .brands .row {border-color: var(--border-light-color)!important;} .brands .figure-logo {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 260px; padding: 0 30px; cursor: pointer;} .brands :is(.figure-logo:nth-of-type(1), .figure-logo:nth-of-type(2), .figure-logo:nth-of-type(3)) { border-right: 1px solid var(--border-light-color); -webkit-transition: border 0.4s ease; -moz-transition: border 0.4s ease; -ms-transition: border 0.4s ease; -o-transition: border 0.4s ease; transition: border 0.4s ease;} .brands .figure-logo img {max-width: 100%; max-height: 50px; filter: grayscale(1) brightness(0) invert(.6); transition: all .4s ease-in-out; height: auto; width: auto;} .brands .figure-logo.modellina-logo img {height: 80px; max-height: 80px; width: auto;} .brands .figure-logo p {text-align: center; height: 0; transition: all .5s; overflow: hidden; transform: translate(0); font-family:Suisse,sans-serif; opacity: .7; font-size: 15px; font-weight: 300;} .brands .figure-logo:hover p {height: 10rem; padding-top: 1.5rem; margin-bottom: 0;} .brands .figure-logo:hover img {filter: grayscale(1) brightness(0) invert(.8);} .brands .figure-logo p > span {padding-top: 8px; font-size: 15px; opacity: 1; color: var(--main-color);} .about-me {background-image: url(../img/bg/about-me-back6.avif); background-position: top center; background-repeat: no-repeat; background-size: cover; padding: 50px 0 100px;} .about-me.intro {height: auto;} .about-me .img-wrap {top: 0; padding: 0; pointer-events: none;} .about-me .img-wrap img {width: 100%;} .about-me .about-text {text-align: center; letter-spacing: -.02em; font-size: 4.55em; font-weight: 600; line-height: 1; text-transform: uppercase;} .about-me .senior-shadow {text-shadow: rgba(255, 255, 255, 0.51) 0px 0px 1px;} .about-me .text img {width: 60px; height: 60px;} .about-me .zzz {position: relative;} .about-me .zzz:after {content: url('../img/crticaZ.svg'); position: absolute; top: 23px; left: 3px; width: 90%; height: 100%; display: inline-block; line-height: 0; visibility: visible; transition: 1s all cubic-bezier(0.22,0.61,0.36,1) 2s;} .about-me .word > span[data-char="."] {color: var(--main-color);} .about-me:after {content: ''; background-position: center; background-repeat: no-repeat; background-size: 768px; position: absolute; left: -273px; top: 39px; width: 768px; height: 768px; background-image: url(../img/bg/shine-back400.png); background-image: image-set( url(../img/bg/shine-back400.avif) type("image/avif"), url(../img/bg/shine-back400.png) type("image/png") ); opacity: .2; pointer-events: none;} .weather-wrap {width: auto!important; min-width: unset!important;} .weather-wrap .ww-box {padding: 0!important;} .weather-wrap .ww_current .ww_temp {color: #ffffffeb!important; text-shadow: rgba(255, 255, 255, 0.51) 0px 0px 1px!important; font-size: 29px!important; font-weight: 600!important; letter-spacing: -1px!important; font-family: 'Montserrat', sans-serif;} .weather-wrap.reveal.active .ww_current .ww_temp {background-position: 0; transition: transform .3s, background-position 1s!important;} .resize-sensor, .weather-wrap .ww_source, .weather-wrap .ww_cond, .ww_icon {display: none!important;} .location {padding-top: 200px; background: linear-gradient(360deg, #295b73, transparent);} .location .scroll-image {width: 100px; height: 100px; border-radius: 1vh; display: block; position: relative; backdrop-filter: blur(22px); mask-image: url(/img/shape/shape11.svg); -webkit-mask-image: url(/img/shape/shape11.svg); mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;} .location .scroll-image img, .location .scroll-image video {position: absolute; width: 100px; height: 100px; object-fit: cover; filter: grayscale(1) brightness(0.9); transition: border-radius .05s ease, width .3s ease-in, height .3s ease-in; left: 0; bottom: 0; top: 0;} .location-img-offset {padding-top: 200px;} .video2 {width: 100%; height: 100%; object-fit: cover;} .video-container2:after {content: ''; background-image: url("data:image/svg+xml,%3Csvg width='80px' height='80px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.4086 9.35258C23.5305 10.5065 23.5305 13.4935 21.4086 14.6474L8.59662 21.6145C6.53435 22.736 4 21.2763 4 18.9671L4 5.0329C4 2.72368 6.53435 1.26402 8.59661 2.38548L21.4086 9.35258Z' fill='%2308b1c4'/%3E%3C/svg%3E"); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; width: 50px; height: 50px; background-size: 40px; background-repeat: no-repeat; background-position: center; pointer-events: none;} .video-container2:before {content: ''; background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' id='icon_sound' viewBox='144 46.4 700 699.6'%3E%3Cstyle%3E.st0%7Bfill:%2308b1c4%7D%3C/style%3E%3Cg id='Layer_10'%3E%3Cpath class='st0' d='M671.3 571c-5.2 0-10.3-1.5-14.5-4.5-11.2-8-13.9-23.6-5.8-34.9l.1-.1c28.1-39.6 43.1-87 43-135.5-.3-49.8-16.7-98.2-46.8-138-8.4-11-6.2-26.8 4.9-35.1 11-8.4 26.8-6.2 35.1 4.9 74.1 97.9 75.8 232.5 4.3 332.3-4.7 6.6-12.2 10.7-20.3 10.9z'/%3E%3Cpath class='st0' d='M769 646c-3.8 0-7.6-.8-11-2.5-12.3-6.1-17.4-20.9-11.5-33.3 65-135.4 65-293.1 0-428.5-6.8-12-2.6-27.3 9.4-34.1 12-6.8 27.3-2.6 34.1 9.4.6 1 1.1 2.1 1.5 3.2 33.9 71.9 51.8 150.3 52.5 229.8.8 83.6-17.6 166.3-53.8 241.8-3.9 8.2-12 13.7-21.2 14.2z'/%3E%3C/g%3E%3Cpath d='M608 48.7c-8.1-3.8-17.7-2.9-25 2.3L285.8 271H169c-13.8 0-25 11.2-25 25v225c0 13.8 11.2 25 25 25h117.5L583 741.8c4.1 2.7 8.8 4.2 13.7 4.3 4.2 0 8.3-1 12-3 8-4.4 13-12.8 13-22V71c0-9.4-5.3-18-13.7-22.3z' style='fill:%2308b1c4' id='Layer_13'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 30px; height: 30px; display: block; position: absolute; left: 5%; top: 30%; z-index: 9; pointer-events: none; transition: opacity .5s ease 0s, transform .7s ease 0s; opacity: 0; transform: scale(0); filter: drop-shadow(1px 1px 6px black);} .video-container2:hover:before {opacity: 1; transform: scale(1); transition: opacity .5s ease 1s, transform .7s ease 1s;} .align-items-end .video-container2:before {right: 5%; left: auto;} .align-items-end .video-container2:hover:before {transform: scale(-1);} .location .scroll-image:hover {mask-image: none; z-index: 2;} .location .scroll-image:hover img, .location .scroll-image img:hover, location .scroll-image:hover video, .location .scroll-image video:hover {width: 360px; height: 360px; z-index: 2; cursor: pointer; border-radius: 50% 50% 40% 35%; transition: border-radius .05s ease, width .2s ease-in, height .2s ease-in; box-shadow: rgb(0 0 0 / 23%) 0px -11px 28px, rgb(0 0 0 / 21%) 0px 10px 10px; filter: none; top: 50%; transform: translateY(-50%); overflow: hidden;} .location .align-items-end .scroll-image:hover img, .location .align-items-end .scroll-image:hover video {right: 0; left: auto;} .location .scroll-image.video-container2:hover:after {opacity: 0;} .location .scroll-image.video-container2:hover video {overflow: hidden;} .clear-css {transform: none!important;} .city img {width: 16.6%;} .logo-move { background-image: linear-gradient(180deg, var(--dark-color), transparent); .landing-wrapper {width: 99.9%; height: 140px; padding:0; position: relative; overflow:hidden; cursor:pointer;} .landing-inner-content {width: 1000px; height: 140px; display: grid; grid-auto-columns: 1fr; grid-column-gap: 0px; grid-template-columns: repeat(8, 1fr);} .box-slide {position: relative; width: 24vw; display: flex; height: 140px; justify-content: center; align-items: center; border-style: solid; border-width: 1px; border-color: #22222b; overflow:hidden;} .box-slide img {max-height: 60%; max-width: 60%; width: 50%; height: auto; filter: brightness(.6) grayscale(1); transition: all .5s ease-out;} .box-slide .bootstrap-logo {filter: brightness(.9) grayscale(1);} .box-slide:hover img {filter: brightness(1) grayscale(0);} } .faq {padding-top: 100px; position: relative; z-index: -1;} .accordion-item {background-color: transparent; color: #fff; border: none; margin-top: -1px; /*border-top: 1px solid var(--border-light-color); border-bottom: 1px solid var(--border-light-color);*/ border-radius: 0;} .accordion-button {font-size: 19px; font-weight: 500; font-family: 'Montserrat', sans-serif; padding: 1.5rem 50px 1.5rem 0; display: inline-block;} .accordion-button, .accordion-button:not(.collapsed) {background-color: transparent; color: #fff; box-shadow: none;} .accordion-button:focus {box-shadow: none;} .accordion-item:after {content: ""; position: absolute; top: 0; left: 50%; width: 100%; height: 100%; transform: translate(-50%); border-top: 1px solid var(--border-light-color); border-bottom: none; transition: width .1s, background-color .2s ease-in .1s; transition-timing-function: ease; pointer-events: none; z-index: -1;} .accordion-item:last-of-type:after {border-bottom: 1px solid var(--border-light-color);} .accordion-item.active:after {border-top: 1px solid var(--border-light-color); border-bottom: 1px solid var(--border-light-color); background-color: #00000029; width: 100vw;} .accordion-item.active {border: none;} .accordion-body {padding: 0 0 2rem;} .accordion-item-no-border:after {border-bottom: none;} .accordion-button:after {display: none;} .accordion-mark {position: absolute; right: 0; top: 50%; transform: translateY(-50%); flex-shrink: 0; cursor: pointer; width: 2.5rem; height: 2.5rem; border: 1px solid var(--border-light-color); border-radius: 50%; cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: center; pointer-events: none;} .accordion-mark:before, .accordion-mark:after {content: ''; position: absolute; width: 8px; height: 1px; background-color: #fff; transition: transform .5s, background-color .3s;} .accordion-mark:after {transform: rotate(90deg);} .accordion-item.active .accordion-mark:before, .accordion-item.active .accordion-mark:after {transform: rotate(180deg); transform: rotate(180deg);} .accordion-item .faq-qm {display: inline-block; transition: all .35s ease-in .4s; margin-left: 4px;} .accordion-item .accordion-body {height: auto;} .accordion-item .accordion-body .accordion-content {font-size: 15px; transition: all .5s cubic-bezier(0.26,0.69,0.37,0.96); font-weight: 300; color: var(--main-color);} .accordion-item.active .accordion-body .accordion-content {transform: translateY(0); opacity: 1;} .accordion-item .underlined.highlight-animation:before {animation-delay: 0s;} .accordion-content a {cursor: pointer;} .blog {background-image: linear-gradient(0deg, #101010, 80%, var(--bg-color));} .blog:before {background-image: url(../img/noise.png);} .blog div a {border-bottom: 1px solid;} .blog div a:hover {border-bottom-color: transparent;} .blog lord-icon {width: 100px; height: 100px;} .breadcrumb {transform-origin: center;} .breadcrumb ul {color: #657281; font-family: 'Montserrat', sans-serif; gap: 20px;} .breadcrumb ul li {font-size: 15px; position: relative;} .breadcrumb ul li:before {content: ""; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); border-radius: 50%; height: 5px; width: 5px; background: #e4e4e430; transition: .2s ease-out .2s;} .breadcrumb ul li:last-child:before {display: none;} .breadcrumb ul li a:hover {color: #fff;} .footer {position: fixed; height: 100vh; font-size: 20px; width: 100%; bottom: 0; left: 0; padding-top: 40px; background-image: linear-gradient(180deg, var(--dark-color), transparent); font-size: 1rem; z-index: -1;} .footer:before {content: ''; background-position: right center; background-repeat: no-repeat; background-size: 768px; position: absolute; right: -243px; top: 0; width: 200%; height: 200%; background-image: url(../img/bg/shine-back400.png); background-image: image-set( url(../img/bg/shine-back400.avif) type("image/avif"), url(../img/bg/shine-back400.png) type("image/png") ); opacity: .4; z-index: 2; pointer-events: none;} .footer-spacer {height: 100vh; position: relative; bottom: 0; left: 0; right: 0; pointer-events: none;} .footer * {will-change:transform;} .footer .footer-about {font-size: 20px; font-family: 'Montserrat', sans-serif;} .footer .footer-about p {font-weight: 200; color: #fff8; letter-spacing: -.3px;} .footer .footer-about a {transition: .25s ease-out;} .footer .footer-about a:hover {color: var(--main-color);} .footer .footer-about-link:before {height: 1px; top: 100%; background-color: #ffffff30; transition: transform .35s ease-out;} .footer .footer-about-link:hover:before {transform: scale(0);} .footer-wrap {background-color: var(--main-color); flex-direction: column; justify-content: space-between; padding-top: 4em; display: flex; position: fixed; bottom: 0; left: 0; right: 0; background-image: url(../img/noise.png), linear-gradient(180deg, var(--dark-color), #00000030); height: 100vh;} .footer .footer-links li .cursor-link {text-transform: uppercase; padding: 7px 0; display: inline-flex; transition: .25s ease-out; font-size: 17px;} .footer .footer-links li:hover a {color: var(--main-color);} .footer .footer-links li:first-child a {padding-top: 0;} .footer .footer-grid {grid-template-columns: 1fr; grid-template-rows: auto; grid-column-gap: 1em; grid-row-gap: 0; align-content: start; align-items: start; grid-auto-columns: 1fr;} .footer .footer-grid p {color: #fff8; font-size: 18px;} .footer .footer-contact {border-top: 2px solid #fff4; border-bottom: 2px solid #fff4; padding: 5% 0;} .footer .footer-contact h3 {font-size: 26px; font-weight: 700; letter-spacing: -1px; text-shadow: 0px 8px 8px hsla(189, 100%,calc(28% - 10%),calc(100% - 10%));} .footer-bottom {font-size: 1rem; color: #fff8;} .footer-bottom a:hover {color: #fff;} .icon-scroll-line {width: 1px; position: fixed; will-change: transform; bottom: 0; right: 15px; z-index: 9999; pointer-events: none; height: 11rem;} .icon-scroll-line:before {bottom: 0; background: rgba(255, 255, 255, 0.15); z-index: 15;} .icon-scroll-line:after, .icon-scroll-line:before {width: 1px; content: ""; position: absolute; overflow: hidden; top: 0; left: 0; pointer-events: none; -webkit-transition: background ease .4s; -moz-transition: background ease .4s; -ms-transition: background ease .4s; -o-transition: background ease .4s; transition: background ease .4s;} .icon-scroll-line:after {background: #eee; height: 2.4rem; z-index: 16; -webkit-animation: iconscroll 2s ease-in-out infinite; -ms-animation: iconscroll 2s ease-in-out infinite; animation: iconscroll 2s ease-in-out infinite;} /**************VEROVATNO NE TREBA*********************/ /*.shift-right:before {content: '>'; font: inherit; vertical-align: 0.1em; display: inline-block; transform: scaleY(0) translateX(-1em); margin-right: -0.25em;} .shift-right:before, .shift-right .char {transition: transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98); transition-delay: calc(0.015s * var(--char-index));} .shift-right .char {transform: translateX(-0.15em);} .shift-right:hover:before {transform: scaleY(1) translateX(0em);} .shift-right:hover .char {transform: translateX(1em); transform: translateX(0.5em) translateX(calc(0.1em * var(--char-index)));} */ body:before { /* never visible - this is used in jQuery to check the current MQ */ content: 'mobile'; display: none; } @media only screen and (min-width: 1050px) { body:before { /* never visible - this is used in jQuery to check the current MQ */ content: 'desktop'; } } .work-animation img {width: 70px; height: auto;} .portfolio .portfolio-items {height: 100vh; width: 95%; margin: auto; position: relative; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 500vh;} .portfolio .portfolio-item {position: absolute; width: 100%; background: #1d252feb; display: flex; justify-content: center; align-items: center; top: 20px; height: calc(100vh - 40px); box-shadow: 0 0 40px #000; border-radius: 32px; border-right: 2px solid #000; background-image: url(../img/bg/about-me-back6.avif); background-repeat: no-repeat; background-size: cover;} .portfolio .portfolio-item-content {background: linear-gradient(45deg, var(--dark-color), #2496b95e); height: 100%; display: flex; flex-direction: column; justify-content: center; border-radius: 32px; width: 100%;} .portfolio .portfolio-item h2 {text-align: center; font-size: 2.4rem;} .portfolio .portfolio-item-content h3 {font-size: 1.6em; font-weight: 600; color: #ffffff30; margin-bottom: auto; text-align: center; margin-top: 60px!important;} .portfolio .portfolio-item-content h3 > span {font-size: 1.2rem; margin-right: 30px; display: inline-flex; position: relative;} .portfolio .portfolio-item-content h3 > span:before {content: ''; width: 20px; height: 20px; right: -26px; position: absolute; top: calc(50% - 10px); opacity: 0.35; background: url(../img/crticaZ.svg) no-repeat center;} .portfolio .portfolio-item-content img {max-width: 400px;} .portfolio .portfolio-item .animate-border {position: relative; padding-top: 20px; padding-left: 40px; overflow: hidden; z-index: 2;} .portfolio .portfolio-item .animate-border:before, .portfolio-item .animate-border:after {content: ''; width: 1px; height: 0; background: #ffffff57; position: absolute; left: 0; top: 0; -webkit-transition: all .7s; transition: all .7s;} .portfolio .portfolio-item .animate-border:before {opacity: .1; height: 100%;} .portfolio .portfolio-item:hover .animate-border:after {height: 100%; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;} .portfolio .animate-border > ul > li {position: relative; font-size: 22px; padding: 10px 0; line-height: 1.2;} .portfolio .animate-border ul > li span {display: block; font-size: 19px; color: #ffffff80; font-weight: 300;} .portfolio .animate-border > ul > li:before {content: ''; left: -39px; top: 20px; position: absolute; width: 0px; height: 0px; border-style: solid; border-width: 14px 0 15px 11.2px; border-color: transparent transparent transparent var(--main-color); transform: rotate(0deg); transform: translateX(-14px); opacity: 0; transition: transform .45s ease-out .3s, opacity .6s ease-out .3s;} .portfolio .animate-border > ul > li .underlined {font-size: 18px;} .portfolio .animate-border > ul > li:hover:before {transform: translateX(0); opacity: 1; transition: transform .25s ease-out, opacity .4s ease-out;} .portfolio .portfolio-client {position: absolute; bottom: 0; right: 138px; max-width: 150px; width: 150px; background-color: rgba(255,255,255,.47); border-radius: 50%; aspect-ratio: 1/1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);} .portfolio .portfolio-client img {position: relative!important; max-width: 95%!important; width: 100%; height: auto; z-index: 2; filter: brightness(0) invert(.2);} .portfolio .color-palette span, .portfolio-item .color-palette span {display: inline-flex; width: 34px; height: 34px; border-radius: 50%; box-shadow: 2px 2px 6px 0px #000; margin-right: 16px;} .homepage .portfolio-item .color-palette svg {display: none;} .portfolio-stolice .color-palette li:nth-child(3) span {background: #ee1c25;} .portfolio-stolice .color-palette li:nth-child(4) span {background: #e1e9ef;} .portfolio-stolice .color-palette li:nth-child(1) span {background: #231F20;} .portfolio-stolice .color-palette li:nth-child(2) span {background: #AA0000;} .portfolio-lira .color-palette li:nth-child(3) span {background: #AE841F;} .portfolio-lira .color-palette li:nth-child(2) span {background: #007CBA;} .portfolio-lira .color-palette li:nth-child(1) span {background: #1f566e;} .portfolio-lira .color-palette li:nth-child(4) span {background: #c8b690;} .portfolio-garden .color-palette li:nth-child(2) span {background: #35973f;} .portfolio-garden .color-palette li:nth-child(3) span {background: #2a6e44;} .portfolio-garden .color-palette li:nth-child(1) span {background: #6cb238;} .portfolio-zero .color-palette li:nth-child(1) span {background: #52b9b6;} .portfolio-zero .color-palette li:nth-child(4) span {background: #062b3d;} .portfolio-zero .color-palette li:nth-child(2) span {background: #539f9b;} .portfolio-zero .color-palette li:nth-child(3) span {background: #427f86;} .portfolio .portfolio-img-right .animate-border {text-align: left;} .portfolio-item.portfolio-img-right .animate-border:after, .portfolio-item.portfolio-img-right .animate-border:before {left: auto; right: 0;} .portfolio .portfolio-img-right .animate-border > ul > li:before {right: -39px; left: auto; border-width: 14px 11.2px 15px 0; border-color: transparent var(--main-color) transparent transparent; transform: translateX(14px);} .portfolio .portfolio-progress .img-wrap {aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center; padding: 16px;} .portfolio .portfolio-progress img {width: 100%; filter: grayscale(1) brightness(0) invert(.6);} .portfolio .portfolio-progress .portfolio-progress-item-first {border-right: 1px solid var(--border-light-color);} @media only screen and (min-width: 1050px) { .portfolio .portfolio-item h2 {font-size: 4rem; font-weight: 300;} .portfolio .portfolio-item > div {width: 100%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;} } .top-bubble-wrap {width: 100%; max-height: 100%; max-width: 100%; color: rgba(0, 0, 0, 0); position: absolute; bottom: auto; left: 0%; right: 0%; overflow: hidden; padding-top: 30px; transform-style: preserve-3d; pointer-events: none;} .top-bubble {width: 500vw; height: 500vw; margin-left: -200vw; background-image: linear-gradient(180deg, #0d1115, transparent); border-radius: 50%; mix-blend-mode: darken; transform-style: preserve-3d;} .resizable-wrap {width: 100%; height: 100%; cursor: pointer;} .resizable-wrap > aside {-webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; width: 60%;} .resizable-wrap > main {-webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;} .resizable-wrap > aside, .resizable-wrap > main {padding: 10px; overflow: auto;} .resizable-wrap span {white-space: nowrap; display: inline-block;} .resizable-wrap img {height: 100%; width: auto;} .resize-handle {-webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; box-sizing: border-box; width: 10px; height: 100%; border-left: 1px solid var(--border-light-color); border-right: 1px solid black; cursor: ew-resize; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .resize-handle:before {content: ""; position: absolute; z-index: 1; top: 50%; right: 100%; height: 18px; width: 2px; margin-top: -9px; border-left: 1px solid var(--main-color);} .resize-handle:after {content: ""; position: absolute; z-index: 1; top: 50%; left: 3px; height: 40px; width: 2px; border-right: 2px solid var(--main-color); transform: translateY(-50%);} .resize-icon-lr {top: 50%; right: 50%; transform: translate(50%, -50%); animation: shake 3.82s cubic-bezier(.36,.07,.19,.97) both infinite; backface-visibility: hidden; perspective: 1000px;} .resize-icon-lr:before, .resize-icon-lr:after {content: ''; position: absolute; top 50%; left: 50%; transform: translate(50%, -50%); width: 0px; height: 0px; border-style: solid; border-width: 15px 15px 15px 0; border-color: transparent #08B1C4 transparent transparent;} .resize-icon-lr:before {left: -30px;} .resize-icon-lr:after {transform: translate(50%, -50%) scale(-1);} .wrapper-tooltip {--icon-color: #414856; --shape-color-01: #b8cbee; --shape-color-02: #7691e8; --shape-color-03: #f6946e; --width: 60px; --height: 60px; --border-radius: var(--height); position: relative; border-radius: var(--border-radius); display: flex; justify-content: center; align-items: center; z-index: 3;} .wrapper-tooltip .btn {background: var(--main-color); width: var(--width); height: var(--height); position: relative; z-index: 3; border-radius: var(--border-radius); box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); display: flex; justify-content: center; align-items: center; animation: plus-animation-reverse 0.5s ease-out forwards;} .wrapper-tooltip .btn::before, .wrapper-tooltip .btn::after {content: ""; display: block; position: absolute; border-radius: 4px; background: #fff;} .wrapper-tooltip .btn::before {width: 4px; height: 28px;} .wrapper-tooltip .btn::after {width: 28px; height: 4px;} .wrapper-tooltip .tooltip {height: 75px; border-radius: 70px; position: absolute; background: #fff; z-index: 2; padding: 0 15px; box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); opacity: 0; top: 0; display: flex; justify-content: space-around; align-items: center; transition: opacity 0.15s ease-in, top 0.15s ease-in, width 0.15s ease-in;} .wrapper-tooltip .tooltip > svg {width: 100%; height: 26px; display: flex; justify-content: space-around; align-items: center; cursor: pointer;} .wrapper-tooltip .tooltip > svg .icon {fill: none; stroke: var(--icon-color); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; opacity: 0.4; transition: opacity 0.3s ease;} .wrapper-tooltip .tooltip > svg:hover .icon {opacity: 1;} .wrapper-tooltip .tooltip::after {content: ""; width: 20px; height: 20px; background: #fff; border-radius: 3px; position: absolute; left: 50%; margin-left: -10px; bottom: -8px; transform: rotate(45deg); z-index: 0;} .wrapper-tooltip > svg {width: 300px; height: 300px; position: absolute; z-index: 1; transform: scale(0);} .wrapper-tooltip > svg .shape {fill: none; stroke: none; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 20%;} .wrapper-tooltip input {height: 100%; width: 100%; border-radius: var(--border-radius); cursor: pointer; position: absolute; z-index: 5; opacity: 0;} .wrapper-tooltip input:checked ~ svg {animation: pang-animation 1.2s ease-out forwards;} .wrapper-tooltip input:checked ~ svg .shape:nth-of-type(1) {transform: translate(23px, 30%) rotate(40deg);} .wrapper-tooltip input:checked ~ svg .shape:nth-of-type(2) {transform: translate(-7px, 30%) rotate(80deg);} .wrapper-tooltip input:checked ~ svg .shape:nth-of-type(3) {transform: translate(13px, 30%) rotate(120deg);} .wrapper-tooltip input:checked ~ svg .shape:nth-of-type(4) {transform: translate(-14px, 30%) rotate(160deg);} .wrapper-tooltip input:checked ~ svg .shape:nth-of-type(5) {transform: translate(24px, 30%) rotate(200deg);} .wrapper-tooltip input:checked ~ svg .shape:nth-of-type(6) {transform: translate(-2px, 30%) rotate(240deg);} .wrapper-tooltip input:checked ~ svg .shape:nth-of-type(7) {transform: translate(21px, 30%) rotate(280deg);} .wrapper-tooltip input:checked ~ svg .shape:nth-of-type(8) {transform: translate(18px, 30%) rotate(320deg);} .wrapper-tooltip input:checked ~ svg .shape:nth-of-type(9) {transform: translate(19px, 30%) rotate(360deg);} .wrapper-tooltip input:checked ~ .btn {animation: plus-animation 0.5s ease-out forwards;} .wrapper-tooltip input ~ .tooltip {pointer-events: none;} .wrapper-tooltip input:checked ~ .tooltip {width: auto; height: 70px; animation: stretch-animation 1s ease-out forwards 0.15s; top: -90px; opacity: 1; pointer-events: auto;} .wrapper-tooltip .tooltip a {z-index: 1; padding: 8px;} [aria-label][data-cooltipz-dir]:after {border-radius: 8px; background: var(--main-color); font-size: 16px; color: #fff;} [aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:before {border-top-color: var(--main-color);} .color-palette li.color-ffffff [aria-label][data-cooltipz-dir]:after, .color-palette li.color-e9e9e9 [aria-label][data-cooltipz-dir]:after, .color-palette li.color-f1eef5 [aria-label][data-cooltipz-dir]:after{color: var(--main-color);} .helper-widget-wrap {position: fixed; z-index: 1000; left: 0px; bottom: 40px; pointer-events: none;} .bata {animation-duration: 1200ms; animation-fill-mode: both; backface-visibility: hidden; transform: translateX(-150%) rotate(0); opacity: 0; transition: all 1.2s ease;} .bata img {display: block; top: 0px; left: 0px; height: 140px; width: auto; pointer-events: none; position: relative; z-index: 2; transition: opacity 350ms ease 350ms;} .helper-widget-chat-box {width: 305px; top: 100px; left: 100px; position: absolute; padding: 20px 30px; opacity: 0; transition: 0.5s ease-in-out 0s; color: var(--main-color); pointer-events: none;} .helper-widget-chat-box .button {color: var(--main-color); cursor: pointer; text-decoration: none; display: flex; align-items: baseline;} .helper-widget-chat-box .button:hover {color: var(--white-color);} .helper-widget-icon {position: absolute; top: -14px; left: -63px;} .helper-widget-chat-box p {color: var(--white-color);} .helper-active .bata {transform: translateX(-50%) rotate(40deg); opacity: 1;} .chat-box-active {opacity: 1; transition: 1s ease-in-out 0.7s; pointer-events: auto;} .helper-widget-chat-box:before {background-image: linear-gradient(135deg,rgb(20 17 20 / 80%),rgb(28 27 28 / 95%));} @media only screen and (min-width: 500px) { .location .scroll-image:hover img, .location .scroll-image img:hover, location .scroll-image:hover video, .location .scroll-image video:hover {width: 460px; height: 460px;} } @media only screen and (min-width: 768px) { html {scroll-behavior: auto!important; overscroll-behavior: auto!important; touch-action: auto!important; -webkit-scroll-behavior: auto!important; -webkit-overscroll-behavior: auto!important; -webkit-touch-action: auto!important; -webkit-overflow-scrolling: auto!important; -webkit-backface-visibility: auto!important; scrollbar-face-color: var(--main-color); /* Firefox 63 compatibility */ scrollbar-track-color: #83545424; /* Firefox 63 compatibility */ scrollbar-color: var(--main-color) #83545424; scrollbar-width: thin;} } header.topnav .container-fluid {padding: 0 50px;} .back-diff {mix-blend-mode: difference;} header .logo {width: 220px; height: 54px;} h2.section-title, h1.section-title {font-size: 44px; margin-bottom: .5rem;} .services .services-intro p {font-size: 21px;} .section-subtitle {font-size: 23px;} .cursor {position: absolute; background: linear-gradient(135deg, var(--main-color), var(--alt-color)); width: 12px; height: 12px; border-radius: 100%; z-index: 1; transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; user-select: none; pointer-events: none; z-index: 100000; transform: scale(1); &.active {opacity: 0.5; transform: scale(0);} &.hovered {opacity: 0.08;} } .cursor-follower {position: absolute; background-color: #05c0d447; width: 20px; height: 20px; border-radius: 100%; z-index: 1; transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; user-select: none; pointer-events: none; z-index: 100000; transform: translate(5px, 5px); &.active {opacity: 0.8; transform: scale(3);} &.hovered {opacity: 0.08;} } canvas{display: block; vertical-align: bottom;} #particles-js{position:absolute; width: 100%; height: 100%; background-color: transparent; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; z-index: 1; will-change: transform;} #particles-js2{position:absolute; z-index: 1; width: 100%; height: 100%; background-color: transparent; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; pointer-events: none; padding-bottom: 100px;} #particles-background, #particles-foreground {left: -51%; top: -51%; width: 202%; height: 202%; transform: scale3d(.5,.5,1);} #particles-background {background: #2c2d44; background-image: -moz-linear-gradient(45deg,#3f3251 2%,#002025 100%); background-image: -webkit-linear-gradient(45deg,#3f3251 2%,#002025 100%); background-image: linear-gradient(45deg,#3f3251 2%,#002025 100%);} .sidemenu {width: 70%;} .sidecontact {width: 80%;} .side-content {padding: 120px 30px 30px;} .sidecontact .lead p {font-size: 20px;} .sidecontact .contact-form h3, .sidecontact .contact-form-bottom h3, .sidecontact input.form-control, .sidecontact textarea.form-control {font-size: 24px;} .sidemenu .menu-links .main-menu >li {font-size: 26px; padding: 10px;} .sidecontact .label-wrap label {font-size: 15px;} .intro {padding-top: 0;} .intro h1 {font-size: 60px;} .intro h1 .span-first {display: block;} .intro h1 .span-last {display: inline-block; animation-name: wordSlider2; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-duration: 7s;} .wrapper-tooltip {--width: 75px; --height: 75px;} .floating-image {position: absolute; right: 20%;} .intro .img-wrap {width: 60%; left: auto;} span.title-dot {font-size: 58px;} .sticky-card {top: 100px;} .work-animation img {width: 100px;} .badge-logo {width: 50px; max-height: 50px;} .portfolio .portfolio-items img {max-width: 70%; position: absolute; bottom: 0; left: 0; max-height: 80%; height: auto; width: auto; transition: .25s ease-in; pointer-events: none;} .portfolio .portfolio-img-right img {max-width: 70%; position: absolute; bottom: 0; left: auto; right: 0;} .portfolio .portfolio-item-content h3 {font-size: 4rem; margin-top: 0!important;} .portfolio .portfolio-item-content h3 > span {font-size: 2rem; margin-right: 40px;} .portfolio .portfolio-item-content h3 > span:before {width: 26px; height: 24px; right: -35px;} .portfolio .animate-border > ul > li {font-size: 26px; padding: 20px 0;} .portfolio .animate-border ul > li span {font-size: 20px;} .portfolio .color-palette span, .portfolio-item .color-palette span {width: 50px; height: 50px;} .portfolio .animate-border > ul > li .underlined {font-size: 21px;} .sticky-element {top: 140px; right: 30px;} .portfolio .portfolio-img-right .animate-border {text-align: right; padding-left: 0; padding-right: 40px;} .portfolio-img-right .color-palette span {margin-right: auto; margin-left: 16px;} .card-content p, .text300 {font-size: 22px;} .card-content > div {width: 80%;} .testimonials .sticky-card {height: var(--card-height);} .testimonials .card-content img {position: absolute; right: 20px; bottom: 40px; max-width: 200px; max-height: 70px; margin-left: auto;} .testimonial-link {font-size: 26px;} .brands .figure-logo {height: 240px;} .brands .figure-logo p {font-size: 19px;} .brands .figure-logo p > span {font-size: 17px;} .brands .figure-logo:hover p {height: 8rem;} .testimonial-link {font-size: 20px;} .qualification .sticky-card {padding-left: 4rem; padding-right: 4rem;} .qualification .card-content {height: 100%; padding: 40px; min-height: 550px;} .qualification .card-content h3 {letter-spacing: -3px; font-size: 30px;} .qualification .card-content p {font-size: 20px; line-height: 1.5;} .qualification #card_3 .service-top-content {flex: 1 1 0;} .qualification #card_3 .service-img-wrap {max-width: 100%;} .logo-move .landing-wrapper {height: 280px;} .logo-move .landing-inner-content {width: 2620px; height: 280px;} .about-me {padding-top: 100px;} .about-me:before {background-size: 100% 84px;} .text > .lighten > div, .text > .lighten > div span div, .about-me .text > .lighten > div, .about-me .text > .lighten > div span div {font-size: 36px; letter-spacing: -5px;} .weather-wrap .ww_current .ww_temp {font-size: 35px!important;} .info-text .lighten > div, .info-text .lighten > div span div {font-size: 28px; letter-spacing: -1.5px;} .span-img:hover {pointer-events: none; z-index: -1;} .text > .lighten .span-img:hover img, .text > .lighten .span-img:hover img:hover, .location .span-img:hover img {opacity: 1; transform: scale(1); border-radius: 50%; pointer-events: auto;} .text > .lighten .span-img:hover img, .location .span-img:hover {transition: none;} .text > .lighten > div:has(.span-img:hover), .text > .lighten > div:has(.span-img:hover img:hover) {z-index: 2;} .location .scroll-image {width: 150px; height: 150px;} .location .scroll-image img, .location .scroll-image video {width: 150px; height: 150px;} .accordion-button {font-size: 20px;} .accordion-item .accordion-body .accordion-content {font-size: 18px;} .icon-scroll-line {right: 60px;} .section-padding {padding: 100px 0;} @keyframes sidebarFromLeft { 0% {width: 0;} 40% {width: 382px;} 70% {width: 482px;} 100% {width: 0%;} } .icon-scroll-line {height: 22.50015rem;} .icon-scroll-line:after {height: 4.50003rem;} } @media (min-width: 768px) and (max-width: 991px) { .theme-button-text {padding: 0 1.65rem;} .intro-icon-boxes h3 {font-size: 19px;} .portfolio .portfolio-items img {right: 0; left: auto;} .portfolio .portfolio-img-right img {left: 0; right: auto;} .footer-wrap {height: auto!important;} .footer .footer-height-row {height: auto!important;} } @media only screen and (min-width: 992px) { .intro h1 {font-size: 80px;} h2.section-title, h1.section-title {font-size: 58px;} .section-subtitle {font-size: 25px;} .intro-icon-boxes .text-box-item-content lord-icon {width: 150px; height: 150px;} .breadcrumb {transform-origin: left;} .sidemenu .menu-links .main-menu >li {font-size: 30px;} .sidemenu .contact-info .item {font-size: 18px;} .sidecontact .lead p {font-size: 24px;} .sidecontact .contact-form h3, .sidecontact .contact-form-bottom h3, .sidecontact input.form-control, .sidecontact textarea.form-control {font-size: 30px;} .sidecontact .label-wrap label {font-size: 17px;} .side-content .form-title {font-size: 58px;} .portfolio .portfolio-item-content h3 {font-size: 8rem;} .portfolio .portfolio-item-content h3 > span {font-size: 4rem; margin-right: 60px;} .portfolio .portfolio-item-content h3 > span:before {width: 46px; right: -58px;} .badge svg {width: auto; height: auto;} .accordion-button {font-size: 22px;} .accordion-item:not(.active):hover .accordion-mark:before, .accordion-item:not(.active):hover .accordion-mark:after, .accordion-item.active .accordion-mark:before, .accordion-item.active .accordion-mark:after {background-color: var(--main-color);} .accordion-item:not(.active):hover .accordion-mark:after, .accordion-item.active .accordion-mark:after {transform: rotate(450deg) scale(2);} .accordion-item:not(.active):hover .accordion-mark:before, .accordion-item.active .accordion-mark:before {transform: rotate(360deg) scale(2);} .accordion-item:not(.active):hover .faq-qm, .accordion-item.active .faq-qm {color: var(--main-color); transform: translateX(4px); font-weight: 900; transition: all .15s ease-in;} .qualification .card-content h3 {font-size: 32px; text-align: left;} .qualification .card-content p {font-size: 21px; text-align: left;} .qualification #card_3 .service-img-wrap {width: 330px;} .qualification .service-top-wrap .service-img-wrap .monitor-img img {width: 280px;} .qualification .monitor-img:before {width: 280px; height: 230px; background-size: 280px;} .text > .lighten > div, .text > .lighten > div span div, .about-me .text > .lighten > div, .about-me .text > .lighten > div span div {font-size: 52px; letter-spacing: -5px;} .info-text .lighten > div, .info-text .lighten > div span div {font-size: 32px; letter-spacing: -1.5px;} .weather-wrap .ww_current .ww_temp {font-size: 50px!important; letter-spacing: -2px!important;} .card-content p, .text300 {font-size: 28px;} .top-bubble {width: 300vw; height: 150vw; margin-left: -100vw;} .footer {padding-top: 140px;} .footer-wrap {padding-top: 10em;} .footer .footer-grid {grid-template-columns: auto 1fr; grid-column-gap: 2em; grid-row-gap: 2em;} .footer .footer-links li .cursor-link {font-size: 20px;} .footer .footer-contact h3 {font-size: 80px; letter-spacing: -2px;} .helper-widget-wrap {bottom: 150px;} .bata img {height: 232px;} } @media only screen and (min-width: 1200px) { .floating-image {right: 0;} .qualification .card-content h3 {font-size: 46px; letter-spacing: -4px;} .qualification .card-content p {font-size: 26px;} .qualification .monitor-img:before {width: 460px; height: 370px; background-size: 460px;} .qualification #card_3 .service-img-wrap {width: 480px;} .qualification .service-top-wrap .service-img-wrap .monitor-img img {width: 440px;} } @media only screen and (min-width: 1200px) and (max-width: 1279px) { } @media only screen and (min-width: 1280px) { .container {max-width: 1140px;} .about-me .img-wrap {padding: 20px;} } @media only screen and (min-width: 1550px) { .about-me .img-wrap {padding: 60px;} } @media only screen and (min-width: 1920px) { .about-me .img-wrap {padding: 130px;} } @media only screen and (max-width: 991px) { header.nav-animation .logo {transform: translateY(-100px); transition: all .2s ease 0.2s;} .qualification .service-top-wrap .service-img-wrap {position: absolute; z-index: -1; opacity: .2; top: 50%; transform: translateY(-50%);} .qualification .service-top-wrap .service-img-wrap img {max-width: 80%;} .qualification .card-content p {color: #ffffffba; text-shadow: 0 0 10px #000;} .portfolio .portfolio-item .animate-border {padding-left: 12px;} .portfolio .animate-border > ul > li {font-size: 17px;} .portfolio .sticky-element {margin-top: 200px!important;} .portfolio .portfolio-item {height: calc(100vh - 100px);} .portfolio .portfolio-item-content {justify-content: start;} .portfolio .animate-border > ul > li {padding: 8px 0;} .portfolio .portfolio-client {right: 10px; bottom: 10px; max-width: 100px; width: 100px;} .portfolio .portfolio-item .col-md-8.position-relative {position: unset !important;} .portfolio .color-palette span, .portfolio-item .color-palette span {width: 24px; height: 24px;} } @media only screen and (max-width: 767px) { html {overflow-x: hidden;} body {min-height: -webkit-fill-available;} /* mobile viewport bug fix */ .job-slider .carousel .carousel-item {width: 50%!important;} .h-xs-auto {height: auto!important;} span.title-dot {line-height: 0;} .designer-wrap img {max-width: 100%;} .services-wide:before {left: 0;} h3.lighten {font-size: 20px; line-height: 1.4;} .sidemenu, .sidemenu .side-content {height: 100%; overflow-y: hidden; min-height: 100%;} .sidecontact .section-title {font-size: 30px;} .sidecontact .lead .required {font-size: 12px;} .badge {background: #292929d4;} .testimonials .text-box-item {padding: 1.5rem 1rem;} .testimonials .card-content svg {top: 20px; right: 30px;} .testimonials .title-dot {line-height: inherit;} .testimonials .title-dot:before {bottom: 23px; width: 21px; height: 23px; font-size: 32px;} .testimonials .card-content p {font-size: 17px;} .testimonials #card_2 .card-content p {font-size: 16px;} .brands .figure-logo.xs-border {border-top: 1px solid var(--border-light-color);} .brands .figure-logo p {line-height: 1.4em; display: flex; flex-direction: column; justify-content: center;} .brands .figure-logo:hover p {padding-top: 0.5rem;} .qualification .monitor-img:before {display: none;} .particles-about {background: linear-gradient(0deg, var(--dark-color), 100%, transparent);} .about-me .word > span[data-char="Z"]:after {top: 13px; left: 3px; width: 83%;} .z-dot:after {width: 8px; height: 8px; left: 1px; bottom: 8px;} .faq .accordion-item.active:after {background-color: #00000080;} .footer p {font-size: 18px;} .footer .footer-links li .word {white-space: nowrap;} @keyframes sidebarFromLeft {0% {width: 0;} 40% {width: 42px;} 70% {width: 100px;} 100% {width: 0%;}} } @keyframes fadeInAnimation {0% {opacity: 0;} 100% {opacity: 1;}} @keyframes fadeInRight2 {from {opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);} to {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @-webkit-keyframes fadeInRight2 {from {opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);} to {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}} @keyframes fadeIn2 {0% {opacity: 0;} 100% {opacity: 1;}} @-webkit-keyframes fadeIn2 {0% {opacity: 0;} 100% {opacity: 1;}} @keyframes fadeInUp2 {0% {opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px);} 100% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}} @-webkit-keyframes fadeInUp2 {0% {opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px);} 100% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}} @keyframes iconscroll{0%{opacity:0} 20%{opacity:1} 45%{opacity:1} 100%{opacity:0;top:calc(100% - 4.50003rem)}} @keyframes highlight{1%{width:1%;-webkit-mask-size:10000% .3em;mask-size:10000% .3em}6%{width:6%;-webkit-mask-size:1666.6666666667% .3em;mask-size:1666.6666666667% .3em}11%{width:11%;-webkit-mask-size:909.0909090909% .3em;mask-size:909.0909090909% .3em}16%{width:16%;-webkit-mask-size:625% .3em;mask-size:625% .3em}21%{width:21%;-webkit-mask-size:476.1904761905% .3em;mask-size:476.1904761905% .3em}26%{width:26%;-webkit-mask-size:384.6153846154% .3em;mask-size:384.6153846154% .3em}31%{width:31%;-webkit-mask-size:322.5806451613% .3em;mask-size:322.5806451613% .3em}36%{width:36%;-webkit-mask-size:277.7777777778% .3em;mask-size:277.7777777778% .3em}41%{width:41%;-webkit-mask-size:243.9024390244% .3em;mask-size:243.9024390244% .3em}46%{width:46%;-webkit-mask-size:217.3913043478% .3em;mask-size:217.3913043478% .3em}51%{width:51%;-webkit-mask-size:196.0784313725% .3em;mask-size:196.0784313725% .3em}56%{width:56%;-webkit-mask-size:178.5714285714% .3em;mask-size:178.5714285714% .3em}61%{width:61%;-webkit-mask-size:163.9344262295% .3em;mask-size:163.9344262295% .3em}66%{width:66%;-webkit-mask-size:151.5151515152% .3em;mask-size:151.5151515152% .3em}71%{width:71%;-webkit-mask-size:140.8450704225% .3em;mask-size:140.8450704225% .3em}76%{width:76%;-webkit-mask-size:131.5789473684% .3em;mask-size:131.5789473684% .3em}81%{width:81%;-webkit-mask-size:123.4567901235% .3em;mask-size:123.4567901235% .3em}86%{width:86%;-webkit-mask-size:116.2790697674% .3em;mask-size:116.2790697674% .3em}91%{width:91%;-webkit-mask-size:109.8901098901% .3em;mask-size:109.8901098901% .3em}96%{width:96%;-webkit-mask-size:104.1666666667% .3em;mask-size:104.1666666667% .3em}to{width:100%;-webkit-mask-size:100% .3em;mask-size:100% .3em}} @keyframes rotate {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}} @keyframes fade {0% {opacity: 1;} 50% {opacity: 0.25;}} @keyframes fade-in {0% {opacity: 0;} 100% {opacity: 1;}} @keyframes wordSlider {0%, 27% {transform: translateY(0%);} 33%, 60% {transform: translateY(-25%);} 66%, 93% {transform: translateY(-50%);} 100% {transform: translateY(-75%);}} @keyframes wordSlider2 {0%, 27% {transform: translateX(0%);} 33%, 60% {transform: translateX(-40%);} 66%, 93% {transform: translateX(-85%);} 100% {transform: translateX(0%);}} @keyframes slideOut {0 {opacity: 1; transform: scale(1);} 99% {opacity: 0; transform: scale(3);} 100% {transform: scale(0);}} @keyframes sidebarFromLeft2 {0% {width: 0;} 40% {width: 100%;} 70% {width: 120%;} 100% {width: 100%;}} @keyframes sidebarFromLeftLogo {0% {transform: scaleX(1);} 40% {transform: scaleX(1.2);} 70% {transform: scaleX(1.5);} 100% {transform: scaleX(1);}} @keyframes faded-in {0% {opacity: 0;} 100% {opacity: 1;}} @keyframes floating {50% {transform: translate(0, 1.5vw);}} @keyframes breath {from {animation-timing-function: ease-out;} to {transform: translateY(-5px) scale(1.25); text-shadow: 0 0 25px var(--main-color); animation-timing-function: ease-in-out;}} @keyframes shake {10%, 90% {transform: translate3d(-1px, 0, 0);} 20%, 80% {transform: translate3d(3px, 0, 0);} 30%, 50%, 70% {transform: translate3d(-4px, 0, 0);} 40%, 60% {transform: translate3d(4px, 0, 0);}} @keyframes pang-animation {0% {transform: scale(0); opacity: 0;} 40% {transform: scale(1); opacity: 1;} 100% {transform: scale(1.1); opacity: 0;}} @keyframes plus-animation {0% {transform: rotate(0) scale(1);} 20% {transform: rotate(60deg) scale(0.93);} 55% {transform: rotate(35deg) scale(0.97);} 80% {transform: rotate(48deg) scale(0.94);} 100% {transform: rotate(45deg) scale(0.95);}} @keyframes plus-animation-reverse {0% {transform: rotate(45deg) scale(0.95);} 20% {transform: rotate(-15deg);} 55% {transform: rotate(10deg);} 80% {transform: rotate(-3deg);} 100% {transform: rotate(0) scale(1);}} @keyframes stretch-animation {0% {transform: scale(1, 1);} 10% {transform: scale(1.1, 0.9);} 30% {transform: scale(0.9, 1.1);} 50% {transform: scale(1.05, 0.95);} 100% {transform: scale(1, 1);}} @keyframes spin {100% {transform:rotate(360deg)}} @keyframes spinPortfolio {to{transform: rotate(360deg);}} @media only screen and (min-width: 576px) { .portfolio-page .portfolio-grid {grid-template-columns: repeat(3, 1fr); gap: 24px;} .portfolio-page .portfolio-grid.portfolio-others h3 {font-size: 16px;} .one-portfolio .portfolio-item .portfolio-item-title {font-size: 3.3em;} } @media only screen and (min-width: 768px) { .portfolio-page .intro-portfolio .portfolio-h1 {font-size: 50px; max-width: 50%;} .portfolio-page .portfolio-title {font-size: 44px;} .portfolio-page .intro-portfolio .intro-moon svg {width: 210px; height: 210px;} .portfolio-page .gallery {padding: 100px 0 0;} /*.portfolio-page .gallery.item_open {min-height: 3400px;} .portfolio-page .portfolio-list {margin-top: 100px;}*/ .portfolio-page .gallery .portfolio-link {padding-bottom: 80px;} .portfolio-page .gallery .portfolio-link h4 {font-size: 19px;} .portfolio-page .gallery .portfolio-link h5, .portfolio-page .gallery .portfolio-link .portfolio-city {font-size: inherit;} .portfolio-page .portfolio-grid li h3 {font-size: 20px;} .portfolio-page .portfolio-grid-5 {grid-template-columns: repeat(5, 1fr);} .portfolio-page .portfolio-grid li .img-wrap {padding: 30px;} .one-portfolio .portfolio-item .portfolio-item-title {font-size: 4em; max-width: 85%;} .one-portfolio .portfolio-item .portfolio-item-subtitle {font-size: 1.75rem;} .one-portfolio .portfolio-item .portfolio-client-logo {width: 120px; right: 0; top: 54px; height: 120px;} .one-portfolio .portfolio-item .description-detail {font-size: 24px;} .one-portfolio .portfolio-bullets ul {grid-template-columns: repeat(4, minmax(0, 1fr));} .one-portfolio .portfolio-bullets ul li {grid-row: 1; flex-direction: column; align-items: flex-start; text-align: start;} .one-portfolio .portfolio-main-img img {max-width: 100%;} /*scroll top progress circle*/ @-webkit-keyframes border-transform{0%,100% {border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;}14% {border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;}28% {border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;}42% {border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;}56% {border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;}70% {border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;}84% {border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;}} .progress-wrap {position: fixed; right: 30px; bottom: 30px; height: 46px; width: 46px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1); z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(20px); -webkit-transition: all 200ms linear; transition: all 200ms linear;} .progress-wrap.active-progress {opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0);} .progress-wrap:after {content: ''; position: absolute; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.4 19.4' fill='%2308b1c4' style='enable-background:new 0 0 19.4 19.4' xml:space='preserve'%3E%3Cpath d='m9.7 4.1-.7.7-9 9 1.4 1.4 8.3-8.3 8.3 8.3 1.4-1.4-9-9-.7-.7z'/%3E%3C/svg%3E"); background-size: 20px 20px; background-position: center; background-repeat: no-repeat; left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 1; -webkit-transition: all 200ms linear; transition: all 200ms linear; filter: saturate(0) brightness(1.2);} .progress-wrap:hover:after {filter: saturate(1) brightness(1);} .progress-wrap svg path {fill: none;} .progress-wrap svg.progress-circle path {stroke: var(--main-color); stroke-width: 4; box-sizing:border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear;} } @media only screen and (min-width: 768px) and (max-width: 991px) { .job-slider .carousel .carousel-item {width: 33%!important;} } @media only screen and (min-width: 992px) { .portfolio-page .intro-portfolio .portfolio-h1 {font-size: 68px; margin-bottom: 100px;} .portfolio-page .intro-portfolio .intro-moon svg {width: 300px; height: 300px;} .portfolio-page .portfolio-grid, .portfolio-page .portfolio-grid.portfolio-progress {grid-template-columns: repeat(4, 1fr); gap: 50px; margin-bottom: 140px;} .portfolio-page .portfolio-item.item_open .portfolio-item-content {height: 2400px!important;} .portfolio-page:has(.portfolio-item.item_open) {height: 3000px!important;} } @media only screen and (max-width: 767px) { .portfolio-page .intro-portfolio .intro-moon {position: relative !important; transform: none !important;} .portfolio-page .intro-portfolio .forest {width: 200%;} .portfolio-page .intro-portfolio .intro-silhouette svg {height: 170px; transform: none;} .portfolio-page .portfolio-list:hover .portfolio-link:not(:hover) {opacity: 1; color: #fff;} .portfolio-page .gallery .portfolio-link h3 {font-size: 21px;} .portfolio-page .gallery .portfolio-link .img-wrap {aspect-ratio: 1 / 1;} .portfolio-page .portfolio-grid.portfolio-others a {padding: 0;} .portfolio-page .portfolio-others a:hover img {transform: none;} .portfolio-page .portfolio-others a:hover h3 {opacity: 0;} .portfolio-page .portfolio-grid-5 {grid-template-columns: repeat(3, 1fr); gap: 16px;} .portfolio-page .portfolio-grid-5 li {font-size: 12px; user-select: none;} .one-portfolio .portfolio-item .color-palette span {width: 32px; height: 32px;} .accordion-item.active .accordion-mark:before, .accordion-item.active .accordion-mark:after {background-color: var(--main-color);} .accordion-item.active .accordion-mark:before {transform: rotate(360deg) scale(2);} .accordion-item.active .accordion-mark:after {transform: rotate(450deg) scale(2);} .accordion-item.active .faq-qm {color: var(--main-color); transform: translateX(4px); font-weight: 900; transition: all .15s ease-in;} } .blog-item {display: flex; flex-direction: column; background: var(--alt-color); background-image: url(../img/noise.png); box-shadow: -3px 0 10px -5px #000; border-radius: 2em;} .blog-item .img-wrap { border-radius: 1em; background-image: url(../img/noise.png);} .blog-item .img-wrap img {width: 100%; border-radius: 2em 2em 0 0; opacity: .4; transition: all .3s ease;} .blog-item .blog-item-content p {font-weight: 200; font-size: 17px; color: #fff9;} .blog-item .blog-item-date {font-size: 14px; font-weight: 300; background-color: #1d6f7d; border-radius: 1em 0 1em 0; background-image: url(../img/noise.png);} .blog-item .button-wrap {font-family: 'Montserrat', sans-serif; bottom: 0; right: 0; background-color: #1d6f7d; border-radius: 1em 0 0 0; background-image: url(../img/noise.png);} .blog-item .theme-button {height: 2.6rem; opacity: 0; transform: scale(0); transition: all .3s;} .blog-item .theme-button svg {width: 23px; height: 23px; fill: #fff;} .blog-item lord-icon {width: 50px; height: 50px; bottom: 0; right: 50%; transform: translateX(50%); transition: all .3s ease .2s;} .blog-item:hover .theme-button {opacity: 1;transform: scale(1);} .blog-item:hover lord-icon {opacity: 0; transition: all .3s ease;} .blog-item:hover img {opacity: 0.6;} .blog-item .theme-button:hover svg {fill: var(--main-color)} /*breath shadow*/ .animation-breath > span, .animation-breath .word > span {animation: breath 1200ms ease calc(1 * 100 * 1ms) infinite alternate;} /*#loadingShade {z-index: 9999; background: #000; pointer-events: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;} #loadingShade #loadingAnimation {width: 80%; height: 80%;}*/ /* splitting */ /*html > body > section { scroll-snap-align: center; } @media (min-width: 481px) { h1 { --scalar: 4vw; } }*/ /*@media (prefers-reduced-motion: no-preference) { [letter-animation] > span { display: inline-block; white-space: break-spaces; } [letter-animation="breath"] { --glow-color: white; } [letter-animation="breath"] > span { -webkit-animation: breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate; animation: breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate; } [letter-animation="hover"]:hover > span { transform: scale(0.75) perspective(1px); } [letter-animation="hover"] > span { transition: transform 0.3s; cursor: pointer; will-change: transform; } [letter-animation="hover"] > span:hover { transform: scale(1.25) perspective(1px); } } @media (prefers-reduced-motion: no-preference) and (prefers-color-scheme: light) { [letter-animation="breath"] { --glow-color: black; } } @media (prefers-reduced-motion: no-preference) { [word-animation] { display: inline-flex; flex-wrap: wrap; gap: 1ch; } [word-animation="trampoline"] > span { display: inline-block; transform: translateY(100%); -webkit-animation: trampoline 3s ease calc(var(--index) * 150 * 1ms) infinite alternate; animation: trampoline 3s ease calc(var(--index) * 150 * 1ms) infinite alternate; } } @media (prefers-reduced-motion: no-preference) and (hover) { [word-animation="hover"] { overflow: hidden; overflow: clip; } [word-animation="hover"] > span { transition: transform 0.3s; cursor: pointer; } [word-animation="hover"] > span:not(:hover) { transform: translateY(50%); } }*/ /*.github-corner { fill: CanvasText; color: Canvas; } .github-corner:hover .octo-arm { -webkit-animation: 560ms ease-in-out octocat-wave; animation: 560ms ease-in-out octocat-wave; } @-webkit-keyframes octocat-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-25deg); } 40%, 80% { transform: rotate(10deg); } } @keyframes octocat-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-25deg); } 40%, 80% { transform: rotate(10deg); } } @-webkit-keyframes breath { from { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } to { transform: scale(1.25) translateY(-5px) perspective(1px); text-shadow: 0 0 40px var(--glow-color); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes breath { from { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } to { transform: scale(1.25) translateY(-5px) perspective(1px); text-shadow: 0 0 40px var(--glow-color); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-webkit-keyframes trampoline { 0% { transform: translateY(100%); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { transform: translateY(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes trampoline { 0% { transform: translateY(100%); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { transform: translateY(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } }*/ /* Recommended styles for Splitting */ .splitting .word, .splitting .char { display: inline-block; } /* Psuedo-element chars */ .splitting .char { position: relative; } /** * Populate the psuedo elements with the character to allow for expanded effects * Set to `display: none` by default; just add `display: block` when you want * to use the psuedo elements */ .splitting .char::before, .splitting .char::after { content: attr(data-char); position: absolute; top: 0; left: 0; visibility: hidden; transition: inherit; user-select: none; } /* Expanded CSS Variables */ .splitting { /* The center word index */ --word-center: calc((var(--word-total) - 1) / 2); /* The center character index */ --char-center: calc((var(--char-total) - 1) / 2); /* The center character index */ --line-center: calc((var(--line-total) - 1) / 2); } .splitting .word { /* Pecent (0-1) of the word's position */ --word-percent: calc(var(--word-index) / var(--word-total)); /* Pecent (0-1) of the line's position */ --line-percent: calc(var(--line-index) / var(--line-total)); } .splitting .char { /* Percent (0-1) of the char's position */ --char-percent: calc(var(--char-index) / var(--char-total)); /* Offset from center, positive & negative */ --char-offset: calc(var(--char-index) - var(--char-center)); /* Absolute distance from center, only positive */ --distance: calc((var(--char-offset) * var(--char-offset)) / var(--char-center)); /* Distance from center where -1 is the far left, 0 is center, 1 is far right */ --distance-sine: calc(var(--char-offset) / var(--char-center)); /* Distance from center where 1 is far left/far right, 0 is center */ --distance-percent: calc((var(--distance) / var(--char-center))); } [data-scroll] .char { transition: transform .5s; transition-delay: calc(.3s * var(--char-index) / var(--char-total)); } [data-scroll=out] .char {-webkit-animation: none; animation: none; -webkit-animation-delay: calc(30ms * var(--char-index)); animation-delay: calc(30ms * var(--char-index)); will-change: transform;} [data-scroll=in] .char {-webkit-animation: fadeInUp2 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; animation: fadeInUp2 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; -webkit-animation-delay: calc(30ms * var(--char-index)); animation-delay: calc(30ms * var(--char-index)); will-change: transform;} .slide-vertical .char, .slide-horizontal .char {overflow: hidden; color: transparent;} .slide-vertical .char:before, .slide-vertical .char:after {visibility: visible; color: #fff; transition: transform 0.3s cubic-bezier(1, 0, 0.55, 1); transition-delay: calc(0s + ( 0.02s * ( var(--char-index)) ));} .slide-vertical .char:before {color: var(--main-color); transition-delay: calc(0s * ( var(--char-index)));} .slide-vertical:hover .char:before {transition-delay: calc(0.01s + ( 0.02s * ( var(--char-index)) ));} .slide-vertical:hover .char:after {transition-delay: calc(0.01s * ( var(--char-index)));} .slide-vertical .char:before {transform: translateY(100%);} .slide-vertical:hover .char:before {transform: translateY(0%);} .slide-vertical:hover .char:after {transform: translateY(-100%);}