/* Rurally CSS bundle. Gerado automaticamente. Não editar diretamente. */ /* source: assets/css/plugins.css */ /** * Swiper 9.3.2 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2023 Vladimir Kharlampidi * * Released under the MIT License * * Released on: May 15, 2023 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper,swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide,swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,:host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;-ms-touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification,swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} @charset "UTF-8";@keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{0%{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;align-items:center;direction:ltr;display:flex;flex-direction:column;font-family:inherit;font-family:var(--plyr-font-family,inherit);font-variant-numeric:tabular-nums;font-weight:400;font-weight:var(--plyr-font-weight-regular,400);line-height:1.7;line-height:var(--plyr-line-height,1.7);max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease;z-index:0}.plyr audio,.plyr iframe,.plyr video{display:block;height:100%;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui :after,.plyr--full-ui :before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4a5464;background:var(--plyr-badge-background,#4a5464);border-radius:2px;border-radius:var(--plyr-badge-border-radius,2px);color:#fff;color:var(--plyr-badge-text-color,#fff);font-size:9px;font-size:var(--plyr-font-size-badge,9px);line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;display:none;font-size:13px;font-size:var(--plyr-font-size-small,13px);left:0;padding:10px;padding:var(--plyr-control-spacing,10px);position:absolute;text-align:center;transition:transform .4s ease-in-out;width:100%}.plyr__captions span:empty{display:none}@media(min-width:480px){.plyr__captions{font-size:15px;font-size:var(--plyr-font-size-base,15px);padding:20px;padding:calc(var(--plyr-control-spacing,10px)*2)}}@media(min-width:768px){.plyr__captions{font-size:18px;font-size:var(--plyr-font-size-large,18px)}}.plyr--captions-active .plyr__captions{display:block}.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions{transform:translateY(-40px);transform:translateY(calc(var(--plyr-control-spacing,10px)*-4))}.plyr__caption{background:#000c;background:var(--plyr-captions-background,#000c);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#fff;color:var(--plyr-captions-text-color,#fff);line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__caption div{display:inline}.plyr__control{background:#0000;border:0;border-radius:4px;border-radius:var(--plyr-control-radius,4px);color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;padding:calc(var(--plyr-control-spacing,10px)*.7);position:relative;transition:all .3s ease}.plyr__control svg{fill:currentColor;display:block;height:18px;height:var(--plyr-control-icon-size,18px);pointer-events:none;width:18px;width:var(--plyr-control-icon-size,18px)}.plyr__control:focus{outline:0}.plyr__control:focus-visible{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}a.plyr__control{text-decoration:none}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed,a.plyr__control:after,a.plyr__control:before{display:none}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__progress__container{flex:1;min-width:0}.plyr__controls .plyr__controls__item{margin-left:2.5px;margin-left:calc(var(--plyr-control-spacing,10px)/4)}.plyr__controls .plyr__controls__item:first-child{margin-left:0;margin-right:auto}.plyr__controls .plyr__controls__item.plyr__progress__container{padding-left:2.5px;padding-left:calc(var(--plyr-control-spacing,10px)/4)}.plyr__controls .plyr__controls__item.plyr__time{padding:0 5px;padding:0 calc(var(--plyr-control-spacing,10px)/2)}.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child{padding-left:0}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip],.plyr__controls:empty{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:#ffffffe6;background:var(--plyr-menu-background,#ffffffe6);border-radius:8px;border-radius:var(--plyr-menu-radius,8px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-menu-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-menu-color,#4a5464);font-size:15px;font-size:var(--plyr-font-size-base,15px);margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container:after{border:4px solid #0000;border-top-color:#ffffffe6;border:var(--plyr-menu-arrow-size,4px) solid #0000;border-top-color:var(--plyr-menu-background,#ffffffe6);content:"";height:0;position:absolute;right:14px;right:calc(var(--plyr-control-icon-size,18px)/2 + var(--plyr-control-spacing,10px)*.7 - var(--plyr-menu-arrow-size,4px)/2);top:100%;width:0}.plyr__menu__container [role=menu]{padding:7px;padding:calc(var(--plyr-control-spacing,10px)*.7)}.plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio]{margin-top:2px}.plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#4a5464;color:var(--plyr-menu-color,#4a5464);display:flex;font-size:13px;font-size:var(--plyr-font-size-menu,var(--plyr-font-size-small,13px));padding:4.66667px 10.5px;padding:calc(var(--plyr-control-spacing,10px)*.7/1.5) calc(var(--plyr-control-spacing,10px)*.7*1.5);-webkit-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control>span{align-items:inherit;display:flex;width:100%}.plyr__menu__container .plyr__control:after{border:4px solid #0000;border:var(--plyr-menu-item-arrow-size,4px) solid #0000;content:"";position:absolute;top:50%;transform:translateY(-50%)}.plyr__menu__container .plyr__control--forward{padding-right:28px;padding-right:calc(var(--plyr-control-spacing,10px)*.7*4)}.plyr__menu__container .plyr__control--forward:after{border-left-color:#728197;border-left-color:var(--plyr-menu-arrow-color,#728197);right:6.5px;right:calc(var(--plyr-control-spacing,10px)*.7*1.5 - var(--plyr-menu-item-arrow-size,4px))}.plyr__menu__container .plyr__control--forward:focus-visible:after,.plyr__menu__container .plyr__control--forward:hover:after{border-left-color:initial}.plyr__menu__container .plyr__control--back{font-weight:400;font-weight:var(--plyr-font-weight-regular,400);margin:7px;margin:calc(var(--plyr-control-spacing,10px)*.7);margin-bottom:3.5px;margin-bottom:calc(var(--plyr-control-spacing,10px)*.7/2);padding-left:28px;padding-left:calc(var(--plyr-control-spacing,10px)*.7*4);position:relative;width:calc(100% - 14px);width:calc(100% - var(--plyr-control-spacing,10px)*.7*2)}.plyr__menu__container .plyr__control--back:after{border-right-color:#728197;border-right-color:var(--plyr-menu-arrow-color,#728197);left:6.5px;left:calc(var(--plyr-control-spacing,10px)*.7*1.5 - var(--plyr-menu-item-arrow-size,4px))}.plyr__menu__container .plyr__control--back:before{background:#dcdfe5;background:var(--plyr-menu-back-border-color,#dcdfe5);box-shadow:0 1px 0 #fff;box-shadow:0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff);content:"";height:1px;left:0;margin-top:3.5px;margin-top:calc(var(--plyr-control-spacing,10px)*.7/2);overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back:focus-visible:after,.plyr__menu__container .plyr__control--back:hover:after{border-right-color:initial}.plyr__menu__container .plyr__control[role=menuitemradio]{padding-left:7px;padding-left:calc(var(--plyr-control-spacing,10px)*.7)}.plyr__menu__container .plyr__control[role=menuitemradio]:after,.plyr__menu__container .plyr__control[role=menuitemradio]:before{border-radius:100%}.plyr__menu__container .plyr__control[role=menuitemradio]:before{background:#0000001a;content:"";display:block;flex-shrink:0;height:16px;margin-right:10px;margin-right:var(--plyr-control-spacing,10px);transition:all .3s ease;width:16px}.plyr__menu__container .plyr__control[role=menuitemradio]:after{background:#fff;border:0;height:6px;left:12px;opacity:0;top:50%;transform:translateY(-50%) scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:#00b2ff;background:var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)))}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after{opacity:1;transform:translateY(-50%) scale(1)}.plyr__menu__container .plyr__control[role=menuitemradio]:focus-visible:before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before{background:#23282f1a}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-5px;margin-right:calc(var(--plyr-control-spacing,10px)*.7*-1 - -2px);overflow:hidden;padding-left:24.5px;padding-left:calc(var(--plyr-control-spacing,10px)*.7*3.5);pointer-events:none}.plyr--full-ui input[type=range]{-webkit-appearance:none;appearance:none;background:#0000;border:0;border-radius:26px;border-radius:calc(var(--plyr-range-thumb-height,13px)*2);color:#00b2ff;color:var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));display:block;height:19px;height:calc(var(--plyr-range-thumb-active-shadow-width,3px)*2 + var(--plyr-range-thumb-height,13px));margin:0;min-width:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:#0000;background-image:linear-gradient(90deg,currentColor 0,#0000 0);background-image:linear-gradient(to right,currentColor var(--value,0),#0000 var(--value,0));border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height,5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-webkit-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-webkit-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:-4px;margin-top:calc((var(--plyr-range-thumb-height,13px) - var(--plyr-range-track-height,5px))/2*-1);position:relative;-webkit-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height,5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height,5px)/2);height:5px;height:var(--plyr-range-track-height,5px)}.plyr--full-ui input[type=range]::-ms-track{color:#0000}.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height,5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:#0000;background:currentColor;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height,5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:0;position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr--full-ui input[type=range]:focus-visible::-ms-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none}.plyr__time{font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}.plyr__time+.plyr__time:before{content:"⁄";margin-right:10px;margin-right:var(--plyr-control-spacing,10px)}@media(max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr__tooltip{background:#fff;background:var(--plyr-tooltip-background,#fff);border-radius:5px;border-radius:var(--plyr-tooltip-radius,5px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-tooltip-color,#4a5464);font-size:13px;font-size:var(--plyr-font-size-small,13px);font-weight:400;font-weight:var(--plyr-font-weight-regular,400);left:50%;line-height:1.3;margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing,10px)/2*2);opacity:0;padding:5px 7.5px;padding:calc(var(--plyr-control-spacing,10px)/2) calc(var(--plyr-control-spacing,10px)/2*1.5);pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;white-space:nowrap;z-index:2}.plyr__tooltip:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #fff;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size,4px)*-1);content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control:focus-visible .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translateY(10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip:before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip:before{left:16px;left:calc(var(--plyr-control-icon-size,18px)/2 + var(--plyr-control-spacing,10px)*.7)}.plyr__controls>.plyr__control:last-child .plyr__tooltip{left:auto;right:0;transform:translateY(10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip:before{left:auto;right:16px;right:calc(var(--plyr-control-icon-size,18px)/2 + var(--plyr-control-spacing,10px)*.7);transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0) scale(1)}.plyr__progress{left:6.5px;left:calc(var(--plyr-range-thumb-height,13px)*.5);margin-right:13px;margin-right:var(--plyr-range-thumb-height,13px);position:relative}.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-6.5px;margin-left:calc(var(--plyr-range-thumb-height,13px)*-.5);margin-right:-6.5px;margin-right:calc(var(--plyr-range-thumb-height,13px)*-.5);width:calc(100% + 13px);width:calc(100% + var(--plyr-range-thumb-height,13px))}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{left:0;max-width:120px;overflow-wrap:break-word}.plyr__progress__buffer{-webkit-appearance:none;background:#0000;border:0;border-radius:100px;height:5px;height:var(--plyr-range-track-height,5px);left:0;margin-top:-2.5px;margin-top:calc((var(--plyr-range-track-height,5px)/2)*-1);padding:0;position:absolute;top:50%}.plyr__progress__buffer::-webkit-progress-bar{background:#0000}.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease}.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000}.plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)}.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}.plyr__progress__marker{background-color:#fff;background-color:var(--plyr-progress-marker-background,#fff);border-radius:1px;height:5px;height:var(--plyr-range-track-height,5px);position:absolute;top:50%;transform:translate(-50%,-50%);width:3px;width:var(--plyr-progress-marker-width,3px);z-index:3}.plyr__volume{align-items:center;display:flex;position:relative}.plyr__volume input[type=range]{margin-left:5px;margin-left:calc(var(--plyr-control-spacing,10px)/2);margin-right:5px;margin-right:calc(var(--plyr-control-spacing,10px)/2);max-width:90px;min-width:60px;position:relative;z-index:2}.plyr--audio{display:block}.plyr--audio .plyr__controls{background:#fff;background:var(--plyr-audio-controls-background,#fff);border-radius:inherit;color:#4a5464;color:var(--plyr-audio-control-color,#4a5464);padding:10px;padding:var(--plyr-control-spacing,10px)}.plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}.plyr--video{overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));border-radius:inherit;height:100%;margin:auto;overflow:hidden;position:relative;width:100%}.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{aspect-ratio:16/9}@supports not (aspect-ratio:16/9){.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{height:0;padding-bottom:56.25%;position:relative}}.plyr__video-embed iframe,.plyr__video-wrapper--fixed-ratio video{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}.plyr--video .plyr__controls{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;color:var(--plyr-video-control-color,#fff);left:0;padding:5px;padding:calc(var(--plyr-control-spacing,10px)/2);padding-top:20px;padding-top:calc(var(--plyr-control-spacing,10px)*2);position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:3}@media(min-width:480px){.plyr--video .plyr__controls{padding:10px;padding:var(--plyr-control-spacing,10px);padding-top:35px;padding-top:calc(var(--plyr-control-spacing,10px)*3.5)}}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr--video .plyr__control:focus-visible,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-video-control-color-hover,#fff)}.plyr__control--overlaid{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));border:0;border-radius:100%;color:#fff;color:var(--plyr-video-control-color,#fff);display:none;left:50%;opacity:.9;padding:15px;padding:calc(var(--plyr-control-spacing,10px)*1.5);position:absolute;top:50%;transform:translate(-50%,-50%);transition:.3s;z-index:2}.plyr__control--overlaid svg{left:2px;position:relative}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{opacity:1}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen video{height:100%}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media(min-width:1024px){.plyr:fullscreen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;bottom:0;height:100%;left:0;margin:0;position:fixed;right:0;top:0;width:100%;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media(min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr__ads{border-radius:inherit;bottom:0;cursor:pointer;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads:after{background:#23282f;border-radius:2px;bottom:10px;bottom:var(--plyr-control-spacing,10px);color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;right:var(--plyr-control-spacing,10px);z-index:3}.plyr__ads:empty:after{display:none}.plyr__cues{background:currentColor;display:block;height:5px;height:var(--plyr-range-track-height,5px);left:0;opacity:.8;position:absolute;top:50%;transform:translateY(-50%);width:3px;z-index:3}.plyr__preview-thumb{background-color:#fff;background-color:var(--plyr-tooltip-background,#fff);border-radius:8px;border-radius:var(--plyr-menu-radius,8px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing,10px)/2*2);opacity:0;padding:3px;pointer-events:none;position:absolute;transform:translateY(10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;z-index:2}.plyr__preview-thumb--is-shown{opacity:1;transform:translate(0) scale(1)}.plyr__preview-thumb:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #fff;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size,4px)*-1);content:"";height:0;left:calc(50% + var(--preview-arrow-offset));position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr__preview-thumb__image-container{background:#c1c8d1;border-radius:7px;border-radius:calc(var(--plyr-menu-radius,8px) - 1px);overflow:hidden;position:relative;z-index:0}.plyr__preview-thumb__image-container img,.plyr__preview-thumb__image-container:after{height:100%;left:0;position:absolute;top:0;width:100%}.plyr__preview-thumb__image-container:after{border-radius:inherit;box-shadow:inset 0 0 0 1px #00000026;content:"";pointer-events:none}.plyr__preview-thumb__image-container img{max-height:none;max-width:none}.plyr__preview-thumb__time-container{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:7px;border-bottom-left-radius:calc(var(--plyr-menu-radius,8px) - 1px);border-bottom-right-radius:7px;border-bottom-right-radius:calc(var(--plyr-menu-radius,8px) - 1px);bottom:0;left:0;line-height:1.1;padding:20px 6px 6px;position:absolute;right:0;z-index:3}.plyr__preview-thumb__time-container span{color:#fff;font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}.plyr__preview-scrubbing{bottom:0;filter:blur(1px);height:100%;left:0;margin:auto;opacity:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .3s ease;width:100%;z-index:1}.plyr__preview-scrubbing--is-shown{opacity:1}.plyr__preview-scrubbing img{height:100%;left:0;max-height:none;max-width:none;object-fit:contain;position:absolute;top:0;width:100%}.plyr--no-transition{transition:none!important}.plyr__sr-only{clip:rect(1px,1px,1px,1px);border:0!important;height:1px!important;overflow:hidden;padding:0!important;position:absolute!important;width:1px!important}.plyr [hidden]{display:none!important} /* source: assets/css/_css/reset.css */ /*------------------------------------------------------------------ Template: Rco - Multi-Concept Creative Portfolio Template Version: 2.0.0 Last change: 27/10/2023 -------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } html.loading { cursor: wait; } /* The visual loader itself blocks interaction while visible. Do not disable pointer events on the entire document: if a transition fails to clear the loading class, forms must remain usable. */ html.loading .rco-form, html.loading .rco-form * { pointer-events: auto !important; } ol, ul { list-style: disc; padding-left: 1.3em; } ul li, ol li { padding-bottom: 1em; } ul li:last-child, ol li:last-child { padding-bottom: 0; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } table { display: block; float: left; width: 100%; } td, th { padding-top: 15px; padding-bottom: 15px; padding-right: 3em; } caption { font-size: 13px; line-height: 22px; color: red; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /*Section Backgrounds */ /* Noised */ #noised-bg { z-index: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.05; } /* Circle Mask */ .circle-mask-background { display: block; width: 100%; height: 100%; } #circleMask circle { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } /** * Remove the margin in all browsers. */ body { margin: 0; background-color: var(--mainBackground); font-family: "DM Sans", sans-serif; color: var(--mainColor); } body.dark { --mainColor: #ebebeb; --mainBackground: #191919; --secondaryBackground: #151515; } body.light { --mainColor: #191919; --mainBackground: #ebebeb; --secondaryBackground: #e0e0e0; background-color: var(--mainBackground); color: var(--mainColor); } .light:not(body) { --mainColor: #ebebeb; --mainBackground: #191919; color: var(--mainColor); } .site-header.dark { --mainColor: #191919; --mainBackground: #ebebeb; --secondaryBackground: #d7d7d7; color: var(--mainColor); } .site-header.light { --mainColor: #ebebeb; --mainBackground: #191919; color: var(--mainColor); } body.hide-footer #footer { display: none; } body, html { font-size: 17px; -ms-scroll-chaining: none; overscroll-behavior: none; } /** * Render the `main` element consistently in IE. */ main { display: block; overflow: hidden; color: var(--mainColor); background: transparent; } main.project-page .page-content { background: var(--mainBackground); } #smooth-content { will-change: transform; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; /* margin: 0.67em 0; */ } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } body a { color: var(--mainColor); text-decoration: none; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 0.3em; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -2em; letter-spacing: 0; margin-left: 0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ .rco-form { display: block; float: left; width: 100%; } .rco-form > form > div { display: block; width: 100%; position: relative; padding-top: 1.5em; padding-bottom: 1em; font-size: 1rem; float: left; } /* Estilização geral e transições */ .rco-form button.button, .rco-form button.button::before, .rco-form button.button::after { box-sizing: border-box; transition: 0.5s ease-in-out; } .rco-form button.button { position: relative; display: inline-block; overflow: hidden; /* Necessário para o efeito de preenchimento */ padding: 1em 3em; font-size: 16px; text-transform: uppercase; color: var(--mainColor); /* Cor inicial do texto */ border: 1px solid var(--mainColor); /* Borda com a cor principal */ background: transparent; /* Fundo transparente inicialmente */ border-radius: 35px; /* Borda arredondada */ cursor: pointer; } /* Pseudo-elemento para o fundo animado */ .rco-form button.button::before { content: ''; position: absolute; top: 0; left: -100%; /* Começa fora do botão */ width: 100%; height: 100%; background-color: var(--mainColor); /* Cor do preenchimento no hover */ z-index: -1; /* Coloca atrás do texto */ transition: transform 0.5s ease-in-out; /* Suaviza o movimento do fundo */ transform: translateX(0); /* Posição inicial */ } /* Hover: anima o fundo e muda a cor do texto */ .rco-form button.button:hover { color: #fff; /* Muda o texto para branco no hover */ } .rco-form button.button:hover::before { transform: translateX(100%); /* Fundo cobre todo o botão */ } .rco-form > form > div.half-wrap { width: 50%; } .rco-form > form > div > input { background: none; border: none; width: 100%; color: var(--mainColor); } .rco-form > form > div > textarea { padding: 0; } .rco-form > form > div > label { position: absolute; top: 50%; pointer-events: none; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .rco-form > form > div.message-wrap > label { top: 1.5em; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .rco-form > form > div.active > label { -webkit-transform: translateY(0%) scale(0.7); -ms-transform: translateY(0%) scale(0.7); transform: translateY(0%) scale(0.7); opacity: 0.5; top: 10px; } .rco-form > form > div::before, .rco-form > form > div::after { content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 1px; background: var(--mainColor); width: 100%; opacity: 0.15; } .rco-form > form > div::before { width: 0%; opacity: 1; -webkit-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; } .rco-form > form > div.send-wrap::before, .rco-form > form > div.send-wrap::after { display: none; } .rco-form > form > div.active::before { width: 100%; } .rco-form > form > div > textarea:focus, .rco-form > form > div > input:focus { outline: none; } /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ .button:hover::before { width: 0; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } ::-webkit-input-placeholder { color: #8f8d8d; } ::-moz-placeholder { color: #8f8d8d; } :-ms-input-placeholder { color: #8f8d8d; } ::-ms-input-placeholder { color: #8f8d8d; } ::placeholder { color: #8f8d8d; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; display: block; width: 100%; padding: 30px; border: none; background: none; -webkit-box-sizing: border-box; box-sizing: border-box; color: var(--mainColor); } .message-wrap label { top: 30px; -webkit-transform: none; -ms-transform: none; transform: none; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } .material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0, "opsz" 48; } .material-icons.no-fill { font-variation-settings: "FILL" 0 !imporant; } /*------------------------------------------------------------------ # Typography -------------------------------------------------------------------**/ /* h1, h2, h3, h4 { margin-bottom: 1em; } h1, .text-h1 { font-size: 102px; line-height: 115px; font-weight: 400; letter-spacing: -0.055em; } h1.has-anim-text .anim_char, .text-h1.has-anim-text .anim_char { overflow: hidden; padding-right: 0.05em; margin-right: -0.05em; } h2, .text-h2 { font-size: 64px; line-height: 1.1; font-weight: 400; letter-spacing: -0.04em; } h3, .text-h3 { font-size: 51px; line-height: 62px; font-weight: 400; letter-spacing: -0.03em; } h4, .text-h4 { font-size: 36px; line-height: 44px; font-weight: 400; letter-spacing: -0.01em; } h5, .text-h5 { font-size: 25px; line-height: 37px; margin-left: -1px; font-weight: normal; margin-bottom: 1em; } h6, .text-h6 { font-size: 21px; line-height: 36px; letter-spacing: 0 } .text-h6 { line-height: 1.5 } h1, h2, h3, h4 { margin-bottom: 1em; } */ h1, .text-h1 { font-size: 102px; line-height: 115px; font-weight: 400; letter-spacing: -0.055em; } h2, .text-h2 { font-size: 64px; line-height: 1.1; font-weight: 400; letter-spacing: -0.04em; } h3, .text-h3 { font-size: 51px; line-height: 62px; font-weight: 400; letter-spacing: -0.03em; } h4, .text-h4 { font-size: 36px; line-height: 44px; font-weight: 400; letter-spacing: -0.01em; } h5, .text-h5 { font-size: 25px; line-height: 37px; margin-left: -1px; font-weight: normal; margin-bottom: 1em; } h6, .text-h6 { font-size: 21px; line-height: 36px; letter-spacing: 0; } .text-h6 { line-height: 1.5; } p { line-height: 25px; margin-bottom: 1em; font-size: 1rem; } .big-title { font-size: 200px; line-height: 1.15; margin-bottom: 0; letter-spacing: -0.06em; --mobileFontSize: 50px; } @media only screen and (max-width: 750px) { .big-title { font-size: var(--mobileFontSize); line-height: 1.4; letter-spacing: -0.05em; } .big-title .anim_line { white-space: nowrap; } } .md-title { font-size: 120px; line-height: 1.15; margin-bottom: 0; letter-spacing: -0.07em; padding-right: 0.05em; } @media only screen and (max-width: 750px) { /* Typography*/ .md-title { --mobileFontSize: 46px; font-size: var(--mobileFontSize); } } .caption { font-size: 13px; line-height: 22px; letter-spacing: 0.1em; } .rco-list ul { padding: 0; margin: 0; list-style: none; margin-top: 1em; margin-bottom: 1em; } .rco-list.underlined ul li { position: relative; padding-bottom: 1em; } .rco-list.underlined ul li::after { content: ""; position: absolute; bottom: 0.5em; width: 100%; height: 1px; background-color: var(--mainColor); left: 0; opacity: 0.2; -webkit-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out; } .rco-list ul.animate li:after { width: 0%; } .rco-list ul.animate li.is-inview:after { width: 100%; } .rco-list ol { list-style: decimal; } .rco-list ol li::marker { font-size: 0.8em; } .rco-list ol li { padding-left: 10px; } .justify-text { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; } .justify-text .anim_line { -moz-text-align-last: justify; text-align-last: justify; } .justify-text .anim_line:last-child { -moz-text-align-last: unset; text-align-last: unset; } /*-------------------------------------------------- # Smooth Scroll ---------------------------------------------------*/ #smooth-content { position: relative; will-change: transform; } /*-------------------------------------------------- # Grid System ---------------------------------------------------*/ #page { visibility: visible; display: block; overflow: hidden; position: relative; } .section.strech-wrappers { justify-content: space-around; display: flex; flex-direction: column; align-items: stretch; } div#content { display: block; float: left; width: 100%; position: relative; z-index: auto; } .hide_desktop { display: none; } .wrapper, .wrapper-full, .wrapper-small { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 100%; } .wrapper-small { width: 100%; margin-right: auto; margin-left: auto; margin-bottom: 100px; } .wrapper { width: 100%; margin-right: auto; margin-left: auto; margin-bottom: 100px; position: relative; z-index: 1; } .wrapper-full { width: 100%; margin-bottom: 150px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; padding: 0 25px; } .section { width: 100%; margin-bottom: 100px; position: relative; background-size: cover; background-position: center; padding-top: 150px; } .section.no-padding { padding-top: 0; padding-bottom: 0; } .section.anim-bg { padding-top: 0; } .section.fullscreen { min-height: 100vh; margin-bottom: 0; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 0; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .section.fullscreen .wrapper, .section.fullscreen .wrapper-full, .section.fullscreen .wrapper-small { margin-bottom: 0; -ms-flex-preferred-size: 100%; flex-basis: 100%; z-index: auto; height: auto; } .section.fullscreen .wrapper > div, .section.fullscreen .wrapper-full > div, .section.fullscreen .wrapper-small > div { margin-bottom: 0; } .align-bottom { -ms-flex-item-align: end; align-self: flex-end; } .self-center { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .section.has-bg { margin-bottom: 350px; padding-top: 100px; margin-top: 350px; } .page-content .section:last-child { margin-bottom: 0; } .send-back { z-index: -2; } .section.send-back { z-index: -9; } .wrapper:after, .wrapper-small:after, .wrapper-full:after, section:after { display: table; clear: both; content: ""; } .c-col-1, .c-col-2, .c-col-3, .c-col-4, .c-col-5, .c-col-6, .c-col-7, .c-col-8, .c-col-9, .c-col-10, .c-col-11, .c-col-12 { float: left; padding-left: 15px; padding-right: 15px; margin-bottom: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .no-gap { padding-left: 0; padding-right: 0; } .c-col-1 { width: 8.333333%; } .c-col-6 { width: 50%; } .c-col-4 { width: 33.333333%; } .c-col-8 { width: 66.666666%; } .c-col-3 { width: 25%; } .c-col-2 { width: 16.6666666%; } .c-col-5 { width: 41.666666%; } .c-col-10 { width: 83.333333%; } .c-col-9 { width: 75%; } .c-col-12 { width: 100%; } .no-margin { margin-bottom: 0 !important; } .align-center { text-align: center; } .col-center { margin: 0 auto; } @media only screen and (max-width: 576px) { .wrapper { max-width: 90%; margin-bottom: 25px; } .wrapper-small { max-width: 90%; margin-bottom: 25px; } .wrapper-full { margin-bottom: 100px; } .sm-6 { width: 50%; } .sm-4 { width: 33.333333%; } .sm-8 { width: 66.666666%; } .sm-3 { width: 25%; } .sm-2 { width: 16.6666666%; } .sm-5 { width: 41.666666%; } .sm-10 { width: 83.333333%; } .sm-9 { width: 75%; } .sm-12 { width: 100%; } .fit-col { margin: 0; } } @media (min-width: 576px) and (max-width: 900px) { .md-6 { width: 50%; } .md-4 { width: 33.333333%; } .md-8 { width: 66.666666%; } .md-3 { width: 25%; } .md-2 { width: 16.6666666%; } .md-5 { width: 41.666666%; } .md-10 { width: 83.333333%; } .md-9 { width: 75%; } .md-12 { width: 100%; } } @media only screen and (min-width: 576px) { .wrapper { max-width: 90%; } .wrapper-small { max-width: 90%; } } @media only screen and (min-width: 768px) { .wrapper { max-width: 90%; } .wrapper-small { max-width: 88%; } } @media only screen and (min-width: 992px) { .wrapper { max-width: 1014px; } .wrapper-small { max-width: 790px; } } @media only screen and (min-width: 1200px) { .wrapper { max-width: 1274px; } .wrapper-small { max-width: 950px; } } @media only screen and (min-width: 1600px) { .wrapper { max-width: 1500px; } .wrapper-small { max-width: 1200px; } } span.empty-space { display: block; width: 100%; float: revert; clear: both; } .rco-divider { display: block; width: 100%; height: var(--height); background: var(--mainColor); -webkit-transition: width 1s cubic-bezier(0.3, 0.8, 0, 1) 0.2s; -o-transition: width 1s cubic-bezier(0.3, 0.8, 0, 1) 0.2s; transition: width 1s cubic-bezier(0.3, 0.8, 0, 1) 0.2s; margin: 25px 0; opacity: 0.2; float: left; --height: 1px; } .rco-divider.rco-divider.detect-pov { width: 00%; } .rco-divider.full-width { width: 100vw; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .rco-divider.detect-pov.full-width.is-inview { width: 100vw; } .rco-divider.detect-pov.is-inview { width: 100%; } .light .rco-divider { background: #fff; } /*=============================================== # General =================================================*/ .align-right { text-align: right; } .maiusculo { text-transform: uppercase; line-height: normal; } @media only screen and (max-width: 750px) { .text-wrapper br { display: none; } .text-wrapper br.show-mobile { display: block; } } @media only screen and (max-width: 750px) { .section { padding-top: 100px; margin-bottom: 50px; } } .text-wrapper { display: block; margin-bottom: 1em; --width: 100%; --mobileWidth: 100%; width: var(--width); color: var(--mainColor); } .text-wrapper-small { display: block; margin-bottom: 1em; --width: 90%; --mobileWidth: 100%; width: var(--width); color: var(--mainColor); } /* ==== CONTACT FORM LAYOUT FIX ==== */ .rco-form form{ display: grid; grid-template-columns: 1fr 1fr; /* duas colunas */ column-gap: 28px; /* espaço horizontal entre campos */ row-gap: 22px; /* espaço vertical entre linhas */ } /* neutraliza o layout antigo */ .rco-form > form > div{ float: none; /* remove float */ width: auto; /* deixa o Grid controlar largura */ } /* campos "meio a meio" ficam lado a lado */ .rco-form > form > div.half-wrap{ grid-column: auto; width: auto; /* override do width:50% */ } /* campos que ocupam a linha inteira */ .rco-form .field-wrap:not(.half-wrap), .rco-form .message-wrap, .rco-form .send-wrap{ grid-column: 1 / -1; } /* responsivo: empilha no mobile */ @media (max-width: 768px){ .rco-form form{ grid-template-columns: 1fr; column-gap: 0; } .rco-form > form > div.half-wrap{ grid-column: 1 / -1; } } /* ========================================================== Rurally · correção global de alinhamento do viewport Evita a faixa lateral causada por offset do wrapper raiz. ========================================================== */ html, body { margin-left: 0 !important; padding-left: 0 !important; width: 100%; } #page { left: 0 !important; margin-left: 0 !important; width: 100% !important; max-width: none !important; } body.smooth-scroll #smooth-wrapper { left: 0 !important; margin-left: 0 !important; width: 100% !important; } /* source: assets/css/_css/cursor.css */ /*=============================================== # Mouse Cursor =================================================*/ div#mouseCursor { position: fixed; z-index: 999999999999; pointer-events: none; -webkit-transition: width .2s ease-out, height .2s ease-out; -o-transition: width .2s ease-out, height .2s ease-out; transition: width .2s ease-out, height .2s ease-out; overflow: hidden } div#mouseCursor.temp_hidden.circle, div#mouseCursor.temp_hidden.dot { width: 0 !important; height: 0 !important; } div#mouseCursor.light .mouse-cursor-icon, div#mouseCursor.light .mouse-cursor-text { color: #191919 } div#mouseCursor.dot { width: 15px; height: 15px; } div#mouseCursor.circle { width: 75px; height: 75px; } div#mouseCursor .main-circle { -webkit-transition: fill .2s ease, stroke .2s ease; -o-transition: fill .2s ease, stroke .2s ease; transition: fill .2s ease, stroke .2s ease } div#mouseCursor.circle .main-circle { stroke: #191919; stroke-width: 1; fill: transparent } div#mouseCursor.dot .main-circle { stroke: none; stroke-width: none; fill: #191919; } .mouse-cursor-icon, .mouse-cursor-text { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; opacity: 1; font-size: 15px; display: block; overflow: hidden; line-height: 1; text-align: center; line-height: 1.4; } .mouse-cursor-text span { display: block; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; -o-transition: transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease } .mouse-cursor-icon { font-size: 25px; } div#mouseCursor .mouse-cursor-icon { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48 } div#mouseCursor .mouse-cursor-icon::after { content: attr(data-icon); font-family: 'Material Icons'; opacity: 0; -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease } div#mouseCursor.multi { overflow: visible; opacity: 1 } div#mouseCursor .multi-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } div#mouseCursor .multi-icon::after { content: 'arrow_forward'; font-family: 'Material Icons'; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%) translateX(20px); -ms-transform: translateY(-50%) translateX(20px); transform: translateY(-50%) translateX(20px); font-size: 25px; } div#mouseCursor .multi-icon::before { content: 'arrow_back'; font-family: 'Material Icons'; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%) translateX(-20px); -ms-transform: translateY(-50%) translateX(-20px); transform: translateY(-50%) translateX(-20px); font-size: 25px; } /* Light Section */ div#mouseCursor.circle.light .main-circle { stroke: #ffffff; stroke-width: .5; } div#mouseCursor.dot.light .main-circle { fill: #fff } /* Hover Size */ div#mouseCursor.hover-size { width: 125px; height: 125px; } div#mouseCursor.dot.hover-size { width: 150px; height: 150px; } div#mouseCursor.dot.hover-size { opacity: .25 } div#mouseCursor.multi.dot.hover-size, div#mouseCursor.multi.hover-size { width: 100px; height: 100px; opacity: 1; } div#mouseCursor.multi.press.dot.hover-size, div#mouseCursor.multi.press.hover-size { width: 40px; height: 40px } /* Hover Text */ div#mouseCursor.hover-size.hover-text { width: 150px; height: 150px; } div#mouseCursor.hover-text { opacity: 1 !important } div#mouseCursor.hover-text .main-circle { stroke: none; stroke-width: 0; fill: #191919; } div#mouseCursor.hover-text .mouse-cursor-text span { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* Hover Icon */ div#mouseCursor.hover-size.hover-icon { width: 150px; height: 150px; } div#mouseCursor.hover-icon { opacity: 1 !important } div#mouseCursor.hover-icon .main-circle { stroke: none; stroke-width: 0; fill: #191919; } div#mouseCursor.hover-icon .mouse-cursor-icon::after { opacity: 1; } @media only screen and (max-width: 750px) { /* Resets*/ #mouseCursor { display: none } } /* source: assets/css/_css/elements.css */ /*=============================================== # Elements =================================================*/ /** Layout Switcher ------------------------------ */ .rco-layout-switcher.ls_switcher { display: inline-block; border: 1px solid var(--mainColor); border-radius: 2em; padding: 0.35em 1.5em; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 14px; height: fit-content; } .rco-layout-switcher.ls_switcher>span { display: inline-block; } .rco-layout-switcher.ls_switcher>span:nth-child(2) { margin-right: 1.5em; cursor: pointer; opacity: .25; } .rco-layout-switcher.ls_switcher>span:nth-child(3) { margin-left: 0.5em; cursor: pointer; opacity: .25; color: var(--mainColor); } @media only screen and (max-width: 750px) { .rco-layout-switcher.ls_switcher { display: none; } } span.active-follower { position: absolute; top: 50%; left: 2%; width: 50%; height: 90%; background: var(--mainColor); z-index: -1; border-radius: 2em; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } body.dark span.active-follower { left: 49% } body.light span.active-follower { left: 1% } .rco-layout-switcher.ls_switcher>span.active { color: var(--mainBackground); opacity: 1 } .rco-layout-switcher.ls_button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; cursor: pointer; font-size: 1em; line-height: 1em } .rco-layout-switcher.ls_button>div.nls-dot { width: 0.7rem; height: 0.7rem; background: var(--mainColor); border: 1px solid var(--mainColor); border-radius: 100%; } .rco-layout-switcher.ls_button>div { font-size: 1em; text-align: center; letter-spacing: .02em; text-transform: uppercase; height: 1em; overflow: hidden; } .rco-layout-switcher.ls_button>div .nls-hold { -webkit-transition: -webkit-transform .75s ease-out; transition: -webkit-transform .75s ease-out; -o-transition: transform .75s ease-out; transition: transform .75s ease-out; transition: transform .75s ease-out, -webkit-transform .75s ease-out } .rco-layout-switcher.ls_button.dark-active .nls-hold { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) } .rco-layout-switcher.ls_button.dark-active .nls-dot { background: none; } /** Rco Number Counter ------------------------------ */ .rco-number-counter { display: inline-block; overflow: hidden; height: 1em; width: auto; position: relative; padding-right: 0.1em; margin-bottom: 0.2em; --fontSize: 50px; --mobileFontSize: 50px; font-size: var(--fontSize) } .align-center .rco-number-counter { padding-right: 0 } .rco-number-counter .ct-toggle .value-loop-char, .rco-number-counter .ct-text .value-loop-char { text-align: center; } .rco-number-counter .ct-text { height: 1em; } .rco-number-counter .ct-text>* { display: inline-block; vertical-align: bottom; margin-left: 20px; margin-bottom: 0.5em } .rco-number-counter .ct-number .ct-number-word { text-align: center } .ct-number-char { margin-left: -0.1em; } .rco-number-counter .count-start, .rco-number-counter .count-end { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%) } .rco-number-counter .ct-toggle, .rco-number-counter .ct-number, .rco-number-counter .ct-text { display: inline-block; float: left; line-height: 1 } .align-right .rco-number-counter { padding-right: 0; } .align-right .rco-number-counter .ct-number-char { text-align: right; } @media only screen and (max-width: 750px) { .rco-number-counter { font-size: var(--mobileFontSize) } } /** Rco Circle Text ------------------------------ */ .rco-circular-text { display: inline-block; position: relative; overflow: hidden; --fontSize: 15px; margin-left: -1; --background: var(--mainColor) } .circular-text-content { display: block; position: absolute; height: 450px; width: 450px; } .circular-text-wrap { display: inline-block; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; border-radius: 50%; position: relative } .circle-char, .circle-word { -webkit-transform-origin: bottom center; -ms-transform-origin: bottom center; transform-origin: bottom center; display: inline-block; text-transform: uppercase; font-size: var(--fontSize); text-align: center; left: 50%; height: 50%; position: absolute; width: 20px; z-index: 999999; } .circle-word { left: 50%; top: 0; height: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } .rco-circular-text span.material-icons { font-size: 5px; font-variation-settings: 'FILL' 1, 'wght' 100, 'GRAD' 0, 'opsz' 10 } .rco-circular-text .circular-text-icon span.material-icons { font-size: 1.5em; } .circular-text-icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 999999; cursor: pointer } .circular-text-icon span { font-size: 40px; /* transform: rotate(90deg)*/ } .rco-circular-text.blur-bg::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 90%; height: 90%; background: transparent; border-radius: 50%; z-index: -1; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); backdrop-filter: blur(10px) grayscale(0.3); -webkit-backdrop-filter: blur(10px) grayscale(0.3); } .rco-circular-text.has-bg::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 90%; height: 90%; background: transparent; border-radius: 50%; z-index: -1; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: var(--background) } .rco-circular-text.has-bg, .rco-circular-text.has-bg a { color: var(--mainBackground) } .fixed { position: fixed; top: var(--top); left: var(--left); right: var(--right); bottom: var(--bottom); --top: unset; --left: unset; --right: unset; --bottom: unset; z-index: 99999; } /** Single Image ------------------------------ */ .single-image { display: block; width: var(--width); height: var(--height); margin-bottom: 30px; --width: 100%; --height: auto; --mobileWidth: 100%; --mobileHeight: auto } .single-image.align-right { margin-left: auto; } .single-image.align-center { margin-left: auto; margin-right: auto } .single-image img { width: 100%; height: var(--height); -o-object-fit: cover; object-fit: cover } .single-image.parallax-image { overflow: hidden; } .single-image.parallax-image .image-parallax-wrap { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; } .single-image.parallax-image .image-parallax-wrap img { -o-object-fit: cover; object-fit: cover; height: 100%; will-change: transform } @media only screen and (max-width: 750px) { .single-image img, .single-image { width: var(--mobileWidth); height: var(--mobileHeight); -o-object-fit: cover; object-fit: cover } } /** Image Compare ------------------------------ */ .image-compare { display: block; width: 100%; } .image-compare>div { width: 100%; display: block; } .image-compare>div img { width: 100%; -o-object-fit: cover; object-fit: cover; } .image-compare>div.compare-image-2 { position: absolute; top: 0; z-index: -1; left: 0; } @media only screen and (max-width: 750px) { .image-compare>div, .image-compare>div img { height: 100%; } .image-compare, .section.fullscreen { --mobileHeight: 100svh; min-height: var(--mobileHeight) } } /** Icons ------------------------------ */ .rco-icon { display: inline-block; --fontSize: 50px; --rotate: 0deg; --color: var(--mainColor); --fill: 0; --wgt: 200; --mobileFontSize: 50px; font-variation-settings: 'FILL' var(--fill), 'wght' var(--wgt), 'GRAD' 0, 'opsz' 10; margin-bottom: 1em; } .rco-icon.is_inview .material-icons { -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; font-variation-settings: 'FILL' 1, 'wght' var(--wgt), 'GRAD' 0, 'opsz' 10; } .project-page-header.half-image .rco-icon { position: absolute; bottom: 0; left: 0; } .rco-icon.align-right { margin-left: auto; display: block } .rco-icon span { font-size: var(--fontSize); -webkit-transform: rotate(var(--rotate)); -ms-transform: rotate(var(--rotate)); transform: rotate(var(--rotate)); color: var(--color) } @media only screen and (max-width: 750px) { .rco-icon span { font-size: var(--mobileFontSize) } } /** Buttons ------------------------------ */ .rco-button { --color: var(--mainColor); --bg: var(--secondaryBackground); position: relative; display: inline-block; margin-bottom: 1em; } .rco-button.align-center { margin: 0 auto; } .rco-button a { text-decoration: none; color: var(--color); display: inline-block; position: relative; } .rco-button a:hover { color: var(--hoverColor) } .blend .rco-button.fill a { color: #000; background: #fff; } .rco-button.button-sm a { font-size: 15px } /* Underlied Icon */ .rco-button.underline a { -webkit-transition: color.3s ease, padding .4s ease; -o-transition: color.3s ease, padding .4s ease; transition: color.3s ease, padding .4s ease; } .rco-button.underline.icon-left::before, .rco-button.underline.icon-left::after { content: attr(data-icon); font-family: 'Material Icons'; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 1em; -webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease } .rco-button.underline.icon-right::before, .rco-button.underline.icon-right::after { content: attr(data-icon); font-family: 'Material Icons'; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 1em; -webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; color: var(--mainColor); } .rco-button.underline.icon-right::before { right: unset; left: 0; -webkit-transform: translateX(-1em) translateY(-50%); -ms-transform: translateX(-1em) translateY(-50%); transform: translateX(-1em) translateY(-50%); opacity: 0; } .rco-button.underline.icon-left::after { left: unset; right: 0; -webkit-transform: translateX(1em) translateY(-50%); -ms-transform: translateX(1em) translateY(-50%); transform: translateX(1em) translateY(-50%); opacity: 0; } .rco-button.underline.icon-right a { padding-right: 1.5em; } .rco-button.underline.icon-left a { padding-left: 1.5em; } .rco-button.underline .button-line { position: absolute; bottom: -0.1em; left: 0; width: 100%; height: 0.1em; background: var(--color); -webkit-transition: background .3s; -o-transition: background .3s; transition: background .3s } .rco-button.underline.icon-right:hover::after { -webkit-transform: translateX(1em) translateY(-50%); -ms-transform: translateX(1em) translateY(-50%); transform: translateX(1em) translateY(-50%); opacity: 0 } .rco-button.underline.icon-right:hover::before { -webkit-transform: translateX(0) translateY(-50%); -ms-transform: translateX(0) translateY(-50%); transform: translateX(0) translateY(-50%); opacity: 1 } .rco-button.underline.icon-left:hover::before { -webkit-transform: translateX(-1em) translateY(-50%); -ms-transform: translateX(-1em) translateY(-50%); transform: translateX(-1em) translateY(-50%); opacity: 0 } .rco-button.underline.icon-left:hover::after { -webkit-transform: translateX(0) translateY(-50%); -ms-transform: translateX(0) translateY(-50%); transform: translateX(0) translateY(-50%); opacity: 1 } .rco-button.underline.icon-left a:hover { padding-left: 0; padding-right: 1.5em } .rco-button.underline.icon-right a:hover { padding-right: 0; padding-left: 1.5em } .rco-button.underline a:hover .button-line { background: var(--hoverColor); } .rco-button.underline:hover a .button-line { -webkit-animation-name: toggleLine; animation-name: toggleLine; -webkit-animation-duration: .55s; animation-duration: .55s; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } .rco-button a.underline.detect-pov .button-line { width: 0% } .rco-button a.underline.detect-pov.is-inview .button-line { width: 100% } /* Outlined & Fill Icon */ .rco-button.fill a, .rco-button.outline a { padding: 1em 1.5em; border: 1px solid; border-color: var(--color); border-radius: 2em; } .rco-button.fill a { border: none; background: var(--color); color: var(--mainBackground); padding: 1em 1.75em; } .rco-button.outline a::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; height: 0%; width: 100%; background: var(--color); z-index: -1; -webkit-transition: height .3s ease-out; -o-transition: height .3s ease-out; transition: height .3s ease-out } .rco-button.fill, .rco-button.outline { overflow: hidden; border-radius: 2em; --hoverColor: var(--mainBackground); } .rco-button.fill { --hoverColor: var(--mainColor); } .rco-button.outline a:hover::after { height: 100% } .rco-button.fill.icon-right::after, .rco-button.fill.icon-right::before, .rco-button.outline.icon-right::after, .rco-button.outline.icon-right::before { content: attr(data-icon); font-family: 'Material Icons'; position: absolute; top: 50%; right: 0; -webkit-transform: translateX(-1em) translateY(-50%); -ms-transform: translateX(-1em) translateY(-50%); transform: translateX(-1em) translateY(-50%); font-size: 1em; -webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; z-index: 1 } .rco-button.fill.icon-left::after, .rco-button.fill.icon-left::before, .rco-button.outline.icon-left::after, .rco-button.outline.icon-left::before { content: attr(data-icon); font-family: 'Material Icons'; position: absolute; top: 50%; left: 0; -webkit-transform: translateX(1em) translateY(-50%); -ms-transform: translateX(1em) translateY(-50%); transform: translateX(1em) translateY(-50%); font-size: 1em; -webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease } .rco-button.fill.icon-left::after, .rco-button.outline.icon-left::after { -webkit-transform: translateX(1em) translateY(1.5em); -ms-transform: translateX(1em) translateY(1.5em); transform: translateX(1em) translateY(1.5em); } .rco-button.fill.icon-right::after, .rco-button.outline.icon-right::after { -webkit-transform: translateX(-1em) translateY(1.5em); -ms-transform: translateX(-1em) translateY(1.5em); transform: translateX(-1em) translateY(1.5em); } .rco-button.fill.icon-left a, .rco-button.outline.icon-left a { padding-left: 2.5em } .rco-button.fill.icon-right a, .rco-button.outline.icon-right a { padding-right: 2.5em } .rco-button.fill.icon-right:hover::before, .rco-button.outline.icon-right:hover::before { -webkit-transform: translateX(-1em) translateY(-2.5em); -ms-transform: translateX(-1em) translateY(-2.5em); transform: translateX(-1em) translateY(-2.5em); color: var(--hoverColor) } .rco-button.fill.icon-right:hover::after, .rco-button.outline.icon-right:hover::after { -webkit-transform: translateX(-1em) translateY(-50%); -ms-transform: translateX(-1em) translateY(-50%); transform: translateX(-1em) translateY(-50%); color: var(--hoverColor) } .rco-button.fill.icon-left:hover::before, .rco-button.outline.icon-left:hover::before { -webkit-transform: translateX(1em) translateY(-2em); -ms-transform: translateX(1em) translateY(-2em); transform: translateX(1em) translateY(-2em); color: var(--hoverColor) } .rco-button.fill.icon-left:hover::after, .rco-button.outline.icon-left:hover::after { -webkit-transform: translateX(1em) translateY(-50%); -ms-transform: translateX(1em) translateY(-50%); transform: translateX(1em) translateY(-50%); color: var(--hoverColor) } /** Rco Accordion ------------------------------ */ .rco-accordion .accordion-wrap { list-style: none; padding: 0 } .rco-accordion .accordion-title { cursor: pointer; position: relative; padding-bottom: 0.75em; padding-top: 0.75em; display: block; margin-bottom: 0; color: var(--mainColor); } .rco-accordion .accordion-item:first-child .accordion-title { padding-top: 0; } .rco-accordion .accordion-wrap .accordion-item { width: 100% } .rco-accordion .accordion-wrap .accordion-item::before { position: relative; display: inline-block; float: left; opacity: 0.4; content: attr(data-index); display: none } .rco-accordion .accordion-title::after { position: absolute; content: ""; width: 100%; height: 1px; background: var(--mainColor); opacity: 0.1; bottom: 0; left: 0; -webkit-transition: width 1s ease-out; -o-transition: width 1s ease-out; transition: width 1s ease-out } .rco-accordion .accordion-item .accordion-title.detect-pov::after { width: 0% } .rco-accordion .accordion-item .accordion-title.detect-pov.is-inview::after { width: 100% } .rco-accordion .accordion-title>span.has-anim-text { display: block; } .rco-accordion .accordion-title::before { position: absolute; content: ""; width: 0; height: 1px; background: #191919; opacity: .3; bottom: 0; left: 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease } .light .rco-accordion .accordion-title::before, .light .rco-accordion .accordion-title::after { background: #fff } .rco-accordion .active .accordion-title::before { width: 100% } .rco-accordion .accordion-item .accordion-title.detect-pov .accordion-toggle { opacity: 0; } .rco-accordion .accordion-toggle { float: right; font-size: inherit; -webkit-transition: opacity .3s ease, margin .5s ease, -webkit-transform .5s cubic-bezier(0.2, 0.7, 0.2, 1); transition: opacity .3s ease, margin .5s ease, -webkit-transform .5s cubic-bezier(0.2, 0.7, 0.2, 1); -o-transition: transform .5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity .3s ease, margin .5s ease; transition: transform .5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity .3s ease, margin .5s ease; transition: transform .5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity .3s ease, margin .5s ease, -webkit-transform .5s cubic-bezier(0.2, 0.7, 0.2, 1); font-variation-settings: 'FILL' 1, 'wght' 100, 'GRAD' 0, 'opsz' 10; font-size: 1em; opacity: .3; } .rco-accordion .accordion-item .accordion-title.detect-pov.is-inview .accordion-toggle { opacity: .3; margin-top: -1em } .rco-accordion li.active .accordion-title.detect-pov.is-inview .accordion-toggle, .rco-accordion li.active .accordion-toggle { -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); opacity: 1; } .rco-accordion .accordion-content { overflow: hidden; position: relative; width: 100%; height: 0; } .rco-accordion .accordion-content-wrap { padding-top: 1em } /** Rco Infinite Tabs ------------------------------ */ .rco-infinite-tabs { display: block; float: left; width: 100% } .rco-infinite-tabs .tab-title-wrap { white-space: nowrap; list-style: none; padding: 0; position: relative } .rco-infinite-tabs .tab-title { display: inline-block; margin-right: 150px; position: relative; overflow: hidden; padding-bottom: 0; opacity: 0.05; -webkit-transition: opacity .4s ease-out; -o-transition: opacity .4s ease-out; transition: opacity .4s ease-out; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 1.2 } .rco-infinite-tabs .tab-title.active { opacity: 1 } .rco-infinite-tabs .tab-contents-wrap { position: relative; width: 100%; padding-top: 100px; } .rco-infinite-tabs .tab-contents-wrap::before { position: absolute; content: ''; width: 100%; left: 0; height: 1px; background: #191919; opacity: .1; top: 25px; } .light .rco-infinite-tabs .tab-contents-wrap::before { background: #fff } .rco-infinite-tabs .tab-content { opacity: 0; -webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; display: none; } .rco-infinite-tabs .tab-content.active { opacity: 1; display: block } @media only screen and (max-width: 750px) { .rco-infinite-tabs .tab-title { margin-right: 50px; } } /** Infinite Carousel ------------------------------ */ .rco-infinite-carousel { display: block; float: left; width: 100%; white-space: nowrap; will-change: transform; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); --gap: 30px; } .rco-infinite-carousel .carousel--wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; float: left; } .rco-infinite-carousel .carousel--item { width: 25vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .rco-infinite-carousel .carousel--item img { margin: 0 auto; height: 100%; max-width: 100%; max-height: 100%; } /** Rco Marquee ------------------------------ */ .rco-marquee { white-space: nowrap; display: block; will-change: transform; } .marquee-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; float: left; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .marquee-wrap span { display: inline-block; margin: 0 30px 0 30px; font-size: 1em; vertical-align: middle; font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, ; line-height: 0.5em; } .marquee-wrap>* { margin-bottom: 0 } .marquee-wrap .material-icons { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48 } .marquee-wrap .material-icons.no-fill { font-variation-settings: 'FILL' 0 } /** Dymamic List ------------------------------ */ .rco-dynamic-list { display: block; float: left; width: 100%; } .rco-dynamic-list ul { list-style: none; padding: 0; margin: 0; } .rco-dynamic-list ul li { padding-bottom: 0.5em; position: relative; -webkit-transition: opacity .2s ease; -o-transition: opacity .2s ease; transition: opacity .2s ease; display: block; float: left; width: 100%; } .rco-dynamic-list.horizontal ul li { width: auto; padding-right: 25px } .rco-dynamic-list ul li a { padding-bottom: 0.5em; } .rco-dynamic-list ul li .list-image { position: absolute; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 300px; opacity: 0; pointer-events: none; -webkit-transition: opacity .2s ease; -o-transition: opacity .2s ease; transition: opacity .2s ease; z-index: -1 } .rco-dynamic-list ul li .list-image img { width: 100%; } .rco-dynamic-list.hovered li { opacity: 0.1; z-index: 0 } .rco-dynamic-list.hovered li.current { opacity: 1; z-index: 1; } .rco-dynamic-list.hovered li.current .list-image { opacity: 1 } /** Lightbox Gallery ------------------------------ */ .lightbox-gallery .grid--item { -webkit-filter: grayscale(1); filter: grayscale(1); will-change: filter, transform; -webkit-transition: -webkit-filter .3s ease; transition: -webkit-filter .3s ease; -o-transition: filter .3s ease; transition: filter .3s ease; transition: filter .3s ease, -webkit-filter .3s ease; } .lightbox-gallery .grid--item:hover { -webkit-filter: none; filter: none; } .lightbox-current { position: fixed; } .lightbox-convert { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; position: fixed !important; bottom: 25px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 75px; z-index: 99999999; left: 50%; gap: 0 !important; pointer-events: all } .lightbox-thumb { padding: 0 13px; height: 100%; -webkit-filter: grayscale(1); filter: grayscale(1); opacity: .25; -webkit-transition: opacity .3s ease-out, -webkit-filter .3s ease-out; transition: opacity .3s ease-out, -webkit-filter .3s ease-out; -o-transition: filter .3s ease-out, opacity .3s ease-out; transition: filter .3s ease-out, opacity .3s ease-out; transition: filter .3s ease-out, opacity .3s ease-out, -webkit-filter .3s ease-out } .lightbox-thumb.active { -webkit-filter: grayscale(0); filter: grayscale(0); opacity: 1; } .lightbox-thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .rco-lightbox-hold { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; pointer-events: none } .grid--item.lightbox-thumb .parallax-wrap { width: auto !important; } .grid--item.lightbox-thumb .parallax-wrap img { height: 100% !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } .rco-lightbox-hold.active { pointer-events: all } .lightbox-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background: var(--secondaryBackground); z-index: 99998; } @media only screen and (max-width: 750px) { .lightbox-thumb { padding: 0; width: 50px; margin-right: 10px; } .rco-lightbox-hold.active span.active-hold { display: none; } .lightbox-gallery .grid--item { --column: unset !important; } } span.active-hold { display: block; position: absolute; left: 50%; bottom: 21px; width: 100px; height: 0px; border: 0px solid; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: inherit; -webkit-transition: height .5s ease, border .5s ease; -o-transition: height .5s ease, border .5s ease; transition: height .5s ease, border .5s ease } .rco-lightbox-hold.active span.active-hold { height: 88px; border: 2px solid; } .lightbox-gal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; } .lightbox-gal>img { width: auto; height: auto; position: absolute; top: 45%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 80%; max-height: 75%; opacity: 0; visibility: hidden } .lightbox-gal>img.active { opacity: 1; visibility: visible; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* transition: transform .5s ease-out*/ } .lightbox-close { position: absolute; top: 75px; right: 50px; z-index: 999999; cursor: pointer; opacity: 0; -webkit-transition: all .4s ease-out .4s; -o-transition: all .4s ease-out .4s; transition: all .4s ease-out .4s } .active .lightbox-close { opacity: 1; top: 50px } .lightbox-fraction { position: absolute; bottom: 130px; left: 50%; -webkit-transform: translateX(-50%) translateY(50%); -ms-transform: translateX(-50%) translateY(50%); transform: translateX(-50%) translateY(50%); z-index: 99999; text-align: center; opacity: 0; -webkit-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out } .rco-lightbox-hold.active .lightbox-fraction { opacity: 1; -webkit-transform: translateX(-50%) translateY(0%); -ms-transform: translateX(-50%) translateY(0%); transform: translateX(-50%) translateY(0%); } .lightbox-fraction>div { display: inline-block; float: left; } .lightbox-fraction>div:first-child::after { content: ""; display: inline-block; width: 15px; height: 2px; background: #191919; vertical-align: middle; margin: 0 5px; margin-top: -1px; } /** Lightbox ------------------------------ */ /* .rco-lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99999; } .lightbox-image { position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 90%; height: 80%; } .lightbox-image img { width: 100%; height: 100%; object-fit: cover; } .lightbox-overlay { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: #f5f5f5; } .lighbox-close { position: absolute; top: 50px; right: 50px; } */ .lightbox { position: relative; -o-object-fit: cover; object-fit: cover; } .lightbox.open { position: fixed; top: 50%; left: 50%; -o-object-fit: cover; object-fit: cover; max-width: 80%; max-height: 90%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 99999 } .lightbox-focus { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99998; -webkit-backdrop-filter: blur(15px) brightness(.7) grayscale(1); backdrop-filter: blur(15px) brightness(.7) grayscale(1); opacity: 0; -webkit-transition: all 1.5s cubic-bezier(0.7, 0, 0.0, 1); -o-transition: all 1.5s cubic-bezier(0.7, 0, 0.0, 1); transition: all 1.5s cubic-bezier(0.7, 0, 0.0, 1); pointer-events: none; } .lightbox-focus.open { opacity: 1 } /** Info Box ------------------------------ */ .rco-info-box { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: var(--height); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-right: 2em; margin-bottom: 1em; position: relative; --height: auto; height: var(--height); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .rco-info-box.bordered { border: 0.05rem solid var(--mainColor); padding: 2.5em; } .info-box-content { margin-top: auto; z-index: 1; max-width: 80%; } @media only screen and (max-width: 750px) { .info-box-content { max-width: 100%; } } .info-box-top { position: relative; z-index: 1; } .info-box-top img { width: auto !important; } .info-box-title { position: relative; display: inline-block; } .info-box-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.1em; background: #191919; } .rco-info-box.video-bg, .rco-info-box.has-bg { padding: 2.5em; } .info-box-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0 } .info-box-bg video, .info-box-bg .single-image, .info-box-bg .rco-video, .info-box-bg img { height: 100% !important; -o-object-fit: cover; object-fit: cover } /** Scroll Button ------------------------------ */ .rco-scroll-button { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer } .rco-scroll-button.text-icon i { margin-left: 10px; vertical-align: middle; display: inline-block; font-size: 1em; margin-top: -0.2em; } .rco-scroll-button p { display: inline-block; vertical-align: middle; margin: 0; } .material-icons[data-md-icon]:before { content: attr(data-md-icon); } /** Videos ------------------------------ */ .rco-video { display: inline-block; position: relative; width: 100%; font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48 } .rco-video.align-center { float: none; margin: 0 auto } .rco-video.no-interactions { pointer-events: none } .rco-video>.plyr { height: 100% } .rco-video video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .rco-video>.plyr.not-started .plyr__controls.rco-controls-wrap { visibility: hidden } :root { --plyr-color-main: #fff; --plyr-range-track-height: 1.5px; --plyr-range-thumb-background: transparent; --plyr-range-thumb-active-shadow-width: 0; --plyr-range-thumb-shadow: none } .rco-video.dark .rco-player-control { color: #191919 } .rco-video.dark .plyr__progress { background: rgba(0, 0, 0, 0.5) } .dark { --plyr-color-main: #191919; } .plyr__control .rco-play, .plyr__control.plyr__control--pressed[data-plyr="play"] .rco-pause { display: block; } .plyr__control.plyr__control--pressed[data-plyr="play"] .rco-play, .plyr__control .rco-pause { display: none } .plyr__controls__item.plyr__volume button.plyr__control--pressed[data-plyr="mute"] .rco-unmute, .plyr__controls__item.plyr__volume button[data-plyr="mute"] .rco-mute { display: block } .plyr__controls__item.plyr__volume button[data-plyr="mute"] .rco-unmute, .plyr__controls__item.plyr__volume button.plyr__control--pressed[data-plyr="mute"] .rco-mute { display: none } .plyr__control[data-plyr="play"] svg { display: none; } .plyr__controls__item.plyr__volume svg { display: none; } .plyr__control[data-plyr="fullscreen"] svg { display: block; } .plyr--video .plyr__controls { width: 100%; margin: 0 auto; padding-bottom: 25px; background: none; } .plyr--video .plyr__control:focus-visible, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] { background: none; } .plyr__controls__item.plyr__progress__container { width: 70%; -webkit-box-flex: 0; -ms-flex: none; flex: none; margin: 0 auto; } .plyr--fullscreen-enabled [data-plyr=fullscreen] { position: absolute; bottom: 708px; } .plyr__controls .plyr__controls__item:first-child, .plyr__volume { width: 15%; text-align: center; margin: 0; display: block; } button.plyr__control.plyr__control--overlaid .rco-player-control { display: none !important; } .plyr--full-ui.plyr--video .plyr__control--overlaid { padding: 40px; } .plyr--full-ui.plyr--video .plyr__control--overlaid svg { display: block; fill: #191919; width: 20px; height: 20px; } .rco-video.rco-play .plyr__controls, .plyr--stopped.plyr--paused .plyr__controls { display: none; } .rco-video.rco-play-started .plyr__controls, .plyr--playing .plyr__controls, .plyr--paused .plyr__controls { display: -webkit-box; display: -ms-flexbox; display: flex } .rco-video .play-icon { position: absolute; top: 50%; left: 50%; background: #fff; z-index: 1; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; cursor: pointer; -webkit-transition: opacity .25s ease-out; -o-transition: opacity .25s ease-out; transition: opacity .25s ease-out } .rco-video .play-icon.icon::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; background: #191919; width: 100px; height: 100px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; } .rco-video .play-icon.icon span { position: relative; z-index: 1; font-size: 50px; line-height: 1; color: #fff; } .rco-video.rco-play-started .play-icon { opacity: 0; pointer-events: none } .rco-video .plyr__progress .plyr__tooltip { background: none; color: #fff; -webkit-box-shadow: none; box-shadow: none; } .rco-video .plyr__tooltip:before { display: none; } .rco-video.dark .plyr__progress .plyr__tooltip { color: #191919 } .rco-video .play-icon.text { background: none; font-size: 120%; color: #fff; text-decoration: underline; } @-webkit-keyframes iconAnim { 0% { left: 0; opacity: 1; } 50% { left: 20px; opacity: 0; } 51% { left: -20px; opacity: 0; } 100% { left: 0; opacity: 1 } } @keyframes iconAnim { 0% { left: 0; opacity: 1; } 50% { left: 20px; opacity: 0; } 51% { left: -20px; opacity: 0; } 100% { left: 0; opacity: 1 } } .nlv.plyr { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 999999; background: #000; opacity: 1; -webkit-transition: opacity .5s ease-out; -o-transition: opacity .5s ease-out; transition: opacity .5s ease-out; pointer-events: none; } .nlv .plyr__video-wrapper { width: 100%; height: 80%; opacity: 0; -webkit-transition: opacity .5s ease-out .2s; -o-transition: opacity .5s ease-out .2s; transition: opacity .5s ease-out .2s; } @media only screen and (max-width: 750px) { /* Rco Video */ .rco-video .play-icon.icon::after { width: 50px; height: 50px; } .rco-video .play-icon.icon span { font-size: 30px; } .rco-video.video_lightbox .play-icon { margin-left: 15px; } .nlv .plyr__video-wrapper { height: auto; } .plyr__controls__item.plyr__progress__container { width: 60%; } .plyr__controls .plyr__controls__item:first-child, .plyr__volume { width: 20%; } } .nlv.lightbox-open.plyr { opacity: 1; pointer-events: all } .nlv.lightbox-open.plyr .plyr__video-wrapper { opacity: 1; } .nlv .plyr--video .plyr__controls { width: 80% } .nlv [data-plyr=fullscreen] { display: none; } span.lightbox-close { position: fixed; top: 5%; left: 9%; color: #fff; z-index: 99999999; opacity: 0; pointer-events: none; -webkit-transition: opacity .5s ease-out .2s, -webkit-transform .5s ease-out; transition: opacity .5s ease-out .2s, -webkit-transform .5s ease-out; -o-transition: opacity .5s ease-out .2s, transform .5s ease-out; transition: opacity .5s ease-out .2s, transform .5s ease-out; transition: opacity .5s ease-out .2s, transform .5s ease-out, -webkit-transform .5s ease-out; cursor: pointer } .nlv.lightbox-open span.lightbox-close { opacity: 1; pointer-events: all } span.lightbox-close.temp_hidden { -webkit-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px) } .cursor-active .plyr__video-embed iframe { pointer-events: none } .rco-video.cursor-active { cursor: none } .rco-video.cursor-active .rco-controls-wrap { cursor: auto } .hover-player .mouse-cursor-icon { font-size: 35px; line-height: 35px; } /** Menus ------------------------------ */ ul.menu { padding: 0; margin-bottom: 1em; } ul.menu.horizontal { margin-bottom: 0; } ul.menu li { display: block } ul.menu.horizontal li { display: inline-block; padding-right: 25px; padding-bottom: 1em; } ul.menu.horizontal li:last-child { padding-right: 0; } ul.menu.social-menu li a { color: #fff; display: block; width: 100%; } ul.menu.social-menu li a::after { content: 'arrow_outward'; font-family: 'Material Icons'; text-align: right; display: inline-block; vertical-align: bottom; margin-left: 10px; float: right; } @media only screen and (max-width: 750px) { ul.menu.horizontal li { padding-bottom: 1em; padding-right: 0; padding-left: 0; } } /* Subscribe Form */ .rco-subscribe-form { display: block; float: left; position: relative; min-width: 500px; } .rco-subscribe-form .field-wrap { display: block; float: left; } .rco-subscribe-form .field-wrap>label { position: absolute; top: 0; left: 0; } .rco-subscribe-form .field-wrap>input { background: none; border: none; padding: 15px 15px 15px 0px; color: var(--mainColor); } .rco-subscribe-form::after { content: ""; display: block; width: 100%; height: 1px; background-color: var(--mainColor); float: left; opacity: .3; } .rco-subscribe-form .send-wrap { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 0.65em; display: block; } .rco-subscribe-form .send-wrap button.button.button-block { background: none; border: none; color: var(--mainBackground); background: var(--mainColor); padding: 5px 15px; border-radius: 35px; } .rco-subscribe-form .field-wrap>input:focus { outline: none; } @media only screen and (max-width: 750px) { .rco-subscribe-form { width: auto; min-width: auto; } } /* source: assets/css/_css/animation.css */ /*=============================================== # Animations =================================================*/ /* ## General animations =================================================*/ .slideUp { will-change: transform } .scaleIn img, .scaleIn { will-change: transform } .maskDown, .maskUp { visibility: hidden } .has-anim { visibility: hidden; will-change: transform opacity; } .rco-animation-wrapper { display: block; width: 100%; pointer-events: none !important } .rco-animation-wrapper>* { pointer-events: all; } /* ## Image nimations =================================================*/ .blockUp { position: relative } span.block-ov { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: darkgray; } /* ## Text Animations =================================================*/ .has-anim-text { -webkit-font-kerning: none; font-kerning: none; -webkit-text-rendering: optimizeSpeed; text-rendering: optimizeSpeed; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 0; } #site-navigation.fullscreen_menu .has-anim-text { opacity: 1; } .has-anim-text.anim_start { opacity: 1 } .anim_char, .anim_word, .anim_line { overflow: hidden; vertical-align: top; will-change: transform; padding-right: 0.03em; margin-right: -0.03em; padding-bottom: 0.09em; margin-bottom: -0.09em; } .text-wrapper .no-margin .anim_line { margin: 0; padding: 0 } .anim_word { white-space: nowrap; } .anim_char span, .anim_word span, .anim_line span { display: block; will-change: transform } .fade .anim_char, .fade .anim_word, .fade .anim_line { overflow: visible } .mask-wrap { display: block; position: relative } .mask-wrap .clone { position: absolute; top: 0; left: 0; color: red; z-index: -1; } .charsScaleUp .anim_char span { -webkit-transform-origin: bottom center; -ms-transform-origin: bottom center; transform-origin: bottom center } .charsScaleDown .anim_char span { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center } .charsRotateIn .anim_char span { -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top } .linesMask .anim_line span.clone { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; z-index: 0; white-space: nowrap; opacity: .2; } .linesMask .anim_line span { width: 0%; overflow: hidden; white-space: nowrap } .has-anim-text.slideLeft, .has-anim-text.slideRight, .has-anim-text.slideLeft .anim_line, .has-anim-text.slideRight .anim_line { white-space: nowrap; overflow: visible; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .slideLeft .anim_line, .slideRight .anim_line { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } .charsFadeOn .anim_char { will-change: opacity } /** Parallax Scroll ------------------------------ */ .has-parallax { will-change: transform } /* source: assets/css/_css/mobile.css */ @media only screen and (min-width: 751px){ .hide-desktop { display: none !important; } } @media only screen and (max-width: 750px) { .hide-mobile { display: none !important; } .vid-but-for-touch { display: block } .list-images-wrapper { position: fixed; visibility: hidden; opacity: 0; top: 50vh; left: 50vw; transform: translate(-50%, -50%) !important; } .list-img { transform: translate3d(0, 0%, 0); } .list-img>div { transform: translate3d(0, 0, 0) scale(1); } .s3t-images { position: fixed; visibility: hidden; opacity: 0; top: 50vh; left: 50vw; transform: translate(-50%, -50%) !important; } .d-img { transform: translate3d(0, 0%, 0); } .d-img>div { transform: translate3d(0, 0, 0) scale(1); } .mobile-align-center { text-align: center } .mobile-align-left { text-align: left } .mobile-align-right { text-align: right } .mobile-self-top { align-self: flex-start } .mobile-self-bottom { align-self: flex-end } .mobile-align-left { text-align: left } .mobile-align-center { text-align: center } .mobile-align-right { text-align: right } .fullscreen { height: 100dvh } .mobile-align-left { text-align: left } h1, .text-h1 { --mobileFontSize: 46.88px; font-size: var(--mobileFontSize); line-height: 1.2em; letter-spacing: -0.03em; } h2, .text-h2 { --mobileFontSize: 36.50px; font-size: var(--mobileFontSize); line-height: 50px; letter-spacing: -0.03em; } h3, .text-h3 { --mobileFontSize: 28.2px; font-size: var(--mobileFontSize); line-height: 40px; letter-spacing: -0.01em; } h4, .text-h4 { font-size: 26.56px; line-height: 38px; margin-left: -1px; font-weight: normal; margin-bottom: 1em; } h5, .text-h5 { font-size: 21.25px; line-height: 36px; margin: 0; } h6, .text-h6 { font-size: 17px; line-height: 28px; margin: 0; } p { margin-bottom: 0.3em; } .text-wrapper span.text-indent { display: none } .text-wrapper { width: var(--mobileWidth) } .mobile-align-right .menu-toggle { float: right; /* margin-left: 40px; */ } .align-mobile-left { text-align: left } .pt_word { display: block !important; float: left; width: 100%; } .align-left-mobile{ text-align: left !important; } .align-center-mobile{ text-align: center !important; } } /* source: assets/css/_css/section-background.css */ /* Section Backgrounds */ .section-background { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 0; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; min-height: 100%; } .section-background .rco-video>.plyr { height: inherit; } .section-background .s-bg-video { width: 100%; height: 100% } .section-background .s-bg-video video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .section-background .single-image.align-center { margin: 0 auto } .section-background .single-image { margin-bottom: 0 } .section-background .single-image img { height: 100%; -o-object-fit: cover; object-fit: cover } .section-background .rco-video, .section-background .rco-video video { height: auto; min-height: 100%; -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } /* source: assets/css/_css/header.css */ /*=============================================== # Site Header =================================================*/ .site-header { margin-bottom: 0; padding: 2em 0; z-index: 88888; -webkit-transition: background .3s ease-out; -o-transition: background .3s ease-out; transition: background .3s ease-out; position: relative; -webkit-transform: translate(0, 0%); -ms-transform: translate(0, 0%); transform: translate(0, 0%); position: relative; width: 100%; display: block; --bg: transparent; --stickyBg: #fff; background: var(--bg) /* float: left*/ ; pointer-events: none; } .smooth-header { position: absolute; top: 0; left: 0; width: 100%; } .site-header.sticky { position: absolute } .header-fixed-wrap { display: block; width: 100%; height: 120px; position: fixed; width: 100%; margin-bottom: 0; z-index: 88888; } .site-header.dynamic { -webkit-transition: padding .6s ease; -o-transition: padding .6s ease; transition: padding .6s ease } .site-header.fixed.dynamic, .site-header.fixed { position: fixed; } span.header-holder { display: block; width: 100%; } .site-header.dynamic { position: absolute } .header-wrapper.wrapper-full, .header-wrapper.wrapper-small, .header-wrapper.wrapper { margin-bottom: 0; z-index: 99999; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 25px; will-change: transform; pointer-events: none; } .header-wrapper.align-top { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important } .header-wrapper>div { margin-bottom: 0 } .header-wrapper.wrapper-full>div, .header-wrapper.wrapper>div { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; align-items: center; } .header-wrapper>div.align-center { justify-content: center; } .header-wrapper>div * { pointer-events: all; } .header-wrapper.wrapper-full>div.align-right, .header-wrapper.wrapper>div.align-right { -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; } /* .header-wrapper.wrapper > div:first-child { margin-left: 0; padding-left: 0; } */ .site-header.sticky.sticked { position: fixed; -webkit-transform: translate(0, -100%); -ms-transform: translate(0, -100%); transform: translate(0, -100%); background: var(--stickyBg); -webkit-transition: background 0s ease, padding 0s ease; -o-transition: background 0s ease, padding 0s ease; transition: background 0s ease, padding 0s ease; top: 0; padding: 25px 0 } .site-header.menu-open { background: transparent !important } /* .site-header.sticked .hide-sticky { display: none } */ .site-header.mx-difference { mix-blend-mode: difference } .site-header.mx-difference .toggle-line, .site-header.light .toggle-line { background-color: #fff; } .site-header .rco-button { margin-top: 0; margin-bottom: 0 } /* Site Branding - ------------------------------ */ .site-branding { display: block; width: 136px; position: relative } .site-logo { width: 100%; } .sticky-logo { width: 40px; display: none; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .sticky-logo img, .site-logo img { width: 100%; height: auto; } .rco-personalized-logo, .rco-personalized-icon { display: none; width: 100%; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .rco-personalized-logo { aspect-ratio: 210.88 / 56.95; -webkit-mask-image: url("../../images/brand/logo-rurally.svg"); mask-image: url("../../images/brand/logo-rurally.svg"); } .rco-personalized-icon { aspect-ratio: 60.65 / 56.95; -webkit-mask-image: url("../../images/brand/icone-rurally.svg"); mask-image: url("../../images/brand/icone-rurally.svg"); } /* Por padrão, esconda todas as variações */ img.sticky-light-logo, img.light-logo, img.sticky-dark-logo, img.dark-logo { display: none; } /* Exibe os logos corretamente para o estado "light" */ .site-header.light .sticky-dark-logo, .site-header.light .dark-logo { display: none; } .site-header.light .sticky-light-logo, .site-header.light .light-logo { display: block; } /* Exibe os logos corretamente para o estado "dark" */ .site-header.dark .sticky-light-logo, .site-header.dark .light-logo { display: none; } .site-header.dark .sticky-dark-logo, .site-header.dark .dark-logo { display: block; } /* Estado "sticked" - quando o header está fixo */ .site-header.sticked .site-logo { display: none; } .site-header.sticked .sticky-logo { display: block; } /* Header fixado em modo "light" */ .site-header.sticked.light .sticky-dark-logo { display: none; } .site-header.sticked.light .sticky-light-logo { display: block; } /* Header fixado em modo "dark" */ .site-header.sticked.dark .sticky-light-logo { display: none; } .site-header.sticked.dark .sticky-dark-logo { display: block; } /* img.sticky-light-logo, img.light-logo { display: none; } .site-header.light .sticky-dark-logo, .site-header.mx-difference .dark-logo, .site-header.light .dark-logo { display: none; } .site-header.light .sticky-light-logo, .site-header.mx-difference .light-logo, .site-header.light .light-logo { display: block; } .site-header.sticked .site-logo { display: none; } .site-header.sticked .sticky-logo { display: block } */ /* Menu Toggle ------------------------------ */ .menu-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .menu-toggle .toggle-lines { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 45px; margin-right: 15px; } .menu-toggle .toggle-lines.plus { width: 50px; height: 50px } .align-right .menu-toggle { float: right; margin-left: 40px; } .toggle-line { width: 100%; height: 1.5px; display: inline-block; background-color: #191919; margin: 3px 0; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; } .toggle-lines.plus .toggle-line:first-child { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .toggle-lines.plus .toggle-line { margin: 0; } .toggle-lines.plus .toggle-line:last-child { margin-top: -1.5px; } .toggle-text { display: block; float: left; position: relative; overflow: hidden; } .toggle-text::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--mainColor); -webkit-transition: width .7s cubic-bezier(0.2, 0.7, 0.2, 1); -o-transition: width .7s cubic-bezier(0.2, 0.7, 0.2, 1); transition: width .7s cubic-bezier(0.2, 0.7, 0.2, 1); } .menu-toggle.active .toggle-text::after { width: 0% } .toggle-text span { display: block; position: relative; -webkit-transition: -webkit-transform .7s cubic-bezier(0.2, 0.7, 0.2, 1); transition: -webkit-transform .7s cubic-bezier(0.2, 0.7, 0.2, 1); -o-transition: transform .7s cubic-bezier(0.2, 0.7, 0.2, 1); transition: transform .7s cubic-bezier(0.2, 0.7, 0.2, 1); transition: transform .7s cubic-bezier(0.2, 0.7, 0.2, 1), -webkit-transform .7s cubic-bezier(0.2, 0.7, 0.2, 1); } .toggle-text span::after { content: attr(data-close-text); display: block; position: absolute; bottom: 0; left: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .menu-toggle.active .toggle-text span { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%) } .menu-toggle:hover .toggle-text::after, .menu-toggle:hover .toggle-line { -webkit-animation-name: toggleLine; animation-name: toggleLine; -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-timing-function: ease; animation-timing-function: ease } .toggle-line:last-child { -webkit-animation-delay: .1s; animation-delay: .1s } .menu-toggle.active .toggle-line { margin: 0; -webkit-transition: -webkit-transform .6s ease; transition: -webkit-transform .6s ease; -o-transition: transform .6s ease; transition: transform .6s ease; transition: transform .6s ease, -webkit-transform .6s ease; } .menu-toggle.active .toggle-line:first-child { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } .menu-toggle.active .toggle-line:last-child { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: -1.5px; } @-webkit-keyframes toggleLine { 0% { -webkit-clip-path: inset(0% 0% 0% 0%); clip-path: inset(0% 0% 0% 0%); } 50% { -webkit-clip-path: inset(0% 0% 0% 100%); clip-path: inset(0% 0% 0% 100%); } 51% { -webkit-clip-path: inset(0% 100% 0% 0%); clip-path: inset(0% 100% 0% 0%); } 100% { -webkit-clip-path: inset(0% 0% 0% 0%); clip-path: inset(0% 0% 0% 0%); } } @keyframes toggleLine { 0% { -webkit-clip-path: inset(0% 0% 0% 0%); clip-path: inset(0% 0% 0% 0%); } 50% { -webkit-clip-path: inset(0% 0% 0% 100%); clip-path: inset(0% 0% 0% 100%); } 51% { -webkit-clip-path: inset(0% 100% 0% 0%); clip-path: inset(0% 100% 0% 0%); } 100% { -webkit-clip-path: inset(0% 0% 0% 0%); clip-path: inset(0% 0% 0% 0%); } } /* Site Mavigation ------------------------------ */ ul.menu { list-style: none; } ul.menu a { text-decoration: none; color: var(--mainColor); } div#site-navigation { display: block; float: left; } .menu-overlay { display: block; position: fixed; top: 0; left: 0; background: var(--secondaryBackground); width: 100%; height: 0vh; z-index: 999; pointer-events: none; overflow: hidden; will-change: width, height } ul.menu.text-h6 li { padding-bottom: 0.5em; } /* .menu-overlay::after { content: ""; display: block; position: absolute; left: 0; top: 130px; height: 1px; background: #000; opacity: 0.1; width: 100%; pointer-events: none !important; } */ .menu-overlay.dark::after { background: #fff; } #site-navigation.dark a { color: #fff } /** Classic Navigation ------------------------------ */ #site-navigation.classic.align-right { float: right; text-align: unset; margin-left: auto; } #site-navigation.classic.align-center ul.main-menu { float: none; margin: 0 auto; text-align: center; } #site-navigation.classic.align-center ul.main-menu .sub-menu-wrapper { text-align: left; } #site-navigation.classic ul.main-menu { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-left: 0; margin-bottom: 0 } #site-navigation.classic ul.main-menu>li { display: inline-block; padding: 0 25px; letter-spacing: -0.01em; position: relative; text-align-last: left; } #site-navigation.classic ul.main-menu>li:first-child { padding-left: 0; } #site-navigation.classic ul.main-menu>li:last-child { padding-right: 0; } #site-navigation.classic ul.main-menu>li>a { display: block; overflow: hidden; } #site-navigation.classic ul.menu>li>a>span { display: block; position: relative; -webkit-transition: -webkit-transform .7s cubic-bezier(0.2, 0.7, 0.2, 1); transition: -webkit-transform .7s cubic-bezier(0.2, 0.7, 0.2, 1); -o-transition: transform .7s cubic-bezier(0.2, 0.7, 0.2, 1); transition: transform .7s cubic-bezier(0.2, 0.7, 0.2, 1); transition: transform .7s cubic-bezier(0.2, 0.7, 0.2, 1), -webkit-transform .7s cubic-bezier(0.2, 0.7, 0.2, 1); } #site-navigation.classic ul.menu>li>a>span::after { content: attr(data-text); display: block; width: 100%; height: auto; position: absolute; opacity: .6; } #site-navigation.classic ul.main-menu>li>a:hover>span { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%) } #site-navigation.classic.justify-menu ul.main-menu { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #site-navigation.classic.justify-menu { width: 100%; } #site-navigation.classic.vertical ul.main-menu>li { display: block; padding: 0; } #site-navigation.classic.vertical ul.main-menu>li a { margin-bottom: 1em; padding: 0; } #site-navigation.classic.vertical.align-right ul.main-menu { text-align: right; } #site-navigation.classic .menu-item.has-children.classic { position: relative; } .rco-sub-menu-wrap { position: fixed; top: 0; left: 0; width: 100%; visibility: hidden; overflow: hidden; z-index: 888; } .rco-sub-menu-wrap.active { visibility: visible } div[data-elementor-type="sub-menu-type"] { z-index: 22; position: relative; } #site-navigation.classic ul.main-menu>li.has-children { position: relative; text-align-last: left } #site-navigation.classic ul.main-menu>li.has-children>.sub-menu { position: absolute; top: 0; left: 0; margin-top: 1em; white-space: nowrap; padding-top: 2.5em; visibility: hidden; transition: all .4s ease .2s; opacity: 0; padding-bottom: 1em; } #site-navigation.classic ul.main-menu>li.has-children>.sub-menu>li { line-height: 1em; } #site-navigation.classic ul.main-menu>li.has-children>.sub-menu::after { content: ""; display: block; position: absolute; left: -1em; top: 1em; width: calc(100% + 4em); height: 0%; background: var(--secondaryBackground); z-index: -1; transition: height .5s ease-in-out; border-radius: 15px; } #site-navigation.classic ul.main-menu>li.has-children:hover>.sub-menu::after { height: 100% } #site-navigation.classic ul.main-menu>li.has-children:hover>.sub-menu { visibility: visible; transform: translateY(0); opacity: 1; } .blend #site-navigation.classic ul.main-menu>li.has-children>.sub-menu a { color: #000; } /** Fullscreen Navigation ------------------------------ */ #site-navigation.fullscreen_menu { position: fixed; top: 0; left: 0; width: 100%; height: 0vh; z-index: 9999; padding-top: 0px; overflow: hidden; visibility: hidden; pointer-events: none; color: var(--mainColor); overflow: hidden; background: var(--secondaryBackground) } .section-fullscreen-menu { visibility: hidden; pointer-events: none } .section-fullscreen-menu.active, #site-navigation.fullscreen_menu.active { visibility: visible; pointer-events: all } #site-navigation.fullscreen_menu .fullscreen-menu-wrapper { margin-bottom: 0; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; padding-bottom: 20px; height: 100vh; } #site-navigation.fullscreen_menu .fullscreen-menu-wrapper .fullscreen-menu-wrap-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; float: left; margin-top: auto; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } #site-navigation.fullscreen_menu .fullscreen-menu-wrapper>div { margin-bottom: 0 !important } #site-navigation.fullscreen_menu ul.menu.main-menu { padding: 0; position: relative } #site-navigation.fullscreen_menu ul.menu.main-menu, #site-navigation.fullscreen_menu ul.menu.main-menu ul { visibility: hidden; pointer-events: none } #site-navigation.fullscreen_menu ul.menu.main-menu.active, #site-navigation.fullscreen_menu ul.menu.main-menu ul.active { visibility: visible; pointer-events: all } .fullscreen_menu ul.menu a { display: inline-block; color: var(--mainColor); } .fullscreen_menu ul.menu.main-menu li { padding: 0; font-size: 60px; line-height: 1.2; letter-spacing: -0.04em; overflow: hidden; text-transform: uppercase; white-space: nowrap } #site-navigation.fullscreen_menu ul.menu.main-menu .sub-menu.small li { font-size: 21px; line-height: 21px; text-transform: none; letter-spacing: 0; padding-bottom: 0.5em } #site-navigation.fullscreen_menu ul.menu.main-menu .sub-menu.small li.sub-menu-title { pointer-events: none; font-size: 16px; text-transform: uppercase; margin-bottom: 25px; opacity: .5; } #site-navigation.fullscreen_menu li.menu-item-has-children .sub-menu.small span.sub-toggle { font-size: 15px; margin-top: 0px; margin-left: 0; } #site-navigation.fullscreen_menu ul.menu.main-menu .sub-menu.small li:hover::before { width: 10px; } #site-navigation.fullscreen_menu ul.menu.main-menu .sub-menu.medium li { font-size: 30px; letter-spacing: -0.02em; text-transform: none; line-height: 30px; padding-bottom: 15px; } .fullscreen_menu ul.menu.main-menu li::before { content: ""; display: inline-block; width: 0px; height: 2px; background: var(--mainColor); vertical-align: middle; margin-top: -0.6em; margin-right: 10px; -webkit-transition: width 1.2s cubic-bezier(.07, 0.8, .2, 1); -o-transition: width 1.2s cubic-bezier(.07, 0.8, .2, 1); transition: width 1.2s cubic-bezier(.07, 0.8, .2, 1); } .fullscreen_menu.dark ul.menu.main-menu li::before { background: var(--mainColor); } #site-navigation.fullscreen_menu ul.menu.active li.current-menu-item::before { width: 40px } #site-navigation.fullscreen_menu ul.menu.active li:hover::before { width: 40px } #site-navigation.fullscreen_menu ul.menu.animating li::before { width: 0 !important } #site-navigation.fullscreen_menu ul.menu.main-menu li a .mt_line { overflow: hidden; } #site-navigation .mt_line, #site-navigation .mt_char { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); will-change: transform } #site-navigation.fullscreen_menu ul.sub-menu { position: relative; margin-right: 100px; } .sub-menu-wrapper { position: absolute; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; pointer-events: none } #site-navigation.fullscreen_menu li.menu-item-has-children span.sub-toggle { vertical-align: top; display: inline-block; margin-left: -5px; font-size: 15px; cursor: pointer; letter-spacing: 0; margin-top: 10px; } #site-navigation.fullscreen_menu li.menu-item-has-children.sub-active { pointer-events: none } #site-navigation.fullscreen_menu .sub-close { position: absolute; top: 0; left: 0; -webkit-transform: translateX(0px) translateY(-25px) rotate(180deg); -ms-transform: translateX(0px) translateY(-25px) rotate(180deg); transform: translateX(0px) translateY(-25px) rotate(180deg); -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; opacity: 0; visibility: hidden; -webkit-transition: all .75s ease .3s; -o-transition: all .75s ease .3s; transition: all .75s ease .3s; cursor: pointer; pointer-events: all; } #site-navigation.fullscreen_menu .sub-close.active:hover { -webkit-transform: translateX(0px) translateY(-25px) rotate(-180deg); -ms-transform: translateX(0px) translateY(-25px) rotate(-180deg); transform: translateX(0px) translateY(-25px) rotate(-180deg); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s } #site-navigation.fullscreen_menu .sub-close.active { opacity: .5; visibility: visible; -webkit-transform: translateX(0px) translateY(-25px) rotate(0deg); -ms-transform: translateX(0px) translateY(-25px) rotate(0deg); transform: translateX(0px) translateY(-25px) rotate(0deg); } /** Language Switcher ------------------------------ */ .language-switcher { display: inline-block; } .language-switcher>span { display: inline-block; opacity: .5; cursor: pointer; } .language-switcher>span.active { opacity: 1; } /* Adiciona separador "/" entre os idiomas, exceto o último */ .language-switcher>span:not(:last-child)::after { content: "/"; display: inline-block; margin: 0 10px; opacity: .25; } @media only screen and (max-width: 750px) { /* Classic Menu Convert */ #site-navigation.fullscreen_menu.temp_fullscreen { height: 100vh; } #site-navigation.fullscreen_menu.temp_fullscreen ul.main-menu li.has-children { margin-left: -10px } #site-navigation.fullscreen_menu.temp_fullscreen ul.menu.main-menu .sub-menu.big li { font-size: 30px } #site-navigation.fullscreen_menu.temp_fullscreen ul.menu.main-menu .sub-menu.small li { font-size: 20px; text-transform: none; letter-spacing: -0.02em; } #site-navigation.fullscreen_menu li.has-children span.sub-toggle { margin-top: 0; margin-left: 0; font-size: 13px; } #site-navigation.fullscreen_menu .sub-close { -webkit-transform: translateX(0px) translateY(-35px) rotate(180deg); -ms-transform: translateX(0px) translateY(-35px) rotate(180deg); transform: translateX(0px) translateY(-35px) rotate(180deg) } #site-navigation.fullscreen_menu .sub-close.active { -webkit-transform: translateX(0px) translateY(-35px) rotate(0deg); -ms-transform: translateX(0px) translateY(-35px) rotate(0deg); transform: translateX(0px) translateY(-35px) rotate(0deg) } #site-navigation.fullscreen_menu .sub-close.active:hover { -webkit-transform: translateX(0px) translateY(-35px) rotate(-180deg); -ms-transform: translateX(0px) translateY(-35px) rotate(-180deg); transform: translateX(0px) translateY(-35px) rotate(-180deg) } #site-navigation.fullscreen_menu ul.menu.main-menu li { font-size: 40px; white-space: nowrap; } #site-navigation.fullscreen_menu .fullscreen-menu-wrapper .fullscreen-menu-wrap-bottom { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media only screen and (max-width: 750px) { .site-branding { width: 118px; } .sticky-logo { width: 36px; } .logo-mobile{ width: 80% !important; } .menu-mobile{ width: 20% !important; } } /* ===== PERSONALIZADO ===== */ .site-header.personalizado { background: var(--headerBg) !important; color: var(--headerColor) !important; } /* Forçar links, botões e idiomas a herdarem a cor do header */ .site-header.personalizado a, .site-header.personalizado .rco-button a, .site-header.personalizado .language-switcher > span { color: var(--headerColor) !important; } /* O seu global trava o menu com var(--mainColor); sobrescreva aqui */ .site-header.personalizado #site-navigation a { color: var(--headerColor) !important; } /* Hamburguer e SVGs */ .site-header.personalizado .toggle-line { background-color: currentColor; } .site-header.personalizado svg { fill: currentColor; stroke: currentColor; } /* -------- Resolver "2 logos" -------- */ /* Esconde as versões fixas e usa máscara na cor definida pelo projeto. */ .site-header.personalizado .site-logo > img, .site-header.personalizado .sticky-logo > img { display: none !important; } /* Mostra apenas uma assinatura no header normal. */ .site-header.personalizado .site-logo > .rco-personalized-logo { display: block !important; } /* Quando grudar (sticked), some o site-logo e aparece o sticky-logo */ .site-header.personalizado.sticked .site-logo { display: none !important; } .site-header.personalizado.sticked .sticky-logo { display: block !important; } /* Mostra apenas o símbolo no header compacto. */ .site-header.personalizado.sticked .sticky-logo > .rco-personalized-icon { display: block !important; } /* Se seu logo for texto, garanta que ele pega a cor */ .site-header.personalizado .site-branding, .site-header.personalizado .site-branding * { color: inherit !important; } /* ===== CTA "INICIAR PROJETO" (apenas no header .personalizado) ===== */ .site-header.personalizado .rco-button.underline { /* hooks para personalizar rápido */ --ctaColor: var(--headerColor); --ctaUnderline: var(--headerColor); --ctaUnderlineThickness: 2px; --ctaUnderlineStyle: solid; /* solid | dotted | dashed */ } .site-header.personalizado .rco-button.underline a { position: relative; color: var(--ctaColor) !important; text-decoration: none; /* garante que não herda underline nativo */ } /* Sublinhado custom */ .site-header.personalizado .rco-button.underline a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; /* ajuste fino */ height: var(--ctaUnderlineThickness); background: var(--ctaUnderline); /* caso queira pontilhado/dashed, use border em vez de background: */ border-bottom: 0 var(--ctaUnderlineStyle) var(--ctaUnderline); /* fallback para ambos os jeitos: */ background: var(--ctaUnderline); transform-origin: left; transform: scaleX(1); transition: transform .35s ease; } .site-header.personalizado .rco-button.underline a:hover::after { transform: scaleX(0.7); /* anima leve no hover */ } /* Flecha à direita — cobrimos as 3 formas mais comuns */ .site-header.personalizado .rco-button.icon-right, .site-header.personalizado .rco-button.icon-right a, .site-header.personalizado .rco-button.icon-right .material-icons { color: var(--ctaColor) !important; fill: var(--ctaColor) !important; stroke: var(--ctaColor) !important; } /* Se o ícone for injetado via ::after com data-icon */ .site-header.personalizado .rco-button.icon-right[data-icon]::after { /* não duplica — só colore se já existir */ color: var(--ctaColor) !important; fill: var(--ctaColor) !important; stroke: var(--ctaColor) !important; } /* Se o ícone for um SVG inline dentro do link */ .site-header.personalizado .rco-button.icon-right svg { width: 1.1em; height: 1.1em; margin-left: .4em; fill: currentColor; /* pega a cor do CTA */ stroke: currentColor; } .site-logo-link { display: block; width: 100%; text-decoration: none; color: inherit; } /* source: assets/css/_css/footer.css */ /*=============================================== # Site Footer =================================================*/ #footer { --mainColor: #ebebeb; --mainBackground: #191919; --secondaryBackground: #151515; background: #191919; color: #ebebeb; padding-top: 100px; margin-bottom: 0; padding-bottom: 0; display: block; width: 100%; position: relative; z-index: 1; } #footer .text-wrapper, #footer .menu, #footer a, #footer button, #footer .rco-button, #footer .rco-icon { color: #ebebeb; } #footer a, #footer button { transition: opacity .25s ease; } #footer a:hover, #footer a:focus-visible, #footer button:hover, #footer button:focus-visible { opacity: .62; } .footer-top-wrapper { margin-bottom: 100px; } .wrapper-full.footer-bottom-wrapper, .wrapper.footer-bottom-wrapper { margin-bottom: 0; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (max-width: 750px) { #footer { padding-top: 72px; } .footer-top-wrapper { margin-bottom: 72px; } } /* source: assets/css/_css/transition.css */ /*=============================================== # Page Transitions =================================================*/ .rco-page-transition { position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; pointer-events: none; -webkit-transition: background .4s ease; -o-transition: background .4s ease; transition: background .4s ease; visibility: hidden; --backG: var(--secondaryBackground); display: block; } .rco-page-transition .transition-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background-color: var(--backG); z-index: 11; } .rco-page-transition.right .transition-overlay, .rco-page-transition.left .transition-overlay { width: 0%; height: 100%; } .rco-page-transition.right .transition-overlay { left: unset; right: 0 } .rco-page-transition.right.half .transition-overlay { left: 0; right: unset } .rco-page-transition.left.half .transition-overlay { left: unset; right: 0 } .rco-page-transition.up .transition-overlay { top: unset; bottom: 0 } .rco-page-transition.up.half .transition-overlay { bottom: unset; top: 0 } .rco-page-transition.down .transition-overlay { top: 0; bottom: unset } .rco-page-transition.down.half .transition-overlay { bottom: 0; top: unset } .capt_chars { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .rco-page-transition.page-over { background-color: var(--backG); } .rco-page-transition.right { left: unset; right: 0 } .rco-page-transition.down { top: 0; bottom: 'unset' } .rco-page-transition.block { height: 100vh; visibility: hidden; background: transparent; display: flex; flex-direction: column; } span.transition-block { display: block; width: 100%; height: 11%; } span.transition-block span { display: block; width: 100%; height: 0%; background-color: var(--backG); } .page-transition-texts { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; -webkit-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; z-index: 1; color: var(--mainBackground); } .rco-page-transition.running>* { opacity: 1 } .trans-image { clip-path: inset(0%); -webkit-clip-path: inset(0%); position: relative; z-index: 999 } span.trans-color-overlay { position: fixed; bottom: 0; left: 0; width: 100%; height: 0vh; z-index: 1; } .showcase-minimal-list span.trans-color-overlay { z-index: 0 } .page-transition-caption { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 1rem; line-height: 1rem; z-index: 1; overflow: hidden; height: 1em; color: var(--mainColor); white-space: nowrap; z-index: 22 } .rco-page-transition.capt-top-left .page-transition-caption { -webkit-transform: none; -ms-transform: none; transform: none; top: 5%; left: 5%; } .rco-page-transition.capt-top-right .page-transition-caption { -webkit-transform: none; -ms-transform: none; transform: none; top: 5%; right: 5%; left: unset } .rco-page-transition.capt-bottom-right .page-transition-caption { -webkit-transform: none; -ms-transform: none; transform: none; top: unset; right: 5%; bottom: 5%; left: unset } .rco-page-transition.capt-bottom-left .page-transition-caption { -webkit-transform: none; -ms-transform: none; transform: none; top: unset; left: 5%; bottom: 5% } .capt_word { display: block !important; } .capt_char { position: relative; } span.project-trans-overlay { position: fixed; bottom: 0; left: 0; width: 100%; height: 0svh; background: transparent; z-index: 99; } span.page-over-ovs { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); pointer-events: none; } span.page-over-ovs::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; opacity: 1; border: 25px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; } span.page-over-ovs::before { content: ""; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #000; position: absolute; width: 100vw; height: 100vh; opacity: .6; z-index: 1; } .rco-page-transition.columns { position: fixed; bottom: 0; left: 0; z-index: 99999; width: 100%; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: end; -ms-flex-align: end; align-items: end; background: none !important; visibility: hidden; } .rco-page-transition.columns.left { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .rco-page-transition.columns.left.half { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end } .rco-page-transition.columns.right { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .rco-page-transition.columns.right.half { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start } .rco-page-transition.columns.right .trans-col, .rco-page-transition.columns.left .trans-col { height: 20vh; width: 0%; background-color: var(--backG); } .rco-page-transition.columns.down { -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .rco-page-transition.columns.down.half { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end } .rco-page-transition.columns.down .trans-col, .rco-page-transition.columns.up .trans-col { width: 20vw; height: 0%; background-color: var(--backG); } .rco-page-transition.columns.up.half { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start } .rco-page-transition.offset-x .capt_chars { overflow: hidden } .rco-page-transition .capt_chars span { display: inline-block } .rco-page-transition .page-transition-caption { letter-spacing: -0.025em } .animating img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* source: assets/css/_css/general.css */ /*=============================================== # Pages =================================================*/ /* Sobre · topo cinza e conteúdo editorial final branco */ .page-about-content { background: #ebebeb; } .page-about-content .about-hero-section { --mainColor: #ebebeb; --mainBackground: #191919; background: #191919; color: #ebebeb; } /* Sobre · hero: PENSE, MOVA e CONQUISTE com a mesma escala tipográfica */ .page-about-content .about-hero-section .md-title { font-size: clamp(96px, 8.333vw, 120px); line-height: .94; letter-spacing: -.07em; } .page-about-content .about-hero-line-3-inline-wrap { padding-top: clamp(22px, 2.8vw, 42px); padding-bottom: clamp(56px, 6vw, 88px); } .page-about-content .about-hero-line-3-inline { font-size: inherit; line-height: inherit; white-space: nowrap; } @media only screen and (max-width: 750px) { .page-about-content .about-hero-section .md-title { font-size: clamp(42px, 12vw, 54px); line-height: .96; } .page-about-content .about-hero-line-3-inline-wrap { padding-top: 24px; padding-bottom: 52px; } .page-about-content .about-hero-line-3-inline { white-space: normal; } } .page-about-content .about-visual-hero { --mainColor: #ebebeb; --mainBackground: #191919; position: relative; display: block; background: #191919; color: #ebebeb; min-height: 0; padding: 0 0 clamp(56px, 6vw, 88px); overflow: hidden; } .page-about-content .about-visual-hero.about-visual-hero-media .wrapper-full { margin-bottom: 0; } .page-about-content .about-hero-media-image { --height: clamp(360px, 54vw, 820px); margin-bottom: 0; } .page-about-content .about-hero-media-image img { width: 100%; height: var(--height); object-fit: cover; object-position: center center; } @media only screen and (max-width: 750px) { .page-about-content .about-visual-hero { padding-bottom: 40px; } .page-about-content .about-hero-media-image { --height: 44vh; } } .about-white-zone { display: flow-root; width: 100%; position: relative; background: #ffffff; padding-bottom: 100px; box-sizing: border-box; } .about-white-zone > .section:last-of-type { margin-bottom: 0 !important; } .about-white-zone > .section:last-of-type > .wrapper:last-child { margin-bottom: 0; } /* Sobre · abertura de serviços mais compacta e editorial */ .page-about-content .about-services-intro-section { padding-top: clamp(88px, 8vw, 128px); padding-bottom: 0; } .page-about-content .about-services-intro { margin-bottom: clamp(28px, 2.6vw, 40px); } .page-about-content .about-services-intro > .c-col-12 { margin-bottom: 0; } .page-about-content .about-services-intro-title { max-width: 1120px; margin: 0; font-size: clamp(54px, 5.8vw, 92px); line-height: .97; letter-spacing: -.052em; font-weight: 400; text-wrap: balance; } .page-about-content .about-services-marquee-band { width: 100%; background: #f7f7f7; overflow: hidden; padding: clamp(16px, 1.5vw, 24px) 0; } .page-about-content .about-services-marquee-wrap { width: 100%; margin: 0 !important; padding: 0 !important; } .page-about-content .about-services-marquee-wrap > .c-col-12 { width: 100%; margin: 0 !important; padding: 0 !important; } @media only screen and (max-width: 750px) { .page-about-content .about-services-intro-section { padding-top: 68px; padding-bottom: 0; } .page-about-content .about-services-intro { margin-bottom: 22px; } .page-about-content .about-services-marquee-band { padding: 12px 0; } .page-about-content .about-services-intro-title { font-size: clamp(40px, 12vw, 58px); line-height: 1; letter-spacing: -.045em; } } @media only screen and (max-width: 750px) { .about-white-zone { padding-bottom: 64px; } } div#page-title { padding-top: 200px; background: var(--secondaryBackground) } div#page-title .wrapper { margin-bottom: 0 } /* Landing Page */ .landing-page .grid-project { padding-bottom: 0; } span.new__page { display: inline-block; float: right; margin-left: 10px; color: red; font-weight: bold; } /** Headings ------------------------------ */ .rco-heading { display: block; width: 100%; float: left } .rco-heading>* { display: inline-block } .rco-heading.icon-right>*::after { content: attr(data-icon); font-family: 'Material Icons'; font-size: 0.5em; vertical-align: middle; display: inline-block; margin-top: -0.3em; margin-left: 30px; line-height: 0.5em } .rco-heading.icon-block>*::before, .rco-heading.icon-left>*::before { content: attr(data-icon); font-family: 'Material Icons'; font-size: 0.5em; vertical-align: middle; display: inline-block; margin-top: -0.3em; margin-right: 30px; line-height: 0.5em } .rco-heading.icon-block>*::before { display: block; margin-bottom: 1em; margin-top: 0 } .rco-heading.icon-top>*::before, .rco-heading.icon-top>*::after { vertical-align: top; margin-top: 0 } .rco-heading.icon-fill>*::before, .rco-heading.icon-fill>*::after { opacity: 1; font-variation-settings: 'FILL' 1, 'opsz' 48 } /* ========================================================== Home hero · persistente entre navegações Barba Esta regra não pode ficar no exclusivo do index.php, pois o Barba troca o container, mas preserva o head atual. ========================================================== */ .home-hero { background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.14) 48%, rgba(0, 0, 0, 0.22) 100%), url('../../images/bk-home.webp'); background-size:100% auto; background-position:center top; background-repeat:no-repeat; } @media screen and (max-width:768px), (orientation:portrait) { .home-hero { background-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), url('../../images/bk-home-mobile.webp'); background-size:cover; background-position:center top; } } /* Home video: uma única instância e área reservada antes do lazy load. */ .home-video-wrapper, .home-video-wrapper .rco-video { width: 100%; } .home-video-wrapper .rco-video[data-lazy-player="true"] { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #191919; } /* Trabalhos · abertura preta e listagem branca */ .page-work-content { --mainColor: #191919; --mainBackground: #ffffff; background: #ffffff; color: #191919; } .page-work-content .work-index-hero { --mainColor: #ebebeb; --mainBackground: #191919; min-height: 72svh; margin-bottom: 0; padding-top: 150px; display: flex; align-items: flex-end; background: #191919; color: #ebebeb; } .page-work-content .work-index-hero .wrapper { margin-bottom: 72px; } .page-work-content .work-index-list, .page-work-content .work-index-cta { --mainColor: #191919; --mainBackground: #ffffff; background: #ffffff; color: #191919; } .page-work-content .work-index-list { margin-bottom: 0; padding-top: 120px; } @media only screen and (max-width: 750px) { .page-work-content .work-index-hero { min-height: 62svh; padding-top: 110px; } .page-work-content .work-index-hero .wrapper { margin-bottom: 48px; } .page-work-content .work-index-list { padding-top: 84px; } } /* Sobre · história / autoridade institucional */ .page-about-content .about-story-section { padding-top: clamp(86px, 8vw, 128px); padding-bottom: clamp(96px, 9vw, 144px); } .page-about-content .about-story-title { max-width: 8em; margin: 0; font-size: clamp(46px, 3.6vw, 58px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 400; } .page-about-content .about-story-copy { max-width: 760px; } .page-about-content .about-story-paragraph { max-width: 720px; margin: 0 0 1.55em; font-size: clamp(19px, 1.45vw, 22px); line-height: 1.52; letter-spacing: -0.018em; font-weight: 400; } .page-about-content .about-story-final { max-width: 720px; margin: clamp(34px, 4vw, 54px) 0 0; font-size: clamp(27px, 2.15vw, 34px); line-height: 1.27; letter-spacing: -0.032em; font-weight: 400; } @media only screen and (max-width: 750px) { .page-about-content .about-story-section { padding-top: 68px; padding-bottom: 80px; } .page-about-content .about-story-title { max-width: 9em; margin-bottom: 48px; font-size: 38px; line-height: 1.06; } .page-about-content .about-story-copy { max-width: none; } .page-about-content .about-story-paragraph { max-width: none; margin-bottom: 1.55em; font-size: 18px; line-height: 1.52; } .page-about-content .about-story-final { max-width: none; margin-top: 36px; font-size: 24px; line-height: 1.3; } } /* source: assets/css/_css/shop.css */ /* Shop */ /** Product Page **/ .rco-product-head>div { display: block; float: left; width: 60%; overflow: hidden; } .product-gallery-wrap { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 15px 1fr; grid-template-columns: repeat(2, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; grid-gap: 15px; } .product-gallery-wrap>*:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .product-gallery-wrap>*:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .product-gallery-image { display: block; float: left; width: 100%; height: 50vh; } .product-gallery-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .rco-product-head>div.product-info { width: 40%; padding-top: 15%; padding-left: 40px; padding-right: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; } .product-name>* { margin-bottom: 0.5em; } .product-price { margin-bottom: 2em; } .product-description { max-width: 60%; margin-bottom: 2em; } .product-detail-tabs { display: block; float: left; width: 100%; } .product-detail-tabs>div { display: block; float: left; width: 50%; } .product-detail-tabs>div .tab-title { margin-bottom: 0.5em; opacity: .5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer } .product-detail-tabs>div .tab-title.active { opacity: 1; } .product-detail-tabs>div .tab-content { display: none; } .product-detail-tabs>div .tab-content.active { display: block } .rco-related-products.wrapper-full>.rco-single-product { width: 31%; margin-right: 2.3333333%; } /** Cart Page **/ .rco-shopping-cart { display: block; float: left; width: 100%; } ul.product-tags, .cart-products-wrap { margin: 0; padding: 0; list-style: none; display: block; } .cart-products-wrap { min-height: 60vh; } ul.product-tags { opacity: .5 } .rco-cart-product { display: block; float: left; width: 100% } .rco-cart-product::after { content: ""; display: block; float: left; width: 100%; height: 1px; background-color: var(--mainColor); margin-top: 20px; margin-bottom: 20px; opacity: .2; } .rco-cart-product>div, ul.product-tags>li { width: 20%; float: left; margin-bottom: 0 } .rco-cart-product>div:first-child, ul.product-tags>li:first-child { width: 40%; } .rco-cart-product>div:nth-child(3), ul.product-tags>li:nth-child(3) { text-align: center; } .rco-cart-product>div:last-child, ul.product-tags>li:last-child { text-align: right; } .cart-products-wrap { display: block; float: left; width: 100%; position: relative } .cart-products-wrap::after { content: ""; display: block; float: left; width: 100%; height: 1px; background-color: var(--mainColor); opacity: .3; position: absolute; bottom: 30px; } .cart-products-wrap::before { content: ""; display: block; float: left; width: 100%; height: 1px; background-color: var(--mainColor); opacity: .3; margin-top: 10px; margin-bottom: 30px; } .cart-totals { display: block; float: right; min-width: 35%; } .cart-totals>div::after { content: ""; display: block; float: left; width: 100%; background: var(--mainColor); height: 1px; opacity: .3; } .cart-totals>div { display: block; width: 100%; float: left; } .cart-totals>div::after { content: ""; display: block; float: left; width: 100%; height: 1px; background-color: var(--mainColor); margin: 15px 0; } .cart-totals>div>span { float: right; } .cart-totals>div.rco-checkout-button::after { display: none; } .rco-checkout-button>div { display: block; float: left; } .rco-checkout-button>div:last-child { float: right; font-size: 1.5em; margin-top: 0.5em; } .rco-checkout-button { margin-top: 20px; } .rco-shopping-cart .product-count { padding: 3px 10px; float: none; margin: 0 auto; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .rco-shopping-cart input#quantity { width: 1em; height: 1em; font-size: 1em; padding: 0 15px; } /** Product Ratings **/ .product-rating { display: inline-block; position: relative; margin-bottom: 1em } .product-stars { display: inline-block; } .product-stars.stars-fill { position: absolute; left: 0; overflow: hidden; width: 0%; white-space: nowrap; } .product-stars.stars-fill span { font-variation-settings: 'FILL' 1, 'GRAD' 0, 'opsz' 48 } /** Product Add to Cart **/ input#quantity::-webkit-outer-spin-button, input#quantity::-webkit-inner-spin-button { appearance: none; -webkit-appearance: none; } input#quantity { -moz-appearance: none; appearance: none; -webkit-appearance: none; background: none; border: none; text-align: center; padding: 0; margin: 0; width: 2em; height: 2em; font-size: 2em; color: var(--mainBackground) } input#quantity:focus { border: none; outline: none; } .product-add-to-cart, .product-count { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; float: left; margin-top: 1em; padding: 3px 30px 3px 15px; background: var(--mainColor); color: var(--mainBackground); border-radius: 50px; } .product-count { margin-top: 0 } .product-count span { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .product-add-to-cart a { color: var(--mainBackground) } /*** Single Product (widget) */ .rco-single-product { display: block; float: left; position: relative; } .rco-single-product a, .rco-single-product .product-wrap { width: 100%; height: 100%; overflow: hidden; display: block; float: left; } .rco-single-product img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } .rco-single-product .product-image { display: block; float: left; width: 100%; height: auto; } .rco-single-product img.product-image-back { position: absolute; top: 0; left: 0; z-index: 1; } .rco-single-product img.product-image-front { position: relative; z-index: 2; } .rco-single-product:hover img.product-image-front { visibility: hidden; } .rco-single-product .product-meta { display: block; float: left; width: 100%; margin-top: 15px; } .rco-single-product .product-meta>div { display: block; float: right; } .rco-single-product .product-meta>div.product-name { float: left; } .rco-single-product .product-meta>div:last-child { opacity: .5; } .rco-single-product.on--sale .product-price { text-decoration: line-through; margin-right: 10px; } .rco-single-product .sale-badge { position: absolute; top: 25px; left: 25px; mix-blend-mode: difference; color: #fff; z-index: 5 } /*** Cart Button */ .rco-cart-button { display: inline-block; width: auto; background: lightgray; padding: 5px 10px 5px 15px; border-radius: 35px; position: relative; font-size: 16px; overflow: hidden; z-index: 3 } .rco-cart-button::after { content: attr(data-count); display: inline-block; color: var(--mainBackground); background: var(--mainColor); width: 1em; height: 1em; text-align: center; border-radius: 50%; margin-left: 20px; padding: 3px; z-index: 1; position: relative } .rco-cart-button::before { content: ""; display: inline-block; position: absolute; right: 10px; top: 50%; width: calc(1em + 4px); height: calc(1em + 4px); background: var(--mainColor); border-radius: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 0; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .rco-cart-button:hover::before { width: 150px; height: 150px; right: 0; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center } .rco-cart-button:hover span { color: var(--mainBackground); } .rco-cart-button span { position: relative; z-index: 2; -webkit-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease } @media only screen and (max-width: 750px) { .rco-related-products.wrapper-full>.rco-single-product { width: 100%; } .rco-product-head>div { width: 100%; padding-top: 10px; overflow: visible; } .product-gallery-wrap { display: flex; flex-direction: row; flex-wrap: nowrap; width: fit-content; } .product-gallery-wrap .product-gallery-image { width: 100vw; /* flex: 100vw; */ padding: 0 12.5px; box-sizing: border-box; } .rco-product-head>div.product-info { width: 100%; margin-bottom: 100px; } .product-description { max-width: 100%; } .product-price.text-h5 { margin-bottom: 1em; } .product-detail-tabs>div { width: 100%; } } /* source: assets/css/_css/blog.css */ /* Blog */ /*** Posts Grid */ .rco-posts-grid { display: block; float: left; width: 100%; } .rco-posts-grid .grid--filters { display: block; float: left; } .rco-posts-grid .grid--filters>ul { list-style: none; margin: 0; padding: 0; } .rco-posts-grid .grid--filters>ul>li { display: inline-block; opacity: .5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer } .rco-posts-grid .grid--filters>ul>li::after { content: "/"; margin: 0 10px; opacity: .5; } .rco-posts-grid .grid--filters>ul>li:last-child::after { display: none; } .rco-posts-grid .grid--filters>ul>li.active { opacity: 1; } .rco-posts-grid .grid--filters>ul>li.active::after { opacity: 0.25; } .rco-posts-grid .grid--posts { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 35px 1fr 35px 1fr; grid-template-columns: repeat(3, 1fr); width: 100%; grid-gap: 35px; } .rco-posts-grid .grid--post--item { margin-bottom: 35px; } .rco-posts-grid .grid--switcher { display: block; float: right; } .rco-posts-grid.grid-list .grid--posts { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .single-blog-post.horizontal a, .rco-posts-grid.grid-list .single-blog-post a { width: 35%; max-height: 300px; overflow: hidden; } .single-blog-post.horizontal .post-details, .rco-posts-grid.grid-list .single-blog-post .post-details { width: 65%; margin-top: 0; padding: 3em; -webkit-box-sizing: border-box; box-sizing: border-box; } /*** Single Post */ .single-blog-post, .single-blog-post>a { display: block; float: left; width: 100%; } .single-blog-post .single-post-image, .single-post-image img { width: 100%; display: block; float: left; overflow: hidden } .single-blog-post:hover .single-post-image img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .single-post-image img { -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; -o-transition: transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; } .single-blog-post .post-details { display: block; float: left; max-width: 100%; margin-top: 2em; } .single-blog-post .post-meta { display: block; float: left; width: 100%; margin-bottom: 1.5em; opacity: .5 } .single-blog-post .post-meta>div { float: left; display: block; } .single-blog-post .post-meta>div:first-child::before { display: none } .single-blog-post .post-meta>div:last-child::before { content: "/"; margin: 0 10px } .single-blog-post .post-button { margin-top: 1.5em } /*** Single Post Page */ .single-post-page-content .section { padding-top: 0 } .section.single-post-header { margin-bottom: 0; } .section.single-post-header .wrapper { margin-bottom: 0; } .single-post-page .post-meta.c-col-12 { display: block; float: left; } .single-post-page .post-categories>ul { margin: 0; padding: 0; list-style: none; } .single-post-page .post-categories>ul>li { display: inline-block; } .single-post-page .post-categories>ul>li::after { content: ","; margin: 0 10px; } .single-post-page .post-categories>ul>li:last-child::after { display: none; } .single-post-page .post-title-wrap.c-col-12 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; margin-bottom: 70px; } .single-post-page .post-featured-image { display: block; float: left; width: 100%; -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; } .single-post-page .post-featured-image>img { width: 100%; -o-object-fit: cover; object-fit: cover; } .single-post-page .post-meta { display: block; float: left; width: 100%; margin-top: 1em; } .single-post-page .post-meta>div { display: block; float: left; width: 100%; margin-bottom: 1.5em; } .single-post-page .post-meta>div span.post-met-title { display: block; float: left; width: 100%; margin-bottom: 1em; font-size: 0.8em; } .single-post-page .entry-meta-wrap { display: block; float: left; width: 100%; overflow: hidden; } .single-post-page .entry-meta { position: relative; } .single-post-page .post-title-sub { position: absolute; top: 0; z-index: -1; max-width: 60% } .single-post-page .post-title-sub>div { display: block; overflow: hidden; } .single-post-page .post-featured-image { max-width: 90% } .single-post-page .next-post-sub { display: block; float: left; margin-bottom: 3em; } .single-post-page .next-post-wrap .single-blog-post.horizontal::before, .single-post-page .next-post-wrap .single-blog-post.horizontal::after { content: ""; display: block; float: left; width: 100%; height: 1px; opacity: .3; background: var(--mainColor); margin-bottom: 3em; } .single-post-page .next-post-wrap .single-blog-post.horizontal::after { margin-bottom: 0; margin-top: 3em; } .single-post-page .next-post-wrap .single-blog-post.horizontal .post-details { padding-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 0; height: 300px; } .single-post-page .next-post-wrap .single-blog-post.horizontal .post-button { margin-bottom: 0; } .single-post-page .next-post-wrap .single-blog-post.horizontal .post-title { max-width: 90%; } .single-post-page .next-post-wrap .single-blog-post.horizontal .post-meta { margin: 0; } /* Portfolio Page */ /*** Defaults */ .portfolio-grid { display: block; float: left; width: 100%; position: relative } .grid-controls { display: block; float: left; width: 100%; position: relative; padding-bottom: 25px; } .grid-controls::after { content: ""; display: block; position: absolute; left: 0; width: 100%; bottom: 0; background: var(--mainColor); height: 1px; opacity: .3 } .grid-controls>div { display: block; float: left; } .grid-controls>div:last-child { float: right; } .portfolio-grid hr { height: 1px; width: 100%; background: var(--mainColor); border: none; opacity: .3 } .portfolio-grid.col-2 hr { -ms-grid-column: 1; -ms-grid-column-span: 10; grid-column: 1 / 11; } .portfolio-grid.col-3 hr { -ms-grid-column: 1; -ms-grid-column-span: 9; grid-column: 1 / 10; } /* Portfolio Filtering */ ul.grid-portfolio-filtering { list-style: none; padding: 0; margin: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } ul.grid-portfolio-filtering li { display: none; margin: 0 15px; cursor: pointer; opacity: .5; text-transform: uppercase; padding-bottom: 0; } .portfolio-filters.hovered ul.grid-portfolio-filtering li { display: block } .portfolio-filters.hovered ul.grid-portfolio-filtering li:hover { opacity: 1 } ul.grid-portfolio-filtering li.active { display: block; opacity: 1 } ul.grid-portfolio-filtering .projects-length { display: inline-block; font-size: 12px; vertical-align: top; margin-left: 5px; margin-top: -5px; opacity: .5; } ul.grid-portfolio-filtering li.active .projects-length { opacity: 1 } /* ul.grid-portfolio-filtering li::after { content: "/"; display: inline-block; margin: 0 10px; opacity: .3; } ul.grid-portfolio-filtering li:last-child::after { display: none; } */ /* Grid Appearances */ .grid-layout-switcher>div { display: inline-block; } .grid-layout-switcher span { display: inline-block; opacity: .3; cursor: pointer } .grid-layout-switcher span.grid-switcher-seperator { margin: 0 10px; pointer-events: none; } .grid-layout-switcher span.active { opacity: 1; pointer-events: none } .portfolio-grid.grid-list .grid-project-image { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-110%, -50%) scale(0.8); -ms-transform: translate(-110%, -50%) scale(0.8); transform: translate(-110%, -50%) scale(0.8); max-width: 25%; height: auto; opacity: 0; visibility: hidden; -webkit-transition: -webkit-transform .75s cubic-bezier(0.2, 0.6, 0.1, 1); transition: -webkit-transform .75s cubic-bezier(0.2, 0.6, 0.1, 1); -o-transition: transform .75s cubic-bezier(0.2, 0.6, 0.1, 1); transition: transform .75s cubic-bezier(0.2, 0.6, 0.1, 1); transition: transform .75s cubic-bezier(0.2, 0.6, 0.1, 1), -webkit-transform .75s cubic-bezier(0.2, 0.6, 0.1, 1) } .portfolio-grid.grid-list .grid-project:hover .grid-project-image { opacity: 1; visibility: visible; -webkit-transform: translate(-110%, -50%) scale(1); -ms-transform: translate(-110%, -50%) scale(1); transform: translate(-110%, -50%) scale(1); } .portfolio-grid.grid-list .grid-project { -ms-grid-column: 1; -ms-grid-column-span: 9; grid-column: 1 / 10; padding-bottom: 0; } .portfolio-grid.grid-list .grid-projects-wrapper { gap: 30px; } .portfolio-grid.grid-list .grid-project-wrap::before { content: ""; display: block; position: absolute; bottom: 0; left: 0; height: 1px; width: 0%; background: #191919; opacity: .2; -webkit-transition: width 1.25s ease-out; -o-transition: width 1.25s ease-out; transition: width 1.25s ease-out } .portfolio-grid.grid-list .grid-project.gl-inview .grid-project-wrap::before { width: 100%; } .portfolio-grid.grid-list .grid-project-wrap { padding-bottom: 30px; } .portfolio-grid.grid-list .grid-project-meta>div.grid-project-year { display: block; float: right; width: 100px; text-align: left; } .portfolio-grid.grid-list .grid-project-meta>div.grid-project-category { float: left; margin-left: 0; font-size: 15px; } .portfolio-grid.grid-list .grid-project-meta>div.grid-project-title { width: 50%; text-align: left; } .portfolio-grid.grid-list.hover-classic .grid-project:hover .grid-project-category span { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } .portfolio-grid.grid-list .grid-project-meta>div span { display: inline-block } .portfolio-grid.grid-list .grid-project-meta { text-transform: none; } .portfolio-grid.grid-list .grid-project-title { font-size: 20px; line-height: 1.15; } .portfolio-grid.grid-list .grid-project-category span::before { display: none; } .portfolio-grid.grid-list .grid-project-category span::after { display: none; } span.g-list-arrow { display: block; float: right; font-size: 17px; margin-left: 100px; opacity: .3; } .animating .grid-project-category, .animating .grid-project-category span, .animating .grid-project-title { -webkit-transition: none !important; -o-transition: none !important; transition: none !important } /* Grid Projects */ .grid-project .grid-project-image, .grid-project .grid-project-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; overflow: hidden } .grid-project .grid-project-image { display: block; float: left; } .grid-project-meta { display: block; float: left; width: 100%; margin-top: 15px; overflow: hidden; text-transform: uppercase; font-size: 16px; } .grid-project-meta>div { display: block; float: left; } .grid-project-meta>div.grid-project-category { float: right; opacity: .6; } .grid-project-meta>div.grid-project-year { opacity: .6 } .grid-project-meta>div.grid-project-year { display: none; } .grid-projects-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 100px 1fr 100px 1fr 100px 1fr 100px 1fr 100px 1fr 100px 1fr 100px 1fr; grid-template-columns: repeat(8, 1fr); width: 100%; gap: 100px; position: relative; padding-top: 50px; } .portfolio-grid.col-2 .grid-projects-wrapper { -ms-grid-columns: (1fr)[10]; grid-template-columns: repeat(10, 1fr) } .portfolio-grid.col-2 .grid-projects-wrapper .grid-project { grid-column-start: span 5 } .grid-project { grid-column-start: span 4; padding-bottom: 150px; margin-bottom: 0; position: relative; -webkit-filter: saturate(0.75); filter: saturate(0.75); will-change: filter; } .grid-project:hover { -webkit-filter: saturate(1); filter: saturate(1); } /* 3 Columns */ .col-3 .grid-projects-wrapper { -ms-grid-columns: 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr; grid-template-columns: repeat(9, 1fr); gap: 60px; padding-top: 50px } .col-3 .grid-project { grid-column-start: span 3; } .grid-project-wrap { width: 100%; float: left; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative } .grid-project a { color: var(-primaryColor); text-decoration: none } .grid-project-title span::after { content: attr(data-hover); position: absolute; left: 0; top: 100%; } .grid-project-meta>div span { display: block; position: relative; } .grid-project-category span::after { content: 'arrow_outward'; font-family: 'Material Icons'; position: absolute; top: 100%; right: 0; } .grid-project-category span::before { content: attr(data-view-text); position: absolute; top: 100%; right: 20px; white-space: nowrap; } /* Details Positionings */ .details-above .grid-project-wrap { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse } .details-above .grid-project-meta { margin-top: 0; margin-bottom: 15px; } .details-overlap .grid-project-meta { position: absolute; bottom: 25px; padding: 0 25px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff } /* Parallax Images */ .parallax-on .grid-project .grid-project-image img { height: calc(100% + 100px); -o-object-position: center top; object-position: center top; } /* Hovers */ /*** Classic Hover */ .hover-classic .grid-project-category, .hover-classic .grid-project-category span, .hover-classic .grid-project-title { -webkit-transition: opacity .35s ease-out, -webkit-transform .7s cubic-bezier(0.2, 0.7, 0.2, 1); transition: opacity .35s ease-out, -webkit-transform .7s cubic-bezier(0.2, 0.7, 0.2, 1); -o-transition: transform .7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity .35s ease-out; transition: transform .7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity .35s ease-out; transition: transform .7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity .35s ease-out, -webkit-transform .7s cubic-bezier(0.2, 0.7, 0.2, 1); } .hover-classic .grid-project-category, .hover-classic .grid-project-category span { -webkit-transition-delay: .15s; -o-transition-delay: .15s; transition-delay: .15s } .hover-classic .grid-project:hover .grid-project-category { opacity: 1 } .hover-classic .grid-project:hover .grid-project-category span, .hover-classic .grid-project:hover .grid-project-title { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%) } /*** Image Mask Hover */ .hover-imageMask .grid-project-image img { -webkit-clip-path: inset(0% 0% 0% 0%); clip-path: inset(0% 0% 0% 0%); -webkit-transition: -webkit-clip-path .4s ease-out; transition: -webkit-clip-path .4s ease-out; -o-transition: clip-path .4s ease-out; transition: clip-path .4s ease-out; transition: clip-path .4s ease-out, -webkit-clip-path .4s ease-out } .hover-imageMask .grid-project-image img.masked { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; z-index: -1; /* filter: brightness(3); */ -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-transition: -webkit-transform .75s ease-out, -webkit-filter .75s ease-out; transition: -webkit-transform .75s ease-out, -webkit-filter .75s ease-out; -o-transition: transform .75s ease-out, filter .75s ease-out; transition: transform .75s ease-out, filter .75s ease-out; transition: transform .75s ease-out, filter .75s ease-out, -webkit-transform .75s ease-out, -webkit-filter .75s ease-out; /* will-change: filter*/ } .hover-imageMask .grid-project .grid-project-image { position: relative; } .hover-imageMask .grid-project:hover .grid-project-image img:not(.masked) { -webkit-clip-path: inset(0% 100% 0% 0%); clip-path: inset(0% 100% 0% 0%); } .hover-imageMask .grid-project:hover .grid-project-image img.masked { -webkit-transform: translate(-50%, -50%) scale(1.1); -ms-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); /* filter: brightness(1)*/ } /*** Cursor Hover */ .hover-cursor .grid-project a { cursor: none } /*** Arrow Hover */ .hover-arrow .grid-project::after { content: 'arrow_outward'; font-family: 'Material Icons'; position: absolute; top: 50px; right: 50px; font-size: 150px; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: all .5s cubic-bezier(0.36, 0.74, 0.06, 0.99); -o-transition: all .5s cubic-bezier(0.36, 0.74, 0.06, 0.99); transition: all .5s cubic-bezier(0.36, 0.74, 0.06, 0.99) } .hover-arrow .grid-project:hover::after { top: 0; right: 0; opacity: 1; visibility: visible } .hover-arrow.details-above .grid-project::after { top: 80px } .hover-arrow.details-above .grid-project:hover::after { top: 30px } /*** Summary Hover */ /* Switching Layout */ /* .grid-projects-wrapper { display: grid; grid-template-columns: repeat(8, 1fr); width: 100%; gap: 100px; } */ /* .grid-project { grid-column-start: span 4; padding-bottom: 1.5rem; margin-bottom: 5rem; position: relative; } .grid-project-wrap { width: 100%; height: 100%; } .grid-projects-wrapper.collapsed { grid-template-columns: repeat(20, 100px); gap: 10px; width: fit-content; } .grid-projects-wrapper.collapsed .grid-project { grid-column-start: span 4; grid-column-end: unset; max-height: 500px } .grid-project.align-right { grid-column-end: 9 } .grid-project.align-center { margin-left: auto; margin-right: auto; text-align: unset } .gp--xs { grid-column-start: span 2; } .gp--sm { grid-column-start: span 3; } .gp--lg { grid-column-start: span 8; } */ @media only screen and (max-width: 750px) { .rco-posts-grid .grid--filters>ul>li { padding: .5em 1em; margin-right: .5em; margin-bottom: .5em } .single-blog-post.horizontal a, .rco-posts-grid.grid-list .single-blog-post a { width: 100%; } .single-post-page .next-post-wrap .single-blog-post.horizontal .post-details { height: auto; padding: 0; width: 100%; } .rco-posts-grid .grid--switcher { display: block; float: left; margin-bottom: 1em; width: 100%; text-align: center; } .rco-posts-grid .grid--posts { grid-template-columns: 1fr; grid-gap: 0; } .grid--post--item.cat_news { margin-bottom: 0; } .post-meta>div:last-child { float: left; margin-top: 2em; } .post-details { min-height: 350px; } } /* Conteúdo: editorial hero */ .content-journal-hero { --mainColor: #ebebeb; --mainBackground: #191919; min-height: 100svh; padding-top: 0; margin-bottom: 0; background: #191919; color: #ebebeb; } .page-content-index { background: #191919; } .content-journal-results { --mainColor: #191919; --mainBackground: #ffffff; background: #ffffff; color: #191919; } .content-journal-hero__wrapper { min-height: 100svh; margin-bottom: 0; padding-top: clamp(170px, 22vh, 250px); padding-bottom: clamp(48px, 7vh, 80px); box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: nowrap; } .content-journal-hero__intro { width: min(100%, 470px); margin-left: auto; margin-bottom: clamp(70px, 10vh, 120px); font-size: clamp(14px, 1vw, 17px); line-height: 1.28; letter-spacing: -.015em; } .content-journal-hero__intro p { margin: 0; } .content-journal-hero__title { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "ideas ideas" "amp insights"; align-items: end; row-gap: 0; margin: auto 0 clamp(62px, 9vh, 105px); } .content-journal-hero__word, .content-journal-hero__amp { display: block; font-family: inherit; font-size: clamp(92px, 11vw, 180px); line-height: .78; letter-spacing: -.075em; font-weight: 400; white-space: nowrap; } .content-journal-hero__word--ideas { grid-area: ideas; justify-self: start; } .content-journal-hero__amp { grid-area: amp; justify-self: start; color: rgba(235, 235, 235, .30); font-size: clamp(84px, 9vw, 150px); line-height: .8; } .content-journal-hero__word--insights { grid-area: insights; justify-self: end; } .content-journal-hero__filters { display: flex; align-items: baseline; gap: 8px; width: 100%; font-size: clamp(18px, 1.45vw, 25px); line-height: 1.2; letter-spacing: -.025em; } .content-journal-hero__filter-mark { color: var(--mainColor); } .content-journal-hero__filters .filters-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .content-journal-hero__filters .post-filter { color: rgba(235, 235, 235, .38); cursor: pointer; transition: color .25s ease, opacity .25s ease; user-select: none; text-transform: lowercase; } .content-journal-hero__filters .post-filter::after { content: ","; margin-right: .28em; } .content-journal-hero__filters .post-filter:last-child::after { display: none; } .content-journal-hero__filters .post-filter:hover, .content-journal-hero__filters .post-filter.active { color: var(--mainColor); } /* O filtro passou para o hero; a grade abaixo mantém apenas os controles de visualização. */ .content-journal-grid .grid--switcher { margin-bottom: 35px; } @media only screen and (max-width: 900px) { .content-journal-hero__wrapper { padding-top: 150px; padding-left: 25px; padding-right: 25px; padding-bottom: 40px; } .content-journal-hero__intro { width: min(82%, 420px); margin-left: 18%; margin-bottom: 65px; } .content-journal-hero__word, .content-journal-hero__amp { font-size: clamp(66px, 15vw, 120px); } .content-journal-hero__amp { font-size: clamp(62px, 13vw, 105px); } } @media only screen and (max-width: 750px) { .content-journal-hero { min-height: 100svh; } .content-journal-hero__wrapper { min-height: 100svh; padding-top: 128px; padding-left: 22px; padding-right: 22px; padding-bottom: 34px; } .content-journal-hero__intro { width: 78%; margin-left: 22%; margin-bottom: 72px; font-size: 13px; } .content-journal-hero__title { grid-template-columns: 1fr; grid-template-areas: "ideas" "amp" "insights"; margin-bottom: 60px; } .content-journal-hero__word, .content-journal-hero__amp { font-size: clamp(62px, 19vw, 94px); line-height: .84; } .content-journal-hero__amp { color: rgba(235, 235, 235, .28); margin-top: .08em; } .content-journal-hero__word--insights { justify-self: end; margin-top: .08em; } .content-journal-hero__filters { gap: 6px; font-size: 17px; } .content-journal-grid .grid--switcher { display: none; } } /* Conteúdo: thumbnails editoriais mantêm a proporção original 1200x800. A imagem preenche o card sem deformação, usando corte central apenas quando necessário. */ .content-journal-grid .single-post-image { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #f2f2f0; } .content-journal-grid .single-post-image img { display: block; float: none; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: center; } /* Conteúdo: todos os posts aparecem por padrão. */ .content-journal-results .content-journal-older { padding-top: clamp(56px, 7vw, 96px); } .content-journal-hero__filters { scroll-margin-top: 110px; } @media only screen and (max-width: 750px) { .content-journal-results .content-journal-older { padding-top: 44px; } .content-journal-hero__filters { scroll-margin-top: 88px; } } /* source: assets/css/_css/project.css */ /* Portfolio Page (2 Columns) */ /*=============================================== # Project Pages =================================================*/ main.project-page { --mainBg: var(--mainBackground) } /* Projects Navigation */ .rco-next-project { display: block; float: left; width: 100%; height: 100vh; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; margin-bottom: 0; z-index: 0; background: var(--mainBackground) } .rco-next-project a { display: block; width: 100%; height: 100%; color: unset; text-decoration: none; color: var(--mainColor) } .next-project-image { display: block; width: 45%; max-height: 80%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: hidden } .next-project-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top } .next-project-title { display: block; float: left; width: 100%; position: absolute; top: 50%; -webkit-transform: translate(-50% . 0%); -ms-transform: translate(-50% . 0%); transform: translate(-50% . 0%); z-index: -1; } .next-project-category { text-align: center; margin-top: 50px; } .next-project-year { position: absolute; bottom: 50px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .project-page-header .project-image img { -o-object-position: top; object-position: top } .project-page-header { margin-bottom: 0; display: block; float: left; width: 100%; background: var(--mainBackground) } /* No Image */ .project-page-header.no-image .wrapper { display: block; margin: 0 auto; height: auto; } .project-page-header.boxed-image { width: 100%; display: block; padding-top: 150px; } .project-page-header.no-image .wrapper .project-title { margin-bottom: 30px; position: relative; white-space: nowrap } .project-page-header.no-image .wrapper .project-meta { display: block; float: left; width: 100% } .project-page-header.no-image .wrapper .project-meta>span { display: block; width: 50%; float: left } .project-page-header.no-image .wrapper .project-button { margin-top: 50px; float: left } /* Fullscreen Header */ .project-page-header.fullscreen-image { height: 100svh; overflow: hidden; color: var(--mainColor); } .project-page .project-image.featured .rco-video, .project-page .project-image.featured { width: 100%; height: 100%; } .project-page-header.fullscreen-image .project-image { position: absolute; top: 0; left: 0; } .project-page-header.fullscreen-image .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 0; height: 100%; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 0 15px; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-wrap: wrap; flex-wrap: wrap; } .project-page-header.fullscreen-image .project-controls { display: block; float: left; -ms-flex-item-align: start; align-self: flex-start; margin-top: 10%; } .project-page-header.fullscreen-image .project-title h1.big-title { font-size: 155px; letter-spacing: -0.04em } .project-page-header.fullscreen-image .project-summary { display: block; float: right; } .project-page-header.fullscreen-image .project-category { display: block; float: left; } .project-page-header.fullscreen-image .project-category .anim_line { float: left; } .project-page-header.fullscreen-image .project-meta { display: block; float: left; width: 100%; } .project-page-header.fullscreen-image .project-title { margin-top: 100px; } .project-page-header .project-category::before, .project-page-header .project-title .material-icons { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48 } /* Video Header */ .project-page-header.video { height: 100svh; position: relative; } .project-page-header.video .project-video { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 40%; -webkit-transition: width 1s ease-out; -o-transition: width 1s ease-out; transition: width 1s ease-out; z-index: 1; height: auto } .project-page-header.video .project-meta { position: absolute; bottom: 0; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 50px; } .project-page-header.video .project-meta>div { display: block; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; min-width: 20%; max-width: 50%; } .project-page-header.video .wrapper { padding-top: 125px; -webkit-box-sizing: border-box; box-sizing: border-box; } .project-page-header.video .project-meta>div:last-child { text-align: right; float: right; } .project-page-header.video span.close-video { position: absolute; top: 50px; left: 0; opacity: 0; pointer-events: none; } .project-page-header.video span.close-video, .project-page-header.video .project-meta, .project-page-header.video .project-top { -webkit-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease } .project-page-header.video.video-starts span.close-video { opacity: 1 } .project-page-header.video.video-starts .project-top, .project-page-header.video.video-starts .project-meta { opacity: 0; } .project-page-header.video.video-starts .project-video { width: 100%; } /* Creative Header */ .project-page-header.creative .wrapper { padding-top: 150px; } .project-page-header.creative .project-meta>div:last-child { float: right; } .project-page-header.creative .project-meta>div { display: block; float: left; width: 30% } .project-page-header.creative .project-title h1.big-title { font-size: 150px; line-height: 1.1 } .project-page-header.creative .project-meta { display: block; float: left; width: 100%; margin-top: 50px } .project-page-header.creative .project-image { display: block; float: left; width: 100%; margin-top: 50px; position: relative; z-index: 1; overflow: hidden; max-height: 80vh; margin-bottom: 0 } .project-page-header.creative .project-category .anim_line { float: left; } .project-page-header.creative .project-title { display: block; float: left; width: 100%; } /*Half Image*/ .project-page-header.half-image { height: 70vh; display: block; position: relative; width: 100%; float: left; z-index: 2 } .project-page-header.half-image .project-category { display: block; float: left; width: 100%; margin-top: 20px; margin-left: 15px; } .project-page-header.half-image .project-back-button { margin-left: 0; margin-top: 0; position: absolute; bottom: 25px; left: -25px; cursor: pointer; } .project-page-header.half-image .wrapper { height: 100%; padding-top: 150px; -webkit-box-sizing: border-box; box-sizing: border-box; display: block } .project-page-header.half-image .project-image { position: absolute; left: 0; width: 100%; display: block; height: 100%; overflow: hidden } .project-page-header.half-image .project-title { display: block; float: left; width: 100%; -moz-text-align-last: justify; text-align-last: justify } .project-page-header.half-image .project-meta { -ms-flex-item-align: end; align-self: flex-end; display: block; float: left; width: 100%; margin-bottom: 50px; } .project-page-header.half-image .project-title h1 { margin: 0; } .project-page-header.half-image .project-button { position: absolute; bottom: 50px; right: 0; } /*Tall*/ .project-page-header.tall-image { position: relative; padding-bottom: 50px; margin-bottom: 0 } .project-page-header.tall-image .project-image.featured { position: absolute; top: 0; left: 0; overflow: hidden } .project-page-header.tall-image .wrapper { padding-top: 30vh; } .project-page-header.tall-image .project-title { display: block; max-width: 60%; } .project-page-header.tall-image .project-summary { display: block; max-width: 45%; margin-left: 15px; } .project-page-header.tall-image .project-title h1 { font-size: 150px; line-height: 160px; margin-bottom: 75px } .project-page-header.tall-image .project-category { margin-bottom: 50px; margin-left: 15px; text-transform: uppercase } .project-page-header.tall-image .rco-circular-text { position: absolute; top: 100vh; right: 0; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .project-page-header.tall-image .rotate-char, .project-page-header.tall-image .rotate-word { font-size: 16px } .project-page-header.tall-image .project-meta { display: block; float: left; margin-top: 50px; margin-left: 15px; } .project-page-header.tall-image .project-meta>div { display: block; float: left; margin-right: 60px; } .project-page-header.tall-image .project-meta>div .meta-title { display: block; margin-bottom: 35px; opacity: .6; } .project-page-header.tall-image .project-button { display: block; float: left; clear: both; margin-top: 100px; margin-left: 35px; } /* Image Gallery */ .project-page-header.image-gallery { background: var(--mainBackground) } .project-page-header.image-gallery .wrapper { height: 100%; overflow: hidden; padding-top: 150px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; padding-bottom: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; overflow: visible; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .project-page-header.image-gallery .project-hero { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 70vw; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-right: 100px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .project-page-header.image-gallery .project-hero>div.project-meta { -ms-flex-item-align: end; align-self: flex-start; margin-top: auto; display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 80%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .project-page-header.image-gallery.vertical .project-hero>div.project-meta { margin-top: 0; } .project-page-header.image-gallery .project-hero>div { display: block; width: 100%; float: left; } .project-page-header.image-gallery .project-title h1 { margin-bottom: 0; } .project-page-header.image-gallery .project-images { height: 100%; display: block; float: left; } .project-page-header.image-gallery .project-images-slider { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: 100px; } .project-page-header.image-gallery .project-image { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; width: auto !important; } .project-page-header.image-gallery .project-image img { width: auto !important } .project-page-header.image-gallery .project-hero>div.project-title { margin-bottom: 30px; -moz-text-align-last: justify; text-align-last: justify; } .project-page-header.image-gallery div.project-slide-button { position: absolute; right: 0; bottom: 0; display: inline-block; width: auto; cursor: pointer } .project-page-header.image-gallery div.project-slide-button span { font-size: 150px; } .project-page-header.image-gallery .project-meta>div { display: block; margin-bottom: 20px; } /* Image Gallery Vertical */ .project-page-header.image-gallery.vertical .project-title h1 { -moz-text-align-last: auto; text-align-last: auto; font-size: 120px; line-height: 115px; margin-left: -10px; letter-spacing: -0.06em; } .project-page-header.image-gallery.vertical .project-hero { width: 35%; margin-right: 50px; -webkit-box-flex: 35%; -ms-flex: 35%; flex: 35%; } .project-page-header.image-gallery.vertical .wrapper { display: block; } .project-page-header.image-gallery.vertical .project-hero { float: left; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .project-page-header.image-gallery.vertical .project-images { width: 50%; height: -webkit-min-content; height: -moz-min-content; height: min-content; display: block; float: left; } .project-page-header.image-gallery.vertical .project-images-slider { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: auto; } .project-page-header.image-gallery.vertical .project-image { width: 100%; height: auto; } .project-page-header.image-gallery.vertical .project-image img { width: 100% !important; height: auto; } .project-page-header.image-gallery.vertical .project-hero>div.project-category { margin-top: auto; margin-bottom: 35px } .project-page-header.image-gallery.vertical .project-meta { margin-top: 35px; } .project-page-header.image-gallery.vertical .project-hero>div.project-title { margin-bottom: 35px; } .project-page-header.image-gallery.vertical div.project-slide-button { bottom: 20px; } .project-page-header.image-gallery.vertical div.project-slide-button span { -webkit-transition: -webkit-transform .25s ease-out; transition: -webkit-transform .25s ease-out; -o-transition: transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out } .project-page-header.image-gallery.vertical div.project-slide-button.return span { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg) } .site-main.project-page[data-barba-namespace="project-gallery-vertical"] .rco-next-project, .site-main.project-page[data-barba-namespace="project-gallery-horizontal"] .rco-next-project { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /** Single Project ------------------------------ */ .single-project { display: block; float: left; width: 100%; --height: 'auto'; --mobileHeight: 'auto'; margin-bottom: 1em } .single-project-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } .single-project.hover-brightness { -webkit-filter: brightness(0.5) saturate(0.5); filter: brightness(0.5) saturate(0.5); -webkit-transition: -webkit-filter .4s ease; transition: -webkit-filter .4s ease; -o-transition: filter .4s ease; transition: filter .4s ease; transition: filter .4s ease, -webkit-filter .4s ease; will-change: filter } .single-project.hover-brightness:hover { -webkit-filter: brightness(1) saturate(1); filter: brightness(1) saturate(1); } .single-project-image { width: 100%; height: var(--height) } .single-project-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .single-project .rco-video { height: 100%; } .single-project a { text-decoration: none; color: var(--mainColor); width: 100%; height: 100%; display: block; } .single-project-meta { display: block; float: left; width: 100%; margin-top: 15px; } .single-project-meta>div { display: block; float: left; } .single-project-meta>div:nth-child(2) { opacity: 0; margin-left: 20px; -webkit-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; margin-top: 0.45em; } .single-project:hover .single-project-meta>div:nth-child(2) { opacity: .5; } @media only screen and (max-width: 750px) { ul.list-portfolio-filtering { margin-left: 0; } .list-projects-wrapper .list-project>a { display: block; padding: 1.5em 0; } .list-project-title { width: 100%; margin-bottom: 0.2em; } .list-project-meta { display: inline-block; margin: unset; margin-left: 0.1em; } .list-project-category { display: inline-block; float: right; } } /* Showcase Layouts ------------------------------ */ .fullscreen { position: relative; width: 100%; height: 100vh; /* background: #f1f1f1 */ ; overflow: hidden } .pin-spacer { pointer-events: none !important } .pin-spacer>* { pointer-events: all } .light .showcase-project a { color: var(--mainColor); } .project-image .plyr { pointer-events: none } .showcase-footer.wrapper-full, .showcase-footer.wrapper-small, .showcase-footer.wrapper { position: absolute; bottom: 50px; width: 100%; margin-bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; height: auto !important; } .showcase-footer * { margin-bottom: 0 !important; } .showcase-footer.mx-difference { mix-blend-mode: difference } .showcase-footer-right { text-align: right; } .showcase-footer>div { margin-bottom: 0 } .project-image img, .project-image video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top } .showcase-video { width: 100%; height: 100%; } .slide-bgimg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; } .fs-parallax-wrap { position: absolute; width: 100%; height: 100%; overflow: hidden; } .showcase-fullscreen-carousel .fc-images-slider .fs-parallax-wrap { top: 50%; left: 50%; transform: translate(-50%, -50%) } .slides-nav { display: inline-block; cursor: pointer } .slides-nav>div { display: inline-block; cursor: pointer; } .slide-prev::after { content: "/"; display: inline-block; margin: 0 20px; } .slides-nav.icons-nav .slide-prev::after { display: none } .slides-nav.icons-nav>div { margin-right: 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .slides-nav.icons-nav span { font-size: 30px; line-height: 30px; } .slides-fraction>div { display: inline-block; line-height: 1; height: 1em; } .slides-fraction { display: block; float: left; } .curr-index-wrap { width: 100%; height: 100%; overflow: hidden; position: relative } .curr-index-wrap>span { width: 100%; height: 100%; position: absolute; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); left: 0 } .curr-index-wrap>span:first-child { -webkit-transform: none; -ms-transform: none; transform: none } span.fraction-line { display: inline-block; width: 1.5em; height: 2px; background-color: var(--mainColor); margin: 0 5px; vertical-align: middle; margin-top: -7px; } /* Showcase 3D Titles ------------------------------ */ .showcase-3d-titles { 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; position: relative; height: 100vh; -webkit-perspective: 10000px; perspective: 10000px; width: 100%; z-index: 1 } .showcase-3d-titles .s3t-projects-wrap { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .showcase-3d-titles .s3t-projects-wrap .showcase-project { position: absolute; white-space: nowrap; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; padding: 0 10px; -webkit-transform: translate(-50%, -50%) rotateX(calc(var(--rotateX) * 1)) translateZ(var(--transformZ)); transform: translate(-50%, -50%) rotateX(calc(var(--rotateX) * 1)) translateZ(var(--transformZ)); z-index: 0; text-align: center; z-index: -1; } .showcase-3d-titles .s3t-projects-wrap .showcase-project a { text-decoration: none; } .showcase-3d-titles .s3t-projects-wrap .showcase-project a .project-title { opacity: 0.1; width: 100vw; text-align: center; } .showcase-3d-titles .s3t-projects-wrap .showcase-project a .project-title span { pointer-events: none } .showcase-3d-titles .s3t-projects-wrap .showcase-project.active a .project-title span { pointer-events: all } .showcase-3d-titles .s3t-projects-wrap .showcase-project.active a .project-title { opacity: 1 } .s3t-images { position: absolute; z-index: 2; width: 25vw; height: 40vh; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .3s ease } .s3t-images * { pointer-events: none !important } .s3t-images.active { opacity: 1 } .d-img { position: absolute; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; overflow: hidden; } .d-img.d-back { z-index: -1 } .d-img { transform: translate3d(0, -100%, 0) } .d-img>div { transform: translate3d(0, 100%, 0) scale(1) } .d-img .project-image { width: 100%; height: 100%; } .d-img .project-image .rco-video { height: 100%; } /* Showcase Wall ------------------------------ */ .showcase-wall.light { background: #191919 } .sw-projects-wrap { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; white-space: nowrap; width: auto; position: relative; z-index: 1; } .showcase-wall .showcase-project { white-space: nowrap; padding: 25px 0; position: relative; z-index: 1; -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; } .showcase-wall .showcase-project a { -webkit-transition: color .3s; -o-transition: color .3s; transition: color .3s; } .showcase-wall-wrap { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .showcase-wall .showcase-project::after { content: ""; display: inline-block; width: 150px; height: 5px; background-color: var(--mainColor); vertical-align: middle; margin: 0 35px; -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; } .showcase-wall .showcase-project:last-child::after { display: none } .showcase-wall .project-title { display: inline-block; vertical-align: middle; z-index: 1; position: relative; } .showcase-wall .project-title>* { margin-bottom: 0 } .showcase-wall .showcase-project .project-index { position: absolute; top: 25px; left: 0; -webkit-transform: translate(-20px, 25%); -ms-transform: translate(-20px, 25%); transform: translate(-20px, 25%); font-size: 15px; -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; } .sw-images-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .sw-images-wrap .project-image img { width: 100%; display: block; height: 100%; -o-object-fit: cover; object-fit: cover; } .showcase-wall .showcase-project:nth-child(even) .project-image { -webkit-clip-path: inset(0% 0% 0% 100%); clip-path: inset(0% 0% 0% 100%); } .showcase-wall .showcase-project .project-image { opacity: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 25vw; z-index: -1; -webkit-clip-path: inset(0% 100% 00% 0%); clip-path: inset(0% 100% 00% 0%); -webkit-transition: opacity .2s ease, -webkit-clip-path .4s ease; transition: opacity .2s ease, -webkit-clip-path .4s ease; -o-transition: clip-path .4s ease, opacity .2s ease; transition: clip-path .4s ease, opacity .2s ease; transition: clip-path .4s ease, opacity .2s ease, -webkit-clip-path .4s ease; pointer-events: none; overflow: hidden; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center } .showcase-wall .showcase-project .project-image img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition: -webkit-transform 1s ease-out; transition: -webkit-transform 1s ease-out; -o-transition: transform 1s ease-out; transition: transform 1s ease-out; transition: transform 1s ease-out, -webkit-transform 1s ease-out; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left } .showcase-wall .showcase-project a:hover .project-image { -webkit-clip-path: inset(00%); clip-path: inset(00%); opacity: 1; } .showcase-wall .showcase-project a:hover .project-image img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .showcase-wall.hovered .showcase-project { opacity: 0.05; z-index: 0 } .showcase-wall.hovered .showcase-project.current { opacity: 1; z-index: 1 } .showcase-wall.hovered .showcase-project.current::after { opacity: 0.05; } .sc-overlay, .sw-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: -1; } .showcase-wall .project-image video { width: 100% } .showcase-wall.light .showcase-project .project-index { color: #fff; } .showcase-wall.light .showcase-project::after { background-color: #fff } .showcase-wall.animating { pointer-events: none } .showcase-wall.animating .sw-projects-wrap { overflow: hidden } .showcase-wall.animating .project-index, .showcase-wall.animating .showcase-project::after { opacity: 0 } /* Showcase Fullscreen Wall ------------------------------ */ .showcase-fullscreen-wall .project-image { opacity: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); width: 25vw; z-index: -1; -webkit-clip-path: inset(0% 100% 00% 0%); clip-path: inset(0% 100% 00% 0%); -webkit-transition: opacity .2s ease, -webkit-clip-path .4s ease; transition: opacity .2s ease, -webkit-clip-path .4s ease; -o-transition: clip-path .4s ease, opacity .2s ease; transition: clip-path .4s ease, opacity .2s ease; transition: clip-path .4s ease, opacity .2s ease, -webkit-clip-path .4s ease; pointer-events: none; overflow: hidden; -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left } .showcase-fullscreen-wall .showcase-project:nth-child(even) .project-image { -webkit-clip-path: inset(0% 0% 0% 100%); clip-path: inset(0% 0% 0% 100%); } .showcase-fullscreen-wall .project-image img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition: -webkit-transform 1s ease-out; transition: -webkit-transform 1s ease-out; -o-transition: transform 1s ease-out; transition: transform 1s ease-out; transition: transform 1s ease-out, -webkit-transform 1s ease-out; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left } .loading .showcase-fullscreen-wall .project-image { -webkit-transition: all 0s !important; -o-transition: all 0s !important; transition: all 0s !important; } .showcase-fullscreen-wall .showcase-project:hover { z-index: 1 } .showcase-fullscreen-wall .showcase-project:hover .project-image { -webkit-clip-path: inset(00%); clip-path: inset(00%); opacity: 1; } .showcase-fullscreen-wall .showcase-project:hover .project-image img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .showcase-fullscreen-wall.hovered .showcase-project { opacity: .2; } .showcase-fullscreen-wall.hovered .showcase-project.current { opacity: 1; } .showcase-fullscreen-wall.hovered .showcase-project.current::after { opacity: .2; } .showcase-fullscreen-wall .showcase-project::after { content: ""; display: inline-block; width: 30px; height: 4px; background: var(--mainColor); vertical-align: middle; margin-top: -3em; margin-left: 30px; margin-right: 30px; -webkit-transition: height .5s ease .5s, opacity .5s ease; -o-transition: height .5s ease .5s, opacity .5s ease; transition: height .5s ease .5s, opacity .5s ease } .loading .showcase-fullscreen-wall .showcase-project::after { opacity: 0 !important } .showcase-fullscreen-wall .showcase-project.detect-pov::after { height: 0; } .showcase-fullscreen-wall .showcase-project.detect-pov.is-inview::after { height: 4px; } /* .showcase-fullscreen-wall .showcase-project:nth-child(3n)::after, .showcase-fullscreen-wall .showcase-project:last-child::after { display: none; } */ .showcase-fullscreen-wall .project-meta { display: none; } .showcase-fullscreen-wall .sfw-projects-wrapper { height: auto; top: 150px; position: absolute; width: 90%; } .showcase-fullscreen-wall .showcase-project { display: inline-block; position: relative; -webkit-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease } .showcase-fullscreen-wall .showcase-project .project-title { overflow: hidden } .showcase-fullscreen-wall.switching .showcase-project::before { opacity: 0 } .showcase-fullscreen-wall .showcase-project a { padding: 0.5em 0; display: inline-block; } .showcase-fullscreen-wall .showcase-fullscreen-wall { display: block; position: relative; width: 100%; height: 100%; } .showcase-fullscreen-wall .swf-layout-switch { position: absolute; bottom: 50px; display: block; } .showcase-fullscreen-wall .swf-layout-switch>div { display: block; float: left; text-transform: uppercase; margin-right: 15px; cursor: pointer; } .showcase-fullscreen-wall .swf-layout-switch>div:last-child { margin-right: 0; } .showcase-fullscreen-wall .swf-layout-switch>div::before { content: "("; display: inline-block; margin-right: 5px; opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease } .showcase-fullscreen-wall .swf-layout-switch>div::after { content: ")"; display: inline-block; margin-left: 5px; opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease } .showcase-fullscreen-wall .swf-layout-switch>div.active::after, .showcase-fullscreen-wall .swf-layout-switch>div.active::before { opacity: 1; } .showcase-fullscreen-wall.wall-images .showcase-project { width: auto; } .showcase-fullscreen-wall.wall-images .project-image { position: relative; opacity: 1; -webkit-clip-path: inset(0%) !important; clip-path: inset(0%) !important; left: 0; top: 0; -webkit-transform: none; -ms-transform: none; transform: none; } .showcase-fullscreen-wall.wall-images .sfw-projects-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .showcase-fullscreen-wall.wall-images .project-title.text-h2 { font-size: 20px; text-transform: uppercase; margin-top: 10px; display: block; float: left; } .showcase-fullscreen-wall.wall-images .project-meta { display: block; float: right; text-transform: uppercase; margin-top: 10px; } .showcase-fullscreen-wall.wall-images .project-meta>div { display: inline-block; } .showcase-fullscreen-wall.wall-images .project-image img { -webkit-transform: none; -ms-transform: none; transform: none; -webkit-transition: none; -o-transition: none; transition: none } .showcase-fullscreen-wall.wall-images .showcase-project::before { display: none; } /* Showcase List ------------------------------ */ .showcase-list { display: block; width: 100%; height: auto; float: left; margin-bottom: 100px; } .showcase-list .showcase-list-wrapper { width: 100%; height: 100%; } .sfl-projects-wrap { display: block; width: 100%; float: right; } .sfl-cats-wrap { display: block; float: left; width: 100%; height: 100%; } .showcase-list.hover-normal .project-image { display: none; position: absolute; top: 50%; left: 0; -webkit-transform: translate(-25%, -50%); -ms-transform: translate(-25%, -50%); transform: translate(-25%, -50%); z-index: -1; width: 100%; pointer-events: none } .showcase-list .project-image img { width: 100%; pointer-events: none } .showcase-list .project-image { pointer-events: none } .showcase-list .showcase-project { display: block; float: left; width: 100%; position: relative; z-index: 1; -webkit-transition: opacity .35s ease; -o-transition: opacity .35s ease; transition: opacity .35s ease; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .showcase-list .showcase-project.op-down { opacity: .05; } .showcase-list .showcase-project .project-image { display: none; position: absolute; top: 50%; pointer-events: none; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 45%; overflow: hidden } .showcase-list .showcase-project:hover .project-image { display: block } .showcase-list .showcase-project a { display: block; width: 100%; float: left; padding: 0; text-decoration: none; position: relative; z-index: 1; overflow: hidden } .showcase-list .showcase-project a>div { display: inline-block; overflow: hidden } .showcase-list .project-meta { opacity: 0; } .showcase-list .project-meta>div { display: inline-block; } .showcase-list .project-title>* { margin-bottom: 0; } .showcase-list .sfl-images-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .showcase-list .sfl-images-wrap .project-image { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .showcase-list .sfl-images-wrap .project-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } .showcase-list .showcase-project::before { content: attr(data-index); position: absolute; right: 0; top: 50%; opacity: .1; font-size: 15px; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } .showcase-list .showcase-project.hovered::before, .showcase-list .showcase-project.hovered .project-meta { opacity: 1 } .showcase-list .project-meta::before { content: "/"; margin-left: 10px; margin-right: 10px; } .showcase-list .project-meta>div.project-year { opacity: 0; } /* Showcase Fullscreenslideshow ------------------------------ */ .showcase-fullscreen-slideshow .fs-slideshow-wrap { width: 100%; height: 100%; /* pointer-events: none; */ z-index: 2; position: relative; } .showcase-fullscreen-slideshow .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .showcase-fullscreen-slideshow .showcase-project { position: absolute; width: 100%; height: 100%; display: none; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } .showcase-fullscreen-slideshow .showcase-project.light .project-inner a, .showcase-fullscreen-slideshow .showcase-project.light .project-inner { color: #fff } /* .showcase-fullscreen-slideshow .showcase-project.light .project-meta a { text-decoration: none } */ .showcase-fullscreen-slideshow .slide-bgimg, .showcase-fullscreen-slideshow .swiper-wrapper { -webkit-transition-timing-function: cubic-bezier(0.8, 0, 0.3, 1) !important; -o-transition-timing-function: cubic-bezier(0.8, 0, 0.3, 1) !important; transition-timing-function: cubic-bezier(0.8, 0, 0.3, 1) !important } .showcase-fullscreen-slideshow .project-inner .project-title { margin: 0; text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-align: center; } .showcase-fullscreen-slideshow .pt_char { overflow: hidden } .showcase-fullscreen-slideshow .pt_char span { display: block } .showcase-fullscreen-slideshow .project-image img { width: 100%; -o-object-fit: cover; object-fit: cover; height: 100%; } .showcase-fullscreen-slideshow .project-inner { position: absolute; top: 30%; left: 0; width: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .showcase-fullscreen-slideshow .project-inner>div { display: block; width: 100%; float: left; overflow: hidden } .showcase-fullscreen-slideshow .rco-video { height: 100% } .showcase-fullscreen-slideshow .project-inner>div.project-details { width: 100%; } .showcase-fullscreen-slideshow .project-inner>div.project-details>div { display: block; float: left; width: 50% } .showcase-fullscreen-slideshow .project-inner>div.project-details>div:last-child { text-align: right } .showcase-fullscreen-slideshow .project-button { position: absolute; top: 55%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2 } .showcase-fullscreen-slideshow .project-button .rco-circular-text::after { -webkit-transition: background .3s ease-out; -o-transition: background .3s ease-out; transition: background .3s ease-out } .showcase-fullscreen-slideshow .project-button:hover .rco-circular-text::after { background: #fff } .showcase-fullscreen-slideshow .project-button:hover a { color: #191919 } .showcase-fullscreen-slideshow .project-button a { color: var(--mainColor); -webkit-transition: color.3s ease-out; -o-transition: color.3s ease-out; transition: color.3s ease-out } .showcase-fullscreen-slideshow .fs-images-slider.swiper-container { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: auto } .showcase-fullscreen-slideshow .fs-images-slider.swiper-container img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform 2s ease; transition: -webkit-transform 2s ease; -o-transition: transform 2s ease; transition: transform 2s ease; transition: transform 2s ease, -webkit-transform 2s ease; } .showcase-fullscreen-slideshow .fs-images-slider.swiper-container .swiper-slide-active img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .showcase-fullscreen-slideshow .showcase-project.project_0 { display: block; } .showcase-fullscreen-slideshow .pd_word { overflow: hidden; } .showcase-fullscreen-slideshow .pd_word span { display: block } .showcase-fullscreen-slideshow .showcase-project.wrapper { height: 100vh !important; } /* Showcase Cards ------------------------------ */ .showcase-cards { display: block; width: 100%; height: 100% } .showcase-cards .ssv-projects-wrap { display: block; position: relative; height: 100vh; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: top; perspective-origin: top; bottom: 0; left: 0; } .showcase-cards .showcase-project { width: 100%; height: calc(100% - 300px); border-radius: 35px; position: absolute; overflow: hidden; background: var(--mainBackground); will-change: transform; bottom: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transform-origin: bottom center; } .showcase-cards .showcase-project a { display: block; width: 100%; height: 100%; overflow: hidden; } .showcase-cards .project-title { margin-top: 0.3em; } .showcase-cards .project-image { width: 100%; height: 100%; } .showcase-cards .project-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } .showcase-cards .project-meta { position: absolute; top: 50px; left: 0; width: 100%; padding: 0 50px; -webkit-box-sizing: border-box; box-sizing: border-box; mix-blend-mode: difference; color: #fff; } .showcase-cards .project-meta>div { display: block; float: left; width: 50%; } .showcase-cards .project-meta>div:last-child { text-align: left; } .showcase-cards .project-meta>div.project-title { clear: both; } .showcase-cards .project-meta>div.project-summary { width: 30%; margin-top: 0; float: right; } .showcase-cards .sc-overlay { position: absolute; top: 0; left: 50%; width: 100vw; height: 100vh; background: transparent; display: block; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: -1; } /* Showcase Interactive Grid ------------------------------ */ .showcase-interactive-grid.will-animated { opacity: 0; } .showcase-interactive-grid { opacity: 1; -webkit-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease } .showcase-interactive-grid .projects-wrapper { display: -ms-grid; display: grid; -ms-grid-rows: 1fr 50px 1fr 50px 1fr 50px 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; -ms-grid-columns: 1fr 50px 1fr 50px 1fr 50px 1fr 50px 1fr 50px 1fr 50px 1fr 50px 1fr; grid-template-columns: repeat(8, 1fr); width: 100%; height: calc(100vh - 2em); gap: 50px; } span.scatter-close { position: absolute; bottom: 50px; left: 50%; opacity: 0; z-index: 6; -webkit-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; pointer-events: none; cursor: pointer; transform: translateX(-50%); } .showcase-interactive-grid { display: block; width: 100%; height: 100vh; padding: 2em; -webkit-box-sizing: border-box; box-sizing: border-box; } /* .showcase-interactive-grid .showcase-project:first-child { -ms-grid-column: 2; grid-column-start: 2; } */ .showcase-interactive-grid .showcase-project { width: 100%; height: 100%; display: block; --column: span 1; -ms-grid-column: var(--column); grid-column-start: var(--column); will-change: transform, filter; position: relative; overflow: hidden } .showcase-interactive-grid .showcase-project.active { overflow: visible } .showcase-interactive-grid .project-details { position: absolute } .showcase-interactive-grid .project-image { width: 100%; height: 100%; } .showcase-interactive-grid .projects-wrapper.intro-grid--scatter { width: 200%; height: 200vh; padding: 0; } .showcase-interactive-grid.scatter-active span.scatter-close { opacity: 1; pointer-events: all } .showcase-interactive-grid .projects-wrapper.intro-grid--scatter .showcase-project { max-width: 15vw; max-height: 35vh; opacity: .2; position: relative; } .showcase-interactive-grid .projects-wrapper.intro-grid--scatter .showcase-project .project-image { -webkit-filter: saturate(0.3) blur(3px); filter: saturate(0.3) blur(3px); } .showcase-interactive-grid .projects-wrapper.intro-grid--scatter .showcase-project:hover .project-image { -webkit-filter: blur(0px); filter: blur(0px); } .showcase-interactive-grid .projects-wrapper.intro-grid--scatter .showcase-project.active { width: 30vw; height: 70vh; max-width: none; max-height: none; -webkit-filter: none; filter: none; opacity: 1; z-index: 1; } .showcase-interactive-grid .showcase-project .project-image { -webkit-filter: saturate(0.3); filter: saturate(0.3); will-change: filter; -webkit-transition: -webkit-filter .3s ease; transition: -webkit-filter .3s ease; -o-transition: filter .3s ease; transition: filter .3s ease; transition: filter .3s ease, -webkit-filter .3s ease } .showcase-interactive-grid .projects-wrapper.intro-grid--scatter .showcase-project.active .project-image, .showcase-interactive-grid .showcase-project:hover .project-image { -webkit-filter: saturate(1); filter: saturate(1); } .showcase-interactive-grid .project-title { pointer-events: none; -webkit-transition: opacity .3s ease-out; -o-transition: opacity .3s ease-out; transition: opacity .3s ease-out; z-index: 1; width: 100%; margin-bottom: 0.5em; } .showcase-interactive-grid .project-title .tit_line { overflow: hidden } .showcase-interactive-grid .project-details { right: 0; max-width: 70%; bottom: 0; -webkit-transform: translateX(110%); -ms-transform: translateX(110%); transform: translateX(110%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; visibility: hidden; pointer-events: none; -webkit-transition: visibility .3s ease-out; -o-transition: visibility .3s ease-out; transition: visibility .3s ease-out } .showcase-interactive-grid .showcase-project.active .project-title { opacity: 1 } .showcase-interactive-grid .showcase-project.active .project-details { visibility: visible } .showcase-interactive-grid .project-details .project-category { margin-bottom: 1em; } .showcase-interactive-grid .project-details .project-summary { -ms-flex-item-align: end; align-self: flex-end; margin-bottom: 20px; } .showcase-interactive-grid .project-details .rco-button { margin-bottom: 0; pointer-events: all; --mainColor: $fff; } .showcase-interactive-grid .showcase-project.project-right .project-details { right: unset; left: 0; -webkit-transform: translateX(-110%); -ms-transform: translateX(-110%); transform: translateX(-110%); } .showcase-interactive-grid .rco-video { height: 100%; } .showcase-interactive-grid .showcase-project .project-image img { height: 100%; -o-object-fit: cover; object-fit: cover; } /* Showcase Minimal List ------------------------------ */ .showcase-minimal-list { width: 100%; display: block; float: left; } .showcase-minimal-list.fullscreen { position: relative; width: 100%; height: 100vh; overflow: hidden; } .showcase-minimal-list .sml-projects-wrap { width: 100%; height: auto; position: absolute; top: 0; left: 0; } .showcase-minimal-list .sml-wrapper { width: 100%; height: 100%; } .showcase-minimal-list .sml-wrap { position: relative; top: 50vh; } .showcase-minimal-list .sml-projects-wrap .project-image { display: none; } .showcase-minimal-list .sml-projects-wrap .project-title { margin: 0; display: block; float: left; color: var(--mainColor) } .showcase-minimal-list .showcase-project { width: 100%; display: block; float: left; -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; opacity: .1; padding-bottom: 1.5em; overflow: hidden; pointer-events: none; } .showcase-minimal-list .showcase-project a { pointer-events: none } .showcase-minimal-list .showcase-project.active a { pointer-events: all; } .showcase-minimal-list .showcase-project.active { opacity: 1 } .showcase-minimal-list .sml-projects-wrap .project-meta { display: none; } .showcase-minimal-list .sml-images { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .showcase-minimal-list .sml-images .project-image { width: 100%; height: 100%; display: none; } .showcase-minimal-list .sml-images .project-image img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .showcase-minimal-list .sfc-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .showcase-minimal-list .project-image .showcase-video video, .showcase-minimal-list .project-image .showcase-video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .showcase-minimal-list.fullscreen .sml-images { max-width: 40%; height: auto; left: unset; right: 25px; bottom: 25px; top: unset; overflow: hidden; max-height: 90vh; } /* Showcase Carousel ------------------------------ */ .showcase-carousel.fullscreen { position: relative; width: 100%; height: 100vh; overflow: hidden; } .showcase-carousel .sc-projects-wrap .project-image { display: none; } .showcase-carousel .sc-wrapper { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; top: 50%; will-change: transform; overflow: hidden; } .showcase-carousel .sc-headline { white-space: nowrap; padding-right: 50vw } .showcase-carousel .sc-projects-wrap { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: auto; white-space: nowrap; } .showcase-carousel .showcase-project { display: block; float: left; padding: 0 150px; opacity: .1 } .showcase-carousel .showcase-project:first-child { padding-left: 0 } .showcase-carousel .showcase-project:last-child { padding-right: 0 } .showcase-carousel .showcase-project.active { opacity: 1 } .showcase-carousel .showcase-project .project-meta { display: none; } .showcase-carousel .showcase-project.active { opacity: 1 } .showcase-carousel .project-title { font-size: 190px; line-height: 1.2; margin: 0; -webkit-font-kerning: none; font-kerning: none; letter-spacing: -0.06em } .showcase-carousel .sc-wrapper h1.big-title { margin: 0; line-height: 150px; } .showcase-carousel .sc-images.swiper-container { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50vw; height: 35vw; overflow: hidden; -webkit-clip-path: inset(0% 0% 0% 0%); clip-path: inset(0% 0% 0% 0%); } .showcase-carousel .sc-images.swiper-container .swiper-wrapper { -webkit-transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1); -o-transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1); transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1); } .showcase-carousel .slide-bgimg { -webkit-transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1) !important; -o-transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1) !important; transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1) !important; width: 100%; height: 100%; } .slide-bgimg .rco-video { height: 100%; } .animating .slide-bgimg { height: 100%; } .showcase-carousel .sfc-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .showcase-carousel .sc-lines { position: absolute; top: 50%; width: 100%; height: 1px; display: block; z-index: 1; -webkit-transform: translateY(4em); -ms-transform: translateY(4em); transform: translateY(4em); } .showcase-carousel .sc-lines span { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--mainColor); opacity: 0.3; -webkit-transition: background-color .3s ease; -o-transition: background-color .3s ease; transition: background-color .3s ease } .showcase-carousel.light .sc-lines span { background-color: var(--mainColor) } .showcase-carousel .sc-lines span.sc-line.sc-line-fill { opacity: .7; width: 0%; } .showcase-carousel .pt_line { overflow: hidden; } .showcase-carousel .pt_char { overflow: hidden; vertical-align: top } .showcase-carousel .pt_char span { display: block } /* Animate out **/ .showcase-carousel.animatingg .showcase-project { overflow: hidden; } .fs-parallax-wrap { position: absolute; width: 100%; height: 100%; overflow: hidden; } .sc-projects-wrap a { color: var(--mainColor) } .showcase-footer.wrapper-full, .showcase-footer.wrapper-small, .showcase-footer.wrapper { position: absolute; bottom: 50px; width: 100%; margin-bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; height: auto !important; color: var(--mainColor); } .showcase-footer * { margin-bottom: 0 !important; } .showcase-footer.mx-difference { mix-blend-mode: difference } .showcase-footer-right { text-align: right; } .showcase-footer>div { margin-bottom: 0 } .slides-fraction>div { display: inline-block; line-height: 1; height: 1em; } .slides-fraction { display: block; float: left; } span.fraction-line { display: inline-block; width: 1.5em; height: 2px; background-color: var(--mainColor); margin: 0 5px; vertical-align: middle; margin-top: -7px; } /* Showcase Fulslcreen Carousel ------------------------------ */ .showcase-fullscreen-carousel .fc-slideshow-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; -webkit-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; color: var(--mainColor); } .showcase-fullscreen-carousel .project-image .rco-video { height: 100%; } .showcase-fullscreen-carousel .sfc-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 0; display: block } .showcase-fullscreen-carousel .showcase-project.swiper-slide { display: block; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; width: auto; opacity: 0.02; -webkit-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; padding: 0 75px; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: center; align-content: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .showcase-fullscreen-carousel.dragging .fc-slideshow-wrap { -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); } .showcase-fullscreen-carousel .fc-slideshow-wrap .project-title { pointer-events: none; display: block; width: 100%; margin-bottom: 0; white-space: nowrap; line-height: 1.2; overflow: hidden } .showcase-fullscreen-carousel .showcase-project .project-image { display: none; } .showcase-fullscreen-carousel .project-meta { display: inline-block; width: auto; pointer-events: all; margin: 0 auto; overflow: hidden; } .showcase-fullscreen-carousel .showcase-project a { display: block; overflow: hidden } .showcase-fullscreen-carousel .project-meta>div { display: inline-block; opacity: .7; font-size: 17px; line-height: 25px; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform .4s ease-out .2s; transition: -webkit-transform .4s ease-out .2s; -o-transition: transform .4s ease-out .2s; transition: transform .4s ease-out .2s; transition: transform .4s ease-out .2s, -webkit-transform .4s ease-out .2s } .swiper-slide-active .project-meta>div { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%) } .showcase-fullscreen-carousel.dragging .swiper-slide-active .project-meta>div { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%) } .showcase-fullscreen-carousel .project-meta>div>* { display: inline-block; } .showcase-fullscreen-carousel .project-meta div:nth-child(3)::after { display: none !important; } .showcase-fullscreen-carousel .project-meta .project-category { display: none } .showcase-fullscreen-carousel .project-meta>div::after { content: ""; display: inline-block; margin: 0 15px; font-size: 40px; vertical-align: middle; } .showcase-fullscreen-carousel .showcase-project.active, .showcase-fullscreen-carousel .showcase-project.swiper-slide.swiper-slide-active { opacity: 1 } .showcase-fullscreen-carousel.dragging .showcase-project.swiper-slide.swiper-slide-active { opacity: 0.1 } .showcase-fullscreen-carousel.dragging .showcase-project.swiper-slide.swiper-slide-active.active { opacity: 1 } .showcase-fullscreen-carousel .fc-images-slider.swiper-container { position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: 1; overflow: hidden; -webkit-transition: -webkit-transform .6s; transition: -webkit-transform .6s; -o-transition: transform .6s; transition: transform .6s; transition: transform .6s, -webkit-transform .6s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.1, 1); -o-transition-timing-function: cubic-bezier(0.7, 0, 0.1, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.1, 1); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center } .loading .showcase-fullscreen-carousel .fc-images-slider.swiper-container { -webkit-transition: all 0s !important; -o-transition: all 0s !important; transition: all 0s !important; } .showcase-fullscreen-carousel.dragging .fc-images-slider.swiper-container { -webkit-transform: translate(-50%, -50%) scale(.5); -ms-transform: translate(-50%, -50%) scale(.5); transform: translate(-50%, -50%) scale(.5); } .showcase-fullscreen-carousel .fc-images-slider .slide-bgimg, .showcase-fullscreen-carousel .fc-images-slider .swiper-wrapper { /* transition-timing-function: cubic-bezier(0.5, 0.00, 0, 1) !important*/ } .showcase-fullscreen-carousel .fc-slideshow-wrap .swiper-wrapper { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: auto; } .showcase-fullscreen-carousel .dragging-class { position: absolute; top: 0; left: 0; height: 100%; opacity: .1; z-index: 2; } .showcase-fullscreen-carousel .sfc-fraction { position: absolute; top: 45%; left: 0; z-index: 2; -webkit-transform: rotate(90deg) translateX(15%); -ms-transform: rotate(90deg) translateX(15%); transform: rotate(90deg) translateX(15%); } .showcase-fullscreen-carousel span.sfc-current::after { content: ""; display: inline-block; width: 10px; height: 1.5px; background: var(--mainColor); margin: 0 25px; vertical-align: middle; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .showcase-fullscreen-carousel.blend-elements .sfc-fraction, .showcase-fullscreen-carousel.blend-elements .showcase-footer { mix-blend-mode: difference; --mainColor: #fff; } .ratio-adjusted .plyr--full-ui .plyr__video-embed>.plyr__video-embed__container { height: 100%; width: 100%; } /* Showcase Infinite Grid ------------------------------ */ /* Defaults */ .showcase-infinite-grid { width: 100%; overflow: hidden; height: 100vh } .showcase-infinite-grid .sfg-infinite-wrap { position: relative; width: 100%; height: 120%; overflow: hidden; will-change: transform; z-index: 2; padding: 0 100px; box-sizing: border-box; } .showcase-infinite-grid.vertical .project-meta { width: 55%; } .showcase-infinite-grid .sfg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } .showcase-infinite-grid .sfg-bg-text { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; z-index: 1; -webkit-transition: opacity .2s ease; -o-transition: opacity .2s ease; transition: opacity .2s ease; opacity: 0.05 } .showcase-infinite-grid.hovered .sfg-bg-text { opacity: 0; } .showcase-infinite-grid .sfg-titles { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; text-align: center; height: 200px; z-index: 1; pointer-events: none; } .showcase-infinite-grid .sfg-titles .project-title { position: absolute; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; white-space: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0; pointer-events: none; -webkit-transition: opacity .2s ease; -o-transition: opacity .2s ease; transition: opacity .2s ease } .showcase-infinite-grid .sfg-titles .infinity-wrap { white-space: nowrap; overflow: hidden; } .showcase-infinite-grid .showcase-project { height: 60vh; 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-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; will-change: transform; -webkit-transition: opacity .2s ease, transform .4s ease-out, filter .4s ease-out; -o-transition: opacity .2s ease, transform .4s ease-out, filter .4s ease-out; -webkit-transition: opacity .2s ease, -webkit-transform .4s ease-out, -webkit-filter .4s ease-out; transition: opacity .2s ease, -webkit-transform .4s ease-out, -webkit-filter .4s ease-out; transition: opacity .2s ease, transform .4s ease-out, filter .4s ease-out; transition: opacity .2s ease, transform .4s ease-out, filter .4s ease-out, -webkit-transform .4s ease-out, -webkit-filter .4s ease-out; will-change: transform, filter } .sfg-grid-wrapper.hovered .showcase-project { -webkit-filter: blur(3px); filter: blur(3px); } .sfg-grid-wrapper.hovered .showcase-project.current { -webkit-filter: blur(0); filter: blur(0); } .showcase-infinite-grid .project-image { max-width: 45%; height: auto; display: inline-block; max-height: 90%; position: relative; clear: both; } .showcase-infinite-grid .project-image img { will-change: transform } .showcase-infinite-grid .project-image img:not(:first-child) { position: absolute; top: 0; left: 0; } .showcase-infinite-grid .showcase-footer.wrapper-full, .showcase-infinite-grid .showcase-footer.wrapper-small, .showcase-infinite-grid .showcase-footer.wrapper { bottom: 0 } .showcase-infinite-grid.hovered .showcase-project { opacity: .1 } .showcase-infinite-grid.hovered .showcase-project.active { opacity: 1 } .showcase-infinite-grid.lenis-scrolling .showcase-project { pointer-events: none } .showcase-infinite-grid .project-title { display: none; text-align: left; } .showcase-infinite-grid .project-meta { display: inline-block; width: 100%; margin-top: 10px; overflow: hidden; } .showcase-infinite-grid .project-meta>div { display: block; float: left; width: 50%; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform .4s ease-out; transition: -webkit-transform .4s ease-out; -o-transition: transform .4s ease-out; transition: transform .4s ease-out; transition: transform .4s ease-out, -webkit-transform .4s ease-out } .showcase-infinite-grid .showcase-project a:hover .project-meta>div { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } .showcase-infinite-grid .project-meta>div:last-child { text-align: right; } .showcase-infinite-grid .sfg-grid-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); will-change: transform; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .showcase-infinite-grid .sfg-titles .project-title.active { opacity: 1; } .showcase-infinite-grid .sfg-titles .project-title h2 { font-size: 100px; line-height: 1; margin: 0 50px } .showcase-infinite-grid .project-image img:last-child { opacity: 1 !important; -webkit-transition: opacity .2s ease; -o-transition: opacity .2s ease; transition: opacity .2s ease } .showcase-infinite-grid.vertical.col-2 .showcase-project:nth-child(4n - 3) { -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; } .showcase-infinite-grid.vertical.col-2 .showcase-project:nth-child(4n - 1) { -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } .showcase-infinite-grid.vertical.col-2 .showcase-project:nth-child(4n) { -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } .showcase-infinite-grid.vertical.col-2 .showcase-project:nth-last-child(4) { -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; } .showcase-infinite-grid.vertical.col-2 .showcase-project:nth-last-child(3) { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .showcase-infinite-grid.vertical.col-2 .showcase-project:nth-last-child(2) { -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } .showcase-infinite-grid.vertical.col-2 .showcase-project:nth-last-child(1) { -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } /* Vertical 3 Columns */ .showcase-infinite-grid.vertical.col-3 .project-image { max-width: 55% } .showcase-infinite-grid.vertical.col-3 .sfg-grid-wrapper { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } .showcase-infinite-grid.vertical.col-3 .showcase-project:nth-child(6n - 5) { justify-content: right; align-items: flex-end; } .showcase-infinite-grid.vertical.col-3 .showcase-project:nth-child(6n - 2) { align-items: center; text-align: right; } .showcase-infinite-grid.vertical.col-3 .showcase-project:nth-child(6n - 1) { align-items: flex-start; } .showcase-infinite-grid.vertical.col-3 .showcase-project:nth-child(6n - 5) .project-image { -ms-flex-item-align: self-end; -ms-grid-row-align: self-end; align-self: self-end } .showcase-infinite-grid.vertical.col-3 .showcase-project:nth-child(6n - 3) { -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; align-items: flex-start; } .showcase-infinite-grid.vertical.col-3 .showcase-project:nth-child(6n - 3) .project-image { -ms-flex-item-align: self-end; -ms-grid-row-align: self-end; align-self: self-end } .showcase-infinite-grid.vertical.col-3 .showcase-project:nth-child(6n - 2) .project-image { -ms-flex-item-align: self-end; -ms-grid-row-align: self-end; align-self: self-end } .showcase-infinite-grid.vertical.col-3 .showcase-project:nth-child(6n - 1) .project-image { -ms-flex-item-align: self-start; -ms-grid-row-align: self-start; align-self: self-start } /* Horizontal */ /* Horizontal Defaults */ .showcase-infinite-grid.horizontal .sfg-grid-wrapper>div { height: 50vh; display: -ms-grid; display: grid; grid-auto-flow: column; width: -webkit-min-content; width: -moz-min-content; width: min-content; grid-auto-columns: 50vw; } .showcase-infinite-grid.horizontal .sfg-infinite-wrap { height: 100% } .showcase-infinite-grid.horizontal .showcase-project { height: 50vh; width: 50vw; -webkit-box-sizing: border-box; box-sizing: border-box } .showcase-infinite-grid.horizontal .sfg-grid-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; width: -webkit-min-content; width: -moz-min-content; width: min-content; -ms-flex-wrap: wrap; flex-wrap: wrap; } .showcase-infinite-grid.horizontal .project-image { max-width: 40%; } .showcase-infinite-grid.horizontal .sfg-titles .project-title:nth-child(odd) { -webkit-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%) } .showcase-infinite-grid.horizontal .sfg-titles .project-title:nth-child(even) { -webkit-transform: translateY(200%); -ms-transform: translateY(200%); transform: translateY(200%) } .showcase-infinite-grid.horizontal.col-2 .sfg_grid_row_top .showcase-project:nth-child(2n), .showcase-infinite-grid.horizontal.col-2 .sfg_grid_row_top .showcase-project:nth-child(2n - 1) { -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right } .showcase-infinite-grid.horizontal.col-2 .sfg_grid_row_top .showcase-project:nth-child(2n - 1) .project-image { -ms-flex-item-align: right; -ms-grid-row-align: right; align-self: right } /* Horizontal Column 3 */ .showcase-infinite-grid.horizontal.col-3 .showcase-project { width: 33.333333333333vw; } .showcase-infinite-grid.horizontal.col-3 .sfg-grid-wrapper>div { grid-auto-columns: 33.333333333333vw; } .showcase-infinite-grid.horizontal.col-3 .project-image { max-width: 100%; } .showcase-infinite-grid.horizontal.col-3 a { max-width: 55%; } .showcase-infinite-grid.horizontal.col-3 .sfg_grid_row.sfg_grid_row_bottom .showcase-project:nth-child(3n - 2) { -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; } .sfg_grid_row.sfg_grid_row_bottom .showcase-project:nth-child(3n - 1) { margin-left: 100px; } .showcase-infinite-grid.horizontal.col-3 .sfg_grid_row.sfg_grid_row_top .showcase-project:nth-child(3n - 2) { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .showcase-infinite-grid.horizontal.col-3 .sfg_grid_row.sfg_grid_row_bottom .showcase-project:nth-child(3n) { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; } *-+.showcase-infinite-grid.horizontal.col-3 .sfg_grid_row.sfg_grid_row_bottom .showcase-project:nth-child(3n - 1) { -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; } .showcase-infinite-grid.vertical .showcase-project:nth-child(3n - 1) a { text-align: center; } .showcase-infinite-grid.vertical .showcase-project:nth-child(3n) { text-align: right; } /* Showcase Horizontal List ------------------------------ */ .showcase-horizontal-list .project-image { display: none; } .showcase-horizontal-list .shl-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: -webkit-min-content; width: -moz-min-content; width: min-content; height: 100%; -ms-flex-wrap: nowrap; flex-wrap: nowrap; z-index: 1; -webkit-transform: translateX(50vw); -ms-transform: translateX(50vw); transform: translateX(50vw); position: relative; } .showcase-horizontal-list .showcase-project { white-space: nowrap; -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; text-align: center; opacity: 1; padding: 0 30px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; } .showcase-horizontal-list .showcase-project a { display: inline-block; } .showcase-horizontal-list .showcase-project .project-category { display: none } .showcase-horizontal-list .showcase-project .project-title { line-height: 1; margin-bottom: 0; } .showcase-horizontal-list .showcase-project.active { opacity: 1 !important } .showcase-horizontal-list .shl-images { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .showcase-horizontal-list .shl-images .project-image { width: 100%; position: absolute; height: 100%; visibility: hidden; display: block } .showcase-horizontal-list .shl-images .project-image video, .showcase-horizontal-list .shl-images .project-image img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform .7s ease; transition: -webkit-transform .7s ease; -o-transition: transform .7s ease; transition: transform .7s ease; transition: transform .7s ease, -webkit-transform .7s ease } .showcase-horizontal-list .shl-images .project-image.active video, .showcase-horizontal-list .shl-images .project-image.active img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .showcase-horizontal-list .shl-images .project-image.active { visibility: visible } .showcase-horizontal-list .shl-cat { opacity: .5 } .showcase-horizontal-list .shl-images .project-image .image-wrap { position: absolute; top: 50%; left: 50%; width: 45%; height: 45%; overflow: hidden; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-filter: grayscale(1); filter: grayscale(1); opacity: .5; } .showcase-horizontal-list .shl-fraction.swiper-pagination-fraction.swiper-pagination-vertical { text-align: center; font-size: 0; } .showcase-horizontal-list .shl-fraction.swiper-pagination-fraction.swiper-pagination-vertical>span { display: inline-block; margin: 0 15px; font-size: 12px; } .showcase-horizontal-list .shl-fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .showcase-horizontal-list .shl-fraction .span { position: absolute; } .showcase-horizontal-list .shl-fraction span { position: absolute; font-size: 14px; opacity: .8; } .showcase-horizontal-list .shl-fraction span.shl-curr { left: 0; -webkit-transform: translateX(-40px); -ms-transform: translateX(-40px); transform: translateX(-40px); } .showcase-horizontal-list .shl-fraction span.shl-tot { right: 0; -webkit-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(40px); } @media only screen and (max-width: 750px) { .showcase-fullscreen-carousel .fc-slideshow-wrap .project-title .anim_line { text-align: center !important; } .showcase-cards .project-meta { padding: 0 15px; } .showcase-cards .project-meta>div { width: 100%; } .showcase-cards .project-meta>div.project-summary { float: left; width: 100%; margin-top: 1em; } .showcase-cards .showcase-project { height: 50vh; width: calc(100%); margin: 0; } .showcase-minimal-list.fullscreen .sml-images { right: unset; left: 50%; top: 50%; bottom: unset; transform: translate(-50%, -50%); } .showcase-infinite-grid.lenis-scrolling .project-image img:last-child { opacity: 1 !important } .portfolio-grid.grid-list .grid-project-meta>div.grid-project-title { width: fit-content; margin-right: 1em; } .portfolio-grid.grid-list .grid-project-meta>div.grid-project-category { float: right; } .portfolio-grid.grid-list span.g-list-arrow { margin-left: 10px; } .portfolio-grid.grid-list .grid-project-meta { margin-bottom: 0; } .portfolio-grid.grid-list .grid-project-wrap { padding-bottom: 25px; } .portfolio-grid.grid-list .grid-projects-wrapper .grid-project { margin-top: 0 !important; } /* Portfolio */ .grid-projects-wrapper { -ms-grid-columns: unset !important; grid-template-columns: unset !important; gap: 0 !important; } .grid-project { -ms-grid-column: 1 !important; grid-column: 1 / 1 !important; margin-bottom: 2em; } ul.grid-portfolio-filtering { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; z-index: 1; } ul.grid-portfolio-filtering li { padding-bottom: 1em; margin-left: 0 } ul.grid-portfolio-filtering::after { content: ""; display: block; position: absolute; top: -25px; left: -25px; width: 100%; height: 0%; background: #fff; z-index: -1; opacity: 0; border-radius: 20px; padding-bottom: 50px; padding-right: 75px; pointer-events: none } ul.grid-portfolio-filtering:hover::after { height: 100%; opacity: 1 } .grid-filter { display: none } .portfolio-grid.grid-list .grid-project-meta>div.grid-project-title { overflow: hidden; width: 100%; } .portfolio-grid.grid-list .grid-project-meta>div.grid-project-year { width: auto; float: left; } .portfolio-grid.grid-list .grid-project-meta>div.grid-project-year::before { content: "/"; display: inline-block; margin: 0 15px; } span.g-list-arrow { margin-left: 0; } .portfolio-grid.grid-list .grid-project-meta>div { margin-top: 15px; } .showcase-minimal-list.fullscreen .sml-images { max-width: 100%; left: 0; bottom: unset; top: 100px; z-index: 1; } .showcase-infinite-grid.vertical .sfg-infinite-wrap { padding: 0 15px; } .showcase-infinite-grid.vertical.col-3 .sfg-grid-wrapper { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); } .showcase-infinite-grid.vertical .showcase-project { width: 90%; height: auto; } .showcase-infinite-grid.vertical.col-3 .project-image { max-width: 100%; } .showcase-infinite-grid.vertical .showcase-project { padding-bottom: 30px; } .showcase-infinite-grid.horizontal.col-3 .sfg-grid-wrapper>div { grid-auto-columns: 50vw; } .showcase-infinite-grid.horizontal.col-3 .showcase-project { width: 100%; padding: 0; } .showcase-infinite-grid.horizontal.col-3 a { max-width: 80%; } .project-image .rco-video, .project-image .rco-video video { width: 100%; max-width: 100%; } .showcase-fullscreen-slideshow .project-inner>div.project-details>div { width: 100%; text-align: center; } .showcase-fullscreen-slideshow .project-inner>div.project-details>div:last-child { text-align: center; } .showcase-fullscreen-slideshow .project-button { -webkit-transform: translate(-50%, -50%) scale(.8); -ms-transform: translate(-50%, -50%) scale(.8); transform: translate(-50%, -50%) scale(.8); top: 70% } /* Showcase Layouts ---*/ /*--- Showcase Carousel ---*/ .showcase-carousel .sc-images.swiper-container { width: 80%; height: 60%; pointer-events: none; } .showcase-carousel .project-title h2 { font-size: 50px; } /*--- Fullscreen Slideshow ---*/ .showcase-fullscreen-slideshow .project-meta .project-title h2 { font-size: 60px; line-height: 70px; } .showcase-fullscreen-slideshow .project-meta>div.project-button span { font-size: 40px; } .showcase-fullscreen-slideshow .project-meta>div { margin-bottom: 10px; } .showcase-fullscreen-slideshow .project-meta { left: 0 !important; } .showcase-fullscreen-slideshow .project-meta>div.project-title br { display: none; } /*--- Fullscreen Carousel ---*/ .showcase-fullscreen-carousel .project-title h2 { font-size: 60px; } .showcase-fullscreen-carousel .showcase-project.swiper-slide { padding: 0; } .showcase-fullscreen-carousel .project-meta>div { font-size: 14px; } .project-page-header.image-gallery .project-hero { width: 100vw; margin-right: 0; } .project-page-header.image-gallery .project-hero>div.project-meta { -ms-flex-wrap: wrap; flex-wrap: wrap; } .project-page-header.image-gallery div.project-slide-button { bottom: 50%; right: 50px; } .showcase-fullscreen-wall.fullscreen { height: auto; } .showcase-fullscreen-wall .sfw-projects-wrapper { position: relative; width: 100%; top: 0; margin-top: 150px; display: block; float: left; } .showcase-fullscreen-wall .showcase-project::after { display: none; } .showcase-fullscreen-wall .showcase-project a { padding: 0; padding-bottom: 0.5em; } .showcase-fullscreen-wall.fullscreen .showcase-footer { position: relative; -webkit-transform: none; -ms-transform: none; transform: none; width: 100%; display: block; float: left; margin-top: 150px; left: 0; padding: 0 } /* Showcase Wall */ .showcase-wall .showcase-footer { position: static; -webkit-transform: none; -ms-transform: none; transform: none; margin-top: 35px; } .showcase-wall.fullscreen { height: auto; } .showcase-wall-wrap { position: relative; top: unset; -webkit-transform: none; -ms-transform: none; transform: none; padding-top: 75px; } .sw-projects-wrap { -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .showcase-wall .showcase-project { padding-left: 50px; padding-bottom: 0; } .showcase-wall .showcase-project::after { display: none; } .showcase-wall .showcase-project .project-index { left: 25px; -webkit-transform: none; -ms-transform: none; transform: none; opacity: .3; } .rco-dynamic-carousel .carousel--wrapper { height: var(--mobileHeight) } .single-project-image { height: var(--mobileHeight); } .showcase-fullscreen-slideshow .project-inner .project-title { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .showcase-interactive-grid .project-details .rco-button { --mainColor: #fff; } .showcase-interactive-grid .projects-wrapper { -ms-grid-rows: 30vh; grid-template-rows: 30vh; -ms-grid-columns: 1fr 10px 1fr; grid-template-columns: repeat(2, 1fr); gap: 10px; height: auto; } .showcase-interactive-grid .projects-wrapper>*:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .showcase-interactive-grid .projects-wrapper>*:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .showcase-interactive-grid .showcase-project { -ms-grid-column-span: 2 !important; grid-column: span 2 !important; } .showcase-interactive-grid { padding-left: 0; padding-right: 0; height: auto; } .showcase-interactive-grid .projects-wrapper.intro-grid--scatter .showcase-project { max-width: 40vw; } .showcase-interactive-grid .projects-wrapper.intro-grid--scatter .showcase-project.active { width: 85vw; } .showcase-interactive-grid .project-title { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); mix-blend-mode: difference; color: #fff; top: 25%; } .showcase-interactive-grid .project-details { right: unset; left: 0; z-index: 1; color: #fff; mix-blend-mode: difference; max-width: 100%; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; padding: 1em; } .showcase-interactive-grid .showcase-project.project-right .project-title { right: unset; left: 0; -webkit-transform: none; -ms-transform: none; transform: none; } .showcase-wall .showcase-project::after { width: 40px; height: 2.5px; } .rco-clients-grid .client a img { max-width: 75px; } .showcase-carousel .rco-video { height: 100% } .showcase-carousel .project-title { font-size: 50px; } .showcase-carousel.fullscreen { height: 100svh; } .project-page-header.half-image .project-back-button { left: 0; bottom: 15px; } /* Project Pages */ .project-page-header.fullscreen-image .project-summary { float: left; } .project-page-header.fullscreen-image .project-category { margin-bottom: 10px; } .project-page-header.fullscreen-image .project-summary { margin-bottom: 30px; } .project-page-header.fullscreen-image .project-title { margin-bottom: 30px; } .project-page-header.creative .project-meta>div.project-summary { float: left; text-align: left; margin-top: 30px; } .project-page-header.creative .project-image { -webkit-clip-path: inset(0% 0% 0% 0%); clip-path: inset(0% 0% 0% 0%) } .project-page-header.creative .project-title h1.big-title { font-size: 102px } .project-page-header.half-image .project-title h1 { font-size: 60px; line-height: 70px; } .project-page-header.half-image .project-category { margin-left: 10px; } .project-page-header.half-image { height: 80vh; } .project-page-header.half-image .rotate-text-area { left: -20px; -webkit-transform: translateX(0%) translateY(50%) scale(0.8); -ms-transform: translateX(0%) translateY(50%) scale(0.8); transform: translateX(0%) translateY(50%) scale(0.8); } .project-page-header.half-image .project-button { right: 0; bottom: 30px; } .project-page-header.half-image .wrapper { padding-top: 130px; } .project-page-header.tall-image .project-title { max-width: 100%; } .project-page-header.tall-image .project-title h1 { font-size: 60px; line-height: 75px; margin-bottom: 30px; } .project-page-header.tall-image .project-summary { max-width: 90%; margin-left: 10px; } .project-page-header.tall-image .project-category { margin-left: 0px; margin-bottom: 35px; } .project-page-header.tall-image .rotate-text-area { display: none; } .project-page-header.tall-image .project-meta>div .meta-title { margin-bottom: 10px; } .project-page-header.tall-image .project-meta>div { margin-bottom: 25px; } .project-page-header.tall-image .project-button { margin-top: 35px; } .project-page-header.tall-image .wrapper { padding-top: 25vh; } .project-page-header.image-gallery.vertical .project-hero { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; height: auto; margin-bottom: 50px; } .project-page-header.image-gallery.vertical .project-hero>div.project-category { margin-top: 0; margin-bottom: 0; } .project-page-header.image-gallery.vertical .project-title h1 { font-size: 75px; white-space: normal; margin-left: 0; line-height: 80px; } .project-page-header.image-gallery.vertical .project-hero>div.project-title { margin-top: 35px; } .project-page-header.image-gallery div.project-slide-button span { font-size: 100px; } .project-page-header.image-gallery.vertical div.project-slide-button { right: unset; left: 0; z-index: 1; mix-blend-mode: difference; color: #fff; } .project-page-header.image-gallery.vertical .project-images { width: 100%; } .rotate-text-area.bg:after { width: 90%; height: 90% } .project-page-header.image-gallery .project-title h1 { font-size: 50px; line-height: 50px; white-space: nowrap } .project-page-header.image-gallery .project-images-slider { gap: 25px; } .project-page-header.half-image .rco-icon { left: 0; bottom: 0; } .project-page-header.creative .project-meta>div { width: 100%; margin-bottom: 30px; } .next-project-image { width: 90%; max-height: 90%; z-index: -1; } .project-page-header.no-image .wrapper .project-meta>span { width: 100%; margin-bottom: 15px; } .project-page-header.no-image .wrapper .project-title h1.md-title { font-size: 45px; } .showcase-fullscreen-wall .project-image { width: 75vw } .showcase-fullscreen-wall .showcase-project a { padding: 0; padding-left: 25px; } .showcase-fullscreen-wall .showcase-project::before { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 12px; } .showcase-fullscreen-wall .showcase-project { white-space: nowrap; } .showcase-list .project-meta::before { margin-left: 0; margin-top: 10px; } .showcase-list .project-meta { margin-top: 10px; display: block; float: left; width: 100%; } .showcase-list .showcase-project .project-image { width: 100%; } .showcase-list .project-title.text-h1 { font-size: 30px; line-height: 45px; } .showcase-list .showcase-project::before { display: none; } .showcase-list .showcase-project a { padding: 5px 0; } .project-page-header.video { height: auto; min-height: 100vh; } .project-page-header.video .project-video { position: static; width: 100%; -webkit-transform: none; -ms-transform: none; transform: none; margin-top: 50px; } .project-page-header.video .project-meta { position: relative; display: block; float: left; margin-top: 35px; } .project-page-header.video .project-meta>div { width: 100%; max-width: unset; } span.scatter-close { position: fixed; z-index: 99; top: 100px; background: var(--mainBackground); padding: 0.5em; border-radius: 30px; } } .sem-espaco { margin: 0; padding: 0; display: block; line-height: 0; font-size: 0; /* remove espaçamento de linha residual */ } .sem-espaco img { display: block; width: 100%; height: auto; margin: 0; padding: 0; border: none; } /* ====== CORREÇÃO PORTFÓLIO MOBILE ====== */ @media only screen and (max-width: 750px) { /* Força 1 coluna real */ .portfolio-grid .grid-projects-wrapper { display: grid !important; grid-template-columns: 1fr !important; gap: 25px !important; padding: 0 0 40px 0 !important; } /* Cada projeto ocupa linha inteira */ .portfolio-grid .grid-project { grid-column: auto / span 1 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } /* Imagem se adapta, não corta */ .portfolio-grid .grid-project-image, .portfolio-grid .grid-project-image img { width: 100% !important; height: auto !important; object-fit: cover !important; object-position: center !important; display: block !important; } /* Remove qualquer espaçamento vertical extra */ .portfolio-grid .grid-project-meta { margin-top: 10px !important; } /* Evita que wrappers criem margens laterais */ .section .wrapper:has(.portfolio-grid) { padding-left: 0 !important; padding-right: 0 !important; } } /* Cortar os espacamentos apenas nas paginas de projeto */ .project-page .section { padding-top: 0 !important; margin-bottom: 0 !important; } .project-page .wrapper-full { padding: 0 !important; margin-bottom: 0 !important; } .project-page .c-col-1, .project-page .c-col-2, .project-page .c-col-3, .project-page .c-col-4, .project-page .c-col-5, .project-page .c-col-6, .project-page .c-col-7, .project-page .c-col-8, .project-page .c-col-9, .project-page .c-col-10, .project-page .c-col-11, .project-page .c-col-12 { margin-bottom: 0 !important; } .project-page .section-gap { height: 80px; display: block !important; margin: 0 !important; padding: 0 !important; position: relative !important; z-index: 50 !important; clear: both !important; } /* source: assets/css/_css/work-cms.css */ /* ========================================================== Rurally · Trabalhos CMS Integração conservadora: o CMS fornece dados. O desenho e os efeitos continuam sendo os do template. ========================================================== */ .portfolio-grid .grid-project-image:empty{ min-height:320px; background:rgba(17,17,17,.04); } .rco-project-dynamic{ background:var(--page-bg,#fff); color:var(--page-fg,#202020); } .rco-project-dynamic-meta{ margin:0 0 18px; font-size:10px; line-height:1.4; letter-spacing:.11em; text-transform:uppercase; opacity:.56; } .rco-project-dynamic-kicker{ margin:0 0 12px!important; font-size:10px!important; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; opacity:.56; } .rco-project-native-pad{ padding-left:25px; padding-right:25px; box-sizing:border-box; } /* Sem alturas artificiais e sem object-fit imposto pelo CMS. O arquivo volta a se comportar como no portfólio original. */ .rco-project-dynamic .project-image.featured, .rco-project-dynamic .single-image{ height:auto; overflow:visible; } .rco-project-dynamic .project-image.featured img, .rco-project-dynamic .single-image img{ width:100%; height:auto; display:block; object-fit:initial; } .rco-project-native-block, .rco-project-native-block .wrapper, .rco-project-native-block .wrapper-full, .rco-project-native-block [class*="c-col-"]{ margin-top:0; margin-bottom:0!important; } /* Bloco full bleed realmente sem fendas. */ .rco-project-native-block .wrapper-full.no-gap, .rco-project-native-block .wrapper-full.no-gap > [class*="c-col-"]{ gap:0!important; padding-left:0!important; padding-right:0!important; } .rco-project-native-block .sem-espaco{ line-height:0; } /* Duas imagens e editorial usam as colunas nativas do template. Não adicionamos gap do CMS por cima. */ .rco-project-native-media .c-col-6{ margin-bottom:0!important; } .rco-project-native-text .text-wrapper + .text-wrapper{ margin-top:24px; } /* Mosaico editorial leve. O movimento fica só em pontos escolhidos, evitando dezenas de ScrollTriggers em galerias grandes. */ .rco-project-native-mosaic{ width:100%; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; gap:0; } .rco-project-native-mosaic__item{ grid-column:span 6; min-width:0; } .rco-project-native-mosaic__item:nth-child(4n + 1){ grid-column:span 4; } .rco-project-native-mosaic__item:nth-child(4n + 2){ grid-column:span 8; } .rco-project-native-mosaic__item:nth-child(4n + 3){ grid-column:2 / span 7; } .rco-project-native-mosaic__item:nth-child(4n){ grid-column:9 / span 4; } .rco-project-native-mosaic__item .single-image{ width:100%; } /* O JS original cria image-parallax-wrap. Mantemos apenas as regras necessárias para ele não alterar a proporção visual da mídia. */ .rco-project-dynamic .image-parallax-wrap{ width:100%; overflow:hidden; } .rco-project-dynamic .image-parallax-wrap img{ width:100%; min-height:100%; } /* Home: mantém a hierarquia 5 peças do template. Com poucos trabalhos, não deixa o primeiro virar um quadrinho perdido. */ .rco-dynamic-grid.ndg-projects.masonry.rco-home-projects-count-1 .grid--item:first-child{ --c:2 / 8!important; } .rco-dynamic-grid.ndg-projects.masonry.rco-home-projects-count-2 .grid--item:nth-child(1){ --c:1 / 5!important; } .rco-dynamic-grid.ndg-projects.masonry.rco-home-projects-count-2 .grid--item:nth-child(2){ --c:5 / 9!important; } .rco-dynamic-grid.ndg-projects.masonry.rco-home-projects-count-3 .grid--item:nth-child(3){ --c:2 / 8!important; } /* Evita que placeholders ou imagens ausentes criem quadrados artificiais no bloco de destaque da Home. */ .rco-dynamic-grid.ndg-projects .single-project-image:empty{ display:none; } /* Em mobile o próprio grid do template vira uma coluna. */ /* ========================================================== Arquitetura de seções O template original usa section-gap de 80px. Esse espaço existe ENTRE seções e usa sempre o fundo-base do projeto. Dentro da seção, cada modelo recupera seu espaçamento nativo. ========================================================== */ .rco-project-dynamic .rco-project-section-gap{ height:80px!important; display:block!important; margin:0!important; padding:0!important; background:var(--page-bg,#fff)!important; clear:both!important; } /* Imagens grandes dentro da mesma seção ficam realmente coladas. */ .rco-project-section-image-full .single-image{ margin-bottom:0!important; line-height:0; } /* O mosaico também é uma composição única da seção. */ .rco-project-native-mosaic .single-image{ margin-bottom:0!important; } /* Os outros modelos preservam o comportamento original do template: pinned/editorial usam os 30px da .single-image; carrossel mantém seu --gap:50px; texto mantém seus próprios espaços tipográficos. */ @media(max-width:750px){ .rco-project-native-pad{ padding-left:20px; padding-right:20px; } .rco-project-native-mosaic{ grid-template-columns:1fr; } .rco-project-native-mosaic__item, .rco-project-native-mosaic__item:nth-child(n){ grid-column:1!important; } .rco-project-dynamic .has-parallax{ transform:none!important; } .rco-dynamic-grid.ndg-projects.masonry[class*="rco-home-projects-count-"] .grid--item{ --c:span 3!important; } } \n\n/* ==========================================================\n Seções v2 · Espaçamento interno por MODELO\n Regra: 80px entre seções. Dentro da seção, cada modelo\n preserva o seu ritmo original. Só full bleed em sequência cola.\n ========================================================== */\n\n/* Imagem grande: só a versão 100% (wrapper-full/no-gap) cola.\n Em container, recupera os 30px nativos entre imagens. */\n.rco-project-section-image-full .wrapper .single-image{\n margin-bottom:30px!important;\n}\n.rco-project-section-image-full .wrapper .single-image:last-child{\n margin-bottom:0!important;\n}\n.rco-project-section-image-full .wrapper-full.no-gap .single-image{\n margin:0!important;\n}\n\n/* Duas colunas: largura full amplia a seção, mas não mata\n o gutter do modelo. O template trabalha com 15px por coluna. */\n.rco-project-section-two .wrapper-full{\n padding-left:0!important;\n padding-right:0!important;\n}\n.rco-project-section-two .c-col-6{\n padding-left:15px!important;\n padding-right:15px!important;\n margin-bottom:30px!important;\n}\n.rco-project-section-two .single-image{\n margin-bottom:0!important;\n}\n\n/* Mosaico é uma composição editorial, não um azulejo sem junta. */\n.rco-project-native-mosaic{\n gap:30px!important;\n}\n.rco-project-native-mosaic .single-image{\n margin-bottom:0!important;\n}\n\n/* Pinned: mantém o ritmo nativo de 30px entre imagens. */\n.rco-project-native-block .pinned + * .single-image,\n.rco-project-native-block [id^=\"rco-project-pin-\"] .single-image{\n margin-bottom:30px!important;\n}\n.rco-project-native-block [id^=\"rco-project-pin-\"] .single-image:last-child{\n margin-bottom:0!important;\n}\n\n/* Editorial: duas colunas com gutter original e 30px na pilha. */\n.rco-project-native-text > .wrapper-full > .c-col-6{\n padding-left:15px!important;\n padding-right:15px!important;\n}\n.rco-project-native-text > .wrapper-full > .c-col-6 .single-image{\n margin-bottom:30px!important;\n}\n.rco-project-native-text > .wrapper-full > .c-col-6 .single-image:last-child{\n margin-bottom:0!important;\n}\n\n/* Carrossel continua obedecendo ao próprio --gap:50px do template. */\n.rco-project-dynamic .rco-dynamic-carousel{\n --gap:50px;\n}\n\n@media(max-width:750px){\n .rco-project-native-mosaic{\n gap:30px!important;\n }\n .rco-project-section-two .c-col-6{\n padding-left:15px!important;\n padding-right:15px!important;\n }\n}\n /* ========================================================== Galeria editorial · composição ORIGINAL do portfólio 1 pequena esquerda | 2 grande direita 3 pequena esquerda | 4 pequena direita Os vazios fazem parte da hierarquia do layout. ========================================================== */ .rco-project-editorial-original__intro{ margin-bottom:30px!important; } .rco-project-editorial-original__grid{ display:block!important; clear:both!important; } /* O projeto.css atual zera os margins das colunas; este modelo recupera o ritmo que existia no desenho original. */ .rco-project-editorial-original__grid > .c-col-3, .rco-project-editorial-original__grid > .c-col-6{ margin-bottom:30px!important; } .rco-project-editorial-original__grid .single-image{ height:auto!important; margin-bottom:30px!important; overflow:hidden; } .rco-project-editorial-original__grid .single-image img{ width:100%!important; height:auto!important; display:block!important; object-fit:initial!important; } /* Um novo grupo de 4 continua sendo conteúdo da MESMA seção. Portanto não ganha section-gap; mantém apenas o ritmo do modelo. */ .rco-project-editorial-original__grid + .rco-project-editorial-original__grid{ padding-top:30px!important; } @media(max-width:750px){ .rco-project-editorial-original__grid > .c-col-3, .rco-project-editorial-original__grid > .c-col-6{ width:100%!important; padding-left:15px!important; padding-right:15px!important; margin-bottom:30px!important; } .rco-project-editorial-original__grid .single-image{ margin-bottom:0!important; } } /* Texto simples / descrição */ .rco-project-native-text-simple .text-wrapper{max-width:820px} .rco-project-native-text-simple .text-h6{margin:0} \n\n/* Descrição simples: o respiro estrutural já vem do section-gap.\n A seção em si não deve somar outro bloco grande de margem. */\n.rco-project-native-text-simple{padding-top:0!important;padding-bottom:0!important;min-height:0!important}\n.rco-project-native-text-simple>.wrapper,.rco-project-native-text-simple>.wrapper-full{padding-top:20px!important;padding-bottom:20px!important}\n.rco-project-native-text-simple .text-wrapper{max-width:720px!important;margin-left:auto!important;margin-right:auto!important}\n.rco-project-native-text-simple .text-h6{font-size:clamp(18px,1.45vw,26px)!important;line-height:1.45!important}\n@media(max-width:750px){\n .rco-project-native-text-simple>.wrapper,.rco-project-native-text-simple>.wrapper-full{padding-top:12px!important;padding-bottom:12px!important}\n .rco-project-native-text-simple .text-wrapper{max-width:none!important}\n}\n /* O cabeçalho do case não é uma seção de conteúdo. Usa um respiro menor antes da primeira seção visual. */ .rco-project-dynamic .rco-project-header-gap{height:34px!important;display:block!important;margin:0!important;padding:0!important;background:var(--page-bg,#fff)!important;clear:both!important} @media(max-width:750px){.rco-project-dynamic .rco-project-header-gap{height:24px!important}} /* Projeto aberto · ação de fechar */ .rco-project-close{ width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center; border:1px solid currentColor;border-radius:50%;color:inherit;text-decoration:none; font-family:Arial,sans-serif;font-size:30px;font-weight:200;line-height:1; transition:transform .25s ease,background .25s ease,color .25s ease; } .rco-project-close span{display:block;margin-top:-2px} .rco-project-close:hover{transform:rotate(90deg)} @media(max-width:760px){.rco-project-close{width:38px;height:38px;font-size:27px}} /* ========================================================== /trabalhos · grade contínua Continua com 2 projetos por linha, mas sem o separador horizontal e sem os 100/150px do template entre fileiras. ========================================================== */ .rco-work-cms-grid hr{ display:none!important; } .rco-work-cms-grid .grid-projects-wrapper{ column-gap:36px!important; row-gap:42px!important; padding-top:34px!important; align-items:start; } .rco-work-cms-grid .grid-project{ padding-bottom:0!important; margin-bottom:0!important; } .rco-work-cms-grid .grid-project-image{ width:100%!important; height:auto!important; aspect-ratio:8 / 5; overflow:hidden; } .rco-work-cms-grid .grid-project-image img{ width:100%!important; height:100%!important; object-fit:cover!important; display:block; } .rco-work-cms-grid .grid-project-meta{ margin-top:12px!important; } @media(max-width:750px){ .rco-work-cms-grid .grid-projects-wrapper{ grid-template-columns:1fr!important; column-gap:0!important; row-gap:32px!important; padding-top:28px!important; } .rco-work-cms-grid .grid-project{ grid-column:auto!important; } } /* Projeto aberto · X simples, sem botão/círculo */ .rco-project-close{ width:auto!important; height:auto!important; min-width:0!important; min-height:0!important; display:inline-block!important; padding:4px 2px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:inherit!important; font-family:Arial,sans-serif!important; font-size:31px!important; font-weight:300!important; line-height:1!important; text-decoration:none!important; transform:none!important; opacity:.88; transition:opacity .2s ease!important; } .rco-project-close span{display:block!important;margin:0!important;line-height:1!important} .rco-project-close:hover{transform:none!important;background:transparent!important;color:inherit!important;opacity:1} @media(max-width:760px){.rco-project-close{font-size:28px!important}} /* ========================================================== Trabalhos · fidelidade de capa e cabeçalho adaptativo ========================================================== */ /* As capas devem manter a cor original do arquivo. O template tem estados de hover que usam brightness/saturate em alguns projetos; o CMS não deve herdar essa dessaturação. */ .rco-home-projects-count-1 .single-project-image img, .rco-home-projects-count-2 .single-project-image img, .rco-home-projects-count-3 .single-project-image img, .rco-home-projects-count-4 .single-project-image img, .rco-home-projects-count-5 .single-project-image img, .rco-work-cms-grid .grid-project-image img{ filter:none!important; -webkit-filter:none!important; opacity:1!important; mix-blend-mode:normal!important; } /* A coluna do resumo acompanha a base visual do título, em vez de começar no topo do cabeçalho. */ .rco-project-dynamic .rco-project-header-wrapper{ align-items:flex-end; } .rco-project-dynamic .rco-project-header-summary-column{ align-self:flex-end; padding-bottom:8px; } .rco-project-dynamic .rco-project-header-summary-column .project-meta{ margin-top:0!important; } /* O título mantém impacto em nomes curtos e reduz progressivamente quando o nome do job precisa de muitas linhas. */ .rco-project-dynamic .project-title h1{ text-wrap:balance; max-width:100%; } .rco-project-dynamic .project-title.is-title-long h1{ font-size:clamp(58px,5.25vw,92px)!important; line-height:.94!important; letter-spacing:-.05em!important; } .rco-project-dynamic .project-title.is-title-very-long h1{ font-size:clamp(46px,4.25vw,76px)!important; line-height:.96!important; letter-spacing:-.045em!important; } @media(max-width:750px){ .rco-project-dynamic .rco-project-header-summary-column{ padding-bottom:0; margin-top:24px; } .rco-project-dynamic .project-title.is-title-long h1, .rco-project-dynamic .project-title.is-title-very-long h1{ font-size:clamp(44px,14vw,64px)!important; line-height:.94!important; } } /* ========================================================== /trabalhos · cor original permanente O tema aplica saturate(.75) no card inteiro e saturate(1) no hover. No CMS de Trabalhos não queremos essa mudança. ========================================================== */ .rco-work-cms-grid .grid-project, .rco-work-cms-grid .grid-project:hover{ -webkit-filter:none!important; filter:none!important; opacity:1!important; } /* Mantém exatamente a mesma imagem/cor antes e durante o hover. */ .rco-work-cms-grid.hover-imageMask .grid-project-image img, .rco-work-cms-grid.hover-imageMask .grid-project:hover .grid-project-image img:not(.masked){ -webkit-clip-path:inset(0 0 0 0)!important; clip-path:inset(0 0 0 0)!important; -webkit-filter:none!important; filter:none!important; opacity:1!important; } .rco-work-cms-grid.hover-imageMask .grid-project-image img.masked{ display:none!important; } .rco-work-cms-grid .grid-project-image img, .rco-work-cms-grid .grid-project:hover .grid-project-image img{ -webkit-filter:none!important; filter:none!important; opacity:1!important; mix-blend-mode:normal!important; } /* ========================================================== Portfólio · ajustes mínimos de apresentação ========================================================== */ .rco-work-hero-simple { background: #191919; color: #ebebeb; margin-bottom: 0; padding: clamp(210px, 22vh, 300px) 0 clamp(120px, 13vh, 180px); overflow: hidden; position: relative; } .rco-work-hero-simple .wrapper-full { margin-bottom: 0; } .rco-work-index-title { margin: 0; padding: 0; font-size: clamp(100px, 15vw, 230px); font-weight: 400; line-height: .88; letter-spacing: -.055em; white-space: nowrap; color: inherit; } .rco-work-scroll-cue { position: absolute; right: clamp(28px, 3.2vw, 54px); bottom: clamp(30px, 4vh, 52px); width: 34px; height: 74px; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; color: #ebebeb; text-decoration: none; opacity: .72; z-index: 3; transition: opacity .25s ease; } .rco-work-scroll-cue:hover { opacity: 1; } .rco-work-scroll-cue-line { width: 1px; height: 42px; margin-bottom: 6px; background: currentColor; transform-origin: top; animation: rcoWorkScrollCue 1.8s ease-in-out infinite; } .rco-work-scroll-cue-arrow { font-size: 18px; line-height: 1; font-weight: 300; } #portfolio-projects { scroll-margin-top: 24px; } @keyframes rcoWorkScrollCue { 0%, 100% { transform: scaleY(.38); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } } /* Portfólio: título um pouco maior e com respiro da capa. */ .rco-work-cms-grid .grid-project-meta { margin-top: 20px; } .rco-work-cms-grid .grid-project-title { font-size: clamp(19px, 1.45vw, 23px); line-height: 1.08; font-weight: 500; opacity: 1; } @media (max-width: 750px) { .rco-work-hero-simple { padding: 170px 0 105px; } .rco-work-scroll-cue { right: 20px; bottom: 22px; height: 58px; } .rco-work-scroll-cue-line { height: 30px; } .rco-work-index-title { font-size: clamp(68px, 23vw, 118px); white-space: normal; } .rco-work-cms-grid .grid-project-meta { margin-top: 14px; } } /* ========================================================== Portfólio · índice minimalista ========================================================== */ .page-work-content { background: #ffffff !important; color: #191919; } .page-work-content .work-index-hero.rco-work-hero-simple { background: #ffffff !important; color: #191919 !important; padding: clamp(210px, 23vh, 260px) 0 54px !important; min-height: 0 !important; margin: 0 !important; overflow: visible; } .rco-work-hero-simple .wrapper-full { margin-bottom: 0 !important; padding-left: 32px; padding-right: 32px; } .rco-work-index-title { margin: 0 !important; padding: 0 !important; color: #191919 !important; font-size: clamp(82px, 8.6vw, 138px) !important; font-weight: 400 !important; line-height: .94 !important; letter-spacing: -.06em !important; white-space: normal !important; } .rco-work-index-rule { width: 100%; height: 1px; margin-top: clamp(26px, 3vw, 42px); background: rgba(25, 25, 25, .28); } .rco-work-scroll-cue { display: none !important; } .page-work-content .work-index-list { background: #ffffff; padding: 12px 0 110px !important; margin: 0 !important; } .page-work-content .work-index-list > .wrapper { width: auto !important; max-width: none !important; margin: 0 32px !important; padding: 0 !important; } .rco-work-cms-grid .grid-controls { margin: 0 0 44px !important; padding: 0 !important; min-height: 0 !important; } .rco-work-cms-grid .grid-filter, .rco-work-cms-grid .grid-layout-switcher { display: none !important; } .rco-work-cms-grid .portfolio-filters.horizontal { width: 100%; margin: 0 !important; } .rco-work-cms-grid ul.grid-portfolio-filtering { display: flex !important; flex-wrap: wrap; gap: 9px 18px; margin: 0 !important; padding: 0 !important; } .rco-work-cms-grid ul.grid-portfolio-filtering li { position: relative; margin: 0 !important; padding: 0 0 3px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: rgba(25, 25, 25, .48) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.25 !important; transition: color .2s ease !important; } .rco-work-cms-grid ul.grid-portfolio-filtering li::after { content: "" !important; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .22s ease; } .rco-work-cms-grid ul.grid-portfolio-filtering li.active, .rco-work-cms-grid ul.grid-portfolio-filtering li:hover { color: #191919 !important; } .rco-work-cms-grid ul.grid-portfolio-filtering li.active::after, .rco-work-cms-grid ul.grid-portfolio-filtering li:hover::after { transform: scaleX(1); } .rco-work-cms-grid .grid-projects-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 22px !important; row-gap: clamp(74px, 8vw, 126px) !important; padding: 0 !important; align-items: start !important; } .rco-work-cms-grid .grid-project { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; grid-column: auto !important; filter: none !important; } .rco-work-cms-grid .grid-project-wrap { padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; } .rco-work-cms-grid .grid-project-image { width: 100% !important; height: auto !important; aspect-ratio: 16 / 10 !important; margin: 0 !important; border-radius: 0 !important; overflow: hidden !important; background: #f2f2ef !important; } .rco-work-cms-grid .grid-project-image img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; filter: none !important; opacity: 1 !important; transform: scale(1) !important; transition: transform .55s cubic-bezier(.22,.61,.36,1) !important; } .rco-work-cms-grid .grid-project:hover .grid-project-image img { transform: scale(1.018) !important; } .rco-work-cms-grid .grid-project-meta { display: block !important; margin: 0 !important; padding: 19px 0 0 !important; min-height: 0 !important; } .rco-work-cms-grid .grid-project-title { margin: 0 !important; color: #191919 !important; font-size: clamp(27px, 2.35vw, 39px) !important; font-weight: 400 !important; line-height: 1.02 !important; letter-spacing: -.045em !important; opacity: 1 !important; } .rco-work-cms-grid .grid-project-year { display: block !important; margin-top: 8px !important; color: rgba(25, 25, 25, .58) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.25 !important; } .rco-work-cms-grid .grid-project-category { display: none !important; } .page-work-content .work-index-cta { margin: 0 !important; } @media (max-width: 750px) { .page-work-content .work-index-hero.rco-work-hero-simple { padding: 165px 0 38px !important; } .rco-work-hero-simple .wrapper-full { padding-left: 20px; padding-right: 20px; } .rco-work-index-title { font-size: clamp(62px, 19vw, 92px) !important; } .rco-work-index-rule { margin-top: 24px; } .page-work-content .work-index-list { padding-top: 8px !important; padding-bottom: 72px !important; } .page-work-content .work-index-list > .wrapper { margin: 0 20px !important; } .rco-work-cms-grid .grid-controls { margin-bottom: 30px !important; } .rco-work-cms-grid ul.grid-portfolio-filtering { gap: 8px 14px; } .rco-work-cms-grid .grid-projects-wrapper { grid-template-columns: 1fr !important; row-gap: 54px !important; } .rco-work-cms-grid .grid-project-image { aspect-ratio: 16 / 10 !important; } .rco-work-cms-grid .grid-project-meta { padding-top: 14px !important; } .rco-work-cms-grid .grid-project-title { font-size: clamp(25px, 8vw, 34px) !important; } } /* ========================================================== Portfólio · hover minimalista controlado pela página Remove os hovers herdados do template e mantém leitura limpa. ========================================================== */ .rco-work-cms-grid, .rco-work-cms-grid .grid-project, .rco-work-cms-grid .grid-project-wrap, .rco-work-cms-grid .grid-project-meta, .rco-work-cms-grid .grid-project-title, .rco-work-cms-grid .grid-project-year { text-align: left !important; } .rco-work-cms-grid .grid-project-meta { align-items: start !important; } .rco-work-cms-grid .grid-project-image { position: relative !important; } .rco-work-cms-grid .grid-project-image img, .rco-work-cms-grid .grid-project-image img:not(.masked) { transform: scale(1) !important; transform-origin: center center !important; transition: transform .62s cubic-bezier(.22,.61,.36,1) !important; } .rco-work-cms-grid .grid-project:hover .grid-project-image img, .rco-work-cms-grid .grid-project:focus-within .grid-project-image img { transform: scale(1.03) !important; } .rco-work-cms-grid .grid-project-title { display: grid !important; grid-template-columns: minmax(0, 1fr); overflow: hidden !important; width: 100% !important; } .rco-work-cms-grid .grid-project-title > span { grid-area: 1 / 1; display: block !important; width: 100%; min-width: 0; color: inherit !important; font: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-align: left !important; will-change: transform; transition: transform .46s cubic-bezier(.76,0,.24,1) !important; } .rco-work-cms-grid .grid-project-title .rco-title-current { transform: translateY(0); } .rco-work-cms-grid .grid-project-title .rco-title-next { transform: translateY(110%); } .rco-work-cms-grid .grid-project:hover .grid-project-title .rco-title-current, .rco-work-cms-grid .grid-project:focus-within .grid-project-title .rco-title-current { transform: translateY(-110%); } .rco-work-cms-grid .grid-project:hover .grid-project-title .rco-title-next, .rco-work-cms-grid .grid-project:focus-within .grid-project-title .rco-title-next { transform: translateY(0); } /* Garante que efeitos antigos do template não reapareçam mesmo se o JavaScript global estiver em cache durante uma navegação Barba. */ .rco-work-cms-grid.hover-arrow .grid-project-wrap::after, .rco-work-cms-grid.hover-imageMask img.masked, .rco-work-cms-grid .grid-project-image img.masked, .rco-work-cms-grid .g-list-arrow { display: none !important; } /* Portfólio · cursor idêntico ao padrão "abrir projeto" da Home. */ .work-portfolio-page #mouseCursor.hover-icon .main-circle { fill: #191919 !important; stroke: none !important; } .work-portfolio-page #mouseCursor.hover-icon .mouse-cursor-icon { color: #ffffff !important; } /* ========================================================== Home · somente o nome do projeto recebe a escala do Portfólio. Thumbnail, cursor e efeitos originais permanecem intactos. ========================================================== */ .rco-dynamic-grid.ndg-projects .single-project-meta > .rco-home-project-title { float: none !important; display: block !important; width: 100% !important; margin: 0 !important; color: inherit !important; font-size: clamp(27px, 2.35vw, 39px) !important; font-weight: 400 !important; line-height: 1.02 !important; letter-spacing: -.045em !important; opacity: 1 !important; text-align: left !important; } .rco-dynamic-grid.ndg-projects .single-project-meta > .rco-home-project-title .rco-home-project-heading { margin: 0 !important; font: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; color: inherit !important; } @media (max-width: 750px) { .rco-dynamic-grid.ndg-projects .single-project-meta > .rco-home-project-title { font-size: clamp(25px, 8vw, 34px) !important; } } /* source: assets/css/_css/client.css */ /* Estilo Geral */ .client-area { padding: 60px 20px; background-color: #fff; } /* Estilo para o parágrafo */ .client-area-text p { margin: 0; padding: 0; width: 80%; /* Define a largura fixa do parágrafo */ line-height: 1.2; /* Define a altura da linha */ white-space: normal; /* Permite quebras de linha no texto */ opacity: 1; /* Inicialmente invisível */ text-align: left; /* Alinha o texto à esquerda */ padding: 0 10px; /* Ajuste de padding */ height: auto; /* Ajuste para altura automática */ } .client-area-text h2 { font-size: 28px; font-weight: bold; color: #333; text-align: center; } /* Garantir que as imagens se ajustem corretamente dentro dos containers */ .client-box img { max-width: 90%; /* Ocupa 100% da largura */ height: 70%; /* Ocupa 100% da altura do container */ object-fit: contain; /* Ajusta a imagem sem distorcer */ filter: grayscale(100%); transition: filter 0.3s ease-in-out; } /* No hover, as logos ficam coloridas */ .client-box:hover img { filter: grayscale(0%); } /* Home: mais presença para o título e as marcas sem alterar a grade. */ #clients.home-client-showcase { --clients-surface: #ffffff; background-color: #ffffff; } #clients.home-client-showcase .client-area { padding: clamp(260px, 15vw, 320px) 20px; background-color: var(--clients-surface); } #clients.home-client-showcase .clients-wrapper, #clients.home-client-showcase .client-area-text, #clients.home-client-showcase .client-box { background-color: var(--clients-surface); } #clients.home-client-showcase .client-box { border-color: #e7e7e2; } #clients.home-client-showcase .client-area-text p { width: 92%; padding: 0; font-size: clamp(34px, 2.3vw, 46px); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; } #clients.home-client-showcase .client-box .client-logo-image { width: auto; height: auto; max-width: 92%; max-height: 112px; opacity: .38; transition: filter .3s ease-in-out, opacity .28s ease; } #clients.home-client-showcase .client-box:hover .client-logo-image { opacity: 1; } #clients.home-client-showcase .client-box .client-logo-fallback { max-width: 90%; font-size: clamp(18px, 1.35vw, 25px); line-height: 1.05; text-align: center; opacity: .42; } @media (min-width: 1025px) { #clients.home-client-showcase .client-area-text { transform: translate(clamp(48px, 3.4vw, 68px), -22px); } /* Grid para Desktop */ .clients-wrapper { display: grid; grid-template-columns: repeat(6, 1fr); /* 6 colunas */ grid-template-rows: repeat(4, 150px); /* 4 linhas */ gap: 0px; justify-items: center; align-items: center; margin: 0 auto; max-width: 1200px; } /* Alinhamento do Texto */ .client-area-text { grid-column: 3 / span 2; /* Título ocupa 2 colunas */ grid-row: 1; display: flex; justify-content: center; /* Alinha o parágrafo horizontalmente */ text-align: left; /* Alinha o texto à esquerda */ height: 100%; /* Garante que o container ocupe a altura necessária */ align-items: center; /* Centraliza o parágrafo verticalmente */ flex-direction: column; /* Organiza o título e o parágrafo em coluna */ } /* primeiro logo */ .client-box { grid-column: 2; /* Coluna 2 */ grid-row: 1; /* Primeira linha */ display: flex; justify-content: center; align-items: center; background-color: #fff; border: 1px solid #ccc; width: 100%; height: 150px; /* Altura fixa para garantir alinhamento */ margin: 0; /* Remove qualquer margem */ padding: 0; /* Remove qualquer padding */ } /* Logo 2 */ .clients-wrapper>.client-box:nth-child(3) { grid-column: 1; /* Coluna 1 */ grid-row: 2; /* Linha 2 */ } /* Logo 3 */ .clients-wrapper>.client-box:nth-child(4) { grid-column: 2; /* Coluna 2 */ grid-row: 2; /* Linha 2 */ } /* Logo 4 */ .clients-wrapper>.client-box:nth-child(5) { grid-column: 3; /* Coluna 3 */ grid-row: 2; /* Linha 2 */ } /* Logo 5 */ .clients-wrapper>.client-box:nth-child(6) { grid-column: 4; /* Coluna 4 */ grid-row: 2; /* Linha 2 */ } /* Logo 6 */ .clients-wrapper>.client-box:nth-child(7) { grid-column: 5; /* Coluna 5 */ grid-row: 2; /* Linha 2 */ } /* Logo 7 */ .clients-wrapper>.client-box:nth-child(8) { grid-column: 2; /* Coluna 2 */ grid-row: 3; /* Linha 3 */ } /* Logo 8 */ .clients-wrapper>.client-box:nth-child(9) { grid-column: 3; /* Coluna 3 */ grid-row: 3; /* Linha 3 */ } /* Logo 9 */ .clients-wrapper>.client-box:nth-child(10) { grid-column: 4; /* Coluna 4 */ grid-row: 3; /* Linha 3 */ } /* Logo 10 */ .clients-wrapper>.client-box:nth-child(11) { grid-column: 5; /* Coluna 5 */ grid-row: 3; /* Linha 3 */ } /* Logo 11 */ .clients-wrapper>.client-box:nth-child(12) { grid-column: 6; /* Coluna 6 */ grid-row: 3; /* Linha 3 */ } /* Logo 12 */ .clients-wrapper>.client-box:nth-child(13) { grid-column: 5; /* Coluna 4 */ grid-row: 4; /* Linha 4 */ } } @media (max-width: 1024px) { #clients.home-client-showcase .client-area { padding: 240px 20px; } .clients-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 colunas */ grid-template-rows: auto; /* Linhas automáticas */ gap: 10px; /* Espaçamento entre os logos */ justify-items: center; align-items: center; margin: 0 auto; max-width: 100%; /* Ajuste da largura máxima */ } .client-box { grid-column: auto; /* Fluxo automático */ grid-row: auto; height: 120px; /* Altura ajustada para iPads */ } .client-area-text { grid-column: 1 / -1; /* O texto ocupa toda a largura */ grid-row: 1; /* Fica na primeira linha */ text-align: center; padding: 0 20px; } .client-area-text p { font-size: 18px; /* Tamanho do texto reduzido */ width: 100%; /* Ajuste para caber na tela */ } #clients.home-client-showcase .client-area-text p { font-size: clamp(30px, 4.6vw, 40px); line-height: 1.08; } #clients.home-client-showcase .client-area-text { margin-bottom: 40px; } #clients.home-client-showcase .client-box .client-logo-image { max-width: 88%; max-height: 88px; } } @media (max-width: 768px) { #clients.home-client-showcase .client-area { padding: 180px 14px; } .clients-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); /* 2 colunas */ grid-template-rows: auto; /* Linhas automáticas */ gap: 10px; /* Espaçamento entre os logos */ justify-items: center; align-items: center; margin: 0 auto; max-width: 100%; /* Ajuste da largura máxima */ } .client-box { grid-column: auto; /* Fluxo automático */ grid-row: auto; height: 100px; /* Altura ajustada para celulares */ } .client-area-text { grid-column: 1 / -1; /* O texto ocupa toda a largura */ grid-row: 1; /* Fica na primeira linha */ text-align: center; padding: 0 15px; /* Ajuste do padding para telas menores */ } .client-area-text p { font-size: 16px; /* Reduz o tamanho do texto */ width: 100%; /* Ajuste para caber na tela */ } #clients.home-client-showcase .client-area-text p { font-size: clamp(28px, 8vw, 36px); } #clients.home-client-showcase .client-area-text { margin-bottom: 32px; } #clients.home-client-showcase .client-box .client-logo-image { max-width: 86%; max-height: 72px; } } /** Clients Grid ------------------------------ */ .rco-clients-grid { grid-column-gap: 16px; grid-row-gap: 16px; -ms-grid-rows: auto 16px auto; grid-template-rows: auto auto; -ms-grid-columns: 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; margin-bottom: 2em; display: -ms-grid; display: grid; width: 100%; } /* .rco-clients-grid > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .rco-clients-grid > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .rco-clients-grid > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 5; } .rco-clients-grid > *:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 7; } .rco-clients-grid > *:nth-child(5) { -ms-grid-row: 1; -ms-grid-column: 9; } .rco-clients-grid > *:nth-child(6) { -ms-grid-row: 3; -ms-grid-column: 1; } .rco-clients-grid > *:nth-child(7) { -ms-grid-row: 3; -ms-grid-column: 3; } .rco-clients-grid > *:nth-child(8) { -ms-grid-row: 3; -ms-grid-column: 5; } .rco-clients-grid > *:nth-child(9) { -ms-grid-row: 3; -ms-grid-column: 7; } .rco-clients-grid > *:nth-child(10) { -ms-grid-row: 3; -ms-grid-column: 9; } */ .rco-clients-grid.col-4 { -ms-grid-columns: 1fr 8px 1fr 8px 1fr 8px 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 8px; grid-row-gap: 8px; } .rco-clients-grid.col-3 { -ms-grid-columns: 1fr 0 1fr 0 1fr; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 0; grid-row-gap: 0; } .rco-clients-grid.col-2 { -ms-grid-columns: 1fr 0 1fr; grid-template-columns: 1fr 1fr; grid-column-gap: 0; grid-row-gap: 0; } .rco-clients-grid .client { height: 180px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } .rco-clients-grid .client .client-caption { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 100%); -ms-transform: translate(-50%, 100%); transform: translate(-50%, 100%); opacity: 0; -webkit-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .rco-clients-grid .client:hover .client-caption { opacity: 1; -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } .rco-clients-grid .client a { text-decoration: none; color: var(--mainColor); } .rco-clients-grid .client a img { max-width: 100px; max-height: 70px; } .rco-clients-grid.bordered { grid-column-gap: 0; grid-row-gap: 0; } .rco-clients-grid.bordered .client { height: 250px; outline-color: rgb(0 0 0 / 20%); outline-width: 1px; outline-style: solid; } .light .rco-clients-grid.bordered .client { outline-color: rgb(255 255 255 / 10%); } .rco-clients-grid.bordered .client:hover .client-caption { -webkit-transform: translate(-50%, -150%); -ms-transform: translate(-50%, -150%); transform: translate(-50%, -150%); } /** Clients Carousel ------------------------------ */ .rco-clients-carousel { display: block; float: left; width: 100%; white-space: nowrap; will-change: transform } .rco-clients-carousel .clients-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; float: left; } .rco-clients-carousel .client { width: 300px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .rco-clients-carousel .client img { margin: 0 auto; height: 100%; max-width: 120px; max-height: 75px; } .rco-clients-carousel .client a { display: block; margin: 0 auto; } @media only screen and (max-width: 750px) { /* Clients */ .rco-clients-grid { -ms-grid-columns: 1fr 50px 1fr !important; grid-template-columns: 1fr 1fr !important; grid-column-gap: 50px; grid-row-gap: 25px; } } /* source: assets/css/_css/team.css */ /** Team Member ------------------------------ */ .rco-team-member { display: -webkit-box; display: -ms-flexbox; display: flex; float: left; width: 100%; position: relative; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 2em; } .team-member-image, .team-member-image img { width: 100%; overflow: hidden; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; height: 100%; position: relative; } .team-member-image img { -webkit-transition: -webkit-transform .5s ease-out; transition: -webkit-transform .5s ease-out; -o-transition: transform .5s ease-out; transition: transform .5s ease-out; transition: transform .5s ease-out, -webkit-transform .5s ease-out } .rco-team-member.active .team-member-image img, .rco-team-member:hover .team-member-image img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) } .team-member-card { display: -webkit-box; display: -ms-flexbox; display: flex; float: left; width: 100%; margin-top: 15px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 3px; } .team-member-name { width: 100%; } .team-member-title { display: block; float: left; opacity: .5; line-height: 1; } .cv-toggle { display: inline-block; font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48; margin-left: auto; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: -webkit-transform .25s ease-out; transition: -webkit-transform .25s ease-out; -o-transition: transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; position: absolute; bottom: 25px; right: 25px; z-index: 1; } .cv-toggle::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: var(--mainBackground); width: 40px; height: 40px; border-radius: 50%; } .rco-team-member.active .cv-toggle { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg) } .cv-toggle span { font-size: 25px; position: relative; z-index: 1; margin: 0; padding: 0; line-height: 25px; height: 25px; } .team-member-cv { display: none; float: left; margin-top: 50px; width: 90%; opacity: 0; position: relative; } .team-member-cv::after { content: ""; display: block; position: absolute; top: -25px; left: 0; width: 100%; height: 1px; background: #191919; opacity: .1; } .team-member-socials { position: absolute; top: 30px; left: 30px; opacity: 0; -webkit-transition: opacity .3s ease-out; -o-transition: opacity .3s ease-out; transition: opacity .3s ease-out } .rco-team-member.active .team-member-socials, .rco-team-member:hover .team-member-socials { opacity: 1 } .rco-team-member.overlay .team-member-card { position: absolute; bottom: 30px; left: 30px; right: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; width: auto; } .rco-team-member.overlay .team-member-title.text-h6 { opacity: 1; } .rco-team-member.overlay .team-member-cv::after { background: #fff; } @media only screen and (max-width: 750px) { /* Team Member */ .team-member-cv { width: 100% } } /* source: assets/css/_css/services.css */ /** Rco Services ------------------------------ */ .rco-services { overflow: hidden } .rco-service { position: relative; margin-top: 100px; display: block; float: left; } .service-title-wrap, .service-content-wrap { width: 50%; float: left; } .pin-titles .service-content-wrap { padding-bottom: 50px } .services-item-bottom-line { height: 1px; width: 100%; display: block; background: #191919; position: absolute; top: -50px; opacity: .2; } .light .services-item-bottom-line { background: #fff } .rco-services .service-content-wrap>* { margin-bottom: 40px } .rco-services.ordered .service-title-wrap::before { content: attr(data-index); display: inline-block; position: absolute; top: 10px; left: 0; font-size: 15px; } .rco-services.ordered .service-title-wrap { padding-left: 20%; -webkit-box-sizing: border-box; box-sizing: border-box; } .rco-service:first-child { margin-top: 0; } @media only screen and (max-width: 900px) { .rco-services { padding: 0 } .rco-service { padding-top: 0; } .service-title-wrap, .service-content-wrap { width: 100%; } .service-title { width: 80%; float: left } } @media only screen and (max-width: 750px) { .rco-services.ordered .service-title-wrap { padding-left: 15%; padding-bottom: 1em; } } /* source: assets/css/_css/markets.css */ /* ============================================================ Rurally · Mercados ============================================================ */ .rco-markets{--mk-ink:#121212;--mk-soft:#f5f5f2;--mk-line:rgba(18,18,18,.14);--mk-muted:rgba(18,18,18,.62);background:#fff;color:var(--mk-ink)} .rco-markets-shell{width:min(calc(100% - 104px),1420px);margin:0 auto} /* Quem Somos · esteiras */ .rco-markets-about{background:#111;color:#fff;padding:104px 0 112px;overflow:hidden} .rco-markets-about-head{width:min(calc(100% - 104px),1420px);margin:0 auto 54px;display:grid;grid-template-columns:1fr minmax(320px,.66fr);gap:70px;align-items:end} .rco-markets-about-title{font-size:clamp(44px,5vw,76px);font-weight:400;line-height:.96;letter-spacing:-.052em;margin:0;max-width:760px} .rco-markets-about-copy{font-size:18px;line-height:1.55;color:rgba(255,255,255,.62);max-width:520px;margin:0 0 5px;justify-self:end} .rco-market-marquee{display:flex;overflow:hidden;width:100%;margin:10px 0} .rco-market-marquee-track{display:flex;flex:none;width:max-content;will-change:transform;animation:rco-market-flow 34s linear infinite} .rco-market-marquee.is-reverse .rco-market-marquee-track{animation-name:rco-market-flow-reverse;animation-duration:38s} .rco-market-marquee-group{display:flex;gap:10px;flex:none;padding-right:10px} .rco-market-pill{display:flex;align-items:center;justify-content:center;min-height:84px;padding:0 42px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff;text-decoration:none;font-size:clamp(21px,2vw,31px);letter-spacing:-.035em;white-space:nowrap;transition:background .28s ease,color .28s ease,border-color .28s ease,transform .28s ease} .rco-market-pill:hover{background:#fff;color:#111;border-color:#fff;transform:translateY(-2px)} .rco-markets-about-footer{width:min(calc(100% - 104px),1420px);margin:48px auto 0;display:flex;justify-content:flex-end} .rco-markets-about-link{display:inline-flex;gap:14px;align-items:center;color:#fff;text-decoration:none;font-size:16px;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:7px} .rco-markets-about-link span:last-child{font-size:22px;transition:transform .25s ease}.rco-markets-about-link:hover span:last-child{transform:translate(4px,-4px)} @keyframes rco-market-flow{to{transform:translateX(-50%)}} @keyframes rco-market-flow-reverse{from{transform:translateX(-50%)}to{transform:translateX(0)}} /* Página geral */ .rco-markets-hub-hero{ box-sizing:border-box; background:#121212; color:#fff; min-height:70svh; padding:170px 0 112px; display:flex; align-items:flex-end; } .rco-markets-eyebrow{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.44);margin:0 0 24px} .rco-markets-hub-grid{ width:100%; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr); gap:88px; align-items:end; } .rco-markets-hub-title{ font-size:clamp(56px,6vw,92px); line-height:.94; letter-spacing:-.06em; font-weight:400; margin:0; max-width:1050px; text-wrap:balance; } .rco-markets-hub-intro{ font-size:19px; line-height:1.58; letter-spacing:-.012em; color:rgba(255,255,255,.68); margin:0 0 4px; max-width:500px; justify-self:end; } .rco-markets-grid-section{background:var(--mk-soft);padding:90px 0 112px} .rco-markets-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .rco-market-card{position:relative;display:flex;flex-direction:column;min-height:390px;padding:34px 34px 32px;background:#fff;color:#111;text-decoration:none;border-radius:14px;overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s ease,color .3s ease} .rco-market-card::before{content:"";position:absolute;inset:0;background:#111;transform:translateY(101%);transition:transform .38s cubic-bezier(.16,1,.3,1)} .rco-market-card>*{position:relative;z-index:1} .rco-market-card-number{font-size:13px;letter-spacing:.12em;color:rgba(18,18,18,.42);transition:color .3s ease} .rco-market-card-title{font-size:clamp(31px,2.7vw,45px);line-height:.98;letter-spacing:-.048em;font-weight:400;margin:auto 0 24px;max-width:92%} .rco-market-card-copy{font-size:15px;line-height:1.55;color:rgba(18,18,18,.58);margin:0;max-width:90%;transition:color .3s ease} .rco-market-card-arrow{position:absolute;right:30px;top:28px;font-size:28px;transition:transform .3s ease} .rco-market-card:hover{color:#fff;transform:translateY(-4px)}.rco-market-card:hover::before{transform:translateY(0)}.rco-market-card:hover .rco-market-card-copy,.rco-market-card:hover .rco-market-card-number{color:rgba(255,255,255,.62)}.rco-market-card:hover .rco-market-card-arrow{transform:translate(5px,-5px)} /* Interna */ .rco-market-detail{background:#fff;color:#111} .rco-market-hero{box-sizing:border-box;background:#111;color:#fff;padding:170px 0 92px;min-height:72svh;display:flex;align-items:flex-end} .rco-market-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.65fr);gap:80px;align-items:end} .rco-market-hero-title{font-size:clamp(58px,6.5vw,104px);line-height:.9;letter-spacing:-.062em;font-weight:400;margin:0;max-width:1050px;text-wrap:balance} .rco-market-hero-copy{font-size:18px;line-height:1.58;color:rgba(255,255,255,.64);margin:0 0 5px;max-width:500px;justify-self:end} .rco-market-intro{padding:116px 0 122px;background:#fff} .rco-market-intro p{font-size:clamp(30px,3.4vw,50px);line-height:1.12;letter-spacing:-.042em;font-weight:400;margin:0 auto;max-width:1120px;text-align:center;text-wrap:balance} .rco-market-subareas{background:var(--mk-soft);padding:90px 0 104px} .rco-market-section-head{display:flex;justify-content:space-between;gap:50px;align-items:flex-end;margin-bottom:46px} .rco-market-section-head h2{font-size:clamp(38px,4vw,62px);line-height:.98;letter-spacing:-.05em;font-weight:400;margin:0;max-width:850px} .rco-market-section-head p{font-size:16px;color:var(--mk-muted);margin:0 0 4px;max-width:430px} .rco-market-tags{display:flex;flex-wrap:wrap;gap:10px} .rco-market-tag{border:1px solid rgba(18,18,18,.16);border-radius:999px;padding:20px 28px;font-size:18px;letter-spacing:-.02em;background:#fff} .rco-market-services{padding:104px 0 112px;background:#111;color:#fff} .rco-market-services .rco-market-section-head p{color:rgba(255,255,255,.55)} .rco-market-service-list{border-top:1px solid rgba(255,255,255,.16)} .rco-market-service-row{display:grid;grid-template-columns:60px minmax(0,1fr) minmax(280px,.55fr) 30px;gap:26px;align-items:center;min-height:112px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.16);color:#fff;text-decoration:none} .rco-market-service-row-num{font-size:13px;color:rgba(255,255,255,.38)} .rco-market-service-row h3{font-size:clamp(28px,2.5vw,42px);font-weight:400;line-height:1;letter-spacing:-.042em;margin:0} .rco-market-service-row p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.52);margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .rco-market-service-row-arrow{font-size:26px;transition:transform .25s ease}.rco-market-service-row:hover .rco-market-service-row-arrow{transform:translate(5px,-5px)} .rco-market-related{padding:88px 0 104px;background:#fff} .rco-market-projects-section{padding-top:88px} .rco-market-content-section{padding-top:84px;border-top:1px solid var(--mk-line)} .rco-market-related-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:42px} .rco-market-related-head h2{font-size:clamp(22px,2vw,30px);line-height:1;letter-spacing:-.035em;font-weight:400;margin:0} .rco-market-related-link{display:inline-flex;align-items:center;gap:13px;color:#111;text-decoration:none;border-bottom:1px solid rgba(18,18,18,.42);padding-bottom:7px;font-size:15px;line-height:1.1} .rco-market-related-link span:last-child{font-size:21px;transition:transform .25s ease}.rco-market-related-link:hover span:last-child{transform:translate(4px,-4px)} .rco-market-project-grid{margin-top:0} .rco-market-project-grid .grid-projects-wrapper{row-gap:clamp(68px,7vw,108px)!important} .rco-market-posts-grid{margin-top:0} .rco-market-posts-grid .grid--posts{margin-top:0} .rco-market-faq{padding:100px 0 110px;background:var(--mk-soft)} .rco-market-faq-list{border-top:1px solid var(--mk-line)} .rco-market-faq details{border-bottom:1px solid var(--mk-line);padding:0}.rco-market-faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 30px;gap:24px;padding:28px 0;font-size:22px;letter-spacing:-.025em}.rco-market-faq summary::-webkit-details-marker{display:none}.rco-market-faq summary span:last-child{font-size:24px}.rco-market-faq details[open] summary span:last-child{transform:rotate(45deg)}.rco-market-faq-answer{padding:0 60px 30px 0;max-width:900px;color:var(--mk-muted);font-size:17px;line-height:1.62} .rco-market-cta{padding:116px 0 112px;background:#111;color:#fff}.rco-market-cta-title{font-size:clamp(48px,6vw,92px);line-height:.94;letter-spacing:-.058em;font-weight:400;max-width:1250px;margin:0 0 70px}.rco-market-cta-bottom{display:grid;grid-template-columns:1fr minmax(320px,.55fr);gap:70px;align-items:end}.rco-market-cta-copy{font-size:17px;line-height:1.55;color:rgba(255,255,255,.58);max-width:560px;margin:0}.rco-market-cta-link{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);padding:0 0 16px;font-size:17px}.rco-market-cta-link span:last-child{font-size:25px} @media(max-width:1050px){ .rco-markets-shell,.rco-markets-about-head,.rco-markets-about-footer{width:min(calc(100% - 56px),1420px)} .rco-markets-about-head,.rco-markets-hub-grid,.rco-market-hero-grid,.rco-market-cta-bottom{grid-template-columns:1fr;gap:30px}.rco-markets-about-copy,.rco-markets-hub-intro,.rco-market-hero-copy{justify-self:start;max-width:760px} .rco-markets-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .rco-market-service-row{grid-template-columns:42px 1fr 28px}.rco-market-service-row p{grid-column:2/4} } @media(max-width:680px){ .rco-markets-shell,.rco-markets-about-head,.rco-markets-about-footer{width:calc(100% - 36px)} .rco-markets-about{padding:78px 0 84px}.rco-markets-about-head{margin-bottom:38px}.rco-markets-about-title{font-size:44px}.rco-markets-about-copy{font-size:16px} .rco-market-pill{min-height:66px;padding:0 28px;font-size:22px}.rco-market-marquee-track{animation-duration:28s}.rco-market-marquee.is-reverse .rco-market-marquee-track{animation-duration:31s} .rco-markets-hub-hero{min-height:62svh;padding:128px 0 70px}.rco-markets-hub-title{font-size:45px}.rco-markets-hub-intro{font-size:16px}.rco-markets-grid-section{padding:60px 0 72px}.rco-markets-grid{grid-template-columns:1fr}.rco-market-card{min-height:310px;padding:28px} .rco-market-hero{padding:135px 0 72px;min-height:0}.rco-market-hero-title{font-size:52px}.rco-market-hero-copy{font-size:16px}.rco-market-intro{padding:76px 0}.rco-market-intro p{font-size:31px;text-align:left}.rco-market-subareas,.rco-market-services,.rco-market-related,.rco-market-faq{padding:68px 0 76px}.rco-market-section-head{display:block;margin-bottom:34px}.rco-market-section-head h2{font-size:39px}.rco-market-section-head p{margin-top:20px}.rco-market-tag{font-size:16px;padding:16px 20px} .rco-market-service-row{grid-template-columns:32px 1fr 24px;gap:12px;min-height:96px}.rco-market-service-row h3{font-size:27px}.rco-market-service-row p{font-size:13px}.rco-market-cta{padding:76px 0}.rco-market-cta-title{font-size:46px;margin-bottom:44px}.rco-market-cta-copy{font-size:15px} } @media(prefers-reduced-motion:reduce){.rco-market-marquee-track{animation-play-state:paused}.rco-market-card,.rco-market-card::before,.rco-market-pill{transition:none}} /* Mercados · cases reutilizam exatamente a linguagem do Portfólio */ .market-detail-page #mouseCursor.hover-icon .main-circle{fill:#191919!important;stroke:none!important} .market-detail-page #mouseCursor.hover-icon .mouse-cursor-icon{color:#fff!important} @media(max-width:680px){.rco-market-related-head{align-items:center;margin-bottom:30px}.rco-market-related-head h2{font-size:22px}.rco-market-related-link{font-size:13px}.rco-market-content-section{padding-top:62px}} /* Mercados · Conteúdo: thumbnail editorial, sem alongar imagens verticais */ .rco-market-content-section .rco-market-posts-grid .single-post-image{ position:relative; width:100%; aspect-ratio:4 / 3; overflow:hidden; background:#f2f2f0; } .rco-market-content-section .rco-market-posts-grid .single-post-image img{ width:100%!important; height:100%!important; max-width:none; object-fit:cover; object-position:center; display:block; float:none; } @media(max-width:680px){ .rco-market-content-section .rco-market-posts-grid .single-post-image{aspect-ratio:4 / 3} } /* source: assets/css/_css/testimonial.css */ /** Testimonials ------------------------------ */ .rco-testimonials { display: block; float: left; width: 100%; position: relative } .testimonials-wrapper { display: block; position: relative; float: left; width: 100%; } .testimonial { position: absolute; top: 0; left: 0; width: 100%; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; opacity: 0; } .testimonial:first-child { opacity: 1 } .testimonial-content { margin-bottom: 60px; display: block; float: left; width: 100%; } .testimonial-meta { display: -webkit-box; display: -ms-flexbox; display: flex; float: left; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .testimonial-meta>div { display: block; float: left; } .testimonial-meta>div.testimonial-avatar { width: 75px; height: 75px; margin-right: 15px; position: relative; } .testimonial-meta>div.testimonial-avatar>img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .testimonial-meta>div.testimonial-title { display: inline-block; vertical-align: middle; font-size: 18px; line-height: 25px; } span.testimonial-progress .progress-fill, span.testimonial-progress { position: absolute; bottom: 100px; width: 100%; height: 0.5px; background: var(--mainColor); opacity: .4; } span.testimonial-progress .progress-fill { width: 0%; z-index: 5; top: 0; bottom: unset; opacity: 1; height: 1px; } .testimonials-nav { position: static; display: block; float: left; width: 100%; margin-bottom: 50px; } .testimonials-nav>span { display: inline-block; float: left; opacity: 1; cursor: pointer; line-height: 25px; } .testimonials-nav>div { display: inline-block; } .testimonials-navigation>span { cursor: pointer } span.test_current::before, span.test-prev::before { content: "("; } span.test_total::after, span.test-next::after { content: ")"; } span.test_current::after, span.test-prev::after { content: "/"; margin-left: 5px; } .testimonials-fraction::after { content: "-"; display: inline-block; margin: 0 20px; } .testimonial-avatar svg { stroke: var(--mainColor); stroke-width: 1; fill: transparent; position: absolute; top: 50%; left: 50%; width: 140%; height: 140%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .rco-testimonials.align-center .testimonial-meta { text-align: left } .rco-testimonials.align-center .testimonial-avatar { margin-left: auto } .rco-testimonials.align-center .testimonial-title { margin-right: auto } @media only screen and (max-width: 750px) { .testimonial-content.text-h4 { font-size: 20px; line-height: 1.6em; } } /* source: assets/css/_css/product.css */ /** Products Grid ------------------------------ */ .rco-products-grid { display: block; float: left; width: 100%; } .grid--products { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 40px 1fr 40px 1fr 40px 1fr; grid-template-columns: repeat(4, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; grid-gap: 40px; } .grid--products>*:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .grid--products>*:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .grid--products>*:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 5; } .grid--products>*:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 7; } .grid--products.col-2 { -ms-grid-columns: 1fr 40px 1fr; grid-template-columns: repeat(2, 1fr); } .product-grid-controls { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 2em; } .grid--switcher .material-icons { font-size: 1.5em; -webkit-transition: font-variation-settings .3s ease; -o-transition: font-variation-settings .3s ease; transition: font-variation-settings .3s ease; font-variation-settings: 'FILL' 0, 'opsz' 40 } .grid--switcher>span { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .grid--switcher>span:hover .material-icons { font-variation-settings: 'FILL' 1, 'opsz' 40 } /* source: assets/css/_css/awards.css */ /** Awards Table ------------------------------ */ .rco-awards { display: block; float: left; width: 100%; } .rco-awards-head { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; padding-bottom: 1rem; } .rco-awards-head .nah-col { display: block; opacity: .5 } ul.rco-awards-list li a span:first-child, .rco-awards-head .nah-col:first-child { width: 35%; } ul.rco-awards-list li a span:nth-child(2), .rco-awards-head .nah-col:nth-child(2) { width: 55%; } ul.rco-awards-list li a span:last-child, .rco-awards-head .nah-col:last-child { width: 10%; text-align: right; } .rco-awards-list-wrap { display: block; width: 100%; } ul.rco-awards-list { padding: 0; margin: 0; list-style: none; } ul.rco-awards-list li { display: block; width: 100%; float: left; padding-bottom: 0; position: relative; } ul.rco-awards-list li a { text-decoration: none; color: var(--mainColor); display: -webkit-box; display: -ms-flexbox; display: flex; float: left; width: 100%; padding-top: 1.4em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 1.4em; -webkit-transition: color .1s ease .1s; -o-transition: color .1s ease .1s; transition: color .1s ease .1s; position: relative; z-index: 1; } ul.rco-awards-list li a span { display: block; float: left; } .rco-awards-head::after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 0%; height: 0.1px; background: var(--mainColor); -webkit-transition: width 1s ease-out .25s; -o-transition: width 1s ease-out .25s; transition: width 1s ease-out .25s; opacity: .5; } .rco-awards-head.is-inview::after { width: 100% } ul.rco-awards-list li::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background-color: var(--mainColor); opacity: .1; pointer-events: none; -webkit-transition: width 1s ease-out .25s; -o-transition: width 1s ease-out .25s; transition: width 1s ease-out .25s; z-index: 0; } ul.rco-awards-list li.is-inview::after { width: 100% } ul.rco-awards-list li::before { content: ""; display: block; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 105%; height: 0; background: var(--mainColor); opacity: 1; pointer-events: none; -webkit-transition: height .4s ease; -o-transition: height .4s ease; transition: height .4s ease; z-index: 0; } .c-col-12 ul.rco-awards-list li::before { width: 100vw } ul.rco-awards-list li:hover::before { height: calc(100% + 1px); opacity: 1; } ul.rco-awards-list li:hover a { color: var(--mainBackground); } ul.rco-awards-list li a:hover { color: var(--mainBackground); } .light .rco-awards-head::after, .light ul.rco-awards-list li::after, .light ul.rco-awards-list li::before { background: #fff; } .light ul.rco-awards-list li a:hover, .light ul.rco-awards-list li:hover a { color: #191919 } ul.rco-awards-list li a span:first-child, ul.rco-awards-list li a span:last-child { opacity: .75; } /***** Awards Simple ------------------------------ */ .rco-awards.simple ul.rco-awards-list li a span:first-child { width: auto; float: left; margin-bottom: 0; } .rco-awards.simple ul.rco-awards-list li a span:last-child { width: auto; float: right; margin-bottom: 0; } .rco-awards.simple ul.rco-awards-list li a { display: block; width: 100%; padding-top: 2rem; padding-bottom: 2rem; } .rco-awards.simple ul.rco-awards-list li:first-child a { padding-top: 0; } .rco-awards.simple ul.rco-awards-list li::after { opacity: .2; } .rco-awards.simple ul.rco-awards-list li::before { left: 0; -webkit-transform: none; -ms-transform: none; transform: none; width: 0%; height: 1px; opacity: 1; -webkit-transition: width .65s ease-out; -o-transition: width .65s ease-out; transition: width .65s ease-out; } .rco-awards.simple ul.rco-awards-list li:hover::before { width: 100%; } .rco-awards.simple ul.rco-awards-list li a:hover { color: #191b1d; } @media only screen and (max-width: 750px) { /* Awards */ ul.rco-awards-list li a { -ms-flex-wrap: wrap; flex-wrap: wrap; } ul.rco-awards-list li a span:nth-child(2) { margin-bottom: 15px; } ul.rco-awards-list li a { padding-top: 1rem; padding-bottom: 1rem; } .rco-awards-head.detect-pov { display: none; } ul.rco-awards-list li a span { width: 100% !important; } ul.rco-awards-list li a span:last-child { text-align: left; } .rco-awards.simple ul.rco-awards-list li a span { width: auto !important; } .rco-awards.simple ul.rco-awards-list li a { padding-top: 1.5rem; padding-bottom: 1.5rem; } ul.rco-awards-list li a span { margin-bottom: 1em; } ul.rco-awards-list li a span:last-child { margin-bottom: 0; } } /* source: assets/css/_css/banner.css */ /** Dynamic Banner ------------------------------ */ .rco-dynamic-banner { display: block; width: 100%; height: var(--height); position: relative; } .rco-dynamic-banner .banner-background { width: 100%; height: 100%; } .rco-dynamic-banner .banner-background>* { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .rco-dynamic-banner .banner-content { position: absolute; bottom: 30px; left: 50px; } /** Text Wrapper ------------------------------ */ .site-header .text-wrapper *, .site-header .text-wrapper { margin-bottom: 0 } .text-wrapper.align-center { text-align: center; margin: 0 auto } .text-wrapper.align-left { text-align: left } .text-wrapper.align-right .anim_line { margin-left: auto; } .text-wrapper.align-center .anim_line { margin: 0 auto } span.inline-img { display: inline-block; line-height: 0.8; height: 0.8em; vertical-align: top; padding-right: 0.5rem; padding-left: 0.5rem; vertical-align: baseline; } span.inline-img img { height: 100%; } body.dark span.inline-img img { -webkit-filter: invert(100%); filter: invert(100%) } .text-wrapper span.text-indent { display: inline-block; vertical-align: middle; margin: 0 40px; } .text-wrapper span.text-indent.line { height: 0.05em; background: #191919; } .text-wrapper .material-icons.inline-icon { display: inline-block; font-size: inherit; line-height: inherit; vertical-align: bottom; overflow: hidden; } .text-wrapper .material-icons.inline-icon span { display: inline-block } .text-wrapper a { color: unset; text-decoration: none; } .text-wrapper> :not(.has-anim-text) a, .text-wrapper .has-anim-text a>div { position: relative } .text-wrapper> :not(.has-anim-text) a::after, .text-wrapper .has-anim-text a>div::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 0%; height: 0.07em; background: var(--mainColor); -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: width .5s cubic-bezier(0.65, 0.05, 0.36, 1); -o-transition: width .5s cubic-bezier(0.65, 0.05, 0.36, 1); transition: width .5s cubic-bezier(0.65, 0.05, 0.36, 1); } .has-anim-text.is-inview a>div::after { width: 100% } .text-wrapper> :not(.has-anim-text) a:hover::after, .text-wrapper .has-anim-text a:hover>div::after { -webkit-animation-name: toggleLine; animation-name: toggleLine; -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } .blend { --mainColor: #fff !important; mix-blend-mode: difference; position: relative; z-index: 9; } @media only screen and (max-width: 750px) { .rco-dynamic-banner { height: var(--mobileHeight) } .rco-dynamic-banner .banner-content { width: 100%; left: 15px; padding-right: 15px; box-sizing: border-box } } /* source: assets/css/_css/carousel.css */ /** Dynamic Carousel ------------------------------ */ .rco-dynamic-carousel { display: block; float: left; width: 100%; --w: auto; --h: auto; position: relative; z-index: 1; --wm: 80vw; --gap: 50px; margin-bottom: 1em; --mobileHeight: 'auto'; } .carousel--wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: var(--h) } .rco-dynamic-carousel.items-center .carousel--wrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center } .rco-dynamic-carousel.items-bottom .carousel--wrapper { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end } .parallax-on .carousel--item { padding-right: 0; margin-right: var(--gap) } .parallax-on .carousel--item img { will-change: transform; -o-object-position: center; object-position: center; height: 100%; -o-object-fit: cover; object-fit: cover; } .carousel--item { width: var(--w); height: auto; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; padding-right: var(--gap) } .carousel--item img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center } .carousel-controls { display: block; float: left; width: 100%; margin-bottom: 25px; } .carousel-controls>div { display: block; float: left; } .carousel-controls>div:nth-child(2) { float: right; } .carousel--navigation>span:first-child::after, .carousel--fraction>span:first-child::after { content: ""; display: inline-block; width: 15px; height: 2px; background: var(--mainColor); vertical-align: middle; margin: 0 7.5px; margin-top: -2px; } .carousel--navigation span, .carousel--fraction>span { display: inline-block; float: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; } .carousel--navigation span { cursor: pointer } .carousel--navigation span.disabled { opacity: 0.3; pointer-events: none } .carousel--captions { margin-top: 50px; } .carousel--item .parallax-wrap { overflow: hidden } .eq-height .carousel--item { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .eq-height .carousel--item * { height: 100%; } .carousel--item .project-image { width: 100%; -o-object-fit: cover; object-fit: cover; } .ndc-projects .carousel--wrapper { margin-bottom: 100px } .carousel--item .project-meta { display: block; float: left; width: 100%; margin-top: 15px; } .carousel--item .carousel-controls>div, .carousel--item .project-meta>div { display: inline-block; float: left; } .carousel--item .project-meta>div:last-child { float: right; } .rco-dynamic-carousel .rco-video { height: 100%; } .rco-dynamic-carousel.no-margin .single-project { margin-bottom: 0; } @media only screen and (max-width: 750px) { .carousel--item { width: var(--wm); } .carousel--item .rco-info-box { padding-right: 0; } } /* source: assets/css/_css/grid.css */ /** Filterable Grid ------------------------------ */ .rco-filterable-grid { display: block; float: left; width: 100%; } .nfg--wrapper { display: grid; grid-template-columns: var(--cols); --cols: repeat(3, 1fr); grid-column-gap: var(--gap); --gap: 50px; } .nfg--image img { display: block; width: 100%; height: 100%; object-fit: cover; } .nfg--filters--wrapper { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); padding: 1em 2em; background: var(--mainColor); color: var(--mainBackground); border-radius: 15px; opacity: 0; pointer-events: none; z-index: 99; transition: opacity .4s ease; width: fit-content } .nfg--item { margin-bottom: 60px; } .nfg--image { border-radius: 15px; overflow: hidden; } .nfg--filters--wrapper.active { opacity: 1; visibility: visible; pointer-events: all } .nfg--filters--wrapper ul li { display: inline-block; padding: 0 0.5em; text-transform: uppercase; cursor: pointer; opacity: .5; font-size: 14px; transition: opacity .3s ease; } .nfg--filters--wrapper ul li.active { opacity: 1; } @media only screen and (max-width: 750px) { .nfg--wrapper { --cols: repeat(1, 1fr); } .nfg--filters--wrapper { padding: 0.75em 1em; } .nfg--filters--wrapper { transform: none; left: 15px; bottom: 15px; } .nfg--filters--wrapper ul li { display: block; padding: 0.5em 0; } } /** Dynamic Grid ------------------------------ */ .rco-dynamic-grid { display: block; width: 100%; --gc: repeat(12, 1fr); --gap: 0; --rowHeight: auto; } .grid--wrapper { display: -ms-grid; display: grid; -ms-grid-columns: var(--gc); grid-template-columns: var(--gc); width: 100%; -ms-grid-rows: var(--rowHeight); grid-template-rows: var(--rowHeight); gap: var(--gap); position: relative; } .grid--wrapper>*:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1 } .rco-dynamic-grid.cascade .grid--item { --c: 1; --r: 1; } .grid--item { --c: auto; --r: auto; } .grid--item { display: block; grid-column: var(--c); grid-row: var(--r); overflow: hidden; } .grid--item img { width: 100%; } .parallax-on .grid--item img { -o-object-fit: cover; object-fit: cover } .equal .grid--item img { height: 100%; -o-object-fit: cover; object-fit: cover } .grid--item .parallax-wrap { overflow: hidden; height: 100% } .rco-dynamic-grid.ndg-projects.masonry .grid--item:nth-child(5n - 4) { --c: 1 / 4 } .rco-dynamic-grid.ndg-projects.masonry .grid--item:nth-child(5n - 3) { --c: 5 / 9 } .rco-dynamic-grid.ndg-projects.masonry .grid--item:nth-child(5n - 2) { --c: 2 / 8 } .rco-dynamic-grid.ndg-projects.masonry .grid--item:nth-child(5n - 1) { --c: 1 / 5 } .rco-dynamic-grid.ndg-projects.masonry .grid--item:nth-child(5n) { --c: 6 / 9 } .rco-dynamic-grid.ndg-projects .grid--item { --c: span 4 } .rco-dynamic-grid.col-6 .grid--item { --c: span 2 } .rco-dynamic-grid.col-6.equal-height .grid--item, .rco-dynamic-grid.col-6.equal-height .grid--item img, .rco-dynamic-grid.col-6.equal-height .grid--item .single-image { height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (max-width: 750px) { .rco-dynamic-grid.ndg-projects { --gc: repeat(3, 1fr) !important; --gap: 50px !important; } .rco-dynamic-grid.ndg-projects .grid--item { --c: span 3 !important; } } /* source: assets/css/_css/cookies.css */ /* ========================================================== Rurally · Privacidade / LGPD ========================================================== */ .rco-privacy{position:relative;z-index:9998;font-family:"DM Sans",sans-serif} .rco-privacy [hidden]{display:none!important} .rco-privacy-bar{ position:fixed; left:18px; right:18px; bottom:18px; z-index:9998; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:34px; align-items:end; padding:22px 24px; border:1px solid rgba(255,255,255,.15); border-radius:16px; background:rgba(17,17,17,.97); color:#fff; box-shadow:0 24px 80px rgba(0,0,0,.22); backdrop-filter:blur(18px); transform:translateY(28px); opacity:0; transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .3s ease; } .rco-privacy-bar.is-visible{transform:translateY(0);opacity:1} .rco-privacy-bar__copy{max-width:800px} .rco-privacy-bar__copy strong{display:block;margin:0 0 6px;font-size:15px;font-weight:500;letter-spacing:-.015em} .rco-privacy-bar__copy p{max-width:760px;margin:0;color:rgba(255,255,255,.66);font-size:12px;line-height:1.55} .rco-privacy-links{display:flex;flex-wrap:wrap;gap:7px 15px;margin-top:11px} .rco-privacy-links a,.rco-privacy-links button{ padding:0; border:0; border-bottom:1px solid rgba(255,255,255,.34); background:transparent; color:rgba(255,255,255,.72); font:inherit; font-size:10px; line-height:1.55; text-decoration:none; cursor:pointer; transition:border-color .2s ease,color .2s ease; } .rco-privacy-links a:hover,.rco-privacy-links button:hover{color:#fff;border-color:#fff} .rco-privacy-bar__actions{display:flex;align-items:center;gap:8px;white-space:nowrap} .rco-privacy-btn{ min-height:39px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; border-radius:999px; font:inherit; font-size:10.5px; font-weight:500; letter-spacing:.015em; cursor:pointer; transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease; } .rco-privacy-btn:hover{transform:translateY(-1px)} .rco-privacy-btn--ghost{border:0;background:transparent;color:rgba(255,255,255,.72)} .rco-privacy-btn--ghost:hover{color:#fff} .rco-privacy-btn--secondary{border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff} .rco-privacy-btn--secondary:hover{border-color:#fff} .rco-privacy-btn--primary{border:1px solid #fff;background:#fff;color:#111} .rco-privacy-btn--primary:hover{background:#ecece9;border-color:#ecece9} /* Preferences */ .rco-privacy-modal-backdrop{ position:fixed; inset:0; z-index:9998; background:rgba(12,12,12,.48); backdrop-filter:blur(5px); opacity:0; transition:opacity .25s ease; } .rco-privacy-modal-backdrop.is-visible{opacity:1} .rco-privacy-modal{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:22px; opacity:0; transition:opacity .25s ease; } .rco-privacy-modal.is-visible{opacity:1} .rco-privacy-modal__panel{ width:min(620px,100%); max-height:min(760px,calc(100svh - 44px)); overflow:auto; padding:28px; border:1px solid rgba(17,17,17,.12); border-radius:18px; background:#f4f2ed; color:#111; box-shadow:0 34px 110px rgba(0,0,0,.26); transform:translateY(16px) scale(.985); transition:transform .36s cubic-bezier(.16,1,.3,1); } .rco-privacy-modal.is-visible .rco-privacy-modal__panel{transform:none} .rco-privacy-modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;padding-bottom:22px;border-bottom:1px solid rgba(17,17,17,.14)} .rco-privacy-modal__header span{display:block;margin-bottom:8px;color:rgba(17,17,17,.43);font-size:9px;font-weight:500;letter-spacing:.13em;text-transform:uppercase} .rco-privacy-modal__header h2{margin:0;font-family:"Darker Grotesque",sans-serif;font-size:38px;font-weight:450;line-height:.96;letter-spacing:-.045em} .rco-privacy-close{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(17,17,17,.16);border-radius:50%;background:transparent;color:#111;font:inherit;font-size:23px;font-weight:300;line-height:1;cursor:pointer;transition:background .2s,color .2s} .rco-privacy-close:hover{background:#111;color:#fff} .rco-privacy-modal__intro{max-width:520px;margin:20px 0 6px;color:rgba(17,17,17,.62);font-size:12px;line-height:1.6} .rco-privacy-options{border-top:1px solid rgba(17,17,17,.14)} .rco-privacy-option{ min-height:94px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center; border-bottom:1px solid rgba(17,17,17,.14); } .rco-privacy-option strong{display:block;margin-bottom:4px;font-size:13px;font-weight:500} .rco-privacy-option p{max-width:450px;margin:0;color:rgba(17,17,17,.55);font-size:10.5px;line-height:1.5} .rco-privacy-always{color:rgba(17,17,17,.48);font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap} .rco-privacy-switch{position:relative;width:45px;height:26px;display:block;flex:0 0 auto;cursor:pointer} .rco-privacy-switch input{position:absolute;opacity:0;pointer-events:none} .rco-privacy-switch span{position:absolute;inset:0;border:1px solid rgba(17,17,17,.2);border-radius:999px;background:#dfddd7;transition:background .22s,border-color .22s} .rco-privacy-switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.15);transition:transform .22s} .rco-privacy-switch input:checked + span{background:#111;border-color:#111} .rco-privacy-switch input:checked + span::after{transform:translateX(19px)} .rco-privacy-switch input:focus-visible + span{outline:2px solid #111;outline-offset:3px} .rco-privacy-modal__footer{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:22px} .rco-privacy-modal__footer .rco-privacy-links{margin:0} .rco-privacy-modal__footer .rco-privacy-links a{color:rgba(17,17,17,.6);border-color:rgba(17,17,17,.25)} .rco-privacy-modal__footer .rco-privacy-links a:hover{color:#111;border-color:#111} .rco-privacy-modal__footer .rco-privacy-btn--primary{min-width:160px;border-color:#111;background:#111;color:#fff} .rco-privacy-modal__footer .rco-privacy-btn--primary:hover{background:#2c2c2c} body.rco-privacy-lock{overflow:hidden} @media(max-width:980px){ .rco-privacy-bar{grid-template-columns:1fr;gap:17px} .rco-privacy-bar__actions{justify-content:flex-end} } @media(max-width:680px){ .rco-privacy-bar{left:10px;right:10px;bottom:10px;padding:18px;border-radius:14px} .rco-privacy-bar__copy strong{font-size:14px} .rco-privacy-bar__copy p{font-size:11px} .rco-privacy-bar__actions{display:grid;grid-template-columns:1fr 1fr;white-space:normal} .rco-privacy-bar__actions .rco-privacy-btn--ghost{grid-column:1/-1;min-height:30px;justify-content:flex-start;padding:0} .rco-privacy-btn{min-height:42px;padding:0 11px} .rco-privacy-modal{padding:10px} .rco-privacy-modal__panel{max-height:calc(100svh - 20px);padding:20px;border-radius:14px} .rco-privacy-modal__header h2{font-size:34px} .rco-privacy-option{min-height:104px;gap:16px} .rco-privacy-modal__footer{align-items:stretch;flex-direction:column} .rco-privacy-modal__footer .rco-privacy-btn--primary{width:100%} } @media(prefers-reduced-motion:reduce){ .rco-privacy-bar,.rco-privacy-modal,.rco-privacy-modal__panel,.rco-privacy-modal-backdrop,.rco-privacy-btn,.rco-privacy-switch span,.rco-privacy-switch span::after{transition:none!important} } .rco-footer-privacy-trigger{ display:inline; padding:0; border:0; border-bottom:1px solid currentColor; background:transparent; color:inherit; font:inherit; line-height:inherit; cursor:pointer; opacity:.88; } .rco-footer-privacy-trigger:hover{opacity:1} /* source: assets/css/_css/vagas.css */ /* Área de arraste */ #drop_file_zone { background-color: #f9f9f9; border: 1px dashed #ccc; width: 100%; max-width: 95%; height: 200px; padding: 16px; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 20px auto; transition: border-color 0.3s ease, background-color 0.3s ease; text-transform: uppercase; } #drop_file_zone:hover { border-color: #888; background-color: #f1f1f1; } #drag_upload_file { text-align: center; color: #555; } .custom-file-button { display: inline-block; background-color: #151515; color: #fff; padding: 10px 20px; cursor: pointer; margin-top: 10px; transition: background-color 0.3s; } .custom-file-button:hover { background-color: #151515; } #resume-upload { display: none; } /* Ajuste para o label e select */ .field-wrap select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: transparent; color: var(--mainColor); padding-top: 15px; padding-bottom: 15px; /* padding: 15px 20px;*/ border: 0px solid var(--mainColor); border-radius: 0px; width: 100%; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; /* font-weight: bold;*/ } .field-wrap select:focus, .field-wrap select:valid { outline: none; border-color: var(--mainColor); } .field-wrap select:focus + label, .field-wrap select:valid + label { top: -10px; font-size: 0.9rem; color: var(--mainColor); } /* Campo de texto para "Outros" */ #vaga-outra { display: none; margin-top: 10px; } .sticky-content{ border: solid 1px #d4d4d4; overflow: auto; height: auto; padding: 30px; } /* source: assets/css/_css/dynamic-carousel.css */ /** Dynamic Carousel ------------------------------ */ .rco-dynamic-carousel { display: block; float: left; width: 100%; --w: auto; --h: auto; position: relative; z-index: 1; --wm: 80vw; --gap: 50px; margin-bottom: 1em; --mobileHeight: 'auto'; } .carousel--wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: var(--h) } .rco-dynamic-carousel.items-center .carousel--wrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center } .rco-dynamic-carousel.items-bottom .carousel--wrapper { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end } .parallax-on .carousel--item { padding-right: 0; margin-right: var(--gap) } .parallax-on .carousel--item img { will-change: transform; -o-object-position: center; object-position: center; height: 100%; -o-object-fit: cover; object-fit: cover; } .carousel--item { width: var(--w); height: auto; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; padding-right: var(--gap) } .carousel--item img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center } .carousel-controls { display: block; float: left; width: 100%; margin-bottom: 25px; } .carousel-controls > div { display: block; float: left; } .carousel-controls > div:nth-child(2) { float: right; } .carousel--navigation > span:first-child::after, .carousel--fraction > span:first-child::after { content: ""; display: inline-block; width: 15px; height: 2px; background: var(--mainColor); vertical-align: middle; margin: 0 7.5px; margin-top: -2px; } .carousel--navigation span, .carousel--fraction > span { display: inline-block; float: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; } .carousel--navigation span { cursor: pointer } .carousel--navigation span.disabled { opacity: 0.3; pointer-events: none } .carousel--captions { margin-top: 50px; } .carousel--item .parallax-wrap { overflow: hidden } .eq-height .carousel--item { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .eq-height .carousel--item * { height: 100%; } .carousel--item .project-image { width: 100%; -o-object-fit: cover; object-fit: cover; } .ndc-projects .carousel--wrapper { margin-bottom: 100px } .carousel--item .project-meta { display: block; float: left; width: 100%; margin-top: 15px; } .carousel--item .carousel-controls > div, .carousel--item .project-meta > div { display: inline-block; float: left; } .carousel--item .project-meta > div:last-child { float: right; } .rco-dynamic-carousel .rco-video { height: 100%; } .rco-dynamic-carousel.no-margin .single-project { margin-bottom: 0; } /* source: assets/css/_css/start-project.css */ /* ===================== WIZARD – CSS AUTÔNOMO ===================== */ /* Container */ .section.novo-projeto { padding-top: 0; } .wrapper-small.min { margin-top: 8vh; margin-bottom: 8vh; } /* ---------- Barra de progresso ---------- */ .wizard-progress { margin: 24px 0 18px; } .wizard-progress__track { width: 100%; height: 6px; border-radius: 6px; background: var(--secondaryBackground, rgba(0,0,0,.12)); overflow: hidden; } .wizard-progress__bar { height: 100%; width: 0; background: var(--mainColor); opacity: .28; border-radius: 6px; transition: width .35s ease; } .wizard-progress__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: .9rem; opacity: .7; } /* ---------- Form + Grid ---------- */ .rco-form.wizard { display: block; width: 100%; } .rco-form.wizard > form { width: 100% !important; max-width: none !important; margin: 0 !important; display: block; } .rco-form.wizard .wizard-step { display: none; width: 100%; } .rco-form.wizard .wizard-step.is-active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 22px; } .rco-form.wizard .wizard-step .field-wrap, .rco-form.wizard .wizard-step .message-wrap { grid-column: 1 / -1; } .rco-form.wizard .wizard-step .field-wrap.full-wrap { grid-column: 1 / -1 !important; } .rco-form.wizard .wizard-step .field-wrap.half-wrap { grid-column: span 1 !important; } .rco-form.wizard .wizard-step > div { float: none !important; width: auto !important; position: relative; } /* ---------- Inputs “linha” com label flutuante ---------- */ .rco-form .field-wrap { position: relative; padding-top: 22px; margin-bottom: 22px; } .rco-form input[type="text"], .rco-form input[type="email"], .rco-form input[type="tel"], .rco-form input[type="number"], .rco-form input[type="url"], .rco-form input[type="search"], .rco-form input[type="password"], .rco-form select, .rco-form textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.22); padding: 10px 0 12px; border-radius: 0 !important; color: var(--textColor, #eaeaea); outline: none; box-shadow: none; transition: border-color .18s ease, color .18s ease; font-size: 18px; line-height: 1.5; } /* >>> NÃO pega o label do checkbox */ .rco-form .field-wrap > label:not(.checkline) { position: absolute; left: 0; top: 0; font-size: .95rem; line-height: 1; opacity: .65; transition: all .18s ease; pointer-events: none; } .rco-form .field-wrap.is-filled > label:not(.checkline), .rco-form .field-wrap.is-focused > label:not(.checkline) { transform: translateY(-2px); font-size: .85rem; opacity: .9; } /* Foco */ .rco-form input:focus, .rco-form select:focus, .rco-form textarea:focus { border-bottom-color: var(--mainColor, #7dd3fc); } /* Validação só após “toque” (classe .dirty) */ .rco-form input:not([type="checkbox"]):not([type="file"]).dirty[required]:invalid, .rco-form select.dirty[required]:invalid, .rco-form textarea.dirty[required]:invalid { border-bottom-color: #ef4444; } .rco-form input:not([type="checkbox"]):not([type="file"]).dirty[required]:valid, .rco-form select.dirty[required]:valid, .rco-form textarea.dirty[required]:valid { border-bottom-color: var(--mainColor, #7dd3fc); } /* Placeholder e hint */ .rco-form input::placeholder, .rco-form textarea::placeholder { opacity: .35; } .rco-form .field-wrap .hint { display: block; margin-top: 6px; font-size: .8rem; line-height: 1.2; opacity: .55; } /* Autofill Safari/Chrome */ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--textColor, #eaeaea); transition: background-color 9999s ease-out 0s; box-shadow: 0 0 0px 1000px transparent inset; } /* intl-tel-input em linha (se existir) */ .iti input { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.22) !important; border-radius: 0 !important; padding-left: 54px !important; } .iti--allow-dropdown .iti__flag-container { top: 2px; } /* ---------- Checkline (checkbox clicável) ---------- */ .checkline { display: inline-flex; gap: 10px; align-items: flex-start; cursor: pointer; user-select: none; position: static !important; pointer-events: auto !important; } .checkline input[type="checkbox"] { margin-top: 2px; } .checkline > span { position: static !important; font-size: .95rem; opacity: .85; pointer-events: none; } /* ---------- Upload “bonito” ---------- */ .file-wrap { padding-top: 28px; } .file-inline { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.22); padding: 10px 0 12px; } .file-inline input[type="file"] { position: absolute; left:-9999px; width:1px; height:1px; opacity:0; } .file-inline .file-button { background: transparent; border: 1px solid rgba(255,255,255,.35); padding: 6px 12px; border-radius: 6px; cursor: pointer; color: var(--textColor, #eaeaea); } .file-inline .file-name { opacity: .7; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .file-inline:focus-within { border-bottom-color: var(--mainColor, #7dd3fc); } /* ---------- Navegação (reforçado) ---------- */ .rco-form.wizard .wizard-nav { grid-column: 1 / -1; position: relative !important; left: auto !important; right: auto !important; transform: none !important; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; gap: 12px; margin-top: 28px !important; padding-top: 0 !important; } .rco-form.wizard .wizard-nav .button { margin: 0 12px !important; } /* limpa interferência do tema */ .rco-form.wizard > form > div::before, .rco-form.wizard > form > div::after, .rco-form.wizard .wizard-step + .wizard-nav, .rco-form.wizard .wizard-nav::before, .rco-form.wizard .wizard-nav::after, .wrapper-small.min .wizard-nav, .wrapper-small.min .wizard-nav::before, .wrapper-small.min .wizard-nav::after, .c-col-10 .wizard-nav, .c-col-10 .wizard-nav::before, .c-col-10 .wizard-nav::after, .page-content .wizard-nav, .page-content .wizard-nav::before, .page-content .wizard-nav::after { border: 0 !important; background: none !important; box-shadow: none !important; content: "" !important; height: 0 !important; display: block; } .rco-form.wizard hr, .rco-form.wizard .rco-divider { display: none !important; } /* Responsivo */ @media (max-width: 768px) { .rco-form.wizard .wizard-step.is-active { grid-template-columns: 1fr; column-gap: 0; } .rco-form.wizard .wizard-step .field-wrap.half-wrap { grid-column: 1 / -1 !important; } } @media (max-width: 600px) { .rco-form.wizard .wizard-nav { flex-wrap: wrap; gap: 10px 12px; } .rco-form.wizard .wizard-nav .button--prev, .rco-form.wizard .wizard-nav .button--next { flex: 1 1 calc(50% - 6px); max-width: 400px; } .rco-form.wizard .wizard-nav .button--finish { flex: 1 1 100%; max-width: 500px; } .rco-form.wizard .wizard-nav .button--prev::before { content: "‹"; margin-right: 6px; font-size: 1.1em; line-height: 0; } .rco-form.wizard .wizard-nav .button--next::after { content: "›"; margin-left: 6px; font-size: 1.1em; line-height: 0; } } /* utilidades */ .is-hidden { display: none !important; } .button.is-loading { pointer-events:none; opacity:.7; } .button.is-loading::after { content: "…"; margin-left: 8px; } /* honeypot invisível mas presente pro bot */ .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* ---- Destaque e animação de erro no consentimento ---- */ .has-consent-error .checkline { outline: 1px solid #ef4444; outline-offset: 6px; } @keyframes rco-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .checkline.rco-shake { animation: rco-shake .35s ease; } /* arquivo inválido (feedback visual) */ .file-inline.is-error { border-bottom-color: #ef4444; } /* mensagem de erro do consentimento */ .hint-error { color:#ef4444; opacity:.9; display:block; margin-top:6px; font-size:.85rem; } /* pode colar no final do seu